fix: stabilize adaptive replay across volatile ids (#2051)

Author: chubes4

packages/runtime-playground/src/browser-action-discovery.ts

@@ -9,6 +9,7 @@ export async function discoverBrowserActionCorpusDescriptors(page: Page | Frame)
     const MAX_REJECTION_DIAGNOSTICS = 20
     const descriptors: BrowserActionCorpusDescriptor[] = []
     const rejected: Array<{ kind: string; tag: string; label: string }> = []
+    const identityOccurrences = new Map<string, number>()
     const cssEscape = (value: string) => {
       const escapeFn = (globalThis as typeof globalThis & { CSS?: { escape?: (raw: string) => string } }).CSS?.escape
       return escapeFn ? escapeFn(value) : value.replace(/[^a-zA-Z0-9_-]/g, "\\$&")
@@ -96,7 +97,21 @@ export async function discoverBrowserActionCorpusDescriptors(page: Page | Frame)
       if (label && text(label.textContent)) return text(label.textContent)
       return text(element.textContent)
     }
-    const descriptorId = (kind: string, selector: string, element: Element) => `${kind}:${selector}:${element.getAttribute("name") || ""}:${labelFor(element)}`
+    const descriptorId = (kind: string, element: Element) => {
+      const input = element as HTMLInputElement
+      const identity = JSON.stringify({
+        kind,
+        label: labelFor(element),
+        name: element.getAttribute("name") || "",
+        role: element.getAttribute("role") || "",
+        type: input.type || element.getAttribute("type") || "",
+        href: element.tagName.toLowerCase() === "a" ? (element as HTMLAnchorElement).href : "",
+        options: element.tagName.toLowerCase() === "select" ? Array.from((element as HTMLSelectElement).options).map((option) => option.value) : [],
+      })
+      const occurrence = identityOccurrences.get(identity) ?? 0
+      identityOccurrences.set(identity, occurrence + 1)
+      return `${kind}:${identity}:${occurrence}`
+    }
     const visible = (element: Element) => {
       const htmlElement = element as HTMLElement
       const style = window.getComputedStyle(htmlElement)
@@ -114,7 +129,7 @@ export async function discoverBrowserActionCorpusDescriptors(page: Page | Frame)
         return
       }
       descriptors.push({
-        id: descriptorId(kind, selector, element),
+        id: descriptorId(kind, element),
         kind,
         selector,
         label: labelFor(element),

packages/runtime-playground/src/browser-adaptive-explorer.ts

@@ -261,6 +261,7 @@ async function captureAdaptiveState(page: Page, contract: BrowserAdaptiveExplora
       descriptors.push(...scopedDescriptors.slice(0, contract.descriptorLimits.maxPerState).map((descriptor) => ({ ...descriptor, frameId: identity.id })))
       const semantic = await frame.evaluate(({ maxElements, maxTextLength }) => {
         const text = (document.body?.innerText || "").replace(/\s+/g, " ").trim().slice(0, maxTextLength)
+        const semanticId = (id: string | null) => id?.replace(/([_:-](?:[a-z]{0,4})?)[a-f0-9]{8,}$/i, "$1<generated>") || undefined
         const loadingSelectors = "[aria-busy='true'], [role='progressbar'], .loading, .spinner, [data-loading='true']"
         const visible = (element: Element) => {
           const rect = element.getBoundingClientRect()
@@ -271,7 +272,7 @@ async function captureAdaptiveState(page: Page, contract: BrowserAdaptiveExplora
           const input = element as HTMLInputElement
           return {
             tag: element.tagName.toLowerCase(),
-            id: element.getAttribute("id") || undefined,
+            id: semanticId(element.getAttribute("id")),
             class: element.getAttribute("class") || undefined,
             role: element.getAttribute("role") || undefined,
             ariaHidden: element.getAttribute("aria-hidden") || undefined,
@@ -330,11 +331,18 @@ async function executeAdaptiveAction(page: Page, action: BrowserAdaptiveAction,
   if (action.family === "reload") { await page.reload({ waitUntil: "domcontentloaded", timeout }); return }
   const frame = frameById(page, action.frameId)
   if (!frame) throw new Error(`Adaptive action frame is no longer available: ${action.frameId}`)
+  let currentSelector: string | undefined
+  if (action.descriptorId) {
+    const current = (await discoverBrowserActionCorpusDescriptors(frame)).descriptors.filter((descriptor) => descriptor.id === action.descriptorId)
+    if (current.length !== 1) throw new Error(`Adaptive descriptor must resolve exactly once, resolved ${current.length}: ${action.descriptorId}`)
+    currentSelector = current[0]?.selector
+  }
   for (const step of action.steps) {
-    if (!step.selector) throw new Error(`Adaptive ${step.kind} action requires a unique selector.`)
-    const locator = frame.locator(step.selector)
+    const selector = currentSelector ?? step.selector
+    if (!selector) throw new Error(`Adaptive ${step.kind} action requires a unique selector.`)
+    const locator = frame.locator(selector)
     const count = await locator.count()
-    if (count !== 1) throw new Error(`Adaptive selector must resolve exactly once, resolved ${count}: ${step.selector}`)
+    if (count !== 1) throw new Error(`Adaptive selector must resolve exactly once, resolved ${count}: ${selector}`)
     if (step.kind === "click") await locator.click({ timeout })
     else if (step.kind === "fill") await locator.fill(String(step.value ?? ""), { timeout })
     else if (step.kind === "select") await locator.selectOption(Array.isArray(step.values) ? step.values : String(step.value ?? ""), { timeout })
@@ -486,7 +494,7 @@ function frameById(page: Page, id: string): Frame | undefined {
 }
 
 function stableDescriptor(descriptor: BrowserActionCorpusDescriptor): Record<string, unknown> {
-  return { id: descriptor.id, frameId: descriptor.frameId, kind: descriptor.kind, selector: descriptor.selector, label: descriptor.label, name: descriptor.name, role: descriptor.role, type: descriptor.type, formId: descriptor.formId, href: descriptor.href, optionValues: descriptor.optionValues }
+  return { id: descriptor.id, frameId: descriptor.frameId, kind: descriptor.kind, label: descriptor.label, name: descriptor.name, role: descriptor.role, type: descriptor.type, href: descriptor.href, optionValues: descriptor.optionValues }
 }
 
 function rejectedTransition(state: BrowserAdaptiveState, action: BrowserAdaptiveAction, destinationUrl: string, code: string, message: string): BrowserAdaptiveTransition {

tests/browser-adaptive-exploration.test.ts

@@ -160,6 +160,47 @@ test("identical seed and DOM produce deterministic state and action graph identi
   assert.deepEqual(stableGraph(second.result), stableGraph(first.result))
 })
 
+test("volatile generated ids preserve semantic replay and distinct control identity", async () => {
+  let render = 0
+  const server = createServer((_request, response) => {
+    render += 1
+    const suffix = render.toString(16).padStart(10, "0")
+    response.setHeader("content-type", "text/html")
+    response.end(`<!doctype html>
+      <style>button { display:block; width:180px; height:30px; margin:8px; }</style>
+      <button id="choice-primary-dm${suffix}">Choose</button>
+      <button id="choice-secondary-dm${suffix}">Choose</button>
+      <output>Waiting</output>
+      <script>
+        document.querySelectorAll('button').forEach((button, index) => button.addEventListener('click', () => {
+          document.querySelector('output').textContent = index === 0 ? 'Primary selected' : 'Secondary selected';
+        }));
+      </script>`)
+  })
+  const startUrl = await listenLocalHttpServer(server)
+  try {
+    const run = await runUrlFixture(startUrl, {
+      seed: "volatile-generated-ids",
+      failOnFinding: false,
+      budgets: { maxActions: 12, maxStates: 8, maxTransitions: 8, maxDurationMs: 15_000 },
+      actionFamilies: ["click"],
+    })
+    const initial = run.result.states[0]!
+    const choices = initial.descriptors.filter((descriptor) => descriptor.label === "Choose")
+    assert.equal(choices.length, 2)
+    assert.equal(new Set(choices.map((descriptor) => descriptor.id)).size, 2, "semantic occurrence keeps equivalent controls distinct")
+    assert.equal(new Set(choices.map((descriptor) => descriptor.selector)).size, 2, "execution retains each concrete selector")
+    const choiceTransitions = run.result.transitions.filter((transition) => transition.sourceDigest === initial.digest && transition.action.descriptorId && choices.some((descriptor) => descriptor.id === transition.action.descriptorId))
+    assert.equal(new Set(choiceTransitions.map((transition) => transition.destinationDigest)).size, 2, "distinct controls reach distinct semantic states")
+    assert(!run.result.transitions.some((transition) => transition.diagnostic?.code === "browser_adaptive_source_state_not_reproduced"))
+    assert(!run.result.diagnostics.some((diagnostic) => diagnostic.code === "browser_adaptive_reset_replay_failed"))
+    assert.notEqual(run.result.summary.budgetExhausted, "maxDurationMs")
+    assert(render > 2, "the fixture must generate fresh ids across resets")
+  } finally {
+    await closeHttpServer(server)
+  }
+})
+
 test("partially failed actions retain evidence without creating unreplayable frontier paths", async () => {
   const input = {
     seed: "partial-repeat",
@@ -310,6 +351,26 @@ async function runFixture(html: string, input: Record<string, unknown>, signal?:
   }
 }
 
+async function runUrlFixture(startUrl: string, input: Record<string, unknown>) {
+  const browser = await chromium.launch({ headless: true })
+  const page = await browser.newPage()
+  const consoleMessages: object[] = []
+  const errors: object[] = []
+  const network: object[] = []
+  page.on("console", (message) => consoleMessages.push({ type: message.type(), text: message.text() }))
+  page.on("pageerror", (error) => errors.push({ message: error.message }))
+  page.on("request", (request) => network.push({ url: request.url(), method: request.method() }))
+  await page.addInitScript("globalThis.__name = value => value")
+  await page.goto(startUrl, { waitUntil: "load" })
+  const contract = browserAdaptiveExplorationContract({ startUrl, stabilization: { pollIntervalMs: 25, quietWindowMs: 100, maxWaitMs: 1500, maxMutationRecords: 40 }, ...input })
+  try {
+    const result = await exploreAdaptiveBrowserStateMachine({ page, baseUrl: startUrl, contract, observations: { consoleMessages, errors, network } })
+    return { result, contract }
+  } finally {
+    await browser.close()
+  }
+}
+
 async function runRoutedFixture(topology: ReturnType<typeof browserPreviewTopology>, effectiveOrigin: string, initialHtml?: string) {
   const browser = await chromium.launch({ headless: true })
   const context = await browser.newContext()