ProofShot — 시각적 검증 워크플로우은(는) 무엇을 하나요?
사용 시기
ProofShot은 다음 상황 후에 사용하세요:
- 새로운 UI 기능 또는 페이지 구축
- 기존 UI 컴포넌트 수정
- 시각적 버그 수정
- 사용자가 보는 화면에 영향을 주는 모든 변경
워크플로우 (다음 3단계를 항상 따르세요)
1단계: 세션 시작
proofshot start --description "검증할 내용"
이 명령은 개발 서버를 시작하고, 헤드리스 브라우저를 열며, 녹화를 시작합니다. 설명은 인간을 위한 증명 보고서에 나타납니다.
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에 서식이 지정된 댓글을 게시합니다.
기본적으로 공식 GitHub contents API를 사용하여 proofshot-artifacts 브랜치에 저장합니다.
GitHub 첨부 파일 URL을 원하는 경우 --upload-provider github-web-attachments를 사용하세요.
팁
- 인간이 무엇을 테스트했는지 알 수 있도록 항상 의미 있는 --description을 포함하세요
- 주요 작업 전후에 스크린샷을 찍으세요 (예: 양식 제출 전, 리디렉션 후)
- 검증 중 오류를 발견하면 수정하고 워크플로우를 다시 실행하세요
- 중단 후
proofshot pr을 사용하여 증거를 풀 리퀘스트에 직접 첨부하세요