XPath와 CSS Selector 소개

1. XPath와 CSS Selector란?

오늘은 Selenium을 활용한 웹 자동화의 세계로 한 걸음 더 나아가서 XPath와 CSS Selector를 배워볼 거야. 이 작지만 강력한 도구들은 웹 페이지에서 요소를 찾을 때 정말 유용한 친구들이 될 거야. 셀렉터의 세계로 함께 들어가서 정확하고 효율적인 검색을 위한 사용법을 알아보자.

만약 HTML 문서가 빽빽한 숲이라면, XPath와 CSS Selector는 너의 지도를 대신할 거야. 이 도구들을 통해 필요한 나무(혹은 프로그래밍에서의 요소)를 찾아갈 수 있어. HTML 코드와 수많은 태그들 속에서도 요소를 찾을 수 있게 도와줄 거야.

XPath

XPath(XML Path Language)는 XML 문서를 탐색하기 위한 언어야. 하지만 누가 그러더라, HTML은 XML의 하이브리드라고? 그래서 HTML 문서에도 XPath를 적용하기 편리한 거야. XPath는 네가 지정한 경로를 따라 요소에 도달할 수 있어.

CSS Selector

CSS Selector는 Cascading Style Sheets의 세계에서 왔어. 걱정 마, 이걸 배운다고 디자이너가 될 필요는 없어! 이건 타입, 클래스, 아이디, 상태 등으로 요소를 정확히 선택하기 위한 거야. 생각보다 간단해, 이미 웹 페이지 스타일링을 할 때 무의식적으로 사용해봤을 수도 있어.

2. 코드에서의 XPath와 CSS Selector 활용

이제 셀렉터가 무엇인지 알았으니 바로 실습으로 가보자. Selenium과 함께 이걸 활용해서 어떻게 마법을 부릴 수 있는지 배워보자!

XPath 사용

Selenium에서 XPath를 이용해 요소를 찾는 예제야:

from selenium import webdriver

# 드라이버 설정
driver = webdriver.Chrome()

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

# XPath로 요소 찾기
element = driver.find_element_by_xpath('//div[@id="menu"]/ul/li/a')

# 요소의 텍스트 출력
print(element.text)

# 브라우저 닫기
driver.quit()

설명:

• //div[@id="menu"]/ul/li/a — 이게 우리의 XPath야. 이 의미는 이렇게 읽을 수 있어: "드라이버야, li 안에 있는 ul 안에 있는 div 중 id="menu" 인 a 요소를 찾아줘."

CSS Selector 사용

이제 CSS Selector를 사용하는 방법을 보자:

from selenium import webdriver

# 드라이버 설정
driver = webdriver.Chrome()

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

# CSS Selector로 요소 찾기
element = driver.find_element_by_css_selector('div#menu > ul > li > a')

# 요소의 텍스트 출력
print(element.text)

# 브라우저 닫기
driver.quit()

설명:

• div#menu > ul > li > a — 우리의 CSS Selector야. XPath와 비슷하게 요소를 찾지만 더 간결한 문법을 사용해.

3. XPath와 CSS Selector의 차이

XPath와 CSS Selector의 차이가 뭐냐고? 좋은 질문이야! 언제 무엇을 써야 할지 한 번 알아보자.

유연성 vs. 간단함

XPath는 더 유연해. DOM 트리에서 "위로" 이동하거나 복잡한 논리 조건을 사용하는 데 유용해. 그래서 더 복잡한 요청을 처리하는 데 유리하지. 하지만 CSS Selector의 간단함과 간결함은 더 선호될 수도 있어. CSS Selector는 읽고 쓰기 쉽고, 특히 클래스나 아이디로 요소를 찾아야 할 때 유리해.

함수 지원

XPath는 함수 사용을 지원해 — 텍스트 확인부터 속성 작업까지, contains()나 starts-with() 같은 기능들을 사용할 수 있어. 하지만 CSS Selector는 이렇게 복잡한 지원은 없어.

작업 속도

몇몇 시나리오에서는 CSS Selector가 더 빠르게 작동해. 이는 브라우저가 CSS Selector로 작업하도록 최적화되어 있어서 간단한 작업에서는 기본적으로 선택되기 때문이야.

문법

XPath는 더 복잡한 문법을 가지고 있어. 이건 장점이자 단점이 될 수 있어. CSS Selector는 쓰기 배우기 더 쉬워.

4. 실전 적용

이제 배운 지식을 실제 작업에 적용해보자. 예를 들어 상품 테이블이 있는 웹 페이지에서 모든 상품 이름과 가격을 수집해야 한다고 해보자. 이런 식으로 할 수 있어:

XPath를 사용한 예제

from selenium import webdriver

# 드라이버 설정
driver = webdriver.Chrome()

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

# 모든 상품 요소 찾기
products = driver.find_elements_by_xpath('//table[@class="product-table"]/tbody/tr')

# 각 상품의 데이터 추출
for product in products:
    name = product.find_element_by_xpath('.//td[@class="product-name"]').text
    price = product.find_element_by_xpath('.//td[@class="product-price"]').text
    print(f"Product: {name}, Price: {price}")

# 브라우저 닫기
driver.quit()

CSS Selector를 사용한 예제

from selenium import webdriver

# 드라이버 설정
driver = webdriver.Chrome()

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

# 모든 상품 요소 찾기
products = driver.find_elements_by_css_selector('table.product-table > tbody > tr')

# 각 상품의 데이터 추출
for product in products:
    name = product.find_element_by_css_selector('td.product-name').text
    price = product.find_element_by_css_selector('td.product-price').text
    print(f"Product: {name}, Price: {price}")

# 브라우저 닫기
driver.quit()

5. 특징과 일반적인 실수

XPath와 CSS Selector를 사용할 때 몇 가지 함정이 있어. 예를 들어, XPath의 절대 경로를 사용할 때 HTML 구조가 조금만 바뀌어도 스크립트가 깨질 위험이 있어. 그래서 항상 상대 경로를 사용해서 유연성을 유지하려고 노력하자.

CSS Selector는 반면, 너무 복잡해지면 읽기가 어려워질 수 있어. 정확성과 간단함의 균형을 잘 맞추는 게 중요해.

또 하나 언급해야 할 건 오류 처리야. 요소를 찾지 못하면 Selenium은 NoSuchElementException를 던질 거야. try-except 블록이나 WebDriverWait 같은 대기 메서드를 사용해서 이 문제를 처리하고 스크립트를 더욱 안정적으로 만들어보자.

1

Опрос

Selenium 소개,  35 уровень,  4 лекция

недоступен

Selenium 소개

Selenium 소개

Открыть