Selenium + CDP 활용하기

CDP(Chrome DevTools Protocol)란

Chrome DevTools Protocol(CDP)는 구글 크롬 브라우저에서 사용자와 웹 개발자들이 웹 페이지와 앱을 분석하고 디버깅할 수 있도록 하는 도구이다. CDP는 웹 페이지의 DOM 구조 수정, 스타일 변경, JavaScript 디버깅, 네트워크 요청 분석 등 다양한 기능을 제공한다. CDP는 이름 그대로 구글의 Chrome 브라우저에서 처음 도입되었으나 이후 다른 Chromium 기반 브라우저에서도 사용되고 있다.

CDP는 주로 브라우저와 외부 클라이언트 사이의 통신을 위해 설계되었다. 개발자는 이 프로토콜을 사용하여 프로그래밍 방식으로 브라우저를 제어할 수 있다. 이는 웹 자동화, 테스팅, 모니터링 등 다양한 목적으로 활용되곤 한다.

CDP와 Selenium의 결합

Selenium과 CDP를 결합하면, Selenium의 강력한 웹 자동화 및 테스팅 기능에 CDP의 브라우저 제어 및 분석 기능을 더해 더욱 효과적인 웹 테스팅 환경을 구축할 수 있다.

예를 들어, Selenium을 사용해 웹 페이지를 렌더링하고 그 상태를 검사하는 동안, CDP를 사용하여 네트워크 요청을 가로채거나, 콘솔 로그를 분석하거나, 페이지 내에서 발생하는 다양한 이벤트를 모니터링할 수 있다.

하나의 활용 사례로 CDP를 사용하여 네트워크 요청과 응답을 출력해보자.

예제 코드

아래의 예제 코드는 테스트의 전처리 및 후처리, 그리고 비즈니스 로직을 제외하고, Selenium과 CDP를 결합하는 방법만을 단순하게 보여주기 위한 것이다. 개별적인 요구 사항이나 프로젝트의 구조에 맞게 적절히 응용하여 활용해 보는 것이 좋을 것 같다.

import json

from selenium import webdriver



def initialize_webdriver():
    """
    WebDriver 설정 및 인스턴스 생성.
    """
    chrome_options = webdriver.ChromeOptions()
    chrome_options.set_capability("goog:loggingPrefs", {"performance": "ALL"})
    return webdriver.Chrome(options=chrome_options)


def process_network_logs(driver):
    """
    네트워크 로그 처리 및 필터링.
    """
    logs_raw = driver.get_log("performance")
    logs = [json.loads(lr["message"])["message"] for lr in logs_raw]

    for log_entry in filter(is_response_received_with_json, logs):
        print_network_response(log_entry, driver)


def is_response_received_with_json(log_):
    """
    JSON 응답을 받은 네트워크 요청인지 확인.
    """
    return (
            log_["method"] == "Network.responseReceived"
            and "json" in log_["params"]["response"]["mimeType"]
    )


def print_network_response(log_entry, driver):
    """
    네트워크 응답 출력.
    """
    request_id = log_entry["params"]["requestId"]
    resp_url = log_entry["params"]["response"]["url"]
    print(f"요청 URL: {resp_url}")
    response_body = driver.execute_cdp_cmd("Network.getResponseBody", {"requestId": request_id})
    print(f"응답 본문: {response_body}")


def navigate_and_capture_logs(url):
    """
    주어진 URL로 이동하고 네트워크 로그를 캡처.
    """
    # WebDriver 인스턴스 초기화
    driver = initialize_webdriver()

    # 주어진 URL로 이동
    driver.implicitly_wait(10)
    driver.get(url)

    # 네트워크 로그 처리
    process_network_logs(driver)

    # WebDriver 세션 종료
    driver.quit()


# www.naver.com으로 이동하고 네트워크 로그를 캡처하는 함수 호출
navigate_and_capture_logs("https://www.naver.com")

실행 결과

아래와 같이 네트워크 요청과 응답이 출력되는 것을 확인할 수 있다.
각자의 요구 사항에 따라 이를 테스트에 반영하거나, 테스트 수행 과정에서의 참고용 데이터로 가공하여 활용할 수 있다.

마무리하며

UI 자동화 프로젝트를 Selenium으로 수행하는 동안 네트워크 트래픽을 모니터링하는 다양한 방법이 존재한다. 약 2년 6개월 전에 언급한 바와 같이, 프록시를 사용하는 방법과 Selenium-wire 같은 외부 패키지를 활용하는 방법이 그 예시이다. 각자의 요구 사항에 가장 적합한 방법을 선택하여 UI 자동화 테스트의 한계를 넘어 효율적인 테스팅 환경을 구축할 수 있기를.