E2Eテスト : Cypressを利用したend-to-endテストの始め方

kubasseのアバター

概要

Cypressは、モダンなWebアプリケーションのE2E(End-to-End)テストにおいて人気のあるツールです。

この記事では、Cypressを使ったE2Eテストの始め方について解説します。

1. Cypressのインストール

Cypressを利用するためには、まずCypressをインストールする必要があります。

以下の手順に従ってインストールを行いましょう。

  1. Node.jsのインストール: CypressはNode.js上で動作するため、まずNode.jsをインストールします。
  2. プロジェクトのディレクトリでターミナルを開き、以下のコマンドを実行します。
    $ npm install cypress –save-dev
  3. インストールが完了すると、node_modules/.binディレクトリにCypressの実行ファイルが生成されます。

2. テストファイルの作成

テストを実行するためには、Cypressが認識できるテストファイルを作成する必要があります。

以下の手順に従ってテストファイルを作成しましょう。

  1. プロジェクトのルートディレクトリにcypressディレクトリを作成します。
  2. cypress/integrationディレクトリ内に、テストファイル(例: sample.spec.js)を作成します。
  3. テストファイル内には、CypressのAPIを使用してテストステップを記述します。
  4. 例えば、以下のようなコードで要素のクリックやフォームの入力などを行うことができます。
describe('サンプルテスト', () => {
  it('特定の要素をクリックする', () => {
    cy.visit('https://example.com');
    cy.get('.button').click();
  });
});

3. テストの実行

テストを実行する前に、テスト対象のWebアプリケーションを起動しておく必要があります。

起動後、以下の手順に従ってテストを実行しましょう。

  1. ターミナルを開き、プロジェクトのルートディレクトリに移動します。
  2. 以下のコマンドを実行してCypressを起動します。コピー$ npx cypress open ```
  3. Cypressのテストランナーが起動するので、テストファイル(sample.spec.js)を選択します。
  4. テストランナー上でテストを実行すると、ブラウザが自動的に起動し、テストが進行します。
  5. テストの進行状況や結果はテストランナー上で確認することができます。

4. テストの拡張

Cypressは非常に強力なツールであり、さまざまな機能やカスタマイズオプションを提供しています。

以下にいくつかの拡張の方法を紹介します。

  • アサーション: cy.assert()を使用してテストの期待結果を検証できます。
  • モックサーバー: cy.route()を使用してモックサーバーを作成し、テスト中にネットワークリクエストを制御できます。
  • スクリーンショット: cy.screenshot()を使用して、テスト中にスクリーンショットを撮影できます。

Cypressの公式ドキュメントやコミュニティのリソースなどを参考に、さまざまな拡張機能を学び、テストをより効果的に作成することができます。

まとめ

以上が、Cypressを利用したE2Eテストの始め方についての解説でした。

Cypressは使いやすくパワフルなツールであり、テストの自動化に役立ちます。

ぜひこの記事を参考にして、Cypressを活用したE2Eテストを始めてみてください。

注意: テストの実行には適切なテスト環境が必要です。また、テスト対象のWebアプリケーションが正常に動作することを確認してからテストを行ってください。

kubasseのアバター