共计 3473 个字符，预计需要花费 9 分钟才能阅读完成。
Playwright 是一款功能强大的 Web 自动化测试工具，能够在多个浏览器（Chromium、Firefox、WebKit）上进行高效的 UI 测试。虽然 Playwright 本身已经非常优秀，但在实际使用中，我们可以通过一些技巧进一步优化测试效率、提高稳定性，并减少测试的维护成本。
本文将分享 10 个 Playwright 测试技巧，帮助你更好地编写和执行自动化测试。
1. 启用并行测试，加快执行速度
Playwright 内置的 Playwright Test 框架支持 并行运行测试，能大幅缩短执行时间。在 playwright.config.js 配置文件中，设置 workers 选项即可控制并发数：
// playwright.config.js
module.exports = {workers: 4, // 并发运行 4 个测试};
你还可以使用 --workers 参数在命令行动态调整：
npx playwright test --workers=4
如果某些测试 不能并行（如涉及共享状态），可以使用 test.describe.serial()：
test.describe.serial('串行执行的测试', () => {test('测试 1', async ({ page}) => {// 测试代码...});
test('测试 2', async ({ page}) => {// 依赖于测试 1 的结果});
});
2. 利用智能等待机制，减少显式等待
在 Selenium 中，开发者通常会添加 await page.waitForTimeout(5000) 这样的显式等待。但 Playwright 具有 智能等待 机制，能够自动等待元素变为可交互状态，因此尽量使用 Playwright 提供的方法，而非手动 setTimeout。
✅ 推荐：
await page.waitForSelector('button#submit');
await page.click('button#submit');
❌ 不推荐：
await page.waitForTimeout(5000); // 人为等待 5 秒
await page.click('button#submit');
这样可以提高测试的稳定性，并避免因网络波动导致的测试失败。
3. 使用 beforeEach() 和 afterEach() 进行测试前后置处理
在 Playwright Test 框架中，你可以使用 beforeEach() 和 afterEach() 来 减少重复代码，提高代码复用性。例如，每次测试前都打开同一个页面：
const {test} = require('@playwright/test');
test.beforeEach(async ({ page}) => {await page.goto('https://example.com');
});
test('测试首页是否加载', async ({ page}) => {await page.waitForSelector('h1'); // 断言首页是否有标题
});
test('测试登录按钮是否可点击', async ({ page}) => {await page.click('button#login');
});
4. 启用 tracing，快速定位测试失败原因
Playwright 提供 tracing 功能，可以记录测试的详细执行过程，帮助分析失败原因。你可以使用以下命令开启追踪：
npx playwright test --trace on
也可以在 playwright.config.js 中启用：
module.exports = {
use: {trace: 'on',},
};
执行完测试后，使用以下命令查看生成的 trace.zip 追踪报告：
npx playwright show-trace trace.zip
5. 截图和录屏，提升调试效率
当测试失败时，截图和录屏可以帮助快速排查问题。Playwright 提供 screenshot() 和 video() 方法：
await page.screenshot({path: 'error.png'});
或者在 playwright.config.js 中启用全局截图和录屏功能：
module.exports = {
use: {
screenshot: 'only-on-failure', // 仅在失败时截图
video: 'retain-on-failure', // 仅在失败时录制视频
},
};
6. 模拟不同设备，测试移动端兼容性
Playwright 提供了多种设备模拟功能，例如 iPhone 13：
const {devices} = require('@playwright/test');
const iPhone = devices['iPhone 13'];
test('移动端测试', async ({ page}) => {await page.context().newPage({...iPhone});
await page.goto('https://example.com');
});
你也可以在 playwright.config.js 中指定默认设备：
module.exports = {
projects: [
{name: 'Desktop Chrome', use: { browserName: 'chromium'} },
{name: 'Mobile Safari', use: { browserName: 'webkit', viewport: { width: 375, height: 812} } },
],
};
7. 拦截网络请求，提高测试稳定性
如果测试依赖外部 API，但 API 的响应可能会波动，可以使用 page.route() 拦截请求，返回模拟数据：
await page.route('https://api.example.com/data', async (route) => {
await route.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify({message: 'Hello Playwright'}),
});
});
这样可以避免因外部 API 变动导致的测试失败，提高稳定性。
8. 使用 expect.poll() 进行动态断言
有时页面上的数据是动态更新的，直接断言可能会失败。Playwright 提供 expect.poll() 方法，允许在一定时间内反复检查某个值：
await expect.poll(() => page.innerText('h1')).toContain('Welcome');
这比 waitForTimeout() 更高效，也更符合 Playwright 的智能等待机制。
9. 处理多标签页和弹窗
Playwright 允许同时管理多个页面，如果点击某个链接会打开新标签页，可以这样处理：
const [newPage] = await Promise.all([
context.waitForEvent('page'),
page.click('a[target="_blank"]'),
]);
await newPage.waitForLoadState();
console.log(await newPage.title());
对于弹窗（如 alert()），可以监听 dialog 事件并处理：
page.on('dialog', async (dialog) => {console.log(` 弹窗信息: ${dialog.message()}`);
await dialog.dismiss(); // 关闭弹窗});
10. 集成 GitHub Actions 进行 CI/CD
如果要在 CI/CD 中运行 Playwright 测试，可以使用 GitHub Actions 自动执行：
name: Playwright Tests
on: [push]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: 安装依赖
run: npm install
- name: 运行测试
run: npx playwright test
总结
Playwright 拥有强大的功能，而通过合理的技巧，可以进一步优化测试效率，提高稳定性。本文分享了 10 个 Playwright 实用技巧，帮助你更流畅地进行自动化测试：
- 启用并行测试
- 智能等待机制
- beforeEach/afterEach 复用代码
- 使用 Tracing 追踪失败
- 截图和录屏
- 模拟移动设备
- 拦截网络请求
- 使用 expect.poll() 进行动态断言
- 处理多标签页和弹窗
- 集成 GitHub Actions
你是否在 Playwright 测试中遇到过其他挑战？欢迎留言交流！🚀
