@wdio/devtools-script 1.0.0 → 1.2.0

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "@wdio/devtools-script",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Script to be injected into a page to trace the page",
   "author": "Christian Bromann <mail@bromann.dev>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/webdriverio/devtools.git",
+    "directory": "packages/devtools-script"
+  },
   "type": "module",
   "types": "./types.d.ts",
   "exports": "./dist/script.js",
@@ -18,6 +23,6 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "test": "eslint ."
+    "lint": "eslint ."
   }
 }

package/src/collector.ts

@@ -1,5 +1,6 @@
 import { getLogs, clearLogs } from './logger.js'
 import { ConsoleLogCollector } from './collectors/consoleLogs.js'
+import { NetworkRequestCollector } from './collectors/networkRequests.js'
 
 class DataCollector {
   #metadata = {
@@ -9,6 +10,7 @@ class DataCollector {
   #errors: string[] = []
   #mutations: TraceMutation[] = []
   #consoleLogs = new ConsoleLogCollector()
+  #networkRequests = new NetworkRequestCollector()
 
   captureError(err: Error) {
     const error = err.stack || err.message
@@ -23,6 +25,7 @@ class DataCollector {
     this.#errors = []
     this.#mutations = []
     this.#consoleLogs.clear()
+    this.#networkRequests.clear()
     clearLogs()
   }
 
@@ -35,6 +38,7 @@ class DataCollector {
       errors: this.#errors,
       mutations: this.#mutations,
       consoleLogs: this.#consoleLogs.getArtifacts(),
+      networkRequests: this.#networkRequests.getArtifacts(),
       traceLogs: getLogs(),
       metadata: this.getMetadata()
     } as const

package/src/collectors/consoleLogs.ts

@@ -5,6 +5,7 @@ export interface ConsoleLogs {
   type: 'log' | 'info' | 'warn' | 'error'
   args: any[]
   timestamp: number
+  source?: 'browser' | 'test' | 'terminal'
 }
 
 export class ConsoleLogCollector implements Collector<ConsoleLogs> {

package/src/collectors/networkRequests.ts

@@ -0,0 +1,335 @@
+import type { Collector } from './collector.js'
+import type { NetworkRequest } from '../../types.js'
+
+export class NetworkRequestCollector implements Collector<NetworkRequest> {
+  #requests: NetworkRequest[] = []
+  #pendingRequests = new Map<string, Partial<NetworkRequest>>()
+  #originalFetch?: typeof fetch
+  #originalXhrOpen?: typeof XMLHttpRequest.prototype.open
+  #originalXhrSend?: typeof XMLHttpRequest.prototype.send
+
+  constructor() {
+    this.#patchFetch()
+    this.#patchXHR()
+  }
+
+  getArtifacts(): NetworkRequest[] {
+    return this.#requests
+  }
+
+  clear(): void {
+    this.#requests = []
+    this.#pendingRequests.clear()
+  }
+
+  #generateId(): string {
+    return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+  }
+
+  #shouldIgnoreRequest(url: string): boolean {
+    // Filter out internal URLs, data URLs, blob URLs, chrome extensions, etc.
+    if (!url) {
+      return true
+    }
+
+    const urlLower = url.toLowerCase()
+
+    // Ignore non-HTTP protocols
+    if (urlLower.startsWith('data:')) {
+      return true
+    }
+    if (urlLower.startsWith('blob:')) {
+      return true
+    }
+    if (urlLower.startsWith('chrome:')) {
+      return true
+    }
+    if (urlLower.startsWith('chrome-extension:')) {
+      return true
+    }
+    if (urlLower.startsWith('about:')) {
+      return true
+    }
+
+    // Ignore WebSocket connections
+    if (urlLower.startsWith('ws:') || urlLower.startsWith('wss:')) {
+      return true
+    }
+
+    // Ignore browser internal requests
+    if (urlLower.includes('/.well-known/')) {
+      return true
+    }
+    if (urlLower.includes('/favicon.ico')) {
+      return true
+    }
+
+    return false
+  }
+
+  #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
+      if (self.#shouldIgnoreRequest(url)) {
+        return self.#originalFetch!.apply(this, [input, init])
+      }
+
+      const startTime = performance.now()
+      const timestamp = Date.now()
+
+      const request: Partial<NetworkRequest> = {
+        id,
+        url,
+        method,
+        type: 'fetch',
+        timestamp,
+        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)
+
+        return response
+      } catch (error) {
+        self.#pendingRequests.delete(id)
+        throw error
+      }
+    }
+  }
+
+  #patchXHR() {
+    if (typeof XMLHttpRequest === 'undefined') {
+      return
+    }
+
+    const self = this
+    this.#originalXhrOpen = XMLHttpRequest.prototype.open
+    this.#originalXhrSend = XMLHttpRequest.prototype.send
+
+    XMLHttpRequest.prototype.open = function (
+      method: string,
+      url: string | URL,
+      async?: boolean,
+      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
+        )
+      }
+
+      ;(this as any)._networkRequestId = id
+      ;(this as any)._networkRequestData = {
+        id,
+        url: urlString,
+        method: method.toUpperCase(),
+        type: 'xhr',
+        timestamp: Date.now(),
+        startTime: performance.now(),
+        requestHeaders: {}
+      }
+
+      return self.#originalXhrOpen!.call(
+        this,
+        method,
+        url as string,
+        async ?? true,
+        username,
+        password
+      )
+    }
+
+    XMLHttpRequest.prototype.send = function (
+      body?: Document | XMLHttpRequestBodyInit | null
+    ) {
+      const requestData = (this as any)
+        ._networkRequestData as Partial<NetworkRequest>
+
+      // 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)
+
+      return self.#originalXhrSend!.call(this, body)
+    }
+  }
+
+  #extractHeaders(headers: HeadersInit | Headers): Record<string, string> {
+    const result: Record<string, string> = {}
+
+    if (headers instanceof Headers) {
+      headers.forEach((value, key) => {
+        result[key.toLowerCase()] = value
+      })
+    } else if (Array.isArray(headers)) {
+      headers.forEach(([key, value]) => {
+        result[key.toLowerCase()] = value
+      })
+    } else if (headers) {
+      Object.entries(headers).forEach(([key, value]) => {
+        result[key.toLowerCase()] = value
+      })
+    }
+
+    return result
+  }
+
+  #extractXHRHeaders(xhr: XMLHttpRequest): Record<string, string> {
+    const result: Record<string, string> = {}
+    const headersString = xhr.getAllResponseHeaders()
+
+    if (headersString) {
+      const headers = headersString.trim().split(/[\r\n]+/)
+      headers.forEach((line) => {
+        const parts = line.split(': ')
+        const key = parts.shift()
+        const value = parts.join(': ')
+        if (key) {
+          result[key.toLowerCase()] = value
+        }
+      })
+    }
+
+    return result
+  }
+
+  #estimateSize(body?: string): number {
+    if (!body) {
+      return 0
+    }
+    return new Blob([body]).size
+  }
+}

