Some questions regarding Visual Testing with Katalon

Scenario
I have a Web Page where it has 7 components/elements and i want to capture 1 element/component as my baseline image.

  • Want to capture rest of the 6 elements individually with the same Baseline name and want to compare those 6 elements individually against the 1st baseline element captured.
    Is this possible with katalon

Solution tried-I capture the first element on the page and wrote a for loop to capture the rest if the elements with the baseline image .as per the logic each time it ran it replaced and only the last element screenshot was captured using the takeElementScreenshotAsCheckpoint.

1 Like

Hi,

I have never tried this but it will be very beneficial if you can provide some of your code.

So here i am writing a code to capture my first element and i comment it out .
Than write a for loop with a

  • Print statement to print all the element names in the inventory
  • And with the same checkpoint name as of the baseline to capture all the rest of the elements using the for loop so when i do this logically each time it runs it overrides the existing element since the baseline name is same .I just wanted a suggestion if there is any alternative way that could be done.
1 Like

To capture the first element to be used as a baseline.

//WebUI.takeElementScreenshotAsCheckpoint('SauceLabInventory_component', findTestObject('Object Repository/sauceLabPageComponentsObjects/SauceLabBackpack_sauceLabPageComponent'), null)
The for loop written to capture all the rest of the element (inventory items)on the saucelab site
for(int i=1;i<=sauceLabPageComponentsLinks.size();i++) {
//println WebUI.findWebElement(findTestObject('Object Repository/sauceLabPageComponentsObjects/sauceLabPageComponentsDynamic',['index':i]), 30).getText()
WebUI.takeElementScreenshotAsCheckpoint('SauceLabInventory_component',
findTestObject('ObjectRepository/sauceLabPageComponentsObjects/sauceLabPageComponentsDynamic',['index':i]), null)
}

See the following old post in 2018:

Comparing Screenshots of а WebElement

I found that the old post in 2018 is not relevant to the original post.

1 Like

I have made a project and published it on GitHub to propose a solution.


This projects demostrates how to use the AShot library.

You need to download the jar of AShot and save it into the Drivers folder of your Katalon project.

The Test Case TC1 does the following stuff.

  1. open a URL page 1 and take screenshot of the <img> element in it, save it into a file. The PNG will look like this:

page1

  1. open another URL page 4 and take screenshot of the <img> element in it, save it into a file. The PNG will look like this:

page4

  1. Use the AShot library to compare the 2 PNG files, generate a “diff image”, write it into “out/diff.png”. The “diff image” will look like this:

diff

  1. The Test Case will fail because the 2 images are significantly different.

The TC1 demonstrates how to use the AShot to compare 2 HTML elements visually. Please read the source code for more detail. Taking the code of TC1 as the starting point, you should be able to develop tests that meet your complex conditions you want.


@saranya.jayaram

I don’t know the Visual Testing feature of Katalon Studio at all. I have no idea if it can meet your requirement or not.

TC1 is like this:

import java.awt.Color
import java.awt.image.BufferedImage
import java.nio.file.Files
import java.nio.file.Path
import java.nio.file.Paths

import javax.imageio.ImageIO

import org.apache.commons.io.FileUtils

import com.kms.katalon.core.configuration.RunConfiguration
import com.kms.katalon.core.testobject.ConditionType
import com.kms.katalon.core.testobject.TestObject
import com.kms.katalon.core.util.KeywordUtil
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI

import ru.yandex.qatools.ashot.comparison.ImageDiff
import ru.yandex.qatools.ashot.comparison.ImageDiffer
import ru.yandex.qatools.ashot.comparison.ImageMarkupPolicy;

// if the difference of 2 images are greater than the criteria, then this test will fail.
// if the difference is smaller than the criteria, then this test will warn you but will not fail.
double criteriaPercent = 10.0

// the directory to write image files into
Path outDir = Paths.get(RunConfiguration.getProjectDir()).resolve("out");
if (Files.exists(outDir)) {
	FileUtils.deleteDirectory(outDir.toFile())
}
Files.createDirectories(outDir)

Path diff = outDir.resolve("diff.png")
Path img1 = outDir.resolve("img1.png")
Path img4 = outDir.resolve("img4.png")

// Shall we start?
WebUI.openBrowser('')
WebUI.setViewPortSize(800, 600)

// visit a URL 
WebUI.navigateToUrl("https://kazurayam.github.io/myApple/page1.html")
// take screenshot of an HTML element, write the PNG image into a file
WebUI.takeElementScreenshot(img1.toString(), makeTestObject("img1", "//img[@id='apple']"))

// visit another URL
WebUI.navigateToUrl("https://kazurayam.github.io/myApple/page4.html")
// take screenshot of an HTML element, write the PNG image into a file
WebUI.takeElementScreenshot(img4.toString(), makeTestObject("img4", "//img[@id='apple']"))

// compare 2 PNG imgages to make a diff image, write the image into a file
ImageDiff imageDiff = makeDiff(img1, img4, diff)

// check the comparison result and report it
if (imageDiff.hasDiff()) {
	double diffRatio = calculateDiffRatioPercent(imageDiff)
	String diffRatioStr = String.format("%.2f", diffRatio)
	String msg = "The two images are different, the magnitue of difference is ${diffRatioStr}%"
	if (0 <= diffRatio && diffRatio < criteriaPercent) {
		KeywordUtil.markWarning(msg)
	} else if (criteriaPercent <= diffRatio && diffRatio <= 100.0) {
		KeywordUtil.markFailed(msg)
	} else {
		KeywordUtil.markErrorAndStop(msg)
	}
}

// done
WebUI.closeBrowser()


/*
 * create a TestObject
 */
TestObject makeTestObject(String id, String xpath) {
	TestObject tObj = new TestObject(id)
	tObj.addProperty("xpath", ConditionType.EQUALS, xpath)
	return tObj
}

/*
 * drive the AShot library to compare 2 image files to compare them 
 * and make a diff image. will write the diff into the out file
 */
ImageDiff makeDiff(Path png1, Path png2, Path out) {
	BufferedImage bi1 = ImageIO.read(png1.toFile())
	BufferedImage bi2 = ImageIO.read(png2.toFile())
	ImageDiffer differ =
			new ImageDiffer()
			.withDiffMarkupPolicy(new ImageMarkupPolicy().withDiffColor(Color.GRAY))
	ImageDiff diff = differ.makeDiff(bi1, bi2);
	ImageIO.write(diff.getMarkedImage(), "png", out.toFile())
	return diff;
}

/*
 * Calculate the ratio of the different area against the whole page area in percentage
 *
 * e.g. 41.983224 -> 2 input images are different for 41% of pixels
 */
Double calculateDiffRatioPercent(ImageDiff diff) {
	boolean hasDiff = diff.hasDiff();
	if (!hasDiff) {
		return 0.0;
	}
	int diffSize = diff.getDiffSize();
	int area = diff.getMarkedImage().getWidth() * diff.getMarkedImage().getHeight();
	return diffSize * 1.0D / area * 100;
}