Playwright の環境変数設定方法

Playwright において環境変数を設定するには以下の方法があります。

1. playwright.config.ts の use で baseURL を設定

playwright.config.ts の use の中で baseURL を設定することで、テスト実行時に baseURL が自動設定されます。
つまり、await page.goto("/");でhttp://localhost:4200/にアクセスすることができます。

use: {
  baseURL: 'http://localhost:4200',
},

なお、playwright.config.ts の projects ごとに設定することもできます。

projects: [
  {
    name: 'dev',
    use: {
      ...devices['Desktop Chrome'],
      baseURL: 'http://localhost:4200',
    },
  },
  {
    name: 'staging',
    use: {
      ...devices['Desktop Chrome'],
      baseURL: 'http://localhost:4300',
    },
  },
  {
    name: 'production',
    use: {
      ...devices['Desktop Chrome'],
      baseURL: 'http://localhost:4400',
    },
  },
],

2. テストオプションの拡張

baseURL とは別に、globalsQaURL など、他の URL を環境変数として設定したい場合、以下の手順で行うことができます。

手順

test-options.ts を作成する

import { test as base } from '@playwright/test';

export type TestOptions = {
  globalsQaURL: string;
};

export const test = base.extend<TestOptions>({
  globalsQaURL: [
    '',
    {
      option: true,
    },
  ],
});

2. playwright.config.ts の設定

export default defineConfig<TestOptions>({
  use: {
    baseURL: 'http://localhost:4200',
    globalsQaURL: 'https://www.globalsqa.com/demo-site/draganddrop/',
  },
});

3. テストファイルでの使用

import { expect } from '@playwright/test';
import { test } from '../test-options';

test('drag and drop with iFrame case1', async ({ page, globalsQaURL }) => {
  await page.goto(globalsQaURL);
  // テストコードを記述
});

3. process.env を用いた環境変数の設定

.env ファイルを用いて、process.env で環境変数を設定することができます。

手順

1. .env ファイルの作成

URL=https://www.globalsqa.com/demo-site/draganddrop/

2. dotenv のインストール

npm install dotenv --save-dev

3. playwright.config.ts の設定

import * as dotenv from 'dotenv';
import * as path from 'path';
dotenv.config({ path: path.resolve(__dirname, '.env') });

4. テストファイルでの使用

test.beforeEach(async ({ page }) => {
  await page.goto(process.env.URL);
});

なお、コマンドラインで process.env に環境変数を設定することもできます：

URL=https://www.globalsqa.com/demo-site/draganddrop/ npx playwright test autoWaiting.spec.ts --project=chromium