React + PlaywrightによるE2Eテスト
1. E2Eテストとは
E2E（End-to-End）テストとは、実際のユーザー操作をブラウザ上で再現し、システム全体が期待通りに動作することを確認するテストです。
単体テストやコンポーネントテストとは異なり、
- 画面表示
- API通信
- 画面遷移
- データ更新
まで含めて確認します。
ユーザー
↓
React画面
↓
API
↓
DB
↓
React画面更新
2. ReactでE2Eテストする目的
Reactでは、
- 画面表示
- イベント処理
- React Router
- API通信
- 状態更新
が正しく連携することを確認します。
例えば
ログイン
↓
一覧表示
↓
登録
↓
更新
↓
削除
一連の流れを確認できます。
3. Playwrightとは
PlaywrightはMicrosoft製のブラウザ自動操作ツールです。
実際の
- Chrome
- Edge
- Firefox
- Safari(WebKit)
でテストできます。
特徴
- 高速
- 並列実行
- 自動待機(auto waiting)
- スクリーンショット
- 動画保存
- Trace Viewer
- APIテストも可能
4. テストの流れ
ブラウザ起動
↓
画面を開く
↓
ログイン
↓
ボタンを押す
↓
入力する
↓
API実行
↓
画面確認
↓
終了
例
await page.goto('/login');
await page.getByLabel('メールアドレス').fill('test@example.com');
await page.getByLabel('パスワード').fill('password');
await page.getByRole('button', { name: 'ログイン' }).click();
await expect(page).toHaveURL('/projects');
5. Reactでよく使うLocator
Role
getByRole()
await page.getByRole('button', {
name: '保存'
});
推奨。
Label
getByLabel()
フォーム入力向け。
await page.getByLabel('メールアドレス')
Text
getByText()
await page.getByText('保存しました')
Placeholder
getByPlaceholder()
TestId
getByTestId()
data-testid="save-button"
Reactでは複雑な画面でよく使われます。
6. よく使う操作
クリック
await page.getByRole('button').click();
入力
await locator.fill('abc');
選択
await locator.selectOption();
チェック
await locator.check();
アップロード
await locator.setInputFiles();
7. よく使う検証
表示確認
await expect(locator).toBeVisible();
非表示
await expect(locator).toBeHidden();
有効
await expect(locator).toBeEnabled();
URL
await expect(page).toHaveURL();
件数
await expect(locator).toHaveCount(5);
文字列
await expect(locator).toContainText();
8. APIとの連携確認
ReactではAPIが重要です。
ボタン押下
↓
POST
↓
DB更新
↓
一覧更新
確認例
追加
↓
一覧に表示される
削除
削除
↓
一覧から消える
9. E2Eで確認する代表的なシナリオ
- ログイン
- ログアウト
- CRUD（作成・参照・更新・削除）
- バリデーション
- エラー表示
- 権限制御
- ファイルアップロード
- ダウンロード
- 検索
- ソート
- ページング
- モーダル
- 通知（Snackbar）
- 画面遷移
- ブラウザ戻る
- レスポンシブ表示
10. Playwrightの便利機能
自動待機
await page.click();
要素が操作可能になるまで自動で待機します。
Trace Viewer
失敗時の操作履歴を確認できます。
npx playwright show-trace
スクリーンショット
await page.screenshot();
動画保存
失敗時の再現確認に役立ちます。
並列実行
複数ブラウザで同時実行できます。
11. React開発でのE2Eテストの考え方
E2Eテストは「すべてをテストする」のではなく、ユーザーにとって重要な操作を中心に自動化することが重要です。
特に以下のようなシナリオは優先度が高くなります。
- ユーザー登録・ログイン
- 主要な業務フロー
- 権限による画面や操作の違い
- エラー時の画面表示
- データの登録・更新・削除
一方で、細かな表示崩れやコンポーネント単体の挙動は、単体テストやコンポーネントテストで補完する方が、保守性と実行速度の面で効率的です。