UI-licious Documentation

Appearance

Validating Page Content ​

It is important to validate that the application is in the correct state and displaying the appropriate information or error messages to users at the right time.

In UI-licious, validation is commonly done by asserting whether specific text or elements are visible or not visible on the page.

Using I.see() to assert visibility ​

UI-licious provides the I.see() command to validate that a text or element is visible on the page.

js
I.click("Log In")

I.see("Dashboard")
I.see(".monthly-sales-chart")

In the example, the test validates that the text "Dashboard" and the element ".monthly-sales-chart" is shown to the user after the login.

Automatic waiting behavior ​

The I.see() command does not fail immediately if the target is not yet visible. Instead, it will keep retrying until the target becomes visible or the command times out. By default, UI-licious waits 15 seconds. You can change this using TEST.commandTimeout, which is useful for slower operations.

js
I.click("Generate report")

TEST.commandTimeout = 300 // wait for up to 5 minutes
I.see("Annual Report")

TEST.commandTimeout = 15 // reset back to default

Using I.dontSee() to assert absence ​

In some scenarios, you want to assert that a text or element is not visible on the page. This is common during loading states or after temporary UI elements are dismissed.

Use I.dontSee() to validate that a target is not visible:

js
I.click("Generate report")

// wait for loading animation to disappear
I.dontSee(".loading-spinner")

// then check for report
I.see("Annual Report")

If the target is visible on the page, I.dontSee() will wait for up to 15 seconds (or as configured via TEST.commandTimeout) for the element to disappear. The target must remain not visible for a minimum duration of 3 seconds before the step is considered successful.

Visibility Rules ​

An element is considered visible only if it can be seen by a real user. UI-licious checks visibility using the following rules:

  • the display css property must not be none
  • the visibility css property must not be hidden
  • the opacity css property must not be zero
  • the width and height must not be zero
  • at least part of the element can be scrolled into view (i.e. is not positioned off-canvas)

This visibility checks apply to both I.see() and I.dontSee().