[기술포스팅 원문] 레몬베이스 기술블로그 원문 바로가기

[기술포스팅 요약]

Playwright Visual Comparisons를 활용한 효율적 시각 테스트 운영기

도입 배경

• B2B SaaS 제품 고도화로 인해 사람 손의 UI 테스트 한계 도달
• 기존 레코딩 기반 테스트는 UI 변경에 민감해 자동화 효율 낮음
• 문제 대부분이 입력보다 출력(UI)에서 발생함을 인지하고 시각 테스트 도입

Playwright 시각 테스트 구조

• 사전 정의된 상태에서 페이지 스크린샷 저장
• 변경 후 동일 페이지 캡처 → 이미지 비교 → 변경 감지
• 의도된 변경은 스냅샷 업데이트, 아닌 경우 이슈로 확인

효율적인 테스트를 위해 인증 유틸, 스크린샷 대기 조건 등 코드 모듈화

트러블슈팅 사례

1. 환경 차이로 미세한 이미지 차이 발생 (가짜 실패)
   • Docker 컨테이너 내 동일 환경에서만 스크린샷 생성
2. 로딩 중 스크린샷 생성
   • 특정 문자열 표시 여부로 로딩 완료 여부 판단 → 대기 유틸리티 작성
3. 애니메이션 요소가 실패 유발
   • Lottie 숨김 처리 CSS 적용, timeout 대기, Soft Assertion 적용
4. 써드파티 iframe 등으로 인한 불필요한 변화 감지
   • iframe 숨김 처리 CSS 활용
5. 스크롤이 있는 페이지에서 하단 영역 누락
   • fullPage: true 옵션으로 전체 스크린샷 생성

마무리

• Visual Comparisons는 빠르고 간결하게 핵심 UI 상태를 검증할 수 있는 수단
• 완벽하진 않지만 버그 조기 발견 및 개발 안정성 향상에 큰 기여
• 앞으로도 테스트 관리 효율과 인프라 안정성 등 지속 개선 예정

이 게시글은 [GPT-4o model]를 통해 요약되었으며, 정보 공유 목적으로 게시되었습니다. 원문 게시물에 대한 책임이나 이해 관계가 없습니다. - 소프트웨어QA 포럼