cypress를 이용한 e2e test 도입 #821
Conversation
- jest와 타입스크립트 충돌로 인해 cypress내부에 tsconfig.json 따로 생성 - cypress에서 type을 찾지 못해 플러그인 설치
- 사이트 접근 - 게시글 목록 필터링 + 정렬 - 랭킹 페이지 접근 및 인기게시글 랭킹에서 상세페이지로 이동 - 공지페이지 접근 및 공지 목록에서 공지 상세 페이지로 이동 - 사용 안되는 기능은 토스트 띄우기 - 스크롤 후 상단으로 이동하는 버튼 기능 확인 - 검색하기
|
⚡️ Lighthouse report!
|
frontend/cypress/.eslintrc.json
Outdated
| "extends": [ | ||
| "plugin:cypress/recommended" | ||
| ] | ||
| } |
There was a problem hiding this comment.
맨 끝 개행 한번 해주실 수 있나여? EOL이여
| experimentalStudio: true, | ||
|
|
||
| e2e: { | ||
| setupNodeEvents(on, config) { |
There was a problem hiding this comment.
해당 부분을 통해서 싸이프레스를 사용할 때 이벤트리스너를 붙일 수 있다고 합니다!
기본 설정으로 만들어진 부분인데, 추후 어떻게 사용할 지 몰라서 남겨두었습니다
gpt: 이 설정 객체는 엔드 투 엔드 테스트 (E2E)에 관련된 구성을 포함합니다. setupNodeEvents 함수를 포함하고 있는데, 여기에서 노드 이벤트 리스너를 설정할 수 있습니다. E2E 테스트를 실행하는 동안 특정 노드 이벤트에 대한 리스너를 추가하거나 수정할 수 있습니다.
| /* ==== End Cypress Studio ==== */ | ||
| }); | ||
|
|
||
| /* ==== Test Created with Cypress Studio ==== */ |
There was a problem hiding this comment.
사람이 직접 작성한게 아니고 스튜디오를 사용해서 만들다보니까 특정 요소가 있는지 없는지, 정렬되었는지 넣는 건 어렵더라구요.
아직은 실제 api를 사용해서 코드에 입력하지는 않았는데 추후 mock으로 데이터를 대체하면 해당 부분을 넣으려고 합니다.
그래서 스튜디오로 작성한건 나중에 다시 한번 살펴보려고 넣었습니다.
그리고 그 외에도 사람이 직접 작성한거랑 스튜디오에서 작성한건 구분되는 게 좋을 것 같아서요!
| @@ -0,0 +1,37 @@ | |||
| /// <reference types="cypress" /> | |||
| // *********************************************** | |||
There was a problem hiding this comment.
다 주석 처리되어 있는데 아예 불필요한 파일인가요??
There was a problem hiding this comment.
제가 옛날에 삭제했을 때 아마도 작동이 안되었던 걸로 기억하네용
frontend/cypress/tsconfig.json
Outdated
| @@ -0,0 +1,8 @@ | |||
| { | |||
| "compilerOptions": { | |||
| "target": "es5", | |||
There was a problem hiding this comment.
저희 src/tsconfig.json 의 target이 "es2021" 인데 통일하는거 어떠신가요?
| "check-bundle": "webpack --config webpack.analyzer.js" | ||
| "check-bundle": "webpack --config webpack.analyzer.js", | ||
| "e2e": "cypress run", | ||
| "e2e:open": "cypress open" |
| it('controlPostListFilteringOrSorting', function () { | ||
| /* ==== Generated with Cypress Studio ==== */ | ||
| cy.visit('http://localhost:3000/'); | ||
| cy.get(':nth-child(1) > .sc-gVpkOZ > .sc-fXmShK').click(); |
There was a problem hiding this comment.
음 저희가 styeld-compoents 여서 클래스명만 가지고는 어떤 컴포넌트인지 이해하기 쉽지 않은데, 혹시 주석 추가해주실 수 있나요? (아니면 it의 테스트 이름을 한글로 적어주실 수 있을지....?)
🔥 연관 이슈
close: #818
📝 작업 요약
⏰ 소요 시간
🔎 작업 상세 설명
🌟 논의 사항
나중에 로그인 및 mock api도 하면 좋을 것 같아요.
관련 자료
cypress jest 충돌 해결 방안 공식문서
cypress jest 충돌 해결 방안
cy type을 못찾는 문제