Capture full webpage screenshot in selenium that has sticky header

Question

I want to capture a full page screenshot of a webpage that has a sticky header. Say for example https://www.flipkart.com/ site has the sticky header. I am using Ashot and it took the screenshot like the one below. https://www.flipkart.com/

You can see the header is appearing between the image

It would be really helpful if I could find any ideas on how to achieve

Answer 1

Try with shutterbug https://github.com/assertthat/selenium-shutterbug

There is a lot of options that you can use to crop the page.

First solution Try with ignore-parts of the screen like 10px from top. You have to play with the tuneup.

Second solution is to edit CSS of the header element, the idea is to change his position to 'relative' so it will not be on top when scrolling.

This is how I did it. Disable on-top header:

((JavascriptExecutor) driver).executeScript("$('.common-header').css('position', 'relative');");

BufferedImage img = Shutterbug.shootPage(driver, ScrollStrategy.BOTH_DIRECTIONS, 100, true)
                .getImage();

Answer 2

This may help you. Removing or changing the style property of the sticky header using JAVASCRIPT and taking the scrollable screenshot is not suggested as it is considered as standard way of testing and producing screenprint.

One best way is to use the JS and find the full page height viewport height, sticky header height and scroll and take the screenshot. You can use the below code.

public void scrollTheStickyHeaderPage(){
/** This function scrolls and takes screenshot **/
JavascriptExecutor js = (JavascriptExecutor) driver;  
int fullPageHeight = Integer.parseInt(js.executeScript
    ("return document.documentElement.ScrollHeight").toString());
int viewportHeight = Integer.parseInt(js.executeScript("return Math.max
    (document.documentElement.clientHeight, window.innerHeight || 0)").toString());
int headerHeight = Integer.parseInt(js.executeScript("return Math.max
    (document.getElementsByTagName('/**element**/')[0].clientHeight,
    document.getElementsByTagName('/**element**/')[0].offsetHeight,
    document.getElementsByTagName('/**element**/')[0].scrollHeight || 0)").toString());
int numofScrolls = (fullPageHeight/viewportHeight);
/** call your screenshot function **/
 for(int i=1; i<=numofScrolls; i++){
  js.executeScript("window.scrollBy(0,"+(viewportHeight-headerHeight)+")");
  /** call your screenshot function **/  
 }
}

Answer 3

I have solved this issue by adding the below-mentioned CSS code in the inspect editor to the header sticky element. You can see the result on this page https://icrmsoftware.com/project/corporate-business-consulting-business-html-template

margin-top: -200px !important

Answer 4

Use ShutterBug to Take fullpage screenshot

Shutterbug.shootPage(driver,ScrollStrategy.WHOLE_PAGE,500).withName("FullPageScreenshot").save("/Users/machinename/Desktop/Screen2");

Required jars: java-semver-0.7.0.jar , selenium-shutterbug-0.9.3.jar