Arijit
Arijit

Reputation: 83

How to capture screenshot of a WebElement within a webpage but not the entire screen or page through Selenium

I have to capture a screenshot of an image of a particular website. Maybe this is 20% off entire screen, I have used below code, it is capturing the entire screen. Which is not helping me to solve the problem.

WebDriver driver = new FirefoxDriver();
driver.get("http://www.google.com/");
File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(scrFile, new File("c:\\tmp\\screenshot.png"));

Screenshot, what I want to do with selenium

Upvotes: 1

Views: 4042

Answers (3)

hoapham
hoapham

Reputation: 330

I am using selenium-java-3.141.59 and ChromeDriver 83.0.4103.39, this code below works perfectly for me:

    WebDriver driver = new ChromeDriver();
   driver.get("https://www.google.com/");
  WebElement element = driver.findElement(By.id("hplogo"));
  Screenshot screenshotHeader = new AShot().coordsProvider(new WebDriverCoordsProvider()).shootingStrategy(ShootingStrategies.viewportPasting(100)).takeScreenshot(driver, element);
    try {
        ImageIO.write(screenshotHeader.getImage(),"jpg",new File("C:/TESTSELENIUM/Google.jpg"));
    } catch (IOException e) {
        e.printStackTrace();
    }

Upvotes: 0

undetected Selenium
undetected Selenium

Reputation: 193108

As per your code trials getScreenshotAs() method will take the screenshot of the entire page.

To capture the screenshot of an WebElement within a particular webpage you can use the AShot() method importing ashot-1.4.4.jar while working with Selenium Java Client v3.14.0, ChromeDriver v2.41, Chrome v 68.0.

Note: AShot() method from ashot-1.4.4.jar works only with jQuery enabled Web Applications.

So as the website http://www.google.com/ is not jQuery enabled AShot() method from ashot-1.4.4.jar won't be able to take the required screenshot.

As an example we will take a snapshot from the website https://jquery.com/.

  • Code Block:

    package aShot;
    
    import java.io.File;
    
    import javax.imageio.ImageIO;
    
    import org.openqa.selenium.By;
    import org.openqa.selenium.WebDriver;
    import org.openqa.selenium.WebElement;
    import org.openqa.selenium.chrome.ChromeDriver;
    import org.openqa.selenium.chrome.ChromeOptions;
    import org.openqa.selenium.support.ui.ExpectedConditions;
    import org.openqa.selenium.support.ui.WebDriverWait;
    
    import ru.yandex.qatools.ashot.AShot;
    import ru.yandex.qatools.ashot.Screenshot;
    
    public class ashot_google_homepage_logo {
    
        public static void main(String[] args) throws Exception {
    
            System.setProperty("god.bless.you", "C:\\Utility\\BrowserDrivers\\chromedriver.exe");
            ChromeOptions options = new ChromeOptions();
            options.addArguments("start-maximized");
            options.addArguments("disable-infobars");
            options.addArguments("--disable-extensions"); 
            WebDriver driver =  new ChromeDriver(options);
            driver.get("https://jquery.com/");
            WebElement myWebElement = new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//h3[contains(.,'Lightweight Footprint')]")));
            Screenshot myScreenshot = new AShot().takeScreenshot(driver, myWebElement);
            ImageIO.write(myScreenshot.getImage(),"PNG",new File("./Screenshots/elementScreenshot.png"));
            driver.quit();
        }
    }
    
  • Screenshot:

elementScreenshot.png


Reference

You can find a detailed discussion in How to take screenshot with Selenium WebDriver

Upvotes: 1

Bhargav Marpu
Bhargav Marpu

Reputation: 296

Can you try this

driver.get("https://stackoverflow.com/");
WebElement element = driver.findElement(By.xpath("//span[(text()='Stack Overflow') and @class='-img _glyph']"));
WrapsDriver wrapsDriver = (WrapsDriver) element;
File screenshot = ((TakesScreenshot) wrapsDriver.getWrappedDriver()).getScreenshotAs(OutputType.FILE);
Rectangle rectangle = new Rectangle(element.getSize().width, element.getSize().height, element.getSize().height, element.getSize().width);
Point location = element.getLocation();
BufferedImage bufferedImage = ImageIO.read(screenshot);
BufferedImage destImage = bufferedImage.getSubimage(location.x, location.y, rectangle.width, rectangle.height);
ImageIO.write(destImage, "png", screenshot);
File file = new File("C:\\123.png");
FileUtils.copyFile(screenshot, file);

Upvotes: 1

Related Questions