ProofShot — 시각적 검증 워크플로우
ProofShot은 오픈소스이며 에이전트에 구애받지 않는 CLI로, 실제 브라우저에서 자신의 작업을 검증할 수 있게 해줍니다 — 비디오 증거, 스크린샷 및 오류 보고서, 공급업체 종속 없음.
사용 시기
ProofShot은 다음 이후에 사용하세요:
- 새로운 UI 기능 또는 페이지 구축
- 기존 UI 컴포넌트 수정
- 시각적 버그 수정
- 사용자에게 표시되는 모든 변경 사항
워크플로우 (항상 다음 3단계를 따르세요)
1단계: 세션 시작
proofshot start --run "your-dev-command" --port PORT --description "검증할 내용"
이 명령은 브라우저를 열고 녹화를 시작합니다. 포트가 이미 사용 중인 경우, proofshot이 자동으로 기존 프로세스를 종료합니다.
항상 --run을 사용하여 proofshot이 개발 서버 출력을 시작하고 캡처하도록 하세요 (서버 로그가 증명 보고서에 나타납니다).
서버가 사용자 또는 다른 프로세스에 의해 명시적으로 시작된 경우에만 --run을 생략하세요 — 생략하면 서버 로그가 캡처되지 않습니다.
이전 세션이 깔끔하게 중지되지 않은 경우, --force를 추가하여 무시하세요.
2단계: 브라우저 조작 및 테스트
proofshot exec를 사용하여 탐색, 상호작용 및 검증하세요:
proofshot exec snapshot -i # 대화형 요소 보기
proofshot exec open http://localhost:PORT/page # 페이지로 이동
proofshot exec click @e3 # 버튼 클릭
proofshot exec fill @e2 "[email protected]" # 양식 필드 채우기
proofshot exec screenshot step-NAME.png # 주요 순간 캡처
중요한 순간에 스크린샷을 찍으세요 — 이것이 시각적 증거가 됩니다. 스냅샷 출력을 읽어 예상하는 내용을 확인하세요.
3단계: 증거 중지 및 번들링
proofshot stop
이 명령은 녹화를 중지하고, 콘솔 + 서버 오류를 수집하며, 비디오, 스크린샷 및 오류 보고서가 포함된 SUMMARY.md를 생성합니다.
4단계 (선택 사항): PR에 증거 게시
proofshot pr # 현재 브랜치에서 PR 자동 감지
proofshot pr 42 # 특정 PR 번호 지정
이 명령은 스크린샷과 비디오를 GitHub에 업로드하고 PR에 형식화된 댓글을 게시합니다. 기본적으로 proofshot-artifacts 브랜치의 공식 GitHub contents API를 사용합니다. GitHub 첨부 파일 URL을 원하는 경우 --upload-provider github-web-attachments를 사용하세요.
팁
- 사람이 무엇을 테스트했는지 알 수 있도록 항상 의미 있는 --description을 포함하세요
- 주요 작업 전후에 스크린샷을 찍으세요 (예: 양식 제출 전, 리디렉션 후)
- 검증 중 오류를 발견하면 수정하고 워크플로우를 다시 실행하세요
- 중지 후
proofshot pr을 사용하여 Pull Request에 직접 증거를 첨부하세요