تشغيل أي مهارة في Manus بنقرة واحدة

browser-qa

النجوم٣

التفرعات٠

آخر تحديث٢٦ مارس ٢٠٢٦ في ٠٩:٤٨

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

المهن ذات الصلةSOC

استنادا إلى تصنيف SOC المهني

محللو ضمان جودة البرمجيات والمختبرونمهن الحاسوب والرياضيات·SOC 15-1253

SKILL.md

readonly

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

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.

المزيد من هذا المستودع

نفس المستودع

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.