propagate session data to devtools

Author: christian-bromann

example/wdio.conf.ts

@@ -221,8 +221,9 @@ export const config: Options.Testrunner = {
      * @param {Array.<String>} specs        List of spec file paths that are to be run
      * @param {object}         browser      instance of created browser/device session
      */
-    // before: function (capabilities, specs) {
-    // },
+    before: async function () {
+      await browser.pause(5000)
+    },
     /**
      * Runs before a WebdriverIO command gets executed.
      * @param {string} commandName hook command name

packages/app/src/components/placeholder.ts

@@ -16,6 +16,7 @@ export class DevtoolsPlaceholder extends Element {
     .ph-item {
       border: 0;
       height: 100%;
+      background-color: transparent;
     }
 
     .ph-item div {

packages/app/src/context.ts

@@ -7,6 +7,11 @@ export { type TraceLog }
 
 const CACHE_ID = 'wdio-trace-cache'
 
+interface SocketMessage<T extends keyof TraceLog = keyof TraceLog> {
+  scope: T
+  data: TraceLog[T]
+}
+
 async function fetchData () {
   const hasSocketConnection = await connectSocket()
   if (hasSocketConnection) {
@@ -23,14 +28,16 @@ async function connectSocket () {
   /**
    * expect application to be served from backend
    */
-  console.log(`Connecting to ws://${window.location}`)
-  const ws = new WebSocket(`ws://${window.location}`)
+  const wsUrl = `ws://${window.location.host}/client`
+  console.log(`Connecting to ${wsUrl}`)
+  const ws = new WebSocket(wsUrl)
 
   if (ws.readyState === WebSocket.CLOSED) {
     return undefined
   }
 
   return new Promise((resolve, reject) => {
+    ws.addEventListener('message', handleSocketMessage)
     ws.onopen = () => resolve({})
     ws.onerror = reject
   })
@@ -45,6 +52,22 @@ function loadCachedTraceData () {
   }
 }
 
