Dramatiker: Ein umfassender Überblick über das Web UI Automation Testing Framework

PlayWright ist ein von Microsoft entwickeltes Web-UI-Automatisierungstest-Framework.

Ziel ist es, ein plattform-, sprach- und browserübergreifendes Automatisierungstest-Framework bereitzustellen, das auch mobile Browser unterstützt.

Wie auf der offiziellen Homepage beschrieben:

• Automatisches Warten, intelligente Behauptungen für Seitenelemente und Ausführungsverfolgung machen es äußerst effektiv bei der Bewältigung der Instabilität von Webseiten.
• Es steuert Browser in einem anderen Prozess als dem, der den Test ausführt, beseitigt die Einschränkungen von In-Process-Testläufern und unterstützt die Shadow-DOM-Penetration.
• PlayWright erstellt für jeden Test einen Browserkontext. Ein Browserkontext entspricht einem brandneuen Browserprofil und ermöglicht eine vollständige Testisolierung ohne Kosten. Das Erstellen eines neuen Browserkontexts dauert nur wenige Millisekunden.
• Bietet Funktionen wie Codegenerierung, Schritt-für-Schritt-Debugging und Trace-Viewer.

---

PlayWright gegen Selenium gegen Cypress

Welche sind die besten derzeit verfügbaren Test-Frameworks für die Web-UI-Automatisierung? Zu den herausragenden Optionen gehören das zehn Jahre alte Selenium, das kürzlich beliebte Cypress und das, das wir hier vorstellen – PlayWright. Wie unterscheiden sie sich? Nachfolgend finden Sie einen zusammengefassten Vergleich als Referenz

Feature	PlayWright	Selenium	Cypress
Supported Languages	JavaScript, Java, C#, Python	JavaScript, Java, C#, Python, Ruby	JavaScript/TypeScript
Supported Browsers	Chrome, Edge, Firefox, Safari	Chrome, Edge, Firefox, Safari, IE	Chrome, Edge, Firefox, Safari
Testing Framework	Frameworks for supported languages	Frameworks for supported languages	Frameworks for supported languages
Usability	Easy to use and configure	Complex setup with a learning curve	Easy to use and configure
Code Complexity	Simple	Moderate	Simple
DOM Manipulation	Simple	Moderate	Simple
Community Maturity	Improving gradually	Highly mature	Fairly mature
Headless Mode Support	Yes	Yes	Yes
Concurrency Support	Supported	Supported	Depends on CI/CD tools
iframe Support	Supported	Supported	Supported via plugins
Driver	Not required	Requires a browser-specific driver	Not required
Multi-Tab Operations	Supported	Not supported	Supported
Drag and Drop	Supported	Supported	Supported
Built-in Reporting	Yes	No	Yes
Cross-Origin Support	Supported	Supported	Supported
Built-in Debugging	Yes	No	Yes
Automatic Wait	Yes	No	Yes
Built-in Screenshot/Video	Yes	No video recording	Yes

Wichtige Vergleiche:

• Unterstützte Sprachen: PlayWright und Selenium unterstützen Java, C# und Python, wodurch sie bei Testingenieuren beliebter werden, die möglicherweise nicht mit JavaScript/TypeScript vertraut sind.
• Technischer Ansatz: Sowohl PlayWright als auch Selenium verwenden das Remote Debugging Protocol von Google, um Chromium-basierte Browser zu steuern. Für Browser wie Firefox ohne solche Protokolle verwenden sie JavaScript-Injection. Selenium kapselt dies in einem Treiber, während PlayWright es direkt aufruft. Cypress hingegen verwendet JavaScript zur Steuerung von Browsern.
• Browser-Unterstützung: Selenium unterstützt Internet Explorer, was irrelevant ist, da IE ausläuft.
• Benutzerfreundlichkeit: Alle drei Frameworks haben eine Lernkurve. Allerdings sind PlayWright und Cypress für einfache Szenarien benutzerfreundlicher als Selenium.

---

Erste Schritte

Obwohl PlayWright mehrere Sprachen unterstützt, ist es stark auf Node.js angewiesen. Unabhängig davon, ob Sie die Python- oder Java-Version verwenden, benötigt PlayWright während der Initialisierung eine Node.js-Umgebung und lädt einen Node.js-Treiber herunter. Daher konzentrieren wir uns in diesem Leitfaden auf JavaScript/TypeScript.

Installation und Demo

1. Stellen Sie sicher, dass Node.js installiert ist.
2. Initialisieren Sie ein PlayWright-Projekt mit npm oder Yarn:

   # Using npm
   npm init playwright@latest

   # Using yarn
   yarn create playwright

1. Folgen Sie den Anweisungen:
   • Wählen Sie TypeScript oder JavaScript (Standard: TypeScript).
   • Geben Sie den Namen des Testverzeichnisses an.
   • Entscheiden Sie, ob von PlayWright unterstützte Browser installiert werden sollen (Standard: True).