package/tests/networkRequests.test.ts

@@ -0,0 +1,40 @@
+/** @vitest-environment happy-dom */
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { NetworkRequestCollector } from '../src/collectors/networkRequests.js'
+
+describe('NetworkRequestCollector', () => {
+  let collector: NetworkRequestCollector
+
+  beforeEach(() => {
+    collector = new NetworkRequestCollector()
+  })
+
+  afterEach(() => {
+    collector.clear()
+  })
+
+  it('should initialize, clear, and return artifacts correctly', () => {
+    // Test initialization
+    const artifacts = collector.getArtifacts()
+    expect(artifacts).toEqual([])
+    expect(Array.isArray(artifacts)).toBe(true)
+    expect(artifacts).toHaveLength(0)
+
+    // Test clear functionality
+    collector.clear()
+    const clearedArtifacts = collector.getArtifacts()
+    expect(clearedArtifacts).toEqual([])
+    expect(clearedArtifacts).toHaveLength(0)
+
+    // Test multiple clears are safe
+    collector.clear()
+    expect(collector.getArtifacts()).toEqual([])
+
+    // Test reference consistency
+    const artifacts1 = collector.getArtifacts()
+    const artifacts2 = collector.getArtifacts()
+    expect(artifacts1).toBe(artifacts2)
+    expect(artifacts1).toBeDefined()
+    expect(artifacts1).not.toBeNull()
+  })
+})

