如何使用SeleniumWebDriver捕获特定元素的屏幕截图而不是整个页面？

Question

目前，我正在尝试使用SeleniumWebDriver捕获一个屏幕截图。但我只能获得整个页面的屏幕截图。然而，我想要的只是捕获页面的一部分，或者基于ID或任何特定元素定位器捕获特定元素。（例如，我希望用image id=“Butterfly”捕捉图片）

有没有办法按所选项目或元素捕获屏幕截图？

Answer 1

Yandex的AShot框架可用于在Selenium WebDriver脚本中为

• 完整网页
• web元素

这个框架可以在https://github.com/yandex-qatools/ashot.上找到

截图的代码非常简单：

整个页面

Screenshot screenshot = new AShot()
        .shootingStrategy(new ViewportPastingStrategy(1000))
        .takeScreenshot(driver);

ImageIO.write(screenshot.getImage(), "PNG", new File("c:\\temp\\results.png"));

特定WEB元素

Screenshot screenshot = new AShot()
        .takeScreenshot(driver, driver.findElement(By.xpath("(//div[@id='ct_search'])[1]")));
    
ImageIO.write(screenshot.getImage(), "PNG", new File("c:\\temp\\div_element.png"));

请参阅本文的更多详细信息和更多代码示例。

Answer 2

下面是一个使用SeleniumWebDriver和Pillow的Python3版本。该程序捕获整个页面的屏幕截图，并根据其位置裁剪元素。元素图像将作为图像提供。巴布亚新几内亚。Firefox支持直接使用元素保存元素图像。屏幕截图作为png（“图像名称”）。

from selenium import webdriver
from PIL import Image

driver = webdriver.Chrome()
driver.get('https://www.google.co.in')

element = driver.find_element_by_id("lst-ib")

location = element.location
size = element.size

driver.save_screenshot("shot.png")

x = location['x']
y = location['y']
w = size['width']
h = size['height']
width = x + w
height = y + h

im = Image.open('shot.png')
im = im.crop((int(x), int(y), int(width), int(height)))
im.save('image.png')

最新消息

现在chrome也支持单独的元素截图。因此，您可以直接捕获网络元素的屏幕截图，如下所示。

from selenium import webdriver

driver = webdriver.Chrome()
driver.get('https://www.google.co.in')
image = driver.find_element_by_id("lst-ib").screenshot_as_png 
# or
# element = driver.find_element_by_id("lst-ib")
# element.screenshot_as_png("image.png")

Answer 3

我们可以通过裁剪整个页面截图来获取元素截图，如下所示：

driver.get("http://www.google.com");
WebElement ele = driver.findElement(By.id("hplogo"));

// Get entire page screenshot
File screenshot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
BufferedImage  fullImg = ImageIO.read(screenshot);

// Get the location of element on the page
Point point = ele.getLocation();

// Get width and height of the element
int eleWidth = ele.getSize().getWidth();
int eleHeight = ele.getSize().getHeight();

// Crop the entire page screenshot to get only element screenshot
BufferedImage eleScreenshot= fullImg.getSubimage(point.getX(), point.getY(),
    eleWidth, eleHeight);
ImageIO.write(eleScreenshot, "png", screenshot);

// Copy the element screenshot to disk
File screenshotLocation = new File("C:\\images\\GoogleLogo_screenshot.png");
FileUtils.copyFile(screenshot, screenshotLocation);