Playwright E2E Testing

Quick Start

Test a login flow with evidence collection:

You: "Test the login flow at http://localhost:3000"

Claude: [Runs E2E test with]:
1. Initial state capture (snapshot + screenshot)
2. Form interaction (username/password)
3. Console error monitoring
4. Network request verification
5. Final state capture
6. Comprehensive test report

Result: Complete test report with screenshots, console logs, network activity, and pass/fail status.

When to Use This Skill
What This Skill Does
E2E Testing Workflow 3.1. Initial State Capture 3.2. Test Execution 3.3. Evidence Collection 3.4. Final Verification 3.5. Report Generation
Common Test Scenarios
Supporting Files
Expected Outcomes
Requirements
Red Flags to Avoid

When to Use This Skill

Explicit Triggers

"Test the user flow for [feature]"
"Run E2E test on [URL]"
"Validate the [workflow/form/checkout] process"
"Check if [feature] works end-to-end"
"Automated testing for [scenario]"
"Verify [user journey]"

Implicit Triggers

Need to validate multi-step workflows (login, checkout, signup)
Regression testing after changes
Collecting evidence for bug reports
Verifying form submissions work correctly
Testing SPA navigation and state changes
Validating API interactions from browser

Debugging Triggers

"Why is [feature] not working?"
"Check console for errors during [action]"
"Monitor network requests during [workflow]"
"Capture evidence of [bug]"

What This Skill Does

This skill standardizes end-to-end testing with comprehensive evidence collection:

State Capture - Takes snapshots and screenshots before and after tests
Interaction Execution - Fills forms, clicks buttons, navigates pages
Error Monitoring - Watches console for errors and warnings
Network Verification - Tracks API calls and responses
Evidence Collection - Generates reports with all artifacts
Pass/Fail Determination - Validates expected outcomes

E2E Testing Workflow

3.1. Initial State Capture

Purpose: Establish baseline before test execution

Step 1: Navigate to application
  browser_navigate(url="http://localhost:3000")

Step 2: Wait for page load
  browser_wait_for(time=2)

Step 3: Capture accessibility snapshot
  browser_snapshot()
  → Save as "initial-state.md"

Step 4: Take screenshot
  browser_take_screenshot(filename="initial-state.png")

Why this matters: Initial state provides context for test failures and debugging.

3.2. Test Execution

Purpose: Execute user interactions systematically

Step 1: Identify form elements
  browser_snapshot()
  → Find refs for input fields

Step 2: Fill form fields
  browser_fill_form(fields=[
    {name: "Email", ref: "ref_5", type: "textbox", value: "user@test.com"},
    {name: "Password", ref: "ref_6", type: "textbox", value: "password123"}
  ])

Step 3: Submit form
  browser_click(element="Login button", ref="ref_7")

Step 4: Wait for response
  browser_wait_for(text="Welcome")

Pattern: Snapshot → Identify refs → Interact → Verify

3.3. Evidence Collection

Purpose: Gather diagnostic information during test

Step 1: Check console messages
  browser_console_messages(level="error")
  → Capture any errors/warnings

Step 2: Monitor network requests
  browser_network_requests()
  → Verify API calls succeeded

Step 3: Capture intermediate states
  browser_take_screenshot(filename="step-2-after-login.png")

Evidence types:

Console logs (errors, warnings, info)
Network requests (status codes, URLs, timing)
Screenshots (visual confirmation)
Accessibility snapshots (DOM state)

3.4. Final Verification

Purpose: Validate test success criteria

Step 1: Verify expected elements
  browser_snapshot()
  → Check for success indicators

Step 2: Capture final state
  browser_take_screenshot(filename="final-state.png")

Step 3: Check for errors
  browser_console_messages(level="error")
  → Ensure no errors during workflow

Success criteria:

Expected text/elements present
No console errors
Network requests succeeded (2xx status codes)
Final state matches expectations

3.5. Report Generation

Purpose: Create comprehensive test documentation

Use scripts/generate_test_report.py:

python scripts/generate_test_report.py \
  --test-name "Login Flow" \
  --initial-snapshot initial-state.md \
  --final-snapshot final-state.md \
  --screenshots initial-state.png,final-state.png \
  --console-logs console.json \
  --network-requests network.json \
  --output test-report.md

