Playwright toHaveScreenshot() 스크린샷 생성 및 시각 비교

UI 화면의 상태를 반복적으로 확인하려면 기준 화면과 현재 화면을 비교하는 방식이 유용합니다. Playwright Test는 await expect(page).toHaveScreenshot()을 사용해 스크린샷을 생성하고 시각적으로 비교합니다.(Playwright 공식 문서)

개요

Playwright Test의 시각 비교 기능은 toHaveScreenshot() API를 중심으로 동작합니다. 첫 번째 실행에서는 Playwright가 현재 페이지의 스크린샷을 생성해 기준 스크린샷으로 저장하고, 이후 실행에서는 저장된 기준과 비교를 수행합니다.(Playwright 공식 문서)

비교는 pixelmatch 라이브러리를 기반으로 수행되며, 시각 비교 동작을 조정하는 다양한 옵션을 전달할 수 있습니다.(Playwright 공식 문서) 이 구조는 페이지를 다시 촬영한 화면이 이전에 저장해 둔 기준과 다른지를 확인하는 데 활용됩니다.

적용 환경·전제조건

브라우저 렌더링은 호스트 OS, OS 버전, 시스템 설정, 하드웨어 구성, 전원 상태(배터리와 어댑터), 헤드리스 모드 등 다양한 요인에 따라 달라질 수 있습니다.(Playwright 공식 문서) 따라서 일관된 스크린샷을 얻으려면 기준 스크린샷을 생성한 환경과 비교 실행 환경을 일치시키는 것이 필요합니다.(Playwright 공식 문서) 테스트 대상 페이지에 동적이거나 변동적인 요소가 포함되어 스크린샷이 매번 달라질 수 있는 경우에는, 스크린샷 촬영 시점에 커스텀 스타일시트를 적용해 이런 요소를 필터링할 수 있습니다.(Playwright 공식 문서) 기준 생성과 비교 사이에 브라우저 버전, OS 설정, 헤드리스 모드 등이 바뀌면 같은 실행이라도 비교 결과가 달라질 수 있으므로, 두 실행의 환경을 통제하는 것이 전제조건입니다.

기술 절차·판단 근거

toHaveScreenshot()을 호출하면 Playwright가 현재 페이지의 스크린샷을 생성합니다. 흐름은 다음과 같습니다.

• 최초 실행에서는 생성된 스크린샷이 기준 스크린샷으로 저장됩니다.
• 이후 실행에서는 저장된 기준 스크린샷과 현재 화면을 비교합니다.(Playwright 공식 문서)

판단 근거를 보면, 비교가 pixelmatch 라이브러리를 통해 수행된다는 점과 비교 동작을 조정하는 옵션을 전달할 수 있다는 점이 중요합니다.(Playwright 공식 문서) 또한 스크린샷 촬영 시점에 커스텀 스타일시트를 페이지에 적용하면 동적이거나 변동적인 요소를 필터링할 수 있고, 이를 통해 스크린샷의 결정성(determinism)을 높일 수 있습니다.(Playwright 공식 문서)

• 최초 실행과 이후 실행을 구분하면 해당 실행이 기준을 생성하는 단계인지 기준과 비교하는 단계인지 파악할 수 있습니다.
• pixelmatch 옵션을 전달하면 비교 동작을 조정할 수 있습니다.
• 커스텀 스타일시트로 변동 요소를 제외하면 스크린샷이 매번 달라지는 요인을 줄일 수 있습니다.

운영상 영향

제공된 근거 범위에서 운영 측면에서 의미가 있는 사항은 다음과 같습니다.

• 기준 스크린샷을 생성한 환경과 비교 실행 환경이 달라지면, 동일한 실행이라도 재현되지 않는 결과가 나올 수 있고 반복 실패로 이어질 수 있습니다.(Playwright 공식 문서)
• 동적이거나 변동적인 요소가 스크린샷에 포함되면 실행마다 차이가 발생할 수 있으며, 커스텀 스타일시트로 이런 요소를 필터링하면 결정성을 높일 수 있습니다.(Playwright 공식 문서)
• pixelmatch 옵션을 전달하면 비교 동작을 조정할 수 있지만, 구체적인 파라미터와 효과는 현재 자료에서 확인되지 않아 적용 전 Playwright API 문서를 확인해야 합니다.(Playwright 공식 문서)

기준 스크린샷을 생성한 환경과 비교 실행 환경을 동일하게 유지해야 일관된 스크린샷을 얻을 수 있습니다.(Playwright 공식 문서)

탐지·대응

시각 비교를 다룰 때 제공된 근거가 가리키는 조처는 다음과 같습니다.

• 기준 스크린샷을 생성할 환경을 고정하고, 비교 실행도 동일한 OS, 브라우저 버전, 헤드리스 모드에서 수행합니다.(Playwright 공식 문서)
• 테스트 대상 페이지에서 매번 달라지는 요소가 확인되면, 촬영 시점에 커스텀 스타일시트를 적용해 해당 요소를 필터링합니다.(Playwright 공식 문서)
• pixelmatch 옵션을 전달하면 비교 동작을 수정할 수 있습니다.(Playwright 공식 문서)
• 최초 실행은 기준 스크린샷을 생성하고, 이후 실행은 기준 스크린샷과 비교합니다.(Playwright 공식 문서)

한계 및 참고자료

본 가이드의 범위는 Playwright 공식 문서의 시각 비교 페이지 구절에 기반하며, 다음과 같은 영역은 현재 자료로 확인되지 않아 한계로 명시합니다.

• 시각 비교 동작을 조정하는 옵션의 구체적 파라미터 목록과 각 옵션이 비교 결과에 미치는 작용
• 커스텀 스타일시트를 적용하는 구체적 방법(선택자 범위, 적용 시점, 제거 대상)
• GPU 가속, 폰트 렌더링, 서브픽셀 안티앨리어싱 등 하드웨어·OS 레벨 변동이 스크린샷 비교에 미치는 정량적 영향
• 멀티뷰포트 또는 반응형 UI 테스트 시 기준 스크린샷 관리 전략
• 다국어(i18n) 콘텐츠의 폰트 낙하(font fallback) 처리 방법
• 모바일 에뮬레이션 또는 디바이스 시뮬레이션 환경에서의 적용 조건
• 기준 스크린샷의 저장 형식, 파일 크기, 대규모 테스트 스위트에서의 성능 특성
• 테스트 실패 시 생성되는 차이 이미지(diff image)의 형식과 위치
• 브라우저 업데이트 후 기준 스크린샷 자동 재생성 또는 알림 기능의 존재 여부
• Playwright 버전별 시각 비교 동작 차이

위 영역은 Playwright API 문서 또는 추가 자료를 확인해야 하며, 본 가이드의 내용으로 단정할 수 없습니다.

참고자료

• Visual comparisons | Playwright

함께 읽으면 좋은 글

• KISA 스마트·자율운항선박 보안 문서 게시: PDF 본문 확인 전 판단의 한계
• CVE-2026-4357: Embed HTML5 Game 플러그인의 비인증 PHP 백도어 업로드 취약점 분석
• CVE-2026-75754: ASUS Control Center Enterprise의 인증 결함·SSRF·하드코딩 자격증명 연쇄 취약점

본 콘텐츠는 AI 기술로 작성된 분석 리포트를 포함하고 있습니다. 내용 중 사실과 다르거나 보완이 필요한 정보를 발견하셨으면 댓글을 통해 의견을 부탁드립니다. 여러분의 피드백은 더 정확한 보안 정보 공유에 큰 도움이 됩니다.