In this article I will compare the two screenshots in Katalon Studio. In Test Cases that we create in Katalon Stduio, sometimes we need to see if there is a difference between the two screenshots. If there are differences between the screenshots, the points that make the difference are also important for the test case. I have defined a special keyword on Katalon Studio that determines if there are differences between the two screenshots and shows the differences between these screenshots. In this article, I will try to explain this keyword and its usage through an example. So let’s start …
I’d like to start with keyword codes first.
The PixelGrabber class is applied to an Image or Image object to get a subset of the pixels in that image.
With the grabPixels () method; Image or Image allows the object to start sending pixels from and wait until all pixels in the corresponding rectangle are sent.
Thanks to this class and method, two visuals are compared. And if there are differences between the two images, the ImageDiffer class is used to determine these differences. These differences are also written to the image with the write method of the ImageIO class.
import static com.kms.katalon.core.checkpoint.CheckpointFactory.findCheckpoint
import static com.kms.katalon.core.testcase.TestCaseFactory.findTestCase
import static com.kms.katalon.core.testdata.TestDataFactory.findTestData
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject
import static com.kms.katalon.core.testobject.ObjectRepository.findWindowsObject
import com.kms.katalon.core.annotation.Keyword
import com.kms.katalon.core.checkpoint.Checkpoint
import com.kms.katalon.core.cucumber.keyword.CucumberBuiltinKeywords as CucumberKW
import com.kms.katalon.core.mobile.keyword.MobileBuiltInKeywords as Mobile
import com.kms.katalon.core.model.FailureHandling
import com.kms.katalon.core.testcase.TestCase
import com.kms.katalon.core.testdata.TestData
import com.kms.katalon.core.testobject.TestObject
import com.kms.katalon.core.webservice.keyword.WSBuiltInKeywords as WS
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import com.kms.katalon.core.windows.keyword.WindowsBuiltinKeywords as Windows
import internal.GlobalVariable
import java.awt.image.BufferedImage
import java.nio.file.Files
import java.nio.file.Path
import java.nio.file.Paths
import java.time.ZonedDateTime
import java.time.format.DateTimeFormatter
import javax.imageio.ImageIO
import org.openqa.selenium.WebDriver
import org.openqa.selenium.WebElement
import com.kms.katalon.core.configuration.RunConfiguration
import com.kms.katalon.core.webui.driver.DriverFactory
import com.kms.katalon.core.webui.common.WebUiCommonHelper
import ru.yandex.qatools.ashot.AShot
import ru.yandex.qatools.ashot.Screenshot
import ru.yandex.qatools.ashot.coordinates.WebDriverCoordsProvider
import ru.yandex.qatools.ashot.shooting.ShootingStrategies
import ru.yandex.qatools.ashot.comparison.ImageDiff
import ru.yandex.qatools.ashot.comparison.ImageDiffer
import java.awt.Image
import java.awt.Toolkit
import java.awt.image.PixelGrabber
import org.openqa.selenium.By;
import com.kms.katalon.core.logging.KeywordLogger
public class test {
@Keyword
def compareImages2 (String test, String test1){
Image image1 = Toolkit.getDefaultToolkit().getImage(test);
Image image2 = Toolkit.getDefaultToolkit().getImage(test1);
PixelGrabber grab1 = new PixelGrabber (image1 , 0 ,0,-1,-1,false);
PixelGrabber grab2 = new PixelGrabber (image2 , 0 ,0,-1,-1,false);
int [] data1 = null ;
if(grab1.grabPixels()) {
int width = grab1.getWidth();
int height = grab1.getHeight();
data1 = new int[width*height];
data1 = (int[]) grab1.getPixels();
}
int [] data2 = null ;
if(grab2.grabPixels()){
int width = grab2.getWidth();
int height = grab2.getHeight();
data2 = new int[width*height];
data2 = (int[]) grab2.getPixels();
}
KeywordLogger logger = new KeywordLogger();
if (java.util.Arrays.equals(data1,data2)==true){
logger.logPassed(‘aynı’)
}
else {
BufferedImage expectedImage3 = ImageIO.read(new File(System.getProperty(“user.dir”) +”\\res\\test1.png”));
BufferedImage expectedImage4 = ImageIO.read(new File(System.getProperty(“user.dir”) +”\\res\\test2.png”));
ImageDiffer imgDiff = new ImageDiffer();
ImageDiff diff = imgDiff.makeDiff(expectedImage4, expectedImage3);
BufferedImage diffImage = diff.getDiffImage();
ImageIO.write(diff.getMarkedImage(),”PNG”, new File(System.getProperty(“user.dir”)+”\\res\\Difference(test1_test2.png”));
System.out.println(“\n diffImage= “+diffImage.getColorModel());
logger.logFailed(‘farklı’)
}
}
}
For the test, first open the page at https://katalon-demo-cura.herokuapp.com/ and take a screenshot and save it to the local. Then the same process is applied at http://demoaut-mimic.kazurayam.com/. Webuı.takescreenshot up in order to provide a link to this page with location area code ( ‘ImagePath’) of the image read in step ImageIO method given in the description of the path must be the same path information.
I encode for the Test Case are listed below:
WebUI.openBrowser(”)
WebUI.navigateToUrl(‘https://katalon-demo-cura.herokuapp.com/’)
WebUI.maximizeWindow()
String img1 = WebUI.takeScreenshot(‘C:\\Users\\Katalon Studio\\Example \\res\\test1.png’)
WebUI.navigateToUrl(‘http://demoaut-mimic.kazurayam.com/’)
String img1 = WebUI.takeScreenshot(‘C:\\Users\\Katalon Studio\\Example \\res\\test2.png’)
CustomKeywords.’test.compareImages2′(img1, img2)
https://katalon-demo-cura.herokuapp.com/ url for screenshot:
http://demoaut-mimic.kazurayam.com/ url for screenshot :
The visual representation of the differences between these two images by the custom keyword created in Katalon Studio is as follows:
I hope it has been a useful post.