Report includes:

Test metadata (name, URL, timestamp)
Pass/fail status with reasoning
Console error summary
Network request summary
Screenshot gallery
Accessibility snapshots
Recommendations for failures

See references/report-template.md for structure.

Common Test Scenarios

Login Flow: Navigate → Capture state → Fill credentials → Submit → Wait for success → Verify console/network → Capture final state → Report

Form Submission: Navigate → Capture state → Fill fields → Submit → Wait for confirmation → Verify POST request → Check validation → Capture state → Report

Multi-Step Checkout: Add to cart → Checkout → Fill shipping/payment (capture each) → Submit order → Verify confirmation → Check all APIs → Report

SPA Navigation: Navigate → Click nav links → Verify URL changes → Check content updates → Monitor console/network → Capture states → Report

See examples/examples.md for 10+ detailed scenarios with complete code.

Supporting Files

scripts/ - generate_test_report.py (creates markdown reports), setup_test_env.py (initializes directories)

references/ - report-template.md (report structure), troubleshooting.md (common issues/solutions)

examples/ - examples.md (10+ complete test scenarios with code)

Expected Outcomes

Successful Test

✅ Test Passed: Login Flow

Test Summary:
- URL: http://localhost:3000/login
- Duration: 5.2 seconds
- Steps: 4
- Console Errors: 0
- Network Failures: 0

Evidence:
- Initial state: initial-state.png
- Final state: final-state.png
- Accessibility snapshots: 2
- Network requests: 3 (all 200 OK)

Verification:
✅ "Welcome, User" text found
✅ No console errors
✅ POST /api/login returned 200
✅ Dashboard loaded successfully

Full report: test-reports/login-flow-2025-12-20.md

Failed Test

❌ Test Failed: Login Flow

Test Summary:
- URL: http://localhost:3000/login
- Duration: 3.1 seconds (stopped early)
- Steps: 2 of 4 completed
- Console Errors: 2
- Network Failures: 1

Failure Reason:
Network request POST /api/login returned 401 Unauthorized

Console Errors:
1. [Error] Authentication failed: Invalid credentials
2. [Error] Uncaught TypeError: Cannot read property 'token' of undefined

Evidence:
- Initial state: initial-state.png
- Error state: error-state.png
- Network log: network.json

Recommendations:
1. Check API endpoint credentials
2. Verify authentication token handling
3. Add error handling for failed login attempts

Full report: test-reports/login-flow-failed-2025-12-20.md

Requirements

Tools:

Playwright MCP tools (browser_navigate, browser_snapshot, etc.)
Python 3.8+ (for report generation scripts)
Write access to test output directory

Environment:

Application running and accessible (local or remote)
Network connectivity for API calls
Sufficient disk space for screenshots

Knowledge:

Basic understanding of web application flows
Familiarity with CSS selectors or accessibility roles
Understanding of HTTP status codes

Red Flags to Avoid

Testing Anti-Patterns:

Starting test without capturing initial state
Ignoring console errors during test execution
Not verifying network requests succeeded
Skipping final state capture
Proceeding with test after clear failure
Not waiting for async operations to complete
Using hardcoded waits instead of wait_for text/elements
Generating report without all evidence files

Evidence Collection:

Missing screenshots for critical steps
Not checking console messages after interactions
Ignoring network request failures
Not capturing intermediate states for multi-step flows

Report Quality:

Vague test names ("Test 1", "Flow 2")
Missing pass/fail criteria
No recommendations for failures
Incomplete evidence references

Security:

Including credentials in screenshots
Committing sensitive test data to git
Exposing API keys in network logs
Sharing test reports with PII

Notes

Best Practices:

Always capture initial and final state (snapshot + screenshot)
Check console after every significant interaction
Verify network requests for expected status codes
Use descriptive test names and step descriptions
Generate reports immediately after test completion
Store test artifacts in organized directory structure

Performance Tips:

Use browser_wait_for(text="...") instead of fixed time waits
Take screenshots only at key steps (not every interaction)
Filter console messages by level to reduce noise
Clear network requests between test runs

Integration:

Combine with CI/CD for automated regression testing
Use with bug tracking to attach evidence to issues
Share reports with team for test documentation
Archive test artifacts for historical analysis

playwright-e2e-testing