How to click on an element generated by javascript with Watir?

Question

I'm developing an jsf based application using a library called primefaces. Primefaces generates a web page containing javascript functions that are generating some buttons. Buttons are not visible in the source code of the page (like < button>...< /button>, and so Watir can't click on these to test something.

My question is : is it possible to recover the id or class of button generated by a javascript function with Watir ?

Thanks

If they are generated via javascript, they will not appear in the source. However, if you use puts browser.html you should see them. — Justin Ko
Thanks to you, i've discovered that the delay needed to load the page wasn't long enough : the web page where i was looking for the button wasn't the good one. So I had a sleep instruction to let the browser load the good page and that works fine now. Thanks ! — Derbie
You might want to take a look at the wait methods in Watir rather than using sleeps. — Justin Ko

TrinitronX TrinitronX · Accepted Answer · 2013-02-21T00:02:51

In practice, using sleep is not recommended. Depending on the amount of time the browser & JavaScript code takes to perform its action, you could run into race conditions and end up with tests that only work sometimes.

If you're considering using sleep, use wait_until instead. It will make your test code more resilient to timing issues in those cases where you really need to use it.

As @JustinKo recommended, you should probably be using Watir's wait methods to wait until the element is displayed on the page.

In your case, you'd want to try something like these examples:

# Assuming your browser object is named: $b
#Ex: $b = Watir::Browser.new :chrome
$b.button(:id => 'my_button').wait_until_present
Watir::Waiter::wait_until { $b.button(:id => 'my_button').visible? }

If you are having trouble finding the element on the page, you might want to look a the source code in FireBug or the Developer Tools console in Chrome (Shift+Ctrl+I). Try to find some identifying attribute for that button, or a container element with an id, class, name or some other identifying attribute.

However, at this time I'm not sure that there is a way to detect whether an element was generated or added to the DOM by JavaScript.

How to click on an element generated by javascript with Watir?

1 Answers