使用 NodeJS 和 Browserstack 捕获特定元素的屏幕截图答案

【问题标题】：Capture screenshot of specific element using NodeJS and Browserstack使用 NodeJS 和 Browserstack 捕获特定元素的屏幕截图
【发布时间】：2014-01-12 09:20:32
【问题描述】：

有谁知道是否有办法使用 NodeJs 来驱动 Browserstack 并捕获页面上特定元素的屏幕截图？

谢谢！

【问题讨论】：

标签： node.js selenium browserstack

【解决方案1】：

您可以使用PhantomJS 来完成。

截图整个页面： Phantomjs - take screenshot of a web page

截取到特定元素尺寸的屏幕截图： Crop screenshot to element in PhantomJS

更多 PhantomJS 示例：https://github.com/ariya/phantomjs/wiki/Examples

【讨论】：

谢谢！然而，我想用 Browserstack 或 Selenium 来做这件事的原因是为了用不同的浏览器/渲染引擎来真正渲染页面......
Browserstack 有一个example 可以截取整页截图。要捕获特定元素，您需要找到该元素，获取它的位置 + 尺寸，然后裁剪 png 屏幕截图。有几种裁剪方法 - 您可以将 base64 png“粘贴”到画布上 - 请参阅node-canvas。您可以使用 imagemagick 或 gmagick - 请参阅 gm。
Browserstack 也有一个"Screenshots API"。似乎不支持裁剪 - 您必须在单独的过程中执行此操作。您也无法获得元素位置/尺寸。听起来不是适合您的解决方案。

【解决方案2】：

下面给出的链接给出了一个使用 php 捕获元素屏幕截图的示例。您可以将其用作在 Node.js 中编写代码的参考。如果您遇到任何问题，请随时询问。

https://github.com/facebook/php-webdriver/wiki/Taking-Full-Screenshot-and-of-an-Element

【讨论】：

【解决方案3】：

正是您要找的：

https://github.com/firstandthird/stackshots

【讨论】：

这不允许特定元素的屏幕截图，只允许整页