@wdio/devtools-script 1.4.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wdio/devtools-script",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Script to be injected into a page to trace the page",
   "author": "Christian Bromann <mail@bromann.dev>",
   "repository": {
@@ -14,12 +14,12 @@
   "typeScriptVersion": "^5.0.0",
   "dependencies": {
     "htm": "^3.1.1",
-    "parse5": "^8.0.0",
-    "preact": "^10.27.1",
-    "vite-plugin-singlefile": "^2.3.2"
+    "parse5": "^8.0.1",
+    "preact": "^10.29.2",
+    "vite-plugin-singlefile": "^2.3.3"
   },
   "devDependencies": {
-    "vite": "8.0.7"
+    "vite": "^8.0.16"
   },
   "license": "MIT",
   "scripts": {

package/src/collectors/consoleLogs.ts

@@ -3,7 +3,7 @@ import type { Collector } from './collector.js'
 const consoleMethods = ['log', 'info', 'warn', 'error'] as const
 export interface ConsoleLogs {
   type: 'log' | 'info' | 'warn' | 'error'
-  args: any[]
+  args: unknown[]
   timestamp: number
   source?: 'browser' | 'test' | 'terminal'
 }

package/src/collectors/networkRequests.ts

@@ -68,94 +68,94 @@ export class NetworkRequestCollector implements Collector<NetworkRequest> {
     return false
   }
 
+  #extractFetchUrl(input: RequestInfo | URL): string {
+    if (typeof input === 'string') {
+      return input
+    }
+    return input instanceof URL ? input.href : input.url
+  }
+
+  async #readResponseBody(
+    response: Response,
+    contentType: string
+  ): Promise<string | undefined> {
+    try {
+      if (
+        contentType.includes('application/json') ||
+        contentType.includes('text/')
+      ) {
+        return await response.clone().text()
+      }
+    } catch {
+      /* ignore body read errors */
+    }
+    return undefined
+  }
+
+  async #recordFetchResponse(
+    id: string,
+    request: Partial<NetworkRequest>,
+    response: Response,
+    startTime: number
+  ): Promise<void> {
+    const endTime = performance.now()
+    const responseHeaders = this.#extractHeaders(response.headers)
+    const contentType = responseHeaders['content-type']?.trim()
+    if (!contentType || contentType === '-') {
+      this.#pendingRequests.delete(id)
+      return
+    }
+    const responseBody = await this.#readResponseBody(response, contentType)
+    this.#requests.push({
+      id,
+      url: request.url!,
+      method: request.method!,
+      status: response.status,
+      statusText: response.statusText,
+      type: 'fetch',
+      timestamp: request.timestamp!,
+      startTime,
+      endTime,
+      time: endTime - startTime,
+      requestHeaders: request.requestHeaders,
+      responseHeaders,
+      requestBody: request.requestBody,
+      responseBody,
+      size: this.#estimateSize(responseBody)
+    })
+    this.#pendingRequests.delete(id)
+  }
+
   #patchFetch() {
     if (typeof window.fetch !== 'function') {
       return
     }
-
     this.#originalFetch = window.fetch
     const self = this
