Devin.KR

사용자 흐름과 접근성 테스트

핵심 흐름을 자동화하고 모바일·키보드 검증을 기록합니다.

진도 0%

레슨

  1. 정상·경계·실패 테스트

    단위 테스트와 브라우저 흐름 테스트의 범위를 정합니다.

  2. 검색부터 복귀까지 자동 검증

    모의 네트워크로 사용자 흐름을 재현합니다.

  3. 키보드와 모바일 검증

    자동 검사와 수동 탐색의 확인 범위를 구분합니다.

  4. 실패 재현과 회귀 방지

    실패하는 사용자 테스트를 먼저 만들고 원인을 고칩니다.

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
미션 시작 코드
모범 답안모범 답안 내려받기

검토 기준

  • 사용자에게 필요한 안내와 다음 행동이 분명합니다.
  • 변경 이유와 실패 조건을 코드·검증 근거로 설명합니다.