Mouse Operations in WebdriverIO

Table of content

• Mouse Operations in WebdriverIO
• click from element in WebdriverIO
• Mouse hover | moveTo() from element
• doubleClick() in WebdriverIO
• Drag and drop in WebdriverIO
• postionClick in WebdriverIO
• Mouse Hover | moveToElement
• positionDoubleClick
• buttonDown & buttonUp in webdriverIO

Mouse events are handled using element and browser in WebdriverIO. Mouse Operations/events include events like Click, double click, right-click, mouse out, 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 browser object

• positionClick
• Mouse Hover
• positionDoubleClick
• buttonDown
• buttonUp

If you notice in the above list, there are few functions that perform the same operations.

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()
});

moveTo() function is used to move the mouse to the middle of the web element. It accepts two parameters 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()
});

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

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

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.

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()
});

dragAndDrop() function is used to perform the click and hold an 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() function used with a combination of moverTo() function from the element object. First, we have to move the mouse to the 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()
});

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 a given element position to a given offset (x-offset, y-offset). A negative value of x-offset means moving the mouse left and a positive value means moving the mouse right.

A negative value of y-offset means moving the mouse up and a positive value means moving the mouse down.

browser.moveToElement(element, xoffset, yoffset)

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()
});

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 a 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 has been pressed, both buttonDown & buttonUp accepts option parameter, which is the right button or left button or middle.

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