5 Best Ways to Take a Full Page Screenshot with Selenium, Python, and ChromeDriver

by

💡 Problem Formulation: Automated tests require capturing full-page screenshots for documentation or visual verification purposes. Python developers using Selenium with ChromeDriver often need to capture the entire content of a web page, not just the visible portion. Here we address how to achieve full-page screenshots with several methods, contrasting their unique approaches and benefits. The desired outcome is an image file representing the complete web page as it would appear when fully scrolled through.

Method 1: Utilizing Selenium get_screenshot_as_file()

An overview of the method: Selenium WebDriver provides a built-in function get_screenshot_as_file() which captures the current window and saves it as an image file. However, it only captures the visible part of the page. By combining this function with browser window resizing, developers can capture the full page.

Here’s an example:

from selenium import webdriver

# Set up the ChromeDriver
driver = webdriver.Chrome()
driver.get('https://www.example.com')

# Resize window to capture full page
original_size = driver.get_window_size()
required_width = driver.execute_script('return document.body.parentNode.scrollWidth')
required_height = driver.execute_script('return document.body.parentNode.scrollHeight')
driver.set_window_size(required_width, required_height)

# Capture the screenshot
driver.get_screenshot_as_file('full_page.png')

# Revert to original window size
driver.set_window_size(original_size['width'], original_size['height'])
driver.quit()

The output is a file named full_page.png that contains the screenshot of the entire web page.

This code snippet first sets up ChromeDriver, navigates to the desired URL, and reads the full required dimensions of the web page. The browser window is then resized to these dimensions, and a screenshot is taken. After the screenshot, the window is resized back to the original dimensions before quitting the driver.

Method 2: Using AShot library

AShot is a third-party library used for taking screenshots in Selenium tests. It’s capable of taking screenshots of the full page by stitching together multiple screenshots of the viewable parts of the page.

Here’s an example:

from selenium import webdriver
from AShot import Shutterbug

# Set up the ChromeDriver
driver = webdriver.Chrome()
driver.get('https://www.example.com')

# Taking full page screenshot using AShot
full_screenshot = Shutterbug.shootPage(driver, True)
full_screenshot.save('.')

driver.quit()

The code example results in a screenshot file of the entire web page being saved in the current directory.

The AShot library’s shootPage() method is utilized to capture the screenshot of the complete web page, automatically scrolling and stitching as necessary. It simplifies the process of creating full-page screenshots.

Method 3: Scrolling and Stitching Screenshots

This method involves manually scrolling through the web page and taking multiple screenshots, which are then stitched together to create a single full-page image. This approach provides fine-grained control over the screenshot process.

Here’s an example:

from selenium import webdriver
import time
from PIL import Image

# Set up the ChromeDriver
driver = webdriver.Chrome()
driver.get('https://www.example.com')

# Find the total height of the web page
total_height = driver.execute_script('return document.body.parentNode.scrollHeight')

# Scroll height and a list to keep image parts
scroll_height = driver.get_window_size()['height']
slices = []

# Take and store screenshots in slices
for y in range(0, total_height, scroll_height):
    if y + scroll_height > total_height:
        break

    driver.execute_script(f'window.scrollTo(0, {y})')
    time.sleep(0.2)  # Allow page to load or adjust for loading times as needed
    slices.append(Image.open(driver.get_screenshot_as_png()))

# Stitch screenshots into one image
stitched_image = Image.new('RGB', (slices[0].width, total_height))
offset = 0
for img in slices:
    stitched_image.paste(img, (0, offset))
    offset += img.height
stitched_image.save('full_page_stitched.png')
driver.quit()

The output is an image file named full_page_stitched.png.

This code snippet scrolls through the webpage, captures sections of it and uses the Python Imaging Library (PIL) to combine them into a complete screenshot. The document’s total height is calculated, and the script scrolls and captures the page in segments, which are appended to an image list and then stitched together.

Method 4: Using Chrome’s Full Page Screenshot Feature

Recent versions of Chrome support a full-page screenshot feature in headless mode, which can be triggered via the DevTools Protocol.

Here’s an example:

from selenium import webdriver
from selenium.webdriver.chrome.options import Options

# Enable Chrome's headless mode
chrome_options = Options()
chrome_options.add_argument('--headless')

# Set up the ChromeDriver with headless mode
driver = webdriver.Chrome(options=chrome_options)
driver.get('https://www.example.com')

# Sending command to Chrome to capture full-page screenshot
driver.execute_cdp_cmd("Page.captureScreenshot", {"format": "png", "fromSurface": True, "captureBeyondViewport": True})
screenshot = driver.get_screenshot_as_png()
with open('full_page_headless.png', 'wb') as f:
    f.write(screenshot)

driver.quit()

The output is an image file named full_page_headless.png.

This code snippet enables headless mode in ChromeDriver and sends a command to Chrome that triggers a full-page screenshot. The resulting image is saved to a file without the need for additional libraries or manual stitching.

Bonus One-Liner Method 5: Quick and Simple Full-Page Screenshot

For a quick, one-liner full-page screenshot, assuming you have set up your environment variables properly:

webdriver.Chrome().get('https://www.example.com').save_screenshot('full_page_quick.png')

The output is an image file named full_page_quick.png showing the visible part of the page.

This one-liner is a simplistic method and does not guarantee a full-page screenshot but is useful for quickly saving the visible part of the page in a minimalistic and efficient way.

Summary/Discussion

Each method has its trade-offs:

  • Method 1: Resizing Window. Provides control over dimensions. Might not work on complex or lazy-loaded pages. Requires window manipulation.
  • Method 2: AShot Library. Automates stitching and scrolling. Requires third-party library installation. Easiest for complete screenshots.
  • Method 3: Manual Scrolling and Stitching. Provides maximum control and customization. It is time-consuming and requires image processing knowledge.
  • Method 4: Chrome’s Full Page Screenshot. Quick and built-in on headless mode. Limited to headless Chrome and newer versions.
  • Bonus Method 5: Quick One-Liner. Efficient for visible snapshot. Does not capture full page unless resized accordingly.