ui-test

UI Test 是一个用自然语言进行端到端 UI 测试的技能，属于 Plain English E2E Testing。用户无需编写选择器或代码，只需用普通英语描述测试步骤，智能体即可自行判断如何查找按钮、导航应用流程并执行每一步。

用途 用于以自然语言创建、执行和导出 UI 端到端测试。用户为测试命名并用普通英语描述步骤，智能体负责在浏览器中执行，并最终生成可用于 CI/CD 的 Playwright 脚本。

主要能力

• 自然语言步骤：用户用普通英语描述点击、输入、断言、等待等操作，无需选择器或代码。
• 浏览器执行：智能体打开 clawd 浏览器，执行每一步，并对每个操作截图。
• 截图与视频：每个主要步骤前后截图，失败时截图，运行完成后用 ffmpeg 生成走查视频并发送到聊天。
• 结果报告：按步骤报告通过/失败。
• Playwright 导出：根据验证成功的步骤生成 .spec.ts 文件，包含正确的导入、测试结构、断言和失败截图。
• 运行历史：保存每次运行结果，可查看历史。

使用方式 通过命令运行：node ~/workspace/skills/ui-test/scripts/ui-test.js <command>。 可用命令包括：

• create <name> [url]：创建新测试
• add-step <name> <step>：添加普通英语步骤
• set-steps <name> <json>：替换所有步骤
• set-url <name> <url>：设置测试 URL
• get <name>：显示测试定义
• list：列出所有测试
• remove <name>：删除测试
• save-run <name> ...：保存执行结果
• runs [name]：显示运行历史
• export <name> [outfile]：导出为 Playwright 脚本

智能体执行流程 运行测试时：

1. 加载测试定义：node scripts/ui-test.js get "<name>"
2. 启动 clawd 浏览器：browser action=start profile=clawd
3. 导航到测试 URL
4. 对每个普通英语步骤：解释用户意图（点击、输入、断言、等待等）；使用 browser action=snapshot 查看页面；使用 browser action=act 执行相应请求（click/type/press 等）；每步后截图；记录使用的选择器/ref 以及是否通过
5. 保存运行结果：node scripts/ui-test.js save-run "<name>" passed=true/false
6. 向用户报告每步通过/失败

导出到 Playwright 时：

1. 加载测试定义和最近一次成功运行
2. 根据执行时有效的操作，将每个普通英语步骤映射为 Playwright API 调用
3. 生成 .spec.ts 文件，包含正确的导入、测试结构和断言
4. 保存到用户项目或指定输出路径

步骤解释示例

• "click the Sign In button" → act: click ref="Sign In button" → page.getByRole('button', {name: 'Sign In'}).click()
• "type hello@test.com in the email field" → act: type ref="email" text="hello@test.com" → page.getByLabel('Email').fill('hello@test.com')
• "verify the dashboard shows Welcome" → snapshot + check text → expect(page.getByText('Welcome')).toBeVisible()
• "wait for the page to load" → act: wait → page.waitForLoadState('networkidle')
• "click the hamburger menu" → act: click (find menu icon) → page.getByRole('button', {name: 'menu'}).click()
• "scroll down" → act: evaluate fn="window.scrollBy(0,500)" → page.evaluate(() => window.scrollBy(0, 500))
• "check the Remember Me checkbox" → act: click ref="Remember Me" → page.getByLabel('Remember Me').check()
• "select 'USD' from the currency dropdown" → act: select values=["USD"] → page.getByLabel('Currency').selectOption('USD')
• "take a screenshot" → browser action=screenshot → page.screenshot({path: 'step-N.png'})
• "verify URL contains /dashboard" → check current URL → expect(page).toHaveURL(/dashboard/)

导出格式 生成的 Playwright 文件包含：正确的 TypeScript 导入；带测试名称的 test.describe 块；带导航到基础 URL 的 test.beforeEach；每个步骤作为顺序操作，并带有显示原始英语的注释；在用户说 "verify"、"check"、"should"、"expect" 处生成断言；失败时截图。

截图与视频 执行期间：每步前截图保存为 step-NN-before.jpg；每步后截图保存为 step-NN-after.jpg；失败时截图保存为 step-NN-FAIL.jpg。截图保存到 ~/.ui-tests/runs/<slug>-<timestamp>/。运行完成后生成走查视频： ffmpeg -framerate 1 -pattern_type glob -i '~/.ui-tests/runs/<folder>/step-*.jpg'
-vf "scale=1280:-2" -c:v libx264 -pix_fmt yuv420p -y output.mp4 然后将视频发送到聊天。

存储位置

• 测试定义：~/.ui-tests/<slug>.json
• 运行历史：~/.ui-tests/runs/<slug>-<timestamp>/run.json
• 截图：~/.ui-tests/runs/<slug>-<timestamp>/step-*.jpg
• 视频：~/.ui-tests/runs/<slug>-<timestamp>/walkthrough.mp4
• 导出脚本：用户指定路径或 ./tests/<slug>.spec.ts

适用场景 适合需要快速创建 UI 端到端测试、希望用自然语言描述测试步骤、并需要将验证过的步骤导出为 Playwright 脚本用于 CI/CD 的开发者或测试人员。

限制 资料未提供关于收费、价格、平台支持范围、具体效果保证等信息。