Take Screenshot of WebElement in Selenium || New Selenium 4 feature
In this blog, I have explained how to take screenshot for a web element in Selenium 4 version. This is the new feature in Selenium 4, earlier we could only take screenshot only for web page, now you can take screenshot for elements and use them with your bug report.
Watch Full video here:
Source Code:
package WM;
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.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import io.github.bonigarcia.wdm.WebDriverManager;
public class TakeElementScreenshot {
public static void main(String[] args) throws IOException {
WebDriverManager.chromedriver().setup();
WebDriver driver = new ChromeDriver();
driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);
driver.get(“https://app.hubspot.com/login”);
WebElement email = driver.findElement(By.id(“username”));
WebElement password = driver.findElement(By.id(“password”));
WebElement loginButton = driver.findElement(By.id(“loginBtn”));
WebElement forgotPwd = driver.findElement(By.linkText(“Forgot my password”));
email.sendKeys(“naveen@gmail.com”);
password.sendKeys(“Test@123”);
takeElementScreenshot(email, “emailElement”);
takeElementScreenshot(password, “passwordElement”);
takeElementScreenshot(loginButton, “loginButtonElement”);
takeElementScreenshot(forgotPwd, “forgotPwdLink”);
driver.quit();
}
//take screenshot using getScreenshotAs() method.
public static void takeElementScreenshot(WebElement element, String fileName) {
File srcFile = element.getScreenshotAs(OutputType.FILE);
try {
FileUtils.copyFile(srcFile, new File(“./target/screenshots/” + fileName + “.png”));
} catch (IOException e) {
e.printStackTrace();
}
}
}
