프로그래머스 데브코스 99일차 with. TS 웹 풀스택

📚요약

지난 시간에 이어 selenium을 통해 E2E 테스트를 진행하는 방법과 해당 방법을 자동화하는 것까지 해보겠습니다.

 

📖웹 기반 문서 편집기 제작 프로젝트

📄Selenium

Selenium

📑Selenium Web Driver

브라우저 자동화 드라이버로 여러 브라우저들에 대한 라이브러리를 제공합니다.

 

📑Selenium IDE

상호작용을 녹화하고 재생해 테스트 자동화에 활용할 수 있습니다. Chorme의 extension으로 설치 및 이용 가능합니다.

 

📑Selenium Grid

분산 환경을 구성해 hub가 요청을 수신하고, 여러 node에 테스트 수행을 분배하고 결과를 수집합니다. Web Driver의 스크립트를 여러 테스트 머신에 병렬 적용을 통해 테스트를 빠르게 효율적으로 할 수 있습니다.

 

📄E2E 테스트

End to End test의 약자로 종단 간 테스트라고 합니다. 구현을 확인하는 테스트로 입력을 통해 올바른 출력이 나오는지 사용자 입장에서 테스트하는 것을 의미합니다. 해당 테스트를 통해 GUI를 포함하는 시스템에서 UI와 로직의 연결이 잘 되었는지, 동작은 문제없는지 확인할 수 있습니다. 단위 테스트에서는 확인할 수 없었던 사용자 관점에서 테스트를 진행합니다.

 

📄실습

📑Selenium IDE를 활용한 테스트 케이스

• 시나리오 기록
• Command-line runner를 통해 시나리오 재생 및 기초 단계 확인
• Pytest를 이용하는 코드 생성
• 자동화 테스트

🍯tip! 테스트는 어느 순간 잘 동작하지 않을 때가 있다. 타이밍이 틀어진 경우가 있는데, 예를 들어 렌더링이 되기 전에 해당 요소를 찾는다면 에러가 발생한다. 그렇기에 제공되는 타이밍이 맞출 수 있는 방법을 적절히 사용해야 한다.

 

📑E2E 테스트 케이스

🍯tip! 시나리오가 정확히 동작하는지 확인하기 위해서는 Assertion을 삽입해서 확인할 수 있다.

• 공통부분 공용화
• HTML 요소 선택 방식
• assertion 추가
• alert와 같은 상호작용 요소 처리

🍯tip! 공통적으로 테스트하는 부분은 다양한 브라우저에서도 사용할 수 있도록 따로 공용화하면 좋다.

 

📄E2E 테스트 자동화

📑Headless Browser

Headless Browser란 GUI가 없는 브라우저를 의미합니다. 브라우저의 동작을 포함하는 E2E 테스트에 적용합니다. 자세한 내용은 하단 링크를 통해 확인할 수 있습니다.

What is Headless Browser and Headless Browser Testing? | BrowserStack

Selenium IDE에서 Headless Browser를 사용하는 것은 간단한 옵션만 추가해서 사용이 가능합니다. 따라서 필요한 경우 옵션을 제거해서 화면을 볼 수 있습니다.

🍯tip! niginx web server reverse proxy를 활용하면 fe와 be를 same origin으로 만들 수 있다.

 

다음 시간에 계속...

 

출처 & 참고

이시윤 강사님의 강의

https://ko.wikipedia.org/wiki/XPath

https://developer.mozilla.org/ko/docs/Web/XPath