Back to browse

affaan-m/ECC

browser-qa

Automate visual testing and UI interaction verification using browser automation after deployment.

73Collecting
See how to use itView GitHub source
npx skills add https://github.com/affaan-m/ECC --skill "docs/zh-CN/skills/browser-qa"

Quick start

Start using it in three steps

Install it or open the source, trigger it with a clear task, then follow the source workflow.

1

Install the Skill

npx skills add https://github.com/affaan-m/ECC --skill "docs/zh-CN/skills/browser-qa"
2

Describe the task

Use browser-qa to help me with: [describe your task]. Before you begin, tell me what input you need, the steps you will follow, and the expected output.

3

Follow the workflow

5 key workflow steps, examples, and cautions are distilled below.

Continue to the workflow

Direct answers

Answers to review before you install

What is browser-qa?

Automate visual testing and UI interaction verification using browser automation after deployment.

Who should use browser-qa?

It is relevant to workflows involving Deployment, Testing, Design, Operations.

How do you install browser-qa?

SkillSignal detected this source-specific command: npx skills add https://github.com/affaan-m/ECC --skill "docs/zh-CN/skills/browser-qa". Inspect the repository and command before running it.

Which Agent platforms does it support?

The upstream source does not declare a dedicated Agent platform.

What permissions or risks should you review?

No obvious permission action was detected by the static rules. This is not proof that the Skill is safe.

What are the current evidence limits?

This page combines upstream documentation with deterministic repository, quality, and static-risk signals. It is not described as a manual test or security review.

SkillSignal brief

Decide whether it fits your work first

Automate visual testing and UI interaction verification using browser automation after deployment.

Useful in these contexts

Not yet included in a workflow collection

Core capabilities

DeploymentTestingDesignOperations

Distilled from the source

Understand this Skill in one minute

About 1 min · 5 sections

When it is worth using

  1. •

    功能部署到 staging / preview 之后

  2. •

    需要验证跨页面的 UI 行为时

  3. •

    发布前确认布局、表单和交互是否真的可用

  4. •

    审查涉及前端改动的 PR 时

Core workflow

  1. 1

    阶段 1：冒烟测试

  2. 2

    阶段 2：交互测试

  3. 3

    阶段 3：视觉回归

  4. 4

    阶段 4：可访问性

  5. 5

    使用浏览器自动化 MCP（claude-in-chrome、Playwright 或 Puppeteer），像真实用户一样与线上页面交互。

Repository stars
234,327
Repository forks
35,711
Quality
73/100
Source repository last pushed

Quality breakdown

Based on traceable docs and repository signals; stars are not treated as quality.

73/100
Documentation22/30
Specificity19/25
Maintenance20/20
Trust signals12/25

Compare before choosing

Related Agent Skills and source variants

These links are selected from shared tasks, functions, stacks, platforms, and same-name variants. Compare the source owner, documentation, permissions, and maintenance signals.

browser-qa by affaan-m

Use this skill to automate visual testing and UI interaction verification using browser automation after deploying features.

chatgpt-apps by openai

Build, scaffold, refactor, and troubleshoot ChatGPT Apps SDK applications that combine an MCP server and widget UI. Use when Codex needs to design tools, register UI resources, wire the MCP Apps bridge or ChatGPT compatibility APIs, apply Apps SDK metadata or CSP or domain settings, or produce a docs-aligned project scaffold. Prefer a docs-first workflow by invoking the openai-docs skill or OpenAI developer docs MCP tools before generating code.

browser-qa by affaan-m

このスキルを使用して、機能をデプロイ後にブラウザ自動化を使用した自動ビジュアルテストとUI相互作用検証を自動化します。

simpy by k-dense-ai

Build, inspect, test, and analyze bounded process-based discrete-event simulations with SimPy, including events, resources, interrupts, monitoring, replications, warm-up, and reproducible output analysis.

flowstudio-power-automate-build by github

Build, scaffold, and deploy Power Automate cloud flows using the FlowStudio MCP server. Your agent constructs flow definitions, wires connections, deploys, and tests — all via MCP without opening the portal. Load this skill when asked to: create a flow, build a new flow, deploy a flow definition, scaffold a Power Automate workflow, construct a flow JSON, update an existing flow's actions, patch a flow definition, add actions to a flow, wire up connections, or generate a workflow definition from

View original Skill.mdThis page is parsed directly from the repository SKILL.md without editorial rewriting. Collected: Jul 28, 2026 · about 1 min

Browser QA — 自动化视觉测试与交互验证

When to use

  • 功能部署到 staging / preview 之后
  • 需要验证跨页面的 UI 行为时
  • 发布前确认布局、表单和交互是否真的可用
  • 审查涉及前端改动的 PR 时
  • 做可访问性审计和响应式测试时

How it works

使用浏览器自动化 MCP（claude-in-chrome、Playwright 或 Puppeteer），像真实用户一样与线上页面交互。

阶段 1：冒烟测试

1. 打开目标 URL
2. 检查控制台错误（过滤噪声：分析脚本、第三方库）
3. 验证网络请求中没有 4xx / 5xx
4. 在桌面和移动端视口截图首屏内容
5. 检查 Core Web Vitals：LCP < 2.5s，CLS < 0.1，INP < 200ms

阶段 2：交互测试

1. 点击所有导航链接，验证没有死链
2. 使用有效数据提交表单，验证成功态
3. 使用无效数据提交表单，验证错误态
4. 测试认证流程：登录 → 受保护页面 → 登出
5. 测试关键用户路径（结账、引导、搜索）

阶段 3：视觉回归

1. 在 3 个断点（375px、768px、1440px）对关键页面截图
2. 与基线截图对比（如果已保存）
3. 标记 > 5px 的布局偏移、缺失元素、内容溢出
4. 如适用，检查暗色模式

阶段 4：可访问性

1. 在每个页面运行 axe-core 或等价工具
2. 标记 WCAG AA 违规（对比度、标签、焦点顺序）
3. 验证键盘导航可以端到端工作
4. 检查屏幕阅读器地标

Examples

## QA 报告 — [URL] — [timestamp]

### 冒烟测试
- 控制台错误：0 个严重错误，2 个警告（分析脚本噪声）
- 网络：全部 200/304，无失败请求
- Core Web Vitals：LCP 1.2s，CLS 0.02，INP 89ms

### 交互
- [done] 导航链接：12/12 正常
- [issue] 联系表单：无效邮箱缺少错误态
- [done] 认证流程：登录 / 登出正常

### 视觉
- [issue] Hero 区域在 375px 视口下溢出
- [done] 暗色模式：所有页面一致

### 可访问性
- 2 个 AA 级违规：Hero 图片缺少 alt 文本，页脚链接对比度过低

### 结论：修复后可发布（2 个问题，0 个阻塞项）

集成

可与任意浏览器 MCP 配合：

  • mChild__claude-in-chrome__* 工具（推荐，直接使用你的真实 Chrome）
  • 通过 mcp__browserbase__* 使用 Playwright
  • 直接运行 Puppeteer 脚本

可与 /canary-watch 搭配用于发布后的持续监控。

Source repo
affaan-m/ECC
Skill path
docs/zh-CN/skills/browser-qa/SKILL.md
Commit SHA
4e973d3eaf92
Repository license
MIT
Data collected