시각적 요소 테스트

박경준·2022년 1월 27일
0

세미나 + 스터디

목록 보기
1/1

mandao

우형측 설명 블로그

우아한형제들에서 사용하는 웹앱 빌더.

배달의민족, 비마트 등 우아한형제들 서비스에서는 매일 다양한 프로모션이 진행됩니다.쿠폰을 다운받거나 동영상을 시청하고 메뉴를 좌우로 스와이프하는 등 다양한 기능과 형태로 화면이 제작되고 있습니다.

지금까지는 디자인된 이미지를 잘라서 이어붙이고 쿠폰 다운로드 코드, 앱스킴 등의 연결 링크들을 직접 HTML 코드를 수정해가며 만들었습니다. 필요에 따라서는 프론트엔드 개발자가 직접 개발하기도 하죠.

코드를 복사하는 과정에서 실수가 발생할 수도 있고 동일한 작업을 베타와 운영 두 번에 걸쳐 진행하는 번거로움도 있었습니다. 또한 화면에 사용될 이미지와 배포될 결과물 파일도 직접 CDN 서버에 수동으로 올려야 했습니다.

이러한 문제를 해결하기 위한 솔루션.

만다오를 이용해 생성된 앱 페이지 약 400개를 일괄 테스트할 수 있는, 시각 테스트가 필요했음. 때문에 여기서는 렌더링 요소의 깨진 부분 뿐만 아니라 이미지 비교 테스트도 핵심 요소 중 하나이다.

Jest + Puppeteer + TS

테스트 프레임워크인 Jest + 유저 행동을 트리거할 수 있는 Puppeteer를 결합하여 사용.

Demo Code

https://github.com/blueStragglr/visual-regression-test-demo
각종 설정 관련 config와 test 시나리오가 들어가있음. 이미지 비교하는 예시코드도 포함.

profile
빠굥

0개의 댓글