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