Selenium - 页面可见部分的屏幕截图

Posted 2023-02-25

【中文标题】Selenium - 页面可见部分的屏幕截图

【英文标题】：Selenium- screenshot of visible part of page

【发布时间】：2015-03-07 13:02:47

【问题描述】：

有没有办法让 Selenium WebDriver 只截取 PhantomJS 页面可见部分的屏幕截图？我浏览了源代码并且没有 API AFAICT。那么有什么诀窍可以做到这一点吗？

编辑：Chrome 已经只捕捉可见部分，因此将其作为问题的一部分删除。

【参考方案1】：

根据TakesScreenshot 的 JavaDoc API，扩展 TakesScreenshot 的 WebDriver 将尽最大努力按优先顺序返回以下内容：

整个页面 当前窗口 当前帧的可见部分 包含浏览器的整个显示屏幕截图

由于 PhantomJS 是一个无头浏览器，它可能没有菜单/选项卡和其他类似的浏览器 chrome。所以你能控制的只有浏览器窗口的尺寸。

// Portrait iPhone 6 browser dimensions
Dimension dim = new Dimension(375, 627);
driver.manage().window().setSize(dim);

截屏很可能会捕获整个页面。如果您想将生成的文件限制为您要求的尺寸，您可以随时 crop it 到您需要的尺寸（不理想，但 PhantomJS 不是真正的浏览器）。

  private static void capture(String url, WebDriver driver, Dimension dim, String filename) throws IOException
    driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
    driver.manage().window().setSize(dim);
    driver.get(url);
    File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);

    int w = dim.getWidth();
    int h = dim.getHeight();
    Image orig = ImageIO.read(scrFile);
    BufferedImage bi = new BufferedImage(w, h, BufferedImage.TYPE_INT_ARGB);
    bi.getGraphics().drawImage(orig, 0, 0, w, h, 0, 0, w, h, null);
    ImageIO.write(bi, "png", new File(filename));
  

【讨论】：

我将此标记为答案，因为这是对没有此类 API 的事实的详细而确凿的答案。不幸的是，这个答案中建议的关于设置尺寸然后截屏的方法不起作用。感谢您的详细回答。标记。

乐于助人。上面的代码对我来说“有效”——至少它使用特定尺寸的“设备”访问了一个 URL，它捕获了一个屏幕截图（整个页面），然后将其裁剪为设备尺寸。

我指的是设置尺寸后的原始屏幕截图。我假设裁剪会起作用......

确实，维度名称有点误导。有用的是，可以使用不同的维度来激活不同的 CSS3 媒体查询样式规则以测试响应式网站。

【参考方案2】：

您可以使用机器人类，如下所示

Robot rb=new Robot();
rb.keyPress(KeyEvent.VK_ALT);
rb.keyPress(KeyEvent.VK_PRINTSCREEN);
rb.keyRelease(KeyEvent.VK_PRINTSCREEN);
rb.keyRelease(KeyEvent.VK_ALT);

在剪贴板上复制截图后，您可以将其保存到文件中。

【参考方案3】：

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

【讨论】：

这会占用整个页面，而不仅仅是可见区域。