microsoft/playwright
TypeScript
Captured source
source ↗microsoft/playwright
Description: Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.
Language: TypeScript
License: Apache-2.0
Stars: 90698
Forks: 5896
Open issues: 169
Created: 2019-11-15T18:32:42Z
Pushed: 2026-06-11T00:23:48Z
Default branch: main
Fork: no
Archived: no
README:
🎭 Playwright
Documentation | API reference
Playwright is a framework for web automation and testing. It drives Chromium, Firefox, and WebKit with a single API — in your tests, in your scripts, and as a tool for AI agents.
Get Started
Choose the path that fits your workflow:
| | Best for | Install | |---|---|---| | [Playwright Test](#playwright-test) | End-to-end testing | npm init playwright@latest | | [Playwright CLI](#playwright-cli) | Coding agents (Claude Code, Copilot) | npm i -g @playwright/cli@latest | | [Playwright MCP](#playwright-mcp) | AI agents and LLM-driven automation | npx @playwright/mcp@latest | | [Playwright Library](#playwright-library) | Browser automation scripts | npm i playwright | | [VS Code Extension](#vs-code-extension) | Test authoring and debugging in VS Code | Install from Marketplace |
---
Playwright Test
Playwright Test is a full-featured test runner built for end-to-end testing. It runs tests across Chromium, Firefox, and WebKit with full browser isolation, auto-waiting, and web-first assertions.
Install
npm init playwright@latest
Or add manually:
npm i -D @playwright/test npx playwright install
Write a test
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();
});Run tests
npx playwright test
Tests run in parallel across all configured browsers, in headless mode by default. Each test gets a fresh browser context — full isolation with near-zero overhead.
Key capabilities
Auto-wait and web-first assertions. No artificial timeouts. Playwright waits for elements to be actionable, and assertions automatically retry until conditions are met.
Locators. Find elements with resilient locators that mirror how users see the page:
page.getByRole('button', { name: 'Submit' })
page.getByLabel('Email')
page.getByPlaceholder('Search...')
page.getByTestId('login-form')Test isolation. Each test runs in its own browser context — equivalent to a fresh browser profile. Save authentication state once and reuse it across tests:
// Save state after login
await page.context().storageState({ path: 'auth.json' });
// Reuse in other tests
test.use({ storageState: 'auth.json' });Tracing. Capture execution traces, screenshots, and videos on failure. Inspect every action, DOM snapshot, network request, and console message in the Trace Viewer:
// playwright.config.ts
export default defineConfig({
use: {
trace: 'on-first-retry',
},
});npx playwright show-trace trace.zip
Parallelism. Tests run in parallel by default across all configured browsers.
---
Playwright CLI
Playwright CLI is a command-line interface for browser automation designed for coding agents. It's more token-efficient than MCP — commands avoid loading large tool schemas and accessibility trees into the model context.
Install
npm install -g @playwright/cli@latest
Optionally install skills for richer agent integration:
playwright-cli install --skills
Usage
Point your coding agent at a task:
Test the "add todo" flow on https://demo.playwright.dev/todomvc using playwright-cli. Take screenshots for all successful and failing scenarios.
Or run commands directly:
playwright-cli open https://demo.playwright.dev/todomvc/ --headed playwright-cli type "Buy groceries" playwright-cli press Enter playwright-cli screenshot
Session monitoring
Use playwright-cli show to open a visual dashboard with live screencast previews of all running browser sessions. Click any session to zoom in and take remote control.
playwright-cli show
Full CLI documentation | GitHub
---
Playwright MCP
The Playwright MCP server gives AI agents full browser control through the Model Context Protocol. Agents interact with pages using structured accessibility snapshots — no vision models or screenshots required.
Setup
Add to your MCP client (VS Code, Cursor, Claude Desktop, Windsurf, etc.):
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}One-click install for VS Code:
[](https://insiders.vscode.dev/redirect?url=vscode%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522playwright%2522%252C%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522%2540playwright%252Fmcp%2540latest%2522%255D%257D)
For Claude Code:
claude mcp add playwright npx @playwright/mcp@latest
How it works
Ask your AI assistant to interact with any web page:
Navigate to https://demo.playwright.dev/todomvc and add a few todo items.
The agent sees the page as a structured accessibility tree:
- heading "todos" [level=1] - textbox "What needs to be done?" [ref=e5] - listitem: - checkbox "Toggle Todo" [ref=e10] - text: "Buy groceries"
It uses element refs like e5 and e10 to click, type, and interact — deterministically and without visual ambiguity. Tools cover navigation, form filling, screenshots, network mocking, storage management, and more.
Excerpt shown — open the source for the full document.