@wdio/devtools-script 0.0.0

package/index.html

@@ -0,0 +1 @@
+<script type="module" src="./src/index.ts"></script>

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@wdio/devtools-script",
+  "version": "0.0.0",
+  "description": "Script to be injected into a page to trace the page",
+  "author": "Christian Bromann <mail@bromann.dev>",
+  "type": "module",
+  "types": "./types.d.ts",
+  "exports": "./dist/script.js",
+  "typeScriptVersion": "^5.0.0",
+  "dependencies": {
+    "htm": "^3.1.1",
+    "parse5": "^8.0.0",
+    "preact": "^10.27.1",
+    "vite-plugin-singlefile": "^2.3.0"
+  },
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test": "eslint ."
+  }
+}

package/src/collector.ts

@@ -0,0 +1,47 @@
+import { getLogs, clearLogs } from './logger.js'
+import { ConsoleLogCollector } from './collectors/consoleLogs.js'
+
+class DataCollector {
+  #metadata = {
+    url: window.location.href,
+    viewport: window.visualViewport!
+  }
+  #errors: string[] = []
+  #mutations: TraceMutation[] = []
+  #consoleLogs = new ConsoleLogCollector()
+
+  captureError (err: Error) {
+    const error = err.stack || err.message
+    this.#errors.push(error)
+  }
+
+  captureMutation (mutations: TraceMutation[]) {
+    this.#mutations.push(...mutations)
+  }
+
+  reset () {
+    this.#errors = []
+    this.#mutations = []
+    this.#consoleLogs.clear()
+    clearLogs()
+  }
+
+  getMetadata () {
+    return this.#metadata
+  }
+
+  getTraceData () {
+    const data = {
+      errors: this.#errors,
+      mutations: this.#mutations,
+      consoleLogs: this.#consoleLogs.getArtifacts(),
+      traceLogs: getLogs(),
+      metadata: this.getMetadata(),
+    } as const
+    this.reset()
+    return data
+  }
+}
+
+export type DataCollectorType = DataCollector
+export const collector = window.wdioTraceCollector = new DataCollector()

package/src/collectors/collector.ts

@@ -0,0 +1,4 @@
+export abstract class Collector<Artifact> {
+  abstract getArtifacts(): Artifact[]
+  abstract clear(): void
+}

package/src/collectors/consoleLogs.ts

@@ -0,0 +1,35 @@
+import type { Collector } from './collector.js'
+
+const consoleMethods = ['log', 'info', 'warn', 'error'] as const
+export interface ConsoleLogs {
+  type: 'log' | 'info' | 'warn' | 'error'
+  args: any[]
+  timestamp: number
+}
+
+export class ConsoleLogCollector implements Collector<ConsoleLogs> {
+  #logs: ConsoleLogs[] = []
+  constructor () {
+    consoleMethods.forEach(this.#consolePatch.bind(this))
+  }
+
+  getArtifacts () {
+    return this.#logs
+  }
+
+  clear(): void {
+    this.#logs = []
+  }
+
+  #consolePatch (type: (typeof consoleMethods)[number]) {
+    const orig = console[type]
+    console[type] = (...args) => {
+      this.#logs.push({
+        timestamp: Date.now(),
+        type,
+        args
+      })
+      return orig(...args)
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,66 @@
+import { waitForBody, parseFragment, parseDocument, getRef, assignRef } from './utils.js'
+import { log } from './logger.js'
+import { collector } from './collector.js'
+
+try {
+  log('waiting for body to render')
+  await waitForBody()
+  log('body rendered')
+
+  assignRef(document.documentElement)
+  log('applied wdio ref ids')
+
+  const timestamp = Date.now()
+  collector.captureMutation([{
+    type: 'childList',
+    url: document.location.href,
+    timestamp,
+    addedNodes: [parseDocument(document.documentElement)],
+    removedNodes: []
+  }])
+  log('added initial page structure')
+
+  const config = { attributes: true, childList: true, subtree: true }
+  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
+      }))
+    } catch (err: any) {
+      collector.captureError(err)
+    }
+  })
+  observer.observe(document.body, config)
+} catch (err: any) {
+  collector.captureError(err)
+}
+
+log('Finished program')

package/src/logger.ts

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

package/src/utils.ts

