Using aShot for Screenshot, image is cropped

Hi all, I am using aShot to take my webpage screenshot. My webpage is cropped into 2 images, instead of a whole page.

Below is my code:
WebDriver driver = DriverFactory.getWebDriver()

In test case:
CustomKeywords.‘conditionChecking.ValidationChecking.takeScreenshotwithVariable’(‘Invalid’, filepath,driver, ‘Cards - Card Profile Management - Add - Invalid Email’,data.internallyGetValue(‘Email’, count1) )

Keyword:
@Keyword
def takeScreenshotwithVariable(String message, Path filepath, WebDriver driver, String filename, def variable){

	if(WebUI.verifyTextPresent(message, false, FailureHandling.OPTIONAL)){

		Screenshot screenshot = new AShot().
		coordsProvider(new WebDriverCoordsProvider()).
		shootingStrategy(ShootingStrategies.viewportPasting(100)).
		takeScreenshot(driver)
		
		Path filepath2 =filepath.resolve(filename+' for '+variable+'.png')
		ImageIO.write(screenshot.getImage(), "PNG", filepath2.toFile())
	}else if(WebUI.verifyAlertPresent(1, FailureHandling.CONTINUE_ON_FAILURE)){

		WebUI.acceptAlert()
		Screenshot screenshot = new AShot().
		coordsProvider(new WebDriverCoordsProvider()).
		shootingStrategy(ShootingStrategies.viewportPasting(100)).
		takeScreenshot(driver)
		
		Path filepath2 =filepath.resolve(filename+' for '+variable+' Pop Up.png')
		ImageIO.write(screenshot.getImage(), "PNG", filepath2.toFile())

	}else{
		Screenshot screenshot = new AShot().
		coordsProvider(new WebDriverCoordsProvider()).
		shootingStrategy(ShootingStrategies.viewportPasting(100)).
		takeScreenshot(driver)
		
		Path filepath2 =filepath.resolve(filename+' for '+variable+' No Validation.png')
		ImageIO.write(screenshot.getImage(), "PNG", filepath2.toFile())

	}
}

I also tried with Screenshot screenshot = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(100))
.takeScreenshot(driver);
but it is not working too.

No error is prompt during execution.

Hoping for replies soon.

I suppose your target page has “fixed/sticky Header”

What is a sticky Header? — see https://www.w3schools.com/howto/howto_js_sticky_header.asp.

I think aShot is working properly. aShot takes multiple screenshots of viewport while scrolling the viewport downward over the logical view of the page. When reached to the bottom, aShot appends image pieces to create an images as “entire page image”.

Please find the orange-outlined portion in the attached screenshot. The “fixed/sticky Header” is intruding into the 2nd and following screenshots of the viewport. Therefore the final image contains the Header captured multiple times.

aShot knows nothing about your intrusive sticky header. aShot is not capable of getting rid of it.


How to workaround?

You should try WebUI.setViewportSize(width, hight) to give enough height to the viewport so that the viewport shows the entire page in one shot. For example, try

WebUI.setViewportSize(1024, 2000)

and ather this, call aShot.

Hi @kazurayam

Thanks for your reply :slight_smile: I finally did it by zooming in and out. WebUI.setViewportSize(width, hight) seems like is not working for me.

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

@Keyword
void ZoomIn(){
	Robot robot = new Robot();
	for (int i = 0; i < 4; i++) {

			robot.keyPress(KeyEvent.VK_CONTROL);
			robot.keyPress(KeyEvent.VK_SUBTRACT);
			robot.keyRelease(KeyEvent.VK_SUBTRACT);
			robot.keyRelease(KeyEvent.VK_CONTROL);
			
		}
}



@Keyword
void ZoomOut(){
	for (int i = 0; i < 4; i++) {
		Robot robot = new Robot();
		robot.keyPress(KeyEvent.VK_CONTROL);
		robot.keyPress(KeyEvent.VK_ADD);
		robot.keyRelease(KeyEvent.VK_ADD);
		robot.keyRelease(KeyEvent.VK_CONTROL);
}
}

I zoomed out when taking screenshot, then zoom back in after saving the screenshot.

Thanks and have a nice day~

1 Like