| name | ui-test-creator |
| description | TestFoundry Stage 2 - UI Assets: turn reviewed test cases and live website URL/current pages into Midscene functional cases and visual/layout review notes. Use when Codex needs UI automation and UI review assets after test-case review is approved. |
UI Test Creator
作为 TestFoundry Stage 2 的 UI 资产生成器，该 skill 将已评审通过的测试用例转换成 Midscene 可消费的 UI 自动化资产。默认输出双层结果：功能路径用例，以及更像人工评审的视觉风格与布局验收清单。
Dependency
- 强依赖官方的
playwright-interactive 来观察真实页面、复用登录态并读取内部站点。
- 在 Codex 中优先安装到
~/.codex/skills/playwright-interactive；在 Claude Code 中安装到 ~/.claude/skills/playwright-interactive 或 .claude/skills/playwright-interactive。
- 如果运行环境没有
playwright-interactive，不要把 UI 测试生成退化成纯静态猜测；遇到真实页面和登录态依赖时应先提示安装依赖。
Workflow
- 确认测试用例评审已通过；如果未通过，先返回缺口，不生成 UI 资产。
- 阅读需求文档、测试用例和网站 URL。
- 抽取关键用户路径、关键页面、关键状态切换点。
- 观察页面现状，包括布局、信息层级、视觉风格、文案呈现、反馈状态。
- 生成 Midscene 功能路径用例。
- 生成视觉风格与布局验收清单。
- 标记需要人工确认的账号、数据、环境状态和页面前置条件。
Source Access Rules
- 如果需求文档或内部页面需要登录，优先使用 Playwright 复用当前浏览器登录态读取，不要把外部搜索当成默认方案。
- 对网站页面现状的观察，优先来自真实页面上下文，而不是搜索结果页或公开缓存。
- 如果当前账号只能看到部分页面或部分正文，先记录“可见事实”和“权限缺口”，不要脑补缺失内容。
- 如果内部页面无法稳定访问，再要求用户补截图、导出文档或可访问环境。
Output Contract
默认输出到 ./tests/{yyMMdd}_{requirement_slug}/ui_tests/。
-
yyMMdd
使用当前本地日期，例如 260309
-
requirement_slug
优先复用 test-case-creator 已使用的需求标识；没有现成标识时，从需求标题、版本短名或用户给定标识生成小写 snake_case
-
示例
./tests/260309_sandbox_v2_1/ui_tests/
-
midscene-functional-cases.md
Midscene 自然语言步骤，聚焦关键用户路径和关键页面状态。
-
midscene-visual-review.md
像人工评审一样的视觉风格、布局、信息层级、交互反馈观察点。
如果页面较多，允许按模块拆小节，但仍保留统一的评审语义。
如果同一需求已经存在 test_cases/，默认写入同级 ui_tests/，不要另起一个新的需求目录。
Functional Rules
- Midscene 是主力 UI 自动化表达层。
- 输出不是 Playwright locator 脚本，不写 DOM 选择器优先级策略。
- 功能路径优先覆盖：
- 登录
- 关键导航
- 核心表单提交
- 核心查询或审批
- 关键结果反馈
- 每条用例都写清：
- 前置条件
- 入口页面
- 用户动作
- 预期页面反馈
- 失败时的观察点
Visual Review Rules
视觉验收固定以“需求文档 + 页面现状”为基准，不做像素级回归。
必须覆盖：
- 页面整体风格是否符合需求语义
- 信息层级是否清晰
- 版式和布局是否自然
- 关键区域是否像人工评审那样“看起来对”
- 文案、按钮、表单、反馈区域是否协调
优先写人类评审语言，例如：
- “主 CTA 是否足够突出”
- “首屏信息密度是否过高”
- “表单标签与输入框的对应关系是否自然”
- “成功/失败反馈是否足够明确”
避免只写空泛形容词，例如“页面更美观一些”“感觉不够高级”。
Boundaries
- UI 层不负责接口边界和性能测试。
- 如果问题明显属于接口行为或数据规则，记录为依赖问题，不把它伪装成 UI 视觉问题。
- 如果页面现状与需求明显不一致，要在视觉评审和功能用例里同时记录差异。
Resources
- 读取
references/midscene-case-patterns.md，统一 Midscene 自然语言动作风格。
- 读取
references/ui-path-design.md，按关键用户路径组织页面和用例。
- 读取
references/visual-review-criteria.md，统一视觉与布局观察点。
- 读取
references/test-data-preconditions.md，收集账号、数据、环境前置条件。
- 使用
assets/midscene-functional-template.md、assets/midscene-visual-review-template.md 和 assets/ui-review-checklist.md 作为默认骨架。
