[WebUI] Take Area Screenshot As Checkpoint


This is a companion discussion topic for the original entry at https://docs.katalon.com/katalon-studio/docs/webui-take-area-screenshot-as-checkpoint.html

i know Take a screenshot of a specific area in the viewport to send to TestOps Vision. The captured image will be saved in ‘.png’ format and stored in the ‘keyes’ folder in the report folder. But is there any way i can Take a screenshot of a specific area in the viewport and out the viewport by scroll.
I need to capture the interior area

I don’t understand your question.

You wrote that you are aware of https://docs.katalon.com/docs/create-tests/keywords/keyword-description-in-katalon-studio/web-ui-keywords/webui-take-area-screenshot. Then what’s the difference between the keyword and what you want? How dows the keyword disappoint you?

I do not see what you mean by “out the viewport by scroll”

please try visual testing from katalon and see if meets your need

Perhaps you want a full-page screenshot at first. The screenshot will have the height exceeding the view port’s height. Then you want to cut a rectangle out of the full-page screenshot. The resulting PNG will be what you want.

There is no builtin keyword that satisfies you. So you would want to invent a custom keyword for yourself.

You can read the source code of 2 builtin keywords.

Your would want to combine the idea of these 2 keywords.
You can learn the these source codes.
You should be able to develop your custom solution for yourself.

However, I do not think your idea (taking a rectangle out of a full page screenshot) is practical.

Why do I think so?

How will you specify the rectangle? How can you find the appropriate set of values of x-y position, width and height of the rectangle? Practically, I think, it is impossible.

I am saying that WebUI.takeAreaScreenshot() keyword is not pragmatic; it’s imposible to utilize effectively.

I guess, nobody uses the takeAreaScreenshot keyword.

out the viewport by scroll
ViewPortSize(1440X900)
Take a screenshot WebUI.takeAreaScreenshotAsCheckpoint(‘CheckLogin’, new Rectangle(0, 0, 1100, 1024))
When I take a screenshot, the system says Caused by: java.lang.IllegalArgumentException: Captured area is larger than actual viewport. i want to ask is there any way i can capture area is larger than the actual viewport

You want to take a full-page screenshot first, then take an rectangle out of the full-page screenshot. There is no built-in facility as such. You need to invent your own custom solution.

1 Like

I suppose that WebUI.takeElementScreenshot keyword works better to take a screenshot that includes a set of HTML elements provided the page has some container HTML element.

Let me show you an example:

This page has a <div class="row"> element which contains several data items: Facility, Apply for …, Healthcare Program, Visit Date. And the container element contains more elements out of the view port: a Comment field and a “Book Appointment” button.

If you take screenshot of the <div class="row"> using the WebUI.takeElementScreenshot keyword, effectively you can take a partial screenshot of the page that contains multiple data elements including the elements out of the current view port. Isn’t it good enough?

This approach depends on the structure of the HTML source of the target HTML. If the page has a favorable container HTML element, then you would be able to take favorable partial screenshot. If the page lacks any container HTML element, then you would find no way to apply WebUI.takeElementScreenshot keyword.

I suppose in most of productional HTML have such container HTML elements that make a semantic group of HTML sub-elements. For example,

has container html elements like

  • <div id="main-outlet">
  • <ul id="navigation-bar">

So why not you take screenshot of the container HTML elements, instead of specifying a Rectangle (with x-y position width and height) to take a particial screenshot image of your web page.

1 Like

I try WebUI.takeElementScreenshot keyword, system says Caused by: com.assertthat.selenium_shutterbug.utils.web.ElementOutsideViewportException: Requested element is outside the viewport.

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.checkpoint.Checkpoint as 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 as FailureHandling
import com.kms.katalon.core.testcase.TestCase as TestCase
import com.kms.katalon.core.testdata.TestData as TestData
import com.kms.katalon.core.testng.keyword.TestNGBuiltinKeywords as TestNGKW
import com.kms.katalon.core.testobject.TestObject as 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 as GlobalVariable
import org.openqa.selenium.Keys as Keys

WebUI.openBrowser(‘’)

WebUI.navigateToUrl(‘https://forum.katalon.com/’)

WebUI.maximizeWindow()

WebUI.scrollToElement(findTestObject(‘Page_Katalon Community - Katalons Official Discussion Forum/div_demo’), 3)

WebUI.delay(3)

WebUI.takeElementScreenshot(findTestObject(‘Page_Katalon Community - Katalons Official Discussion Forum/div_demo’))

Ah, sorry. I lied.

I expected this would be true, but actually I did not tested this. I was wrong.

@huyen.le

You want to take a screenshot of a part of web page that spans out of the initial view port. I understand
your requirement. It is just valid. I would require the same.

Unfortunately Katalon’s takeXXXScreentshot keywords don’t meet your requirement.

@vu.tran

By the way, I have my own solution of taking a screenshot of an HTML element that spans outside the initial viewport. I have made a GitHub repository to present a Katalon project as a demo of my solution.

I downloaded 2 jars from the Maven Central repository and located them in the Drivers folder.

I made a test case script “TC2”

import java.awt.image.BufferedImage

import javax.imageio.ImageIO

import org.openqa.selenium.By
import org.openqa.selenium.WebDriver

import com.kazurayam.ashotwrapper.AShotWrapper
import com.kms.katalon.core.webui.driver.DriverFactory
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI

WebUI.openBrowser('')
WebUI.setViewPortSize(1000,1000)
WebUI.navigateToUrl('https://forum.katalon.com/')

WebDriver driver = DriverFactory.getWebDriver()
String xpath = "//div[@id='list-area']"

float dpr = AShotWrapper.DevicePixelRatioResolver.resolveDPR(driver)
AShotWrapper.Options options = new AShotWrapper.Options.Builder().devicePixelRatio(dpr).build()

BufferedImage image = AShotWrapper.takeElementImage(driver, By.xpath(xpath), options)
assert image != null

File file = new File("./element_screenshot.png")
ImageIO.write(image, "PNG", file)

driver.quit()

When I ran this, a file “element_screenshot.png” was created:

Please note that the ouput image has a height which exceeds the height of the view port.

1 Like

great. will try to checkout

i tried your project. i found it return this error. Can you help me

@huyen.le

Thank you for letting me know of a bug of the AShotWrapper v0.2.1.

I have fixed it. See this for the diff of the code if interested.

Please remove the v0.2.1.jar out of the Drivers folder of your project.

Please download the ashotwrapper-0.2.2.jar from

I modified the TC2 a bit.

import org.openqa.selenium.By
import org.openqa.selenium.WebDriver

import com.kazurayam.ashotwrapper.AShotWrapper
import com.kms.katalon.core.webui.driver.DriverFactory
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI

WebUI.openBrowser('')
WebUI.setViewPortSize(1000,1000)
WebUI.navigateToUrl('https://forum.katalon.com/')

WebDriver driver = DriverFactory.getWebDriver()
String xpath = "//div[@id='list-area']"
float dpr = AShotWrapper.DevicePixelRatioResolver.resolveDPR(driver)
AShotWrapper.Options options = new AShotWrapper.Options.Builder().devicePixelRatio(dpr).build()
File file = new File("./element_screenshot.png")

AShotWrapper.saveElementImage(driver, By.xpath(xpath), options, file)

driver.quit()

assert file.exists()

This uses AShotWrapper.saveElementScreenshot, which helps shortening your Test Case a bit.

This works just the same as the previous TC2 which used AShotWrapper.takeElementScreenshot.

See the javadoc for other methods.

2 Likes