Playwright Test 教程（2025 年最新版）
Playwright Test 是 Playwright 框架内置的官方测试运行器（test runner），专为现代 Web 应用的端到端（E2E）测试设计。它基于 Playwright 核心库，提供开箱即用的并行执行、自动等待、Web-First 断言、Trace 调试、视频录制等功能，比传统工具（如 Jest + Puppeteer）更适合浏览器自动化测试。截至 2025 年 12 月，Playwright 最新版本约 1.57+，Test Runner 继续强化 UI Mode、并行性和报告功能。
1. Playwright Test 的核心优势
- 专为 E2E 优化：自动等待元素可操作、跨浏览器（Chromium/Firefox/WebKit）一致 API。
- 内置强大功能：并行测试、失败重试、Trace Viewer（包含截图/视频/网络日志）、UI Mode（可视化运行/调试）。
- 与 Jest 对比：Jest 擅长单元/集成测试（JS 逻辑），Playwright Test 更适合浏览器 E2E（真实用户交互）。许多团队用 Jest 测试组件，用 Playwright Test 测试完整流程。
- 其他特点：支持 TypeScript、Fixtures（复用页面/上下文）、分片执行（CI/CD 加速）。
2. 安装与项目初始化
# 一键初始化（推荐，自动创建配置和示例）
npm init playwright@latest
# 或手动
npm i -D @playwright/test
npx playwright install # 下载浏览器- 初始化后生成：
playwright.config.ts：核心配置。tests/目录：存放测试文件（.spec.ts）。- 示例测试文件。
3. 第一个测试示例
创建一个 tests/example.spec.ts：
import { test, expect } from '@playwright/test';
test('首页标题验证', async ({ page }) => {
await page.goto('https://playwright.dev/');
// 自动等待 + 断言（Web-First：自动重试）
await expect(page).toHaveTitle(/Playwright/);
// 交互 + 截图
await page.getByRole('link', { name: 'Get started' }).click();
await page.screenshot({ path: 'screenshot.png' });
});运行：
npx playwright test # 运行所有测试（headless 并行）
npx playwright test --headed # 显示浏览器
npx playwright test --ui # UI Mode（可视化，最推荐调试）4. 核心功能速览
| 功能 | 描述与命令 | 示例配置（playwright.config.ts） |
|---|---|---|
| 并行执行 | 默认使用所有 CPU 核心 | workers: 4 |
| 跨浏览器项目 | 多项目配置 | projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }] |
| 失败重试 | 自动重试 flaky 测试 | retries: 2 |
| 报告与 Trace | HTML 报告 + Trace Viewer（调试神器） | reporter: 'html'；运行后 npx playwright show-report |
| 视频/截图 | 失败时自动录制 | use: { video: 'on-first-retry', screenshot: 'on' } |
| UI Mode | 可视化运行、时间旅行调试 | npx playwright test --ui |
| Fixtures | 复用页面/上下文 | test.use({ storageState: 'auth.json' })（登录状态复用） |
5. 运行与调试技巧
- 调试：
npx playwright test --debug或 VS Code 扩展（Microsoft Playwright Test）。 - 选择测试：
npx playwright test example.spec.ts（单个文件）或--grep "标题"（匹配标题）。 - CI/CD：集成 GitHub Actions（初始化时可选添加 workflow）。
- 代码生成：
npx playwright codegen https://example.com（录制生成测试代码）。
6. 最佳实践
- 使用 Locator + getByRole 定位（最稳定）。
- 测试文件以
.spec.ts结尾。 - 生产环境：开启 trace/video，仅失败时保留以节省空间。
- 与组件测试结合：Playwright 也支持组件测试（Vue/React）。
Playwright Test 是当前 E2E 测试的顶级选择，尤其适合需要跨浏览器、高可靠性的项目。官方文档：https://playwright.dev/docs/intro。
如果需要特定示例（如并行配置、API 测试集成）或 Python 版 Playwright Test，告诉我，我可以继续展开！
