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

I have made a demo project here:

------
(Updated 24 JUNE 2021)

Problem to solve

I wanted to take an screenshot of a Web page. The target page was supposed to have the height over 10,000px.

I wanted to take screenshots of a web page in the Development environment and the Production Environment, and compare to see how much different they are. If a significant difference is found exceeding a certain criteria (e.g, diff > 3.0%), then I want my test to fail to notify developers of unexpected change found.

I tried Katalon’s built-in WebUI.takescreenshot() . I found, it can only take visual portion; it can not take the image of entire page.

Solution

By searching I found a Java Library called AShot.

WebDriver Screenshot utility

  1. Takes a screenshot of a WebElement on different platforms (i.e. desktop browsers, iOS Simulator Mobile Safari, Android Emulator Browser)
  2. Decorates screenshots
  3. Provides flexible screenshot comparison

I was impressed with the simplicity of the sample code of capturing the entire page by AShot. So I tried AShot in Katalon Studio.

I have found AShot works like a charm.

Demos

  1. clone this git repository onto your PC
  2. The jar of AShot is avaiblable at the Maven Repository. ashot-1.5.4.jar file is already included in the project’s Drivers folder.
  3. run Test Cases. The output PNG images will be written into Screenshots directory.

Demo1: Katalon Studio built-in feature: taking screenshot when test failed

Execute [Test Suites/TS1_screenshot_taken_when_failed] . It will call Test Cases/TC1_ks-built-in_screenshot_taken. This TestCase will fail intentionally. As this project is configured to take screenshot when execution failed (Project > Settings > Execution), Katalon Studio will automatically take a screenshot and save an image into the Reports folder. The HTML reports will show the image included.

Demo2: Katalon Studio built-in feature: taking a screenshot of viewport

Execute Test Cases/TC2_viewport_screenshot . This demonstrates how to use the WebUI.takeScreenshot() keyword which is a built-in Katalon Studio. This keyword takes an image of the viewport, not entire page.

Demo3: saving entire page image

Execute ‘Test Cases/TC3_save_entire_page_image’. This demonstrates how to take entire page screenshot and save image into file. This uses a custom keyword: ‘my.AShotWrapper’, which is a thin wrapper of AShot. Another custom keyword ‘my.DevicePixelRatioResolver’ is used to detect Device-Pixel-Ratio of the current platform.

A sample output -> Screenshots/TC3_save_entire_page_image.png

Demo4: comparing two images and measure how much different

Execute 'Test Cases/TC4_imageDiffer. This takes screenshots of a pair of URLs (almost similar but are different) to save them into files:

This compares 2 images and measure how much these are different. The difference is calculated to a figure. When the difference larger than the given criteria (e.g, 3.0 %), the test fails.

Sample output:

screenshot of the Original

oritinal

screenshot of the Mimic

mimic

image diff

diff

DemoX: taking entire screenshot of an extremely tall page

Here is an example web page, which has extremely large “height”.

7 Likes

cool +1

1 Like

This is great. I tested it on a PC browser and it seems to work 90% of the time (the seams between the pictures were sometimes a bit off but its great.
I tried it on a phone browser and all it seems able to do is take a zoomed in screenshot. I only see the top left hand corner of the browser. Any idea what is happening?

Thanks

1 Like

I have no idea.
I think aShot has nothing to do with browser zooming.

1 Like

I think AShot takes screenshot of a single web element. I use it to screenshot only the pop-up error messages from my app, but if you set it up for taking a screenshot of the element, it will get the whole page.

Stephen_Watson,

aShot supports 2 distinct method signatures:

  1. public Screenshot takeScreenshot(WebDriver driver, WebElement element) — taking a screenshot of a specific HTML element
  2. public Screenshot takeScreenshot(WebDriver driver) — taking entire page screenshot

Which method are you calling?

1 Like

Thanks for your reply.

It doesn’t actually zoom the browser in, the browser on the phone stays the same, it just takes a picture of the top left corner of the browser, so that’s all you see in the picture. It just makes it look like it has been zoomed.
I’ll keep search

Hi, can i view the screenshot in the report generated by TestSuites? how?

I can’t understand your question.

1 Like

Hi Kazurayam,

Do you know why my screenshot of this web page are not responsible. attached my code and screenshot
praetemptatus.agilehealthinsurance.com

WebUI.setViewPortSize(375, 667)
WebDriver driver = DriverFactory.getWebDriver()
// take screenshot of entire web page
void takeEntirePage(WebDriver webDriver, File file, Integer timeout = 300) {
Screenshot screenshot = new AShot().
coordsProvider(new WebDriverCoordsProvider()).
shootingStrategy(ShootingStrategies.viewportPasting(timeout)).
takeScreenshot(webDriver)
ImageIO.write(screenshot.getImage(), “PNG”, file)
}
String fileName = (GlobalVariable.i)+’.png’
Path pngFile = Paths.get(GlobalVariable.screenPath).resolve(fileName)
takeEntirePage(driver, pngFile.toFile(), 500)

1 Like

I like it too.

Denis_Yu,

You showed the URL of your AUT, thank you, I can try myself.

This is my code is here.

import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject

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

import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI

WebUI.openBrowser('')

WebUI.setViewPortSize(375, 667)

WebUI.navigateToUrl('https://praetemptatus.agilehealthinsurance.com/')

//WebUI.click(findTestObject('Object Repository/Page_Find Health Insurance for 2019/div_Cut your Health Insurance'))

WebUI.delay(3)

Files.createDirectories(Paths.get('tmp'))

WebUI.takeScreenshot('tmp/screenshot.png')

WebUI.closeBrowser()

I got the following screenshot.

I think, your AUT is responsible enough.

What’s wrong with your code? I do not see. You cut off some lines of your script, for example yo omitted import statements. So I can not reproduce your problem myself. Unless you showed your entire code and let me reproduce your problem on my machine, I can say nothing firmly

1 Like

Recently I moved from Windows 7 PC to Windows 10 PC, and I got surprised that the screenshots taken by aShot look different. On Windows 7 PC, I could get entire-page image. But on Windows 10 PC, the image looks — how can I describe it — different; zoomed, cropped.

@Denis_Yu

Do you have any insight on this issue?

1 Like

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