🎭 Playwright

Dokumentation | API-Referenz

Playwright ist ein Framework für Webautomatisierung und Tests. Es steuert Chromium, Firefox und WebKit über eine einzige API – in deinen Tests, in deinen Skripten und als Werkzeug für KI-Agenten.

Erste Schritte

Wähle den Pfad, der zu deinem Workflow passt:

Playwright Test

Playwright Test ist ein voll ausgestatteter Test-Runner für End-to-End-Tests. Er führt Tests in Chromium, Firefox und WebKit aus – mit vollständiger Browser-Isolation, automatischem Warten (Auto-Waiting) und Web-First-Assertions.

Installation

npm init playwright@latest

Oder manuell hinzufügen:

npm i -D @playwright/test
npx playwright install

Einen Test schreiben

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.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

Tests ausführen

npx playwright test

Die Tests laufen standardmäßig parallel in allen konfigurierten Browsern und im Headless-Modus. Jeder Test erhält einen frischen Browser-Kontext – volle Isolation mit nahezu keinem Overhead.

Kernfunktionen

Auto-Waiting und Web-First-Assertions. Keine künstlichen Timeouts. Playwright wartet, bis Elemente interaktiv sind, und Assertions wiederholen automatisch, bis die Bedingungen erfüllt sind.

Locators. Finde Elemente mit robusten Locators, die abbilden, wie Nutzer die Seite sehen:

page.getByRole('button', { name: 'Submit' })
page.getByLabel('Email')
page.getByPlaceholder('Search...')
page.getByTestId('login-form')

Testisolation. Jeder Test läuft in einem eigenen Browser-Kontext – vergleichbar mit einem frischen Browserprofil. Speichere den Authentifizierungsstatus einmal und verwende ihn in anderen Tests wieder:

// Save state after login
await page.context().storageState({ path: 'auth.json' });

// Reuse in other tests
test.use({ storageState: 'auth.json' });

Tracing. Erfasse Ausführungs-Traces, Screenshots und Videos bei Fehlern. Untersuche jede Aktion, jeden DOM-Snapshot, jede Netzwerkanfrage und jede Konsolenmeldung im Trace Viewer:

// playwright.config.ts
export default defineConfig({
  use: {
    trace: 'on-first-retry',
  },
});

npx playwright show-trace trace.zip

Parallelität. Tests laufen standardmäßig parallel in allen konfigurierten Browsern.

Vollständige Testdokumentation

Playwright CLI

Playwright CLI ist eine Kommandozeilen-Schnittstelle für die Browserautomatisierung, die für Coding-Agenten entwickelt wurde. Sie ist token-effizienter als MCP – die Befehle vermeiden das Laden großer Tool-Schemas und Accessibility-Bäume in den Modellkontext.

Installation

npm install -g @playwright/cli@latest

Optional kannst du Skills für eine reichhaltigere Agenten-Integration installieren:

playwright-cli install --skills

Verwendung

Richte deinen Coding-Agenten auf eine Aufgabe aus:

Test the "add todo" flow on https://demo.playwright.dev/todomvc using playwright-cli.
Take screenshots for all successful and failing scenarios.

Oder führe Befehle direkt aus:

playwright-cli open https://demo.playwright.dev/todomvc/ --headed
playwright-cli type "Buy groceries"
playwright-cli press Enter
playwright-cli screenshot

Sitzungsüberwachung

Verwende playwright-cli show, um ein visuelles Dashboard mit Live-Screencast-Vorschauen aller laufenden Browser-Sitzungen zu öffnen. Klicke auf eine Sitzung, um sie zu vergrößern und die Fernsteuerung zu übernehmen.

playwright-cli show

Vollständige CLI-Dokumentation | GitHub

Playwright MCP

Der Playwright-MCP-Server gibt KI-Agenten über das Model Context Protocol die volle Kontrolle über den Browser. Agenten interagieren mit Seiten über strukturierte Accessibility-Snapshots – ohne Vision-Modelle oder Screenshots.

