Tutorial 26 – Handle radiobuttons in cypress
What you will Learn :
Check status of radio buttons: visible or not
Check if radio buttons are checked or not
Check a radio button
Complete code
Another example
Check status of radio buttons: visible or not
Launch http://demo.automationtesting.in/Register.html
Notice the 2 radio buttons against the ‘Gender’ field. None of them are selected by default.
Let us inspect the radio button. Notice that it is represented by ‘input’ tagname, the type is ‘radio’ and so on notice the various attributes
Similarly, below are the attributes of second radio button. The value of the ‘value’ attribute is different than the above. We can use this attribute to differentiate between 2 radio buttons
Let us write a Test
Save the test and execute it. Notice below that the assertion (element is visible) gets passed
Let us put an incorrect value of second radio button and see if it is visible or not
Save the script.
Notice below that assertion fails since there is no such element
Let us now correct the value
Save the script.
Notice below that assertion gets passed this time
Check if radio buttons are checked or not
We know that, by default, none of the 2 radio buttons are checked
So if we run below script, the assertion should fail, since we are asserting ‘should(be.checked)’, however the radio button is not checked
Save and run. See below, assertion failed
This time, let us put an assertion ‘should(not.be.checked)’, see below
Save and run. Notice below, both assertions passes as expected
Check a radio button
Next we will check the first radio button using click() method. So, if the radio button is not checked, than click() operation would be performed
Save and run. Notice below that first radio button is checked
Now let us see what happens in below scenario. Here we are trying to check both the radio buttons
Save and run. Notice below that, as expected, the first radio button gets de-selected and the second radio button gets checked
Complete code
Another example
Let us consider another example and launch http://echoecho.com/htmlforms10.htm
Notice the 6 radio buttons
Let us inspect the radio button. We notice that the value is unique for all the 6 radio buttons. One more thing to notice here is that, the first 3 radio buttons belong to group1 and next 3 belong to group2. Since the radio buttons belong to different groups, we can select 2 radio buttons at the same time (one each from different group)
Also, by default, ‘Butter’ is selected in group1 and ‘Wine’ in group2.
Since the radio buttons belong to different groups, let us try to select one radio button from group1 and another from group2
Save and run the script.
Notice below that ‘Milk’ and ‘Water’ is selected from group1 and group2 respectively.
Let us now try to select the 2 radio buttons from the same group1
Save and run the script.
First ‘Milk’ gets selected and at the end of the script, ‘Cheese’ gets selected from group1. So, only 1 radio button gets selected from group1
Let us now select all the 6 radio buttons
Save and run the script.
During the script execution, all the radio buttons gets selected one by one. See below, once the script terminates, ‘Cheese’ and ‘Wine’ are left selected
So this is how we can work with radio buttons.
Thank you for reading!