codeceptjs 4.0.1-beta.23 → 4.0.1-beta.26

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 } from './extras/PlaywrightLocator.js'
+import { findReact, findVue, findByPlaywrightLocator } from './extras/PlaywrightReactVueLocator.js'
 import WebElement from '../element/WebElement.js'
 
 let playwright
@@ -44,6 +44,36 @@ if (typeof global.__playwrightSelectorsRegistered === 'undefined') {
   global.__playwrightSelectorsRegistered = false
 }
 
+/**
+ * Creates a Playwright selector engine factory for a custom locator strategy.
+ * @param {string} name - Strategy name for error messages
+ * @param {Function} func - The locator function (selector, root) => Element|Element[]
+ * @returns {Function} Selector engine factory
+ */
+function createCustomSelectorEngine(name, func) {
+  return () => ({
+    create: () => null,
+    query(root, selector) {
+      if (!root) return null
+      try {
+        const result = func(selector, root)
+        return Array.isArray(result) ? result[0] : result
+      } catch (e) {
+        return null
+      }
+    },
+    queryAll(root, selector) {
+      if (!root) return []
+      try {
+        const result = func(selector, root)
+        return Array.isArray(result) ? result : result ? [result] : []
+      } catch (e) {
+        return []
+      }
+    },
+  })
+}
+
 const popupStore = new Popup()
 const consoleLogStore = new Console()
 const availableBrowsers = ['chromium', 'webkit', 'firefox', 'electron']
