microsoft/playwrightBrowser-Automatisierungsframework mit einer einzigen API für Chromium, Firefox und WebKit. Unterstützt Webtests, Scraping, Screenshots und Netzwerk-Interception.
Playwright ist ein Framework für Web-Automatisierung und -Tests. Es steuert Chromium, Firefox und WebKit über eine einzige API – in Ihren Tests, in Ihren Skripten und als Werkzeug für KI-Agenten.
Wählen Sie den Pfad, der zu Ihrem Workflow passt:
| Am besten geeignet für | Installation | |
|---|---|---|
| Playwright Test | End-to-End-Tests | npm init playwright@latest |
| Playwright CLI | Coding-Agenten (Claude Code, Copilot) | npm i -g @playwright/cli@latest |
| Playwright MCP | KI-Agenten und LLM-gesteuerte Automatisierung | npx @playwright/mcp@latest |
| Playwright Library | Browser-Automatisierungsskripte | npm i playwright |
| VS Code-Erweiterung | Testentwicklung und -debugging in VS Code | Aus dem Marketplace installieren |
Playwright Test ist ein voll ausgestatteter Test-Runner für End-to-End-Tests. Er führt Tests in Chromium, Firefox und WebKit mit vollständiger Browser-Isolation, automatischem Warten und Web-First-Assertions aus.
npm init playwright@latest
Oder manuell hinzufügen:
npm i -D @playwright/test
npx playwright install
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();
});
npx playwright test
Tests laufen standardmäßig parallel über alle konfigurierten Browser im Headless-Modus. Jeder Test erhält einen frischen Browser-Kontext – vollständige Isolation mit nahezu null Overhead.
Automatisches Warten und Web-First-Assertions. Keine künstlichen Timeouts. Playwright wartet, bis Elemente interagierbar sind, und Assertions wiederholen automatisch, bis die Bedingungen erfüllt sind.
Locators. Finden Sie Elemente mit robusten Locators, die widerspiegeln, wie Benutzer die Seite sehen:
page.getByRole('button', { name: 'Submit' })
page.getByLabel('Email')
page.getByPlaceholder('Search...')
page.getByTestId('login-form')
Test-Isolation. Jeder Test läuft in einem eigenen Browser-Kontext – vergleichbar mit einem frischen Browser-Profil. Speichern Sie den Authentifizierungsstatus einmal und verwenden Sie ihn in anderen Tests wieder:
// Status nach dem Login speichern
await page.context().storageState({ path: 'auth.json' });
// In anderen Tests wiederverwenden
test.use({ storageState: 'auth.json' });
Tracing. Erfassen Sie Ausführungs-Traces, Screenshots und Videos bei Fehlern. Untersuchen Sie 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 über alle konfigurierten Browser.
Playwright CLI ist eine Befehlszeilenschnittstelle für Browser-Automatisierung, die für Coding-Agenten entwickelt wurde. Sie ist token-effizienter als MCP – Befehle vermeiden das Laden großer Tool-Schemas und Accessibility-Bäume in den Modellkontext.
npm install -g @playwright/cli@latest
Optional Skills für eine reichhaltigere Agenten-Integration installieren:
playwright-cli install --skills
Weisen Sie Ihren Coding-Agenten einer Aufgabe zu:
Teste den "add todo"-Flow auf https://demo.playwright.dev/todomvc mit playwright-cli.
Mache Screenshots für alle erfolgreichen und fehlgeschlagenen Szenarien.
Oder führen Sie Befehle direkt aus:
playwright-cli open https://demo.playwright.dev/todomvc/ --headed
playwright-cli type "Buy groceries"
playwright-cli press Enter
playwright-cli screenshot
Verwenden Sie playwright-cli show, um ein visuelles Dashboard mit Live-Screencast-Vorschauen aller laufenden Browser-Sitzungen zu öffnen. Klicken Sie auf eine beliebige Sitzung, um hineinzuzoomen und die Fernsteuerung zu übernehmen.
playwright-cli show
Der Playwright MCP-Server gibt KI-Agenten volle Browser-Kontrolle über das Model Context Protocol. Agenten interagieren mit Seiten über strukturierte Accessibility-Snapshots – keine Vision-Modelle oder Screenshots erforderlich.
Fügen Sie es Ihrem MCP-Client hinzu (VS Code, Cursor, Claude Desktop, Windsurf usw.):
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}
Ein-Klick-Installation für VS Code:
Für Claude Code:
claude mcp add playwright npx @playwright/mcp@latest
Bitten Sie Ihren KI-Assistenten, mit einer beliebigen Webseite zu interagieren:
Navigiere zu https://demo.playwright.dev/todomvc und füge ein paar Todo-Elemente hinzu.
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.
Verwenden Sie playwright als Bibliothek für Browser-Automatisierungsskripte – Web-Scraping, PDF-Generierung, Screenshot-Erfassung und jeden Workflow, der programmatische Browser-Kontrolle ohne Test-Runner benötigt.
npm i playwright
Einen 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 generieren:
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();
Die Playwright VS Code-Erweiterung bringt Testausführung, Debugging und Code-Generierung direkt in Ihren Editor.
Tests ausführen und debuggen direkt aus dem Editor mit einem einzigen Klick. Setzen Sie Haltepunkte, untersuchen Sie Variablen und gehen Sie Schritt für Schritt durch die Testausführung mit einer Live-Browser-Ansicht.
Tests mit CodeGen generieren. Klicken Sie auf "Record new", um einen Browser zu öffnen – navigieren Sie und interagieren Sie mit Ihrer App, während Playwright den Testcode für Sie schreibt.
Locators auswählen. Fahren Sie mit der Maus über ein beliebiges Element im Browser, um den besten verfügbaren Locator zu sehen, und klicken Sie dann, um ihn in die Zwischenablage zu kopieren.
Trace Viewer-Integration. Aktivieren Sie "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.
| Linux | macOS | Windows | |
|---|---|---|---|
| Chromium1 154.0.8037.0 | ✅ | ✅ | ✅ |
| WebKit 26.6 | ✅ | ✅ | ✅ |
| Firefox 155.0 | ✅ | ✅ | ✅ |
Headless- und Headed-Ausführung auf allen Plattformen. 1 Verwendet standardmäßig Chrome for Testing.