JavaScript Event Simulators in Selenium

Each browser has their own WebDrivers. Chrome has Chrome WebDriver, Mozilla has Gecko and Internet Explorer has IE WebDriver. So why are these webdrivers used for? The answer is, if you want to automate a web application, there has to be compatibility with the browser on which you want to automate your web application. Hence you need webdrivers.

Now the next problem we encounter as we start using these webdrivers is that:

1. In some of the browser versions (old or new), you’ll encounter compatibility issue either with the browser or with the selenium itself. Suppose if the automation script is totally written on a specified version of selenium, there’s always a confusion to either update the selenium or the driver. With either of them, there’s no guarantee that the automation scripts written will work as expected.
2. Features that your web application supports may not work with the webdriver that you have chosen and also with the version of Selenium.
3. There is no proper documentation on how to include or use JavaScript with the arguments of Selenium and also there is no proper documentation on how to work with JavaScript simulators when above 1 & 2 points were encountered.

This post will ensure that the all the events were handled using JavaScript without using any predefined functions / methods that are present in the Selenium documentation. One can write JavaScript function and then execute it as Selenium supports JavaScript and also web browsers has their own set of drivers for executing Selenium files on web browser.

It has to be kept in mind that, when we say JavaScript is used, one has to take care of methods that a browser supports. Old browsers such as IE 8 or 9 may not support all the functions or methods that you use.

So how do we use event simulators in Selenium file?

Suppose say we want to perform a click operation on an element. We can do that quite easily like this:

function simulateSingleClick(el) {
    var evt = document.createEvent('MouseEvents');
    evt.initEvent('click', true, true);
    return el.dispatchEvent(evt);
}

simulateSingleClick(document.getElementById('id'));

Let us go through each line of code written above in simulateSingleClick function.

1. The function takes one argument which is an element on which the event has to be triggered.
2. An event is created using document.createEvent method which takes type as an argument. It specifies type of event one wishes to trigger. Here, we are intended to use MouseEvents.
3. After creating an event, event has to be initiated. This is done by using evt.initEvent method. This method takes three arguments in which one is event type. Second is event bubble which is a boolean value and the third argument is cancelable which is also a boolean value. We pass boolean values as true because we want to event bubble to happen on the passed element to the function and it should not be canceled.
4. After the event has been initiated, event has to be dispatched on the selected element. So we use element.dispatchEvent method which takes one argument which is event that has been initiated.
5. And we return the dispatched element.

So how simple is that.

In same way, we can write any MouseEvents simulator using above function. Just replace the event type that has to be triggered on the selected or passed element. If one has to double click on an element, you can do like this:

function simulateDoubleClick(el) {
    var evt = document.createEvent('MouseEvents');
    evt.initEvent('dblclick', true, true);
    return el.dispatchEvent(evt);
}

simulateDoubleClick(document.getElementById('id'));

You can refer this link for applicable events that are supported. (Mouse Events)

So how do we use this function in Selenium file?

Quite simple. Just include this function as inline in the Selenium file using Selenium’s execute script function.

For example:

driver.executeScript("function simulateSingleClick(el) {var evt = document.createEvent('MouseEvents');evt.initEvent('click', true, true); el.dispatchEvent(evt);}simulateSingleClick(document.getElementById('id'));

For reference: Dispatch Event

Best Open Source Business Intelligence Software Helical Insight is Here

A Business Intelligence Framework

Free
Download

-By
Uma Maheswar
Helical IT Solution