@wdio/devtools-script 0.0.0 → 1.1.0

package/dist/script.js

@@ -5702,7 +5702,9 @@ function Ce(e) {
   for (const d of s || [])
     t[d.name] = d.value;
   try {
-    return se(V(c, t, ...(a || []).map((d) => Ce(d))));
+    return se(
+      V(c, t, ...(a || []).map((d) => Ce(d)))
+    );
   } catch (d) {
     return se(V("div", { class: "parseNode" }, d.stack));
   }
@@ -5739,14 +5741,15 @@ async function is() {
 let ye = 0;
 function we(e) {
   if (typeof e.querySelectorAll != "function") {
-    x("assignRef: elem has no querySelectorAll", e.nodeType || e.nodeName || e.textContent || Object.keys(e));
+    x(
+      "assignRef: elem has no querySelectorAll",
+      e.nodeType || e.nodeName || e.textContent || Object.keys(e)
+    );
     return;
   }
-  e.hasAttribute("data-wdio-ref") || e.setAttribute("data-wdio-ref", `${++ye}`), Array.from(e.querySelectorAll("*")).forEach(
-    (t) => {
-      t.setAttribute("data-wdio-ref", `${++ye}`);
-    }
-  );
+  e.hasAttribute("data-wdio-ref") || e.setAttribute("data-wdio-ref", `${++ye}`), Array.from(e.querySelectorAll("*")).forEach((t) => {
+    t.setAttribute("data-wdio-ref", `${++ye}`);
+  });
 }
 function Z(e) {
   return !e || !e.getAttribute ? null : e.getAttribute("data-wdio-ref");
@@ -5808,38 +5811,54 @@ const $ = window.wdioTraceCollector = new os();
 try {
   x("waiting for body to render"), await is(), x("body rendered"), we(document.documentElement), x("applied wdio ref ids");
   const e = Date.now();
-  $.captureMutation([{
-    type: "childList",
-    url: document.location.href,
-    timestamp: e,
-    addedNodes: [ss(document.documentElement)],
-    removedNodes: []
-  }]), x("added initial page structure");
+  $.captureMutation([
+    {
+      type: "childList",
+      url: document.location.href,
+      timestamp: e,
+      addedNodes: [ss(document.documentElement)],
+      removedNodes: []
+    }
+  ]), x("added initial page structure");
   const t = { attributes: !0, childList: !0, subtree: !0 };
   new MutationObserver((s) => {
     const c = Date.now(), d = s.filter((h) => h.attributeName !== "data-wdio-ref");
     x(`observed ${d.length} mutations`);
     try {
-      $.captureMutation(d.map(({ target: h, addedNodes: f, removedNodes: _, type: A, attributeName: O, attributeNamespace: U, previousSibling: R, nextSibling: Oe, oldValue: mt }) => {
-        const bt = Array.from(f).map((j) => (we(j), rs(j))), At = Array.from(_).map((j) => Z(j)), Nt = Z(h), It = R ? Z(R) : null, Ct = Oe ? Z(Oe) : null;
-        let Se;
-        A === "attributes" && (Se = h.getAttribute(O) || "");
-        let Le;
-        return A === "characterData" && (Le = h.textContent || ""), x(`added mutation: ${A}`), {
-          type: A,
-          attributeName: O,
-          attributeNamespace: U,
-          oldValue: mt,
-          addedNodes: bt,
-          target: Nt,
-          removedNodes: At,
-          previousSibling: It,
-          nextSibling: Ct,
-          timestamp: c,
-          attributeValue: Se,
-          newTextContent: Le
-        };
-      }));
+      $.captureMutation(
+        d.map(
+          ({
+            target: h,
+            addedNodes: f,
+            removedNodes: _,
+            type: A,
+            attributeName: O,
+            attributeNamespace: U,
+            previousSibling: R,
+            nextSibling: Oe,
+            oldValue: mt
+          }) => {
+            const bt = Array.from(f).map((j) => (we(j), rs(j))), At = Array.from(_).map((j) => Z(j)), Nt = Z(h), It = R ? Z(R) : null, Ct = Oe ? Z(Oe) : null;
+            let Se;
+            A === "attributes" && (Se = h.getAttribute(O) || "");
+            let Le;
+            return A === "characterData" && (Le = h.textContent || ""), x(`added mutation: ${A}`), {
+              type: A,
+              attributeName: O,
+              attributeNamespace: U,
+              oldValue: mt,
+              addedNodes: bt,
+              target: Nt,
+              removedNodes: At,
+              previousSibling: It,
+              nextSibling: Ct,
+              timestamp: c,
+              attributeValue: Se,
+              newTextContent: Le
+            };
+          }
+        )
+      );
     } catch (h) {
       $.captureError(h);
     }

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "@wdio/devtools-script",
-  "version": "0.0.0",
+  "version": "1.1.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",

package/src/collector.ts

@@ -10,33 +10,33 @@ class DataCollector {
   #mutations: TraceMutation[] = []
   #consoleLogs = new ConsoleLogCollector()
 
-  captureError (err: Error) {
+  captureError(err: Error) {
     const error = err.stack || err.message
     this.#errors.push(error)
   }
 
-  captureMutation (mutations: TraceMutation[]) {
+  captureMutation(mutations: TraceMutation[]) {
     this.#mutations.push(...mutations)
   }
 
-  reset () {
+  reset() {
     this.#errors = []
     this.#mutations = []
     this.#consoleLogs.clear()
     clearLogs()
   }
 
-  getMetadata () {
+  getMetadata() {
     return this.#metadata
   }
 
-  getTraceData () {
+  getTraceData() {
     const data = {
       errors: this.#errors,
       mutations: this.#mutations,
       consoleLogs: this.#consoleLogs.getArtifacts(),
       traceLogs: getLogs(),
-      metadata: this.getMetadata(),
+      metadata: this.getMetadata()
     } as const
     this.reset()
     return data
@@ -44,4 +44,4 @@ class DataCollector {
 }
 
 export type DataCollectorType = DataCollector
-export const collector = window.wdioTraceCollector = new DataCollector()
+export const collector = (window.wdioTraceCollector = new DataCollector())

package/src/collectors/consoleLogs.ts

@@ -9,11 +9,11 @@ export interface ConsoleLogs {
 
 export class ConsoleLogCollector implements Collector<ConsoleLogs> {
   #logs: ConsoleLogs[] = []
-  constructor () {
+  constructor() {
     consoleMethods.forEach(this.#consolePatch.bind(this))
   }
 
-  getArtifacts () {
+  getArtifacts() {
     return this.#logs
   }
 
@@ -21,7 +21,7 @@ export class ConsoleLogCollector implements Collector<ConsoleLogs> {
     this.#logs = []
   }
 
-  #consolePatch (type: (typeof consoleMethods)[number]) {
+  #consolePatch(type: (typeof consoleMethods)[number]) {
     const orig = console[type]
     console[type] = (...args) => {
       this.#logs.push({

package/src/index.ts

@@ -1,4 +1,10 @@
-import { waitForBody, parseFragment, parseDocument, getRef, assignRef } from './utils.js'
+import {
+  waitForBody,
+  parseFragment,
+  parseDocument,
+  getRef,
+  assignRef
+} from './utils.js'
 import { log } from './logger.js'
 import { collector } from './collector.js'
 
@@ -11,13 +17,15 @@ try {
   log('applied wdio ref ids')
 
   const timestamp = Date.now()
-  collector.captureMutation([{
-    type: 'childList',
-    url: document.location.href,
-    timestamp,
-    addedNodes: [parseDocument(document.documentElement)],
-    removedNodes: []
-  }])
+  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 }
@@ -27,33 +35,56 @@ try {
 
     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)
-        })
+      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
+            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 || ''
-        }
+            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
-      }))
+            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)
     }

package/src/logger.ts

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

package/src/utils.ts

@@ -1,4 +1,8 @@
-import { parse, parseFragment as parseFragmentImport, type DefaultTreeAdapterMap } from 'parse5'
+import {
+  parse,
+  parseFragment as parseFragmentImport,
+  type DefaultTreeAdapterMap
+} from 'parse5'
 import { h } from 'htm/preact'
 import type { SimplifiedVNode } from '../types.ts'
 
@@ -10,12 +14,14 @@ export type vElement = DefaultTreeAdapterMap['element']
 export type vText = DefaultTreeAdapterMap['textNode']
 export type vChildNode = DefaultTreeAdapterMap['childNode']
 
-function createVNode (elem: any) {
+function createVNode(elem: any) {
   const { type, props } = elem
   return { type, props } as SimplifiedVNode
 }
 
-export function parseNode (fragment: vFragment | vComment | vText | vChildNode): SimplifiedVNode | string {
+export function parseNode(
+  fragment: vFragment | vComment | vText | vChildNode
+): SimplifiedVNode | string {
   const props: Record<string, any> = {}
 
   if (fragment.nodeName === '#comment') {
@@ -26,18 +32,20 @@ export function parseNode (fragment: vFragment | vComment | vText | vChildNode):
   }
 
   const { childNodes, attrs, tagName } = fragment as vElement
-  for (const p of (attrs || [])) {
-      props[p.name] = p.value
+  for (const p of attrs || []) {
+    props[p.name] = p.value
   }
 
   try {
-    return createVNode(h(tagName, props, ...(childNodes || []).map((cn) => parseNode(cn))) as any)
+    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) {
+export function parseDocument(node: HTMLElement) {
   try {
     const fragment = parse(node.outerHTML)
     return parseNode(fragment.childNodes[0])
@@ -46,7 +54,7 @@ export function parseDocument (node: HTMLElement) {
   }
 }
 
-export function parseFragment (node: Element) {
+export function parseFragment(node: Element) {
   try {
     const fragment = parseFragmentImport(node.outerHTML)
     return parseNode(fragment)
@@ -55,7 +63,7 @@ export function parseFragment (node: Element) {
   }
 }
 
-export async function waitForBody () {
+export async function waitForBody() {
   let raf = 0
   let resolve: () => void
   let reject: (err: Error) => void
@@ -69,7 +77,7 @@ export async function waitForBody () {
     10000
   )
 
-  function run () {
+  function run() {
     if (!document.body) {
       return
     }
@@ -84,12 +92,15 @@ export async function waitForBody () {
 }
 
 let refId = 0
- /**
-  * assign a uid to each element so we can reference it later in the vdom
-  */
-export function assignRef (elem: Element) {
+/**
+ * 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))
+    log(
+      'assignRef: elem has no querySelectorAll',
+      elem.nodeType || elem.nodeName || elem.textContent || Object.keys(elem)
+    )
     return
   }
 
@@ -97,14 +108,14 @@ export function assignRef (elem: Element) {
     elem.setAttribute('data-wdio-ref', `${++refId}`)
   }
 
-  Array.from(elem.querySelectorAll('*')).forEach(
-    (el) => { el.setAttribute('data-wdio-ref', `${++refId}`) })
+  Array.from(elem.querySelectorAll('*')).forEach((el) => {
+    el.setAttribute('data-wdio-ref', `${++refId}`)
+  })
 }
 
-export function getRef (elem: Node) {
+export function getRef(elem: Node) {
   if (!elem || !(elem as Element).getAttribute) {
     return null
   }
   return (elem as Element).getAttribute('data-wdio-ref')
 }
-

package/tsconfig.json

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

package/types.d.ts

@@ -8,7 +8,9 @@ export interface TraceMetadata {
 
 export interface SimplifiedVNode {
   type: string
-  props: Record<string, string> & { children?: SimplifiedVNode | SimplifiedVNode[] }
+  props: Record<string, string> & {
+    children?: SimplifiedVNode | SimplifiedVNode[]
+  }
 }
 
 declare global {