ansoni/watir-extensions-element-screenshot

Element Screenshot Support for watir

watir-extensions-element-screenshot

Extend Watir to add screenshot support to any element.

Example

require 'watir-webdriver'
require 'watir/extensions/element/screenshot'

b = Watir::Browser.new
b.goto 'https://github.com/ansoni/watir-extensions-element-screenshot'
b.div(:id => "readme").screenshot("readme.png")

Installation

Add this line to your application's Gemfile:

gem 'watir-extensions-element-screenshot'

And then execute:

$ bundle

Or install it yourself as:

$ gem install watir-extensions-element-screenshot

watir-extensions-element-screenshot's Issues

Capturing screenshot of element inside an iFrame

When capturing a screenshot of an element inside an iFrame, wd.location returns x and y locations relative to the iFrame. These iFrame locations should be used in the crop! function (in addition to the element locations).

Here's an IRB snippet, b is a Watir::Browser object (for Firefox)
When I add the iFrame locations to the div element's locations, the image is correctly cropped.

irb(main):012:0> file = b.screenshot.save('page.png')
irb(main):013:0> image = ChunkyPNG::Image.from_file('page.png')
irb(main):014:0> b.iframe(:id => 'livebox_frame').div(:id => 'nested_div').wd.size
=> #
irb(main):015:0> b.iframe(:id => 'livebox_frame').div(:id => 'nested_div').wd.location
=> #
irb(main):016:0> b.iframe(:id => 'livebox_frame').wd.location
=> #
irb(main):017:0> image.crop!(352+391, 485+106, 165, 35)
irb(main):018:0> image.save('page_new.png')

Thus to fix this, we would somehow need to check if the element resides in an iFrame.

ChunkyPNG: The provided pixel array should have 'x' items

Traceback (most recent call last):
        2: from watir-test.rb:19:in `<main>'
        1: from /var/lib/gems/2.5.0/gems/chunky_png-1.3.11/lib/chunky_png/canvas/operations.rb:188:in `crop!'
/var/lib/gems/2.5.0/gems/chunky_png-1.3.11/lib/chunky_png/canvas.rb:309:in `replace_canvas!': The provided pixel array should have 7506.4002685546875 items (ArgumentError)

Been getting the above issue recently on my project, but when implementing the chunkyPNG code outside the extension found that when using the code
image.crop!(wd.location.x.to_i + 1, wd.location.y.to_i + 1, wd.size.width, wd.size.height)
but had the wd.size.width.to_i and wd.size.height.to_i the error was gone?

Image not properly cropping when wd passes float values

I was getting weird behaviour while trying to capture some screenshots.

It turned out the WebDriver element was returning a float value:
wd x location: 362
wd y location: 202.5 <-- issue here
wd size width: 940
wd size height: 562

Changing line #11 in https://github.com/ansoni/watir-extensions-element-screenshot/blob/master/lib/watir/extensions/element/screenshot.rb to:
image.crop!((wd.location.x + 1).round, (wd.location.y + 1).round, wd.size.width, wd.size.height)
Fixed it for me.

Error on taking screenshot on Firefox 85.0.1

Hi,

at first thanks for your good work! I use watir 6.14.0 with your extension (watir-extensions-element-screenshot (0.0.3) on Firefox 85.0.1 with geckodriver 0.29.0.

Here my sinple code:

require "rubygems"
require "watir"
require "watir/extensions/element/screenshot"

browser = Watir::Browser.new :firefox
browser.goto 'http://watir.com/'
browser.div(:class => 'logo').link().screenshot('screenshot.png')
browser.close

This produce the following error:

Traceback (most recent call last):
	3: from test_firefox_ubuntu.rb:10:in `<main>'
	2: from /var/lib/gems/2.6.0/gems/watir-extensions-element-screenshot-0.0.3/lib/watir/extensions/element/screenshot.rb:11:in `screenshot'
	1: from /var/lib/gems/2.6.0/gems/chunky_png-1.4.0/lib/chunky_png/canvas/operations.rb:192:in `crop!'
