codeceptjs 4.0.1-beta.25 → 4.0.1-beta.26

package/lib/helper/Puppeteer.js

@@ -1617,30 +1617,33 @@ class Puppeteer extends Helper {
    * {{> selectOption }}
    */
   async selectOption(select, option) {
-    const context = await this._getContext()
-    const matchedLocator = new Locator(select)
-
-    // 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)
+    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') {
+      throw new Error('Element is not <select>')
     }
+    highlightActiveElement.call(this, els[0], await this._getContext())
+    if (!Array.isArray(option)) option = [option]
+
+    for (const key in option) {
+      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])
+        continue
+      }
+      optEl = await findElements.call(this, el, { xpath: Locator.select.byValue(opt) })
+      if (optEl.length) {
+        this._evaluateHandeInContext(el => (el.selected = true), optEl[0])
+      }
+    }
+    await this._evaluateHandeInContext(element => {
+      element.dispatchEvent(new Event('input', { bubbles: true }))
+      element.dispatchEvent(new Event('change', { bubbles: true }))
+    }, el)
 
-    // Fuzzy: try combobox
-    this.debugSection('SelectOption', `Fuzzy: "${matchedLocator.value}"`)
-    let els = await findByRole.call(this, context, { role: 'combobox', name: matchedLocator.value })
-    if (els?.length) return proceedSelect.call(this, context, els[0], option)
-
-    // Fuzzy: try listbox
-    els = await findByRole.call(this, context, { role: 'listbox', name: matchedLocator.value })
-    if (els?.length) return proceedSelect.call(this, context, els[0], option)
-
-    // Fuzzy: try native select
-    els = await findVisibleFields.call(this, select)
-    assertElementExists(els, select, 'Selectable element')
-    return proceedSelect.call(this, context, els[0], option)
+    return this._waitForAction()
   }
 
   /**
@@ -1690,10 +1693,6 @@ class Puppeteer extends Helper {
    * {{ react }}
    */
   async see(text, context = null) {
-    // If only one argument passed and it's an object without custom toString(), treat as locator
-    if (!context && text && typeof text === 'object' && !Array.isArray(text) && text.toString === Object.prototype.toString) {
-      return this.seeElement(text)
-    }
     return proceedSee.call(this, 'assert', text, context)
   }
 
