EMZETT.
Login

Emzett Wiki

Playwright: Browser-Tests automatisieren

Properties1
tagsglossar, testen, web

2 Min. Lesezeit

Playwright: Browser-Tests automatisieren

Kurz: Playwright steuert echte Browser per Code, klickt durch Webseiten, prüft Inhalte und macht Ende-zu-Ende-Tests schnell und zuverlässig.

Genauer: Ein End-to-End-Test (E2E) prüft eine Anwendung so, wie ein Mensch sie benutzt: Seite öffnen, einloggen, klicken, Ergebnis prüfen. Playwright (von Microsoft) steuert Chromium, Firefox und WebKit (Safari-Engine) und läuft unter Windows, macOS und Linux. Es gibt Bindings für JavaScript/TypeScript, Python, Java und .NET.

Im Detail

Ein erster Test

import { test, expect } from '@playwright/test';
 
test('Startseite zeigt Überschrift', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await expect(page.getByRole('heading', { name: 'Willkommen' })).toBeVisible();
  await page.getByRole('link', { name: 'Anmelden' }).click();
  await expect(page).toHaveURL(/login/);
});

Start mit npx playwright test. Berichte, Screenshots, Videos und Trace-Viewer (Schritt-für-Schritt-Aufzeichnung) helfen bei Fehlern.

Warum es zuverlässig ist

  • Auto-Waiting: Playwright wartet automatisch, bis Elemente sichtbar und klickbar sind; weniger sleep.
  • Locators nach Rolle und Text (getByRole, getByLabel, getByText) wie Nutzer und Screenreader. Das macht Tests robuster und fördert Barrierefreiheit.
  • Web-first Assertions (expect(...).toBeVisible()) wiederholen die Prüfung bis zum Timeout.
  • Isolation: Jeder Test erhält einen frischen Browserkontext (eigene Cookies, Speicher).
  • Parallel über mehrere Worker, mehrere Browser und Geräte-Emulation (Handy, Tablet).

Nützliche Funktionen

  • codegen (npx playwright codegen url) zeichnet Klicks als Testcode auf.
  • Netzwerk abfangen/mocken (page.route) für Fehlerfälle und Offline.
  • Authentifizierung speichern (storageState), um Login nicht in jedem Test zu wiederholen.
  • Visueller Vergleich (toHaveScreenshot), API-Tests (request), Datei-Download/Upload.
  • CI-Integration (GitHub Actions, GitLab), Berichte als HTML.

Gute Praxis

Teste wichtige Nutzerwege, nicht jede Kleinigkeit (E2E-Tests sind langsamer als Unit-Tests, siehe Testpyramide). Verwende eigene Testdaten, sorge für unabhängige Tests, vermeide feste Wartezeiten und nutze stabile Locators statt langer CSS-Pfade. Beachte Datenschutz: keine echten Zugangsdaten in Tests ablegen. Alternativen: Cypress (nur Chromium-basiert plus Firefox, läuft im Browser), Selenium/WebDriver (verbreitet, älter).

Siehe auch: Testpyramide und E2E-Tests, Testarten im Überblick, CI/CD-Pipeline, Barrierefreie Webseiten

Backlinks