Mouse commands

List of commands

Click commands

Command Description
I.click
I.doubleClick
Click or double click on an element
I.rightClick Right click on an element

Hover commands

Command Description
I.hoverOn Hover on an element

Drag commands

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 commands

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.rightClick

Right 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.

Note that this action will typically open the default OS context menu, which cannot be interacted with by the test engine or captured in screenshot. Hence, this command will only be useful if you have a custom behavior on right click for the target element

Usage

I.rightClick(target)
I.rightClick(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.

I.hoverOn

Hover 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.

Usage

I.hoverOn(target);

Parameters

Parameter Type Remarks
target string Keyword to identify the element to click.
This is case-insensitive.

Example(s)

// using element's label, based on e.g. the element's text, tooltip, title, ARIA labels, etc.
I.hoverOn("Help")          // Hover on the element labelled "Help"

// using css selector
I.hoverOn("#menu-mobile")  // Hover on element with the id "menu-mobile"
I.hoverOn(".menu")         // Hover on element with the class ".menu"

// using xpath
I.hoverOn("//img[@class='question-card']") // Hover on image with the class "question-card"

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