-
     window.fetch = async function (
       input: RequestInfo | URL,
       init?: RequestInit
     ): Promise<Response> {
-      const id = self.#generateId()
-      const url =
-        typeof input === 'string'
-          ? input
-          : input instanceof URL
-            ? input.href
-            : input.url
-      const method = init?.method?.toUpperCase() || 'GET'
-
-      // Skip internal/non-HTTP requests
+      const url = self.#extractFetchUrl(input)
       if (self.#shouldIgnoreRequest(url)) {
         return self.#originalFetch!.apply(this, [input, init])
       }
-
+      const id = self.#generateId()
       const startTime = performance.now()
-      const timestamp = Date.now()
-
       const request: Partial<NetworkRequest> = {
         id,
         url,
-        method,
+        method: init?.method?.toUpperCase() || 'GET',
         type: 'fetch',
-        timestamp,
+        timestamp: Date.now(),
         startTime,
         requestHeaders: init?.headers ? self.#extractHeaders(init.headers) : {},
         requestBody: init?.body ? String(init.body) : undefined
       }
-
       self.#pendingRequests.set(id, request)
-
       try {
         const response = await self.#originalFetch!.apply(this, [input, init])
-        const endTime = performance.now()
-        const time = endTime - startTime
-
-        const responseHeaders = self.#extractHeaders(response.headers)
-        const contentType = responseHeaders['content-type']?.trim()
-
-        if (!contentType || contentType === '-') {
-          self.#pendingRequests.delete(id)
-          return response
-        }
-
-        let responseBody: string | undefined
-        try {
-          if (
-            contentType.includes('application/json') ||
-            contentType.includes('text/')
-          ) {
-            responseBody = await response.clone().text()
-          }
-        } catch {
-          // Ignore body read errors
-        }
-
-        const networkRequest: NetworkRequest = {
-          id,
-          url,
-          method,
-          status: response.status,
-          statusText: response.statusText,
-          type: 'fetch',
-          timestamp,
-          startTime,
-          endTime,
-          time,
-          requestHeaders: request.requestHeaders,
-          responseHeaders,
-          requestBody: request.requestBody,
-          responseBody,
-          size: self.#estimateSize(responseBody)
-        }
-
-        self.#requests.push(networkRequest)
-        self.#pendingRequests.delete(id)
-
+        await self.#recordFetchResponse(id, request, response, startTime)
         return response
       } catch (error) {
         self.#pendingRequests.delete(id)
@@ -164,15 +164,48 @@ export class NetworkRequestCollector implements Collector<NetworkRequest> {
     }
   }
 
-  #patchXHR() {
-    if (typeof XMLHttpRequest === 'undefined') {
+  #recordXHRResponse(
+    xhr: XMLHttpRequest,
+    requestData: Partial<NetworkRequest>,
+    startTime: number
+  ): void {
+    const endTime = performance.now()
+    const responseHeaders = this.#extractXHRHeaders(xhr)
+    const contentType = responseHeaders['content-type']?.trim()
+    if (!contentType || contentType === '-') {
       return
     }
+    let responseBody: string | undefined
+    try {
+      if (
+        contentType.includes('application/json') ||
+        contentType.includes('text/')
+      ) {
+        responseBody = xhr.responseText
+      }
+    } catch {
+      /* ignore body read errors */
+    }
+    this.#requests.push({
+      id: requestData.id!,
+      url: requestData.url!,
+      method: requestData.method!,
+      status: xhr.status,
+      statusText: xhr.statusText,
+      type: 'xhr',
+      timestamp: requestData.timestamp!,
+      startTime,
+      endTime,
+      time: endTime - startTime,
+      requestHeaders: requestData.requestHeaders,
+      responseHeaders,
+      requestBody: requestData.requestBody,
+      responseBody,
+      size: this.#estimateSize(responseBody)
+    })
+  }
 
-    const self = this
-    this.#originalXhrOpen = XMLHttpRequest.prototype.open
-    this.#originalXhrSend = XMLHttpRequest.prototype.send
-
+  #patchXHROpen(self: this): void {
     XMLHttpRequest.prototype.open = function (
       method: string,
       url: string | URL,
@@ -180,31 +213,18 @@ export class NetworkRequestCollector implements Collector<NetworkRequest> {
       username?: string | null,
       password?: string | null
     ) {
-      const id = self.#generateId()
       const urlString = typeof url === 'string' ? url : url.href
-
-      // Skip internal/non-HTTP requests
-      if (self.#shouldIgnoreRequest(urlString)) {
-        return self.#originalXhrOpen!.call(
-          this,
-          method,
-          url as string,
-          async ?? true,
-          username,
-          password
-        )
+      if (!self.#shouldIgnoreRequest(urlString)) {
+        self.#pendingXHRRequests.set(this, {
+          id: self.#generateId(),
+          url: urlString,
+          method: method.toUpperCase(),
+          type: 'xhr',
+          timestamp: Date.now(),
+          startTime: performance.now(),
+          requestHeaders: {}
+        })
       }
-
-      self.#pendingXHRRequests.set(this, {
-        id,
-        url: urlString,
-        method: method.toUpperCase(),
-        type: 'xhr',
-        timestamp: Date.now(),
-        startTime: performance.now(),
-        requestHeaders: {}
-      })
-
       return self.#originalXhrOpen!.call(
         this,
         method,
@@ -214,78 +234,37 @@ export class NetworkRequestCollector implements Collector<NetworkRequest> {
         password
       )
     }
+  }
 
