Enhancing Automation Testing with Selenium Screenshots

Automation testing is essential in modern software development, it is a process of running test scenarios on applications to reduce the manual effort needed for regression testing. However, when dealing with extensive regression suites, identifying the root cause of test failures can be challenging and time-consuming. A simple yet effective solution to this problem is capturing screenshots during test execution. This approach not only provides a visual reference for the application's state at the moment of failure but also saves significant time and effort.

The Importance of Screenshots in Automation Testing

When an automation test fails, the first step is to find out where and why it failed. Without a visual reference, this usually means running all the tests again, which is inefficient and takes a lot of time. By taking screenshots at the moment of failure, testers can see exactly what the application looked like when it happened. This makes it easier and faster to identify and fix the problem.

Screenshots serve several purposes:

Visual Debugging: They provide a snapshot of the application's state, helping testers understand what went wrong.

Documentation: They offer evidence of the application's behaviour at a specific point in time, which is useful for reporting bugs.

Efficiency: They reduce the need to re-run tests multiple times, saving time and resources.

Using Selenium to Capture Screenshots

Selenium, a popular tool for web automation testing, provides built-in functionality to capture screenshots during test execution. This feature is particularly useful for debugging and verifying the application's behaviour. Below is a simple guide on how to implement screenshot capture using Selenium.

Step-by-Step Guide

Set Up Selenium: Ensure you have Selenium WebDriver set up in your project. You can install it via package managers like Maven, Gradle, or directly download it from the Selenium website.

Test Script:

1. Create a Maven Project

Open your IDE: Use an IDE like IntelliJ IDEA, Eclipse, or Visual Studio Code.

Create a new Maven project: In the IDE, select File →  New →  Project →  Maven 

2. Add Dependencies in pom.xml

Open the pom.xml file and add  dependencies for Selenium and Apache Commons IO and Webdriver Manager.

Save the pom.xml file and update the Maven project to download the dependencies.

3. Create a Java Class for the Test Script

Create the package and class: In src/main/java, create a package and a new Java class.

4. Create a Folder for Screenshots

Create a folder:  create a folder named screenshots in your project to save screenshots files.

We can capture screenshot of

1. Full Page

2. Section of page 

3. Specific element on page  

1.Script to take screenshot of full page is as below:

package com.example;

import org.openqa.selenium.By;

import org.openqa.selenium.OutputType;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.WebElement;

import io.github.bonigarcia.wdm.WebDriverManager;

import org.openqa.selenium.chrome.ChromeDriver;

import org.openqa.selenium.TakesScreenshot;

import java.io.File;

import java.io.IOException;

import org.apache.commons.io.FileUtils;

public class Screenshot {

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

WebDriverManager.chromedriver().setup();

WebDriver driver = new ChromeDriver();

driver.get("https://demo.nopcommerce.com/");

driver.manage().window().maximize();

// full page screenshot

TakesScreenshot ts1 = (TakesScreenshot) driver;

File getsrc = ts1.getScreenshotAs(OutputType.FILE);

File fullpage = new File(".\\screenshots\\homepage.png");

FileUtils.copyFile(getsrc, fullpage);

driver.close();

}

}

TakesScreenshot ts1 = (TakesScreenshot) driver;

File getsrc = ts1.getScreenshotAs(OutputType.FILE);

File fullpage = new File(".\\screenshots\\homepage.png");

FileUtils.copyFile(getsrc, fullpage);

Here, we import necessary classes/interfaces from Selenium and other libraries.

WebDriver is used to control the browser, TakesScreenshot allows us to capture screenshots, and FileUtils helps with file operations.

WebDriverManager.chromedriver().setup();

WebDriver driver = new ChromeDriver();

We use WebDriverManager to set up the ChromeDriver automatically. Then, we initialize a ChromeDriver instance, which represents a Chrome browser session.

We instruct the WebDriver to navigate to the URL 

driver.get("https://demo.nopcommerce.com/");

driver.manage().window().maximize();

This command maximizes the browser window to ensure the entire webpage is visible.

TakesScreenshot ts1 = (TakesScreenshot) driver;

File getsrc = ts1.getScreenshotAs(OutputType.FILE);

We cast the WebDriver instance to TakesScreenshot, allowing us to capture screenshots. Then, we use getScreenshotAs() to take a screenshot and store it in a File object.

Here,We cast the WebDriver instance to TakesScreenshot to access its method getScreenshotAs(), enabling the WebDriver to capture screenshots.

 File fullpage = new File(".\\screenshots\\homepage.png");

FileUtils.copyFile(getsrc, fullpage);

We define a destination file path for the screenshot ("screenshots/homepage.png") and use FileUtils.copyFile() to save the screenshot to that location.

driver.close();

Finally, we close the browser session to release system resources.

2.Script to take screenshot of Specific Section of page is as below:

WebElement Section = driver.findElement(By.xpath(""));

File getsrc1 =Section.getScreenshotAs(OutputType.FILE);

 File sectionOfPage = new File(".\\screenshots\\SectionPage.png");

FileUtils.copyFile(getsrc1, sectionOfPage);

In this code we capture a screenshot of a specific section of a web page using Selenium WebDriver . First, it locates the element on the web page by using an XPath.This element is stored as a WebElement object named Section. The code then captures a screenshot of this WebElement by calling the getScreenshotAs method, which saves the screenshot as a temporary File object getsrc1. Next, it creates a new File object sectionOfPage representing the destination path ("./screenshots/SectionPage.png") where the screenshot will be saved. Finally, the FileUtils.copyFile(getsrc1, sectionOfPage) method is used to copy the screenshot from the temporary file to the specified destination path. This steps captures and stores a screenshot of the specific section of the web page in the designated directory.

3.Script to take screenshot of Specific element of page is as below:

WebElement element = driver.findElement(By.xpath(""));

File getsrc2 =Section.getScreenshotAs(OutputType.FILE);

File elementOfPage = new File(".\\screenshots\\elementPage.png");

FileUtils.copyFile(getsrc2, elementOfPage);

This code  captures a screenshot of a specific element on a web page using Selenium WebDriver. It first locates the  element with an XPath  and stores it in the element. Then, it takes a screenshot of this element and saves it to a temporary file getsrc2. Finally, it copies the screenshot to a designated path ./screenshots/elementofPage.png using FileUtils.copyFile().

This is how we can capture screenshots in Selenium to enhance our automation testing. I hope you found this blog helpful and informative. Enjoy learning and happy testing!