Over a million developers have joined DZone.

Have You Ever Tried to Compare Images in an Automated Test?

A new open source tool aims to bring image comparison to automated testing. Check out some sample code and the GitHub source!

· DevOps Zone

Discover how to optimize your DevOps workflows with our cloud-based automated testing infrastructure, brought to you in partnership with Sauce Labs

If you ended up trying to do some sort of image comparison inside your automated tests at some point, then this article should get you one step closer to that idea.

How is that achievable? Well... it is not a commercial tool, it is an open-source one, in its early stages.

How does the tool behave? At its root is a REST-API client that is able to save images and provide feedback when asked to do a comparison.

What it actually does is quite simple, based on some parameters that you build so that you have a unique identifier for a screenshot that you're about to take. Once that has been done, you will want to see if the tool has any history with those parameters, so that you would know if there is something that you would like to compare now.

Here is an out-of-the-box sample on how you could use the code:

public class ScreenTest {

    @Test
    public void blinkTest() {
        // Provide the URL where the tool runs
        // In this example you could rely on the heroku instance
        String baseURL = "https://selenium-screenshot-watcher.herokuapp.com/";
        WebDriver driver = new FirefoxDriver();
        driver.manage().window().maximize();
        driver.get("http://the-internet.herokuapp.com/drag_and_drop");

        String testName = "heroku sample test - 1";
        String testBrowser = "firefox";
        String description = "running screenshot-watcher-sample on travis";

        // Initialize the tool
        ScreenshotWatcher watcher = new ScreenshotWatcher(driver, baseURL);

        // Takes a screenshot
        BaseScreenshotModel scrTaken = watcher.blink(testName, testBrowser, description);

        // Compares the screenshot
        CompareScreenshotsResponse compareResponse = watcher.compare(scrTaken);

        // assert if the images are the same, if not, they visit the review link
        assertTrue(compareResponse.getReviewLink(), compareResponse.isSameImage());
    }
}

If you want to try it with your own website and see how it behaves, I've put together a sample project at: https://github.com/web-innovate/selenium-screenshot-watcher-sample. The project is just a skeleton that uses the API of the selenium-screenshot-watcher tool, which can be found/viewed at: https://github.com/web-innovate/selenium-screenshot-watcher.

The problem I tried to solve with this tool is to determine when something changed in the UI so that you will be safe from a high-fidelity point of view.

If you plan to consider integrating it into your exsisting tests, that can be easily achieved, as the support for the tool does not tell you how to write your tests. It is up to you to to decide when you want to use the tool, at what point, and when to put it to work into doing the image comparison.

I have to say that the tool is in its early stages, and the only support it has now is just to "say" if two screenshots are the same or not, allowing you to see the differences in case the screenshots don't match, so you can decide if the change is an expected one or not.

The next step will be to build support in the tool to allow certain areas of the screenshot to be ignored, as this will really help with pages that contain banners, or image slideshows, so that the tests will only focus on the areas that matter, and not on the entire page, as it does now.

Download “The DevOps Journey - From Waterfall to Continuous Delivery” to learn learn about the importance of integrating automated testing into the DevOps workflow, brought to you in partnership with Sauce Labs.

Topics:
selenium ,automated testing ,web testing

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}