Capturing ScreenShot in Selenium

Screenshots in Selenium play a vital role in enhancing the effectiveness and efficiency of testing, troubleshooting, and communication during the software development process.

Why is Screenshot required in Automation testing?

As we know, one of the primary purposes of automation testing is to reduce manual effort. Therefore, the use of a screenshot captured during automated test runs becomes very useful. You would not want to monitor your application every time the tests are executed. The script can take a screenshot, which helps check the application functionality/state when the test execution completes. Screenshots also help you when your test case fails so that you can identify what went wrong in your script or your application.

They also help to distinguish whether the failures are due to application failure or due to the test script failure. The following scenarios will be the significant use cases, where a screenshot will be handy to debug the automated test cases failures caused:

• When application issues occur

• When an assertion failure occurs.

• Also, when there is some difficulty in finding a web element on a page.

• Where there is a Timeout in finding a web element on a web page

How to take a screenshot in Selenium?

To take a screenshot in Selenium, we use an interface called TakesScreenshot, which enables the Selenium WebDriver to capture a screenshot and store it in different ways. It has a got a method "getScreenshotAs() " which captures the screenshot and store it in the specified location.

Below is a fundamental syntax of capturing a screenshot, using Selenium WebDriver, of the currently visible part of the Web page:

File screenshot File = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);

Let's try to combine the above code and write code to capture the screenshot of the Wix site homepage -

public static void main(String[] args) {  
 // Initialize browser    
 WebDriver driver = new ChromeDriver();          
 //navigate to url
 driver.get("https://www.wix.com/");         
 //Take the screenshot     
 File screenshot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);          
 //Copy the file to a location and use try catch block to handle exception  - D:\\homePageScreenshot.png
 try {FileUtils.copyFile(screenshot, newFile("D:\\\\projectScreenshots\\\\homePageScreenshot.png"));     
 } 
 catch (IOException e) {         
 System.out.println(e.getMessage());    
  }          
  //closing the webdriver
  driver.close(); 

The output of the above program will generate a file in the specified location as below-

How to take a screenshot of the full page in Selenium?

Selenium WebDriver doesn't provide the inherent capability to capture screenshot of the whole page. To capture the full page screenshot, we have to use a third-party library named Ashot. It provides the ability to take a screenshot of a particular WebElement as well as a full-page screenshot. You can download the jar file of the Ashot library from "https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot/1.5.4" and then add the same as an external dependency as per the steps specified in the article "Add External library to Eclipse project. " Once the Ashot library adds to the Eclipse project, we can use the following methods to capture the screenshots of the web page:

• Capture the screen size image, which is the viewable area on the screen. It will be the same as seen in the above section to capture a screenshot of the page that is currently visible. You can do the same task using Ashot as well with the below code. There we create an Ashot object and call the takeScreenshot() method:

Screenshot screenshot = new Ashot().takeScreenshot(driver);

• Capture the full page screenshot, which is more than the currently visible part on the screen. After creating the AShot object, we need to call the shootingStrategy() method before calling the takeScreenshot() method to set up the policy. We can write the below code to do so:

Screenshot s=new AShot().shootingStrategy(ShootingStrategies.viewportPasting(1000)).takeScreenshot(driver);
ImageIO.write(s.getImage(),"PNG",new File("<< file path>>"));

• In the above code, 1000 is scrolled out time in milliseconds. In other words, it means that the program will scroll for each 1000 msec to take a screenshot.

Let's try to apply it to the Wix site home page to get the entire page screenshot, including the tiles missing in the viewable area screenshot.

public static void main(String[] args) throws IOException {
        
    // Initialize browser
   WebDriver driver = new ChromeDriver();
    
    //navigate to url
    driver.get("https://www.wix.com/");
    
   //Take the screenshot
    Screenshot screenshot = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(1000)).takeScreenshot(driver);
    ImageIO.write(screenshot.getImage(), "PNG", new File("D:\\\\projectScreenshots\\\\fullPageScreenshot.png"));
    
    //closing the webdriver
    driver.close();
}

The output of the above code will generate the image in the specified path. It looks like below and contains all the elements of the page -

How to take a screenshot of a particular element in Selenium?

Sometimes, we need a screenshot of a particular element on a page.

capture the screenshot of a particular element by using the getScreenshotAs() method.

public static void main(String[] args) throws IOException {


		// Initialize browser
		WebDriver driver = new ChromeDriver();


		// navigate to url
		driver.get("https://www.wix.com/");


		// Locate the web element
		WebElement logo = driver.findElement(By.xpath("//a[@aria-label='Wix logo, homepage']"));


		// capture screenshot with getScreenshotAs() of the WebElement class
		File f = logo.getScreenshotAs(OutputType.FILE);
		FileUtils.copyFile(f, new File("D:\\projectScreenshots\\logoScreeshot.png"));


		// closing the webdriver
		driver.close();
		}

The output of the above code will be the screenshot of the logo, as shown below: