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?

Answer 1

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.