Taking entire page screenshots to measure the image-diff using AShot

Just now I learned a bit about Windows 10’s View display settings.

Windows 10’s View display setting introduced “Scale and layout”. My current setting is as follows (I use a 4K display device).

o33ug

I know very little about auto scaling of view display done by Windows 10, but I guess this feature may affect screenshots taken by application. What do I mean? The PNG file made by aShot on Windows 10 looks scaled out for 200% of the previous one taken on Windows 7.


I tried a case where I will specify 100% 1920x1080pix for Windows 10 View display setting and will take screenshots. I expect the images taken will be the same as the ones on Windows 7.

I tried on Windwos 10, View Display settings=scaling 200%, 3840x2160 and got the following screenshot image, which is bad, different from what I expected

Also I tried Scaling 100%, 1920x1080, I got the following image, which is OK, as I expected.

This experiment revealed a fact that the auto scaling 200% in the view display settings on Windows 10 affects to the screenshot files taken by aShot. Also this experiment showed that changing scaling factor from 200% to 100% (effectively apply no scaling) enable me to workaround the problem.

3 Likes

Thanks, @kazurayam, I’ve spent whole day to struggling with strange aShot screen shots on my Win10 - then I checked your solution and it works! (cuz I was on “125%” in the “Scale and layout” settings)

1 Like

Hi,
I tried with your code to take entire image in web page but I got an issue as in belows screenshot:


Could you please take a look into this and give me a solution
Many thanks,

1 Like

Do you mind a sticky header intruding the full page screenshot ?

The following page suggests some methods to make “sticky header” less annoying.


Once I have ever tried to avoid the sticky header. It was a difficult task; not easy at all. In the end, I gave up the try. I found it is far easier to ignore (not to mind) the intruding headers in the screenshot for the sake of UI testing, than trying to avoid them completely without side-effects in the hope of producing a beautiful image.

1 Like

hi kazurayam thank for share. i want ask some question

1.i try your demo test in your git repository and i found some problem, i try running some test case from your demo project called TC3_whole_page_screenshot,i try running that test case with mozilla firefox->test case successfully running but when i check the reports folder its still empty.can you help me about this one? thank you

1 Like

It is a well-known pitfall recently made.

See the release note of v6.1.5.

1 Like

@kazurayam

Can we able to add this entirepage screenshot to our Katalon HTML report? if so, how

1 Like

I did a workaround.

WebUI.takeScreenshot(RunConfiguration.getReportFolder()+ “\filename.png”)
WebDriver driver = DriverFactory.getWebDriver()
Screenshot screenshot = new AShot().
coordsProvider(new WebDriverCoordsProvider()).
shootingStrategy(ShootingStrategies.viewportPasting(timeout)).
takeScreenshot(driver)
//Just printing
println( RunConfiguration.getReportFolder()+"\filename.png")

	ImageIO.write(screenshot.getImage(), "PNG", new File(RunConfiguration.getReportFolder()+ "\\filename.png"))
1 Like

I do not think it is possible, as Katalon team has not disclosed a way how to customize the report.

1 Like

is it possible to use the ashot plugin with mobile elements? I want to get a small element in my app page and then to be able to extract the color of that element or the pixel in the center of that mobile app element…

Not sure if it will help at all but I wrote a robot method that can be utilized with chrome to take a screenshot of the entire page. I’ve included a sub-method needed as well. Since it’s a robot, it’ll simulate using keystrokes so using this method means you can’t be touching your keyboard while it runs, that’s if you’re running the script on your own terminal.

You’ll need some imports for the robot stuff:

import java.awt.Robot
import java.awt.event.KeyEvent

/**KEYSTROKE
 * A method that combines keyPress and keyRelease to form one keystroke
 * @param Robot bot is the robot that is generated from the top level method
 * @param int keyCode is the key that we want to press and release to simulate typing it a KeyEvent is being passed in and converted to a code
 * */
static void keyStroke(Robot bot, int keyCode){
	bot.keyPress(keyCode)
	bot.keyRelease(keyCode)
	bot.delay(200)
}

/**CAPTURE SCREEN
 * Use robot to open the Google Chrome console and use the capture full screen command
 * NOTE: This can only be used when executing tests with Google Chrome
 * */
@Keyword
void captureScreen(){
	Robot Automatron = new Robot()

	try{

		//open chrome console
		Automatron.keyPress(KeyEvent.VK_CONTROL)
		Automatron.keyPress(KeyEvent.VK_SHIFT)
		keyStroke(Automatron, KeyEvent.VK_J)

		Automatron.delay(1500)

		//open chrome commands
		keyStroke(Automatron, KeyEvent.VK_P)

		Automatron.delay(1500)

		Automatron.keyRelease(KeyEvent.VK_CONTROL)
		Automatron.keyRelease(KeyEvent.VK_SHIFT)

		//capture screenshot
		keyStroke(Automatron, KeyEvent.VK_C)

		keyStroke(Automatron, KeyEvent.VK_A)

		keyStroke(Automatron, KeyEvent.VK_P)

		keyStroke(Automatron, KeyEvent.VK_DOWN)

		keyStroke(Automatron, KeyEvent.VK_DOWN)

		keyStroke(Automatron, KeyEvent.VK_ENTER)

		Automatron.delay(3000)

		//close chrome console
		Automatron.keyPress(KeyEvent.VK_CONTROL)
		Automatron.keyPress(KeyEvent.VK_SHIFT)
		keyStroke(Automatron, KeyEvent.VK_J)

		Automatron.delay(1000)

		Automatron.keyRelease(KeyEvent.VK_CONTROL)
		Automatron.keyRelease(KeyEvent.VK_SHIFT)

	}finally{
		//if something fails then don't keep the ctrl or shift keys held down. That super sucks
		Automatron.keyRelease(KeyEvent.VK_CONTROL)
		Automatron.keyRelease(KeyEvent.VK_SHIFT)
	}
}

