접근성 Storybook 테스트

접근성 Storybook 테스트에 대해 설명합니다.

Storybook 컴포넌트 테스트 # Vue 컴포넌트의 접근성 위반을 자동으로 테스트하기 위해 axe-playwright 와 함께 Storybook test-runner 를 사용합니다. 이 접근 방식을 통해 컴포넌트를 독립적으로 테스트하고 개발 프로세스 초기에 접근성 문제를 발견할 수 있습니다. 사전 요건 # Storybook 접근성 테스트를 실행하기 전에 다음을 확인하세요: 모든 종속성이 설치되었습니다( yarn install ). storybook 디렉토리( cd storybook ) 내에서 수행해야 합니다. yarn playwright install chromium 으로 playwright 를 설치합니다(또는 yarn playwright install 로 모든 브라우저 엔진 설치). 빌드된 Storybook 인스턴스가 실행 중입니다. Storybook 접근성 테스트 실행 # Vue 컴포넌트에 대한 자동화된 접근성 테스트를 실행하려면: 1단계: Storybook 시작 # 먼저 Storybook 개발 서버를 시작합니다. 두 가지 옵션이 있습니다: # Option 1: Start Storybook with fresh fixtures yarn storybook:start # Option 2: Start Storybook without updating fixtures (faster for subsequent runs) yarn storybook:start:skip-fixtures-update 중요: 테스트 세션 동안 Storybook 서버를 계속 실행하세요. 테스트가 올바르게 실행되려면 Storybook이 빌드되어 접근 가능해야 합니다. 2단계: 접근성 테스트 실행 # 별도의 터미널에서 GitLab 프로젝트의 루트 디렉토리에서 다음을 실행합니다: yarn storybook:dev:test 이 명령은 다음을 수행합니다: 실행 중인 Storybook 인스턴스에 대해 테스트 러너를 실행합니다. 모든 스토리를 탐색합니다. 각 스토리에 대해 axe-playwright 접근성 검사를 실행합니다. 발견된 접근성 위반을 보고합니다. 테스트 결과 이해 # 테스트 러너는 다음을 출력합니다: 통과한 테스트 : 접근성 표준을 충족하고 런타임 오류가 없는 컴포넌트. 실패한 테스트 : 런타임 오류가 있는 컴포넌트. 접근성 위반이 있는 컴포넌트, 다음을 포함: 실패한 특정 접근성 규칙 위반을 일으킨 요소 심각도 수준(critical, serious, moderate, minor) 사용 가능한 경우 수정 제안 테스트 실행의 완전한 출력은 storybook/tmp/storybook-results.json 파일에서 찾을 수 있습니다. Storybook 접근성 테스트를 위한 모범 사례 # 모든 스토리 변형 테스트 : 컴포넌트의 각 스토리가 다양한 상태와 구성을 나타내는지 확인합니다. 인터랙티브 상태 포함 : 호버, 포커스, 활성 및 비활성 상태를 보여주는 스토리를 만듭니다. 다양한 데이터로 테스트 : 실제 사용 시나리오를 반영하는 현실적인 데이터를 사용합니다. 즉시 위반 해