having ts error when adding custom commands with addCommand (webdriverio)

Question

I'm adding function with addCommand, and get the following error when i use it:

[ts] Property 'WaitForElementsAmount' does not exist on type 'Client<void>'.

for example:

browser.addCommand("test" , () => {console.log("test"); })
browser.test();

the last line will have the error.

It actually works (the js code is correct), and test runs well. My question is how can i solve this issue?

score 7 · Answer 1 · answered Nov 30 '17 at 17:19

I struggled with this same problem for quite a while today, but I got it.

Assuming that you're using @types/webdriverio, you need to extend the WebdriverIO.Client interface with the declaration of your custom commands. If you can, make sure your custom command is defined in a .ts file. Then you can do something like this:

declare global {
    namespace WebdriverIO {
        interface Client<T> {
            doCustomThing: typeof doCustomThing;
        }
    }
}

function doCustomThing() {
    console.log("test");
}

//both of these should now work
browser.addCommand('doCustomThing' , doCustomThing)
browser.doCustomThing();

If you can't get your custom commands implemented in typescript, you can still declare them separately in a .d.ts file that looks like this:

declare namespace WebdriverIO {
    interface Client<T> {
        doCustomThing(): void;
    }
}

But then you have to maintain a separate declaration and implementation in separate files, and make sure they stay in sync. I would not go that route unless you have no choice but to keep the implementation in plain JS.

This was tested successfully using Typescript 2.6.1, webdriverio 4.9.10, and @types/webdriverio 4.8.6.

Note: In the first example, you must specify that you are changing the definition of the WebdriverIO namespace in the global scope, but in the second, you are working in the global scope implicitly. That's because the first is within a module, while the second is not a module since it doesn't import or export anything. For more info, see https://www.typescriptlang.org/docs/handbook/modules.html.

Hi mate, I have same situation. I have added a custom command just like above global,namespace etc. And also written a function, and added the function to the browser object. But when I am trying to access the added function in the spec file. It gives me error saying -- browser. is not a function. Do we need to add anything in "before" hook in wdio.conf.js. Can you suggest please. TIA — Arvindlal Jaiswal, Jun 05 '20 at 14:52

score 0 · Answer 2 · answered Oct 16 '17 at 08:50

First: There is some typo error in your code, you are missing to close the browser.addCommand(). Should be something like this :

browser.addCommand("test" , () => {console.log("test"); });
browser.test();

Second: I think that was only a typo error while you typed in here, so the actual answer would be to follow this link to know more about declaring the custom commands and implementing them : Where do I add custom commands in WebdriverIO with wdio testrunner?

having ts error when adding custom commands with addCommand (webdriverio)

2 Answers2