Screenshots in Selenium

What Are Screenshots in Selenium?

Taking **screenshots** during test execution is a useful feature in Selenium. Screenshots help capture the state of the application at specific points in the test, such as when an error occurs or a test fails. Selenium provides the **`TakesScreenshot`** interface, which is used to capture and save screenshots as images.

How to Capture Screenshots in Selenium

Selenium uses the **`TakesScreenshot`** interface to capture screenshots. The WebDriver class implements this interface, which provides the method **`getScreenshotAs()`** for taking a screenshot. The screenshot can be saved in various formats such as PNG, JPEG, or BASE64 encoding.

Methods in `TakesScreenshot` Interface:

getScreenshotAs(OutputType target): Captures the screenshot and returns it in the specified format. Common formats include `OutputType.FILE`, `OutputType.BYTES`, and `OutputType.BASE64`.

Example: Capturing a Screenshot in Selenium

Here is an example of how to take a screenshot and save it as a file:


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.io.IOException;
import org.apache.commons.io.FileUtils;

public class ScreenshotExample {

    public static void main(String[] args) {
        // Set up WebDriver
        System.setProperty("webdriver.chrome.driver", "./drivers/chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        
        try {
            // Navigate to a webpage
            driver.get("https://shariqsp.com");
            
            // Take a screenshot
            TakesScreenshot screenshot = (TakesScreenshot) driver;
            File sourceFile = screenshot.getScreenshotAs(OutputType.FILE);
            
            // Save the screenshot to a file
            File destinationFile = new File("./screenshots/homepage.png");
            FileUtils.copyFile(sourceFile, destinationFile);
            
            System.out.println("Screenshot saved successfully!");
            
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            // Close the browser
            driver.quit();
        }
    }
}

Explanation of the Code:

TakesScreenshot Interface: The WebDriver instance is cast to `TakesScreenshot`, allowing the `getScreenshotAs()` method to capture the screenshot.
OutputType.FILE: The screenshot is captured as a file and saved to the desired location using `FileUtils.copyFile()` from the Apache Commons IO library.
File Location: The screenshot is saved in the `./screenshots/` directory with the filename `homepage.png`.

Scenarios for Capturing Screenshots

Screenshots can be captured for a variety of scenarios during test execution. Here are some common use cases:

1. Capturing Screenshots on Test Failure

It’s common practice to capture screenshots when a test fails. This helps identify the state of the application when the failure occurred. You can integrate this into your test framework using a **`TestNG Listener`** or **`JUnit Rule`**.

Example: Screenshot on Test Failure Using TestNG Listener


import org.testng.ITestListener;
import org.testng.ITestResult;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;
import org.apache.commons.io.FileUtils;
import java.io.File;
import java.io.IOException;

public class ScreenshotOnFailureListener implements ITestListener {

    WebDriver driver;

    @Override
    public void onTestFailure(ITestResult result) {
        // Capture screenshot on test failure
        TakesScreenshot screenshot = (TakesScreenshot) driver;
        File sourceFile = screenshot.getScreenshotAs(OutputType.FILE);
        
        try {
            File destinationFile = new File("./screenshots/failure.png");
            FileUtils.copyFile(sourceFile, destinationFile);
            System.out.println("Screenshot captured for failed test: " + result.getName());
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    
    // Other listener methods can be implemented as needed
}

2. Capturing Screenshots at Specific Checkpoints

You can capture screenshots at specific points during test execution, such as after filling a form or before submitting a transaction. This can help in debugging issues by recording the application state at various stages of the workflow.

Example: Screenshot After Filling a Form


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.io.IOException;
import org.apache.commons.io.FileUtils;

public class FormScreenshotExample {

    public static void main(String[] args) {
        // Set up WebDriver
        System.setProperty("webdriver.chrome.driver", "./drivers/chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        
        try {
            // Navigate to a webpage and fill a form (example)
            driver.get("https://shariqsp.com/form");
            // Assuming form filling steps here...
            
            // Take a screenshot after form is filled
            TakesScreenshot screenshot = (TakesScreenshot) driver;
            File sourceFile = screenshot.getScreenshotAs(OutputType.FILE);
            
            // Save the screenshot
            File destinationFile = new File("./screenshots/form_filled.png");
            FileUtils.copyFile(sourceFile, destinationFile);
            
            System.out.println("Screenshot saved after filling the form!");
            
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            // Close the browser
            driver.quit();
        }
    }
}

Advantages of Capturing Screenshots

Capturing screenshots during test execution has several benefits, including:

Debugging: Screenshots help identify the state of the application when a test fails, making it easier to debug issues.
Audit Trails: Screenshots provide visual evidence of test execution, which can be useful for auditing purposes.
Reporting: Integrating screenshots into test reports provides a more comprehensive overview of test results.
Improved Test Visibility: Test reports with screenshots give stakeholders better insights into test execution, especially in case of failures or warnings.

Implementation of Screenshot Capture in Selenium

The TakesScreenshot interface in Selenium allows capturing screenshots of the entire webpage. However, to capture a screenshot of a specific web element, such as a button, you can use the getScreenshotAs method directly on the WebElement instance.

Steps to Capture a Screenshot of a Web Element

Initialize the WebDriver and navigate to the desired web page.
Locate the web element you want to capture, using methods like findElement.
Use the getScreenshotAs method on the WebElement to capture the screenshot.
Save the screenshot to a specified location.

Sample Code

import org.openqa.selenium.*;
        import org.openqa.selenium.chrome.ChromeDriver;
        import org.openqa.selenium.OutputType;
        import java.io.File;
        import org.apache.commons.io.FileUtils;
        
        public class ScreenshotExample {
            public static void main(String[] args) {
                WebDriver driver = new ChromeDriver();
                driver.get("http://example.com");
                
                // Locate the web element (button in this case)
                WebElement button = driver.findElement(By.id("buttonId"));
                
                // Take a screenshot of the button
                File srcFile = button.getScreenshotAs(OutputType.FILE);
                
                try {
                    // Save the screenshot to a specified location
                    FileUtils.copyFile(srcFile, new File("button_screenshot.png"));
                } catch (Exception e) {
                    e.printStackTrace();
                } finally {
                    driver.quit();
                }
            }
        }

In this code, we initialize the ChromeDriver, navigate to a webpage, locate the button using its ID, and directly capture the screenshot of the button without cropping. Finally, we save the screenshot as "button_screenshot.png".