codeceptjs 4.0.1-beta.18 → 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,55 +4318,26 @@ function buildLocatorString(locator) {
   if (locator.isXPath()) {
     return `xpath=${locator.value}`
   }
-  if (locator.isJson()) {
-    // For JSON locators, pass the entire object to Playwright
-    // Playwright natively supports role locator objects
-    return locator.value
-  }
-  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
+    return locator.simplify()
 }
 
-/**
- * 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) {
@@ -4367,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()
 }
@@ -4465,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) {
@@ -4523,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
@@ -4597,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) {
@@ -4626,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', 'json']
+const locatorTypes = ['css', 'by', 'xpath', 'id', 'name', 'fuzzy', 'frame', 'shadow', 'role']
 /** @class */
 class Locator {
   /**
@@ -29,14 +29,7 @@ class Locator {
         Object.assign(this, 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))
-
+      this._applyObjectLocator(locator)
       return
     }
 
@@ -58,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))
@@ -81,18 +75,17 @@ class Locator {
         return this.value
       case 'shadow':
         return { shadow: this.value }
-      case 'pw':
-        return { pw: this.value }
       case 'role':
         return `[role="${this.value}"]`
-      case 'json':
-        return { json: this.value }
     }
     return this.value
   }
 
   toStrict() {
     if (!this.type) return null
+    if (this.type === 'role' && this.locator) {
+      return this.locator
+    }
     return { [this.type]: this.value }
   }
 
@@ -109,31 +102,24 @@ class Locator {
     try {
       const parsed = JSON.parse(trimmed)
       if (typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed)) {
-        this.locator = parsed
-
-        // Check if this is a multi-property JSON (like aria locators)
-        const keys = Object.keys(parsed)
-        if (keys.length > 1) {
-          // For multi-property objects, treat the entire JSON as the value
-          // with a special type to preserve all properties
-          this.type = 'json'
-          this.value = parsed
-        } else {
-          // Single property - use existing logic
-          this.type = keys[0]
-          this.value = parsed[keys[0]]
-        }
-
-        this.strict = true
-        Locator.filters.forEach(f => f(parsed, this))
+        this._applyObjectLocator(parsed)
         return true
       }
     } catch (e) {
-      // continue with normal string processing
     }
     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}
    */
@@ -169,13 +155,6 @@ class Locator {
     return this.type === 'css'
   }
 
-  /**
-   * @returns {boolean}
-   */
-  isPlaywrightLocator() {
-    return this.type === 'pw'
-  }
-
   /**
    * @returns {boolean}
    */
@@ -184,12 +163,22 @@ class Locator {
   }
 
   /**
-   * @returns {boolean}
+   * @returns {{role: string, options: object}|null}
    */
-  isJson() {
-    return this.type === 'json'
+  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}
    */
@@ -456,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>}
@@ -656,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.18",
+  "version": "4.0.1-beta.19",
   "type": "module",
   "description": "Supercharged End 2 End Testing Framework for NodeJS",
   "keywords": [