{{announcement.body}}
{{announcement.title}}

Protractor Tutorial: Handle Mouse Actions and Keyboard Events

DZone 's Guide to

Protractor Tutorial: Handle Mouse Actions and Keyboard Events

With keyboard and mouse actions, you can perform hover, drag and drop, keys up events. See how to use them with the Action class in Selenium Protractor!

· Performance Zone ·
Free Resource

At times, while performing automated browser testing, you often have to deal with elements, which reveal only after you hover on the menu or after you click on them. In such cases, you can opt for using the action class for keyboard and mouse actions in Selenium Protractor. With the action class, you can automate representation of mouse activities, such as a mouse clicking, mouse hovering, etc.

The Selenium Protractor framework has in-built capabilities to manage various forms of keyboard and mouse events. This handling of keyboard and mouse events is achieved using the Advanced User Interfaces API. These are web-based API for emulating complex movements performed by the user. 

In this Protractor tutorial, I’ll take a look at various aspects on how to handle mouse and keyboard actions in the Selenium Protractor framework. Along with a few examples on the frequently used keyboard and mouse actions in Selenium Protractor. I’ve already covered how to run tests on Selenium with Protractor and what are the requirements for it in a previous article.

Mouse Actions in Selenium Protractor

Mouse actions are the representation of mouse activities, such as hover, drag, and drop, clicking multiple elements. They can be easily simulated in Selenium Protractor with the predefined methods for mouse movement, clicking, and others. 

The following are some of the mouse actions in Selenium Protractor to automate events while performing Selenium test automation : 

  • mouseMove(): Performs the mouse movement on the web page.

  • dragAndDrop( source , target ): This performs the click of the mouse at the present location i.e. the source and moves the cursor to the desired location i.e. the target without releasing the mouse. Therefore, it moves the element from source to target.

  • click(): Performs the mouse click event on the web element.

  • doubleClick(): Performs a mouse double click event on the web element.

  • mouseUp(): Performs a mouse up event on the web page.

  • mouseDown(): Performs a mouse down event on the web page.

  • contextClick(): This action performs a right-click on any target element on the web page.

  • clickAndHold(): This action performs an event of mouse click at the present location without releasing the button.

  • dragAndDropBy(source, xOffset, yOffset): This action performs a click and holds mouse event on the web page at the source location. It shifts the value by an offset value provided in the argument and then frees mouse actions in Selenium Protractor. Here, xOffset shifts the mouse horizontally and yOffset shifts the mouse vertically.

  • moveByOffset(xOffset, yOffset): This action moves the mouse from its current location or the starting location i.e. (0,0) to the specified offset. Here, xOffset is used to set the horizontal offset (negative value–move the cursor to the left) and yOffset is used to set the vertical offset (negative value–move the cursor upwards).

  • moveToElement(toElement): This action moves the mouse to the middle of the web element.

  • release(): This function releases the pressed mouse left button at the current mouse position.

An important thing to note here is that we need to call the perform() method after making any mouse actions in Selenium Protractor on the webpage. If we don’t use the perform function after calling any mouse action, then the actions will not have any effect on the web page.

Move and Hover Mouse Actions In Selenium Protractor

While performing Selenium test automation, you’d often come across test cases where you’d have to move the mouse cursor and hover over an item in the browser. This can be easily done with the mouseMove() method of mouse actions in the Selenium Protractor framework library. This helps us to get  access to elements on the HTML page that get exposed only after you click on them, like the menu or the sub-items. 

In the following example, in this Protractor tutorial, I’ll have a look at the first action object. I’ll move the mouse cursor on the menu item through mouse actions in Selenium Protractor, and move it to the submenu item. After this, I’ll hover on the menu that can be fetched with the id as 'hover-menu'. This approach is also known as mouseHover().

JavaScript


Drag and Drop Mouse Actions In Selenium Protractor

The dragAndDrop() action of the mouse event drags the source element to the target element via mouse actions in Selenium Protractor. After this, you can perform any other operation, as per your requirement. This action accepts two major parameters as inputs : 

  • Source: the one which we want to pull.

  • Target: the location where we would like to drag and drop.

