autocomplete dropdown test with ruby (watir)

Question

i'm trying to create watir test that fills inn a textfield by writing feks

"lon" and waiting till the dropdown is triggered and then clicking on the first element in the list.

Writing "lon" should trigger many options like "London, England, Storbritannia", London, Kentucky, USA and etc. Is it somehow possible to this with watir?? thnx in advance.

This is what my code looks like until now, it odes not work though and i'm wondering where i have missed something.

def test_scriptflight_autocomplete @site.navigate_to(:travel, :flight) from_field = @site.ie.text_field(:id, "locOriginName") to_field = @site.ie.text_field(:id, 'locDestinationName') from_field.set('oslo')

# need to fire a key press event after setting the text since the js is handling
# trigger the autocomplete (requires a 'keydown')
from_field.fire_event('onkeydown')   

# wait until the autocomplete gets populated with the AJAX call
@site.ie.wait_until{@site.ie.div(:id, 'onlinesearch').lis.length > 0}
puts @site.ie.div(:id, 'locOriginName ').lis.length
puts @site.ie.div(:id, 'locOriginName').li(:index, 5).text

# find the li you want to select in the autocomplete list and click it
@site.ie.div(:id, 'from-field').li(:text, 'Oslo, Oslo, Norge').click

end

Answer 1

Me and a colleague(Magnar) at work found this blog that helped us to find the answer i was looking for.

http://blog.saush.com/2008/05/using-rspec-and-watir-for-functional-testing-in-web-applications/

class Watir::IE  
    def fire_keydown_on(element_id, key)  
        ie.Document.parentWindow.execScript("key = document.createEventObject(); key.keyCode = #{key}")  
        ie.Document.parentWindow.execScript("document.getElementById('#{element_id}').fireEvent('onkeydown', key)")  
    end  
end

From the Blog:

We just added a new method ‘fire_keydown_on’ for the IE class, which takes in the element id, and the key. This method calls Javascript to create an event object (this only works in IE, by the way) and sets the key code to be ‘13′, which is the carriage-return key (the enter key). The it calls Javascript to get the HTML element (using the element id) and fire the ‘onkeydown’ event on it, while passing on the event object it just created.