better aria locators and parsing

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 { findReact, findVue } from './extras/PlaywrightLocator.js'
 import WebElement from '../element/WebElement.js'
 
 let playwright
@@ -2489,7 +2489,19 @@ class Playwright extends Helper {
    * {{> selectOption }}
    */
   async selectOption(select, option) {
-    const els = await findFields.call(this, select)
+    const selectLocator = Locator.from(select, 'css')
+    let els = null
+
+    if (selectLocator.isFuzzy()) {
+      els = await findByRole(this.page, { role: 'listbox', name: selectLocator.value })
+      if (!els || els.length === 0) {
+        els = await findByRole(this.page, { role: 'combobox', name: selectLocator.value })
+      }
+    }
+
+    if (!els || els.length === 0) {
+      els = await findFields.call(this, select)
+    }
     assertElementExists(els, select, 'Selectable field')
     const el = els[0]
 
@@ -2790,17 +2802,6 @@ class Playwright extends Helper {
    *
    */
   async grabTextFrom(locator) {
-    // Handle role locators with text/exact options
-    if (isRoleLocatorObject(locator)) {
-      const elements = await handleRoleLocator(this.page, locator)
-      if (elements && elements.length > 0) {
-        const text = await elements[0].textContent()
-        assertElementExists(text, JSON.stringify(locator))
-        this.debugSection('Text', text)
-        return text
-      }
-    }
-
     const locatorObj = new Locator(locator, 'css')
 
     if (locatorObj.isCustom()) {
@@ -2813,21 +2814,32 @@ class Playwright extends Helper {
       assertElementExists(text, locatorObj.toString())
       this.debugSection('Text', text)
       return text
-    } else {
-      locator = this._contextLocator(locator)
-      try {
-        const text = await this.page.textContent(locator)
-        assertElementExists(text, locator)
+    }
+
+    if (locatorObj.isRole()) {
+      // Handle role locators with text/exact options
+      const roleElements = await findByRole(this.page, locator)
+      if (roleElements && roleElements.length > 0) {
+        const text = await roleElements[0].textContent()
+        assertElementExists(text, JSON.stringify(locator))
         this.debugSection('Text', text)
         return text
-      } catch (error) {
-        // Convert Playwright timeout errors to ElementNotFound for consistency
-        if (error.message && error.message.includes('Timeout')) {
-          throw new ElementNotFound(locator, 'text')
-        }
-        throw error
       }
     }
+
+    locator = this._contextLocator(locator)
+    try {
+      const text = await this.page.textContent(locator)
+      assertElementExists(text, locator)
+      this.debugSection('Text', text)
+      return text
+    } catch (error) {
+      // Convert Playwright timeout errors to ElementNotFound for consistency
+      if (error.message && error.message.includes('Timeout')) {
+        throw new ElementNotFound(locator, 'text')
+      }
+      throw error
+    }
   }
 
   /**
@@ -4306,50 +4318,26 @@ function buildLocatorString(locator) {
   if (locator.isXPath()) {
     return `xpath=${locator.value}`
   }
-  return locator.simplify()
+    return locator.simplify()
 }
 
-/**
- * Checks if a locator is a role locator object (e.g., {role: 'button', text: 'Submit', exact: true})
- */
-function isRoleLocatorObject(locator) {
-  return locator && typeof locator === 'object' && locator.role && !locator.type
-}
-
-/**
- * Handles role locator objects by converting them to Playwright's getByRole() API
- * Returns elements array if role locator, null otherwise
- */
-async function handleRoleLocator(context, locator) {
-  if (!isRoleLocatorObject(locator)) return null
-
-  const options = {}
-  if (locator.text) options.name = locator.text
-  if (locator.exact !== undefined) options.exact = locator.exact
-
-  return context.getByRole(locator.role, Object.keys(options).length > 0 ? options : undefined).all()
+async function findByRole(context, locator) {
+  const matchedLocator = Locator.from(locator)
+  if (!matchedLocator.isRole()) return null
+  const roleOptions = matchedLocator.getRoleOptions()
+  return context.getByRole(roleOptions.role, roleOptions.options).all()
 }
 
 async function findElements(matcher, locator) {
-  // Check if locator is a Locator object with react/vue type, or a raw object with react/vue property
-  const isReactLocator = locator.type === 'react' || (locator.locator && locator.locator.react) || locator.react
-  const isVueLocator = locator.type === 'vue' || (locator.locator && locator.locator.vue) || locator.vue
-  const isPwLocator = locator.type === 'pw' || (locator.locator && locator.locator.pw) || locator.pw
-
-  if (isReactLocator) return findReact(matcher, locator)
-  if (isVueLocator) return findVue(matcher, locator)
-  if (isPwLocator) return findByPlaywrightLocator.call(this, matcher, locator)
-
-  // Handle role locators with text/exact options (e.g., {role: 'button', text: 'Submit', exact: true})
-  const roleElements = await handleRoleLocator(matcher, locator)
+  const matchedLocator = Locator.from(locator)
+  const roleElements = await findByRole(matcher, matchedLocator)
   if (roleElements) return roleElements
 
-  locator = new Locator(locator, 'css')
+  const isReactLocator = matchedLocator.type === 'react'
+  const isVueLocator = matchedLocator.type === 'vue'
 
-  // Handle custom locators directly instead of relying on Playwright selector engines
-  if (locator.isCustom()) {
-    return findCustomElements.call(this, matcher, locator)
-  }
+  if (isReactLocator) return findReact(matcher, matchedLocator)
+  if (isVueLocator) return findVue(matcher, matchedLocator)
 
   // Check if we have a custom context locator and need to search within it
   if (this.contextLocator) {
@@ -4362,12 +4350,12 @@ async function findElements(matcher, locator) {
       }
 
       // Search within the first context element
-      const locatorString = buildLocatorString(locator)
+      const locatorString = buildLocatorString(matchedLocator)
       return contextElements[0].locator(locatorString).all()
     }
   }
 
-  const locatorString = buildLocatorString(locator)
+  const locatorString = buildLocatorString(matchedLocator)
 
   return matcher.locator(locatorString).all()
 }
@@ -4460,13 +4448,17 @@ async function findCustomElements(matcher, locator) {
 }
 
 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)
+  const matchedLocator = Locator.from(locator)
+  const roleElements = await findByRole(matcher, matchedLocator)
+  if (roleElements && roleElements.length > 0) return roleElements[0]
+
+  const isReactLocator = matchedLocator.type === 'react'
+  const isVueLocator = matchedLocator.type === 'vue'
 
-  locator = new Locator(locator, 'css')
+  if (isReactLocator) return findReact(matcher, matchedLocator)
+  if (isVueLocator) return findVue(matcher, matchedLocator)
 
-  return matcher.locator(buildLocatorString(locator)).first()
+  return matcher.locator(buildLocatorString(matchedLocator)).first()
 }
 
 async function getVisibleElements(elements) {
@@ -4518,8 +4510,14 @@ async function proceedClick(locator, context = null, options = {}) {
 }
 
 async function findClickable(matcher, locator) {
+  // Convert to Locator first to handle JSON strings properly
   const matchedLocator = new Locator(locator)
 
+  // Handle role locators from Locator
+  if (matchedLocator.isRole()) {
+    return findByRole(matcher, matchedLocator)
+  }
+
   if (!matchedLocator.isFuzzy()) return findElements.call(this, matcher, matchedLocator)
 
   let els
@@ -4592,14 +4590,17 @@ async function findCheckable(locator, context) {
   }
 
   // Handle role locators with text/exact options
-  const roleElements = await handleRoleLocator(contextEl, locator)
+  const roleElements = await findByRole(contextEl, locator)
   if (roleElements) return roleElements
 
-  const matchedLocator = new Locator(locator)
+  const matchedLocator = Locator.from(locator)
   if (!matchedLocator.isFuzzy()) {
     return findElements.call(this, contextEl, matchedLocator)
   }
 
+  const checkboxByRole = await findByRole(contextEl, { role: 'checkbox', name: matchedLocator.value })
+  if (checkboxByRole) return checkboxByRole
+
   const literal = xpathLocator.literal(matchedLocator.value)
   let els = await findElements.call(this, contextEl, Locator.checkable.byText(literal))
   if (els.length) {
@@ -4621,17 +4622,15 @@ async function proceedIsChecked(assertType, option) {
 }
 
 async function findFields(locator) {
-  // Handle role locators with text/exact options
-  if (isRoleLocatorObject(locator)) {
-    const page = await this.page
-    const roleElements = await handleRoleLocator(page, locator)
-    if (roleElements) return roleElements
-  }
+  const page = await this.page
+  const roleElements = await findByRole(page, locator)
+  if (roleElements) return roleElements
 
   const matchedLocator = new Locator(locator)
   if (!matchedLocator.isFuzzy()) {
     return this._locate(matchedLocator)
   }
+
   const literal = xpathLocator.literal(locator)
 
   let els = await this._locate({ xpath: Locator.field.labelEquals(literal) })

lib/helper/extras/PlaywrightLocator.js

@@ -11,22 +11,20 @@ function buildLocatorString(locator) {
 }
 
 async function findElements(matcher, locator) {
-  const matchedLocator = new Locator(locator, 'css')
+  const matchedLocator = Locator.from(locator, 'css')
 
   if (matchedLocator.type === 'react') return findReact(matcher, matchedLocator)
   if (matchedLocator.type === 'vue') return findVue(matcher, matchedLocator)
-  if (matchedLocator.type === 'pw') return findByPlaywrightLocator(matcher, matchedLocator)
   if (matchedLocator.isRole()) return findByRole(matcher, matchedLocator)
 
   return matcher.locator(buildLocatorString(matchedLocator)).all()
 }
 
 async function findElement(matcher, locator) {
-  const matchedLocator = new Locator(locator, 'css')
+  const matchedLocator = Locator.from(locator, 'css')
 
   if (matchedLocator.type === 'react') return findReact(matcher, matchedLocator)
   if (matchedLocator.type === 'vue') return findVue(matcher, matchedLocator)
-  if (matchedLocator.type === 'pw') return findByPlaywrightLocator(matcher, matchedLocator, { first: true })
   if (matchedLocator.isRole()) return findByRole(matcher, matchedLocator, { first: true })
 
   return matcher.locator(buildLocatorString(matchedLocator)).first()
@@ -46,49 +44,30 @@ async function getVisibleElements(elements) {
 }
 
 async function findReact(matcher, locator) {
-  const details = locator.locator ?? { react: locator.value }
-  let locatorString = `_react=${details.react}`
+  const props = locator.locator?.props
+  let locatorString = `_react=${locator.value}`
 
-  if (details.props) {
-    locatorString += propBuilder(details.props)
+  if (props) {
+    locatorString += propBuilder(props)
   }
 
   return matcher.locator(locatorString).all()
 }
 
 async function findVue(matcher, locator) {
-  const details = locator.locator ?? { vue: locator.value }
-  let locatorString = `_vue=${details.vue}`
+  const props = locator.locator?.props
+  let locatorString = `_vue=${locator.value}`
 
-  if (details.props) {
-    locatorString += propBuilder(details.props)
+  if (props) {
+    locatorString += propBuilder(props)
   }
 
   return matcher.locator(locatorString).all()
 }
 
-async function findByPlaywrightLocator(matcher, locator, { first = false } = {}) {
-  const details = locator.locator ?? { pw: locator.value }
-  const locatorValue = details.pw
-
-  const handle = matcher.locator(locatorValue)
-  return first ? handle.first() : handle.all()
-}
-
 async function findByRole(matcher, locator, { first = false } = {}) {
-  const details = locator.locator ?? { role: locator.value }
-  const { role, text, name, exact, includeHidden, ...rest } = details
-  const options = { ...rest }
-
-  if (includeHidden !== undefined) options.includeHidden = includeHidden
-
-  const accessibleName = name ?? text
-  if (accessibleName !== undefined) {
-    options.name = accessibleName
-    if (exact === true) options.exact = true
-  }
-
-  const roleLocator = matcher.getByRole(role, options)
+  const roleOptions = locator.getRoleOptions()
+  const roleLocator = matcher.getByRole(roleOptions.role, roleOptions.options)
   return first ? roleLocator.first() : roleLocator.all()
 }
 
@@ -107,4 +86,4 @@ function propBuilder(props) {
   return _props
 }
 
-export { buildLocatorString, findElements, findElement, getVisibleElements, findReact, findVue, findByPlaywrightLocator, findByRole }
+export { buildLocatorString, findElements, findElement, getVisibleElements, findReact, findVue, findByRole }