https://github.com/webdriverio/devtools
Debugging WebDriver tests in real-time with support for WebdriverIO
https://github.com/webdriverio/devtools
Last synced: 3 months ago
JSON representation
Debugging WebDriver tests in real-time with support for WebdriverIO
- Host: GitHub
- URL: https://github.com/webdriverio/devtools
- Owner: webdriverio
- License: mit
- Created: 2023-10-20T21:18:04.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2026-02-19T11:08:24.000Z (4 months ago)
- Last Synced: 2026-02-21T21:35:44.720Z (4 months ago)
- Language: TypeScript
- Homepage: https://webdriver.io
- Size: 1.38 MB
- Stars: 3
- Watchers: 4
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# WebdriverIO DevTools
A powerful browser devtools extension for debugging, visualizing, and controlling test executions in real-time.
Works with **WebdriverIO** and **[Nightwatch.js](./packages/nightwatch-devtools/README.md)** — same backend, same UI, same capture infrastructure.
## Features
### 🎯 Interactive Test Execution
- **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
### 🎭 Multi-Framework Support
- **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
### 📊 Real-Time Visualization
- **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
### 🧐 Debugging Capabilities
- **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
### 🎮 Execution Controls
- **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
### 🔍︎ TestLens
- **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
### 🏗️ Architecture
- **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
## Demo
### 🛠️ Test Rerunner & Snapshot
### 🛑 Stop Test Runner
### 🔍︎ TestLens
### >_ Console Logs
### 🌐 Network Logs
## Installation
```bash
npm install @wdio/devtools-service
```
> **Nightwatch users:** `@wdio/nightwatch-devtools` is included as a dependency of `@wdio/devtools-service`. Install the service and import from `@wdio/nightwatch-devtools` directly — see the [Nightwatch Integration](#nightwatch-integration) section.
## Configuration
Add the service to your `wdio.conf.js`:
```javascript
export const config = {
// ...
services: ['devtools']
}
```
## Usage
1. Run your WebdriverIO tests
2. The devtools UI automatically opens in an external browser window at `http://localhost:3000`
3. Tests begin executing immediately with real-time visualization
4. View live browser preview, test progress, and command execution
5. After initial run completes, use play buttons to rerun individual tests or suites
6. Click stop button anytime to terminate running tests
7. Explore actions, metadata, console logs, and source code in the workbench tabs
## Development
```bash
# Install dependencies
pnpm install
# Build all packages
pnpm build
# Run demo
pnpm demo
```
## Nightwatch Integration
Using [Nightwatch.js](https://nightwatchjs.org/)? A dedicated adapter package brings the same DevTools UI to your Nightwatch test suite with zero test code changes.
→ **[`@wdio/nightwatch-devtools`](./packages/nightwatch-devtools/README.md)** — configuration, Cucumber/BDD setup, and limitations.
## Project Structure
```
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
```
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## :page_facing_up: License
[MIT](/LICENSE)