How to take Screenshots using Selenium WebDriver ?
In this article, we’ll learn how to take a screenshot using three different methods using Selenium WebDriver.
When we execute our test cases manually or using automation , we often need to take a screenshot of a web page or part of a web page as a proof or a screenshot is also required for defect analysis as well.
We use an interface called TakesScreenshot for taking screenshots in selenium, which enables the Selenium WebDriver to capture a screenshot and store it in different ways. There is a method called “getScreenshotAs() ” which captures the screenshot and stores it in the specified location.
We will learn below three approaches for taking screenshots in this article
Take a screenshot of a visible part of the Web page
1) Convert web driver object to TakeScreenshot and Call getScreenshotAs method to create image file.
File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
2) Copy file to Desired Location
FileUtils.copyFile(scrFile, new File("D:\\Work\\screenshot.png")); Code implementation
package com.test;
import java.io.File;
import java.io.IOException;
import java.util.concurrent.TimeUnit;
import org.apache.commons.io.FileUtils;
import org.openqa.selenium.By;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class SceenshotForVisiblePage {
public static WebDriver driver;
public static void main(String[] args) throws IOException {
// Create a new instance of the Chrome driver
System.setProperty("webdriver.chrome.driver", "D:\\Drivers\\chromedriver.exe");
driver = new ChromeDriver();
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
// Launch the URL
driver.get("https://tutorialshut.com/demo-website-for-selenium-automation-practice/");
// Maximize the window
driver.manage().window().maximize();
// screenshot of a visible part of the Web page:
File scrFile = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(scrFile, new File("D:\\Work\\visiblePageScreenshot.png"));
// close the driver
driver.close();
}
}
How to take screenshot of full page using Ashot API
Sometimes we may need to capture the screenshots of the full page or screenshot of an individual web Element.
Ashot is a third party utility by Yandex supported by Selenium WebDriver to capture the Screenshots.
It is a method provided by webdriver to get a full screen image and available from versions 3.x of Selenium.
For using Ashot API , We have to download and add the following jar to our project
https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot
or use below maven dependency in your pom.xml file
<!-- https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot -->
<dependency>
<groupId>ru.yandex.qatools.ashot</groupId>
<artifactId>ashot</artifactId>
<version>1.5.4</version>
</dependency>
Syntax:
Screenshot screenshot=new
AShot().shootingStrategy(ShootingStrategies.viewportPasting(1000)).takeScreenshot(driver);
ImageIO.write(screenshot.getImage(),"PNG",new File("D\\screenshot\\fullimage.jpg"));Where 1000 is scrolled out time in milliseconds so it will will scroll for each 1000 millisecond for taking a screenshot
Code implementation
package com.test;
import java.io.File;
import java.io.IOException;
import java.util.concurrent.TimeUnit;
import org.apache.commons.io.FileUtils;
import org.openqa.selenium.By;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import ru.yandex.qatools.ashot.AShot;
import ru.yandex.qatools.ashot.Screenshot;
import ru.yandex.qatools.ashot.shooting.ShootingStrategies;
import javax.imageio.ImageIO;
public class FullPageScreenshot{
public static WebDriver driver;
public static void main(String[] args) throws IOException {
// Create a new instance of the Chrome driver
System.setProperty("webdriver.chrome.driver", "D:\\Drivers\\chromedriver.exe");
driver = new ChromeDriver();
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
// Launch the URL
driver.get("https://tutorialshut.com/demo-website-for-selenium-automation-practice/");
// Maximize the window
driver.manage().window().maximize();
// screenshot of full Web page:
Screenshot screenshot = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(1000))
.takeScreenshot(driver);
ImageIO.write(screenshot.getImage(), "PNG", new File("D\\screenshot\\fullimage.jpg"));
// close the driver
driver.close();
}
}
Take a screenshot of a particular element of the page
In a few cases we have to capture the screenshot of a particular element.
So below approach is used for taking screenshot for a element
-
- Identify the logo/webelement on Web Page
- Capture the viewable part of the Page screenshot / or can take full page screenshot as defined in second method
- Crop that image as per the location and dimension of the element.
// identify logo on the webPage
WebElement logoElement=driver.findElement(By.xpath( “**xpath of Logo***”));
// capture screenshot and store the image
File file = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
BufferedImage bi = ImageIO.read(file);
//get location of the logo
Point location= logoElement.getLocation();
//find Dimension of the logo , width and height
int w= logoElement.getSize().getWidth();
int h=logoElement.getSize().getHeight();
// Crop the image based on webElement location width and Height
BufferedImage cImage= bi.getSubimage(location.getX(), location.getY(), w, h);
ImageIO.write(cImage, "png", file);
FileUtils.copyFile(s, new File(“D:\\LogoSceenshot.jpg"))
//Code Implementation
package com.test;
import java.io.File;
import java.io.IOException;
import java.util.concurrent.TimeUnit;
import javax.imageio.ImageIO;
import org.apache.commons.io.FileUtils;
import org.openqa.selenium.By;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.io.File;
import org.apache.commons.io.FileUtils;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.Point;
import java.awt.image.BufferedImage;
public class LaunchFirefoxBrowser {
public static WebDriver driver;
public static void main(String[] args) throws IOException {
// Create a new instance of the Chrome driver
System.setProperty("webdriver.chrome.driver", "D:\\Drivers\\chromedriver.exe");
driver = new ChromeDriver();
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
// Launch the URL
driver.get("****URL*****");
// Maximize the window
driver.manage().window().maximize();
// screenshot of a particular element lets say title of the webpage
// identify the text or logo for Screenshot
WebElement titleElement=driver.findElement(By.xpath("****xpath****'"));
// capture screenshot and store the image
File file = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
BufferedImage bi = ImageIO.read(file);
//get location of the Title
Point location= titleElement.getLocation();
//find Dimension of the Title , width and height
int w= titleElement.getSize().getWidth();
int h=titleElement.getSize().getHeight();
// Crop the image based on webElement location width and Height
BufferedImage cImage= bi.getSubimage(location.getX(), location.getY(), w, h);
ImageIO.write(cImage, "png", file);
FileUtils.copyFile(file, new File("D:\\TitleSceenshot.jpg"));
// close the driver
driver.close();
}
}