Mouse commands

List of commands

Click
Command Description
I.click
I.doubleClick
Click or double click on an element
Drag
Command Description
I.dragTo Drag an element to another target element
I.dragBy Drag an element directionally by (x,y) pixel offset
I.dragUp Drag an element to the up by a given number of pixel
I.dragDown Drag an element to the down by a given number of pixel
I.dragLeft Drag an element to the left by a given number of pixel
I.dragRight Drag an element to the right by a given number of pixel
I.scrollBy Scrolls the page horizontally and vertically by a given number of pixels
Scroll
Command Description
I.scrollBy Scrolls the page horizontally and vertically by a given number of pixels
I.scrollUp Scrolls the page up by a given number of pixels
I.scrollDown Scrolls the page down by a given number of pixels
I.scrollLeft Scrolls the page left by a given number of pixels
I.scrollRight Scrolls the page right by a given number of pixels
I.scrollTo Scroll to a given coordinate on the page
I.scrollToTop Scroll to the top of the page
I.scrollToBottom Scroll to the bottom of the page

I.click / I.doubleclick

Click or double click on an element.

For image / icon elements, we'd strongly recommend that setting an aria-label for the target element, use I.click using the label. This will also help make your application more friendly to humans using accessibility tools.

If the click triggers a page load, note that the time taken to execute the command will include the time taken to load the page.

If the click opens a page in a new tab, the browser will automatically be switched to the new tab.

Usage

// Single click
I.click(target);
I.click(target, x, y);

// Double click
I.doubleClick(target);
I.doubleClick(target, x, y);
Parameters
Parameter Type Remarks
target string Keyword to identify the element to click.
This is case-insensitive.
x number Optional.
Offset the click x pixels right from the top-left corner of the target element.
y number Optional.
Offset the click y pixels down from the top-left corner of the target element.

Example(s)

Click on element with text
I.click("Log In")

Click on an element with the text "Log In".

Click on images / icons using aria-label or title

Image / icon elements can be clicked on using the aria-label or title attribute set on the element. We'd strongly recommend setting both, because aria-label also makes your application more friendly to humans using accessibility tools, and title gives your element a helpful tooltip for visual users.

Here, we will use this plus button with the tooltip "Add" for illustration:

<!-- Button with the tooltip "Add"-->
<button title="Add">
    <!-- Icon -->
    <i class="fa fa-plus"></i>
</button>

You can click on the button using its tooltip like this:

I.click("Add");
Click on element using CSS selectors
I.click("#login-btn")

Click on an element with its id property set to login-btn.

I.click(".login-btn")

Click on an element with its class property set to login-btn.

Click on element with offset
I.click("#map", 100, 100)

Clicks on 100 to the right and 100 down from the top-left corner of the element with the id map


I.dragTo

Drags an element to another target element

Usage

I.dragTo(element, target);
Parameters
Parameter Type Remarks
element string Keyword to identify the element to drag.
This is case-insensitive.
CSS / XPATHs may also be used.
target string Keyword to identify the target element to drop on.
This is case-insensitive.
CSS / XPATHs may also be used.

Example(s)

Drag elements using labels
I.goTo("http://jqueryui.com/resources/demos/droppable/default.html")
I.dragTo("drag me", "drop here")

Drags the element "drag me" to the target element "drop here".

Drag elements using CSS
I.goTo("http://jqueryui.com/resources/demos/droppable/default.html")
I.dragTo("#draggable", "#droppable")

Drags the element with the ID "draggable" to the target element with the ID "droppable".


I.dragBy

Drags an element directionally by (x,y) pixels right and down.

Usage

I.dragBy(element, x, y);
Parameters
Parameter Type Remarks
element string Keyword to identify the element to drag.
This is case-insensitive.
CSS / XPATHs may also be used.
x number Number of pixels to drag right. Use negative numbers to drag left instead.
y number Number of pixels to drag down. Use negative numbers to drag up instead.

Example(s)

I.goTo("http://jqueryui.com/resources/demos/droppable/default.html")
I.dragBy("drag me", 150, 75)

Drags the element "drag me" 150 pixels right, and 75 pixels down.