No.
Please find out the answer in the AShot’s documentation at

Hi kazurayam,
I can’t capture the full screen on mobile. It only displays 1/3 width of a page
Please see the below attachment


Did you see this issue? Please help me fix this issue

I have never tried capturing Browser on Mobile devices. So I do not have immediate answer to your question.

You should look for advices in the AShot project. For example by googling with keyword “Ashot mobile”, I could find the following thread:

There could be some more …

Many people have reported that the screenshots taken by my sample code shows only 1/2 or 1/3 of the original screen image.

I have found out my fault, and fixed it.

Device-Pixcel-Ratio (DPR for short) matters.

What is DPR? See

DPR tells how many of the screen’s actual pixels should be used to draw a single CSS pixel.
On my MacBook Air with Retina display 13inch (2560x1600), DPR is 2.0f.
On your mobile device, possibly DPR is 3.0f. Therefore the screenshot image you got looks to be 1/3 width of the original.

AShot does supports DPR in its API. In the source code of pazone.ashot.ShootingStrategies, you can find several occurence of dpr literal.

If you use AShot on a device with DPR>1.0f, then you should consider using API specifying the appropriate value of DPR as parameter.

I revised my ksbackyard project to version 0.41.0 where DPR is supported.

com.kazurayam.ksbackyard.ScreenshotDriver takeEntirePageScreenshot() now takes DPR into account:

static BufferedImage takeEntirePageImage(WebDriver webDriver, Options options) {
		...
        float dpr = options.getDevicePixelRatio()
		AShot aShot = new AShot().
				coordsProvider(new WebDriverCoordsProvider()).
				shootingStrategy(
					ShootingStrategies.viewportPasting(ShootingStrategies.scaling(dpr), timeout))

You need to find out the value of Device-Pixel-Ration of your platform runtime. But how? ---- JavaScript on browser can tell it to you. So I added a groovy class com.kazurayam.ksbackyard.DevicePixcelRationResolver, which makes a query to browser via WebDriver, execute a javascript window.devicePixcelRatio, return the dpr value to the caller Groovy.

ksbackyard Test Cases/main/demo_savingEntirePageImage shows a runnable example of taking entire page Screenshot with DPR considered:

// Test Cases/main/demo_savingEntirePageImage

import java.nio.file.Files
import java.nio.file.Path
import java.nio.file.Paths

import org.openqa.selenium.WebDriver

import com.kazurayam.ksbackyard.DevicePixelRatioResolver
import com.kazurayam.ksbackyard.ScreenshotDriver
import com.kazurayam.ksbackyard.ScreenshotDriver.Options
import com.kms.katalon.core.configuration.RunConfiguration
import com.kms.katalon.core.webui.driver.DriverFactory
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI

Path projectDir = Paths.get(RunConfiguration.getProjectDir())
Path outDir = projectDir.resolve("tmp/main")
Files.createDirectories(outDir)

WebUI.openBrowser("")
WebUI.setViewPortSize(400, 640)
WebUI.navigateToUrl("http://demoaut.katalon.com/")
WebDriver driver = DriverFactory.getWebDriver()

File outFile = outDir.resolve("screenshot.png").toFile()
float dpr = DevicePixelRatioResolver.resolveDPR(driver)
Options options = new Options.Builder()
						.timeout(100)
						.devicePixelRatio(dpr)
						.build()

ScreenshotDriver.saveEntirePageImage(driver, outFile, options)

WebUI.delay(1)
WebUI.closeBrowser()

I have updated anotherGitHub project EntirePageScreeshotByAShotInKatalonStudio of mine also so that it uses Device-Pixel-Ratio appropriately.

A plugin jar is published.

2 Groovy classes my.AShotWrapper and my.DevicePixcelResolver are included in the jar. You can easily import the jar and use these classes in your own Katalon Studio project.

Hi @kazurayam,

From the TC4 [https://github.com/kazurayam/EntirePageScreenshotByAShotInKatalonStudio/blob/master/Scripts/TC4_imageDiffer/Script1535956206390.groovy] test case, I assume the image comparison is done in a simultaneous steps. i.e. access URL1 - taking screenshot1 - save - access URL2 - taking screenshot2 - compare image diff

Would you share how to compare screenshot from url to existing stock image, please.

Much appreciated :slight_smile:

Thank you.

The following code shows how I use the AShot’s ru.yandex.qatools.ashot.comparison.ImageDiffer to take a diff object of a pair of image files.

https://github.com/kazurayam/materialstore/blob/main/src/main/groovy/com/kazurayam/materialstore/differ/ImageDifferToPNG.groovy

1 Like

Thanks @kazurayam for the reply :slight_smile:
I still do not know how to incorporate this in the test case :frowning: since I do not know anything about coding.
I’ll ask around with the team in the office.

Then, Katalon’s offering would be your friend

The AShot library and my solutions require you to be a skillful Java/Groovy programmer.

1 Like