Taking Automated Screenshots Using Selenium

Image for post
Image for post

There is no other automation framework in the market that is more used for automating web testing tasks than Selenium. And one of the key functionalities of Selenium is the ability to take webpage screenshots. However taking full page screenshots across different browsers using Selenium is a unique challenge that many selenium beginners struggle with. In this post we will help you out and dive a little deeper on how we can take full page screenshots of webpages across different browser especially to check for cross browser compatibility of layout.

Why do we need to take a screenshot?

You are running an automation test. How can you be sure that the webpage you have opened is the right one. How can you be sure that there was no error in layout of the webpage?

The solution, take automated screenshots of pages in the middle of screenshots as proof that your page is working fine or your script is working as intended.

The trick can also be used in checking visual layouts automatically of web pages, especially during regression testing where you have to perform a huge number of tests. These screenshots also help in debugging errors. You get to know when and at which step the test fails.

Taking Screenshot of Browser Window using Selenium WebDriver

Selenium WebDriver has built-in functionality to take screenshots across the page and it’s quite easy to use as well.

Selenium has the TakesScreenshot interface to capture the screenshots during execution of your Selenium script. The TakesScreenshot interface has a method named getScreenshotAs( ) which can capture a screenshot and store it in any location specified by us. With this, we can take a screenshot of pages across various browsers like Chrome, Firefox, IE, Opera etc using their respective web-drivers.

The WebDriver interface extends TakesScreenshot and all browser driver classes like ChromeDriver, FirefoxDriver, InternetExplorerDriver, EdgeDriver, OperaDriver etc, implements TakesScreenshot.

The WebDriver extending TakesScreenshot and the getScreenshotAs( ) method, capture only the visible area of the web page in all the browsers and not the full page.

Java code for taking a screenshot of a website using Selenium WebDriver:

import java.io.File;
import java.io.IOException;
import java.util.concurrent.TimeUnit;

import org.apache.commons.io.FileUtils;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class SeleniumScreenshotTest {

public static void main(String[] args) throws IOException {
System.setProperty("webdriver.chrome.driver" , "C:\\drivers\\chromedriver.exe");WebDriver driver = new ChromeDriver();driver.manage().timeouts().implicitlyWait(10,TimeUnit.SECONDS);

File source_file = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(source_file, new File("C:\\screenshot.png"));


In the above code, we have used the Chrome WebDriver to launch the chrome browser. We started off by specifying the Chrome webdriver path and setting it as a system property. Next, the code taking the screenshot of the website “https://www.lambdatest.com/” and then saving the screenshot in our local machine. As I said before, this screenshot is only of the window that is visible in the browser when the website is loaded, i.e. the first fold only. This, however, is not useful for many testers. Full page screenshots are very important part of strategy. Taking automated ones using Selenium is a little bit tricky.

Taking Screenshots of the entire page

The easiest solution is to take help of a third-party tool. To take screenshot of the entire webpage, we can use a third party utility like AShot.

It is a WebDriver screenshot utility and that can be used to capture the entire page and can even be used to capture the individual webelement screenshots.To do this we need to download the ashot.jar file and add it to the project along with the selenium jar files.

import org.openqa.selenium.*;
import org.openqa.selenium.firefox.FirefoxDriver;
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;

public class TakeFullPageScreenShot
public static void main(String args[]) throws Exception
System.setProperty("webdriver.chrome.driver" , “C:\\drivers\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
Screenshot screenshot = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(1000)).takeScreenshot(driver);ImageIO.write(screenshot.getImage(),"PNG",new File(“C:\\fullpagescreenshot.png"));}

Again, in this piece of code as well, we are using Chrome WebDriver to invoke chrome browser, then taking a complete screenshot of the page using AShot.

Alerts and popup boxes

The next major roadblock is, popups. When launching the browser with Selenium, if your website has alerts and popup boxes, they can prevent the website from being loaded completely. And instead of getting the screenshot of the webpage we end up getting the screenshot of the alerts and popup boxes, or worse, may get an UnhandledAlertException error. These alerts are more frequent in Internet Explorer.

To handle them Selenium has an interface called Alert. It is present in the org.openqa.selenium.Alert package.

Alert interface has the following methods to deal with the alert:

  • accept() To accept the alert
  • dismiss() To dismiss the alert
  • getText() To get the text of the alert
  • sendKeys() To write some text to the alert

Updated Selenium Driver

Even though Selenium tools like AShot takes screenshots of complete pages quite easily they have some issues that are inherent to Selenium itself. Latest web technologies which do not have support for Selenium gives a lot of errors. Sticky menus for example are especially problematic to handle. A good approach is to use latest Selenium WebDrivers along with latest browser drivers.

Automatic Screenshots at LambdaTest

You can also take automatic screenshots of your webpages at LambdaTest as well. It’s a codeless way to take screenshots across 2000+ different browsers, browser versions, and operating systems with a single click.

Image for post
Image for post

Originally published at www.lambdatest.com on July 9, 2018.

Author: Rishabh Arya

Product Growth at @lambdatesting (www.lambdatest.com)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store