I.dragUp

Drags an element up by a given number of pixels

Usage

I.dragUp(element, y);
Parameters
Parameter Type Remarks
element string Keyword to identify the element to drag.
This is case-insensitive.
CSS / XPATHs may also be used.
y number Number of pixels to drag up.

Example(s)

I.goTo("http://jqueryui.com/resources/demos/droppable/default.html")
I.dragUp("drag me", 10)

Drags the element "drag me" 10 pixels up.


I.dragDown

Drags an element down by a given number of pixels

Usage

I.dragDown(element, y);
Parameters
Parameter Type Remarks
element string Keyword to identify the element to drag.
This is case-insensitive.
CSS / XPATHs may also be used.
y number Number of pixels to drag down.

Example(s)

I.goTo("http://jqueryui.com/resources/demos/droppable/default.html")
I.dragDown("drag me", 10)

Drags the element "drag me" 10 pixels down.


I.dragLeft

Drags an element left by a given number of pixels

Usage

I.dragLeft(element, x);
Parameters
Parameter Type Remarks
element string Keyword to identify the element to drag.
This is case-insensitive.
CSS / XPATHs may also be used.
x number Number of pixels to drag left.

Example(s)

I.goTo("http://jqueryui.com/resources/demos/droppable/default.html")
I.dragLeft("drag me", 10)

Drags the element "drag me" 10 pixels left.


I.dragRight

Drags an element right by a given number of pixels

Usage

I.dragRight(element, x);
Parameters
Parameter Type Remarks
element string Keyword to identify the element to drag.
This is case-insensitive.
CSS / XPATHs may also be used.
x number Number of pixels to drag right.

Example(s)

I.goTo("http://jqueryui.com/resources/demos/droppable/default.html")
I.dragRight("drag me", 10)

Drags the element "drag me" 10 pixels right.


I.scrollBy

Scrolls the page horizontally and vertically by a given number of pixels.

Usage

I.scrollBy(x,y);
Parameters
Parameter Type Remarks
x number Number of pixels to scroll right by. Use a negative number to scroll left instead.
y number Number of pixels to scroll down by. Use a negative number to scroll up instead.

Example(s)

I.scrollBy(200, -500);

Scrolls the page 200 pixels to the right, and 500 pixels up.


I.scrollUp

Scrolls the page up by a given number of pixels.

Usage

I.scrollUp(y);
Parameters
Parameter Type Remarks
y number Number of pixels to scroll up by.

Example(s)

I.scrollUp(50);

Scrolls the page 50 pixels up.


I.scrollDown

Scrolls the page down by a given number of pixels.

Usage

I.scrollDown(y);
Parameters
Parameter Type Remarks
y number Number of pixels to scroll down by.

Example(s)

I.scrollDown(50);

Scrolls the page 50 pixels down.


I.scrollLeft

Scrolls the page left by a given number of pixels.

Usage

I.scrollLeft(x);
Parameters
Parameter Type Remarks
x number Number of pixels to scroll left by.

Example(s)

I.scrollLeft(50);

Scrolls the page 50 pixels left.


I.scrollRight

Scrolls the page right by a given number of pixels.

Usage

I.scrollRight(x);
Parameters
Parameter Type Remarks
x number Number of pixels to scroll right by.

Example(s)

I.scrollRight(50);

Scrolls the page 50 pixels right.


I.scrollTo

Scrolls the given coordinate of the page.

If the page is sufficiently tall and wide, the page will be scrolled until the given coordinate is at the top left corner of the screen.

Usage

I.scrollTo(x,y);
Parameters
Parameter Type Remarks
x number x coordinate of the page to scroll to.
y number y coordinate of the page to scroll to

Example(s)

I.scrollTo(0, 500);

Scrolls to the (0, 500) coordinate of the page.


I.scrollToTop

Scroll to the top of the page.

This is the same as using the command I.scrollTo(0,0).

Usage

I.scrollToTop();

I.scrollToBottom

Scroll to the bottom of the page.

For infinite scrolling pages, this command will simply scroll to the end of the rendered content.

Usage

I.scrollToBottom();