Be able to customize WebdriverIO capabilities

[thomasjm]

Clear and concise description of the problem

At the moment, the WebdriverIO capabilities are hardcoded here:

vitest/packages/vitest/src/node/browser/webdriver.ts

Lines 59 to 62 in 80a706a

	capabilities: {
	'browserName': this.browser,
	'wdio:devtoolsOptions': { headless: options.headless },
	},

This prevents me from customizing them. For example, I'd like to be able to change the Chrome and chromedriver binaries, as described here, since I want to provide them myself.

Suggested solution

I'd like to be able to configure things in the Vite test options, in the same place where I select the webdriverio provider. Perhaps a function that allows me to transform the default capabilities:

  test: {
    browser: {
      enabled: true,
      name: "chrome",
      provider: "webdriverio",

      // New option
      transformWebdriverIOCapabilities: (caps) => {
        caps['goog:chromeOptions'] = {
          binary: "/my/chrome/binary",
          args: ['headless', 'disable-gpu']
        };
      }
    },
    ...
  },

One could also extend the provider attribute, perhaps

  test: {
    browser: {
      enabled: true,
      name: "chrome",

      // Modified provider field
      provider: {
        name: "webdriverio",
        transformCapabilities: (caps) => ...,
      }
  }

Alternative

I tried putting options in the wdio.conf.ts file as described in the WebDriverIO docs, but these options seem to be ignored.

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[sheremet-va]

There is an open PR for this, but the author stopped working on it seems like: #3758

[sheremet-va]

This is supported since #4364.

[FL33TW00D]

To anyone that may be running headless tests with configuration from a file, you can do the following:

//vite.config.js
import config from "./webdriver.json";
export default defineConfig({
  test: {
    browser: {
      enabled: true,
      headless: true,
      name: "chrome",
      providerOptions: {
        capabilities: config, 
      }
    },
    testTimeout: 30000,
  },
});

//webdriver.json
{
  "goog:chromeOptions": {
    "args": [
        "--no-sandbox",
    ]
  }
}

It should just work!

Thanks for implementing @sheremet-va ❤️