Screenshot Testing using flue2ent
Comparing images could be easier than you think
Screenshot Testing is a technique used by end-to-end testing which captures a screenshot from an URL and then compare the result with an expected image.
Flue2ent is an API responsible for making the end-to-end tests in Java interesting again. The proposal of flue2ent is wrap the Selenium API making it more readable and easy to use. Flue2ent means fluent + e2e (end-to-end), fluent is a reference for Martin Fowler’s Fluent Interface.
In this article we are focusing in a real simple example using flue2ent, it is hello world just to demonstrate how this API can help you to implement your Screenshot Tests.
The first step is add to the pom.xml the flue2ent-core dependency, in case your are using another build system, like Gradle, you just need to do the same thing in gradle file.
The screenshot API was added to the flue2ent in version 1.0.4, so be sure that you are using the current stable version.
The second step should be mapping the web elements from the Google home page. The Flue2ent allows us to create an interface mapping those elements, and it will implement those methods for us.
In our example, we are interested only in the Google logo and the privacy reminder bar, on the bottom of the page.
As you can see in the code below, we are creating another interface for representing the privacy reminder bar, which contains two buttons: “Remind me later” and “Review now”.
The next step is writing our test. Let’s create a quite simple test, it should access the Google Home page and taking a first screenshot, after that clicking on the “Remind me later” button in order to hide the privacy reminder bar, and then we are taking another screenshot and comparing to the first one.
The method beforeEach is responsible for creating the Selenium WebDriver instance, in this example we are using ChromeDriver, but you can use whatever browser you want. At the line 9, we are creating a Website instance, using the Selenium WebDriver and visiting the Google home page.
At the line 10 we are maximizing the browser window, just to be sure that our screenshots will have the same size.
The method afterEach, at the bottom, is used to close the Selenium WebDriver and quit after the tests. It’s needed to not leave live running processes after the test execution.
The first screenshot, take by the line 16, displays the Google Home page with the privacy reminder bar on the bottom of the page, like in the image below:
In the line 17, our test is clicking at “Remind me later” button, hiding the privacy policy bar. The second screenshot, taken by the line 19, displays the Google Home without the image
Still in the line 19, we are comparing the first screenshot (from line 16) to the current one, it is comparing the differences pixel by pixel.
In the line 23, we are saving the diff image, which by default uses a red rectangle to represent the diff area between those two screenshots.
The image above has a red square bigger than the privacy reminder box, it is starting from the text field and going until the bottom after the privacy reminder box area.
I don’t know whether you have noticed or not, but when the first screenshot was taken, the focus was on text field, and after clicking on “Remind me later” button, the text field loses the focus, that is the reason for the size of the red rectangle, it’s representing those two differences at the page.
We can make those differences more visible, instead of highlight the whole area witch was affected, we can highlight only the different pixels between those screenshots.
For highlighting the pixels, we should inform in the image method parameter which kind of highlight we want.
After that change, if you run the test once again, you will see the diff image file is highlighting the pixels which was changed from the first screenshot to the second one.
The pixel highlighting is useful when you know where are the differences between those screenshots, but for the first glance, if the image has only a small difference, maybe it’s not so visible.
Another way to compare is getting a side by side image, so you can compare those two versions easier.
Here is the result of the diff file:
Flue2ent has an interesting API which allow us for implementing Screenshot Tests in just few lines of code.
Screenshot Testing strategy can help us for validating the web page rendering and also for regular end-to-end tests where the expected result can be represented by an image.
For getting more information about Screenshot Testing you can read this article:
For getting more information about flue2ent API, you can read this article:
You can follow the Definity Labs publication for getting more information about automation.
