[파이썬] 동적 웹 크롤링 (3) - Selenium 사용법 (tag, class, xpath 등)

아래의 이전 포스팅에서 Selenium 및 브라우저 드라이버 설치, webdriver 객체 생성방법까지 알아보았다. webdriver 객체가 브라우저 제어권을 얻고 타겟 URL에 접근까지 했기 때문에 오늘은 그 후 작업으로 크롤링하고 싶은 각 Element에 접근하는 방법, Selenium 모듈의 사용법을 알아본다.

 

---

함께보면 좋은 포스팅!

[파이썬] 동적 웹 크롤링 (1) - Selenium webdriver 설치 및 사용

[파이썬] 동적 웹 크롤링 (2) - Selenium 을 활용해야 하는 이유? 자바스크립트 실행

 

 

find_element_by_id

'id'를 통해 Element에 접근하는 방법이다.

# 'id' 로 Element에 접근하는 방법
result=driver.find_element_by_id('id')
print(result.text)

 

아래 고팍스 페이지를 예로 들어보면, <container> 태그의 id 값이 "react"이다. 

 

고팍스, id="react" Element 접근

 

 

코드는 아래와 같이 작성할 수 있다.

import os
from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager

URL='https://www.gopax.co.kr/exchange/btc-krw'

driver = webdriver.Chrome(ChromeDriverManager().install())
driver.get(URL)

react_id=driver.find_element_by_id("react")
print(react_id.text)

 

그런데 여기서 id="react"의 하위 태그들이 굉장히 큰것을 알 수 있다. 그렇기 때문에 react id를 기준으로 Element의 text에 접근하면 하위 text 들이 전부 나오게 된다.

 

 

 

find_element_by_class_name

'class name'을 통해 Element에 접근한다.

# 'class name' 으로 Element에 접근하는 방법
elem = driver.find_element_by_class_name('class_name')
print(elem.text)

 

고팍스 페이지, 비트코인 최고가의 div class가 "SortableMarketTable__mainText--price" 이다.

 

고팍스, 비트코인 최고가 Element 접근

 

 

코드는 아래와 같이 작성할 수 있다.

import os
from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager

URL='https://www.gopax.co.kr/exchange/btc-krw'

driver = webdriver.Chrome(ChromeDriverManager().install())
driver.get(URL)

bitcoin_max_price=driver.find_element_by_class_name("SortableMarketTable__mainText--price")
print(bitcoin_max_price.text)

 

그럼, 아래와 같이 '9,850,000' 결과를 얻을 수 있다. 참고로, 저 영역은 테이블영역이기 때문에 행마다 똑같은 class name을 갖는 부분이 존재하는데 왜 첫행의 값 하나만 나올까. 'find_element_by_class_name'을 사용했기 때문이다.

 

예를 들어 하나만 존재하는 <table> 태그에 find_element_by_tag_name (밑에서 설명함) 을 사용하면 어차피 결과가 한개이기 때문에 element를 써도되지만 위에서 사용한 class name의 경우 복수개이기 때문에 행을 돌면서 같은 열의 값을 계속 얻으려면 'find_elements_class_name'을 사용해야 한다.

 

 

 

처음에, element와 elements가 따로있는걸 보지 못하고 나는 왜 값이 하나만 나오지라며 삽질을 했다. 아래는 같은 코드를 find_elements_by_class_name 로만 변경해서 실행한 결과이다. 결과를 text로 출력하려고 하니, 아래와 같이 'list' object has no attribute text' 라고 list임을 알리며 text로 출력을 못한다고 알려준다. 이런 경우는 반목문으로 리스트를 돌며 text 처리해주면 된다.

 

 

 

  

find_element_by_tag_name

'tag name'을 통해 element에 접근한다.

# 'tag name' 으로 Element에 접근하는 방법
result=driver.find_element_by_tag_name('tag_name')
print(result.text)

 

아래 고팍스 페이지를 보면 div class "Root" 하위에 "a" tag가 있고 속성값 href 가 있다. 단순히 a tag 만 검색하면 모든 a tag가 대상이 되므로 class -> tag -> get_attribute('href') 순으로 값에 접근해본다. 사실 직접적으로 크롤링하고 싶은 데이터와는 상관이 없지만, tag_name 을 응용해서 사용해보는 예시를 만드려다보니 이렇게 됐다.

 

find_element_by_tag_name 은 아무래도 표 속성인 tr, td 에 접근한 후 for 문으로 각 행에 접근해나가는 방식으로 많이 사용할 것이라 생각한다.

 

고팍스, class Root, a tag, href attribute

 

 

코드는 아래와 같이 작성할 수 있다. 참고로 href 속상 값에 접근한 것이 이미 text 값이기 때문에 따로 .text 를 해주지 않아도 된다.

import os
from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager

URL='https://www.gopax.co.kr/exchange/btc-krw'

driver = webdriver.Chrome(ChromeDriverManager().install())
driver.get(URL)

Root_class=driver.find_element_by_class_name("Root")
a_tag=Root_class.find_element_by_tag_name("a")
href_text=a_tag.get_attribute('href')
print(href_text)

 

그럼, 아래와 같이 href 속성 값을 얻을 수 있다.

 

 

 

find_element_by_xpath

'xpath'을 통해 Element에 접근한다.

# 'xpath' 로 Element에 접근하는 방법
elem = driver.find_element_by_xpath('xpath')
print(elem.text)

 

비트코인 최고가를 위에서 div class가 "SortableMarketTable__mainText--price" 인 것을 사용해서 얻었었다. 이번에는 같은 값을 xpath를 사용해서 얻어보자. 참고로 xpath 는 힘들게 구할 필요없이 크롬 개발자도구에서 마우스 오른쪽 클릭 후 'Copy>Copy Full XPath' 를 통해 구할 수 있다.

 

그럼 '/html/body/container/div/div[1]/div[2]/div[2]/div[2]/table/tbody/tr[1]/td[5]/div' 가 복사된다. 'Full XPath'는 '/html' 부터 시작하는 절대적 경로이고 그냥 'XPath' 는 상대적 경로인데 아래와 같은 차이를 보인다. 둘 중 아무거나 사용해도 결과는 같다.

 

- XPath : //*[@id="react"]/div/div[1]/div[2]/div[2]/div[2]/table/tbody/tr[1]/td[5]/div

- Full XPath : /html/body/container/div/div[1]/div[2]/div[2]/div[2]/table/tbody/tr[1]/td[5]/div

 

고팍스, 비트코인 최고가 XPath

 

코드는 아래와 같이 작성할 수 있다.

import os
from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager

URL='https://www.gopax.co.kr/exchange/btc-krw'

driver = webdriver.Chrome(ChromeDriverManager().install())
driver.get(URL)

# Using Full XPath
bitcoin_max_price_full_xpath=driver.find_element_by_xpath("/html/body/container/div/div[1]/div[2]/div[2]/div[2]/table/tbody/tr[1]/td[5]/div")

# Using XPath
bitcoin_max_price_xpath=driver.find_element_by_xpath("//*[@id=\"react\"]/div/div[1]/div[2]/div[2]/div[2]/table/tbody/tr[1]/td[5]/div")

print("- Using Full XPath: ",bitcoin_max_price_full_xpath.text)
print("- Using XPath: ",bitcoin_max_price_xpath.text)

 

그럼, 아래와 같이 '9,860,000' 결과를 얻을 수 있다. (값은 계속 바뀐다)

 

 

 

다음 포스팅에서는 직접 고팍스 페이지의 모든 데이터 값(이름, 현재가, 변동, 최고가 등)을 크롤링해서 csv 에 저장하는 크롤링 코드를 전체적으로 작성해보려 한다.