본문으로 건너뛰기
cccskills
무료GitHub에 공개

qa-browser-automation

Browser-based QA combining Chrome MCP control with Python analysis tools. Use when performing browser QA testing, visual regression tracking, WCAG accessibility auditing, performance profiling, or health-scoring web applications.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(10)

  • SKILL.md9.0 KB
  • assets/qa_report_template.md1.7 KB
  • assets/sample_findings.json4.4 KB
  • references/browser_testing_methodology.md7.0 KB
  • references/performance_benchmarks.md6.4 KB
  • references/wcag_compliance_guide.md9.5 KB
  • scripts/accessibility_auditor.py27.0 KB
  • scripts/qa_health_scorer.py15.4 KB
  • scripts/test_report_generator.py22.7 KB
  • scripts/visual_regression_tracker.py19.2 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

QA Browser Automation

The agent drives Chrome MCP for live browser testing and uses four Python tools for deterministic health scoring, accessibility auditing, visual regression tracking, and report generation.


Clarify First

Before the QA sweep, confirm these inputs. If any is unknown or vague, ASK — do not assume:

  • Target URL/app + auth — what to test and how to log in (the subject of the entire sweep)
  • Testing tier — Quick / Standard / Deep / Exhaustive (sets scope, breakpoints, and duration)
  • Fix autonomy — auto-fix P3/P4 and commit, vs report-only / ask before any code change (changes whether the working tree is modified)
  • WCAG target level — A / AA / AAA (sets the accessibility pass bar)

Stop rule: ask only the 2-3 that most change the output. If the user says "just draft it," proceed and list your assumptions at the top of the artifact.

Quick Start

# Score QA findings (0-100 weighted across 10 categories)
python scripts/qa_health_scorer.py findings.json --threshold 85 --baseline .qa-baselines/latest.json --save-baseline --json

# Audit HTML for WCAG 2.1 violations
python scripts/accessibility_auditor.py page.html --level AA --json

# Track visual regressions
python scripts/visual_regression_tracker.py --init --baseline-dir ./baselines
python scripts/visual_regression_tracker.py --register ./baselines
python scripts/visual_regression_tracker.py --baseline ./baselines --current ./screenshots --threshold 5

# Generate full QA report
python scripts/test_report_generator.py session_data.json --format markdown -o report.md

Tools Overview

ToolInputOutput
qa_health_scorer.pyFindings JSONScore 0-100, grade A-F, category breakdown, trend data
accessibility_auditor.pyHTML file (or stdin)WCAG violations by level with remediation guidance
visual_regression_tracker.pyBaseline + current screenshot dirsPass/fail per page, change percentages
test_report_generator.pySession data JSONMarkdown or JSON report with recommendations

All tools support --json for machine output. Health scorer and regression tracker return exit code 1 on failure (CI-friendly).


Workflow 1: Full Application QA Sweep (11 Phases)

Phase 1-2: Pre-flight and authentication.

  • Verify git status is clean. Abort if dirty.
  • Create session directory: .qa-sessions/{timestamp}/
  • Authenticate via Chrome MCP if needed.

Phase 3-4: Orient and explore.

  • Use mcp__claude-in-chrome__read_page to build sitemap/page map.
  • Navigate each route. Check read_console_messages for errors, read_network_requests for 4xx/5xx.
  • Test all forms with valid data, empty submissions, and boundary values.

Phase 5: State testing.

  • Verify loading states (skeleton screens, not blank), empty states (guides to first action), error states, success states, partial states.
  • Four shadow paths per interaction: happy path, nil input, empty input, error upstream.

Phase 6: Cross-device and security.

  • Resize to 320px, 768px, 1024px, 1440px, 1920px.
  • Check touch targets (44x44px min), layout shifts.
  • Verify security headers (CSP, HSTS, X-Frame-Options), cookie flags.

Phase 7-8: Document and score.

  • Record every finding with screenshot evidence. No finding without evidence.
  • Classify by severity (P0-P4) and category (10 categories).
  • Run: python scripts/qa_health_scorer.py findings.json --baseline .qa-baselines/latest.json

Phase 9: Triage and fix loop.

  • P3/P4: AUTO-FIX, commit atomically, verify.
  • P0/P1/P2: ASK, present evidence, propose fix, wait for approval.
  • After each fix: re-run check. If fail: git revert.
  • Hard stop at 50 fixes.

Phase 10-11: Regression check and report.

  • Re-visit fixed pages. Verify no new errors.
  • Generate report: python scripts/test_report_generator.py session.json --save-baseline

Validation checkpoint: Health score >= 85. Zero P0 findings. WCAG AA >= 95%.


Workflow 2: Visual Regression Testing

# Set up baseline
python scripts/visual_regression_tracker.py --init --baseline-dir ./baselines
# Capture and register screenshots
python scripts/visual_regression_tracker.py --register ./baselines
# After changes, compare
python scripts/visual_regression_tracker.py --baseline ./baselines --current ./screenshots --threshold 5 --json
# Accept intentional changes
python scripts/visual_regression_tracker.py --update-baseline --baseline ./baselines --current ./screenshots

