A powerful browser devtools extension for debugging, visualizing, and controlling test executions in real-time.
Works with WebdriverIO, Nightwatch.js, and Selenium WebDriver (any test runner) — same backend, same UI, same capture infrastructure.
- Selective Test Rerun: Click play buttons on individual test cases, test suites, or Cucumber scenario examples to re-execute them instantly
- Smart Browser Reuse: Tests rerun in the same browser window without opening new tabs, improving performance and user experience
- Stop Test Execution: Terminate running tests with proper process cleanup using the stop button
- Test List Preservation: All tests remain visible in the sidebar during reruns, maintaining full context
- Mocha: Full support with grep-based filtering for test/suite execution
- Jasmine: Complete integration with grep-based filtering
- Cucumber: Scenario-level and example-specific execution with feature:line targeting
- Live Browser Preview: View the application under test in a scaled iframe with automatic screenshot updates
- Actions Timeline: Command-by-command execution log with timestamps and parameters
- Test Hierarchy: Nested test suite and test case tree view with status indicators
- Live Status Updates: Immediate spinner icons and visual feedback when tests start/stop
- Command Logging: Detailed capture of all WebDriver commands with arguments and results
- Screenshot Capture: Automatic screenshots after each command for visual debugging
- Source Code Mapping: View the exact line of code that triggered each command
- Console Logs: Capture and display application console output with timestamps and log levels
- Network Logs: Monitor and inspect HTTP requests/responses including headers, payloads, timing, and status codes
- Error Tracking: Full error messages and stack traces for failed tests
- Global Test Running State: All play buttons automatically disable during test execution to prevent conflicts
- Immediate Feedback: Spinner icons update instantly when tests start
- Actions Tab Auto-Clear: Execution data automatically clears and refreshes on reruns
- Metadata Tracking: Test duration, status, and execution timestamps
- Automatic Video Recording: Captures a continuous
.webmvideo of the browser session alongside the existing snapshot and DOM mutation views - Cross-Browser: Uses Chrome DevTools Protocol (CDP) push mode for Chrome/Chromium; automatically falls back to screenshot polling for Firefox, Safari, and other browsers (no configuration change needed)
- Per-Session Videos: Each browser session (including sessions created by
browser.reloadSession()) produces its own recording, selectable from a dropdown in the UI - Smart Trimming: Leading blank frames before the first URL navigation are automatically removed so videos start at the first meaningful page action
Note: Screencast recording is currently supported for WebdriverIO only. Nightwatch.js support is planned for a future release.
For setup, configuration options, and prerequisites see the service README.
- When the bug icon appears: Only on test/suite rows in a
failedstate and the icon sits next to ▶ on hover, available wherever a plain rerun is supported (e.g. Cucumber scenarios at the scenario row, Mocha tests at the test or suite row) - Side-by-side diff: Click the bug-play icon on a failed test to snapshot the failing run and rerun in one action and the Compare tab shows the two runs aligned by command, with the failure point and assertion error (Expected vs Received) called out
- Diagnose flaky tests: See exactly which command differed between a pass and a fail without re-reading logs
- Pop out: Open the comparison in a separate, themed window for a roomier view
Note: Preserve & Rerun is currently supported for WebdriverIO only. Nightwatch.js and Selenium support is planned for a future release.
- Code Intelligence: View test definitions directly in your editor
- Run/Debug Actions: Execute individual tests or suites with inline CodeLens actions
- Quick Navigation: Jump between test code and execution results seamlessly
- Status Indicators: Visual feedback for test pass/fail states in the editor
- Frontend: Lit web components with reactive state management (@lit/context)
- Backend: Fastify server with WebSocket streaming for real-time updates
- Service: WebdriverIO reporter integration with stable UID generation
- Process Management: Tree-kill for proper cleanup of spawned processes
WebdriverIO:
npm install @wdio/devtools-serviceNightwatch:
npm install @wdio/nightwatch-devtoolsSelenium:
npm install @wdio/selenium-devtoolsSee the Nightwatch Integration and Selenium Integration sections for configuration details.
Add the service to your wdio.conf.js:
export const config = {
// ...
services: ['devtools']
}- Run your WebdriverIO tests
- The devtools UI automatically opens in an external browser window at
http://localhost:3000 - Tests begin executing immediately with real-time visualization
- View live browser preview, test progress, and command execution
- After initial run completes, use play buttons to rerun individual tests or suites
- Click stop button anytime to terminate running tests
- Explore actions, metadata, console logs, and source code in the workbench tabs
# Install dependencies
pnpm install
# Build all packages
pnpm build
# Run demo
pnpm demoUsing Nightwatch.js? A dedicated adapter package brings the same DevTools UI to your Nightwatch test suite with zero test code changes.
→ @wdio/nightwatch-devtools — configuration, Cucumber/BDD setup, and limitations.
Using selenium-webdriver directly — under Mocha, Jest, Cucumber, or a plain Node script? A runner-agnostic adapter brings the same DevTools UI to any Selenium test suite. The plugin auto-detects the runner and wires test boundaries; no code changes required for hook-aware runners, and a small DevTools.startTest/endTest API for plain scripts.
→ @wdio/selenium-devtools — per-runner setup, configuration options, and screencast details.
packages/
├── app/ # Frontend Lit-based UI application
├── backend/ # Fastify server with test runner management
├── service/ # WebdriverIO service and reporter
├── script/ # Browser-injected trace collection script
├── nightwatch-devtools/ # Nightwatch adapter plugin
└── selenium-devtools/ # Selenium WebDriver adapter plugin
Contributions are welcome! Please feel free to submit a Pull Request.
