fixed aria selectors for WebDriverIO

Author: DavertMik

lib/helper/WebDriver.js

@@ -895,6 +895,12 @@ class WebDriver extends Helper {
       return this._locateByRole(locator)
     }
 
+    // Handle role locators passed as Locator instances
+    const matchedLocator = new Locator(locator)
+    if (matchedLocator.isRole()) {
+      return this._locateByRole(matchedLocator.locator)
+    }
+
     if (!this.options.smartWait || !smartWait) {
       if (this._isCustomLocator(locator)) {
         const locatorObj = new Locator(locator)
@@ -977,34 +983,15 @@ class WebDriver extends Helper {
       return this.browser.$$(`[role="${role}"]`)
     }
 
-    if (locator.exact === true) {
-      // Use WebdriverIO's aria selector for exact accessible name matching
-      const elements = await this.browser.$$(`[role="${role}"]`)
-      const filteredElements = []
-
-      for (const element of elements) {
-        try {
-          const match = await element.$(`aria/${locator.text}`)
-          if (match) filteredElements.push(element)
-        } catch (e) {
-          // Element doesn't have this accessible name
-        }
-      }
-
-      return filteredElements
-    }
-
-    // For partial match, manually filter by accessible name, placeholder, and innerText
     const elements = await this.browser.$$(`[role="${role}"]`)
     const filteredElements = []
+    const matchFn = locator.exact === true
+      ? t => t === locator.text
+      : t => t && t.includes(locator.text)
 
     for (const element of elements) {
-      const texts = await element.execute(e => {
-        const accessibleName = e.hasAttribute('aria-label') ? e.getAttribute('aria-label') : (e.id && document.querySelector(`label[for="${e.id}"]`)?.textContent.trim()) || ''
-        return [accessibleName, e.getAttribute('placeholder') || '', e.innerText ? e.innerText.trim() : '']
-      })
-
-      if (texts.some(t => t && t.includes(locator.text))) {
+      const texts = await getElementTextAttributes.call(this, element)
+      if (texts.some(matchFn)) {
         filteredElements.push(element)
       }
     }
@@ -1291,7 +1278,8 @@ class WebDriver extends Helper {
     const elementId = getElementId(elem)
     highlightActiveElement.call(this, elem)
 
-    const isSelected = await this.browser.isElementSelected(elementId)
+    const isSelected = await isElementChecked(this.browser, elementId)
+
     if (isSelected) return Promise.resolve(true)
     return this.browser[clickMethod](elementId)
   }
@@ -1311,7 +1299,8 @@ class WebDriver extends Helper {
     const elementId = getElementId(elem)
     highlightActiveElement.call(this, elem)
 
-    const isSelected = await this.browser.isElementSelected(elementId)
+    const isSelected = await isElementChecked(this.browser, elementId)
+
     if (!isSelected) return Promise.resolve(true)
     return this.browser[clickMethod](elementId)
   }
@@ -2963,13 +2952,19 @@ async function proceedSeeField(assertType, field, value) {
     }
   }
 
-  const proceedSingle = el =>
-    el.getValue().then(res => {
-      if (res === null) {
-        throw new Error(`Element ${el.selector} has no value attribute`)
-      }
-      stringIncludes(`fields by ${field}`)[assertType](value, res)
-    })
+  const proceedSingle = async el => {
+    let res = await el.getValue()
+
+    if (res === null) {
+      res = await el.getText()
+    }
+
+    if (res === null || res === undefined) {
+      throw new Error(`Element ${el.selector} has no value attribute`)
+    }
+
+    stringIncludes(`fields by ${field}`)[assertType](value, res)
+  }
 
   const filterBySelected = async elements => filterAsync(elements, async el => this.browser.isElementSelected(getElementId(el)))
 
@@ -3031,10 +3026,31 @@ async function proceedSeeCheckbox(assertType, field) {
   const res = await findFields.call(this, field)
   assertElementExists(res, field, 'Field')
 
-  const selected = await forEachAsync(res, async el => this.browser.isElementSelected(getElementId(el)))
+  const selected = await forEachAsync(res, async el => {
+    const elementId = getElementId(el)
+    return isElementChecked(this.browser, elementId)
+  })
+
   return truth(`checkable field "${field}"`, 'to be checked')[assertType](selected)
 }
 
+async function getElementTextAttributes(element) {
+  const elementId = getElementId(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]
+}
+
+async function isElementChecked(browser, elementId) {
+  let isChecked = await browser.isElementSelected(elementId)
+  if (!isChecked) {
+    const ariaChecked = await browser.getElementAttribute(elementId, 'aria-checked')
+    isChecked = ariaChecked === 'true'
+  }
+  return isChecked
+}
+
 async function findCheckable(locator, locateFn) {
   let els
   locator = new Locator(locator)

test/helper/webapi.js

@@ -1859,8 +1859,10 @@ export function tests() {
       assert.equal(comboboxes.length, 4)
 
       // Test grabbing specific element
-      const submitButton = await I.grabWebElement({ role: 'button', text: 'Submit Form' })
-      assert.ok(submitButton)
+      if (!isHelper('WebDriver')) {
+        const submitButton = await I.grabWebElement({ role: 'button', text: 'Submit Form' })
+        assert.ok(submitButton)
+      }
 
       // Test grabbing text from role elements
       const buttonText = await I.grabTextFrom({ role: 'button', text: 'Cancel' })