fix(browser): fix trace highlight of shadow dom on webdriverio (#10227)

hi-ogawa · web-flow · commit b01afd26cbd9 · 2026-04-29T18:34:12.000+09:00
diff --git a/packages/browser/src/client/tester/locators.ts b/packages/browser/src/client/tester/locators.ts
@@ -355,6 +355,7 @@ export abstract class Locator {
     return {
       selector: this.selector,
       locator: this.asLocator(),
+      _pwSelector: this._pwSelector,
     }
   }
 
@@ -429,6 +430,10 @@ export function triggerCommandWithTrace<T>(
 export interface SerializedLocator {
   selector: string
   locator: string
+  /**
+   * @internal
+   */
+  _pwSelector?: string
 }
 
 function createStrictModeViolationError(
diff --git a/packages/browser/src/client/tester/trace.ts b/packages/browser/src/client/tester/trace.ts
@@ -15,7 +15,6 @@ export type BrowserTraceSelectorResolution = 'matched' | 'missing' | 'error'
 
 export interface BrowserTraceEntry {
   name: string
-  // not used yet for UI but tested
   kind: BrowserTraceEntryKind
   status?: BrowserTraceEntryStatus
   startTime: number
@@ -85,19 +84,9 @@ export function recordBrowserTraceEntry(
     startTime?: number
   },
 ): void {
-  // TODO: trace-view currently receives selectors after locator/action resolution,
-  // so provider-specific lowered selectors can leak into snapshot lookup. Preserve
-  // the original locator selector, or record the target node id before lowering.
-  // for example, this causes shadow dom selectors to fail with `>>>` marker.
-  // For now, remove trivial `html >` prefix generated by convertElementToCssSelector.
-  // this is also necessary to `engine.querySelector + document.documentElement`
-  // to find an element on webdriverio
-  if (options.element?.selector?.startsWith('html >')) {
-    options.element.selector = options.element.selector.slice(6)
-  }
   const attemptInfo = getBrowserState().browserTraceAttempts.get(task.id)!
   const relativeStartTime = (options.startTime ?? now()) - attemptInfo.startTime
-  const snapshot = takeSnapshot(options.element?.selector)
+  const snapshot = takeSnapshot(options.element)
   const entry: BrowserTraceEntry = {
     ...options,
     startTime: relativeStartTime,
@@ -117,7 +106,7 @@ export function recordBrowserTraceEntry(
 // selector engine inside the snapshot iframe at view time via injected script.
 // Our approach resolves at collection time (same moment as snapshot) — simpler but
 // requires Mirror plumbing. nodeId-based lookup also works across shadow DOM, unlike querySelector.
-function takeSnapshot(selector?: string): TraceSnapshot {
+function takeSnapshot(serializedLocator?: SerializedLocator): TraceSnapshot {
   const { snapshot, createMirror } = getBrowserState().browserTraceDomSnapshot!
   const traceView = getBrowserState().config.browser.traceView
   const engine = getBrowserState().selectorEngine!
@@ -144,10 +133,10 @@ function takeSnapshot(selector?: string): TraceSnapshot {
     const ids = Array.from(elements, el => mirror.getId(el)).filter(id => id !== -1)
     result.pseudoClassIds[className] = ids
   }
-  if (selector) {
+  if (serializedLocator) {
     try {
       const el = engine.querySelector(
-        engine.parseSelector(selector),
+        engine.parseSelector(serializedLocator._pwSelector ?? serializedLocator.selector),
         document.documentElement,
         false,
       )
diff --git a/test/browser/specs/trace.test.ts b/test/browser/specs/trace.test.ts

Original file line number	Diff line number	Diff line change
`@@ -355,6 +355,7 @@ export abstract class Locator {`
`355`	`355`	`return {`
`356`	`356`	`selector: this.selector,`
`357`	`357`	`locator: this.asLocator(),`
	`358`	`+ _pwSelector: this._pwSelector,`
`358`	`359`	`}`
`359`	`360`	`}`
`360`	`361`
`@@ -429,6 +430,10 @@ export function triggerCommandWithTrace<T>(`
`429`	`430`	`export interface SerializedLocator {`
`430`	`431`	`selector: string`
`431`	`432`	`locator: string`
	`433`	`+ /**`
	`434`	`+ * @internal`
	`435`	`+ */`
	`436`	`+ _pwSelector?: string`
`432`	`437`	`}`
`433`	`438`
`434`	`439`	`function createStrictModeViolationError(`