logo
languageKRdown
menu

스크래핑 꿀팁: 다음 페이지 넘기기

5 분 열독

가끔 스크래핑하다 보면 페이지 넘기기 단계에서 문제가 생기는 경우가 많습니다.

오늘은 octoparse에서 올리브영 상품 정보를 스크래핑할 때 xpath 경로를 찾고 페이지네이션 xpath를 쓰는 방법에 대해 공유하겠습니다. 구글 크롬 브라우저, Edge 브라우저 모두 적용되는 방법입니다.

예시용 사이트:

맨즈케어 > 스킨케어 > 토너/로션/크림/세트 | 올리브영 (oliveyoung.co.kr)

페이지네이션 xpath 작성 방법(octoparse)

1. xpath 경로 찾기

xpath 경로를 찾기 위해서는 먼저 개발자 도구를 열어야 합니다. 개발자 도구를 여는 가장 흔한 방법은 다음 두 가지입니다.

  • F12키를 눌러 개발자 도구 열기
  • 현재 페이지 블록에서 마우스 오른쪽 클릭한 후 “검사” 버튼을 클릭하여 개발자 도구 열기

“검사” 버튼을 클릭하면 다음과 같이 화면 왼쪽에 콘솔이 나타납니다.

2.페이지네이션 부분 코딩을 찾고 xpath 쓰기

보통”page”,”pagination”,”pageing” 등 단어와 1,2,3 등 숫자열로 구성된 부분이 페이지 넘기기 부분의 코딩입니다.

가장 유효한 페이지네이션 xpath 작성법은 현재 페이지 기준으로 다음 순서의 버튼을 클릭하는 것입니다.

이런 의미에서 예시 웹 페이지의 페이지넘기기 코드를 보면 총 페이지 네이션은 class 속성이 “pageing” 인 div 블록이죠.

여기서 현재 페이지는 title 속성이 “현재 페이지”라고 표기된 strong 블록입니다.

strong, a 두 블록은 열위치가 같기에 평등 독립적인 관계라고 할 수 있습니다.

*잘 관찰하면 div가 strong, a보다 더 앞에 있고 strong, a를 동시에 포괄하는 관계 즉 부모자식관계이며, strong, a는 열위치가 같으므로 동등한 형제자매 관계입니다.

그러므로 “현재 페이지”를 기준으로 그다음 페이지 블록을 매칭할 수 있습니다.

위와 같은 방법으로 다음과 같은 xpath를 쓸 수 있습니다.

//div[@class=”pageing”]//strong[contains(@title,’현재 페이지’)]/following-sibling::a[1]

class 속성이 “pageing” 인 div 블록에서 title 속성이 “현재 페이지”라고 표기된 strong 블록을 찾은 뒤 그 뒤에 붙은 같은 급의 a 형제 블록을 찾으라는 뜻입니다.

이렇게 상대적인 위치로 xpath를 작성하면 좋은 점은 3,4,5,6페이지로 가서도 자동으로 다음 페이지 버튼을 안정적으로 잘 찾는다는 점입니다.

비슷한 방법으로 작성한 흔한 페이지 네이션 xpath(예시):

//div[@id=”page-selection”]//li[contains(@class,’active’)]/following-sibling::li[1]

//div[@class=”paging mo-blind”]//li[contains(@class,’on’)]/following-sibling::li[1]

3. xpath 입력 및 검증

xpath를 잘 쓰기 위해서는 먼저 xpath helper 플러그인을 설치하셔야 합니다.

XPath Helper – Chrome (google.com)

설치 후 브라우저에서 웹 사이트 주소 입력창 오른쪽에 플러그인을 클릭하면 query 입력창과 result 출력창으로 구성된 패널이 나타납니다.

query 입력창에 방금 작성한 xpath를 입력하면 result 출력창에 결과가 표시됩니다.

이 외에도 웹 페이지에서 결과 예시 부분이 연노랑으로 강조 표시되는 것을 볼 수 있습니다.

4. octoparse에서 xpath 적용하기

예시 결과가 맞을 때까지 xpath를 고친 후 완성된 xpath를 octoparse에서 대응 부분에 적용합니다.

이번 예시는 페이지 넘기기니까 “워크플로우“에서 페이지 넘기기 블록을 클릭 후 아래 설정 부분에서 일반 설정 부분의 요소 xpath에 방금 작성한 xpath를 입력해 주면 새로 커스텀한 xpath에 따라 페이지 넘기기가 됩니다.

*상기 이미지는 절차 예시일 뿐 실제 워크플로우 구조와 xpath가 예시와 다를 수 있는 점 참고 부탁드립니다.

*페이지 넘기기 xpath를 편집할 때 바깥의 페이지 넘기기와 내부의 클릭하여 페이지 넘기기 중 하나만 골라 상대 xpath를 편집해 주시면 됩니다.

마무리

오늘은 많은 분들이 어려워하고 실제로 많이 사용되는 페이지 네이션 xpath 작성법 및 적용 방법에 대해 알려드렸습니다. 이 외에도 데이터 블록이나 데이터 필드 등 여러 상황에서 xpath를 작성해야 한다면 XPath 정의 및 Octoparse에서 XPath 사용 방법을 읽어보시면 많은 도움이 될 겁니다.

몇 번의 클릭으로 웹 데이터 추출하기
코딩 없이 대부분 웹 사이트에서 쉽게 데이터를 추출할 수 있습니다.
무료 다운로드

핫 포스트

토픽 보러가기

지금부터 Octoparse 시작하세요.

다운로드

연관 글