Einrichtung

Füge ihn zu deinem MCP-Client hinzu (VS Code, Cursor, Claude Desktop, Windsurf usw.):

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

Installation mit einem Klick für VS Code:

Für Claude Code:

claude mcp add playwright npx @playwright/mcp@latest

So funktioniert es

Bitte deinen KI-Assistenten, mit einer beliebigen Webseite zu interagieren:

Navigate to https://demo.playwright.dev/todomvc and add a few todo items.

Der Agent sieht die Seite als strukturierten Accessibility-Baum:

- heading "todos" [level=1]
- textbox "What needs to be done?" [ref=e5]
- listitem:
  - checkbox "Toggle Todo" [ref=e10]
  - text: "Buy groceries"

Er verwendet Element-Referenzen wie e5 und e10, um zu klicken, zu tippen und zu interagieren – deterministisch und ohne visuelle Mehrdeutigkeit. Die Tools decken Navigation, Formularausfüllung, Screenshots, Netzwerk-Mocking, Speicherverwaltung und mehr ab.

Vollständige MCP-Dokumentation | GitHub

Playwright Library

Verwende playwright als Bibliothek für Browser-Automatisierungsskripte – Web Scraping, PDF-Erzeugung, Screenshot-Erfassung und jeden Workflow, der programmatische Browsersteuerung ohne Test-Runner benötigt.

Installation

npm i playwright

Beispiele

Screenshot aufnehmen:

import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://playwright.dev/');
await page.screenshot({ path: 'screenshot.png' });
await browser.close();

Ein PDF erzeugen:

import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://playwright.dev/');
await page.pdf({ path: 'page.pdf', format: 'A4' });
await browser.close();

Ein mobiles Gerät emulieren:

import { chromium, devices } from 'playwright';

const browser = await chromium.launch();
const context = await browser.newContext(devices['iPhone 15']);
const page = await context.newPage();
await page.goto('https://playwright.dev/');
await page.screenshot({ path: 'mobile.png' });
await browser.close();

Netzwerkanfragen abfangen:

import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage();
await page.route('**/*.{png,jpg,jpeg}', route => route.abort());
await page.goto('https://playwright.dev/');
await browser.close();

Bibliotheksdokumentation | API-Referenz

VS Code Extension

Die Playwright-VS-Code-Erweiterung bringt Testausführung, Debugging und Code-Erzeugung direkt in deinen Editor.

Führe Tests aus und debugge sie mit einem einzigen Klick im Editor. Setze Haltepunkte, inspiziere Variablen und gehe Schritt für Schritt durch die Testausführung – mit Live-Browseransicht.

Generiere Tests mit CodeGen. Klicke auf „Record new“, um einen Browser zu öffnen – navigiere und interagiere mit deiner App, während Playwright den Testcode für dich schreibt.

Locators auswählen. Fahre im Browser über ein beliebiges Element, um den besten verfügbaren Locator zu sehen, und klicke dann, um ihn in die Zwischenablage zu kopieren.

Trace-Viewer-Integration. Aktiviere „Show Trace Viewer“ in der Seitenleiste, um nach jedem Testlauf einen vollständigen Ausführungs-Trace zu erhalten – DOM-Snapshots, Netzwerkanfragen, Konsolenprotokolle und Screenshots bei jedem Schritt.

Erweiterung installieren | VS-Code-Anleitung

Cross-Browser-Unterstützung

Headless- und Headed-Ausführung auf allen Plattformen. ¹ Verwendet standardmäßig Chrome for Testing.

Weitere Sprachen

Playwright ist auch für Python, .NET und Java verfügbar.

Ressourcen

• Dokumentation
• API-Referenz
• MCP-Server
• CLI für Coding-Agenten
• VS-Code-Erweiterung
• Beitragsleitfaden
• Changelog
• Discord