[🐛 Bug]: custom element commands doesn't work with browser runner

[DudaGod]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

WebdriverIO Version

latest

Node.js Version

18.12.1

Mode

Standalone Mode

Which capabilities are you using?

{
  browserName: 'chrome'
}

### What happened?

Custom commands added to the element don't work with the `browser` runner, but correctly works with `local` runner.

### What is your expected behavior?

I expect that my element custom command should works correctly in `browser` runner.

### How to reproduce the bug.

```js
// wdio.conf.js
export const config = {
    runner: "browser",
    specs: [
        './src/**/*.test.js'
    ],
    capabilities: [{
        browserName: 'chrome',
    }],
    mochaOpts: {
        ui: 'bdd',
    },
    before: function (capabilities, specs, browser) {
        browser.addCommand("elemCmd", () => {
            console.log('inside my element command');
        }, true);
    },
}

// src/bro.test.js
it('test', async () => {
    await $("body").elemCmd();
})

./node_modules/.bin/wdio run ./wdio.conf.js

Relevant log output

[0-0] Error in "test"
Error: Can't call "elemCmd" on element with selector "body", it is not a function

### Code of Conduct

- [X] I agree to follow this project's Code of Conduct

### Is there an existing issue for this?

- [X] I have searched the existing issues

[christian-bromann]

Can you provide a minimal reproducible example?

[wdio-bot]

Thanks for raising this issue 🙏

Unfortunately we can't help you without a reproducible example in this matter. Please read our contributing guidelines on how to create a reproducible example. If you can't provide a reproducible example we will close this issue in 7 days.

If you have any questions please reach out to us on our Discord channel. We are happy to help you out there.

[DudaGod]

Can you provide a minimal reproducible example?

Yes, of course - https://github.com/DudaGod/wdio-issue-12717

[christian-bromann]

Thanks for providing the reproduction case, this is indeed a bug. Custom commands on the browser instance are supported but miss the part that allow to register it on WebdriverIO.Element objects. Here are the connected code places that should be revisit:

• we need to enhance the MESSAGE_TYPES.customCommand type to pass along the flag to attach a command to an element, e.g.:

diff --git a/packages/wdio-utils/src/monad.ts b/packages/wdio-utils/src/monad.ts
index 8262c7a43..949ca0bc9 100644
--- a/packages/wdio-utils/src/monad.ts
+++ b/packages/wdio-utils/src/monad.ts
@@ -125,6 +125,7 @@ export default function WebDriver (options: Record<string, any>, modifier?: Func
                         type: MESSAGE_TYPES.customCommand,
                         value: {
                             commandName: name,
+                            attachToElement,
                             cid: process.env.WDIO_WORKER_ID,
                         }
                     }

• this needs to then be passed along in the communicator which is responsible to connect the browser world with the Node.js world

diff --git a/packages/wdio-browser-runner/src/communicator.ts b/packages/wdio-browser-runner/src/communicator.ts
index 850e6b449..c74241999 100644
--- a/packages/wdio-browser-runner/src/communicator.ts
+++ b/packages/wdio-browser-runner/src/communicator.ts
@@ -74,7 +74,7 @@ export class ServerWorkerCommunicator {
                 this.#customCommands.set(cid, new Set())
             }
             const customCommands = this.#customCommands.get(cid) || new Set()
-            customCommands.add(commandName)
+            customCommands.add({ commandName, attachToElement })
             return
         }

• in the browser driver we need to register the flag and attach it accordingly

diff --git a/packages/wdio-browser-runner/src/browser/driver.ts b/packages/wdio-browser-runner/src/browser/driver.ts
index 2fba887a3..770a8c7e6 100644
--- a/packages/wdio-browser-runner/src/browser/driver.ts
+++ b/packages/wdio-browser-runner/src/browser/driver.ts
@@ -251,8 +251,8 @@ export default class ProxyDriver {
         if (!cid) {
             return
         }
-        for (const commandName of value.customCommands) {
-            browser.addCommand(commandName, this.#getMockedCommand(commandName))
+        for (const {commandName, attachToElement} of value.customCommands) {
+            browser.addCommand(commandName, this.#getMockedCommand(commandName), attachToElement)
         }
     }

• then the getMockedCommand needs to be enhanced to pass in the element context so that on the Node.js side we can intiate the WebdriverIO.Element again and run the command on there.

Contributions for this would be much appreciated, I am happy to help.

[wdio-bot]

Thanks for reporting!

We greatly appreciate any contributions that help resolve the bug. While we understand that active contributors have their own priorities, we kindly request your assistance if you rely on this bug being fixed. We encourage you to take a look at our contribution guidelines or join our friendly Discord development server, where you can ask any questions you may have. Thank you for your support, and cheers!

[DudaGod]

then the getMockedCommand needs to be enhanced to pass in the element context so that on the Node.js side we can intiate the WebdriverIO.Element again and run the command on there.

Can we send here only elementId (or array of elementIds in case when using $$)? Or we need something else from element context?

[christian-bromann]

Can we send here only elementId (or array of elementIds in case when using $$)?

Commands can only get executed on a single element, therefore a single element reference should suffice.