sync: d8d-prototype 统一 Playwright CLI 命令风格

- step-07-validate.md: Playwright MCP 调用改为 CLI 命令
- workflow.md: 门禁验证改为 CLI 风格
This commit is contained in:
zyh
2026-04-23 08:18:46 +00:00
parent 52915f5ebc
commit 2da24da392
2 changed files with 22 additions and 29 deletions

View File

@@ -4,7 +4,7 @@
## STEP GOAL
使用 Playwright MCP 和图片 MCP 对所有已生成的页面进行自动化验证,输出验证报告。
使用 Playwright CLI 和图片 MCP 对所有已生成的页面进行自动化验证,输出验证报告。
## ⚠️ 强制验证(不可跳过)
@@ -47,31 +47,25 @@ curl -s -o /dev/null -w "%{http_code}" http://localhost:8080/
cd prototype/ && nohup node server.js &>/dev/null &
```
### 7.3 使用 Playwright MCP 验证原型页面
### 7.3 使用 Playwright CLI 验证原型页面
```javascript
// 1. 启动浏览器,导航到入口
mcp__playwright__browser_navigate
url: http://localhost:8080/index.html
```bash
# 1. 导航到入口
playwright-cli -s={S} goto http://localhost:8080/index.html
// 2. 截图保存入口页面
mcp__playwright__browser_take_screenshot
filename: prototype/screenshots/01-index.png
fullPage: true
# 2. 截图保存入口页面
playwright-cli -s={S} screenshot filename=prototype/screenshots/01-index.png fullPage=true
// 3. 点击原型系统入口,验证平铺展示
mcp__playwright__browser_click
ref: [原型系统卡片]
# 3. 点击原型系统入口,验证平铺展示
playwright-cli -s={S} click "text=原型系统"
mcp__playwright__browser_take_screenshot
filename: prototype/screenshots/02-prototype-grid.png
fullPage: true
playwright-cli -s={S} screenshot filename=prototype/screenshots/02-prototype-grid.png fullPage=true
// 4. 遍历每个独立页面
// 对状态文件中每个已勾选的页面:
// - 导航到页面 URL
// - 获取快照
// - 截图保存
# 4. 遍历每个独立页面
# 对状态文件中每个已勾选的页面:
# - 导航到页面 URL
# - 获取快照
# - 截图保存
```
### 7.4 文档内容深度验证 ⭐(强制步骤)
@@ -80,7 +74,7 @@ fullPage: true
#### 7.4.1 遍历所有文档链接
使用 Playwright `browser_run_code` 批量验证:
使用 Playwright `eval` 批量验证:
```javascript
async (page) => {
@@ -112,10 +106,9 @@ async (page) => {
对每个文档页面检查控制台是否有 404 或加载失败错误:
```javascript
mcp__playwright__browser_console_messages
level: error
// 检查是否有 "Failed to load resource" 或 "404" 错误
```bash
playwright-cli -s={S} console level=error
# 检查是否有 "Failed to load resource" 或 "404" 错误
```
#### 7.4.3 修复发现的问题
@@ -249,7 +242,7 @@ Read _d8d/design-tool-adapter/adapters/pencil.md — 了解具体命令
- 测试页面: {total} 个
- 测试文档: {doc_count} 个
- 截图数量: {count} 张
- 验证方式: Playwright MCP + Image MCP
- 验证方式: Playwright CLI + Image MCP
## 链接验证结果
| 页面 | 链接状态 | 跳转正确 | 备注 |

View File

@@ -81,8 +81,8 @@ page_counts:
3. ✅ 状态文件 `completed_steps` 包含 `evidence` 字段
### 验证步骤门禁Step 7 专属)
1. ✅ 使用 `mcp__playwright__browser_take_screenshot` 对平铺入口截图
2. ✅ 使用 `mcp__zai-mcp-server__analyze_image` 分析截图,验证:
1. ✅ 使用 `playwright-cli -s={S} screenshot` 对平铺入口截图
2. ✅ 使用图片 MCP 分析截图,验证:
- 桌面端页面:布局列数正确,内容按桌面端比例缩放
- 移动端页面手机框架包裹375×812 尺寸
- 文字可读、UI 元素清晰