better combobox/lisbox support for selectOption

Author: DavertMik

CLAUDE.md

@@ -1,43 +1,31 @@
-# CodeceptJS ESM Migration Plan
+# CodeceptJS
 
-This project is migrating from 3.x to ESM replacing all require() calls with imports.
+CodeceptJS is a full-featured End-to-End testing framework for web and native apps. It is built on top of WebDriverIO, Appium, and Puppeteer, and provides a simple and intuitive API for writing tests.
 
-## Compare with Reference
+## Rules
 
-Each time unsure what to do refer to the same file implementation in **3.x branch**
-3.x branch contains stable version of all core classes that work
+## Testing with Shell Command
 
-## Running Tests
-
-Focus on acceptance tests:
-
-For instance this helps to understand if final migration is ok:
+To quickly test CodeceptJS features without writing full test files, use the shell command with a script file:
 
+1. Create a temporary script file (e.g., `/tmp/test-script.js`):
+```javascript
+I.amOnPage('https://example.com')
+I.click('Login')
+I.fillField('Email', 'test@example.com')
 ```
-DEBUG="codeceptjs:*" ./bin/codecept.js run --config test/acceptance/codecept.Playwright.js --verbose
-
-DEBUG="codeceptjs:*" ./bin/codecept.js run --config test/acceptance/codecept.Playwright.js --debug --grep within
-```
-
-Do not say: it works befire running specific acceptance test.
-Tests may stuck so always run them with timeout call:
 
+2. Run it via shell command:
+```bash
+./bin/codecept.js shell --file /tmp/test-script.js -c examples
 ```
-timeout=30000 ./bin/codecept.js run --config test/acceptance/codecept.Playwright.js --verbose
-```
-
-Web Server for this tests are running on port 8000 and it works but responds 500 for HEAD requests.
-
-## Princinples
-
-All unit tests for Playwright/Puppeteer/WebdriverIO are passing. But acceptance tests are failing due to promises composition. Complexity of promises composition comes from promise chaining and async/await syntax. And `session` mechanism from `promise.js` which allows spawning different promises chains and sync them up in the end.
-
-The full test suite extensively uses plugins so refer to plugins and corresponding helpers as well
 
-We are building test framework. So even passing ests are not indicator of successful usage. Side effects like: timeouts, bad output, errors, memory leaks, etc are affecting performance.
-For instance, if a tests stuck and won't finish this is very bad.
+3. Check the output for errors or success messages.
 
-## Coding Style
+Notes:
+- Scripts use the global `I` object directly (no imports needed)
+- Commands don't need `await` - they queue automatically via the recorder
+- Use the `examples/` config which has Playwright helper configured
+- The shell initializes the browser and executes commands in sequence
 
-- Never add comments unless explicitly required.
-- DO not mention plugins or helpers inside core classes
+## Helpers

bin/codecept.js

@@ -91,7 +91,8 @@ program
   .option(commandFlags.profile.flag, commandFlags.profile.description)
   .option(commandFlags.ai.flag, commandFlags.ai.description)
   .option(commandFlags.config.flag, commandFlags.config.description)
-  .action(commandHandler('../lib/command/interactive.js'))
+  .option('--file [path]', 'JavaScript file to execute in shell context')
+  .action(commandHandler('../lib/command/shell.js'))
 
 program.command('list [path]').alias('l').description('List all actions for I.').action(commandHandler('../lib/command/list.js'))
 

examples/codecept.config.js

@@ -7,14 +7,14 @@ export const config = {
       url: 'http://github.com',
       browser: 'chromium',
       // restart: 'context',
-      // show: false,
+      show: false,
       // timeout: 5000,
       windowSize: '1600x1200',
       // video: true,
       chromium: {
         // browserWSEndpoint: 'ws://127.0.0.1:45635/09b7aa1ac28c317e5abee7cb6d35d519',
       },
-      show: !process.env.HEADLESS,
+      // show: !process.env.HEADLESS,
     },
     REST: {},
     User: {

lib/command/interactive.js lib/command/shell.jslib/command/interactive.js renamed to lib/command/shell.js

@@ -5,9 +5,17 @@ import Container from '../container.js'
 import event from '../event.js'
 import pause from '../pause.js'
 import output from '../output.js'
+import { fileURLToPath } from 'url'
+import { createRequire } from 'module'
+import path from 'path'
+
+const require = createRequire(import.meta.url)
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
 const webHelpers = Container.STANDARD_ACTING_HELPERS
 
-export default async function (path, options) {
+export default async function (shellPath, options) {
   // Backward compatibility for --profile
   process.profile = options.profile
   process.env.profile = options.profile
@@ -17,7 +25,7 @@ export default async function (path, options) {
   const testsPath = getTestRoot(configFile)
 
   const codecept = new Codecept(config, options)
-  codecept.init(testsPath)
+  await codecept.init(testsPath)
 
   try {
     await codecept.bootstrap()
@@ -53,7 +61,27 @@ export default async function (path, options) {
         break
       }
     }
-    pause()
+
+    if (options.file) {
+      const scriptPath = path.resolve(options.file)
+      output.print(`Executing script: ${scriptPath}`)
+
+      // Use the same I actor that pause() uses
+      const I = Container.support('I')
+      global.I = I
+      globalThis.I = I
+
+      recorder.add('execute script', async () => {
+        try {
+          await import(scriptPath)
+          output.print('Script executed successfully')
+        } catch (err) {
+          output.error(`Error executing script: ${err.message}`)
+        }
+      })
+    } else {
+      pause()
+    }
     recorder.add(() => event.emit(event.test.after, {}))
     recorder.add(() => event.emit(event.suite.after, {}))
     recorder.add(() => event.emit(event.all.result, {}))

lib/helper/Playwright.js

@@ -2489,35 +2489,30 @@ class Playwright extends Helper {
    * {{> selectOption }}
    */
   async selectOption(select, option) {
-    const selectLocator = Locator.from(select, 'css')
-    let els = null
+    const context = await this.context
+    const matchedLocator = new Locator(select)
 
-    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)
+    // 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)
     }
-    assertElementExists(els, select, 'Selectable field')
-    const el = els[0]
-
-    await highlightActiveElement.call(this, el)
-    let optionToSelect = ''
 
-    try {
-      optionToSelect = (await el.locator('option', { hasText: option }).textContent()).trim()
-    } catch (e) {
-      optionToSelect = option
-    }
+    // 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)
 
-    if (!Array.isArray(option)) option = [optionToSelect]
+    // Fuzzy: try listbox
+    els = await findByRole(context, { role: 'listbox', name: matchedLocator.value })
+    if (els?.length) return proceedSelect.call(this, context, els[0], option)
 
-    await el.selectOption(option)
-    return this._waitForAction()
+    // Fuzzy: try native select
+    els = await findFields.call(this, select)
+    assertElementExists(els, select, 'Selectable element')
+    return proceedSelect.call(this, context, els[0], option)
   }
 
   /**
@@ -4649,6 +4644,45 @@ 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')

lib/helper/Puppeteer.js

@@ -1617,33 +1617,30 @@ class Puppeteer extends Helper {
    * {{> selectOption }}
    */
   async selectOption(select, 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])
-      }
+    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)
     }
-    await this._evaluateHandeInContext(element => {
-      element.dispatchEvent(new Event('input', { bubbles: true }))
-      element.dispatchEvent(new Event('change', { bubbles: true }))
-    }, el)
 
-    return this._waitForAction()
+    // 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)
   }
 
   /**
@@ -3160,6 +3157,90 @@ 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) {