openspec-browser-test

Stars2

Forks0

UpdatedMay 31, 2026 at 13:31

OpenSpec工作流完成后手动触发，使用opencli-browser做UI端到端自动化测试

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Source

mambo-wang

mambo-wang/CodingHub

View GitHub Repository View Creator Repositories

Download

Related occupationsSOC

Based on SOC occupation classification

Software Quality Assurance Analysts and TestersComputer and Mathematical Occupations·SOC 15-1253

SKILL.md

readonly

name	openspec-browser-test
description	OpenSpec工作流完成后手动触发，使用opencli-browser做UI端到端自动化测试

openspec-browser-test

重要: 这是一个手动触发的 skill，用于在开发任务和单元测试全部完成后，对 UI 进行端到端浏览器自动化测试验证。

何时使用

在以下条件满足后执行：

✅ 所有 TDD 任务已完成（RED/GREEN/REFACTOR）
✅ UI 实现任务已完成
✅ 单元测试全部通过
✅ 开发服务器已启动 (npm run dev)

前置条件检查

opencli doctor

必须确保 doctor 通过，否则浏览器测试无法执行。

测试用例编写规范

基于 specs/**/*.md 中的 GIVEN/WHEN/THEN 场景转换为测试用例：

# 示例：测试概览页面统计卡片加载
opencli browser overview open "http://localhost:5173/overview"
opencli browser overview wait selector ".glass-card" --timeout 15000
opencli browser overview find --css ".stat-card"
opencli browser overview get text ".stat-value"
# 验证数值 > 0

常用命令速查

# 打开页面
opencli browser <session> open "<url>"

# 页面快照（带 [N] 索引）
opencli browser <session> state

# 查找元素
opencli browser <session> find --css "<selector>"

# 点击/悬停
opencli browser <session> click <target>
opencli browser <session> hover <target>

# 输入/填充
opencli browser <session> type <target> "<text>"
opencli browser <session> fill <target> "<text>"

# 获取值
opencli browser <session> get text <target>
opencli browser <session> get value <target>

# 等待
opencli browser <session> wait selector "<selector>" --timeout <ms>
opencli browser <session> wait text "<text>" --timeout <ms>

# 截图
opencli browser <session> screenshot [<path>]

# 网络请求
opencli browser <session> network

# 关闭会话
opencli browser <session> close

与 opencli-browser Skill 的关系

本 skill 是 opencli-browser 在 OpenSpec 工作流中的具体应用：

opencli-browser — 通用浏览器驱动技能，详细命令参考
openspec-browser-test — OpenSpec 专用的测试执行指南和模板

详细命令和规则请参阅 opencli-browser skill。

输出产物

browser-test artifact 应包含：

测试环境信息
每个测试用例的执行结果（✅ PASS / ❌ FAIL）
失败用例的截图证据
测试总结（X/Y Passed）

示例测试报告

## Test Summary

| Test Case | Status | Notes |
|-----------|--------|-------|
| TC-001: 页面加载 | ✅ PASS | StatCard 正确渲染 |
| TC-002: 数据验证 | ✅ PASS | 用户总数 12,847 |
| TC-003: Tab 切换 | ❌ FAIL | 分类 Tab 切换后数据未更新 |
| TC-004: 响应式 | ✅ PASS | 375px/768px/1024px 均正常 |

**Overall:** 3/4 Passed

特别的要求

遇到问题一定要自动修复，不要停下来问我修复问题后自动重启服务验证问题是否修复

More from this repository

same repository

codinghub

mambo-wang/CodingHub

CodingHub 工具广场操作指南。当用户要求搜索/安装/发布/更新 CodingHub 工具，发帖到论坛，管理知识库，或与 CodingHub 平台交互时使用。支持双通道：MCP 优先，HTTP 直连自动降级（Python 或 Node.js CJS CLI 封装，跨平台）。

2026-07-222

codewiki-wiki-generator

mambo-wang/CodingHub

