# takeWebElementScreenshot customkeyword from aShot plugin is not working as expected

**URL:** <https://forum.katalon.com/t/takewebelementscreenshot-customkeyword-from-ashot-plugin-is-not-working-as-expected/79706>\
**Category:** Integrations\
**Tags:** plugins, web-testing\
**Created:** [October 18, 2022, 2:43pm UTC](https://forum.katalon.com/t/takewebelementscreenshot-customkeyword-from-ashot-plugin-is-not-working-as-expected/79706 "2022-10-18T14:43:37Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![zahid.asim](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/zahid.asim/32/20464_2.png) [@zahid.asim](https://forum.katalon.com/u/zahid.asim)\
**Post date:** [October 18, 2022, 2:43pm UTC](https://forum.katalon.com/t/takewebelementscreenshot-customkeyword-from-ashot-plugin-is-not-working-as-expected/79706/1 "2022-10-18T14:43:37Z")

</div>

Hi,

I installed ’ Image Comparison using aShot Keywords’ plugin to play with screenshots. I tried to use method ‘takeWebElementScreenshot’ which require the repository object name to take screenshot of and filename to save the screenshot. This is how i am doing it

```auto
CustomKeywords.'kms.turing.katalon.plugins.visualtesting.ScreenCapture.takeWebElementScreenshot'(findTestObject('Unified_Agent_Objects/AgentMenuOptions/CustomerConversationView/ChatNotifications/WebChannelImage'), 
    'test.png', 5, FailureHandling.CONTINUE_ON_FAILURE)

```

This method is taking blank screenshot of given web element. Before taking screenshot of web element, I am sure the web element is visible because

```auto
WebUI.waitForElementVisible(findTestObject('Unified_Agent_Objects/AgentMenuOptions/CustomerConversationView/ChatNotifications/WebChannelImage'), 
    3)

```

is executing successfully.

This is reference from documentation to use this keyword

> Blockquote  
> @com.kms.katalon.core.annotation.Keyword static void **takeWebElementScreenshot** (com.kms.katalon.core.testobject.TestObject object, java.lang.String filename, int timeout = 10, com.kms.katalon.core.model.FailureHandling flowControl = FailureHandling.OPTIONAL)  
> Take the picture of a specific web element using AShot and save to screenshots folder in current working project  
> **Parameters:**  
> `object` - the web element need to take picture  
> `filename` - the image will be save with the name

Not sure what I am doing wrong which is generating blank screenshots???

Thanks,

---

<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 18, 2022, 11:50pm UTC](https://forum.katalon.com/t/takewebelementscreenshot-customkeyword-from-ashot-plugin-is-not-working-as-expected/79706/2 "2022-10-18T23:50:02Z")

</div>

> [@zahid.asim](#):
>
> This method is taking blank screenshot of given web element. Before taking screenshot of web element, I am sure the web element is visible because
> 
> ```auto
> WebUI.waitForElementVisible(findTestObject('Unified_Agent_Objects/AgentMenuOptions/CustomerConversationView/ChatNotifications/WebChannelImage'), 
> 3)
> 
> ```
> 
> is executing successfully.

Possibly, the targeted web element IS NOT visible or it IS visible and IS blank after 3 seconds. Therefore you got a blank screenshot.

---

<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 18, 2022, 11:54pm UTC](https://forum.katalon.com/t/takewebelementscreenshot-customkeyword-from-ashot-plugin-is-not-working-as-expected/79706/3 "2022-10-18T23:54:47Z")

</div>

The `WebUI.waitForElementVisible(TestObject, 3)` keyword will NOT throw exception when the timeout expired even if the target element IS NOT visible. The keyword will just write a single warning message. So it is likely you didn’t recognize the failure.

You had better use other keyword that throws Exception when the timeout expired. For example,

- ~~WebUI.verifyElementVisible(TestObject, 3)~~
- WebUI.verifyElementPresent(TestObject, 10)

---

<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 18, 2022, 11:55pm UTC](https://forum.katalon.com/t/takewebelementscreenshot-customkeyword-from-ashot-plugin-is-not-working-as-expected/79706/4 "2022-10-18T23:55:32Z")

</div>

Timeout of 3 seconds might be too short.  
You can change the timeout from 3 to 10, 20, 30 and see.

---

<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 18, 2022, 11:58pm UTC](https://forum.katalon.com/t/takewebelementscreenshot-customkeyword-from-ashot-plugin-is-not-working-as-expected/79706/5 "2022-10-18T23:58:36Z")

</div>

See

> <https://stackoverflow.com/questions/62513682/ashot-element-screenshot-is-not-taken-correcly>

The “scaling of screen resolution” really matters when you take a screenshot.

What do I mean “screen resolution”? it is this:

[![](https://www.howtogeek.com/wp-content/uploads/2019/08/microsoft-windows-10-change-resolution.png?trim=1,1&bg-color=000&pad=1,1) ](https://www.howtogeek.com/wp-content/uploads/2019/08/microsoft-windows-10-change-resolution.png?trim=1,1&bg-color=000&pad=1,1)

I have ever used AShot and got troubles because I did not mange the “scaling of screen resolution” properly.

I do not know if the ‘Image Comparison using aShot Keywords’ plugin takes care of it. If the plugin does NOT mange the scaling of screen resolution properly, it is quite likely that the screeshot image taken by the plugin becomes something unexpected.

---

<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 19, 2022, 12:00am UTC](https://forum.katalon.com/t/takewebelementscreenshot-customkeyword-from-ashot-plugin-is-not-working-as-expected/79706/6 "2022-10-19T00:00:40Z")

</div>

Why not you just try and the built-in keyword, rather than the custom one?

> **[\[WebUI\] Take Element Screenshot | Katalon Docs](https://docs.katalon.com/docs/author/keywords/keyword-description-in-katalon-studio/web-ui-keywords/webui-take-element-screenshot)**
>
> Description

I suppose that this official Keyword should be tested better.

---

<div class="post-metadata">

**Author:** ![grylion54](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/grylion54/32/16265_2.png) [@grylion54](https://forum.katalon.com/u/grylion54)\
**Post date:** [October 19, 2022, 9:24pm UTC](https://forum.katalon.com/t/takewebelementscreenshot-customkeyword-from-ashot-plugin-is-not-working-as-expected/79706/7 "2022-10-19T21:24:55Z")

</div>

> [@kazurayam](#):
>
> `WebUI.verifyElementVisible(TestObject, 3)`

**verifyElementVisible** does not have a timeout.

Probably you were thinking of:  
`WebUI.verifyElementPresent(TestObject, 3)`

but I agree you may want a longer timeout, like 10.

---

<div class="post-metadata">

**Author:** ![zahid.asim](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/zahid.asim/32/20464_2.png) [@zahid.asim](https://forum.katalon.com/u/zahid.asim)\
**Post date:** [October 20, 2022, 6:12am UTC](https://forum.katalon.com/t/takewebelementscreenshot-customkeyword-from-ashot-plugin-is-not-working-as-expected/79706/8 "2022-10-20T06:12:36Z")

</div>

```auto
Possibly, the targeted web element IS NOT visible or it IS visible and IS blank after 3 seconds. Therefore you got a blank screenshot.

```

Its not the case as I used different timeouts and it always passed ‘waitForElementVisible’ action. I also used ‘waitForElementPresent’ keyword with sucess but keeps getting balnk screenshot. The web element I am talking about displays for around 30 seconds and then disappear so I believe this duarion is enough to take a screenshot.

```auto
Why not you just try and the built-in keyword, rather than the custom one?

```

After some attempts with that plugin, now I used the builtin keyword for taking element screenshot but there is no builtin method available for comparison so I used custom keyword of mentioned plugin

> Blockquote  
> @com.kms.katalon.core.annotation.Keyword static boolean **areMatched** (java.lang.String expectedImgPath, java.lang.String actualImgPath, com.kms.katalon.core.model.FailureHandling flowControl = FailureHandling.STOP\_ON\_FAILURE)  
> Verify two images are matched or not  
> **Returns:**  
> **Parameters:**  
> `expectedImgPath` - the location of expected image  
> `actualImgPath` - the location of actual image

which successfully compared two images but there is still one problem. If I ran my test on different screen as compared to the one where I captured my reference screenshot (expected image), it still fail due to different images resolution I guess.

Is there any method available where I can mention difference ratio (expected between images due to different screen) so that during images comparison, this ratio will be considered to avoid test failing on different screen?

---

<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 20, 2022, 9:01am UTC](https://forum.katalon.com/t/takewebelementscreenshot-customkeyword-from-ashot-plugin-is-not-working-as-expected/79706/9 "2022-10-20T09:01:30Z")

</div>

> [@zahid.asim](#):
>
> If I ran my test on different screen as compared to the one where I captured my reference screenshot (expected image), it still fail due to different images resolution I guess.

Your finding proves that the “Image Comparison using AShot Keyword” does not take the [**device pixel ratio**](https://tomroth.com.au/dpr/) into account appropriately. Possibly you shouldn’t use it.

* * *

I looked at the source code of the plugin

> <https://github.com/katalon-studio/katalon-studio-ashot-plugin/blob/master/Keywords/kms/turing/katalon/plugins/visualtesting/ScreenCapture.groovy>

I found this code is problematic.

See the signagure of `takeScalingScreenshot` keyword:

```auto
static void takeScalingScreenshot(String filename, float dpr, FailureHandling flowControl = FailureHandling.OPTIONAL){
		try{
			def screenshot = new AShot()
					.shootingStrategy(ShootingStrategies.scaling(dpr))
					.takeScreenshot(DriverFactory.getWebDriver())
			saveScreenshot(filename, screenshot)
		}catch(ex){
			handleError(ex, flowControl)
		}
	}

```

This has a parameter named `dpr`, which stands for `device pixcel ratio`. the `dpr` parameter is actually used when AShot object is to take screenshot. This is the way ALL of method should follow.

However **all other Keyword methods in this plugin doesn’t take `device pixcel ratio` into account**. The author of this program was a bit lazy, I guess. He did not test the code using 2 machines with different screen resolution settings as @zahid.asim did.

Therefore I would conclude that this plugin is incomplete. This will never work appropriately if you use the keyword on 2 machines with different scaling of screen resolution.

---

<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 20, 2022, 9:01am UTC](https://forum.katalon.com/t/takewebelementscreenshot-customkeyword-from-ashot-plugin-is-not-working-as-expected/79706/10 "2022-10-20T09:01:39Z")

</div>

Short answer to @zahid.asim :

- You can use the Katalon built-in keyword to take screenshots
- You can use the AShot’s [ImageDiffer](https://github.com/pazone/ashot/blob/master/src/main/java/pazone/ashot/comparison/ImageDiffer.java) class directly to compare 2 image files

You don’t need the faulty plugin. You can read the source of the plugin, and will find that the plugin does not do much. You don’t need it. Rather, it disturbs you.

AShot repository: [GitHub - pazone/ashot: WebDriver Screenshot utility. Take screenshots, crop, prettify, compare](https://github.com/pazone/ashot)

AShot jar: [https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot/1.5.4](https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot/1.5.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:** [October 20, 2022, 9:09am UTC](https://forum.katalon.com/t/takewebelementscreenshot-customkeyword-from-ashot-plugin-is-not-working-as-expected/79706/11 "2022-10-20T09:09:08Z")

</div>

@zahid.ashim would wonder how a test script can know the value of `device pixcel ratio` of the machine on which the script is currently running.

There is a way.

See [Window.devicePixelRatio - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio)

If you run a JavaScript in browser

```auto
const scale = window.devicePixelRatio;
console.log(scale)
return scale

```

Then you will see, `2.00` for example in the console of browser.

Your Katalon test case can call

```auto
double dpr = WebUI.executeJavaScript(script)

```

to execute the aforementioned JavaScript on browser, and receive the returned value. You will get the exact device pixcel ratio (or scale) by this.

---

<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 20, 2022, 9:22am UTC](https://forum.katalon.com/t/takewebelementscreenshot-customkeyword-from-ashot-plugin-is-not-working-as-expected/79706/12 "2022-10-20T09:22:28Z")

</div>

The following is my wrapper library of AShot. It fully takes Device Pixcel Ratio taken into account.

> <https://github.com/kazurayam/ashotwrapper/tree/master/src/main/java/com/kazurayam/ashotwrapper>
>
> //github.com/kazurayam/ashotwrapper/tree/master/src/main/java/com/kazurayam/ashotwrapper

My code just support taking screeenshots into images and save it into file while taking DPR into account. It does not implement a method for image comparison, because you don’t need it.

Provided that you get 2 images, then your code can directly call AShot’s image comparison method with the 2 images as params. It’s so easy.

The jar is downloadable at [https://mvnrepository.com/artifact/com.kazurayam/ashotwrapper/0.1.1](https://mvnrepository.com/artifact/com.kazurayam/ashotwrapper/0.1.1)

Also you can download the zip of this project from [here](https://github.com/kazurayam/ashotwrapper/releases/tag/untagged-23b96ae95393de282e98), and run

```auto
$ cd <the project dir>
$ gradle build

```

A typical code example: See

> <https://github.com/kazurayam/ashotwrapper/blob/master/src/test/java/com/kazurayam/ashotwrapper/demo/AShotWrapperDemo.java>

At line #66

```auto
        float dpr = DevicePixelRatioResolver.resolveDPR(driver);
        aswOptions = new AShotWrapper.Options.Builder().devicePixelRatio(dpr).build();

```

This resolves the Device Pixcel Ration of the current machine.

and line #70

```auto
@Test
    void test_takeWebElementImage() throws IOException {
        BufferedImage image = AShotWrapper.takeElementImage(driver,
                By.xpath("//body/div"),
                aswOptions);
        assertNotNull(image);
        File screenshotFile = outputDir.resolve("test_takeWebElementImage.png").toFile();
        ImageIO.write(image, "PNG", screenshotFile);
        assertTrue(screenshotFile.exists());
    }

```

This takes a screenshot of a web element with DPR considered.

* * *

As you can see, my AShotWrapper class is NOT designed to be used in Katalon Studio. It is designed with Selenium Java in mind.