---
title: "AI 写完页面后怎么验收：用 Playwright 留下可复查的操作证据"
slug: "playwright-ai-frontend-acceptance"
kind: "runbook"
version: "1.0"
status: "reviewed"
compatibility: "符合当前 Playwright 系统要求的 Node.js 项目；已定义测试应用地址和可访问语义。"
risk_level: "medium"
requires_approval: true
updated_at: "2026-10-19T00:32:16.113Z"
verified_at: ""
source: "https://blog.atlankj.com/posts/playwright-ai-frontend-acceptance"
---

# 目标

为已确认的帮助面板行为建立最小 Playwright 用例，并留存执行证据。

# 前置条件

- 已授权修改测试文件和运行测试。
- 已有测试应用，明确按钮与面板的语义约定。
- 首次安装依赖、浏览器或启动服务时，确认操作已获授权。
- 使用测试环境与合成数据。

# 输入

应用地址、实际测试目录、包管理器、测试配置、按钮名称与 dialog 名称。

# 约束

- 先读项目指令和现有配置，复用现有依赖管理。
- 不连接生产账号或执行生产写入。
- 不覆盖用户测试，不用固定休眠掩盖状态问题。
- 不把单项测试通过等同于完整 UX 或无障碍审核通过。
- Trace 与截图共享前脱敏，不对外上传。

# 操作步骤

1. 检查现有 Playwright 配置、脚本和应用启动方式。
2. 确认示例语义与真实产品约定；若不同，按已确认目标替换名称。
3. 在实际测试目录保存帮助按钮打开面板的最小用例。
4. 启动已授权的测试应用，确认地址与端口。
5. 执行指定测试并开启 Trace。
6. 失败时检查应用可达性、定位器、点击行为与面板状态。
7. 记录真实产物路径、结果和未覆盖的关闭、键盘及视觉场景。

# 输出结果

最小测试文件、执行结果、Trace 位置、脱敏证据和未覆盖项目。

# 验证方法

- 测试定位到唯一的目标按钮。
- 点击后目标 dialog 可见。
- 使用实际生成的 Trace 复查操作。
- 未测试的场景明确保留为待验证。

# 异常处理

- 应用不可达：核对地址和启动流程。
- 定位不唯一：核对语义及范围，不改为随意匹配。
- 行为不符：保留失败证据，对照产品约定定位实现问题。
- Trace 未生成：检查执行选项及产物目录，不声称已有证据。

# 回滚方式

只撤销本次新建或修改的测试内容，保留既有文件和用户改动；仅停止本次启动的专用服务。删除测试产物前确认保留需求。

# 参考来源

- https://playwright.dev/docs/intro
- https://playwright.dev/docs/best-practices
- https://playwright.dev/docs/trace-viewer

资料核对日期：2026-10-19。示例对照官方文档编写，未在读者环境实测。