# Visual Testing in Katalon Studio

**URL:** <https://forum.katalon.com/t/visual-testing-in-katalon-studio/13361>\
**Category:** Tips and Tricks\
**Tags:** tips-tricks, katalon-studio\
**Created:** [September 23, 2018, 6:58am UTC](https://forum.katalon.com/t/visual-testing-in-katalon-studio/13361 "2018-09-23T06:58:52Z")\
**Posts on this page:** 16\
**Page:** 4

<div class="post-metadata">

**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 26, 2020, 3:45am UTC](https://forum.katalon.com/t/visual-testing-in-katalon-studio/13361/62 "2020-01-26T03:45:27Z")

</div>

I have released the version 1.14.0 of [VisualTestingInKatalonStudio](https://github.com/kazurayam/VisualTestingInKatalonStudio). Wtih this version, the index.html displays the name of Execution Profiles as the following example shows. Displaying Execution Profile names like “Production” and “Development” makes the report easier to understand.

 ![スクリーンショット 2020-01-25 12.23.05](https://europe1.discourse-cdn.com/katalon/original/2X/5/5599fe3c4c895b88a9668cd3640ad4848fdfc0ea.png)

If you want to enable your own Katalon Studio project to carry out the Visual Testing approach as I propose, please refer to

- [User Guide of visualtestinginks-gradle-plugin](https://github.com/kazurayam/visualtestinginks-gradle-plugin/blob/master/docs/userguide.md)
- or [あなたのWebサイトをVisual Testingする方法](https://qiita.com/kazurayam/items/7da4bd82b52fe18209db) in Japanese

---

<div class="post-metadata">

**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:** [June 16, 2020, 2:36am UTC](https://forum.katalon.com/t/visual-testing-in-katalon-studio/13361/63 "2020-06-16T02:36:54Z")

</div>

I have updated the VisualTestingInKatalonStudio project to the version [1.17.3.](https://github.com/kazurayam/VisualTestingInKatalonStudio/releases/tag/1.17.3). In this version I fixed a OutOfMemoryError: Java Heap Space problem as described at [https://github.com/kazurayam/Materials/issues/17](https://github.com/kazurayam/Materials/issues/17)

If you have any project using the VisualTestingInKatalonStudio as framework, you can easily update the framework to the latest version. In your project, you have `build.gradle` file, right? You change the `vt.version` as follows:

```auto
plugins {
  id "com.github.kazurayam.visualtestinginks" version "0.1.21"
}
vt.version = '1.17.3'

```

And in the commandline, you want to do:

```auto
$ cd $yourVisualTesingProject
$ ./gradlew enableVisualTesting

```

then, the new version of “VisualTestingInKatalonStudio” artifacts will be automatically downloaded and located in you project. The updates to the 1.17.3 requires no changes to your test case scripts.

In the $KatalonStudioInstalledDirectory/katalon.ini file, you specify the maximum heap space allocated to Java VM of Katalon Studio. I would recommend you to write in the `katalon.ini`

```auto
-Xms512m
-Xmx4096m

```

---

<div class="post-metadata">

**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:** [June 19, 2020, 5:18am UTC](https://forum.katalon.com/t/visual-testing-in-katalon-studio/13361/64 "2020-06-19T05:18:09Z")

</div>

I have updated the VisualTestingInKatalonStudio project to the version [1.17.4](https://github.com/kazurayam/VisualTestingInKatalonStudio/releases/tag/1.17.4).

This version added information how many screenshots were taken ( **PNG:x** ) and how long each Test Suite execution took in seconds ( **TIME:t** ). See the following screenshots for example:

 ![PNG TIME](https://europe1.discourse-cdn.com/katalon/original/2X/5/5680446aae0ccadc80629f58c54d31adac49d880.png)

When I tried to test over 300 URLs it took approximately 30minutes. I wanted to know exact figures how many URLs, how long it took. So I modified the framework.

If you have any project using the VisualTestingInKatalonStudio as framework, you can easily update the framework to the latest version. In your project, you have `build.gradle` file, right? You change the `vt.version` as follows:

```auto
plugins {
  id "com.github.kazurayam.visualtestinginks" version "0.1.21"
}
vt.version = '1.17.4'

```

And in the commandline, you want to do:

```auto
$ cd $yourVisualTesingProject
$ ./gradlew enableVisualTesting

```

then, the new version of “VisualTestingInKatalonStudio” artifacts will be automatically downloaded and located in you project. The updates to the 1.17.4 requires no changes to your test case scripts.

---

<div class="post-metadata">

**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 1, 2020, 9:47pm UTC](https://forum.katalon.com/t/visual-testing-in-katalon-studio/13361/67 "2020-08-01T21:47:50Z")

</div>

tag 1.23.0 implemented this.

In the `Test Cases/CURA/visiteSite` script, now write code that calls `MaterialRepository#resolve*Path*` method with argument of type `MaterialDescription` . You are supposed to write any description what that screenshot is about. For example, a screenshot of `http://demoaut.katalon.com` can have a description `ホームページ` in my native language. The code will look like this.

```auto
// create one more screenshot file with name in Japanese
Path png2 = mr.resolveMaterialPath(
					GlobalVariable[MGV.CURRENT_TESTCASE_ID.getName()],
					'screenshots',
					"ホーム.png",
					new MaterialDescription("1", "ホームページ"))

```

And the Test Suite Collection `Test Suite/CURA/Execute_chronos` and `Test Suite/CURA/Execute_twins` will produce `Materials/index.html` where all “diff images” will be annotated with the description which you added in the `Test Cases/CURA/visitSite` script.

In short, the `Materials/index.html` page shows descriptions of each URL’s screenshots (you assign them in your native language, in my case 日本語で). The page looks like this. Much easier to understand, isn’t it?

 ![スクリーンショット 2020-07-31 15.15.33](https://europe1.discourse-cdn.com/katalon/original/2X/6/6a569cb1e1460b304ece8a1f99a346421d696cb4.png)

---

<div class="post-metadata">

**Author:** ![ayesha.khanam](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/ayesha.khanam/32/16104_2.png) [@ayesha.khanam](https://forum.katalon.com/u/ayesha.khanam)\
**Post date:** [October 9, 2020, 11:45am UTC](https://forum.katalon.com/t/visual-testing-in-katalon-studio/13361/68 "2020-10-09T11:45:04Z")

</div>

Hey @kazurayam

How do we enable the remote debugging in katalon.Currently I am using Katalon 7.7.2 version

---

<div class="post-metadata">

**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 9, 2020, 1:26pm UTC](https://forum.katalon.com/t/visual-testing-in-katalon-studio/13361/69 "2020-10-09T13:26:16Z")

</div>

> [@ayesha.khanam](#):
>
> the remote debugging in katalon

I do not see what is _the remote debugging_ at all, sorry.

---

<div class="post-metadata">

**Author:** ![ayesha.khanam](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/ayesha.khanam/32/16104_2.png) [@ayesha.khanam](https://forum.katalon.com/u/ayesha.khanam)\
**Post date:** [October 9, 2020, 2:03pm UTC](https://forum.katalon.com/t/visual-testing-in-katalon-studio/13361/70 "2020-10-09T14:03:13Z")

</div>

I was talking about below line @kazurayam  
Starting Headless (CLI)  
The easiest way to get started with headless mode is to open the Chrome binary from the command line. If you’ve got Chrome 59+ installed, start Chrome with the `--headless` flag:

chrome \ --headless \  
\*\*# Runs Chrome in headless mode. --disable-gpu \ \*\*  
**# Temporarily needed if running on Windows.**  
**–remote-debugging-port=9222** \ [https://www.chromestatus.com](https://www.chromestatus.com)  
**# URL to open. Defaults to about:blank.**

for this issue

---

<div class="post-metadata">

**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 12, 2020, 7:51am UTC](https://forum.katalon.com/t/visual-testing-in-katalon-studio/13361/71 "2020-10-12T07:51:07Z")

</div>

Still I do not see what you are asking, sorry.

---

<div class="post-metadata">

**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 12, 2020, 7:54am UTC](https://forum.katalon.com/t/visual-testing-in-katalon-studio/13361/72 "2020-10-12T07:54:12Z")

</div>

If you have a problem concerning the command line option for the chrome.exe, it has little to do with the ‘Visual Testing in Katalon Studio’ issue.

You should create a new post here with appropriate title on its own. Then it would better attract attentions of those who are capable to help you.

---

<div class="post-metadata">

**Author:** ![Gan\_Jyi\_Yng](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/gan_jyi_yng/32/16104_2.png) [@Gan\_Jyi\_Yng](https://forum.katalon.com/u/Gan_Jyi_Yng)\
**Post date:** [November 24, 2020, 1:50am UTC](https://forum.katalon.com/t/visual-testing-in-katalon-studio/13361/73 "2020-11-24T01:50:39Z")

</div>

is this applicable for desktop app?  
if i want to compare email content?

---

<div class="post-metadata">

**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:** [November 24, 2020, 3:08am UTC](https://forum.katalon.com/t/visual-testing-in-katalon-studio/13361/74 "2020-11-24T03:08:17Z")

</div>

> [@Gan\_Jyi\_Yng](#):
>
> is this applicable for desktop app?

Unfortunately not. You need to develop a way to take PNG screenshots of your target desktop apps. I have not experience about this.  
Once you can screenshots, then image-comparison by the VisualTestingInKatalonStudio is applicable, but it would be a tuff job to make a usable software project that implements that idea.

> [@Gan\_Jyi\_Yng](#):
>
> if i want to compare email content?

Do you want to compare EMail text messages? Then you don’t need the VisualTestingInKatalonStudio framework. All you need is

- [Read and Write Gmail Messages Keywords](https://store.katalon.com/product/39/Read-and-Write-Gmail-Messages-Keywords)  
and some String-diff library such as
- [Apache Commons Lang 3 - Diff](https://commons.apache.org/proper/commons-lang/apidocs/org/apache/commons/lang3/builder/Diff.html) which is bundled in Katalon Studio.

If you want to compare 2 HTML content embeded in EMail body, you need to develop a code to read EMail message and extract the HTML content, and load it to new Browser. Possibly you can read Gmail Messages by

- [Read and Write Gmail Messages Keywords](https://store.katalon.com/product/39/Read-and-Write-Gmail-Messages-Keywords)

According to the change log, version 1.2.0 of this plugin supported reading `text/html` message.

- [Katalon Store - Explore Plugins for Katalon Studio](https://store.katalon.com/product/39/Read-and-Write-Gmail-Messages-Keywords/change-logs)

Though I haven’t tried extracting the embeded HTML content out of GMail messages using this plugin.

Once the embedded HTML content is loaded on browsers, then the image-comparison framework of the VisualTestingInKatalonStudio would be applicable for them. However it would be a tuff job to develop a set of codes that implements this idea.

---

<div class="post-metadata">

**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:** [November 25, 2020, 5:44am UTC](https://forum.katalon.com/t/visual-testing-in-katalon-studio/13361/75 "2020-11-25T05:44:14Z")

</div>

Katalon Studio v8 is announced; they will support taking screenshots for mobile.

> **[\[Mobile\] Take Area Screenshot](https://docs.katalon.com/katalon-studio/docs/mobile-take-area-screenshot.html)**
>
> From version 8.0, this keyword is available. takeAreaScreenshot Description: Take a screenshot of a specific area. The area should be inside the application viewport; otherwise, this keyword will fail. Keyword...

Previously some people asked me if the “Visual Testing in Katalon Studio” framework works on Mobile testing, and I replied “no” because I did not know how to take screenshots of mobile devices in tests. This new feature announced for KS v8 will make it possible: Visual Testing in Katalon Studio for Mobile.

However I am not sure if “Visual Testing for Mobile” is really useful or not. As for Web UI, we can take “full screenshot of a page”(= from start to end of a HTML document), and compare 2 images. But as for Mobile, there is no abstraction of “full size of page”. In many cases we can repeat swiping screen endlessly. Consequently we can not get “full size screenshot” of mobile app at all. All we can do is to take screenshot of just a small area, and our test script must be implemented intelligently enough being aware where to swipe to and to take screenshot of. This is cumbersome.

I want “VisualTestingInKatalonStudio” to be a tool to find out unplanned/silly mistakes in UI. People can not predict where they make mistakes. Therefore, I think, “VisualTestingInKatalonStudio for mobile” may not be very useful.

---

<div class="post-metadata">

**Author:** ![Gan\_Jyi\_Yng](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/gan_jyi_yng/32/16104_2.png) [@Gan\_Jyi\_Yng](https://forum.katalon.com/u/Gan_Jyi_Yng)\
**Post date:** [December 11, 2020, 9:11am UTC](https://forum.katalon.com/t/visual-testing-in-katalon-studio/13361/76 "2020-12-11T09:11:52Z")

</div>

i do check updates  
latest is 7.8 only

---

<div class="post-metadata">

**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, 2021, 3:10am UTC](https://forum.katalon.com/t/visual-testing-in-katalon-studio/13361/77 "2021-01-27T03:10:24Z")

</div>

I wrote a post that would extend the usability of the VisualTestingInKatalonStudio framework.

> [@ExecutionProfilesLoader v1.0](http://forum.katalon.com/t/executionprofilesloader-how-to-create-globalvariables-by-code-on-the-fly/51515):
>
> I have published a GitHub project: Problem to solve I have developed and published a tool named [VisualTestingInKatalonStudio](http://forum.katalon.com/t/visual-testing-in-katalon-studio/13361) project on top of [Katalon Studio](https://www.katalon.com/katalon-studio/), which enables me to take screenshots of Web services on browser and to compare the images between environments (e.g. Development and Production) or between 2 different timings (e.g. before and after work of system changes). Last year (2020) I worked for an [Application Service Provider (ASP)](https://en.wikipedia.org/wiki/Application_service_provider) in Financial industry. They had approximatel…

---

<div class="post-metadata">

**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:14am UTC](https://forum.katalon.com/t/visual-testing-in-katalon-studio/13361/79 "2021-08-15T05:14:14Z")

</div>

The [Visual Testing In Katalon Studio](https://github.com/kazurayam/VisualTestingInKatalonStudio) project is now superseded by the [Visual Testing In Katalon Studio - Revived](https://github.com/kazurayam/VisualTestingInKatalonStudio_Revived) project backed by the [materialstore](https://github.com/kazurayam/materialstore) library.

---

<div class="post-metadata">

**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 6, 2024, 2:03am UTC](https://forum.katalon.com/t/visual-testing-in-katalon-studio/13361/80 "2024-01-06T02:03:38Z")

</div>

In Jan 2023, the “Visual Testing In KatalonStudio - Revied” has been superceded by the following project:

- [Automated Visual Inspection](http://forum.katalon.com/t/automated-visual-inspection/81966)

[Previous page](https://forum.katalon.com/t/visual-testing-in-katalon-studio/13361.md?page=3)