Interview #87: Selenium - How will you take full page screenshot?

Capturing a full-page screenshot in Selenium is essential for testing web applications to verify the UI, detect layout issues, and ensure elements appear as expected. However, taking a full-page screenshot in Selenium WebDriver is not straightforward because the default getScreenshotAs() method captures only the visible viewport and not the entire page.

Disclaimer: For QA-Testing Jobs, WhatsApp us @ 91-9606623245

To take a full-page screenshot, different approaches are required based on the browser being used.

1. Taking a Full-Page Screenshot in Different Browsers

? 1.1 Full Page Screenshot in Firefox (Built-in Support)

Firefox (GeckoDriver) natively supports full-page screenshots, making it the easiest browser to work with.

Java Code:

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import java.io.File;
import java.nio.file.Files;

public class FullPageScreenshotFirefox {
    public static void main(String[] args) throws Exception {
        // Set the Firefox driver path
        System.setProperty("webdriver.gecko.driver", "path/to/geckodriver");

        // Initialize Firefox WebDriver
        WebDriver driver = new FirefoxDriver();
        driver.get("https://www.example.com");

        // Take full-page screenshot (works only in Firefox)
        File screenshot = ((FirefoxDriver) driver).getFullPageScreenshotAs(OutputType.FILE);

        // Save the screenshot
        Files.copy(screenshot.toPath(), new File("fullpage_firefox.png").toPath());

        // Close the browser
        driver.quit();
    }
}        

?? Why it Works?

• The getFullPageScreenshotAs(OutputType.FILE) method is a built-in function in GeckoDriver (Firefox WebDriver).
• No extra libraries or JavaScript execution is required.

? 1.2 Full Page Screenshot in Chrome & Edge (Using AShot)

Google Chrome does not support full-page screenshots natively, but we can use AShot, a third-party Java library, to capture the full page.

Steps to Use AShot:

1. Add AShot Dependency (Maven)

<dependency>
    <groupId>ru.yandex.qatools.ashot</groupId>
    <artifactId>ashot</artifactId>
    <version>1.5.4</version>
</dependency>        

1. Java Code Using AShot

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import ru.yandex.qatools.ashot.AShot;
import ru.yandex.qatools.ashot.Screenshot;
import ru.yandex.qatools.ashot.shooting.ShootingStrategies;

import javax.imageio.ImageIO;
import java.io.File;
import java.io.IOException;

public class FullPageScreenshotChrome {
    public static void main(String[] args) throws IOException {
        // Set ChromeDriver path
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");

        // Initialize Chrome WebDriver
        WebDriver driver = new ChromeDriver();
        driver.get("https://www.example.com");

        // Use AShot to take a full-page screenshot
        Screenshot screenshot = new AShot()
                .shootingStrategy(ShootingStrategies.viewportPasting(1000))
                .takeScreenshot(driver);

        // Save the screenshot
        ImageIO.write(screenshot.getImage(), "PNG", new File("fullpage_chrome.png"));

        // Close the browser
        driver.quit();
    }
}        

?? Why Use AShot?

• It scrolls and captures the entire page in sections.
• It stitches multiple screenshots together into a full-page image.
• Works with Chrome, Edge, and Safari.

? 1.3 Full Page Screenshot in Chrome Using DevTools Protocol (Headless Mode)

If you're running headless Chrome, you can use the DevTools Protocol for full-page screenshots.

Java Code Using Chrome DevTools

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;
import org.openqa.selenium.devtools.DevTools;
import org.openqa.selenium.devtools.v114.page.Page;

import java.nio.file.Files;
import java.nio.file.Paths;
import java.util.Base64;

public class FullPageScreenshotChromeDevTools {
    public static void main(String[] args) throws Exception {
        // Set ChromeDriver path
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");

        // Enable Headless Mode
        ChromeOptions options = new ChromeOptions();
        options.addArguments("--headless");

        // Initialize Chrome WebDriver
        WebDriver driver = new ChromeDriver(options);
        DevTools devTools = ((ChromeDriver) driver).getDevTools();
        devTools.createSession();

        // Capture full-page screenshot using Chrome DevTools Protocol
        String screenshotBase64 = devTools.send(Page.captureScreenshot());
        byte[] decodedScreenshot = Base64.getDecoder().decode(screenshotBase64);
        Files.write(Paths.get("fullpage_devtools.png"), decodedScreenshot);

        // Close the browser
        driver.quit();
    }
}        

?? Why Use DevTools?

• Fast and Efficient (Uses Chrome’s built-in debugging protocol).
• No External Libraries Required.
• Only works in headless mode.

? 1.4 Full Page Screenshot Using JavaScript (Scroll & Capture)

For browsers that don’t support full-page screenshots natively, another method is to scroll and capture using JavaScript.

Java Code Using JavaScript Scrolling

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

import java.io.File;
import java.nio.file.Files;

public class FullPageScreenshotJS {
    public static void main(String[] args) throws Exception {
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");

        WebDriver driver = new ChromeDriver();
        driver.get("https://www.example.com");

        // Get the total height of the page
        JavascriptExecutor js = (JavascriptExecutor) driver;
        long totalHeight = (long) js.executeScript("return document.body.scrollHeight");

        // Scroll to the bottom
        js.executeScript("window.scrollTo(0, document.body.scrollHeight)");

        // Wait for loading
        Thread.sleep(2000);

        // Take screenshot
        File screenshot = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
        Files.copy(screenshot.toPath(), new File("fullpage_js.png").toPath());

        driver.quit();
    }
}        

?? Why Use JavaScript Scrolling?

• Works in any browser.
• Useful for applications that dynamically load content on scroll.

2. Comparing Different Methods

3. Best Practices for Taking Full-Page Screenshots

? Use Firefox when possible for built-in support.

? Use AShot if running tests in Chrome or Edge.

? Use Chrome DevTools Protocol for fast, headless testing.

? Avoid JavaScript scrolling unless no other option works.

By selecting the right method based on the browser and test requirements, you can efficiently capture full-page screenshots in Selenium. ??