Search code examples
rubywatir-webdriverwebpage-screenshot

Watir screenshot - select options not captured

We use watir scripts to test our website. When testing pages with select tags, we have watir click the select element and can see the options display in the browser. When we take a screenshot, the output does not match what we see in the browser - the options are missing, instead the select box is highlighted.

What can we do to make the option elements visible in the screenshot?

test_select.html

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <select id="testme">
            <option>one</option>
            <option>two</option>
            <option>three</option>                        
        </select>
    </body>
</html>

test_select.rb:

require 'watir-webdriver'
b = Watir::Browser.new
b.goto 'file://'+Dir.pwd+'/test_select.html'

b.element(:css => 'select#testme').click
b.screenshot.save 'clicked_select.png'
Solution

  • The main idea to set attribute size for your select list. This method will change appearance of the page but as far as I know it is the only way to see options on the screenshot. 

    require 'watir-webdriver'
b = Watir::Browser.new
b.goto 'file://'+Dir.pwd+'/test_select.html'
options = b.elements(xpath: "//*[@id='testme']/option")
select_list = b.element(css: 'select#testme')
size = options.length
script = "return arguments[0].size = #{size}"
b.execute_script(script, select_list)
b.screenshot.save 'clicked_select.png'`