Typing into fields

Filling forms is one of the most common actions on a webpage. Nearly every workflow involves entering text into a form field.

Filling input fields using I.fill

In most cases, the easiest way to fill an input field is to use the I.fill command:

// using text
I.fill("First Name", "John")

// using CSS
I.fill("#last-name-input", "Doe")

// using XPath
I.fill("//input[name='username']", "johndoe")

I.fill() accepts two arguments:

• element : the input field to target — by visible text, descriptive attribute, or CSS or XPath selector
• value : the value to fill into the input

The command will perform the following in sequence automatically:

1. Set focus on the input field
2. Clear any existing value
3. Type the value into the input field, one character at a time

How UI-licious identifies fields to fill

We strongly recommend using human-facing labels to target input fields, instead of CSS or XPath selectors, because it keeps tests readable and resilient to UI changes.

To find the best match for I.fill(), UI-licious evaluates potential targets based on intent — how strongly each element appears to be the input the tester meant to interact with.

UI-licious ranks matches in the following order of priority:

1. associated <label> elements
2. visible text content such as placeholder or the field's rendered value
3. descriptive attributes such as aria-label or title
4. the name attribute on the input element
5. surrounding or adjacent text

If multiple elements score equally based on intent, UI-licious chooses the element closest to other recently interacted elements.
This helps maintain context when multiple similar fields appear on the screen.

INFO

I.fill() strictly only targets <input> elements that accept text input and <textarea> elements.

To send keystrokes to non-standard editable content such as WYSIWYG rich text editors or contenteditable elements, use the I.type() command instead.

Typing into input fields using I.type

In some situations, it is more appropriate to use I.type of I.fill:

• when targeting a WYSIWYG rich text editor or a contenteditable element
• when you want to modify instead of replace the value in the field

Unlike I.fill, I.type() sends keystrokes to the active element at the current cursor position. Before using I.type(), you should set the focus on the input element:

I.click("#biography-editor")
I.type(`My favorite movie is "Finding Nemo".`)

Clearing input fields

To clear an input field, you may use I.fill() with an empty value, or I.clear():

I.fill("First name", "")
I.clear("Last name")

Verifying field values

To assert that an input field is filled with a specific text, use I.filled.

I.filled("First name", "John")