🤼‍♂️

開発サーバーとPlaywrightで立ち上げる開発サーバーのポートが被らないようにする

2022/09/04に公開

Playwright

tech

はじめに

Playwright でテストを実行するには事前に開発サーバーを立ち上げておく必要があります。
が、毎回テストを実行する前に開発サーバーを立ち上げるのは面倒ですよね...

幸い、Playwright ではテスト実行前に別途開発サーバーを立ち上げるような設定ができるので、自動で立ち上げることも可能です。

ですが、何も考えずにやると開発サーバーと Playwright 側で開発サーバーの port が被ってしまうので、テスト実行前に開発サーバーを停止する...なんてことになり面倒です。

本記事では、開発サーバーを立ち上げ中 or 停止中でも Playwright のテストを実行できるようにします。

対応していく

Playwright のセットアップ直後は下記のようになっており、テスト用の開発サーバーの設定はコメントアウトされています。

playwright.config.ts

  // webServer: {
  //   command: 'npm run start',
  //   port: 3000,
  // },

コメントイン & コマンドを少し変えて下記のようにしました。

playwright.config.ts

  webServer: {
    command: 'yarn dev',
    port: 3000,
  },

この状態で開発サーバーの立ち上げ後にテストを実行してみます。
すると、このようなエラーメッセージが表示されます。

Error: http://localhost:3000 is already used, make sure that nothing is running on the port/url or set reuseExistingServer:true in config.webServer.

エラーメッセージにもある通り、開発サーバーと Playwright で立ち上げようとした開発サーバーのポートがぶつかったためエラーになっています。
よく見ると、url or port を変えるのとは別に reuseExistingServer を設定することでも解消できそうです。

公式ドキュメントの WebServer の設定を確認してみると、reuseExistingServer の説明がありました。

If true, it will re-use an existing server on the port or url when available. If no server is running on that port or url, it will run the command to start a new server.

つまり、reuseExistingServer を設定することで下記のような挙動になるようです。
開発サーバーが既に立ち上がっている場合 → テスト用の開発サーバーは立ち上げず、既に立ち上がっている方を使い回す
開発サーバーが立ち上がっていない場合 → command で指定した方法で開発サーバーを立ち上げる
これはまさに今回実現したかったことですね🙌

For continuous integration, you may want to use the reuseExistingServer: !process.env.CI option which does not use an existing server on the CI.

とのことなので、ローカルでは reuseExistingServer を有効にし、CI上ではオフにすることを推奨しているようです。

サンプルコードを参考に下記のように変更してみます。

playwright.config.ts

  webServer: {
    command: 'yarn dev',
    port: 3000,
+   reuseExistingServer: !process.env.CI
  },

すると、開発サーバーを立ち上げ中でもテストを実行できるようになりました🎉

終わりに

このエラーが出て少しの間放置気味でしたが、意外とさくっといけたので良かった..!

はじめに

対応していく

終わりに

Discussion