こんにちは。
最近は、Playwrightを使ってE2Eテストを積極的に書いているので、実装している中で詰まったことや備忘録的なことをあれこれ書いています。

今回は、Webアプリを作る際に権限が異なるアカウントごとにそれぞれテストしたいことがありました。実行するときにアカウントを手動で切り替えたりするのは手間ですし、せっかく自動化しているのに部分的にアナログな操作が加わるのはあまり嬉しくありません。
権限が異なるアカウントをテストシナリオごとに切り替えられたらユーザーが申請して管理者が承認するようなアカウントを横断したテストもできるようになりますね。
Playwrightでどのように実現できるのかを見ていきましょう。

前提

Playwrightに関連する各種ファイルは、公式サイトに従って用意したプロジェクトをベースにしていますが、アプリケーションなどは各テーマに合う形で事前に用意したものを使用しています。

Installation | Playwright

去年のアドベントカレンダーでも少し触れていたので、もう少し細かい手順で知りたい方はこちらもご覧ください。

Playwrightを使ってE2EテストやUI操作の自動化をやってみよう(環境構築編) - とことんDevOps | 日本仮想化技術のDevOps技術情報メディア

書き方

今回は、「Playwrightで認証処理を毎回書かずにいい感じに処理させる方法」の記事で取り上げた内容を元に複数アカウントを取り扱うために少し修正を加えるだけで扱うことができます。

認証処理

前に書いた記事ではtests/auth.setup.tsに認証処理を書いてから、playwright.config.tsで認証処理が前依存になるように依存関係を設定しました。
初めてテストを実行した時にplaywright/.auth/user.jsonに認証情報を保持されます。2回目以降からはこの認証を使い回して、テストシナリオごとに認証を毎回実行しなくていいようになっています。

すでに作っているものは一般ロールが割り当てられたアカウントに対してそのまま使用します。そのため、新たに管理者ロールを持ったアカウントを用意します。

アカウントの用意ができたらplaywright/.auth/user.jsonと同じようにplaywright/.auth/admin.jsonというファイルを用意します。ファイル名は区別できればなんでも構いません。

touch playwright/.auth/admin.json
echo "{}" > playwright/.auth/admin.json

認証情報を保持するファイルの準備ができたらソースコードを修正します。\ tests/auth.setup.tsを開き、ユーザー用と管理者ようのログイン処理を書きます。認証後に取得できた情報は先ほど用意したファイルに書き込むように記述します。

import { test as setup, expect, Page } from "@playwright/test";
import dotenv from "dotenv";

dotenv.config();

const adminAuthFile = "playwright/.auth/admin.json";

setup("認証(管理者)", async ({ page }) => {
  // ログイン処理(省略)

  await page.context().storageState({ path: adminAuthFile });
});

const userAuthFile = "playwright/.auth/user.json";

setup("認証(スタッフ)", async ({ page }) => {
  // ログイン処理(省略)

  await page.context().storageState({ path: userAuthFile });
});

テストシナリオ

ユーザーと管理者のそれぞれで認証情報を取得する処理が書けました。次にテストシナリオごとにどの権限を使用してテストをするのかを定義します。

playwright.config.tsの内容をコード上から書き換えることで、テストごとに使用する認証情報をスイッチさせます。
test.use({ storageState: "..." });という書き方をすることでコード上から変更できます。1つ注意しないといけないことは、test({...});のテストシナリオ内でこの宣言はできません。

次のコードのようにtest.describe(...)を使ってテストシナリオをグルーピングしてからtest.use(...)を呼び出す必要があります。

Playwright Test | Playwright

import { test, expect } from "@playwright/test";

test.describe("スタッフ管理ページ(権限：ユーザー)", () => {
  test.use({ storageState: "playwright/.auth/user.json" });

  test("表示チェック", async ({ page }) => {
    // テスト処理
  });
});

test.describe("スタッフ管理ページ(権限：管理者)", () => {
  test.use({ storageState: "playwright/.auth/admin.json" });

  test("表示チェック", async ({ page }) => {
    // テスト処理
  });
});