【Playwright】テストを実行する環境（DEV・STG）を切り替える

はじめに

テストを実行する環境を切り替えられるように、環境変数ファイルの追加と設定を行った際の備忘録です。
公式の環境ファイル（Passing Environment Variables | Playwright）についてのページを参照しています。

環境

• @playwright/test@1.54.1

dotenvをインストールする

npm install dotenv --save

自分の環境では、@types/nodeもインストールしていなかったので合わせてインストールする。

npm i @types/node --save-dev

環境変数ファイルを追加する

playwright.config.tsと同階層にenvironmentsディレクトリを追加する。
（環境ファイルをまとめるために追加。公式では直接.envファイルを作成している。）

ディレクトリ階層のイメージ

/
├─ environments
│  ├─ .env.dev
│  └─ .env.stg
└─ playwright.config.ts

環境ごとの環境変数ファイルを作成する。（例：environments/.env.xxx）

ファイル内には、環境ごとに管理したいデータを追加する。

DEV環境変数のサンプル

environments/.env.dev

STAGING=0
BASE_URL=https://dev.sample.com
# デフォルトユーザー
LOGIN_USER=[e-mail]
LOGIN_PASSWORD=password

STG環境変数のサンプル

environments/.env.stg

STAGING=1
BASE_URL=https://stg.sample.com
# デフォルトユーザー
LOGIN_USER=[e-mail]
LOGIN_PASSWORD=password

環境変数を格納するクラスファイルを追加する

参照しやすいように、環境変数を格納するクラスファイルを追加する。
環境変数TEST_TARGETが未指定の場合、.env.devを参照するようにTargetを追加する。

環境変数を格納するクラスのサンプル

environments/env.ts

export class Env {
    static Target: string = process.env.TEST_TARGET ?? 'dev';
    static Staging: string = process.env.STAGING ?? '0';
    static BaseUrl: string = process.env.BASE_URL ?? '';
    static LoginUser: string = process.env.LOGIN_USER ?? '';
    static LoginPassword: string = process.env.LOGIN_PASSWORD ?? '';
}

playwright.config.tsに設定を追加する

playwright.config.tsにimportを追加、上記で追加したクラスからpathを指定する。
これで環境ごとのデータを参照できる。

playwright.config.ts

import 'dotenv/config';
import path from 'path';

// NOTE: 環境変数を格納したクラスからpathを指定しています。環境変数未指定の場合、devを参照します。
require('dotenv').config({ path: path.resolve(__dirname, './environments', `.env.${Env.Target}`) });

/**
 * See https://playwright.dev/docs/test-configuration.
 */
const config: PlaywrightTestConfig = {
...（省略）

package.jsonに環境ごとのテスト実行スクリプトを追加する

自分の環境では下記のように追加した。

package.json

{
  "scripts": {
    "test": "playwright test --project=chromium", // Desktop Chromeのみ、TEST_TARGET未指定==開発環境でテストを実行
    "test-dev": "TEST_TARGET=dev playwright test", // 開発環境でテストを実行
    "test-stg": "TEST_TARGET=stg playwright test", // ステージング環境でテストを実行
    "report": "playwright show-report",
  },
...（省略）
}

これでnpm run test-devのように環境ごとにテスト実行ができる🎉

参考

• Playwrightを良い感じにセットアップしてみた
• Passing Environment Variables | Playwright