I have made a demo project at
- GitHub - kazurayam/TestingSlideshowInKatalonStudio: A Katalon Studio project, which test a slideshow on a Web Page is in mortion or not.
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
Test Cases/verify-slideshow-exampleand run it. You can choose any browser.
- Or you open
Test Suites/TS1and run it. You can choose any browser. You apply the
defaultProfile, which is the sole profile provided.
In the folder you will find 4 screenshots of the original images. These are taken with 6 seconds of interval.
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.
Test Suites/TS1 will result a new folder under the project directory:
Description of the folder path:
Materials: fixed name
TS1: the test suite name
yyyyMMdd_hhmmss: the timestamp when the Test Suite was invoked.
main.verifySlideshow: the test case name, derived from the test case id
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
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
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
- 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
- create 2 custom keywords:
com.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.
Test Listeners/TL. Copy the Groovy source from the demo project into your replication. You do not have to modify the source.
- modify the
defaultProfile and add 2 GlobalVariables:
MATERIAL_REPOSITORYof type Null,
CURRENT_TESTCASE_IDof type String. No inital value required. The Test Listener
TLwill resolve appropriate values runtime.
- Finally you need to develop test cases and test suites. Create a mimic of
Test Cases/verify-slideshow-exampleand 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.