XPath 테스터

XPath는 경로 표현식을 사용해 XML(또는 HTML) 문서에서 노드를 선택하는 쿼리 언어로, 파일 경로가 폴더 트리에서 파일을 지정하는 방식과 비슷합니다. 이 도구는 XML을 붙여넣고 XPath 표현식을 작성하면 일치하는 노드를 즉시 보여줍니다 — 노드 개수, 직렬화된 출력, 잘못된 XML이나 잘못된 XPath 문법에 대한 명확한 오류 메시지까지 포함해서요. 모든 최신 브라우저에 내장된 네이티브 `document.evaluate` 엔진을 사용해 전적으로 브라우저 안에서 실행되므로, 붙여넣은 어떤 내용도 어디로도 업로드되지 않습니다.

이 도구는 무엇인가요?

XPath(XML Path Language)는 압축된 경로 형태의 문법으로 XML 문서 안의 노드 — 요소, 속성, 텍스트 — 를 탐색하고 선택하는 W3C 표준입니다. 예를 들어 `//book[price>30]/title`은 문서 어디에 있든 형제 노드인 `<price>`가 30보다 큰 모든 `<title>`을 선택합니다. XSLT 스타일시트, XML 검증 도구, 웹 스크레이퍼, 브라우저 자동화 프레임워크(Selenium, Playwright), 여러 프로그래밍 언어의 XML 라이브러리에서 사용됩니다.

Chrome, Firefox, Safari, Edge 등 모든 주요 브라우저가 구현하고 있는 현재 버전은 XPath 1.0으로, 1999년에 나온 원래의 W3C 권고안입니다. 이 도구는 브라우저의 `document.evaluate()` API를 통해 바로 그 네이티브 엔진을 사용하므로, 여기서의 결과는 브라우저 개발자 도구나 브라우저에서 실행되는 자바스크립트에서 얻는 결과와 일치합니다. 이후에 나온 XPath 2.0/3.0/3.1 명세(`for`, 시퀀스, 정규식 매칭 같은 함수를 추가한 버전)는 구현하지 않습니다 — 이것이 실제로 어떤 의미인지는 FAQ를 참고하세요.

표현식은 두 가지 종류의 결과 중 하나를 반환할 수 있습니다: 노드 집합(일치하는 요소, 속성, 텍스트 노드가 0개 이상 — 이 도구는 이를 직렬화해 한 줄에 하나씩, 개수와 함께 나열합니다), 또는 표현식 자체가 값을 계산하는 경우의 스칼라 값(숫자, 문자열, 불리언) — 예를 들어 `count(//book)`이나 `//book[1]/title = 'Dune'` 같은 경우입니다.

왜 사용해야 할까요?

웹 스크레이퍼, Selenium/Playwright 테스트, XSLT 스타일시트에 하드코딩하기 전에 XPath 표현식을 디버깅합니다.
실제 XML/HTML 샘플에서 특정 XPath가 기대한 노드를 선택하는지 빠르게 확인합니다.
코드에서 추측하는 대신 정확한 일치 개수와 직렬화된 출력을 확인합니다.
난해한 스택 트레이스 대신 잘못된 XML이나 유효하지 않은 XPath 문법에 대해 즉각적이고 읽기 쉬운 오류를 확인합니다.
100% 클라이언트 측 처리: XML과 표현식이 브라우저를 벗어나지 않습니다.

사용 방법

입력창에 XML(또는 HTML)을 붙여넣거나 편집하세요 — 샘플 서점 문서가 미리 채워져 있어 바로 동작을 확인할 수 있습니다.
표현식 필드에 XPath 표현식을 입력하거나 미리 채워진 예시를 수정하세요.
"Evaluate"를 클릭하세요(또는 표현식 필드에서 Enter를 누르세요).
상단에 개수와 함께 아래에서 일치한 노드를 확인하세요. 스칼라 결과(숫자, 문자열, 불리언)는 바로 표시됩니다.
XML이나 표현식이 유효하지 않으면 결과 대신 구체적인 오류 메시지가 표시됩니다.

예시

입력

XML:
<bookstore>
  <book><title>The Great Gatsby</title><price>12.99</price></book>
  <book><title>Learning XPath</title><price>34.50</price></book>
  <book><title>Dune</title><price>45.00</price></book>
</bookstore>

XPath: //book[price>30]/title

결과

✓ 2 node(s) matched
<title>Learning XPath</title>
<title>Dune</title>

책 3권 중 가격이 30을 넘는 것은 2권뿐이므로 정확히 2개의 <title> 요소가 반환됩니다 — 세 번째 책(Gatsby, $12.99)은 올바르게 제외됩니다.

한눈에 보는 XPath vs CSS 선택자

두 언어 모두 문서에서 노드를 선택하지만 해결하는 문제가 다릅니다. 아래 표를 참고해 상황에 맞는 도구를 고르세요.

