사용자 흐름과 접근성 테스트
핵심 흐름을 자동화하고 모바일·키보드 검증을 기록합니다.
진도 0%
레슨
- 정상·경계·실패 테스트
단위 테스트와 브라우저 흐름 테스트의 범위를 정합니다.
- 검색부터 복귀까지 자동 검증
모의 네트워크로 사용자 흐름을 재현합니다.
- 키보드와 모바일 검증
자동 검사와 수동 탐색의 확인 범위를 구분합니다.
- 실패 재현과 회귀 방지
실패하는 사용자 테스트를 먼저 만들고 원인을 고칩니다.
8단계: 사용자 흐름과 접근성 테스트
m07 미션 solution 전체가 들어 있는 starter에서 검색 단언·모바일 검사 계획·포커스 회귀를 보완합니다. 실제 진입점은 boot.mjs이며 이전 회귀를 유지합니다.
요구사항
- flow-assertions.mjs에서 URL·폼·카드 id·상세 숨김을 단언하고 잘못된 snapshot 반례를 유지합니다.
- audit-plan.mjs에 320·390·1280과 수동 확대·IME·포커스·터치 범위를 작성합니다.
- assets/results.mjs에서 현재 id 링크의 포커스를 복구하고 선택 대상 소실 시 검색어로 이동합니다.
- npm test 모델과 설치 후 bash check.sh 브라우저 결과를 분리해 기록합니다. 실제 관찰은 MANUAL.md에 적으며 미실행 항목은 미확인으로 유지합니다.
- 고정된 교육용 행사 fixture와 로컬 모의 API만 사용하며 실제 서비스 자격증명은 사용하지 않습니다.
완료 기준
- npm test에서 기존 회귀와 새 검색 조건·단언 반례·빈 결과·동일 URL 재시도·새 링크 포커스·대상 소실 검사가 통과합니다.
- 설치 후 bash check.sh에서 실제 검색·상세·목록 복귀·브라우저 이동·500 재시도·연결 실패·B→A 및 Tab·Enter·320/390/1280 넘침 검사가 통과합니다. 샌드박스에서는 이 브라우저 결과가 PENDING입니다.
- MANUAL.md에 실제 기기·확대·포커스 표시·IME·터치의 환경과 관찰을 기록하며 자동 모델 통과를 실제 관찰로 바꾸어 쓰지 않습니다.
- npm ci와 npx playwright install chromium을 먼저 실행합니다(Node 20 또는 22 LTS). check.sh는 npm test 뒤 Playwright e2e까지 실행합니다.
bash check.sh미션 시작 코드
모범 답안
모범 답안 내려받기검토 기준
- 사용자에게 필요한 안내와 다음 행동이 분명합니다.
- 변경 이유와 실패 조건을 코드·검증 근거로 설명합니다.