Vincenius/wwebdev

wweb.dev 변경 사항 검증

완전 정적 Asto 사이트(React Islands 포함) — 검증은 빌드된 페이지를 브라우저에서 로드하고 하이드레이션된 Islands와 상호작용하는 것을 의미합니다.

빌드 + 서빙

yarn install          # 서버 의존성이 없는 경우 (server.mjs는 compression/express 필요)
yarn build            # 정적 빌드 → dist/ (TZ=UTC 포함)
yarn serve            # 프로덕션 서버 (http://localhost:4321, astro preview 아님)

node server.mjs는 Yarn PnP 관련 설정에서 직접 실패합니다 — 항상 yarn serve를 통해 실행하세요. 백그라운드에서 실행하고 curl -s -o /dev/null -w "%{http_code}" http://localhost:4321/<route>로 확인합니다.

페이지 구동하기

리포지토리에 Playwright가 없습니다. 임시 디렉토리에 playwright-core를 설치하고 시스템 Chrome을 사용하세요 (chromium.launch({ channel: 'chrome', headless: true })) — 브라우저 다운로드가 필요 없습니다. Islands는 client:visible이므로 Island가 렌더링한 선택자가 나타날 때까지 기다린 후 어설션하고, 애니메이션에는 ~1초의 시간을 줍니다.

생성 도구에 유용한 검사:

• 주입된 <style> 출력의 계산된 스타일 (animation-name, position, size)
• 복사 가능한 HTML/CSS 코드를 위한 textarea .inputValue()
• 1440px 및 ~480px에서의 스크린샷 (여러 도구 사이드바가 모바일에서 column-reverse로 전환됨)

주의사항

• 콘솔에 오류가 없어야 합니다. Vite 에셋 인라인은 비활성화되어 있습니다 (assetsInlineLimit: 0 in astro.config.mjs) — data-URI 폰트가 CSP font-src 'self'를 위반하기 때문입니다. data-URI CSP 오류가 다시 나타나면 해당 설정이 손실된 것입니다.
• yarn test:parity는 test/baseline/ (프로덕션 HTML 스냅샷)이 필요하며 이는 체크인되지 않았습니다. 이 없으면 harness가 ENOENT 오류를 발생시킵니다. 어쨌든 브라우저 검증을 대체하지는 않습니다.