Command capture enhancement

Author: vishnuv688

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

@@ -31,6 +31,13 @@ import type { DevtoolsSidebarFilter } from './filter.js'
 
 const EXPLORER = 'wdio-devtools-sidebar-explorer'
 
+const STATE_MAP: Record<string, TestState> = {
+  'running': TestState.RUNNING,
+  'failed': TestState.FAILED,
+  'passed': TestState.PASSED,
+  'skipped': TestState.SKIPPED
+}
+
 @customElement(EXPLORER)
 export class DevtoolsSidebarExplorer extends CollapseableEntry {
   #testFilter: DevtoolsSidebarFilter | undefined
@@ -364,18 +371,32 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
     return entry.state === 'failed'
   }
 
+  #computeEntryState(entry: TestStats | SuiteStats): TestState {
+    const state = (entry as any).state
+
+    // Check explicit state first
+    const mappedState = STATE_MAP[state]
+    if (mappedState) return mappedState
+
+    // For suites, compute state from children
+    if ('tests' in entry) {
+      if (this.#isRunning(entry)) return TestState.RUNNING
+      if (this.#hasFailed(entry)) return TestState.FAILED
+      return TestState.PASSED
+    }
+
+    // For individual tests, check if still running
+    return !entry.end ? TestState.RUNNING : TestState.PASSED
+  }
+
   #getTestEntry(entry: TestStats | SuiteStats): TestEntry {
     if ('tests' in entry) {
       const entries = [...entry.tests, ...entry.suites]
       return {
         uid: entry.uid,
         label: entry.title,
         type: 'suite',
-        state: this.#isRunning(entry)
-          ? TestState.RUNNING
-          : this.#hasFailed(entry)
-            ? TestState.FAILED
-            : TestState.PASSED,
+        state: this.#computeEntryState(entry),
         callSource: (entry as any).callSource,
         specFile: (entry as any).file,
         fullTitle: entry.title,
@@ -391,11 +412,7 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
       uid: entry.uid,
       label: entry.title,
       type: 'test',
-      state: !entry.end
-        ? TestState.RUNNING
-        : entry.state === 'failed'
-          ? TestState.FAILED
-          : TestState.PASSED,
+      state: this.#computeEntryState(entry),
       callSource: (entry as any).callSource,
       specFile: (entry as any).file,
       fullTitle: (entry as any).fullTitle || entry.title,

packages/backend/src/index.ts

@@ -30,17 +30,17 @@ export function broadcastToClients(message: string) {
   })
 }
 
-export async function start(opts: DevtoolsBackendOptions = {}) {
+export async function start(opts: DevtoolsBackendOptions = {}): Promise<{ server: FastifyInstance; port: number }> {
   const host = opts.hostname || 'localhost'
   // Use getPort to find an available port, starting with the preferred port
   const preferredPort = opts.port || DEFAULT_PORT
   const port = await getPort({ port: preferredPort })
-  
+
   // Log if we had to use a different port
   if (opts.port && port !== opts.port) {
     log.warn(`Port ${opts.port} is already in use, using port ${port} instead`)
   }
-  
+
   const appPath = await getDevtoolsApp()
 
   server = Fastify({ logger: true })
@@ -99,22 +99,22 @@ export async function start(opts: DevtoolsBackendOptions = {}) {
         log.info(
           `received ${message.length} byte message from worker to ${clients.size} client${clients.size > 1 ? 's' : ''}`
         )
-        
+
         // Parse message to check if it's a clearCommands message
         try {
           const parsed = JSON.parse(message.toString())
-          
+
           // If this is a clearCommands message, transform it to clear-execution-data format
           if (parsed.scope === 'clearCommands') {
             const testUid = parsed.data?.testUid
             log.info(`Clearing commands for test: ${testUid || 'all'}`)
-            
+
             // Create a synthetic message that DataManager will understand
             const clearMessage = JSON.stringify({
               scope: 'clearExecutionData',
               data: { uid: testUid }
             })
-            
+
             clients.forEach((client) => {
               if (client.readyState === WebSocket.OPEN) {
                 client.send(clearMessage)
@@ -125,7 +125,7 @@ export async function start(opts: DevtoolsBackendOptions = {}) {
         } catch (e) {
           // Not JSON or parsing failed, forward as-is
         }
-        
+
         // Forward all other messages as-is
         clients.forEach((client) => {
           if (client.readyState === WebSocket.OPEN) {
@@ -138,7 +138,7 @@ export async function start(opts: DevtoolsBackendOptions = {}) {
 
   log.info(`Starting WebdriverIO Devtools application on port ${port}`)
   await server.listen({ port, host })
-  return server
+  return { server, port }
 }
 
 export async function stop() {
@@ -147,15 +147,15 @@ export async function stop() {
   }
 
   log.info('Shutting down WebdriverIO Devtools application')
-  
+
   // Close all WebSocket connections first
   clients.forEach((client) => {
     if (client.readyState === WebSocket.OPEN || client.readyState === WebSocket.CONNECTING) {
       client.terminate()
     }
   })
   clients.clear()
-  
+
   await server.close()
 }
 

packages/nightwatch-devtools/README.md

@@ -8,7 +8,7 @@ Brings the powerful WebdriverIO DevTools visual debugging interface to Nightwatc
 
 See everything in real-time:
 - 📋 **Commands** - Every action executed
-- 🖥️ **Console** - Browser console logs  
+- 🖥️ **Console** - Browser console logs
 - 🌐 **Network** - HTTP requests/responses
 - ✅ **Tests** - Suite structure and results
 - 📁 **Sources** - Test file contents
@@ -28,16 +28,18 @@ Add to your Nightwatch config:
 
 ```javascript
 // nightwatch.conf.js
+const nightwatchDevtools = require('@wdio/nightwatch-devtools').default;
+
 module.exports = {
   src_folders: ['tests'],
-  
-  plugins: ['@wdio/nightwatch-devtools'],
-  
+
   test_settings: {
     default: {
       desiredCapabilities: {
         browserName: 'chrome'
-      }
+      },
+      // Add DevTools globals with lifecycle hooks
+      globals: nightwatchDevtools()
     }
   }
 }
@@ -51,7 +53,7 @@ nightwatch
 
 The DevTools UI will automatically:
 1. Start backend server on port 3000
-2. Open in a new browser window  
+2. Open in a new browser window
 3. Stream test data in real-time
 4. Stay open after tests finish (close manually to exit)
 
@@ -66,7 +68,6 @@ Run it:
 ```bash
 cd packages/nightwatch-devtools
 pnpm build
-pnpm validate  # Quick check
 pnpm example   # Run tests with DevTools UI
 ```
 
@@ -81,43 +82,31 @@ This is a **thin adapter** (~210 lines) that:
 
 Same backend, same UI, same capture as WDIO - just different framework hooks!
 
-## Validation
-
-Verify the plugin is working:
-
-```bash
-pnpm validate
-```
-
-Output:
-```
-✅ Plugin compiled (dist/ exists)
-✅ Plugin module loaded
-✅ Plugin exports default class
-✅ Plugin can be instantiated
-✅ All required lifecycle methods present
-✨ Plugin validation successful!
-```
-
 ## Options
 
 ```javascript
-plugins: [
-  ['@wdio/nightwatch-devtools', {
-    port: 3000,           // DevTools server port
-    hostname: 'localhost' // DevTools server hostname
-  }]
-]
+const nightwatchDevtools = require('@wdio/nightwatch-devtools').default;
+
+module.exports = {
+  test_settings: {
+    default: {
+      globals: nightwatchDevtools({
+        port: 3000,           // DevTools server port (default: 3000)
+        hostname: 'localhost' // DevTools server hostname (default: 'localhost')
+      })
+    }
+  }
+}
 ```
 
 ## What Gets Captured
 
-✅ Test suites and hierarchy  
-✅ Test pass/fail status  
-✅ Execution timing  
-✅ Error messages and stack traces  
-✅ Browser console logs (automatic)  
-✅ Network requests (automatic)  
+✅ Test suites and hierarchy
+✅ Test pass/fail status
+✅ Execution timing
+✅ Error messages and stack traces
+✅ Browser console logs (automatic)
+✅ Network requests (automatic)
 ✅ DOM mutations (automatic)
 
 Browser-side capture works automatically via `@wdio/devtools-script`.