Playwright 구성

기본적으로 TypeScript는 제공자 옵션과 추가 expect 속성을 인식하지 못합니다. TypeScript가 사용자 지정 옵션에 대한 정의를 인식하도록 하려면 @vitest/browser/providers/playwright를 참조해야 합니다.

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

또는 tsconfig.json 파일의 compilerOptions.types 필드에 추가할 수도 있습니다. 이 필드에 값을 지정하면 @types/* 패키지의 자동 로딩이 비활성화됩니다.

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

Vitest는 동일한 파일 내의 모든 테스트를 실행하기 위해 단일 페이지를 엽니다. instances에서 launch, connect 및 context 속성을 구성할 수 있습니다.

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    browser: {
      instances: [
        {
          browser: 'firefox',
          launch: {},
          connect: {},
          context: {},
        },
      ],
    },
  },
})

WARNING

Vitest 3 이전에는 이러한 옵션이 test.browser.providerOptions 속성에 있었습니다.

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

providerOptions는 instances로 대체되어 더 이상 사용되지 않습니다.

launch

이 옵션은 playwright[browser].launch 명령에 직접 전달됩니다. 이 명령과 사용 가능한 인수에 대한 자세한 내용은 Playwright 문서에서 참조할 수 있습니다.

WARNING

Vitest는 launch.headless 옵션을 무시합니다. 대신 test.browser.headless를 사용하세요.

--inspect가 활성화된 경우 Vitest는 디버깅 플래그를 launch.args에 추가합니다.

connect 3.2.0+

이 옵션은 playwright[browser].connect 명령에 직접 전달됩니다. 이 명령과 사용 가능한 인수에 대한 자세한 내용은 Playwright 문서에서 참조할 수 있습니다.

WARNING

이 명령은 기존 Playwright 서버에 연결되므로 launch 옵션은 모두 무시됩니다.

context

Vitest는 browser.newContext()를 호출하여 각 테스트 파일에 대한 새 컨텍스트를 생성합니다. 사용자 정의 인수를 지정하여 이 동작을 구성할 수 있습니다.

TIP

컨텍스트는 Playwright 테스트 러너처럼 _테스트_마다 생성되는 것이 아니라 _테스트 파일_마다 생성됩니다.

WARNING

서버가 HTTPS로 제공되는 경우, Vitest는 ignoreHTTPSErrors를 항상 true로 설정하며, MSW를 통한 모듈 모의를 지원하기 위해 serviceWorkers를 'allow'로 설정합니다.

여기에 지정하면 헤드리스 모드로 테스트를 실행할 때 해당 설정이 손실될 수 있으므로, test.browser.viewport를 사용하는 것이 좋습니다.

actionTimeout 3.0.0+

• 기본값: 타임아웃 없음, 3.0.0 이전에는 1초

이 값은 모든 접근성 검사가 통과하고 작업이 실제로 완료될 때까지 Playwright가 기다리는 기본 타임아웃을 구성합니다.

작업별로 작업 타임아웃을 구성할 수도 있습니다.

import { page, userEvent } from '@vitest/browser/context';

await userEvent.click(page.getByRole('button'), {
  timeout: 1_000,
});