Full page screenshot in Selenium Python - Deep Dive

Overview - Full page screenshot

What is it?

A full page screenshot captures the entire visible content of a web page, including parts that require scrolling. Unlike a regular screenshot that only captures the visible area on the screen, a full page screenshot shows everything from top to bottom. This is useful for testing and documenting how a page looks in its entirety.

Why it matters

Without full page screenshots, testers might miss visual bugs or layout issues hidden below the fold (the part of the page you must scroll to see). This can lead to incomplete testing and missed defects, causing poor user experience. Full page screenshots help ensure the whole page is checked and documented, improving quality and communication.

Where it fits

Before learning full page screenshots, you should understand basic Selenium WebDriver usage and how to take simple screenshots. After mastering full page screenshots, you can explore visual testing tools and automated comparison techniques to detect visual regressions.

Mental Model

Core Idea

A full page screenshot stitches together multiple viewport captures to create one complete image of the entire web page.

Think of it like...

Taking a full page screenshot is like taking multiple photos of a tall building floor by floor and then gluing them together to see the whole building in one picture.

┌─────────────────────────────┐
│ Viewport 1 (top of page)    │
├─────────────────────────────┤
│ Viewport 2 (middle section) │
├─────────────────────────────┤
│ Viewport 3 (bottom section) │
└─────────────────────────────┘
        ↓ Stitch together ↓
┌─────────────────────────────┐
│       Full Page Image        │
└─────────────────────────────┘

Build-Up - 6 Steps

1

Foundation

Basic screenshot with Selenium

Concept: Learn how to take a simple screenshot of the visible browser area using Selenium.

Use Selenium's get_screenshot_as_file() method to capture the current visible part of the page. Example: from selenium import webdriver browser = webdriver.Chrome() browser.get('https://example.com') browser.get_screenshot_as_file('visible_area.png') browser.quit()

Result

A PNG file named 'visible_area.png' is saved showing only the visible part of the page.

Understanding how to capture the visible viewport is the first step before tackling full page screenshots.

2

Foundation

Understanding viewport and page height

Concept: Learn the difference between the visible viewport size and the total page height.

The viewport is the part of the page visible on screen without scrolling. The page height is the full height including content below the fold. You can get these values using JavaScript: viewport_height = browser.execute_script('return window.innerHeight') page_height = browser.execute_script('return document.body.scrollHeight')

Result

You get two numbers: viewport height (e.g., 800px) and page height (e.g., 3000px).

Knowing these sizes helps plan how many screenshots are needed to cover the entire page.

3

Intermediate

Scrolling and capturing multiple screenshots

🤔Before reading on: Do you think scrolling and capturing screenshots one by one is enough to get a full page image? Commit to your answer.

Concept: Learn to scroll the page step-by-step and take screenshots of each viewport section.

Use JavaScript to scroll the page down by viewport height increments. After each scroll, capture a screenshot. Example: import time for offset in range(0, page_height, viewport_height): browser.execute_script(f'window.scrollTo(0, {offset})') time.sleep(0.5) # wait for scroll browser.get_screenshot_as_file(f'screenshot_{offset}.png')

Result

Multiple images are saved, each showing a different part of the page.

Capturing multiple screenshots is necessary because browsers only capture the visible area at a time.

4

Intermediate

Stitching screenshots into one image

🤔Before reading on: Do you think simply stacking images vertically will always produce a perfect full page screenshot? Commit to your answer.

Concept: Combine the multiple viewport screenshots into one tall image representing the full page.

Use an image processing library like Pillow in Python to open all screenshots and paste them vertically into a new blank image: from PIL import Image images = [Image.open(f'screenshot_{offset}.png') for offset in offsets] full_height = sum(img.height for img in images) full_width = images[0].width full_image = Image.new('RGB', (full_width, full_height)) current_height = 0 for img in images: full_image.paste(img, (0, current_height)) current_height += img.height full_image.save('full_page.png')

Result

A single image file 'full_page.png' shows the entire page from top to bottom.

Stitching images manually is needed because Selenium does not provide a built-in full page screenshot method.

5

Advanced

Using browser native full page screenshot APIs

🤔Before reading on: Do you think all browsers support native full page screenshots via Selenium? Commit to your answer.

Concept: Some browsers like Firefox and Chrome (via DevTools) support native full page screenshots through special commands.

In Firefox, you can use the 'fullPage' option: browser.get_full_page_screenshot_as_file('fullpage_firefox.png') In Chrome, use DevTools protocol commands via Selenium 4: from selenium.webdriver.chrome.webdriver import WebDriver browser.execute_cdp_cmd('Page.captureScreenshot', {'captureBeyondViewport': True}) This captures the entire page without manual scrolling or stitching.

Result

A full page screenshot is saved directly by the browser, simplifying the process.

Knowing browser capabilities can save time and reduce complexity in capturing full page screenshots.

6

Expert

Handling dynamic content and lazy loading

🤔Before reading on: Do you think scrolling once through the page always captures all dynamic content? Commit to your answer.

Concept: Web pages often load images or content only when scrolled into view (lazy loading). Handling this requires scrolling carefully and waiting for content to load before capturing screenshots.

