| HTML 예시 | 접근성 Role | getByRole 예시 | 비고/함정 |
|---|---|---|---|
<button>저장</button> | button | getByRole('button', { name: '저장' }) | 버튼 텍스트가 name이 됨 |
<a href="/home">홈</a> | link | getByRole('link', { name: '홈' }) | href 있어야만 link |
<input type="checkbox" aria-label="동의"> | checkbox | getByRole('checkbox', { name: '동의' }) | 레이블/aria-label 필수 |
<input type="radio" aria-label="여성"> | radio | getByRole('radio', { name: '여성' }) | 같은 name 그룹 라디오 주의 |
<input type="button" value="더보기"> | button | getByRole('button', { name: '더보기' }) | value가 name |
<input type="text" aria-label="이름"> | textbox | getByRole('textbox', { name: '이름' }) | email/url/tel도 대부분 textbox |
<input type="search" aria-label="검색"> | searchbox | getByRole('searchbox', { name: '검색' }) | 검색 전용 role |
<input type="number" aria-label="수량"> | spinbutton | getByRole('spinbutton', { name: '수량' }) | 숫자 입력 전용 |
<input type="range" aria-label="볼륨"> | slider | getByRole('slider', { name: '볼륨' }) | 슬라이더 |
<select aria-label="국가"> | listbox | getByRole('listbox', { name: '국가' }) | <option>은 option |
<option>한국</option> | option | within(listbox).getByRole('option', { name: '한국' }) | within 추천 |
<ul> | list | getByRole('list') | <ol>도 list |
<li>항목</li> | listitem | getAllByRole('listitem') | |
<table> | table | getByRole('table') | 데이터 테이블만 해당(표시 가능) |
<caption>매출표</caption> | caption | within(table).getByText('매출표') | caption 자체는 보통 getByText |
<th scope="col">이름</th> | columnheader | getByRole('columnheader', { name: '이름' }) | scope에 따라 column/row |
<th scope="row">총합</th> | rowheader | getByRole('rowheader', { name: '총합' }) | |
<td>홍길동</td> | cell | getByRole('cell', { name: /홍길동/ }) | cell의 name은 내용 텍스트 |
<tr> | row | getAllByRole('row') | 헤더/바디 모두 포함 |
<fieldset> | group | getByRole('group', { name: '개인정보' }) | 보통 <legend>로 name 제공 |
<main> | main | getByRole('main') | 페이지당 1개 권장 |
<header> | banner | getByRole('banner') | 페이지 루트 바로 하위일 때 |
<footer> | contentinfo | getByRole('contentinfo') | 페이지 루트 바로 하위일 때 |
<nav aria-label="주 메뉴"> | navigation | getByRole('navigation', { name: '주 메뉴' }) | 여러 개면 레이블 필수 |
<section aria-labelledby="s1"> | region | getByRole('region', { name: '섹션 제목' }) | 레이블 없으면 region 아님 |
<article> | article | getByRole('article', { name: /제목/ }) | 제목이 name이 됨 |
<form aria-label="로그인"> | form | getByRole('form', { name: '로그인' }) | 접근 가능한 이름 필요 |
Let's do it developer