[제로베이스] Selenium 정리

허재훈·2023년 4월 10일

EDA

목록 보기

4/14

Selenium

Documentation
Selenium with Python

웹브라우저를 원격 조작하는 도구
자동으로 URL을 열고 클릭 등이 가능
스크롤, 문자의 입력, 화면 캡처 등등

BeautifulSoup만으로 해결할 수 없는 때 사용

접근할 웹 주소를 알 수 없을 때
자바스크립트를 사용하는 웹페이지의 경우
웹 브라우저로 접근하지 않으면 안될 때
동적 페이지(서버 내부에 변화가 일어남) > 스크롤 내려도 계속 새로운 정보가 나타날때

- selenium 설치

Window, mac(intel) : conda install selenium
mac(M1) : pip install selenium

Install browser drivers

- chromedriver 설치

chrome web > 오른쪽 상단 점 3개 > 도움말 > chrome 정보

버전 큰수 3자리만 기억.

Google -> chrome driver download 검색 (또는 아래 링크 이용)

chromedriver 설치

앞 번호가 같은 버전 다운로드(뒷 번호는 상관 없음)
(윈도우는 chromedriver_win32.zip 이거 받으면 됨)
ds_study 파일에 driver 폴더 생성 후 저장

- selenum webdriver 사용

셀레니움으로 웹페이지 열기

맥은 권한 설정 필요

크롬드라이버 실행

webdriver.Chrome 명령으로 크롬 드라이버의 경로 지정

get 명령으로 접근하고 싶은 주소 지정

새로운 크롬이 나타나면서 지정된 웹 주소에 접근함

from selenium import webdriver
from selenium.webdriver.common.by import By

# 페이지 접근
driver = webdriver.Chrome("../driver/chromedriver.exe")
driver.get("https://www.starbucks.co.kr/store/store_map.do")


>> # 아래처럼 나오면 페이지가 잘 열렸다는 뜻
C:\Users\hjh\AppData\Local\Temp\ipykernel_62876\3859599457.py:4: DeprecationWarning: executable_path has been deprecated, please pass in a Service object
  driver = webdriver.Chrome("../driver/chromedriver.exe")

- 문법 변경

문법이 변경되었다.

find_element(By.ID, "id")
find_element(By.NAME, "name")
find_element(By.XPATH, "xpath")
find_element(By.LINK_TEXT, "link text")
find_element(By.PARTIAL_LINK_TEXT, "partial link text")
find_element(By.TAG_NAME, "tag name")
find_element(By.CLASS_NAME, "class name")
find_element(By.CSS_SELECTOR, "css selector")

Selenium 기초

예제 블로그

# 셀레니움으로 창 열기
from selenium import webdriver

driver = webdriver.Chrome("../driver/chromedriver.exe")
driver.get("https://pinkwink.kr/")

>> # 아래는 창이 잘 열렸다는 뜻임
C:\Users\hjh\AppData\Local\Temp\ipykernel_62832\1847518591.py:1: DeprecationWarning: executable_path has been deprecated, please pass in a Service object
  driver = webdriver.Chrome("../driver/chromedriver.exe")

- 창 닫기(모든 창 닫기)

# 창 닫기(모든 창 닫기)
driver.quit()

- 화면 최대, 최소, 원하는 사이즈로 설정

# 화면을 최대 크기로 설정
driver = webdriver.Chrome("../driver/chromedriver.exe")
driver.get("https://pinkwink.kr/")
driver.maximize_window()
# [WinError 10061] 대상 컴퓨터에서 연결을 거부했으므로 연결하지 못했습니다'
# 위 두줄 추가하니까 작동함
--------------------------------
# 화면을 최소 크기로 설정
driver = webdriver.Chrome("../driver/chromedriver.exe")
driver.get("https://pinkwink.kr/")
driver.minimize_window()
# [WinError 10061] 대상 컴퓨터에서 연결을 거부했으므로 연결하지 못했습니다'
# 위 두줄 추가하니까 작동함
--------------------------------
# 화면 크기를 원하는 사이즈로 설정
driver = webdriver.Chrome("../driver/chromedriver.exe")
driver.get("https://pinkwink.kr/")
driver.set_window_size(600, 600)
# [WinError 10061] 대상 컴퓨터에서 연결을 거부했으므로 연결하지 못했습니다'
# 위 두줄 추가하니까 작동함
# 화면에 클릭하려는 태그가 보이는 상태에서 실행해야 정상 작동함

