Not able to add a custom command - webdriver-io

Question

I want to create a custom command in a typescript webdriverIO project. But no matter what I do, the command always ends up with the error :
TypeError: browser.waitAndClick is not a function.
Basically I wanted to add the same function they mentioned in webdriverIO doc. I am adding it from beforeAll() in my specs.
import { DEFAULT_TIMEOUT } from "../constants";
class CustomCommand {
private static alreadyAdded = false;
static addCommands(){
if(!this.alreadyAdded) {
browser.addCommand('waitAndClick', (el: WebdriverIO.Element) => {
el.waitForDisplayed({timeout: DEFAULT_TIMEOUT});
el.click();
}, true);
browser.addCommand('waitAndSetValue', (el: WebdriverIO.Element, text: string) => {
el.waitForDisplayed({timeout: DEFAULT_TIMEOUT});
el.setValue(text);
}, true);
this.alreadyAdded = true;
}
}
}
export default CustomCommand;
And I am calling this addCommands() function from beforeAll() of a spec. But no luck!

Answer 1

One nice person from slack channel helped me to find out the exact reason. Actually I overlooked something in doc : If you register a custom command to the browser scope, the command won’t be accessible for elements. Likewise, if you register a command to the element scope, it won’t be accessible in the browser scope. Turned out this is the reason. It is resolved now.
Passing false as third parameter in addCommand() fixed it.

Answer 2

Welcome to stack-overflow!
Please note that there is no 'beforeAll' hook in webdriverio as per the docs here.
It should work if you call this in before hook.

Answer 3

based on the webdriverio docs: https://webdriver.io/docs/api/browser/addCommand/
Note: don't forget to wrap inside before hook as ex bellow:
before: async function (capabilities, specs) {
browser.addCommand('waitAndClick', async function (selector) {
try {
await $(selector).waitForExist();
await $(selector).click();
} catch (error) {
throw new Error(`Could not click on selector: ${selector}`);
}
});
},