How to find out which JavaScript events fired?

eljko_Filipin_17469 0
Viewed 158231

I have a select list:

<select id="filter">
  <option value="Open" selected="selected">Open</option>
  <option value="Closed">Closed</option>
</select>

When I select Closed the page reloads. In this case it shows closed tickets (instead of opened). It works fine when I do it manually.

The problem is that the page does not reload when I select Closed with Watir:

browser.select_list(:id => "filter").select "Closed"

That usually means that some JavaScript event is not fired. I can fire events with Watir:

browser.select_list(:id => "filter").fire_event "onclick"

but I need to know which event to fire.

Is there a way to find out which events are defined for an element?

browser-automation watir dom-events events javascript
5 Answers

Regarding Chrome, checkout the monitorEvents() via the command line API.

  • Open the console via Menu > Tools > JavaScript Console.

  • Enter monitorEvents(window);

  • View the console flooded with events

     ...
 mousemove MouseEvent {dataTransfer: ...}
 mouseout MouseEvent {dataTransfer: ...}
 mouseover MouseEvent {dataTransfer: ...}
 change Event {clipboardData: ...}
 ...

There are other examples in the documentation. I'm guessing this feature was added after the previous answer.

user_6084970

You can use getEventListeners in your Google Chrome developer console.

getEventListeners(object) returns the event listeners registered on the specified object.

getEventListeners(document.querySelector('option[value=Closed]'));
user_12441270

@Himaas -- Firebug has been replaced in favor of Firefox Developer Edition. If you go ahead and install it, you can log events by opening the dev tools (Right Click > Inspect), then select Debugger, and then toward the bottom of the page you should see "Event Listener Breakpoints" with an unchecked checkbox called "Log". Check that checkbox. Now all you have to do is select the events you want logged in the list presented under "Event Listener Breakpoints". From there you will see the selected events logged to the console.

Here is an image to help illustrate: enter image description here

user_37889940
Related