Browser Mode improvements

[sheremet-va]

Clear and concise description of the problem

We've identified several pain points with Browser Mode:

1. Users have to manually add @vitest/browser/providers/... types to tsconfig manually.
2. It is not possible to opt-out of certain features like locators or jest-dom; we want a more simple setup like Karma or Web Test Runner

Suggested solution

These are some possible proposals:

Support browser providers via an export:

import { webdriverio } from '@vitest/browser-webdriverio'
// or
import { playwright } from '@vitest/browser-playwright'

export default defineConfig({
  plugins: [
    webdriverio({ ...customOptions }),
    // or
    playwright({ ...customOptions }),
  ],
})

browser-webdriverio/browser-playwright packages would also augment Vite config types to allow WebdriverIO/Playwright options in instances and require specific browser names, so users don't need to augment TypeScript types manually.

These packages will also have playwright/webdriverio in dependencies, so users don't need to install them manually.

New option browser.apis:

export default defineConfig({
  test: {
    browser: {
      apis: ['expect.element', 'locators', 'jest-dom'],
    },
  },
})

Users can opt-out of certain APIs to avoid the overhead of loading them.

Alternative

No response

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]

The first part of the API is implemented in Vitest 4-beta.10:

import { playwright } from '@vitest/browser/providers/playwright'
import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    browser: {
      provider: playwright(),
      instances: [{ browser: 'chromium' }]
    },
  },
})

I am hesitating to publish separate packages for now. I would like to keep the @vitest/browser/context import universal or introduce a different module (vitest/browser?)

#8629 introduces separate packages in beta.15.

[GoldStrikeArch]

The other pain point right now is that we can't use "plugins"(or "services") when we use webdriverio provider. By "plugins" I am referring the "service" like this one -> https://webdriver.io/docs/sauce-service

So, something like this would be very nice to have:

import { webdriverio } from '@vitest/browser/providers/webdriverio'
import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    browser: {
      provider: webdriverio({
      user: process.env.SAUCE_USERNAME,
      key: process.env.SAUCE_ACCESS_KEY,
      region: 'us',
      services: [
          ['sauce', {
              sauceConnect: true,
              sauceConnectOpts: {
                  // ...
              }
          }]
      ],
      // ... other wedriverio config
      }),
      instances: [{ browser: 'chromium' }]
    },
  },
})

This would allow to run tests not only on the local browsers but on the remote browsers as well (such as "real" mobile Safari and Chrome). Also right now there is a limitation that you can only use 1 browser per "test session" if you don't use headless option which is not the case with karma/web-test-framework

[sheremet-va]

So, something like this would be very nice to have:

Unfortunately, services in webdriverio is a test runner feature and it heavily relies on test runner event hooks that we do not have or cannot have.