@@ -0,0 +1,110 @@
+import { parse, parseFragment as parseFragmentImport, type DefaultTreeAdapterMap } from 'parse5'
+import { h } from 'htm/preact'
+import type { SimplifiedVNode } from '../types.ts'
+
+import { log } from './logger.js'
+
+export type vFragment = DefaultTreeAdapterMap['documentFragment']
+export type vComment = DefaultTreeAdapterMap['commentNode']
+export type vElement = DefaultTreeAdapterMap['element']
+export type vText = DefaultTreeAdapterMap['textNode']
+export type vChildNode = DefaultTreeAdapterMap['childNode']
+
+function createVNode (elem: any) {
+  const { type, props } = elem
+  return { type, props } as SimplifiedVNode
+}
+
+export function parseNode (fragment: vFragment | vComment | vText | vChildNode): SimplifiedVNode | string {
+  const props: Record<string, any> = {}
+
+  if (fragment.nodeName === '#comment') {
+    return (fragment as vComment).data
+  }
+  if (fragment.nodeName === '#text') {
+    return (fragment as vText).value
+  }
+
+  const { childNodes, attrs, tagName } = fragment as vElement
+  for (const p of (attrs || [])) {
+      props[p.name] = p.value
+  }
+
+  try {
+    return createVNode(h(tagName, props, ...(childNodes || []).map((cn) => parseNode(cn))) as any)
+  } catch (err: any) {
+    return createVNode(h('div', { class: 'parseNode' }, err.stack))
+  }
+}
+
+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))
+  }
+}
+
+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))
+  }
+}
+
+export async function waitForBody () {
+  let raf = 0
+  let resolve: () => void
+  let reject: (err: Error) => void
+  const waitForPromise = new Promise<void>((res, rej) => {
+    resolve = res
+    reject = rej
+  })
+
+  const waitForTimeout = setTimeout(
+    () => reject(new Error('Timeout waiting for body')),
+    10000
+  )
+
+  function run () {
+    if (!document.body) {
+      return
+    }
+
+    resolve()
+  }
+
+  raf = requestAnimationFrame(run)
+  await waitForPromise
+  cancelAnimationFrame(raf)
+  clearTimeout(waitForTimeout)
+}
+
+let refId = 0
+ /**
+  * assign a uid to each element so we can reference it later in the vdom
+  */
+export function assignRef (elem: Element) {
+  if (typeof elem.querySelectorAll !== 'function') {
+    log('assignRef: elem has no querySelectorAll', elem.nodeType || elem.nodeName || elem.textContent || Object.keys(elem))
+    return
+  }
+
+  if (!elem.hasAttribute('data-wdio-ref')) {
+    elem.setAttribute('data-wdio-ref', `${++refId}`)
+  }
+
+  Array.from(elem.querySelectorAll('*')).forEach(
+    (el) => { el.setAttribute('data-wdio-ref', `${++refId}`) })
+}
+
+export function getRef (elem: Node) {
+  if (!elem || !(elem as Element).getAttribute) {
+    return null
+  }
+  return (elem as Element).getAttribute('data-wdio-ref')
+}
+

package/tests/__snapshots__/preload.test.ts.snap

