fix(CDPBrowser): deterministic label focus forwarding and per-char key event typing

Clicking a <label> via the synthetic click path now explicitly focuses its
associated control (htmlFor lookup, else the first focusable descendant)
after el.click(), mirroring native label-activation behavior that Obscura
doesn't implement. This makes focus deterministic after I.click('Name')-style
label clicks and fixes the flakiness previously worked around with skips.

type() now dispatches a real keydown/keypress/input/keyup sequence per
character instead of setting el.value directly, and mutates textContent for
contenteditable hosts instead of a non-existent .value — closing a review
finding that the old implementation bypassed both real key events and the
contenteditable path. Delay pacing is unchanged (one client call per
character, real setTimeout between them).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: DavertMik

docs/helpers/CDPBrowser.md

@@ -1604,7 +1604,11 @@ Returns **void** 
 
 ### type
 
-Types characters into the currently focused element (as set by `click`, `focus`, etc).
+Types characters into the currently focused element (as set by `click`, `focus`, etc), one at a
+time. Each character dispatches a real `keydown` → `keypress` → (value mutated) → `input` →
+`keyup` sequence, and mutates a `contenteditable` host's `textContent` instead of `.value`, so
+this works on rich-text/contenteditable targets as well as `input`/`textarea`. Mirrors
+Puppeteer's `type(text, options)` semantics.
 
 ```js
 I.click('Name');

lib/helper/CDPBrowser.js

@@ -1968,7 +1968,11 @@ class CDPBrowser extends Helper {
   }
 
   /**
-   * Types characters into the currently focused element (as set by `click`, `focus`, etc).
+   * Types characters into the currently focused element (as set by `click`, `focus`, etc), one at a
+   * time. Each character dispatches a real `keydown` → `keypress` → (value mutated) → `input` →
+   * `keyup` sequence, and mutates a `contenteditable` host's `textContent` instead of `.value`, so
+   * this works on rich-text/contenteditable targets as well as `input`/`textarea`. Mirrors
+   * Puppeteer's `type(text, options)` semantics.
    *
    * ```js
    * I.click('Name');
@@ -1987,9 +1991,15 @@ class CDPBrowser extends Helper {
       const ok = await this._evaluate(`(function(){
         var el = document.activeElement
         if (!el) return false
-        el.value = (el.value || '') + ${JSON.stringify(key)}
+        var key = ${JSON.stringify(key)}
+        var opts = { key: key, bubbles: true, cancelable: true }
+        el.dispatchEvent(new KeyboardEvent('keydown', opts))
+        el.dispatchEvent(new KeyboardEvent('keypress', opts))
+        var isEditable = el.isContentEditable === true || el.getAttribute('contenteditable') === 'true'
+        if (isEditable) el.textContent = (el.textContent || '') + key
+        else el.value = (el.value || '') + key
         el.dispatchEvent(new Event('input', { bubbles: true }))
-        el.dispatchEvent(new Event('change', { bubbles: true }))
+        el.dispatchEvent(new KeyboardEvent('keyup', opts))
         return true
       })()`)
       if (!ok) throw new Error('No element is in focus. Use click or focus to set the active element before typing.')

lib/helper/clientscripts/cdpBrowserClient.js

@@ -159,6 +159,12 @@ export default function installCodeceptClient() {
   }
   const isAriaCheckable = el => el.getAttribute && el.getAttribute('aria-checked') != null
   const isChecked = el => (isAriaCheckable(el) ? el.getAttribute('aria-checked') === 'true' : el.checked === true)
+  const focusLabelledControl = label => {
+    let control = null
+    if (label.htmlFor) control = document.getElementById(label.htmlFor)
+    if (!control) control = label.querySelector('input, select, textarea, button, [contenteditable="true"]')
+    if (control && !control.disabled && control.focus) control.focus()
+  }
   const setChecked = (el, value) => {
     if (isAriaCheckable(el)) {
       if (isChecked(el) !== value) el.click()
@@ -231,7 +237,9 @@ export default function installCodeceptClient() {
       return { x: r.x, y: r.y, width: r.width, height: r.height }
     },
     click: els => {
-      els[0].click()
+      const el = els[0]
+      el.click()
+      if (el.tagName === 'LABEL') focusLabelledControl(el)
       return true
     },
     fill: (els, p) => {

test/helper/webapi.js

@@ -1019,7 +1019,6 @@ export function tests() {
   describe('#type', () => {
     beforeEach(function () {
       if (I.capabilities?.layout === 'none') this.skip() // clicking does not move real focus without a layout engine, so there is no activeElement to type into
-      if (isHelper('Obscura')) this.skip() // clicking a <label> to focus its associated field is non-deterministic on Obscura (verified: document.activeElement sometimes moves to the field, sometimes stays <body>, across otherwise-identical repeated runs), so typing has no reliable target
     })
 
     it('should type into a field', async () => {
@@ -2582,11 +2581,6 @@ export function tests() {
     })
 
     it('should not throw NonFocusedType when element is focused', async function () {
-      // I.click('Name') clicks the <label for="name"> to forward focus to its associated input —
-      // already-documented as non-deterministic on Obscura (document.activeElement sometimes
-      // moves to the field, sometimes stays <body>, across otherwise-identical repeated runs),
-      // same root cause as the #type describe's Obscura guard.
-      if (isHelper('Obscura')) this.skip()
       await I.amOnPage('/form/field')
       I.options.strict = true
       await I.click('Name')
@@ -2615,7 +2609,6 @@ export function tests() {
     })
 
     it('should not throw for Ctrl+A when element is focused', async function () {
-      if (isHelper('Obscura')) this.skip() // same label-click focus non-determinism as "should not throw NonFocusedType when element is focused" above
       await I.amOnPage('/form/field')
       I.options.strict = true
       await I.click('Name')