UI Test 정리 (for 포인트팀)
UI test 작성시 만들 파일
-
1) feature 파일
- 문의 결과 한국어 시나리오로 작성하라고 하심 (조건, 만약, 그리고, 그러면)
- 시나리오에 어노테이션 태그 사용
- (예시 : @point-slide-show-multiple-switch)
- 파일 naming 규칙 : 태그명.feature
- (예시 : point-slide-show-multiple-switch.feature)
- 모든 테스트를 통틀어 시나리오는 겹치면 안되고 유니크해야함.
- 전 모듈에서 쓰는 것은 뒤에 아무것도 안 붙임.
- (예시 : '조건 클립보드 권한을 갖는다.')
- point에서 쓰는 것은 뒤에 @point를 붙임.
- (예시 : '조건 호환 문서 Point_Test.pptx 업로드 후 문서에 입장한다. @point')
- 특정 폴더 내에서만 쓰는 것은 뒤에 @point-폴더명를 붙임.
- (예시 : '그리고 "F5" 키를 눌러 슬라이드 쇼를 재생한다. @point-slideshow')
- 해당 feature 파일에서만 쓰는 것은 뒤에 @태그명을 붙임.
- (예시 : '그러면 슬라이드에서 "빈 슬라이드"라는 텍스트가 보여진다. @point-slide-show-multiple-switch')

-
2) step-definition 파일
- 시나리오 구현하는 실제 테스트 코드 파일
- 파일 naming 규칙 : 태그명.steps.ts (예시 : point-slide-show-multiple-switch.steps.ts)
- Before : Chromium 창 열고 새로운 탭 염 (디폴트가 창 보이는 상태)
- After : 테스트 끝난후 문서종료하고 브라우저 닫음
- Before와 After는 hooks에서 한꺼번에 관리. Before시 태그명만 제대로 넣어주면 알아서 작동함.
- 사이를 Given, When, Then으로 분리하여 시나리오대로 테스트 코드 작성하면 됨!!
- common.steps.ts > 각 폴더 내에서 공통적으로 쓰이는 스텝 모아놓은 파일
- 자주 쓰이는 함수 (모듈별 새문서 생성, 도형 삽입하기, 요소 좌표 가져오기, 마우스로 클릭하기)들은 utils 폴더에 모여 있음. 필요한 경우 함수 생성
- 자주 쓰이는 요소 (리본의 삽입 버튼, 현재 슬라이드)들의 selector들은 constants 폴더의 common파일과 office_pptx 파일에 있음. 필요한 경우 변수 생성. selector는 각 시나리오에서 개별적으로 선언하지 말고 되도록 constants 폴더에 정의하기.
테스트 실행 전 준비
- 1) npm run serve로 클라이언트를 켜야 테스트 실행 가능
-
- ~/superoffice_client/ui_test로 이동
- 3) nvm use 18.10.0 를 사용하여 node 버전 변경 (해당 버전 없으면 설치)
- 4) chmod +x run_test.sh (파일에 실행권한 부여. 이 명령어는 한번만 실행시켜도 됨)
테스트 실행 방법
- npm run mytest 태그명 : 개별 테스트 실행
- (예시 : npm run mytest point-slide-show-multiple-switch)
- npm run test : 모든 시나리오 전부 실행. (오래 걸림)
- npm run report : 시나리오 실행결과를 html 페이지로 정리해서 보여줌 (npm run test 후 볼 수 있음)주의사항
