Diffing
페이지 상태를 비교하여 변경 사항을 탐지합니다 — 접근성 트리 스냅샷을 통해 구조적으로, 픽셀 비교를 통해 시각적으로, 또는 두 개의 서로 다른 URL 사이에서 비교할 수 있습니다.
명령어
| 명령어 | 설명 |
|---|---|
diff snapshot | 현재 스냅샷을 세션 내 마지막 스냅샷과 비교합니다 |
diff snapshot --baseline <file> | 저장된 파일과 현재 스냅샷을 비교합니다 |
diff screenshot --baseline <file> | 기준 이미지와 픽셀 단위로 시각적 차이를 비교합니다 |
diff url <url1> <url2> | 두 페이지를 비교합니다 (스냅샷 + 선택적 스크린샷 포함) |
스냅샷 비교
선 단위 텍스트 비교를 사용하여 두 시점 간의 접근성 트리를 비교합니다.
# 현재 세션에서 이전에 캡처한 스냅샷과 비교
agent-browser diff snapshot
# 저장된 기준 파일과 비교
agent-browser diff snapshot --baseline before.txt
# 페이지의 특정 부분만 범위 지정
agent-browser diff snapshot --selector "#main" --compact--baseline 없이 실행하면, 명령은 자동으로 현재 세션에서 가장 최근에 캡처한 스냅샷과 비교합니다. 이는 작업이 예상대로 작동했는지 확인하는 에이전트의 주요 활용 사례입니다.
옵션
| 플래그 | 설명 |
|---|---|
-b, --baseline <file> | 비교할 저장된 스냅샷 파일 경로 |
-s, --selector <sel> | 현재 스냅샷의 범위를 CSS 선택자 또는 @ref로 제한합니다 |
-c, --compact | 단순화된 스냅샷 형식 사용 |
-d, --depth <n> | 스냅샷 트리의 깊이 제한 |
출력
차이 비교 결과는 +로 추가된 줄, -로 제거된 줄을 표시하며, 유니파이드 디프 형식과 유사합니다. 요약 라인은 추가, 삭제, 변경되지 않은 줄의 수를 보여줍니다.
- button "Submit" [ref=e2]
+ button "Submit" [ref=e2] [disabled]
3개 추가, 2개 삭제, 41개 변경 없음스크린샷 비교
현재 페이지의 스크린샷을 기준 이미지와 픽셀 단위로 비교합니다. 변경된 픽셀이 빨간색으로 강조된 디프 이미지를 생성합니다.
# 기본 시각적 비교
agent-browser diff screenshot --baseline before.png
# 디프 이미지를 특정 경로에 저장
agent-browser diff screenshot --baseline before.png --output diff.png
# 임계값 및 요소 범위 조정
agent-browser diff screenshot --baseline before.png --threshold 0.2 --selector "#hero"옵션
| 플래그 | 설명 |
|---|---|
-b, --baseline <file> | 비교할 기준 PNG/JPEG 이미지 (필수) |
-o, --output <file> | 생성된 디프 이미지의 경로 (기본: 임시 폴더) |
-t, --threshold <0-1> | 색상 거리 임계값 (기본: 0.1). 값이 높을수록 더 관용적 |
-s, --selector <sel> | 현재 스크린샷의 범위를 요소로 제한합니다 |
--full | 전체 페이지 스크린샷 사용 |
출력
디프 이미지 경로, 다르게 인식된 픽셀 수, 일치하지 않는 비율을 보고합니다. 디프 이미지는 변경되지 않은 픽셀은 어둡게, 변경된 픽셀은 빨간색으로 표시합니다.
기준 이미지와 현재 이미지의 크기가 다를 경우, 픽셀 비교를 시도하기보다는 크기 불일치 오류를 보고합니다.
URL 비교
두 페이지를 순차적으로 열고 각각의 결과를 비교합니다.
# 두 개의 URL 비교 (스냅샷 비교)
agent-browser diff url https://staging.example.com https://prod.example.com
# 시각적 비교 포함
agent-browser diff url https://v1.example.com https://v2.example.com --screenshot
# 전체 페이지 스크린샷 비교
agent-browser diff url https://v1.example.com https://v2.example.com --screenshot --full명령은 먼저 첫 번째 URL로 이동하고 상태를 캡처한 후, 두 번째 URL로 이동하여 다시 캡처합니다. 항상 스냅샷 비교가 포함되며, 스크린샷 비교는 --screenshot 플래그가 필요합니다.
완료 후 브라우저는 두 번째 URL에 머무릅니다.
옵션
| 플래그 | 설명 |
|---|---|
--screenshot | 시각적 스크린샷 비교도 수행합니다 |
--full | 전체 페이지 스크린샷 사용 |
--wait-until <strategy> | 네비게이션 대기 전략: load, domcontentloaded, networkidle (기본값: load) |
-s, --selector <sel> | 스냅샷의 범위를 CSS 선택자 또는 @ref로 제한합니다 |
-c, --compact | 단순화된 스냅샷 형식 사용 |
-d, --depth <n> | 스냅샷 트리 깊이 제한 |
활용 사례
에이전트 작업 검증
가장 일반적인 활용 사례: 클릭, 입력, 제출 등의 작업이 페이지에 예상대로 영향을 미쳤는지 확인합니다.
agent-browser snapshot -i # 상호작용 전용 스냅샷을 캡처 (기준으로 사용)
agent-browser fill @e3 "[email protected]"
agent-browser diff snapshot # 현재 스냅샷을 기준과 비교변경 감시
주기적으로 페이지를 저장된 기준과 비교하여 업데이트를 탐지합니다.
# 기준 저장
agent-browser open https://example.com && agent-browser snapshot > baseline.txt
# 나중에 변경 여부 확인
agent-browser open https://example.com && agent-browser diff snapshot --baseline baseline.txt시각적 회귀 테스트
배포 전후의 스크린샷을 비교하여 의도하지 않은 시각적 변화를 포착합니다.
agent-browser open https://staging.example.com && agent-browser screenshot baseline.png
# ... 배포 발생 ...
agent-browser open https://staging.example.com && agent-browser diff screenshot --baseline baseline.png환경 비교
스테이징 환경과 프로덕션 환경을 비교하여 동일성을 검증합니다.
agent-browser diff url https://staging.example.com https://prod.example.com --screenshot