Skip to content

Commit 7c22aae

Browse files
committed
Version and readme update
1 parent f373558 commit 7c22aae

File tree

4 files changed

+101
-5
lines changed

4 files changed

+101
-5
lines changed

README.md

Lines changed: 98 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,98 @@
1-
# devtools
2-
Browser devtools extension for debugging WebdriverIO tests
1+
# WebdriverIO DevTools
2+
3+
A powerful browser devtools extension for debugging, visualizing, and controlling WebdriverIO test executions in real-time.
4+
5+
## Features
6+
7+
### 🎯 Interactive Test Execution
8+
- **Selective Test Rerun**: Click play buttons on individual test cases, test suites, or Cucumber scenario examples to re-execute them instantly
9+
- **Smart Browser Reuse**: Tests rerun in the same browser window without opening new tabs, improving performance and user experience
10+
- **Stop Test Execution**: Terminate running tests with proper process cleanup using the stop button
11+
- **Test List Preservation**: All tests remain visible in the sidebar during reruns, maintaining full context
12+
13+
### 🎭 Multi-Framework Support
14+
- **Mocha**: Full support with grep-based filtering for test/suite execution
15+
- **Jasmine**: Complete integration with grep-based filtering
16+
- **Cucumber**: Scenario-level and example-specific execution with feature:line targeting
17+
18+
### 📊 Real-Time Visualization
19+
- **Live Browser Preview**: View the application under test in a scaled iframe with automatic screenshot updates
20+
- **Actions Timeline**: Command-by-command execution log with timestamps and parameters
21+
- **Test Hierarchy**: Nested test suite and test case tree view with status indicators
22+
- **Live Status Updates**: Immediate spinner icons and visual feedback when tests start/stop
23+
24+
### 🔍 Debugging Capabilities
25+
- **Command Logging**: Detailed capture of all WebDriver commands with arguments and results
26+
- **Screenshot Capture**: Automatic screenshots after each command for visual debugging
27+
- **Source Code Mapping**: View the exact line of code that triggered each command
28+
- **Console Logs**: Capture and display application console output
29+
- **Error Tracking**: Full error messages and stack traces for failed tests
30+
31+
### 🎮 Execution Controls
32+
- **Global Test Running State**: All play buttons automatically disable during test execution to prevent conflicts
33+
- **Immediate Feedback**: Spinner icons update instantly when tests start
34+
- **Actions Tab Auto-Clear**: Execution data automatically clears and refreshes on reruns
35+
- **Metadata Tracking**: Test duration, status, and execution timestamps
36+
37+
### 🏗️ Architecture
38+
- **Frontend**: Lit web components with reactive state management (@lit/context)
39+
- **Backend**: Fastify server with WebSocket streaming for real-time updates
40+
- **Service**: WebdriverIO reporter integration with stable UID generation
41+
- **Process Management**: Tree-kill for proper cleanup of spawned processes
42+
43+
## Installation
44+
45+
```bash
46+
npm install @wdio/devtools-service
47+
```
48+
49+
## Configuration
50+
51+
Add the service to your `wdio.conf.js`:
52+
53+
```javascript
54+
export const config = {
55+
// ...
56+
services: ['devtools']
57+
}
58+
```
59+
60+
## Usage
61+
62+
1. Run your WebdriverIO tests with the devtools service enabled
63+
2. Open `http://localhost:3000` in your browser
64+
3. View real-time test execution with live browser preview
65+
4. Click play buttons on any test or suite to rerun selectively
66+
5. Click stop button to terminate running tests
67+
6. Explore actions, metadata, and console logs in the workbench tabs
68+
69+
## Development
70+
71+
```bash
72+
# Install dependencies
73+
pnpm install
74+
75+
# Build all packages
76+
pnpm build
77+
78+
# Run demo
79+
pnpm demo
80+
```
81+
82+
## Project Structure
83+
84+
```
85+
packages/
86+
├── app/ # Frontend Lit-based UI application
87+
├── backend/ # Fastify server with test runner management
88+
├── service/ # WebdriverIO service and reporter
89+
└── script/ # Browser-injected trace collection script
90+
```
91+
92+
## Contributing
93+
94+
Contributions are welcome! Please feel free to submit a Pull Request.
95+
96+
## License
97+
98+
MIT

packages/app/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@wdio/devtools-app",
3-
"version": "1.0.1",
3+
"version": "1.1.0",
44
"description": "Browser devtools extension for debugging WebdriverIO tests.",
55
"type": "module",
66
"exports": "./src/index.ts",

packages/backend/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@wdio/devtools-backend",
3-
"version": "1.0.1",
3+
"version": "1.1.0",
44
"description": "Backend service to spin up WebdriverIO Devtools",
55
"author": "Christian Bromann <[email protected]>",
66
"license": "MIT",

packages/service/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@wdio/devtools-service",
3-
"version": "10.0.1",
3+
"version": "10.1.0",
44
"description": "Hook up WebdriverIO with DevTools",
55
"author": "Christian Bromann <[email protected]>",
66
"type": "module",

0 commit comments

Comments
 (0)