TestRunner feature

README.md

@@ -1,2 +1,98 @@
-# devtools
-Browser devtools extension for debugging WebdriverIO tests
+# WebdriverIO DevTools
+
+A powerful browser devtools extension for debugging, visualizing, and controlling WebdriverIO test executions in real-time.
+
+## 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
+- **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
+
+### 🏗️ 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
+
+## Installation
+
+```bash
+npm install @wdio/devtools-service
+```
+
+## Configuration
+
+Add the service to your `wdio.conf.js`:
+
+```javascript
+export const config = {
+    // ...
+    services: ['devtools']
+}
+```
+
+## Usage
+
+1. Run your WebdriverIO tests with the devtools service enabled
+2. Open `http://localhost:3000` in your browser
+3. View real-time test execution with live browser preview
+4. Click play buttons on any test or suite to rerun selectively
+5. Click stop button to terminate running tests
+6. Explore actions, metadata, and console logs in the workbench tabs
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Build all packages
+pnpm build
+
+# Run demo
+pnpm demo
+```
+
+## 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
+```
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+MIT

packages/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wdio/devtools-app",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Browser devtools extension for debugging WebdriverIO tests.",
   "type": "module",
   "exports": "./src/index.ts",

packages/app/src/app.ts

@@ -52,6 +52,10 @@ export class WebdriverIODevtoolsApplication extends Element {
   connectedCallback(): void {
     super.connectedCallback()
     window.addEventListener('load-trace', this.#loadTrace.bind(this))
+    this.addEventListener(
+      'clear-execution-data',
+      this.#clearExecutionData.bind(this)
+    )
   }
 
   render() {
@@ -66,6 +70,10 @@ export class WebdriverIODevtoolsApplication extends Element {
     this.requestUpdate()
   }
 
+  #clearExecutionData({ detail }: { detail?: { uid?: string } }) {
+    this.dataManager.clearExecutionData(detail?.uid)
+  }
+
   #mainContent() {
     if (!this.dataManager.hasConnection) {
       return html`<wdio-devtools-start></wdio-devtools-start>`

packages/app/src/components/sidebar/constants.ts

@@ -0,0 +1,10 @@
+import type { RunCapabilities } from './types.js'
+
+export const DEFAULT_CAPABILITIES: RunCapabilities = {
+  canRunSuites: true,
+  canRunTests: true
+}
+
+export const FRAMEWORK_CAPABILITIES: Record<string, RunCapabilities> = {
+  cucumber: { canRunSuites: true, canRunTests: false }
+}