How to create a better screenshot during the selenium automation in JAVA? - selenium

Question

I am creating automated test cases by using selenium 3 & testng. Everything looks good, except the screenshots that are generated. Here is my piece of code to create screenshots PNG files:
file = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(file, new File(pngfile));
which is pretty standard way to do it, but the quality of the created PNG file is not so good.
As you can see from following PNG file. In the picture, the email value ( "....#yahoo.com"), which should be at the upper-right corner of the web-page and should be as high as the other navigation bar elements on the left side. But in the created PNG file, this item has been squeezed to the lower level, which is not what I am looking for. Any ideas ? Thanks for the help !

Answer 1

Make sure your window is the right size when you're opening the browser. You can do this via visual inspection or using Selenium's getSize method. I assume you're using Java, but here it is in Python as well.
Then, if the window is not of the correct size in order to guarantee that your webpage's CSS doesn't break, use setSize. Here is that method in Python as well.
Afterwards, your screenshot should look like the window does.

Answer 2

Please try this,
public void calltakeScreenShot(String SSName) throws Exception
{
File screen = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
BufferedImage img = ImageIO.read(screen);
File filetest = Paths.get(".").toAbsolutePath().normalize().toFile();
ImageIO.write(img, "png", new File(filetest + "\\Screenshots\\" + SSName + ".png"));
}
Additionally Here you just need to pre-created Screenshots folder in your Project directory. It will store it by getting absolute path of your project. Also you can manage screenshot name by passing argument.

Answer 3

After several day's research, here is my latest summary.
A). If I was executing the scripts, that is not in the "headless" mode. When the selenium test case is being executed, I will see a new browser session is being popped up and get to that URL, click some buttons, etc, ... till the execution is finished. In this execution, the screenshot page will be saved in good quality.
B). For the same selenium test script, if I am including one extra ChromeOptions setting, which is "--headless", I will not see any browser being brought up during the execution. And once execution is finished, I will get the screenshot with such squeezed web elements.
Comments ?