센신로보틱스 개발부의 덩어리입니다.

아젠다

1. 엔드 투 엔드 (E2E) 테스트 비교
2.Cypress 중요한 관념
3.Cucumber 소개
4. 결론과 장점

엔드 투 엔드 (E2E) 테스트 비교

비교하는 방법

첫 번째 포인트 : 얼마나 많은 사람들이 사용하고 있습니다.
npm이나 github인지 확인

하나 도구를 도입할 때 얼마나 엔지니어를 사용하는 것도 중요합니다.
왜 그렇게 말하면, 즉, 만약, 문제가 있을 때 인터넷에서 해결 방법이 있을 가능성이 높습니다.

예를 들면, npm의 상황에 보면, Cypress, Selenium, Puppeteer가 인기군요.





그리고, 만약 툴은 오픈 소스라면, Github의 상황도 확인하는 것이 좋다고 생각합니다.

사이프레스 스타는 25.2K, TestCafe 스타는 8.6K
Cypress open issue는 1363 open, 5463 closed
TestCafe의 open issue는 494 open, 2790 closed

즉, Cypress는 더 인기가 있지만 TestCafe는 더 문제를 해결합니다.

두 번째 포인트: 전문 회사 분석

ThoughtWorks라는 회사는 정기적으로 기술 보고서 ​​"Technology Radar"를 발표합니다.
사이프레스는 두 번 들어갔다. TestCafe는 한 번 밖에 없다.

세 번째 포인트 : 기능 비교


품목
Cypress
TestCafe
셀레늄


환경 구축
쉬운
쉬운
어려운

브라우저
다양
다양
다양

역사
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

npm Trend

Cypress Github

TestCafe Github

thoughtworks radar