fix(service): box the element expect() actually resolved, not the stale last selector

Author: vishnuv688

packages/service/src/assertion-tracker.ts

@@ -81,6 +81,10 @@ export class AssertionTracker {
         testUid: this.#ctx.getTestUid(),
         stepUid: this.#ctx.getStepUid()
       }
+      // Reset before the matcher resolves its element (WDIO's $ is lazy, so it
+      // resolves inside the matcher) — only an element resolved during this
+      // assertion is attributed to it; a value matcher stays blank.
+      this.#ctx.getCapturer().beginAssertionSelector()
     }
     this.#assertionDepth++
   }

packages/service/src/constants.ts

@@ -11,6 +11,16 @@ export const PAGE_TRANSITION_COMMANDS: string[] = [
   'click'
 ]
 
+// Element-resolution commands. Tracked so an assertion can recover the element
+// expect() resolved internally — `expect($('#flash'))` fires one of these below
+// the top-level command boundary, where the normal selector tracking skips it.
+export const LOCATOR_COMMANDS: string[] = [
+  '$',
+  '$$',
+  'findElement',
+  'findElements'
+]
+
 // Console capture constants are defined in @wdio/devtools-core; re-exported
 // here so existing imports from ./constants.js continue to work.
 export {

packages/service/src/index.ts

@@ -66,6 +66,7 @@ import {
 import {
   CONTEXT_CHANGE_COMMANDS,
   INTERNAL_COMMANDS,
+  LOCATOR_COMMANDS,
   PAGE_TRANSITION_COMMANDS
 } from './constants.js'
 import { isNativeMobile } from './mobile.js'
@@ -788,6 +789,18 @@ export default class DevToolsHookService implements Services.ServiceInstance {
       return
     }
 
+    // Record every element resolution, even those below the top-level command
+    // boundary — an `expect($('#flash'))` resolves its element inside the
+    // matcher, so this is the only place the assertion's target selector is
+    // observable (see SessionCapturer.noteResolvedSelector).
+    if (
+      LOCATOR_COMMANDS.includes(command as string) &&
+      typeof args[0] === 'string' &&
+      args[0]
+    ) {
+      this.#sessionCapturer.noteResolvedSelector(args[0])
+    }
+
     /* Ensure that the command is captured only if it matches the last command in the stack.
      * This prevents capturing commands that are not top-level user commands.
      */

packages/service/src/session.ts

@@ -7,7 +7,7 @@ import { resolve } from 'import-meta-resolve'
 import { SevereServiceError } from 'webdriverio'
 import type { WebDriverCommands } from '@wdio/protocols'
 
-import { PAGE_TRANSITION_COMMANDS } from './constants.js'
+import { PAGE_TRANSITION_COMMANDS, LOCATOR_COMMANDS } from './constants.js'
 import { isNativeMobile } from './mobile.js'
 import {
   CAPTURE_PERFORMANCE_SCRIPT,
@@ -30,6 +30,11 @@ export class SessionCapturer extends SessionCapturerBase {
   readonly startWallTime = Date.now()
   /** Last find-element selector — carried forward to the next element command. */
   #lastSelector: string | undefined
+  /** Selector resolved during the current assertion. Unlike #lastSelector this
+   *  updates on EVERY locator command (even below the top-level boundary), so
+   *  it captures the element `expect($('#flash'))` resolves inside the matcher.
+   *  Cleared at each matcher start so a value assertion inherits nothing. */
+  #lastResolvedSelector: string | undefined
   /** Collapses internal command retries onto a single entry (see #captureOrReplace). */
   #retryTracker = new RetryTracker()
   #pendingNetworkRequests = new Map<
@@ -55,6 +60,21 @@ export class SessionCapturer extends SessionCapturerBase {
    */
   resetLastSelector(): void {
     this.#lastSelector = undefined
+    this.#lastResolvedSelector = undefined
+  }
+
+  /** Record the selector of an element-resolution command, ungated by the
+   *  top-level filter — the service calls this for every locator command so an
+   *  assertion can recover the element expect() resolved internally. */
+  noteResolvedSelector(selector: string): void {
+    this.#lastResolvedSelector = selector
+  }
+
+  /** Clear the resolved selector at a matcher's start, so only an element
+   *  resolved DURING this matcher (an element assertion) is attributed to it —
+   *  a value assertion (`expect(x).toBe(y)`) resolves nothing and stays blank. */
+  beginAssertionSelector(): void {
+    this.#lastResolvedSelector = undefined
   }
 
   protected override onWsError(err: unknown): void {
@@ -146,12 +166,7 @@ export class SessionCapturer extends SessionCapturerBase {
     // Track last find-element selector so element commands (click, setValue, …)
     // carry a human-readable selector in trace events even though WDIO doesn't
     // pass it in their args.
-    if (
-      cmd === '$' ||
-      cmd === '$$' ||
-      cmd === 'findElement' ||
-      cmd === 'findElements'
-    ) {
+    if (LOCATOR_COMMANDS.includes(cmd)) {
       const sel = args[0]
       if (typeof sel === 'string' && sel.length > 0) {
         this.#lastSelector = sel
@@ -253,8 +268,12 @@ export class SessionCapturer extends SessionCapturerBase {
   }
 
   /** Ingest an assertion entry (node:assert capture or synthesized expect
-   *  failure) through the same retry-collapsing path driver commands use. */
+   *  failure) through the same retry-collapsing path driver commands use. A
+   *  fresh (unfolded) expect row still carries the element it targeted. */
   captureAssertCommand(entry: CommandLog): void {
+    if (!entry.selector) {
+      entry.selector = this.#lastResolvedSelector
+    }
     this.#captureOrReplace(entry)
   }
 
@@ -296,10 +315,10 @@ export class SessionCapturer extends SessionCapturerBase {
       callSource: entry.callSource ?? last.callSource,
       screenshot: entry.screenshot ?? last.screenshot,
       error: entry.error ?? last.error,
-      // The matcher's `args` become the expected value on fold, so the read's
-      // locator is the only record of which element the assertion targeted —
-      // carry it so the player's overlay can box e.g. `#flash`.
-      selector: entry.selector ?? last.selector ?? this.#lastSelector
+      // The matcher's `args` become the expected value on fold, so record which
+      // element the assertion targeted — the selector expect() resolved during
+      // this matcher — so the player's overlay can box e.g. `#flash`.
+      selector: entry.selector ?? this.#lastResolvedSelector
     }
     log[log.length - 1] = merged
     this.sendReplaceCommand(last.timestamp, merged)

packages/service/tests/assertion-rows.test.ts

@@ -20,6 +20,8 @@ const capturer = vi.hoisted(() => ({
   cleanup: vi.fn(),
   resetLastSelector: vi.fn(),
   resetRetryTracker: vi.fn(),
+  beginAssertionSelector: vi.fn(),
+  noteResolvedSelector: vi.fn(),
   commandsLog: [] as unknown[],
   sources: new Map<string, string>()
 }))

packages/service/tests/session.test.ts

@@ -159,6 +159,45 @@ describe('SessionCapturer', () => {
     })
   })
 
+  describe('assertion target selector', () => {
+    const assertEntry = (command: string) =>
+      ({ command, args: [], timestamp: Date.now() }) as any
+
+    it('stamps the element resolved during the matcher onto a fresh assert row', () => {
+      const capturer = new SessionCapturer()
+      // expect($('#flash')) resolves the element inside the matcher.
+      capturer.beginAssertionSelector()
+      capturer.noteResolvedSelector('#flash')
+      capturer.captureAssertCommand(assertEntry('expect.toExist'))
+      expect(capturer.commandsLog.at(-1)!.selector).toBe('#flash')
+    })
+
+    it('folds the resolved selector into the matcher read', () => {
+      const capturer = new SessionCapturer()
+      capturer.commandsLog.push(assertEntry('getText'))
+      capturer.beginAssertionSelector()
+      capturer.noteResolvedSelector('#flash')
+      const folded = capturer.coalesceAssertionIntoLastRead(
+        {
+          command: 'expect.toHaveText',
+          args: ['hi'],
+          timestamp: Date.now()
+        } as any,
+        (c) => c === 'getText'
+      )
+      expect(folded).toBe(true)
+      expect(capturer.commandsLog.at(-1)!.selector).toBe('#flash')
+    })
+
+    it('leaves a value assertion blank (no element resolved during it)', () => {
+      const capturer = new SessionCapturer()
+      capturer.noteResolvedSelector('#flash') // stale, from a prior assertion
+      capturer.beginAssertionSelector() // expect(x).toBe(y) resolves nothing
+      capturer.captureAssertCommand(assertEntry('expect.toBe'))
+      expect(capturer.commandsLog.at(-1)!.selector).toBeUndefined()
+    })
+  })
+
   describe('websocket communication', () => {
     it('should handle connection states and errors', () => {
       const mockWs = {