XPath는 Octoparse를 사용하여 데이터를 가져올 때 중요한 역할을 합니다. XPath로 누락된 페이지, 누락된 데이터 또는 중복 데이터 등을 처리할 수 있습니다. 처음 XPath를 알게 된 분들은 꽤 어렵게 느껴지겠지만 겁먹을 필요는 없습니다. 이 글에서는 XPath를 간단히 소개하고 스크래핑 작업에서 필요한 데이터 정확하게 매치하여 가져오는 데 사용할 수 있는 방법을 보여드리겠습니다.
1. XPath란 무엇입니까?
XPath(XML Path 언어)는 XML/HTML 문서에서 요소를 선택하기 위한 쿼리 언어입니다. 전체 문서에서 요소를 정확하고 빠르게 찾는 데 도움이 될 수 있습니다.
웹 페이지는 일반적으로 HTML이라는 언어로 작성됩니다. 브라우저(Chrome, Firefox 등)에 웹 페이지가 로딩되면 F12 키를 눌러 해당 HTML 문서에 쉽게 접근할 수 있습니다. 이미지, 텍스트 블록, 링크, 메뉴 등 웹 페이지에서 볼 수 있는 모든 것은 HTML 내에서 찾을 수 있습니다.
XPath는 HTML 문서에서 요소를 찾아야 할 때 가장 일반적으로 사용되는 언어입니다. HTML 문서 내에서 대상 요소를 찾는 "경로"로 쉽게 이해할 수 있습니다.
XPath의 작동 방식을 더 자세히 설명하기 위해 다음 예를 들어보겠습니다.
이미지는 HTML 문서의 일부를 보여줍니다.
HTML은 트리 구조처럼 다양한 레벨의 요소를 가지고 있습니다. 이 예에서 레벨 1은 bookstore이고 레벨 2는 book입니다. title, author, year, price 모두 레벨 3입니다.
홑화살괄호(<bookstore>)가 있는 텍스트를 태그라고 합니다. HTML 요소는 일반적으로 시작 태그와 끝 태그로 구성되며 그사이에 내용이 삽입됩니다.
<tagname>내용</tagname>
XPath는 요소의 위치를 지정하기 위해 "/"를 사용하여 위에서 아래로 다른 레벨의 태그를 연결합니다. 예를 들어 "author" 요소를 찾으려면 XPath가 다음과 같습니다.
/bookstore/book/author
작동 원리를 이해하는 데 어려움이 있는 경우 컴퓨터에서 특정 파일을 찾는 방법에 대해 생각해 보십시오.
"author"라는 이름의 파일을 찾으려면 정확한 파일 경로는 \bookstore\book\author입니다. 이제 작동 원리가 좀 이해되시나요?
컴퓨터의 모든 파일에는 고유한 경로가 있으며 웹 페이지의 요소도 마찬가지입니다. XPath를 사용하면 컴퓨터에서 파일을 찾듯이 페이지 요소를 빠르고 쉽게 찾을 수 있습니다.
루트 요소(문서의 맨 위 요소)에서 시작하여 그 사이의 모든 요소를 거쳐 대상 요소로 이동하는 XPath를 절대 XPath라고 합니다.
예: "/html/body/div/div/div/div/div/div/div/div/div/div/div/div/div/span/span/span..."
절대 경로는 길고 혼란스러울 수 있으므로 절대 XPath를 단순화하기 위해 "/"를 사용하여 XPath를 시작할 요소(짧은 XPath라고도 함)를 참조할 수 있습니다. 예를 들어 /bookstore/book/author에 대한 짧은 XPath를 //book/author로 쓸 수 있습니다. 이 짧은 XPath는 HTML의 절대적인 위치에 관계 없이 요소 book을 찾은 다음 한 단계 아래로 내려가 대상 요소 author를 찾습니다.
2. Octoparse를 사용할 때 XPath를 알아야 하는 이유?
Octoparse로 웹 페이지를 스크랩하는 것은 실제로 HTML 문서에서 요소를 스크랩하는 것입니다. XPath는 문서에서 대상 요소를 찾는 데 사용됩니다. 페이지 넘기기를 예로 들어보겠습니다.
페이지 넘기기 작업을 구축할 다음 버튼을 선택하면 Octoparse는 다음 버튼을 찾을 수 있는 XPath를 생성하여 어떤 버튼을 클릭해야 하는지 알 수 있습니다.
XPath는 크롤러가 마우스 클릭하거나 대상 데이터를 가져오는 데 도움이 됩니다. Octoparse가 수행하는 거의 모든 작업은 XPath를 기반으로 합니다. Octoparse는 XPath를 자동으로 생성할 수 있지만 자동으로 생성된 XPath가 작업 수요에 맞지 않은 경우가 종종 있습니다. 그렇기 때문에 XPath를 다시 작성하는 법을 배워야 합니다.
누락된 데이터, 무한 루프, 틀린 위치의 데이터, 중복 데이터, 다음 버튼이 클릭 되지 않는 등의 문제를 처리할 때 XPath를 다시 작성하면 이러한 문제를 쉽게 해결할 수 있습니다.
3. XPath 작성 방법(치트시트 포함)
XPath를 작성하기 전에 먼저 몇 가지 주요 용어를 다루겠습니다.
다음은 시연에 사용할 샘플 HTML입니다.
속성/값
속성은 요소에 대한 추가 정보를 제공하며 요소의 시작 태그에 항상 지정됩니다. 속성은 일반적으로 name="value"와 같은 name/value 쌍으로 제공됩니다. 가장 일반적인 속성으로는 href, title, style, src, id, class 등이 있습니다. 전체 HTML 속성 참조는 여기에서 찾을 수 있습니다.
예에서 id="book"은 <div> 요소의 속성이고 class="book_name"은 <span> 요소의 속성입니다.
부모/자녀/형제자매
요소 내에 하나 이상의 HTML 요소가 포함된 경우 다른 요소를 포함하는 요소를 상위 요소라고 하며, 포함된 요소는 상위 요소의 하위 요소입니다. 각 요소에는 부모가 하나뿐이지만 자녀가 0명 또는 하나 이상 있을 수 있습니다. 자식은 부모의 시작 태그와 끝 태그 사이에 있습니다.
예에서 <body> 요소는 <h1> 및 <div> 요소의 상위 요소입니다. <h1> 및 <div> 요소는 <body> 요소의 자식입니다.
<div> 요소는 두 <span> 요소의 상위 요소입니다. <span> 요소는 <div> 요소의 자식입니다.
부모가 같은 원소를 형제자매라고 합니다. <h1>과 <div> 요소는 같은 부모 <body>를 가지므로 형제자매입니다.
<div> 요소 아래에 움푹 들어간 두 개의 <span> 요소도 형제자매입니다.
몇 가지 일반적인 사용 사례를 살펴봅시다!
XPath를 작성하여 다음 페이지 버튼 찾기
따라서 먼저 HTML의 다음 페이지 버튼을 자세히 검사해야 합니다. 아래 샘플 HTML에서 눈에 띄는 것은 두 가지입니다. 첫째, "Next" 값을 갖는 제목 속성이 있고, 둘째, "Next" 내용이 있습니다.
이 경우 제목 속성 또는 내용 텍스트를 사용하여 HTML의 다음 페이지 버튼을 대상으로 할 수 있습니다.
"Next" 값을 갖는 제목 특성을 갖는 <a> 요소를 찾는 XPath는 다음과 같습니다. //a[@title="Next"]
이 XPath는 기본적으로 제목 속성이 "Next"인 <a> 요소로 이동합니다. @기호는 XPath에서 속성을 대상으로 사용됩니다.
또는 내용에 "Next"이 포함된 <a> 요소를 찾는 XPath는 다음과 같습니다. //a[contains(text(), "Next")]
이 XPath는 "Next" 텍스트를 포함하는 내용의 <a> 요소로 이동합니다.
제목 속성과 텍스트 포함 내용을 모두 사용하여 XPath를 작성할 수도 있습니다.
//a[@title="Next" and contains(text(), "Next")]
이 XPath는 "Next" 값을 갖는 제목 속성을 갖고 또 "Next" 텍스트를 포함하는 내용을 가진 <a> 요소로 이동합니다.
XPath를 작성하여 루프 아이템 찾기
웹 페이지의 아이템 목록을 대상으로 하려면 아이템 목록 중에서 패턴을 찾는 것이 중요합니다. 동일한 목록의 아이템은 일반적으로 동일하거나 유사한 속성을 공유합니다. 아래의 HTML 샘플에서 모든 <li> 요소가 유사한 class 속성을 가지고 있음을 확인할 수 있습니다.
관찰 결과에 따라 contains(@attribute)를 사용하여 목록의 모든 항목을 대상으로 할 수 있습니다.
//li[contains(@class, product_item")]
이 XPath는 class 속성이 "product_item"을 포함하는 <li> 요소로 이동합니다.
XPath를 작성하여 데이터 필드 찾기
특정 데이터 필드를 찾는 것은 text() 또는 속성을 사용하여 다음 페이지 버튼을 찾는 것과 매우 유사합니다.
위의 샘플 HTML에서 address를 찾는 XPath를 작성하려면 다음과 같이 하십시오. "address" 값을 갖는 itemprop 속성을 사용하여 특정 요소를 대상으로 할 수 있습니다.
//div[@itemprop="address"]
이 XPath는 "address" 값을 갖는 itemprop 속성을 갖는 <div> 요소로 이동합니다.
또 다른 방법이 있습니다. 실제 주소를 포함하는 <div> 요소가 "Location:" 내용이 있는 형제 <div> 요소의 뒤에서 발견되는 방법이 있습니다. 따라서 먼저 "Location:" 텍스트를 찾은 다음 그다음으로 붙은 첫 번째 형제 요소를 선택할 수 있습니다.
//div[contains(text(),”Location”)]/following-sibling::div[1]
이 XPath는 내용 "Location"이 포함된 <div> 요소로 이동한 다음 첫 번째 형제 <div> 요소로 이동합니다.
이제 HTML에서 한 요소를 찾기 위한 한 가지 이상의 방법이 있다는 것을 알았을 겁니다. 핵심은 HTML에서 대상 요소를 찾는 데 도움이 되는 태그, 속성, 내용 텍스트, 형제자매, 부모 등을 사용하는 것입니다.
사용자가 쉽게 작업할 수 있도록 HTML의 모든 요소를 빠르게 찾을 수 있는 XPath 치트시트를 제공합니다.
표현법 | 예 | 의미 |
* 모든 요소를 선택합니다. | //div/* | <div> 요소의 모든 자식 요소를 선택합니다. |
@ 속성을 선택합니다. | //div[@id="book"] | "book" 값을 갖는 "id" 속성을 갖는 모든 <div> 요소를 선택합니다. |
text() 정확한 텍스트를 가진 요소를 찾습니다. | //span[text()="Harry Potter"] | 내용이 정확히 "해리포터"인 모든 <span> 요소를 선택합니다. |
contains() 특정 문자열을 포함하는 요소를 선택합니다. | //span[contains(@class, "price")] | class 속성 값에 "price"가 포함된 모든 <span> 요소를 선택합니다. |
| //span[contains(text(),"Learning")] | 내용에 "Learning"이 포함된 모든 <span> 요소를 선택합니다. |
position() 특정 위치의 요소를 선택합니다. | //div/span[position()=2] //div/span[2] | <div> 요소의 하위 요소인 두 번째 <span> 요소를 선택합니다. |
| //div/span[position()<3] | <div> 요소의 하위 요소인 처음 2개의 <span> 요소를 동시에 선택합니다. |
last() 마지막 요소를 선택합니다. | //div/span[last()] | <div> 요소의 하위 요소인 마지막 <span> 요소를 선택합니다. |
| //div/span[last()-1] | <div> 요소의 하위 요소인 중 마지막 요소를 제외한 하나의 <span> 요소를 선택합니다. |
| //div/span[position()>last()-3] | <div> 요소의 하위 요소인 마지막 3개의 <span> 요소를 선택합니다. |
not 지정된 조건과 반대되는 요소를 선택합니다. | //span[not(contains(@class,"price"))] | class 속성 값에 price가 포함되지 않은 모든 <span> 요소를 선택합니다. |
| //span[not(contains(text(),"Learning"))] | 텍스트에 "Learning"이 포함되지 않은 모든 <span> 요소를 선택합니다. |
and 여러 조건이 동시에 만족하는 요소를 선택합니다. | //span[@class="book_name" and text()="Harry Potter"] | class 속성 값이 "book_name"이고 텍스트가 "Harry Potter"인 모든 <span> 요소를 선택합니다. |
or 조건 중 하나 이상 만족하는 요소를 선택합니다. | //span[@class="book_name" or text()="Harry Potter"] | class 속성 값이 "book_name"이거나 텍스트가 "Harry Potter"인 모든 <span> 요소를 선택합니다. |
following-sibling 현재 요소 뒤에 있는 모든 형제 요소를 선택합니다. | //span[text()="Harry Potter"]/following-sibling::span[1] | 텍스트가 "Harry Potter"인 <span> 요소 뒤에 첫 번째 <span> 요소를 선택합니다. |
preceding-sibling 현재 요소 앞에 있는 모든 형제 요소를 선택합니다. | //span[@class="regular_price"]/preceding-sibling::span[1] | class 속성 값이 "regular_price"인 <span> 요소 앞에 첫 번째 <span> 요소를 선택합니다. |
.. 현재 요소의 부모 요소를 선택합니다. | //div[@id="bookstore"]/.. | ID 속성 값이 "bookstore"인 <div> 요소의 부모를 선택합니다. |
| 여러 경로를 동사에 선택합니다. | //div[@id="bookstore"] //span[@class="regular_price"] | ID 속성 값이 "bookstore"인 모든 <div> 요소와 class 속성 값이 "regular_price"인 모든 <span> 요소를 선택합니다. |
*속성과 텍스트값은 모두 대소문자를 구분해야 합니다.
*XPath에 대한 보다 자세한 치트시트는 여기에서 확인하십시오.
4. 절대 XPath 및 상대 XPath의 경우(루프)
지금까지 웹 페이지에서 직접 요소를 추출해야 할 때 XPath를 작성하는 방법에 대해 설명했습니다. 그러나 먼저 대상 항목 목록을 작성한 다음 각 항목에서 데이터를 추출해야 하는 경우가 있습니다. 예를 들어, 다음과 같은 결과 페이지에서 데이터를 추출해야 할 때(https://www.bestbuy.com/site/promo/tv-deals) .
이 경우 요소를 직접 캡처하는 데 사용할 절대 XPath뿐만 아니라 목록과 관련된 특정 목록 항목의 상대적 위치를 지정하는 루프 아이템의 상대 XPath도 알아야 합니다.
Octoparse에서 데이터 필드의 XPath를 수정하면 두 종류의 XPath가 표시됩니다.
절대 XPath는 웹 페이지에서 직접 데이터를 추출할 때 사용됩니다.
참고: Octoparse의 절대 XPath를 작성하는 방법에 대해 설명했습니다. 그러나 먼저 대상 항목 목록을 작성한 다음 각 항목에서 데이터를 추출해야 하는 경우가 있습니다. 예를 들어, 다음과 같은 결과 페이지에서 데이터를 추출해야 할 때(https://www.bestbuy.com/site/promo/tv-deals) .
이 경우 요소를 직접 캡처하는 데 사용할 절대 XPath뿐만 아니라 목록과 관련된 특정 목록 항목의 상대적 위치를 지정하는 루프 아이템의 상대 XPath도 알아야 합니다.
Octoparse에서 데이터 필드의 XPath를 수정하면 두 종류의 XPath가 표시됩니다.
참고: 절대 XPath는 웹 페이지에서 직접 데이터를 추출할 때 사용됩니다. 상대 Xpath는 복잡한 "/html/body/div/div/div/div/div/div/span/span…"이 아니라 "//h1[@class="..."]/span[2]..."처럼 간결할 수도 있습니다.
팁: 데이터 미리보기를 세로 보기 모드로 전환하여 XPath 유형과 각 요소 XPath도 쉽게 확인할 수 있습니다.
상대 XPath는 루프 항목에서 데이터를 추출할 때 사용됩니다. 특히 다음과 같은 워크플로우를 구축할 때:
예를 들어 <li> 요소의 루프 목록을 만들고 목록의 개별 <li> 요소 내에 포함된 요소를 스크랩하려면 XPath //ul[@class="results"]/li를 사용하여 목록을 찾을 수 있습니다.
목록에 있는 요소의 XPath가 //ul[@class="results"]/li/div/a[@class="link"]라고 가정합니다. 따라서 이 경우 상대 XPath는 /div/a[@class="link"]여야 합니다. 또는 "/"를 사용하여 //a[@class="link"로 이 상대적 XPath를 단순화할 수 있습니다. 상대 XPath를 작성할 때는 "//"를 사용하는 것이 표현을 더 간결하게 만들 것이므로 더 추천하는 방식입니다.
서로 다른 XPath 간의 관계는 다음과 같습니다.
루프 항목 XPath: //ul[@class="results"]/li
루프 항목에서 찾으려는 요소의 Xpath: //ul[@class="results"]/li/div/a[@class="link"]
루프 항목에 대한 상대 XPath: /div/a[@class="link"]
그런 다음 Octoparse에 루프 아이템 XPath와 상대 XPath를 다음과 같이 입력해야 합니다.
루프 목록에 대한 XPath와 상대 XPath를 하나의 XPath로 결합하면 요소에 대한 XPath가 정확히 표시됩니다.
5. XPath를 수정하는 간단한 절차 4가지
1단계: 브라우저를 사용하여 XPath 도구(HTML을 보면서 XPath 쿼리를 검색할 수 있는 도구)를 사용하여 웹 페이지를 엽니다. Chrome을 사용하는 경우 Path helper(Chrome 플러그인)를 추천합니다.
2단계: 웹 페이지가 로딩되면 HTML의 대상 요소를 검사합니다.
3단계: HTML 요소와 주변 요소를 자세히 관찰합니다. 눈에 띄는 대상 요소를 식별하고 찾는 데 도움이 될 만한 것이 있을까요? class="sku-title" 또는 class="sku-header"와 같은 클래스 속성일까요?
위의 치트시트를 사용하여 요소를 정확하게 선택하는 XPath를 작성합니다. XPath는 전체 HTML 문서에서 대상 요소와 일치해야 하며 다른 항목은 일치하지 않아야 합니다. XPath 도우미를 사용하면 다시 작성된 XPath가 제대로 작동하는지 항상 테스트할 수 있습니다.
4단계: 자동 생성된 XPath를 Octoparse에서 교체합니다.
더 많은 단계별 튜토리얼:
6. XPath 문제 해결 튜토리얼
대부분의 경우 XPath를 스스로 작성할 필요가 없습니다. 그러나 더 정확하게 수집하기 위해 약간의 수정이 필요한 상황이 있습니다.
루프 문제
페이지 넘기기 문제
데이터 필드 문제
7. XPath 도구
Octoparse에서 HTML 코드를 직접 확인하는 것은 쉽지 않기 때문에 XPath를 생성하는 데 유용한 몇 가지 도구를 사용해야 합니다.
크롬/임의 브라우저
어떤 브라우저를 사용하든 요소에 대한 XPath를 쉽게 얻을 수 있습니다. 크롬을 예로 들어보겠습니다.
Chrome에서 웹 페이지 열기
XPath를 찾으려는 항목을 마우스 오른쪽 버튼으로 클릭합니다.
"검사"를 선택하면 Chrome 개발자 도구가 표시됩니다.
콘솔에서 강조 표시된 영역을 마우스 오른쪽 버튼으로 클릭합니다.
복사 -> XPath 복사
그러나 속성이 없거나 속성값이 너무 긴 경우 복사된 XPath는 절대 XPath인 경우가 있습니다. 이런 경우 상대 XPath를 다시 작성해야 할 수 있습니다.
XPath Helper(다운로드)
XPath Helper는 브라우저에서 요소 위에 대기만 하면 XPath를 검색할 수 있는 뛰어난 크롬 플러그인입니다. 콘솔에서 XPath 쿼리를 직접 편집할 수도 있습니다. XPath가 제대로 작동하는지 여부를 알 수 있도록 직접 검증할 수도 있습니다.
XPath에 대한 자세한 내용: