【Cypress】E2Eテストの基本的なテストケースを書いてみよう

前回の記事ではCypressの導入方法について解説をしました。
今回は具体的なテストケースを書いていく方法や、Cypressで使えるメソッドの解説を行います。

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

まずは上記の記事を読んでいただき、Cypressの実行環境が整った状態という前提で話を進めます。

Cypressで初めてのテストを実行してみよう

前回の記事でCypressをインストールするとcypressフォルダが作成されたと思います。

cypressフォルダの中にintegrationフォルダがあるので、ここでApp.spec.jsというファイルを作成します。

App.spec.jsに以下の記述をしてみましょう。

describe('初めてのE2Eテスト', () => {
  it('初めてのシナリオ', () => {
    expect(true).to.equal(true)
  });
})

describeやらitやら出てきましたが気にせず書き進めてください。後ほど解説します。

package.jsonのscriptsに以下を追記します。

{
  // 省略
  "scripts": {
    // 省略
    "cy:run:chrome": "cypress run --headless --browser chrome"
  }
  // 省略
}

この状態で、まずローカルサーバーを起動してください。ローカルサーバーの起動方法はご自身の環境設定に依ります。

ローカルサーバーの起動が完了したら以下のコマンドを実行してみましょう。

npm run cy:run:chrome

Cypressが起動し、Chromeのブラウザを立ち上げてテストを実行し始めます。

上記したテストケースは「trueがtrueであること」を確認する、必ず正常系で終わるテストでした。

ここからは実際にE2Eテストでよく使うCypressのメソッドを紹介します。

Cypressで使用する基本メソッド

Cypressで使用する基本メソッド１｜describe()とit()

まずはテストケースの最初に使用したdescribeメソッドとitメソッドについてです。

describeメソッドは複数のテストケースをまとめる役割を持ちます。
そしてitメソッドは1つのテストケースを指します。

この区分は人によりけりかもしれませんが、私は1画面における操作を1describeにまとめて、その中でテストすべき項目ごとにitメソッドを使用します。

例えばログイン画面では以下のような一連のE2Eテストが考えられます。

1. 形式に誤りがあるメールアドレスとパスワードを入力してログインボタンを押下する。
   メールアドレスのフォーム下にエラーを表示する（異常系）
2. 存在しないメールアドレスとパスワードを入力してログインボタンを押下する。
   メールアドレスのフォーム下にエラーを表示する（異常系）
3. メールアドレスと誤ったパスワードを入力してログインボタンを押下する。
   パスワードのフォーム下にエラーを表示する（異常系）
4. 正しいメールアドレスとパスワードを入力してログインボタンを押下する。
   ログインが成功してトップページへ遷移したことを確認する（正常系）

①〜④を1describeにまとめて、それぞれitメソッド内に処理を書いていきます。

Cypressで使用する基本メソッド２｜cy.visit()

cy.visitメソッドはURL遷移を行うことができます。

例えばログイン画面でのテストなら以下のように使用します。

describe('ログイン画面のE2Eテスト', () => {
  it('ログイン画面に移動する', () => {
    cy.visit('/login');
  })
})

Cypressで使用する基本メソッド３｜cy.get()

画面への遷移方法がわかったので次は画面内のDOM要素を取得してみましょう。

cy.getメソッドは、タグ・id・クラスなどを指定してDOM要素を取得することができます。

テスト用にtest-idをコンポーネントに割り振ることもよくありますね。

describe('ログイン画面のE2Eテスト', () => {
  it('h1タグを取得する', () => {
    cy.visit('/login');
    cy.get('h1')
  })
})

Cypressで使用する基本メソッド４｜cy.should()

cy.getでDOM要素を取得できただけではテストとしてはほとんど意味がなく、取得したDOM要素に対して何らかの確認や操作を行います。

shouldメソッドを使うことで、その要素がどのような状態かを確認することができます。

describe('ログイン画面のE2Eテスト', () => {
  it('h1タグが存在することを確認する', () => {
    cy.visit('/login');
    cy.get('h1').should('be.visible')
  })
})

上記の例ではh1タグが表示されていることを確認しています。

Cypressで使用する基本メソッド５｜cy.click()

E2Eテストは実際のユーザー操作に近いことをするため、ボタンのクリックなどのイベントハンドラも多用します。

describe('ログイン画面のE2Eテスト', () => {
  it('ログインボタンを押下する', () => {
    cy.visit('/login');
    cy.get('button').contains('ログイン').click()
  })
})

上記例では「ログイン」というテキストを持つボタンを取得してクリックしています。

おまけ：CypressでTypeScriptを実行できるようにしよう

先ほどはApp.spec.jsというJavaScriptファイルでテストを実行しましたが、TypeScriptもサポートしています。

TypeScriptを使用する場合は、まずcypressフォルダ内にtsconfig.jsonを作成してください。

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "isolatedModules": false,
    "types": ["cypress"]
  },
  "include": ["./**/*.ts"]
}

さらに、開発環境のルートにあるtsconfig.jsonのincludeに以下を追加しましょう。（元々は”src”のみを記述していました）

"include": [
    "src",
    "node_modules/cypress/types/*.ts",
    "cypress/*/*.ts"
  ],
}

これでCypressでもTypeScriptの型サポートを受けられるようになります👏