- 새로고침, 뒤로가기, 앞으로 가기

# 새로고침
driver.refresh()
--------------------------------------
# 뒤로가기
driver.back()
--------------------------------------
# 앞으로 가기
driver.forward()

- 클릭

driver.find_elements 가져오려는 태그가 여러개인 경우

driver.find_element 가져오려는 태그가 하나인 경우

해당 페이지에서 개발자도구에서 클릭하려는 페이지의 html 값에 우클릭 > copy > copy selector

복사한 값을 아래 value 값에 넣어줌

# 클릭
from selenium import webdriver
from selenium.webdriver.common.by import By

# driver.find_elements 가져오려는 태그가 여러개인 경우
# driver.find_element 가져오려는 태그가 하나인 경우
# 해당 페이지에서 개발자도구에서 클릭하려는 페이지의 html 값에 우클릭 > copy > copy selector 
# 복사한 값을 아래 value 값에 넣어줌
first_contetnt = driver.find_element(By.CSS_SELECTOR, value="#content > div.cover-masonry > div > ul > li:nth-child(1)")
first_contetnt.click() # 해당 페이지가 클릭됨

# "#content > div.cover-masonry > div > ul > li:nth-child(1)"
# # 은 id를 의미함, content 라는 id 그 안에 div 태그 안에 클래스 이름이 cover-masonry
# 또 그 안에 div 태그
# 또 그 안에 ul 태그 
# 또 그 안에 li 태그

- 탭 생성, 갯수확인, 이동, 닫기

# 새로운 탭 생성
# 아래는 자바스크립트 문법임
driver.execute_script("window.open('https://www.naver.com')")
--------------------------------------
# 탭 갯수 확인
len(driver.window_handles)
>> 2
--------------------------------------
# 탭 이동
# 첫번째 탭이 0
driver.switch_to.window(driver.window_handles[1])
--------------------------------------
# 탭 닫기
# 현재 열려있는 탭이 닫힘
# driver.quit() 은 탭 모두 닫기

driver.close()

- 화면 스크롤 가능한 높이

# 화면 스크롤
# 자바스크립트 기능, 문법 이용
# return 해라. 
# html 이 document
# body 은 html 의 body 태그
# 거기에서 scrollHeight 를 리턴해라
driver.execute_script('return document.body.scrollHeight')

# 아래 값은 스크롤 가능한 높이(깊이)
# 화면 창이 좁거나 넓으면 아래 값이 바뀐다

>> 5929

- 화면 스크롤 하단 이동, 상단 이동

# 화면 스크롤 하단 이동 > 제일 하단 까지 이동
# 자바스크립트 이용
driver.execute_script('window.scrollTo(0, document.body.scrollHeight);')
--------------------------------------
# 화면 스크롤 상단 이동
driver.execute_script('window.scrollTo(0, 0);')

- 화면 스크롤 특정 태그 지점까지 이동

# 화면 스크롤 특정 태그 지점까지 이동
from selenium.webdriver import ActionChains

# 해당 페이지에서 개발자도구에서 클릭하려는 페이지의 html 값에 우클릭 > copy > copy selector 
# 복사한 값을 아래 value 값에 넣어줌
some_tag = driver.find_element(By.CSS_SELECTOR, value="#content > div.cover-list > div > ul > li:nth-child(1) > a")

action = ActionChains(driver)
action.move_to_element(some_tag).perform()

- 현재 보이는 화면 스크린샷 저장

# 현재 보이는 화면 스크린샷 저장
driver.save_screenshot('./last_height.png')

>> True

검색어 입력

검색어를 입력할 공간 찾기 > 네이버 검색창처럼 검색창 찾기

검색어 입력

클릭

- CSS_SELECTOR

# 다시 창 열기
from selenium import webdriver # selenium을 이용하여 크롬 제어하기 위함
from selenium.webdriver.common.by import By # 태그 선택 위함

driver = webdriver.Chrome("../driver/chromedriver.exe")
driver.get("https:/www.naver.com/")

>> # 아래는 창이 잘 열렸다는 뜻임
C:\Users\hjh\AppData\Local\Temp\ipykernel_62832\2379491913.py:4: DeprecationWarning: executable_path has been deprecated, please pass in a Service object
  driver = webdriver.Chrome("../driver/chromedriver.exe")

