如何通过 Selenium 捕获网页中 WebElement 的屏幕截图而不是整个屏幕或页面

Question

我必须捕获特定网站图像的屏幕截图。 也许这是整个屏幕的 20%，我使用了下面的代码，它捕获了整个屏幕。 这并不能帮助我解决问题。

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"));

Answer 1

你能试试这个吗

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);

Answer 2

根据您的代码试验getScreenshotAs()方法将截取整个页面的屏幕截图。

要捕获特定网页中WebElement的屏幕截图，您可以在使用Selenium Java Client v3.14.0 、 ChromeDriver v2.41 、 Chrome v 68.0时使用导入ashot-1.4.4.jar的AShot()方法。

注意：来自ashot-1.4.4.jar 的AShot()方法仅适用于启用jQuery的Web 应用程序。

因此，由于网站http://www.google.com/未启用jQuery ， ashot-1.4.4.jar中的AShot()方法将无法获取所需的屏幕截图。

作为示例，我们将从网站https://jquery.com/获取快照。

• 代码块：

   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(); } }

• 截屏：

---

参考

您可以在How to take screenshot with Selenium WebDriver中找到详细的讨论

Answer 3

我正在使用 selenium-java-3.141.59 和 ChromeDriver 83.0.4103.39，下面的代码非常适合我：

    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();
    }