Configuring WebdriverIO

Playwright vs WebdriverIO

If you do not already use WebdriverIO in your project, we recommend starting with Playwright as it is easier to configure and has more flexible API.

By default, TypeScript doesn't recognize providers options and extra expect properties. Make sure to reference @vitest/browser/providers/webdriverio so TypeScript can pick up definitions for custom options:

/// <reference types="@vitest/browser/providers/webdriverio" />

Alternatively, you can also add it to compilerOptions.types field in your tsconfig.json file. Note that specifying anything in this field will disable auto loading of @types/* packages.

{
  "compilerOptions": {
    "types": ["@vitest/browser/providers/webdriverio"]
  }
}

Vitest opens a single page to run all tests in the same file. You can configure any property specified in RemoteOptions in instances:

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    browser: {
      instances: [
        {
          browser: 'chrome',
          capabilities: {
            browserVersion: 86,
            platformName: 'Windows 10',
          },
        },
      ],
    },
  },
})

WARNING

Before Vitest 3, these options were located on test.browser.providerOptions property:

export default defineConfig({
  test: {
    browser: {
      providerOptions: {
        capabilities: {},
      },
    },
  },
});

providerOptions is deprecated in favour of instances.

You can find most available options in the WebdriverIO documentation. Note that Vitest will ignore all test runner options because we only use webdriverio's browser capabilities.

TIP

Most useful options are located on capabilities object. WebdriverIO allows nested capabilities, but Vitest will ignore those options because we rely on a different mechanism to spawn several browsers.

Note that Vitest will ignore capabilities.browserName. Use test.browser.instances.name instead.