Playwright Tutorial: Setup, Page Objects & CI/CD [2026]

Was ist Playwright?

2019 saß ein Team bei Microsoft vor einem Problem: Die internen Web-Tests waren langsam, flaky und schwer zu debuggen. Die Entwickler hatten vorher Puppeteer bei Google gebaut. Jetzt wollten sie es besser machen. Das Ergebnis: Playwright.

Playwright ist ein Open-Source-Framework für End-to-End-Tests von Webanwendungen. Es steuert Chromium, Firefox und WebKit über eine einheitliche API. Das Besondere: Auto-Wait (kein manuelles Warten), eingebautes API-Testing und ein Trace Viewer der jeden Testschritt aufzeichnet.

Seit 2020 hat Playwright Selenium in den npm-Download-Zahlen überholt. Open Source ist kein Kompromiss. Es ist ein Vorteil: Kein Vendor-Lock-in, aktive Community, wöchentliche Updates.

Qytera setzt Playwright in Kundenprojekten als Standard-Framework für Testautomatisierung ein. Was folgt, sind keine theoretischen Empfehlungen, sondern Patterns die wir in realen Projekten einsetzen. Methoden sind Werkzeuge, keine Religion. Playwright ist das Werkzeug, das aktuell am besten funktioniert.

Playwright vs. Selenium vs. Cypress

Drei Frameworks dominieren die E2E-Testautomatisierung. Die Wahl hängt vom Projekt-Kontext ab:

Empfehlung: Playwright für neue Projekte. Selenium für bestehende Java-Projekte. Cypress wenn nur Chromium getestet wird.

Setup und erster Test

Installation

Playwright installiert Browser automatisch. Kein manueller Driver-Download nötig:

# Neues Playwright-Projekt erstellen
npm init playwright@latest

# Oder in bestehendes Projekt installieren
npm install -D @playwright/test

# Browser herunterladen
npx playwright install

Nach der Installation liegt die Konfiguration in playwright.config.ts. Playwright erstellt automatisch eine Beispiel-Testdatei.

Erster E2E-Test

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

test("Startseite hat korrekten Title", async ({ page }) => {
  await page.goto("https://www.qytera.de");

  // Auto-Wait: Playwright wartet automatisch bis Title geladen
  await expect(page).toHaveTitle(/Qytera/);
});

test("Kontaktformular ist erreichbar", async ({ page }) => {
  await page.goto("https://www.qytera.de");

  // Klick auf Navigation
  await page.click('text=Kontakt');

  // Warte auf URL-Wechsel
  await expect(page).toHaveURL(/kontakt/);

  // Formular-Felder prüfen
  await expect(page.locator("#edit-name")).toBeVisible();
  await expect(page.locator("#edit-mail")).toBeVisible();
});

Tests ausführen:

# Alle Tests ausführen (headless)
npx playwright test

# Mit Browser-Fenster (headed)
npx playwright test --headed

# Einzelnen Test ausführen
npx playwright test kontakt.spec.ts

# UI Mode (interaktives Debugging)
npx playwright test --ui

Page Object Model

Das Page Object Model (POM) trennt Testlogik von Seitenstruktur. Ändert sich die UI, muss nur das Page Object angepasst werden, nicht jeder Test:

// pages/login.page.ts
import { Page, Locator, expect } from "@playwright/test";

export class LoginPage {
  private readonly page: Page;
  private readonly usernameInput: Locator;
  private readonly passwordInput: Locator;
  private readonly submitButton: Locator;

  constructor(page: Page) {
    this.page = page;
    this.usernameInput = page.locator("#username");
    this.passwordInput = page.locator("#password");
    this.submitButton = page.locator('button[type="submit"]');
  }

  async goto() {
    await this.page.goto("/login");
  }

  async login(username: string, password: string) {
    await this.usernameInput.fill(username);
    await this.passwordInput.fill(password);
    await this.submitButton.click();
  }

  async expectError(message: string) {
    await expect(this.page.locator(".error-message")).toContainText(message);
  }
}

// tests/login.spec.ts
import { test } from "@playwright/test";
import { LoginPage } from "../pages/login.page";

test("Fehlermeldung bei falschem Passwort", async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.goto();
  await loginPage.login("testuser", "falsch");
  await loginPage.expectError("Ungültige Anmeldedaten");
});

In einem Kundenprojekt mit 500+ Tests hat POM den Wartungsaufwand nach einem UI-Redesign von 3 Wochen auf 2 Tage reduziert. Ohne POM hätten wir jeden Test einzeln anpassen müssen. Ergebnisse beweisen, dass es funktioniert.

API-Testing mit Playwright

Playwright kann nicht nur Browser steuern, sondern auch HTTP-Requests senden. Das ermöglicht API-Tests im gleichen Framework:

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

test("API: Benutzer anlegen und per UI verifizieren", async ({ page, request }) => {
  // API: Testdaten vorbereiten
  const response = await request.post("/api/users", {
    data: {
      name: "Test User",
      email: "test@example.com",
      role: "admin"
    }
  });
  expect(response.ok()).toBeTruthy();
  const user = await response.json();

  // UI: Ergebnis verifizieren
  await page.goto(`/admin/users/${user.id}`);
  await expect(page.locator(".user-name")).toHaveText("Test User");

  // Cleanup per API
  await request.delete(`/api/users/${user.id}`);
});

Der Vorteil: Testdaten per API anlegen (schnell), per UI verifizieren (realistisch), per API aufräumen (zuverlässig). Das ist deutlich stabiler als alles über die UI zu machen.

Debugging: Trace Viewer und UI Mode

Playwright bietet zwei Debugging-Werkzeuge die Selenium und Cypress nicht haben:

