Implemented capturing browser state during each command

vishnuv688 · vishnuv688 · commit 9bc74d964a18 · 2025-11-04T16:42:22.000+05:30
diff --git a/packages/app/src/components/browser/snapshot.ts b/packages/app/src/components/browser/snapshot.ts
@@ -5,6 +5,7 @@ import { consume } from '@lit/context'
 import { type ComponentChildren, h, render, type VNode } from 'preact'
 import { customElement, query } from 'lit/decorators.js'
 import type { SimplifiedVNode } from '../../../../script/types'
+import type { CommandLog } from '@wdio/devtools-service/types'
 
 import {
   mutationContext,
@@ -43,10 +44,6 @@ const COMPONENT = 'wdio-devtools-browser'
 export class DevtoolsBrowser extends Element {
   #vdom = document.createDocumentFragment()
   #activeUrl?: string
-  #resizeTimer?: number
-  #boundResize = () => this.#debouncedResize()
-  #checkpoints = new Map<number, DocumentFragment>()
-  #checkpointStride = 50
 
   @consume({ context: metadataContext, subscribe: true })
   metadata: Metadata | undefined = undefined
@@ -96,25 +93,22 @@ export class DevtoolsBrowser extends Element {
 
   async connectedCallback() {
     super.connectedCallback()
-    window.addEventListener('resize', this.#boundResize)
-    window.addEventListener('window-drag', this.#boundResize)
+    window.addEventListener('resize', this.#setIframeSize.bind(this))
+    window.addEventListener('window-drag', this.#setIframeSize.bind(this))
     window.addEventListener(
       'app-mutation-highlight',
       this.#highlightMutation.bind(this)
     )
     window.addEventListener('app-mutation-select', (ev) =>
       this.#renderBrowserState(ev.detail)
     )
+    window.addEventListener(
+      'show-command',
+      this.#handleShowCommand as EventListener
+    )
     await this.updateComplete
   }
 
-  #debouncedResize() {
-    if (this.#resizeTimer) {
-      window.clearTimeout(this.#resizeTimer)
-    }
-    this.#resizeTimer = window.setTimeout(() => this.#setIframeSize(), 80)
-  }
-
   #setIframeSize() {
     const metadata = this.metadata
     if (!this.section || !this.iframe || !this.header || !metadata) {
@@ -145,6 +139,31 @@ export class DevtoolsBrowser extends Element {
     this.iframe.style.transform = `scale(${scale})`
   }
 
+  #handleShowCommand = (event: Event) =>
+    this.#renderCommandScreenshot(
+      (event as CustomEvent<{ command?: CommandLog }>).detail?.command
+    )
+
+  async #renderCommandScreenshot(command?: CommandLog) {
+    const screenshot = command?.screenshot
+    if (!screenshot) {
+      return
+    }
+
+    if (!this.iframe) {
+      await this.updateComplete
+    }
+    if (!this.iframe) {
+      return
+    }
+
+    this.iframe.srcdoc = `
+      <body style="margin:0;background:#111;display:flex;justify-content:center;align-items:flex-start;">
+        <img src="data:image/png;base64,${screenshot}" style="max-width:100%;height:auto;display:block;" />
+      </body>
+    `
+  }
+
   async #renderNewDocument(doc: SimplifiedVNode, baseUrl: string) {
     const root = transform(doc)
     const baseTag = h('base', { href: baseUrl })
@@ -182,6 +201,7 @@ export class DevtoolsBrowser extends Element {
     if (!this.iframe) {
       await this.updateComplete
     }
+
     if (mutation.type === 'attributes') {
       return this.#handleAttributeMutation(mutation)
     }
@@ -203,22 +223,16 @@ export class DevtoolsBrowser extends Element {
   }
 
   #handleAttributeMutation(mutation: TraceMutation) {
-    if (!mutation.attributeName) {
+    if (!mutation.attributeName || !mutation.attributeValue) {
       return
     }
+
     const el = this.#queryElement(mutation.target!)
     if (!el) {
       return
     }
 
-    if (
-      mutation.attributeValue === undefined ||
-      mutation.attributeValue === null
-    ) {
-      el.removeAttribute(mutation.attributeName)
-    } else {
-      el.setAttribute(mutation.attributeName, mutation.attributeValue)
-    }
+    el.setAttribute(mutation.attributeName, mutation.attributeValue || '')
   }
 
   #handleChildListMutation(mutation: TraceMutation) {
@@ -296,80 +310,52 @@ export class DevtoolsBrowser extends Element {
 
   async #renderBrowserState(mutationEntry?: TraceMutation) {
     const mutations = this.mutations
-    if (!mutations?.length) {
-      return
-    }
-
-    const targetIndex = mutationEntry ? mutations.indexOf(mutationEntry) : 0
-    if (targetIndex < 0) {
+    if (!mutations || !mutations.length) {
       return
     }
 
-    // locate nearest checkpoint (<= targetIndex)
-    const checkpointIndices = [...this.#checkpoints.keys()].sort(
-      (a, b) => a - b
-    )
-    const nearest = checkpointIndices.filter((i) => i <= targetIndex).pop()
-
-    if (nearest !== undefined) {
-      // start from checkpoint clone
-      this.#vdom = this.#checkpoints
-        .get(nearest)!
-        .cloneNode(true) as DocumentFragment
-    } else {
-      this.#vdom = document.createDocumentFragment()
-    }
-
-    // find root after checkpoint (initial full doc mutation)
-    const startIndex = nearest !== undefined ? nearest + 1 : 0
-    let rootIndex = startIndex
-    for (let i = startIndex; i <= targetIndex; i++) {
-      const m = mutations[i]
-      if (m.addedNodes.length === 1 && Boolean(m.url)) {
-        rootIndex = i
-      }
-    }
-    if (rootIndex !== startIndex) {
-      this.#vdom = document.createDocumentFragment()
-    }
+    const mutationIndex = mutationEntry ? mutations.indexOf(mutationEntry) : 0
+    this.#vdom = document.createDocumentFragment()
+    const rootIndex =
+      mutations
+        .map(
+          (m, i) =>
+            [
+              // is document loaded
+              m.addedNodes.length === 1 && Boolean(m.url),
+              // index
+              i
+            ] as const
+        )
+        .filter(
+          ([isDocLoaded, docLoadedIndex]) =>
+            isDocLoaded && docLoadedIndex <= mutationIndex
+        )
+        .map(([, i]) => i)
+        .pop() || 0
 
     this.#activeUrl =
       mutations[rootIndex].url || this.metadata?.url || 'unknown'
-
-    for (let i = rootIndex; i <= targetIndex; i++) {
-      try {
-        await this.#handleMutation(mutations[i])
-        // create checkpoint
-        if (i % this.#checkpointStride === 0 && !this.#checkpoints.has(i)) {
-          this.#checkpoints.set(
-            i,
-            this.#vdom.cloneNode(true) as DocumentFragment
-          )
-        }
-      } catch (err: any) {
-        console.warn(`Failed to render mutation ${i}: ${err?.message}`)
-      }
+    for (let i = rootIndex; i <= mutationIndex; i++) {
+      await this.#handleMutation(mutations[i]).catch((err) =>
+        console.warn(`Failed to render mutation: ${err.message}`)
+      )
     }
 
-    const mutation = mutations[targetIndex]
+    /**
+     * scroll changed element into view
+     */
+    const mutation = mutations[mutationIndex]
     if (mutation.target) {
       const el = this.#queryElement(mutation.target)
-      el?.scrollIntoView({ block: 'center', inline: 'center' })
+      if (el) {
+        el.scrollIntoView({ block: 'center', inline: 'center' })
+      }
     }
 
     this.requestUpdate()
   }
 
-  /**
-   * Public API: jump to mutation index
-   */
-  goToMutation(index: number) {
-    const m = this.mutations[index]
-    if (m) {
-      this.#renderBrowserState(m)
-    }
-  }
-
   render() {
     /**
      * render a browser state if it hasn't before
diff --git a/packages/service/src/session.ts b/packages/service/src/session.ts
@@ -102,6 +102,11 @@ export class SessionCapturer {
       timestamp,
       callSource: absPath
     }
+    try {
+      newCommand.screenshot = await browser.takeScreenshot()
+    } catch (shotErr) {
+      log.warn(`failed to capture screenshot: ${(shotErr as Error).message}`)
+    }
     this.commandsLog.push(newCommand)
     this.sendUpstream('commands', [newCommand])
 
diff --git a/packages/service/src/types.ts b/packages/service/src/types.ts
@@ -9,6 +9,7 @@ export interface CommandLog {
   error?: Error
   timestamp: number
   callSource: string
+  screenshot?: string
 }
 
 export enum TraceType {

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,7 @@ export interface CommandLog {`
`9`	`9`	`error?: Error`
`10`	`10`	`timestamp: number`
`11`	`11`	`callSource: string`
	`12`	`+ screenshot?: string`
`12`	`13`	`}`
`13`	`14`
`14`	`15`	`export enum TraceType {`