Click

Use the I.click command to click on an object with the left mouse button.

Use the I.doubleClick command to double click on an object with the left mouse button.

Use the I.rightClick command to click on an object with the right mouse button.

The easiest way to click an element is to target its text content. Note that if a text matches multiple elements, UIlicious will pick the most relavent match.

Here's an example of a web page with a green button labeled "Enter".

A website with the button labeled "Enter"
A website with the button labeled "Enter"

We can target the button with the text "Enter" with the following:

I.click("Enter") // This will press the button with the text "Enter"

Here's another example, with a web page that has a link with the text "Log in".

A website with a "Log in" linked text in the top navigation menu
A website with a "Log in" linked text in the top navigation menu

I.goTo("https://www.fareastflora.com/")
I.click("Log In") // This will press the button with the text "Log in"
I.amAt("/customer/account/login/")

 

Clicking on icon buttons / images

If a graphical element such as an icon or an image has an accessibility label set using the aria-label attribute, or tooltip set using the title attribute, or alternate text set using the alt-text attribute, you can target the element using any of these labels. If the element does not have any of these attributes set, refer to the next session on clicking using CSS selectors and XPATHs.

Here's an example to show you how to click on various icon buttons on Google Maps which has accessibility labels for all icon buttons.

I.goTo("https://www.google.com/maps")
I.click("Accept all") // accept cookies
I.fill("Search", "Merlion, Singapore")
I.click("Search") // clicks the "magnifying glass" icon
I.click("Zoom in") // clicks the "plus" icon
I.click("Zoom out") // clicks the "minus" icon



 
 
 

Clicking using CSS and XPATH

You can also click on an element using a CSS or XPATH selector. Note that if a selector matches multiple elements, UIlicious will pick the most relavent match.

In this website below, we can inspect the "Track Order" link button to find that it has an id attribute set to track-icon.

Here's an example to target the "Track Order" button using the CSS selector #track-icon:

I.goTo("https://www.fareastflora.com/")
I.click("#track-icon") // click the "Track order" button
I.amAt("/track-order") // redirected to "/track-order" page

 

Here's an example to target the "Track Order" button using the XPATH selector //a[@id='track-icon']:

I.goTo("https://www.fareastflora.com/")
I.click("//a[@id='track-icon']") // click the "Track order" button
I.amAt("/track-order") // redirected to "/track-order" page

 

Clicking using an offset

In some scenarios, it is not possible to target an element directly using its text, a CSS selector or an XPATH selector. We can try to targeting it using an offset from a reference element instead.

For example, in this map application, we want to click on specific points on the map, but the points do not have an DOM element.

We want to click on the circled point in this map application.
We want to click on the circled point in this map application.

We can use the I.click(element, x, y) command with a X pixel offset and a Y pixel offset from the left-corner of an element. To click on the point that is circled on the map, we can click 550px to the right and 480px down from the left-corner of the //canvas element, using I.click("//canvas", 550, 480).

I.goTo("https://developers.arcgis.com/javascript/latest/sample-code/layers-featurelayer-collection/live/")
I.click("//canvas", 550, 480)
I.see("Middle of nowhere")


 


Specifying negative X offset will target X pixels right from the top-left corder of the reference element.

Specifying a negative Y offset will target Y pixels up from the top-left corner of the reference element.

Resolving multiple matches

If a click command matches multiple elements, UIlicious will pick the most relavent element to click on, based on:

  1. Semantics: HTML elements that are clickable by W3 specification are preferred, such as buttons and links.
  2. Match %: Elements with a closer match to the phrase are preferred. E.g. I.click("Search") will prefer to target a button that says "Search" over a button that says "Research".
  3. Context: Elements that are closer to element have the most recent interaction are preferred.

Automatic wait until element is visible

If no visible elements are found for the click command, UIlicious will automatically wait and search for the element again up until 15 seconds. You can increase this threshold by setting the TEST.commandTimeout property to any number of seconds at any point of the test. If no visible elements are found after the command times out, the command will fail with and error indicating that no elements are found. You can also use the I.wait command if you want the test to always wait for a fixed amount of time.

Last Updated: