03 — Playwright AI 自动化测试完全指南从基础到 AI 驱动财政系统 Web 端到端测试实战作者浅木·先生版本v1.02026-05-29目录一、为什么要用 Playwright二、快速上手三、定位器策略——告别 F12 手动找元素定位器优先级Playwright 1.59 新特性四、六大高频问题与解决方案五、Playwright AI Agent 实战三个 Agent 自动写测试Playwright MCP 集成CDP Bridge复用登录态Playwright CLI低 Token 方案六、接口 UI 一体化测试七、性能测试Web Vitals八、提示词模板库可直接复用九、学习路线2 周十、财政系统测试落地建议一、为什么要用 PlaywrightPlaywright 相比 Selenium / Cypress 的核心优势特性PlaywrightSeleniumCypress安装一行命令3 依赖简单浏览器支持Chromium/Firefox/WebKit三件套仅 Chromium自动等待✅ 原生❌ 需要手动✅网络拦截✅ 原生❌ 需要代理✅多标签页✅ 原生⚠️ 麻烦❌ 不支持AI Agent 集成✅ MCP 原生❌❌速度快较慢快为什么财政系统测试选 Playwright财政系统 UI 变化少、业务逻辑复杂 → 定位器稳定 ≠ 频繁维护前后端分离架构 → 接口UI 一体化测试一条用例同时验证多标签页场景常见预算编制支付审批报表查看→ 原生支持政策驱动的迭代 → 快速生成 AI 辅助维护二、快速上手# 安装npminstall-Dplaywright/test npx playwrightinstall# 运行测试npx playwrighttest# 带 UI 模式调试npx playwrighttest--ui# 查看报告npx playwright show-report最小测试文件// tests/example.spec.jsconst{test,expect}require(playwright/test);test(页面标题正确,async({page}){awaitpage.goto(https://example.com);awaitexpect(page).toHaveTitle(/Example/);});三、定位器策略——告别 F12 手动找元素定位器优先级// ✅ 首选getByRole语义化awaitpage.getByRole(button,{name:提交}).click();// ✅ 次选getByText文本匹配awaitpage.getByText(预算编制).click();// ✅ 第三getByLabel表单标签awaitpage.getByLabel(预算年度).fill(2026);// ✅ 第四getByPlaceholder占位符awaitpage.getByPlaceholder(请输入预算名称).fill(日常公用经费);// ✅ 第五getByTestId最稳定需开发配合awaitpage.getByTestId(submit-approval).click();// ❌ 尽量避免CSS / XPath绑定 DOM 结构易碎// page.locator(.btn-submit).click(); // CSS 类名易变// page.locator(//div[3]/button[1]).click(); // XPath 序号最脆弱核心原则选择器越接近用户视角越稳定。用户看不见 CSS 类名和 XPath 序号他们看到的是按钮文字和表单标签。Playwright 1.59 新特性1. pickLocator—— 点选即得定位器// 浏览器进入选取模式鼠标悬停高亮点选即返回定位器constlocatorawaitpage.pickLocator();// 返回getByRole(button, { name: 提交 })2. normalize—— 自动升级为最佳实践// 旧定位器constoldLocatorpage.locator(.btn-submit);// 自动升级constnewLocatoroldLocator.normalize();// 升级为getByRole(button, { name: 提交 })// 升级优先级data-test role text3. screencast —— 录制带标注的测试视频constrecordingawaitpage.screencast();// 自动录制操作过程附带动作标注// 输出 .webm 格式需要 ffmpeg 转码四、六大高频问题与解决方案问题原因解决方案元素定位失败动态 ID / CSS 类名用 getByRole / getByTestId等待超时页面加载慢 / 异步渲染用 Web-first 断言自动重试测试数据污染测试间共用数据每个测试独立准备清理动态内容不出现异步加载toBeVisible()自动等待跨域弹窗登录/验证码page.on(dialog)处理测试环境不稳定环境配置/网络波动retries: 2 Trace 录制等待策略黄金法则// ❌ 不要用硬等待awaitpage.waitForTimeout(3000);// ✅ 用 Web-first 断言自动重试直到超时或成功awaitexpect(page.getByText(操作成功)).toBeVisible();awaitexpect(page.locator(.data-table)).toHaveCount(10);五、Playwright AI Agent 实战三个 Agent 自动写测试Playwright Test Agents初始化npx playwright init-agents# 或指定 LLMnpx playwright init-agents--loopclaude三个 Agent 分工Planner规划 → specs/ 目录输出测试计划Markdown ↓ Generator生成 → tests/ 目录生成 .spec.ts 代码 ↓ Healer修复 → 自动修复失败的测试Seed 文件机制必须先写 seed.spec.ts处理登录/初始化等前置条件Agent 依据 seed 文件探索应用踩坑.check()和.click()不是一回事Healer 会修Healer 连续 2-3 轮修不好 → 去查应用代码可能真的有 BugAgent 生成的代码一定要人工审核Playwright MCP 集成Hermes 配置# config.yamlmcpServers:playwright:command:npxargs:[playwright/mcp]核心工具browser_snapshot→ 返回无障碍树非 DOM 树browser_navigate→ 导航browser_click→ 点击browser_type→ 输入POM MCP 场景财政系统pytest 测试失败 → 自动截图 → MCP 读 snapshot → LLM 分析失败原因 → 建议修复代码提示词优化通过率从 30% 提升到 80%角色锚定告诉 AI 你是测试工程师示例驱动给一个示例脚本让它参考分步指令用一个步骤的指令不要一步到位CDP Bridge复用登录态适用场景财政系统需要 SSO/OAuth 登录测试不想每次都重登。# 启动uvx cdp-bridgelatest可用工具browser_get_tabs→ 获取所有标签页browser_scan→ 扫描当前页面可交互元素browser_execute_js→ 执行 JSbrowser_navigate→ 导航browser_screenshot→ 截图browser_cookies→ 操作 Cookie优势复用现有浏览器会话登录态不丢真实页面操作不是沙箱适合需要多次登录的业务流程Playwright CLI低 Token 方案对比方案Token 消耗定位方式适合场景Playwright MCP高工具 Schema 全塞入无障碍树复杂交互CDP Bridge中真实 DOM登录态复用Playwright CLI低无障碍树批量/CI 集成Playwright CLI 流程页面探索 → 无障碍快照采集 → 生成 JSON 用例 → 可选 Excel 可视化 → AI 执行六、接口 UI 一体化测试财政系统的典型场景test(预算审批流程接口提交 → UI 验证,async({page,request}){// Step 1: 接口提交审批consttokenawaitgetAuthToken();constresponseawaitrequest.post(/api/budget/approve,{headers:{Authorization:Bearer${token}},data:{budgetId:B2026001,status:approved}});expect(response.ok()).toBeTruthy();// Step 2: UI 验证结果awaitpage.goto(/budget/list);awaitexpect(page.getByText(B2026001)).toBeVisible();awaitexpect(page.getByText(已审批)).toBeVisible();});Mock 接口测试异常场景awaitpage.route(**/api/budget/**,asyncroute{constjson{code:500,message:服务不可用};awaitroute.fulfill({json});});awaitpage.goto(/budget/list);awaitexpect(page.getByText(系统繁忙)).toBeVisible();七、性能测试Web VitalsPlaywright 采集 Web 核心指标awaitpage.goto(https://your-system.com);constmetricsawaitpage.evaluate(()({// 核心 Web VitalsFCP:performance.getEntriesByName(first-contentful-paint)[0]?.startTime,LCP:newPromise(resolve{newPerformanceObserver(list{resolve(list.getEntries()[0].startTime);}).observe({type:largest-contentful-paint,buffered:true});}),// CLS、TTFB 等}));采集维度FCPFirst Contentful PaintLCPLargest Contentful PaintCLSCumulative Layout ShiftFID / TBTFirst Input Delay / Total Blocking TimeTTFBTime To First ByteJS 堆内存、节点数输出终端 JSON 报告 页面截图八、提示词模板库可直接复用万能母版你是一个 Playwright 测试专家。 请帮我为以下场景编写 Playwright pytest 自动化测试脚本。 【技术栈】 - Python pytest Playwright - 使用 playwright/test 或 Playwright Python 库 - 优先使用 getByRole/getByText/getByLabel 定位器 - 使用 Web-first 断言toBeVisible/toHaveText 【页面描述】 在此描述页面结构和业务流程 【测试场景】 在此描述要测的功能点 【输出要求】 - 完整的可运行脚本 - 包含必要的注释 - 使用数据驱动支持参数化 - 稳定的选择器不依赖 CSS 类名登录模板测试场景财政系统登录页 技术栈Playwright Python 数据来源.env 文件USERNAME/PASSWORD 验证点 1. 正确凭据 → 跳转首页 2. 错误密码 → 显示错误提示 3. 空用户名 → 前端校验提示 4. 连续失败 5 次 → 账户锁定提示查询模板测试场景预算列表查询 兼容有数据显示表格/ 无数据显示暂无数据 验证点 1. 默认加载显示数据 2. 按年度/部门/状态筛选 3. 分页功能 4. 搜索关键词九、学习路线2 周第 1-2 天安装跑通装 Playwright运行官方示例理解test和expect结构第 3-5 天基础操作元素定位getByRole / getByText / getByLabel等待策略Web-first 断言录制回放npx playwright codegen第 6-10 天AI 实战Playwright MCPAI 生成测试脚本提示词模板套用第 11-14 天框架搭建POM 架构CI/CD 集成Trace 录制 失败重试十、财政系统测试落地建议财政业务模块推荐测试策略自动化率预算编制接口校验 UI 验证80%资金支付接口UI 一体化核心链路90%政府采购UI 端到端多步骤流程60%账务报表接口数据校验 UI 截图对比70%审批流程接口驱动回调 UI 验证状态85%
03 — Playwright AI 自动化测试完全指南
03 — Playwright AI 自动化测试完全指南从基础到 AI 驱动财政系统 Web 端到端测试实战作者浅木·先生版本v1.02026-05-29目录一、为什么要用 Playwright二、快速上手三、定位器策略——告别 F12 手动找元素定位器优先级Playwright 1.59 新特性四、六大高频问题与解决方案五、Playwright AI Agent 实战三个 Agent 自动写测试Playwright MCP 集成CDP Bridge复用登录态Playwright CLI低 Token 方案六、接口 UI 一体化测试七、性能测试Web Vitals八、提示词模板库可直接复用九、学习路线2 周十、财政系统测试落地建议一、为什么要用 PlaywrightPlaywright 相比 Selenium / Cypress 的核心优势特性PlaywrightSeleniumCypress安装一行命令3 依赖简单浏览器支持Chromium/Firefox/WebKit三件套仅 Chromium自动等待✅ 原生❌ 需要手动✅网络拦截✅ 原生❌ 需要代理✅多标签页✅ 原生⚠️ 麻烦❌ 不支持AI Agent 集成✅ MCP 原生❌❌速度快较慢快为什么财政系统测试选 Playwright财政系统 UI 变化少、业务逻辑复杂 → 定位器稳定 ≠ 频繁维护前后端分离架构 → 接口UI 一体化测试一条用例同时验证多标签页场景常见预算编制支付审批报表查看→ 原生支持政策驱动的迭代 → 快速生成 AI 辅助维护二、快速上手# 安装npminstall-Dplaywright/test npx playwrightinstall# 运行测试npx playwrighttest# 带 UI 模式调试npx playwrighttest--ui# 查看报告npx playwright show-report最小测试文件// tests/example.spec.jsconst{test,expect}require(playwright/test);test(页面标题正确,async({page}){awaitpage.goto(https://example.com);awaitexpect(page).toHaveTitle(/Example/);});三、定位器策略——告别 F12 手动找元素定位器优先级// ✅ 首选getByRole语义化awaitpage.getByRole(button,{name:提交}).click();// ✅ 次选getByText文本匹配awaitpage.getByText(预算编制).click();// ✅ 第三getByLabel表单标签awaitpage.getByLabel(预算年度).fill(2026);// ✅ 第四getByPlaceholder占位符awaitpage.getByPlaceholder(请输入预算名称).fill(日常公用经费);// ✅ 第五getByTestId最稳定需开发配合awaitpage.getByTestId(submit-approval).click();// ❌ 尽量避免CSS / XPath绑定 DOM 结构易碎// page.locator(.btn-submit).click(); // CSS 类名易变// page.locator(//div[3]/button[1]).click(); // XPath 序号最脆弱核心原则选择器越接近用户视角越稳定。用户看不见 CSS 类名和 XPath 序号他们看到的是按钮文字和表单标签。Playwright 1.59 新特性1. pickLocator—— 点选即得定位器// 浏览器进入选取模式鼠标悬停高亮点选即返回定位器constlocatorawaitpage.pickLocator();// 返回getByRole(button, { name: 提交 })2. normalize—— 自动升级为最佳实践// 旧定位器constoldLocatorpage.locator(.btn-submit);// 自动升级constnewLocatoroldLocator.normalize();// 升级为getByRole(button, { name: 提交 })// 升级优先级data-test role text3. screencast —— 录制带标注的测试视频constrecordingawaitpage.screencast();// 自动录制操作过程附带动作标注// 输出 .webm 格式需要 ffmpeg 转码四、六大高频问题与解决方案问题原因解决方案元素定位失败动态 ID / CSS 类名用 getByRole / getByTestId等待超时页面加载慢 / 异步渲染用 Web-first 断言自动重试测试数据污染测试间共用数据每个测试独立准备清理动态内容不出现异步加载toBeVisible()自动等待跨域弹窗登录/验证码page.on(dialog)处理测试环境不稳定环境配置/网络波动retries: 2 Trace 录制等待策略黄金法则// ❌ 不要用硬等待awaitpage.waitForTimeout(3000);// ✅ 用 Web-first 断言自动重试直到超时或成功awaitexpect(page.getByText(操作成功)).toBeVisible();awaitexpect(page.locator(.data-table)).toHaveCount(10);五、Playwright AI Agent 实战三个 Agent 自动写测试Playwright Test Agents初始化npx playwright init-agents# 或指定 LLMnpx playwright init-agents--loopclaude三个 Agent 分工Planner规划 → specs/ 目录输出测试计划Markdown ↓ Generator生成 → tests/ 目录生成 .spec.ts 代码 ↓ Healer修复 → 自动修复失败的测试Seed 文件机制必须先写 seed.spec.ts处理登录/初始化等前置条件Agent 依据 seed 文件探索应用踩坑.check()和.click()不是一回事Healer 会修Healer 连续 2-3 轮修不好 → 去查应用代码可能真的有 BugAgent 生成的代码一定要人工审核Playwright MCP 集成Hermes 配置# config.yamlmcpServers:playwright:command:npxargs:[playwright/mcp]核心工具browser_snapshot→ 返回无障碍树非 DOM 树browser_navigate→ 导航browser_click→ 点击browser_type→ 输入POM MCP 场景财政系统pytest 测试失败 → 自动截图 → MCP 读 snapshot → LLM 分析失败原因 → 建议修复代码提示词优化通过率从 30% 提升到 80%角色锚定告诉 AI 你是测试工程师示例驱动给一个示例脚本让它参考分步指令用一个步骤的指令不要一步到位CDP Bridge复用登录态适用场景财政系统需要 SSO/OAuth 登录测试不想每次都重登。# 启动uvx cdp-bridgelatest可用工具browser_get_tabs→ 获取所有标签页browser_scan→ 扫描当前页面可交互元素browser_execute_js→ 执行 JSbrowser_navigate→ 导航browser_screenshot→ 截图browser_cookies→ 操作 Cookie优势复用现有浏览器会话登录态不丢真实页面操作不是沙箱适合需要多次登录的业务流程Playwright CLI低 Token 方案对比方案Token 消耗定位方式适合场景Playwright MCP高工具 Schema 全塞入无障碍树复杂交互CDP Bridge中真实 DOM登录态复用Playwright CLI低无障碍树批量/CI 集成Playwright CLI 流程页面探索 → 无障碍快照采集 → 生成 JSON 用例 → 可选 Excel 可视化 → AI 执行六、接口 UI 一体化测试财政系统的典型场景test(预算审批流程接口提交 → UI 验证,async({page,request}){// Step 1: 接口提交审批consttokenawaitgetAuthToken();constresponseawaitrequest.post(/api/budget/approve,{headers:{Authorization:Bearer${token}},data:{budgetId:B2026001,status:approved}});expect(response.ok()).toBeTruthy();// Step 2: UI 验证结果awaitpage.goto(/budget/list);awaitexpect(page.getByText(B2026001)).toBeVisible();awaitexpect(page.getByText(已审批)).toBeVisible();});Mock 接口测试异常场景awaitpage.route(**/api/budget/**,asyncroute{constjson{code:500,message:服务不可用};awaitroute.fulfill({json});});awaitpage.goto(/budget/list);awaitexpect(page.getByText(系统繁忙)).toBeVisible();七、性能测试Web VitalsPlaywright 采集 Web 核心指标awaitpage.goto(https://your-system.com);constmetricsawaitpage.evaluate(()({// 核心 Web VitalsFCP:performance.getEntriesByName(first-contentful-paint)[0]?.startTime,LCP:newPromise(resolve{newPerformanceObserver(list{resolve(list.getEntries()[0].startTime);}).observe({type:largest-contentful-paint,buffered:true});}),// CLS、TTFB 等}));采集维度FCPFirst Contentful PaintLCPLargest Contentful PaintCLSCumulative Layout ShiftFID / TBTFirst Input Delay / Total Blocking TimeTTFBTime To First ByteJS 堆内存、节点数输出终端 JSON 报告 页面截图八、提示词模板库可直接复用万能母版你是一个 Playwright 测试专家。 请帮我为以下场景编写 Playwright pytest 自动化测试脚本。 【技术栈】 - Python pytest Playwright - 使用 playwright/test 或 Playwright Python 库 - 优先使用 getByRole/getByText/getByLabel 定位器 - 使用 Web-first 断言toBeVisible/toHaveText 【页面描述】 在此描述页面结构和业务流程 【测试场景】 在此描述要测的功能点 【输出要求】 - 完整的可运行脚本 - 包含必要的注释 - 使用数据驱动支持参数化 - 稳定的选择器不依赖 CSS 类名登录模板测试场景财政系统登录页 技术栈Playwright Python 数据来源.env 文件USERNAME/PASSWORD 验证点 1. 正确凭据 → 跳转首页 2. 错误密码 → 显示错误提示 3. 空用户名 → 前端校验提示 4. 连续失败 5 次 → 账户锁定提示查询模板测试场景预算列表查询 兼容有数据显示表格/ 无数据显示暂无数据 验证点 1. 默认加载显示数据 2. 按年度/部门/状态筛选 3. 分页功能 4. 搜索关键词九、学习路线2 周第 1-2 天安装跑通装 Playwright运行官方示例理解test和expect结构第 3-5 天基础操作元素定位getByRole / getByText / getByLabel等待策略Web-first 断言录制回放npx playwright codegen第 6-10 天AI 实战Playwright MCPAI 生成测试脚本提示词模板套用第 11-14 天框架搭建POM 架构CI/CD 集成Trace 录制 失败重试十、财政系统测试落地建议财政业务模块推荐测试策略自动化率预算编制接口校验 UI 验证80%资金支付接口UI 一体化核心链路90%政府采购UI 端到端多步骤流程60%账务报表接口数据校验 UI 截图对比70%审批流程接口驱动回调 UI 验证状态85%
![3分钟掌握VideoDownloadHelper：简单高效的网页视频下载插件终极指南 [特殊字符]](images/news3.jpg)
