Test case/suite rerun stop feature

vishnuv688 · vishnuv688 · commit 473feef80293 · 2025-12-23T12:40:11.000+05:30
diff --git a/packages/app/src/app.ts b/packages/app/src/app.ts
@@ -70,8 +70,8 @@ export class WebdriverIODevtoolsApplication extends Element {
     this.requestUpdate()
   }
 
-  #clearExecutionData() {
-    this.dataManager.clearExecutionData()
+  #clearExecutionData({ detail }: { detail?: { uid?: string } }) {
+    this.dataManager.clearExecutionData(detail?.uid)
   }
 
   #mainContent() {
diff --git a/packages/app/src/components/sidebar/explorer.ts b/packages/app/src/components/sidebar/explorer.ts
@@ -125,7 +125,11 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
 
     // Clear execution data before triggering rerun
     this.dispatchEvent(
-      new CustomEvent('clear-execution-data', { bubbles: true, composed: true })
+      new CustomEvent('clear-execution-data', {
+        detail: { uid: detail.uid },
+        bubbles: true,
+        composed: true
+      })
     )
 
     const payload = {
@@ -140,8 +144,7 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
 
   async #handleTestStop(event: Event) {
     event.stopPropagation()
-    const detail = (event as CustomEvent<TestRunDetail>).detail
-    await this.#postToBackend('/api/tests/stop', { ...detail })
+    await this.#postToBackend('/api/tests/stop', {})
   }
 
   async #postToBackend(path: string, body: Record<string, unknown>) {
@@ -199,9 +202,13 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
       return
     }
 
-    // Clear execution data before triggering rerun
+    // Clear execution data and mark all tests as running
     this.dispatchEvent(
-      new CustomEvent('clear-execution-data', { bubbles: true, composed: true })
+      new CustomEvent('clear-execution-data', {
+        detail: { uid: '*' },
+        bubbles: true,
+        composed: true
+      })
     )
 
     void this.#postToBackend('/api/tests/run', {
