DriversRecommendedOutdated drivers can make a good PC feel brokenScan driver issues before chasing fixes manually.Scan NowOctober DealsAmazon USOctober deal check: compare before you payAmazon US: current deals, useful picks and tech finds.Check DealsWindows FixRecommendedWindows errors stealing your time? Find the fix fastScan stability, cleanup and performance issues.Fix Now×
Skip to content
browser automation

How to Capture a Selenium Element Screenshot Beyond the Viewport

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Short answer: Selenium’s standard element screenshot captures the visible region inside an element’s bounding rectangle; it is not documented as a way to expand the image to include an element’s entire off-screen height. To capture a tall element while staying with Selenium, scroll the element’s actual scroll container, save overlapping screenshots, and stitch them into one image. The scrolling and stitching are a custom workaround, so inspect the result for missing content and seams. The W3C WebDriver specification defines the element screenshot in visible-region terms.

What Selenium’s element screenshot captures

The WebDriver command is named “Take Element Screenshot.” The W3C specification says, “The command takes a screenshot of the visible region encompassed by the bounding rectangle of an element.” That wording describes what is visible within the element’s bounds, not an automatic expansion to every pixel of a tall element outside the viewport. W3C WebDriver specification

Selenium bindings make it convenient to save an element screenshot as a PNG or retrieve PNG data. For example, Python’s WebElement.screenshot(filename) saves an element screenshot. Those conveniences do not, by themselves, promise a full beyond-viewport capture. Selenium Python WebElement API

There are three different targets that are easy to confuse:

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
#1 Best Overall
Sale
Philips 24 Inch Computer Monitor FHD 100Hz VA VESA Flicker-Free, 241V8LB
  • CRISP CLARITY: This 23.8″ Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
  • INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
  • THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
  • WORK SEAMLESSLY: This sleek monitor is virtually bezel-free on three sides, so the screen looks even bigger for the viewer. This minimalistic design also allows for seamless multi-monitor setups that enhance your workflow and boost productivity
  • A BETTER READING EXPERIENCE: For busy office workers, EasyRead mode provides a more paper-like experience for when viewing lengthy documents
  • The visible part of one element: use Selenium’s element screenshot method.
  • A tall element or panel extending beyond the viewport: capture successive visible portions while scrolling, then stitch them.
  • The entire scrollable document: use a workflow with documented full-page support, or build a separate tiled-capture workflow. Element capture and document capture are not interchangeable.

Capture a tall element with Selenium and stitch the segments

The following Python example captures a vertically scrollable element itself. It assumes that the target element owns its scrolling—for example, a panel with CSS overflow—and saves each viewport-sized portion as a separate PNG. It then combines the segments from top to bottom. Install Selenium, Pillow, and a browser driver configured for your environment before running it:

pip install selenium pillow

Replace the URL and CSS selector with your page and target. The example uses the element’s scrollTop, scrollHeight, and clientHeight values to determine how far to scroll and how much image content to retain from each segment.

Rank #2
Philips 22 Inch Computer Monitor FHD 100Hz VA VESA Flicker-Free, 221V8LB
  • CRISP CLARITY: This 22 inch class (21.5″ viewable) Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
  • 100HZ FAST REFRESH RATE: 100Hz brings your favorite movies and video games to life. Stream, binge, and play effortlessly
  • SMOOTH ACTION WITH ADAPTIVE-SYNC: Adaptive-Sync technology ensures fluid action sequences and rapid response time. Every frame will be rendered smoothly with crystal clarity and without stutter
  • INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
  • THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
from io import BytesIO
from pathlib import Path

from PIL import Image
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait

URL = "https://example.com"
SELECTOR = "#long-panel"
OUT = Path("element-full.png")

options = webdriver.ChromeOptions()
# Uncomment to run without a visible browser window:
# options.add_argument("--headless=new")

