概要

Next.jsでのE2E（エンドツーエンド）テストは、アプリケーションのユーザーフローをシミュレートし、全体の動作確認を行う重要なプロセスです。特に、CypressやPlaywrightのようなツールを活用すると、実際のユーザーインタラクションに近い形で自動テストを行うことができ、手動での確認作業を大幅に削減できます。この記事では、CypressとPlaywrightを用いたNext.jsのE2Eテストの導入と実行方法を解説します。

CypressでのE2Eテスト

Cypressのセットアップ

1. インストール
   Next.jsプロジェクトにCypressを導入するには、まず以下のコマンドを実行します。

   npm install cypress
   

   その後、npx cypress openを実行すると、CypressのUIが起動し、テストを開始できます。

2. テストファイルの作成
   Cypressのテストファイルは通常、cypress/e2eディレクトリに保存します。例えば、以下のようなログイン画面のテストを行います。

   describe('ログイン画面のテスト', () => {
     it('初期表示で正しい項目が表示されているか', () => {
       cy.visit('http://localhost:3000/login');
       cy.get('[data-cy=userId]').should('have.value', '');
       cy.get('[data-cy=password]').should('have.value', '');
     });
   });
   

   このように、cy.get()で特定のHTML要素を取得し、should()でその要素の状態を確認します。

3. 実行方法
   テストファイルを作成後、CypressのUIからテストを選択して実行するか、npx cypress runを使ってコマンドラインから実行できます。Cypressはリアルタイムでテスト結果を表示し、ブラウザでの操作も可視化されます。

PlaywrightでのE2Eテスト

Playwrightのセットアップ

1. インストール
   Playwrightは、以下のコマンドでインストールします。

   npm install playwright
   

   インストール時に、複数のブラウザ（Chromium, Firefox, WebKit）が一緒にセットアップされます。

2. テストの作成
   Playwrightでは、以下のようにテストを作成します。たとえば、ページ遷移のテストを行う場合は、次のように記述します。

   import { test, expect } from '@playwright/test';
   test('トップページの遷移確認', async ({ page }) => {
     await page.goto('http://localhost:3000');
     await expect(page).toHaveURL('http://localhost:3000/');
   });
   

   Playwrightでは、page.goto()でURLにアクセスし、expectで特定の条件を検証します。

3. テストの実行
   npx playwright testを実行すると、E2Eテストが実行され、結果が表示されます。さらに、PlaywrightにはUIモードがあり、テスト実行中にリアルタイムで進捗や結果を確認できます。

Playwrightの特徴

Playwrightは、テスト対象の要素を識別するための柔軟なロケータ（例: getByRole, getByTestId）を提供しており、視覚的な確認も容易です。また、UIモードで実行結果をリアルタイムで確認でき、テスト失敗時のデバッグがしやすい点も大きな利点です。

結論

CypressとPlaywrightはいずれもNext.jsプロジェクトにおけるE2Eテストに優れたツールです。CypressはUIを通じて視覚的にテストを管理しやすく、Playwrightは高度なブラウザ操作やデバッグ機能を備えています。プロジェクトの規模や要件に応じて、これらのツールを使い分けると良いでしょう。