CI統合
継続的インテグレーションでE2Eテストを実行します
「CI統合」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
E2EをCIで実行する理由
E2Eテストは、プッシュやプルリクエストのたびに自動実行すると最も価値を発揮します。継続的インテグレーション（CI）によってマージ前にリグレッションを検出できるため、壊れたログインフローが気づかれないまま本番環境に到達することを防げます。
E2Eの実行にCIが必要とするもの
CIジョブでは、依存関係のインストール、Playwrightブラウザーのインストール、Angularアプリのビルドまたは起動、そしてヘッドレスでのテスト実行を行う必要があります。CIマシンにはディスプレイがないため、テストはデフォルトでヘッドレスモードで実行されます。
CIでのブラウザーのインストール
ブラウザーはリポジトリにコミットしません。OSの依存関係を含め、Playwrightのインストーラーを使ってパイプライン内にインストールします。
npm ci
npx playwright install --with-depsPlaywrightによるアプリの起動
webServer設定を使うと、Playwrightがテスト前にアプリを起動し、テスト後に終了します。CIでは、常に新しいサーバーを起動するようにreuseExistingServer: falseを設定します。
// playwright.config.ts
export default {
webServer: {
command: 'ng serve --configuration production',
url: 'http://localhost:4200',
reuseExistingServer: !process.env.CI,
},
};GitHub Actionsのワークフロー
一般的なワークフローでは、コードをチェックアウトし、Nodeをセットアップして、依存関係とブラウザーをインストールした後、テストスイートを実行します。
# .github/workflows/e2e.yml
name: e2e
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: 20 }
- run: npm ci
- run: npx playwright install --with-deps
- run: npx playwright testヘッドレス実行とCIのフラグ
PlaywrightはCI環境変数によってCIを自動検出し、動作を調整します。失敗したテストを再試行し、test.onlyを禁止し、ワーカー数も慎重に増やします。再試行回数を明示的に設定することもできます。
export default {
retries: process.env.CI ? 2 : 0,
forbidOnly: !!process.env.CI,
};HTMLレポートの公開
PlaywrightはHTMLレポートを生成します。CIアーティファクトとしてアップロードしておけば、トレースやスクリーンショットを含め、実行後に失敗の詳細を確認できます。
- uses: actions/upload-artifact@v4
if: always()
with:
name: playwright-report
path: playwright-report/失敗時のトレース取得
トレースは最初の再試行時だけ記録するように設定します。これにより実行速度を保ちながら、デバッグに必要な失敗時の完全なリプレイを取得できます。
export default {
use: { trace: 'on-first-retry', screenshot: 'only-on-failure' },
};高速化のためのシャーディング
大規模なテストスイートは、--shardを使って複数のマシンに並列分割できます。各CIジョブが一部分を実行するため、全体の経過時間を短縮できます。
npx playwright test --shard=1/3
npx playwright test --shard=2/3
npx playwright test --shard=3/3CI高速化のためのキャッシュ
実行間でnode_modulesとPlaywrightのブラウザーバイナリをキャッシュし、インストールがビルド時間の大半を占めないようにします。ほとんどのCIプロバイダーでは、ロックファイルをキーにしたキャッシュアクションを利用できます。
ビルドを正しく失敗させる
いずれかのテストが失敗すると、Playwrightはゼロ以外の終了コードで終了します。これによりCIはジョブを失敗として扱い、マージをブロックします。|| trueで終了コードを無視しないでください。そうしないと、壊れたテストが気づかれないまま成功扱いになります。
クイックチェック
CIでブラウザーをインストールするのは何ですか？
まとめ
依存関係とブラウザー（playwright install --with-deps）をインストールし、webServerでアプリを起動して、CIに対応した再試行設定でヘッドレス実行することで、プッシュのたびにE2Eを実行します。HTMLレポートとトレースをアーティファクトとしてアップロードし、高速化のためにシャーディングを行い、ゼロ以外の終了コードで問題のあるマージをブロックします。
よくある質問
「CI統合」レッスンは無料ですか？
はい。「CI統合」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「CI統合」で何を学びますか？
継続的インテグレーションでE2Eテストを実行します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「CI統合」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。