How to extend Element class method in TypeScript using webdriverio?

[christian-bromann]

From @draganrakas on March 12, 2019 15:45

Stack: TypeScript, WDIO, Cucumber

We are having an issue with the click() functionality not working on buttons in SauceLabs only, and on FireFox only. We tested other combinations (local, CI, Docker, etc.) and our tests work on both FireFox and Chrome for all of those combinations. However, on SauceLabs, clicking a button in FireFox is very flaky.

We have tested a JavaScript workaround that works, on SauceLabs on FireFox, and as a result, we would like the element click() method to behave differently depending if the browser capability is either chrome or firefox.

To do this, we would like to extend the WebDriver Element, and override the click method with our own. Basically, use super.click() for chrome, and our own click for firefox.

Currently, our BasePage exports this, which is just a typedef that the page objects use:
export type WDIOElement = WebdriverIO.Client<WebdriverIO.RawResult<WebdriverIO.Element>>

Instead of this, we would like to create a WDIOElement definition that implements the WebdriverIO.Client<WebdriverIO.RawResult<WebdriverIO.Element>> interface, re-implements click() and export that instead.

Is this even possible? What would be the recommended way to do this?
If this is pretty bad practice, is there something better we could do?

Thanks!

Copied from original issue: webdriverio/webdriverio#3719

[christian-bromann]

From @mgrybyk on March 12, 2019 16:39

If you talking about webdriverio 5 (5.7.2), then

1. add commands

browser.addCommand("browserLevel", function () { ... })
browser.addCommand("elementLevel", function () { ... }, true)

2. add typings for new commands

declare namespace WebdriverIO {
    interface Browser {
        browserLevel (): void
    }

    interface Element {
        elementLevel (): void
    }
}

NOTE
At this moment there is no way to override commands, there is planned work to do it #3604

[christian-bromann]

From @draganrakas on March 12, 2019 17:1

@mgrybyk We're currently using Webdriver 4.x due to compatibility issues with TypeScript & Cucumber. Is there an equivalent for 4.x?

Edit: just checked the codebase, looks like addCommand exists in 4.x as well.

[christian-bromann]

From @mgrybyk on March 12, 2019 18:51

At this point I can't help you, I was using v4 with js.

[christian-bromann]

@mgrybyk if people use addCommand can they somehow extend the existing typescript definition with their command?

[christian-bromann]

From @mgrybyk on March 13, 2019 15:18

Yes, in v5, as it mentioned here webdriverio/webdriverio#3719 (comment)

[christian-bromann]

Ah ok, now I see that @draganrakas is using v4. Moving the issue there then.