无需人工超时。Playwright 等待元素可操作，断言自动重试直到条件满足。专为现代异步 Web 应用设计，彻底告别 flaky test。
await expect(page.getByRole('button')).toBeEnabled();角色、标签、占位符、测试 ID —— 反映用户视角，告别脆弱选择器。
每个测试独立浏览器上下文，等同全新配置文件。认证状态一次保存，跨测试复用。
失败时捕获追踪、截图和视频。在 Trace Viewer 中检查每一步。
所有浏览器并行运行，全新上下文几乎零开销。
Node.js、Python、.NET、Java —— 同一 API，跨语言一致。
端到端测试运行器，专为 E2E 测试构建
npm init playwright@latest
为编码代理设计的命令行接口
npm i -g @playwright/cli@latest
AI 代理和 LLM 驱动的自动化
npx @playwright/mcp@latest
浏览器自动化脚本和编程控制
npm i playwright
在 VS Code 中编写和调试测试。一键运行、CodeGen 录制、定位器选取、Trace Viewer 集成。
在 Chromium、Firefox 和 WebKit 上运行测试，具备完整的浏览器隔离、自动等待和 Web 优先断言。
$ npm init playwright@latest$ npx playwright test无头模式 · 全浏览器并行 · 完全隔离 · 几乎零开销
// 保存登录状态
await page.context().storageState({ path: 'auth.json' });
// 跨测试复用
test.use({ storageState: 'auth.json' });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();
});page.getByRole('button', { name: 'Submit' })
page.getByLabel('Email')
page.getByPlaceholder('Search...')
page.getByTestId('login-form')// playwright.config.ts
export default defineConfig({
use: {
trace: 'on-first-retry',
},
});比 MCP 更节省 token —— 命令避免将大型工具 schema 和可访问性树加载到模型上下文中。
$ npm install -g @playwright/cli@latest$ playwright-cli install --skills$ playwright-cli open https://demo.playwright.dev/todomvc/ --headed
$ playwright-cli type "Buy groceries"
$ playwright-cli press Enter
$ playwright-cli screenshot使用 playwright-cli show 打开可视化仪表板，实时预览所有运行中的浏览器会话。
$ playwright-cli show使用 playwright-cli 测试
https://demo.playwright.dev/todomvc
上的"添加待办"流程。
为所有成功和失败的场景截图。通过模型上下文协议为 AI 代理提供完整的浏览器控制。代理使用结构化的可访问性快照与页面交互 —— 无需视觉模型。
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}$ claude mcp add playwright npx @playwright/mcp@latestAI 代理看到的是结构化的可访问性树，使用元素引用进行确定性交互：
- heading "todos" [level=1]
- textbox "What needs to be done?"
[ref=e5]
- listitem:
- checkbox "Toggle Todo"
[ref=e10]
- text: "Buy groceries"
代理使用 e5、e10 等引用进行交互 —— 确定性强，无视觉歧义。涵盖导航、表单填写、截图、网络模拟、存储管理等。
网页抓取、PDF 生成、截图捕获，以及任何需要程序化浏览器控制的工作流。
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();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();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();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();$ npm i playwright所有平台支持无头和有头模式
| Linux | macOS | Windows | |
|---|---|---|---|
|
Chromium 147
|
✓ | ✓ | ✓ |
|
WebKit 26.4
|
✓ | ✓ | ✓ |
|
Firefox 149
|
✓ | ✓ | ✓ |
默认使用 Chrome for Testing