Implement a scroll-and-wait loop: import time last_height = 0 while True: browser.execute_script('window.scrollTo(0, document.body.scrollHeight)') time.sleep(2) # wait for lazy load new_height = browser.execute_script('return document.body.scrollHeight') if new_height == last_height: break last_height = new_height Then capture the full page screenshot using native API or stitching.

Result

All lazy-loaded content appears in the final full page screenshot.

Understanding page behavior and timing is crucial to avoid missing content in full page screenshots.

Under the Hood

Browsers render web pages inside a viewport, which is the visible area. When taking a screenshot, the browser captures only this viewport. To get the full page, multiple viewport-sized images are captured while scrolling through the page. These images are then combined (stitched) into one tall image. Some browsers expose native commands to capture the entire page in one shot by internally rendering the full page offscreen.

Why designed this way?

Originally, browsers and Selenium focused on visible viewport screenshots because that matched user view and was simpler to implement. Full page screenshots required extra work because pages can be very tall and dynamic. Native full page capture was added later to improve testing and documentation, but not all browsers support it equally, so manual stitching remains common.

┌───────────────┐
│ Browser Viewport│
│ (visible area) │
└──────┬────────┘
       │ Capture screenshot
       ▼
┌───────────────┐
│ Image 1       │
└───────────────┘
       │ Scroll down
       ▼
┌───────────────┐
│ Image 2       │
└───────────────┘
       │ ...
       ▼
┌───────────────┐
│ Image N       │
└───────────────┘
       │ Stitch images
       ▼
┌───────────────────────────┐
│ Full Page Screenshot Image│
└───────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does Selenium's get_screenshot_as_file() capture the entire page by default? Commit yes or no.

Common Belief: Selenium's screenshot method captures the whole page automatically.

Reality: It only captures the visible viewport, not the full page.

Why it matters: Assuming full page capture leads to missed bugs in content below the fold.

Quick: Is stitching screenshots always perfect without any alignment issues? Commit yes or no.

Common Belief: Simply stacking viewport screenshots always produces a flawless full page image.

Reality: Stitching can have alignment problems due to fixed headers, dynamic content, or scrollbars.

Why it matters: Ignoring these issues can cause misleading screenshots and false test results.

Quick: Do all browsers support native full page screenshots via Selenium? Commit yes or no.

Common Belief: All browsers support native full page screenshots through Selenium commands.

Reality: Only some browsers like Firefox and Chrome (via DevTools) support this; others require manual stitching.

Why it matters: Expecting universal support can waste time and cause test failures.

Quick: Does scrolling once through the page guarantee all lazy-loaded content appears? Commit yes or no.

Common Belief: Scrolling once through the page loads all content for screenshot capture.

Reality: Some content loads only after multiple scrolls or delays; one scroll may miss it.

Why it matters: Missing lazy-loaded content leads to incomplete screenshots and missed bugs.

Expert Zone

1

Some pages have sticky headers or footers that appear on every viewport screenshot, causing duplicated areas in stitched images.

2

Browser zoom level and device pixel ratio affect screenshot dimensions and stitching accuracy.

3

Dynamic content like animations or ads can change between screenshots, causing visual glitches in the final image.

When NOT to use

Full page screenshots are not ideal for pages with heavy animations or real-time updates; video capture or specialized visual testing tools are better. Also, for very long pages, stitching can be slow and memory-intensive; consider sampling key sections instead.

Production Patterns

Professionals use native full page screenshot APIs when available for speed and reliability. When not, they implement scroll-and-stitch with careful handling of fixed elements and lazy loading. Visual testing frameworks integrate full page screenshots with automated comparison to detect UI regressions.

Connections

Visual Regression Testing

Builds-on

Full page screenshots provide the baseline images needed for automated visual regression tests that detect UI changes over time.

Lazy Loading in Web Development

Opposite challenge

Understanding lazy loading helps testers know why full page screenshots require scrolling and waiting to capture all content.

Panorama Photography

Same pattern

Both full page screenshots and panorama photos combine multiple images to create one seamless wide or tall image.

Common Pitfalls

#1 Capturing only the visible viewport and assuming it shows the whole page.

Wrong approach:

browser.get_screenshot_as_file('page.png') # captures only visible area

Correct approach:

Use native full page screenshot API or scroll and stitch multiple screenshots.

Root cause:

Misunderstanding that Selenium's default screenshot captures the entire page.

#2 Stitching screenshots without accounting for fixed headers causing duplicated image parts.

Wrong approach:

Paste all viewport images one below another without cropping fixed header areas.

Correct approach:

Detect and crop fixed headers from each screenshot before stitching to avoid overlap.

Root cause:

Not recognizing that fixed elements appear in every viewport capture.

#3 Not waiting for lazy-loaded content to appear before capturing screenshots.

Wrong approach:

Scroll once to bottom and immediately capture screenshots.

Correct approach:

Scroll slowly with delays, checking page height changes until content fully loads.

Root cause:

Ignoring dynamic content loading behavior on modern web pages.

Key Takeaways

A full page screenshot captures the entire web page, not just the visible part.

Most browsers capture only the visible viewport by default, so multiple screenshots and stitching are often needed.

Some browsers support native full page screenshots, simplifying the process.

Handling dynamic content like lazy loading and fixed headers is essential for accurate full page screenshots.

Full page screenshots are foundational for visual testing and catching UI issues hidden below the fold.