In the following example for this Protractor tutorial, I’ll show you how to perform the drag and drop mouse actions in Selenium Protractor.

JavaScript


Click Mouse Actions In Selenium Protractor

The click() action is one of the most commonly used methods in the mouse event. Selenium click button method performs a click on the given element at a given position and then executes certain actions on the element. The location of the elements can vary depending on the size of the display on the screen.

In the following example, we execute the click action:

JavaScript


Double Click Mouse Actions in Selenium Protractor

Similar to the click method, the doubleClick() method simulates a double click of the mouse. Generally, when an element is double clicked it either activates the particular element or lifts that object from a certain point.

In the following example, we will perform a double clicking event on the browser.

JavaScript


Mouse Up and Mouse Down With Example

As we click up and down the button on the mouse to perform an activity. Similarly, the mouse up and mouse down methods in Protractor are used to click up and down the primary mouse button. This method is flexible and varies upon the option that we configure for the primary and secondary mouse buttons in the control panel based upon our choice. Suppose, if we are right-handed, we may choose the right key as primary else for left-handed we choose the primary keys as left.

In the following example, a mouse up and mouse down events are executed simultaneously.

JavaScript


Keyboard Actions in Selenium Protractor

The following are a few important methods that are present in the framework and can be used to emulate keyboard actions in the browser with Protractor:

  • keyUp(key): This keyboard action sends a key press without releasing it. Further subsequent acts can presume that this is pressed. For example - Keys.ALT, Keys.SHIFT, or Keys.CONTROL .

  • keyDown(key): This function performs a key release for the above control keys that are pressed.

  • sendKeys(keysTosend): This function sends a series of keystrokes to the web element.

Similar to the mouse actions in Selenium Protractor, we need to call the perform() method after making any keyboard action on the webpage. If we don’t use perform() method after calling any keyboard action, then these actions will not have any effect on the web page.

Key Up, Key Down and Send Keys With Example

The keyboard action has the Key up and Key down as the main methods that are used to trigger the API function keys in the Protractor. These approaches would be helpful if you want to hit helper keys as standard as CTRL+A, SHIFT+A, CTRL+SHIFT+Delete.

In this example for this Protractor tutorial, I’ll show this functionality by entering the character "P" value in the text bar of the web page. Later with the help of pressing the Shift key, we will pass the lower case using the sendKeys function. Moreover, if you look at the bigger picture you’ll notice that all of the keyboard actions are being used together.

JavaScript


Mouse Actions in Selenium Protractor on Cloud Selenium Grid

We can run the same Selenium test automation script for handling mouse behavior on a cloud Selenium grid platform. It gives us the opportunity to run tests across 2000+ real-time browsers and devices in parallel. You only need to make a few changes in the test script, i.e. to create a driver to connect to the LambdaTest hub. Below is the revised script with the requisite modifications.

JavaScript


Test Script :

JavaScript


As seen above, by including a few lines of code, you can connect to the LambdaTest Platform and execute our regular test script in the cloud. In order to have this configured, you need to create the desired capability matrix.

You can visit LambdaTest Selenium desired capabilities generator for generating the appropriate configuration. Using this, you can determine the environment in which you will conduct the tests. Moreover, you only need to pass our LambdaTest username and access key to the config file that will securely recognize us on the LambdaTest platform.

LambdaTest platform

All In All

With this comes the end of this Protractor tutorial! To summarize, I’ve explored how you can simulate mouse and keyboard behavior in a browser using various functions in the Selenium Protractor framework. With Selenium Protractor, you also get the  flexibility to combine mouse and keyboard actions for automated browser testing. After executing the functions, perform() is used to execute the actions. 

This is the end! Or at least the end of the beginning, we’ve covered quite a few topics on Selenium Protractor now, I'd like you to go ahead and read them. Also, do click on the bell icon for any future notifications on new blogs and tutorials. Do share this article with your friends looking for the answers on handling mouse actions and keyboard events, a retweet or a social is always welcome. Happy Testing!!!

Topics:
javascript, javascript framework, protractor, selenium automation

Published at DZone with permission of Harshit Paul , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}