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

Vitest は、サーバが HTTPS 経由で提供されている場合には 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,
});