How to capture Screenshot of UI Element using getScreenShotAs()

How to capture Screenshot of UI Element using getScreenShotAs()

Screenshot in real time can be used to compare the images with actual and expected way, this way we call as analyzing the bug. Here getScreenShotAs() is been introduced on Selenium 4.0 Alpha Version. This method indicates driver that can capture a screenshot of selected element or entire screenshot and store it in different ways. We can use this method to get screen shot of an element which is visible or hidden on the page.

Note: After introducing this command in Selenium 4 Alpha Version, Selenium guys have also made this feature available in the latest stable version of Selenium 3 i.e. 3.141.59 . Hence you can also you this Selenium Version to explore this command.

For a Web Element extending TakesScreenshot, this makes a best effort depending on any browser to return the following in order of preference. The entire content of the HTML element – The visible portion of the HTML element,

Syntax –

getScreenshotAs(OutputType<X> target)

Capture the screenshot and store it in the specified location.

Type Parameters:

• X – Return type for getScreenshotAs.

Parameters:

• target – target type, @see OutputType

Returns:

• Object in which has stored information about the screenshot.

Throws:

• WebDriverException – on failure.
• java.lang.UnsupportedOperationException – if the underlying implementation does not support screenshot capturing this exception would be thrown.

Example One:  Getting the screenshot of a visible UI element on the page and storing it in a desired specified location.

import java.io.File;
import org.openqa.selenium.By;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.io.FileHandler;

public class GgetVisibleElemetnOfScreenShotAs {
	public static void main(String[] args) throws Exception {
		System.setProperty("webdriver.chrome.driver", "D:\\chromedriver.exe");
		ChromeDriver driver = new ChromeDriver();
		driver.get("http://omayo.blogspot.com/");
		driver.manage().window().maximize();
		Thread.sleep(2000);
		WebElement e = driver.findElement(By.id("header-inner"));
		File src = e.getScreenshotAs(OutputType.FILE);
		File dest = new File("D:\\VisibleOfElementScreenShotAs.png");
		FileHandler.copy(src, dest);
		driver.close();
	}
}

Output Screenshot:

---

Example Two:  Getting the screenshot of a hidden UI element on the page and storing it in a desired specified location.

Example to capture hidden element screenshot.

import java.io.File;
import org.openqa.selenium.By;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.io.FileHandler;
public class GetInvisibleElemetnOfScreenShotAs2 {
	public static void main(String[] args) throws Exception {
		System.setProperty("webdriver.chrome.driver", "D:\\chromedriver.exe");
		ChromeDriver driver = new ChromeDriver();
		driver.get("http://omayo.blogspot.com/");
		driver.manage().window().maximize();
		Thread.sleep(2000);
		WebElement e=driver.findElement(By.id("hbutton"));
		File src = e.getScreenshotAs(OutputType.FILE);
		File dest = new File("D:\\InvisibleOfElementScreenShotAs.png");
		FileHandler.copy(src, dest);
		driver.close();
		System.exit(1);
	}
}

Output Screenshot:

Conclusion: Apart from taking the screenshots of the page, we can now take screenshots of the required UI element using the getScreenshotAs() command which is introduced in the Selenium 4 Alpha version.

Hope you like this tool. Please leave your questions/comments/feedback below.