웹 기반 문서 편집기 제작 프로젝트
종단간 테스트 개발
테스트 케이스 개발
- 노트 목록 조회, 노트 선택하여 제목, 내용 확인
1. 로그인 상태에서 행할 테스트가 많으므로 로그인/로그아웃 기능은 코드 공용화한다.- 사용자 상호작용이 벌어지는 HTML 요소의 선택 기준을 명확히 한다.
- Assertion을 삽입하여 올바른 동작을 확인한다.
- 로그인이 실패하는 경우
Alert에 대한 assertion과 처리 방섭을 실습한다.
공통 기능을 메서드로 만든다.
로그인 로그아웃은 매 테스트에서 처음과 끝에 동작할 예정이므로 이것을 라이브러리화 한다.
=> Selenium IDE를 이용한 시나리오 녹화 절차 간소화에도 도움이 된다.
중간 요약 - 테스트 케이스 개발
- 로그인 로그아웃은 공용화
- HTML 요소 선택방식을 의도한 바에 따라 수정
- 적절한 assertion 추가
- Alert, popup 등 다양한 사용자 상호작용 요소들에 대한 처리
E2E 테스트 자동화
Headless browser를 이용한 테스트
- 테스트는 빈번히 일어날 일이라 이때마다 사용자 인터페이스 요소를 렌더링 하는것은 오버헤드가 크다.
Headless browser란?
GUI가 없는 브라우저로, 브라우저의 동작을 포함하는 종단간 테스트의 자동화에 이용한다.
Selenium Grid를 이용한 테스트 환경 구축
- 테스트 자동화에 직접 활용하기 보다는 개발단계에서 종단간 테스트 결고라르 눈과 손으로 확인 하는데 활용한다.
Docker Compose 를 이용한 테스트 환경
- frontend : Selenium에 의해 테스트 접속할때 에는 http://backend:3031이 되어야 한다.
- backend : Selenium에 의해 테스트 접속할때 에는 http://front:3000이 되어야 한다.
- Cross-site request에 의하여 전달되는 cookie는 SameStie : "none", Secure: true인 경우에만 받아들여진다. 하지만 우리 프로젝트는 그렇지 못하다
=> 해결안
- 같은 네트워크에 웹 서버를 reverse proxy로 함께 구동하여 FE와 BE가 single origin이 되게 한다.
- 환경 설정을 통하여 SameSite : "lax", Secure false로 쿠키를 설정한다.
