codeceptjs 4.0.1-beta.17 → 4.0.1-beta.19

package/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) })

package/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 }

package/lib/locator.js

@@ -5,7 +5,7 @@ import { createRequire } from 'module'
 const require = createRequire(import.meta.url)
 let cssToXPath
 
-const locatorTypes = ['css', 'by', 'xpath', 'id', 'name', 'fuzzy', 'frame', 'shadow', 'pw', 'role']
+const locatorTypes = ['css', 'by', 'xpath', 'id', 'name', 'fuzzy', 'frame', 'shadow', 'role']
 /** @class */
 class Locator {
   /**
@@ -29,14 +29,12 @@ class Locator {
         Object.assign(this, locator)
         return
       }
+      this._applyObjectLocator(locator)
+      return
+    }
 
-      this.locator = locator
-      this.type = Object.keys(locator)[0]
-      this.value = locator[this.type]
-      this.strict = true
-
-      Locator.filters.forEach(f => f(locator, this))
-
+    // Try to parse JSON strings that look like objects
+    if (this.parsedJsonAsString(locator)) {
       return
     }
 
@@ -53,8 +51,9 @@ class Locator {
     if (isShadow(locator)) {
       this.type = 'shadow'
     }
-    if (isPlaywrightLocator(locator)) {
-      this.type = 'pw'
+    if (isReactVueLocator(locator)) {
+      // React/Vue locators - keep as fuzzy type, helpers will handle them specially
+      this.type = 'fuzzy'
     }
 
     Locator.filters.forEach(f => f(locator, this))
@@ -76,8 +75,6 @@ class Locator {
         return this.value
       case 'shadow':
         return { shadow: this.value }
-      case 'pw':
-        return { pw: this.value }
       case 'role':
         return `[role="${this.value}"]`
     }
@@ -86,9 +83,43 @@ class Locator {
 
   toStrict() {
     if (!this.type) return null
+    if (this.type === 'role' && this.locator) {
+      return this.locator
+    }
     return { [this.type]: this.value }
   }
 
+  parsedJsonAsString(locator) {
+    if (typeof locator !== 'string') {
+      return false
+    }
+
+    const trimmed = locator.trim()
+    if (!trimmed.startsWith('{') || !trimmed.endsWith('}')) {
+      return false
+    }
+
+    try {
+      const parsed = JSON.parse(trimmed)
+      if (typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed)) {
+        this._applyObjectLocator(parsed)
+        return true
+      }
+    } catch (e) {
+    }
+    return false
+  }
+
+  _applyObjectLocator(locator) {
+    this.strict = true
+    this.locator = locator
+    const keys = Object.keys(locator)
+    const [type] = keys
+    this.type = type
+    this.value = keys.length > 1 ? locator : locator[type]
+    Locator.filters.forEach(f => f(locator, this))
+  }
+
   /**
    * @returns {string}
    */
@@ -127,17 +158,27 @@ class Locator {
   /**
    * @returns {boolean}
    */
-  isPlaywrightLocator() {
-    return this.type === 'pw'
+  isRole() {
+    return this.type === 'role'
   }
 
   /**
-   * @returns {boolean}
+   * @returns {{role: string, options: object}|null}
    */
-  isRole() {
-    return this.type === 'role'
+  getRoleOptions() {
+    if (!this.isRole()) return null
+    const data = this.locator && typeof this.locator === 'object' ? this.locator : { role: this.value }
+    const { role, text, name, exact, includeHidden, ...rest } = data
+    let options = { ...rest }
+    const accessibleName = name ?? text
+    if (accessibleName !== undefined) options.name = accessibleName
+    if (exact !== undefined) options.exact = exact
+    if (includeHidden !== undefined) options.includeHidden = includeHidden
+    if (Object.keys(options).length === 0) options = undefined
+    return { role, options }
   }
 
+
   /**
    * @returns {boolean}
    */
@@ -404,6 +445,16 @@ Locator.build = locator => {
   return new Locator(locator, 'css')
 }
 
+/**
+ * @param {CodeceptJS.LocatorOrString|Locator} locator
+ * @param {string} [defaultType]
+ * @returns {Locator}
+ */
+Locator.from = (locator, defaultType = '') => {
+  if (locator instanceof Locator) return locator
+  return new Locator(locator, defaultType)
+}
+
 /**
  * Filters to modify locators
  * @type {Array<function(CodeceptJS.LocatorOrString, Locator): void>}
@@ -604,20 +655,12 @@ function removePrefix(xpath) {
  * @param {string} locator
  * @returns {boolean}
  */
-function isPlaywrightLocator(locator) {
+function isReactVueLocator(locator) {
   return locator.includes('_react') || locator.includes('_vue')
 }
 
 /**
  * @private
- * check if the locator is a role locator
- * @param {{role: string}} locator
- * @returns {boolean}
- */
-function isRoleLocator(locator) {
-  return locator.role !== undefined && typeof locator.role === 'string' && Object.keys(locator).length >= 1
-}
-
 /**
  * @private
  * @param {CodeceptJS.LocatorOrString} locator

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codeceptjs",
-  "version": "4.0.1-beta.17",
+  "version": "4.0.1-beta.19",
   "type": "module",
   "description": "Supercharged End 2 End Testing Framework for NodeJS",
   "keywords": [
@@ -88,13 +88,13 @@
     "@codeceptjs/configure": "1.0.6",
     "@codeceptjs/helper": "2.0.4",
     "@cucumber/cucumber-expressions": "18",
-    "@cucumber/gherkin": "35.1.0",
-    "@cucumber/messages": "29.0.1",
+    "@cucumber/gherkin": "37.0.0",
+    "@cucumber/messages": "31.0.0",
     "@xmldom/xmldom": "0.9.8",
     "acorn": "8.15.0",
     "ai": "^5.0.60",
     "arrify": "3.0.0",
-    "axios": "1.12.2",
+    "axios": "1.13.2",
     "chalk": "4.1.2",
     "cheerio": "^1.0.0",
     "chokidar": "^4.0.3",
@@ -108,11 +108,11 @@
     "fn-args": "4.0.0",
     "fs-extra": "11.3.2",
     "fuse.js": "^7.0.0",
-    "glob": ">=9.0.0 <12",
+    "glob": ">=9.0.0 <14",
     "html-minifier-terser": "7.2.0",
     "inquirer": "^8.2.7",
     "invisi-data": "^1.0.0",
-    "joi": "18.0.1",
+    "joi": "18.0.2",
     "js-beautify": "1.15.4",
     "lodash.clonedeep": "4.5.0",
     "lodash.merge": "4.6.2",
@@ -149,7 +149,7 @@
     "@types/node": "^24.9.2",
     "@wdio/sauce-service": "9.12.5",
     "@wdio/selenium-standalone-service": "8.15.0",
-    "@wdio/utils": "9.20.0",
+    "@wdio/utils": "9.21.0",
     "@xmldom/xmldom": "0.9.8",
     "bunosh": "latest",
     "chai": "^6.2.1",
@@ -162,8 +162,8 @@
     "eslint-plugin-mocha": "11.1.0",
     "expect": "30.2.0",
     "express": "^5.1.0",
-    "globals": "16.4.0",
-    "graphql": "16.11.0",
+    "globals": "16.5.0",
+    "graphql": "16.12.0",
     "graphql-tag": "^2.12.6",
     "husky": "9.1.7",
     "jsdoc": "^3.6.11",
@@ -172,7 +172,7 @@
     "mochawesome": "^7.1.3",
     "playwright": "1.55.1",
     "prettier": "^3.3.2",
-    "puppeteer": "24.15.0",
+    "puppeteer": "24.33.0",
     "qrcode-terminal": "0.12.0",
     "rosie": "2.1.1",
     "runok": "^0.9.3",
@@ -184,7 +184,7 @@
     "tsd": "^0.33.0",
     "tsd-jsdoc": "2.5.0",
     "tsx": "^4.19.2",
-    "typedoc": "0.28.13",
+    "typedoc": "0.28.15",
     "typedoc-plugin-markdown": "4.9.0",
     "typescript": "5.8.3",
     "wdio-docker-service": "3.2.1",