HTML 입문 | Selenium·Playwright에서 사용하는 태그·속성·로케이터 기초 완벽 가이드

Selenium・Playwright로 테스트 자동화를 시작하면 “요소를 찾을 수 없다”, “로케이터 작성 방법을 모르겠다”는 벽에 부딪히는 경우가 많습니다. 그 근본적인 원인의 대부분은 HTML을 읽는 방법을 모르는 것에 있습니다. 이 글에서는 QA 엔지니어가 테스트 자동화에 필요한 HTML 기초 지식을 실례와 함께 알기 쉽게 해설합니다.

📌 이 글의 대상 독자

테스트 자동화 코드를 작성할 때 반드시 등장하는 것이 「요소 특정」입니다. Selenium이라면 driver.find_element(By.ID, "email"), Playwright라면 page.get_by_test_id("login-btn")처럼 작성하는데, 이 "email"이나 "login-btn"이라는 값은 어디서 오는 걸까요?

답은 HTML 안에 있습니다. 테스트 자동화 도구는 HTML 요소에 붙은 속성을 단서로 요소를 찾습니다. 그렇기 때문에 “HTML을 읽을 수 있는지”가 테스트 자동화 습득 속도에 직결됩니다. 웹 개발 지식이 없어도 괜찮습니다. QA로서 필요한 최소한의 지식만을 실제 예시로 확인해 봅시다.

HTML의 기본 구조：태그와 속성이란?

HTML�� 웹 페이지의 골격을 만드는 언어입니다. 테스트 자동화 도구가 「버튼을 누른다」「입력란에 문자를 입력한다」는 조작을 할 때, 그 요소를 HTML 속성을 단서로 찾습니다. DevTools에서 어떤 속성을 확인하면 좋은지는 Chrome DevTools 입문도 참고하세요.

태그의 기본

HTML�� 태그(<〜>)라는 부품의 조합으로 구성됩니다. 대부분의 태그는 「여는 태그」와 「닫는 태그」가 쌍을 이룹니다.

<button>로그인</button>

<p>이 문장이 단락입니다.</p>


<input type="text">

속성이란?

태그에는 속성을 추가할 수 있습니다. 속성은 「그 요소의 추가 정보」를 나타내며, 속성명="값"의 형태로 여는 태그 안에 씁니다.

<input type="email" id="user-email" name="email" placeholder="이메일 주소">

이 속성의 값이 바로 테스트 자동화에서 로케이터를 작성할 때의 단서가 됩니다.

테스트 자동화에서 중요한 속성 5가지

HTML��는 많은 속성이 있지만, 테스트 자동화에서 사용하는 속성은 한정되어 있습니다. 다음 5가지를 파악하면 대부분의 로케이터를 작성할 수 있습니다.

① id 속성：가장 신뢰할 수 있는 식별자

id는 페이지 내에서 1개만 사용할 수 있다는 규칙이 있어 로케이터로서 가장 안정적입니다.

<input id="login-email" type="email">
<button id="login-btn">로그인</button>

# Selenium
driver.find_element(By.ID, "login-email")
driver.find_element(By.CSS_SELECTOR, "#login-btn")

# Playwright
page.locator("#login-email")
page.locator("#login-btn")

② data-testid 속성：테스트 전용 최강 식별자

data-testid는 테스트를 위해 개발자가 의도적으로 추가하는 속성입니다. 디자인 변경이나 기능 수정의 영향을 받기 어렵고, 테스트 자동화에서 가장 깨지기 어려운 로케이터로 권장됩니다.

<button data-testid="submit-button" class="btn btn-primary btn-lg">
  제출하기
</button>

# Selenium（CSS 셀렉터로 취득）
driver.find_element(By.CSS_SELECTOR, "[data-testid='submit-button']")

# Playwright（전용 메서드 사용）
page.get_by_test_id("submit-button")

③ class 속성：편리하지만 깨지기 쉽다

class는 스타일(외형)을 적용하기 위한 그룹명입니다. 여러 요소에 같은 class를 붙일 수 있어 로케이터로서는 불안정해지기 쉽다는 단점이 있습니다.

<button class="btn btn-primary btn-lg disabled">제출하기</button>
                         ↑ 디자인 변경·상태 변화로 바뀌기 쉬움


<button class="MuiButton-root css-1abcde">제출</button>   <!-- Material UI -->
<button class="chakra-button">제출</button>               <!-- Chakra UI -->
<button class="Button_btn__abc123">제출</button>          <!-- CSS Modules -->
                                     ↑ 빌드할 때마다 바뀔 가능성 있음

테스트 자동화에서 자주 사용하는 폼 요소

웹 앱 테스트에서 가장 많이 등장하는 것이 폼 요소입니다. 로그인・회원가입・검색 등 대부분의 조작이 폼을 통해 이루어집니다.

폼 요소와 로케이터 대응표

실전：로그인 폼의 HTML을 읽고 로케이터 작성하기

실제 HTML을 읽고 로케이터를 작성하는 흐름을 확인해 봅시다.

<form id="login-form">
  <label for="email">이메일 주소</label>
  <input type="email"
         id="email"
         name="email"
         data-testid="login-email"
         placeholder="예：user@example.com">

  <label for="password">비밀번호</label>
  <input type="password"
         id="password"
         name="password"
         data-testid="login-password">

  <button type="submit"
          id="login-btn"
          data-testid="login-submit">
    로그인
  </button>
</form>

이 HTML에서 작성할 수 있는 로케이터 예시입니다.

# Selenium의 경우（id 우선）
email_input    = driver.find_element(By.ID, "email")
password_input = driver.find_element(By.ID, "password")
login_button   = driver.find_element(By.ID, "login-btn")

email_input.send_keys("test@example.com")    # 샘플 URL
password_input.send_keys("password123")
login_button.click()

# Playwright의 경우① get_by_test_id（data-testid가 있는 경우）
page.get_by_test_id("login-email").fill("test@example.com")    # 샘플 URL
page.get_by_test_id("login-password").fill("password123")
page.get_by_test_id("login-submit").click()

# Playwright의 경우② 시맨틱 로케이터（get_by_label / get_by_role）
page.get_by_label("이메일 주소").fill("test@example.com")    # 샘플 URL
page.get_by_label("비밀번호").fill("password123")
page.get_by_role("button", name="로그인").click()

로케이터를 선택할 때의 우선순위

Selenium의 경우：안정된 속성 기반 로케이터 우선

왼쪽일수록 안정 · 오른쪽일수록 깨지기 쉬움

Playwright의 경우：요소 종류에 따라 구분해서 사용

Playwright의 방식은 고정된 절대 순위가 아니라, 요소의 종류에 맞는 로케이터를 선택하는 것이 기본 방침입니다. 적절한 선택은 상황에 따라 달라집니다.

HTML을 읽을 때 자주 막히는 포인트

자주 묻는 질문 (FAQ)

정리

HTML�� 전부 외울 필요는 없습니다. “id・data-testid・name을 찾는다”，”폼 요소의 종류를 알고 있다”，이 2가지만으로 테스트 자동화의 첫 번째 벽을 크게 넘을 수 있습니다. HTML을 읽을 수 있게 되었다면 다음은 Chrome DevTools를 사용해 실제 페이지의 HTML을 조사해 봅시다. 셀렉터 검증까지 한 번에 할 수 있게 됩니다.