エムスリーキャリアでQAエンジニアを担当している川浪です。
本記事では前回に引き続き環境変数を参照するPlaywrightのE2Eテストについて、実行環境毎に環境変数を切り替えてテスト実行する方法をご紹介します。
※前回の記事は、以下のリンクを参照してください
前提条件
PlaywrightのテストをVisual Studio Code（VSCode）もしくはコンソールから実行します。
- 前回の記事と同様、VSCodeの機能拡張「Playwright Test for VS Code」とNode.jsのライブラリ「dotenv」をインストール済み
- 「TEST_ENV」という環境変数を使って、環境ごとに異なる設定を読み込むことを想定
- 本番環境、ステージング環境、開発環境用に以下の.envファイルを用意
- .env.production（本番環境用）
- .env.staging（ステージング環境用）
- .env.development（開発環境用）
.envファイルを読み込むコードを追加する
.envファイル名から読み込む環境設定ファイルを特定するソースコードを playwright.config.ts に追加します。
import dotenv from 'dotenv';
import path from 'path';
if (process.env.TEST_ENV) {
dotenv.config(
{ path: path.resolve(__dirname, `.env.${process.env.TEST_ENV}`) }
);
}
コマンドラインから実行
Windowsの場合、コマンドプロンプトを起動しPlaywrightのインストール先フォルダに移動後、以下のコマンドを実行します
（例）ステージング環境で実行する場合
set TEST_ENV=staging npx playwright test
VSCodeからデバッグ実行
ローカル環境でVSCodeからデバッグ実行する場合、settings.jsonファイルに環境変数を追加します。
手順は以下の通りです。
- VSCode左下の歯車アイコンをクリックし、設定（Settings）メニューを選択します
- 設定画面が開くので、検索ボックスに「playwright」と入力し設定項目の表示を絞り込みます
- 表示された項目の中から「Playwright: Env」の「Edit in settings.json」を選択します
settings.jsonファイルが開くので、「playwright.env」キーに環境変数名と値を追加し保存します。
"playwright.env": {
"TEST_ENV": "development"
},
以上で設定は完了です。
あとは「Playwright Test for VS Code」のインストールにより追加されたVSCodeのTestingビューを開き、Test Explorerに表示されているPlaywrightのテストをデバッグ実行します。
環境変数「TEST_ENV」で指定したenvファイルが読み込まれ、ファイル内の環境変数を参照してテストが実行されます。
おわりに
今回デバッグ実行の際に設定メニューから環境変数を追加しましたが、VSCodeの公式サイトではデバッグ機能について紹介されていて、launch.json というファイルに環境変数を設定してデバッグできるようです。
今後はこのデバッグ機能に関しても理解しておきたいと思います。