@@ -358,23 +388,13 @@ class Playwright extends Helper {
 
     // Filter out invalid customLocatorStrategies (empty arrays, objects without functions)
     // This can happen in worker threads where config is serialized/deserialized
-    let validCustomLocators = null
-    if (typeof config.customLocatorStrategies === 'object' && config.customLocatorStrategies !== null) {
-      // Check if it's an empty array or object with no function properties
-      const entries = Object.entries(config.customLocatorStrategies)
-      const hasFunctions = entries.some(([_, value]) => typeof value === 'function')
-      if (hasFunctions) {
-        validCustomLocators = config.customLocatorStrategies
-      }
-    }
-
-    this.customLocatorStrategies = validCustomLocators
+    this.customLocatorStrategies = this._parseCustomLocatorStrategies(config.customLocatorStrategies)
     this._customLocatorsRegistered = false
 
     // Add custom locator strategies to global registry for early registration
     if (this.customLocatorStrategies) {
-      for (const [strategyName, strategyFunction] of Object.entries(this.customLocatorStrategies)) {
-        globalCustomLocatorStrategies.set(strategyName, strategyFunction)
+      for (const [name, func] of Object.entries(this.customLocatorStrategies)) {
+        globalCustomLocatorStrategies.set(name, func)
       }
     }
 
@@ -565,54 +585,23 @@ class Playwright extends Helper {
       }
 
       // Register all custom locator strategies from the global registry
-      for (const [strategyName, strategyFunction] of globalCustomLocatorStrategies.entries()) {
-        if (!registeredCustomLocatorStrategies.has(strategyName)) {
-          try {
-            // Create a selector engine factory function exactly like createValueEngine pattern
-            // Capture variables in closure to avoid reference issues
-            const createCustomEngine = ((name, func) => {
-              return () => {
-                return {
-                  create() {
-                    return null
-                  },
-                  query(root, selector) {
-                    try {
-                      if (!root) return null
-                      const result = func(selector, root)
-                      return Array.isArray(result) ? result[0] : result
-                    } catch (error) {
-                      console.warn(`Error in custom locator "${name}":`, error)
-                      return null
-                    }
-                  },
-                  queryAll(root, selector) {
-                    try {
-                      if (!root) return []
-                      const result = func(selector, root)
-                      return Array.isArray(result) ? result : result ? [result] : []
-                    } catch (error) {
-                      console.warn(`Error in custom locator "${name}":`, error)
-                      return []
-                    }
-                  },
-                }
-              }
-            })(strategyName, strategyFunction)
+      await this._registerGlobalCustomLocators()
+    } catch (e) {
+      console.warn(e)
+    }
+  }
 
-            await playwright.selectors.register(strategyName, createCustomEngine)
-            registeredCustomLocatorStrategies.add(strategyName)
-          } catch (error) {
-            if (!error.message.includes('already registered')) {
-              console.warn(`Failed to register custom locator strategy '${strategyName}':`, error)
-            } else {
-              console.log(`Custom locator strategy '${strategyName}' already registered`)
-            }
-          }
+  async _registerGlobalCustomLocators() {
+    for (const [name, func] of globalCustomLocatorStrategies.entries()) {
+      if (registeredCustomLocatorStrategies.has(name)) continue
+      try {
+        await playwright.selectors.register(name, createCustomSelectorEngine(name, func))
+        registeredCustomLocatorStrategies.add(name)
+      } catch (e) {
+        if (!e.message.includes('already registered')) {
+          this.debugSection('Custom Locator', `Failed to register '${name}': ${e.message}`)
         }
       }
-    } catch (e) {
-      console.warn(e)
     }
   }
 
@@ -1277,28 +1266,31 @@ class Playwright extends Helper {
     return this.browser
   }
 
+  _hasCustomLocatorStrategies() {
+    return !!(this.customLocatorStrategies && Object.keys(this.customLocatorStrategies).length > 0)
+  }
+
+  _parseCustomLocatorStrategies(strategies) {
+    if (typeof strategies !== 'object' || strategies === null) return null
+    const hasValidFunctions = Object.values(strategies).some(v => typeof v === 'function')
+    return hasValidFunctions ? strategies : null
+  }
+
   _lookupCustomLocator(customStrategy) {
-    if (typeof this.customLocatorStrategies !== 'object' || this.customLocatorStrategies === null) {
-      return null
-    }
+    if (!this._hasCustomLocatorStrategies()) return null
     const strategy = this.customLocatorStrategies[customStrategy]
     return typeof strategy === 'function' ? strategy : null
   }
 
   _isCustomLocator(locator) {
     const locatorObj = new Locator(locator)
-    if (locatorObj.isCustom()) {
-      const customLocator = this._lookupCustomLocator(locatorObj.type)
-      if (customLocator) {
-        return true
-      }
-      throw new Error('Please define "customLocatorStrategies" as an Object and the Locator Strategy as a "function".')
-    }
-    return false
+    if (!locatorObj.isCustom()) return false
+    if (this._lookupCustomLocator(locatorObj.type)) return true
+    throw new Error('Please define "customLocatorStrategies" as an Object and the Locator Strategy as a "function".')
   }
 
   _isCustomLocatorStrategyDefined() {
-    return !!(this.customLocatorStrategies && Object.keys(this.customLocatorStrategies).length > 0)
+    return this._hasCustomLocatorStrategies()
   }
 
   /**
@@ -1321,49 +1313,16 @@ class Playwright extends Helper {
   }
 
   async _registerCustomLocatorStrategies() {
-    if (!this.customLocatorStrategies) return
-
-    for (const [strategyName, strategyFunction] of Object.entries(this.customLocatorStrategies)) {
-      if (!registeredCustomLocatorStrategies.has(strategyName)) {
-        try {
-          const createCustomEngine = ((name, func) => {
-            return () => {
-              return {
-                create(root, target) {
-                  return null
-                },
-                query(root, selector) {
-                  try {
-                    if (!root) return null
-                    const result = func(selector, root)
-                    return Array.isArray(result) ? result[0] : result
-                  } catch (error) {
-                    console.warn(`Error in custom locator "${name}":`, error)
-                    return null
-                  }
-                },
-                queryAll(root, selector) {
-                  try {
-                    if (!root) return []
-                    const result = func(selector, root)
-                    return Array.isArray(result) ? result : result ? [result] : []
-                  } catch (error) {
-                    console.warn(`Error in custom locator "${name}":`, error)
-                    return []
-                  }
-                },
-              }
-            }
-          })(strategyName, strategyFunction)
+    if (!this._hasCustomLocatorStrategies()) return
 
-          await playwright.selectors.register(strategyName, createCustomEngine)
-          registeredCustomLocatorStrategies.add(strategyName)
-        } catch (error) {
-          if (!error.message.includes('already registered')) {
-            console.warn(`Failed to register custom locator strategy '${strategyName}':`, error)
-          } else {
-            console.log(`Custom locator strategy '${strategyName}' already registered`)
-          }
+    for (const [name, func] of Object.entries(this.customLocatorStrategies)) {
+      if (registeredCustomLocatorStrategies.has(name)) continue
+      try {
+        await playwright.selectors.register(name, createCustomSelectorEngine(name, func))
+        registeredCustomLocatorStrategies.add(name)
+      } catch (e) {
+        if (!e.message.includes('already registered')) {
+          this.debugSection('Custom Locator', `Failed to register '${name}': ${e.message}`)
         }
       }
     }
@@ -2489,30 +2448,23 @@ class Playwright extends Helper {
    * {{> selectOption }}
    */
   async selectOption(select, option) {
-    const context = await this.context
-    const matchedLocator = new Locator(select)
+    const els = await findFields.call(this, select)
+    assertElementExists(els, select, 'Selectable field')
+    const el = els[0]
 
-    // Strict locator
-    if (!matchedLocator.isFuzzy()) {
-      this.debugSection('SelectOption', `Strict: ${JSON.stringify(select)}`)
-      const els = await this._locate(matchedLocator)
-      assertElementExists(els, select, 'Selectable element')
-      return proceedSelect.call(this, context, els[0], option)
-    }
+    await highlightActiveElement.call(this, el)
+    let optionToSelect = ''
 
-    // Fuzzy: try combobox
-    this.debugSection('SelectOption', `Fuzzy: "${matchedLocator.value}"`)
-    let els = await findByRole(context, { role: 'combobox', name: matchedLocator.value })
-    if (els?.length) return proceedSelect.call(this, context, els[0], option)
+    try {
+      optionToSelect = (await el.locator('option', { hasText: option }).textContent()).trim()
+    } catch (e) {
+      optionToSelect = option
+    }
 
-    // Fuzzy: try listbox
-    els = await findByRole(context, { role: 'listbox', name: matchedLocator.value })
-    if (els?.length) return proceedSelect.call(this, context, els[0], option)
+    if (!Array.isArray(option)) option = [optionToSelect]
 
-    // Fuzzy: try native select
-    els = await findFields.call(this, select)
-    assertElementExists(els, select, 'Selectable element')
-    return proceedSelect.call(this, context, els[0], option)
+    await el.selectOption(option)
+    return this._waitForAction()
   }
 
   /**
@@ -2797,6 +2749,17 @@ 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()) {
@@ -2809,32 +2772,21 @@ class Playwright extends Helper {
       assertElementExists(text, locatorObj.toString())
       this.debugSection('Text', text)
       return text
-    }
-
-    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))
+    } else {
+      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
       }
     }
-
-    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
-    }
   }
 
   /**
@@ -4313,26 +4265,50 @@ function buildLocatorString(locator) {
   if (locator.isXPath()) {
     return `xpath=${locator.value}`
   }
-    return locator.simplify()
+  return locator.simplify()
 }
 
-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()
+/**
+ * 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 findElements(matcher, locator) {
-  const matchedLocator = Locator.from(locator)
-  const roleElements = await findByRole(matcher, matchedLocator)
+  // 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)
   if (roleElements) return roleElements
 
-  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)
+  // Handle custom locators directly instead of relying on Playwright selector engines
+  if (locator.isCustom()) {
+    return findCustomElements.call(this, matcher, locator)
+  }
 
   // Check if we have a custom context locator and need to search within it
   if (this.contextLocator) {
@@ -4345,12 +4321,12 @@ async function findElements(matcher, locator) {
       }
 
       // Search within the first context element
-      const locatorString = buildLocatorString(matchedLocator)
+      const locatorString = buildLocatorString(locator)
       return contextElements[0].locator(locatorString).all()
     }
   }
 
-  const locatorString = buildLocatorString(matchedLocator)
+  const locatorString = buildLocatorString(locator)
 
   return matcher.locator(locatorString).all()
 }
@@ -4443,17 +4419,13 @@ async function findCustomElements(matcher, locator) {
 }
 
 async function findElement(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'
+  if (locator.react) return findReact(matcher, locator)
+  if (locator.vue) return findVue(matcher, locator)
+  if (locator.pw) return findByPlaywrightLocator.call(this, matcher, locator)
 
-  if (isReactLocator) return findReact(matcher, matchedLocator)
-  if (isVueLocator) return findVue(matcher, matchedLocator)
+  locator = new Locator(locator, 'css')
 
-  return matcher.locator(buildLocatorString(matchedLocator)).first()
+  return matcher.locator(buildLocatorString(locator)).first()
 }
 
 async function getVisibleElements(elements) {
@@ -4505,14 +4477,26 @@ async function proceedClick(locator, context = null, options = {}) {
 }
 
 async function findClickable(matcher, locator) {
-  if (locator.react) return findReact(matcher, locator)
-  if (locator.vue) return findVue(matcher, locator)
+  const matchedLocator = new Locator(locator)
 
-  locator = new Locator(locator)
-  if (!locator.isFuzzy()) return findElements.call(this, matcher, locator)
+  if (!matchedLocator.isFuzzy()) return findElements.call(this, matcher, matchedLocator)
 
   let els
-  const literal = xpathLocator.literal(locator.value)
+  const literal = xpathLocator.literal(matchedLocator.value)
+
+  try {
+    els = await matcher.getByRole('button', { name: matchedLocator.value }).all()
+    if (els.length) return els
+  } catch (err) {
+    // getByRole not supported or failed
+  }
+
+  try {
+    els = await matcher.getByRole('link', { name: matchedLocator.value }).all()
+    if (els.length) return els
+  } catch (err) {
+    // getByRole not supported or failed
+  }
 
   els = await findElements.call(this, matcher, Locator.clickable.narrow(literal))
   if (els.length) return els
@@ -4527,7 +4511,7 @@ async function findClickable(matcher, locator) {
     // Do nothing
   }
 
-  return findElements.call(this, matcher, locator.value) // by css or xpath
+  return findElements.call(this, matcher, matchedLocator.value) // by css or xpath
 }
 
 async function proceedSee(assertType, text, context, strict = false) {
@@ -4567,17 +4551,14 @@ async function findCheckable(locator, context) {
   }
 
   // Handle role locators with text/exact options
-  const roleElements = await findByRole(contextEl, locator)
+  const roleElements = await handleRoleLocator(contextEl, locator)
   if (roleElements) return roleElements
 
-  const matchedLocator = Locator.from(locator)
+  const matchedLocator = new Locator(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) {
@@ -4599,15 +4580,17 @@ async function proceedIsChecked(assertType, option) {
 }
 
 async function findFields(locator) {
-  const page = await this.page
-  const roleElements = await findByRole(page, locator)
-  if (roleElements) return roleElements
+  // 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 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) })
@@ -4626,45 +4609,6 @@ async function findFields(locator) {
   return this._locate({ css: locator })
 }
 
-async function proceedSelect(context, el, option) {
-  const role = await el.getAttribute('role')
-  const options = Array.isArray(option) ? option : [option]
-
-  if (role === 'combobox') {
-    this.debugSection('SelectOption', 'Expanding combobox')
-    await highlightActiveElement.call(this, el)
-    const [ariaOwns, ariaControls] = await Promise.all([el.getAttribute('aria-owns'), el.getAttribute('aria-controls')])
-    await el.click()
-    await this._waitForAction()
-
-    const listboxId = ariaOwns || ariaControls
-    let listbox = listboxId ? context.locator(`#${listboxId}`).first() : null
-    if (!listbox || !(await listbox.count())) listbox = context.getByRole('listbox').first()
-
-    for (const opt of options) {
-      const optEl = listbox.getByRole('option', { name: opt }).first()
-      this.debugSection('SelectOption', `Clicking: "${opt}"`)
-      await highlightActiveElement.call(this, optEl)
-      await optEl.click()
-    }
-    return this._waitForAction()
-  }
-
-  if (role === 'listbox') {
-    for (const opt of options) {
-      const optEl = el.getByRole('option', { name: opt }).first()
-      this.debugSection('SelectOption', `Clicking: "${opt}"`)
-      await highlightActiveElement.call(this, optEl)
-      await optEl.click()
-    }
-    return this._waitForAction()
-  }
-
-  await highlightActiveElement.call(this, el)
-  await el.selectOption(option)
-  return this._waitForAction()
-}
-
 async function proceedSeeInField(assertType, field, value) {
   const els = await findFields.call(this, field)
   assertElementExists(els, field, 'Field')