feat: E2E 테스트

[ShinjungOh]

작업 내용

• E2E 테스트 #34

• CodeceptJS 설치 및 설정
• E2E 테스트 작성
  • 로그인, 로그아웃
  • 캘린더 보기, 일기 작성
  • 타임라인 보기
  • 스트레스 측정 및 삭제
• Custom Helpers 추가 - 로그인 로직, 스트레스 측정 테스트

화면 스크린샷 (optional)

• 테스트 실행 방법

npm run dev
npm run codeceptjs

참고 문서 (optional)

• TIL: CodeceptJS Custom Helpers 사용하기

리뷰 규칙

P1: 꼭/적극적 반영해 주세요 (Request changes)
P2: 웬만하면 반영해 주세요 (Comment)
P3: 반영해도 좋고 넘어가도 좋습니다 (Approve)

[bytrustu]

수고하셨습니다!
E2E 테스트까지 반영해보면서, 기능 구현한 내용을 빠르게 자동화해서 검증할 수 있겠어요.
2가지 개선 점이 있어 제안드려요. 😁

스트레스 측정 등록

스트레스 측정은 일주일에 한 번 추가된다고 알고 있어요.
그럼 테스트를 다시 실행할 때, 이미 추가된 데이터가 있으면 Fail로 발생할 것이라 예상됩니다.
한 번 측정하고, 삭제로 마무리하면 다음 테스트에서도 검증을 제대로 할 수 있을 것이라 생각합니다.

Element 선택

특정 대상을 선택하기 위해서, id, name을 직접 다 작성한 것으로 보입니다.
"특정 Element 내부의 n번째를 선택한다" 같은 조건이 있다면 어떻게 하면 될까요?
예를 들어, ul 내부에 li가 10개가 있는데, 2번째를 선택해야 한다면 어떻게 해 볼 수 있을지 고민하고 개선해보면 좋겠습니다.

[ShinjungOh]

수고하셨습니다! E2E 테스트까지 반영해보면서, 기능 구현한 내용을 빠르게 자동화해서 검증할 수 있겠어요. 2가지 개선 점이 있어 제안드려요. 😁

스트레스 측정 등록

스트레스 측정은 일주일에 한 번 추가된다고 알고 있어요. 그럼 테스트를 다시 실행할 때, 이미 추가된 데이터가 있으면 Fail로 발생할 것이라 예상됩니다. 한 번 측정하고, 삭제로 마무리하면 다음 테스트에서도 검증을 제대로 할 수 있을 것이라 생각합니다.

Element 선택

특정 대상을 선택하기 위해서, id, name을 직접 다 작성한 것으로 보입니다. "특정 Element 내부의 n번째를 선택한다" 같은 조건이 있다면 어떻게 하면 될까요? 예를 들어, ul 내부에 li가 10개가 있는데, 2번째를 선택해야 한다면 어떻게 해 볼 수 있을지 고민하고 개선해보면 좋겠습니다.

1. 스트레스 측정 테스트 후 기록을 삭제하는 로직을 추가했습니다. nth-child 의사 클래스를 사용해서 측정 기록 페이지의 첫 기록 요소를 삭제해서, 다음 번 E2E 테스트를 실행할 때 문제 없도록 개선했습니다.

2. 기존에 일일이 요소를 선택했던 스트레스 측정 로직을 for of 문을 사용해 개선했습니다. css 선택자를 이용한 요소 선택이 잘 되지 않았는데 해결했습니다 😇

3. 추가적으로 로직 중간에 wait를 넣어 테스트의 오류를 방지하도록 했습니다.

[bytrustu]

LGTM 👍