こんにちは。
最近、Playwrightを使ってE2Eテストを書き始めたので実装していく中で困ったことやつまずいたことを備忘録としてあれこれ書いていきます。

E2Eテストを実行する環境を開発環境や検証環境のような本番以外の環境で実行することを想定しているのですが、これらの環境は基本的に外部アクセス可能ではあるが、Basic認証などでアクセス制限を加えていることがあります。

プログラ上で頑張って処理を書くこともできると思いますが、Playwrightの設定で簡単にBasic認証を通す方法があったので書いてみました。

前提

Playwrightの公式サイトに従って用意したプロジェクトを使って試しています。

Installation | Playwright

去年のアドベントカレンダーでも少し触れていたので、もう少し細かい手順で知りたい方はこちらもご覧ください。

Playwrightを使ってE2EテストやUI操作の自動化をやってみよう(環境構築編) - とことんDevOps | 日本仮想化技術のDevOps技術情報メディア

設定方法

プロジェクト直下にあるplaywright.config.tsファイルのuse: { ... }にhttpCredentials: { ... }を追加することでできるようです。

...
  use: {
    /* Base URL to use in actions like `await page.goto('/')`. */
    // baseURL: 'http://127.0.0.1:3000',

    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry',
+   httpCredentials: {
+     username: 'user',
+     password: 'userpass',
+   },
  },
...

playwright.dev