도구 소개
좋은 로케이터는 정확히 하나의 요소에만 매치되고, 다음 UI 변경 후에도 계속 매치됩니다. 이 테스터로 Selenium, Playwright, Cypress 테스트에 넣기 전에 실제 페이지 소스에 로케이터를 확인할 수 있습니다. DevTools의 “Copy outerHTML”로 HTML을 붙여 넣고 XPath 표현식이나 CSS 선택자를 입력하면, 매치된 요소 개수, 각 요소의 마크업, 렌더링된 미리보기에서의 위치를 볼 수 있습니다. 미리보기는 스크립트가 비활성화된 샌드박스 프레임입니다. 치트시트는 자주 쓰는 XPath 축과 함수를, 대응하는 CSS가 있으면 나란히 보여 줍니다.
사용 방법
- HTML을 붙여 넣거나 “Load sample”(샘플 불러오기)로 로그인 폼과 주문 표를 불러오세요.
- 로케이터를 입력하세요. / 또는 (로 시작하는 표현식은 XPath로, 나머지는 CSS로 처리되며, 스위치로 강제할 수 있습니다.
- 매치 개수를 확인하세요. 클릭이나 어설션 대상이라면 매치가 하나여야 합니다.
- 치트시트의 선택자를 클릭하면 샘플에 바로 실행됩니다.
XPath·CSS 선택자 테스터 자주 묻는 질문
XPath와 CSS 선택자 중 무엇을 써야 하나요?
속도와 가독성을 위해 CSS나 프레임워크 로케이터(Playwright의 getByRole, getByTestId 등)를 우선 사용하세요. XPath는 normalize-space()로 텍스트 매칭, 조상 요소로 올라가기, following-sibling::으로 레이블 기준 셀 선택처럼 CSS로 표현할 수 없는 경우에 사용하세요.
브라우저 콘솔에서는 되는 XPath가 왜 여기서는 안 되나요?
브라우저는 XPath 1.0만 지원하며 이 도구도 마찬가지입니다. 붙여 넣은 HTML이 브라우저가 실제로 렌더링한 것인지 확인하세요. JavaScript로 추가된 콘텐츠나 iframe, shadow DOM 안의 콘텐츠는 페이지 소스에 없습니다. 실시간 DOM을 얻으려면 DevTools에서 outerHTML을 복사하세요.
contains(@class, "btn")이 왜 너무 많이 매치되나요?
contains()는 부분 문자열을 매치하므로 "btn-primary"와 "submit-btn"도 매치합니다. 클래스 이름 전체를 매치하려면 XPath에서는 contains(concat(' ', normalize-space(@class), ' '), ' btn ')를, CSS에서는 간단히 .btn을 사용하세요.