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

Navigation & State

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