エムスリーキャリアでQAを担当している川浪です。
本記事では、環境変数を参照するPlaywrightのE2EテストをVSCodeで実行する方法をご紹介します。
Visual Studio Code（VSCode）のTestingビュー（機能拡張「Playwright Test for VS Code」のインストールにより追加されるビュー）からPlaywrightのテストを実行したとき、自前で用意した環境変数が読み込まれない現象に遭遇したため、その対処方法について記載します。
本記事の前提条件
本記事の前提条件は以下の通りです。
- Playwrightをインストール済み（使用するスクリプト言語にTypeScriptを選択）
- Visual Studio Code（VSCode）をインストール済み、かつ、VSCodeの機能拡張「Playwright Test for VS Code」をインストール済み
- dotenvをインストール済み*1
.envファイルの作成
まずPlaywrightのプロジェクトフォルダ直下に「.env」という名称のファイルを作成します。
作成したファイルを開き環境変数を入力、保存します。
※入力例：
LOGIN_URL='https://staging.example.com/'
LOGIN_USER='hogehoge'
LOGIN_PASSWORD='fugafuga'
playwright.config.ts ファイルの修正
Playwrightのプロジェクトフォルダ直下にあるplaywright.config.tsファイルを開き、.envファイルを読み込む以下のコードを追加します
import dotenv from 'dotenv';
import path from 'path';
dotenv.config({ path: path.resolve(__dirname, '.env') });
Playwrightのテスト実行
VSCodeのTestingビューを開き、Test Explorerに表示されているテストを実行もしくはデバッグ実行します。
環境変数は、コード上で
process.env.環境変数名
と記述することで値が参照できます。
おわりに
環境変数ですが、例えば本番、ステージング、開発環境毎に異なる値を参照させたい場合、playwright.config.ts で読み込む.envファイルを切り替えるコードを追加することで対応可能です。詳細は次回以降のブログでご紹介したいと思います。
参考URL
https://playwright.dev/docs/test-parameterize#env-files
*1:dotenvは環境変数を.envファイルから読み込むためのNode.jsのライブラリです。インストール方法は https://github.com/motdotla/dotenv を参照してください
