Element commands

List of commands

To get and assert attributes on an element:

Command Description
UI.getAttribute Get the value of an attribute on an element.
UI.getAttributes Get the attributes names and values on an element as a map.
UI.hasAttribute Assert the presence or the expected value of an attribute on an element.
UI.doesNotHaveAttribute Assert the absence of an attribute on an element, or that the value of an attribute is not equals to a given string.

To get and assert CSS classes on an element:

Command Description
UI.hasClass Assert the presence of a CSS class on an element.
UI.doesNotHaveClass Assert the absence of a CSS class on an element.

To get and assert HTML for an element:

Command Description
UI.getHTML Get the outer HTML of an element
UI.getOuterHTML Get the outer HTML of an element
UI.getInnerHTML Get the inner HTML of an element

UI.getAttribute

Get the value of an attribute on an element.

Returns null if the attribute is not found on the element.

Usage

UI.getAttribute(target, attribute)
Parameter Type Remarks
target string Expression to target an element. This can be a text, CSS selector, or XPATH selector.
attribute string Name of the attribute to get the value of.

Example(s)

let signUpLink = UI.getAttribute("Register a new account", "href")
if(signUpLink !== null) I.goTo(signUpLink + "?promo=summersale")

Extract the href attribute from "Register a new account" element into a variable named signUpLink, which can then be used subsequently in the test. In this exmaple, the text of the element (assumed to be an <a> element) is use to target the element, but you can also use a CSS selector or an XPATH selector.


UI.getAttributes

Get the names and values of attributes on an element as a map.

Usage

UI.getAttributes(target)
Parameter Type Remarks
target string Expression to target an element. This can be a text, CSS selector, or XPATH selector.

Example(s)

Let's use an example radio button for reference:

<input id='backorder-product-checkbox' type="checkbox" class="pretty-checkbox" data-product-id="PRD_3820" checked/>

We can read the attributes of the checkbox to variable in our test script like this:

var attr = UI.getAttributes("#backorder-product-checkbox") // returns attributes as a json map object
var productID = attr["data-product-id"]

The attributes of the checkbox will be read to an json map object as such:

{
    "id": "backorder-product-checkbox",
    "type": "checkbox",
    "class": "pretty-checkbox",
    "data-product-id": "PRD_3820",
    "checked": ""
}

Note that attributes representing input state like checked or selected only indicate the default state of the input element but not its current state. If you want to get or validate the current state of selection input elements, use the I.selected or I.deselect commands.


UI.hasAttribute

Assert the presense or the expected value of an attribute on an element.

Usage

// assert the presense of the attribute on the target element
UI.hasAttribute(target, attribute)
// assert the value of the attribute on the target element
UI.hasAttribute(target, attribute, value)
Parameter Type Remarks
target string Expression to target an element. This can be a text, CSS selector, or XPATH selector.
attribute string Name of the attribute.
value string (Optional) Value expected for the attribute. Case-insensitive. If not provided, this command will simply assert that the attribute exists on the element.

Example(s)

Validate that an element should be disabled

I.goTo("https://mystore.com")
I.click("Login") // <- go to login page

// leave the username and password fields blank
I.fill("Username", "")
I.fill("Password", "")

// assert that the #login-button is disabled
UI.hasAttribute("#login-button", "disabled")

In this example, we can use the UI.hasAttribute to test if the #login-button element is disabled, when the Username and Password fields are empty.

Validate that the element attribute should have a specific value

I.goTo("https://mystore.com")
UI.hasAttribute("#summer-sale-banner", "campaign-id", "SUMMERSALE2020")

This test will pass if the #summer-sale-banner element exists on the page, and has the campaign-id attribute, with the value of SUMMERSALE2020.

UI.doesNotHaveAttribute

Assert the absense of an attribute on an element, or that the value of an attribute is not equals a given string.

Usage

// Assert that the element does not have an attribute
UI.doesNotHaveAttribute(target, attribute)
// Assert that the element does not have an attribute with an given value
UI.doesNotHaveAttribute(target, attribute, value)
Parameter Type Remarks
target string Expression to target an element. This can be a text, CSS selector, or XPATH selector.
attribute string Name of the attribute.
value string (Optional) Value that the attribute should not be equal to. Case-insensitive. If not provided, this command will simply assert that the attribute does not exist on the element.

Example(s)

Validate that an element should not be disabled

I.goTo("https://mystore.com")
I.click("Login") // <- go to login page

// assert that the #login-button is disabled initially
UI.hasAttribute("#login-button", "disabled")

// fill the username and password fields
I.fill("Username", "john")
I.fill("Password", "supersecretpassword")

// assert that the #login-button is no longer disabled
UI.doesNotHaveAttribute("#login-button", "disabled")

In this example, we can use the UI.hasAttribute to test if the #login-button element is not disabled, when the Username and Password fields are filled.

UI.hasClass

Assert the presence of a CSS class on an element.

Usage

UI.hasClass(target, cssClass)
Parameter Type Remarks
target string Expression to target an element. This can be a text, CSS selector, or XPATH selector.
cssClass string CSS class that should exist on the element.

Example(s)

I.goTo("https://mystore.com")
I.click("Login") // <- go to login page

// fill in the username, and wrong password
I.fill("Username", "john")
I.fill("Password", "WRONGPASSWORD") 
I.click("Login")

// assert that the #password-field-group has the "has-error" css class
UI.hasClass("#password-field-group", "has-error")

In this example, we can use UI.hasClass to check if the has-error CSS class is applied to an form field when the form is submitted with invalid values, like an invalid password.

UI.doesNotHaveClass

Assert the absence of a CSS class on an element.

Usage

UI.doesNotHaveClass(target, cssClass)
Parameter Type Remarks
target string Expression to target an element. This can be a text, CSS selector, or XPATH selector.
cssClass string CSS class that should not exist on the element.

Element HTML commands

There are three commands for getting the HTML for an element. These commands return a markup of an element as a string.

Usage

// get the outer HTML of an element
UI.getHTML(target)
UI.getOuterHTML(target)

// get the inner HTML of an element
UI.getInnerHTML(target)
Parameter Type Remarks
target string Expression to target an element. This can be a text, CSS selector, or XPATH selector.

Example(s)

Let's use this example button for reference:

<button id="sign-up-button">
  <b>Create</b> an account
</button>

We can read the outer and inner HTML of the button in our test script like this:


var outerHTML = I.getHTML("sign-up-button")
// outerHTML includes the html of the element and its contents:
// <button id="sign-up-button"><b>Create</b> an account</button>

var innerHTML = I.getInnerHTML("sign-up-button")
// innerHTML includes the html of the element's contents only:
// <b>Create</b> an account