+function handleSocketMessage (event: MessageEvent) {
+  try {
+    const { scope, data } = JSON.parse(event.data) as SocketMessage
+    if (scope === 'mutations') {
+      context.__context__.mutations = [
+        ...(context.__context__.mutations || []),
+        ...data as TraceMutation[]
+      ]
+    } else {
+      context.__context__[scope] = data as any
+    }
+  } catch (e: unknown) {
+    console.warn(`Failed to parse socket message: ${(e as Error).message}`)
+  }
+}
+
 export function cacheTraceData (traceLog: TraceLog) {
   localStorage.setItem(CACHE_ID, JSON.stringify(traceLog))
   context.__context__ = traceLog

packages/backend/package.json

@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "@fastify/static": "^6.12.0",
+    "@fastify/websocket": "^8.2.0",
     "@wdio/devtools-app": "workspace:^",
     "@wdio/logger": "^8.24.12",
     "fastify": "^4.24.3",

packages/backend/src/index.ts

@@ -2,6 +2,7 @@ import url from 'node:url'
 
 import Fastify, { type FastifyInstance } from 'fastify'
 import staticServer from '@fastify/static'
+import websocket from '@fastify/websocket'
 import getPort from 'get-port'
 import logger from '@wdio/logger'
 
@@ -12,21 +13,41 @@ let server: FastifyInstance | undefined
 
 interface DevtoolsBackendOptions {
   port?: number
+  hostname?: string
 }
 
 const log = logger('@wdio/devtools-backend')
+const clients = new Set<websocket.SocketStream>()
 
 export async function start (opts: DevtoolsBackendOptions = {}) {
+  const host = opts.hostname || 'localhost'
   const port = opts.port || await getPort({ port: DEFAULT_PORT })
   const appPath = await getDevtoolsApp()
 
   server = Fastify({ logger: true })
+  server.register(websocket)
   server.register(staticServer, {
     root: appPath
   })
 
+  server.register(async function (f) {
+    f.get('/client', { websocket: true }, (connection) => {
+      log.info('client connected')
+      clients.add(connection)
+    })
+    f.get('/worker', { websocket: true }, (connection) => {
+      /**
+       * forward messages to all connected clients
+       */
+      connection.socket.on('message', (message) => {
+        log.info(`received ${message.toLocaleString().length} byte message from worker to ${clients.size} clients`, )
+        clients.forEach((client) => client.socket.send(message.toString()))
+      })
+    })
+  })
+
   log.info(`Starting WebdriverIO Devtools application on port ${port}`)
-  await server.listen({ port })
+  await server.listen({ port, host })
   return server
 }
 
@@ -35,7 +56,9 @@ export async function stop () {
     return
   }
 
+  log.info('Shutting down WebdriverIO Devtools application')
   await server.close()
+  clients.clear()
 }
 
 /**

packages/script/src/collector.ts

@@ -26,13 +26,17 @@ class DataCollector {
     clearLogs()
   }
 
+  getMetadata () {
+    return this.#metadata
+  }
+
   getTraceData () {
     const data = {
       errors: this.#errors,
       mutations: this.#mutations,
       consoleLogs: this.#consoleLogs.getArtifacts(),
       traceLogs: getLogs(),
-      metadata: this.#metadata
+      metadata: this.getMetadata(),
     } as const
     this.reset()
     return data

packages/service/package.json

@@ -32,7 +32,8 @@
     "@wdio/types": "^8.23.0",
     "import-meta-resolve": "^4.0.0",
     "stack-trace": "1.0.0-pre2",
-    "webdriverio": "^8.23.0"
+    "webdriverio": "^8.23.0",
+    "ws": "^8.15.1"
   },
   "license": "MIT",
   "devDependencies": {

packages/service/src/index.ts

@@ -4,15 +4,14 @@ import path from 'node:path'
 
 import logger from '@wdio/logger'
 import { SevereServiceError } from 'webdriverio'
-import type { Capabilities, Options } from '@wdio/types'
+import type { Services, Reporters, Capabilities, Options } from '@wdio/types'
 import type { WebDriverCommands } from '@wdio/protocols'
-import type { Services, Reporters } from '@wdio/types'
 
 import { SessionCapturer } from './session.js'
 import { TestReporter } from './reporter.js'
 import { DevToolsAppLauncher } from './launcher.js'
 import { getBrowserObject } from './utils.ts'
-import { type TraceLog, TraceType } from './types.ts'
+import { type TraceLog, type ExtendedCapabilities, TraceType } from './types.ts'
 
 export const launcher = DevToolsAppLauncher
 
@@ -24,6 +23,7 @@ const log = logger('@wdio/devtools-service')
 export function setupForDevtools (opts: Options.WebdriverIO) {
   let browserCaptured = false
   const service = new DevToolsHookService()
+  service.captureType = TraceType.Standalone
   service.beforeSession(null as never, opts.capabilities as Capabilities.RemoteCapability)
 
   /**
@@ -69,8 +69,21 @@ export default class DevToolsHookService implements Services.ServiceInstance {
   #sessionCapturer = new SessionCapturer()
   #browser: WebdriverIO.Browser | undefined
 
-  before (_: never, __: never, browser: WebdriverIO.Browser) {
+  /**
+   * allows to define the type of data being captured to hint the
+   * devtools app which data to expect
+   */
+  captureType = TraceType.Testrunner
+
+  before (caps: Capabilities.RemoteCapability, __: never, browser: WebdriverIO.Browser) {
     this.#browser = browser
+
+    console.log('\n\n\nWUTTT', caps)
+    const w3cCaps = caps as Capabilities.W3CCapabilities
+    const c = w3cCaps.alwaysMatch
+      ? w3cCaps.alwaysMatch as ExtendedCapabilities
+      : caps as ExtendedCapabilities
+    this.#sessionCapturer = new SessionCapturer(c['wdio:devtoolsOptions'])
   }
 
   beforeSession (config: Options.WebdriverIO | Options.Testrunner, capabilities: Capabilities.RemoteCapability) {
@@ -103,7 +116,7 @@ export default class DevToolsHookService implements Services.ServiceInstance {
          */
         class DevToolsReporter extends TestReporter {
           constructor (options: Reporters.Options) {
-            super(options)
+            super(options, self.#sessionCapturer)
             self.#testReporters.push(this)
           }
         }
@@ -119,6 +132,20 @@ export default class DevToolsHookService implements Services.ServiceInstance {
   }
 
   afterCommand(command: keyof WebDriverCommands, args: any[], result: any, error: Error) {
+    if (this.#browser && command === 'navigateTo') {
+      /**
+       * propagate session metadata at the beginning of the session
+       */
+      browser.execute(() => window.wdioTraceCollector.getMetadata())
+        .then((metadata) => this.#sessionCapturer.sendUpstream('metadata', {
+          ...metadata,
+          type: this.captureType,
+          options: browser.options,
+          capabilities: browser.capabilities
+        })
+      )
+    }
+
     return this.#sessionCapturer.afterCommand(browser, command, args, result, error)
   }
 
@@ -127,7 +154,7 @@ export default class DevToolsHookService implements Services.ServiceInstance {
    * we can use it to write all trace information to a file
    */
   async after () {
-    if (!this.#browser) {
+    if (!this.#browser || this.#sessionCapturer.isReportingUpstream) {
       return
     }
     const outputDir = this.#browser.options.outputDir || process.cwd()
@@ -137,7 +164,7 @@ export default class DevToolsHookService implements Services.ServiceInstance {
       logs: this.#sessionCapturer.traceLogs,
       consoleLogs: this.#sessionCapturer.consoleLogs,
       metadata: {
-        type: TraceType.Standalone,
+        type: this.captureType,
         ...this.#sessionCapturer.metadata!,
         options,
         capabilities

packages/service/src/launcher.ts

@@ -2,7 +2,7 @@ import { remote } from 'webdriverio'
 import { start } from '@wdio/devtools-backend'
 
 import { DEFAULT_LAUNCH_CAPS } from './constants.ts'
-import type { ServiceOptions } from './types.js'
+import type { ServiceOptions, ExtendedCapabilities } from './types.js'
 
 export class DevToolsAppLauncher {
   #options: ServiceOptions
@@ -12,18 +12,22 @@ export class DevToolsAppLauncher {
     this.#options = options
   }
 
-  async onPrepare () {
+  async onPrepare (_: never, caps: ExtendedCapabilities[]) {
     try {
-      const { server } = await start({ port: this.#options.port })
+      const { server } = await start({
+        port: this.#options.port,
+        hostname: this.#options.hostname
+      })
       const address = server.address()
       const port = address && typeof address === 'object'
         ? address.port
         : undefined
 
       if (!port) {
-        console.log(`Failed to start server on port ${port}`)
+        return console.log(`Failed to start server on port ${port}`)
       }
 
+      this.#updateCapabilities(caps, { port })
       this.#browser = await remote({
         capabilities: {
           ...DEFAULT_LAUNCH_CAPS,
@@ -39,4 +43,20 @@ export class DevToolsAppLauncher {
   async onComplete () {
     await this.#browser?.deleteSession()
   }
+
+  #updateCapabilities (caps: ExtendedCapabilities[], devtoolsApp: { port: number }) {
+    /**
+     * we don't support multiremote yet
+     */
+    if (!Array.isArray(caps)) {
+      return
+    }
+
+    for (const cap of caps) {
+      cap['wdio:devtoolsOptions'] = {
+        port: devtoolsApp.port,
+        hostname: 'localhost'
+      }
+    }
+  }
 }

packages/service/src/reporter.ts

@@ -1,6 +1,34 @@
-import WebdriverIOReporter from '@wdio/reporter'
+import WebdriverIOReporter, { type SuiteStats, type TestStats } from '@wdio/reporter'
+import type { SessionCapturer } from './session.ts'
 
 export class TestReporter extends WebdriverIOReporter {
+  #sessionCapturer: SessionCapturer
+
+  constructor (options: any, sessionCapturer: SessionCapturer) {
+    super(options)
+    this.#sessionCapturer = sessionCapturer
+  }
+
+  onSuiteStart(suiteStats: SuiteStats): void {
+    super.onSuiteStart(suiteStats)
+    this.#sessionCapturer.sendUpstream('suites', [this.suites])
+  }
+
+  onTestStart(testStats: TestStats): void {
+    super.onTestStart(testStats)
+    this.#sessionCapturer.sendUpstream('suites', [this.suites])
+  }
+
+  onTestEnd(testStats: TestStats): void {
+    super.onTestEnd(testStats)
+    this.#sessionCapturer.sendUpstream('suites', [this.suites])
+  }
+
+  onSuiteEnd(suiteStats: SuiteStats): void {
+    super.onSuiteEnd(suiteStats)
+    this.#sessionCapturer.sendUpstream('suites', [this.suites])
+  }
+
   get report () {
     return this.suites
   }