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')
crop_width: 940, crop_height: 562
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')

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

问题与IEDriverServer和裁剪截图

1 个答案: