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: 'https://:3000',
    reuseExistingServer: !process.env.CI,
    stdout: 'ignore',
    stderr: 'pipe',
  },
});

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

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

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: 'https://:3000',
    reuseExistingServer: !process.env.CI,
    timeout: 120 * 1000,
  },
});

baseURLの追加

また、テストで相対URLを使用できるように、設定のuse: {}セクションでbaseURLを指定することをお勧めします。これにより、完全なURLを繰り返し指定する必要がなくなります。

page.goto()、page.route()、page.waitForURL()、page.waitForRequest()、またはpage.waitForResponse()を使用する場合、対応するURLを構築するためにURL()コンストラクタを使用してベースURLが考慮されます。例えば、baseURLをhttps://:3000に設定し、テストで/loginにナビゲートすると、Playwrightはhttps://: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: 'https://:3000',
    reuseExistingServer: !process.env.CI,
  },
  use: {
    baseURL: 'https://:3000',
  },
});

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

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

test('test', async ({ page }) => {
  // This will navigate to https://: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: 'https://:3000',
      name: 'Frontend',
      timeout: 120 * 1000,
      reuseExistingServer: !process.env.CI,
    },
    {
      command: 'npm run backend',
      url: 'https://:3333',
      name: 'Backend',
      timeout: 120 * 1000,
      reuseExistingServer: !process.env.CI,
    }
  ],
  use: {
    baseURL: 'https://:3000',
  },
});

はじめに​