- 검색어를 입력할 공간 찾기

# 검색어를 입력할 공간 찾기
# 해당 페이지에서 개발자도구에서 클릭하려는 페이지의 html 값에 우클릭 > copy > copy selector 
# 복사한 값을 아래 value 값에 넣어줌
keyword = driver.find_element(By.CSS_SELECTOR, value="#query")

- 검색어 입력

# 검색어 입력
keyword.clear() # 기존에 입력한 검색어 지우기
keyword.send_keys('파이썬')

- 클릭

# 클릭 > 검색 클릭
# 해당 페이지에서 개발자도구에서 클릭하려는 페이지의 html 값에 우클릭 > copy > copy selector 
# 복사한 값을 아래 value 값에 넣어줌
search_btn = driver.find_element(By.CSS_SELECTOR, value="#search_btn")
search_btn.click()

# 검색한 뒤에 다시 그 창에서 새로운 검색하려면 태그가 달라서 위 코드로 실행이 안될 수 있음

Xpath 이용하기

CSS_SELECTOR와 동일하지만 TAG 찾는 방법만 조금 달라짐
BeautifulSoup에서는 사용 불가능, selenium에서만 사용 가능

- beatuful soup 에서는 xpath 를 사용할 수 없다.
- //*[@id="main_pack"]/section[1]/div/div[2]/panel-list/div/ul/li[2]/div/div/a
- // : 최상위
- * : 자손 태그
- / : 자식 태그
- div[1] : div 중에서 1번째 태그

(Xpath) 검색어를 입력할 공간 찾기 + 검색어 입력

# 검색어를 입력할 공간 찾기 + 검색어 입력
# 해당 페이지에서 개발자도구에서 클릭하려는 페이지의 html 값에 우클릭 > copy > copy Xpath
# 복사한 값을 아래 value 값에 넣어줌

driver.find_element(By.XPATH, value='//*[@id="query"]').send_keys('xpath')

(Xpath) 클릭

# 클릭
# 해당 페이지에서 개발자도구에서 클릭하려는 페이지의 html 값에 우클릭 > copy > copy Xpath
# 복사한 값을 아래 value 값에 넣어줌
driver.find_element(By.XPATH, value='//*[@id="search_btn"]').click()
-------------------
# 창 닫기
driver.quit()

검색어 입력 연습

# 다시 창 열기
driver = webdriver.Chrome("../driver/chromedriver.exe")
driver.get("https://pinkwink.kr/")

1. 오른쪽 상단 돋보기 버튼 선택 (동적페이지)

# 1. 오른쪽 상단 돋보기 버튼 선택 (동적페이지)
from selenium.webdriver import ActionChains

# driver.find_element(By.CSS_SELECTOR, value='#header > div.search > input[type=text]').click()
# 단순히 위와 같이 하면 동작하지 않음
# 해당 페이지는 돋보기를 누른 후 검색창이 열리는 구조인데,
# 돋보기 누르기 전과 후의 html 값이 달라짐
# 그래서 아래와 같이 ActionChains 를 이용해야 됨

Action Chains

# 우선 돋보기 클릭해서 검색창 나오게 하기
search_tag = driver.find_element(By.CSS_SELECTOR, value='.search')
action = ActionChains(driver)
action.click(search_tag)
action.perform()

2. 검색어를 입력

# 2. 검색어를 입력
driver.find_element(By.CSS_SELECTOR, value='#header > div.search.on > input[type=text]').send_keys('딥러닝')

3. 검색 버튼 클릭

# 3. 검색 버튼 클릭
driver.find_element(By.CSS_SELECTOR, value='#header > div.search.on > button').click()

selenium 과 BeautifulSoup 함께 사용하기

최종적으로 사용하고자하는 데이터가 selenium을 이용해서 동작해야지만 나오는 부분까지 이동한 다음 그 상태에서 BeautifulSoup을 이용해 가져오는 작업

현재 화면의 첫번째 게시글인 "핑크랩이 carla, autoware, ROS2 관련 프로젝트를 시작합니다." 가져오기.

셀레니움으로 띄운 화면 페이지의 html 를 BeautifulSoup 으로 읽어와야됨

우선 셀레니움으로 화면은 띄운 상태

현재 화면의 html 코드 가져오기(driver.page_source)

