Js로 렌더링 되는 html코드의 크롤링( Selenium )

 

 

' 페이지 소스 보기 '와 ' 실제 DOM '의 차이

브라우저의 "페이지 소스 보기"는 서버에서 처음 전달된 HTML만 보여줌

JavaScript가 실행된 후 추가적으로 동적으로 생성된 HTML은 DOM에 반영됨

 

Selenium의 장점

Selenium은 브라우저를 실제로 실행하므로 JavaScript도 실행
Selenium을 사용하면 JavaScript로 동적으로 생성된 요소를 (find_element 또는 find_elements로) 접근할 수 있다.

( JavaScript가 실행된 후의 렌더링된 DOM(Document Object Model)을 대상으로 크롤링할 수 있다 )

 

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

# Selenium 웹드라이버 초기화
driver = webdriver.Chrome()

# 페이지 열기
driver.get('https://example.com')

# JavaScript가 실행될 시간을 기다림 (필요에 따라 명시적으로 기다릴 수 있음)
time.sleep(5)  # 동적 요소 로딩 대기 (더 좋은 방법: WebDriverWait 사용)

# 렌더링된 DOM에서 요소 찾기
dynamic_element = driver.find_element(By.XPATH, '//div[@id="dynamicContent"]')
print(dynamic_element.text)

driver.quit()

 

 

주의점

1. 렌더링 시간을 고려

JavaScript로 생성되는 콘텐츠는 시간이 걸릴 수 있습니다.

time.sleep()이나 Selenium의 **명시적 대기(WebDriverWait)**를 사용 필요

from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

# 특정 요소가 로드될 때까지 기다림
dynamic_element = WebDriverWait(driver, 10).until(
    EC.presence_of_element_located((By.ID, "dynamicContent"))
)
print(dynamic_element.text)

 

2. 특정 API 요청으로 데이터를 가져오는 경우

JavaScript로 렌더링된 콘텐츠는 종종 특정 API 요청으로 데이터를 가져오는 경우가 있음

개발자 도구의 Network 탭을 사용해 데이터를 가져오는 API를 분석하고, Selenium 대신 requests 라이브러리로 직접 데이터를 가져올 수 있는 경우가 많습니다.