Playwright测试工程师必备技能总结

原创于 2025-07-04 12:45:34 发布 · 656 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#人工智能 #计算机视觉 #知识图谱 #自动化 #运维 #playwright #压力测试

Web自动化测试神器Playwright‌ 专栏收录该内容

61 篇文章

订阅专栏

作为测试工程师，掌握 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 的持续更新（如最新组件测试支持）也值得长期关注。

Playwright学习交流群

爱测智能化服务平台

测开人必看！0代码+AI驱动，测试效率飙升300% ——霍格沃兹测试开发学社‌重磅上新‌「爱测智能化服务平台」限时开放体验！

一码难求的Manus：智能体技术如何重构生产力？测试领域又有哪些新机遇？

开源工具

AppCrawler 开源版
https://github.com/seveniruby/AppCrawler

Hogwarts-Browser-Use 开源版
指导安装贴：hogwarts-browser-use - 开源项目 - 爱测-测试人社区

专业版（7天免费试用）

自动遍历测试框架 AppCrawler 专业版
通用数据驱动测试框架 hogwarts-ddt 专业版
测试智能体框架 hogwarts-agent 专业版

学社提供的资源

教育官网：霍格沃兹测试开发学社
科技官网：测吧（北京）科技有限公司
火焰杯就业选拔赛：火焰杯就业选拔赛 - 霍格沃兹测试开发学社
火焰杯职业竞赛：火焰杯职业竞赛 - 霍格沃兹测试开发学社
学习路线图：霍格沃兹测试开发学社
公益社区论坛：爱测-测试人社区 - 软件测试开发爱好者的交流社区，交流范围涵盖软件测试、自动化测试、UI测试、接口测试、性能测试、安全测试、测试开发、测试平台、开源测试、测试教程、测试面试题、appium、selenium、jmeter、jenkins
公众号：霍格沃兹测试学院
视频号：霍格沃兹软件测试
ChatGPT体验地址：霍格沃兹测试开发学社

本套视频教程所有配套资料领取方式如下: