E2E 테스트(Cypress) - boostcampwm-2022/web33-Mildo GitHub Wiki
✂️ 분배된 이슈
- cypress로 테스트
🚩 구현 목표
- cypress로 E2E 테스트를 진행한다.
🍀 세부 목표
- cypress 학습
- 시나리오 작성
- 테스트 실행
🖥️ 구현 내용
E2E 테스트를 진행하는 이유
- 우리가 생각하는 의도대로 동작하지 않는 경우를 알기 위해
- 이후 리팩토링을 하거나 기능을 추가했을 때 기존 기능이 제대로 동작하는지 확인하기 위해
- 오류 없이 안정적으로 서비스를 운영하기 위해
- 일관적인 테스트를 할 수 있도록 자동화하기 위해
시나리오
- 마커 렌더링이 잘 되는지 → 윤우
- 지도에 마커가 띄워진다.
- 마커를 클릭하면 마커의 이미지 크기가 커진다.
- 마커를 클릭하면 모달창이 띄워진다.
- 모달창 상단 아이콘을 클릭하면 2단계 모달창이 띄워진다.
- 다시 클릭하면 2단계 모달창이 닫힌다.
- 지도를 클릭하면 모달창이 닫힌다.
- 필터링 버튼 출력되는지 → 현정
- ✅ 검색 잘 되는지
- 검색어를 입력하면 연관 검색창이 띄워진다.
- 연관검색어가 있으면 해당 검색어를 포함한 지역들을 출력한다.
- 연관검색어가 없으면 ‘검색 결과가 주요 50곳에 포함되지 않습니다.’를 출력한다.
- 검색어를 입력하면 연관 검색창이 띄워진다.
- 로그인 → 상준
- 로그인 하지 않았을 경우 로그인 모달창이 띄워진다.
- 네이버로 로그인하기 버튼을 누르면 네이버 로그인 페이지로 이동한다.
- 네이버 아이디와 비밀번호를 입력하고 네이버 로그인하면 필수 제공 항목 동의 페이지로 이동한다.
- 필수 제공 항목 동의를 체크하고 동의하기를 클릭하면 다시 메인페이지로 돌아온다.
- 마이 버튼을 클릭하면 사이드바가 띄워진다.
- 북마크 리스트가 띄워진다.
- 로그아웃 버튼이 출력된다.
- 북마크 → 현정
- 모달창에서 북마크 추가/삭제가 가능하다.
- 로그인이 되어있는 상태에서 마커를 클릭한다.
- 2곳의 장소를 북마크 한다.
- 사이드바에서 북마크 리스트를 확인한다.
- 마이 버튼을 누른다.
- 사이드바에 2곳의 장소가 존재한다.
- 2곳 중 1곳의 장소를 지운다.
- 모달창에서 북마크 추가/삭제가 가능하다.
📖 학습 내용
🩺 의사결정
🚧 Trouble Shooting
Cypress env 에러
// cypress.config.ts
import { defineConfig } from 'cypress';
export default defineConfig({
e2e: {
setupNodeEvents(on, config) {
// implement node event listeners here
}
},
env: {
WEBSITE_URL: 'https://www.mildo.live'
}
});
// cypress/e2e/mildo.cy.js
cy.visit(Cypress.env('WEBSITE_URL')).wait(7000);
- env 상수 이름을 대문자로 했더니 오류 발생 → 공식문서를 다시 보니 대문자도 되는 것 같아 보임
WEBSITE_URL
을products_url
로 변경하여 해결
로그인 매크로 방지 에러
❓ 궁금한 점
🎸 기타
미처 다 하지 못한 일, 다른 페어와 논의해야 할 일, 회고 등 기타사항을 서술합니다.
h2 단락으로 나눕니다.