# Playwright Visual comparisons를 활용해, 효율적으로 더 안전한 개발 환경 만들기

> Clean Markdown view of GeekNews topic #19878. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=19878](https://news.hada.io/topic?id=19878)
- GeekNews Markdown: [https://news.hada.io/topic/19878.md](https://news.hada.io/topic/19878.md)
- Type: news
- Author: [studroid](https://news.hada.io/@studroid)
- Published: 2025-03-21T12:57:14+09:00
- Updated: 2025-03-21T12:57:14+09:00
- Original source: [blog.lemonbase.team](https://blog.lemonbase.team/playwright-visual-comparisons%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%B4-%ED%9A%A8%EC%9C%A8%EC%A0%81%EC%9C%BC%EB%A1%9C-%EB%8D%94-%EC%95%88%EC%A0%84%ED%95%9C-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EB%A7%8C%EB%93%A4%EA%B8%B0-464790b5bd98)
- Points: 12
- Comments: 0

## Summary

프론트엔드 테스트의 어려움을 해결하기 위해 Playwright Visual Comparisons를 도입하여 UI의 변화를 감지하는 시각적 회귀 테스트 방식을 적용하였습니다. 도입 과정에서 발생한 문제들, 예를 들어 미세한 차이로 인한 가짜 실패, 데이터 로딩 문제, 애니메이션 요소, 써드파티 플러그인, 스크롤 문제 등을 다양한 방법으로 해결하였고, 이를 통해 UI 변경 감지를 자동화하여 개발 생산성과 테스트 안정성을 향상시켰으며, 지속적인 개선과 테스트 환경 최적화가 필요합니다.

## Topic Body

#### 배경 및 문제 인식  
  
- 프론트엔드 테스트는 UI 변경과 예측 불가한 사용자 입력으로 인해 어려움이 많음.  
- 사람이 직접 검증하는 테스트는 한계가 있어 자동화된 테스트 도입을 고려.  
- 기존 레코딩 방식의 E2E 테스트(TestProject, Playwright)는 유지보수 비용이 높고, UI 변경에 취약.  
  
#### Playwright Visual Comparisons 도입  
  
- UI의 변화를 감지하는 시각적 회귀 테스트 방식 적용.  
- 기준 스크린샷을 저장하고, 코드 변경 후 비교하여 변경 사항을 검출.  
- 2-up, Swipe, Highlight, Onion Skin 방식으로 이미지 비교 가능.  
  
#### 도입 과정에서 겪은 주요 문제와 해결책  
  
1. **미세한 차이(0.01%)로 가짜 실패 발생**  
문제: 테스트 실행 환경(OS, 브라우저, 디스플레이 설정 등)에 따라 폰트 렌더링 차이 발생.  
해결: Docker 컨테이너를 활용해 모든 테스트를 동일한 환경에서 실행.  
  
2. **데이터 로딩 완료 후 스크린샷을 찍어야 하는 문제**  
문제: 페이지가 완전히 로딩되기 전에 스크린샷을 찍으면, 로딩 UI가 포함되는 경우 발생.  
해결: getByText + toBeVisible을 활용하는 유틸리티 함수로 특정 문자열이 나타날 때까지 대기.  
  
3. **애니메이션 요소로 인해 스크린샷 차이 발생**  
문제: CSS 애니메이션, Canvas, SVG, WebGL 요소가 매번 다른 타이밍에 캡처됨 & flaky test가 됨.  
해결: 애니메이션 비활성화를 위한 각종 처리 및 부가적인 테스트 실행 효율화  
  
4. **써드파티 플러그인(iframe 등)으로 인한 불필요한 변경 감지**  
문제: 고객 피드백, 설문조사, 챗봇 등의 써드파티 플러그인이 iframe을 통해 로딩되며 시각적 변화 생성.  
해결: 스크린샷 생성 시 공통 css 처리를 통해 iframe과 특정 플러그인 요소를 보이지 않게 처리  
  
5. **스크롤이 있는 페이지에서 하단 요소 검증 실패**  
문제: toHaveScreenshot은 기본적으로 현재 보이는 화면만 캡처하여, 스크롤 관련 처리 필요  
해결: fullPage: true 옵션을 적용해 전체 페이지 스크린샷을 캡처하도록 설정.  
	  
#### 결론  
- 시각적 회귀 테스트를 통해 UI 변경 감지를 효과적으로 자동화함.  
- 완벽한 솔루션은 아니지만, 개발 생산성과 테스트 안정성을 모두 향상시킴.  
- 지속적인 개선과 테스트 환경 최적화가 필요함.

## Comments



_No public comments on this page._