This is a Katalon Studio project for demonstration purpose. You can clone this out to your PC and execute in Katalon Studio.
This project was developed using Katalon Studio 5.7.1.
This project was developed to propose solutions to the following discussion posted in the Katalon Forum.
Many web sites have slide show in the top page. For example, have a look at this beautiful site: Mandelbrot Explorer. A slide show displays a fixed number of images switched circularly with a fixed interval of some seconds.
I want to verify if a slide show is in motion. In other words,
- I want to take screenshots of each comprising images in slideshow, and save them into file
- I want to compare pairs of sibling images (img0, img1), (img1, img2), (img2, img3) and (img3, img0) to find out if each pairing images are different or not.
- I want to specify a criteria number in pecentage (e.g. 70.0%). If a pair of images has larger difference (e.g. 99.0%) than the criteria, we judge that the pair is different, otherwise the pair is not different.
- If I could find all of the image pairs: (img0, img1), (img1, img2), (img2, img3) and (img3, img0) are different, then I would conclude that the slide show is actually in motion.
aShot, WebDriver Screenshot utility, enables you to take a screenshot of a selected WebElement (e.g. <div id="banner">
). Also aShot enables you to compare 2 images and know how much different they are. This Katalon Studio project uses aShot. This project provides a set of Custom Keywords in Katalon Studio, which wrap the aShot API. Also the project provides 2 example Test Cases in Katalon Studio which shows how to make use of the keywords.
You will realize another problem. If you take screen shots, you would inevitably want to save images into files on your local disk. But how you manage the paths of generated files? It is a cumbersome problem. My Materials project provides a smart solution for managing & resolving paths of image files dynamically created by test cases on Katalon Studio.
The demo will open Mandelbrot Explorer and verify if its slide show in the banner is in motion or not.
- download the ZIP file of this demo project from the releases Page
- unzip it
- start your Katalon Studio, open the
TestingSlideshowInKatalonStudio
project - Open
Test Cases/verify-slideshow-example
and run it. You can choose any browser. - Or you open
Test Suites/TS1
and run it. You can choose any browser. You apply thedefault
Profile, which is the sole profile provided.
Running the Test Cases/vefiry-slideshow-example
will result a new folder under the project directory: ./tmp/slideshow
.
In the folder you will find 4 screenshots of the original images. These are taken with 6 seconds of interval.
Mandelbrot Explorer_0.png
Mandelbrot Explorer_1.png
Mandelbrot Explorer_2.png
Mandelbrot Explorer_3.png
Also in the same folder you fill find 4 comparison result of the original images:
- img0 and img1 comparison (75.34% of difference)
- img1 and img2 comparison (99.80% of difference)
- img2 and img3 comparison (100% of difference)
- img3 and img0 comparison (100% of difference)
I set 70.0% as the criteria. The 4 comparison results has differece of 75.34%, 99.80%, 100.00% and 100.00% --- these are greater than the criteria of 70.0%; 4 images are all different. Therefore the test case PASSES.
Running the Test Suites/TS1
will result a new folder under the project directory: ./Materials/TS1/yyyyMMdd_hhmmss/main.verifySlideshow
.
Description of the folder path:
Materials
: fixed nameTS1
: the test suite nameyyyyMMdd_hhmmss
: the timestamp when the Test Suite was invoked.main.verifySlideshow
: the test case name, derived from the test case idTest Cases/main/verifySlideshow
Please note that the path includes the timestamp. This enables you to retain the result of Test Suite's run chronologically; not overwriting the previous results. This chronological format of folder tree makes your testing exercises much easier than working on a ./tmp
folder.
This chronological format is a mimic of the Reports
folder of a Katalon Stduio project.
The image files are just the same as the files created by the test case verify-slideshow-example
above.
Custom keywords:
Test Listener
Test Case:
If you want to create a new Katalon Studio project which verifies a slideshow on your target URL, please do as follows:
- create a new Katalon Studio for you
- import the jar file of aShot into the project. see the Katalon document How to import external library into your automation project . The jar of aShot is here. Or you can reuse the ashot-x.x.x.jar bundled in the demo project's
./Drivers
folder. - import the jar file of Materials. The jar file is donwloadable at Releases page. Or you can reuse the Materials-x.x.x.jar bundled in the demo project's
./Drivers
folder. - create 2 custom keywords:
com.kazurayam.ksbackyard.Assert
andcom.kazurayam.ksbackyard.ScreenshotDriver
. Copy the Groovy source from the demo project into your replication. You do not have to modify the source of 2 keywords. - create
Test Listeners/TL
. Copy the Groovy source from the demo project into your replication. You do not have to modify the source. - modify the
default
Profile and add 2 GlobalVariables:MATERIAL_REPOSITORY
of type Null,CURRENT_TESTCASE_ID
of type String. No inital value required. The Test ListenerTL
will resolve appropriate values runtime. - Finally you need to develop test cases and test suites. Create a mimic of
Test Cases/verify-slideshow-example
and modify it as you would like. I have written as much comments in the Groovy source. Read them and find how to customize to meet your requirements.
Special thanks to Mandelbrot Explorer. I picked up this as an example of web site with slide show. I found it in the page of Drupal Module Views Slideshow.