refactor: Simplification across packages/core and service

- "Un-truncating" selectors in transcript

Author: Winify

packages/core/src/action-mapping.ts

@@ -58,9 +58,8 @@ export function formatActionTitle(
   if (firstArg === undefined) {
     return `${action.class}.${action.method}()`
   }
-  const label = (
+  const label =
     typeof firstArg === 'object' ? JSON.stringify(firstArg) : String(firstArg)
-  ).slice(0, 80)
   return `${action.class}.${action.method}("${label}")`
 }
 

packages/core/src/action-snapshot.ts

@@ -55,13 +55,12 @@ export async function captureActionSnapshot(
     const isNativeMobile = !input.runScript && !!input.getPageSource
 
     const [shot, url, title, pageSource, tree, elements] = await Promise.all([
-      input.takeScreenshot?.().catch(() => null) ?? Promise.resolve(null),
-      input.getUrl?.().catch(() => undefined) ?? Promise.resolve(undefined),
-      input.getTitle?.().catch(() => undefined) ?? Promise.resolve(undefined),
+      input.takeScreenshot?.().catch(() => null),
+      input.getUrl?.().catch(() => undefined),
+      input.getTitle?.().catch(() => undefined),
       isNativeMobile
-        ? (input.getPageSource?.().catch(() => undefined) ??
-          Promise.resolve(undefined))
-        : Promise.resolve(undefined),
+        ? input.getPageSource?.().catch(() => undefined)
+        : undefined,
       runWith<AccessibilityNode[]>(
         input.runScript,
         accessibilityTreeScript(true),

packages/core/src/trace-exporter.ts

@@ -16,7 +16,8 @@ import type {
 import {
   formatActionTitle,
   mapCommandToAction,
-  FILL_METHODS
+  FILL_METHODS,
+  type TraceAction
 } from './action-mapping.js'
 import { networkRequestToHar } from './trace-har.js'
 import { buildTraceZip, type TraceZipResource } from './trace-zip-writer.js'
@@ -343,12 +344,15 @@ function generateTranscript(
   const wallTimeISO = new Date(startWallTime).toISOString()
   const lines: string[] = [`# ${title ?? 'Session'} — ${wallTimeISO}`, '']
 
-  const captured = commands.filter(
-    (c) => mapCommandToAction(String(c.command)) !== null
-  )
+  const captured: { entry: CommandLog; action: TraceAction }[] = []
+  for (const c of commands) {
+    const action = mapCommandToAction(String(c.command))
+    if (action) {
+      captured.push({ entry: c, action })
+    }
+  }
 
-  captured.forEach((entry, idx) => {
-    const action = mapCommandToAction(String(entry.command))!
+  captured.forEach(({ entry, action }, idx) => {
     const label = formatActionTitle(action, entry.args as unknown[])
 
     const rawArgs = entry.args as unknown[]
@@ -357,7 +361,7 @@ function generateTranscript(
     if (FILL_METHODS.has(action.method) && rawArgs) {
       const valueIdx = rawArgs.length >= 2 ? 1 : 0
       if (rawArgs[valueIdx] !== undefined) {
-        parts.push(`value="${String(rawArgs[valueIdx]).slice(0, 50)}"`)
+        parts.push(`value="${String(rawArgs[valueIdx])}"`)
       }
     }
 

packages/service/src/index.ts

@@ -74,9 +74,6 @@ export default class DevToolsHookService implements Services.ServiceInstance {
    */
   #commandStack: CommandFrame[] = []
 
-  // This is used to capture the last command signature to avoid duplicate captures
-  #lastCommandSig: string | null = null
-
   /**
    * allows to define the type of data being captured to hint the
    * devtools app which data to expect
@@ -239,7 +236,6 @@ export default class DevToolsHookService implements Services.ServiceInstance {
   }
 
   private resetStack() {
-    this.#lastCommandSig = null
     this.#commandStack = []
   }
 
@@ -269,20 +265,18 @@ export default class DevToolsHookService implements Services.ServiceInstance {
 
   #pushTopLevelCommandFrame(
     command: string,
-    args: string[],
     callSource: string | undefined
   ): void {
     if (INTERNAL_COMMANDS.includes(command)) {
       return
     }
-    const cmdSig = JSON.stringify({ command, args, src: callSource })
-    if (this.#lastCommandSig !== cmdSig) {
+    const top = this.#commandStack[this.#commandStack.length - 1]
+    if (!top || top.command !== command || top.callSource !== callSource) {
       this.#commandStack.push({
         command,
         callSource,
         startTimestamp: Date.now()
       })
-      this.#lastCommandSig = cmdSig
     }
   }
 
@@ -309,7 +303,6 @@ export default class DevToolsHookService implements Services.ServiceInstance {
     if (source && this.#commandStack.length === 0) {
       this.#pushTopLevelCommandFrame(
         command,
-        args,
         this.#resolveCallSourceFromFrame(source)
       )
 

packages/service/src/session.ts

@@ -205,8 +205,10 @@ export class SessionCapturer extends SessionCapturerBase {
       !isNativeMobile(browser) &&
       PAGE_TRANSITION_COMMANDS.includes(command)
     ) {
-      await this.#capturePerformance(browser, commandLogEntry, args)
-      await this.#captureTrace(browser)
+      await Promise.all([
+        this.#capturePerformance(browser, commandLogEntry, args),
+        this.#captureTrace(browser)
+      ])
     }
   }
 
@@ -369,26 +371,7 @@ export class SessionCapturer extends SessionCapturerBase {
     try {
       const { request, timestamp } = event
       const requestId = request.request
-      const requestHeaders: Record<string, string> = {}
-      if (request.headers) {
-        request.headers.forEach(
-          (h: {
-            name: string
-            value: { type?: string; value?: string } | string
-          }) => {
-            const name = typeof h.name === 'string' ? h.name.toLowerCase() : ''
-            const value =
-              typeof h.value === 'string'
-                ? h.value
-                : typeof h.value === 'object' && h.value?.value
-                  ? h.value.value
-                  : ''
-            if (name) {
-              requestHeaders[name] = value
-            }
-          }
-        )
-      }
+      const requestHeaders = this.#flattenBidiHeaders(request.headers)
 
       this.#pendingNetworkRequests.set(requestId, {
         url: request.url,