Xpath란, 크롬 개발자도구에서 Xpath 확인하기

Xpath란, 크롬 개발자도구에서 Xpath 확인하기

Xpath란

selenium을 사용하거나 웹개발 등을 할 때 웹사이트의 HTML element를 선택해야할 때가 있습니다.
이럴 때, Xpath를 사용할 수 있습니다.

명확한 정의로는 XPath는 XSLT 표준의 주요 요소이며,
XPath는 XML 문서의 요소 및 속성을 탐색하는 데 사용될 수 있도록 하여
항목을 배치하고 처리하는 방법을 기술하는 언어입니다.
XPath는 XML 문서의 노드를 정의하기 위하여 경로식을 사용하며, 수학 함수와 기타 확장 가능한 표현들이 있습니다.

Xpath 예제

아래와 같은 XML문서가 있다고 칩시다.

<?xml version="1.0" encoding="UTF-8"?>

<bookstore>

<book category="cooking">
  <title lang="en">Everyday Italian</title>
  <author>Giada De Laurentiis</author>
  <year>2005</year>
  <price>30.00</price>
</book>

<book category="children">
  <title lang="en">Harry Potter</title>
  <author>J K. Rowling</author>
  <year>2005</year>
  <price>29.99</price>
</book>

<book category="web">
  <title lang="en">XQuery Kick Start</title>
  <author>James McGovern</author>
  <author>Per Bothner</author>
  <author>Kurt Cagle</author>
  <author>James Linn</author>
  <author>Vaidyanathan Nagarajan</author>
  <year>2003</year>
  <price>49.99</price>
</book>

<book category="web">
  <title lang="en">Learning XML</title>
  <author>Erik T. Ray</author>
  <year>2003</year>
  <price>39.95</price>
</book>

</bookstore>

Xpath 표현예제 별로 아래와 같은 표현식으로 XML Element를 선택할 수 있습니다.

/bookstore/book[1] : bookstore XML Element 자식인 첫 번째 book  XML Element선택

/bookstore/book[last()] : bookstore XML Element의 자식인 첫 번째 책 XML Element 선택

/bookstore/book[last()-1] : bookstore XML Element의 자식인 첫 번째 책 XML Element 선택

/bookstore/book[position()<3] : bookstore XML Element의 자식인 처음 두 개의 책 XML Element를 선택

//title[@lang] : lang이라는 속성을 가진 모든 title XML Element를 선택

//title[@lang='en'] : "en" 값을 갖는 "lang" 속성을 갖는 모든 title XML Element를 선택

/bookstore/book[price>35.00] : "en" 값을 갖는 "lang" 속성을 갖는 모든 제목 XML Element를 선택

/bookstore/book[price>35.00]/title : 35.00 이상의 값을 가지는 가격을 가지는 bookstore XML Element의 모든 book XML Element를 선택

구글 크롬 개발자 도구에서 XPath 확인하기

1. Xpath를 확인하고 싶은 웹페이지를 띄웁니다.
이 예제에서는 https://google.com을 접속해보겠습니다.

2. F12를 눌러 개발자 도구를 띄웁니다.

 

3. 아래에 표시된 아이콘을 누르거나, Ctrl + Shift + C를 누릅니다

 

4. Xpath를 확인할 Element를 브라우저에서 선택합니다.
그러면 Elements 탭에서 HTML 코드상 해당하는 Element가 블록이 됩니다.

 

5. 앞에서 선택된 부분을 마우스 우측클릭합니다.

6. context menu에서 Copy > Copy Xpath를 선택합니다.
그러면 Xpath가 복사되었습니다.
Xpath가 잘 복사되었는지 확인해보겠습니다.

 

7. 개발자도구에서 ctrl + F를 누릅니다.

그러면 아래와 같이 검색창이 뜹니다. 

8. 검색창에 ctrl + v를 해 봅니다.
그러면 선택하려는 element가 아래와 같이 노란색으로 블록되어, 

Xpath 문자열이 정상적으로 복사된 것을 확인할 수 있습니다.

총평

개인적으로 웹 개발에 익숙해서 HTML selector를 할때 CSS Selector만 사용하였었는데요,
개발하다보면 종종 xpath 로 만들어진 예제가 있어서 찾아보게 되었습니다.
Xpath가 좀 더 다양하고 유연하게 대응가능한게 큰 장점인거 같습니다.
CSS Selector는 CSS나 Jquery 에서 selector 를 다뤘던 경험이 있으면 쉽게 사용할 수 있는 장점이 있습니다.
요즘에는 CSS Selector도 다양한 조건으로 검색이 가능하긴 하지만,
그럼에도 일부 라이브러리에서 지원하지 않는 경우도 있기에 XPath도 써 보면서 익숙해지면 좋을거 같습니다.

#xpath,#selector,#cssselector,#css,#element,#xml,#html,#요소선택,#요소,#구글,#크롬,#개발자도구

 

https://devscb.com/post/164

What is Xpath? Check Xpath in Chrome Developer Tools