作为测试工程师，掌握 Playwright 的核心概念和实用技巧能极大提升自动化测试效率和稳定性。以下是必须了解的关键点：

一、核心优势（为什么选 Playwright？）

1. 多浏览器支持：Chromium、Firefox、WebKit（Safari）的无缝支持。

2. 跨平台：Windows、Linux、macOS 均可运行。

3. 自动等待：智能等待元素可操作（点击/输入等），减少人工 sleep。

4. 无头/有头模式：快速执行（无头）或调试时可视化（有头）。

5. 网络拦截：模拟 API 响应、修改请求、捕获网络请求。

6. 多语言支持：JavaScript/TypeScript、Python、Java、.NET。

二、必须掌握的基础能力

1. 元素定位（核心！）

• 最佳实践：优先使用 getByRole()、getByText()、getByLabel() 等语义化定位器。

• 备用方案：locator('css=button.submit') 或 locator('xpath=//button')。

• 强制等待：locator.click({ timeout: 5000 })（非必要不推荐）。

2. 自动等待机制

• 无需手动等待：Playwright 自动等待元素可交互（如点击前确保元素可见、未禁用）。

• 显式等待：page.waitForSelector() 或 locator.waitFor()（特殊场景使用）。

3. 处理弹窗与导航

// 监听弹窗page.on('dialog', dialog => dialog.accept());
// 等待导航完成await Promise.all([  page.click('#submit'),  page.waitForNavigation()]);

4. Frame 处理

const frame = page.frameLocator('iframe#login');await frame.getByText('Login').click();

三、高级技巧（大幅提升测试能力）

1. 网络请求操控

• 拦截 API 请求：

await page.route('**/api/user', route => route.fulfill({  status: 200,  body: JSON.stringify({ name: 'Mock User' })}));

• 捕获请求数据：

const [request] = await Promise.all([  page.waitForRequest('**/api/data'),  page.click('#fetch-data')]);console.log(request.url());

2. 文件操作

• 上传文件：locator.setInputFiles('path/to/file.png')

• 下载文件：监听 download 事件并保存。

3. 跨标签页/上下文管理

const [newPage] = await Promise.all([  context.waitForEvent('page'),  page.click('a[target="_blank"]')]);await newPage.bringToFront();

4. 身份认证持久化

// 登录一次并保存状态await context.storageState({ path: 'auth.json' });
// 后续测试复用状态const context = await browser.newContext({ storageState: 'auth.json' });

四、测试实战要点

1. 并行执行

• 使用 test.describe.parallel() 加速测试套件。

• 通过 --workers=4 指定并行进程数。

2. 失败排查

• 自动录屏：testConfig.use({ video: 'on-first-retry' })

• 截图：await page.screenshot({ path: 'error.png' })

• Trace 文件：testConfig.use({ trace: 'on-first-retry' })，用 playwright show-trace 分析。

3. 绕过验证码

• 策略：测试环境禁用验证码 / Mock API 返回成功 / 使用测试专用的万能验证码。

4. 移动端模拟

const iPhone = devices['iPhone 13'];const context = await browser.newContext({ ...iPhone });

五、常见避坑指南

避免 page.$() 和 page.$()：

使用 locator 系列方法（如 page.locator()），它们支持自动等待和链式操作。

慎用 page.waitForTimeout()：

绝大多数场景可用 locator.waitFor() 或网络事件替代。

清理测试数据：

测试前后通过 API 或数据库操作清理脏数据（如 beforeEach/afterEach）。

选择正确的断言库：

Playwright 内置断言（如 expect(locator).toBeVisible()），无需额外导入。

六、学习路径建议

1. 入门：官方入门教程（30 分钟搭建第一个测试）。

2. 进阶：掌握网络拦截、文件操作、多上下文管理。

3. 精通：分析 Trace 文件、定制 fixtures、优化并行策略。

终极提示：善用 playwright codegen 命令生成基础脚本，再手动优化定位器和逻辑！

掌握以上内容，你已能高效解决 90% 的 Web 自动化测试需求。Playwright 的持续更新（如最新组件测试支持）也值得长期关注。