driver = webdriver.Chrome(options=options)
try:
    driver.get(URL)
    wait = WebDriverWait(driver, 20)
    element = wait.until(lambda d: d.find_element(By.CSS_SELECTOR, SELECTOR))

    # This version is for an element that is itself the scroll container.
    # Reset it to the top and read its scrollable content and visible height.
    driver.execute_script("arguments[0].scrollTop = 0", element)
    metrics = driver.execute_script(
        "return {height: arguments[0].scrollHeight, "
        "client: arguments[0].clientHeight};",
        element,
    )
    total_height = metrics["height"]
    viewport_height = metrics["client"]
    if not viewport_height:
        raise RuntimeError("Target has no visible client height")

    segments = []
    offset = 0
    while offset < total_height:
        driver.execute_script(
            "arguments[0].scrollTop = arguments[1]", element, offset
        )
        # Allow layout/paint to settle. Increase or replace this wait if the
        # page loads content asynchronously while scrolling.
        driver.implicitly_wait(0)
        driver.execute_async_script(
            "const done = arguments[arguments.length - 1]; "
            "requestAnimationFrame(() => requestAnimationFrame(done));"
        )

        png = element.screenshot_as_png
        segments.append((offset, Image.open(BytesIO(png)).convert("RGB")))

        # Move by less than one viewport to create overlap, helping avoid
        # gaps from rounding and making seams easier to inspect.
        offset += max(1, viewport_height - 40)

    # Use the element screenshot's actual pixel width. CSS pixels and image
    # pixels can differ on high-density displays, so scale vertical crops.
    width = segments[0][1].width
    scale = segments[0][1].height / viewport_height
    output = Image.new("RGB", (width, round(total_height * scale)), "white")
    last_bottom = 0
    for scroll_top, image in segments:
        y = round(scroll_top * scale)
        # Crop overlap already present in the output to avoid duplicate rows.
        if y < last_bottom:
            crop_rows = last_bottom - y
            if crop_rows >= image.height:
                continue
            image = image.crop((0, crop_rows, image.width, image.height))
            y = last_bottom
        output.paste(image, (0, y))
        last_bottom = y + image.height

    # Trim any excess beyond the content's calculated pixel height.
    output.crop((0, 0, width, round(total_height * scale))).save(OUT)
    print(f"Saved {OUT}")
finally:
    driver.quit()

This is a starting point, not a Selenium feature or a universal stitching algorithm. It assumes a stable, vertically scrolling target whose screenshot dimensions map consistently to its CSS client height. Compare the output against the page, especially near segment boundaries. If you see duplicated rows, gaps, or distorted scale, record the actual screenshot dimensions and scroll offsets and adjust the crop logic for that browser and page.

When the document scrolls instead of the element

If the page itself scrolls and the target is a tall, non-scrollable element, changing that element’s scrollTop will not reveal its lower portion. Scroll the document instead, locate the target on each pass, and capture only the part of the target that overlaps the viewport. The crop coordinates then need to account for the target’s changing viewport position and the browser’s device-pixel scale. Selenium exposes element geometry, including rectangle information, but you must calculate the visible intersection and crop each screenshot yourself. Selenium JavaScript WebElement API

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Rank #3
Sale
Dell 24 Monitor - SE2426H - 23.8-inch FHD (1920x1080) 144Hz 1ms Display, in-Plane Switching (IPS) Technology, AMD FreeSync™, TÜV 3-Star 2X HDMI, Tilt
  • Clear visuals. Fluid motion: A 144Hz refresh rate and 1ms MPRT deliver smooth, tear‑free motion across work, gaming, and streaming for clearer, more fluid viewing.
  • Eye comfort: TÜV Rheinland 3‑star* certification reduces harmful blue light while preserving stunning color quality without compromise. *TÜV Rheinland 3-star eye comfort certification.
  • Wide viewing angle: Get consistent views across a wide 178° /178° viewing angle.
  • In-Plane Switching (IPS): See excellent color accuracy and consistency across wide viewing angles with In-plane Switching (IPS) technology.
  • Ultra-thin bezels: Maximize your viewing experience with thin bezels.

For nested scrolling, use the container that actually owns the overflow. Scrolling the document cannot reveal content hidden inside a separately scrolling panel. Verify the relevant container in the browser’s layout tools or by checking which element’s scroll position changes.

Choose overlap deliberately

Advance by less than one viewport so neighboring captures overlap. Overlap helps reveal whether a seam has skipped or repeated content and gives room to trim the join. The sample uses a 40 CSS-pixel overlap; that is an implementation choice, not a Selenium requirement. Larger overlap can make alignment easier but increases the number of captures. The final crop must use image pixels, not blindly assume one image pixel equals one CSS pixel.

Rank #4
Samsung 27" Essential S3 (S36GD) Series FHD 1800R Curved Computer Monitor
  • CURVED FOR ENHANCED ENGAGEMENT: An immersive viewing experience with a curved monitor that wraps more closely around your field of vision; It creates a wider view, enhancing depth perception and minimizing peripheral distraction
  • SMOOTH PERFORMANCE FOR SEAMLESS CONTENT: Stay in the action when playing games, watching videos, or working on creative projects; The 100Hz refresh rate reduces lag and motion blur so you don't miss a thing in fast-paced moments¹
  • MORE GAMING POWER: Gain the edge with optimizable game settings; Color and image contrast can be adjusted to see scenes more vividly and spot enemies hiding in the dark; Game Mode adjusts any game to fill the screen so you can view every detail²
  • KEEP IT EASY ON THE EYES: Care for your eyes and stay comfortable, even during long sessions; Advanced eye comfort technology certified by TÜV reduces eye strain by minimizing blue light and reducing irritating screen flicker²
  • INCREASED VERSATILITY: Connect to more; Plug devices straight into your monitor for increased flexibility, making your computing environment even more convenient

Account for page behavior

