【テスト自動化】Playwrightで異なるロールのアカウントで同時にテストを行う

前書き

自動テストで、例えばアドミン権限を持つアカウントAでユーザーアカウント相当のアカウントBのロールの変更を行い、ロール変更に伴ってメニューの出し分けや実行できるアクションが適切に変わっているかを確認するシナリオを作成したくなるシチュエーションがあるかと思います。
ここでは2つのブラウザを用意し、それぞれのブラウザにアカウントAとアカウントBでログインを行い、アカウントAでロール変更を行なった際に即座に（ログインし直すことなく）アカウントBで確認するような自動テストをPlaywrightで実装する方法を記載いたします。

認証

（以下Playwrightの基本的なセットアップはできている前提で記載させていただきます）
まず認証情報を保存するためのjsonファイルを作成します。
認証情報を保存しておくことで、後続のテストで再利用することができます。（テストシナリオのたびにログインし直す必要がない。）
アドミンアカウントとユーザーアカウント用にそれぞれadmin.jsonとuser.jsonを作成します。
またこれらのjsonファイルはgit管理する必要がないのでgitignoreに追加しておきます。

mkdir -p playwright/.auth
touch playwright/.auth/admin.json
touch playwright/.auth/user.json
echo $'\nplaywright/.auth' >> .gitignore

以下のセットアップファイルでアドミンアカウントとユーザーアカウントそれぞれでログインを行い、それぞれの認証情報を作成したjsonファイルに保存します。

tests/auth.setup.ts

import { test as setup, expect } from '@playwright/test';

const adminFile = 'playwright/.auth/admin.json';

setup('アドミンアカウントでログイン', async ({ page }) => {
  // ログインステップ
  await page.goto('https://github.com/login');
  await page.getByLabel('Username or email address').fill('admin');
  await page.getByLabel('Password').fill('password');
  await page.getByRole('button', { name: 'Sign in' }).click();
  // ログイン後に遷移するURLを待つ（クッキーがセットされるのを待つ）
  await page.waitForURL('https://github.com/');

  // admin.jsonに認証情報を保存する
  await page.context().storageState({ path: adminFile });
});

const userFile = 'playwright/.auth/user.json';

setup('ユーザーアカウントでログイン', async ({ page }) => {
  // ログインステップ
  await page.goto('https://github.com/login');
  await page.getByLabel('Username or email address').fill('user');
  await page.getByLabel('Password').fill('password');
  await page.getByRole('button', { name: 'Sign in' }).click();
  // ログイン後に遷移するURLを待つ（クッキーがセットされるのを待つ）
  await page.waitForURL('https://github.com/');

  // user.jsonに認証情報を保存する
  await page.context().storageState({ path: userFile });
});

テスト

アドミンアカウント・ユーザーアカウント用それぞれのBlowserContextsを作成します。
storageStateで認証用に作成したjsonファイルを指定することでログインした状態でテストを開始することができます。
それぞれのブラウザでログインを行った後に、各アカウントでの具体的なテストを記載します。

tests/example.spec.ts

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

test('admin and user', async ({ browser }) => {
  // アドミンアカウント用のBlowerContextsを作成する
  const adminContext = await browser.newContext({ storageState: 'playwright/.auth/admin.json' });
  const adminPage = await adminContext.newPage();

  // ユーザーアカウント用のBlowerContextsを作成する
  const userContext = await browser.newContext({ storageState: 'playwright/.auth/user.json' });
  const userPage = await userContext.newPage();

  await adminPage.goto(url);
  await adminPage.sideMenuButton.click();
  // 以下に例えばユーザーアカウントのロール変更を行うアクションを記載する

  await userPage.goto(url);
  await userPage.sideMenuButton.click();
  // 以下に例えばユーザーアカウントのロール変更を確認するアクションを記載する

  await adminContext.close();
  await userContext.close();
});

最後に

今回はロール変更の際の挙動を確認するテストを例にご紹介しましたが、例えばチャット機能などを有するプロダクトのテスト自動化では送信側と受信側でそれぞれ別々のアカウントでログインを行いテストを行うなどのシナリオでも応用できるかもしれません。