kaizen-yutani

Playwright Autopilot

A Claude Code plugin that debugs and fixes Playwright E2E tests autonomously. It runs your tests with full action capture — DOM snapshots, network requests, console output, screenshots — then investigates failures like a senior QA engineer and ships the fix.

https://github.com/user-attachments/assets/26f734a5-d05e-41c9-bc3f-2b58561c2ce0

Quick Start

# Add the marketplace
/plugin marketplace add kaizen-yutani/playwright-autopilot

# Install the plugin
/plugin install kaizen-yutani/playwright-autopilot

Then ask Claude to fix a failing test or triage your whole suite:

/playwright-autopilot:fix-e2e tests/checkout.spec.ts
/playwright-autopilot:triage-e2e e2e

Or just describe what you need — Claude will use the MCP tools automatically:

Fix all failing e2e tests in the "e2e" project

What It Does

Every browser action during a test run is captured with:

• Before/after DOM snapshots — aria tree of the page before and after each click, fill, navigation
• Network requests — URL, method, status, timing, request/response bodies
• Console output — errors, warnings, logs tied to the action that produced them
• Screenshots — captured at point of failure

When a test fails, Claude doesn't guess — it reads the actual page state, checks for failed API calls, and traces the root cause through the action timeline.

How It Works

1. Capture Hook

A lightweight CJS hook (captureHook.cjs) is injected via NODE_OPTIONS --require into Playwright's test worker processes. It monkey-patches BrowserContext._initialize to add an instrumentation listener that captures every browser action with full context. No modifications to Playwright's source code required — works with any Playwright installation.

2. MCP Tools

The plugin exposes 37 tools via the Model Context Protocol that Claude calls on-demand. This is token-efficient by design — instead of dumping entire traces into context, Claude pulls only what it needs:

Test Execution & Debugging:

Tool	Purpose
e2e_list_projects	List Playwright projects from config
e2e_list_tests	Discover test files and cases
e2e_run_test	Run tests with action capture, flaky detection (retries, repeatEach)
e2e_get_failure_report	Error + DOM + network + console summary
e2e_get_evidence_bundle	All failure evidence in one call — ready for Jira
e2e_generate_report	Self-contained HTML or JSON report file
e2e_suggest_tests	Test coverage gap analysis
e2e_get_actions	Step-by-step action timeline
e2e_get_action_detail	Deep dive into a single action
e2e_get_dom_snapshot	Aria tree before/after an action
e2e_get_dom_diff	What changed in the DOM
e2e_get_network	Network requests with filtering
e2e_get_console	Console output with filtering
e2e_get_screenshot	Failure screenshot as image
e2e_get_test_source	Test file with failing line highlighted
e2e_find_elements	Search DOM for specific elements
e2e_scan_page_objects	Index all page objects and methods
e2e_get_app_flows	Read stored application flows
e2e_save_app_flow	Save a verified user journey
e2e_get_context	Flows + page object index in one call
e2e_discover_flows	Auto-scan specs for draft flow map
e2e_build_flows	Auto-run uncovered tests and save their flows
e2e_get_stats	Suite health dashboard: pass rate trends, flaky scores, category breakdowns
e2e_save_triage_run	Save a categorized triage run for trend tracking
e2e_get_triage_config	Read triage settings (Jira config, flaky threshold)

Interactive Browser Exploration:

Tool	Purpose
browser_navigate	Open a URL (launches browser automatically)
browser_navigate_back	Go back in browser history
browser_snapshot	Capture ARIA accessibility tree with [ref=X] markers
browser_click	Click an element by ref
browser_type	Type into an input field, optionally submit
browser_fill_form	Fill multiple form fields in one call
browser_select_option	Select a dropdown option
browser_press_key	Press a key (Enter, Escape, Tab, etc.)
browser_hover	Hover over an element
browser_take_screenshot	Capture a PNG screenshot
browser_set_headers	Set custom HTTP headers (same-origin only for CORS safety)
browser_close	Close the browser

The browser_* tools launch a real Chrome instance and let Claude explore your application interactively — navigate pages, click elements, fill forms, and observe page state through ARIA snapshots. Each interaction returns timing, network requests, DOM changes, and an updated snapshot. Use this to understand an app before writing tests, debug UI issues visually, or verify fixes.