IEDriverServer 问题和裁剪屏幕截图

Question

我正在使用 Watir-WebDriver 运行我们的 Rails 应用程序的自动化测试，并在过去几天探索了比较特定元素的屏幕截图的可能性。

我正在使用这个 gem：watir-extensions-element-screenshot (here) 来捕获特定元素的屏幕截图。此 gem 捕获整个页面的屏幕截图，然后对其进行裁剪以挑选出请求的元素。

这一切在 Chrome 和 Firefox 中运行良好，但 Internet Explorer 引起了问题。当我运行自动化测试时，crop! 函数会引发以下异常：
ChunkyPNG::OutOfBounds: Original image width is too small!

当crop_width + x > width 时抛出此异常，其中crop_width 是要裁剪的元素的宽度，x 是要裁剪的图像左上角的 x 坐标，width 是原始图像的宽度。

当我在测试期间打印一些值时，我确实可以确认上面的值：
crop_width: 940, crop_height: 562
x: 363, y: 211
width: 900, height: 520 #why are these so small?

当我在 IRB 中手动捕获相同元素的屏幕截图时，它工作得很好：
irb(main):013:0> b = Watir::Browser.new :ie
=> #<Watir::Browser:0x422422cc url="http://localhost:5555/" title="WebDriver">
irb(main):014:0> b.goto 'localhost:3000'
irb(main):015:0> b.div(:id => 'lbcontent').screenshot('ie_test.png')
@987654336 @
x: 371, y: 195
width: 1680, height: 909
=> #<File:ie_test.png (closed)>

所以显然 IEDriverServer 在捕获屏幕截图时会调整大小，但在 IRB 中一切正常......有人有解释和/或解决方案吗？

Answer 1

问题

元素截图扩展首先使用 Watir 的内置方法对浏览器窗口进行截图：

browser.screenshot.save(file)

这里的问题是你可以根据你使用的浏览器获得不同的图像大小：

• 在 Firefox 中，屏幕截图将包含页面上的所有内容。这包括用户必须向下或向右滚动才能看到的页面部分。
• 相比之下，Chrome 和 IE 截屏与用户当前看到的完全一样。您必须滚动才能看到的任何内容都不会包含在图像中。这意味着图像大小将取决于浏览器窗口的尺寸。

最终，这意味着 Chrome 和 IE 将在您需要滚动到图像时抛出此异常。比如图片宽度是500，而浏览器宽度只有250，就会出现异常。

解决方法

鉴于您在浏览器窗口较大时没有问题，我建议您在截取截屏之前最大化浏览器。

试试：

b = Watir::Browser.new :ie
b.goto 'localhost:3000'
b.window.maximize                                       # Added line
b.div(:id => 'lbcontent').screenshot('ie_test.png')

请注意，如果图像仍在此区域之外，您仍然会遇到问题。