지난 포스팅에서는 간단하게 Selenium으로 구글 검색을 해보면서 작동 메카니즘을 직접 체험해보았다. 자동차 운전으로 따지면 시동키고 핸들잡고 기어 1단으로 두고 조금 앞으로가다 브레이크 밟고 시동을 끈 정도이다. 다른 블로그도 대부분 이정도 수준이나 조금 더 나아간 수준으로 알려준다.
2017/09/29 - [Data Science/Python] - 문과생도 할 수 있는 웹 크롤링 (1) - 웹 데이터 크롤링 준비
2017/09/29 - [Data Science/Python] - 문과생도 할 수 있는 웹 크롤링 (2) - Selenium 사용 준비
2017/09/30 - [Data Science/Python] - 문과생도 할 수 있는 웹 크롤링 (3) - Selenium 실습 기초
본 포스팅에서는 자동차 운전할 때 중요한 경고등 켜는 법, 깜박이 키는 법, 후진하는 법 등을 배우는 것처럼 Selenium을 자유자재로 활용하기 위해서 꼭 필요한 기능들을 소개하려고 한다. 물론 의자 젖히는 방법, 상향등 키는 방법 같이 다른 세부적인 기능들도 알면 좋지만 자신의 케이스에만 필요한 세부 기능들은 selenium 공식 홈페이지의 상세한 document를 참조하는 것이 좋다.
우선 이 포스팅으로 핵심 기능들을 알고 자신의 케이스에 맞게 활용할 수 있도록 정리해보려고 한다. 한 번 정리가 되면 다른 기능들은 스스로 찾아서 사용할 수 있을 것으로 기대한다.
Selenium 제대로 사용하기
문과생도 할 수 있는 웹 크롤링 (4)
1. 웹사이트에 접속하기
2. 원하는 정보에 접근하기
3. 로그인 Form에 정보 입력하기
인스타그램 로그인 해보기
혹시 Netscape Navigator 브라우저를 아는가. Internet Explorer가 세계 웹 브라우저 시장을 장악하기 이전에 잘나가던 브라우저였다. 90년대 시절이었던 것 같다. 아래는 사파리 아이콘이다. 예전 우리는 온라인 상을 항해하는 항해사였다! 우리는 link를 통해서 이곳 저곳을 탐험했었다. 어릴 적 아무것도 모르고 DOS 컴퓨터로 이곳저곳 탐험했던 기억이 어렴풋이 난다.
1. 웹 사이트에 접속하기 driver.get("http://www.instagram.com")
우리가 Selenium을 사용할 때 가장 먼저 해야되는 것은 사이트에 접속(navigate)하는 것이다. 필자가 좋아하는 원피스(Onepiece)의 경우를 생각해보면, 어떤 섬에 다시 가기 위해서는 좌표가 필요했다. 웹이라는 망망대해에서 내가 원하는 사이트에 가기위해서도 좌표가 필요하다. 우리가 아무생각 없이 입력했던 www.instagram.com은 일종의 좌표이다. 사람이 보기 쉽게 그 좌표를 다르게 표현한 것이지만 어쨌든 우리가 인스타그램라는 사이트에 가기 위한 좌표이다.
우리는 이전 시간에 이를 간단하게 실습해봐서 알 것이다. 우리가 제어하는 WebDriver가 해당 주소에 접속하게 하는 것이다. HTTP를 좀 아는 문과생이라면 이 GET이 의미하는 바가 무엇인지 잘 알 것이다. 어쨌든 이 GET은 요청하는 것이라고 하자. 좌표로 이동하자고~. HTTP나 크롤링에 필요한 부가정보는 다음에 기회가 되면 좀 더 다뤄보도록 하겠다.
일단 get으로 사이트에 접속하면, WebDriver는 모든 정보가 로딩될 때까지 기다리는데 이를 좀 더 확실히 하기 위해서 WebDriver에게 내 컴퓨터가 좀 느리니 페이지 로딩이 완전히 끝날 때까지 기다리라고 waits을 주기도 하는데 이는 자신에 필요에 따라 추가하면 된다. 다음 포스팅에서 다룰 수 있도록 하겠다.
driver.get(https://www.instagram.com/")
성공적으로 접속했다
2. 얻고 싶은 정보에 접근하기 driver.find_element_by_~
사이트에 접속하고 가만히 있어도 우리는 눈으로 보면서 정보를 얻을 수 있지만, 웹 드라이버는 다르다. 브라우저에 단순히 페이지의 모든 정보가 담겨있을 뿐이다. HTML에 대해서 안다면 원하는 정보를 알기 쉬울테지만 여기서 다루지는 않겠다. 간단하게 말해서 HTML은 '< >' 이런식으로 생긴 태그 안에 정보가 담긴 것이다. 브라우저는 이 태그를 해석해서 우리가 보기 좋게 브라우저 위로 예쁘게 보여주는 것이다.
해당 웹 사이트의 태그 정보를 보려면 chrome에서 F12 버튼을 누르면
이렇게 태그 정보가 나타난다. 당황하지 말자 우리가 원하는 정보는 조기 빨간색으로 click한 곳을 클릭해서 원하는 곳에 가져다대면 정보를 알 수 있다. 태그 정보만 알면 그 정보를 입력하는 것으로 우리가 손으로 마우스를 따라가 클릭하고 키보드로 내용을 입력하는 행위를 모두 할 수 있다.
일반적으로 가입하기는 <form> 이라는 태그를 통해서 할 수 있다. 그리고 아이디나 패스워드 등은 아래와 같은 방식으로 <input> 이라는 태그 안에 정보를 담을 수 있도록 했다. 일종의 약속이다. HTML 태그 관련해서
w3school에 초보자들도 쉽게 이해할 수 있도록 정리되어 있다.
<input type="text" name="passwd" id="passwd-id" />
이렇게 < > 태그로 둘러쌓인 것을 Element라고 부르는데,
예를 들어 <p> hello world </p> 는 p 태그로 hello world라는 내용을 담은 단락 Element라고 부를 수 있다.
이 Element를 찾는 방법을 무엇으로 할 것이냐에 따라서 driver.get_element_by_@@ 에서 @@이 달라진다.
위의 input Element를 찾는 3가지 방법이 있다.
element = driver.find_element_by_id("passwd-id")
element = driver.find_element_by_name("passwd")
element = driver.find_element_by_xpath("//input[@id='passwd-id']")
딱 봤을 때 무슨 내용인지 모를 수 있다. 자세히 보면 위의 id, name, xpath가 해당 input Element를 찾기 위해 필요한 정보이다는 것은 알아차렸을지도 모른다. xpath에 대해서는 HTML의 계층적 구조에 대해 설명해야 하므로 여기서는 설명을 하지 않겠다.
<input type="text" name="passwd" id="passwd-id" />
id와 name 부분의 값이 각각의 값과 같음을 알 수 있다. id는 input element가 속해 있는 전체 HTML 정보 안에서 고유한 값을 가져야 하는 attribute들이다. 간단하게 말해서 id 안에는 중복된 값이 올 수 없다는 말이다. 따라서 id로 우리가 원하는 딱 그 input Element만 찾을 수 있다.
크롬의 개발자도구(F12)로 찾은 휴대폰 번호 또는 이메일 주소를 입력하는 input Element 정보를 찾았고 우리는 name이 "emailOrPhone" 이라는 것을 알아냈다.
name으로 해당 Element에 접근해보자
element = driver.find_element_by_name("emailOrPhone")
브라우저상에서는 변화가 없겠지만 element 변수 안에 해당 element 정보가 입력되어서 해당 element를 제어할 수 있게 됐다.
아이디를 입력해보자
element.send_keys("abcdefg@email.com")
로그인을 하고 싶으면 자신의 아이디를 입력하면 될 것이다.
직접 키보드를 사용하듯이 tab을 눌러서 "성명"도 입력하고 "사용자 이름"도 입력하고 싶을 것이다. 이때는 Keys라는 키보드 객체를 이용해 직접 키보드를 다루듯이 Keys.TAB을 입력해주면 된다.
element.send_keys("abcdefg@email.com, Keys.TAB)
<find_element_by_@@ 정리>
아래는 하나의 페이지 안에서 Element를 찾을 수 있는 방법이다. element를 찾을 때 사이트마다 효과적인 방법이 있을 것이다. css selector 같은 것은 추가 포스팅이 있어야 이해할 수 있을 것 같으므로 기회가 되면 복습차원으로 포스팅하도록 하겠다.
- find_element_by_id
- find_element_by_name
- find_element_by_xpath
- find_element_by_link_text
- find_element_by_partial_link_text
- find_element_by_tag_name
- find_element_by_class_name
- find_element_by_css_selector
갤러리의 이미지 같은 것들을 찾을 때 복수 개의 이미지를 찾고 싶을 것이다.
고유한 값을 가지는 id를 제외하고 다른 방법들은 복수 개의 element를 찾을 수 있고 list로 결과를 반환한다. find_element_by_tag_name('img') 같은 경우 img 태그를 list 형식으로 모두 반환할 것이다.
- find_elements_by_name
- find_elements_by_xpath
- find_elements_by_link_text
- find_elements_by_partial_link_text
- find_elements_by_tag_name
- find_elements_by_class_name
- find_elements_by_css_selector
3. 로그인 Form에 정보 입력하기
여기까지 왔으니 Form에 정보를 입력하는 방법도 간단하게 설명할 수 있을 것 같다.
앞에서 했던 방식으로 아이디, 성명, 사용자 이름, 비밀번호 각 태그를 찾아서 값을 입력하면 form 안에 필요한 정보를 모두 입력하게 된다.
마지막 element에 element.submit()을 하면 자동적으로 가입하기 버튼이 눌리게 된다.
로그인을 하려면 로그인을 눌러서 새로운 form을 찾아 해당 form의 태그정보를 찾아서 똑같은 방식으로 입력할 수 있다.
1) 로그인을 위한 input 태그 찾기 (크롬 개발자도구F12 활용)
2) 태그 안에 로그인 input name 정보 찾기 (element_id = driver.find_element_by_name("username"))
3) 태그 안에 로그인 input name 정보 찾기 (element_password = driver.find_element_by_name("password"))
4) element 안에 아이디 입력 (element_id.send_keys("abcdefg@email.com"))
5) element 안에 비밀번호 입력 (element_password.send_keys("abcdefg"))
6) 로그인 버튼 클릭 (element_password.submit())
위 내용을 포스팅을 해도 되는지 몰라서 우선 간단하게 인스타그램에 로그인하는 방법을 순서대로 코드를 작성해보았다. 자기만의 instagram 로그인 함수도 만들어 볼 수 있을 것이다.
*문제가 된다면 삭제하도록 하겠다
보이는 대로 성공적으로 로그인하였다. 위의 방법을 응용하면 어느 곳이든지 로그인이 가능하다. 크롤링을 위해서 사실 이 로그인이 가장 중요하다. Nxxxx, Dxxxx 카페의 글이나 이미지를 크롤링 하려면 로그인되어야 가능하기 때문이다. 얼굴책 같은 곳도 로그인이 필요한 것으로 알고 있다.
*부록: 웹 탐험하기 Navigating
본 포스팅 초반부에 탐험에 대해서 이야기했었다. GET을 이용해서 사이트에 접속하는 방법을 다루었었는데 History와 Cookie를 이용해서 탐험하는 방법도 소개하려고 한다.
History로 해보기
history는 우리가 아는 인터넷 방문기록이다. 우리가 웹 브라우저를 통해서 웹을 탐험하면 그 기록은 온전히 브라우저 안에 history로 저장된다. 이 history를 통해서 우리가 방문한 곳을 알 수 있으며 우리가 자주 사용하는 '앞으로 가기', '뒤로 가기'는 이 history를 기반으로 이동하는 것이다. 다음의 방법으로 움직일 수 있다.
driver.foward()
driver.back()
Cookie로 해보기
HTTP와 JavaScript를 알면 쿠키를 다루는 것에는 익숙할 것이다. 쿠키는 일종의 임시 데이터 저장기록이라고 생각하면 편하다. 쿠키로 내 정보를 저장하면 특정 사이트는 그 정보를 통해서 트랙킹을 하기도 하고 마케팅 광고를 제공하기도 한다. 쿠키를 설정하는 방법과 브라우저에 이를 저장하고 불러오는 방법은 아래와 같다.
cookie = {'name' : 'sacko', 'value' : 'blogger'}
driver.add_cookie(cookie)
driver.get_cookies()
쿠키를 활용하려면 쿠키에 대해 좀 더 알아야하며 이는 추후에 기회가 되면 소개하도록 하겠다.
참고자료
http://selenium-python.readthedocs.io/
댓글