Katalon Studio v5.8 - It's time for the all-new API testing experience
kazurayam
Katalon Evangelist
09/23/2018
edited September 24

Visual Testing in Katalon Studio

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.

Solution

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.

------------------

Input

The Test Suite Collection Executes calls Test Suite Main/TS1 twice; each time targeting the following URLs:

  1. http://demoaut.katalon.com/ --- called Production environment
  2. http://demoaut-mimic.kazurayam.com/ --- called Development environment

Output

The tool creates screen shots of the Input site and compare them, for example:

Production page

Production|

Development page

Development|

index.html

The test suite collection generates ./Materials/index.html. This HTML shows a list of source images plus the images as comparison result.

File path: <projectDir>/Materials/index.html index

ImageDiff

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.

ImageDiff

Upvote
Quote

Comments

Sign In or Register to comment.