# Comparing Screenshots of а WebElement **URL:** \ **Category:** Tips and Tricks\ **Tags:** tips-tricks, katalon-studio\ **Created:** [November 1, 2018, 7:58am UTC](https://forum.katalon.com/t/comparing-screenshots-of-webelement/14060 "2018-11-01T07:58:54Z")\ **Posts on this page:** 11\ **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:** [November 1, 2018, 7:58am UTC](https://forum.katalon.com/t/comparing-screenshots-of-webelement/14060/1 "2018-11-01T07:58:54Z")
I have made a demo project at - [GitHub - kazurayam/ComparingScreenshotsOfWebElement at 0.2.0](https://github.com/kazurayam/ComparingScreenshotsOfWebElement/tree/0.2.0) This project proposes a set of Custom Keywords which enable you to test arbitrary HTML elements visually by taking and comparing screenshots in various ways. * * * ## Problem to solve ### What is built-in Katalon Studio provides a limited number of built-in keywords for testing web pages visually. 1. [`WebUI.verifyImagePresent(TestObject expected)`](https://docs.katalon.com/katalon-studio/docs/webui-verify-image-present.html) 2. [`WebUI.takeScreenshot(File)`](https://docs.katalon.com/katalon-studio/docs/webui-take-screenshot.html) ### Shortages I would enumerate shortages of the built-in keywords above. 1. `WebUI.takeScreenshot(File)` enables you to take screenshot of viewport of the target web page, but it does not allow you to take screenshot of a particular HTML element of your interest. 2. `WebUI.verifyImagePresent(TestObject expected)` requires you to prepare a image file as the _expected image_ before running test. But Katalon Studio does not provide any method for you to prepare the _expected image_ out of the target web page. Katalon just assumes you can find the _expected image_ file somewhere. 3. `WebUI.verifyImagePresent(TestObject expected)` tries to find the expected image _anywhere_ one or more times in the target web page. You can not specify which HTML element to compare against the expected image. * * * ## Solution proposed [aShot](https://github.com/yandex-qatools/ashot), WebDriver Screenshot utility, enables you to take screenshot of particular HTML element. Also it provides images comparison. My Custom Keyword [`com.kazurayam.ksbackyard.ScreenshotDriver`](https://github.com/kazurayam/ComparingScreenshotsOfWebElement/blob/master/Keywords/com/kazurayam/ksbackyard/ScreenshotDriver.groovy) wraps aShot so that you can utilize aShot features in Katalon Studio easily. * * * ## Custom Keywords ### ScreenshotDriver#saveElementImage #### Description Takes screenshot of a HTML element in the target web page and store into file #### Parameters | Param | Param Type | Mandatory | Description | | --- | --- | --- | --- | | element | TestObject | Required | target HTML element to take screenshot of | | file | File | Required | File into which PNG image is saved into | #### Example - [TC1\_saveElementImage](https://github.com/kazurayam/ComparingScreenshotsOfWebElement/blob/master/Scripts/TC1_saveElementImage/Script1540974069159.groovy) ```auto // save screenshot of Google Logo area TestObject logoArea = findTestObject('Page_Google/div_logoArea') File file1 = workdir.resolve('logoArea.png').toFile() CustomKeywords.'com.kazurayam.ksbackyard.ScreenshotDriver.saveElementImage'(logoArea, file1) ``` ### ### ScreenshotDriver#verifyImagesAreSimilar(File, TestObject, …) #### Description Compare actual screenshot of a HTML element in the target web page against the expected PNG file. Difference of 2 images are calculated. If the difference is less than or equal to the given criteria, then verifies images are regarded similar. #### Parameters | Param | Param Type | Mandatory | Description | | --- | --- | --- | --- | | expected | File | Required | PNG File to compare HTML element against | | actual | TestObject | Required | target HTML element in the target web page | | criteriaPercent | Double | Required | e.g. 5.0 percent | | snapshotDir | File | Optional | default to /tmp directory. When FAILED, 3 PNG files will be saved into this directory. These are the snapshots of the expected image, the actual image, and the difference image. The snapshots will NOT be saved when PASSED as default. But you can toggle it ON by calling `ScreenshotDriver.setForceSnapshots(true)` | | flowControl | [FailureHandling](https://docs.katalon.com/katalon-studio/docs/failure-handling.html) | Optional | default to CONTINUE\_ON\_FAILURE | #### Example - [TC2\_verifyImagesAreSimilar\_or\_Different(File,TestObject](https://github.com/kazurayam/ComparingScreenshotsOfWebElement/blob/master/Scripts/TC2_verifyImagesAreSimilar_or_Different(File,TestObject)/Script1540974076759.groovy) ```auto TestObject logoArea = findTestObject('Object Repository/Page_Google/div_logoArea') File file1 = datadir.resolve('google_logo.png').toFile() CustomKeywords.'com.kazurayam.ksbackyard.ScreenshotDriver.verifyImagesAreSimilar'( file1, logoArea, 3.0, workdir.resolve('a').toFile(), FailureHandling.CONTINUE_ON_FAILURE) ``` Or you can simplify the above code as follows: ```auto ... CustomKeywords.'com.kazurayam.ksbackyard.ScreenshotDriver.verifyImagesAreSimilar'( file1, logoArea, 3.0) ``` There are a few more keywords supported. see the GitHub project for detail * * * * * * ## How to run the demo 1. download the zip file of this project from [Realses](https://github.com/kazurayam/ComparingScreenshotsOfWebElement/releases) page 2. unzip it 3. open the project with your Katalon studio and then ### 4. TC1\_saveElementImage Open `Test Cases/TC1_saveElementImage` and run it. When finished, you will find the screenshot of element, which contains the Google Logo graphics, is saved in the /`tmp/TC1` directory. [![logoArea](https://europe1.discourse-cdn.com/katalon/original/3X/2/f/2fffc75053853e515065f82b46a3d5c82f6b1704.png)](https://github.com/kazurayam/ComparingScreenshotsOfWebElement/blob/master/docs/images/tmp/TC1/logoArea.png) ### ### ### 5. TC2\_verifyImagesAreSimilar\_or\_Different(File,TestObject) Open `Test Cases/TC2_verifyImagesAreSimilar_or_different(File,TestObject)` and run it. This test case will fail. The log was as follows: ```auto 11-01-2018 04:42:58 PM - [FAILED] - Test Cases/TC2_verifyImagesAreSimilar_or_Different(File,TestObject) FAILED because (of) (Stack trace: com.kms.katalon.core.exception.StepFailedException: images are expected to be similar but are different, difference=99.35%, snapshots were saved in C:\Users\qcq0264\katalon-workspace\ComparingScreenshotsOfWebElement\tmp\TC2\b at com.kms.katalon.core.util.KeywordUtil.markFailed(KeywordUtil.java:15) at com.kms.katalon.core.util.KeywordUtil$markFailed.call(Unknown Source) at org.codehaus.groovy.runtime.callsite.CallSiteArray.defaultCall(CallSiteArray.java:48) at org.codehaus.groovy.runtime.callsite.AbstractCallSite.call(AbstractCallSite.java:113) at org.codehaus.groovy.runtime.callsite.AbstractCallSite.call(AbstractCallSite.java:125) at com.kazurayam.ksbackyard.Assert.stepFailed(Assert.groovy:68) at com.kazurayam.ksbackyard.Assert.assertTrue(Assert.groovy:27) at com.kazurayam.ksbackyard.Assert$assertTrue.call(Unknown Source) at com.kazurayam.ksbackyard.ScreenshotDriver.verifyImagesAreSimilar(ScreenshotDriver.groovy:316) ... ``` You can find the reason why it failed by looking at the snapshots. See the following snapshots. The expected image is tmp/TC2/b/verifyImagesAreSimilar(File,TestObject).expected.png [![expected](https://europe1.discourse-cdn.com/katalon/original/3X/3/a/3a22938196020452e3a11b19298fca1911c2171e.png)](https://github.com/kazurayam/ComparingScreenshotsOfWebElement/blob/master/docs/images/tmp/TC2/b/verifyImagesAreSimilar%28File,TestObject%29.expected.png) The actual image is tmp/TC2/b/verifyImagesAreSimilar(File,TestObject).actual.png [![actual](https://europe1.discourse-cdn.com/katalon/original/3X/7/c/7cc68883b293e03841ce1979cb7106aef6891624.png)](https://github.com/kazurayam/ComparingScreenshotsOfWebElement/blob/master/docs/images/tmp/TC2/b/verifyImagesAreSimilar%28File,TestObject%29.actual.png) The difference image is tmp/TC2/b/verifyImagesAreSimilar(File,TestObject).diff(99.35).png [![diff](https://europe1.discourse-cdn.com/katalon/original/3X/d/0/d083b28e3515f7894a266829891178c484fb365a.png "Image: https://github.com/kazurayam/ComparingScreenshotsOfWebElement/raw/master/docs/images/tmp/TC2/b/verifyImagesAreSimilar%28File,TestObject%29.diff%2899.35%29.png")](https://github.com/kazurayam/ComparingScreenshotsOfWebElement/blob/master/docs/images/tmp/TC2/b/verifyImagesAreSimilar%28File,TestObject%29.diff%2899.35%29.png) The expected image and actual image is NOT similar, therefore the test case TC2 fails. ---
**Author:** ![Andrej\_Podhajsky](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/andrej_podhajsky/32/1055_2.png) [@Andrej\_Podhajsky](https://forum.katalon.com/u/Andrej_Podhajsky)\ **Post date:** [November 1, 2018, 8:21am UTC](https://forum.katalon.com/t/comparing-screenshots-of-webelement/14060/2 "2018-11-01T08:21:29Z")
+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:** [November 2, 2018, 3:52am UTC](https://forum.katalon.com/t/comparing-screenshots-of-webelement/14060/3 "2018-11-02T03:52:15Z")
## How to make those Custom Keywords operational in your Katalon projectDir 1. import the jar file of aShot into your Katalon Studio Project. You can download the jar at [Maven Repository](https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot/1.5.4). Or you can reuse the jar [bundled in this project](https://github.com/kazurayam/ComparingScreenshotsOfWebElement/tree/master/Drivers). See Katalon Docs [External Library](https://docs.katalon.com/katalon-studio/docs/external-libraries.html) for operation. 2. Using Katalon Studio GUI, create 2 Groovy class files in the Keywords folder, and copy&paste the source code from this project: - [Keywords/com/kazurayam/ksbackyard/Assert](https://github.com/kazurayam/ComparingScreenshotsOfWebElement/blob/master/Keywords/com/kazurayam/ksbackyard/Assert.groovy "Link: https://github.com/kazurayam/ComparingScreenshotsOfWebElement/blob/master/Keywords/com/kazurayam/ksbackyard/Assert.groovy") - [Keywords/com/kazurayam/ksbackyard/ScreenshotDriver](https://github.com/kazurayam/ComparingScreenshotsOfWebElement/blob/master/Keywords/com/kazurayam/ksbackyard/ScreenshotDriver.groovy "Link: https://github.com/kazurayam/ComparingScreenshotsOfWebElement/blob/master/Keywords/com/kazurayam/ksbackyard/ScreenshotDriver.groovy") 3. Now you can create your test case. See the following sample codes. - [Test Cases/TC1\_saveElementImage](https://github.com/kazurayam/ComparingScreenshotsOfWebElement/blob/master/Scripts/TC1_saveElementImage/Script1540974069159.groovy) - [Test Cases/TC2\_verifyImagesAreSimilar\_or\_Different(File,TestObject)](https://github.com/kazurayam/ComparingScreenshotsOfWebElement/blob/master/Scripts/TC2_verifyImagesAreSimilar_or_Different%28File,TestObject%29/Script1540974076759.groovy "Link: https://github.com/kazurayam/ComparingScreenshotsOfWebElement/blob/master/Scripts/TC2\_verifyImagesAreSimilar\_or\_Different%28File,TestObject%29/Script1540974076759.groovy") ---
**Author:** ![Paul\_Kanaris](https://avatars.discourse-cdn.com/v4/letter/p/b5a626/32.png) [@Paul\_Kanaris](https://forum.katalon.com/u/Paul_Kanaris)\ **Post date:** [April 16, 2019, 11:37am UTC](https://forum.katalon.com/t/comparing-screenshots-of-webelement/14060/4 "2019-04-16T11:37:04Z")
Hi kazurayam, Thank you for the very complete example. I was wondering, is there a method here that allows the images to be attached to the Katalon reports? Thank you, Paul ---
**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 16, 2019, 11:56am UTC](https://forum.katalon.com/t/comparing-screenshots-of-webelement/14060/5 "2019-04-16T11:56:50Z")
> [@Paul\_Kanaris](#): > > to the Katalon reports? No. The report is compiled by Katalon Studio, and it provides no extension point. ---
**Author:** ![vergilfransdeepa](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/vergilfransdeepa/32/16104_2.png) [@vergilfransdeepa](https://forum.katalon.com/u/vergilfransdeepa)\ **Post date:** [June 15, 2021, 1:30am UTC](https://forum.katalon.com/t/comparing-screenshots-of-webelement/14060/6 "2021-06-15T01:30:01Z")
Hi @kazurayam, Will this approach work for mobile keyword? Also, I tried to use the default ‘Verify Image Present’ mobile keyword but it seems to ‘pass’ even when the reference image does not match the actual one(say 50% match). Do you have any idea on that? Regards, Vergil ---
**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 15, 2021, 2:40am UTC](https://forum.katalon.com/t/comparing-screenshots-of-webelement/14060/7 "2021-06-15T02:40:13Z")
> [@vergilfransdeepa](#): > > Will this approach work for mobile keyword? No. This post of mine used the AShot library to take screenshot of Web HTML elements. It does not support Mobile. Katalon Studio supports a keywords to take screenshot of a Mobile element: [https://docs.katalon.com/katalon-studio/docs/mobile-take-element-screenshot-as-checkpoint.html](https://docs.katalon.com/katalon-studio/docs/mobile-take-element-screenshot-as-checkpoint.html) Possibly you want to try it. ---
**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 15, 2021, 3:39am UTC](https://forum.katalon.com/t/comparing-screenshots-of-webelement/14060/9 "2021-06-15T03:39:17Z")
Once you have got a pair of PNG files, then you will find the next question: > how to compare these 2 PNG files? how much they are similar or different? My GitHub repository [Comparing Screenshots of Web Element](https://github.com/kazurayam/ComparingScreenshotsOfWebElement) provides a class [com.kazurayam.ksbackyard.ScreenshotDriver](https://github.com/kazurayam/ComparingScreenshotsOfWebElement/blob/master/Keywords/com/kazurayam/ksbackyard/ScreenshotDriver.groovy). This class implements the following method: ```auto static ImageDifference compareImages( BufferedImage expectedImage, BufferedImage actualImage, Double criteriaPercent) { ImageDifference imgDifference = new ImageDifference(expectedImage, actualImage) imgDifference.setCriteria(criteriaPercent) return imgDifference } ``` This method would be similar to what you would want. This method wraps AShot to compare 2 BufferedImage instances. ---
**Author:** ![vergilfransdeepa](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/vergilfransdeepa/32/16104_2.png) [@vergilfransdeepa](https://forum.katalon.com/u/vergilfransdeepa)\ **Post date:** [June 15, 2021, 8:52am UTC](https://forum.katalon.com/t/comparing-screenshots-of-webelement/14060/10 "2021-06-15T08:52:25Z")
Thank you very much for sharing! I will check. ---
**Author:** ![vergilfransdeepa](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/vergilfransdeepa/32/16104_2.png) [@vergilfransdeepa](https://forum.katalon.com/u/vergilfransdeepa)\ **Post date:** [June 21, 2021, 12:38pm UTC](https://forum.katalon.com/t/comparing-screenshots-of-webelement/14060/11 "2021-06-21T12:38:46Z")
@kazurayam Thank you so much for your guidance! The approach that you shared works perfectly! The accuracy of image comparison is good too. ---
**Author:** ![albert.vu](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/albert.vu/32/20595_2.png) [@albert.vu](https://forum.katalon.com/u/albert.vu)\ **Post date:** [August 8, 2022, 7:31am UTC](https://forum.katalon.com/t/comparing-screenshots-of-webelement/14060/12 "2022-08-08T07:31:35Z")