codeceptjs 4.0.0-beta.4 → 4.0.0-beta.6.esm-aria

package/lib/helper/Puppeteer.js

@@ -1,21 +1,19 @@
-const axios = require('axios')
-const fs = require('fs')
-const fsExtra = require('fs-extra')
-const path = require('path')
-
-const Helper = require('@codeceptjs/helper')
-const { v4: uuidv4 } = require('uuid')
-const promiseRetry = require('promise-retry')
-const Locator = require('../locator')
-const recorder = require('../recorder')
-const store = require('../store')
-const stringIncludes = require('../assert/include').includes
-const { urlEquals } = require('../assert/equal')
-const { equals } = require('../assert/equal')
-const { empty } = require('../assert/empty')
-const { truth } = require('../assert/truth')
-const isElementClickable = require('./scripts/isElementClickable')
-const {
+import axios from 'axios'
+import fs from 'fs'
+import fsExtra from 'fs-extra'
+import path from 'path'
+import Helper from '@codeceptjs/helper'
+import { v4 as uuidv4 } from 'uuid'
+import promiseRetry from 'promise-retry'
+import Locator from '../locator.js'
+import recorder from '../recorder.js'
+import store from '../store.js'
+import { includes as stringIncludes } from '../assert/include.js'
+import { urlEquals, equals } from '../assert/equal.js'
+import { empty } from '../assert/empty.js'
+import { truth } from '../assert/truth.js'
+import isElementClickable from './scripts/isElementClickable.js'
+import {
   xpathLocator,
   ucfirst,
   fileExists,
@@ -28,29 +26,31 @@ const {
   isModifierKey,
   requireWithFallback,
   normalizeSpacesInString,
-} = require('../utils')
-const { isColorProperty, convertColorToRGBA } = require('../colorUtils')
-const ElementNotFound = require('./errors/ElementNotFound')
-const RemoteBrowserConnectionRefused = require('./errors/RemoteBrowserConnectionRefused')
-const Popup = require('./extras/Popup')
-const Console = require('./extras/Console')
-const { highlightElement } = require('./scripts/highlightElement')
-const { blurElement } = require('./scripts/blurElement')
-const {
-  dontSeeElementError,
-  seeElementError,
-  dontSeeElementInDOMError,
-  seeElementInDOMError,
-} = require('./errors/ElementAssertion')
-const {
-  dontSeeTraffic,
-  seeTraffic,
-  grabRecordedNetworkTraffics,
-  stopRecordingTraffic,
-  flushNetworkTraffics,
-} = require('./network/actions')
+} from '../utils.js'
+import { isColorProperty, convertColorToRGBA } from '../colorUtils.js'
+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 { highlightElement } from './scripts/highlightElement.js'
+import { blurElement } from './scripts/blurElement.js'
+import { dontSeeElementError, seeElementError, dontSeeElementInDOMError, seeElementInDOMError } from './errors/ElementAssertion.js'
+import { dontSeeTraffic, seeTraffic, grabRecordedNetworkTraffics, stopRecordingTraffic, flushNetworkTraffics } from './network/actions.js'
 
 let puppeteer
+
+/**
+ * Wraps error objects that don't have a proper message property
+ * This is needed for ESM compatibility with Puppeteer error handling
+ */
+function wrapError(e) {
+  if (e && typeof e === 'object' && !e.message) {
+    const err = new Error(String(e))
+    err.stack = e.stack
+    return err
+  }
+  return e
+}
 let perfTiming
 const popupStore = new Popup()
 const consoleLogStore = new Console()
@@ -224,7 +224,7 @@ class Puppeteer extends Helper {
   constructor(config) {
     super(config)
 
-    puppeteer = requireWithFallback('puppeteer', 'puppeteer-core')
+    // puppeteer will be loaded dynamically in _init method
     // set defaults
     this.isRemoteBrowser = false
     this.isRunning = false
@@ -271,9 +271,7 @@ class Puppeteer extends Helper {
   }
 
   _getOptions(config) {
-    return config.browser === 'firefox'
-      ? Object.assign(this.options.firefox, { product: 'firefox' })
-      : this.options.chrome
+    return config.browser === 'firefox' ? Object.assign(this.options.firefox, { product: 'firefox' }) : this.options.chrome
   }
 
   _setConfig(config) {
@@ -306,13 +304,34 @@ class Puppeteer extends Helper {
 
   static _checkRequirements() {
     try {
-      requireWithFallback('puppeteer', 'puppeteer-core')
+      // In ESM, puppeteer will be checked via dynamic import in _init
+      // The import will fail at module load time if puppeteer is missing
+      return null
     } catch (e) {
       return ['puppeteer']
     }
   }
 
-  _init() {}
+  async _init() {
+    // Load puppeteer dynamically with fallback
+    if (!puppeteer) {
+      try {
+        const puppeteerModule = await import('puppeteer')
+        puppeteer = puppeteerModule.default || puppeteerModule
+        this.debugSection('Puppeteer', `Loaded puppeteer successfully, launch available: ${!!puppeteer.launch}`)
+      } catch (e) {
+        try {
+          const puppeteerModule = await import('puppeteer-core')
+          puppeteer = puppeteerModule.default || puppeteerModule
+          this.debugSection('Puppeteer', `Loaded puppeteer-core successfully, launch available: ${!!puppeteer.launch}`)
+        } catch (e2) {
+          throw new Error('Neither puppeteer nor puppeteer-core could be loaded. Please install one of them.')
+        }
+      }
+    } else {
+      this.debugSection('Puppeteer', `Puppeteer already loaded, launch available: ${!!puppeteer.launch}`)
+    }
+  }
 
   _beforeSuite() {
     if (!this.options.restart && !this.options.manualStart && !this.isRunning) {
@@ -325,8 +344,8 @@ class Puppeteer extends Helper {
     this.sessionPages = {}
     this.currentRunningTest = test
     recorder.retry({
-      retries: process.env.FAILED_STEP_RETRIES || 3,
-      when: (err) => {
+      retries: test?.opts?.conditionalRetries || 3,
+      when: err => {
         if (!err || typeof err.message !== 'string') {
           return false
         }
@@ -346,7 +365,7 @@ class Puppeteer extends Helper {
     const contexts = this.browser.browserContexts()
     const defaultCtx = contexts.shift()
 
-    await Promise.all(contexts.map((c) => c.close()))
+    await Promise.all(contexts.map(c => c.close()))
 
     if (this.options.restart) {
       this.isRunning = false
@@ -355,7 +374,7 @@ class Puppeteer extends Helper {
 
     // ensure this.page is from default context
     if (this.page) {
-      const existingPages = defaultCtx.targets().filter((t) => t.type() === 'page')
+      const existingPages = defaultCtx.targets().filter(t => t.type() === 'page')
       await this._setPage(await existingPages[0].page())
     }
 
@@ -368,10 +387,10 @@ class Puppeteer extends Helper {
     const currentUrl = await this.grabCurrentUrl()
 
     if (currentUrl.startsWith('http')) {
-      await this.executeScript('localStorage.clear();').catch((err) => {
+      await this.executeScript('localStorage.clear();').catch(err => {
         if (!(err.message.indexOf("Storage is disabled inside 'data:' URLs.") > -1)) throw err
       })
-      await this.executeScript('sessionStorage.clear();').catch((err) => {
+      await this.executeScript('sessionStorage.clear();').catch(err => {
         if (!(err.message.indexOf("Storage is disabled inside 'data:' URLs.") > -1)) throw err
       })
     }
@@ -400,12 +419,12 @@ class Puppeteer extends Helper {
       stop: async () => {
         // is closed by _after
       },
-      loadVars: async (context) => {
-        const existingPages = context.targets().filter((t) => t.type() === 'page')
+      loadVars: async context => {
+        const existingPages = context.targets().filter(t => t.type() === 'page')
         this.sessionPages[this.activeSessionName] = await existingPages[0].page()
         return this._setPage(this.sessionPages[this.activeSessionName])
       },
-      restoreVars: async (session) => {
+      restoreVars: async session => {
         this.withinLocator = null
 
         if (!session) {
@@ -414,7 +433,7 @@ class Puppeteer extends Helper {
           this.activeSessionName = session
         }
         const defaultCtx = this.browser.defaultBrowserContext()
-        const existingPages = defaultCtx.targets().filter((t) => t.type() === 'page')
+        const existingPages = defaultCtx.targets().filter(t => t.type() === 'page')
         await this._setPage(await existingPages[0].page())
 
         return this._waitForAction()
@@ -517,7 +536,7 @@ class Puppeteer extends Helper {
     if (!page) {
       return
     }
-    page.on('error', async (error) => {
+    page.on('error', async error => {
       console.error('Puppeteer page error', error)
     })
   }
@@ -533,7 +552,7 @@ class Puppeteer extends Helper {
     if (!page) {
       return
     }
-    page.on('dialog', async (dialog) => {
+    page.on('dialog', async dialog => {
       popupStore.popup = dialog
       const action = popupStore.actionType || this.options.defaultPopupAction
       await this._waitForAction()
@@ -575,6 +594,12 @@ class Puppeteer extends Helper {
   }
 
   async _startBrowser() {
+    this.debugSection('Puppeteer', `Starting browser. Puppeteer available: ${!!puppeteer}, launch available: ${!!puppeteer?.launch}`)
+
+    if (!puppeteer) {
+      throw new Error('Puppeteer is not loaded. Make sure _init() was called before _startBrowser()')
+    }
+
     if (this.isRemoteBrowser) {
       try {
         this.browser = await puppeteer.connect(this.puppeteerOptions)
@@ -588,15 +613,15 @@ class Puppeteer extends Helper {
       this.browser = await puppeteer.launch(this.puppeteerOptions)
     }
 
-    this.browser.on('targetcreated', (target) =>
+    this.browser.on('targetcreated', target =>
       target
         .page()
-        .then((page) => targetCreatedHandler.call(this, page))
-        .catch((e) => {
+        .then(page => targetCreatedHandler.call(this, page))
+        .catch(e => {
           console.error('Puppeteer page error', e)
         }),
     )
-    this.browser.on('targetchanged', (target) => {
+    this.browser.on('targetchanged', target => {
       this.debugSection('Url', target.url())
     })
 
@@ -639,9 +664,7 @@ class Puppeteer extends Helper {
 
     if (frame) {
       if (Array.isArray(frame)) {
-        return this.switchTo(null).then(() =>
-          frame.reduce((p, frameLocator) => p.then(() => this.switchTo(frameLocator)), Promise.resolve()),
-        )
+        return this.switchTo(null).then(() => frame.reduce((p, frameLocator) => p.then(() => this.switchTo(frameLocator)), Promise.resolve()))
       }
       await this.switchTo(frame)
       this.withinLocator = new Locator(frame)
@@ -664,7 +687,7 @@ class Puppeteer extends Helper {
     const navigationStart = timing.navigationStart
 
     const extractedData = {}
-    dataNames.forEach((name) => {
+    dataNames.forEach(name => {
       extractedData[name] = timing[name] - navigationStart
     })
 
@@ -694,17 +717,25 @@ class Puppeteer extends Helper {
       this.currentRunningTest.artifacts.trace = fileName
     }
 
-    await this.page.goto(url, { waitUntil: this.options.waitForNavigation })
+    try {
+      await this.page.goto(url, { waitUntil: this.options.waitForNavigation })
+    } catch (err) {
+      // Handle terminal navigation errors that shouldn't be retried
+      if (
+        err.message &&
+        (err.message.includes('ERR_ABORTED') || err.message.includes('frame was detached') || err.message.includes('Target page, context or browser has been closed') || err.message.includes('Navigation timeout'))
+      ) {
+        // Mark this as a terminal error to prevent retries
+        const terminalError = new Error(err.message)
+        terminalError.isTerminal = true
+        throw terminalError
+      }
+      throw err
+    }
 
     const performanceTiming = JSON.parse(await this.page.evaluate(() => JSON.stringify(window.performance.timing)))
 
-    perfTiming = this._extractDataFromPerformanceTiming(
-      performanceTiming,
-      'responseEnd',
-      'domInteractive',
-      'domContentLoadedEventEnd',
-      'loadEventEnd',
-    )
+    perfTiming = this._extractDataFromPerformanceTiming(performanceTiming, 'responseEnd', 'domInteractive', 'domContentLoadedEventEnd', 'loadEventEnd')
 
     return this._waitForAction()
   }
@@ -815,10 +846,7 @@ class Puppeteer extends Helper {
     return this.executeScript(() => {
       const body = document.body
       const html = document.documentElement
-      window.scrollTo(
-        0,
-        Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight),
-      )
+      window.scrollTo(0, Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight))
     })
   }
 
@@ -836,13 +864,9 @@ class Puppeteer extends Helper {
       const els = await this._locate(locator)
       assertElementExists(els, locator, 'Element')
       const el = els[0]
-      await el.evaluate((el) => el.scrollIntoView())
+      await el.evaluate(el => el.scrollIntoView())
       const elementCoordinates = await getClickablePoint(els[0])
-      await this.executeScript(
-        (x, y) => window.scrollBy(x, y),
-        elementCoordinates.x + offsetX,
-        elementCoordinates.y + offsetY,
-      )
+      await this.executeScript((x, y) => window.scrollBy(x, y), elementCoordinates.x + offsetX, elementCoordinates.y + offsetY)
     } else {
       await this.executeScript((x, y) => window.scrollTo(x, y), offsetX, offsetY)
     }
@@ -955,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
    *
@@ -1025,10 +1055,10 @@ class Puppeteer extends Helper {
    */
   async closeOtherTabs() {
     const pages = await this.browser.pages()
-    const otherPages = pages.filter((page) => page !== this.page)
+    const otherPages = pages.filter(page => page !== this.page)
 
     let p = Promise.resolve()
-    otherPages.forEach((page) => {
+    otherPages.forEach(page => {
       p = p.then(() => page.close())
     })
     await p
@@ -1061,19 +1091,11 @@ class Puppeteer extends Helper {
    */
   async seeElement(locator) {
     let els = await this._locate(locator)
-    els = (await Promise.all(els.map((el) => el.boundingBox() && el))).filter((v) => v)
+    els = (await Promise.all(els.map(el => el.boundingBox() && el))).filter(v => v)
     // Puppeteer visibility was ignored? | Remove when Puppeteer is fixed
-    els = await Promise.all(
-      els.map(
-        async (el) =>
-          (await el.evaluate(
-            (node) =>
-              window.getComputedStyle(node).visibility !== 'hidden' && window.getComputedStyle(node).display !== 'none',
-          )) && el,
-      ),
-    )
+    els = await Promise.all(els.map(async el => (await el.evaluate(node => window.getComputedStyle(node).visibility !== 'hidden' && window.getComputedStyle(node).display !== 'none')) && el))
     try {
-      return empty('visible elements').negate(els.filter((v) => v).fill('ELEMENT'))
+      return empty('visible elements').negate(els.filter(v => v).fill('ELEMENT'))
     } catch (e) {
       dontSeeElementError(locator)
     }
@@ -1085,19 +1107,11 @@ class Puppeteer extends Helper {
    */
   async dontSeeElement(locator) {
     let els = await this._locate(locator)
-    els = (await Promise.all(els.map((el) => el.boundingBox() && el))).filter((v) => v)
+    els = (await Promise.all(els.map(el => el.boundingBox() && el))).filter(v => v)
     // Puppeteer visibility was ignored? | Remove when Puppeteer is fixed
-    els = await Promise.all(
-      els.map(
-        async (el) =>
-          (await el.evaluate(
-            (node) =>
-              window.getComputedStyle(node).visibility !== 'hidden' && window.getComputedStyle(node).display !== 'none',
-          )) && el,
-      ),
-    )
+    els = await Promise.all(els.map(async el => (await el.evaluate(node => window.getComputedStyle(node).visibility !== 'hidden' && window.getComputedStyle(node).display !== 'none')) && el))
     try {
-      return empty('visible elements').assert(els.filter((v) => v).fill('ELEMENT'))
+      return empty('visible elements').assert(els.filter(v => v).fill('ELEMENT'))
     } catch (e) {
       seeElementError(locator)
     }
@@ -1109,7 +1123,7 @@ class Puppeteer extends Helper {
   async seeElementInDOM(locator) {
     const els = await this._locate(locator)
     try {
-      return empty('elements on page').negate(els.filter((v) => v).fill('ELEMENT'))
+      return empty('elements on page').negate(els.filter(v => v).fill('ELEMENT'))
     } catch (e) {
       dontSeeElementInDOMError(locator)
     }
@@ -1121,7 +1135,7 @@ class Puppeteer extends Helper {
   async dontSeeElementInDOM(locator) {
     const els = await this._locate(locator)
     try {
-      return empty('elements on a page').assert(els.filter((v) => v).fill('ELEMENT'))
+      return empty('elements on a page').assert(els.filter(v => v).fill('ELEMENT'))
     } catch (e) {
       seeElementInDOMError(locator)
     }
@@ -1151,17 +1165,12 @@ class Puppeteer extends Helper {
 
     const els = await findClickable.call(this, matcher, locator)
     if (context) {
-      assertElementExists(
-        els,
-        locator,
-        'Clickable element',
-        `was not found inside element ${new Locator(context).toString()}`,
-      )
+      assertElementExists(els, locator, 'Clickable element', `was not found inside element ${new Locator(context).toString()}`)
     } else {
       assertElementExists(els, locator, 'Clickable element')
     }
     const elem = els[0]
-    return this.executeScript((el) => {
+    return this.executeScript(el => {
       if (document.activeElement instanceof HTMLElement) {
         document.activeElement.blur()
       }
@@ -1220,8 +1229,8 @@ class Puppeteer extends Helper {
     let fileName
     await this.page.setRequestInterception(true)
 
-    const xRequest = await new Promise((resolve) => {
-      this.page.on('request', (request) => {
+    const xRequest = await new Promise(resolve => {
+      this.page.on('request', request => {
         console.log('rq', request, customName)
         const grabbedFileName = request.url().split('/')[request.url().split('/').length - 1]
         const fileExtension = request.url().split('/')[request.url().split('/').length - 1].split('.')[1]
@@ -1248,7 +1257,7 @@ class Puppeteer extends Helper {
     }
 
     const cookies = await this.page.cookies()
-    options.headers.Cookie = cookies.map((ck) => `${ck.name}=${ck.value}`).join(';')
+    options.headers.Cookie = cookies.map(ck => `${ck.name}=${ck.value}`).join(';')
 
     const response = await axios({
       method: options.method,
@@ -1302,8 +1311,16 @@ class Puppeteer extends Helper {
    */
   async checkOption(field, context = null) {
     const elm = await this._locateCheckable(field, context)
-    const curentlyChecked = await elm.getProperty('checked').then((checkedProperty) => checkedProperty.jsonValue())
-    // Only check if NOT currently checked
+    let curentlyChecked = await elm
+      .getProperty('checked')
+      .then(checkedProperty => checkedProperty.jsonValue())
+      .catch(() => null)
+
+    if (!curentlyChecked) {
+      const ariaChecked = await elm.evaluate(el => el.getAttribute('aria-checked'))
+      curentlyChecked = ariaChecked === 'true'
+    }
+
     if (!curentlyChecked) {
       await elm.click()
       return this._waitForAction()
@@ -1315,8 +1332,16 @@ class Puppeteer extends Helper {
    */
   async uncheckOption(field, context = null) {
     const elm = await this._locateCheckable(field, context)
-    const curentlyChecked = await elm.getProperty('checked').then((checkedProperty) => checkedProperty.jsonValue())
-    // Only uncheck if currently checked
+    let curentlyChecked = await elm
+      .getProperty('checked')
+      .then(checkedProperty => checkedProperty.jsonValue())
+      .catch(() => null)
+
+    if (!curentlyChecked) {
+      const ariaChecked = await elm.evaluate(el => el.getAttribute('aria-checked'))
+      curentlyChecked = ariaChecked === 'true'
+    }
+
     if (curentlyChecked) {
       await elm.click()
       return this._waitForAction()
@@ -1408,12 +1433,12 @@ class Puppeteer extends Helper {
     const els = await findVisibleFields.call(this, field)
     assertElementExists(els, field, 'Field')
     const el = els[0]
-    const tag = await el.getProperty('tagName').then((el) => el.jsonValue())
-    const editable = await el.getProperty('contenteditable').then((el) => el.jsonValue())
+    const tag = await el.getProperty('tagName').then(el => el.jsonValue())
+    const editable = await el.getProperty('contenteditable').then(el => el.jsonValue())
     if (tag === 'INPUT' || tag === 'TEXTAREA') {
-      await this._evaluateHandeInContext((el) => (el.value = ''), el)
+      await this._evaluateHandeInContext(el => (el.value = ''), el)
     } else if (editable) {
-      await this._evaluateHandeInContext((el) => (el.innerHTML = ''), el)
+      await this._evaluateHandeInContext(el => (el.innerHTML = ''), el)
     }
 
     highlightActiveElement.call(this, el, await this._getContext())
@@ -1483,7 +1508,7 @@ class Puppeteer extends Helper {
     const els = await findVisibleFields.call(this, select)
     assertElementExists(els, select, 'Selectable field')
     const el = els[0]
-    if ((await el.getProperty('tagName').then((t) => t.jsonValue())) !== 'SELECT') {
+    if ((await el.getProperty('tagName').then(t => t.jsonValue())) !== 'SELECT') {
       throw new Error('Element is not <select>')
     }
     highlightActiveElement.call(this, els[0], await this._getContext())
@@ -1493,15 +1518,15 @@ class Puppeteer extends Helper {
       const opt = xpathLocator.literal(option[key])
       let optEl = await findElements.call(this, el, { xpath: Locator.select.byVisibleText(opt) })
       if (optEl.length) {
-        this._evaluateHandeInContext((el) => (el.selected = true), optEl[0])
+        this._evaluateHandeInContext(el => (el.selected = true), optEl[0])
         continue
       }
       optEl = await findElements.call(this, el, { xpath: Locator.select.byValue(opt) })
       if (optEl.length) {
-        this._evaluateHandeInContext((el) => (el.selected = true), optEl[0])
+        this._evaluateHandeInContext(el => (el.selected = true), optEl[0])
       }
     }
-    await this._evaluateHandeInContext((element) => {
+    await this._evaluateHandeInContext(element => {
       element.dispatchEvent(new Event('input', { bubbles: true }))
       element.dispatchEvent(new Event('change', { bubbles: true }))
     }, el)
@@ -1515,19 +1540,11 @@ class Puppeteer extends Helper {
    */
   async grabNumberOfVisibleElements(locator) {
     let els = await this._locate(locator)
-    els = (await Promise.all(els.map((el) => el.boundingBox() && el))).filter((v) => v)
+    els = (await Promise.all(els.map(el => el.boundingBox() && el))).filter(v => v)
     // Puppeteer visibility was ignored? | Remove when Puppeteer is fixed
-    els = await Promise.all(
-      els.map(
-        async (el) =>
-          (await el.evaluate(
-            (node) =>
-              window.getComputedStyle(node).visibility !== 'hidden' && window.getComputedStyle(node).display !== 'none',
-          )) && el,
-      ),
-    )
+    els = await Promise.all(els.map(async el => (await el.evaluate(node => window.getComputedStyle(node).visibility !== 'hidden' && window.getComputedStyle(node).display !== 'none')) && el))
 
-    return els.filter((v) => v).length
+    return els.filter(v => v).length
   }
 
   /**
@@ -1635,9 +1652,7 @@ class Puppeteer extends Helper {
    */
   async seeNumberOfElements(locator, num) {
     const elements = await this._locate(locator)
-    return equals(
-      `expected number of elements (${new Locator(locator)}) is ${num}, but found ${elements.length}`,
-    ).assert(elements.length, num)
+    return equals(`expected number of elements (${new Locator(locator)}) is ${num}, but found ${elements.length}`).assert(elements.length, num)
   }
 
   /**
@@ -1647,10 +1662,7 @@ class Puppeteer extends Helper {
    */
   async seeNumberOfVisibleElements(locator, num) {
     const res = await this.grabNumberOfVisibleElements(locator)
-    return equals(`expected number of visible elements (${new Locator(locator)}) is ${num}, but found ${res}`).assert(
-      res,
-      num,
-    )
+    return equals(`expected number of visible elements (${new Locator(locator)}) is ${num}, but found ${res}`).assert(res, num)
   }
 
   /**
@@ -1669,7 +1681,7 @@ class Puppeteer extends Helper {
    */
   async seeCookie(name) {
     const cookies = await this.page.cookies()
-    empty(`cookie ${name} to be set`).negate(cookies.filter((c) => c.name === name))
+    empty(`cookie ${name} to be set`).negate(cookies.filter(c => c.name === name))
   }
 
   /**
@@ -1677,7 +1689,7 @@ class Puppeteer extends Helper {
    */
   async dontSeeCookie(name) {
     const cookies = await this.page.cookies()
-    empty(`cookie ${name} not to be set`).assert(cookies.filter((c) => c.name === name))
+    empty(`cookie ${name} not to be set`).assert(cookies.filter(c => c.name === name))
   }
 
   /**
@@ -1688,7 +1700,7 @@ class Puppeteer extends Helper {
   async grabCookie(name) {
     const cookies = await this.page.cookies()
     if (!name) return cookies
-    const cookie = cookies.filter((c) => c.name === name)
+    const cookie = cookies.filter(c => c.name === name)
     if (cookie[0]) return cookie[0]
   }
 
@@ -1708,9 +1720,9 @@ class Puppeteer extends Helper {
 
     return promiseRetry(
       async (retry, number) => {
-        const _grabCookie = async (name) => {
+        const _grabCookie = async name => {
           const cookies = await this.page.cookies()
-          const cookie = cookies.filter((c) => c.name === name)
+          const cookie = cookies.filter(c => c.name === name)
           if (cookie.length === 0) throw Error(`Cookie ${name} is not found after ${retries}s`)
         }
 
@@ -1735,7 +1747,7 @@ class Puppeteer extends Helper {
     if (!name) {
       return this.page.deleteCookie.apply(this.page, cookies)
     }
-    const cookie = cookies.filter((c) => c.name === name)
+    const cookie = cookies.filter(c => c.name === name)
     if (!cookie[0]) return
     return this.page.deleteCookie(cookie[0])
   }
@@ -1760,8 +1772,8 @@ class Puppeteer extends Helper {
   async executeAsyncScript(...args) {
     const asyncFn = function () {
       const args = Array.from(arguments)
-      const fn = eval(`(${args.shift()})`) // eslint-disable-line no-eval
-      return new Promise((done) => {
+      const fn = eval(`(${args.shift()})`)
+      return new Promise(done => {
         args.push(done)
         fn.apply(null, args)
       })
@@ -1828,7 +1840,7 @@ class Puppeteer extends Helper {
    */
   async grabHTMLFromAll(locator) {
     const els = await this._locate(locator)
-    const values = await Promise.all(els.map((el) => el.evaluate((element) => element.innerHTML, el)))
+    const values = await Promise.all(els.map(el => el.evaluate(element => element.innerHTML, el)))
     return values
   }
 
@@ -1851,10 +1863,8 @@ class Puppeteer extends Helper {
    */
   async grabCssPropertyFromAll(locator, cssProperty) {
     const els = await this._locate(locator)
-    const res = await Promise.all(
-      els.map((el) => el.evaluate((el) => JSON.parse(JSON.stringify(getComputedStyle(el))), el)),
-    )
-    const cssValues = res.map((props) => props[toCamelCase(cssProperty)])
+    const res = await Promise.all(els.map(el => el.evaluate(el => JSON.parse(JSON.stringify(getComputedStyle(el))), el)))
+    const cssValues = res.map(props => props[toCamelCase(cssProperty)])
 
     return cssValues
   }
@@ -1897,19 +1907,16 @@ class Puppeteer extends Helper {
       }
     }
 
-    const values = Object.keys(cssPropertiesCamelCase).map((key) => cssPropertiesCamelCase[key])
+    const values = Object.keys(cssPropertiesCamelCase).map(key => cssPropertiesCamelCase[key])
     if (!Array.isArray(props)) props = [props]
     let chunked = chunkArray(props, values.length)
-    chunked = chunked.filter((val) => {
+    chunked = chunked.filter(val => {
       for (let i = 0; i < val.length; ++i) {
-        // eslint-disable-next-line eqeqeq
         if (val[i] != values[i]) return false
       }
       return true
     })
-    return equals(
-      `all elements (${new Locator(locator)}) to have CSS property ${JSON.stringify(cssProperties)}`,
-    ).assert(chunked.length, elemAmount)
+    return equals(`all elements (${new Locator(locator)}) to have CSS property ${JSON.stringify(cssProperties)}`).assert(chunked.length, elemAmount)
   }
 
   /**
@@ -1922,7 +1929,7 @@ class Puppeteer extends Helper {
 
     const expectedAttributes = Object.entries(attributes)
 
-    const valuesPromises = elements.map(async (element) => {
+    const valuesPromises = elements.map(async element => {
       const elementAttributes = {}
       await Promise.all(
         expectedAttributes.map(async ([attribute, expectedValue]) => {
@@ -1935,7 +1942,7 @@ class Puppeteer extends Helper {
 
     const actualAttributes = await Promise.all(valuesPromises)
 
-    const matchingElements = actualAttributes.filter((attrs) =>
+    const matchingElements = actualAttributes.filter(attrs =>
       expectedAttributes.every(([attribute, expectedValue]) => {
         const actualValue = attrs[attribute]
         if (!actualValue) return false
@@ -1947,10 +1954,7 @@ class Puppeteer extends Helper {
     const elementsCount = elements.length
     const matchingCount = matchingElements.length
 
-    return equals(`all elements (${new Locator(locator)}) to have attributes ${JSON.stringify(attributes)}`).assert(
-      matchingCount,
-      elementsCount,
-    )
+    return equals(`all elements (${new Locator(locator)}) to have attributes ${JSON.stringify(attributes)}`).assert(matchingCount, elementsCount)
   }
 
   /**
@@ -2080,7 +2084,7 @@ class Puppeteer extends Helper {
    * {{> wait }}
    */
   async wait(sec) {
-    return new Promise((done) => {
+    return new Promise(done => {
       setTimeout(done, sec * 1000)
     })
   }
@@ -2100,20 +2104,18 @@ class Puppeteer extends Helper {
         if (!els || els.length === 0) {
           return false
         }
-        return Array.prototype.filter.call(els, (el) => !el.disabled).length > 0
+        return Array.prototype.filter.call(els, el => !el.disabled).length > 0
       }
       waiter = context.waitForFunction(enabledFn, { timeout: waitTimeout }, locator.value)
     } else {
       const enabledFn = function (locator, $XPath) {
-        eval($XPath) // eslint-disable-line no-eval
-        return $XPath(null, locator).filter((el) => !el.disabled).length > 0
+        eval($XPath)
+        return $XPath(null, locator).filter(el => !el.disabled).length > 0
       }
       waiter = context.waitForFunction(enabledFn, { timeout: waitTimeout }, locator.value, $XPath.toString())
     }
-    return waiter.catch((err) => {
-      throw new Error(
-        `element (${locator.toString()}) still not enabled after ${waitTimeout / 1000} sec\n${err.message}`,
-      )
+    return waiter.catch(err => {
+      throw new Error(`element (${locator.toString()}) still not enabled after ${waitTimeout / 1000} sec\n${err.message}`)
     })
   }
 
@@ -2132,21 +2134,19 @@ class Puppeteer extends Helper {
         if (!els || els.length === 0) {
           return false
         }
-        return Array.prototype.filter.call(els, (el) => (el.value.toString() || '').indexOf(value) !== -1).length > 0
+        return Array.prototype.filter.call(els, el => (el.value.toString() || '').indexOf(value) !== -1).length > 0
       }
       waiter = context.waitForFunction(valueFn, { timeout: waitTimeout }, locator.value, value)
     } else {
       const valueFn = function (locator, $XPath, value) {
-        eval($XPath) // eslint-disable-line no-eval
-        return $XPath(null, locator).filter((el) => (el.value || '').indexOf(value) !== -1).length > 0
+        eval($XPath)
+        return $XPath(null, locator).filter(el => (el.value || '').indexOf(value) !== -1).length > 0
       }
       waiter = context.waitForFunction(valueFn, { timeout: waitTimeout }, locator.value, $XPath.toString(), value)
     }
-    return waiter.catch((err) => {
+    return waiter.catch(err => {
       const loc = locator.toString()
-      throw new Error(
-        `element (${loc}) is not in DOM or there is no element(${loc}) with value "${value}" after ${waitTimeout / 1000} sec\n${err.message}`,
-      )
+      throw new Error(`element (${loc}) is not in DOM or there is no element(${loc}) with value "${value}" after ${waitTimeout / 1000} sec\n${err.message}`)
     })
   }
 
@@ -2165,20 +2165,18 @@ class Puppeteer extends Helper {
         if (!els || els.length === 0) {
           return false
         }
-        return Array.prototype.filter.call(els, (el) => el.offsetParent !== null).length === num
+        return Array.prototype.filter.call(els, el => el.offsetParent !== null).length === num
       }
       waiter = context.waitForFunction(visibleFn, { timeout: waitTimeout }, locator.value, num)
     } else {
       const visibleFn = function (locator, $XPath, num) {
-        eval($XPath) // eslint-disable-line no-eval
-        return $XPath(null, locator).filter((el) => el.offsetParent !== null).length === num
+        eval($XPath)
+        return $XPath(null, locator).filter(el => el.offsetParent !== null).length === num
       }
       waiter = context.waitForFunction(visibleFn, { timeout: waitTimeout }, locator.value, $XPath.toString(), num)
     }
-    return waiter.catch((err) => {
-      throw new Error(
-        `The number of elements (${locator.toString()}) is not ${num} after ${waitTimeout / 1000} sec\n${err.message}`,
-      )
+    return waiter.catch(err => {
+      throw new Error(`The number of elements (${locator.toString()}) is not ${num} after ${waitTimeout / 1000} sec\n${err.message}`)
     })
   }
 
@@ -2189,11 +2187,10 @@ class Puppeteer extends Helper {
     const els = await this._locate(locator)
     assertElementExists(els, locator)
 
-    return this.waitForFunction(isElementClickable, [els[0]], waitTimeout).catch(async (e) => {
-      if (/Waiting failed/i.test(e.message) || /failed: timeout/i.test(e.message)) {
-        throw new Error(
-          `element ${new Locator(locator).toString()} still not clickable after ${waitTimeout || this.options.waitForTimeout / 1000} sec`,
-        )
+    return this.waitForFunction(isElementClickable, [els[0]], waitTimeout).catch(async e => {
+      const errorMessage = e?.message || String(e)
+      if (/Waiting failed/i.test(errorMessage) || /failed: timeout/i.test(errorMessage)) {
+        throw new Error(`element ${new Locator(locator).toString()} still not clickable after ${waitTimeout || this.options.waitForTimeout / 1000} sec`)
       } else {
         throw e
       }
@@ -2215,10 +2212,8 @@ class Puppeteer extends Helper {
     } else {
       waiter = _waitForElement.call(this, locator, { timeout: waitTimeout })
     }
-    return waiter.catch((err) => {
-      throw new Error(
-        `element (${locator.toString()}) still not present on page after ${waitTimeout / 1000} sec\n${err.message}`,
-      )
+    return waiter.catch(err => {
+      throw new Error(`element (${locator.toString()}) still not present on page after ${waitTimeout / 1000} sec\n${err.message}`)
     })
   }
 
@@ -2238,10 +2233,8 @@ class Puppeteer extends Helper {
     } else {
       waiter = _waitForElement.call(this, locator, { timeout: waitTimeout, visible: true })
     }
-    return waiter.catch((err) => {
-      throw new Error(
-        `element (${locator.toString()}) still not visible after ${waitTimeout / 1000} sec\n${err.message}`,
-      )
+    return waiter.catch(err => {
+      throw new Error(`element (${locator.toString()}) still not visible after ${waitTimeout / 1000} sec\n${err.message}`)
     })
   }
 
@@ -2259,7 +2252,7 @@ class Puppeteer extends Helper {
     } else {
       waiter = _waitForElement.call(this, locator, { timeout: waitTimeout, hidden: true })
     }
-    return waiter.catch((err) => {
+    return waiter.catch(err => {
       throw new Error(`element (${locator.toString()}) still visible after ${waitTimeout / 1000} sec\n${err.message}`)
     })
   }
@@ -2277,10 +2270,8 @@ class Puppeteer extends Helper {
     } else {
       waiter = _waitForElement.call(this, locator, { timeout: waitTimeout, hidden: true })
     }
-    return waiter.catch((err) => {
-      throw new Error(
-        `element (${locator.toString()}) still not hidden after ${waitTimeout / 1000} sec\n${err.message}`,
-      )
+    return waiter.catch(err => {
+      throw new Error(`element (${locator.toString()}) still not hidden after ${waitTimeout / 1000} sec\n${err.message}`)
     })
   }
 
@@ -2317,14 +2308,14 @@ class Puppeteer extends Helper {
 
     return this.page
       .waitForFunction(
-        (urlPart) => {
+        urlPart => {
           const currUrl = decodeURIComponent(decodeURIComponent(decodeURIComponent(window.location.href)))
           return currUrl.indexOf(urlPart) > -1
         },
         { timeout: waitTimeout },
         urlPart,
       )
-      .catch(async (e) => {
+      .catch(async e => {
         const currUrl = await this._getPageUrl() // Required because the waitForFunction can't return data.
         if (/Waiting failed:/i.test(e.message) || /failed: timeout/i.test(e.message)) {
           throw new Error(`expected url to include ${urlPart}, but found ${currUrl}`)
@@ -2347,14 +2338,14 @@ class Puppeteer extends Helper {
 
     return this.page
       .waitForFunction(
-        (urlPart) => {
+        urlPart => {
           const currUrl = decodeURIComponent(decodeURIComponent(decodeURIComponent(window.location.href)))
           return currUrl.indexOf(urlPart) > -1
         },
         { timeout: waitTimeout },
         urlPart,
       )
-      .catch(async (e) => {
+      .catch(async e => {
         const currUrl = await this._getPageUrl() // Required because the waitForFunction can't return data.
         if (/Waiting failed/i.test(e.message) || /failed: timeout/i.test(e.message)) {
           throw new Error(`expected url to be ${urlPart}, but found ${currUrl}`)
@@ -2391,7 +2382,7 @@ class Puppeteer extends Helper {
       if (locator.isXPath()) {
         waiter = contextObject.waitForFunction(
           (locator, text, $XPath) => {
-            eval($XPath) // eslint-disable-line no-eval
+            eval($XPath)
             const el = $XPath(null, locator)
             if (!el.length) return false
             return el[0].innerText.indexOf(text) > -1
@@ -2403,14 +2394,10 @@ class Puppeteer extends Helper {
         )
       }
     } else {
-      waiter = contextObject.waitForFunction(
-        (text) => document.body && document.body.innerText.indexOf(text) > -1,
-        { timeout: waitTimeout },
-        text,
-      )
+      waiter = contextObject.waitForFunction(text => document.body && document.body.innerText.indexOf(text) > -1, { timeout: waitTimeout }, text)
     }
 
-    return waiter.catch((err) => {
+    return waiter.catch(err => {
       throw new Error(`Text "${text}" was not found on page after ${waitTimeout / 1000} sec\n${err.message}`)
     })
   }
@@ -2543,12 +2530,12 @@ class Puppeteer extends Helper {
       waiter = context.waitForFunction(visibleFn, { timeout: waitTimeout }, locator.value)
     } else {
       const visibleFn = function (locator, $XPath) {
-        eval($XPath) // eslint-disable-line no-eval
+        eval($XPath)
         return $XPath(null, locator).length === 0
       }
       waiter = context.waitForFunction(visibleFn, { timeout: waitTimeout }, locator.value, $XPath.toString())
     }
-    return waiter.catch((err) => {
+    return waiter.catch(err => {
       throw new Error(`element (${locator.toString()}) still on page after ${waitTimeout / 1000} sec\n${err.message}`)
     })
   }
@@ -2589,7 +2576,7 @@ class Puppeteer extends Helper {
   async mockRoute(url, handler) {
     await this.page.setRequestInterception(true)
 
-    this.page.on('request', (interceptedRequest) => {
+    this.page.on('request', interceptedRequest => {
       if (interceptedRequest.url().match(url)) {
         // @ts-ignore
         handler(interceptedRequest)
@@ -2614,7 +2601,7 @@ class Puppeteer extends Helper {
     this.page.off('request')
 
     // Resume normal request handling for the given URL
-    this.page.on('request', (interceptedRequest) => {
+    this.page.on('request', interceptedRequest => {
       if (interceptedRequest.url().includes(url)) {
         interceptedRequest.continue()
       } else {
@@ -2650,7 +2637,7 @@ class Puppeteer extends Helper {
 
     await this.page.setRequestInterception(true)
 
-    this.page.on('request', (request) => {
+    this.page.on('request', request => {
       const information = {
         url: request.url(),
         method: request.method(),
@@ -2711,15 +2698,15 @@ class Puppeteer extends Helper {
     await this.cdpSession.send('Network.enable')
     await this.cdpSession.send('Page.enable')
 
-    this.cdpSession.on('Network.webSocketFrameReceived', (payload) => {
+    this.cdpSession.on('Network.webSocketFrameReceived', payload => {
       this._logWebsocketMessages(this._getWebSocketLog('RECEIVED', payload))
     })
 
-    this.cdpSession.on('Network.webSocketFrameSent', (payload) => {
+    this.cdpSession.on('Network.webSocketFrameSent', payload => {
       this._logWebsocketMessages(this._getWebSocketLog('SENT', payload))
     })
 
-    this.cdpSession.on('Network.webSocketFrameError', (payload) => {
+    this.cdpSession.on('Network.webSocketFrameError', payload => {
       this._logWebsocketMessages(this._getWebSocketLog('ERROR', payload))
     })
   }
@@ -2743,9 +2730,7 @@ class Puppeteer extends Helper {
   grabWebSocketMessages() {
     if (!this.recordingWebSocketMessages) {
       if (!this.recordedWebSocketMessagesAtLeastOnce) {
-        throw new Error(
-          'Failure in test automation. You use "I.grabWebSocketMessages", but "I.startRecordingWebSocketMessages" was never called before.',
-        )
+        throw new Error('Failure in test automation. You use "I.grabWebSocketMessages", but "I.startRecordingWebSocketMessages" was never called before.')
       }
     }
     return this.webSocketMessages
@@ -2775,17 +2760,27 @@ class Puppeteer extends Helper {
   }
 }
 
-module.exports = Puppeteer
-
 async function findElements(matcher, locator) {
-  if (locator.react) return findReactElements.call(this, locator)
-  locator = new Locator(locator, 'css')
-  if (!locator.isXPath()) return matcher.$$(locator.simplify())
-  // puppeteer version < 19.4.0 is no longer supported. This one is backward support.
-  if (puppeteer.default?.defaultBrowserRevision) {
-    return matcher.$$(`xpath/${locator.value}`)
-  }
-  return matcher.$x(locator.value)
+  const matchedLocator = new Locator(locator, 'css')
+
+  if (matchedLocator.type === 'react') return findReactElements.call(this, matchedLocator)
+  if (matchedLocator.isRole()) return findByRole.call(this, matcher, matchedLocator)
+
+  if (!matchedLocator.isXPath()) return matcher.$$(matchedLocator.simplify())
+
+  // Handle backward compatibility for different Puppeteer versions
+  // Puppeteer >= 19.4.0 uses xpath/ syntax, older versions use $x
+  try {
+    // Try the new xpath syntax first (for Puppeteer >= 19.4.0)
+    return await matcher.$$(`xpath/${matchedLocator.value}`)
+  } catch (error) {
+    // Fall back to the old $x method for older Puppeteer versions
+    if (matcher.$x && typeof matcher.$x === 'function') {
+      return await matcher.$x(matchedLocator.value)
+    }
+    // If both methods fail, re-throw the original error
+    throw error
+  }
 }
 
 async function proceedClick(locator, context = null, options = {}) {
@@ -2797,12 +2792,7 @@ async function proceedClick(locator, context = null, options = {}) {
   }
   const els = await findClickable.call(this, matcher, locator)
   if (context) {
-    assertElementExists(
-      els,
-      locator,
-      'Clickable element',
-      `was not found inside element ${new Locator(context).toString()}`,
-    )
+    assertElementExists(els, locator, 'Clickable element', `was not found inside element ${new Locator(context).toString()}`)
   } else {
     assertElementExists(els, locator, 'Clickable element')
   }
@@ -2820,12 +2810,12 @@ async function proceedClick(locator, context = null, options = {}) {
 }
 
 async function findClickable(matcher, locator) {
-  if (locator.react) return findReactElements.call(this, locator)
-  locator = new Locator(locator)
-  if (!locator.isFuzzy()) return findElements.call(this, matcher, locator)
+  const matchedLocator = new Locator(locator)
+
+  if (!matchedLocator.isFuzzy()) return findElements.call(this, matcher, matchedLocator)
 
   let els
-  const literal = xpathLocator.literal(locator.value)
+  const literal = xpathLocator.literal(matchedLocator.value)
 
   els = await findElements.call(this, matcher, Locator.clickable.narrow(literal))
   if (els.length) return els
@@ -2840,7 +2830,15 @@ async function findClickable(matcher, locator) {
     // Do nothing
   }
 
-  return findElements.call(this, matcher, locator.value) // by css or xpath
+  // Try ARIA selector for accessible name
+  try {
+    els = await matcher.$$(`::-p-aria(${matchedLocator.value})`)
+    if (els.length) return els
+  } catch (err) {
+    // ARIA selector not supported or failed
+  }
+
+  return findElements.call(this, matcher, matchedLocator.value) // by css or xpath
 }
 
 async function proceedSee(assertType, text, context, strict = false) {
@@ -2854,23 +2852,25 @@ async function proceedSee(assertType, text, context, strict = false) {
       el = await this.context.$('body')
     }
 
-    allText = [await el.getProperty('innerText').then((p) => p.jsonValue())]
+    allText = [await el.getProperty('innerText').then(p => p.jsonValue())]
     description = 'web application'
   } else {
     const locator = new Locator(context, 'css')
     description = `element ${locator.toString()}`
     const els = await this._locate(locator)
     assertElementExists(els, locator.toString())
-    allText = await Promise.all(els.map((el) => el.getProperty('innerText').then((p) => p.jsonValue())))
+    allText = await Promise.all(els.map(el => el.getProperty('innerText').then(p => p.jsonValue())))
+  }
+
+  if (store?.currentStep?.opts?.ignoreCase === true) {
+    text = text.toLowerCase()
+    allText = allText.map(elText => elText.toLowerCase())
   }
 
   if (strict) {
-    return allText.map((elText) => equals(description)[assertType](text, elText))
+    return allText.map(elText => equals(description)[assertType](text, elText))
   }
-  return stringIncludes(description)[assertType](
-    normalizeSpacesInString(text),
-    normalizeSpacesInString(allText.join(' | ')),
-  )
+  return stringIncludes(description)[assertType](normalizeSpacesInString(text), normalizeSpacesInString(allText.join(' | ')))
 }
 
 async function findCheckable(locator, context) {
@@ -2882,10 +2882,10 @@ async function findCheckable(locator, context) {
 
   const matchedLocator = new Locator(locator)
   if (!matchedLocator.isFuzzy()) {
-    return findElements.call(this, contextEl, matchedLocator.simplify())
+    return findElements.call(this, contextEl, matchedLocator)
   }
 
-  const literal = xpathLocator.literal(locator)
+  const literal = xpathLocator.literal(matchedLocator.value)
   let els = await findElements.call(this, contextEl, Locator.checkable.byText(literal))
   if (els.length) {
     return els
@@ -2894,21 +2894,45 @@ async function findCheckable(locator, context) {
   if (els.length) {
     return els
   }
-  return findElements.call(this, contextEl, locator)
+
+  // Try ARIA selector for accessible name
+  try {
+    els = await contextEl.$$(`::-p-aria(${matchedLocator.value})`)
+    if (els.length) return els
+  } catch (err) {
+    // ARIA selector not supported or failed
+  }
+
+  return findElements.call(this, contextEl, matchedLocator.value)
 }
 
 async function proceedIsChecked(assertType, option) {
   let els = await findCheckable.call(this, option)
   assertElementExists(els, option, 'Checkable')
-  els = await Promise.all(els.map((el) => el.getProperty('checked')))
-  els = await Promise.all(els.map((el) => el.jsonValue()))
-  const selected = els.reduce((prev, cur) => prev || cur)
+
+  const checkedStates = await Promise.all(
+    els.map(async el => {
+      const checked = await el
+        .getProperty('checked')
+        .then(p => p.jsonValue())
+        .catch(() => null)
+
+      if (checked) {
+        return checked
+      }
+
+      const ariaChecked = await el.evaluate(el => el.getAttribute('aria-checked'))
+      return ariaChecked === 'true'
+    }),
+  )
+
+  const selected = checkedStates.reduce((prev, cur) => prev || cur)
   return truth(`checkable ${option}`, 'to be checked')[assertType](selected)
 }
 
 async function findVisibleFields(locator) {
   const els = await findFields.call(this, locator)
-  const visible = await Promise.all(els.map((el) => el.boundingBox()))
+  const visible = await Promise.all(els.map(el => el.boundingBox()))
   return els.filter((el, index) => visible[index])
 }
 
@@ -2917,7 +2941,7 @@ async function findFields(locator) {
   if (!matchedLocator.isFuzzy()) {
     return this._locate(matchedLocator)
   }
-  const literal = xpathLocator.literal(locator)
+  const literal = xpathLocator.literal(matchedLocator.value)
 
   let els = await this._locate({ xpath: Locator.field.labelEquals(literal) })
   if (els.length) {
@@ -2932,7 +2956,17 @@ async function findFields(locator) {
   if (els.length) {
     return els
   }
-  return this._locate({ css: locator })
+
+  // Try ARIA selector for accessible name
+  try {
+    const page = await this.context
+    els = await page.$$(`::-p-aria(${matchedLocator.value})`)
+    if (els.length) return els
+  } catch (err) {
+    // ARIA selector not supported or failed
+  }
+
+  return this._locate({ css: matchedLocator.value })
 }
 
 async function proceedDragAndDrop(sourceLocator, destinationLocator) {
@@ -2961,15 +2995,15 @@ async function proceedSeeInField(assertType, field, value) {
   const els = await findVisibleFields.call(this, field)
   assertElementExists(els, field, 'Field')
   const el = els[0]
-  const tag = await el.getProperty('tagName').then((el) => el.jsonValue())
-  const fieldType = await el.getProperty('type').then((el) => el.jsonValue())
+  const tag = await el.getProperty('tagName').then(el => el.jsonValue())
+  const fieldType = await el.getProperty('type').then(el => el.jsonValue())
 
-  const proceedMultiple = async (elements) => {
+  const proceedMultiple = async elements => {
     const fields = Array.isArray(elements) ? elements : [elements]
 
     const elementValues = []
     for (const element of fields) {
-      elementValues.push(await element.getProperty('value').then((el) => el.jsonValue()))
+      elementValues.push(await element.getProperty('value').then(el => el.jsonValue()))
     }
 
     if (typeof value === 'boolean') {
@@ -2978,7 +3012,7 @@ async function proceedSeeInField(assertType, field, value) {
       if (assertType === 'assert') {
         equals(`select option by ${field}`)[assertType](true, elementValues.length > 0)
       }
-      elementValues.forEach((val) => stringIncludes(`fields by ${field}`)[assertType](value, val))
+      elementValues.forEach(val => stringIncludes(`fields by ${field}`)[assertType](value, val))
     }
   }
 
@@ -3006,19 +3040,30 @@ async function proceedSeeInField(assertType, field, value) {
     }
     return proceedMultiple(els[0])
   }
-  const fieldVal = await el.getProperty('value').then((el) => el.jsonValue())
+
+  let fieldVal = await el.getProperty('value').then(el => el.jsonValue())
+
+  if (fieldVal === undefined || fieldVal === null) {
+    fieldVal = await el.evaluate(el => el.textContent || el.innerText)
+  }
+
   return stringIncludes(`fields by ${field}`)[assertType](value, fieldVal)
 }
 
 async function filterFieldsByValue(elements, value, onlySelected) {
   const matches = []
   for (const element of elements) {
-    const val = await element.getProperty('value').then((el) => el.jsonValue())
+    let val = await element.getProperty('value').then(el => el.jsonValue())
+
+    if (val === undefined || val === null) {
+      val = await element.evaluate(el => el.textContent || el.innerText)
+    }
+
     let isSelected = true
     if (onlySelected) {
       isSelected = await elementSelected(element)
     }
-    if ((value == null || val.indexOf(value) > -1) && isSelected) {
+    if ((value == null || (val && val.indexOf(value) > -1)) && isSelected) {
       matches.push(element)
     }
   }
@@ -3037,12 +3082,12 @@ async function filterFieldsBySelectionState(elements, state) {
 }
 
 async function elementSelected(element) {
-  const type = await element.getProperty('type').then((el) => el.jsonValue())
+  const type = await element.getProperty('type').then(el => el.jsonValue())
 
   if (type === 'checkbox' || type === 'radio') {
-    return element.getProperty('checked').then((el) => el.jsonValue())
+    return element.getProperty('checked').then(el => el.jsonValue())
   }
-  return element.getProperty('selected').then((el) => el.jsonValue())
+  return element.getProperty('selected').then(el => el.jsonValue())
 }
 
 function isFrameLocator(locator) {
@@ -3077,9 +3122,9 @@ async function targetCreatedHandler(page) {
     page
       .$('body')
       .catch(() => null)
-      .then((context) => (this.context = context))
+      .then(context => (this.context = context))
   })
-  page.on('console', (msg) => {
+  page.on('console', msg => {
     this.debugSection(`Browser:${ucfirst(msg.type())}`, (msg._text || '') + msg.args().join(' '))
     consoleLogStore.add(msg)
   })
@@ -3180,13 +3225,18 @@ function _waitForElement(locator, options) {
   }
 }
 
-async function findReactElements(locator, props = {}, state = {}) {
+async function findReactElements(locator) {
+  const resolved = toLocatorConfig(locator, 'react')
+
+  // Use createRequire to access require.resolve in ESM
+  const { createRequire } = await import('module')
+  const require = createRequire(import.meta.url)
   const resqScript = await fs.promises.readFile(require.resolve('resq'), 'utf-8')
   await this.page.evaluate(resqScript.toString())
 
   await this.page.evaluate(() => window.resq.waitToLoadReact())
   const arrayHandle = await this.page.evaluateHandle(
-    (obj) => {
+    obj => {
       const { selector, props, state } = obj
       let elements = window.resq.resq$$(selector)
       if (Object.keys(props).length) {
@@ -3205,7 +3255,7 @@ async function findReactElements(locator, props = {}, state = {}) {
       // [[div, div], [div, div]] => [div, div, div, div]
       let nodes = []
 
-      elements.forEach((element) => {
+      elements.forEach(element => {
         let { node, isFragment } = element
 
         if (!node) {
@@ -3223,9 +3273,9 @@ async function findReactElements(locator, props = {}, state = {}) {
       return [...nodes]
     },
     {
-      selector: locator.react,
-      props: locator.props || {},
-      state: locator.state || {},
+      selector: resolved.react,
+      props: resolved.props || {},
+      state: resolved.state || {},
     },
   )
 
@@ -3241,3 +3291,54 @@ async function findReactElements(locator, props = {}, state = {}) {
   await arrayHandle.dispose()
   return result
 }
+
+async function findByRole(matcher, locator) {
+  const resolved = toLocatorConfig(locator, 'role')
+  const roleSelector = buildRoleSelector(resolved)
+
+  if (!resolved.text && !resolved.name) {
+    return matcher.$$(roleSelector)
+  }
+
+  const allElements = await matcher.$$(roleSelector)
+  const filtered = []
+  const accessibleName = resolved.text ?? resolved.name
+  const matcherFn = createRoleTextMatcher(accessibleName, resolved.exact === true)
+
+  for (const el of allElements) {
+    const texts = await el.evaluate(e => {
+      const ariaLabel = e.hasAttribute('aria-label') ? e.getAttribute('aria-label') : ''
+      const labelText = e.id ? document.querySelector(`label[for="${e.id}"]`)?.textContent.trim() || '' : ''
+      const placeholder = e.getAttribute('placeholder') || ''
+      const innerText = e.innerText ? e.innerText.trim() : ''
+      return [ariaLabel || labelText, placeholder, innerText]
+    })
+
+    if (texts.some(text => matcherFn(text))) filtered.push(el)
+  }
+
+  return filtered
+}
+
+function toLocatorConfig(locator, key) {
+  const matchedLocator = new Locator(locator, key)
+  if (matchedLocator.locator) return matchedLocator.locator
+  return { [key]: matchedLocator.value }
+}
+
+function buildRoleSelector(resolved) {
+  return `::-p-aria([role="${resolved.role}"])`
+}
+
+function createRoleTextMatcher(expected, exactMatch) {
+  if (expected instanceof RegExp) {
+    return value => expected.test(value || '')
+  }
+  const target = String(expected)
+  if (exactMatch) {
+    return value => value === target
+  }
+  return value => typeof value === 'string' && value.includes(target)
+}
+
+export { Puppeteer as default }