この記事は「［入門］Webフロントエンド E2E テスト」を読んで学んだことを書いた記事になります。
前提
私自身、これまでテストを書いた経験はほぼゼロ（バックエンドエンジニアの手助けがあってRSpecを書いたくらい）
それどころか「単体テストって具体的に何を指すの？」というレベルからのスタートでした。ですが、勉強会などでテストの重要性を耳にするたび、「知識として知っておかなければならない」という強い必要性を感じるようになりました。
E2Eテストって？
E2E(End-to-End)テストは、「ユーザーが実際にアプリケーションを使う流れを、最初から最後まで通しで確認するテスト」のことです。
実際に人間が確認するにはステージング環境などでWebアプリケーションを実際に使用の確認をしなければいけませんが、E2Eテストはプログラムが「自動」で使用の確認をしてくれます。
テストツールのカテゴリ
E2Eテストのカテゴリ大きく分けて以下の4つ。
-
ロケーター（ページ内の要素の特定）
- page.locator('button') // ボタン要素を探す
- page.locator('#login') // id="login"の要素
- page.locator('text=送信') // "送信"というテキストを含む要素
-
ナビゲーション（ページ遷移、ページ情報の返却）
- await page.goto('https://example.com') // ページに移動
- await page.goBack() // 戻る
- await page.reload() // リロード
-
アクション（ユーザー操作のシミュレート）
- await page.click('button') // クリック
- await page.fill('input', 'テキスト') // 入力
- await page.selectOption('select', '選択肢') // 選択
- await page.check('checkbox') // チェック
-
マッチャー（選択された要素の状態が期待と一致しているかテスト）
- await expect(page.locator('h1')).toBeVisible() // 表示されているか
- await expect(page.locator('input')).toHaveValue('値') // 値を持つか
- await expect(page).toHaveURL(/login/) // URLが一致するか
- await expect(page.locator('.error')).toHaveText('エラー') // テキストが一致するか
テスティングトロフィー
Playwrightのカテゴリを見る限り、様々な要素のテストを実行できる事が分かります。
ボタンのクリック、フォーム入力、ページ遷移、さらにはネットワークの監視まで、ブラウザ上のあらゆる挙動を自動化できる万能なツールです。
しかし、「できること」をすべてPlaywright（E2Eテスト）で実行しようとすると、テストの実行時間は増大し、メンテナンスの負荷も重くなってしまいます。
そこで指針となるのが、Kent C. Dodds氏が提唱した「テスティングトロフィー（Testing Trophy）」という考え方です。
テスティングトロフィーでは、テストの信頼性とコストのバランスを重視し、中央の「Integration（結合テスト）」を最も厚くすることを推奨しています。
感想
Playwrightの導入から簡単なハンズオンに始まり、運用方法、Playwrightに限らない「ソフトウェアテストとは何なのか？」といった事も書かれています。
テストコードの全くの初心者でしたが、これを機に単体テストなどもう少し深堀りして学習を続けていきたいと思いました。
関連記事