# 현재 화면의 html 코드 가져오기
driver.page_source

>>
'<html lang="ko"><head>\n                \n                \n                        <!-- BusinessLicenseInfo - START -->\n        \n            <link href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-cd26e4cc555a2e99c5fea740fa5549c87bd629cd/static/plugin/BusinessLicenseInfo/style.css" rel="stylesheet" type="text/css".....

전체 html 을 prettify()로 나타내기

# 우선 전체 html 을 prettify()로 나타내기
from bs4 import BeautifulSoup

req = driver.page_source
soup = BeautifulSoup(req, 'html.parser')

print(soup.prettify())

class = "post-item" 을 기준으로 나타내기

# class = "post-item" 을 기준으로 나타내기
soup.select('.post-item')

contents = soup.select('.post-item')
len(contents) # 현재 화면에 8개의 게시글이 있는 듯
>> 8
------------------------
contents[0]
>>
<div class="post-item">
<a href="/1420">
<span class="thum">
<img alt="" src="//i1.daumcdn.net/thumb/C264x200/?fname=https://blog.kakaocdn.net/dn/caNtI3/btr1UVcjBwM/AfYo8FZdds3KtvbaTzI8n1/img.png"/>
</span>
<span class="title">핑크랩이 carla, autoware, ROS2 관련 프로젝트를 시작합니다.</span>
<span class="date">2023. 3. 4. 17:38</span>
<span class="excerpt">저는 최근 긴기간 진행한 AI 로봇 기술관련 [해당회사에서는 로봇으로 제품을 출시하는 것이 아니어서^^] 프로젝트를 마치고 잠시 소강상태였다가 이번에 새롭게 짧은 기간으로 새로운 프로젝트를 진행합니다. carla는 자율주행 시스템용 시뮬레이터로 unreal 엔진 기반인데 요즘 관심있는 분들이 많으시죠. 이번 클라이언트는 무거운 이 도구들과 ROS2를 이용하여 원할한 시뮬레이션 환경을 회사내에 구축하고 싶어 합니다. 그래서 클라이언트와의 상담으로 저희 핑크랩은 인턴쉽을 핑크랩 내에서 진행하고 해당 인턴이 클라이언트가 원하는 산출물을 직접 개발하도록 유도하고 그 산출물과 함께 직원으로 해당 회사에 합류하도록 진행합니다. 매우 핑크랩과 어울리는 진행입니다.^^. CARLA는 처음부터 자율 주행 시스템의 개발,..</span>
</a>
</div>

창 닫기

# 창 닫기
driver.quit()

위 글은 제로베이스 데이터 취업 스쿨의 강의자료를 참고하여 작성되었습니다.

허재훈

허재

이전 포스트

[제로베이스] 웹데이터 분석 - 시카고 맛집 페이지 분석

다음 포스트

[제로베이스] Selenium 정리

EDA

Selenium

- selenium 설치

- chromedriver 설치

- selenum webdriver 사용

- 문법 변경

Selenium 기초

- 창 닫기(모든 창 닫기)

- 화면 최대, 최소, 원하는 사이즈로 설정

- 새로고침, 뒤로가기, 앞으로 가기

- 클릭

- 탭 생성, 갯수확인, 이동, 닫기

- 화면 스크롤 가능한 높이

- 화면 스크롤 하단 이동, 상단 이동

- 화면 스크롤 특정 태그 지점까지 이동

- 현재 보이는 화면 스크린샷 저장

검색어 입력

- CSS_SELECTOR

- 검색어를 입력할 공간 찾기

- 검색어 입력

- 클릭

Xpath 이용하기

(Xpath) 검색어를 입력할 공간 찾기 + 검색어 입력

(Xpath) 클릭

검색어 입력 연습

1. 오른쪽 상단 돋보기 버튼 선택 (동적페이지)

2. 검색어를 입력

3. 검색 버튼 클릭

selenium 과 BeautifulSoup 함께 사용하기

현재 화면의 html 코드 가져오기(driver.page_source)

전체 html 을 prettify()로 나타내기

class = "post-item" 을 기준으로 나타내기

창 닫기

[제로베이스] 웹데이터 분석 - 시카고 맛집 페이지 분석

[제로베이스] EDA 과제 1. 스타벅스, 이디야 매장 데이터 분석(과제 작성)

0개의 댓글

관련 채용 정보