How to Capture Screenshots of Web Elements for Image-based Testing


This is a companion discussion topic for the original entry at https://docs.katalon.com/katalon-studio/docs/web-image-based-object-recognition.html

Looks really interesting but does path have to be absolute? The location shown in the screenshot points to the Dev’s personal folder and will break when anybody else runs it.

@ThanhTo (not sure if you are the right person to tag)

I am also curious on the absolute path question @Dan_Bown posted but with a little twist. How does this function/work for someone who is using TestOps and running on remote devices? Does the file need to be stored somewhere remote? or does it upload with the repo when it goes to TestOps?

Thanks in advanced!

  • Sha

@Dan_Bown @shahin.fard

Yes the path must be absolute, since the underlying mechanism doesn’t assume that the image must be inside your Katalon project.

You can utilize Test Object Parameterization to pass the path to the current project inside the Test Object.
https://docs.katalon.com/katalon-studio/docs/manage-web-test-object.html#parameterize-web-test-objects

Example:

TestObject to = findTestObject('test', ['screenshot' : RunConfiguration.getProjectDir() ])

println(to.getActiveProperties().get(0).getValue().toString())

Console:

2020-04-15 11:35:38.608 DEBUG testcase.New Test Case                   - 2: println(getValue().toString())
/Users/thanhto/Katalon Studio/Test projects/MyProject/image/yourimage.jpg
Test Cases/New Test Case

The screenshot property will then be used by the image recognition algorithm to retrieve the image.

Please try and let me know if it works, or if your use case demands something more.

3 Likes

Hi all.

We incorporated this to a new Self-healing feature in 7.6.

Specifically relevant to this thread, now you can specify relative path of the image.

hello,
is it possible to use a screenshot AND a xpath ?
I need to find an object having a green icon in a specific cell in a table.

it seem that before 7.6, we were able to use a screenshot in object’s properties
It is no more possible in 8.0 ?

You want this, don’t you?

initially, I only want to check that there is a specific icon in a precise location in my page.

to illustrate with an example, with that page :


I want to ckeck that there is the green icon in column “Lancée”

So I wanted to use image locator in my object “selection method” (but I need to add an xpath in order to differentiate green icon )

I suppose that you do not have to bother yourself taking screenshot of web element, verifying if the image is same as what you exected.

If you look at the HTML source code of the page, in the cell in the “Lancee” column, you would find something like

<td><img src="url of green icon" alt="green"></td>

You just want to check if you find the <img> element there or not. In order to check it, you do not need screenshooting at all.

yes but it is not so easy because I don’t find any src in html code.
formerly, I was using xpath to check html class of element
Example of xpath :
//td[contains(@id,'a_HFPE01-ID_FEN0-SFL_1-1_id')][contains(@class,"a_HFPE01-ID_FEN0-SFL_1-1_id-img6")]|//td[contains(@id,'a_HFPE01-ID_FEN0-SFL_1-1_id')]//*[contains(@class,"a_HFPE01-ID_FEN0-SFL_1-1_id-img6")]
by it doent work anymore because class of image change from one version to another (depending on my website version)
So it would be more reliable to check on image rather than on html class

in one server, I get this source code with img5:
image
in another server, i get this code with img6 :
image

I don’t think so. Taking a screenshot of web element is easy. But how can you verify the image? You need to prepare the “expected” image, you take a screenshot as “actual”. Then you have to compare these 2 and measure how much they are similar (or different) pixel-wise. This would involve a lot of programming exercise. I do not recommend you to take image-based testing for this problem.

You do not want to distinguish “img5” and “img6”. You want to regard them as two members of a group of “img”. OK, you should just want to ignore “5” and “6” part.

XPath to locate image in the cell(1,11):

//td[contains(@id,'a_HFPE01-ID_FEN0-SFL_1-1_id_row1_col11')]//div[contains(@class,"a_HFPE01-ID_FEN0-SFL_1-1_id-img")]

XPath to locate image in the cell(2,12):

//td[contains(@id,'a_HFPE01-ID_FEN0-SFL_1-1_id_row2_col12')]//div[contains(@class,"a_HFPE01-ID_FEN0-SFL_1-1_id-img")]

unfortunately, if I get img3 (which is the orange icon), I do not want that xpath match it…
This is why I would have prefered a snapshot comparison (but as you said , it is a little complex to implement if katalon does not allow it from scratch…)

OK. Just a bit of twist in XPath is required. I would propose:

//td[contains(@id,'a_HFPE01-ID_FEN0-SFL_1-1_id_row1_col11')]//div[contains(@class,"a_HFPE01-ID_FEN0-SFL_1-1_id-img5") or contains(@class,"a_HFPE01-ID_FEN0-SFL_1-1_id-img6")]

Possibly the following shorter one would work and be easier to understand.

//td[contains(@id,'a_HFPE01-ID_FEN0-SFL_1-1_id_row1_col11')]//div[contains(@class, "-img5") or contains(@class, "-img6")]

Katalon doesnt provide a keyword that compares 2 images and determine if they are different enough or similar e nough. You need to invent it.


Let me go back to your XPath expression.

//td[contains(@id,'a_HFPE01-ID_FEN0-SFL_1-1_id')][contains(@class,"a_HFPE01-ID_FEN0-SFL_1-1_id-img6")]
  |  //td[contains(@id,'a_HFPE01-ID_FEN0-SFL_1-1_id')]//*[contains(@class,"a_HFPE01-ID_FEN0-SFL_1-1_id-img6")]

What was wrong with it? In fact I find a few mistakes in it.

Please compare your xpath and mine. You will find a few differences. The differences are subtle, but any single character in XPath is significant.