/var/lib/gems/2.6.0/gems/chunky_png-1.4.0/lib/chunky_png/canvas.rb:312:in `replace_canvas!': The provided pixel array should have 13928.999633789062 items (ArgumentError)

Can you help?
Thanks a lot!

Selenium::WebDriver::Error::WebDriverError: unexpected response

irb(main):010:0> browser.div(:id => "hplogo").screenshot("logo_google.png")
Selenium::WebDriver::Error::WebDriverError: unexpected response, code=404, content-type="text/plain"
Error - Unable to load Atom 'find_element' from file ':/ghostdriver/./third_party/webdriver-atoms/find_element.js'
    from /var/lib/gems/2.3.0/gems/selenium-webdriver-2.53.4/lib/selenium/webdriver/remote/http/common.rb:85:in `create_response'
    from /var/lib/gems/2.3.0/gems/selenium-webdriver-2.53.4/lib/selenium/webdriver/remote/http/default.rb:90:in `request'
    from /var/lib/gems/2.3.0/gems/selenium-webdriver-2.53.4/lib/selenium/webdriver/remote/http/common.rb:59:in `call'
    from /var/lib/gems/2.3.0/gems/selenium-webdriver-2.53.4/lib/selenium/webdriver/remote/bridge.rb:649:in `raw_execute'
    from /var/lib/gems/2.3.0/gems/selenium-webdriver-2.53.4/lib/selenium/webdriver/remote/bridge.rb:627:in `execute'
    from /var/lib/gems/2.3.0/gems/selenium-webdriver-2.53.4/lib/selenium/webdriver/remote/bridge.rb:596:in `find_element_by'
    from /var/lib/gems/2.3.0/gems/selenium-webdriver-2.53.4/lib/selenium/webdriver/common/search_context.rb:61:in `find_element'
    from /var/lib/gems/2.3.0/gems/watir-webdriver-0.9.3/lib/watir-webdriver/locators/element/locator.rb:75:in `by_id'
    from /var/lib/gems/2.3.0/gems/watir-webdriver-0.9.3/lib/watir-webdriver/locators/element/locator.rb:39:in `locate'
    from /var/lib/gems/2.3.0/gems/watir-webdriver-0.9.3/lib/watir-webdriver/elements/element.rb:551:in `locate'
    from /var/lib/gems/2.3.0/gems/watir-webdriver-0.9.3/lib/watir-webdriver/elements/element.rb:505:in `assert_exists'
    from /var/lib/gems/2.3.0/gems/watir-webdriver-0.9.3/lib/watir-webdriver/elements/element.rb:391:in `wd'
    from /var/lib/gems/2.3.0/gems/watir-extensions-element-screenshot-0.0.3/lib/watir/extensions/element/screenshot.rb:11:in `screenshot'
    from (irb):10
    from /usr/bin/irb:11:in `<main>'

OS Ubuntu 16, Browser PhantomJS

Original image height is too small! (ChunkyPNG::OutOfBounds)

I am getting the below error when trying to capture screenshots of elements

C:/Ruby200/lib/ruby/gems/2.0.0/gems/chunky_png-1.3.1/lib/chunky_png/canvas/opera
tions.rb:175:in crop!': Original image height is too small! (ChunkyPNG::OutOfBo unds) from C:/Ruby200/lib/ruby/gems/2.0.0/gems/watir-extensions-element-screen shot-0.0.2/lib/watir/extensions/element/screenshot.rb:11:inscreenshot'
from angular_test.rb:15:in `

'

Performance issue

Hi, are pure ruby or no dependencies constraints somewhat mandatory?
I already have in my code rmagick so I rewrote (almost) yours and the gap of performance is huge.
Maybe being able to choose would be a good thing?

Cheers