What is web-qa-exploration?

The Web QA Exploration skill leverages Playwright to perform autonomous exploratory testing on web applications. It systematically analyzes page states, navigation flows, and interactive elements to identify functional bugs, visual regressions, and accessibility gaps. By generating structured reports complete with screenshots and reproducible test scripts, it significantly accelerates the debugging and quality assurance lifecycle.

When should I use web-qa-exploration?

web-qa-exploration is useful in the following scenarios: • Pre-release Exploratory Testing: Automatically navigate complex web flows to discover edge-case bugs and UI inconsistencies that manual testing might miss. • Regression & Smoke Testing: Quickly verify the stability of core features and navigation paths after new deployments or code changes. • Accessibility and UX Auditing: Systematically check for missing form labels, broken layouts, and keyboard navigation issues to ensure a high-quality user experience. • Automated Issue Documentation: Generate comprehensive QA reports featuring severity rankings, reproduction steps, and suggested Playwright code for immediate developer action.

name	web-qa-exploration
description	Perform exploratory QA testing on web applications using Playwright. Navigate flows, analyze pages, find issues, and generate actionable reports with evidence.

Web QA Exploration

Autonomous exploratory testing using Playwright to analyze web application flows, identify issues, and generate actionable reports.

Core Principles

Thoroughness over speed - Analyze each page state fully
Break things intentionally - Try edge cases, unexpected inputs, unusual navigation
Document everything - When in doubt, capture it
Stay focused - Follow defined waypoints; don't wander
Fail gracefully - If stuck, document and move on

Working Directory

/tmp/webqa/{session-id}/
  session.md          # Session context and scope
  report.md           # Human-readable findings
  report.json         # Machine-readable for automation
  screenshots/        # Visual evidence
  metadata.json       # Session info, status

All ephemeral. Output feeds into /plan-chat or /plan-breakdown.

Analysis Checklist

At each waypoint, systematically check:

Visual & Layout

Content fully visible (no overflow, cutoff)
Proper spacing and alignment
Images/icons load correctly
No layout shifts after load

Back button - Does it preserve state?
Refresh - Does page recover?
Deep link - Can URL be shared/bookmarked?

Forms & Inputs

Empty submission - Validation fires?
Boundary values - Max length, min/max numbers
Special characters - <script>, quotes, unicode
Whitespace - Leading/trailing, only spaces
Tab order - Keyboard navigation logical
Error messages - Clear, positioned correctly

Interactions

Double-click - Rapid clicking on submit
Keyboard shortcuts - Enter, Escape behavior
Focus states - Visible indicators
Disabled states - Buttons during submission

Accessibility (basic)

Heading structure (h1-h6 hierarchy)
Form labels present
Color contrast (visual check)
Alt text on images

Error Handling

Network failure behavior
Timeout handling
Invalid URL parameters

Issue Documentation

Each issue needs:

id: ISSUE-001
severity: critical | high | medium | low | note
category: bug | ux | accessibility | edge-case | visual
page: /path/to/page
title: Short description
description: Detailed explanation
steps_to_reproduce: Ordered list
expected: What should happen
actual: What actually happens
screenshot: Path to evidence
suggested_test: Playwright test code

Severity Guidelines

Critical: Crashes, data loss, security issue, flow blocker
High: Feature broken, significant UX problem
Medium: Edge case failures, minor UX issues
Low: Polish issues, minor visual glitches
Note: Observations, suggestions, not bugs

Scope Control

Only explore pages/states within defined scope
Time-box analysis (2-5 minutes per waypoint)
Don't attempt to fix issues during exploration

When Stuck

Document with maximum detail
Take screenshot
Attempt one workaround (refresh, re-navigate)
If still blocked, mark waypoint as "blocked" and skip
Continue from next accessible waypoint

Output

report.md

Summary table with severity counts, then issues ordered by severity. Each issue includes description, steps, expected/actual, screenshot, and suggested Playwright test.

metadata.json

{
  "session_id": "{session-id}",
  "scope": "{DESCRIPTION}",
  "status": "complete",
  "waypoints_total": 5,
  "waypoints_completed": 5,
  "issues": { "critical": 0, "high": 1, "medium": 3, "low": 2, "note": 2 }
}

Integration

Feeds into:

/plan-chat - When issues need architectural discussion
/plan-breakdown - When ready to create fix tasks directly

Quality Checklist

All waypoints visited or documented as blocked
Each issue has severity, category, description
Screenshots captured for visual issues
Steps to reproduce provided
Suggested Playwright tests included
Summary statistics accurate

web-qa-exploration

When & Why to Use This Skill

Use Cases