feat(CDPBrowser): detect render/no-render engines, add CDP timing metrics

- Detect layout support with a stylesheet probe: Obscura 0.2.x no-render
  builds ignore stylesheet rules and were misdetected as layout+screenshot
  capable. Print the detected engine once per run.
- Time every CDP command; DEBUG=codeceptjs:cdp prints per-call durations
  and a per-method summary when the connection closes.
- Reuse the page text from a failed see() for the error message instead
  of walking the whole page a second time.
- Skip role-locator visibility tests on engines without layout.

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

Author: DavertMik

lib/helper/CDPBrowser.js

@@ -8,6 +8,7 @@ import CDPConnection from './extras/CDPConnection.js'
 import installCodeceptClient from './clientscripts/cdpBrowserClient.js'
 import xpathPolyfillSource from './clientscripts/xpathPolyfill.js'
 import Locator from '../locator.js'
+import output from '../output.js'
 import store from '../store.js'
 import { xpathLocator, normalizePath, resolveUrl, toCamelCase, convertCssPropertiesToCamelCase, normalizeSpacesInString, fileExists, base64EncodeFile, getMimeType, isFile, isWindows } from '../utils.js'
 import ElementNotFound from './errors/ElementNotFound.js'
@@ -595,8 +596,19 @@ class CDPBrowser extends Helper {
 
   async _probeCapabilities() {
     if (this.capabilities.layout === null) {
-      const display = await this._evaluate(`getComputedStyle(document.documentElement).display`)
-      this.capabilities.layout = display === '' ? 'none' : 'real'
+      const display = await this._evaluate(`(function(){
+        var style = document.createElement('style')
+        style.textContent = '.__codecept-layout-probe{display:none}'
+        document.documentElement.appendChild(style)
+        var probe = document.createElement('div')
+        probe.className = '__codecept-layout-probe'
+        ;(document.body || document.documentElement).appendChild(probe)
+        var display = getComputedStyle(probe).display
+        style.remove()
+        probe.remove()
+        return display
+      })()`)
+      this.capabilities.layout = display === 'none' ? 'real' : 'none'
     }
     if (this.capabilities.screenshot === null) {
       this.capabilities.screenshot = this.capabilities.layout === 'real'
@@ -610,6 +622,13 @@ class CDPBrowser extends Helper {
     if (this.capabilities.innerText === null) {
       await this._needsVisibleTextFallback()
     }
+    if (!this._engineReported) {
+      this._engineReported = true
+      let engine = 'render (layout and screenshots)'
+      if (this.capabilities.layout === 'none') engine = 'no-render (DOM only: no layout, visibility checks or screenshots)'
+      else if (!this.capabilities.screenshot) engine = 'layout without screenshots'
+      output.print(`${this.constructor.name} engine: ${engine}`)
+    }
   }
 
   async _run(candidates, action, payload, context = null) {
@@ -807,7 +826,8 @@ class CDPBrowser extends Helper {
     const useWalker = await this._needsVisibleTextFallback()
     const res = await this._runTextCheck(text, { ignoreCase, useWalker })
     if (negate ? !res.found : res.found) return
-    let source = await this._textSource(null)
+    let source = res.text
+    if (source === undefined) source = await this._textSource(null)
     let needle = text
     if (ignoreCase) {
       needle = needle.toLowerCase()

lib/helper/clientscripts/cdpBrowserClient.js

@@ -76,7 +76,7 @@ export default function installCodeceptClient(xpathNeedsPolyfill) {
     const hayCmp = opts.ignoreCase ? hay.toLowerCase() : hay
     const needleCmp = opts.ignoreCase ? needleNorm.toLowerCase() : needleNorm
     const idx = hayCmp.indexOf(needleCmp)
-    if (idx === -1) return { found: false, snippet: null }
+    if (idx === -1) return { found: false, snippet: null, text: hay }
     const from = Math.max(0, idx - 60)
     return { found: true, snippet: hay.slice(from, idx + needleNorm.length + 60) }
   }

lib/helper/extras/CDPConnection.js

@@ -1,4 +1,7 @@
 import { WebSocket } from 'ws'
+import debugModule from 'debug'
+
+const debug = debugModule('codeceptjs:cdp')
 
 class CDPConnection {
   constructor(endpoint, options = {}) {
@@ -9,6 +12,7 @@ class CDPConnection {
     this.lastId = 0
     this.pending = new Map()
     this.listeners = new Map()
+    this.stats = new Map()
   }
 
   async connect() {
@@ -44,14 +48,35 @@ class CDPConnection {
     const id = ++this.lastId
     const message = { id, method, params }
     if (sessionId) message.sessionId = sessionId
-    return new Promise((resolve, reject) => {
+    const started = Date.now()
+    const promise = new Promise((resolve, reject) => {
       const timer = setTimeout(() => {
         this.pending.delete(id)
         reject(new Error(`CDP command ${method} timed out after ${this.timeout}ms`))
       }, this.timeout)
       this.pending.set(id, { resolve, reject, timer })
       this.ws.send(JSON.stringify(message))
     })
+    const record = () => {
+      const ms = Date.now() - started
+      const stat = this.stats.get(method) || { count: 0, total: 0, max: 0 }
+      stat.count++
+      stat.total += ms
+      if (ms > stat.max) stat.max = ms
+      this.stats.set(method, stat)
+      let detail = ''
+      if (params.expression) detail = params.expression.slice(0, 80).replace(/\s+/g, ' ')
+      debug(`${method} ${ms}ms`, detail)
+    }
+    promise.then(record, record)
+    return promise
+  }
+
+  printStats() {
+    const rows = [...this.stats.entries()].sort((a, b) => b[1].total - a[1].total)
+    for (const [method, { count, total, max }] of rows) {
+      debug(`${method}: ${count} calls, total ${total}ms, avg ${Math.round(total / count)}ms, max ${max}ms`)
+    }
   }
 
   on(method, fn) {
@@ -80,6 +105,7 @@ class CDPConnection {
 
   async close() {
     if (!this.ws) return
+    this.printStats()
     await new Promise(resolve => {
       if (this.ws.readyState === WebSocket.CLOSED) return resolve()
       this.ws.once('close', resolve)

test/helper/webapi.js

@@ -2618,7 +2618,8 @@ export function tests() {
   })
 
   describe('role locators', () => {
-    it('should locate elements by role', async () => {
+    it('should locate elements by role', async function () {
+      if (I.capabilities?.layout === 'none') this.skip() // visibility requires a real layout engine
       await I.amOnPage('/form/role_elements')
 
       // Test basic role locators
@@ -2634,7 +2635,8 @@ export function tests() {
       await I.seeNumberOfVisibleElements({ role: 'checkbox' }, 2)
     })
 
-    it('should locate elements by role with text filter', async () => {
+    it('should locate elements by role with text filter', async function () {
+      if (I.capabilities?.layout === 'none') this.skip() // visibility requires a real layout engine
       await I.amOnPage('/form/role_elements')
 
       // Test role with text (exact match)