E2E 테스트 도입와 Cypress

E2E 테스트란?

• 단위(Unit) 테스트

• 통합(Integation) 테스트

• E2E(End to End) 테스트

• 회귀(Regression) 테스트

• 성능(Performance) 테스트

• 추가적인 테스트

테스트 방법들이 존재하는데 E2E테스트는 실제 사용자와 거의 동일한 환경에서 테스트를 자동으로 진행하여 사전에 방지할 수 있는 이점이 있다고 생각합니다.

계기

내부적으로 QA팀의 일을 같이 하게 되어서 단위/통합 테스트뿐만 아니라 다양한 사용자의 사용성 테스트를 진행해야했고 프리온보딩 FE 챌린지 그리고 Nextstep TDD 과정에서 E2E테스트를 실습해보게 되었고 과제 중에 해당 테스트를 통해 얻은 이점을 방향으로 잡고 이를 프로젝트에 적용시켜보기로 하였습니다.

Cypress 설치

Getting Started

cypress를 설치하는 방법을 간단하다(공식문서)

$ npm install cypress --save-dev
$ npx cypress open

Typescript & Eslint 추가 설정(공식문서)

Eslint

$ npm install -D eslint-plugin-cypress

eslintrc.js

module.exports = {
  root: true,
  env: { 'cypress/globals': true },
  extends: [
    'plugin:cypress/recommended',
  ],
  plugins: [],
  rules: {
    'cypress/no-assigning-return-values': 'error',
    'cypress/no-unnecessary-waiting': 'error',
    'cypress/assertion-before-screenshot': 'warn',
    'cypress/no-force': 'warn',
    'cypress/no-async-tests': 'error',
    'cypress/no-pause': 'error',
  },
};

Typescript

tsconfig.json(cypress 폴더 내부)

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "node"]
  },
  "include": ["**/*.ts"]
}

Cypress 환경 변수

.gitignore

cypress.env.json

cypress.env.json

{
   "API_KEY": "key"
}

가져오는 방법은 Cypress.env("API_KEY");

도입 결과

BDD(given, when, then)를 사용해보았다

E2E 테스트의 도입은 생각보다 간단하였고 제대로 관리하는 것이 더 큰 의미가 있을 것 같습니다.

현재까지는 E2E 테스트가 QA과정에서의 버그와 개발 과정에서의 Side-Effect를 현저히 줄여주고 있습니다.

위의 코드처럼 유저 행동의 시나리오를 작성하는 것이 숲을 보는 시야와 해당 페이지의 기능을 명확하게 설명해주는 것에 만족하였습니다.

마지막으로 다른 사람이 해당 코드를 수정할 때 안심하고 수정할 수 있어 만족하고 있습니다.

Reference

• https://fe-developers.kakaoent.com/2023/230209-e2e/

• https://www.cypress.io/