Snapshot feature fix

Author: vishnuv688

example/wdio.conf.ts

@@ -69,7 +69,7 @@ export const config: Options.Testrunner = {
           '--headless',
           '--disable-gpu',
           '--remote-allow-origins=*',
-          '--window-size=1280,800'
+          '--window-size=1600,1200'
         ]
       }
       // }, {

packages/app/src/components/browser/snapshot.ts

@@ -217,14 +217,7 @@ export class DevtoolsBrowser extends Element {
     )
 
   async #renderCommandScreenshot(command?: CommandLog) {
-    const screenshot = command?.screenshot
-    if (!screenshot) {
-      // Clicking a command that has no screenshot clears any previous overlay.
-      this.#screenshotData = null
-      this.requestUpdate()
-      return
-    }
-    this.#screenshotData = screenshot
+    this.#screenshotData = command?.screenshot ?? null
     this.requestUpdate()
   }
 
@@ -443,10 +436,8 @@ export class DevtoolsBrowser extends Element {
     }
 
     const hasMutations = this.mutations && this.mutations.length
-    // Explicit user selection takes priority; fall back to latest auto-screenshot
-    // so the preview always shows the most recently executed command's state
-    // (important for Nightwatch mode where there are no DOM mutations).
-    const displayScreenshot = this.#screenshotData ?? this.#latestAutoScreenshot
+    const autoScreenshot = hasMutations ? null : this.#latestAutoScreenshot
+    const displayScreenshot = this.#screenshotData ?? autoScreenshot
 
     return html`
       <section
@@ -467,26 +458,28 @@ export class DevtoolsBrowser extends Element {
             <span class="truncate">${this.#activeUrl}</span>
           </div>
         </header>
-        ${hasMutations
+        ${this.#screenshotData
           ? html`
             <div class="iframe-wrapper">
-              <iframe class="origin-top-left"></iframe>
-              ${displayScreenshot
-                ? html`<div class="screenshot-overlay">
-                    <img src="data:image/png;base64,${displayScreenshot}" />
-                  </div>`
-                : ''}
+              <div class="screenshot-overlay" style="position:relative;flex:1;min-height:0;">
+                <img src="data:image/png;base64,${this.#screenshotData}" />
+              </div>
             </div>`
-          : displayScreenshot
+          : hasMutations
             ? html`
               <div class="iframe-wrapper">
-                <div class="screenshot-overlay" style="position:relative;flex:1;min-height:0;">
-                  <img src="data:image/png;base64,${displayScreenshot}" />
-                </div>
+                <iframe class="origin-top-left"></iframe>
               </div>`
-            : html`<wdio-devtools-placeholder
-                style="height: 100%"
-              ></wdio-devtools-placeholder>`}
+            : displayScreenshot
+              ? html`
+                <div class="iframe-wrapper">
+                  <div class="screenshot-overlay" style="position:relative;flex:1;min-height:0;">
+                    <img src="data:image/png;base64,${displayScreenshot}" />
+                  </div>
+                </div>`
+              : html`<wdio-devtools-placeholder
+                  style="height: 100%"
+                ></wdio-devtools-placeholder>`}
       </section>
     `
   }

packages/nightwatch-devtools/example/nightwatch.conf.cjs

