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:
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 |
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.
# Using npm npm init playwright@latest # Using yarn yarn create playwright
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.
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
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/); });
Jede Testmethode hat:
Zu den wichtigsten Methoden gehören:
Hier sind allgemeine Befehle:
# Using npm npm init playwright@latest # Using yarn yarn create playwright
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
npx playwright test
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.
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.
Verwenden Sie die Füllmethode für die Texteingabe, hauptsächlich für ,
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/); });
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
Verwenden Sie locator.selectOption(), um mit
npx playwright test landing-page.spec.ts
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');
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);
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.
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 } });
Verwenden Sie locator.focus(), um sich auf ein Element zu konzentrieren:
# Using npm npm init playwright@latest # Using yarn yarn create playwright
Der Drag-and-Drop-Vorgang umfasst vier Schritte:
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
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
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/); });
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.
Kosteneffizienz
Entwicklererfahrung
Skalierbarkeit und Leistung
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!