作为测试工程师，掌握 Playwright 的核心概念和实用技巧能极大提升自动化测试效率和稳定性。以下是必须了解的关键点：
一、核心优势（为什么选 Playwright？）
- 多浏览器支持：Chromium、Firefox、WebKit（Safari）的无缝支持。
- 跨平台：Windows、Linux、macOS 均可运行。
- 自动等待：智能等待元素可操作（点击/输入等），减少人工
sleep。 - 无头/有头模式：快速执行（无头）或调试时可视化（有头）。
- 网络拦截：模拟 API 响应、修改请求、捕获网络请求。
- 多语言支持：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()），无需额外导入。
六、学习路径建议
- 入门：官方入门教程（30分钟搭建第一个测试）。
- 进阶：掌握网络拦截、文件操作、多上下文管理。
- 精通：分析 Trace 文件、定制 fixtures、优化并行策略。
终极提示：善用
playwright codegen命令生成基础脚本，再手动优化定位器和逻辑！
掌握以上内容，你已能高效解决 90% 的 Web 自动化测试需求。Playwright 的持续更新（如最新组件测试支持）也值得长期关注。
推荐阅读
软件测试/测试开发丨Pytest测试用例生命周期管理-Fixture
软件测试/测试开发丨Python学习笔记之基本数据类型与操作
