4.3 KiB
전체 프로필 페이지 typography audit
실제 Chromium에서 router의 모든 페이지와 주요 열린 상태를 조회한다. 기존 E2E의
합성 fixture를 재사용하며 실제 게임 API와 계정에는 접속하지 않는다.
load-fixtures.mjs는 TypeScript compiler로 fixture 선언만 추출한다. test 등록,
beforeEach, 테스트 본문은 실행하지 않는다. fixture 구조가 바뀌면 audit도 함께
수정하고, 빈 화면이나 오류 화면을 정상 페이지 근거로 삼지 않는다.
실행
Core root에서 Node 24와 설치된 Playwright Chromium을 사용한다. prefix에 맞게 production frontend를 build하고 preview를 먼저 띄운다. frontend 준비는 테스트 정책을 따른다.
VITE_APP_BASE_PATH=/che VITE_GAME_API_URL=/che/api/trpc \
VITE_GAME_PROFILE=che:default pnpm --filter @sammo-ts/game-frontend build
VITE_APP_BASE_PATH=/che VITE_GAME_API_URL=/che/api/trpc \
VITE_GAME_PROFILE=che:default pnpm --filter @sammo-ts/game-frontend preview --host 127.0.0.1 --port 15331
다른 terminal에서:
CAPTURE_ORIGIN=http://127.0.0.1:15331 PHASE=che-cjk \
node tools/typography-audit/capture.mjs
CAPTURE_ORIGIN=http://127.0.0.1:15331 PHASE=che-ascii NAME_KIND=ascii \
node tools/typography-audit/capture.mjs
CAPTURE_ORIGIN=http://127.0.0.1:15331 PHASE=che-mobile MOBILE=1 \
node tools/typography-audit/capture.mjs
HWE는 build의 세 변수를 /hwe, /hwe/api/trpc, hwe:default로 바꾸고,
audit에도 PLAYWRIGHT_GAME_BASE_PATH=hwe PLAYWRIGHT_GAME_PROFILE=hwe:default를
지정한다. 같은 dist를 쓰는 profile build는 직렬로 실행한다. 활성 공개 profile을
새로 배포하거나 서버 설정을 바꾸는 명령이 아니다.
| 환경 변수 | 의미 |
|---|---|
CAPTURE_ORIGIN |
이미 실행 중인 frontend origin |
PHASE |
결과 하위 디렉터리 이름 |
TYPOGRAPHY_OUTPUT_DIR |
기본 test-results/typography-audit |
TYPOGRAPHY_FONT_ROOT |
선택적 Pretendard cache: source.css와 CSS가 참조하는 woff2 파일 |
FRONTEND_PARITY_IMAGE_ROOT |
기본 workspace의 image/ |
NAME_KIND |
기본 cjk, 또는 ascii, short4, mid7 |
WIDTHS |
기본 500,1000 CSS px |
MOBILE |
1이면 실제 390×844 touch 기기에서 500/1000 화면 모드 |
SCENES |
쉼표로 나눈 일부 scene만 실행; 전체 페이지 검증으로 보고하지 않음 |
각 실행은 현재 router의 path 목록과 전체 scene 목록의 대응을 먼저 검사한다.
font 로딩 실패, fixture/page 오류, 설명할 수 없는 computed 크기는 실패로 기록한다.
자동 축소는 data-font-fit-max와 10px 하한을 함께 검사한다. 원본 screenshot,
DOM, computed style, text range, viewport scale, 이미지 natural size/object-fit,
canvas font와 합성 응답이 scene별 파일로 남는다. 실패 manifest와 성공 수를 따로
확인한다. snapshot 개수만으로 성공이라고 판단하지 않는다.
clipped는 overflow를 가진 조상의 경계를 검사한다. overflow가 visible인 글자가
옆 칸을 침범하는 경우까지 자동 판정하지 못하므로 이름의 range와 element bounds,
screenshot도 비교한다. 긴 반각 이름의 기존 문제를 숨기려고 glyph mask를 늘리지
않는다. 별도의 Playwright interaction suite로 dropdown, dialog, hover/focus,
active, disabled 상태를 확인한다.
검증 경계
이 도구는 fixture production Chromium의 화면 근거다. 운영 DB/계정, 공개 HTTPS, 개인 CSS나 임의의 저장 HTML 전체를 검사했다는 뜻이 아니다. 감사 화면의 tab, 국가 회의실/기밀실, 동적 왕조 상세, 명령·인사 선택창을 별도 scene으로 포함한다. 새 사용자 페이지가 추가되면 router coverage 오류를 해결하며 scene과 fixture를 추가한다. 생성물은 Git에 넣지 않는다.