기능	XPath	CSS 선택자
태그/클래스/ID로 아래 방향 선택	가능	가능 — 대체로 더 빠름
보이는 텍스트/내용으로 선택	가능 — `contains(text(),'x')`	불가능
부모/조상으로 위 방향 탐색	가능 — `//div[span]/..`	불가능(`:has()`가 최근에 부분적으로 예외)
형제 값 비교(예: `price>30`)	가능	불가능
브라우저 밖에서도 동작(서버 측 XML 도구, XSLT)	가능	불가능 — CSS 선택자는 브라우저/DOM 전용

자주 묻는 질문

XPath는 어디에 쓰이나요?

XPath는 경로 문법을 사용해 XML이나 HTML 문서에서 요소, 속성, 텍스트 같은 노드를 선택합니다. XSLT 변환의 선택 언어이자 많은 XML 검증 도구의 기반이며, 웹 스크레이핑과 브라우저 테스트 자동화(Selenium, Playwright, Cypress)에서 페이지의 요소를 찾을 때 널리 쓰입니다. 특히 CSS 선택자만으로는 표현할 수 없는 조건일 때 유용합니다.

XPath와 CSS 선택자 중 어느 쪽을 써야 하나요?

둘은 겹치는 부분이 있지만 동등하지 않습니다. XPath는 자식의 내용을 기준으로 부모를 선택하거나(`//div[span='Total']`), 조상 방향으로 위로 탐색하거나, 보이는 텍스트로 선택할 수 있습니다(`//button[contains(text(),'Submit')]`) — CSS 선택자는 트리에서 위로 올라갈 수 없고 텍스트 내용으로는 전혀 매칭할 수 없습니다. 태그, 클래스, ID로 아래 방향으로만 선택한다면 CSS 선택자가 작성하기 더 간단하고 대체로 평가 속도도 더 빠릅니다. "이 텍스트의 부모를 선택"하거나 "요소가 뭐라고 말하는지로 선택"해야 할 때, 즉 태그나 클래스가 아니라 내용 기준일 때 XPath를 쓰세요.

이 도구는 XPath 2.0이나 3.0 함수를 지원하나요?

아니요 — 어떤 브라우저도 지원하지 않습니다. 브라우저는 `document.evaluate()`를 통해 XPath 1.0(1999년 W3C 권고안)을 구현하며, 이 도구는 바로 그 네이티브 엔진을 사용하므로 브라우저 개발자 도구나 자바스크립트에서 같은 표현식을 실행했을 때와 정확히 일치합니다. XPath 2.0/3.0/3.1에서 도입된 함수와 기능(`for` 표현식, 시퀀스, 정규식을 쓰는 `matches()` 등)은 사용할 수 없습니다 — `contains()`, `starts-with()`, `substring()`, `count()`, `position()`, `last()` 같은 1.0 함수만 여기서 동작합니다.

알아두면 좋은 흔한 XPath 표현식은 무엇인가요?

`//tag`는 문서 어디에 있든 모든 `<tag>`를 선택합니다. `//tag[@attr='value']`는 `attr` 속성이 `value`와 같은 `<tag>` 요소를 선택합니다. `//tag[contains(text(),'x')]`는 직접 텍스트에 `x`를 포함하는 `<tag>` 요소를 선택합니다. `//tag[1]`은 각 부모 안에서 첫 번째 `<tag>` 형제를 선택합니다. `//parent/child`는 `<parent>`의 직접 자식인 `<child>` 요소를 선택합니다. `count(//tag)`는 노드 집합 대신 숫자를 반환합니다.

이 도구는 XML 네임스페이스를 처리하나요?

네임스페이스가 없는 일반적인 경우만 깔끔하게 지원하며, 이는 직접 작성했거나 스크레이핑한 XML/HTML 대부분에 해당합니다. 문서가 XML 네임스페이스를 선언하는 경우(예: 루트 요소의 `xmlns="..."`), `document.evaluate`는 접두사를 URI로 매핑하는 네임스페이스 인식 리졸버 함수를 요구하는데 이 간단한 도구는 이를 설정하지 않으므로, 겉보기엔 맞아 보이는 표현식도 네임스페이스가 있는 XML에서는 0개의 일치를 반환할 수 있습니다. 이는 버그가 아니라 알려진 한계입니다: 샘플에서 네임스페이스 선언을 제거하거나, local-name() 함수(예: `//*[local-name()='title']`)를 우회 방법으로 사용하세요.

제 XML이나 XPath 표현식이 서버로 전송되나요?

아닙니다. 모든 처리는 브라우저에 내장된 `DOMParser`와 `document.evaluate()`를 사용해 로컬에서 이루어집니다 — 브라우저가 내부적으로 이미 사용하는 것과 동일한 엔진입니다. 입력하거나 붙여넣은 어떤 내용도 기기를 벗어나지 않습니다.