implemented aria selectors for PW/WebDriver/Puppeteer

Author: DavertMik

lib/helper/Playwright.js

@@ -30,7 +30,7 @@ import ElementNotFound from './errors/ElementNotFound.js'
 import RemoteBrowserConnectionRefused from './errors/RemoteBrowserConnectionRefused.js'
 import Popup from './extras/Popup.js'
 import Console from './extras/Console.js'
-import { findReact, findVue, findByPlaywrightLocator } from './extras/PlaywrightReactVueLocator.js'
+import { buildLocatorString, findElements, findElement, getVisibleElements, findReact, findVue, findByPlaywrightLocator, findByRole } from './extras/PlaywrightLocator.js'
 
 let playwright
 let perfTiming
@@ -2424,13 +2424,21 @@ class Playwright extends Helper {
    *
    */
   async grabTextFrom(locator) {
+    const originalLocator = locator
+    if (typeof locator === 'object' && (locator.role || locator.react || locator.vue || locator.pw)) {
+      const els = await this._locate(locator)
+      assertElementExists(els, locator)
+      const text = await els[0].innerText()
+      this.debugSection('Text', text)
+      return text
+    }
     locator = this._contextLocator(locator)
     let text
     try {
       text = await this.page.textContent(locator)
     } catch (err) {
       if (err.message.includes('Timeout') || err.message.includes('exceeded')) {
-        throw new Error(`Element ${new Locator(locator).toString()} was not found by text|CSS|XPath`)
+        throw new Error(`Element ${new Locator(originalLocator).toString()} was not found by text|CSS|XPath`)
       }
       throw err
     }
@@ -3821,47 +3829,6 @@ class Playwright extends Helper {
 
 export default Playwright
 
-function buildLocatorString(locator) {
-  if (locator.isCustom()) {
-    return `${locator.type}=${locator.value}`
-  }
-  if (locator.isXPath()) {
-    return `xpath=${locator.value}`
-  }
-  return locator.simplify()
-}
-
-async function findElements(matcher, locator) {
-  if (locator.react) return findReact(matcher, locator)
-  if (locator.vue) return findVue(matcher, locator)
-  if (locator.pw) return findByPlaywrightLocator.call(this, matcher, locator)
-  locator = new Locator(locator, 'css')
-
-  return matcher.locator(buildLocatorString(locator)).all()
-}
-
-async function findElement(matcher, locator) {
-  if (locator.react) return findReact(matcher, locator)
-  if (locator.vue) return findVue(matcher, locator)
-  if (locator.pw) return findByPlaywrightLocator.call(this, matcher, locator)
-  locator = new Locator(locator, 'css')
-
-  return matcher.locator(buildLocatorString(locator)).first()
-}
-
-async function getVisibleElements(elements) {
-  const visibleElements = []
-  for (const element of elements) {
-    if (await element.isVisible()) {
-      visibleElements.push(element)
-    }
-  }
-  if (visibleElements.length === 0) {
-    return elements
-  }
-  return visibleElements
-}
-
 async function proceedClick(locator, context = null, options = {}) {
   let matcher = await this._getContext()
   if (context) {
@@ -3901,13 +3868,28 @@ async function findClickable(matcher, locator) {
   if (locator.react) return findReact(matcher, locator)
   if (locator.vue) return findVue(matcher, locator)
   if (locator.pw) return findByPlaywrightLocator.call(this, matcher, locator)
+  if (locator.role) return findByRole(matcher, locator)
 
   locator = new Locator(locator)
   if (!locator.isFuzzy()) return findElements.call(this, matcher, locator)
 
   let els
   const literal = xpathLocator.literal(locator.value)
 
+  try {
+    els = await matcher.getByRole('button', { name: locator.value }).all()
+    if (els.length) return els
+  } catch (err) {
+    // getByRole not supported or failed
+  }
+
+  try {
+    els = await matcher.getByRole('link', { name: locator.value }).all()
+    if (els.length) return els
+  } catch (err) {
+    // getByRole not supported or failed
+  }
+
   els = await findElements.call(this, matcher, Locator.clickable.narrow(literal))
   if (els.length) return els
 
@@ -3960,6 +3942,10 @@ async function findCheckable(locator, context) {
     contextEl = contextEl[0]
   }
 
+  if (typeof locator === 'object' && (locator.role || locator.react || locator.vue || locator.pw)) {
+    return findElements.call(this, contextEl, locator)
+  }
+
   const matchedLocator = new Locator(locator)
   if (!matchedLocator.isFuzzy()) {
     return findElements.call(this, contextEl, matchedLocator.simplify())
@@ -3986,6 +3972,9 @@ async function proceedIsChecked(assertType, option) {
 }
 
 async function findFields(locator) {
+  if (typeof locator === 'object' && (locator.role || locator.react || locator.vue || locator.pw)) {
+    return this._locate(locator)
+  }
   const matchedLocator = new Locator(locator)
   if (!matchedLocator.isFuzzy()) {
     return this._locate(matchedLocator)

lib/helper/Puppeteer.js

@@ -979,6 +979,12 @@ class Puppeteer extends Helper {
     return this._locate(locator)
   }
 
+  async grabWebElement(locator) {
+    const els = await this._locate(locator)
+    assertElementExists(els, locator)
+    return els[0]
+  }
+
   /**
    * Switch focus to a particular tab by its number. It waits tabs loading and then switch tab
    *
@@ -2740,6 +2746,7 @@ class Puppeteer extends Helper {
 
 async function findElements(matcher, locator) {
   if (locator.react) return findReactElements.call(this, locator)
+  if (locator.role) return findByRole.call(this, matcher, locator)
   locator = new Locator(locator, 'css')
   if (!locator.isXPath()) return matcher.$$(locator.simplify())
 
@@ -2786,6 +2793,7 @@ async function proceedClick(locator, context = null, options = {}) {
 
 async function findClickable(matcher, locator) {
   if (locator.react) return findReactElements.call(this, locator)
+  if (locator.role) return findByRole.call(this, matcher, locator)
   locator = new Locator(locator)
   if (!locator.isFuzzy()) return findElements.call(this, matcher, locator)
 
@@ -2805,6 +2813,14 @@ async function findClickable(matcher, locator) {
     // Do nothing
   }
 
+  // Try ARIA selector for accessible name
+  try {
+    els = await matcher.$$(`::-p-aria(${locator.value})`)
+    if (els.length) return els
+  } catch (err) {
+    // ARIA selector not supported or failed
+  }
+
   return findElements.call(this, matcher, locator.value) // by css or xpath
 }
 
@@ -2847,6 +2863,10 @@ async function findCheckable(locator, context) {
     contextEl = contextEl[0]
   }
 
+  if (typeof locator === 'object' && (locator.role || locator.react || locator.vue || locator.pw)) {
+    return findElements.call(this, contextEl, locator)
+  }
+
   const matchedLocator = new Locator(locator)
   if (!matchedLocator.isFuzzy()) {
     return findElements.call(this, contextEl, matchedLocator.simplify())
@@ -2861,6 +2881,15 @@ async function findCheckable(locator, context) {
   if (els.length) {
     return els
   }
+
+  // Try ARIA selector for accessible name
+  try {
+    els = await contextEl.$$(`::-p-aria(${locator})`)
+    if (els.length) return els
+  } catch (err) {
+    // ARIA selector not supported or failed
+  }
+
   return findElements.call(this, contextEl, locator)
 }
 
@@ -2880,6 +2909,9 @@ async function findVisibleFields(locator) {
 }
 
 async function findFields(locator) {
+  if (typeof locator === 'object' && (locator.role || locator.react || locator.vue || locator.pw)) {
+    return this._locate(locator)
+  }
   const matchedLocator = new Locator(locator)
   if (!matchedLocator.isFuzzy()) {
     return this._locate(matchedLocator)
@@ -2899,6 +2931,16 @@ async function findFields(locator) {
   if (els.length) {
     return els
   }
+
+  // Try ARIA selector for accessible name
+  try {
+    const page = await this.context
+    els = await page.$$(`::-p-aria(${locator})`)
+    if (els.length) return els
+  } catch (err) {
+    // ARIA selector not supported or failed
+  }
+
   return this._locate({ css: locator })
 }
 
@@ -3212,4 +3254,29 @@ async function findReactElements(locator, props = {}, state = {}) {
   return result
 }
 
+async function findByRole(matcher, locator) {
+  const role = locator.role
+
+  if (!locator.text) {
+    return matcher.$$(`::-p-aria([role="${role}"])`)
+  }
+
+  const allElements = await matcher.$$(`::-p-aria([role="${role}"])`)
+  const filtered = []
+  const isExact = locator.exact === true
+
+  for (const el of allElements) {
+    const texts = await el.evaluate(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() : '']
+    })
+
+    const matches = isExact ? texts.some(t => t === locator.text) : texts.some(t => t && t.includes(locator.text))
+
+    if (matches) filtered.push(el)
+  }
+
+  return filtered
+}
+
 export { Puppeteer as default }