Playwright

# 🎭 Playwright [](https://www.npmjs.com/package/playwright) <!-- GEN:chromium-version-badge -->[](https://www.chromium.org/Home)<!-- GEN:stop --> <!-- GEN:firefox-version-badge -->[](https://www.mozilla.org/en-US/firefox/new/)<!-- GEN:stop --> <!-- GEN:webkit-version-badge -->[](https://webkit.org/)<!-- GEN:stop --> [](https://aka.ms/playwright/discord) ## [Documentation](https://playwright.dev) | [API reference](https://playwright.dev/docs/api/class-playwright) 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](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright) | --- ## 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 ```bash npm init playwright@latest ``` Or add manually: ```bash npm i -D @playwright/test npx playwright install ``` ### Write a test ```TypeScript 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 ```bash 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: ```TypeScript 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: ```TypeScript // 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](https://playwright.dev/docs/trace-viewer): ```TypeScript // playwright.config.ts export default defineConfig({ use: { trace: 'on-first-retry', }, }); ``` ```bash npx playwright show-trace trace.zip ``` <!-- TODO: screenshot of trace viewer --> **Parallelism.** Tests run in parallel by default across all configured browsers. [Full testing documentation](https://playwright.dev/docs/intro) --- ## Playwright CLI [Playwright CLI](https://github.com/microsoft/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 ```bash npm install -g @playwright/cli@latest ``` Optionally install skills for richer agent integration: ```bash 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: ```bash 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. ```bash playwright-cli show ``` <!-- TODO: screenshot of playwright-cli show dashboard --> [Full CLI documentation](https://playwright.dev/agent-cli/introduction) | [GitHub](https://github.com/microsoft/playwright-cli) --- ## Playwright MCP The [Playwright MCP server](https://github.com/microsoft/playwright-mcp) gives AI agents full browser control through the [Model Context Protocol](https://modelcontextprotocol.io). 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.): ```json { "mcpServers": { "playwright": { "command": "npx", "args": ["@playwright/mcp@latest"] } } } ``` **One-click install for VS Code:** [<img src="https://img.shields.io/badge/VS_Code-VS_Code?style=flat-square&label=Install%20MCP%20Server&color=0098FF" alt="Install in 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:** ```bash 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. [Full MCP documentation](https://playwright.dev/mcp/introduction) | [GitHub](https://github.com/microsoft/playwright-mcp) --- ## Playwright Library Use `playwright` as a library for browser automation scripts — web scraping, PDF generation, screenshot capture, and any workflow that needs programmatic browser control without a test runner. ### Install ```bash npm i playwright ``` ### Examples **Take a screenshot:** ```TypeScript 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(); ``` **Generate a PDF:** ```TypeScript 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(); ``` **Emulate a mobile device:** ```TypeScript 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(); ``` **Intercept network requests:** ```TypeScript 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(); ``` [Library documentation](https://playwright.dev/docs/library) | [API reference](https://playwright.dev/docs/api/class-playwright) --- ## VS Code Extension The [Playwright VS Code extension](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright) brings test running, debugging, and code generation directly into your editor. <!-- TODO: hero screenshot of VS Code with Playwright sidebar --> **Run and debug tests** from the editor with a single click. Set breakpoints, inspect variables, and step through test execution with a live browser view. **Generate tests with CodeGen.** Click "Record new" to open a browser — navigate and interact with your app while Playwright writes the test code for you. **Pick locators.** Hover over any element in the browser to see the best available locator, then click to copy it to your clipboard. **Trace Viewer integration.** Enable "Show Trace Viewer" in the sidebar to get a full execution trace after each test run — DOM snapshots, network requests, console logs, and screenshots at every step. [Install the extension](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright) | [VS Code guide](https://playwright.dev/docs/getting-started-vscode) --- ## Cross-Browser Support | | Linux | macOS | Windows | | :--- | :---: | :---: | :---: | | Chromium¹ <!-- GEN:chromium-version -->151.0.7922.10<!-- GEN:stop --> | :white_check_mark: | :white_check_mark: | :white_check_mark: | | WebKit <!-- GEN:webkit-version -->26.5<!-- GEN:stop --> | :white_check_mark: | :white_check_mark: | :white_check_mark: | | Firefox <!-- GEN:firefox-version -->152.0.4<!-- GEN:stop --> | :white_check_mark: | :white_check_mark: | :white_check_mark: | Headless and headed execution on all platforms. ¹ Uses [Chrome for Testing](https://developer.chrome.com/blog/chrome-for-testing) by default. ## Other Languages Playwright is also available for [Python](https://playwright.dev/python/docs/intro), [.NET](https://playwright.dev/dotnet/docs/intro), and [Java](https://playwright.dev/java/docs/intro). ## Resources * [Documentation](https://playwright.dev) * [API reference](https://playwright.dev/docs/api/class-playwright) * [MCP server](https://github.com/microsoft/playwright-mcp) * [CLI for coding agents](https://github.com/microsoft/playwright-cli) * [VS Code extension](https://github.com/microsoft/playwright-vscode) * [Contribution guide](CONTRIBUTING.md) * [Changelog](https://github.com/microsoft/playwright/releases) * [Discord](https://aka.ms/playwright/discord)