UI-licious Documentation

Appearance

Checking checkboxes and radio buttons ​

Checkboxes and radio buttons are commonly used to allow users to make a choice.

To check a checkbox or radio button, I.select can be used.

Checking an option ​

To select a simple checkbox, you can use the visible label or value of the option:
Demo: Simple Checkbox
UI
HTML
<!--[--><label>
  <input id="agree-to-terms" type="checkbox"> I agree to the terms and conditions.
</label>
<!--]-->
js
I.select("I agree")

Similarly for a radio button:
Demo: Simple Radio Button
UI
HTML
<!--[--><label>
  <input type="radio" value="r"> Red
</label>
<label>
  <input type="radio" value="b"> Blue
</label>
<!--]-->
js
I.select("Red")

You can also use CSS or XPath selectors to target the option:

js
// using CSS
I.select("#agree-to-terms")

// using XPath
I.select("//input[value='r']")

TIP

We strongly recommend using visible labels instead of CSS or XPath selectors. Tests written this way remain more readable and resilient to UI changes.

If an option is already checked, I.select() does nothing. While I.click() can also be used to toggle checkboxes and radio buttons — it may uncheck an already selected option. At such, we recommend using I.select() if your goal is to ensure selection.

Checking an option in a group ​

If there are multiple options with the same label, we recommend specifying both the list and the option to target using I.select(list, option).


	Door color

	
	
	






	Frame color
Demo: Radio Button Group
UI
Door color

Frame color
HTML
<!--[--><div>
  <b>Door color</b><br>
  <label><input type="radio" name="door-color" value="r" checked="">Red</label>
  <label><input type="radio" name="door-color" value="g">Green</label>
  <label><input type="radio" name="door-color" value="b">Blue</label>
</div>
<br>
<div>
  <b>Frame color</b><br>
  <label><input type="radio" name="frame-color" value="r" checked="">Red</label>
  <label><input type="radio" name="frame-color" value="g">Green</label>
  <label><input type="radio" name="frame-color" value="b">Blue</label>
</div>
<!--]-->
js
I.select("Door color", "Red")
I.select("Frame color", "Blue")

How UI-licious identifies options to select ​

To identify an option, UI-licious evaluates the following:

  • the visible label of the option
  • descriptive attributes, e.g. aria-label, title
  • the value of the option
  • surrounding text

To identify an option group, UI-licious evaluates the following:

  • name attribute
  • surrounding text

Custom toggle components ​

I.select only works for standard <input type='checkbox'> and <input type='radio'> elements.

If your application uses custom UI components to replace the native checkboxes and radio buttons elements, use I.click instead to interact as a user would:

js
I.click("I consent")

Unchecking checkboxes ​

Use I.deselect to uncheck a checkbox.

js
I.deselect("Subscribe to newsletter")

If the checkbox is already unchecked, nothing happens.

Verifying selection ​

You can assert that a checkbox or radio button is checked using the I.selected command:

js
// fails if "I agree" checkbox is unchecked
I.selected("I agree")

// fails if "Red" option in "Door color" group is unchecked
I.selected("Door color", "Red")

Inversely, you can assert that a checkbox or radio button is unchecked using the I.deselected command:

js
// fails if "I agree" checkbox is checked
I.deselected("I agree")

// fails if "Red" option in "Door color" group is checked
I.deselected("Door color", "Red")