@@ -22,7 +22,7 @@ module.exports = {
       desiredCapabilities: {
         browserName: 'chrome',
         'goog:chromeOptions': {
-          args: ['--headless', '--no-sandbox', '--disable-dev-shm-usage']
+          args: ['--headless', '--no-sandbox', '--disable-dev-shm-usage', '--window-size=1600,1200']
         },
         'goog:loggingPrefs': { performance: 'ALL' }
       },

packages/nightwatch-devtools/src/helpers/browserProxy.ts

@@ -44,26 +44,17 @@ export class BrowserProxy {
     this.sessionCapturer = capturer
   }
 
-  /**
-   * Reset command tracking for new test
-   */
   resetCommandTracking(): void {
     this.commandStack = []
     this.lastCommandSig = null
     this.lastCapturedSig = null
     this.lastCapturedId = null
   }
 
-  /**
-   * Get current test file path
-   */
   getCurrentTestFullPath(): string | null {
     return this.currentTestFullPath
   }
 
-  /**
-   * Set current test file path
-   */
   setCurrentTestFullPath(path: string | null): void {
     this.currentTestFullPath = path
   }
@@ -117,9 +108,6 @@ export class BrowserProxy {
     log.info('✓ Script injection wrapped')
   }
 
-  /**
-   * Wrap all browser commands to capture them
-   */
   wrapBrowserCommands(browser: NightwatchBrowser): void {
     if (this.proxiedBrowsers.has(browser as object)) {
       return
@@ -166,41 +154,25 @@ export class BrowserProxy {
     log.info(`✓ Wrapped ${wrappedMethods.length} browser methods`)
   }
 
-  /**
-   * Handle command execution with tracking.
-   *
-   * Injects a result-capturing callback as the last argument so that the actual
-   * WebDriver result value (from Nightwatch's command queue) is available when
-   * the command finishes rather than being `undefined`.
-   */
   private handleCommandExecution(
     browser: NightwatchBrowser,
     browserAny: any,
     methodName: string,
     originalMethod: Function,
     args: any[]
   ): any {
-    // Detect test boundaries
     const currentNightwatchTest = browserAny.currentTest
-    const currentTestName = this.testManager.detectTestBoundary(
-      currentNightwatchTest
-    )
-
-    // Start test if this is its first command
+    const currentTestName = this.testManager.detectTestBoundary(currentNightwatchTest)
     this.testManager.startTestIfPending(currentTestName)
 
-    // Get call source
     const callInfo = getCallSourceFromStack()
     if (callInfo.filePath && !this.currentTestFullPath) {
       this.currentTestFullPath = callInfo.filePath
     }
 
-    // Separate any user-supplied callback from the positional args so we can
-    // inject our own result-capturing wrapper without losing the user's cb.
     const lastArg = args[args.length - 1]
     const hasUserCallback = typeof lastArg === 'function'
     const userCallback: Function | null = hasUserCallback ? lastArg : null
-    // The "logical" args that we will log (without callback)
     const logArgs = hasUserCallback ? args.slice(0, -1) : args
 
     // Check for duplicate commands (based on method + logical args)
@@ -220,7 +192,6 @@ export class BrowserProxy {
       this.lastCommandSig = cmdSig
     }
 
-    // Snapshot test context at call time (may change by callback time)
     const testAtCallTime = this.getCurrentTest()
     const testUid = testAtCallTime?.uid
     const callSource = callInfo.callSource
@@ -231,7 +202,6 @@ export class BrowserProxy {
      * command completes.  This is where we get the *actual* result value.
      */
     const captureCallback = (callbackResult: any) => {
-      // Pop stack frame (if not already done for duplicates)
       const stackFrame = this.commandStack[this.commandStack.length - 1]
       if (
         stackFrame?.command === methodName &&
@@ -240,14 +210,6 @@ export class BrowserProxy {
         this.commandStack.pop()
       }
 
-      // ── Step 1: extract / normalise the result ───────────────────────────
-      // All Nightwatch commands return {value: V, status: 0} to the callback.
-      //
-      // Commands that semantically return a boolean (waitFor*, is*, has*,
-      // anything ending in Visible/Present/Enabled/Selected/NotVisible/
-      // NotPresent) return {value: true} on success and {value: null} on
-      // failure/timeout.  Detected generically via BOOLEAN_COMMAND_PATTERN
-      // (defined in constants.ts) — no hardcoded list needed.
       const isBooleanCommand = BOOLEAN_COMMAND_PATTERN.test(methodName)
 
       let serializedResult: any = undefined
@@ -278,9 +240,6 @@ export class BrowserProxy {
         }
       }
 
-      // ── Step 2: capture & send ───────────────────────────────────────────
-      // Use the test context that is current *now* (at completion time), but
-      // fall back to the snapshot taken at call time.
       const currentTest = this.getCurrentTest()
       const effectiveUid = currentTest?.uid ?? testUid
 
@@ -304,7 +263,6 @@ export class BrowserProxy {
           this.lastCapturedId = entry._id ?? null
           this.sessionCapturer.sendReplaceCommand(oldTimestamp, entry)
 
-          // Snapshot this entry for the screenshot perform below.
           const entryToScreenshot = entry
           if (typeof (browser as any).perform === 'function') {
             const ts = (entryToScreenshot as any).timestamp
@@ -343,7 +301,6 @@ export class BrowserProxy {
             .catch((err: any) =>
               log.error(`Failed to capture ${methodName}: ${err.message}`)
             )
-          // Read the entry synchronously — it was already pushed above.
           const lastCommand =
             this.sessionCapturer.commandsLog[
               this.sessionCapturer.commandsLog.length - 1
@@ -353,11 +310,6 @@ export class BrowserProxy {
             this.sessionCapturer.sendCommand(lastCommand)
           }
 
-          // Queue a perform RIGHT HERE (inside captureCallback, where the entry
-          // is already known) so it inserts immediately after the current command
-          // — before the next test command and before end().
-          // We snapshot `lastCommand` into a local const so it can never be
-          // overwritten by a later captureCallback for a different command.
           const entryToScreenshot = lastCommand
           if (entryToScreenshot && typeof (browser as any).perform === 'function') {
             const ts = (entryToScreenshot as any).timestamp
@@ -389,20 +341,17 @@ export class BrowserProxy {
         }
       }
 
-      // Forward to the user's original callback (if any)
       if (userCallback) {
         return userCallback(callbackResult)
       }
     }
 
-    // Build modified args: logical args + our capturing callback
     const modifiedArgs = [...logArgs, captureCallback]
 
     try {
       const result = originalMethod(...modifiedArgs)
       return result
     } catch (error) {
-      // Handle synchronous queue-level errors (rare)
       const stackFrame = this.commandStack[this.commandStack.length - 1]
       if (
         stackFrame?.command === methodName &&
@@ -415,9 +364,6 @@ export class BrowserProxy {
     }
   }
 
-  /**
-   * Capture command error
-   */
   private captureCommandError(
     methodName: string,
     args: any[],
@@ -451,9 +397,6 @@ export class BrowserProxy {
     }
   }
 
-  /**
-   * Check if a specific browser instance is already proxied
-   */
   isProxied(browser: NightwatchBrowser): boolean {
     return this.proxiedBrowsers.has(browser as object)
   }