Test Automation - How To Capture Full-Page Screenshots In Selenium 4 Python Using Chrome DevTools Protocol

Introduction

The capture of full-page screenshots has become a crucial part of web automation and testing in today’s digital world. Selenium, one of the most popular browser automation frameworks, captures only the visible viewport by default. When we need to capture the entire page, including content that extends beyond the viewport, this limitation poses a challenge. The Chrome DevTools Protocol (CDP) integration with Selenium 4 Python provides a solution to get around this obstacle. We will implement a solution to attach a screenshot of the entire page.

Here is an image created with the native screenshot method:

The technological stack used to implement the solution is:

Programing language: Python

Testing Framework: pytest

Reporting Framework: Allure

link to the project that was developed together with Elias Shourosh.

Implementing the Solution

To capture full-page screenshots in Selenium 4 with Python, we use the CDP to retrieve page layout metrics and then adjust the capture settings accordingly. The following code snippet demonstrates how to achieve this:

def capture_full_page_screenshot() -> bytes:
    """Gets a full page screenshot of the current window as binary data."""
    metrics = driver.execute_cdp_cmd("Page.getLayoutMetrics", {})
    return base64.b64decode(driver.execute_cdp_cmd("Page.captureScreenshot", {
        "clip": {
            "x": 0,
            "y": 0,
            "width": metrics['contentSize']['width'],
            "height": metrics['contentSize']['height'],
            "scale": 1
        },
        "captureBeyondViewport": True
    })['data'])

Walkthrough

1. We first call driver.execute_cdp_cmd(“Page.getLayoutMetrics”, {}) to obtain the layout metrics of the current page. This includes information about the content size, which is crucial for capturing the full page.
2. Using the obtained metrics, we define the clipping area for the screenshot. The clip parameter specifies the top-left coordinates (x and y) as (0, 0) and the width and height as the content size of the page. The scale parameter is set to 1 to ensure the screenshot maintains the original resolution.
3. By setting “captureBeyondViewport”: True, we capture content beyond the visible viewport.
4. Finally, we decode and return the captured screenshot data as binary.

Using the capture_full_page_screenshot() function, we can now easily capture full-page screenshots in Selenium Python, providing a comprehensive view of the entire webpage.

here is an image created with the CDP screenshot method:

In conclusion

Selenium native screenshot functionality limits capturing full-page screenshots. However, by leveraging the Chrome DevTools Protocol (CDP) through Selenium 4 and Python, we can overcome this limitation and capture the entire webpage, including content beyond the visible viewport. The provided code snippet which is found here demonstrates how to implement this solution by retrieving page layout metrics and adjusting the capture settings accordingly. By incorporating this approach into your Selenium automation workflow, we can enhance our testing and web automation capabilities by attaching comprehensive full-page screenshots.

Happy testing!