How to test Checkboxes

Introduction

Checkboxes can be used to let a user select one or more options from a limited set of choices.

I have a cat
I have a dog
I have a rabbit

This is what the HTML of a checkbox element looks like:

<input type="checkbox">

Assert if a Checkbox element is checked

If the checkbox element is checked, it will have a checked attribute:

<input type="checkbox" checked>

In order to determine if the checkbox element is checked or not, you have to verify if the checked attribute is present.

That can be achieved in 2 different ways:

1. By asserting the presence of the checked attribute

You can use the Element Contains Attribute assertion type from the Add Assertion action:

Configure that assertion to verify if the checkbox element contains the checked attribute.

2. By using JavaScript

A different approach is to use an Execute JavaScript step.

In that step, you can fetch the checked property of the checkbox element.

isItChecked = document.querySelector("css-selector-of-your-checkbox").checked;

Don't forget to replace the css-selector-of-your-checkbox string with the CSS Selector for your checkbox element.

That isItChecked JavaScript variable will have a value of true or false, depending if the checkbox element is checked or not.

We can add an assertion for that, but first we need to transfer the value from the isItChecked JavaScript variable to an Endtest variable.

That can be done with the Extract Value From JavaScript option from the Set Variable action.

After that, we can use the Variable Assertion option from the Add Assertion action to verify if the value is true.