Branch rebase

vishnuv688 · vishnuv688 · commit 1105d65391a0 · 2025-11-06T17:57:17.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,
@@ -101,6 +102,10 @@ export class DevtoolsBrowser extends Element {
     window.addEventListener('app-mutation-select', (ev) =>
       this.#renderBrowserState(ev.detail)
     )
+    window.addEventListener(
+      'show-command',
+      this.#handleShowCommand as EventListener
+    )
     await this.updateComplete
   }
 
@@ -134,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 })
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 {`