Taking Screenshot coordination issues | Selenium Forum
Ashik Das Posted on 21/03/2021

Hi Ashish,

I was practicing the lesson on how to take a screenshot for a specific element from a webpage. I was able to capture the screenshot from this particular Xpath, however, it's not taking the image correctly, each time it will miss some part of the required image. I think between the JVM and Webdriver, there might be an issue with coordinating the image (height and width values) and not cropping the image accordingly. I have attached the code below. Could you please take a look at my code and advice me?

Thank you,



package RadioButtons_TakingPageScreenshots;

import java.awt.Image;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import org.apache.commons.io.FileUtils;
import org.openqa.selenium.By;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.Point;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.interactions.internal.Coordinates;
import org.testng.annotations.Test;
import Base.TestBase;

public class TakingScreenShots extends TestBase {

public void TakingScreenshots() throws IOException {

TakeScreenShots("D:\\Selenium Training\\PracticeWorkspace\\SeleniumWebDriverCommends\\Reports\\screenshots\\Test.jpg");

//take only the specific screenshot from the webpage
boolean isXpathDisplay = driver.findElement(By.xpath("//*[@id=\"stream_item_title_5\"]/a/u")).isDisplayed();
WebElement onlyTakeScreenshotFrom = driver.findElement(By.xpath("//*[@id=\"Header\"]"));
SpecificElmentScreenShots(onlyTakeScreenshotFrom,"D:\\Selenium Training\\PracticeWorkspace\\SeleniumWebDriverCommends\\Reports\\screenshots\\OnlyElement.jpg");


public void TakeScreenShots(String filePath) {

//casting driver to Takescreenshot interface and telling system to take this to file type in byte(java)
File file = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);

//copy file to specific path
try {
FileUtils.copyFile(file, new File(filePath));
} catch (IOException e) {
// TODO Auto-generated catch block


public void SpecificElmentScreenShots(WebElement element, String filePath3) {

//now we will get the full page screenshots

File screenshot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);

BufferedImage fullImage; //Java BufferedImage class is a subclass of Image class, store graphical image in memory, It is used to handle and manipulate the image data.

try {
//reading the capature image
fullImage = ImageIO.read(screenshot);

//now we get the coordination of a specific element from the capture image
Point pointToElement = element.getLocation();

//get the width and length of the specific element
int elementWidth = element.getSize().getWidth();
int elementHeight = element.getSize().getHeight();

//Now we will crop the entire page of the screenshot to a specific element image we need
BufferedImage elementScreenshot= fullImage.getSubimage(pointToElement.getX(), pointToElement.getY(), elementWidth, elementHeight);

//Now write the image with following format
ImageIO.write(elementScreenshot, "png" , screenshot);

//copy the element screenshot to disk
File screenshotLocation = new File(filePath3);
FileUtils.copyFile(screenshot, screenshotLocation);

} catch (IOException e) {
// TODO Auto-generated catch block



Ashish Thakur Replied on 23/03/2021

Ok.. In this case if there is some outer div in which element is present then take screenshot of that div

Ashik Das Replied on 24/03/2021

Hi Ashish,

I took the screenshot of the most outer div but it still seems to have an issue with the cropping, please see the below image for more info. Thank you.





Responsive image

Ashik Das Replied on 10/04/2021

Hi Ashish,

Any solution to this issue above? Thank you. 

Ashish Thakur Replied on 13/04/2021

Please makde sure that browser is maximized

Ashik Das Replied on 14/04/2021

Hi Ashish, 

Please see the below screenshots. Browser is maximizing  as soon as the page loads yahoo.com. Also, I'm taking two screenshots. First one taking the full page, which is working but if I focuse on a particular area or element from the page, then it doesn't work(it only takes partial of the page as shown below). 





Responsive image

Responsive image

Related Posts