Scrolling can change the page you are trying to record. Sticky headers may appear in every segment; animations may be at different frames; lazy-loaded images may not be ready immediately; virtualized lists may remove off-screen rows from the DOM. Freeze or disable animations where appropriate, wait for content to settle, and inspect the seams. If the page changes while you capture it, a single stitched image may not represent any one consistent page state.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Would a larger browser window be enough?

Increasing the browser window size can expose more content and may be sufficient when the whole target fits in the enlarged viewport. Selenium documents changing window dimensions and taking screenshots, but a larger window does not provide a general way to capture arbitrarily tall content. Selenium window and screenshot documentation W3C WebDriver specification

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Use a larger viewport when the requirement is simply “show more at once.” Use segmented capture when content still extends beyond it. For a genuinely tall page, increasing the window can also change responsive layout, so the result may not match the page as viewed at the original size.

Best Value
Sale
Sceptre New 22-Inch Gaming Monitor, FHD 1080p, Up to 144Hz, HDMI, DisplayPort, Built-in Speakers, Machine Black (E225W-FW144 Series, 2026)
  • 【INTEGRATED SPEAKERS】Whether you're at work or in the midst of an intense gaming session, our built-in speakers provide rich and seamless audio, all while keeping your desk clutter-free.
  • 【EASY ON THE EYES】 Protect your eyes and enhance your comfort with Blue-Light Shift technology. This feature reduces harmful blue light emissions from your screen, helping to alleviate eye strain during long hours of use and promoting healthier viewing habits.
  • 【WIDEN YOUR PERSPECTIVE】Our sleek minimal bezel design ensures undivided attention. The nearly bezel-free display seamlessly connects in a dual monitor arrangement, delivering an unobstructed view that lets you focus on more at once, completely distraction-free.

When full-page capture is the actual requirement

A complete scrollable document is a different target from one element or one nested panel. Playwright documents a fullPage screenshot option for the full scrollable page, separately from element screenshots. That is a Playwright capability; it should not be assumed to describe Selenium’s standard element screenshot command. If changing automation tools is acceptable, see the Playwright Screenshots documentation.

Choose the method based on the output you need: element capture for a visible component, custom scrolling and stitching for a tall target while remaining in Selenium, or a documented full-page option if the whole document is the subject. For any method, consider whether overlays and dynamic content should appear and whether the final image’s dimensions and legibility meet your use case.

Or skip the browser setup

If you need an image of a public web page rather than a screenshot of the live Selenium session or a specific element, ScreenshotNeo can return a screenshot or PDF from one request. It is not a drop-in replacement for Selenium element capture: it takes a URL, not your browser’s current state or a selected element. The supplied API example captures https://stripe.com; replace that target with the public URL you need. See the ScreenshotNeo API documentation for parameters and response details.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

ScreenshotNeo removes cookie/consent banners, newsletter popups, and chat widgets before capture; bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents use its screenshot tools. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000. Sign up free for ScreenshotNeo.

Troubleshooting gaps, duplicates, and incomplete captures

  • The image only shows the top: confirm that the target or its intended ancestor is the actual scroll container. If the document scrolls, scroll the document and compute the target’s visible crop instead of changing the element’s scrollTop.
  • Rows repeat or disappear at joins: compare adjacent captures and their scroll offsets. The overlap crop may not match the actual screenshot-to-CSS scale, or scroll positions may be rounded. Adjust the overlap and crop calculation, then inspect the entire stitched image.
  • The bottom is blank or clipped: verify the element’s measured scrollHeight and wait for lazy-loaded content before capturing. Content that loads only after scrolling may require a scroll-and-wait pass before you take the final set of screenshots.
  • Sticky bars repeat: fixed and sticky overlays may be rendered in every viewport capture. Decide whether they belong in the result; if not, hide them for the capture or crop them consistently, while checking that removing them does not alter layout.
  • Images or text shift between tiles: wait for fonts, images, and other changing content to settle, and disable animation if appropriate. A virtualized list may not retain earlier rows in the DOM, so scroll-and-stitch may not produce a faithful continuous image.
  • Screenshot dimensions do not match CSS dimensions: account for device scale when translating CSS scroll offsets into image-pixel crop positions. Measure the PNG segment dimensions rather than assuming a one-to-one mapping.

Validate the result

Before relying on the image, check the top and bottom, every join, the target’s borders, and any content that appeared only after scrolling. Keep the browser, driver, Selenium binding and version, target selector, and scroll-container choice with your capture notes: those details make a fragile custom workflow reproducible. The cited API descriptions establish screenshot behavior, not a performance benchmark or a guarantee that stitching will work for every page.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.

Leave a Reply

Your email address will not be published. Required fields are marked *

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Read next

Recommended PC Tool
Recommended PC Tool
Crashes, No Sound, or Screen Glitches?Free driver scan
PC Slower Than It Used to Be?Free scan - under a minute

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.