< All Topics

Full page screenshot for pages with sticky header

Sticky headers usually create issues with full page screenshots as they appear multiple times in the screenshot. A small trick before taking the screenshot can fix this issue.

Identify the sticky element in DOM and change its position attribute from ‘sticky‘ to ‘relative

((JavascriptExecutor) driver).executeScript(“document.getElementsByClassName(\”navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar\”)[0].style.position=’relative’;”);

import java.io.ByteArrayOutputStream;
import java.io.IOException;
import org.apache.commons.codec.binary.Base64;
import org.json.simple.JSONObject;
import io.restassured.RestAssured;
import io.restassured.response.Response;
import io.restassured.specification.RequestSpecification;
import javax.imageio.ImageIO;

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import ru.yandex.qatools.ashot.AShot;
import ru.yandex.qatools.ashot.Screenshot;
import ru.yandex.qatools.ashot.shooting.ShootingStrategies;


public class fullpageAshot {

	static WebDriver driver;

	public static void main(String args[]) throws Exception
	{
		//Using selenium Launch browser and navigate to URL
		System.setProperty("webdriver.chrome.driver", "C:\\Users\\..\\Desktop\\selenium\\chromedriver.exe");
		driver = new ChromeDriver();
		driver.manage().window().maximize();
		driver.get("https://getbootstrap.com/docs/4.0/utilities/position/");
				
		// change the position from sticky to relative to remove stickiness
		((JavascriptExecutor) driver).executeScript("document.getElementsByClassName(\"navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar\")[0].style.position='relative';");
				
		
		//Get full page screenshot using Ashot and generate base64 image
		Screenshot screenshot = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(1000)).takeScreenshot(driver);
		ByteArrayOutputStream out = new  ByteArrayOutputStream(); 
		ImageIO.write(screenshot.getImage(),"PNG", out);
		byte[] bytes = out.toByteArray();
		String imagebase64 = Base64.encodeBase64String(bytes);		
		
		
		//Get unique TestID for a specific project using Project key and Test name
		String uid = getUID("Sticky Test", "fca709ea-d527-4f30-abc2-fa7e2af8afaf");
		
		//Send a Validate Request using the Unique TestID, Step name & Base64 Image 
		postRequest("Step 1",uid,imagebase64);
		//driver.quit();
		
	}
	
	
	
	//Get unique Test ID for a specific project using Rest Assured 
	public static String getUID(String testName, String projectKey) {
		try {
			RequestSpecification request = RestAssured.given();
			request.header("content-type", "application/json");
			JSONObject json = new JSONObject();
			json.put("TestName", testName);
			json.put("ProjectKey", projectKey);
			request.body(json.toJSONString());
			Response response = request.when().post("http://192.168.20.13:90/api/GetUID");
			int code = response.getStatusCode();
			String response_id = response.getBody().asString();
			System.out.println("TestID: " + response_id);
			return response_id;
		} catch (Exception ex) {
			return ex.toString();
		}
	}

	//Post a request using
	public static void postRequest(String stepName, String uid, String imagebase64) throws IOException {
		RequestSpecification request1 = RestAssured.given();
		request1.header("content-type", "application/json");
		JSONObject jo = new JSONObject();
		jo.put("TestRunID", uid.replace("\"", ""));
		jo.put("StepName", stepName);
		jo.put("ImageBase64", imagebase64);
		System.out.println("imagebase64:" + imagebase64);
		request1.body(jo.toJSONString());
		Response response1 = request1.when().post("http://192.168.20.13:90/api/Validate");
		String response_id1 = response1.getBody().asString();
		System.out.println("Response: " + response_id1);
	}


}

Previous 2. Full Page Screenshot | Java & Selenium
Next 4. Multipage validations | Java & Selenium
Table of Contents