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_URLproducts_url 로 변경하여 해결

로그인 매크로 방지 에러

❓ 궁금한 점

🎸 기타

미처 다 하지 못한 일, 다른 페어와 논의해야 할 일, 회고 등 기타사항을 서술합니다.

h2 단락으로 나눕니다.