# Visual Inspection in Katalon Studio - Reborn **URL:** \ **Category:** Web Testing\ **Tags:** tips-tricks, start-page, katalon-studio\ **Created:** [August 15, 2021, 5:06am UTC](https://forum.katalon.com/t/visual-inspection-in-katalon-studio-reborn/57440 "2021-08-15T05:06:10Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![kazurayam](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/kazurayam/32/333_2.png) [@kazurayam](https://forum.katalon.com/u/kazurayam)\ **Post date:** [August 15, 2021, 5:06am UTC](https://forum.katalon.com/t/visual-inspection-in-katalon-studio-reborn/57440/1 "2021-08-15T05:06:10Z")
I have created a GitHub repository: > **[GitHub - kazurayam/VisualInspectionInKatalonStudio\_Reborn: A Katalon Studio project. This project performs...](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn)** > > A Katalon Studio project. This project performs automated Web UI testing with screenshot comparison and HTML source comparison. * * * - @date Aug 2021 - @update 15 Oct 2022, ver 0.10.3 - @author kazurayam ## My previous work Sep 2018, I published a project named “Visual Testing in Katalon Studio” at - [GitHub - kazurayam/VisualTestingInKatalonStudio: This is a Katalon Studio project which performs 2 ways of screenshot-comparison testing for WebUI in full automation. Twins mode compares 2 host names at a time. Chronos mode compares the current view of a AUT to the previous one. You can make your own Katalon Studio project capable of the same screenshot-comparison. approach. Instruction provided.](https://github.com/kazurayam/VisualTestingInKatalonStudio) Please have a look at the “Motivation” section in its README document to know why I made it. I tried to implement what I called “Visual Testing” in Katalon Studio. That project worked for me. But I wasn’t satisfied with it. Why? I would enumerate 3 problems about that project. 1. The code set of [Visual Testing In katalon Studio](https://github.com/kazurayam/VisualTestingInKatalonStudio) project is too complicated. The project contains 28 Test Cases, 7 Test Suites, 4 Test Suite Collections, 1 Test Listener, 12 Keywords. After 3 years, I forgot them and unable to maintain them any longer. 2. The project enabled me to compare a pair of 2 screenshots of Web pages in PNG image format. I found that it is not enough. Often I wanted to compare 2 texts scraped from web. For example, I wanted to compare 2 HTML files. Also I wanted to compare 2 JSON files downloaded from a Web Service. 3. The project wasn’t distributable to others easily because it wasn’t packaged as “jar”. It was too hard for people to reuse the code set of the project to achieve their own “Visual Testing” for their custom targets. ## My new development In 2021 July-August, I have developed a new project named [`materialstore`](https://github.com/kazurayam/materialstore). It is a domain-specific file system written in Groovy, accompanied with a set of utility class that implements “Visual Testing”. In this project I have re-designed and re-implemented my idea from scratch. In the materialstore library, I have achieved the followings. ### (1) Simpler code set The `materialstore` provides a self-contained API in Java8, which encapsulates all of the useful functionalities of the previous [Visual Testing In katalon Studio](https://github.com/kazurayam/VisualTestingInKatalonStudio) project. A single Test Case in Katalon Studio empowered by the `materialstore` library can achieve whole job equivalent to the previous one. No need to struggle with that many components (28 Test Cases + 7 Test Suites + 4 Test Suite Collections + 1 Test Listener + 12 Keywords). ### (2) Domain-specific file system indexed by metadata By the word _material_ I mean any type of files downloaded from Web applications during automated tests. Screenshot images (PNG), Web page source (HTML), JSON and XML responded by Web Services — I call all of these as _materials_. The `materialstore` provides capability of materializing (storing) files downloaded from web sites in a pre-designed directory structure (I call it the _store_). An application writes files into the _“store”_ associating _“metadata”_. The _“materials”_ in the “store” are indexed by the associated _metadata_. An application retrieves files from the store by querying for _metadata_. An application does not look up files by physical name. The application is no longer responsible for deciding and remembering the path of physical files. A _metadata_ of a material in the store is merely an instance of `java.util.Map` with arbitrary key=value pairs. You can programme any kind of _metadata_ and associate it to each materials so that the materials are well described. For example, you can associate the URL from which the web resource was retrieved; or you can associate the name of browser (“Chrome”, “FireFox”, “Safari”, etc) which you used to take the screenshots; or you can associate the name of “Execution Profile” in Katalon Studio which you applied when you executed your Test Case. And you are responsible for creating metadata that clearly and uniquely identifies a material amongst a set of materials created a single run of test. Metadata composition is entirely up to the user application. Composing metadata is difficult part of the `materialstore` library. It looks similar to designing database table in SQL-backed application. ### (3) Packaged in a jar The artifact of `materialstore` is distributed as a single jar file. The jar file is available at the [Maven Central Repository](https://mvnrepository.com/artifact/com.kazurayam/materialstore). Any Java/Groovy-based application can automate downloading the `materialstore-x.x.x.jar` to resolve the dependency using the build tools (Gradle, Maven, Ant). ### (4) Usable outside Katalon Studio The `materialstore` library is a set of Plain Old Java Objects, which has no immediate dependency on the Katalon Studio API. It has no dependency on the Selenium WebDriver API either. So the `materialstore` library can be used in any Java/Groovy project outside Katalon Studio. I can use it in a plain [Selenium WebDriver](https://www.selenium.dev/documentation/webdriver/)-based automated test project for Web UI on Gradle. I can use it in a plain [Appium Java Client](https://github.com/appium/java-client)-based automated test project for Mobile UI on Maven. I can use it in a plain [Apache HttpClient](https://hc.apache.org/httpcomponents-client-5.1.x/)-based automated test project for Web Services on Ant. This “VisualTestingInKatalonStudio\_Reborn” project is a mere demonstration how to utilize the `materialstore` library in Katalon Studio. ## Examples in Katalon Studio ### Creating a project, resolving external dependencies You can create a new Katalon Studio project, import the required external dependencies, and write your Test Cases for “Visual Inspection”. Let me describe the procedure how to create your “Visual Inspection Reborn” project. 1. Install “Gradle” build tool into your PC. Please follow this [guide](https://gradle.org/install/) to install Gradle on your machine. > You can use Gradle ver 7.x as well as ver 6.x. 1. Open Katalon Studio GUI. Create a new project as usual in whichever directory you like. > I will write a symbol `$projectDir` to express this project directory. 1. create `$projectDir/build.gradle`. You should copy and paste the source of: - [build.gradle](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/build.gradle) 1. In the commandline (outside Katalon Studio GUI) you want to execute the following command: ```auto $ cd $projectDir $ gradle drivers ``` 1. The `gradle driver` will display some lines of messages in 10 seconds, and will finish successfully. ```auto BUILD SUCCESSFUL in 1s 1 actionable task: 1 executed ``` 1. Once the command finished, in the `$projectDir/Drivers` directory, you will find some jar files are automatically imported. ```auto $ tree Drivers Drivers ├── AUTOIMPORTED_ExecutionProfilesLoader-1.2.1.jar ├── AUTOIMPORTED_ashot-1.5.4.jar ├── AUTOIMPORTED_freemarker-2.3.31.jar ├── AUTOIMPORTED_java-diff-utils-4.11.jar ├── AUTOIMPORTED_jsoup-1.14.3.jar ├── AUTOIMPORTED_materialstore-0.10.3-SNAPSHOT.jar ``` > The exact version number of the jars may change in future. Please regard this as an example. All of these jar files are downloaded from the [Maven Central Repository](https://mvnrepository.com/). > If you are going to push your new project into Git repository, you should write the `.gitignore` file so that it ignores the `Drivers/` directory. 1. Stop Katalon Studio, restart it and re-open the project. You have resolved external dependencies. Now you can start writing a Test Case. ### Demo outputs - [Visual Inspection in Katalon Studio | VisualInspectionInKatalonStudio\_Reborn](https://kazurayam.github.io/VisualInspectionInKatalonStudio_Reborn/) ## Sample1: simply visit a web site to take screenshots First example. We will write a Test Case in Katalon Studio that visits the [Google Search page](https://www.google.com/). We will take screenshots and HTML page sources of the Web page. We will store PNG files and HTML files into the `store` directory using the `materialstore` library. We will finally generate a HTML file in which we can view the stored PNG and HTML files. #### (1) Test Case You want to newly create a Test Case `Test Cases/main/GoogleSearch/scrapeGoogleSearch` in your project. Copy and paste the following sample source: - [`Test Cases/main/GoogleSearch/searchGoogleSearch`](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/Scripts/main/GoogleSearch/Main/Script1646909950671.groovy) You want to run it by clicking the green button [![run button](https://europe1.discourse-cdn.com/katalon/original/3X/e/3/e380badd93092f1a62a8afdbe69d6df3e26f32a6.png)](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/docs/images/run_katalon_test.png) in Katalon Studio GUI. #### (2) The report generated Once the Test Case finished, a HTML file will be created at `store/scrapeGoogleSearch.html`. Please open it in any web browser. It renders a view of the stored 6 files. You can see an working example here: [pls. click here](https://kazurayam.github.io/VisualInspectionInKatalonStudio_Reborn/store/GoogleSearch_scrape-list.html). [![GoogleSearch_scrape-list.html](https://europe1.discourse-cdn.com/katalon/original/3X/9/c/9c16c7063c6bea16daa2d51c466d077a68f610bf.png)](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/docs/images/GoogleSearch_scrape.png) #### (3) The “store” directory structure When the Test Case finished, you will find a new directory `$projectDir/store` is created. In there you will find a tree of directories and files, like this: ```auto $ tree store store ... ├── GoogleSearch_scrape │ └── 20221016_084617 │ ├── index │ └── objects │ ├── 09be6ef6ef37f04bf34977fcce96088195a0cd76.html │ ├── 1ae20a4dc1fce5fdec3ee457b1af1106e632880b.png │ ├── 63cc4d50d6140aa3db07ed1da6477f528ede9fa6.png │ ├── 7203b58eba10f9b7d9220532b72990f0732ce673.png │ └── d331434cb6bfed9772c54727bdaaed4ac3fdeefa.html ├── GoogleSearch_scrape-list.html ... 17 directories, 39 files ``` #### (4) The objects/ directory - Under the `store/GoogleSearch_scrape/yyyyMMdd_hhmmss/objects/` directory, there are 5 files. Among them you will find 3 files with postfix `png`. These are the screenshot of web pages in PNG image format. Also you will find 2 files with postfix `html`. These are HTML sources of web pages. - The file name comprises with 40 hex-decimal characters appended with extension (`.png`, `.html`). The hex-decimal string (I call this “ID”) is derived from the file content without compression by [SHA1 Secure Hash algorithm](https://docs.oracle.com/javase/7/docs/api/java/security/MessageDigest.html). #### (5) The index file - The `store/GoogleSearch_scrape/yyyyMMdd_hhmmss/index` file would be interesting. An example of the `index` file is like [this](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/docs/store/GoogleSearch_/20221016_084617/index): ```auto 09be6ef6ef37f04bf34977fcce96088195a0cd76 html {"q":"katalon", "step":"03", "URL.host":"www.google.com", "URL.path":"/search", "URL.port":"80", "URL.protocol":"https", "URL.query":"q=katalon"} 7203b58eba10f9b7d9220532b72990f0732ce673 png {"q":"katalon", "step":"03", "URL.host":"www.google.com", "URL.path":"/search", "URL.port":"80", "URL.protocol":"https", "URL.query":"q=katalon"} d331434cb6bfed9772c54727bdaaed4ac3fdeefa html {"step":"01", "URL.host":"www.google.com", "URL.path":"/", "URL.port":"80", "URL.protocol":"https"} 63cc4d50d6140aa3db07ed1da6477f528ede9fa6 png {"step":"01", "URL.host":"www.google.com", "URL.path":"/", "URL.port":"80", "URL.protocol":"https"} 09be6ef6ef37f04bf34977fcce96088195a0cd76 html {"step":"02", "URL.host":"www.google.com", "URL.path":"/search", "URL.port":"80", "URL.protocol":"https", "URL.query":"q=katalon"} 1ae20a4dc1fce5fdec3ee457b1af1106e632880b png {"step":"02", "URL.host":"www.google.com", "URL.path":"/search", "URL.port":"80", "URL.protocol":"https", "URL.query":"q=katalon"} ``` The `index` file is a plain text file. Each lines corresponds to each files stored in the `objects` directory. A line of the `index` file has 3 parts delimited by TAB characters. ```auto \t\t ``` #### (6) The metadata In the test Case script, the code created _metadata_ for each objects. Typically a metadata will include information derived from the URL of the source Web Page. For example, an URL - `http://www.google.com/` will be digested to form a metadata - `{"URL.host":"www.google.com", "URL.path":"/", "URL.port":"80", "URL.protocol":"https"}` You can add any key-value pair into the metadata as you like. For example, you would want to add some sequential numbering like `"step":"01"`, `"step":"02"` and `"step":"03"`. This will enable to sort the entities in the file report sorted in the order you like. In the `index` file, lines are sorted by the ascending order of _metadata_ text. The `materialstore` API restricts that _metadata_ texts in a `index` file MUST be unique. Your application can not create multiple objects (= multiple lines in the `index` file) with the same _metadata_ value. #### (7) How to sort the entries in the report In the report, the entries are sorted by the ascending order of the “Identification” string. The “Identification” is the portion highlighted in the following image: [![Identification](https://europe1.discourse-cdn.com/katalon/original/3X/a/1/a1907044157b75e04edeab39615dabf3c1aa7901.png)](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/docs/images/Identification.png) If you want to sort multiple screenshots in the order as they were taken, then you would want to do two things: 1. while your script takes screenshots, you want to add an Metadata attribute that represents the sequence. For example, add `"step":"01"`, `"step":"02"` and `"step":"03"`. See the Line#46 of [Test Cases/main/GoogleSearch/materialize](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/Scripts/main/GoogleSearch/materialize/Script1646277768963.groovy) ```auto Metadata metadata1 = Metadata.builder(searchPageURL).put("step", "01").build() ``` 1. when your script generates a report, specify attribute names as SortKeys. The attribute specified as SortKeys will come left-most of each Identification string, so that will have higher priority of sorting order. See the Line#25 of [Test Cases/main/GoogleSearch/report](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/Scripts/main/GoogleSearch/report/Script1646277780839.groovy) ```auto Inspector inspector = Inspector.newInstance(store) SortKeys sortKeys = new SortKeys("step","URL.host", "URL.path") inspector.setSortKeys(sortKeys) Path report = inspector.report(materialList, fileName) ``` ## Sample2: Visual Inspection in Chronos mode Second example. We will write a Test Case in Katalon Studio that visits the [http://demoaut-mimic.kazurayam.com/](http://demoaut-mimic.kazurayam.com/). The top page displays a current timestamp in the unit of seconds. So everytime you retrieve this page, the page changes slightly at the timestamp portion. _How is the current page of a web system different from what it was previously since 5 minutes ago, 3 hours ago, or 2 days ago? I want to see the differences in HTML code, not only visually as screenshots comparison._ — the second example will show you how to implement a test that helps. #### (1) Test Case In your project, you want to copy&paste the following Test Case code. - [`Test Cases/main/CURA/VisualInspectionChronos`](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/Scripts/main/CURA/Main_Chronos/Script1646219948928.groovy) You will execute the Test Case two times. You run it once; wait for some period (seconds, minutes, hours, or days, … up to you); then run it again. The Test Case will preserve the output of previous runs. #### (2) Execution Profile This Test Case expects an Execution Profile is provided like this: - `Profiles/CURA_DevelopmentEnv` [![profile_CURA](https://europe1.discourse-cdn.com/katalon/original/3X/b/b/bb2afdf10d64e1ad6b3861252d5744ffc6d2ce46.jpeg)](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/docs/images/ExecutionProfile_CURA_DevelopmentEnv.png) Please create it in your project. #### (3) The “store” directory You will get 2 directories named in the format of `yyyyMMdd_hhmmss`. The directories will look like this: ```auto $ tree store store ├── CURA_Main_Chronos │ ├── 20221016_084722 │ │ ├── index │ │ └── objects │ │ ├── 3e7cfb9128556d0f5bca16af1c7be00396f15d8b.png │ │ ├── 46bd12e0dbfeb39bbbbc67c1996395b0ea666c20.png │ │ ├── 61ed7eeb5d1bc3388808e4f747537a599768acc6.html │ │ ├── 919580be9a8fb2e195ffe40bfe687caf4718d312.html │ │ ├── d85de77a8e6df464d89a3d8501e243f53ac527c3.png │ │ └── f3de4cfcf448606fa7b15250d88f792dacb62e6c.html │ ├── 20221016_084759 │ │ ├── index │ │ └── objects │ │ ├── 5ce9b37a8632a97a7355fb3a09014a7105854927.png │ │ ├── 9835d49d33407bfe0cd7f9ef41e69c151a4ee3d3.html │ │ ├── a3e78a6b3ed0005dcef5f8419da3ce7f0d151f13.png │ │ ├── d85de77a8e6df464d89a3d8501e243f53ac527c3.png │ │ ├── d9e7abf1d048e4f0e512a0f499db98dd01e4620a.html │ │ └── e62bda5328f450387273668749cc7ca525988da5.html │ └── 20221016_084824 │ ├── index │ └── objects │ ├── 06bf1cdb8d3778092dcc488403a909463bd8c987.html │ ├── 15a6cdaad19f4c2f22b4722f33717d625f33a550.html │ ├── 1e865231bdc6a6cc6570d05a82f17e429995e049.png │ ├── 2af8aef025af08139ab96dbc71378279c775af6d.png │ ├── b716d42df3912f11c350edcad74221b90bd41e83.html │ └── d85de77a8e6df464d89a3d8501e243f53ac527c3.png ├── CURA_Main_Chronos-index.html ... ``` #### (4) making Chronological diff The Test Case compares takes materials at chronologically different timings, and then compare the 2 sets. `Test Cases/CURA/VisualInspectionChronos` does the following processing: 1. make a List of materials in the current timestamp directory 2. make another List of materials in the previous timestamp directory 3. make differences between the two lists, store the diff info into the store as well 4. generate a HTML report, where you can view the detail with diff information. #### (5) The report generated Once the Test Case finished, a HTML file will be generated at `store/CURA_VisualInspectionChronos-index.html`. Please open it in any web browser. It renders a view of the stored 6 files. You can see an working example here: [pls. click here](https://kazurayam.github.io/VisualInspectionInKatalonStudio_Reborn/store/CURA_Main_Chronos-index.html). You can see examples of screenshot comparison result: Previous screenshot - diff image - current screenshot. [![Chronos List](https://europe1.discourse-cdn.com/katalon/original/3X/b/8/b8676dfb6cba047a67237b8162ca6ec9b407db82.png)](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/docs/images/Chronos_List.png) [![Chronos Left](https://europe1.discourse-cdn.com/katalon/original/3X/e/f/effbc9cebad16db721c35e08704dfe441fbdbc82.jpeg)](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/docs/images/Chronos_Left.png) [![Chronos Diff](https://europe1.discourse-cdn.com/katalon/original/3X/5/a/5a4734aba14af1ae3aadb0fd68f2aa1031b057a7.jpeg)](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/docs/images/Chronos_Diff.png) [![Chronos Right](https://europe1.discourse-cdn.com/katalon/original/3X/b/9/b9592776f1677aabfa504fa29c60799b961aa1da.jpeg)](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/docs/images/Chronos_Right.png) Also you can see examples of HTML page sources comparison result. [![Chronos HTML](https://europe1.discourse-cdn.com/katalon/original/3X/b/8/b85fbbdf382a912ee74205e195129524053745d2.jpeg)](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/docs/images/Chronos_HTML_with_diff.png) #### (6) Interactively memorizing ignorable diffs You can interact with the report generated by the Visual Inspection. See the top-left corner of the report. You will find the count of “diff” entities are displayed. [![Count initial](https://europe1.discourse-cdn.com/katalon/original/3X/4/8/48fb6624c86d25c71f6c1ee7ddb1cd3431875994.png)](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/docs/images/Count_1_initial.png) - `2w 0i 6t` This means: - There are 2 diff entities as **W** arnings that have a diff-ratio greater than the criteria given. - There are 0 diff entities as **I** gnored that have a diff-ratio greater than the criteria given, and is “checked to be ignorable” - There are 6 diff entities in **T** otal. In this sample case, I created 6 materials (PNG screenshot and HTML source saved). I set `1.0%` as the criteria of evaluating the diffRatio; if an entity has a diffRatio greater than 1.0, it will be marked _warning_, hence the figure `46.66%` is highlighted with the background color of yellow. A large diffRatio indicates to me that there must be some reason that caused significant visual differences; therefore I should look into the system. Definitely I will do for every entities warned. I would find some reason why the diffRatio is as large as `46.66%`. No matter what the reason is, I would decide whether the entity is **ignorable** or not. In fact in most cases, the diffs detected by automated tests are ignorable for human. For example, when I compare a development environment against a production environment of a Web app, it is quite likely that there are some significant visual differences caused by the recent changes in the application software in the development environment. Any visual differences caused by known factors are **ignorable** for human, and I want to differentiate them from the diffs caused by unexpected factors. Only human can decide if a visual difference is ignorable or not; my Visual Inspection tool does not decide it. But _the tool offers you a feature of persisting your decision into the report and memorize it across sessions._ Let me assume I have found out that the entity with 46.33% in the following screenshot is ignorable. Then I would interact with the report displayed in a browser. I will click the checkbox at the left end of the entity. [![Count checked ignorable](https://europe1.discourse-cdn.com/katalon/original/3X/6/0/6011e5ffe1b2a68779b435e36951bcdf368973b1.png)](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/docs/images/Count_2_checked_ignorable.png) When the checkbox is checked, the diffRatio `43.66%` changes its background color less highlighted. And the “Count” display on the top-left corner changes: - `2w 0i 6t` =\> `1w 1i 6t` This display indicates that I have 1 warning, 1 ignorable, among 6 entities in total. I will continue debugging. I will look at the entity with the diffRatio `1.87%`. Let me assume I found it _ignorable_ again. Then I will check it also. Eventually the report would give the following display: [![Count 3 done all](https://europe1.discourse-cdn.com/katalon/original/3X/1/2/124fb1658f9e46bba1210286ccc83b20d32b4491.png)](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/docs/images/Count_3_done_all.png) Now I have got - `0w 2i 6t` _I have zero warnings! Congratulations! I have finished inspecting this web application!_ The status checkbox toggled ON/OFF by human is persisted into [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) of browser. Therefore your decisions (which entities to be ignored) will be retained across browser sessions. You can reload the report, close and reopen the report. The checkboxes in the report will keep the status you put previously. `2w 0i 6t` =\> `1w 1i 6t` =\> `0w 2i 6t` — I would name this display as WIT — makes my inspection task spirally upward. It helps me gradually improve the target system through executing Visual Inspection repeatedly. ## Sample3: Visual Inspection in Twins mode The 3rd example visits 2 URLs at almost the same timing. - [http://mydmin.kazurayam.com/](http://myadmin.kazurayam.com/) - [http://devadmin.kazurayam.com/](http://devadmin.kazurayam.com/) The former URL is meant to represent a _Production environment_ of a web system, the latter URL is meant to represent a _Development environment_. The pages look similar at a glance, but in fact these are different in detail. _How the pages of 2 environments differ now?_ — the 3rd example will show you. #### (1) Test Case In your project, you want to copy the following Test Case code. - [`Test Cases/main/MyAdmin/VisualInspectionTwins`](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/Scripts/main/MyAdmin/Main_Twins/Script1646272006678.groovy) You will execute the Test Case only once. The Test Case will visit the 2 URLs as one batch. And it creates a HTML report. #### (2) Execution Profile The Test Case script expects 2 Execution Profiles are provided like this: - `Profiles/MyAdmin_DevelopmentEnv` [![profile_MyAdmin_Dev](https://europe1.discourse-cdn.com/katalon/original/3X/a/c/acf35160027bed318c180cb1b1304b76b435baa4.jpeg)](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/docs/images/ExecutionProfile_MyAdmin_DevelopmentEnv.png) - `Profiles/MyAdmin_ProductionEnv` [![profile_MyAdmin_Prod](https://europe1.discourse-cdn.com/katalon/original/3X/2/c/2c481ea42b2675c68c8e5bb554d0ca064a9b7e33.jpeg)](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/docs/images/ExecutionProfile_MyAdmin_ProductionEnv.png) Please create them in your project. #### (3) The “store” directory Once finished, the Test Case creates a directory named in the format of `yyyyMMdd_hhmmss`. The directory looks like this: ```auto $ tree store store ... ├── MyAdmin_Main_Twins │ ├── 20221016_084837 │ │ ├── index │ │ └── objects │ │ ├── 1f2f0176d802db36521219ce281432dc0e67d920.png │ │ └── 4419c44062177d8cb12a839169bc63b53cba003b.html │ ├── 20221016_084846 │ │ ├── index │ │ └── objects │ │ ├── b59bdac875b80dc47fe3345b4dbe8968db48188d.png │ │ └── b95fe452b63a6a9b5d5c4329ffaab6945e414943.html │ └── 20221016_084853 │ ├── index │ └── objects │ ├── 5c75382c591698c749db0e03850135ddc72310fb.html │ └── 843303409b05d859e8af8617c347fe19f88290f3.png └── MyAdmin_Main_Twins-index.html ``` #### (4) making diffs of Twins The Test Case looks up 2 sets of materials and compare them. `Test Cases/main/MyAdmin/VisualInspectionTwins` does the following processing: 1. Amongst the stored materials, select 2 (a screenshot and a HTML) of the _Development environment_ to make a List. 2. Also select 2 of the _Production environment_ to make a List. 3. compare the two Lists and find differences between them. 4. will insert files into the “store”, which contains the diff information. 5. generate a HTML report, where you can view the detail with diff information. See [Selection algorithm](https://kazurayam.github.io/VisualInspectionInKatalonStudio_Reborn/) for more detail #### (5) The report generated Finally the Test Case will generate a HTML report of which path is `store/MyAdmin_VisualInspectionTwins-index.html`. Please open it in any web browser. It renders a view of the stored 1 page, both in PNG screenshot and HTML page source. You can see an working example here: [pls.click here](https://kazurayam.github.io/VisualInspectionInKatalonStudio_Reborn/store/MyAdmin_VisualInspectionTwins-index.html) You can see a screenshot comparison result: Production Env - Diff - Development Env. [![Twins_Left](https://europe1.discourse-cdn.com/katalon/original/3X/9/4/9416105c7c83a6a24ab28d34b399dbbecb6f9307.jpeg)](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/docs/images/Twins_Left.png) [![Twins_Diff](https://europe1.discourse-cdn.com/katalon/original/3X/9/d/9d76c766f3e444d0beae33912655c40aaf71d3b9.jpeg)](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/docs/images/Twins_Diff.png) [![Twins_Right](https://europe1.discourse-cdn.com/katalon/original/3X/3/0/305a9f17fbd9c66a3089edff7d8b93b3ce7e15f9.jpeg)](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/docs/images/Twins_Right.png) Also you can see the diff of HTML page source. [![Twins_HTML](https://europe1.discourse-cdn.com/katalon/original/3X/2/7/27a85a6eb918a0f5cecf134961b5bc5f6992e9d3.jpeg)](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/docs/images/Twins_HTML.png) ## Notes on Extensibility The `materialstore` library is usable for various cases. Once the materials are saved into the store, same diff + reporting features work. ### for Mobile The `materialstore` library can be used by a [Appium](https://appium.io/)-based Mobile testing in Java. All you need to do is to take screenshots of Mobile app using Katalon Studio’s built-in keyword (e.g, [Mobile taksScreenshot](https://docs.katalon.com/katalon-studio/docs/mobile-take-screenshot.html)) and save the image into the `store`. ### for Web Service The `materialstore` library can be used by a [Apache HttpClient](https://hc.apache.org/httpcomponents-client-5.1.x/)-based Web Service testing in Java. Using Katalon Studio’s [sendRequest](https://docs.katalon.com/katalon-studio/docs/ws-send-request.html) keyword, you can get a response. Then your script extract the response body (JSON, XML) and save them into the `store`. ## Conclusion The [Visual Testing In Katalon Studio](https://github.com/kazurayam/VisualTestingInKatalonStudio) project is now superseded by this [Visual Inspection In Katalon Studio - Reborn](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn) project backed by the [materialstore](https://github.com/kazurayam/materialstore) library. ---
**Author:** ![kazurayam](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/kazurayam/32/333_2.png) [@kazurayam](https://forum.katalon.com/u/kazurayam)\ **Post date:** [January 22, 2022, 11:20am UTC](https://forum.katalon.com/t/visual-inspection-in-katalon-studio-reborn/57440/2 "2022-01-22T11:20:40Z")
Aprin 2022, The Sample4 has now its own GitHub project at > **[GitHub - kazurayam/VisualInspection\_with\_PageObjectModel\_in\_KatalonStudio: Sample4 of Visual Inspection in Katalon Studio,...](https://github.com/kazurayam/VisualInspection_with_PageObjectModel_in_KatalonStudio)** > > Sample4 of Visual Inspection in Katalon Studio, with Page Object Model employed * * * ### 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](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/Scripts/main/Flaskr/VisualInspectionTwins/Script1642595597544.groovy) 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/) | [http://127.0.0.1:3090/](http://127.0.0.1:3090/) | | step2 | register credential | [http://127.0.0.1/auth/register](http://127.0.0.1/auth/register) | [http://127.0.0.1:3090/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/auth/login) | [http://127.0.0.1:3090/auth/login](http://127.0.0.1:3090/auth/login) | | step4 | posting - blank | [http://127.0.0.1/create](http://127.0.0.1/create) | [http://127.0.0.1:3090/create](http://127.0.0.1:3090/create) | | step5 | posting - text typed | [http://127.0.0.1/create](http://127.0.0.1/create) | [http://127.0.0.1:3090/create](http://127.0.0.1:3090/create) | | step6 | list of blogs | [http://127.0.0.1/](http://127.0.0.1/) | [http://127.0.0.1:3090/](http://127.0.0.1:3090/) | | step7 | log out | [http://127.0.0.1/](http://127.0.0.1/) | [http://127.0.0.1:3090/](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](https://kazurayam.github.io/VisualInspectionInKatalonStudio_Reborn/store/Flaskr_VisualInspectionTwins-index.html). #### (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 `/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](https://flask.palletsprojects.com/en/2.0.x/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 - [Test Cases/Flaskr/VisualInspectionTwins](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/Scripts/main/Flaskr/VisualInspectionTwins/Script1642595597544.groovy) - [Test Cases/Flaskr/navigate\_through\_the\_site](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/Scripts/main/Flaskr/navigate_through_the_site/Script1642812095057.groovy) and a lot of related Groovy classes - [Keywords/flaskrtest/actions/LoginAction.groovy](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/Keywords/flaskrtest/actions/LoginAction.groovy) - [Keywords/flaskrtest/actions/LogoutAction.groovy](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/Keywords/flaskrtest/actions/LogoutAction.groovy) - [Keywords/flaskrtest/actions/PostAction.groovy](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/Keywords/flaskrtest/actions/PostAction.groovy) - [Keywords/flaskrtest/data/Song.groovy](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/Keywords/flaskrtest/data/Song.groovy) - [Keywords/flaskrtest/data/Songs.groovy](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/Keywords/flaskrtest/data/Songs.groovy) - [Keywords/flaskrtest/data/User.groovy](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/Keywords/flaskrtest/data/User.groovy) - [Keywords/flaskrtest/pages/auth/LoginPage.groovy](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/Keywords/flaskrtest/pages/auth/LogInPage.groovy) - [Keywords/flaskrtest/pages/auth/RegisterCredentialPage.groovy](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/Keywords/flaskrtest/pages/auth/RegisterCredentialPage.groovy) - [Keywords/flaskrtest/pages/blog/CreatePostPage.groovy](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/Keywords/flaskrtest/pages/blog/CreatePostPage.groovy) - [Keywords/flaskrtest/pages/blog/IndexPage.groovy](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/Keywords/flaskrtest/pages/blog/IndexPage.groovy) - [Keywords/flaskrtest/pages/blog/Post.groovy](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/Keywords/flaskrtest/pages/blog/Post.groovy) Why do I have these Groovy classes? — It is because I employed the [“Page Object Model”](https://www.guru99.com/page-object-model-pom-page-factory-in-selenium-ultimate-guide.html). 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. ---
**Author:** ![kazurayam](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/kazurayam/32/333_2.png) [@kazurayam](https://forum.katalon.com/u/kazurayam)\ **Post date:** [January 22, 2022, 11:21am UTC](https://forum.katalon.com/t/visual-inspection-in-katalon-studio-reborn/57440/3 "2022-01-22T11:21:24Z")
April 2022, The sample4 which requires Docker. now has its own GitHub project, ## [https://github.com/kazurayam/VisualInspection\_with\_PageObjectModel\_in\_KatalonStudio](https://github.com/kazurayam/VisualInspection_with_PageObjectModel_in_KatalonStudio) ## Setup Docker & Flaskr on your PC In the sample4, we need 2 URLs available on our own PC. - [http://127.0.0.1/](http://127.0.0.1/) - [http://127.0.0.1:3090](http://127.0.0.1:3090/) You can make it work on your PC. You need [Docker](https://www.docker.com/) installed into your PC. ### Installing Docker Desktop On my MacBook Air, I installed [Docker Desktop](https://www.docker.com/products/docker-desktop). Docker Desktop for Windows is also available. ### Command Line Interface Here I assume you work on a Command Line Interface. I use the Terminal.app of macOS. For Windows user, install [Git for Windows](https://gitforwindows.org/) which bundles “Git Bash”. ### Starting up Flaskr Open a window of Command Line Interface, then execute: ```auto $ cd $VisualInspectionInKatalonStudio_Reborn $ ./startup-flaskr-prod.sh ``` This shell script will emit 2 lines of messages and will block: ```auto you can visit http://127.0.0.1/ Serving on http://0.0.0.0:8080 ``` Next, you want to open one more window of Command Line Interface, then execute: ```auto $ cd $VisualInspectionInKatalonStudio_Reborn $ ./startup-flaskr-dev.sh ``` This will emit 2 lines of messages and will block: ```auto $ ./startup-flaskr-dev.sh you can visit http://127.0.0.1:3090/ Serving on http://0.0.0.0:8080 ``` By `lsof` command, you can make sure that 2 processes are listening to the IP port #80 and #3090 on your localhost. ```auto $ lsof -i -P | grep LISTEN | grep com.docke com.docke 709 kazuakiurayama 107u IPv6 0x84f53716e8d7cb33 0t0 TCP *:3090 (LISTEN) com.docke 709 kazuakiurayama 111u IPv6 0x84f53716e8d771d3 0t0 TCP *:80 (LISTEN) ``` ### Shutting down Flaskr gracefully You can stop the docker process gracefully by typing CTRL + C. You should NEVER close the window of Command Line Interface without stopping the docker process by CTLR + C. If you forced to close the window, then IP Port #80 and #3090 might be left _USED_ status. In that case you would fail to start a new process of Flaskr again. When it occurred, you need to stop & restart your PC/OS to release the ports. ### Initializing Database in the web app The Flaskr has a backend database where credentials and blog posts are stored. After you repeated running tests several times you will find many blog posts are stored, and you would feel like to clean the database out. Just type CTRL + C to stop the docker process and restart it. The start-up script will automatically initialize the internal database and make it empty. ### How I used Docker Hava a look at the code of [startup-flaskr-prod.sh](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/startup-flaskr-prod.sh): ```auto CWD=$(pwd) cd $(mktemp -d) echo you can visit http://127.0.0.1/ docker run -it -p 80:8080 kazurayam/flaskr-kazurayam:1.1.0 cd $CWD ``` As you see, it runs `docker run` command with a docker image `kazurayam/flaskr-kazurayam:1.1.0` . I created this docker image and published at the [Docker Hub](https://hub.docker.com/repository/docker/kazurayam/flaskr-kazurayam). ---
**Author:** ![kazurayam](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/kazurayam/32/333_2.png) [@kazurayam](https://forum.katalon.com/u/kazurayam)\ **Post date:** [January 27, 2022, 5:26am UTC](https://forum.katalon.com/t/visual-inspection-in-katalon-studio-reborn/57440/5 "2022-01-27T05:26:02Z")
I continued development to inspect CSS and JavaScript referred by web pages. > [@Visual Inspection of CSS and JavaScript](http://forum.katalon.com/t/visual-inspection-of-css-and-javascript/61979): > > I have published a project on GitHub [https://github.com/kazurayam/VisualInspectionOfCssAndJs](https://github.com/kazurayam/VisualInspectionOfCssAndJs)Problem to solve My previous project [“Visual Inspection in Katalon Studio — Reborn”](http://forum.katalon.com/t/visual-inspection-in-katalon-studio-reborn/57440) 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 relea… ---
**Author:** ![Dan\_Bown](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/dan_bown/32/20464_2.png) [@Dan\_Bown](https://forum.katalon.com/u/Dan_Bown)\ **Post date:** [February 23, 2022, 5:27pm UTC](https://forum.katalon.com/t/visual-inspection-in-katalon-studio-reborn/57440/6 "2022-02-23T17:27:31Z")
Hi @kazurayam I’m interested in functionality to support comparison of multiple URLs in Twins mode, since sometime a SAAS application will make changes that our company has no control over and it would be useful to supplement functional automated tests. This work looks great, although I will need some time to get my head around it. Can I ask whether there is a need for Docker or Python in the project or is this just for illustration? Working in a restricted environment without Gradle, so I’m unable to run the example and also installing dependencies by hand. I assume that if I wanted to make my own test cases I would need to replace the POM versions you have (eg Include\scripts\groovy\com\kazurayam\uitestjava\flaskr\pom\actions)? Just a note that the groovy script URLs in Sample 4, Section 4 are not valid (give a 404, I found them in the project though). Thanks Dan ---
**Author:** ![kazurayam](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/kazurayam/32/333_2.png) [@kazurayam](https://forum.katalon.com/u/kazurayam)\ **Post date:** [February 24, 2022, 1:24am UTC](https://forum.katalon.com/t/visual-inspection-in-katalon-studio-reborn/57440/7 "2022-02-24T01:24:39Z")
> [@Dan\_Bown](#): > > Can I ask whether there is a need for Docker or Python in the project Only the “Sample4 Flaskr” requires Docker. The “visual inspection” framework does not require Docker. The Sample1, 2, 3 do not require Docker either. See [GitHub - kazurayam/VisualInspectionInKatalonStudio\_Reborn: A Katalon Studio project. This project performs automated Web UI testing with screenshot comparison and HTML source comparison.](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn#target-web-application-under-sample-tests) for more info. * * * > [@Dan\_Bown](#): > > if I wanted to make my own test cases I would need to replace the POM versions you have (eg Include\scripts\groovy\com\kazurayam\uitestjava\flaskr\pom\actions)? The source code in the `Include/scripts/groovy/com/kazurayam/uitestjava/flaskr/` folder is a part of the Sample4. It is not a part of the “visual inspection” framework. If you are going to develop your own test suite, your code will not use `Include/scripts/groovy/com/kazurayam/uitestjava/flaskr/` at all. * * * > [@Dan\_Bown](#): > > the groovy script URLs in Sample 4, Section 4 are not valid You misunderstood. The URL “[http://127.0.0.1:3080](http://127.0.0.1:3080)” and “[http://127.0.0.1:3090](http://127.0.0.1:3090)” are the right ones. That’s what I prepared for the Sample 4. These URLs will be provided by the Docker container that runs on your localhost(127.0.0.1). The `Test Listeners/TLFlaskr` silently&automatically starts/stops the Docker container on your PC for the Sample4 provided that you have installed “Docker for Desktop” into your PC. If you want to see the Sample4 running, you need to install Docker into your PC. But if you do not want the Sample4, you won’t need Docker. ---
**Author:** ![kazurayam](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/kazurayam/32/333_2.png) [@kazurayam](https://forum.katalon.com/u/kazurayam)\ **Post date:** [February 24, 2022, 1:29am UTC](https://forum.katalon.com/t/visual-inspection-in-katalon-studio-reborn/57440/8 "2022-02-24T01:29:57Z")
> [@Dan\_Bown](#): > > Working in a restricted environment without Gradle, so I’m unable to run the example and also installing dependencies by hand. It’s OK not to use Gradle as far as you can manually download the required versions of external jars into the `Drivers` folder. However please note that I frequently update the `materialstore` and other jars. Quite sometimes I would change the “visual inspection” framework’s API drastically. These are still in unstable status. The consistency of the jar versions really matters. Therefore you had better use Gradle to manage the external dependencies consistently. By the way, yesterday I published the latest `materialstore-0.3.5.jar` but the Maven Central has not yet accepted, has not published it yet on their download site. It would take a few more days before the v0.3.5 of `materialstore` available publicly available. ---
**Author:** ![kazurayam](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/kazurayam/32/333_2.png) [@kazurayam](https://forum.katalon.com/u/kazurayam)\ **Post date:** [February 24, 2022, 1:48am UTC](https://forum.katalon.com/t/visual-inspection-in-katalon-studio-reborn/57440/9 "2022-02-24T01:48:37Z")
@duyluong @Russ_Thomas @Dan_Bown I wrote > [@kazurayam](#): > > Test Listener/TLFlaskr silently&automatically starts/stops the Docker container My Groovy/Java code (including inside Katalon Studio) can start & stop any Docker Container on the localhost(127.0.0.1). Don’t you find it interesting? If you have a web app of yours (in any language: Python, Node, Ruby, .NET, Java/Groovy) in a Docker image, you can start it as a Docker process on your PC at `http://127.0.0.1:xxxx`, and run your test suites with Selenium-java against that URL. See the following doc for more detail: - [GitHub - kazurayam/SeleniumTestInJavaBackedByDockerContainer: A sample JUnit 5 Test that visits a URL served by Docker Container on the local host](https://github.com/kazurayam/SeleniumTestInJavaBackedByDockerContainer) This was difficult, required several months of my development efforts. ---
**Author:** ![Dan\_Bown](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/dan_bown/32/20464_2.png) [@Dan\_Bown](https://forum.katalon.com/u/Dan_Bown)\ **Post date:** [February 24, 2022, 7:52pm UTC](https://forum.katalon.com/t/visual-inspection-in-katalon-studio-reborn/57440/10 "2022-02-24T19:52:11Z")
Thanks for clarifications, and thanks for your hard work 😀 ---
**Author:** ![kazurayam](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/kazurayam/32/333_2.png) [@kazurayam](https://forum.katalon.com/u/kazurayam)\ **Post date:** [April 10, 2022, 4:08am UTC](https://forum.katalon.com/t/visual-inspection-in-katalon-studio-reborn/57440/11 "2022-04-10T04:08:21Z")
I have released the v0.7.0 of “Visual Inspection in Katalon Studio” [https://github.com/kazurayam/VisualInspectionInKatalonStudio\_Reborn/releases/tag/0.7.0](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/releases/tag/0.7.0) I added a small feature: Interactively memorizing ignorable diffs * * * # Interactively memorizing ignorable diffs You can interact with the report generated by the Visual Inspection. See the top-left corner of the report. You will find the count of “diff” entities are displayed. Please click [THIS](https://kazurayam.github.io/VisualInspectionInKatalonStudio_Reborn/store/CURA_VisualInspectionChronos-index.html) to see a demo in action. * * * [![Count initial](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/raw/master/docs/images/Count_1_initial.png)](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/docs/images/Count_1_initial.png) - `2w 0i 6t` This means: - There are 2 diff entities that have a diff-ratio greater than the criteria given. - There are 0 diff entities that have a diff-ratio greater than the criteria given, and is “checked to be ignorable” - There are 6 diff entities in total. In other words, I created 6 materials (PNG screenshot and HTML source saved). I set `1.0%` as the criteria of evaluating the diffRatio; if an entity has a diffRatio greather than 1.0, it will be marked _warning_ , hence the figure `46.66%` is highlighted with the background color of yellow. A large diffRatio indicates to me that there must be some reason that caused significant differences; therefore I should look at the system to find out the reason of the difference. Definitely I will look into every entities warned. Then I would find out some reasons why the diffRatio is as large as `46.66%` . No matter what the reason is, I would decide whether the entity is **ignorable** or not. In fact the most of diffs detected by automated tests are ignorable for human. For example, when I compare a development environment against a production environment of a Web app, it is quite likely that there are some significant visual differences caused by the recent changes in the application software in the development environment. **Any visual difference caused by known factors are ignorable for human, and I want to differentiate them from the diffs caused by unexpected factors. Only human can decide if a visual difference is ignorable or not.** So my Visual Inspection tool does not decide it. But _the tool offers you a feature of persisting your decision into the report and memorize it across sessions._ Let me assume I have found out that the entity with 46.33% in the following screenshot is ignorable. Then I would interact with the report displayed in a browser. I will click the checkbox at the left end of the entity. [![Count checked ignorable](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/raw/master/docs/images/Count_2_checked_ignorable.png)](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/docs/images/Count_2_checked_ignorable.png) When the checkbox is checked, the diffRatio `43.66%` changes its background color less highlighted. And the “Count” display on the top-left corner changes: - `2w 0i 6t` =\> `1w 1i 6t` This display indicates that I have 1 warning, 1 ignorable, among 6 entities in total. I will continue debugging. I will look at the entity with the diffRatio `1.87%` . Let me assume I found it _ignorable_ again. Then I will check it also. Eventually the report would give the following display: [![Count 3 done all](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/raw/master/docs/images/Count_3_done_all.png)](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/blob/master/docs/images/Count_3_done_all.png) Now I have got - `0w 2i 6t` _I have zero warnings! Congrat! I have finished inspecting this web application!_ The status of checkbox toggled by human is persisted into [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) of browser. Therefore your decisions (which entities to be ignored) will be retained across browser sessions. You can reload the page, close and reopen the page. The checkboxes will keep the status you put previously. `2w 0i 6t` =\> `1w 1i 6t` =\> `0w 2i 6t` — I would name this display as _WIT_ — makes my inspection task spirally upward. It helps me gradually improve the target system through executing Visual Inspection repeatedly. ---
**Author:** ![kazurayam](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/kazurayam/32/333_2.png) [@kazurayam](https://forum.katalon.com/u/kazurayam)\ **Post date:** [October 16, 2022, 2:21am UTC](https://forum.katalon.com/t/visual-inspection-in-katalon-studio-reborn/57440/12 "2022-10-16T02:21:25Z")
I have updated the “VisualTestingInKatalonStudio\_Reborn” project to ver [0.10.3](https://github.com/kazurayam/VisualInspectionInKatalonStudio_Reborn/releases/tag/0.10.3). In this version, you can specify the sorting order of entries in the report. See [Visual Inspection in Katalon Studio - Reborn](http://forum.katalon.com/t/visual-inspection-in-katalon-studio-reborn/57440#h-7-how-to-sort-the-entries-in-the-report-17) for more. [Other discussion](http://forum.katalon.com/t/how-to-add-customize-description-message-for-each-iteration-into-report-pdf/79145/18) motivated to develop the ver 0.10.3. ---
**Author:** ![kazurayam](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/kazurayam/32/333_2.png) [@kazurayam](https://forum.katalon.com/u/kazurayam)\ **Post date:** [January 1, 2023, 12:03pm UTC](https://forum.katalon.com/t/visual-inspection-in-katalon-studio-reborn/57440/13 "2023-01-01T12:03:42Z")
I have made a new version of Visual Inspection. Please see the following post: [http://forum.katalon.com/t/automated-visual-inspection/81966](http://forum.katalon.com/t/automated-visual-inspection/81966) The new version is empowered by a custom Gradle plugin `com.kazurayam.inspectus4katalon` which enables you to make your own Katalon projects capable of “Visual Inspection” quickly in an automated fashion. I would no longer maintain the “Visual Inspection in Katalon Studio - Reborn” project.