improved locators for selectOption

Author: DavertMik

lib/helper/Playwright.js

@@ -2492,24 +2492,22 @@ class Playwright extends Helper {
     const context = await this.context
     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)
     }
 
-    // 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)
+    const literal = xpathLocator.literal(matchedLocator.value)
 
-    // Fuzzy: try listbox
-    els = await findByRole(context, { role: 'listbox', name: matchedLocator.value })
-    if (els?.length) return proceedSelect.call(this, context, els[0], option)
+    let els = await this._locate({ xpath: Locator.select.narrow(literal) })
+    if (els.length) return proceedSelect.call(this, context, els[0], option)
+
+    els = await this._locate({ xpath: Locator.select.wide(literal) })
+    if (els.length) return proceedSelect.call(this, context, els[0], option)
 
-    // Fuzzy: try native select
     els = await findFields.call(this, select)
     assertElementExists(els, select, 'Selectable element')
     return proceedSelect.call(this, context, els[0], option)
@@ -2559,6 +2557,10 @@ class Playwright extends Helper {
    *
    */
   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)
   }
 
@@ -4630,7 +4632,7 @@ async function proceedSelect(context, el, option) {
   const role = await el.getAttribute('role')
   const options = Array.isArray(option) ? option : [option]
 
-  if (role === 'combobox') {
+  if (role === 'combobox' || role === 'button') {
     this.debugSection('SelectOption', 'Expanding combobox')
     await highlightActiveElement.call(this, el)
     const [ariaOwns, ariaControls] = await Promise.all([el.getAttribute('aria-owns'), el.getAttribute('aria-controls')])

lib/helper/Puppeteer.js

@@ -1690,6 +1690,10 @@ 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)
   }
 

lib/helper/WebDriver.js

@@ -1563,6 +1563,10 @@ 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)
   }
 
@@ -2399,6 +2403,10 @@ class WebDriver extends Helper {
     })
   }
 
+  async _waitForAction() {
+    return this.wait(0.1)
+  }
+
   /**
    * {{> waitForEnabled }}
    */
@@ -3030,7 +3038,10 @@ async function proceedSelect(el, option) {
     const listboxId = ariaOwns || ariaControls
     let listboxEls = listboxId ? await this.browser.$$(`#${listboxId}`) : []
     if (!listboxEls.length) {
-      listboxEls = await this.browser.$$('[role="listbox"]')
+      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]

lib/locator.js

@@ -583,6 +583,35 @@ Locator.checkable = {
 }
 
 Locator.select = {
+  /**
+   * Narrow strategy for finding select elements.
+   * Tries exact role match first (combobox/listbox by name), then select by name.
+   * @param {string} literal
+   * @returns {string}
+   */
+  narrow: literal =>
+    xpathLocator.combine([
+      `.//*[@role = 'combobox'][normalize-space(@name) = ${literal}]`,
+      `.//*[@role = 'listbox'][normalize-space(@name) = ${literal}]`,
+      `.//select[@name = ${literal}]`,
+    ]),
+
+  /**
+   * Wide strategy for finding select elements.
+   * Includes select, button, combobox, listbox with various accessibility attributes.
+   * @param {string} literal
+   * @returns {string}
+   */
+  wide: literal =>
+    xpathLocator.combine([
+      `.//select[((./@name = ${literal}) or ./@id = //label[@for][normalize-space(string(.)) = ${literal}]/@for or ./@placeholder = ${literal})]`,
+      `.//*[@role='button' or @role='combobox' or @role='listbox'][normalize-space(string(.)) = ${literal}]`,
+      `.//*[@role='button' or @role='combobox' or @role='listbox'][@aria-label = ${literal}]`,
+      `.//*[@role='button' or @role='combobox' or @role='listbox'][@title = ${literal}]`,
+      `.//*[@role='button' or @role='combobox' or @role='listbox'][@aria-labelledby = //*[@id][normalize-space(string(.)) = ${literal}]/@id ]`,
+      `.//label[normalize-space(string(.)) = ${literal}]//*[self::button or @role='button' or @role='combobox' or @role='listbox']`,
+    ]),
+
   /**
    * @param {string} opt
    * @returns {string}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codeceptjs",
-  "version": "4.0.1-beta.23",
+  "version": "4.0.1-beta.24",
   "type": "module",
   "description": "Supercharged End 2 End Testing Framework for NodeJS",
   "keywords": [

test/helper/Playwright_test.js

@@ -495,9 +495,9 @@ describe('Playwright', function () {
   })
 
   describe('#selectOption', () => {
-    it('should select option by label and partial option text', async () => {
+    it('should select option by label and option text', async () => {
       await I.amOnPage('/form/select')
-      await I.selectOption('Select your age', '21-')
+      await I.selectOption('Select your age', '21-60')
       await I.click('Submit')
       assert.equal(formContents('age'), 'adult')
     })
@@ -511,7 +511,7 @@ describe('Playwright', function () {
 
     it('should select option using JSON string css locator', async () => {
       await I.amOnPage('/form/select')
-      await I.selectOption('{"css": "#age"}', '21-')
+      await I.selectOption('{"css": "#age"}', '21-60')
       await I.click('Submit')
       assert.equal(formContents('age'), 'adult')
     })

test/helper/webapi.js

@@ -139,6 +139,14 @@ export function tests() {
       await I.amOnPage('/')
       await I.see('With special space chars')
     })
+
+    it('should treat locator object without custom toString as seeElement', async () => {
+      await I.amOnPage('/form/field')
+      // Passing a locator object without custom toString should call seeElement
+      await I.see({ css: 'input[name=name]' })
+      await I.see({ xpath: '//input[@id="name"]' })
+      await I.see({ name: 'name' })
+    })
   })
 
   describe('see element : #seeElement, #seeElementInDOM, #dontSeeElement', () => {