
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;meta charset="utf-8"&gt;
	&lt;title&gt;hashscraper&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;div id="container"&gt;
		&lt;div class="title"&gt;
			&lt;p class="content1"&gt;let's start crawling!&lt;/p&gt;
			&lt;p class="content2"&gt;crawling is fun!&lt;/p&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

2. HTML 코드

다음은 간단한 HTML 코드입니다.

HTML 코드는 요소(element)와 속성(attribute)으로 이루어져 있으며, 각 요소와 속성들은 계층 관계를 이루고 있습니다.

XPath는 XML 문서를 트리 구조로 표현하며 최상위 노드부터 최하위 노드까지 모든 노드들과 속성, 데이터를 추출할 수 있는 경로를 나타내줍니다.

(*여기서 노드는 요소, 속성, 텍스트 내용과 같은 XML 문서의 각 부분을 의미합니다.)

위의 코드에서 title 요소에 접근하기 위한 경로를 가져와봅시다.

title 요소는 트리 구조상의 순서로 보면 html 요소 → head 요소 → title 요소 순으로 이루어져있습니다.

따라서 title 요소의 XPath를 나타내면 다음과 같습니다.


/html/head/title

또한, XPath에서는 class와 같이 요소를 결부하는 속성을 “@”로 표현합니다. @를 사용하여 위의 코드에서 첫번째 p 요소의 XPath를 나타내면 다음과 같습니다.


/html/body/div/div/p[@class='content1']

3. Xpath의 두 가지 표현법

XPath는 두가지 방식으로 나타낼 수 있는데, 절대 경로와 상대 경로로 나타낼 수 있습니다.

3.1. Xpath : 절대 경로

절대 경로는 위에서 사용한 방식과 동일하며, 가장 상위의 루트 노드에서부터 요소를 선택하는 방식입니다.


html/body/div/div/p[@class='content1']

3.2. Xpath : 상대 경로

상대 경로는 ‘//’를 사용하여 중간 노드 path를 생략하고 지정된 노드에서부터 순서대로 탐색을 진행합니다. 위의 절대 경로를 상대 경로로 나타내면 다음과 같습니다.


//p[@class='content1']

4. 그 외의 표현 문법

이 외에도 XPath에서는 경로를 나타내기 위해 다양한 문법을 사용하고 있습니다.

4.1. contains

: 해당 값을 포함하는 경우를 가져옵니다.


#'aa'를 포함하는 class명을 가진 div 요소를 선택
//div[contains(@class, "aa")]

4.2. last

: path에 해당되는 노드 중 마지막 노드를 가져옵니다.


//div[@class="aa")/span[last()]

4.3. and

: 두 조건을 모두 만족하는 노드를 가져옵니다.


#class명에 'aa'와 'bb'를 포함하는 img 요소를 선택
//img[contains(@class, "aa") and contains(@class, "bb")]

4.4. or

: 두 조건 중 하나 이상을 만족하는 노드를 가져옵니다.


#class명에 'aa' 또는 'bb'를 포함하는 img 요소를 선택
//img[contains(@class, "aa") or contains(@class, "bb")]

4.5. not

: 해당 조건을 만족하지 않는 노드를 가져옵니다.


#class명에 'aa'를 포함하고 'bb'를 포함하지 않는 img 요소를 선택
//img[contains(@class, "aa") and not(contains(@class, "bb")

5. 예제 실습

지금까지 XPath의 기본 문법을 살펴보았습니다. 이제 웹 사이트에서 내가 원하는 부분의 xpath를 가져와볼까요?

5.1. 개발자 도구 열기

먼저 원하는 웹 사이트를 열어준 뒤, 마우스 왼쪽을 클릭하고 ‘검사’를 눌러주면 chrome 개발자도구가 열리는 것을 볼 수 있습니다.

5.2. 내가 원하는 태그 확인하기

개발자도구에서 좌측 상단의 마우스 표시를 눌러줍니다. 그리고 마우스를 웹 사이트의 가져오고 싶은 부분에 가져다대면 아래와 같이 나옵니다.

마우스를 가져다댄 곳을 클릭하면 개발자도구에서 실제 html 코드에서 내가 원하는 부분의 태그를 보여줍니다.

5.3. Xpath 복사하기

해당 부분을 Copy > Copy XPath 한 후 복사한 내용을 붙여넣기 해보면 내가 원하는 부분의 XPath를 가져올 수 있습니다!

다음과 같이 내가 원하는 부분의 XPath가 정상적으로 이동한 것을 확인할 수 있습니다.


//*[@id="home"]/div/div/div[1]/h1

그렇다면 이렇게 가져온 XPath는 크롤링에 어떻게 사용될까요? 크롤링 코드의 일부를 가져와보았습니다.


get_browser.goto "&lt;https://www.hashscraper.com&gt;"
x = get_browser.element(xpath: "//*[@id='home']/div/div/div[1]/h1").text

5.4. 작동 확인

다음과 같이 XPath를 이용하여 내가 원하는 요소를 가져와서 x에 저장하였고, x를 프린트해보면 다음과 같이 내가 원했던 텍스트가 나오는 것을 볼 수 있습니다.

6. 결론 : 제대로된 크롤링하려면 Xpath부터 공부하자

지금까지 크롤링의 기초, XPath에 대해 알아보았습니다. 크롤링을 통해 내가 원하는 데이터를 수집하기 위해서는 해당 데이터가 어떤 경로를 통해 나타내어질 수 있는지 알아야하며, 이는 XPath를 통해 간단히 표현할 수 있습니다. XPath 공부를 시작으로, 크롤링을 시작하시는 것을 추천드립니다!