More than 3 years have passed since last update.

CypressでのE2Eテスト自動化で学んだ事

Last updated at 2021-05-05Posted at 2021-05-05

はじめに

E2Eテスト自動化でCypressを使った際に学んだ事を備忘録として残しておく。

DOM指定を行う際に、どうしても文字列で検索して指定したい場面も出てくる。
その際にcy.contains()コマンドは便利だが、これはcy.get('…').contains('hoge')のようにcy.get()コマンドの後に用いるようにする。
理由としては以下の2つ。

containsで文字列を検索してDOMを指定する際に、検索対象のDOM範囲を制限し、意図しない動きにならないようにするため
getではDOMレンダリングまで暗黙的な待機処理が行われるが、containsでは暗黙的な待機処理がないため、DOMレンダリング前に動いてしまい要素が見つからないというエラーが起きやすくなる

推奨	非推奨
cy.get('#id').contains('hoge')	cy.contains('hoge')

テストでは同じシナリオを異なるデータで実行したいという場面は多く、そんな時にはデータ駆動テストを実装する。
Cypressでもデータ駆動テストは実現でき、以下のように実装すればよい。

cypress 
├── fixtures 
│   └── hoge.json 
├── integration 
│   └── data-driven-test.js

data-driven-test.js

const datas = require('../fixtures/hoge')

datas.forEach(data => {
  before('', () => {
  })

  beforeEach('', () => {
  })

  it('', () => {
  })
})

手動テストの際には起きないが、Cypressでの自動テストではエラーが起きるという時には、以下のようにする事でそのエラーを無視する事ができる。

ignore-err.js

it('', () => {
  cy.on('uncaught:exception', (error) => {
    console.log(`${error.message}`);
    return false;
  })
})

自動テストにおいては、ページ遷移などの際に〇〇が表示されるまで待機させたいという事が出てくる。
SeleniumではImplicitWaitを使うと思うが、Cypressではcy.should()コマンドを用いて実現する。

js.implicit-wait.js

cy.get('#hoge')
  .should('have.text', hogehoge)

明示的にどれだけの時間を待機させるかを設定する事もでき、その場合以下のように書く。

js.implicit-wait-define-time.js

cy.get('#hoge', { timeout: 5000 })
  .should('have.text', hogehoge)

以下のようにある要素にクラスが含まれている場合には、というif文を書く事もできる。
※$el：jQuery.fn.initオブジェクト

sample.js

cy.get('#hoge').then($el => {

  // ある状態の時には〇〇を…という事ができる
  if ($el.className === 'selected') {
    // 何かのテスト
  }
})

以下にはCypressを使ってテストをする際に、「これどうやるんだろう」となった時にとても参考になるナレッジがまとまっている。