파이썬 Selenium WebDriver로 특정 요소의 부분 스크린샷 캡처하는 방법

Selenium WebDriver를 사용하면 웹페이지 전체가 아닌 특정 요소(element)만 캡처하는 부분 스크린샷을 손쉽게 찍을 수 있습니다. 이 방법은 로고, 이미지, 버튼 등 특정 영역만 확인하고 싶을 때 특히 유용합니다.

부분 스크린샷을 캡처하려면 먼저 id, name, classname, xpath 같은 로케이터(locator)를 활용해 스크린샷을 찍고자 하는 요소를 정확히 식별해야 합니다.

그다음 해당 웹요소(webelement)에 screenshot() 메서드를 적용하고, 인자로 저장할 이미지 파일명과 확장자를 전달하면 됩니다. 그러면 프로젝트 폴더 안에 해당 요소의 스크린샷이 담긴 새로운 파일이 자동으로 생성됩니다.

기본 문법

l = driver.find_element_by_xpath("//img[@title='Tutorialspoint']")
l.screenshot("logo.png")

아래는 실제 웹페이지에서 로고 이미지의 스크린샷을 캡처하는 과정입니다.

예제 코드

전체 코드 구현은 다음과 같습니다.

from selenium import webdriver

driver = webdriver.Chrome(executable_path="C:\\chromedriver.exe")
driver.maximize_window()
driver.get("https://www.tutorialspoint.com/index.htm")

# 스크린샷을 캡처할 요소 식별
l = driver.find_element_by_xpath("//img[@title='Tutorialspoint']")

# screenshot 메서드로 요소의 스크린샷 캡처
l.screenshot("logo.png")

코드 설명

위 코드는 다음 순서로 동작합니다.

1. Chrome 드라이버를 생성하고 브라우저 창을 최대화합니다.
2. tutorialspoint 웹사이트에 접속합니다.
3. xpath를 사용해 title 속성이 'Tutorialspoint'인 img 태그, 즉 로고 이미지를 찾습니다.
4. 해당 요소에 screenshot() 메서드를 호출하여 'logo.png' 파일로 저장합니다.

실행 결과

코드를 실행하면 프로젝트 폴더에 logo.png라는 새 파일이 생성되며, 이 파일에는 페이지 전체가 아닌 해당 요소(로고 이미지)만 캡처된 스크린샷이 저장됩니다.

참고로 Selenium 4 이상에서는 find_element_by_xpath()가 deprecated되었으므로, 최신 버전을 사용한다면 다음과 같이 작성하는 것이 좋습니다.

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

driver = webdriver.Chrome()
driver.get("https://www.tutorialspoint.com/index.htm")

l = driver.find_element(By.XPATH, "//img[@title='Tutorialspoint']")
l.screenshot("logo.png")