package/tests/utils.test.ts

@@ -0,0 +1,140 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import { describe, it, expect, beforeEach } from 'vitest'
+import {
+  waitForBody,
+  assignRef,
+  getRef,
+  parseFragment,
+  parseDocument
+} from '../src/utils.js'
+
+describe('DOM mutation capture utilities', () => {
+  beforeEach(() => {
+    if (!document.body) {
+      const body = document.createElement('body')
+      document.documentElement.appendChild(body)
+    }
+    document.body.innerHTML = ''
+  })
+
+  it('should wait for body to exist before capturing mutations', async () => {
+    await expect(waitForBody()).resolves.toBeUndefined()
+  })
+
+  it('should assign trackable refs to DOM elements for mutation identification', () => {
+    const parent = document.createElement('div')
+    const child1 = document.createElement('span')
+    const child2 = document.createElement('p')
+    parent.appendChild(child1)
+    parent.appendChild(child2)
+
+    assignRef(parent)
+
+    const parentRef = getRef(parent)
+    const child1Ref = getRef(child1)
+    const child2Ref = getRef(child2)
+
+    // Each element should get unique ref
+    expect(parentRef).toBeTruthy()
+    expect(child1Ref).toBeTruthy()
+    expect(child2Ref).toBeTruthy()
+    expect(parentRef).not.toBe(child1Ref)
+    expect(child1Ref).not.toBe(child2Ref)
+  })
+
+  it('should maintain stable refs across multiple assignments', () => {
+    const div = document.createElement('div')
+    assignRef(div)
+    const firstRef = getRef(div)
+
+    assignRef(div)
+    const secondRef = getRef(div)
+
+    expect(firstRef).toBe(secondRef)
+  })
+
+  it('should serialize DOM elements to transmittable VNode structure', () => {
+    const button = document.createElement('button')
+    button.id = 'submit'
+    button.className = 'btn-primary'
+    button.textContent = 'Submit'
+
+    const vnode = parseFragment(button)
+
+    // VNode should be serializable (has type and props)
+    expect(vnode).toHaveProperty('type')
+    expect(vnode).toHaveProperty('props')
+    expect(JSON.stringify(vnode)).toBeTruthy()
+  })
+
+  it('should serialize complete document hierarchy for initial capture', () => {
+    const div = document.createElement('div')
+    div.innerHTML = '<header><h1>App</h1></header><main><p>Content</p></main>'
+
+    const vnode = parseDocument(div)
+
+    // Document parsing wraps in html element
+    expect(vnode).toHaveProperty('type')
+    expect(vnode).toHaveProperty('props')
+    expect(JSON.stringify(vnode)).toBeTruthy()
+  })
+
+  it('should handle parsing errors without breaking mutation capture', () => {
+    const fragmentResult = parseFragment(null as any)
+    const documentResult = parseDocument(null as any)
+
+    // Should return error containers instead of throwing
+    expect(typeof fragmentResult).toBe('object')
+    expect(typeof documentResult).toBe('object')
+
+    if (typeof fragmentResult === 'object') {
+      expect(fragmentResult.type).toBe('div')
+      expect(fragmentResult.props.class).toBe('parseFragmentWrapper')
+    }
+
+    if (typeof documentResult === 'object') {
+      expect(documentResult.type).toBe('div')
+      expect(documentResult.props.class).toBe('parseDocument')
+    }
+  })
+
+  it('should support complete mutation tracking workflow: assign ref → serialize → transmit', () => {
+    // Simulate what happens in index.ts when MutationObserver detects changes
+    const addedNode = document.createElement('article')
+    addedNode.innerHTML = '<h2>New Section</h2><p>New content</p>'
+
+    // Step 1: Assign ref so we can track this node
+    assignRef(addedNode)
+    const nodeRef = getRef(addedNode)
+
+    // Step 2: Serialize for transmission to backend
+    const serialized = parseFragment(addedNode)
+
+    // Step 3: Verify we can identify and serialize the mutation
+    expect(nodeRef).toBeTruthy()
+    expect(serialized).toHaveProperty('type')
+    expect(serialized).toHaveProperty('props')
+
+    // The serialized VNode should be transmittable as JSON
+    const json = JSON.stringify(serialized)
+    expect(json).toBeTruthy()
+    expect(() => JSON.parse(json)).not.toThrow()
+  })
+
+  it('should support mutation removal tracking via refs', () => {
+    const target = document.createElement('div')
+    const child = document.createElement('span')
+    target.appendChild(child)
+
+    assignRef(target)
+
+    // When mutation observer detects removals, we can get refs
+    const targetRef = getRef(target)
+    const childRef = getRef(child)
+
+    expect(targetRef).not.toBeNull()
+    expect(childRef).not.toBeNull()
+  })
+})

