Webサーバー

はじめに

Playwright の設定ファイルには webserver オプションが用意されており、テスト実行前にローカルの開発サーバーを起動することができます。これは、開発中にテストを作成する場合や、テスト対象のステージング環境や本番環境の URL がない場合に最適です。

Webサーバーの設定

テスト中に開発用 Web サーバーを起動するには、Playwright の設定で webserver プロパティを使用します。

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  // Run your local dev server before starting the tests
  webServer: {
    command: 'npm run start',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
    stdout: 'ignore',
    stderr: 'pipe',
  },
});

プロパティ	説明
testConfig.webServer	テスト中に開発用 Web サーバー（または複数）を起動します。
`command`	アプリのローカル開発サーバーを起動するためのシェルコマンド。
`url`	サーバーが接続を受け入れる準備ができたときに 2xx、3xx、400、401、402、または 403 ステータスコードを返すことが期待される HTTP サーバーの URL。
`reuseExistingServer`	`true` の場合、利用可能な場合は URL 上の既存のサーバーを再利用します。その URL でサーバーが実行されていない場合は、コマンドを実行して新しいサーバーを起動します。`false` の場合、既存のプロセスが URL をリッスンしていると例外をスローします。stdout を表示するには、`DEBUG=pw:webserver` 環境変数を設定します。
`ignoreHTTPSErrors`	`url` をフェッチするときに HTTPS エラーを無視するかどうか。デフォルトは `false` です。
`cwd`	生成されたプロセスの現在の作業ディレクトリ。デフォルトは設定ファイルのディレクトリです。
`stdout`	`"pipe"` の場合、コマンドの stdout をプロセス stdout にパイプします。`"ignore"` の場合、コマンドの stdout を無視します。デフォルトは `"ignore"` です。
`stderr`	コマンドの stderr をプロセス stderr にパイプするか、無視するか。デフォルトは `"pipe"` です。
`timeout`	プロセスが起動して利用可能になるまで待機する時間（ミリ秒単位）。デフォルトは 60000 です。
`gracefulShutdown`	プロセスをシャットダウンする方法。指定しない場合、プロセスグループは強制的に `SIGKILL` されます。`{ signal: 'SIGTERM', timeout: 500 }` に設定すると、プロセスグループに `SIGTERM` シグナルが送信され、500ms 以内に終了しない場合は `SIGKILL` が続きます。代わりに `SIGINT` をシグナルとして使用することもできます。`0` のタイムアウトは、`SIGKILL` が送信されないことを意味します。Windows は `SIGTERM` および `SIGINT` シグナルをサポートしていないため、このオプションは Windows では無視されます。Docker コンテナをシャットダウンするには `SIGTERM` が必要であることに注意してください。

サーバータイムアウトの追加

Webサーバーは起動に時間がかかる場合があります。この場合、サーバーの起動を待つタイムアウトを増やすことができます。

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  // Rest of your config...

  // Run your local dev server before starting the tests
  webServer: {
    command: 'npm run start',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
    timeout: 120 * 1000,
  },
});

baseURL の追加

設定の use: {} セクションで baseURL を指定することも推奨されています。これにより、テストで相対 URL を使用でき、完全な URL を何度も指定する必要がなくなります。

page.goto()、page.route()、page.waitForURL()、page.waitForRequest()、または page.waitForResponse() を使用する場合、対応する URL を構築するために URL() コンストラクターを使用することで、ベース URL が考慮されます。たとえば、baseURL を http://localhost:3000 に設定し、テストで /login にナビゲートすると、Playwright は http://localhost:3000/login を使用してテストを実行します。

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  // Rest of your config...

  // Run your local dev server before starting the tests
  webServer: {
    command: 'npm run start',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
  use: {
    baseURL: 'http://localhost:3000',
  },
});

これで、ページをナビゲートするときに相対パスを使用できます。

test.spec.ts
import { test } from '@playwright/test';

test('test', async ({ page }) => {
  // This will navigate to http://localhost:3000/login
  await page.goto('./login');
});

複数の Web サーバー

複数の Web サーバー（またはバックグラウンドプロセス）は、webServer 設定の配列を提供することで、同時に起動できます。詳細については、testConfig.webServer を参照してください。

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  webServer: [
    {
      command: 'npm run start',
      url: 'http://localhost:3000',
      timeout: 120 * 1000,
      reuseExistingServer: !process.env.CI,
    },
    {
      command: 'npm run backend',
      url: 'http://localhost:3333',
      timeout: 120 * 1000,
      reuseExistingServer: !process.env.CI,
    }
  ],
  use: {
    baseURL: 'http://localhost:3000',
  },
});

はじめに​