Tutorial 25 – Handle checkboxes in cypress
What you will Learn :
How to check the checkboxes using ‘check()’ method
Add assertion to check the status of checkbox, whether it is checked or not (using ‘should’ command’
Add a chaining assertion to check if the value of the checkbox is ‘Cricket’ or not (using ‘and’ command’)
Un-check the checkboxes using ‘uncheck()’ method
Select all checkboxes using a single statement
How to check the checkboxes using ‘check()’ method
Let us launch a demo website http://demo.automationtesting.in/Register.html
You would see 3 checkboxes against the ‘Hobbies’ field. This field has 3 values: Cricket, Movies, Hockey.
By default, none of the checkboxes are selected.
Let us inspect a checkbox
See below and notice the various attributes and their values. For example, the checkbox is an ‘input’ tag. The value of the ‘type’ attribute is ‘checkbox’. The id of first checkbox is ‘checkbox1’. The value of the ‘value’ atttribute is ‘Cricket’ and so on..
Now, in cypress, there is a method ‘check’ that can be used to check the checkboxes. So after we get the element, we can fire the ‘check’ method as seen below
So let us save and run this script. See below, the first checkbox gets checked
Add assertion to check the status of checkbox, whether it is checked or not (using ‘should’ command’
After checking the checkbox, let us verify if the checkbox is already checked or not. If checkbox is already checked, than this condition becomes true and the assertion will pass
Save the script. Notice below that the assertion passes. So, our expectation was that the first checkbox should be checked. This matches with the actual result as well.
Add a chaining assertion to check if the value of the checkbox is ‘Cricket’ or not (using ‘and’ command’)
Now we want to validate whether the value of the checkbox is ‘Cricket’ or not. When we inspected this element, we saw that the value of ‘value’ attribute is ‘Cricket’ (C in capital letters). Let us intentionally use the small letter ‘c’ to validate. If you want to perform more than one validation, you can use the ‘and()’ command as seen below
Save the script. Notice that assertion fails since expected ‘cricket’ is not same as actual ‘Cricket’
Let us now change it to ‘Cricket’
Save. the script. Notice that assertion passed this time since expected ‘Cricket’ matches actual ‘Cricket’
Similarly, let us select the remaining 2 checkboxes
Save the script, notice that all checkboxes are selected and all assertions passed
Un-check the checkboxes using uncheck() method
There is a ‘uncheck()’ method in cypress that we can use to de-select the checkbox
Save the script, see below, the first checkbox gets de-selected
Similarly, let us de-select remaining 2 checkboxes
Save the script, see below, all checkboxes get de-selected
Select all checkboxes using a single statement
Above, we had written 3 lines of code to select 3 checkboxes
There is a simpler way to select all the checkboxes in a single line of code. If you inspect the 3 checkboxes, you would find that all the 3 checkboxes have one attribute/value pair in common viz it is same for all of them: type=checkbox
So we can make use of this attribute=value pair and achieve the desired result.
See below.
This time we have used cssselector instead of xpath and have used [attribute=value] combination. This locator identifies all the checkboxes.
Next, inside the ‘check()’ method, we are using an array of desired values that we want to select. These values should be inside the the square brackets [] and within single quotes separated by comma:
Save. Notice below that all 3 checkboxes got selected.
Let us remove any one value from the array, see below
Save. Notice below that only 2 checkboxes got selected this time
So this is how we work with checkboxes.
Complete code
Thank you for reading!