Handle_Radiobuttons_In_Cypress

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!

Share On

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on tumblr
Share on email

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

Lifetime Membership Club

LIFETIME MEMBERSHIP BIG SALE - ALL LIVE COURES JUST - 7000 RS/ 99 USD
Attend All Live courses in just 7000 rs / $99 - offer ends 1st Nov 2024