Cypress E2E Test

7 min readJun 28, 2020

E2E(End to End) 테스트는 개발 된 프로젝트가 브라우저 위에서 제대로 작동 하는지 사용자 관점에서 테스트 하는 방법이다.

E2E 테스트가 필요한 이유는 테스트 코드를 잘 작성하고 높은 coverage를 유지한다 하더라도 브라우저 상에서 사용자가 서비스를 이용할 때면 예상치 못한 문제가 종종 발생한다.

사용자 관점, 사용자의 실제 환경에서의 테스트가 필요하다. 이러한 문제를 방지하기 위해 QA를 진행하지만 배포가 필요할때 마다 같은 반복적인 사용자 동작을 테스트 하는 일은 소모적일 수 밖에 없다.

E2E 테스트는 프로젝트의 품질을 높이고 효율적인 테스트 경험과 사용자의 입장을 고려한 개발을 진행 할수 있도록 해준다.

Cypress

Cypress는 E2E 테스트 프레임워크이다. Mocha 기반으로 언어는 Javascript를 사용하고 내부적으로 queue를 써서 sync 처럼 동작하며 심플한 API 로 사용하기도 쉽다. Cypress가 브라우저에서 접근 하는 방식은 iframe 위에 웹을 띄워 Element로 접근해서 동작하게 한다. 지원하는 범위는 Chrome과 Electron 두가지이며 multi-tab은 지원하지 않는다.

Cypress 사용방법

설치방법

$ cd /your/project/path$ npm install cypress — save-dev

script 추가

{
  "scripts": {
    "e2e": "cypress run",
    "e2e:open": "cypress open"
  }
}

Cypress를 실행하기 위해서는 cypress.json 설정 파일이 필요하다.

npm run e2e:open 명령어를 실행하면 자동으로 cypress.json 파일과 cypress Directory가 생성된다.

// Cypress Directory- cypress
  - fixures
  - intergation // <= 테스트 코드 작성
  - plugins
  - suppert

Intergation Directory를 열어보면 *.spec.js 파일들을 볼 수 있는데, 테스트 코드를 작성 방법을 알려 준다.

// cypress.json{}

cypress.json 파일에는 테스트에 필요한 옵션 설정이 가능하다.

Cypress Test Example

root/cypress/intergation/[name].spec.js// ex) action.spec.js

위 경로로 테스트에 필요한 파일을 만들어보자.

// cypress.json{
  "baseUrl": "https://www.cypress.io"
}

cypress.json 파일에 테스트에 필요한 URL을 추가해 준다.

미리 만들어둔 [name].spec.js 파일에 테스트 코드를 작성해 보자.

// ex) action.spec.js describe('Action Test', () => { // 테스트 설명
  it('Click Header Menu', () => { // 테스트 제목    // Test code ...
    cy.visit('/'); // cypress.json > baseUrl 다음 방문할 경로  })
})

npm run e2e:open 실행해보자.

위와 같은 화면이 나온다면 문제 없이 실행 준비가 된 것이다. Intergration Tests에서 action.spec.js를 클릭 하면 테스트가 실행된다.

위와 같이 나온다면 성공이다.

테스트 시나리오

Cypress 홈페이지에 방문해서 헤더 메뉴를 순차적으로 클릭 해보는 테스트 코드는 아래와 같다.

// action.spec.jsdescribe('Action Test', () => {
  it('Click Header Menu', () => {
    cy.visit('/');
    cy.wait(1000); 
    cy.get('.styled__MenuWrapper-sc-16oj5lj-1 > :nth-child(1) > 
       :nth-child(1) > .Link-sc-5cc5in-0').click()
    cy.wait(1000);
    cy.get('.styled__MenuWrapper-sc-16oj5lj-1 > :nth-child(1) > 
       :nth-child(2) > .Link-sc-5cc5in-0').click()
    cy.wait(1000);
    cy.get('.styled__MenuWrapper-sc-16oj5lj-1 > :nth-child(1) > 
       :nth-child(3) > .Link-sc-5cc5in-0').click()
    cy.wait(1000);
  })
})

cy.wait(time) 실행되는 모습을 천천히 보기위해 추가한 코드이므로 실제 프로젝트에서 반영할 때는 제거 한다.

cy.get(selector) 이벤트를 주입하고자 하는 위치를 가져온다. selector를 가져오는 방법은 아래 이미지를 참고하자.

selector 아이콘 클릭

영역의 selector를 가져올 수 있는 영역이 나타난다.

위 아이콘을 클릭 하고 이벤트를 주입하고자 하는 영역을 웹사이트에서 선택한다.

선택 영역의 cy.get(selector) 코드를 카피 할 수 있도록 나타난다.

마지막으로 코드를 copy 해서 action.spec.js에 추가 해서 주입하고자 하는 이벤트를 더해주면 된다.

이제 위에 작성되어 있던 코드를 실행해 보자.

왼쪽 영역에서 실행 로그가 잘 출력되고 오른쪽 영역에서 실제로 실행되는 화면을 볼 수 있다면 성공이다. 코드에 문제가 있거나 에러가 발생한다면 왼쪽 영역에서 문제가 발생하는 로그를 확인 할 수 있다.

모든 영역에 대해서 테스트 코드를 작성할 수 있다면 이상적 이겠지만 프로젝트를 진행하다보면 여유있는 개발 일정은 잘 찾아오지 않기에 프론트엔드 파트에서 하나의 테스트를 선택해야 한다면 E2E 테스트를 선택해도 좋겠다. E2E 테스트를 통과 한다면 사용자에게 제공하게 될 서비스는 동작 한다는 것이고 , 실패 한다면 실제 사용자가 서비스 사용이 불가하다는 의미로 큰 문제가 될 수 있다.

지원하는 브라우저가 제한적이지만 빠르고 간단하게 코드를 작성하고 테스트 할 수 있도록 도와주기 때문에 Cypress를 사용해 보는 것은 좋은 경험이 될 수 있을것 같다.

Cypress E2E Test

Cypress

Cypress 사용방법

Cypress Test Example

Written by MNIII