Join us on :

Mouse Operations

Mouse events are handled using element and browser in WebdriverIO. Mouse Operations/events includes events like Click, double click, right click, mouseout, mouse move.

Following are the frequently used keyboard and mouse events provided by the element and browser.

Operations based on element object

  • click
  • Mouse hover
  • doubleClick
  • Drag and drop


Operations based on bowser object

  • positionClick
  • Mouse Hover
  • positionDoubleClick
  • buttonDown
  • buttonUp

If you notice in above list, there are few functions which performs same operations.

click from element object in WebdriverIO

Click

click() function is used to click at the current element object on which we have called the click() function. click() function generally scrolls to and then clicks the selected element.


									$(selector).click()
									


Code for click an element


									it('Mouse Operations with WebdriverIO', () => {
										browser.url('https://chercher.tech/practice/popups')
										$("//input[@name='prompt']").click()
									});
									


This function might throw, Element is not clickable at point (x, x). Other element would receive the click, when you try to click an hidden element or when your target element is covered by some other element.

Mouse hover | moveTo() from element

moveTo() function is used to move the mouse to the middle of the web element. It accepts two parameter as x and y offset, to move the cursor to that offset from the given element.

moveTo() function is nothing but Mouse hover.

									$(selector).moveTo(xoffset, yoffset)
									



									it('Mouse Operations with WebdriverIO', () => {
										browser.url('https://chercher.tech/practice/popups')
										$("//button[@id='sub-menu']").moveTo()
									});
									


moveto-function-webdriverio

In below code we are trying to use the offset with moveTo() function present in element


									it('Mouse Operations with WebdriverIO', () => {
										browser.url('https://chercher.tech/practice/popups')
										$("//input[@name='alert']").moveTo(30,60)
									});
									


moveto-mouse-offset

The top left corner of the given element will be considered as (0,0), and the towards right considered as positive X and Towards bottom considered as Positive Y. mouse-move-coordinate-system

doubleClick() in WebdriverIO

doubleClick() function is used to perform a double click at the currently given element on a web page.


									$(selector).doubleClick()
									


Code for WebdriverIO doubleClick() function


									it('Mouse Operations with WebdriverIO', () => {
										browser.url('https://chercher.tech/practice/popups')
										$("//input[@id='double-click']").doubleClick()
									});
									


double-click-webdriverio

Drag and drop | dragAndDrop()

dragAndDrop() function is used to perform first click and hold event on the current object and then move that object to the location of the target web element and release the mouse after that.

It accepts two parameters,

  • target (optional): destination selector or to the place where we want to drag the source element
  • duration (optional) : how long the drag should take place

									$(selector).dragAndDrop(target, duration)
									


Code for drag and drop with WebdriverIO


									it('Mouse Operations with WebdriverIO', () => {
										browser.url('https://chercher.tech/practice/drag-drop')
										$("#box1").dragAndDrop($("#destination"))
									});
									


positionClick

positionClick() function used with combination of moverTo() function from the element object. First we have to move the mouse to required position and then click it.

Rather than performing these two operations we can directly use click() function from element object.


									browser.positionClick()
									


Code for positionClick() function in webdriverio


									it('Mouse Operations with WebdriverIO', () => {
										browser.url('https://chercher.tech/practice/popups')
										$("//input[@name='prompt']").moveTo()
										browser.positionClick()
									});
									


position-click-webdriverio

Mouse Hover | moveToElement

moveToElement() function is used to move the mouse to the web element. It accepts three parameters

  • element
  • X offset from element
  • Y Offset from element

This method is used to perform the mouse move from given element position to given offset (x-offset, y-offset). Negative value of x-offset means moving the mouse left and positive value means moving the mouse right.

Negative value of y-offset means moving the mouse up and positive value means moving the mouse down.


									browser.moveToElement(element, xoffset, yoffset)
									


Not able to make it work, if you know working code put it in comment box

positionDoubleClick

positionDoubleClick() function is used to double click the current position of the mouse cursor, so we have to move the mouse using moveToElement() or moveTo() function in webdriverio, and then we got to use positionDoubleClick() function.


									it('Mouse Operations with WebdriverIO', () => {
										browser.url('https://chercher.tech/practice/popups')
										$("#double-click").moveTo()
										browser.positionDoubleClick()
									});
									


position-double-click-webdriverio

buttonDown & buttonUp in webdriverIO

Click and hold the left mouse button (at the coordinates set by the last moveto command). Note that the next mouse-related command that should follow is buttonup.

Any other mouse command (such as click or another call to buttondown) will yield undefined behavior. We can use the moveTo() method without any worry

buttonUp() will leave the button that have been pressed, both buttonDown & buttonUp accepts option parameter, which is the right button or left button or middle.

enum: LEFT = 0, MIDDLE = 1 , RIGHT = 2, defaults to the left mouse button if not specified

									it('Mouse Operations with WebdriverIO', () => {
										browser.url('https://chercher.tech/practice/drag-drop')
										$("#box1").moveTo()
										browser.buttonDown()
										$("#destination").moveTo()
										browser.buttonUp()
									});
									


About Author

Article is written by Pavan (a) KarthiQ. Well, I am serving notice period in an MNC, Bangalore. I thought to enrich every person knowledge a little, I always have a feeling, when we teach something, we will learn more than what you know. Knowledge is the only thing that doubles when you spend it.

I have also created the reporter for Protractor Jasmine. Use for your projects without any hesitation

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions