🌐 Web Visual & Behavioral Testing
SkillWeb & browsingStandardizes visual audits, responsive design, and behavioral testing for web apps. Use to verify a web UI fix or cross-browser behavior; defer backend API refactors, Playwright installation/tooling setup, and Appium/mobile automation.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the 🌐 Web Visual & Behavioral Testing skill
What this skill tells your AI
The instructions your AI receives, as published by hoangnguyen0403/agent-skills-standard in skills/common/common-web-visual-testing/SKILL.md and read by ahel’s review.
Priority: P1 (HIGH)
[!IMPORTANT] Tier 2 (Methodology): Strategy web UI/UX audit. Tier 3 (Domain): Responsive, A11y (WCAG), Browser Engine quirk.
🧪 Testing Mindset (Comparative Audit)
Visual test best as Comparative Audit loop:
- Baseline (Before): Capture
snapshot --aria+screenshotprod/main. - Implementation (After): Capture same local/feature.
- Audit: Compare state for regression, CLS, Aria drift.
Responses must label the two captures as Before and After (or Baseline and Fixed) and include the diff and neighboring-element side-effect check.
📋 Scenario Matrix
| Change Type | Scenarios to Run |
|---|---|
| CSS/Layout | Responsive Audit + Hover + CLS Check |
| Forms/Input | Validation Msg + Focus State + Error Boundary |
| Navigation | URL Sync + Sticky Header + Back-Button Persistence |
| Assets/Fonts | Lazy Load + Icon Check + LCP Audit |
| Accessibility | Tab Order + Aria-Snapshot + Color Contrast |
🚫 Anti-Patterns
- Single-Viewport: Never verify Desktop only. Check Mobile (375px) + Tablet (768px).
- Ignore Layout Shift: Check loading state (skeleton) → no page jump.
- Unmasked Dynamic: MUST mask timestamp/balance via
--maskor JS (opacity: 0). Avoid "False Regression". - Blind Assertion: Use
playwright-cli snapshot --ariaverify state before done. - External Dependency: Mock/bypass 3rd-party (Chat, Analytics) → prevent flakiness.
🔗 References
- playwright-cli: playwright-cli
- Diagnostic Decoder: diagnostic-decoder
- DOM vs Screenshot: dom-snapshot-vs-screenshot
- Login & Data: login-and-test-data
- Scenario Details: scenarios
Signals
- GitHub stars
- 565
- Forks
- 163
- Last commit
- Sep 2026
Advanced
- Catalog kind
- skill
- Gateway key
common-web-visual-testing- Source
- github.com/hoangnguyen0403/agent-skills-standard