How to create a perfect fake jQuery Event object

user_12416396 0
Viewed 742

I am automating tests for a website and there's some event I cant trigger correctly using javascript in -especially but not limited to- IE. (i am using selenium but every other option didn't work so javascript is my last hope)

the event's function seems to use a lot of fields in the jquery Event object, I've tried following the official jquery documentation but while it shows most fields name it doesn't show how to fill them (because this is not what you do with it usually, but in my case it is)

my question is the following:

in order to fake a mouse event what and how do I fill fields (how as to how do I make these values) of the Event object using jQuery.Event("event type",{param1:value1,param2:value2,...}) (or another method if there is more efficient to do this)

this event object is to be used with element.trigger('eventname',EventObject)

jquery-events jquery javascript
3 Answers

Did You read this jQuery documentation Triggering Event Handlers ?

Excerpt:

How can I mimic a native browser event, if not .trigger()?

In order to trigger a native browser event, you have to use document.createEventObject for < IE9 and document.createEvent for all other browsers. Using these two APIs, you can programmatically create an event that behaves exactly as if someone has actually clicked on a file input box. The default action will happen, and the browse file dialog will display.

The jQuery UI Team created jquery.simulate.js in order to simplify triggering a native browser event for use in their automated testing. Its usage is modeled after jQuery's trigger.

Basically, the whole stuff can be summarized as follows:

function Settings() {
  this.bubbles = true;
  this.cancelable = true;
  this.view = window;
  this.screenX = 0;
  this.screenY = 0;
  this.clientX = 1;
  this.clientY = 1;
  this.ctrlKey = false;
  this.altKey = false;
  this.shiftKey = false;
  this.metaKey = false;
  this.button = 0; /* Which mouse button was pressed */
  this.relatedTarget = null;
  return this;
}

function simulateMouseEvent(type, target, s) {
  var e = document.createEvent("MouseEvents");
  e.initMouseEvent(type, s.bubbles, s.cancelable, s.view, 0, s.screenX, s.screenY, s.clientX, s.clientY, s.ctrlKey, s.altKey, s.shiftKey, s.metaKey, s.button, s.relatedTarget);
  target.dispatchEvent(e);
}

var settings = new Settings, target = document.getElementById('myButton');

/* Try with something like this: */
simulateMouseEvent('mousedown', target, settings);
simulateMouseEvent('mouseup', target, settings);
simulateMouseEvent('click', target, settings);

Source: https://github.com/jquery/jquery-simulate/blob/master/jquery.simulate.js

The full parameters list is described here: MouseEvent.initMouseEvent()

user_48455660

//create an Event object in JQuery

var event = jQuery.Event("damn");
event.param1 = "value1";
event.param2 = "value2";

//trigger the event

 $( ".some_element" ).trigger( event );

//recive the event

$('.some_element').on("damn", function(e){
    console.log(e.param1,e.param2);
});
user_81309040

You can use trigger() function to achieve this. Trigger the event like this

  $('.some_element').trigger("damn", {param1:"value1",param2:"value2"});

and you can listen from any where

$('.some_element').on("damn", function(e,obj){
console.log(obj.param1,obj.param2);
});

I hope this works!!

user_81309040
Related