I have published a project on GitHub
Problem to solve
My previous project “Visual Inspection in Katalon Studio — Reborn” enabled to me to compare pages of a web site. It produces diff information of screenshots and HTML sources. The HTML diff info helps me understanding the causes of the visual differences in the screenshot PNG images between 2 environment — the Production env and the Development env.
Half year has passed since I released the “Visual Inspection” project, I realized that HTML is not enough. Any web app consists of mainly 3 types of web resources: HTML, CSS, and JavaScript (JS). I want to see the source of CSS and JavaScripts that are referred by the web pages. And I want to see the diff information of CSS and JS as well.
Let me tell you why I want it. Any web application depend on some external software products . For example, my application depends on jQuery and Bootstrap. Once your web application was released, any updates of the external dependencies will put continuous pressure on you developers. You have to upgrade them sometime in near future. However it is a scary task. Why? — You are scared that some changes in the external dependencies may affect your web pages but you can not predict what will happen. Therefore all you can do is to look at as many pages of your web app as possible looking for anything unusual . I call this tiresome and boring activity as “Visual Inspection” . My “Visual Inspection” approach can automate it.
However, jQuery and Bootstrap — these are the collections of CSS and JS files. When I encounter something to investigate, I would need to look at the CSS & JS sources. So I want to see the diff info of CSS and JS of jQuery & Bootstrap before/after the upgrade. Is it possible?
Solution
This project “Visual Inspection of CSS and JS” contains a demonstration Test Cases/MyAdmin/MyAdmin_visual_inspection_twins that compares 2 URLs:
It scrapes all the sources of HTML, CSS, JavaScript refered by the pages. The Test Case uses the Chrome DevTools Protocol, Network Domain in order to recognize the URLs of resources refered by the page. The Test Case saves the files, associate files as pairs, make diff, and compile a report in HTML. A sample output is here:
This report includes the diff info of CSS and JS files distributed by jQuery and Bootstrap. For example, see the following link. Please note that this link shows the difference of 2 versions of a single product: v1.5.0 and v1.7.2 of the bootstrap-icons.
Please imagine that now I am going to upgrade my web app to use the bootstrap-icons from v1.5.0 to v1.7.2. In case when I find any visual differences between the old and the new, this diff info would help.
Description
How to run the demo
You just want open and run Test Cases/MyAdmin/MyAdmin_visual_inspection_twins. The script takes approximately 30 seconds to finish. It will make a report in the <projectDir>/store
directory.
Chrome DevTools Protocol is a new technology. Katalon Studio v8.2.0 does not support it out of box. I needed to setup the project with some external jar files, which are bundled in the Drivers
directory in the repository.
You have 2 options.
Option1: Using kklisura’s CDP library
- Katalon Studio: any version, e.g, v8.2.0
- will use GitHub kklisura / chrome-devtools-java-client
- set the
GlobalVarible.visitSite_by_Selenium4_CDT
in the Execution Profiledefault
with value of false .
Option2: Using Selenium 4
- Katalon Studio: v8.2.1 alpha is required
- will use selenium-devtools-v96
- set the
GlobalVarible.visitSite_by_Selenium4_CDT
in the Execution Profiledefault
with value of true .
How the test script is coded
See the source codes of test cases:
- Test Cases/MyAdmin/MyAdmin_visual_inspection_twins
- Test Cases/MyAdmin/visitSite
- Test Cases/MyAdmin/materializeCssJs_by_kklisure_CDT
- Test Cases/MyAdmin/materializeCssJs_by_Selenium4_CDT
I learned the following artiles to learn how to write programs that drive Chrome DevTools Protocol.
How the test script works
- I start the Test Cases/MyAdmin/MyAdmin_visual_inspection_twins
- the script visits 2 web sites
- for each sites, the script does the following
- open Chrome browser
- let the browser to visit the site URL
- browser request HTML, CSS, JS, images etc to the site
- the site responds to the requests from the browser
- browser notifies the script of the
responseReceveied
events which includes HTTP Status (200 OK), the URL of the resource, the MIME-Type - when the event stream ceased, the script send HTTP GET requests to the original site for the source files of CSS and JS
- the script saves the resource files
- the script processes the files and compile a report