Issue with IEDriverServer and cropping screenshots

Question

I am using Watir-WebDriver to run automated tests of our Rails application and spent the last couple of days exploring the possabilities of comparing screenshots of specific elements.

I am using this gem: watir-extensions-element-screenshot (here) to capture a screenshot of a specific element. This gem captures a screenshot of the full page and then crops it to single out the requested element.

This all works pretty well in Chrome and Firefox, but Internet Explorer is causing issues. When I run my automated test, the crop! function throws the following exception:
ChunkyPNG::OutOfBounds: Original image width is too small!

This exception is thrown when crop_width + x > width where crop_width is the width of the element to be cropped, x is the x-coordinate of the top left corner of the image to be cropped and width is the width of the original image.

When I print some of the values during testing I can indeed confirm the values above:
crop_width: 940, crop_height: 562
x: 363, y: 211
width: 900, height: 520 #why are these so small?

When I manually capture a screenshot of the same element in IRB, it works just fine:
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)>

So apparantly the IEDriverServer does some resizing while capturing a screenshot but it all works fine in IRB.. anyone has an explanation and/or solution?

Answer 1

Problem

The element screenshot extension is first taking a screenshot of the browser window using Watir's built-in methods:

browser.screenshot.save(file)

The problem here is that you can get different image sizes depending on the browser you are using:

• In Firefox, the screenshot will include everything on the page. This includes the parts of the page that a user would have to scroll down or right to see.
• In contrast, Chrome and IE screenshot exactly what the user currently sees. Anything that you have to scroll to see will not be included in the image. This means that the image size will be dependent on the browser window dimensions.

Ultimately, this means that Chrome and IE will throw this exception whenever you need to scroll to the image. For example, if the image width is 500 but the browser width is only 250, the exception will occur.

Workaround

Given that you had no problems when the browser window was larger, I would suggest maximizing the browser before taking the cropped screenshot.

Try:

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

Note that you will still have problems if the image is still outside this area.