Automated visual testing is really challenge. Comparing layouts day by day is also challenge and take time. It’s the reason why we want to develop a tool to support our automation script and saves time to compare the layout.

This tool is free and going to open the source as we want to share our work to the community and improving it with your supports.

Download here

The Idea:
We have created 2 folders to store all images of two times of the regression test by date: Regression_Results_20170719 & Regression_Results_20170720
We will compare all layout of these folders to detect the inconsistent or changed layout.
If the layouts are the same after 2 times executing, it should be Passed.
If there is any difference between 2 times of executing, it should be Failed and show us the differences.

How to use?
It’s quite simple.
1. All you need to do is including the script to take a screenshot as the below file name format – so after your automation script finished, it will creating image for you to compare.

Image name format: LayoutName_yyyy-mm-dd-hh-mm-ss.png
Example: Home_2017-07-19-11-22-09.png

2. At the jComparison app

• Select the first image folder
• Select the second image folder
• Click on Compare button => Show the results as below
• Click on the row of difference status to check the mismatch with highlight color
• Click on Export TXT or CSV to export the results to file. The file of report will store at the same folder/place of the jar file
• There are 2 modes:
  Strictly: Comparing exactly the same, this mode will using exact color code for comparision. This mean a little bit darker color will be list as different.
  Simple: This mode will not using exact color code for comparision. This mean a little bit darker color might not be list as different.

The main layout of jComparison

Exported results as CSV and TXT

Highlight the mismatch spot

Note:

• To apply visual testing by using this tool, we have to make sure the screen/browser size is the same.
• The test data should be the same, we just test the layout – not the data.
• Test the tool carefully with the small number of images, before you apply it to your project, to make sure it works as expected.
• Give us your feedback ([email protected]) based on your real issues, when we have your feedback, we have an idea for improving it.