@@ -0,0 +1,190 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`should be able serialize DOM 1`] = `
+[
+  {
+    "addedNodes": [
+      {
+        "props": {
+          "children": [
+            {
+              "props": {
+                "children": [
+                  "
+    ",
+                  {
+                    "props": {
+                      "charset": "UTF-8",
+                      "data-wdio-ref": "3",
+                    },
+                    "type": "meta",
+                  },
+                  "
+    ",
+                  {
+                    "props": {
+                      "data-wdio-ref": "4",
+                      "href": "/favicon.svg",
+                      "rel": "icon",
+                      "type": "image/svg+xml",
+                    },
+                    "type": "link",
+                  },
+                  "
+    ",
+                  {
+                    "props": {
+                      "content": "width=device-width, initial-scale=1.0",
+                      "data-wdio-ref": "5",
+                      "name": "viewport",
+                    },
+                    "type": "meta",
+                  },
+                  "
+    ",
+                  {
+                    "props": {
+                      "children": "Vitest Browser Runner",
+                      "data-wdio-ref": "6",
+                    },
+                    "type": "title",
+                  },
+                  "
+    ",
+                  {
+                    "props": {
+                      "children": "
+      html {
+        overflow: hidden;
+        padding: 0;
+        margin: 0;
+      }
+      body {
+        padding: 0;
+        margin: 0;
+      }
+      #vitest-ui {
+        width: 100vw;
+        height: 100vh;
+        border: none;
+      }
+    ",
+                      "data-wdio-ref": "7",
+                    },
+                    "type": "style",
+                  },
+                  "
+    ",
+                  {
+                    "props": {
+                      "crossorigin": "",
+                      "data-wdio-ref": "8",
+                      "src": "/__vitest_browser__/index-7107c1a2.js",
+                      "type": "module",
+                    },
+                    "type": "script",
+                  },
+                  "
+  ",
+                ],
+                "data-wdio-ref": "2",
+              },
+              "type": "head",
+            },
+            "
+  ",
+            {
+              "props": {
+                "children": [
+                  "
+    ",
+                  {
+                    "props": {
+                      "data-wdio-ref": "10",
+                      "id": "vitest-ui",
+                      "src": "/__vitest__/",
+                    },
+                    "type": "iframe",
+                  },
+                  "
+    ",
+                  {
+                    "props": {
+                      "children": "
+      const moduleCache = new Map()
+
+      // this method receives a module object or \\"import\\" promise that it resolves and keeps track of
+      // and returns a hijacked module object that can be used to mock module exports
+      function wrapModule(module) {
+        if (module instanceof Promise) {
+          moduleCache.set(module, { promise: module, evaluated: false })
+          return module
+            // TODO: add a test
+            .then(m => '__vi_inject__' in m ? m.__vi_inject__ : m)
+            .finally(() => moduleCache.delete(module))
+        }
+        return '__vi_inject__' in module ? module.__vi_inject__ : module
+      }
+
+      function exportAll(exports, sourceModule) {
+        // #1120 when a module exports itself it causes
+        // call stack error
+        if (exports === sourceModule)
+          return
+
+        if (Object(sourceModule) !== sourceModule || Array.isArray(sourceModule))
+          return
+
+        for (const key in sourceModule) {
+          if (key !== 'default') {
+            try {
+              Object.defineProperty(exports, key, {
+                enumerable: true,
+                configurable: true,
+                get: () => sourceModule[key],
+              })
+            }
+            catch (_err) { }
+          }
+        }
+      }
+
+      window.__vi_export_all__ = exportAll
+
+      // TODO: allow easier rewriting of import.meta.env
+      window.__vi_import_meta__ = {
+        env: {},
+        url: location.href,
+      }
+
+      window.__vi_module_cache__ = moduleCache
+      window.__vi_wrap_module__ = wrapModule
+    ",
+                      "data-wdio-ref": "11",
+                    },
+                    "type": "script",
+                  },
+                  "
+    
+  
+
+",
+                ],
+                "data-wdio-ref": "9",
+              },
+              "type": "body",
+            },
+          ],
+          "data-wdio-ref": "1",
+          "lang": "en",
+        },
+        "type": "html",
+      },
+    ],
+    "removedNodes": [],
+    "type": "childList",
+  },
+]
+`;
+
+exports[`should be able to properly serialize changes 1`] = `"<div id=\\"change\\" data-wdio-ref=\\"12\\">some <i data-wdio-ref=\\"13\\">real</i> change</div>"`;

package/tests/preload.test.ts

@@ -0,0 +1,47 @@
+// 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()
+// })

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "moduleResolution": "Node16",
+    "module": "NodeNext"
+  }
+}

package/types.d.ts

@@ -0,0 +1,40 @@
+import type { DataCollectorType } from './src/collector.ts'
+import type { ConsoleLog as ConsoleLogImport } from './src/collectors/consoleLogs.ts'
+
+export interface TraceMetadata {
+  url: string
+  viewport: VisualViewport
+}
+
+export interface SimplifiedVNode {
+  type: string
+  props: Record<string, string> & { children?: SimplifiedVNode | SimplifiedVNode[] }
+}
+
+declare global {
+  type ConsoleLogs = ConsoleLogImport
+
+  interface Element {
+    'wdio-ref': string
+  }
+
+  interface Window {
+    wdioTraceCollector: DataCollectorType
+  }
+
+  interface TraceMutation {
+    type: MutationRecordType
+    attributeName?: string
+    attributeNamespace?: string
+    attributeValue?: string
+    newTextContent?: string
+    oldValue?: string
+    addedNodes: (string | SimplifiedVNode)[]
+    target?: string
+    removedNodes: string[]
+    previousSibling?: string
+    nextSibling?: string
+    timestamp: number
+    url?: string
+  }
+}

package/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import { viteSingleFile } from 'vite-plugin-singlefile'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [viteSingleFile()],
+  build: {
+    lib: {
+      entry: 'src/index.ts',
+      formats: ['es'],
+      fileName: 'script'
+    },
+    target: 'esnext'
+  }
+})