Cypress導入経緯と実例

5656 ワード
Cypress TechnologyRadar testcafe Selenium e2e Selenium テキストリンク

センシンロボティクス開発部の鄒です。

アジェンダ

1.エンドツーエンド (E2E) テスト比べる
2.Cypress重要な観念
3.Cucumber導入
4.結論とメリット

エンドツーエンド (E2E) テスト比べる

比べる方法

一番目ポイント：どのくらい人は使ってる
npmとかgithubとかに確認

一つツールを導入するときに、どのぐらいエンジニアを使っているのも大事です。
どうしてそう言うと、つまり、もし、問題がある時にネットで解決方法がある可能性が高いです。

例えば、npmの状況に見ると、Cypress、Selenium、Puppeteerが人気ですね。

あと、もしツールはオープンソースなら、Githubの状況も確認した方が良いと思います。

Cypressのstarは25.2K、TestCafeのstarは8.6K
Cypressのopen issueは1363 open, 5463 closed
TestCafeのopen issueは494 open, 2790 closed

つまり、Cypressもっと人気ですが、TestCafeはもっとissueを解決しています。

二番目ポイント：専門会社の分析

ThoughtWorksっていう会社は定期的に技術のレポート「Technology Radar」を発表します。
Cypressは二回入りました。TestCafeは一回しかない。

三番目ポイント：機能比べる

項目 Cypress TestCafe Selenium
環境構築 簡単 簡単 難しい
ブラウザ 多様 多様 多様
歴史 2015 2015 2004
原理 async async block wait

Cypress重要な観念

昔Seleniumを使った時にエレメントをローディングために、よくwait(秒数)を使った。でも、失敗したら、retryしなかった。
Cypressでは、4秒以内にretryしています。なので、特別なwait(秒数)はいらなくなった。
そして、秒数を増えるのも可能です。

cy.get('#email', {timeout: 15000})

Cucumber導入

Cucumberを導入するとテストケースは理解しやすくなります。

ディレクトリの構築

Cypressのディレクトリ

  • integration
    • login.spec.js

Cucumberのディレクトリ

  • integration
    • login.feature
    • login
      • login.js

コードの実例

Cypressの例

login.spec.js

context('ログイン画面', () => {
    beforeEach(() => {
      cy.visit(Cypress.env('sensyn_host') + 'login#/')
      cy.fixture('user.json').as('usersData')   
    })

    it('登録していないアカウントでログイン', () => {
      cy.get('@usersData').then(user => {
        cy.get('#email')
          .type(user.wrong_email).should('have.value', user.wrong_email)
        cy.get('#password')
          .type(user.wrong_password)
      })

      cy.get('.btn-default').click()
      cy.get('.alert-danger').should('contain', 'ログインに失敗しました。');
    })
  })

Cucumberの例

login.feature

Feature: アカウント
Description: ログイン、ログアウト機能

Background: ログイン画面に移行
  Given ログイン画面に移行
  Then ログイン画面になる

/* Case 1 */
Scenario: 登録していないアカウントでログイン
  Given 登録していないアカウントを入力
  When ログインボタンをクリック
  Then ログインエラーが表示される

login.js

import { Given, When, And, Then } from "cypress-cucumber-preprocessor/steps";

Given('ログイン画面に移行', () => {
    cy.visit(Cypress.env('sensyn_host') + 'login/')
})
Then(`ログイン画面になる`, () => {
  cy.url().should('eq', Cypress.env('sensyn_host') + 'login/')
})

Given(`登録していないアカウントを入力`, () => {
  cy.fixture('user.json').as('usersData')
  cy.get('@usersData').then(user => {
    cy.get('#email')
      .type(user.wrong_email).should('have.value', user.wrong_email)
    cy.get('#password')
      .type(user.wrong_password)
  })
})
When(`ログインボタンをクリック`, () => {
  cy.get('.btn-default').click()
})
Then(`ログインエラーが表示される`, () => {
  cy.get('.alert-danger').should('contain', 'ログインに失敗しました。');
})

結論とメリット

Cypressの導入はとても便利です。基本機能の品質は上がります。レコーディングのプラグインもあるので、開発時に使って早くなると思います。

TestCafeには開発IDE（有料）があって、レコーディング機能も使えるので、開発ははやくなるそうかもしれない。

結論としては、どちらても、リリースの品質が高くなると思います。

Ref