Wer Playwright nicht nutzt, ist selbst schuld. Ich beginne diesen Beitrag mit einer provokanten Behauptung, aber tatsächlich habe ich viel mit Selenium und Cypress gearbeitet, und das Testen mit Playwright fühlt sich einfach anders an.
Bevor wir starten: Was ist eigentlich Playwright und wer bin ich? Ich bin Wahid, ein zertifizierter Shopware- und Spryker-Entwickler sowie Geschäftsführer der Value3 GmbH. Unter Mabya.de betreibe ich eine Plattform für den Kauf und Verkauf von Webseiten.
Was ist eigentlich Playwright?
Playwright ist eine leistungsstarke Open-Source-Bibliothek für die Automatisierung und das Testen von Webanwendungen, entwickelt von Microsoft. Das Beste daran: Playwright-Tests können vollständig in TypeScript geschrieben werden. Auch wenn ich hauptsächlich in PHP programmiere, bin ich ein Fan von TypeScript und natürlich können Tests auch in anderen Sprachen wie JavaScript, Java, Python und C# geschrieben werden.
Playwright bietet eine sehr saubere und intuitive API, um den Browser zu steuern und Paywright ist schneller, viel schneller als Cypress und Selenium. Playwright kann mehrere Tests parallel ausführen, was die Testgeschwindigkeit erheblich erhöht.
Hier sind einige Vorteile von Playwright:
– Playwright wartet automatisch darauf, dass UI-Elemente verfügbar sind, bevor Aktionen ausgeführt werden.
– Playwright ermöglicht Tests in Chromium, Firefox und WebKit mit einer einzigen API.
– Playwright kann mehrere Tests in einer einzigen Browser-Instanz durch isolierte Browser-Kontexte ausführen, was die Testgeschwindigkeit erhöht.
– Mit Playwright Codegen können Browser-Aktivitäten aufgezeichnet und als Tests gespeichert und ausgeführt werden. Das ermöglicht es auch Testern ohne Programmierkenntnisse, Tests zu schreiben und auszuführen.
Was hat Playwright mit Shopware zu tun?
Nichts direkt, aber da ich gerne mit Shopware arbeite, schreiben wir jetzt gemeinsam einen Frontend-Test für Shopware. Wir könnten natürlich jede andere Seite testen.
Wir schreiben jetzt gemeinsam ein Test und testen die Funktionalität des Warenkorbs, um sicherzustellen, dass es möglich ist, ein beliebiges Produkt erfolgreich in den Warenkorb zu legen. Wir arbeiten mit einer lokalen Instanz von Shopware mit dem Default-Theme.
Zunächst installieren wir Playwright mit TypeScript. Dafür benötigt man mindestens Node.js in der Version 18.
npm init playwright@latestWährend der Installation wirst du auch gefragt, ob du Headless Browser installieren möchtest. Für die lokale Umgebung kannst mit „No“ beantworten, denn wir können die bestehenden Browser für den Test benutzen.
Als nächstens kannst die die Datei „playwright.config.ts“ öffnen und bei dem Punkt projects kannst du alles entfernen und durch folgenden Code ersetzten. Für diesen Beitragen führen wir die Tests mit einer einzigen Browser aus.
projects: [
{
name: 'Microsoft Edge',
use: { ...devices['Desktop Edge'], channel: 'msedge' },
}
],Jetzt schreiben wir Schritt für Schritt den Test. Wir öffnen die Startseite von Shopware, gehen zu einer Kategorieseite, legen ein Produkt in den Warenkorb und überprüfen, ob das Produkt tatsächlich in den Warenkorb gelegt wurde.
Die Links in der Hauptnavigation haben die CSS-Class „main-navigation-link“. Wir nehmen den letzten Link und klicken darauf.
const mainNavLink = page.locator('.main-navigation-link').last();
await mainNavLink.click();Jetzt sind wir in einer Kategorie-Seite. Wir suchen das erste Produkt, bzw. den ersten Button mit dem Text „Add to shopping cart“ und klicken darauf.
const buyButton = page.getByText('Add to shopping cart').first();
await buyButton.click();Wir wissen, dass Shopware in dem Fall ein Ajax-Request sendet. Wir prüfen, ob die Request erfolgreich war.
await page.waitForResponse(response => response.status() === 200);Wir wissen, dass Shopware den Warenkorb im Off-Canvas-Menu anzeigt. Dort findet man für jedes Produkt ein Element mit dem Class „line-item-product-number“. Wir checken, ob so ein Element existiert und auch sichtbar ist.
const itemElement = page.locator('.line-item-product-number').first();
await expect(itemElement).toBeVisible();Das war’s. Jetzt fügen wir alle Schritte zu einem Test zusammen und führen des Test aus.
Pro-Tipp: Definiere für alle wichtigen Elemente, die du testen möchtest, ein Data-Attribute. z.B. data-qa=“cart-item“, so musst du dich nicht auf CSS-Klassen verlassen und dein Test nach einem Relaunch nicht anpassen.
Jetzt kannst du den folgenden Code in dem Verzeichnis e2e unter dem Namen „shopware.spec.ts“ speichern und ausführen.
import {test, expect} from '@playwright/test';
test('has title main navigation', async ({page}) => {
await page.goto('http://localhost/');
// Check if the first link with class '.main-navigation-link' is visible
const mainNavLink = page.locator('.main-navigation-link').last();
if (!await mainNavLink.isVisible()) {
test.fail(true, 'Main navigation link is not visible. Stopping the test.');
return;
}
// Click on the main navigation link
await mainNavLink.click();
// Wait for the next page to load
await page.waitForLoadState('networkidle');
// Check if the first link with class '.buy-btn' is visible
const buyButton = page.getByText('Add to shopping cart').first();
if (!await buyButton.isVisible()) {
test.fail(true, 'Buy button is not visible. Stopping the test.');
return;
}
// Click on the buy button
await buyButton.click();
await page.waitForResponse(response => response.status() === 200);
// Check if there is an element with class .line-item-product-number
const itemElement = page.locator('.line-item-product-number').first();
// Assert that there are at least one element
await expect(itemElement).toBeVisible();
console.log('Test completed successfully.');
});und mit dem folgenden Command kannst du den Test ausführen.
npx playwright testWenn wir den Test erweitern und den gesamten Checkout-Prozess testen, wird unser Test unübersichtlich. Mit Playwright kann man Tests einfach in mehrere Schritte unterteilen. Entfernen wir auch die Debug-Ausgaben, wird der Test sehr übersichtlich und einfacher lesbar.
import { test, expect } from '@playwright/test';
test('E2E test: Navigate, add to cart, and verify', async ({ page }) => {
await test.step('Navigate to homepage', async () => {
await page.goto('http://localhost/');
});
await test.step('Click on main navigation link', async () => {
const mainNavLink = page.locator('.main-navigation-link').last();
await expect(mainNavLink).toBeVisible();
await mainNavLink.click();
await page.waitForLoadState('networkidle');
});
await test.step('Add item to shopping cart', async () => {
const buyButton = page.getByText('Add to shopping cart').first();
await expect(buyButton).toBeVisible();
await buyButton.click();
await page.waitForResponse(response => response.status() === 200);
});
await test.step('Verify item in cart', async () => {
const itemElement = page.locator('.line-item-product-number').first();
await expect(itemElement).toBeVisible();
});
console.log('Test completed successfully.');
});Mit dem UI-Mode kannst du den Test auch in einer graphischen Oberfläche laufen lassen und live dabei zu schauen und so sieht das dann aus.
npx playwright test --ui
Natürlich lässt sich Playwright auch in einer CI/CD Pipeline integrieren, darauf gehen aber in diesem Beitrag nicht ein.
Fazit
Playwright erweist sich als leistungsstarkes und effizientes Tool für die Automatisierung und das Testen von Webanwendungen. Die Vorteile gegenüber anderen Frameworks wie Selenium und Cypress sind deutlich:
- Hohe Geschwindigkeit und Parallelisierung von Tests
- Intuitive API und einfache Handhabung
- Breite Browser-Unterstützung (Chromium, Firefox, WebKit)
- Automatisches Warten auf UI-Elemente
- Codegen-Funktion für einfache Testerstellung
Der Praxisbeispiel mit Shopware zeigt, wie unkompliziert sich selbst komplexe E-Commerce-Funktionen testen lassen. Die Möglichkeit, Tests in TypeScript zu schreiben und sie in übersichtliche Schritte zu unterteilen, erhöht die Lesbarkeit und Wartbarkeit des Testcodes erheblich. Besonders hervorzuheben ist die Flexibilität von Playwright:
- Es lässt sich sowohl für einfache als auch für umfangreiche E2E-Tests einsetzen
- Die Integration in CI/CD-Pipelines ist möglich
- Mit dem UI-Mode bietet es eine anwenderfreundliche graphische Oberfläche
Natürlich haben Cypress und Selenium auch ähnlich Features und ihre Vorteile. Wenn ich aber neu mit Frontent-Tests anfangen würde und keine Vorerfahrung mit Cypress oder mit Selenium habe, dann würde ich ich mich definitive für Playwright entscheiden.. Es vereinfacht den Testprozess, spart Zeit und erhöht die Zuverlässigkeit von Webanwendungen – nicht nur im E-Commerce-Bereich, sondern in der gesamten Webentwicklung.
Weitere Infos und die Dokumentation findest du unter https://playwright.dev/ und falls du Verbesserungsvorschläge hast, dann kannst mich gern auf LinkedIn kontaktieren.
