[Front Test] div를 남발하면 안되는 이유 (접근성)

https://testing-library.com/docs/queries/about/#priority

About Queries | Testing Library

 

testing-library에서 요소를 찾는 방식의 우선순위

🔵 1. 접근 가능한 쿼리 (Accessible Queries)

→ 시각 사용자 + 보조기기 사용자 모두를 고려한 방식
가장 권장되는 방법들입니다:

메서드설명

getByRole	역할(예: button, heading) 기반 쿼리. name 옵션을 함께 써서 필터링 가능. 가장 권장됨.
getByLabelText	라벨을 기반으로 폼 요소 찾기 (예: <label for="name">Name</label>)
getByPlaceholderText	폼 필드에 placeholder가 있을 때 사용 (라벨보다 우선순위는 낮음)
getByText	버튼, 링크, 텍스트 요소를 눈에 보이는 글자 기준으로 찾음
getByDisplayValue	입력값이나 선택된 값 등, 이미 채워진 값을 기준으로 요소를 찾음

 

---

🟡 2. 시맨틱 쿼리 (Semantic Queries)

HTML5나 ARIA 속성 기반, 접근성은 있지만 기술에 따라 다르게 인식됨

메서드설명

getByAltText	이미지 등에 쓰인 alt 속성 기반 검색
getByTitle	title 속성 기반 검색. 접근성 도구에 따라 읽힐 수도 안 읽힐 수도 있음

 

---

🔴 3. Test ID 기반 쿼리 (최후 수단)

메서드설명

getByTestId

data-testid 속성으로 요소를 찾음. 사용자가 볼 수 없는 값이라 가장 마지막에 써야 함. 텍스트나 역할로 찾을 수 없을 때만 사용

 

 

https://wouldyou.tistory.com/143

ARIA: 역할(Roles), 상태(States), 속성(Properties) 사용하기