Web-Frontend
js-Tutorial
Dramatiker: Ein umfassender Überblick über das Web UI Automation Testing Framework
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
- Stellen Sie sicher, dass Node.js installiert ist.
- Initialisieren Sie ein PlayWright-Projekt mit npm oder Yarn:
# Using npm npm init playwright@latest # Using yarn yarn create playwright
- 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 ,