とことんDevOps | 日本仮想化技術のDevOps技術情報メディア

DevOpsに関連する技術情報を幅広く提供していきます。

日本仮想化技術がお届けする「とことんDevOps」では、DevOpsに関する技術情報や、日々のDevOps業務の中での検証結果、TipsなどDevOpsのお役立ち情報をお届けします。
主なテーマ: DevOps、CI/CD、コンテナ開発、IaCなど
読者登録と各種SNSのフォローもよろしくお願いいたします。

PlaywrightでBasic認証を通す方法

こんにちは。
最近、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

おわりに

調べるとドキュメントに書いてあったりするんですが、ググっていると上手く見つけられなかったりするので備忘録もかねて書いてみました。