Skip to content
Vitest 3
Main Navigation 가이드 & API구성브라우저 모드고급 API
3.2.0
2.1.9
1.6.1
0.34.6

한국어

English
简体中文
繁體中文
Español
Français
Русский
Português – Brasil
Deutsch
日本語
Italiano
Polski
Türkçe
čeština
magyar

한국어

English
简体中文
繁體中文
Español
Français
Русский
Português – Brasil
Deutsch
日本語
Italiano
Polski
Türkçe
čeština
magyar

외관

Sidebar Navigation

소개

브라우저 모드를 사용하는 이유

브라우저 모드

구성

브라우저 설정 참조

Playwright 구성

WebdriverIO 구성

API

Context API

상호작용 API

로케이터

Assertion API

명령어

가이드

다중 설정

Vitest 구성하기

테스트 API 참조

고급 API

이 페이지에서

다중 설정 ​

Vitest 3부터는 새로운 browser.instances 옵션을 사용하여 여러 브라우저 설정을 지정할 수 있습니다.

browser.instances를 테스트 프로젝트 대신 사용하는 주된 장점은 캐싱이 향상된다는 점입니다. 모든 프로젝트는 동일한 Vite 서버를 사용하므로 파일 변환과 의존성 사전 번들링이 한 번만 수행됩니다.

여러 브라우저 ​

browser.instances 필드를 사용하여 여러 브라우저에 대한 옵션을 지정할 수 있습니다. 예를 들어, 동일한 테스트를 여러 브라우저에서 실행하려면 최소 설정은 다음과 같습니다.

ts
import { defineConfig } from 'vitest/config';
export default defineConfig({
  test: {
    browser: {
      enabled: true,
      provider: 'playwright',
      headless: true,
      instances: [
        { browser: 'chromium' },
        { browser: 'firefox' },
        { browser: 'webkit' },
      ],
    },
  },
});

다른 설정 ​

브라우저와 독립적으로 다른 설정 옵션을 지정할 수도 있습니다(인스턴스에 browser 필드를 포함할 수도 있습니다).

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
import { expect, inject, test } from 'vitest';
import { globalSetupModifier } from './example.js';

test('ratio works', () => {
  expect(inject('ratio') * globalSetupModifier).toBe(14);
});

이 예시에서 Vitest는 모든 테스트를 chromium 브라우저에서 실행하지만, 첫 번째 설정에서만 './ratio-setup.ts' 파일을 실행하며 provide 필드에 따라 다른 ratio 값을 주입합니다.

WARNING

동일한 브라우저 이름을 사용하는 경우 사용자 지정 name 값을 정의해야 합니다. 그렇지 않으면 Vitest가 browser를 프로젝트 이름으로 할당합니다.

필터링 ​

--project 플래그를 사용하여 실행할 프로젝트를 필터링할 수 있습니다. Vitest는 수동으로 지정되지 않은 경우 브라우저 이름을 프로젝트 이름으로 자동 할당합니다. 루트 구성에 이미 이름이 있는 경우 Vitest는 이를 병합합니다: custom -> custom (browser).

shell
$ vitest --project=chromium
ts
export default defineConfig({
  test: {
    browser: {
      instances: [
        // name: chromium
        { browser: 'chromium' },
        // name: custom
        { browser: 'firefox', name: 'custom' },
      ]
    }
  }
})
ts
export default defineConfig({
  test: {
    name: 'custom',
    browser: {
      instances: [
        // name: custom (chromium)
        { browser: 'chromium' },
        // name: manual
        { browser: 'firefox', name: 'manual' },
      ]
    }
  }
})

WARNING

Vitest는 headless 모드가 false로 설정된 여러 인스턴스(기본 동작)를 동시에 실행할 수 없습니다. 개발 중에는 터미널에서 실행할 프로젝트를 선택할 수 있습니다.

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

CI 환경에서 여러 헤드리스 모드가 아닌 프로젝트가 있는 경우 (즉, headless: false가 구성에서 수동으로 설정되었고 CI 환경에서 재정의되지 않은 경우), Vitest는 실행에 실패하고 어떤 테스트도 시작하지 않습니다.

헤드리스 모드에서 테스트를 실행하는 기능은 이와 무관합니다. headless: false로 설정되지 않은 한 모든 인스턴스를 병렬로 실행할 수 있습니다.

Pager
이전명령어
다음Vitest 구성하기

MIT 라이선스 하에 배포되었습니다.

Copyright (c) 2021-Present Vitest Team

https://vitest.dev/guide/browser/multiple-setups

MIT 라이선스 하에 배포되었습니다.

Copyright (c) 2021-Present Vitest Team