E2E Test?
E2E는 End to End 의 약자로 어플리케이션의 흐름을 처음부터 끝까지 테스트하는 것을 의미한다. API 연동도 테스트 항목에 포함되므로 일반적으로 목(Mock) 서버를 사용하지 않으며 최대한 실제 시스템을 사용하는 사용자 관점에서 시뮬레이션 한다.
Unit Test vs. E2E Test
Unit Test
- 주어진 함수, 클래스 또는 컴포저블에 제공된 입력 정보가 의도하는 출력 또는 side-effect를 생성하는지 확인
- 테스트가 빠르게 실행됨
- 정확한 문제 식별 가능
- 그러나, 단위 테스트를 통과했음에도 불구하고 전체 어플리케이션이 여전히 작동하지 않을 수 있음
- Tool: Jest
E2E Test
- 여러 페이지에 걸쳐 있는 기능을 확인하고, 프로덕션으로 빌드되는 Vue 앱처럼 실제 네트워크 요청
- 한 번에 많은 항목 테스트 가능
- 실행 속도가 느림 (최대 1시간 이상 걸릴 수 있음)
- 실패 원인을 정확히 찾아낼 수 없음
- 외부 서비스나 API에 의존하는 E2E 테스트는 어플리케이션 자체에는 문제가 없지만 서비스가 중단되어 실패할 수 있음
- Tool: Cypress, Nightwatch
참고
Vue > 테스트에서는 왜 테스트를 해야하고, 어떤 테스트 유형이 있는지 자세히 작성되어 있다.
E2E Test Tools
테스트를 위한 툴로는 Cypress, Nightwatch, Playwright, Puppeteer, Selenium 등이 있다. npm trends에 따르면 2023년 10월 기준으로 1년간 cypress가 가장 많이 다운로드 됐다.
일반적으로 Nightwatch와 Cypress를 가장 많이 사용한다.
공식 Vue 팀이 추천하는 E2E Test뿐만 아니라 컴포넌트 테스트도 지원하는 Cypress 를 적용해보자. (Chronium 브라우저와 Firefox만 지원)
Cypress 적용
npm install -D cypress
npm install -D eslint-plugin-cypress.eslintrc.js
extends: ['plugin:cypress/recommended']package.json
"scripts": {
"test": "cypress open",
},cypress 실행 시 아래와 같은 화면에서 continue 후 chrome 으로 실행
npm test
cypress 관련 폴더 생성 및 cypress UI
Cypress Studio
cypress를 사용하며 테스트 코드를 모두 작성할 수 있지만 cypress studio를 이용해 손쉽게 테스트 코드를 작성할 수 있다.
Cypress Studio 활성화
- cypress open > settings > Project settings
Project settings에서 확인해보면experimentalStudio라는 옵션이 있다. 현재는 disabled 상태로 활성화시켜보자.
- cypress.config.js 수정
experimentalStudio: true 를 cypress.config.js에 추가하면 cypress 창이 새로 열리게된다. 이후 Project settings를 보면 활성화 상태인 것을 확인할 수 있다.
Cypress Studio 사용
- example.studio.cy.js 파일 생성 후 수정
- 원하는 테스트 동작 입력
- 코드 확인
코드가 알아서 생성된다.
with CI/CD Tools
Cypress를 사용 시 CI/CD Tools 에서 자동으로 테스트할 수 있다. 현재 회사에서 사용하고 있는 Teamcity에서 script 내부에 cypress test 실행하는 코드를 작성한 다음 build 하게 되면 자동으로 테스트 가능하다. 이 때, cypress version이 특정돼있는 docker 선택해야한다.
npm install cypress
npm run test논의 사항
- mock 서버를 만들기보다는 실 서버에서 테스트해야한다.
=> test 서버는 어디로? - 전체를 테스트해야하므로 범위를 지정해야한다
