Taking entire page screenshot using AShot in Katalon Studio


#1

I have made a demo project here:

------

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 tried WebUI.takescreenshot() and 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.

Here I attached the screenshot taken by AShot:


How to modify report’s File Name, How to take entire page screenshot, Mouse Over is not working
[WebUI] Take Screenshot
#2

cool +1


#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


#4

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


#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?


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


#10

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)


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

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


#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?


#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

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.


Visual Testing in Katalon Studio
#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)


#16

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,


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


#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


#20

It is a well-known pitfall recently made.

See the release note of v6.1.5.


#21

@kazurayam

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