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でリッスンしている場合はスローされます。stdoutを確認するには、`DEBUG=pw:webserver`環境変数を設定できます。
`stderr`	コマンドのstderrをプロセスのstderrにパイプするか、無視するか。デフォルトは`"pipe"`です。
`stdout`	`"pipe"`の場合、コマンドのstdoutをプロセスのstdoutにパイプします。`"ignore"`の場合、コマンドのstdoutを無視します。デフォルトは`"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サーバー

webServer構成の配列を指定することで、複数のWebサーバー（またはバックグラウンドプロセス）を同時に起動できます。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',
  },
});

はじめに​