프론트엔드 PR 증거
동일한 고정 장치(fixture), 뷰포트, 상호작용으로 PR의 머지 베이스와 헤드를 기록한 후, gh를 통해 두 기록을 하나의 PR 댓글로 게시합니다. 저장소의 PR 스킬이 PR 본문을 소유합니다. $SCRATCH는 세션 스크래치 디렉토리를 의미합니다. 번들된 스크립트는 절대 경로로 실행하세요.
단계
- 리비전 확인.
gh pr view PR_URL --json baseRefName,headRefOid에서baseRefName과headRefOid를 읽습니다.git fetch origin BASE_BRANCH pull/PR_NUMBER/head를 실행한 후git merge-base origin/BASE_BRANCH HEAD_SHA를 실행합니다. 두 SHA가 로컬에서 확인되면 완료됩니다. - 두 리비전 빌드. 각 리비전이 빌드된 출력 폴더 또는 실행 중인 개발 서버를 가지고 있고, 그 소스가 해당 SHA와 일치하면 완료됩니다.
- 흐름(flow) 작성
$SCRATCH아래에, 예제에서 시작하여 아래의 flow 인터페이스를 따릅니다. - 캡처
node scripts/capture.cjs FLOW "$SCRATCH/evidence"로 실행합니다. 실패하면 오류 메시지가 수정 방법을 알려줍니다: 설치 명령, 앱에서 벗어난 탐색, 또는 하이라이트 문제. 선택자 실패는 출력 폴더에failure.png와failure-aria.yml파일을 남깁니다. 흐름을 수정하고 다시 실행하세요. 다음 조건을 만족하면 완료됩니다:- 명령어가 0으로 종료됨;
- 모든
manifest.network항목이 설명됨 (모의 실행에서 각 항목은 모의되지 않은 호출임); comparison.png가 두 단계의 변경 사항을 보여줌;video-contact-sheet.png가 커서가 각 대상에 도달하고 최종 상태가 유지되는 것을 보여줌.
- 게시
node scripts/publish.cjs "$SCRATCH/evidence" PR_URL로 실행합니다. 증거가 PR의 현재 헤드 및 머지 베이스와 일치하는지 확인하고, 비교 이미지와 비디오가 첨부된comment.md를 게시하며, GitHub가 둘 다 호스팅하는지 확인합니다. 동일한 캡처에 대해 다시 실행하면 해당 댓글을 재사용합니다.gh auth status가 로그인 누락을 표시하면, 해당 단계에 대해서만 사용자에게 요청하세요. 게시가 계속 차단되면 아티팩트를 보관하고 정확한 오류를 보고하세요. 댓글 URL이 출력되면 완료됩니다. - 링크 PR 본문의 증거 섹션에 댓글 URL을 추가합니다. 이전 증거 링크를 대체하여
publish.cjs가 현재 헤드에 대해 출력한 URL이 PR 본문에 링크되면 완료됩니다. - 정리 시작한 서버와 작업 트리를 정리합니다. 아티팩트, 쿠키, 저장-상태 파일은 소스 제어에서 제외합니다.
Flow 인터페이스
flow 모듈은 다음을 내보냅니다:
description: 테스트된 상호작용과 데이터가 모의(mocked)인지 실제(live)인지 설명합니다. 댓글 텍스트가 됩니다.phases: 두 개의{ label, revision, url | dir, run }항목, Before와 After 순서.dir은 빌드된 출력 폴더로, 헬퍼가 클라이언트 라우트를index.html로 폴백(fallback)하여 제공합니다.url은 실행 중인 개발 서버를 가리킵니다.viewport(선택 사항, 기본값 1440×900).setup(page, phase)(선택 사항): 각 단계의 첫 번째 탐색 전에 실행되며, 라우트, 초기화 스크립트, 쿠키, 저장소가 초기화된 페이지에서 실행됩니다. 여기서 모의(mock), 시드(seed), 인증 고정 장치(fixture)를 등록하세요. 라우트는 가장 최신 것이 먼저 일치하므로, 특정 모의 전에 포괄 중단(catch-all abort)을 등록하세요.warmup(page, phase)(선택 사항): 페이지 로드 후 기록되지 않은 상태로 실행됩니다. 예를 들어 개발 서버가 컴파일되는 동안 사용합니다.run(page, tools): 상호작용을 수행하고 각 단계의 예상 상태를 어설션(assert)합니다.tools.click(locator),tools.point(locator),tools.highlight(locator, label?)을 사용합니다. 각 단계는 최소 하나의 하이라이트가 필요하며,run이 반환될 때 여전히 보여야 합니다.
출력물: before.png, after.png, comparison.png, comparison.webm, video-contact-sheet.png (비디오를 타임스탬프가 찍힌 프레임으로 변환), manifest.json, comment.md.
인증된 앱. 헬퍼의 Chromium은 로그인 없이 시작됩니다: 다른 곳의 브라우저 세션과 gh 인증은 이에 도달하지 않습니다. setup에서 로그인 상태를 재현하세요; 예제는 두 가지 방법을 보여줍니다. 실제 인증 증거가 필요하고 캡처 컨텍스트가 이를 달성할 수 없는 경우, 제한 사항과 실제로 수행된 검사를 보고하세요.
스크립트를 변경하거나 Playwright를 업그레이드한 후에는 node scripts/capture.test.cjs를 실행하세요. CAPTURE_TEST_OUTPUT=DIR로 아티팩트를 보관하고, PLAYWRIGHT_MODULE=PATH로 다른 Playwright 설치를 테스트할 수 있습니다.