Take WebElement screenshot in Katalon Studio

Feedback & Reviews Documentation
1
This is a companion discussion topic for the original entry at https://docs.katalon.com/katalon-studio/videos/take_webelement_screenshot.html
2

Would be nice to know where the ashot.jar file can be downloaded.

3

Hi,
I got an error below:
Reason:
groovy.lang.MissingPropertyException: No such property: WebUiCommonHelper for class: screenshot.ScreenShotElement
at screenshot.ScreenShotElement.takeWebElementScreenshot(ScreenShotElement.groovy:32)
at screenshot.ScreenShotElement.invokeMethod(ScreenShotElement.groovy)

4

Please show the full source code of screenshot.ScreenShotElement class. Don’t trim the import statements.

5

HI,

Here is my keyword:

import internal.GlobalVariable
import org.openqa.selenium.WebDriver
import org.openqa.selenium.WebElement
import ru.yandex.qatools.ashot.Screenshot
import ru.yandex.qatools.ashot.AShot

public class ScreenShotElement {

@Keyword
public void takeWebElementScreenshot(TestObject object) {
	WebElement element = WebUiCommonHelper.findWebElement(object, 20)
	WebDriver driver = DriverFactory.getWebDriver();

	Screenshot screenshot = new AShot().takeScreenshot(driver,element);
	ImageIO.write(screenshot.getImage(),"PNG",new File(System.getProperty("user.dir")+"/Screenshot/Screenshot01.png"))
}

}

When I implement this to my Test Case and run it, it failed:

Reason:
groovy.lang.MissingPropertyException: No such property: WebUiCommonHelper for class: screenshot.ScreenShotElement
at screenshot.ScreenShotElement.takeWebElementScreenshot(ScreenShotElement.groovy:33)
at screenshot.ScreenShotElement.invokeMethod(ScreenShotElement.groovy)
at com.kms.katalon.core.main.CustomKeywordDelegatingMetaClass.invokeStaticMethod(CustomKeywordDelegatingMetaClass.java:50)
at Home - Notice Board - Center Information.run(Home - Notice Board - Center Information:34)
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:430)
at com.kms.katalon.core.main.TestCaseExecutor.doExecute(TestCaseExecutor.java:421)
at com.kms.katalon.core.main.TestCaseExecutor.processExecutionPhase(TestCaseExecutor.java:400)
at com.kms.katalon.core.main.TestCaseExecutor.accessMainPhase(TestCaseExecutor.java:392)
at com.kms.katalon.core.main.TestCaseExecutor.execute(TestCaseExecutor.java:273)
at com.kms.katalon.core.main.TestCaseMain.runTestCase(TestCaseMain.java:142)
at com.kms.katalon.core.main.TestCaseMain.runTestCase(TestCaseMain.java:133)
at com.kms.katalon.core.main.TestCaseMain$runTestCase$0.call(Unknown Source)
at TempTestCase1636677142091.run(TempTestCase1636677142091.groovy:25)

6

Hi @kazurayam,
The error has been fixed. I missed the classes:
import javax.imageio.ImageIO
import com.kms.katalon.core.webui.common.WebUiCommonHelper
import com.kms.katalon.core.webui.driver.DriverFactory

I have no idea that CNTRL SHIFT O will import the classes automatically

However, I got a new issue, the image is captured partially.
I supposed to capture image , instead it only captured image

How can i fix this?

Thanks

7

Have a look at my sample code:

// take screenshot of entire page
float dpr = DevicePixelRatioResolver.resolveDPR(driver)
AShotWrapper.saveEntirePageImage(driver, pngFile.toFile(), 500, dpr)

“dpr” means Device Pixel Ratio. Please make search for the meaning of Device Pixcel Ratio. E.g,

ru.yandex.qatools.ashot.AShot class also has a method that takes the Device Pixel Ratio as argument. See this example

The value of device pixel ratio differs per each device. For example, my Mac Book Air with Retina display has DPR=2.0. Some other devices have DPR=3.0, or 1.5.

You should not hard-code the value of DPR. You need to resolve the DPR runtime.

DevicePixelRatioResolver helps finding the value of DPR of your target device runtime.

Katalon Studio’s built-in keyword WebUI.takeElementScreenshot hides DPR, it resolves the DPR value internally, so you do not have to mind how to resolve DPR. You might prefer the built-in keyword to Ashot.

8

Thanks @kazurayam
I do not have any coding or IT background so I need sometimes to get into the document :slight_smile:

9

Then, AShot would be difficult for you.
You had better look at the built-in Katalon Keyword.

10

The thing is I need to do visual comparison using Katalon Studio.
I am very new to UI Automation Test

11

Why not you take the Katalon’s offering: Test Ops, Image Comparison?

12

at this stage, the client still prefer Katalon Studio free edition :slight_smile:

13

My Visual Inspection project shows you how to perform UI tests by image comparison. It works in KS free edition. But it requires seasoned Groovy programming skill. It would be too difficult for non-programmers.

There could be many who do not have sufficient programming skill but want to do UI tests by image comparison, then Katalon Studio Enterprise’s offering is for them. They should pay for it.

1 Like