Pages exceeding the threshold (default 5%) are flagged as regressions. Uses SHA-256 hashing and byte-level comparison.


Workflow 3: Accessibility Audit

python scripts/accessibility_auditor.py page.html --level AA --json
curl -s https://example.com | python scripts/accessibility_auditor.py - --level AAA

What gets checked by level:

  • A (Must Fix): Alt text, page language, form labels, headings, duplicate IDs, autoplay media
  • AA (Should Fix): Color contrast (4.5:1 text, 3:1 large), heading hierarchy, focus visible, error identification
  • AAA (Nice to Have): Enhanced contrast (7:1), extended audio, reading level

Each violation includes: WCAG criterion, severity, element selector, and remediation guidance.


Testing Tiers

TierDurationScope
Quick30sConsole errors, broken links, basic a11y, mobile resize
Standard2-5 min+ Top 10 routes, forms, contrast, Core Web Vitals
Deep10-20 min+ Full sitemap, state testing, WCAG AA, performance, visual regression, security headers
Exhaustive30+ min+ Every element, WCAG AAA, all pages performance, 5 breakpoints, auth edge cases, memory leaks

Health Scoring System

10 weighted categories, score 0-100:

CategoryWeightMeasures
Functional18%Forms, CRUD, navigation flows
Accessibility13%WCAG compliance, keyboard nav
Console Errors12%JS errors, unhandled rejections
UX Flow12%Logical navigation, clear feedback
Performance12%Core Web Vitals within thresholds
Visual Consistency10%Layout shifts, alignment, z-index
Broken Links8%HTTP 4xx/5xx, dead anchors
Content Quality5%Spelling, placeholder text, truncation
Security Headers5%CSP, HSTS, cookie flags
Mobile Responsive5%Breakpoints, touch targets, no h-scroll

Severity deductions: P0: -30, P1: -18, P2: -10, P3: -4, P4: -1.

Grades: A (90-100), B (80-89), C (70-79), D (60-69), F (0-59).


Safety Controls

  • Clean working tree required -- abort if git status dirty.
  • Max 50 fixes per session -- hard stop.
  • Risk accumulator -- component (+5), style (+2), config (+8), revert (+15). Stop at 25% of budget.
  • WTF heuristic -- 3 consecutive fix verification failures = stop entirely.
  • Atomic commits -- one fix = one commit: fix(qa): [P{severity}] {description}

Troubleshooting

ProblemCauseSolution
Scorer exits code 1 with no errorsScore below --threshold (default 70)Check score in output; raise threshold or fix findings
Auditor reports parse-errorMalformed HTMLVerify file is complete; check curl is not returning redirect
Regression tracker 100% change on all pagesBaseline manifest emptyRun --init then --register before comparing
Findings default to P3/functionalMissing severity or category keysInclude both keys in each finding dict
Chrome MCP returns stale content after SPA navDOM updated without full page loadWait for transition, call read_page again

References

GuidePath
Browser Testing Methodologyreferences/browser_testing_methodology.md
WCAG Compliance Guidereferences/wcag_compliance_guide.md
Performance Benchmarksreferences/performance_benchmarks.md

Integration Points

SkillIntegration
code-reviewerHealth score and findings in PR review context
senior-frontendVisual regression baselines align with component library
senior-devopsHealth score gates CI/CD via exit code
senior-secopsSecurity header findings escalate to security review
incident-commanderP0 findings trigger incident response

Last Updated: April 2026 Version: 2.1.0

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

This skill should be used when the user asks to "check accessibility", "audit WCAG compliance", "scan HTML for a11y issues", "check color contrast", or "find accessibility violations in web pages".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

borghei/Claude-Skills9482026년 10월 7일 업데이트

Design and analyze A/B tests: sample size, test duration, and statistical significance for conversion experiments. Use when setting up an A/B test, calculating sample size, designing an experiment, or analyzing results.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

borghei/Claude-Skills9482026년 10월 7일 업데이트

Design and run statistically rigorous A/B tests and experiments. Use when planning experiments, calculating sample sizes, designing test variants, selecting metrics, analyzing results, or when someone says "let's test that."

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

borghei/Claude-Skills9482026년 10월 7일 업데이트

Sales execution across pipeline, discovery, demos, negotiation, and closing. Use when qualifying opportunities, running MEDDIC discovery, building account plans, handling objections, structuring proposals, or forecasting pipeline.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

borghei/Claude-Skills9482026년 10월 7일 업데이트

Design ad creative across Google, Meta, LinkedIn, Twitter/X, and TikTok with platform format specs, headline formulas, and A/B testing. Use when writing ad copy, generating headline variations, creating ad sets, or validating creative.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

borghei/Claude-Skills9482026년 10월 7일 업데이트

aeo

무료

Answer Engine Optimization (AEO): optimize content to be cited by LLMs (ChatGPT, Claude, Perplexity, Gemini) in their answers. Use when designing content for LLM citation, auditing citability, or structuring Q&A schema.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

borghei/Claude-Skills9482026년 10월 7일 업데이트

borghei의 스킬 모두 보기

이 스킬의 문제 신고