diff --git a/packages/app/src/controller/DataManager.ts b/packages/app/src/controller/DataManager.ts
@@ -42,9 +42,9 @@ export const suiteContext = createContext<Record<string, any>[]>(
 
 const hasConnection = createContext<boolean>(Symbol('hasConnection'))
 
-interface SocketMessage<T extends keyof TraceLog = keyof TraceLog> {
+interface SocketMessage<T extends keyof TraceLog | 'testStopped' = keyof TraceLog | 'testStopped'> {
   scope: T
-  data: TraceLog[T]
+  data: T extends keyof TraceLog ? TraceLog[T] : unknown
 }
 
 export class DataManagerController implements ReactiveController {
@@ -103,17 +103,113 @@ export class DataManagerController implements ReactiveController {
   }
 
   // Public method to clear execution data when rerun is triggered
-  clearExecutionData() {
-    this.mutationsContextProvider.setValue([])
-    this.commandsContextProvider.setValue([])
-    this.logsContextProvider.setValue([])
-    this.consoleLogsContextProvider.setValue([])
+  clearExecutionData(uid?: string) {
+    this.#resetExecutionData()
+    if (uid) {
+      this.#markTestAsRunning(uid)
+    }
+  }
+
+  // Private method to mark a test/suite as running immediately for UI feedback
+  #markTestAsRunning(uid: string) {
+    const suites = this.suitesContextProvider.value || []
+
+    // If uid is '*', mark ALL tests/suites as running
+    if (uid === '*') {
+      const updatedSuites = suites.map((chunk) => {
+        const updatedChunk: Record<string, SuiteStatsFragment> = {}
+        Object.entries(chunk as Record<string, SuiteStatsFragment>).forEach(
+          ([suiteUid, suite]) => {
+            if (!suite) {
+              updatedChunk[suiteUid] = suite
+              return
+            }
+
+            const markAllAsRunning = (s: SuiteStatsFragment): SuiteStatsFragment => {
+              return {
+                ...s,
+                start: new Date(),
+                end: undefined,
+                tests: s.tests?.map((test) => ({
+                  ...test,
+                  start: new Date(),
+                  end: undefined
+                })) || [],
+                suites: s.suites?.map(markAllAsRunning) || []
+              }
+            }
+
+            updatedChunk[suiteUid] = markAllAsRunning(suite)
+          }
+        )
+        return updatedChunk
+      })
+      this.suitesContextProvider.setValue(updatedSuites)
+      this.#host.requestUpdate()
+      return
+    }
+
+    // Otherwise, mark specific test/suite as running
+    const updatedSuites = suites.map((chunk) => {
+      const updatedChunk: Record<string, SuiteStatsFragment> = {}
+      Object.entries(chunk as Record<string, SuiteStatsFragment>).forEach(
+        ([suiteUid, suite]) => {
+          if (!suite) {
+            updatedChunk[suiteUid] = suite
+            return
+          }
+
+          // Recursive helper to mark tests/suites as running
+          const markAsRunning = (s: SuiteStatsFragment): SuiteStatsFragment => {
+            // If this is the target suite/test, mark it as running
+            if (s.uid === uid) {
+              return {
+                ...s,
+                start: new Date(),
+                end: undefined, // Clear end to mark as running
+                tests: s.tests?.map((test) => ({
+                  ...test,
+                  start: new Date(),
+                  end: undefined
+                })) || [],
+                suites: s.suites?.map(markAsRunning) || []
+              }
+            }
+
+            // Check if any child test matches
+            const updatedTests = s.tests?.map((test) => {
+              if (test.uid === uid) {
+                return {
+                  ...test,
+                  start: new Date(),
+                  end: undefined
+                }
+              }
+              return test
+            })
+
+            // Recursively check nested suites
+            const updatedNestedSuites = s.suites?.map(markAsRunning)
+
+            return {
+              ...s,
+              tests: updatedTests || [],
+              suites: updatedNestedSuites || []
+            }
+          }
+
+          updatedChunk[suiteUid] = markAsRunning(suite)
+        }
+      )
+      return updatedChunk
+    })
+
+    this.suitesContextProvider.setValue(updatedSuites)
     this.#host.requestUpdate()
   }
 
   hostConnected() {
     const wsUrl = `ws://${window.location.host}/client`
-    console.log(`Connecting to ${wsUrl}`)
     const ws = (this.#ws = new WebSocket(wsUrl))
 
     ws.addEventListener('open', () => {
@@ -150,6 +246,13 @@ export class DataManagerController implements ReactiveController {
         return
       }
 
+      // Handle test stopped event
+      if (scope === 'testStopped') {
+        this.#handleTestStopped()
+        this.#host.requestUpdate()
+        return
+      }
+
       // Check for new run BEFORE processing suites data
       if (scope === 'suites') {
         const shouldReset = this.#shouldResetForNewRun(data)
@@ -227,6 +330,55 @@ export class DataManagerController implements ReactiveController {
     this.#host.requestUpdate()
   }
 
+  #handleTestStopped() {
+    // Mark all running tests as failed when test execution is stopped
+    const suites = this.suitesContextProvider.value || []
+    const updatedSuites = suites.map((chunk) => {
+      const updatedChunk: Record<string, SuiteStatsFragment> = {}
+      Object.entries(chunk as Record<string, SuiteStatsFragment>).forEach(
+        ([uid, suite]) => {
+          if (!suite) {
+            updatedChunk[uid] = suite
+            return
+          }
+
+          // Recursive helper to update tests and nested suites
+          const updateSuite = (s: SuiteStatsFragment): SuiteStatsFragment => {
+            const updatedTests = s.tests?.map((test): TestStatsFragment => {
+              // If test is running (no end time), mark it as failed
+              if (test && !test.end) {
+                return {
+                  ...test,
+                  end: new Date(),
+                  state: 'failed' as 'failed',
+                  error: {
+                    message: 'Test execution stopped',
+                    name: 'TestStoppedError'
+                  }
+                }
+              }
+              return test
+            })
+
+            // Recursively update nested suites (for Cucumber scenarios)
+            const updatedNestedSuites = s.suites?.map(updateSuite)
+
+            return {
+              ...s,
+              tests: updatedTests || [],
+              suites: updatedNestedSuites || []
+            }
+          }
+
+          updatedChunk[uid] = updateSuite(suite)
+        }
+      )
+      return updatedChunk
+    })
+
+    this.suitesContextProvider.setValue(updatedSuites)
+  }
+
   #handleMutationsUpdate(data: TraceMutation[]) {
     this.mutationsContextProvider.setValue([
       ...(this.mutationsContextProvider.value || []),
diff --git a/packages/app/src/vite-env.d.ts b/packages/app/src/vite-env.d.ts
@@ -23,5 +23,5 @@ interface GlobalEventHandlersEventMap {
   'app-logs': CustomEvent<string>
   'load-trace': CustomEvent<TraceLog>
   'show-command': CustomEvent<CommandEventProps>
-  'clear-execution-data': CustomEvent<void>
+  'clear-execution-data': CustomEvent<{ uid?: string }>
 }
diff --git a/packages/backend/src/index.ts b/packages/backend/src/index.ts
@@ -21,6 +21,14 @@ interface DevtoolsBackendOptions {
 const log = logger('@wdio/devtools-backend')
 const clients = new Set<WebSocket>()
 
+export function broadcastToClients(message: string) {
+  clients.forEach((client) => {
+    if (client.readyState === WebSocket.OPEN) {
+      client.send(message)
+    }
+  })
+}
+
 export async function start(opts: DevtoolsBackendOptions = {}) {
   const host = opts.hostname || 'localhost'
   const port = opts.port || (await getPort({ port: DEFAULT_PORT }))
@@ -55,6 +63,10 @@ export async function start(opts: DevtoolsBackendOptions = {}) {
 
   server.post('/api/tests/stop', async (_request, reply) => {
     testRunner.stop()
+    broadcastToClients(JSON.stringify({
+      scope: 'testStopped',
+      data: { stopped: true, timestamp: Date.now() }
+    }))
     reply.send({ ok: true })
   })
 
diff --git a/packages/backend/src/runner.ts b/packages/backend/src/runner.ts
@@ -3,6 +3,7 @@ import fs from 'node:fs'
 import path from 'node:path'
 import url from 'node:url'
 import { createRequire } from 'node:module'
+import kill from 'tree-kill'
 
 const require = createRequire(import.meta.url)
 const wdioBin = resolveWdioBin()
@@ -151,7 +152,8 @@ class TestRunner {
     const child = spawn(process.execPath, args, {
       cwd: this.#baseDir,
       env: childEnv,
-      stdio: 'inherit'
+      stdio: 'inherit',
+      detached: false
     })
 
     this.#child = child
@@ -175,10 +177,22 @@ class TestRunner {
   }
 
   stop() {
-    if (!this.#child) {
+    if (!this.#child || !this.#child.pid) {
       return
     }
-    this.#child.kill('SIGINT')
+
+    const pid = this.#child.pid
+
+    // Kill the entire process tree
+    kill(pid, 'SIGTERM', (err) => {
+      if (err) {
+        console.error('Error stopping test run:', err)
+        // Try force kill if graceful termination fails
+        kill(pid, 'SIGKILL')
+      }
+    })
+
+    // Clean up immediately
     this.#child = undefined
     this.#lastPayload = undefined
     this.#baseDir = process.cwd()

Original file line number	Diff line number	Diff line change
`@@ -70,8 +70,8 @@ export class WebdriverIODevtoolsApplication extends Element {`
`70`	`70`	`this.requestUpdate()`
`71`	`71`	`}`
`72`	`72`
`73`		`- #clearExecutionData() {`
`74`		`- this.dataManager.clearExecutionData()`
	`73`	`+ #clearExecutionData({ detail }: { detail?: { uid?: string } }) {`
	`74`	`+ this.dataManager.clearExecutionData(detail?.uid)`
`75`	`75`	`}`
`76`	`76`
`77`	`77`	`#mainContent() {`
Original file line number	Diff line number	Diff line change
`@@ -23,5 +23,5 @@ interface GlobalEventHandlersEventMap {`
`23`	`23`	`'app-logs': CustomEvent<string>`
`24`	`24`	`'load-trace': CustomEvent<TraceLog>`
`25`	`25`	`'show-command': CustomEvent<CommandEventProps>`
`26`		`- 'clear-execution-data': CustomEvent<void>`
	`26`	`+ 'clear-execution-data': CustomEvent<{ uid?: string }>`
`27`	`27`	`}`