UI-licious Documentation

Appearance

Keyboard Actions ​

Keyboard input is a common part of many workflows - entering user data into input fields, submitting forms, and navigating around a webpage using the keyboard.

UI-licious provides several commands for typing text and pressing keys, allowing you to simulate real user keyboard interactions accurately.

Filling text inputs using I.fill() ​

The easiest way to fill in a text input field is to use the I.fill() command, which takes two arguments:

  • element: the element to fill
  • value: the text to type into the input
js
I.fill("First Name", "John")
I.fill("Last Name", "Doe")

In this example, UI-licious fills in the input fields labeled First Name and Last Name with "John" and "Doe" respectively.

The I.fill command will automatically:

  1. locate the best matching <input> or <textarea> element
  2. set focus on the element
  3. replace the existing value by clearing the field and typing the new value

INFO

Note that the I.fill command will only target <input> and <textarea> elements.

Typing text using I.type() ​

In some cases, you may not be able to target an element using I.fill(). Common examples include:

  • WYSIWYG rich text editors
  • elements marked as contenteditable

In these situations, you can manually set focus on the element and then use I.type() to send keystrokes to the active element.

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

I.type() simulates normal user typing and sends each key one by one to the focused element.

Another important difference is that I.fill() replaces the existing value of an input field, while I.type() inserts text at the current cursor position. When you want to append text or modify part of an existing value, I.type() is more appropriate.

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

Learn more about I.type().

Pressing special keys ​

To press individual keys — such as Enter, Tab, or Escape — use the I.press() command or its convenience aliases.

js
I.click("Search movies")
I.type("Finding")
I.pressEnter() // press Enter to trigger search
I.see("Finding Nemo")

I.press("Escape") // press Escape to cancel search

Learn more about I.press().

Pressing combination keys (chords) ​

Some interactions require pressing multiple keys at the same time, such as keyboard shortcuts.

To press a key combination, pass an array of keys to I.press():

js
// Select all text
I.press(["Control", "a"])

// Copy selected text
I.press(["Control", "c"])

// Paste from clipboard
I.press(["Control", "v"])