Component testing in Playwright 有了新形态：stories & galleries。一个 story 将你的组件包装在一种场景中——props、providers、mock data——放在组件旁边的 .story.tsx 文件中。gallery 页面由你自己的开发服务器提供，按需渲染 stories——React、Vue、Svelte、Solid，任何框架都可以。正在使用 @playwright/experimental-ct-？试试这个新模型，告诉我们效果如何：https://github.com/microsoft/playwright/issues/42139… 文档：https://playwright.dev/docs/test-components… —

microsoft/playwright 来源：https://github.com/microsoft/playwright

🎭 Playwright npm 版本 (https://www.npmjs.com/package/playwright) Chromium 版本 (https://www.chromium.org/Home) Firefox 版本 (https://www.mozilla.org/en-US/firefox/new/) WebKit 版本 (https://webkit.org/) 加入 Discord (https://aka.ms/playwright/discord)

文档 (https://playwright.dev) | API 参考 (https://playwright.dev/docs/api/class-playwright)

Playwright 是一个用于 Web 自动化和测试的框架。它通过单一 API 驱动 Chromium、Firefox 和 WebKit——无论是在你的测试中、脚本中，还是作为 AI 代理的工具。

开始使用

选择适合你工作流程的路径：

Playwright Test

Playwright Test 是一个专为端到端测试而构建的全功能测试运行器。它支持在 Chromium、Firefox 和 WebKit 上运行测试，具备完整的浏览器隔离、自动等待和 Web 优先断言。

安装

npm init playwright@latest

或手动添加：

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

测试会在所有已配置的浏览器上并行运行，默认使用无头模式。每个测试都会获得全新的浏览器上下文——几乎零开销的完全隔离。

主要功能

自动等待和 Web 优先断言。 没有人为超时。Playwright 会等待元素可操作，断言会自动重试，直到条件满足。

定位器（Locators）。 使用富有弹性的定位器查找元素，这些定位器反映用户看到页面的方式：

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

测试隔离。 每个测试都在自己的浏览器上下文中运行——相当于全新的浏览器配置文件。保存一次认证状态，并在多个测试中复用：

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

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

追踪（Tracing）。 在失败时捕获执行轨迹、截图和视频。在 Trace Viewer (https://playwright.dev/docs/trace-viewer) 中检查每一个操作、DOM 快照、网络请求和控制台消息：

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

npx playwright show-trace trace.zip

并行性。 默认情况下，测试会在所有已配置的浏览器上并行运行。

完整测试文档 (https://playwright.dev/docs/intro)

Playwright CLI

Playwright CLI（https://github.com/microsoft/playwright-cli）是一个为编码代理设计的浏览器自动化命令行界面。它比 MCP 更节省 token——命令无需将大型工具架构和可访问性树加载到模型上下文中。

安装

npm install -g @playwright/cli@latest

可选：安装 skills 以更丰富地集成代理：

playwright-cli install --skills

用法

将你的编码代理指向某个任务：

使用 playwright-cli 测试 https://demo.playwright.dev/todomvc 上的 "add todo" 流程。为所有成功和失败的场景截图。

或者直接运行命令：

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

完整 CLI 文档 (https://playwright.dev/agent-cli/introduction) | GitHub (https://github.com/microsoft/playwright-cli)

Playwright MCP

Playwright MCP 服务器（https://github.com/microsoft/playwright-mcp）通过模型上下文协议（https://modelcontextprotocol.io）为 AI 代理提供完整的浏览器控制能力。代理使用结构化的可访问性快照与页面交互——无需视觉模型或截图。

设置

添加到你的 MCP 客户端（VS Code、Cursor、Claude Desktop、Windsurf 等）：

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

适用于 VS Code 的一键安装：

对于 Claude Code：

claude mcp add playwright npx @playwright/mcp@latest

工作原理

让你的 AI 助手与任意网页交互：

导航到 https://demo.playwright.dev/todomvc 并添加几个待办事项。

代理会将页面视为结构化的可访问性树：

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

它会使用 e5、e10 这样的元素引用来点击、输入和交互——确定性高，且没有视觉歧义。工具涵盖导航、表单填写、截图、网络模拟、存储管理等。

完整 MCP 文档 (https://playwright.dev/mcp/introduction) | GitHub (https://github.com/microsoft/playwright-mcp)

Playwright Library

将 playwright 作为浏览器自动化脚本的库使用——包括网页抓取、PDF 生成、截图捕获，以及任何需要以编程方式控制浏览器但无需测试运行器的工作流程。

安装

npm i playwright

示例

截图：

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();

生成 PDF：

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();

库文档 (https://playwright.dev/docs/library) | API 参考 (https://playwright.dev/docs/api/class-playwright)

VS Code Extension

Playwright VS Code 扩展（https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright）将测试运行、调试和代码生成直接带入你的编辑器中。

运行和调试测试：在编辑器中一键完成。设置断点、检查变量，并通过实时浏览器视图单步执行测试。

使用 CodeGen 生成测试。 点击“Record new”打开浏览器——在 Playwright 为你编写测试代码的同时，导航并与你的应用交互。

选择定位器。 将鼠标悬停在浏览器中的任意元素上，即可看到最佳可用定位器，点击即可复制到剪贴板。

Trace Viewer 集成。 在侧边栏中启用“Show Trace Viewer”，即可在每次测试运行后获得完整的执行轨迹——每一步的 DOM 快照、网络请求、控制台日志和截图。

安装扩展 (https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright) | VS Code 指南 (https://playwright.dev/docs/getting-started-vscode)

跨浏览器支持

所有平台均支持无头和有头执行。1 默认使用 Chrome for Testing (https://developer.chrome.com/blog/chrome-for-testing)。

其他语言

Playwright 也适用于 Python (https://playwright.dev/python/docs/intro)、.NET (https://playwright.dev/dotnet/docs/intro) 和 Java (https://playwright.dev/java/docs/intro)。

资源

• 文档 (https://playwright.dev)
• API 参考 (https://playwright.dev/docs/api/class-playwright)
• MCP 服务器 (https://github.com/microsoft/playwright-mcp)
• 用于编码代理的 CLI (https://github.com/microsoft/playwright-cli)
• VS Code 扩展 (https://github.com/microsoft/playwright-vscode)
• 贡献指南
• 更新日志 (https://github.com/microsoft/playwright/releases)
• Discord (https://aka.ms/playwright/discord)