fix(cdp-browser): make Obscura run a real Ember app; fix aiTrace, step timing, role waits

Found while running the testomat.io e2e suite on Obscura.

CDPBrowser (Obscura, Lightpanda, Chrome over CDP):
- visibility: an inline or display:contents element with no box of its
  own (e.g. <a> wrapping a block card) is visible when a child is.
  Obscura reports no client rects for such inline elements.
- synthetic click fires pointerdown/mousedown/focus/pointerup/mouseup
  before click, so widgets that react to mousedown/mouseup (ember
  power-select, Radix) work.
- synthetic click on a non-interactive wrapper lands on the control at
  its center (elementFromPoint), like a coordinate click would.
- traffic is recorded once the response finished loading (matching
  Playwright's requestfinished), and redirect hops are recorded.

Playwright: waitFor* with role locators used [role="..."] css, ignoring
native roles and the accessible name; build an internal:role selector.

Core: HelperStep end time is taken when the async helper call settles,
so step durations are no longer ~0ms.

aiTrace: when a Before hook fails, only the running test writes the
trace, instead of every test in the suite overwriting it.

globalTimeout: ignore hook.finished for a suite hook that never fired
hook.started (TypeError on __prevSuiteTimeout.slice).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: DavertMik

lib/helper/CDPBrowser.js

@@ -1944,16 +1944,25 @@ class CDPBrowser extends Helper {
     this._trafficListenersInstalled = true
     this.cdp.on('Network.requestWillBeSent', (params, sessionId) => this._onTrafficRequest(params, sessionId))
     this.cdp.on('Network.responseReceived', (params, sessionId) => this._onTrafficResponse(params, sessionId))
+    this.cdp.on('Network.loadingFinished', (params, sessionId) => this._onTrafficLoadingFinished(params, sessionId))
     this.cdp.on('Network.loadingFailed', (params, sessionId) => this._onTrafficLoadingFailed(params, sessionId))
   }
 
   _onTrafficRequest(params, sessionId) {
-    if (!this.recording || sessionId !== this.sessionId) return
-    let resolveResponse
+    if (sessionId !== this.sessionId) return
+    if (params.redirectResponse) {
+      const redirected = this._pendingTrafficResponses.get(params.requestId)
+      if (redirected) {
+        this._pendingTrafficResponses.delete(params.requestId)
+        redirected.resolve(this._trafficResponse(params.redirectResponse, null))
+        if (this.recording) this.requests.push(redirected.request)
+      }
+    }
+    if (!this.recording) return
+    let resolve
     const response = new Promise(r => {
-      resolveResponse = r
+      resolve = r
     })
-    this._pendingTrafficResponses.set(params.requestId, resolveResponse)
     let requestPostData = params.request.postData
     if (requestPostData) {
       try {
@@ -1962,42 +1971,56 @@ class CDPBrowser extends Helper {
         // not JSON, keep as string
       }
     }
-    this.requests.push({
-      url: params.request.url,
-      method: params.request.method,
-      requestHeaders: params.request.headers,
-      requestPostData,
-      response,
+    this._pendingTrafficResponses.set(params.requestId, {
+      resolve,
+      request: {
+        url: params.request.url,
+        method: params.request.method,
+        requestHeaders: params.request.headers,
+        requestPostData,
+        response,
+      },
     })
   }
 
-  _onTrafficResponse(params, sessionId) {
-    if (sessionId !== this.sessionId) return
-    const resolve = this._pendingTrafficResponses.get(params.requestId)
-    if (!resolve) return
-    this._pendingTrafficResponses.delete(params.requestId)
-    const { response } = params
-    resolve({
+  _trafficResponse(response, requestId) {
+    return {
       url: () => response.url,
       status: () => response.status,
       statusText: () => response.statusText,
       body: async () => {
+        if (!requestId) return Buffer.from('')
         try {
-          const res = await this.cdp.send('Network.getResponseBody', { requestId: params.requestId }, this.sessionId)
+          const res = await this.cdp.send('Network.getResponseBody', { requestId }, this.sessionId)
           return res.base64Encoded ? Buffer.from(res.body, 'base64') : Buffer.from(res.body)
         } catch (e) {
           return Buffer.from('')
         }
       },
-    })
+    }
+  }
+
+  _onTrafficResponse(params, sessionId) {
+    if (sessionId !== this.sessionId) return
+    const pending = this._pendingTrafficResponses.get(params.requestId)
+    if (!pending) return
+    pending.resolve(this._trafficResponse(params.response, params.requestId))
+  }
+
+  _onTrafficLoadingFinished(params, sessionId) {
+    if (sessionId !== this.sessionId) return
+    const pending = this._pendingTrafficResponses.get(params.requestId)
+    if (!pending) return
+    this._pendingTrafficResponses.delete(params.requestId)
+    if (this.recording) this.requests.push(pending.request)
   }
 
   _onTrafficLoadingFailed(params, sessionId) {
     if (sessionId !== this.sessionId) return
-    const resolve = this._pendingTrafficResponses.get(params.requestId)
-    if (!resolve) return
+    const pending = this._pendingTrafficResponses.get(params.requestId)
+    if (!pending) return
     this._pendingTrafficResponses.delete(params.requestId)
-    resolve(null)
+    pending.resolve(null)
   }
 
   /**

lib/helper/Playwright.js

@@ -4257,6 +4257,12 @@ export function buildLocatorString(locator) {
     // { shadow: ['my-app', 'my-form', 'button'] } => 'my-app >> my-form >> button'
     return locator.value.join(' >> ')
   }
+  if (locator.isRole()) {
+    const { text, name, exact } = locator.locator || {}
+    const accessibleName = name ?? text
+    if (accessibleName === undefined) return `internal:role=${locator.value}`
+    return `internal:role=${locator.value}[name=${JSON.stringify(String(accessibleName))}${exact === true ? 's' : 'i'}]`
+  }
   return locator.simplify()
 }
 

lib/helper/clientscripts/cdpBrowserClient.js

@@ -39,6 +39,24 @@ export default function installCodeceptClient(xpathNeedsPolyfill) {
     }
     return []
   }
+  const isElementVisible = el => {
+    const style = getComputedStyle(el)
+    if (style.display === 'none' || style.visibility === 'hidden') return false
+    const r = el.getBoundingClientRect()
+    if (r.width > 0 && r.height > 0) return true
+    if (style.display !== 'inline' && style.display !== 'contents') return false
+    return Array.from(el.children).some(isElementVisible)
+  }
+  const INTERACTIVE = 'a[href], button, input, select, textarea, label, summary, option, [role="button"], [role="link"], [role="menuitem"], [role="option"], [role="tab"], [role="checkbox"], [role="radio"], [role="switch"]'
+  const clickTarget = (el, x, y) => {
+    if (el.matches(INTERACTIVE) || typeof document.elementFromPoint !== 'function') return el
+    let hit = document.elementFromPoint(x, y)
+    if (!hit || hit === el || !el.contains(hit)) return el
+    const control = hit.closest(INTERACTIVE)
+    if (control && el.contains(control)) return control
+    while (hit && !(hit instanceof HTMLElement)) hit = hit.parentElement
+    return hit && el.contains(hit) ? hit : el
+  }
   const SKIP_TEXT_TAGS = { SCRIPT: 1, STYLE: 1, NOSCRIPT: 1, TEMPLATE: 1 }
   const BLOCK_TEXT_TAGS = { DIV: 1, P: 1, BR: 1, LI: 1, TR: 1, H1: 1, H2: 1, H3: 1, H4: 1, H5: 1, H6: 1, SECTION: 1, ARTICLE: 1, UL: 1, OL: 1, TABLE: 1, FORM: 1 }
   const visibleText = root => {
@@ -327,8 +345,22 @@ export default function installCodeceptClient(xpathNeedsPolyfill) {
     },
     click: els => {
       const el = els[0]
-      el.click()
-      if (el.tagName === 'LABEL') focusLabelledControl(el)
+      const r = el.getBoundingClientRect()
+      const x = r.x + r.width / 2
+      const y = r.y + r.height / 2
+      const target = clickTarget(el, x, y)
+      if (!target.disabled) {
+        const init = { bubbles: true, cancelable: true, composed: true, view: window, button: 0, clientX: x, clientY: y }
+        const fire = (Ctor, type, buttons) => target.dispatchEvent(new Ctor(type, { ...init, buttons, pointerId: 1, pointerType: 'mouse', isPrimary: true }))
+        const Pointer = typeof PointerEvent === 'function' ? PointerEvent : null
+        if (Pointer) fire(Pointer, 'pointerdown', 1)
+        const focusAllowed = fire(MouseEvent, 'mousedown', 1)
+        if (focusAllowed && typeof target.focus === 'function') target.focus()
+        if (Pointer) fire(Pointer, 'pointerup', 0)
+        fire(MouseEvent, 'mouseup', 0)
+      }
+      target.click()
+      if (target.tagName === 'LABEL') focusLabelledControl(target)
       return true
     },
     fill: (els, p) => {
@@ -451,11 +483,7 @@ export default function installCodeceptClient(xpathNeedsPolyfill) {
       dispatch('drop')
       return true
     },
-    visibleCount: els => els.filter(el => {
-      const r = el.getBoundingClientRect()
-      const style = getComputedStyle(el)
-      return r.width > 0 && r.height > 0 && style.visibility !== 'hidden' && style.display !== 'none'
-    }).length,
+    visibleCount: els => els.filter(isElementVisible).length,
   }
   const candidatesNeedXPath = (candidates, within) => {
     const hasXPath = arr => Array.isArray(arr) && arr.some(c => c && c.type === 'xpath')

lib/listener/globalTimeout.js

@@ -41,9 +41,12 @@ export default function () {
 
   event.dispatcher.on(event.hook.finished, hook => {
     if (hook instanceof BeforeSuiteHook || hook instanceof AfterSuiteHook) {
+      if (__prevSuiteTimeout === undefined) return
       // restore previously stored values
       timeout = __prevTimeout
       suiteTimeout = __prevSuiteTimeout.slice()
+      __prevTimeout = undefined
+      __prevSuiteTimeout = undefined
     }
   })
 

lib/plugin/aiTrace.js

@@ -235,6 +235,7 @@ export default function (config = {}) {
     if (hookName === 'BeforeSuite' || hookName === 'AfterSuite') {
       return
     }
+    if (test !== currentTest) return
     recorder.add('aiTrace:persist failed', async () => {
       if (pendingArtifactCapture) {
         await pendingArtifactCapture

lib/step/helper.js

@@ -29,6 +29,12 @@ class HelperStep extends Step {
       }
       this.setStatus('success')
       this.endTime = +Date.now()
+      if (result && typeof result.then === 'function') {
+        const finish = () => {
+          this.endTime = +Date.now()
+        }
+        result.then(finish, finish)
+      }
     } catch (err) {
       this.endTime = +Date.now()
       this.setStatus('failed')

test/helper/CDPBrowser_chrome_test.js

@@ -53,6 +53,20 @@ describe('CDPBrowser (against Chrome)', function () {
     expect(await I.grabSource()).to.include('<html')
   })
 
+  it('records each redirect hop once its response arrived', async () => {
+    await I.amOnPage('/')
+    await I.startRecordingTraffic()
+    await I.amOnPage('/redirect')
+    await I.seeTraffic({ name: 'redirected page', url: '/info', timeout: 5 })
+    const traffic = await I.grabRecordedNetworkTraffics()
+    const redirect = traffic.find(t => t.url.endsWith('/redirect'))
+    const info = traffic.find(t => t.url.endsWith('/info'))
+    expect(redirect && redirect.response.status).to.equal(302)
+    expect(info && info.response.status).to.equal(200)
+    I.stopRecordingTraffic()
+    I.recordedAtLeastOnce = false
+  })
+
   it('executes scripts with arguments', async () => {
     await I.amOnPage('/')
     const val = await I.executeScript((a, b) => a + b, 2, 3)

test/helper/CDPBrowser_obscura_test.js

@@ -80,6 +80,71 @@ describe('Obscura helper (self-managed obscura serve)', function () {
     }
   })
 
+  it('sees an inline link that wraps only block children', async function () {
+    await I.amOnPage('/')
+    if (I.capabilities.layout !== 'real') this.skip()
+    await I.executeScript(() => {
+      const wrapper = document.createElement('div')
+      wrapper.innerHTML = '<a id="card-link" href="#"><div style="height:20px">card</div></a><a id="empty-link" href="#"></a><span id="hidden-card" style="display:contents"><div style="display:none">x</div></span>'
+      document.body.appendChild(wrapper)
+    })
+    await I.seeElement('#card-link')
+    await I.waitForVisible('#card-link', 1)
+    await I.dontSeeElement('#empty-link')
+    await I.dontSeeElement('#hidden-card')
+  })
+
+  it('clicks with the pointer and mouse events a real click fires', async () => {
+    await I.amOnPage('/')
+    await I.executeScript(() => {
+      const wrapper = document.createElement('div')
+      wrapper.innerHTML = '<div id="mousedown-trigger" tabindex="0" style="height:20px">open</div><div id="mousedown-menu" style="display:none">menu</div><button id="disabled-btn" disabled>off</button>'
+      document.body.appendChild(wrapper)
+      window.__clickEvents = []
+      const trigger = document.getElementById('mousedown-trigger')
+      for (const type of ['pointerdown', 'mousedown', 'focus', 'pointerup', 'mouseup', 'click']) {
+        trigger.addEventListener(type, () => window.__clickEvents.push(type))
+      }
+      trigger.addEventListener('mousedown', () => {
+        document.getElementById('mousedown-menu').style.display = 'block'
+      })
+      document.getElementById('disabled-btn').addEventListener('mousedown', () => window.__clickEvents.push('disabled-mousedown'))
+    })
+    await I.click('#mousedown-trigger')
+    await I.forceClick('#disabled-btn')
+    const events = await I.executeScript(() => window.__clickEvents)
+    expect(events.filter(e => e !== 'pointerdown' && e !== 'pointerup')).to.deep.equal(['mousedown', 'focus', 'mouseup', 'click'])
+    await I.seeElement('#mousedown-menu')
+  })
+
+  it('clicks the control a wrapper element covers, like a real click lands', async function () {
+    await I.amOnPage('/')
+    if (I.capabilities.layout !== 'real') this.skip()
+    await I.executeScript(() => {
+      const wrapper = document.createElement('div')
+      wrapper.innerHTML =
+        '<ul><li id="menu-item"><button type="button" id="menu-button" style="display:block;width:100%;height:30px"><span>New suite</span></button></li></ul><div id="opened" style="display:none">opened</div>'
+      document.body.prepend(wrapper)
+      document.getElementById('menu-button').addEventListener('click', e => {
+        if (e.target.closest('#menu-button')) document.getElementById('opened').style.display = 'block'
+      })
+    })
+    await I.click('#menu-item')
+    await I.seeElement('#opened')
+  })
+
+  it('records traffic after the response finished loading', async () => {
+    await I.amOnPage('/')
+    await I.startRecordingTraffic()
+    await I.amOnPage('/info')
+    await I.seeTraffic({ name: 'info page', url: '/info', timeout: 5 })
+    const traffic = await I.grabRecordedNetworkTraffics()
+    const info = traffic.find(t => t.url.endsWith('/info'))
+    expect(info && info.response.status).to.equal(200)
+    I.stopRecordingTraffic()
+    I.recordedAtLeastOnce = false
+  })
+
   it('skips screenshots without failing when there is no rendering engine', async function () {
     await I.amOnPage('/')
     if (I.capabilities.screenshot !== false) this.skip() // this binary can render; saveScreenshot writes a file instead

test/helper/Playwright_test.js

@@ -317,6 +317,25 @@ describe('Playwright', function () {
     })
   })
 
+  describe('#waitForVisible #waitForInvisible - role locators', () => {
+    it('should wait for a native button by its role and accessible name', async () => {
+      await I.amOnPage('/form/example1')
+      await I.waitForVisible({ role: 'button', text: 'Login', exact: true }, 2)
+      await I.waitForElement({ role: 'button', text: 'Log' }, 2)
+      await I.waitForInvisible({ role: 'button', text: 'Logout' }, 2)
+    })
+
+    it('should not match a partial name when exact is set', async () => {
+      await I.amOnPage('/form/example1')
+      try {
+        await I.waitForVisible({ role: 'button', text: 'Log', exact: true }, 1)
+        throw new Error('should have thrown')
+      } catch (err) {
+        expect(err.message).to.include('still not visible')
+      }
+    })
+  })
+
   describe('#waitForVisible #waitForInvisible - within block', () => {
     it('should wait for visible element', async () => {
       await I.amOnPage('/iframe')

test/unit/listener/globalTimeout_hooks_test.js

@@ -0,0 +1,39 @@
+import { expect } from 'chai'
+import event from '../../../lib/event.js'
+import store from '../../../lib/store.js'
+import globalTimeoutListener from '../../../lib/listener/globalTimeout.js'
+import { AfterSuiteHook } from '../../../lib/mocha/hooks.js'
+
+describe('globalTimeout listener - suite hooks', () => {
+  let prevTimeouts
+
+  const removeHookListeners = () => {
+    for (const name of Object.values(event.hook)) event.dispatcher.removeAllListeners(name)
+  }
+
+  beforeEach(() => {
+    prevTimeouts = store.timeouts
+    store.timeouts = true
+    event.cleanDispatcher()
+    removeHookListeners()
+    globalTimeoutListener()
+  })
+
+  afterEach(() => {
+    store.timeouts = prevTimeouts
+    event.cleanDispatcher()
+    removeHookListeners()
+  })
+
+  it('ignores hook.finished for a suite hook that never fired hook.started', () => {
+    const hook = new AfterSuiteHook({ suite: { title: 'suite' } })
+    expect(() => event.dispatcher.emit(event.hook.finished, hook)).not.to.throw()
+  })
+
+  it('restores saved timeouts only once per started suite hook', () => {
+    const hook = new AfterSuiteHook({ suite: { title: 'suite' } })
+    event.dispatcher.emit(event.hook.started, hook)
+    event.dispatcher.emit(event.hook.finished, hook)
+    expect(() => event.dispatcher.emit(event.hook.finished, hook)).not.to.throw()
+  })
+})