claude-e2e-web

Watch Playwright E2E test videos in the browser and fix failures via Claude Code chat.

npx claude-e2e-web

How It Works

Watch video  -->  Chat feedback  -->  Claude fixes  -->  Re-run  -->  Repeat

Select a failing test from the sidebar, watch the recorded video, then use the built-in terminal (powered by Claude Code) to diagnose and fix the issue — all without leaving the browser.

Quick Start

# In any project with Playwright test results
cd your-project/
npx claude-e2e-web

# Or auto-setup Playwright if not present
npx claude-e2e-web --init

The app opens at http://localhost:3457 with a 3-column layout:

Sidebar	Center	Right Panel
Test list grouped by spec file	Video player + error display	Terminal (xterm.js + PTY)

Features

• Video playback — Watch .webm recordings from Playwright test runs
• Error display — See failure messages and screenshots inline
• Embedded terminal — Full PTY terminal powered by xterm.js and node-pty
• Real-time updates — File watcher detects new test results and updates the UI via WebSocket
• File-specific runs — Run tests for a single spec file without losing other results
• Copy buttons — One-click copy for test names, file names, and video titles
• Reconnect overlay — Auto-reconnects with countdown when WebSocket connection drops
• Collapsible sidebar — Organize test files with expand/collapse and pass/fail counts
• Dracula theme — Dark UI with resizable panels

Output Directory

By default, claude-e2e-web reads from test-results/. If your Playwright config uses a different output directory:

CLI flag

npx claude-e2e-web --output-dir custom-results

Config file — create .claude-e2e-web.json in your project root:

{
  "outputDir": "custom-results"
}

Auto-detection — If your playwright.config.ts has outputDir set, it's picked up automatically.

Priority: CLI flag > config file > Playwright config > test-results (default)

Options

Flag	Description
--init	Auto-setup Playwright if not present
--output-dir <dir>	Custom test results directory
--no-open	Don't open browser automatically

Tech Stack

• Server: Express 5 + WebSocket (ws) + TypeScript
• Frontend: Single HTML file (vanilla JS, no build step)
• Terminal: xterm.js (CDN) + node-pty (server-side)
• AI: Claude Code SDK for chat-based debugging
• File watching: chokidar for real-time updates

Development

npm install
npm test              # Unit tests (vitest)
npm run test:e2e      # E2E tests (playwright)
npm run test:regression  # Regression tests
npm run dev           # Dev server with hot reload

License

MIT