Cypressで簡単！E2Eテスト自動化

こんにちは、兼岡です！

CypressでE2E（エンドツーエンド）テストを行う機会があったので、ご紹介します！

環境

Apple M2（macOS sonoma）
Node：v20.11.1
Cypress：13.12.0

Cypress（サイプレス）とは

Cypress（サイプレス）は、WebアプリケーションのE2Eテストを簡単に実施できるJavaScriptベースのテストツールです。

特にSeleniumと比較されることが多いですが、Cypressはブラウザ内でのアプリケーション動作テストに特化しているので、ブラウザとの通信が速く、リアルタイムにテストの実行結果を確認することができる、非常に便利なツールです。

準備

インストール

まずは、Cypressをプロジェクトにインストールします。
以下のコマンドをプロジェクトのルートディレクトリで実行します。

npm install cypress --save-dev

Cypressをインストールした後、より簡単にCypressを実行できるように、package.jsonにCypressの実行コマンドを追加します。

package.jsonに以下のスクリプトを追加します。

{
  "scripts": {
    "cy:open": "cypress open",
    "cy:run": "cypress run"
  },
  "devDependencies": {
    "cypress": "^13.12.0"
  }
}

npm run cy:openを実行することでCypressのテストランナーをGUIで開くことができ、npm run cy:runを実行することでコマンドラインからテストを実行できるようになります。

起動

Cypressのテスト環境を起動するには、先ほどpackage.jsonに追加したスクリプトを使用します。
以下のコマンドを実行して、Cypressのテストランナーを起動します。

npm run cy:open

テストオプションの選択

Cypressでは、E2Eテストとコンポーネントテストの2種類のテストがサポートされています。
今回はE2Eテストを行うため、「E2E Testing」を選択します。

ブラウザの選択

Cypressのテストランナーを起動した後、テストを実行するブラウザを選択する画面が表示されます。
ここでは、実行環境にインストールされているブラウザと、Cypressに組み込まれているElectronブラウザから選択することができます。

今回は、より実際のユーザー環境に近いテストを想定して、Chromeブラウザを選択します。

Specファイルの作成

ブラウザを選択した後、テストケースを記述するSpecファイルの選択画面が表示されます。
初回起動時はSpecファイルが存在しないため、「Create new spec」を選択して新しいSpecファイルを作成します。

ファイル名を入力するモーダルが表示されたら、デフォルトのファイル名（spec.cy.js）を使用してファイルを作成します。

Specファイルが作成されました。

このサンプルのSpecファイルでは、以下のように単純にhttps://example.cypress.ioにアクセスするだけのテストが記述されています。

describe('template spec', () => {
  it('passes', () => {
    cy.visit('https://example.cypress.io')
  })
})

テストの実行

Specファイルが作成されたら、「Okay, run the spec」を選択してテストを実行します。

Cypressはブラウザを起動し、指定されたURLにアクセスします。
テストが成功すると、Cypressはテストがパスしたことを示す緑色のチェックマークを表示します。

CLIでのテスト実行

Cypressのテストをコマンドラインから実行することで、開発プロセスをさらに自動化し、CI/CDパイプラインに統合することが可能になります。
Cypressはヘッドレスモードでのテスト実行をサポートしており、GUIを必要としないため、バックグラウンドでのテスト実行に最適です。

ヘッドレスモードでテストを実行するには、以下のコマンドを使用します。

npm run cy:run

テストコードを書いてみる

それでは、実際にテストコードを書いてみます。
今回は弊社コーポレートサイトのお問い合わせフォームをテストしてみます。

基本設定

まず、cypress.config.jsファイルを修正して、テストの基本設定を行います。
この設定には、テスト対象のbaseUrl、ビデオ録画の有無、ビデオの圧縮設定などが含まれます。

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    baseUrl: "https://ma-vericks.com",
    video: true,
    videoCompression: true,
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

テストコードの作成

次に、お問い合わせフォームのテストを行うためのテストコードを作成します。

前準備 (`beforeEach`)

各テストの前に、お問い合わせページ (/contact) にアクセスします。

テストケース (`it`)

まず、お名前、ふりがな、会社名、メールアドレス、電話番号を入力し、ご用件（ホームページの制作依頼）を選択します。
次に、詳細メッセージを入力した後、クリアして空にします。
送信ボタンをクリックし、詳細メッセージが空の状態でエラーメッセージが表示されることを確認します。エラーメッセージは「必須項目です」というテキストを含む必要があります。
再び詳細メッセージを入力し、送信ボタンをクリックします。
最後に、確認画面が表示され、「CONFIRM」というテキストが含まれていることを確認します。

describe("お問合せフォーム", () => {
  beforeEach(() => {
    cy.visit("/contact");
  });

  it("お問合せフォームの必須項目チェック", () => {
    // お名前を入力する
    cy.get('input[name="name"]').type("山田太郎");
    // ふりがなを入力する
    cy.get('input[name="furigana"]').type("やまだたろう");
    // 会社名を入力する
    cy.get('input[name="company"]').type("株式会社マーベリックス");
    // メールアドレスを入力する
    cy.get('input[name="email"]').type("cypress@example.com");
    // 電話番号を入力する
    cy.get('input[name="tel"]').type("090-1234-5678");
    // ご用件を選択する（ホームページの制作依頼）
    cy.get('input[name="homepage"] + label').click();
    // 詳細を入力する
    cy.get('textarea[name="message"]').type("お問い合わせテストメッセージ");

    // 詳細をクリアする
    cy.get('textarea[name="message"]').clear();
    // 送信ボタンをクリックする
    cy.get('button[type="submit"]').click();
    // エラーメッセージが表示されることを確認する
    cy.get('textarea[name="message"] + div.error')
      .should("exist")
      .should("not.be.empty")
      .should("have.text", "必須項目です");

    // 詳細を入力する
    cy.get('textarea[name="message"]').type("お問い合わせテストメッセージ");
    // 送信ボタンをクリックする
    cy.get('button[type="submit"]').click();
    // 確認画面が表示されることを確認する
    cy.get("h1 span")
      .should("exist")
      .should("not.be.empty")
      .should("have.text", "CONFIRM");
  });
});

テストを実行すると、結果は cypress/e2e/videos/contact.cy.js.mp4 にビデオファイルとして保存されます。