是否可以直接使用WebDriver捕获网络元素的屏幕截图？

Question

在Interface
TakesScreenshot
页面上，我发现了这一点：

捕获屏幕截图并将其存储在指定位置。对于扩展了TakesScreenshot的WebDriver，这将根据浏览器尽最大努力按优先顺序返回以下内容：-整个页面-
当前窗口-当前帧的可见部分-包含浏览器的整个显示器的屏幕截图

对于扩展TakesScreenshot的WebElement，这将尽最大努力，具体取决于浏览器，以按首选项顺序返回以下内容：-HTML元素的整个内容-
HTML元素的可见部分。

因此，我想知道它是否应该支持Web元素的捕获屏幕截图，但是目前找不到与此支持有关的任何文档。不知道它是否真的支持。

有人知道更多细节吗？谢谢。

Answer 1

该文件将表明它 是 支持的，但在实践中，这是行不通的（至少不支持.Net绑定）：

var screenshotTaker = element as ITakesScreenshot;
var image = screenshotTaker.GetScreenshot();
image.SaveAsFile(fileName, ImageFormat.Jpeg); // << null exception thrown here

有一个对我有效的解决方法-在页面上执行javascript以获取元素的位置：

const string javascript = "return arguments[0].getBoundingClientRect()";
var obj = (Dictionary<string, object>)((IJavaScriptExecutor)_core.Driver).ExecuteScript(javascript, element);
var rect = new Rectangle((int)double.Parse(obj["left"].ToString()),
                         (int)double.Parse(obj["top"].ToString()),
                         (int)double.Parse(obj["width"].ToString()),
                         (int)double.Parse(obj["height"].ToString()));

这将为您提供元素在视口中的位置，此时您可以截取整个页面的屏幕截图，并将其裁剪到元素的边界。

希望有帮助…