+  #patchXHRSend(self: this): void {
     XMLHttpRequest.prototype.send = function (
       body?: Document | XMLHttpRequestBodyInit | null
     ) {
       const requestData = self.#pendingXHRRequests.get(this)
-
-      // If no request data, this request was filtered out - just send it
       if (!requestData) {
         return self.#originalXhrSend!.call(this, body)
       }
-
       if (body) {
         requestData.requestBody = String(body)
       }
-
       const startTime = requestData.startTime || performance.now()
-
-      const loadHandler = function (this: XMLHttpRequest) {
-        const endTime = performance.now()
-        const time = endTime - startTime
-
-        const responseHeaders = self.#extractXHRHeaders(this)
-        const contentType = responseHeaders['content-type']?.trim()
-
-        if (!contentType || contentType === '-') {
-          return
-        }
-
-        let responseBody: string | undefined
-        try {
-          if (
-            contentType.includes('application/json') ||
-            contentType.includes('text/')
-          ) {
-            responseBody = this.responseText
-          }
-        } catch {
-          // Ignore
-        }
-
-        const networkRequest: NetworkRequest = {
-          id: requestData.id!,
-          url: requestData.url!,
-          method: requestData.method!,
-          status: this.status,
-          statusText: this.statusText,
-          type: 'xhr',
-          timestamp: requestData.timestamp!,
-          startTime,
-          endTime,
-          time,
-          requestHeaders: requestData.requestHeaders,
-          responseHeaders,
-          requestBody: requestData.requestBody,
-          responseBody,
-          size: self.#estimateSize(responseBody)
-        }
-
-        self.#requests.push(networkRequest)
-      }
-
-      const errorHandler = function (this: XMLHttpRequest) {
-        // Skip errors
-      }
-
-      this.addEventListener('load', loadHandler)
-      this.addEventListener('error', errorHandler)
-
+      this.addEventListener('load', function (this: XMLHttpRequest) {
+        self.#recordXHRResponse(this, requestData, startTime)
+      })
       return self.#originalXhrSend!.call(this, body)
     }
   }
 
+  #patchXHR() {
+    if (typeof XMLHttpRequest === 'undefined') {
+      return
+    }
+    this.#originalXhrOpen = XMLHttpRequest.prototype.open
+    this.#originalXhrSend = XMLHttpRequest.prototype.send
+    this.#patchXHROpen(this)
+    this.#patchXHRSend(this)
+  }
+
   #extractHeaders(headers: HeadersInit | Headers): Record<string, string> {
     const result: Record<string, string> = {}
 

package/src/index.ts

