E2EテストツールのCypressをさわってみる

JavaScript

Cypressをさわりながら基本的な機能の紹介をしていきます。CypressはE2Eテストツールとして人気のツールです。ぜひ、基本的なコンセプトについて理解を深めてください。

動作確認バージョン

  • cypress: 13.8.1

Cypressのインストール

npmコマンドでcypressをインストールします。

# フォルダ作成
mkdir cypress-test
cd cypress-test

# npm初期化
npm init -y

# Cypressのインストール
npm install cypress --save-dev

補足：npm以外のコマンドでのインストール方法やシステム要件を確認したい場合は、 Installing Cypress を参照ください。

E2Eテストを作成する

では、CypressでE2Eテストを作成していきます。

Cypressの特徴としては、ブラウザでCypressのWebアプリを立ち上げでテスト作成やテスト実行をインタラクティブに実施できます。もちろん、コマンドラインからヘッドレスブラウザ（画面表示なし）で実行も可能です。

Cypress Appを起動する

npx cypress openコマンドでCypress Appを立ち上げます。

npx cypress open

補足：公式ドキュメントでも記載されていますが、package.jsonのscriptsに追加しておくと便利です。

{
  "scripts": {
    "cy:open": "cypress open"
  }
}

立ち上がった、Cypress Appのテスト種別で「E2E Testing」を選びます。すると、CypressでE2Eテストを実施するために必要な設定ファイルが作成されます。

次に、「Continue」ボタンを押します。すると、ブラウザを選択する画面が表示されます。 補足：Cypressは、Chrome、Microsoft Edge、Firefox、Electronなどのブラウザをサポートしています。この画面では、システムにインストールされているブラウザが表示されます。

今回は、「Chrome」を選択し、「Start E2E Testing in Chrome」ボタンを押します。すると、別ウインドウでChromeが立ち上がります。このウインドウ上で、Cypressのテストの実行やデバッグなどが実施できます。

テストを作成する

では、テストを作成していきます。https://demo.playwright.dev/todomvc/ に対して、TODOを追加するテストを作成してみます。

まずは、cypress/e2e/todo-mvc.spec.jsというファイルを作成します。

mkdir cypress/e2e
touch cypress/e2e/todo-mvc.spec.js

そして、cy.visitでTodoMVCの画面を開いてみます。Cypressでは自動で要素の表示を待ってくれるため、基本的にawaitなどを記載する必要はありません。

describe('TodoMVC', () => {
  it('should add a new todo item', () => {
    cy.visit('https://demo.playwright.dev/todomvc/');
  });
});

次に、インプットフィールドに、TODO項目を入力して、Enterキーを押すテストを書いてみます。getやfindで要素のclassやidやdata属性などを利用して要素を取得し、typeで入力、{enter}でEnterキーを押します。他にも、clickやcheckなどのアクションも用意されています。（参考: Interacting with Element）

describe('TodoMVC', () => {
  it('should add a new todo item', () => {
    cy.visit('https://demo.playwright.dev/todomvc/');

    cy.get('.new-todo').type('寝る前に歯を磨く{enter}');
  });
});

そして、アサーションとして、TODO項目が表示されているか確認します。Cypressでは、shouldでアサーションを実施しており、Chaiを使っています。

describe('TodoMVC', () => {
  it('should add a new todo item', () => {
    cy.visit('https://demo.playwright.dev/todomvc/');

    cy.get('.new-todo').type('寝る前に歯を磨く{enter}');

    cy.get('[data-testid="todo-title"]').contains('寝る前に歯を磨く').should('exist');
  });
});

補足：対象の要素の取得方法がわからない場合は、Cypressのウインドウの右側のパネルからマウス操作でCypressのコードを確認できます。

では、Cypress Appの上部のアイコンからテストを実行します。PASSすることが確認できます。

また、コマンドラインからnpx cypress runコマンドでヘッドレスでテストを実行することもできます。

$ npx cypress run

# ....

====================================================================================================

  (Run Finished)


       Spec                                              Tests  Passing  Failing  Pending  Skipped
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✔  todo-mvc.cy.js                           00:01        1        1        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✔  All specs passed!                        00:01        1        1        -        -        -

補足：コマンドラインからのテスト実行時には、ブラウザ指定や特定ファイルのみの実行などもできます。詳細は、Command Lineを参照ください。

より詳しい情報