mirror of
https://github.com/vitest-dev/vitest.git
synced 2025-12-08 18:26:03 +00:00
135 lines
4.1 KiB
Markdown
135 lines
4.1 KiB
Markdown
# Multiple Setups
|
||
|
||
Since Vitest 3, you can specify several different browser setups using the new [`browser.instances`](/guide/browser/config#browser-instances) option.
|
||
|
||
The main advantage of using the `browser.instances` over the [test projects](/guide/projects) is improved caching. Every project will use the same Vite server meaning the file transform and [dependency pre-bundling](https://vite.dev/guide/dep-pre-bundling.html) has to happen only once.
|
||
|
||
## Several Browsers
|
||
|
||
You can use the `browser.instances` field to specify options for different browsers. For example, if you want to run the same tests in different browsers, the minimal configuration will look like this:
|
||
|
||
```ts [vitest.config.ts]
|
||
import { defineConfig } from 'vitest/config'
|
||
export default defineConfig({
|
||
test: {
|
||
browser: {
|
||
enabled: true,
|
||
provider: 'playwright',
|
||
headless: true,
|
||
instances: [
|
||
{ browser: 'chromium' },
|
||
{ browser: 'firefox' },
|
||
{ browser: 'webkit' },
|
||
],
|
||
},
|
||
},
|
||
})
|
||
```
|
||
|
||
## Different Setups
|
||
|
||
You can also specify different config options independently from the browser (although, the instances _can_ also have `browser` fields):
|
||
|
||
::: code-group
|
||
```ts [vitest.config.ts]
|
||
import { defineConfig } from 'vitest/config'
|
||
export default defineConfig({
|
||
test: {
|
||
browser: {
|
||
enabled: true,
|
||
provider: 'playwright',
|
||
headless: true,
|
||
instances: [
|
||
{
|
||
browser: 'chromium',
|
||
name: 'chromium-1',
|
||
setupFiles: ['./ratio-setup.ts'],
|
||
provide: {
|
||
ratio: 1,
|
||
}
|
||
},
|
||
{
|
||
browser: 'chromium',
|
||
name: 'chromium-2',
|
||
provide: {
|
||
ratio: 2,
|
||
}
|
||
},
|
||
],
|
||
},
|
||
},
|
||
})
|
||
```
|
||
```ts [example.test.ts]
|
||
import { expect, inject, test } from 'vitest'
|
||
import { globalSetupModifier } from './example.js'
|
||
|
||
test('ratio works', () => {
|
||
expect(inject('ratio') * globalSetupModifier).toBe(14)
|
||
})
|
||
```
|
||
:::
|
||
|
||
In this example Vitest will run all tests in `chromium` browser, but execute a `'./ratio-setup.ts'` file only in the first configuration and inject a different `ratio` value depending on the [`provide` field](/config/#provide).
|
||
|
||
::: warning
|
||
Note that you need to define the custom `name` value if you are using the same browser name because Vitest will assign the `browser` as the project name otherwise.
|
||
:::
|
||
|
||
## Filtering
|
||
|
||
You can filter what projects to run with the [`--project` flag](/guide/cli#project). Vitest will automatically assign the browser name as a project name if it is not assigned manually. If the root config already has a name, Vitest will merge them: `custom` -> `custom (browser)`.
|
||
|
||
```shell
|
||
$ vitest --project=chromium
|
||
```
|
||
|
||
::: code-group
|
||
```ts{6,8} [default]
|
||
export default defineConfig({
|
||
test: {
|
||
browser: {
|
||
instances: [
|
||
// name: chromium
|
||
{ browser: 'chromium' },
|
||
// name: custom
|
||
{ browser: 'firefox', name: 'custom' },
|
||
]
|
||
}
|
||
}
|
||
})
|
||
```
|
||
```ts{3,7,9} [custom]
|
||
export default defineConfig({
|
||
test: {
|
||
name: 'custom',
|
||
browser: {
|
||
instances: [
|
||
// name: custom (chromium)
|
||
{ browser: 'chromium' },
|
||
// name: manual
|
||
{ browser: 'firefox', name: 'manual' },
|
||
]
|
||
}
|
||
}
|
||
})
|
||
```
|
||
:::
|
||
|
||
::: warning
|
||
Vitest cannot run multiple instances that have `headless` mode set to `false` (the default behaviour). During development, you can select what project to run in your terminal:
|
||
|
||
```shell
|
||
? Found multiple projects that run browser tests in headed mode: "chromium", "firefox".
|
||
Vitest cannot run multiple headed browsers at the same time. Select a single project
|
||
to run or cancel and run tests with "headless: true" option. Note that you can also
|
||
start tests with --browser=name or --project=name flag. › - Use arrow-keys. Return to submit.
|
||
❯ chromium
|
||
firefox
|
||
```
|
||
|
||
If you have several non-headless projects in CI (i.e. the `headless: false` is set manually in the config and not overridden in CI env), Vitest will fail the run and won't start any tests.
|
||
|
||
The ability to run tests in headless mode is not affected by this. You can still run all instances in parallel as long as they don't have `headless: false`.
|
||
:::
|