Make custom$ return Element object when an element is not found

[nextlevelbeard]

Proposed changes

Make custom$ return Element object when an element is not found

Prevents uncatchable errors such as

Error: Your locator strategy script must return an element
    at Browser.custom$ (file:///Users/user/repos/repo/node_modules/webdriverio/build/commands/browser/custom$.js:44:11)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Browser.wrapCommandFn (file:///Users/user/repos/repo/node_modules/@wdio/utils/build/shim.js:81:29)
    at async Element.wrapCommandFn (file:///Users/user/repos/repo/node_modules/@wdio/utils/build/shim.js:81:29)
    at async Element.wrapCommandFn (file:///Users/user/repos/repo/node_modules/@wdio/utils/build/shim.js:81:29)
    at async Element.elementErrorHandlerCallbackFn (file:///Users/user/repos/repo/node_modules/webdriverio/build/middlewares.js:18:32)
    at async Element.wrapCommandFn (file:///Users/user/repos/repo/node_modules/@wdio/utils/build/shim.js:81:29)
    at async Element.wrapCommandFn (file:///Users/user/repos/repo/node_modules/@wdio/utils/build/shim.js:81:29)
    at async Scenario.<anonymous> (file:///Users/user/repos/repo/e2e/steps/dashboard.steps.ts:63:5)

This change triggers proper error handling:

Error: waitUntil condition failed with the following reason: Can't call <command> on element with selector "[example="foo"]" because element wasn't found

Types of changes

• Bugfix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update

Checklist

• I have read the CONTRIBUTING doc
• I have added tests that prove my fix is effective or that my feature works
• [] I have added necessary documentation (if appropriate)
• I have added proper type definitions for new commands (if appropriate)

Further comments

Reviewers: @webdriverio/project-committers

[christian-bromann]

@nextlevelbeard thanks for the contribution.

Can you share a code snippet where this behavior can be reproduced?

[christian-bromann]

ping @nextlevelbeard , any comment?

[nextlevelbeard]

Can you share a code snippet where this behavior can be reproduced?

Sorry for the delay, example reproduction:

browser.addLocatorStrategy('myCustomStrategy', (selector, root) => {
    const scope = root ? root : document
    return scope.querySelectorAll(selector)
})

// Try to find an element and have it not exist in the DOM
// This throws error and crashes test: Your locator strategy script must return an element
// Should be handled gracefully by WDIO
const elem = await browser.custom$('myCustomStrategy', '.thisClassDoesNotExist')

[christian-bromann]

LGTM 👍

I will add tests and fix the lint bug after merging.

[christian-bromann]

In case you are interested: 67d5df9