I have created a project at
Please refer to this Github repository for running codes and description in detail.
Problem to solve
What do I mean by the word Visutal Testing? Any toolset that provides a solution to my requirements as follows, I would regard it a Visual Testing solution.
- Often I have to look at the pages of a Web site. Maybe I am a developer, a designer, a tester or just a fan of the site.
- I want to look at as many pages of the site as possible. Wide coverage matters.
- I want to compare the view of 2 environments; e.g. Production and Development.
- I want to take full-page screen shots of all pages as evidence
- After taking screenshots, I want to check them to find out if there are any differences in view between the two.
If the target Web site has 100 pages, it would take me more than 60 minutes to run through. It’s too tiring, too boring. I don’t like doing the job everyday! Therefore I would add the final term:
- I want to automate it.
I just want to be notified if 2 environments have any significant enough visual differences now. I would not require the tool to be equipped with full fledged debugging functionalities. Preferably it should be free of charge.
As for the file path problem, I have developed another project titled:
This project demonstrates how to take multiple sets of web page screen shots and store them into a well-structured file system tree. This demo project uses another GitHub repository:
This project provides a jar file which implements
MaterialRepository = well-defined file tree and provides access methods.
As for the full-page screenshot problem, I found that the library
aShot solves like a charm. I wrote a report how I utilized aShot in Katalon Studio:
I was impressed that aShot provides ImageDiff. This utility class enables me to check very easily how much differences there are amongst 2 images. I wanted to use
ImageDiff in Katalon Studio. So I have developed another GibHub repository:
In there I have developed Katalon Custume Keyword com.kazurayam.ksbackyard.ScreenshotDriver. ScreenshotDriver is just a small wrapper for aShot. This makes it a bit easier to use aShot functionality in Katalon Test Cases.
I have integrated those external resources to build a toolset of ‘Visual Testing’ in Katalon Studio.
The Test Suite Collection
Executes calls Test Suite
Main/TS1 twice; each time targeting the following URLs:
- http://demoaut.katalon.com/ --- called Production environment
- http://demoaut-mimic.kazurayam.com/ --- called Development environment
- Materials/index.html in action: http://vtprojects.kazurayam.com/VisualTestingInKatalonStudio/Materials/index.html
The tool creates screen shots of the Input site and compare them, for example:
The test suite collection generates
./Materials/index.html. This HTML shows a list of source images plus the images as comparison result.
If you click the line with purple background color, you will see a ImageDiff with a lot of red-portion. The red portion shows the differences between the two source images.