Introduction

Screenshots are one of the most useful features in Selenium automation. They help testers capture the state of a web page for debugging, reporting, and documenting test results.

By default, Selenium captures only the visible browser viewport. However, many web pages extend beyond the visible area. Using the Chrome DevTools Protocol (CDP), Selenium can capture a full-page screenshot, including content that requires scrolling.

In this tutorial, you’ll learn how to capture a full-page screenshot using Selenium with Python, along with practical examples, real-world scenarios, common mistakes, and best practices.

What is a Full Page Screenshot?

A Full Page Screenshot captures the entire webpage, including content that is outside the currently visible browser window.

Example:

Visible Browser Area

┌─────────────────────┐
│                     │
│   Visible Content   │
│                     │
└─────────────────────┘

        │

        ▼

Full Page Screenshot

┌─────────────────────┐
│                     │
│   Visible Content   │
│                     │
│---------------------│
│ Hidden Content      │
│                     │
│---------------------│
│ Bottom of Page      │
│                     │
└─────────────────────┘

Why Capture Full Page Screenshots?

Full-page screenshots help you:

Capture complete webpages.
Document UI layouts.
Debug automation failures.
Generate test reports.
Verify long pages without scrolling manually.

How Selenium Captures Full Page Screenshots

For Chrome, Selenium uses the Chrome DevTools Protocol (CDP).

The process is:

Get the page dimensions.
Capture the entire page.
Decode the returned image.
Save it as a PNG file.

Example

import base64
from pathlib import Path

from selenium import webdriver


# Topic: 36. Screenshots - Full Page Screenshot
# Practice site: https://the-internet.herokuapp.com/infinite_scroll
# Run: pytest -s 36_examples/test_01_full_page_screenshot.py
#
# Chrome DevTools Protocol can capture the full page, not only the visible
# viewport. The screenshot is saved into the screenshots folder.


def test_take_full_page_screenshot():
    driver = webdriver.Chrome()

    try:
        driver.get("https://the-internet.herokuapp.com/infinite_scroll")

        screenshot_dir = Path("screenshots")
        screenshot_dir.mkdir(exist_ok=True)
        screenshot_path = screenshot_dir / "full_page.png"

        metrics = driver.execute_cdp_cmd("Page.getLayoutMetrics", {})
        content_size = metrics["contentSize"]
        screenshot = driver.execute_cdp_cmd(
            "Page.captureScreenshot",
            {
                "format": "png",
                "captureBeyondViewport": True,
                "clip": {
                    "x": 0,
                    "y": 0,
                    "width": content_size["width"],
                    "height": content_size["height"],
                    "scale": 1,
                },
            },
        )

        screenshot_path.write_bytes(base64.b64decode(screenshot["data"]))

        assert screenshot_path.exists()
    finally:
        driver.quit()

Understanding the Code

Import Required Libraries

import base64
from pathlib import Path

from selenium import webdriver

These modules are used to:

Decode the screenshot data.
Create folders and file paths.
Launch the browser.

Create a Chrome Browser Instance

driver = webdriver.Chrome()

Starts a new Chrome browser session.

Open the Practice Website

driver.get(
    "https://the-internet.herokuapp.com/infinite_scroll"
)

Navigates to the webpage that will be captured.

Create the Screenshot Folder

screenshot_dir = Path("screenshots")
screenshot_dir.mkdir(exist_ok=True)

Creates a folder named screenshots if it does not already exist.

Create the Screenshot File Path

screenshot_path = screenshot_dir / "full_page.png"

Defines the location where the screenshot will be saved.

Get the Full Page Dimensions

metrics = driver.execute_cdp_cmd(
    "Page.getLayoutMetrics",
    {}
)

content_size = metrics["contentSize"]

Uses the Chrome DevTools Protocol to retrieve the total width and height of the webpage.

These dimensions are needed to capture the complete page.

Capture the Full Page Screenshot

screenshot = driver.execute_cdp_cmd(
    "Page.captureScreenshot",
    {
        "format": "png",
        "captureBeyondViewport": True,
        "clip": {
            "x": 0,
            "y": 0,
            "width": content_size["width"],
            "height": content_size["height"],
            "scale": 1,
        },
    },
)

Captures the entire webpage.

Important parameters:

format → PNG image
captureBeyondViewport → Includes content outside the visible browser window
clip → Defines the area to capture using the page dimensions

Save the Screenshot

screenshot_path.write_bytes(
    base64.b64decode(
        screenshot["data"]
    )
)

The screenshot is returned as Base64-encoded data.

This code decodes it and saves it as full_page.png.

Verify the Screenshot

assert screenshot_path.exists()

Checks whether the screenshot file was successfully created.

If the file is missing, the test fails.

Close the Browser

driver.quit()

Closes the browser and ends the WebDriver session.

Practical Example

Suppose your application generates a long dashboard containing multiple charts.

The automation script:

Opens the dashboard.
Captures the complete page.
Saves the screenshot for later review.

Automation Testing Example

Consider an e-commerce website.

The automation script:

Opens a product listing page.
Captures the full page.
Attaches the screenshot to the test report if the test fails.

Real-World Example

Full-page screenshots are commonly used in:

UI testing
Regression testing
Bug reporting
Visual validation
Test reporting
Dashboard verification
Enterprise web applications

Advantages of Full Page Screenshots

Captures the complete webpage.
Useful for long pages.
Improves debugging.
Enhances test reports.
Supports visual validation.

Common Mistakes Beginners Make

Using Normal Selenium Screenshots

driver.save_screenshot() captures only the visible viewport.

It does not capture the entire page.

Forgetting to Retrieve Page Dimensions

Without the correct page dimensions, the screenshot may be incomplete.

Saving to a Non-Existent Folder

Always create the output folder before saving the screenshot.

Forgetting to Decode the Screenshot

The CDP API returns the image as Base64 data.

It must be decoded before writing it to a file.

Best Practices

Use full-page screenshots for long webpages.
Create a dedicated screenshots folder.
Capture screenshots on test failures.
Use meaningful file names.
Verify that the screenshot file was created successfully.

Conclusion

Full-page screenshots provide a complete view of a webpage, making them extremely useful for debugging, reporting, and UI validation. By using the Chrome DevTools Protocol, Selenium can capture content beyond the visible browser viewport and save it as an image. This is an essential technique for modern Selenium automation.

Frequently Asked Questions (FAQs)