Selenium·Playwright를 위한 DevTools 입문 | Elements·Console·Network 패널 사용법

Selenium·Playwright로 테스트 코드를 작성할 때 “어떤 셀렉터를 써야 할지 모르겠다”, “요소를 제대로 찾을 수 없다”고 막힌 적 있으신가요? 브라우저의 개발자 도구(DevTools)를 잘 활용하면 그런 고민의 대부분을 해결할 수 있습니다. 이 글에서는 QA 엔지니어가 테스트 자동화에서 꼭 알아야 할 DevTools 기초를 실례와 함께 해설합니다.

📌 이 글의 대상 독자

“요소를 찾을 수 없다”, “어떤 셀렉터를 써야 할지 모르겠다”——테스트 자동화를 시작하면 반드시 부딪히는 벽입니다. 사실 그 답의 대부분은 브라우저의 개발자 도구(DevTools) 안에 있습니다.

DevTools는 Chrome·Edge·Firefox 등의 브라우저에 기본 탑재된 개발·디버그용 도구로, 별도 설치 없이 언제든지 사용할 수 있습니다. QA 엔지니어에게는 “테스트 코드를 작성하기 전의 준비 도구”로서 빠질 수 없는 존재입니다.

개발자 도구(DevTools)란?

DevTools는 브라우저에 내장된 개발·디버그용 패널입니다. 웹 페이지의 HTML 구조·CSS·JavaScript 동작·네트워크 통신 등을 실시간으로 확인할 수 있습니다.

DevTools 여는 방법

QA 현장에서는 Chrome DevTools가 가장 많이 사용됩니다. Selenium·Playwright 모두 기본적으로 Chromium 기반 브라우저를 사용하므로, Chrome에서 확인한 내용을 테스트 코드에 바로 활용할 수 있습니다.

① Elements 탭：요소를 확인하고 셀렉터를 가져오기

QA 엔지니어가 가장 많이 사용하는 탭입니다. 페이지의 HTML 구조를 확인하고, 테스트 코드에 사용할 셀렉터를 그 자리에서 복사할 수 있습니다.

요소를 빠르게 찾는 방법

테스트하려는 요소(버튼·입력 폼 등)를 우클릭 → “검사”를 선택하면 해당 요소가 HTML 트리에서 강조 표시됩니다.

셀렉터 복사 방법

Elements 탭에서 대상 HTML 요소를 우클릭하면 셀렉터를 클릭 한 번으로 복사할 수 있습니다.

id와 data-testid 속성 확인하기

Elements 탭에서 HTML을 확인하면 해당 요소가 가진 속성(id·name·data-testid 등)을 한눈에 파악할 수 있습니다.

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

이 경우 Selenium·Playwright 코드에서는 다음과 같이 작성할 수 있습니다.

# Selenium의 경우
driver.find_element(By.ID, "email")
driver.find_element(By.CSS_SELECTOR, "[data-testid='login-email']")

# Playwright의 경우
page.get_by_test_id("login-email")
page.locator("#email")

② Console 탭：셀렉터를 그 자리에서 검증하기

Console 탭에서는 JavaScript를 직접 실행할 수 있습니다. “이 셀렉터로 정말 요소를 가져올 수 있을까?”를 테스트 코드를 작성하기 전에 바로 확인하는 데 사용합니다.

셀렉터 검증 명령어 빠른 참고표

# CSS 셀렉터로 1개 취득 (첫 번째 1건만)
document.querySelector('.submit-btn')

# CSS 셀렉터로 전체 취득 (풀 표기)
document.querySelectorAll('.list-item')

# Chrome DevTools Console 내에서만 사용할 수 있는 단축키
$$('.list-item')                     # document.querySelectorAll의 단축형
$x('//button[@type="submit"]')       # XPath로 취득

# 속성값 확인
document.querySelector('#email').getAttribute('data-testid')

$$('.list-item')의 결과가 빈 배열 []이라면 “해당 셀렉터로는 요소를 가져오지 못하고 있다”는 신호입니다. 셀렉터를 수정해 다시 확인하세요.

③ Network 탭：API 통신 내용 확인하기

Network 탭에서는 페이지가 수행하는 HTTP 통신을 실시간으로 확인할 수 있습니다. 프론트엔드와 API 사이의 주고받음을 파악하는 데 빠질 수 없는 탭입니다.

테스트 설계에 활용할 수 있는 Network 탭 정보

Network 탭 필터 활용법

Network 탭은 모든 통신을 표시하므로 처음엔 정보량에 압도될 수 있습니다. 다음 필터를 사용하면 빠르게 원하는 정보를 찾을 수 있습니다.

④ Application 탭：Cookie·Storage 상태 확인하기

로그인 상태 유지나 세션 관리 테스트에서 활용하는 탭입니다. Cookie·LocalStorage의 값을 실시간으로 확인·삭제할 수 있습니다.

DevTools 사용 시 자주 막히는 포인트

테스트 작업별 DevTools 탭 활용 맵

자주 묻는 질문 (FAQ)

정리

DevTools는 별도 설치가 필요 없으며, 지금 바로 브라우저를 열면 사용할 수 있습니다. Selenium·Playwright 코드를 작성하기 전에 “먼저 DevTools로 확인하는” 습관을 들이는 것만으로도 테스트 코드 품질과 디버그 효율이 크게 달라집니다. 일상적인 테스트 작업의 든든한 동반자로 활용해 보세요.