package/types.d.ts

@@ -1,6 +1,26 @@
 import type { DataCollectorType } from './src/collector.ts'
 import type { ConsoleLog as ConsoleLogImport } from './src/collectors/consoleLogs.ts'
 
+export interface NetworkRequest {
+  id: string
+  url: string
+  method: string
+  status?: number
+  statusText?: string
+  type: string
+  initiator?: string
+  size?: number
+  time?: number
+  requestHeaders?: Record<string, string>
+  responseHeaders?: Record<string, string>
+  requestBody?: string
+  responseBody?: string
+  timestamp: number
+  startTime: number
+  endTime?: number
+  error?: string
+}
+
 export interface TraceMetadata {
   url: string
   viewport: VisualViewport
@@ -15,6 +35,7 @@ export interface SimplifiedVNode {
 
 declare global {
   type ConsoleLogs = ConsoleLogImport
+  type NetworkRequest = NetworkRequest
 
   interface Element {
     'wdio-ref': string

package/tests/preload.test.ts

@@ -1,47 +0,0 @@
-// import { test, expect } from 'vitest'
-// import { h, render } from 'preact'
-// import type { VNode as PreactVNode } from 'preact'
-
-// function transform (node: SimplifiedVNode | string): PreactVNode<{}> | string {
-//   if (typeof node !== 'object') {
-//     return node
-//   }
-
-//   const { children, ...props } = node.props
-//   const childrenRequired = children || []
-//   const c = Array.isArray(childrenRequired) ? childrenRequired : [childrenRequired]
-//   return h(node.type as string, props, ...c.map(transform)) as PreactVNode<{}>
-// }
-
-// test('should be able serialize DOM', async () => {
-//   await import('../src/index.ts')
-//   expect(window.wdioCaptureErrors).toEqual([])
-//   expect(window.wdioDOMChanges.length).toBe(1)
-//   expect(window.wdioDOMChanges).toMatchSnapshot()
-// })
-
-// test('should be able to parse serialized DOM and render it', () => {
-//   const stage = document.createDocumentFragment()
-//   const [initial] = window.wdioDOMChanges
-//   render(transform(initial.addedNodes[0]), stage)
-//   expect(document.documentElement.outerHTML)
-//     .toBe((stage.childNodes[0] as HTMLElement).outerHTML)
-// })
-
-// test('should be able to properly serialize changes', async () => {
-//   const change = document.createElement('div')
-//   change.setAttribute('id', 'change')
-//   change.appendChild(document.createTextNode('some '))
-//   const bold = document.createElement('i')
-//   bold.appendChild(document.createTextNode('real'))
-//   change.appendChild(bold)
-//   change.appendChild(document.createTextNode(' change'))
-//   document.body.appendChild(change)
-
-//   await new Promise((resolve) => setTimeout(resolve, 10))
-//   expect(window.wdioDOMChanges.length).toBe(2)
-//   const [, vChange] = window.wdioDOMChanges
-//   const stage = document.createDocumentFragment()
-//   render(transform((vChange.addedNodes[0] as SimplifiedVNode).props.children as SimplifiedVNode), stage)
-//   expect((stage.childNodes[0] as HTMLElement).outerHTML).toMatchSnapshot()
-// })