【Cypress】本格的なE2Eテストケースを作ってみよう

前回と前々回の記事では、Cypressのインストールから基本的なメソッドを紹介しました。

【JavaScript】CypressでE2Eテストを自動化しよう「仕様変更があるたびに一連のテストをしているが、次第に工数が膨れてきた...」 「今まで動いていた画面が突然フリーズした！」 「安心...

【Cypress】E2Eテストの基本的なテストケースを書いてみよう前回の記事ではCypressの導入方法について解説をしました。 今回は具体的なテストケースを書いていく方法や、Cypressで使えるメ...

第三回となる今回はCypressで本格的なテストケースを書いてみたいと思います。

Cypressでテストを書く前にテストケースを言語化する

いきなりコードレベルでテストを書いてもうまくいきません。

まずは実施すべきテストを言語化してみます。

ログイン画面でのテストを想定してみます。

異常系も含めて上記のようなテストケースを想定しました。

表形式でまとめても良いと思います。

さてそれでは実際にCypressでテストを書いてみましょう。

Cypressでテストケースを書いていく

App.spec.tsに以下を記述します。

まずはテストコードの全体像を見てみましょう。その後に詳しく解説を行います。

describe('ログイン処理のE2Eテスト', () => {
  beforeEach(() => {
    cy.visit('/login');
  });

  it('[異常系]メールアドレスの形式が異なる', () => {
    cy.get('input[type="email"]').first().focus().type('dummy').blur()
    cy.get('p').contains('メールアドレスの形式が正しくありません').should('be.visible')
  });

  it('[異常系]存在しないメールアドレス', () => {
    cy.get('input[type="email"]').first().focus().type('incorrect@example.com').blur()
    cy.get('input[type="password"]').first().focus().type('dummy1234').blur()
    cy.get('button').contains('ログイン').click()
    cy.get('p').contains('メールアドレスが正しくありません').should('be.visible')
  });

  it('[異常系]パスワードが異なる', () => {
    cy.get('input[type="email"]').first().focus().type('correct@example.com').blur()
    cy.get('input[type="password"]').first().focus().type('dummy1234').blur()
    cy.get('button').contains('ログイン').click()
    cy.get('p').contains('パスワードが正しくありません').should('be.visible')
  });

  it('[正常系]「次回から自動的にログイン」にチェックせずログイン', () => {
    cy.get('input[type="email"]').focus().type('correct@example.com').blur()
    cy.get('input[type="password"]').focus().type('correct1234').blur()
    cy.get('button').contains('ログイン').click()
    cy.get('h2').contains('Sandpit').should('be.visible')
  });
});

1つずつ見ていきましょう。
まず、describe()メソッドを使用して4つのテストケースをまとめています。
そして異常系3つ、正常系1つのテストケースを記述しました。

beforeEach()メソッドに共通処理を記述する

各テストケースを実行するたびに画面はリセットされます。
今回はすべてログイン画面でCypressに操作してほしいので、以下の記述でテストケースごとにログイン画面へ遷移させています。

beforeEach(() => {
  cy.visit('/login');
});

cy.get()で取得したinput要素にテキストを入力する

メールアドレスとパスワードを入力するinputはそれぞれ以下で取得できます。

cy.get('input[type="email"]').first()
cy.get('input[type="password"]').first()

first()をつけているのは、同じ要素を取得した場合1つ目を選択するという意味です。

さらにそれぞれのinputに値を入力したいときはfocus()とtype()とblur()を使います。

cy.get('input[type="email"]').first().focus().type('correct@example.com').blur()
cy.get('input[type="password"]').first().focus().type('dummy1234').blur()

button要素を取得してクリックする

cy.get()でbutton要素を取得する際、複数のボタンがある場合を想定して「ログイン」というラベルを持つものを取得しています。
また、click()メソッドでボタンのクリックを行います。

cy.get('button').contains('ログイン').click()

テストケースごとに結果を確認する

ログインボタンをクリックしたことで入力値に応じた結果が表示されます。
例えばメールアドレスの間違いであれば「メールアドレスが正しくありません」というp要素が現れます。
その確認方法は以下のとおりです。

cy.get('p').contains('メールアドレスが正しくありません').should('be.visible')

Cypressでテストコードを書くためのポイント

まとめると、私は以下の流れでCypressのテストコードを書いています。

1. 必要な一連の画面操作を書き出す
2. 要素を取得する条件を考える（必要であればtest-idをコンポーネントで持つようにする）
3. 結果の確認方法を考える
4. テストコードに落とし込んでいく

E2Eでやるべきなのか？ユニットテストの範囲ではないか？ということも考慮しています。

Cypressはまだ触り始めて間もないので、知見が貯まったらまた記事を書きますね。

ABOUT ME

稲垣 貴映

サーバーエンジニア兼Webフロントエンジニア。 新卒で独立系SIerに入社後、金融系システム基盤の構築・運用を3年間経験。 プログラミングを独学していた頃に、CEOの馬谷が開講していたSwiftスクールに通い、2019年9月に入社。 趣味はブラジル音楽の演奏。