# Katalon Studio - Image Comparison - Image Diff is not generated

**URL:** <https://forum.katalon.com/t/katalon-studio-image-comparison-image-diff-is-not-generated/60556>\
**Category:** Web Testing\
**Tags:** katalon-studio\
**Created:** [December 3, 2021, 6:20am UTC](https://forum.katalon.com/t/katalon-studio-image-comparison-image-diff-is-not-generated/60556 "2021-12-03T06:20:14Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![sugiarto](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/sugiarto/32/18519_2.png) [@sugiarto](https://forum.katalon.com/u/sugiarto)\
**Post date:** [December 3, 2021, 6:20am UTC](https://forum.katalon.com/t/katalon-studio-image-comparison-image-diff-is-not-generated/60556/1 "2021-12-03T06:20:14Z")

</div>

Hi,

I am working on these scenarios:  
Test Case 01 (PASSED):

```auto
WebUI.openBrowser('')

WebUI.navigateToUrl('https://bankmandiri.co.id/')

WebUI.maximizeWindow()

WebUI.click(findTestObject('Mandiri/Page_Bank Mandiri - Terdepan, Terpercaya, T_9dcea6/span_Bantuan'))

WebUI.verifyElementPresent(findTestObject('Mandiri/Page_Bantuan/h3_Bantuan FAQ'), 5)

WebUI.takeFullPageScreenshot('C://Users//sugiarto//Screenshots//Baseline.png')

WebUI.closeBrowser()

```

Test Case 02 (FAILED):

```auto
WebUI.openBrowser('')

WebUI.navigateToUrl('https://bankmandiri.co.id/')

WebUI.maximizeWindow()

WebUI.click(findTestObject('Mandiri/Page_Bank Mandiri - Terdepan, Terpercaya, T_9dcea6/span_Bantuan'))

WebUI.verifyElementPresent(findTestObject('Mandiri/Page_Bantuan/h3_Bantuan FAQ'), 5)

WebUI.click(findTestObject('Mandiri/Page_Bantuan/input_Mandiri Search Portlet__Mandiri_Searc_fe9aca'))

WebUI.setText(findTestObject('Mandiri/Page_Bantuan/input_Mandiri Search Portlet__Mandiri_Searc_fe9aca'), 'KATALON')

WebUI.takeFullPageScreenshot('C://Users//sugiarto//Screenshots//Compared.png')

String imgOriginal = 'C://Users//sugiarto//Screenshots//Baseline.png'

String imgToCompareWithOriginal = 'C://Users//sugiarto//Screenshots//Compared.png'

String imgOutputDifferences = 'C://Users//sugiarto//Screenshots//Different.png'

ImageComparison imageComparison = new ImageComparison(10, 10, 0.05)

if (imageComparison.fuzzyEqual(imgOriginal, imgToCompareWithOriginal, imgOutputDifferences)) {
	System.out.println('Images are fuzzy-equal.')
} else {
	System.out.println('Images are not fuzzy-equal.')
}

WebUI.closeBrowser()

```

The error is as follow:

```auto
Test Cases/VISUAL TEST/Mandiri Compare FAILED.
Reason:
java.lang.NoClassDefFoundError: com/sun/image/codec/jpeg/JPEGCodec
	at org.frontendtest.components.ImageComparison.saveImage(ImageComparison.java:160)
	at org.frontendtest.components.ImageComparison.fuzzyEqual(ImageComparison.java:76)
	at org.frontendtest.components.ImageComparison.fuzzyEqual(ImageComparison.java:23)
	at org.frontendtest.components.ImageComparison$fuzzyEqual.call(Unknown Source)
	at Mandiri Compare.run(Mandiri Compare:58)
	at com.kms.katalon.core.main.ScriptEngine.run(ScriptEngine.java:194)
	at com.kms.katalon.core.main.ScriptEngine.runScriptAsRawText(ScriptEngine.java:119)
	at com.kms.katalon.core.main.TestCaseExecutor.runScript(TestCaseExecutor.java:442)
	at com.kms.katalon.core.main.TestCaseExecutor.doExecute(TestCaseExecutor.java:433)
	at com.kms.katalon.core.main.TestCaseExecutor.processExecutionPhase(TestCaseExecutor.java:412)
	at com.kms.katalon.core.main.TestCaseExecutor.accessMainPhase(TestCaseExecutor.java:404)
	at com.kms.katalon.core.main.TestCaseExecutor.execute(TestCaseExecutor.java:281)
	at com.kms.katalon.core.main.TestCaseMain.runTestCase(TestCaseMain.java:138)
	at com.kms.katalon.core.main.TestCaseMain.runTestCase(TestCaseMain.java:129)
	at com.kms.katalon.core.main.TestCaseMain$runTestCase$0.call(Unknown Source)
	at TempTestCase1638511645362.run(TempTestCase1638511645362.groovy:25)
Caused by: java.lang.ClassNotFoundException: com.sun.image.codec.jpeg.JPEGCodec
	... 16 more

```

When I checked on the folder, the file Compared.png is generated properly but the file Different.png is not properly generated:

 ![image](https://europe1.discourse-cdn.com/katalon/original/3X/3/7/37f6599254a93f679957e0ef776f66c8185a9bc7.png)

NOTE: the image comparison (ImageComparison is a jar) refers to this [Selenium Screenshot Comparison in Java | FRET](https://www.frontendtest.org/blog/screenshot-comparison/)

What would be the problem?

---

<div class="post-metadata">

**Author:** ![sugiarto](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/sugiarto/32/18519_2.png) [@sugiarto](https://forum.katalon.com/u/sugiarto)\
**Post date:** [December 3, 2021, 6:41am UTC](https://forum.katalon.com/t/katalon-studio-image-comparison-image-diff-is-not-generated/60556/2 "2021-12-03T06:41:26Z")

</div>

@kazurayam Do you have any idea about my error:  
Sorry I mention you 🙂

```auto
Test Cases/VISUAL TEST/Mandiri Compare FAILED.
Reason:
java.lang.NoClassDefFoundError: com/sun/image/codec/jpeg/JPEGCodec
	at org.frontendtest.components.ImageComparison.saveImage(ImageComparison.java:160)
	at org.frontendtest.components.ImageComparison.fuzzyEqual(ImageComparison.java:76)
	at org.frontendtest.components.ImageComparison.fuzzyEqual(ImageComparison.java:23)
	at org.frontendtest.components.ImageComparison$fuzzyEqual.call(Unknown Source)
	at Mandiri Compare.run(Mandiri Compare:58)
	at com.kms.katalon.core.main.ScriptEngine.run(ScriptEngine.java:194)
	at com.kms.katalon.core.main.ScriptEngine.runScriptAsRawText(ScriptEngine.java:119)
	at com.kms.katalon.core.main.TestCaseExecutor.runScript(TestCaseExecutor.java:442)
	at com.kms.katalon.core.main.TestCaseExecutor.doExecute(TestCaseExecutor.java:433)
	at com.kms.katalon.core.main.TestCaseExecutor.processExecutionPhase(TestCaseExecutor.java:412)
	at com.kms.katalon.core.main.TestCaseExecutor.accessMainPhase(TestCaseExecutor.java:404)
	at com.kms.katalon.core.main.TestCaseExecutor.execute(TestCaseExecutor.java:281)
	at com.kms.katalon.core.main.TestCaseMain.runTestCase(TestCaseMain.java:138)
	at com.kms.katalon.core.main.TestCaseMain.runTestCase(TestCaseMain.java:129)
	at com.kms.katalon.core.main.TestCaseMain$runTestCase$0.call(Unknown Source)
	at TempTestCase1638511645362.run(TempTestCase1638511645362.groovy:25)
Caused by: java.lang.ClassNotFoundException: com.sun.image.codec.jpeg.JPEGCodec
	... 16 more

```

---

<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:** [December 3, 2021, 7:16am UTC](https://forum.katalon.com/t/katalon-studio-image-comparison-image-diff-is-not-generated/60556/3 "2021-12-03T07:16:47Z")

</div>

you have this.

> [@sugiarto](#):
>
> String imgOutputDifferences =  
> ‘C://Users//sugiarto//Screenshots//Different.png’

possibly you need to change this to:

```auto
String imgOutputDifferences = 
    'C://Users//sugiarto//Screenshots//Different.jpg'

```

According to the source code at [https://github.com/tholewebgods/image-comparison/blob/master/src/main/java/org/frontendtest/components/ImageComparison.java](https://github.com/tholewebgods/image-comparison/blob/master/src/main/java/org/frontendtest/components/ImageComparison.java), the output must be in JPEG.

PNG is not supported.

---

<div class="post-metadata">

**Author:** ![sugiarto](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/sugiarto/32/18519_2.png) [@sugiarto](https://forum.katalon.com/u/sugiarto)\
**Post date:** [December 3, 2021, 7:42am UTC](https://forum.katalon.com/t/katalon-studio-image-comparison-image-diff-is-not-generated/60556/4 "2021-12-03T07:42:00Z")

</div>

I have changed to .jpg but still with the same error.  
Let me check the link you provided.

---

<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:** [December 3, 2021, 7:50am UTC](https://forum.katalon.com/t/katalon-studio-image-comparison-image-diff-is-not-generated/60556/5 "2021-12-03T07:50:37Z")

</div>

> [@sugiarto](#):
>
> java.lang.NoClassDefFoundError: com/sun/image/codec/jpeg/JPEGCodec

This message proves that this library [GitHub - tholewebgods/image-comparison: Java based image comparison library](https://github.com/tholewebgods/image-comparison) depends on `com.sun.image.codec.jpeg.`\* class.

According to the information at

> <https://stackoverflow.com/questions/1906673/import-com-sun-image-codec-jpeg/1907060#1907060>

com/sun/image/codec/jpeg/JPEGCodec is only available in the old Sun’s JDK (possibly succeeded by Oracle JDK).

Katalon Studio does not use Sun/Oracle’s JDK. Therefore i suppose you can not use this library in Katalon Studio

* * *

The [frontendtest’s ImageComparison class](https://github.com/tholewebgods/image-comparison/blob/master/src/main/java/org/frontendtest/components/ImageComparison.java) is designed to save the image into JPEG format. You are forced to use JPEG. This is the reason why it is dependent on the com/sun/image/codec/jpeg/JPEGCodec class, and therefore … does not work in Katalon Studio.

Other image comparison tools (such as AShot) does not force you to save the image into JPEG; you can save images in PNG. Therefore you will be be dependent on com/sun/image/codec/jpeg/JPEGCodec class; so your script would work.

---

<div class="post-metadata">

**Author:** ![sugiarto](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/sugiarto/32/18519_2.png) [@sugiarto](https://forum.katalon.com/u/sugiarto)\
**Post date:** [December 3, 2021, 7:51am UTC](https://forum.katalon.com/t/katalon-studio-image-comparison-image-diff-is-not-generated/60556/6 "2021-12-03T07:51:49Z")

</div>

Thank you for the information.  
Very much appreciate 🙂

---

<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:** [December 3, 2021, 8:09am UTC](https://forum.katalon.com/t/katalon-studio-image-comparison-image-diff-is-not-generated/60556/7 "2021-12-03T08:09:44Z")

</div>

If you would like, I think, you can try to work around the Exception.

You can read the source;

> <https://github.com/tholewebgods/image-comparison/blob/master/src/main/java/org/frontendtest/components/ImageComparison.java>

You can see at the Line# 182

```auto
		try {
			ImageIO.write(bi, "jpeg", out);
		} catch (java.io.IOException io) {
			System.out.println("IOException while encoding the image: " + io);
		}

```

If you change this to

```auto
			ImageIO.write(bi, "png", out);

```

it will work in Katalon Studio without the Exception `java.lang.NoClassDefFoundError: com/sun/image/codec/jpeg/JPEGCodec`.

---

<div class="post-metadata">

**Author:** ![sugiarto](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/sugiarto/32/18519_2.png) [@sugiarto](https://forum.katalon.com/u/sugiarto)\
**Post date:** [December 9, 2021, 1:08am UTC](https://forum.katalon.com/t/katalon-studio-image-comparison-image-diff-is-not-generated/60556/8 "2021-12-09T01:08:26Z")

</div>

Hi @kazurayam  
I have resolved the issue by using Ashot and modify a bit of your Test Case here [https://github.com/kazurayam/EntirePageScreenshotByAShotInKatalonStudio/blob/master/Scripts/TC4\_imageDiffer/Script1535956206390.groovy](https://github.com/kazurayam/EntirePageScreenshotByAShotInKatalonStudio/blob/master/Scripts/TC4_imageDiffer/Script1535956206390.groovy)

I created this test case and it works fine:

```auto
import my.AShotWrapper
import my.DevicePixelRatioResolver
import ru.yandex.qatools.ashot.Screenshot
import ru.yandex.qatools.ashot.comparison.ImageDiff
import ru.yandex.qatools.ashot.comparison.ImageDiffer

// resolve file name under the target directory
File resolveScreenshotFile(String fileName) {
	Path projectDir = Paths.get(RunConfiguration.getProjectDir())
	Path reportDir = projectDir.resolve('Screenshots')
	Files.createDirectories(reportDir)
	Path pngFile = reportDir.resolve(fileName)
	return pngFile.toFile()
}

// get diff%
Double diffRatioPercent(ImageDiff diff) {
	boolean hasDiff = diff.hasDiff()
	if (!hasDiff) {
		return 0.0
	}
	int diffSize = diff.getDiffSize()
	int area = diff.getMarkedImage().getWidth() * diff.getMarkedImage().getHeight()
	Double diffRatio = diff.getDiffSize() / area * 100
	return diffRatio
}

// ---------------------------------------------------------------------------------

WebUI.openBrowser('')

WebUI.navigateToUrl('https://bankmandiri.co.id/')

WebUI.maximizeWindow()

WebUI.click(findTestObject('Mandiri/Page_Bank Mandiri - Terdepan, Terpercaya, T_9dcea6/span_Bantuan'))

WebUI.verifyElementPresent(findTestObject('Mandiri/Page_Bantuan/h3_Bantuan FAQ'), 5)

WebUI.click(findTestObject('Mandiri/Page_Bantuan/input_Mandiri Search Portlet__Mandiri_Searc_fe9aca'))

WebUI.setText(findTestObject('Mandiri/Page_Bantuan/input_Mandiri Search Portlet__Mandiri_Searc_fe9aca'), 'KATALON')

WebUI.takeFullPageScreenshot('C://Users//sugiarto//Katalon Studio//SUGIARTO//Screenshots//Compared.jpg')

// make AShot's ImageDiff
BufferedImage expectedImage = ImageIO.read(new File ("C://Users//sugiarto//Katalon Studio//SUGIARTO//Screenshots//Baseline.jpg"))
BufferedImage actualImage = ImageIO.read(new File ("C://Users//sugiarto//Katalon Studio//SUGIARTO//Screenshots//Compared.jpg"))
Screenshot expectedScreenshot = new Screenshot(expectedImage)
Screenshot actualScreenshot = new Screenshot(actualImage)

ImageDiff diff = new ImageDiffer().makeDiff(expectedScreenshot, actualScreenshot)

BufferedImage markedImage = diff.getMarkedImage()

DecimalFormat dformat = new DecimalFormat("##0.00")

// check how much difference found between the original and the mimic.
// if diff% exceed the criteria, then mark the test case FAILED
Double criteriaPercent = 3.0
Double diffRatioPercent = diffRatioPercent(diff)
if (diffRatioPercent > criteriaPercent) {
	KeywordUtil.markFailed("diffRatio=${dformat.format(diffRatioPercent)} exceeds criteria=${criteriaPercent}")
}

// save the diff image into file
File diffFile = resolveScreenshotFile("Different.png")
ImageIO.write(markedImage, "PNG", diffFile)
WebUI.comment(">>> wrote the ImageDiff into ${diffFile.toString()}")

WebUI.closeBrowser()

```

---

<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:** [December 9, 2021, 1:34am UTC](https://forum.katalon.com/t/katalon-studio-image-comparison-image-diff-is-not-generated/60556/9 "2021-12-09T01:34:53Z")

</div>

Let me tell a bit of critics to your code.

1. Absolute file path as string constant causes portability problem

```auto
WebUI.takeFullPageScreenshot('C://Users//sugiarto//Katalon Studio//SUGIARTO//Screenshots//Compared.jpg')

```

You wrote a string literal `C://Users//sugiarto//Katalon Studio//SUGIARTO`. This makes your code un-portable. This code will never run on any PC other than your own. You should always avoid writing absolute file paths for better portability.

How to? You already know it. See

```auto
File resolveScreenshotFile(String fileName) {
	Path projectDir = Paths.get(RunConfiguration.getProjectDir())
	Path reportDir = projectDir.resolve('Screenshots')
	Files.createDirectories(reportDir)

```

Why don’t you use this function as follows:

```auto
WebUI.takeFullPageScreenshot(resolveScreenshotFile('Compared.jpg').toString())

```

1. JPG or PNG, which format do you want?

You named the files with `.jpg` extension.

```auto
BufferedImage expectedImage = ImageIO.read(new File (
    "... Screenshots//Baseline.jpg"))

```

But you actually made a PNG file:

```auto
ImageIO.write(markedImage, "PNG", diffFile)

```

Very confusing, isn’t it?

---

<div class="post-metadata">

**Author:** ![sugiarto](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/sugiarto/32/18519_2.png) [@sugiarto](https://forum.katalon.com/u/sugiarto)\
**Post date:** [December 9, 2021, 1:37am UTC](https://forum.katalon.com/t/katalon-studio-image-comparison-image-diff-is-not-generated/60556/10 "2021-12-09T01:37:55Z")

</div>

Thanks a lot for the critics 🙂  
will tidy up the scripts.

---

<div class="post-metadata">

**Author:** ![sugiarto](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/sugiarto/32/18519_2.png) [@sugiarto](https://forum.katalon.com/u/sugiarto)\
**Post date:** [December 9, 2021, 1:55am UTC](https://forum.katalon.com/t/katalon-studio-image-comparison-image-diff-is-not-generated/60556/11 "2021-12-09T01:55:21Z")

</div>

Tidy it up 🙂

```auto
import my.AShotWrapper
import my.DevicePixelRatioResolver
import ru.yandex.qatools.ashot.Screenshot
import ru.yandex.qatools.ashot.comparison.ImageDiff
import ru.yandex.qatools.ashot.comparison.ImageDiffer

// resolve file name under the target directory
File resolveScreenshotFile(String fileName) {
	Path projectDir = Paths.get(RunConfiguration.getProjectDir())
	Path reportDir = projectDir.resolve('Screenshots')
	Files.createDirectories(reportDir)
	Path pngFile = reportDir.resolve(fileName)
	return pngFile.toFile()
}

// get diff%
Double diffRatioPercent(ImageDiff diff) {
	boolean hasDiff = diff.hasDiff()
	if (!hasDiff) {
		return 0.0
	}
	int diffSize = diff.getDiffSize()
	int area = diff.getMarkedImage().getWidth() * diff.getMarkedImage().getHeight()
	Double diffRatio = diff.getDiffSize() / area * 100
	return diffRatio
}

// ---------------------------------------------------------------------------------

WebUI.openBrowser('')

WebUI.navigateToUrl('https://bankmandiri.co.id/')

WebUI.maximizeWindow()

WebUI.click(findTestObject('Mandiri/Page_Bank Mandiri - Terdepan, Terpercaya, T_9dcea6/span_Bantuan'))

WebUI.verifyElementPresent(findTestObject('Mandiri/Page_Bantuan/h3_Bantuan FAQ'), 5)

WebUI.click(findTestObject('Mandiri/Page_Bantuan/input_Mandiri Search Portlet__Mandiri_Searc_fe9aca'))

WebUI.setText(findTestObject('Mandiri/Page_Bantuan/input_Mandiri Search Portlet__Mandiri_Searc_fe9aca'), 'KATALON')

WebUI.takeFullPageScreenshot(resolveScreenshotFile('Compared.png').toString())

// make AShot's ImageDiff
BufferedImage expectedImage = ImageIO.read(resolveScreenshotFile('Baseline.png'))
BufferedImage actualImage = ImageIO.read(resolveScreenshotFile('Compared.png'))
Screenshot expectedScreenshot = new Screenshot(expectedImage)
Screenshot actualScreenshot = new Screenshot(actualImage)

ImageDiff diff = new ImageDiffer().makeDiff(expectedScreenshot, actualScreenshot)

BufferedImage markedImage = diff.getMarkedImage()

DecimalFormat dformat = new DecimalFormat("##0.00")

// check how much difference found between the original and the mimic.
// if diff% exceed the criteria, then mark the test case FAILED
Double criteriaPercent = 30.0
Double diffRatioPercent = diffRatioPercent(diff)
if (diffRatioPercent > criteriaPercent) {
	KeywordUtil.markFailed("diffRatio=${dformat.format(diffRatioPercent)} exceeds criteria=${criteriaPercent}")
}

// save the diff image into file
File diffFile = resolveScreenshotFile("Different.png")
ImageIO.write(markedImage, "PNG", diffFile)
WebUI.comment(">>> wrote the ImageDiff into ${diffFile.toString()}")

WebUI.closeBrowser()

```

---

<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:** [December 10, 2021, 11:50am UTC](https://forum.katalon.com/t/katalon-studio-image-comparison-image-diff-is-not-generated/60556/12 "2021-12-10T11:50:34Z")

</div>

Closed on December 10, 2021, 11:50am UTC