使用 CodeWiki-CN MCP 工具为代码仓库生成 Wiki 文档并管理 LLM Wiki 知识库。支持三层增强模式：codebase-memory-mcp（深度增强：Leiden 聚类、Cypher 查询、跨服务追踪、复杂度分析）、CodeGraph（调用图增强）、或纯 CodeWiki（标准模式）。自动检测可用 MCP 服务器并选择最优模式。当用户要求生成 Wiki、代码文档、仓库文档、分析代码库结构时使用。

2026-07-162

ui-ux-pro-max

mambo-wang/CodingHub

UI/UX design intelligence with searchable database

2026-07-132

build-and-package

mambo-wang/CodingHub

Use when building and packaging the project for deployment, including frontend build, backend JAR, and creating distribution zip

2026-07-122

chinese-code-review

mambo-wang/CodingHub

中文 review 沟通参考——话术模板、分级标注（必须修复/建议修改/仅供参考）、国内团队常见反模式应对。仅在用户显式 /chinese-code-review 时调用，不要根据上下文自动触发。

2026-07-122

chinese-commit-conventions

mambo-wang/CodingHub

中文 commit 与 changelog 配置参考——Conventional Commits 中文适配、commitlint/husky/commitizen 中文模板、conventional-changelog 中文配置。仅在用户显式 /chinese-commit-conventions 时调用，不要根据上下文自动触发。

2026-07-122

name	openspec-browser-test
description	OpenSpec工作流完成后手动触发，使用opencli-browser做UI端到端自动化测试

openspec-browser-test

重要: 这是一个手动触发的 skill，用于在开发任务和单元测试全部完成后，对 UI 进行端到端浏览器自动化测试验证。

何时使用

在以下条件满足后执行：

✅ 所有 TDD 任务已完成（RED/GREEN/REFACTOR）
✅ UI 实现任务已完成
✅ 单元测试全部通过
✅ 开发服务器已启动 (npm run dev)

前置条件检查

opencli doctor

必须确保 doctor 通过，否则浏览器测试无法执行。

测试用例编写规范

基于 specs/**/*.md 中的 GIVEN/WHEN/THEN 场景转换为测试用例：

# 示例：测试概览页面统计卡片加载
opencli browser overview open "http://localhost:5173/overview"
opencli browser overview wait selector ".glass-card" --timeout 15000
opencli browser overview find --css ".stat-card"
opencli browser overview get text ".stat-value"
# 验证数值 > 0

常用命令速查

# 打开页面
opencli browser <session> open "<url>"

# 页面快照（带 [N] 索引）
opencli browser <session> state

# 查找元素
opencli browser <session> find --css "<selector>"

# 点击/悬停
opencli browser <session> click <target>
opencli browser <session> hover <target>

# 输入/填充
opencli browser <session> type <target> "<text>"
opencli browser <session> fill <target> "<text>"

# 获取值
opencli browser <session> get text <target>
opencli browser <session> get value <target>

# 等待
opencli browser <session> wait selector "<selector>" --timeout <ms>
opencli browser <session> wait text "<text>" --timeout <ms>

# 截图
opencli browser <session> screenshot [<path>]

# 网络请求
opencli browser <session> network

# 关闭会话
opencli browser <session> close

与 opencli-browser Skill 的关系

本 skill 是 opencli-browser 在 OpenSpec 工作流中的具体应用：

opencli-browser — 通用浏览器驱动技能，详细命令参考
openspec-browser-test — OpenSpec 专用的测试执行指南和模板

详细命令和规则请参阅 opencli-browser skill。

输出产物

browser-test artifact 应包含：

测试环境信息
每个测试用例的执行结果（✅ PASS / ❌ FAIL）
失败用例的截图证据
测试总结（X/Y Passed）

示例测试报告

## Test Summary

| Test Case | Status | Notes |
|-----------|--------|-------|
| TC-001: 页面加载 | ✅ PASS | StatCard 正确渲染 |
| TC-002: 数据验证 | ✅ PASS | 用户总数 12,847 |
| TC-003: Tab 切换 | ❌ FAIL | 分类 Tab 切换后数据未更新 |
| TC-004: 响应式 | ✅ PASS | 375px/768px/1024px 均正常 |

**Overall:** 3/4 Passed

特别的要求

遇到问题一定要自动修复，不要停下来问我修复问题后自动重启服务验证问题是否修复