@@ -2956,7 +2955,7 @@ async function findElements(matcher, locator) {
 async function findElement(matcher, locator) {
   if (locator.react) return findReactElements.call(this, locator)
   locator = new Locator(locator, 'css')
-  
+
   // Check if locator is a role locator and call findByRole
   if (locator.isRole()) {
     const elements = await findByRole.call(this, matcher, locator)
@@ -2968,10 +2967,13 @@ async function findElement(matcher, locator) {
     const elements = await matcher.$$(locator.simplify())
     return elements[0]
   }
-  
-  // For XPath in Puppeteer 24.x+, use the same approach as findElements
-  // $x method was removed, so we use ::-p-xpath() or fallback
-  const elements = await findElements.call(this, matcher, locator)
+  // puppeteer version < 19.4.0 is no longer supported. This one is backward support.
+  if (puppeteer.default?.defaultBrowserRevision) {
+    const elements = await matcher.$$(`xpath/${locator.value}`)
+    return elements[0]
+  }
+  // For Puppeteer 24.x+, $x method was removed - use ::-p-xpath() selector
+  const elements = await matcher.$$(`::-p-xpath(${locator.value})`)
   return elements[0]
 }
 
@@ -3161,90 +3163,6 @@ async function findFields(locator) {
   return this._locate({ css: matchedLocator.value })
 }
 
-async function proceedSelect(context, el, option) {
-  const role = await el.evaluate(e => e.getAttribute('role'))
-  const options = Array.isArray(option) ? option : [option]
-
-  if (role === 'combobox') {
-    this.debugSection('SelectOption', 'Expanding combobox')
-    highlightActiveElement.call(this, el, context)
-    const [ariaOwns, ariaControls] = await el.evaluate(e => [e.getAttribute('aria-owns'), e.getAttribute('aria-controls')])
-    await el.click()
-    await this._waitForAction()
-
-    const listboxId = ariaOwns || ariaControls
-    let listbox = listboxId ? await context.$(`#${listboxId}`) : null
-    if (!listbox) {
-      const listboxes = await context.$$('::-p-aria([role="listbox"])')
-      listbox = listboxes[0]
-    }
-    if (!listbox) throw new Error('Cannot find listbox for combobox')
-
-    for (const opt of options) {
-      const optionEls = await listbox.$$('::-p-aria([role="option"])')
-      let optEl = null
-      for (const optionEl of optionEls) {
-        const text = await optionEl.evaluate(e => e.textContent.trim())
-        if (text === opt || text.includes(opt)) {
-          optEl = optionEl
-          break
-        }
-      }
-      if (!optEl) throw new Error(`Cannot find option "${opt}" in listbox`)
-      this.debugSection('SelectOption', `Clicking: "${opt}"`)
-      highlightActiveElement.call(this, optEl, context)
-      await optEl.click()
-    }
-    return this._waitForAction()
-  }
-
-  if (role === 'listbox') {
-    highlightActiveElement.call(this, el, context)
-    for (const opt of options) {
-      const optionEls = await el.$$('::-p-aria([role="option"])')
-      let optEl = null
-      for (const optionEl of optionEls) {
-        const text = await optionEl.evaluate(e => e.textContent.trim())
-        if (text === opt || text.includes(opt)) {
-          optEl = optionEl
-          break
-        }
-      }
-      if (!optEl) throw new Error(`Cannot find option "${opt}" in listbox`)
-      this.debugSection('SelectOption', `Clicking: "${opt}"`)
-      highlightActiveElement.call(this, optEl, context)
-      await optEl.click()
-    }
-    return this._waitForAction()
-  }
-
-  // Native <select> element
-  const tagName = await el.evaluate(e => e.tagName)
-  if (tagName !== 'SELECT') {
-    throw new Error('Element is not <select>')
-  }
-
-  highlightActiveElement.call(this, el, context)
-  for (const key in options) {
-    const opt = xpathLocator.literal(options[key])
-    let optEl = await findElements.call(this, el, { xpath: Locator.select.byVisibleText(opt) })
-    if (optEl.length) {
-      this._evaluateHandeInContext(e => (e.selected = true), optEl[0])
-      continue
-    }
-    optEl = await findElements.call(this, el, { xpath: Locator.select.byValue(opt) })
-    if (optEl.length) {
-      this._evaluateHandeInContext(e => (e.selected = true), optEl[0])
-    }
-  }
-  await this._evaluateHandeInContext(element => {
-    element.dispatchEvent(new Event('input', { bubbles: true }))
-    element.dispatchEvent(new Event('change', { bubbles: true }))
-  }, el)
-
-  return this._waitForAction()
-}
-
 async function proceedDragAndDrop(sourceLocator, destinationLocator) {
   const src = await this._locateElement(sourceLocator)
   if (!src) {

package/lib/helper/WebDriver.js

@@ -1302,29 +1302,33 @@ class WebDriver extends Helper {
    * {{> selectOption }}
    */
   async selectOption(select, option) {
-    const matchedLocator = new Locator(select)
+    const res = await findFields.call(this, select)
+    assertElementExists(res, select, 'Selectable field')
+    const elem = usingFirstElement(res)
+    highlightActiveElement.call(this, elem)
 
-    // 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, els[0], option)
+    if (!Array.isArray(option)) {
+      option = [option]
     }
 
-    // Fuzzy: try combobox
-    this.debugSection('SelectOption', `Fuzzy: "${matchedLocator.value}"`)
-    let els = await this._locateByRole({ role: 'combobox', text: matchedLocator.value })
-    if (els?.length) return proceedSelect.call(this, els[0], option)
+    // select options by visible text
+    let els = await forEachAsync(option, async opt => this.browser.findElementsFromElement(getElementId(elem), 'xpath', Locator.select.byVisibleText(xpathLocator.literal(opt))))
 
-    // Fuzzy: try listbox
-    els = await this._locateByRole({ role: 'listbox', text: matchedLocator.value })
-    if (els?.length) return proceedSelect.call(this, els[0], option)
+    const clickOptionFn = async el => {
+      if (el[0]) el = el[0]
+      const elementId = getElementId(el)
+      if (elementId) return this.browser.elementClick(elementId)
+    }
 
-    // Fuzzy: try native select
-    els = await findFields.call(this, select)
-    assertElementExists(els, select, 'Selectable element')
-    return proceedSelect.call(this, els[0], option)
+    if (Array.isArray(els) && els.length) {
+      return forEachAsync(els, clickOptionFn)
+    }
+    // select options by value
+    els = await forEachAsync(option, async opt => this.browser.findElementsFromElement(getElementId(elem), 'xpath', Locator.select.byValue(xpathLocator.literal(opt))))
+    if (els.length === 0) {
+      throw new ElementNotFound(select, `Option "${option}" in`, 'was not found neither by a visible text nor by a value')
+    }
+    return forEachAsync(els, clickOptionFn)
   }
 
   /**
@@ -1563,10 +1567,6 @@ class WebDriver extends Helper {
    * {{ react }}
    */
   async see(text, context = null) {
-    // If only one argument passed and it's an object without custom toString(), treat as locator
-    if (!context && text && typeof text === 'object' && !Array.isArray(text) && text.toString === Object.prototype.toString) {
-      return this.seeElement(text)
-    }
     return proceedSee.call(this, 'assert', text, context)
   }
 
@@ -2403,10 +2403,6 @@ class WebDriver extends Helper {
     })
   }
 
-  async _waitForAction() {
-    return this.wait(0.1)
-  }
-
   /**
    * {{> waitForEnabled }}
    */
@@ -3022,94 +3018,6 @@ async function findFields(locator) {
   return await this._locate(locator.value) // by css or xpath
 }
 
-async function proceedSelect(el, option) {
-  const elementId = getElementId(el)
-  const role = await this.browser.getElementAttribute(elementId, 'role')
-  const options = Array.isArray(option) ? option : [option]
-
-  if (role === 'combobox') {
-    this.debugSection('SelectOption', 'Expanding combobox')
-    highlightActiveElement.call(this, el)
-    const ariaOwns = await this.browser.getElementAttribute(elementId, 'aria-owns')
-    const ariaControls = await this.browser.getElementAttribute(elementId, 'aria-controls')
-    await this.browser.elementClick(elementId)
-    await this._waitForAction()
-
-    const listboxId = ariaOwns || ariaControls
-    let listboxEls = listboxId ? await this.browser.$$(`#${listboxId}`) : []
-    if (!listboxEls.length) {
-      listboxEls = await this.browser.findElementsFromElement(elementId, 'xpath', 'following-sibling::*[@role="listbox"]')
-    }
-    if (!listboxEls.length) {
-      listboxEls = await this.browser.findElementsFromElement(elementId, 'xpath', 'ancestor::*[@role="listbox"]')
-    }
-    if (!listboxEls.length) throw new Error('Cannot find listbox for combobox')
-    const listbox = listboxEls[0]
-    const listboxElId = getElementId(listbox)
-
-    for (const opt of options) {
-      const optionEls = await this.browser.findElementsFromElement(listboxElId, 'css selector', '[role="option"]')
-      let optEl = null
-      for (const optionEl of optionEls) {
-        const optElId = getElementId(optionEl)
-        const text = await this.browser.getElementText(optElId)
-        if (text === opt || (text && text.includes(opt))) {
-          optEl = optionEl
-          break
-        }
-      }
-      if (!optEl) throw new Error(`Cannot find option "${opt}" in listbox`)
-      this.debugSection('SelectOption', `Clicking: "${opt}"`)
-      highlightActiveElement.call(this, optEl)
-      await this.browser.elementClick(getElementId(optEl))
-    }
-    return this._waitForAction()
-  }
-
-  if (role === 'listbox') {
-    highlightActiveElement.call(this, el)
-    for (const opt of options) {
-      const optionEls = await this.browser.findElementsFromElement(elementId, 'css selector', '[role="option"]')
-      let optEl = null
-      for (const optionEl of optionEls) {
-        const optElId = getElementId(optionEl)
-        const text = await this.browser.getElementText(optElId)
-        if (text === opt || (text && text.includes(opt))) {
-          optEl = optionEl
-          break
-        }
-      }
-      if (!optEl) throw new Error(`Cannot find option "${opt}" in listbox`)
-      this.debugSection('SelectOption', `Clicking: "${opt}"`)
-      highlightActiveElement.call(this, optEl)
-      await this.browser.elementClick(getElementId(optEl))
-    }
-    return this._waitForAction()
-  }
-
-  // Native <select> element
-  highlightActiveElement.call(this, el)
-
-  // select options by visible text
-  let els = await forEachAsync(options, async opt => this.browser.findElementsFromElement(elementId, 'xpath', Locator.select.byVisibleText(xpathLocator.literal(opt))))
-
-  const clickOptionFn = async optEl => {
-    if (optEl[0]) optEl = optEl[0]
-    const optElId = getElementId(optEl)
-    if (optElId) return this.browser.elementClick(optElId)
-  }
-
-  if (Array.isArray(els) && els.length) {
-    return forEachAsync(els, clickOptionFn)
-  }
-  // select options by value
-  els = await forEachAsync(options, async opt => this.browser.findElementsFromElement(elementId, 'xpath', Locator.select.byValue(xpathLocator.literal(opt))))
-  if (els.length === 0) {
-    throw new ElementNotFound(el, `Option "${options}" in`, 'was not found neither by a visible text nor by a value')
-  }
-  return forEachAsync(els, clickOptionFn)
-}
-
 async function proceedSeeField(assertType, field, value) {
   const res = await findFields.call(this, field)
   assertElementExists(res, field, 'Field')

package/lib/helper/extras/PlaywrightLocator.js

@@ -11,20 +11,22 @@ function buildLocatorString(locator) {
 }
 
 async function findElements(matcher, locator) {
-  const matchedLocator = Locator.from(locator, 'css')
+  const matchedLocator = new Locator(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 = Locator.from(locator, 'css')
+  const matchedLocator = new Locator(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()
@@ -44,30 +46,49 @@ async function getVisibleElements(elements) {
 }
 
 async function findReact(matcher, locator) {
-  const props = locator.locator?.props
-  let locatorString = `_react=${locator.value}`
+  const details = locator.locator ?? { react: locator.value }
+  let locatorString = `_react=${details.react}`
 
-  if (props) {
-    locatorString += propBuilder(props)
+  if (details.props) {
+    locatorString += propBuilder(details.props)
   }
 
   return matcher.locator(locatorString).all()
 }
 
 async function findVue(matcher, locator) {
-  const props = locator.locator?.props
-  let locatorString = `_vue=${locator.value}`
+  const details = locator.locator ?? { vue: locator.value }
+  let locatorString = `_vue=${details.vue}`
 
-  if (props) {
-    locatorString += propBuilder(props)
+  if (details.props) {
+    locatorString += propBuilder(details.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 roleOptions = locator.getRoleOptions()
-  const roleLocator = matcher.getByRole(roleOptions.role, roleOptions.options)
+  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)
   return first ? roleLocator.first() : roleLocator.all()
 }
 
@@ -86,4 +107,4 @@ function propBuilder(props) {
   return _props
 }
 
-export { buildLocatorString, findElements, findElement, getVisibleElements, findReact, findVue, findByRole }
+export { buildLocatorString, findElements, findElement, getVisibleElements, findReact, findVue, findByPlaywrightLocator, findByRole }

package/lib/helper/extras/PlaywrightReactVueLocator.js

@@ -0,0 +1,52 @@
+async function findReact(matcher, locator) {
+  // Handle both Locator objects and raw locator objects
+  const reactLocator = locator.locator || locator
+  let _locator = `_react=${reactLocator.react}`;
+  let props = '';
+
+  if (reactLocator.props) {
+    props += propBuilder(reactLocator.props);
+    _locator += props;
+  }
+  return matcher.locator(_locator).all();
+}
+
+async function findVue(matcher, locator) {
+  // Handle both Locator objects and raw locator objects
+  const vueLocator = locator.locator || locator
+  let _locator = `_vue=${vueLocator.vue}`;
+  let props = '';
+
+  if (vueLocator.props) {
+    props += propBuilder(vueLocator.props);
+    _locator += props;
+  }
+  return matcher.locator(_locator).all();
+}
+
+async function findByPlaywrightLocator(matcher, locator) {
+  // Handle both Locator objects and raw locator objects
+  const pwLocator = locator.locator || locator
+  if (pwLocator && pwLocator.toString && pwLocator.toString().includes(process.env.testIdAttribute)) {
+    return matcher.getByTestId(pwLocator.pw.value.split('=')[1]);
+  }
+  const pwValue = typeof pwLocator.pw === 'string' ? pwLocator.pw : pwLocator.pw
+  return matcher.locator(pwValue).all();
+}
+
+function propBuilder(props) {
+  let _props = '';
+
+  for (const [key, value] of Object.entries(props)) {
+    if (typeof value === 'object') {
+      for (const [k, v] of Object.entries(value)) {
+        _props += `[${key}.${k} = "${v}"]`;
+      }
+    } else {
+      _props += `[${key} = "${value}"]`;
+    }
+  }
+  return _props;
+}
+
+export { findReact, findVue, findByPlaywrightLocator };