E2Eテストの概要
エンドツーエンドテストの役割を理解します
「E2Eテストの概要」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
E2Eテストとは
エンドツーエンド（E2E）テストは、実際のユーザーと同じ方法でアプリケーションを操作します。実際のブラウザーでアプリを起動し、ページを移動し、ボタンをクリックし、フォームに入力して、画面に表示される内容を検証します。1つの単体だけでなく、スタック全体が連携して動作することを確認します。
テストピラミッド
健全なテストスイートには、高速な単体テストを多数、より少数の統合テストを用意し、低速ですが価値の高いE2Eテストは少数にします。E2Eテストは頂点に位置し、テスト1件あたりのカバレッジは最も高い一方、実行とメンテナンスのコストも最大です。
- Unit：単独での関数／コンポーネント
- Integration：複数の単体を組み合わせたもの
- E2E：実行中のアプリ全体
単体テストでは見逃すE2Eの検出対象
E2Eテストは、実際の要素が接続されたときにのみ見える問題を検出します。たとえば、ルーティングの不具合、API連携の破損、デプロイ後にDOMが存在しない問題、ボタンを隠すCSS、認証リダイレクトのループなどです。依存関係をモックした単体テストは通っても、実際のアプリが壊れていることがあります。
AngularとE2Eの歴史
以前のAngularにはE2E用のProtractorが同梱されていました。Protractorは非推奨となり、新規プロジェクトから削除されました。現在はAngular CLIでサードパーティ製のE2Eランナーを選択できます。最も人気のある選択肢はPlaywrightとCypressです。
Playwrightを使う理由
PlaywrightはMicrosoft製の、最新かつ高速なE2Eフレームワークです。Chromium、Firefox、WebKitを操作でき、要素を自動的に待機し、新しいブラウザーコンテキストでテストを分離し、優れたデバッグツールを備えています。このコースではPlaywrightを使用します。
AngularにPlaywrightを追加する
Playwrightは専用のインストーラーでセットアップできます。playwright.config.tsとサンプルテスト用フォルダーが作成されます。
npm init playwright@latest
# creates playwright.config.ts and tests/ with example specsE2Eテストの構成
E2Eテストはアプリを起動し、ユーザー操作を実行して、ページの状態を検証します。流れはarrange（移動）、act（操作）、assert（表示結果の検証）です。
import { test, expect } from '@playwright/test';
test('home shows title', async ({ page }) => {
await page.goto('/');
await expect(page.getByRole('heading')).toHaveText('Welcome');
});E2Eは実際のサーバーに対して実行する
E2Eでは、Angularアプリが実際に起動している必要があります。通常、設定でng serve（または本番ビルド）を起動し、baseURLとwebServerのエントリを使ってテストをそのURLに向けます。
// playwright.config.ts
export default {
use: { baseURL: 'http://localhost:4200' },
webServer: { command: 'ng serve', url: 'http://localhost:4200', reuseExistingServer: true },
};E2Eスイートは小規模かつ重要なものに保つ
E2Eテストは低速で不安定になることがあるため、ログイン、チェックアウト、主要な正常系など、重要なユーザージャーニーだけを対象にします。詳細なエッジケースは、より高速かつ信頼性の高い単体テストと統合テストに任せてください。
不安定さと決定性
E2Eで最大の課題は、テストが断続的に失敗する不安定さです。固定のsleepによる遅延は避け、Playwrightの自動待機アサーションを利用してください。テストデータを制御し、毎回既知の状態から実行を開始できるようにします。
E2Eとコンポーネントテストの違い
Angularのコンポーネントテスト（TestBed）は、合成された環境でコンポーネントを検証します。E2Eは、実際のブラウザーでデプロイ済みのアプリを検証します。両者は補完関係にあります。高速なロジック／DOMの検証にはTestBedを、製品全体が動作するという確信を得るにはE2Eを使用してください。
クイックチェック
E2Eと単体テストの違いは何でしょうか？
まとめ
E2Eテストは実際のブラウザーでアプリ全体を実行し、単体テストでは見逃す連携やルーティングの不具合を検出します。テストピラミッドの頂点に位置し、少数で低速ですが価値が高いテストです。現在のAngularプロジェクトではPlaywrightのようなランナーを使用し、サーバーを起動して重要なユーザージャーニーを操作します。
よくある質問
「E2Eテストの概要」レッスンは無料ですか？
はい。「E2Eテストの概要」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「E2Eテストの概要」で何を学びますか？
エンドツーエンドテストの役割を理解します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「E2Eテストの概要」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- E2Eテストの概要
- Playwrightテストの作成
- セレクターとアサーション
- CI統合