UI-licious Documentation

Appearance

Mouse Actions ​

Mouse interactions are fundamental to most browser workflows — clicking buttons, hovering over elements, opening context menus, and dragging items.

Clicking elements ​

The most common mouse interaction is a click. Use the I.click() command to click on a visible element. You can target an element by its text, or using a CSS selector, or XPath.

js
// click using text
I.click("Submit")

// click using css
I.click("#login-button")

// click using xpath
I.click("//button[type='submit']")

Under the hood, I.click() performs the following actions:

  • locates the target element
  • scrolls it into view if needed
  • moves the mouse to the center of element
  • performs a left-click

Double clicking ​

Some interactions require a double-click, such as selecting text or opening items.

Use I.doubleClick() to double click an element.

js
I.doubleClick("File Name")

Right clicking ​

To open a context menu or trigger right-click behavior, use I.rightClick().

js
I.rightClick("Image Preview")

Clicking with offset ​

In some situations, you may want to click an element with at a specific offset instead of its center. You can provide a horizontal and vertical offset from the top-left corner of the element's bounding box.

js
I.click("#map", 400, 600)

This clicks at 400 pixels right and 600 pixels down from the top-left corner of the "#map" element.

You can also click at a position relative to the top-left of the viewport (the visible part of the page) by specifying offsets without an element:

js
I.click(23, 100)

This clicks at the position (23, 100) on the viewport.

Hovering over elements ​

Some UI elements reveal content only when hovered, such as tooltips or dropdown menus.

Use I.hoverOn() to move the mouse over the element without clicking.

js
I.hoverOn("Account Menu")
I.see("Logout")

Dragging elements ​

To simulate drag-and-drop interactions, use the I.dragTo() or I.dragBy() command.

Use I.dragTo() to drag an element and drop it on another element.

js
I.dragTo("Task A", "In Progress")

This drags the element "Task A" and drops it at the center of the element "In Progress".

Use I.dragBy() to drag an element by a specific distance in pixels.

js
I.dragBy("#map-pin", 100, 302)

There are also convenience methods for dragging an element in a specific direction:

js
I.dragLeft(".slider", 50)
I.dragRight(".slider", 50)
I.dragUp(".volume-control", 10)
I.dragDown(".volume-control", 10)

UI-licious performs the following when dragging an element:

  • locates the drag element (and the drop element if specified)
  • scrolls the drag element into view if needed
  • moves the mouse to the center of the element
  • holds the left mouse button
  • moves the mouse to the target position
  • releases the left mouse button

Scrolling ​

UI-licious provides the following commands for scrolling the page:

  • I.scrollBy(x, y) : to scroll the page x pixels right and y pixels down
  • I.scrollUp(y) : to scroll the page y pixels up
  • I.scrollDown(y) : to scroll the page y pixels down
  • I.scrollLeft(x) : to scroll the page x pixels to the left
  • I.scrollRight(x) : to scroll the page x pixels to the right
  • I.scrollToTop() : to scroll the page to the top
  • I.scrollToBottom() : to scroll the page to the bottom

INFO

If the page uses lazy loading to load additional content near the bottom, UI-licious scrolls only until the end of the currently rendered content instead of infinitely scrolling.