ReactアプリをPlaywrightでテストする〜設定編〜

playwrightの設定ファイルについていくつか試してみたものを少し紹介します。

Configurationを参照すると、いろいろ細かい設定ができるようですが、自分が実際に使ったのは以下の設定くらいです。

import {PlaywrightTestCofig} from '@playwright/test';

const config PlaywrightTestConfig = {
  globalSetup: require.resolve('./config/global-setup'),
  globalTeardown: require.resolve('./config/global-testdown'),
  testDir: '',  // 対象テスト保管先パス
  testMatch: /.\.test\.ts/,  // 対象テストファイル名パターン
  use: {
    baseUrl: 'http://localhost:8080',  // テスト対象のベースURL
    browserName: 'chromium',  // 主に使うブラウザ
    locale: 'ja-JP',
  },
  timeout: 90000,  // 各種タイムアウト
  expect: {
    timeout: 40000,
  },
  reporter: [
    ['allure-playwright'],
    ...
  ],
  ...
};
export default config;

globalSetupは、全テスト実施前に1度だけ行われる処理で、globalTeardownは全テストが終了した後に行われる処理です。それぞれ実行する関数を指定できます。

テスト対象の画面がログイン認証済みを前提としたものだったため、globalSetupにあらかじめ必要なユーザ分の認証情報を保存しておく処理を記載しました。
これは authentication にドキュメントがあるのでこちらを参考に実装しました。

import {chromium, FullConfig} from '@playwright/test';

async function globalSetup(_config: FullConfig) {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = context.newPage();

  await page.goto('認証サイト');
  // ログイン処理を記述
  
  // 認証情報を指定のパスに保存する
  await context.storageState({path: '/path/to/state.json'});
  await context.close();
}
export default globalSetup;

認証情報をテスト前にあらかじめ保存しておくことで、各テスト実施のtest.use でその認証情報を再利用することができます。
つまり、テストするごとにログイン処理（ログイン画面へ遷移して、IDパスワードを入力して・・・と言ったような一連の操作）を書かなくてもすみます。
以下の例のように、welcomeテストで使えるpageオブジェクトは認証済みとなっているため、その前提でのテスト検証を書くだけでよいということになります。

import {test} from '@playright/test';

test.describe('hoge画面のテスト', () => {

  // 保存した認証情報を使う
  test.use({storageState: '/path/to/state.json'});

  test('welcome', ({page}) => {
    // 認証状態のページの'hoge'にアクセスできる
    const hoge = await page.localor('hoge');
    // ログイン後のようこそ文言が表示されている
    expect(hoge).toHaveText('Welcome!');
  });
});

globalTeardownの方は、例えば保存された認証情報が残らないよう削除する処理を書くなどができます。

import fs from 'fs';

async function globalTeardown() {
  await fs.promises.rm('/path/to/state.json');
}

export default globalTeardown;

また、このconfigファイルは、テスト実施時にコマンドラインで指定することができます。
デフォルトでは ルートフォルダの playwright.config.ts用いられるため、特に指定する必要はないのですが、例えばテスト内容によってconfigファイルを使い分けたいときなどは明示的に指定することで可能となります。

package.json

{
  "scripts": {
    "test:ita": "playwright test -c playwright.config.ita.ts"
    "test:itb": "playwright test -c playwright.config.itb.ts"
  }
}

その他設定したものはタイムアウトの時間です。
ドキュメントを参照するといろいろなタイムアウト設定ができます。

テスト対象の環境や操作対象の画面次第では、playwrightのデフォルトのタイムアウト時間を超えてしまう場合もあるため、実際に動かしつつ必要なものだけに絞って、時間切れによるテスト失敗がない、ちょうどよい時間を調整して設定しました。

import {PlaywrightTestCofig} from '@playwright/test';

const config PlaywrightTestConfig = {
  ...
  timeout: 90000,
  expect: {
    timeout: 40000,
  },
};
export default config;

レポート出力も行なっているため、レポートの種類や保存先などを指定しました。

  reporter: [
    ['line'],
    ['html', {open: 'never', outputFolder: '/path/to/report',]
    ['allure-playwright'],
  ],

最初はデフォルトの設定値で動かすと思うのですが、そのうちいろいろ変更したいところが出てくると思います。テストする環境やテスト条件などを考慮して、各自適切な設定値に調整することをお勧めします。