03 — Playwright AI 自动化测试完全指南

从基础到 AI 驱动：财政系统 Web 端到端测试实战

作者：浅木·先生
版本：v1.0（2026-05-29）

---

目录

• 一、为什么要用 Playwright
• 二、快速上手
• 三、定位器策略——告别 F12 手动找元素
  • 定位器优先级
  • Playwright 1.59 新特性
• 四、六大高频问题与解决方案
• 五、Playwright + AI Agent 实战
  • 三个 Agent 自动写测试
  • Playwright MCP 集成
  • CDP Bridge：复用登录态
  • Playwright CLI：低 Token 方案
• 六、接口 + UI 一体化测试
• 七、性能测试（Web Vitals）
• 八、提示词模板库（可直接复用）
• 九、学习路线（2 周）
• 十、财政系统测试落地建议

---

一、为什么要用 Playwright

Playwright 相比 Selenium / Cypress 的核心优势：

特性	Playwright	Selenium	Cypress
安装	一行命令	3+ 依赖	简单
浏览器支持	Chromium/Firefox/WebKit	三件套	仅 Chromium
自动等待	✅ 原生	❌ 需要手动	✅
网络拦截	✅ 原生	❌ 需要代理	✅
多标签页	✅ 原生	⚠️ 麻烦	❌ 不支持
AI Agent 集成	✅ MCP 原生	❌	❌
速度	快	较慢	快

为什么财政系统测试选 Playwright：

• 财政系统 UI 变化少、业务逻辑复杂 → 定位器稳定 ≠ 频繁维护
• 前后端分离架构 → 接口+UI 一体化测试，一条用例同时验证
• 多标签页场景常见（预算编制+支付审批+报表查看）→ 原生支持
• 政策驱动的迭代 → 快速生成 + AI 辅助维护

---

二、快速上手

# 安装
npm install -D @playwright/test
npx playwright install

# 运行测试
npx playwright test

# 带 UI 模式调试
npx playwright test --ui

# 查看报告
npx playwright show-report

最小测试文件：

// tests/example.spec.js
const { test, expect } = require('@playwright/test');

test('页面标题正确', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveTitle(/Example/);
});

---

三、定位器策略——告别 F12 手动找元素

定位器优先级

// ✅ 首选：getByRole（语义化）
await page.getByRole('button', { name: '提交' }).click();

// ✅ 次选：getByText（文本匹配）
await page.getByText('预算编制').click();

// ✅ 第三：getByLabel（表单标签）  
await page.getByLabel('预算年度').fill('2026');

// ✅ 第四：getByPlaceholder（占位符）
await page.getByPlaceholder('请输入预算名称').fill('日常公用经费');

// ✅ 第五：getByTestId（最稳定，需开发配合）
await page.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（）—— 点选即得定位器

// 浏览器进入选取模式，鼠标悬停高亮，点选即返回定位器
const locator = await page.pickLocator();
// 返回：getByRole('button', { name: '提交' })

2. normalize（）—— 自动升级为最佳实践

// 旧定位器
const oldLocator = page.locator('.btn-submit');

// 自动升级
const newLocator = oldLocator.normalize();
// 升级为：getByRole('button', { name: '提交' })
// 升级优先级：data-test > role > text

3. screencast —— 录制带标注的测试视频

const recording = await page.screencast();
// 自动录制操作过程，附带动作标注
// 输出 .webm 格式（需要 ffmpeg 转码）

---

四、六大高频问题与解决方案

问题	原因	解决方案
元素定位失败	动态 ID / CSS 类名	用 getByRole / getByTestId
等待超时	页面加载慢 / 异步渲染	用 Web-first 断言（自动重试）
测试数据污染	测试间共用数据	每个测试独立准备+清理
动态内容不出现	异步加载	toBeVisible() 自动等待
跨域弹窗	登录/验证码	page.on('dialog') 处理
测试环境不稳定	环境配置/网络波动	retries: 2 + Trace 录制

等待策略黄金法则：

// ❌ 不要用硬等待
await page.waitForTimeout(3000);

// ✅ 用 Web-first 断言（自动重试直到超时或成功）
await expect(page.getByText('操作成功')).toBeVisible();
await expect(page.locator('.data-table')).toHaveCount(10);

---

五、Playwright + AI Agent 实战

三个 Agent 自动写测试（Playwright Test Agents）

初始化：

npx playwright init-agents
# 或指定 LLM
npx playwright init-agents --loop=claude

三个 Agent 分工：

Planner（规划） → specs/ 目录输出测试计划（Markdown）
    ↓
Generator（生成） → tests/ 目录生成 .spec.ts 代码
    ↓
Healer（修复） → 自动修复失败的测试

Seed 文件机制：

• 必须先写 seed.spec.ts，处理登录/初始化等前置条件
• Agent 依据 seed 文件探索应用

踩坑：

• .check() 和 .click() 不是一回事（Healer 会修）
• Healer 连续 2-3 轮修不好 → 去查应用代码（可能真的有 Bug）
• Agent 生成的代码一定要人工审核

Playwright MCP 集成

Hermes 配置：

# config.yaml
mcpServers:
  playwright:
    command: npx
    args: ["@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-bridge@latest

可用工具：

• browser_get_tabs → 获取所有标签页
• browser_scan → 扫描当前页面可交互元素
• browser_execute_js → 执行 JS
• browser_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: 接口提交审批
  const token = await getAuthToken();
  const response = await request.post('/api/budget/approve', {
    headers: { Authorization: `Bearer ${token}` },
    data: { budgetId: 'B2026001', status: 'approved' }
  });
  expect(response.ok()).toBeTruthy();

  // Step 2: UI 验证结果
  await page.goto('/budget/list');
  await expect(page.getByText('B2026001')).toBeVisible();
  await expect(page.getByText('已审批')).toBeVisible();
});

Mock 接口测试异常场景：

await page.route('**/api/budget/**', async route => {
  const json = { code: 500, message: '服务不可用' };
  await route.fulfill({ json });
});
await page.goto('/budget/list');
await expect(page.getByText('系统繁忙')).toBeVisible();

---

七、性能测试（Web Vitals）

Playwright 采集 Web 核心指标：

await page.goto('https://your-system.com');
const metrics = await page.evaluate(() => ({
  // 核心 Web Vitals
  FCP: performance.getEntriesByName('first-contentful-paint')[0]?.startTime,
  LCP: new Promise(resolve => {
    new PerformanceObserver(list => {
      resolve(list.getEntries()[0].startTime);
    }).observe({ type: 'largest-contentful-paint', buffered: true });
  }),
  // CLS、TTFB 等
}));

采集维度：

• FCP（First Contentful Paint）
• LCP（Largest Contentful Paint）
• CLS（Cumulative Layout Shift）
• FID / TBT（First Input Delay / Total Blocking Time）
• TTFB（Time To First Byte）
• JS 堆内存、节点数

输出：终端 + 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 + MCP
• AI 生成测试脚本
• 提示词模板套用

第 11-14 天：框架搭建

• POM 架构
• CI/CD 集成
• Trace 录制 + 失败重试

---

十、财政系统测试落地建议

财政业务模块	推荐测试策略	自动化率
预算编制	接口校验 + UI 验证	80%
资金支付	接口+UI 一体化（核心链路）	90%
政府采购	UI 端到端（多步骤流程）	60%
账务报表	接口数据校验 + UI 截图对比	70%
审批流程	接口驱动回调 + UI 验证状态	85%

---