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

Product Forums Katalon Studio
,
1

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”.

tall page

8 Likes
2

cool +1

1 Like
3

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
4

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

1 Like
5

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.

6

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
7

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

8

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

9

I can’t understand your question.

1 Like
10

Hi Kazurayam,

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

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)

0
0375×8594 447 KB

1 Like
11

I like it too.

12

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.

screenshot
screenshot375×593 105 KB

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
13

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
14

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

top_200percent
top_200percent1089×3382 915 KB

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

top_100percent
top_100percent1088×3382 1.83 MB

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
15

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
16

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

image
image1025×641 170 KB

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

1 Like
18

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
19

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
20

It is a well-known pitfall recently made.

See the release note of v6.1.5.

1 Like
21

@kazurayam

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

1 Like