l

o

a

d

i

n

g

.

.

.

E2EのフロントテストでPlaywrightを使うことを決めた話 #5. Before/After Hooks で環境セットを自動化

2026/01/28

テクノロジー 学習

t f B! P L
eyecatch Playwrightには、4種類のHooksという機能があります。 このHooks機能を理解することで、より堅牢なテスト構造を作ることができるので、その解説をしてみたいと思います。

Hooksの4種類について

テストに必要な環境準備・後処理を共通化する仕組みです。

1. beforeAll

テストファイル内の最初に 1 回だけ実行

2. afterAll

テストファイル内の最後に 1 回だけ実行

3. beforeEach

各テストの前に毎回実行

4. afterEach

各テストの後に毎回実行

Hooks を使う目的

Hooksをキチンと使うと、毎回書く「準備コード」を減らしてテストを小さく保つことができるようになります。 ログイン・初期設定・DBクリアなど重い処理を共通化することで、かなりの作業軽減をすることができます。 テストごとに環境がブレないように安定化したり、異常系テストを行う前の“初期化状態”を一定にできるのもポイントです。 本質的にテストが読みやすくなるので、個別テストに集中しやすくなるでしょう。

beforeEach / afterEach が最も使われる理由

UIテストは、毎回cleanな状態から始めないと壊れやすいんです。 各テストが独立して動くことが重要になるんですよね。(順序依存禁止) 毎回、ログイン / ページ移動 / cookie 初期化を行うため、Hooksを使った環境構造を作っておくことが重要になります。

サンプルコード : Before Hooks

1. 毎テストごとにログインする

これをテンプレート化しておくことで、全テストがログイン状態からスタートすることができます。 test.beforeEach(async ({ page }) => { await page.goto("/login"); await page.getByLabel("メール").fill("user@example.com"); await page.getByLabel("パスワード").fill("password"); await page.getByRole("button", { name: "ログイン" }).click(); });

2. テストごとにフォーム入力の初期化を行う

クライアント側のキャッシュが原因のバグを回避することができます。 test.beforeEach(async ({ page }) => { await page.goto("/input"); await page.evaluate(() => localStorage.clear()); });

3. テストデータのシード投入(API 呼び出し)

DB の状態を毎回リセットし、「どのテストも同じ初期DB」 を保証できます。 REST API のテスト環境がある場合は強力に役立ちます。 test.beforeEach(async ({ request }) => { await request.post("/api/test/reset-db"); await request.post("/api/test/seed"); });

サンプルコード : After Hooks

1. 失敗テストのスクショ保存

「失敗したシナリオだけ自動保存」が超便利。 test.afterEach(async ({ page }, testInfo) => { if (testInfo.status !== testInfo.expectedStatus) { await page.screenshot({ path: `screenshots/${testInfo.title}.png` }); } });

2. テスト終了後にログアウトする

test.afterEach(async ({ page }) => { await page.getByRole("button", { name: "ログアウト" }).click(); });

3. 特定のモックサーバーを停止

test.afterAll(async () => { await stopMockServer(); });

After Hooks を使う場面のポイント

・テスト後に一時ファイルを削除 ・テストが失敗した場合にスクショ保存 ・モックサーバーを停止 ・セッション破棄など

あとがき

Hooksを使うと、1シナリオに集中しやすくなるイメージができたでしょうか? 毎回、ログイン、ログアウト処理を書いているようでは、効率化は程遠いです。 テストはできるだけ作業効率を上げて、作業コストを抑えることが非常に重要です。 そもそも、テストを行なって、問題がないことを理解するためと、問題がある場合に、元のモジュール修正を行う必要があるので、 テストは単なる通過点と考えたほうがいいかもですね。 でも、テスト専用のポジションや、会社なども存在することから、重要な作業であることは間違いないでしょう。 あくまで開発と同時にテストを行うスタイルの人は、効率のいいテスト業務をこなせるための効率化のためにHooksを使うといいと思います。

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