Full-Page Screenshot Techniques for Chrome and Firefox Using Selenium and Headless Browsers

In web UI automation, developers often find that taking screenshots in Internet Explorer is straightforward, while capturing full-page screenshots in Chrome and Firefox can be challenging; this guide shares practical methods for both browsers.

1. Chrome

Initially, PhantomJS could be used to capture full-page screenshots of WebKit-based browsers, but support has been deprecated, prompting a shift to headless Chrome.

To use headless Chrome, set the --headless and --disable-gpu flags when launching the browser via Selenium WebDriver, then execute JavaScript to obtain page dimensions such as document.body.scrollWidth , document.body.offsetWidth , document.documentElement.clientWidth , document.documentElement.scrollWidth , and document.documentElement.offsetWidth . These values help calculate the full scrollable area for screenshot stitching.

2. Firefox

Firefox users can install the Screengrab add‑on, assign a custom shortcut (e.g., Ctrl+Z), and trigger it via Selenium's Keys interface. The process involves loading the add‑on configuration before launching the browser:

>extension_path – path to the Firefox profile containing the Screengrab extension.

>firefox_options – Selenium options that load the profile.

>browser – start Firefox with the configured profile.

>14, 15 – open the page and maximize the window.

>16 – locate a target element.

>17 – send the shortcut Ctrl+Z to invoke Screengrab.

>18, 19 – wait briefly, then close the browser.

Firefox also supports a headless mode similar to Chrome, which can be used for screenshot automation.

The article concludes by inviting readers to share alternative methods for UI screenshot capture, emphasizing community collaboration.