Trace Viewer: Zeichnet jeden Test-Schritt auf. Bei einem Fehler siehst du: Screenshot, DOM-Snapshot, Netzwerk-Requests und Konsolen-Logs. Aktivierung:

// playwright.config.ts
import { defineConfig } from "@playwright/test";

export default defineConfig({
  use: {
    trace: "on-first-retry",  // Trace nur bei Retry (spart Speicher)
    screenshot: "only-on-failure",
    video: "retain-on-failure",
  },
  retries: 1,  // 1 Retry bei Fehler → Trace wird aufgezeichnet
});

UI Mode: Interaktives Test-Debugging mit npx playwright test --ui. Du siehst den Browser, den DOM-Tree und kannst Tests Schritt für Schritt durchlaufen. Das reduziert die Debugging-Zeit von Stunden auf Minuten.

CI/CD-Integration

Qualität ist kein Gate am Ende der Pipeline. Qualität ist die Pipeline. Playwright-Tests gehören nicht ans Ende des Prozesses, sondern in jede Stufe. GitHub Actions Beispiel:

# .github/workflows/playwright.yml
name: Playwright Tests
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22

      - name: Install dependencies
        run: npm ci

      - name: Install Playwright browsers
        run: npx playwright install --with-deps

      - name: Run tests
        run: npx playwright test

      - name: Upload test report
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: playwright-report
          path: playwright-report/

Wir testen nicht, damit Berichte hübsch aussehen. Playwright-Tests laufen als Quality Gate vor jedem Deployment. Ein fehlgeschlagener Test blockiert den Deploy automatisch. Kein Test, kein Deploy. So einfach.

Agentic AI Testing mit Playwright

Seit Playwright 1.59 gibt es Features die KI-gestütztes Testing ermöglichen: page.ariaSnapshot() liefert eine strukturierte Beschreibung der aktuellen Seite, die ein LLM analysieren kann. Statt fester Selektoren beschreibt der Agent das Testziel, und die KI findet den Weg.

Qytera hat diesen Ansatz in Kundenprojekten umgesetzt. Die Ergebnisse: 87% weniger Testwartung bei UI-Änderungen. Details und Implementierung beschreiben wir in unserem Agentic AI Testing Artikel.

Best Practices

1. Page Object Model nutzen
   Trennt Testlogik von UI-Struktur. Bei 100+ Tests ist POM nicht optional, sondern Überlebensstrategie.
2. Keine festen Wartezeiten
   Playwright hat Auto-Wait. page.waitForTimeout(5000) ist fast immer falsch. Nutze expect(locator).toBeVisible() stattdessen.
3. Tests isolieren
   Jeder Test läuft in einem eigenen Browser-Context. Keine Abhängigkeiten zwischen Tests. Testdaten per API anlegen und aufräumen.
4. Trace Viewer aktivieren
   trace: "on-first-retry" in der Config. Kostet fast keinen Overhead, spart Stunden beim Debugging.
5. CI/CD von Tag 1
   Tests die nur lokal laufen werden ignoriert. In die Pipeline integrieren bevor der erste Test geschrieben wird.
6. Aria-Selektoren bevorzugen
   page.getByRole("button", { name: "Submit" }) ist stabiler als CSS-Selektoren und verbessert gleichzeitig die Accessibility.

Fazit

Playwright ist 2026 das Framework, das wir jedem neuen Projekt empfehlen. Nicht weil es perfekt ist, sondern weil es die meisten Probleme löst die wir in 15 Jahren Testautomatisierung gesehen haben: flaky Tests (Auto-Wait), blinde Fehlersuche (Trace Viewer), fehlende API-Tests (eingebauter Request-Context) und langsame Pipelines (parallele Worker).

Tools wechseln. Qualitätsdenken bleibt. Selenium war jahrelang der Standard und hat gute Dienste geleistet. Playwright ist der neue Standard, weil es die Schwächen von Selenium erkannt und gelöst hat. Mit den Agentic AI Features in Version 1.59 geht es den nächsten Schritt: von regelbasierter zu intentionsbasierter Testautomatisierung.

Für bestehende Selenium-Projekte lohnt sich die Migration wenn die Test-Suite >100 Tests hat und Flakiness ein Problem ist. Wir unterstützen bei der Migration und Implementierung.

FAQ: Häufig gestellte Fragen zu Playwright

Was ist Playwright und wofür wird es verwendet?

Playwright ist ein Open-Source-Framework von Microsoft für automatisierte Browser-Tests. Es steuert Chromium, Firefox und WebKit über eine einheitliche API und eignet sich für E2E-Tests, API-Tests und Visual Regression Testing.

Ist Playwright besser als Selenium?

Für neue Projekte: ja. Playwright ist schneller, hat Auto-Wait und eingebautes Debugging. Selenium bleibt relevant für bestehende Java-Projekte mit großer Test-Suite und etablierter Infrastruktur.

Welche Programmiersprachen unterstützt Playwright?

TypeScript, JavaScript, Python, C# und Java. Die TypeScript-API ist am besten dokumentiert und hat die meisten Features.

Wie integriere ich Playwright in CI/CD?

Playwright bietet offizielle Docker-Images und GitHub Actions. Installation: npx playwright install --with-deps in der Pipeline. Details in unserem CI/CD-Artikel.

Was kostet Playwright?

Playwright ist kostenlos und Open Source (Apache-2.0 Lizenz). Die optionale Microsoft Playwright Testing Cloud für Parallelisierung ist kostenpflichtig.

Was ist Agentic AI Testing mit Playwright?

KI-Agenten die Playwright steuern und Tests autonom generieren und warten. Seit Version 1.59 mit page.ariaSnapshot() möglich. Details in unserem Agentic AI Testing Artikel.