Visual Inspection of CSS and JavaScript

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.

diff of bootstrap-icons CSS

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

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 Profile default with value of true .

How the test script is coded

See the source codes of test cases:

I learned the following artiles to learn how to write programs that drive Chrome DevTools Protocol.

How the test script works

  1. I start the Test Cases/MyAdmin/MyAdmin_visual_inspection_twins
  2. the script visits 2 web sites
  1. 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
  1. the script processes the files and compile a report

sequence

3 Likes

I think that Chrome DevTools Protocol certainly extends the capability of Web UI E2E test tools. Without it, I could not develop “Visual Inspection of CSS an JavaScript” project at all.

This is the first time in my long time here that I felt adding a “like” :heart: below a post was, in fact, trivializing the post itself.

What we have here, Ladies, Gentlemen and Non-binaries, is a tool so forensic in its approach, I’m yet to fully understand its scope and applicability.

This tool, or something very much like it, should be available in Katalon Studio out of the box.

@kazurayam

:medal_sports: :trophy:

@Jass @duyluong @ThanhTo @devalex88
:eyes:

My product is free to use, not limited for the Enterprise users :wink:

Good point    

The core part of “Visual Inspection” is the materialstore library, which is independent of the Katalon Studio API and even of the Selenium WebDriver API. It works in many types of Java8+ projects. For example, you can develop a Visual Inspection project with Gradle+JUnit+Selenium empowered by the materialstore library.

By the way, I have a plan of re-implementing the materialstore in Rust language and make it runnable without JVM on Windows/Mac/Linux. Once I have done it, it will become language neutral. Python programmers can perform Visual Inspection with Selenium-python, and Node.js programmers can perform Visual Inspection with Playwright.

Wow. That’s quite impressive (Rust! Playwright!)

But I do think mozilla got the spelling wrong for Rust – should have been RussT :nerd_face:

I think that the “Visual Inspection” is principally a poor man’s tool. No enterprise would pay for such low-profiled monkey-can-do tasks. They highly appreciate AI but not VI.

I think that “Visual Inspection” can be an introduction for trainees into programming. IT managers (me too) often say to them

“Hey. I want you to look at as many pages of our web app as possible looking for anything unusual”.

I would rather like to say

“Youngster, I want you to develop a Visual Inspection project for our web app”

This sounds more encouraging, doesn’t it?