Cypress E2E 테스트 도입

Joseph·2024년 11월 4일

회사 서비스가 안정화되어감에 따라, 테스트를 도입할 필요성을 느꼈다.

추가적인 유지보수가 늘어나면서 기존에 정상적인 로직들이 영향을 받는 일들이 늘어나고 있기 때문이다.

어떤 테스트 tool을 사용하는 것이 좋을지 조사가 필요했다.

jest는 전통적인 느낌이라면 cypress는 신흥강자 느낌이 들었다. (사용은 제대로 해본적이 없지만)

cypress는 e2e 테스트에 적합하고, jest는 유닛 테스트에 적합하다.

때문에 이미 회사 서비스가 배포된 이상 e2e테스트가 더 적합하다고 느껴 cypress를 도입해보기로 하였다.

cypress를 설치한 후, cypress:open 명령어로 실행해보니 cypress 테스트가 실행된 브라우저가 열렸다.

baseUrl을 설정하면 해당 환경에서 테스트가 가능했는데
테스트 환경설정부터 쉽지 않았던 jest에 비해 매우 쉽고 편리하다고 느꼈다.

github actions + husky 등을 사용하여 배포할 때나 주말 등에 테스트를 자동으로 시켜 결과를 확인할 수 있음 -> slack 등에 알림 가능
테스트가 실패하면, 어떤 부분에서 실패했는지 스크린샷이 자동으로 저장되어 추후 쉽게 확인 가능
테스트를 video로 저장하여 각 테스트를 스냅샷으로 확인 가능
테스트 실패시 몇번 재시도할지도 설정 가능

각 페이지별 테스트를 도입하면서 커맨드에 익숙해지고 있다.

cy.visit()
페이지를 로드하고 URL로 이동할 때 사용합니다.
```
cy.visit('/login'); // '/login' 페이지로 이동
```
cy.get()
DOM 요소를 선택하는 가장 기본적인 명령어로, CSS 선택자를 사용해 요소를 찾습니다.
```
cy.get('[data-test="login-button"]').click(); // 로그인 버튼을 클릭
```

cy.contains()
특정 텍스트를 포함하는 요소를 찾을 때 사용합니다.

cy.contains('로그인').click(); // '로그인'이라는 텍스트를 포함하는 요소 클릭

cy.type()
입력 필드에 텍스트를 입력할 때 사용합니다.

cy.get('[data-test="email-input"]').type('example@example.com'); // 이메일 입력

cy.click()
선택된 요소를 클릭할 때 사용합니다.

cy.get('[data-test="submit-button"]').click(); // 제출 버튼 클릭

cy.select()
select 요소에서 옵션을 선택할 때 사용합니다. value 속성이나 옵션의 텍스트로 선택할 수 있습니다.
```
cy.get('select').select('option1'); // 'option1' 값을 가진 옵션 선택
```
cy.request()
API 호출을 테스트하거나, 로그인 API 호출 후 세션을 설정할 때 유용합니다.
```
cy.request('POST', '/api/login', { username: 'user', password: 'pass' });
```
cy.url()
현재 URL을 가져와서 페이지 전환이나 리디렉션을 확인할 때 사용합니다.
```
cy.url().should('include', '/dashboard'); // URL에 '/dashboard'가 포함되었는지 확인
```
cy.wait()
특정 시간 동안 테스트를 기다리거나, API 호출의 응답을 기다릴 때 사용합니다.
```
cy.wait(500); // 500ms 대기

cy.wait('@getData'); // 'getData' 요청이 완료될 때까지 기다림
```
cy.on()
window:alert, window:confirm 등 브라우저 이벤트를 가로챌 때 사용합니다. 예를 들어, confirm 창에서 "확인"을 선택하도록 설정할 수 있습니다.
```
cy.on('window', () => true); // confirm 창에서 '확인'을 자동으로 선택
```

Cypress에서 테스트의 결과가 예상한 값과 일치하는지 검증하는 방법을 말한다.

예를들어 어느 제목의 텍스트가 특정 문자열과 일치하는지 확인하는데 이용된다.

Cypress Assertion은 비동기적으로 동작하며, 테스트 대상이 조건을 만족할 때까지 기다린다.
만약 조건을 만족하지 못하면, Cypress는 에러를 발생시키게 된다.

또한 체이닝(chaining)역시 가능하며, and나 or를 사용하여 여러 개의 조건을 연결할 수 있다.

안녕하세요 프론트와 백 둘다 관심있는 웹개발자 이창무입니다.