Wenn Sie Browser herunterladen, lädt PlayWright Chromium, Firefox und WebKit herunter, was einige Zeit dauern kann. Dieser Vorgang findet nur während der ersten Einrichtung statt, es sei denn, die PlayWright-Version wird aktualisiert.

Projektstruktur

Nach der Initialisierung erhalten Sie eine Projektvorlage:

playwright.config.ts    # PlayWright configuration file
package.json            # Node.js configuration file
package-lock.json       # Node.js dependency lock file
tests/                  # Your test directory
  example.spec.ts       # Template test case
tests-examples/         # Example tests directory
  demo-todo-app.spec.ts # Example test case

Führen Sie den Beispieltestfall aus:

npx playwright test

Die Tests werden im Hintergrund ausgeführt (im Headless-Modus) und die Ergebnisse werden wie folgt angezeigt:

Running 6 tests using 6 workers

  6 passed (10s)

To open the last HTML report run:

  npx playwright show-report

---

Beispiel-Quellcode

Hier ist der Testfall example.spec.ts:

import { test, expect } from '@playwright/test';

test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.getByRole('link', { name: 'Get started' }).click();
  await expect(page).toHaveURL(/.*intro/);
});

• Erster Test: Überprüft, ob der Seitentitel „Dramatiker“ enthält.
• Zweiter Test: Klicken Sie auf den Link „Erste Schritte“ und überprüfen Sie die URL.

Jede Testmethode hat:

• Ein Testname (z. B. „hat Titel“).
• Eine Funktion zum Ausführen der Testlogik.

Zu den wichtigsten Methoden gehören:

• page.goto: Navigiert zu einer URL.
• erwarten(page).toHaveTitle: Legt den Seitentitel fest.
• page.getByRole: Sucht ein Element anhand seiner Rolle.
• Warten: Wartet auf den Abschluss asynchroner Vorgänge.

---

Ausführen von Tests über die Befehlszeile

Hier sind allgemeine Befehle:

• Führen Sie alle Tests durch:

   # Using npm
   npm init playwright@latest

   # Using yarn
   yarn create playwright

• Führen Sie eine bestimmte Testdatei aus:

playwright.config.ts    # PlayWright configuration file
package.json            # Node.js configuration file
package-lock.json       # Node.js dependency lock file
tests/                  # Your test directory
  example.spec.ts       # Template test case
tests-examples/         # Example tests directory
  demo-todo-app.spec.ts # Example test case

• Debuggen Sie einen Testfall:

npx playwright test

---

Codeaufzeichnung

Verwenden Sie die Codegen-Funktion, um Interaktionen aufzuzeichnen:

Running 6 tests using 6 workers

  6 passed (10s)

To open the last HTML report run:

  npx playwright show-report

Aufgezeichneter Code kann in Ihre Dateien kopiert werden. Hinweis: Der Rekorder kann komplexe Aktionen wie Schweben möglicherweise nicht verarbeiten.

---

Ausführlicher Leitfaden für Dramatiker

Aktionen und Verhaltensweisen

In diesem Abschnitt werden einige typische Playwright-Aktionen für die Interaktion mit Seitenelementen vorgestellt. Beachten Sie, dass das zuvor eingeführte Locator-Objekt das Element auf der Seite während seiner Erstellung nicht tatsächlich lokalisiert. Selbst wenn das Element nicht auf der Seite vorhanden ist, werden durch die Verwendung der Element-Locator-Methoden zum Abrufen eines Locator-Objekts keine Ausnahmen ausgelöst. Die eigentliche Elementsuche erfolgt nur während der Interaktion. Dies unterscheidet sich von der findElement-Methode von Selenium, die direkt nach dem Element auf der Seite sucht und eine Ausnahme auslöst, wenn das Element nicht gefunden wird.

Texteingabe

Verwenden Sie die Füllmethode für die Texteingabe, hauptsächlich für , oder Elemente mit dem Attribut [contenteditable]:<br>

import { test, expect } from '@playwright/test';

test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.getByRole('link', { name: 'Get started' }).click();
  await expect(page).toHaveURL(/.*intro/);
});

Kontrollkästchen und Radio

Verwenden Sie locator.setChecked() oder locator.check(), um mit input[type=checkbox], input[type=radio] oder Elementen mit dem Attribut [role=checkbox] zu interagieren:

  npx playwright test

Wählen Sie „Steuerung“.

Verwenden Sie locator.selectOption(), um mit zu interagieren. Elemente:

  npx playwright test landing-page.spec.ts

Mausklicks

Grundfunktionen:

  npx playwright test --debug

Für Elemente, die von anderen abgedeckt werden, verwenden Sie einen erzwungenen Klick:

npx playwright codegen https://leapcell.io/

Oder lösen Sie das Klickereignis programmgesteuert aus:

// Text input
await page.getByRole('textbox').fill('Peter');

Zeichen eingeben

Die Methode locator.type() simuliert die zeichenweise Eingabe und löst Keydown-, Keyup- und Keypress-Ereignisse aus:

await page.getByLabel('I agree to the terms above').check();

expect(await page.getByLabel('Subscribe to newsletter').isChecked()).toBeTruthy();

