findscripter 何时使用
当你要为 Web 应用建立或扩展浏览器端到端（E2E）自动化测试时使用，典型场景：
- 从零搭建 Playwright 测试框架，配置测试目录与浏览器
- 为关键业务流（登录、下单、表单提交）编写自动化脚本与断言
- 做视觉回归（截图基线比对）
- 在 Chromium / Firefox / WebKit 及移动端模拟下做跨浏览器测试
- 把 E2E 测试接入 CI/CD，并行执行、产出报告与失败追踪产物
不该用的边界：
- 纯单元测试或函数级逻辑 → 用 Vitest/Jest，不要用 Playwright
- 后端 HTTP 接口契约测试 → 用接口测试工具（虽 Playwright 也能发请求，但非首选）
- 一次性手工探索 / 无回归价值的临时点击 → 不值得固化为脚本
- 缺少可访问的目标 URL、测试账号、成功判定标准时：先停下来问清楚，别盲目生成脚本
步骤
- 环境搭建：安装 Playwright，初始化配置，建立
tests/目录，安装浏览器内核。 - 测试设计：梳理关键流程，规划测试数据与 fixtures，按页面建立 Page Object，避免选择器散落。
- 编写实现：写测试脚本与断言，用自动等待（web-first assertions）代替硬编码 sleep，处理动态内容与异常。
- 浏览器能力：按需开启 headless、截图、录像、trace 追踪、移动端模拟。
- 视觉回归：生成基线图，加
toHaveScreenshot断言，设置容差阈值，审查差异。 - 跨浏览器：在 config 的
projects中配置多内核与移动设备，对比结果。 - 接入 CI/CD：编写流水线，分片并行，上传 report/trace 产物，配置失败通知。
指令
# 1. 初始化（自动生成 config、示例用例、CI 模板）
npm init playwright@latest
# 2. 仅安装浏览器内核（已有项目）
npx playwright install --with-deps
# 3. 运行 / 调试
npx playwright test # 全量
npx playwright test --project=chromium
npx playwright test --ui # UI 模式交互调试
npx playwright test --debug # Inspector 单步
npx playwright codegen <url> # 录制生成脚本
# 4. 报告与追踪
npx playwright show-report
npx playwright show-trace trace.zip
# 5. 视觉回归基线（首次或刻意更新）
npx playwright test --update-snapshots
示例
playwright.config.ts —— 跨浏览器 + 失败追踪：
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
testDir: './tests',
fullyParallel: true,
retries: process.env.CI ? 2 : 0,
reporter: 'html',
use: {
baseURL: 'http://localhost:3000',
trace: 'on-first-retry', // 仅重试时收集 trace，降低开销
screenshot: 'only-on-failure',
},
projects: [
{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },
{ name: 'firefox', use: { ...devices['Desktop Firefox'] } },
{ name: 'webkit', use: { ...devices['Desktop Safari'] } },
{ name: 'mobile', use: { ...devices['Pixel 5'] } },
],
});
测试脚本 —— 自动等待 + 视觉回归：
import { test, expect } from '@playwright/test';
test('登录后跳转到仪表盘', async ({ page }) => {
await page.goto('/login');
await page.getByLabel('用户名').fill('demo');
await page.getByLabel('密码').fill('secret');
await page.getByRole('button', { name: '登录' }).click();
// web-first 断言，自动重试等待，无需手写 sleep
await expect(page.getByRole('heading', { name: '仪表盘' })).toBeVisible();
await expect(page).toHaveScreenshot('dashboard.png', { maxDiffPixelRatio: 0.01 });
});
CI/CD（GitHub Actions）：
name: e2e
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: 20 }
- run: npm ci
- run: npx playwright install --with-deps
- run: npx playwright test
- uses: actions/upload-artifact@v4
if: ${{ !cancelled() }}
with:
name: playwright-report
path: playwright-report/
retention-days: 7
注意事项
- 选择器优先级：优先用
getByRole/getByLabel/getByText等面向用户的定位器，少用脆弱的 CSS/XPath。 - 不要硬等待：禁用
waitForTimeout(固定毫秒)，依赖 web-first 断言的自动重试，否则测试既慢又 flaky。 - 视觉回归基线：基线截图应在 CI 同款环境（同 OS/字体/渲染）生成，本地与 CI 渲染差异会导致大量假阳性；用
maxDiffPixelRatio设容差。 - trace 是排障利器：CI 失败时务必上传 trace.zip，用
show-trace回看每一步 DOM/网络/截图。 - 隔离与数据：每个测试自带独立状态，借助 fixtures 准备/清理数据，避免用例间互相污染。
- 质量门禁：合并前确认——用例全绿、关键流覆盖充分、视觉测试稳定、跨浏览器通过、CI 集成正常。
- 输出不能替代针对具体环境的人工验证与专家评审；输入、权限、成功标准缺失时先澄清再动手。
互见
- 测试与 QA 整体工作流（单元 / 接口 / E2E 分层）
- 前端开发与 Web 性能优化技能
- CI/CD 自动化与 GitHub Actions 模板
采编自 sickn33/antigravity-awesome-skills（MIT 许可证），已按「技能大典」规范适配重写并补充可执行命令与代码示例。