@@ -8,6 +8,43 @@ import {
 import { log } from './logger.js'
 import { collector } from './collector.js'
 
+function serializeMutation(
+  m: MutationRecord,
+  timestamp: number
+): TraceMutation {
+  const addedNodes = Array.from(m.addedNodes).map((node) => {
+    assignRef(node as Element)
+    return parseFragment(node as Element)
+  })
+  const removedNodes = Array.from(m.removedNodes).map((node) => getRef(node))
+  const target = getRef(m.target)
+  const previousSibling = m.previousSibling ? getRef(m.previousSibling) : null
+  const nextSibling = m.nextSibling ? getRef(m.nextSibling) : null
+  let attributeValue: string | undefined
+  if (m.type === 'attributes') {
+    attributeValue = (m.target as Element).getAttribute(m.attributeName!) || ''
+  }
+  let newTextContent: string | undefined
+  if (m.type === 'characterData') {
+    newTextContent = (m.target as Element).textContent || ''
+  }
+  log(`added mutation: ${m.type}`)
+  return {
+    type: m.type,
+    attributeName: m.attributeName,
+    attributeNamespace: m.attributeNamespace,
+    oldValue: m.oldValue,
+    addedNodes,
+    target,
+    removedNodes,
+    previousSibling,
+    nextSibling,
+    timestamp,
+    attributeValue,
+    newTextContent
+  } as TraceMutation
+}
+
 try {
   log('waiting for body to render')
   await waitForBody()
@@ -32,66 +69,18 @@ try {
   const observer = new MutationObserver((ml) => {
     const timestamp = Date.now()
     const mutationList = ml.filter((m) => m.attributeName !== 'data-wdio-ref')
-
     log(`observed ${mutationList.length} mutations`)
     try {
       collector.captureMutation(
-        mutationList.map(
-          ({
-            target: t,
-            addedNodes: an,
-            removedNodes: rn,
-            type,
-            attributeName,
-            attributeNamespace,
-            previousSibling: ps,
-            nextSibling: ns,
-            oldValue
-          }) => {
-            const addedNodes = Array.from(an).map((node) => {
-              assignRef(node as Element)
-              return parseFragment(node as Element)
-            })
-
-            const removedNodes = Array.from(rn).map((node) => getRef(node))
-            const target = getRef(t)
-            const previousSibling = ps ? getRef(ps) : null
-            const nextSibling = ns ? getRef(ns) : null
-
-            let attributeValue: string | undefined
-            if (type === 'attributes') {
-              attributeValue = (t as Element).getAttribute(attributeName!) || ''
-            }
-            let newTextContent: string | undefined
-            if (type === 'characterData') {
-              newTextContent = (t as Element).textContent || ''
-            }
-
-            log(`added mutation: ${type}`)
-            return {
-              type,
-              attributeName,
-              attributeNamespace,
-              oldValue,
-              addedNodes,
-              target,
-              removedNodes,
-              previousSibling,
-              nextSibling,
-              timestamp,
-              attributeValue,
-              newTextContent
-            } as TraceMutation
-          }
-        )
+        mutationList.map((m) => serializeMutation(m, timestamp))
       )
-    } catch (err: any) {
-      collector.captureError(err)
+    } catch (err) {
+      collector.captureError(err as Error)
     }
   })
   observer.observe(document.body, config)
-} catch (err: any) {
-  collector.captureError(err)
+} catch (err) {
+  collector.captureError(err as Error)
 }
 
 log('Finished program')

package/src/logger.ts

@@ -1,6 +1,6 @@
 let logs: string[] = []
 
-export function log(...args: any[]) {
+export function log(...args: unknown[]) {
   logs.push(args.map((a) => JSON.stringify(a)).join(' '))
 }
 

package/src/utils.ts

@@ -14,7 +14,7 @@ export type vElement = DefaultTreeAdapterMap['element']
 export type vText = DefaultTreeAdapterMap['textNode']
 export type vChildNode = DefaultTreeAdapterMap['childNode']
 
-function createVNode(elem: any) {
+function createVNode(elem: { type: unknown; props: unknown }) {
   const { type, props } = elem
   return { type, props } as SimplifiedVNode
 }
@@ -22,7 +22,7 @@ function createVNode(elem: any) {
 export function parseNode(
   fragment: vFragment | vComment | vText | vChildNode
 ): SimplifiedVNode | string {
-  const props: Record<string, any> = {}
+  const props: Record<string, unknown> = {}
 
   if (fragment.nodeName === '#comment') {
     return (fragment as vComment).data
@@ -38,10 +38,10 @@ export function parseNode(
 
   try {
     return createVNode(
-      h(tagName, props, ...(childNodes || []).map((cn) => parseNode(cn))) as any
+      h(tagName, props, ...(childNodes || []).map((cn) => parseNode(cn)))
     )
-  } catch (err: any) {
-    return createVNode(h('div', { class: 'parseNode' }, err.stack))
+  } catch (err) {
+    return createVNode(h('div', { class: 'parseNode' }, (err as Error).stack))
   }
 }
 
@@ -49,8 +49,10 @@ export function parseDocument(node: HTMLElement) {
   try {
     const fragment = parse(node.outerHTML)
     return parseNode(fragment.childNodes[0])
-  } catch (err: any) {
-    return createVNode(h('div', { class: 'parseDocument' }, err.stack))
+  } catch (err) {
+    return createVNode(
+      h('div', { class: 'parseDocument' }, (err as Error).stack)
+    )
   }
 }
 
@@ -58,8 +60,10 @@ export function parseFragment(node: Element) {
   try {
     const fragment = parseFragmentImport(node.outerHTML)
     return parseNode(fragment)
-  } catch (err: any) {
-    return createVNode(h('div', { class: 'parseFragmentWrapper' }, err.stack))
+  } catch (err) {
+    return createVNode(
+      h('div', { class: 'parseFragmentWrapper' }, (err as Error).stack)
+    )
   }
 }
 

package/tests/logger.test.ts

@@ -0,0 +1,36 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { clearLogs, getLogs, log } from '../src/logger.js'
+
+describe('script/logger', () => {
+  beforeEach(() => clearLogs())
+
+  it('appends a JSON-serialized line per call', () => {
+    log('hello', 42)
+    log({ a: 1 })
+    expect(getLogs()).toEqual(['"hello" 42', '{"a":1}'])
+  })
+
+  it('joins multiple args with a single space', () => {
+    log('a', 'b', 'c')
+    expect(getLogs()).toEqual(['"a" "b" "c"'])
+  })
+
+  it('clearLogs wipes the buffer', () => {
+    log('x')
+    clearLogs()
+    expect(getLogs()).toEqual([])
+  })
+
+  it('getLogs returns the live buffer (callers must not mutate)', () => {
+    log('one')
+    const snap = getLogs()
+    log('two')
+    expect(snap).toEqual(['"one"', '"two"'])
+  })
+
+  it('renders undefined args as an empty slot (JSON.stringify(undefined) → undefined)', () => {
+    log('a', undefined, 'b')
+    // JSON.stringify(undefined) returns undefined, and Array#join coerces it to ''
+    expect(getLogs()).toEqual(['"a"  "b"'])
+  })
+})