一键在 Manus 中运行任何 Skill

browser-qa

星标3

分支0

更新时间2026年3月26日 09:48

Automated visual testing and interaction verification -- smoke tests, interaction tests, visual regression, and accessibility audits using browser automation.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

idiaz01

idiaz01/enterprise-superpowers

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

Browser QA -- Automated Visual Testing and Interaction

Automated browser-based testing for verifying UI behavior across pages.

When to Use

After deploying a feature to staging/preview
Before shipping -- confirm layouts, forms, interactions actually work
When reviewing PRs that touch frontend code
Accessibility audits and responsive testing

How It Works

Uses browser automation MCP (Playwright, Puppeteer, or claude-in-chrome) to interact with live pages.

Phase 1: Smoke Test

Navigate to target URL
Check for console errors (filter analytics noise)
Verify no 4xx/5xx in network requests
Screenshot above-the-fold on desktop + mobile viewport
Check Core Web Vitals: LCP < 2.5s, CLS < 0.1, INP < 200ms

Phase 2: Interaction Test

Click every nav link -- verify no dead links
Submit forms with valid data -- verify success state
Submit forms with invalid data -- verify error state
Test auth flow: login -> protected page -> logout
Test critical user journeys

Phase 3: Visual Regression

Screenshot key pages at 3 breakpoints (375px, 768px, 1440px)
Compare against baseline screenshots
Flag layout shifts > 5px, missing elements, overflow
Check dark mode if applicable

Phase 4: Accessibility

Run axe-core or equivalent on each page
Flag WCAG AA violations (contrast, labels, focus order)
Verify keyboard navigation works end-to-end
Check screen reader landmarks

Output Format

## QA Report -- [URL] -- [timestamp]

### Smoke Test
- Console errors: 0 critical, 2 warnings (analytics noise)
- Core Web Vitals: LCP 1.2s, CLS 0.02, INP 89ms

### Interactions
- Nav links: 12/12 working
- Contact form: missing error state for invalid email

### Visual
- Hero section overflows on 375px viewport

### Accessibility
- 2 AA violations: missing alt text, low contrast footer links

### Verdict: SHIP WITH FIXES (2 issues, 0 blockers)

Integration

Pair with /canary-watch for post-deploy monitoring.

同仓库更多 Skills

同仓库

ai-regression-testing

idiaz01/enterprise-superpowers

Regression testing strategies for AI-assisted development. Sandbox-mode API testing without database dependencies, automated bug-check workflows, and patterns to catch AI blind spots.

2026-03-263

android-clean-architecture

idiaz01/enterprise-superpowers

Clean Architecture patterns for Android and Kotlin Multiplatform projects -- module structure, dependency rules, UseCases, Repositories, and data layer patterns.

2026-03-263

benchmark

idiaz01/enterprise-superpowers

Performance baseline and regression detection -- page performance, API latency, build times, and before/after comparison.

2026-03-263

blueprint

idiaz01/enterprise-superpowers

Turn a one-line objective into a step-by-step construction plan for multi-session, multi-agent engineering projects. Each step has a self-contained context brief so a fresh agent can execute it cold.

2026-03-263

bun-runtime

idiaz01/enterprise-superpowers

Bun as runtime, package manager, bundler, and test runner. When to choose Bun vs Node, migration notes, and Vercel support.

2026-03-263

canary-watch

idiaz01/enterprise-superpowers

Post-deploy monitoring -- watches deployed URLs for regressions in HTTP status, console errors, performance, content, and API health.

2026-03-263

Browser QA -- Automated Visual Testing and Interaction

Automated browser-based testing for verifying UI behavior across pages.

When to Use

After deploying a feature to staging/preview

Before shipping -- confirm layouts, forms, interactions actually work

When reviewing PRs that touch frontend code

Accessibility audits and responsive testing

How It Works

Uses browser automation MCP (Playwright, Puppeteer, or claude-in-chrome) to interact with live pages.

Phase 1: Smoke Test

Navigate to target URL

Check for console errors (filter analytics noise)

Verify no 4xx/5xx in network requests

Screenshot above-the-fold on desktop + mobile viewport

Check Core Web Vitals: LCP < 2.5s, CLS < 0.1, INP < 200ms

Phase 2: Interaction Test

Click every nav link -- verify no dead links

Submit forms with valid data -- verify success state

Submit forms with invalid data -- verify error state

Test auth flow: login -> protected page -> logout

Test critical user journeys

Phase 3: Visual Regression

Screenshot key pages at 3 breakpoints (375px, 768px, 1440px)

Compare against baseline screenshots

Flag layout shifts > 5px, missing elements, overflow

Check dark mode if applicable

Phase 4: Accessibility

Run axe-core or equivalent on each page

Flag WCAG AA violations (contrast, labels, focus order)

Verify keyboard navigation works end-to-end

Check screen reader landmarks

Output Format

## QA Report -- [URL] -- [timestamp] ### Smoke Test - Console errors: 0 critical, 2 warnings (analytics noise) - Core Web Vitals: LCP 1.2s, CLS 0.02, INP 89ms ### Interactions - Nav links: 12/12 working - Contact form: missing error state for invalid email ### Visual - Hero section overflows on 375px viewport ### Accessibility - 2 AA violations: missing alt text, low contrast footer links ### Verdict: SHIP WITH FIXES (2 issues, 0 blockers)

Integration

Pair with /canary-watch for post-deploy monitoring.

name	browser-qa
description	Automated visual testing and interaction verification -- smoke tests, interaction tests, visual regression, and accessibility audits using browser automation.
origin	ECC

name	browser-qa
description	Automated visual testing and interaction verification -- smoke tests, interaction tests, visual regression, and accessibility audits using browser automation.
origin	ECC