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.
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 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:
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.
It looks like you're new here. If you want to get involved, click one of these buttons!