Type mismatch on setupBrowser argument

[hugueschabot]

If I create a new wdio (currently version 8.27) project with TypeScript and Testing Library, when I used setupBrowser I get a compilation error. However, the test can be executed normally so this is not a valid type error.

Example

import { expect, browser, $ } from "@wdio/globals";
import { setupBrowser } from "@testing-library/webdriverio";

describe("My Login application", () => {
  it("should login with valid credentials", async () => {
    const { getByRole } = setupBrowser(browser);
    // ...
  });
});

Compilation error:

Argument of type 'Browser' is not assignable to parameter of type 'BrowserBase'.
  Type 'Browser' is not assignable to type 'SelectorsBase'.
    The types returned by '$$(...)' are incompatible between these types.
      Type 'ChainablePromiseArray<ElementArray>' is not assignable to type 'Element[] | ChainablePromiseArrayBase<Promise<Element>> | Promise<Element[]>'.
        Type 'ChainablePromiseArray<ElementArray>' is missing the following properties from type 'Element[]': pop, push, concat, join, and 20 more.ts(2345)

Workaround

The workaround I found is to convince TypeScript that everything is okay by forcing a type cast: setupBrowser(browser as unknown as BrowserBase)

[jerrywithaz]

Any update on this? The latest webdriverio released breaking changes

[olivierwilkinson]

Heya,

Sorry for the slow response, I'm planning on looking into this soon!

Hopefully I'll have a solution this week, but it may take longer as supporting multiple versions of WebdriverIO can take some finessing with regards to the types.

[anuraghazra]

This is happening since wdio-testing-lib defines it's own wdio-types which seem to be outdated with v8 i think.

I did this workaround

// global.d.ts
import type { WebdriverIOQueries } from '@testing-library/webdriverio';
import type { BrowserBase } from 'webdriverio';

declare module '@testing-library/webdriverio' {
  function setupBrowser<Browser extends BrowserBase>(browser: Browser): WebdriverIOQueries;
}