셀레니움으로 크롤링 기초 시작하기

이번 포스팅에서는 네이버 영화페이지를 크롤링하는 준비된 예제를 직접 따라해보면서 셀레니움을 어떻게 다룰 수 있는지 살펴보도록 하겠습니다.

셀레니움으로 자신이 원하는 정보를 크롤링 하기 위해서는 HTML의 요소(Element)에 접근할 수 있어야 합니다. 이때 요소란 시작 태그와 종료 태그를 포함하여 태그로 감싼 내용까지 모두 포함하는 개념입니다.

{\displaystyle \overbrace {\overbrace {{\mathtt {\color {BrickRed}<\!p\ }}\color {Magenta}\underbrace {\mathtt {class}} _{\mathsf {\color {Black}{Attribute \atop name}}}{\mathtt {=''}}\!\underbrace {\mathtt {foo}} _{\mathsf {\color {White}{Attr} \atop \color {Black}value}}''{\mathtt {\color {BrickRed}>}}} ^{\mathsf {Start\ tag}}\overbrace {\mathtt {\color {Green}This\ is\ a\ paragraph.}} ^{\mathsf {Content}}\overbrace {\mathtt {\color {BrickRed}<\!/p\!>}} ^{\mathsf {End \atop tag}}} ^{\mathsf {Element}}} — 출처 : https://ko.wikipedia.org/wiki/HTML_요소

HTML은 위와 같은 요소들로 구성되어있으며, 원하는 정보를 크롤링을 하기 위해서는 필요로 하는 요소에 접근할 수 있어야 합니다.

하나의 요소에 접근하는 메서드 살펴보기

셀레늄에서는 요소에 접근할 수 있도록 아래와 같은 메서드를 제공합니다.

메서드	기능
find_element_by_id	id 속성을 사용하여 접근
find_element_by_name	name 속성을 사용하여 접근
find_element_by_xpath	xpath 속성을 사용하여 접근
find_element_by_link_text	앵커태그(a 태그)에 사용되는 텍스트로 접근
find_element_by_partial_link_text	앵커태그(a 태그)에 사용되는 일부 텍스트로 접근
find_element_by_tag_name	태그를 사용하여 접근
find_element_by_class_name	클래스를 사용하여 접근
find_element_by_css_selector	CSS 선택자를 사용하여 접근

partial_link_text 와 class_name 을 사용한 예제

크롬개발자도구에서 요소의 일부 텍스트와 클래스를 사용하여 크롤링한 예제입니다.

여러 요소에 접근하는 메서드 살펴보기

아래의 메서드는 위에서 살펴본 메서드와 동일한 기능을 하지만 여러개의 요소들을 리스트로 반환합니다.

메서드	기능
find_elements_by_id	id 속성을 사용하여 접근
ind_elements_by_name	name 속성을 사용하여 접근
find_elements_by_xpath	xpath 속성을 사용하여 접근
find_elements_by_link_text	앵커태그(a 태그)에 사용되는 텍스트로 접근
find_elements_by_partial_link_text	앵커태그(a 태그)에 사용되는 일부 텍스트로 접근
find_elemenst_by_tag_name	태그를 사용하여 접근
find_elements_by_class_name	클래스를 사용하여 접근
find_elements_by_css_selector	CSS 선택자를 사용하여 접근

네이버 영화페이지에서 하나의 영화제목 추출하기

- find_element_by_css_selector 사용실습

이러한 메서드들 중, HTML구조를 잘 알고 있다면 CSS 선택자(css_selector)를 사용하여 요소에 접근하는 방법이 자주 사용됩니다. 특히, 페이지 안에 있는 여러 정보들 중 내가 원하는 정보들에 접근하여 스크래핑하기 위해서는 정보를 담고 있는 요소에 공통적으로 쓰인 CSS 선택자를 사용하면 됩니다. 아래 예시를 통해 css_selector가 어떻게 쓰이는지 살펴보겠습니다.

이번 강의 예제를 gif로 준비했으니, 요소선택을 처음해보시는 분들이라면 아래 예제대로 따라하여 공부해보실 수 있습니다.

F12를 눌러 크롬 개발자 도구 열기
개발자 도구에서 ELEMENT 선택 버튼 클릭
크롤링을 원하는 영화제목 클릭
개발자 도구에서 선택한 ELEMENT의 마우스 오른쪽 버튼 클릭
Copy - Copy selector 클릭

6. 파이썬에서 "locate"변수에 복사한 내용 할당하기
7. text속성으로 요소의 텍스트 출력하기

네이버 영화페이지의 모든 상영영화제목 추출하기

- find_elements_by_css_selector 사용실습

그런데 이 때, 크롬 개발자 도구에서 위에 소개된 방법으로 영화제목인 주디, 1917, 인비저블맨의 요소에서 copy selector를 클릭한 결과를 살펴보면 아래처럼 dl > dt > a 가 동일한것을 확인할 수 있습니다.

content > div.article > div:nth-child(1) > div.lst_wrap > ul > li:nth-child(1) > dl > dt > a
content > div.article > div:nth-child(1) > div.lst_wrap > ul > li:nth-child(2) > dl > dt > a
content > div.article > div:nth-child(1) > div.lst_wrap > ul > li:nth-child(3) > dl > dt > a

즉, 모든 네이버 영화제목을 크롤링을 할 때 영화페이지에서 제목의 CSS 선택자는 위와 같은 방식으로 구성되어 있는 것입니다. 따라서 우리는 아래와 같이 코딩하여 모든 영화제목을 추출할 수 있습니다. (영화제목이 너무 많아서 슬라이싱을 사용하여 추출되는 영화제목의 수는 4개로 제한했습니다)