Selenide and Firefox record faulty screenshot

Question

I'm using Selenide and Phantomjs to test a Webapplication. Im taking the Screenshot as follows:

byte[] bytes = ((TakesScreenshot)webDriver).getScreenshotAs(OutputType.BYTES);
ByteArrayInputStream bis = new ByteArrayInputStream(bytes);
returnImage = ImageIO.read(bis);

For input Elements, however, the screenshot looks like this:faulty screenshot

It actually looks like this (when using chrome/firefox) how it's supposed to look

The interesting thing is, that when I set Selenide to use phantomjs (Configuration.Browser = "phantomjs") it takes the screenshots correctly. It only occurs on that kind of element, too. Buttons etc are being recorded fine. Any ideas?

PS: The screenshots attached to this post are cropped, the code here takes screenshots of the entire page. In my code, I crop the screenshot only to the desired element but even on the screenshot displaying the entire screen the element is not recorded correctly.

Answer 1

You can take screenshot a element using below code:-

WebElement ele = driver.findElement(By.id("hplogo"));

// Get entire page screenshot
File screenshot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
BufferedImage  fullImg = ImageIO.read(screenshot);

// Get the location of element on the page
Point point = ele.getLocation();

// Get width and height of the element
int eleWidth = ele.getSize().getWidth();
int eleHeight = ele.getSize().getHeight();

// Crop the entire page screenshot to get only element screenshot
BufferedImage eleScreenshot= fullImg.getSubimage(point.getX(), point.getY(),
    eleWidth, eleHeight);
ImageIO.write(eleScreenshot, "png", screenshot);

// Copy the element screenshot to disk
File screenshotLocation = new File("C:\\images\\GoogleLogo_screenshot.png");
FileUtils.copyFile(screenshot, screenshotLocation);

Now in above code you are getting the getWidth() and getHeight(). You can try to adjust it by adding or subtracting the value.