Visual Inspection in Katalon Studio - Reborn

Web Testing
, ,
2

Aprin 2022, The Sample4 has now its own GitHub project at

Sample4: Navigating multiple URLs in Twins mode

The sample3 showed how to compare just a single pair of URLs. The next sample4 shows how to compare multiple pairs of URLs. The sample4 shows how to navigate though a site for 7 pages while taking screenshots and HTML sources.

(1) What the test case does?

The test case Flaskr/VisualInspectionTwins does the following:

  1. It compares 2 web sites visually: http://127.0.0.1 and http://127.0.0.1:3090 .
  • (You can setup these URLs on your PC locally. I will explain how to later in this document.)
  1. A web application named Flakr run in the URLs. Let me call them "Flaskr Prod env " and "Flaskr Dev env ". These 2 URLs have just the same functionality. But the pages look slightly different. The production environment has no site logo, but the development environment has a small site logo. .
  • the Prod env
  • the Dev env
  1. The test case starts visiting the index page, then navigates through pages by clicking menu anchors, typing texts, clicking buttons, etc.
Step description Prod env URL Dev env URL
step1 index page http://127.0.0.1/ http://127.0.0.1:3090/
step2 register credential http://127.0.0.1/auth/register http://127.0.0.1:3090/auth/register
step3 log in http://127.0.0.1/auth/login http://127.0.0.1:3090/auth/login
step4 posting - blank http://127.0.0.1/create http://127.0.0.1:3090/create
step5 posting - text typed http://127.0.0.1/create http://127.0.0.1:3090/create
step6 list of blogs http://127.0.0.1/ http://127.0.0.1:3090/
step7 log out http://127.0.0.1/ http://127.0.0.1:3090/
  1. The test case compares each pairs of URLs and generates diff images. The following is an example of a diff image. Please find the section on the top-left side painted red, which is the diff.
  2. The test case generates a HTML report which shows a list all of the materials (screenshot images and HTML page sources) attached with detail diff information. You can find an example here.

(2) How to run the test

Just open the “Test Cases/Flaskr/VisualInspectionTwins” and run it. As default Chrome Headless browser git will be used, but you can choose any browser. You can choose any Execution Profile. The test won’t be affected by the profile you chose.

The test case will take approximately 30 seconds to finish.

The test case will write the report in the <projectDir>/store/Flaskr_VisualInspectionTwins-index.html file.

(3) What is Flaskr?

Flaskr is coded in Python language on top of the “Flask” web application framework. I learned the Flaskr web app at the Flask Tutorial authored and published by the Pallets project.

This tutorial will walk you through creating a basic blog application called Flaskr. Users will be able to register, log in, create posts, and edit or delete their own posts.

I used the source code 99% as is. I amended it slightly to diplay the site logo in the Dev env only.

(4) How the test is coded

You can read the sources

and a lot of related Groovy classes

Why do I have these Groovy classes? — It is because I employed the “Page Object Model”. The Page Object Model helped me in writing compact and readable codes.

The sample4 is highly extensible while avoiding code publication. It would be a foundation of large scale Visual Inspection projects.

Comparing Prod vs Dev website using multiple urls per website