Visual Testing in Katalon Studio

@rajani.gangadhara

Which version of the “VisualTestingInKatalonStudio” project are you looking at? I presume you are looking at v1.9.2 or earlier. The most up-to-date version is v.1.10.9.

At the version 1.10.0, I made a significant change to this project. I introduced a Gradle plugin visualtestinginks, which makes it very easy to “enable your own Katalon Studio project to perform Visual Testing — twins mode and chronos mode”. I changed completely the method to make your own project to be capable of Visual Testing. Therefore I DELETED the document “Step by step instruction” as its content is no longer valid as of v1.10.x.

1 Like

Now @rajani.gangadhara showed his interest to this project. I got much pleased, thank you, but a bit frightened. I must confess, the version 1.10.x has some compatibility problem. The users of 1.9.x may encounter problem upgrading to 1.10.0.

To be honest, I thought nobody (except myself) would be looking at this project, so I did not take care about compatibility at all.

2 Likes

Thanks a lot for the Quick reponse and your help :slight_smile:

1 Like

@kazurayam Hi can I use this for testing images within larger image? Say I have a full page screenshot, then I take a smaller section of the page and say find image1 inside image 2. I tried to do this a few years ago with but there were too many false positives.

Thanks.

1 Like

Hi,

For this use case you can try to search for Sikuli library which provides you with a set of APIs to find an image within another image.

Cheers !

1 Like

Hey Thanh, Sikuli was actually what I used back then and it wouldn’t work with finding say an element button in a full screen image.

1 Like

Hi.

What was the difficulties ? I tried Sikuli before and I think it works rather nicely.

1 Like

It wouldn’t find the image I will try again maybe it’s fixed.

1 Like

My VisualTestingInKatalonStudio project uses the aShot library.

The aShot library supports taking an image of a specific Web Element in a page, as well as taking a full page screenshot.

WebElement view

aShot takes a screenshot in three simple steps:

  • Capture a screenshot of the entire page
  • Find the element’s size and position
  • Crop the original screenshot

As a result, aShot provides an image of the WebElement

If you are interested in a specific Web Element in a page and if you can locate that element using Katalon’s Web Object (using XPath expression or CSS selector), then I suppose that aShot might be useful for you.

The example VisualTestingInKatalonStudio project demonstrates how to compare pairs of entire page screenshots. But you can compare images of specific Web Elements in pages as well. Full page or not — it doesn’t really matter.

1 Like

Hi Kazurayam,

What If I create the base assertion screenshots to be compared manually, I’m assuming it would still work correct?

Say I manually capture an element save it locally somewhere, then pass it on to find in the full page screenshot?

1 Like

Unfortunately not.

1 Like

Hi @ThanhTo

Do you have a code sample for Sikuli?

1 Like

@kazurayam If I use the framework to capture the screenshots for the elements can the scenario work?

Basically to test the same environment like someone mentioned.

  1. Create baseline element image through framework (never update)
  2. Create 2nd element image to compare through framework.
1 Like

@kazurayam

Worked like a charm thanks for this amazing library was pulling hair with Sikuli again.

Basically I run the script once to take screenshot of Element into Baseline Folder (Will Change As UI changes, rarely)
Then change the script to take screenshot of Element into the Current Folder
Then run the comparison

Thanks Again!!! Saved me countless of hours

2 Likes

@ealiaj,

I am not sure if you have already solved your problem, or still asking me some question. If you have any question, could you please reword it a bit more clearly?

1 Like

solved thanks

1 Like

The following post will show you a simpler way to compare images of a specific web element in a page.

1 Like

I have upgraded the VisualTestingInKatalonStudio project to v1.12.0.

As of v1.12.0, the Modal dialog presents 2 panes in a carousel format. The first pane shows Expected image on the left, Actual image on the right. concise_parallel And another pane shows the Diff image. concise_diff You can switch between the 2 panes by a single mouse click on button_right_next. This format of index.html makes it easy to locate and see the visual differences in the Expected-Actual images.

See
http://vtprojects.kazurayam.com/VisualTestingInKatalonStudio/Materials/index.html
for the new format in action.

4 Likes

I wrote an article in Qiita in Japanese:

あなたのWebサイトをVisual Testingする方法

there I described how to enable a Katalon Studio project to perform what I call “Visual Testing”. A few steps of preparation makes a Katalon project capable of capturing anonymous Web site you are interested in, analyzing the screenshots and compiling reports.

I wrote this because I wanted to introduce my product to my colleagues in Tokyo. It must be written in Japanese.:wink:

4 Likes

:+1:

It seems I’m able to read some Japanese. I understood “Web”, “Visual Testing” and “Katalon Studio” from your article. :wink:

1 Like