공식문서를 번역한 글입니다.
1. 누구나 접근 가능한 쿼리
마우스를 사용하고 화면을 시각적으로 보며 스크린 리더와 같은 보조 기술(assistive technology)를 사용하는 사람이라면 누구나 접근 가능.
1) getByRole
getByRole은 모든 요소들에 쿼리하기 위해 사용된다.
예) `getByRole('button', {name: /submit/i})
role에 대한 정의2) getByLabelTest
form필드에서만 사용된다. 하지만 사용자들이 보통 이런 요소들을 우선적으로 찾기 때문에 최우선적으로 작성되어야 한다.3) getByPlaceholderText
placeholder는label을 대체할 수 없다. 하지만placeholder만 존재한다면 이걸 사용해야 한다.4) getByText
Form밖의 텍스트들은 사용자가 요소를 찾는 주요한 방법이다. 이 방법을 사용하여 대화형이 아닌 요소들(div, span, p ...)를 찾을 수 있다.5) getByDisplayValue
form의 현재 값은 값이 채워진 페이지를 탐색할 때 유용할 수 있다.
2. Semantic Queries
HTML5 및 ARIA 호환 selector. 이러한 속성과 상호 작용하는 사용자 경험은 브라우저와 보조 기술에 따라 크게 다르다.
1)
getByAltText: 요소가alt텍스트('img', 'area',input및custom elements)를 지원하는 요소인 경우 이를 사용하여 해당 요소를 찾을 수 있다.2)
getByTitle:title속성은 screenreader에서 일관성 있게 읽히지 않는다. 그리고 이title속성은 눈이 보이는 사용자들에게는 표지되지 않는것이 default이다.
3. TEST IDs
getByTestId: 사용자는 TEST ID를 보거나 들을 수 없다. TEST ID는 role이나 text로 일치할 수 없거나 의미가 없는 경우(ex: 텍트스가 동적으로 변하는 경우)에 권장된다.
WEB