# E2E 테스트 도입와 Cypress

## E2E 테스트란? <a href="#e2e" id="e2e"></a>

* 단위(Unit) 테스트
* 통합(Integation) 테스트
* E2E(End to End) 테스트
* 회귀(Regression) 테스트
* 성능(Performance) 테스트
* 추가적인 테스트

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



## 계기

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



## Cypress 설치

#### Getting Started

cypress를 설치하는 방법을 간단하다([공식문서](https://docs.cypress.io/guides/getting-started/installing-cypress))

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



> Typescript & Eslint 추가 설정([공식문서](https://docs.cypress.io/guides/tooling/typescript-support#Install-TypeScript))

#### Eslint

```bash
$ 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 폴더 내부)`

```json
{
  "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");`

<figure><img src="https://2477703702-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0zNEVFEcc7Tv0qxrOi2Y%2Fuploads%2F3ByC7LiLD0tJAVJaY6so%2Ftest_ex1.png?alt=media&#x26;token=48de79da-7822-48ca-9eb2-8eec0c255402" alt=""><figcaption></figcaption></figure>



## 도입 결과

<figure><img src="https://2477703702-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0zNEVFEcc7Tv0qxrOi2Y%2Fuploads%2FYSZTKgO6CKfuuLlpBaLX%2Ftest_ex2.png?alt=media&#x26;token=261d70df-b078-4562-84d7-2786adc98bb8" alt=""><figcaption><p>BDD(given, when, then)를 사용해보았다</p></figcaption></figure>

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

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

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

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







## Reference

* [https://fe-developers.kakaoent.com/2023/230209-e2e/](https://fe-developers.kakaoent.com/2023/230209-e2e/)
* [https://www.cypress.io/](https://www.cypress.io/)
