fix: resolve aria-labelledby for combobox/listbox in WebDriver selectOption

Author: DavertMik

lib/helper/WebDriver.js

@@ -1314,11 +1314,11 @@ class WebDriver extends Helper {
 
     // Fuzzy: try combobox
     this.debugSection('SelectOption', `Fuzzy: "${matchedLocator.value}"`)
-    let els = await this._locateByRole({ role: 'combobox', name: matchedLocator.value })
+    let els = await this._locateByRole({ role: 'combobox', text: matchedLocator.value })
     if (els?.length) return proceedSelectOption.call(this, usingFirstElement(els), option)
 
     // Fuzzy: try listbox
-    els = await this._locateByRole({ role: 'listbox', name: matchedLocator.value })
+    els = await this._locateByRole({ role: 'listbox', text: matchedLocator.value })
     if (els?.length) return proceedSelectOption.call(this, usingFirstElement(els), option)
 
     // Fuzzy: try native select
@@ -3124,7 +3124,23 @@ async function getElementTextAttributes(element) {
   const ariaLabel = await this.browser.getElementAttribute(elementId, 'aria-label').catch(() => '')
   const placeholder = await this.browser.getElementAttribute(elementId, 'placeholder').catch(() => '')
   const innerText = await this.browser.getElementText(elementId).catch(() => '')
-  return [ariaLabel, placeholder, innerText]
+
+  // Handle aria-labelledby
+  const labelledBy = await this.browser.getElementAttribute(elementId, 'aria-labelledby').catch(() => '')
+  let labelText = ''
+  if (labelledBy) {
+    try {
+      const labelId = labelledBy.split(' ')[0]
+      const labelEls = await this.browser.$$(`#${labelId}`)
+      if (labelEls?.length) {
+        labelText = await this.browser.getElementText(getElementId(labelEls[0])).catch(() => '')
+      }
+    } catch (e) {
+      // Ignore errors when resolving aria-labelledby
+    }
+  }
+
+  return [ariaLabel, placeholder, innerText, labelText]
 }
 
 async function isElementChecked(browser, elementId) {
@@ -3382,38 +3398,56 @@ async function proceedSelectOption(elem, option) {
     highlightActiveElement.call(this, elem)
     const ariaOwns = await this.browser.getElementAttribute(elementId, 'aria-owns').catch(() => null)
     const ariaControls = await this.browser.getElementAttribute(elementId, 'aria-controls').catch(() => null)
+    const ariaLabelledBy = await this.browser.getElementAttribute(elementId, 'aria-labelledby').catch(() => null)
     await this.browser.elementClick(elementId)
-    await this._waitForAction()
 
     const listboxId = ariaOwns || ariaControls
     let listbox = null
     if (listboxId) {
       const listboxEls = await this.browser.$$(`#${listboxId}`)
       if (listboxEls?.length) listbox = listboxEls[0]
     }
-    if (!listbox) {
-      const listboxEls = await this._locateByRole({ role: 'listbox' })
+    if (!listbox && ariaLabelledBy) {
+      // Find listbox with the same aria-labelledby
+      const listboxEls = await this.browser.$$(`[role="listbox"][aria-labelledby="${ariaLabelledBy}"]`)
       if (listboxEls?.length) listbox = listboxEls[0]
     }
+    if (!listbox) {
+      // Fallback: find any listbox with the same label
+      const allListboxes = await this.browser.$$(`[role="listbox"]`)
+      for (const lb of allListboxes) {
+        const lbLabelledBy = await this.browser.getElementAttribute(getElementId(lb), 'aria-labelledby').catch(() => '')
+        if (lbLabelledBy === ariaLabelledBy) {
+          listbox = lb
+          break
+        }
+      }
+    }
 
     if (listbox) {
       const listboxElementId = getElementId(listbox)
       for (const opt of options) {
-        const optEls = await this._locateByRole({ role: 'option', text: opt })
+        const optEls = await this.browser.findElementsFromElement(listboxElementId, 'xpath', `.//*[@role="option"]`)
         if (optEls?.length) {
-          const optEl = optEls[0]
-          this.debugSection('SelectOption', `Clicking: "${opt}"`)
-          highlightActiveElement.call(this, optEl)
-          await this.browser.elementClick(getElementId(optEl))
+          for (const optEl of optEls) {
+            const optElId = getElementId(optEl)
+            const text = await this.browser.getElementText(optElId).catch(() => '')
+            if (text && text.includes(opt)) {
+              this.debugSection('SelectOption', `Clicking: "${opt}"`)
+              highlightActiveElement.call(this, optEl)
+              await this.browser.elementClick(optElId)
+              break
+            }
+          }
         }
       }
     }
-    return this._waitForAction()
+    return
   }
 
   if (role === 'listbox') {
     for (const opt of options) {
-      const optEls = await this.browser.findElementsFromElement(elementId, 'css', `[role="option"]`)
+      const optEls = await this.browser.findElementsFromElement(elementId, 'xpath', `.//*[@role="option"]`)
       if (optEls?.length) {
         for (const optEl of optEls) {
           const optElId = getElementId(optEl)
@@ -3427,7 +3461,7 @@ async function proceedSelectOption(elem, option) {
         }
       }
     }
-    return this._waitForAction()
+    return
   }
 
   // Native <select> element