There is no other automation framework in the market that is more used for automating web testing tasks than Selenium and one of the key functionalities is to take Screenshot in Selenium. However taking full page screenshots across different browsers using Selenium is a unique challenge that many selenium beginners struggle with. In this post we will help you out and dive a little deeper on how we can take full page screenshots of webpages across different browser especially to check for cross browser compatibility of layout.
Why do we Need to Take Screenshot in Selenium?
You are running an automation test. How can you be sure that the webpage you have opened is the right one. How can you be sure that there was no error in layout of the webpage?
The solution, take screenshots in Selenium of pages in the middle of screenshots as proof that your page is working fine or your script is working as intended.
The trick can also be used in checking visual layouts automatically of web pages, especially during regression testing where you have to perform a huge number of tests. These screenshots also help in debugging errors. You get to know when and at which step the test fails.
Browser & app testing web cloud to perform both exploratory and automated testing across 3000+ different browsers, real devices and operating systems.
Taking Screenshot in Selenium of Browser Window
A built-in functionality to take screenshots in Selenium across the page and it’s quite easy to use as well.
Selenium has the TakesScreenshot interface to capture the screenshots during execution of your Selenium script. The TakesScreenshot interface has a method named getScreenshotAs( ) which can capture a screenshot and store it in any location specified by us. With this, we can take a screenshot of pages across various browsers like Chrome, Firefox, IE, Opera etc using their respective web-drivers.
The WebDriver interface extends TakesScreenshot and all browser driver classes like ChromeDriver, FirefoxDriver, InternetExplorerDriver, EdgeDriver, OperaDriver etc, implements TakesScreenshot.
The WebDriver extending TakesScreenshot and the getScreenshotAs( ) method, capture only the visible area of the web page in all the browsers and not the full page.
Java code for taking screenshot in Selenium WebDriver of a website:
import java.io.File;
import java.io.IOException;
import java.util.concurrent.TimeUnit;
import org.apache.commons.io.FileUtils;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class SeleniumScreenshotTest {
public static void main(String[] args) throws IOException {
System.setProperty("webdriver.chrome.driver" , "C:\\drivers\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.manage().timeouts().implicitlyWait(10,TimeUnit.SECONDS);
driver.manage().window().maximize();
driver.get("[https://www.lambdatest.com/](https://www.lambdatest.com/)");
File source_file = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(source_file, new File("C:\\screenshot.png"));
driver.quit();
}
}
In the above code, we have used the Chrome WebDriver to launch the chrome browser. We started off by specifying the Chrome webdriver path and setting it as a system property. Next, the code taking the screenshot of the website “https://www.lambdatest.com” and then saving the screenshot in our local machine. As I said before, this screenshot is only of the window that is visible in the browser when the website is loaded, i.e. the first fold only. This, however, is not useful for many testers. Full page screenshots are very important part of strategy. Taking automated ones using Selenium is a little bit tricky.
You can also refer to the below video tutorial on How To Take Screenshots In Selenium testing.
Taking Screenshots in Selenium of the entire page
The easiest solution is to take help of a third-party tool. To take screenshot in Selenium of the entire webpage, we can use a third party utility like AShot.
It is a WebDriver screenshot utility and that can be used to capture the entire page and can even be used to capture the individual webelement screenshots.To do this we need to download the ashot.jar file and add it to the project along with the selenium jar files.
import org.openqa.selenium.*;
import org.openqa.selenium.firefox.FirefoxDriver;
import ru.yandex.qatools.ashot.AShot;
import ru.yandex.qatools.ashot.Screenshot;
import ru.yandex.qatools.ashot.shooting.ShootingStrategies;
import javax.imageio.ImageIO;
import java.io.File;
public class TakeFullPageScreenShot
{
public static void main(String args[]) throws Exception
{
System.setProperty("webdriver.chrome.driver" , “C:\\drivers\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.get("[https://www.lambdatest.com](https://www.lambdatest.com)");
Screenshot screenshot = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(1000)).takeScreenshot(driver);
ImageIO.write(screenshot.getImage(),"PNG",new File(“C:\\fullpagescreenshot.png"));
}
Again, in this piece of code as well, we are using Chrome WebDriver to invoke chrome browser, then taking a complete screenshot of the page using AShot.
Check this out: Emulator vs Simulator vs Real Device Testing: Key Differences
Alerts and popup boxes
The next major roadblock is, popups. When launching the browser with Selenium, if your website has alerts and popup boxes, they can prevent the website from being loaded completely. And instead of getting the screenshot of the webpage we end up getting the screenshot of the alerts and popup boxes, or worse, may get an UnhandledAlertException error. These alerts are more frequent in Internet Explorer.
To handle them Selenium has an interface called Alert. It is present in the org.openqa.selenium.Alert package.
Alert interface has the following methods to deal with the alert:
accept() To accept the alert
dismiss() To dismiss the alert
getText() To get the text of the alert
sendKeys() To write some text to the alert
Updated Selenium Driver
Even though Selenium tools like AShot takes screenshots of complete pages quite easily they have some issues that are inherent to Selenium itself. Latest web technologies which do not have support for Selenium gives a lot of errors. Sticky menus for example are especially problematic to handle. A good approach is to use latest Selenium WebDrivers along with latest browser drivers.
Browser test & app testing cloud to perform both exploratory and automated testing across 3000+ different browsers, real devices and operating systems.
Take Screenshots in Selenium Automatically at LambdaTest
You can also take automatic screenshots of your webpages at LambdaTest as well. It’s a codeless way to take screenshots in Selenium across 3000+ different browsers, browser versions, and operating systems with a single click.
Top comments (0)