// Uncheck
await page.getByLabel('XL').setChecked(false);

Spezialschlüssel

Verwenden Sie locator.press() für Sondertasten:

// Select by value
await page.getByLabel('Choose a color').selectOption('blue');

// Select by label
await page.getByLabel('Choose a color').selectOption({ label: 'Blue' });

// Multi-select
await page.getByLabel('Choose multiple colors').selectOption(['red', 'green', 'blue']);

Zu den unterstützten Tasten gehören Backquote, Minus, Gleichheit, Backslash, Backspace, Tab, Löschen, Escape, ArrowDown, Ende, Enter, Home, Insert, PageDown, PageUp, ArrowRight, ArrowUp, F1-F12, Digit0-Digit9 und KeyA -KeyZ.

Datei-Upload

Verwenden Sie locator.setInputFiles(), um Dateien für den Upload anzugeben. Es werden mehrere Dateien unterstützt:

// Left click
await page.getByRole('button').click();

// Double click
await page.getByText('Item').dblclick();

// Right click
await page.getByText('Item').click({ button: 'right' });

// Shift+click
await page.getByText('Item').click({ modifiers: ['Shift'] });

// Hover
await page.getByText('Item').hover();

// Click at specific position
await page.getByText('Item').click({ position: { x: 0, y: 0 } });

Fokuselement

Verwenden Sie locator.focus(), um sich auf ein Element zu konzentrieren:

   # Using npm
   npm init playwright@latest

   # Using yarn
   yarn create playwright

Drag-and-Drop

Der Drag-and-Drop-Vorgang umfasst vier Schritte:

1. Bewegen Sie die Maus über das ziehbare Element.
2. Drücken Sie die linke Maustaste.
3. Bewegen Sie die Maus an die Zielposition.
4. Lassen Sie die linke Maustaste los.

Sie können die Methode locator.dragTo() verwenden:

playwright.config.ts    # PlayWright configuration file
package.json            # Node.js configuration file
package-lock.json       # Node.js dependency lock file
tests/                  # Your test directory
  example.spec.ts       # Template test case
tests-examples/         # Example tests directory
  demo-todo-app.spec.ts # Example test case

Alternativ können Sie den Prozess manuell implementieren:

npx playwright test

Dialogbehandlung

Standardmäßig bricht Playwright Dialoge wie Warnung, Bestätigung und Aufforderung automatisch ab. Sie können einen Dialoghandler vorab registrieren, um Dialoge zu akzeptieren:

Running 6 tests using 6 workers

  6 passed (10s)

To open the last HTML report run:

  npx playwright show-report

Umgang mit neuen Seiten

Wenn eine neue Seite erscheint, können Sie das Popup-Ereignis verwenden, um damit umzugehen:

import { test, expect } from '@playwright/test';

test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.getByRole('link', { name: 'Get started' }).click();
  await expect(page).toHaveURL(/.*intro/);
});

---

Die beste Plattform für Dramatiker: Leapcell

Leapcell ist eine moderne Cloud-Computing-Plattform, die für verteilte Anwendungen entwickelt wurde. Es basiert auf einem Pay-as-you-go-Modell ohne Leerlaufkosten, sodass Sie nur für die Ressourcen bezahlen, die Sie nutzen.

Einzigartige Vorteile von Leapcell für Dramatikeranwendungen

1. Kosteneffizienz

   • Pay-as-you-go: Vermeiden Sie Ressourcenverschwendung bei wenig Verkehr und skalieren Sie in Spitzenzeiten automatisch hoch.
   • Beispiel aus der Praxis: Nach den Berechnungen von getdeploying.com kostet beispielsweise die Miete einer virtuellen Maschine mit 1 vCPU und 2 GB RAM in herkömmlichen Cloud-Diensten etwa 25 US-Dollar pro Monat. Bei Leapcell können 25 US-Dollar einen Dienst unterstützen, der 6,94 Millionen Anfragen mit einer durchschnittlichen Antwortzeit von 60 ms bearbeitet, was Ihnen ein besseres Preis-Leistungs-Verhältnis bietet.

2. Entwicklererfahrung

   • Benutzerfreundlichkeit: Intuitive Benutzeroberfläche mit minimalen Einrichtungsanforderungen.
   • Automatisierung: Vereinfacht Entwicklung, Tests und Bereitstellung.
   • Nahtlose Integration: Unterstützt Go, Python, Node.js, Rust und mehr.

3. Skalierbarkeit und Leistung

   • Automatische Skalierung: Passt Ressourcen dynamisch an, um eine optimale Leistung aufrechtzuerhalten.
   • Asynchrone Optimierung: Bewältigt Aufgaben mit hoher Parallelität problemlos.
   • Globale Reichweite: Zugriff mit geringer Latenz, unterstützt durch verteilte Rechenzentren.

Weitere Bereitstellungsbeispiele finden Sie in der Dokumentation.

Das obige ist der detaillierte Inhalt vonDramatiker: Ein umfassender Überblick über das Web UI Automation Testing Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!