Element 하이라이트 적용

개요

• Selenium 을 실행할 때, 웹 요소에 상호작용 하는 것을 시각적으로 확인하기 어려움
• 가령, 아래와 같은 예제 코드를 실행했을 때 :

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

driver = webdriver.Chrome()

driver.get("https://www.naver.com/")

element = driver.find_element(By.XPATH, '//*[@type="search"]')

element.is_displayed()

• 해당 코드를 실행하면, element 가 표시되면 True, 그렇지 않다면 False를 반환하겠지만, 실제로 element 자체가 표시되는 지 두 눈으로 확인하기는 어렵다.
• 따라서 element에 상호작용할 때, CSS 스타일 속성을 적용하여 이를 두 눈으로 확인할 수 있도록 하고자 한다.

highlight 함수 정의

• highlight 라는 함수를 정의해보자.

def highlight(element, effect_time, color, border):
    """
    웹 요소를 강조하는 함수
    :param element: 강조할 웹 요소
    :param effect_time: 효과 지속 시간 (초 단위)
    :param color: 테두리 색상
    :param border: 테두리 두께
    """
    original_style = element.get_attribute('style')

    # 테두리 스타일 적용
    driver.execute_script("arguments[0].setAttribute('style', arguments[1]);",
                          element, f"border: {border}px solid {color};")

    # 일정 시간 동안 대기
    time.sleep(effect_time)

    # 원래 스타일로 복원
    driver.execute_script("arguments[0].setAttribute('style', arguments[1]);",
                          element, original_style)

• 인자는 총 4개를 받는다.
  • element : 하이라이트 적용할 element
  • effect_time : 하이라이트 지속시간
  • color : 하이라이트 적용할 색깔
  • border : 테두리 굵기
• 자바스크립트를 이용하여 타겟 element에 CSS 스타일 속성을 적용한다. element에 solid 스타일의 border를 적용하는 로직을 다룬다.

highlight 함수를 사용하기

• highlight 함수를 정의하였으니, 이번에 기존 코드에 반영해서 확인한다.

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

def highlight(element, effect_time, color, border):
    """
    웹 요소를 강조하는 함수
    :param element: 강조할 웹 요소
    :param effect_time: 효과 지속 시간 (초 단위)
    :param color: 테두리 색상
    :param border: 테두리 두께
    """
    original_style = element.get_attribute('style')

    # 테두리 스타일 적용
    driver.execute_script("arguments[0].setAttribute('style', arguments[1]);",
                          element, f"border: {border}px solid {color};")

    # 일정 시간 동안 대기
    time.sleep(effect_time)

    # 원래 스타일로 복원
    driver.execute_script("arguments[0].setAttribute('style', arguments[1]);",
                          element, original_style)

# 웹 드라이버 생성
driver = webdriver.Chrome()
driver.get("https://www.naver.com/")

# 검색 필드 찾기
search_field = driver.find_element(By.XPATH, '//*[@type="search"]')

# 검색 필드 강조
highlight(search_field, 3, "red", 3)

• 코드를 실행하면 검색 필드 강조 구문에서, search_field 라는 element를 3초동안 빨간색의 테두리 스타일을 적용하여 상호작용을 두 눈으로 확인할 수 있게 되었다.
• 하지만 실제 테스트 자동화에서는 effect_time 을 많이 주면 속도가 매우 느려지기 때문에 유의해야 한다.