Selenium Shutterbug - make custom screenshots with Selenium WebDriver

Overview of Selenium Shutterbug - utility library to create customized screenshots using Selenium WebDriver and Java AWT

The most important part of test automation on any project is reporting. You may have thousands of tests running on dozens of devices, operating systems, browsers, but without descriptive, clear reporting the results all this effort is no more than waste of computation time and electricity.

A significant aspect of reporting results is to make self explanatory screenshots to be able to easy identify the reason of test failure and take appropriate actions - either raise a defect or fix the test.

Selenium Shutterbug was developed with above mentioned points in mind. The idea behind the project is to make testers life easier by enabling us to create descriptive screenshots which, in some cases, could be directly attached to the bug reports or serve as a source of information about system state at a specific moment of time.

Below are some basic examples of usage:

Take screenshot and save to default location (./screenshots/):

Shutterbug.shootPage(driver).save(); 

Take screenshot and specify location to save to:

Shutterbug.shootPage(driver).save("C:\\testing\\screenshots\\");

Take screenshot and scroll in both directions:

This is particularly useful while testing in Chrome, since it if following W3C definition of screenshot and takes screenshot of the top-level browsing context’s viewport only.

Shutterbug.shootPage(driver, ScrollStrategy.WHOLE_PAGE).save();

Take screenshot of specified WebElement only:

Shutterbug.shootElement(driver, element).save();

Compare screenshot taken with the expected one with specified deviation rate:

Shutterbug.shootPage(driver).equals(otherImage,0.1);

Take screenshot and save thumbnail as well (with specified resize ratio):

Shutterbug.shootPage(driver).withThumbnail(0.4).save();

And many more ..

To demonstrate how it all can be pieced together the example follows:

System.setProperty("webdriver.chrome.driver", "your path to  chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        driver.get("https://www.google.com/imghp");
        WebElement googleLogo = driver.findElement(By.id("hplogo"));
        WebElement searchBtn = driver.findElement(By.id("sblsbb"));
        WebElement searchBox = driver.findElement(By.className("gsfi"));

        searchBox.sendKeys("Testing");

        Shutterbug.shootPage(driver)
                .blur(searchBox)
                .highlight(searchBtn)
                .monochrome(googleLogo)
                .highlightWithText(googleLogo, Color.blue, 3, "Monochromed logo",Color.blue, new Font("SansSerif", Font.BOLD, 20))
                .highlightWithText(searchBox, "Blurred secret words")
                .withTitle("Google home page - " + new Date())
                .withName("home_page")
                .withThumbnail(0.7)
                .save("C:\\testing\\screenshots\\");
        driver.quit();

As the result of chaining the operation on taken screenshot the following image is processed and saved to C:\testing\screenshots\

The project is available in Maven Central

Maven dependency

<dependency>
    <groupId>com.assertthat</groupId>
    <artifactId>selenium-shutterbug</artifactId>
    <version>x.x</version>
</dependency>

Using Gradle

compile 'com.assertthat:selenium-shutterbug:x.x'

Selenium Shutterbug is open source project , developed under MIT license and hosted on Github. Any contributions are highly appreciated. ‘How to contribute’ process is described here.