Can anyone please explain me how do I use Selenium WebDriver to take full page screenshots.
Using Selenium Webdriver For Full Page Screenshots
Original Source - LambdaTest
One of the most performed actions of any webpage tester is taking a screenshot of the webpage. Whenever a tester finds and reports a bug, that bug would not be taken seriously without supporting screenshots or even videos of the issue.
This is equally true no matter the type of testing you are doing and that includes selenium automation testing.
In automation testing, especially where a typical test run may involve hundreds of commands and test cases, automated screenshots taken at critical assertions are important for developers and testers in making sure that every test case executed as it should. These proofs are in-turn used for debugging, to find out what went wrong and the reason for failure. For automation testing with selenium, these screenshots help to distinguish whether the failures are due to application failure or due to script failure.
Now with that said, when we say screenshot we could mean capturing an image of any part of the screen including the image of an element in question or even a screenshot of the whole page. Therefore in this post, we would be looking at how you can take automated screenshots of web pages for different purposes using Selenium WebDriver automation scripts. To start off, there are four major ways of capturing screenshot images using Selenium Webdriver. Such as :
- Screenshot of Viewable area
- Screenshot of entire screen i.e. capturing screenshot of full webpage
- Screenshot of the desired webElement
- Cloud based platform supporting screenshots of AUT
Automated Selenium Test Scripts for Taking Screenshots of Viewable Area
This is the most used approach of taking screenshots of applications under automation and the easiest one as well. Selenium provides an out-of-the-box capability called TakeScreenShot interface that can be used for taking screenshots of the viewable area.
You can check the detail of the interface here.
This interface provides a method known as getScreenshotAs which helps to capture the screenshot and store it in the desired location.
Here’s the syntax to capture the screenshot:
File screenshotFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
In order to store the taken screenshot into a file, the below statement is used:
FileUtils.copyFile(screenshotFile, new File(“path of the file you want to save the screenshot to”));
This is it! Just two statements and you will be able to take the screenshot. Let’s incorporate this step into a code snippet. The below example showcases Airbnb stay details page example where we are taking a screenshot of the viewable screen:
Capturing Full Webpage Screenshot using Automated Selenium Test Scripts
A need may arise to take screenshots of the entire screen rather than just the viewport of the browsers. Some browsers take a screenshot of the viewable port only whereas others take a screenshot of the entire screen. Earlier versions of Firefox used to take screenshots of the entire screen, unlike chrome and IE. But eventually even the latest versions of Firefox now only takes viewport screenshots. So in order to capture screenshots of the entire screen using selenium web driver scripts, we can make use of AShot().
AShot() is a webdriver screenshot utility to capture entire page screenshot and is natively supported from Selenium 3 onwards. It provides the following features:
Helps capture entire screen and web element
- Beautify screenshot
- Provides screenshot comparison.
- For more details on the utility, you can refer here.
In order to take a screenshot of the entire screen, you need to add the jar into your project. You can download the jar from here http://central.maven.org/maven2/ru/yandex/qatools/ashot/ashot/1.5.3/ashot-1.5.3.jar
Once the jars are added into the project, all you need to do is mention the below lines of code when you intend to take the full-screen screenshot:
In the code below, the Ashot method shooting strategy is used by setting the viewport to full screen and taking screenshots. This code snippet below goes to Airbnb India Stays and Tours page and takes a screenshot of the full view.
Read more - Using Selenium Webdriver for Full Page Screenshots | LambdaTest