How to use Watir with Javascript triggered elements

Can someone tell me how to click with Watir on element that is triggered with javascript events.

For instance, on http://www.kissmetrics.com/, on the homepage, if I click on the 'Learn more' button on the example image, the will bring up a lightbox. Then I can click n the 'Get Started' button to move on the the registration page.

How can I simulate the thing in Watir? Ie. how can I click on first on 'Learn more', then on the 'G开发者_JAVA百科et started' button?

Thanks for any help.

well actually there are javascript events fired when you click, but they may not be the ones the particular element is looking for. And sometimes an element has to first be put into a state where you can click on it via something like a mouseover.

so the trick is generally figure out what events need to be fired (see Zeljko's answer) and then use the .fireevent method to fire those events against the elements that need to see them, in the order that is required.

a lot of times you pretty much have to reverse engineer what the developers are doing by looking to see what elements in the html are looking for what events.

In this specific case, if your intent is to click the BLUE learn more button that seems to be on top of some kind of screen shot, then examining the HTML or The DOM shows that it has a convenient ID value which could be used. You can also see it is 'wired' to respond to the onclick event, and more importantly it is opening a new modal window (in this case a div that looks like a popup) onclick="new Modal('learn_more_content', {top: 110, modalClass: 'borderless'}).show() . so the following code ought to work to launch the modal

 browser.button(:id, "learn_more_btn").click

Then to click the green 'get started' button (of which there are several so we need a way to indicate which one)

browser.p(:class, "cta").button(:class, "green button has_arrow").click

I think the problem is that JavaScript event(s) are not fired when you click a link with Watir. This could help: How to find out which JavaScript events fired?

I've tested this in irb and it works:

browser.span(:text, 'Learn more').click
browser.span(:text, 'Get Started').click

As long as it's in the DOM you can get to it.