[🐛 Bug]: Make elements from custom selector strategies more compliant to normal querying

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

WebdriverIO Version

latest

Node.js Version

latest

Mode

WDIO Testrunner

Which capabilities are you using?

n/a

What happened?

Given the following custom selector strategy:

/**
 * custom selector fetch cards by containing text
 */
await browser.addLocatorStrategy('cardsWithValue', (selector, root) => {
  const rootNode = root || document.body
  return [...rootNode.querySelectorAll('div')].filter(
    (div) => div.children.length === 0 && div.innerText && div.innerText.includes(selector || ''))
})

If I want to assert its length, e.g.:

expect(browser.custom$$('cardsWithValue', 'o')).toHaveChildren(2)

It fails due to:

Expect custom$$(`cardsWithValue, <props>`) to have children

Expected: 2
Received: 0

I see in the logs that there is another element query going on which might cause this:

[WDIO] 2023-03-15T23:09:48.138Z - id: 36 - COMMAND: executeScript(return ((selector, root) => {
  const rootNode = root || document.body;
  return [...rootNode.querySelectorAll("div")].filter(
    (div) => div.children.length === 0 && div.innerText && div.innerText.includes(selector || "")
  );
}).apply(null, arguments), o)
driver.js?import:124 [WDIO] 2023-03-15T23:09:48.144Z - id: 36 - RESULT: [{"element-6066-11e4-a52e-4f735466cecf":"ef5ac24e-6e79-4e91-805b-d0d4a528cbb6"},{"element-6066-11e4-a52e-4f735466cecf":"cc5900da-23ed-46a9-bc69-1fa2089709b7"}]
driver.js?import:124 [WDIO] 2023-03-15T23:09:48.145Z - id: 37 - COMMAND: findElementsFromElement(ef5ac24e-6e79-4e91-805b-d0d4a528cbb6, xpath, ./*)
driver.js?import:124 [WDIO] 2023-03-15T23:09:48.153Z - id: 37 - RESULT: []

What is your expected behavior?

It should pass.

How to reproduce the bug.

n/a

Relevant log output

n/a

Code of Conduct

• I agree to follow this project's Code of Conduct

Is there an existing issue for this?

• I have searched the existing issues