Checkbox and Radio Button Operations In Webdriver

In the world of web automation, it is quite common to automate the sign-up forms which contain checkbox and radio button elements. These fields are unique in a way as they extend the functionality of a form by allowing the user to choose from multiple options. Today, we’ll tell you how you can use the Webdriver to perform checkbox and radio button operations. Though these fields are slightly different from the other HTML elements, yet it’s easy to access them using the ID attribute which is most of the times same for both of these. There are many operations that you can perform on these elements like the selection or deselection, checked or unchecked and verifying the default state of a checkbox and radio buttons.

In this post, we’ll cover the different methods for selecting the checkbox and radio button elements. Then, there’ll be a practice exercise where we’ll give you a HTML form and the example code for the hands-on. You may also love to try out mind-boggling Selenium Webdriver quizzes on our blog.

  1. Various methods to select checkbox and radio button.
    1. Use ID for Selecting Checkbox/Radio button.
    2. Use IsSelected Method to Check the State of Checkbox/Radio button.
    3. Use Element Value for Selecting Checkbox/Radio button.
    4. Use CssSelector for Selecting Checkbox/Radio button.
  2. HTML form and example code for hands-on practice.

Checkbox and Radio Button Operations In Webdriver.

1- Various methods to select checkbox and radio button.

1.1- Use ID for Selecting Checkbox/Radio button.

You can use the ID attribute to select a Radio Button or a CheckBox. We’ve provided the Webdriver command to click which you can apply to both types of elements.

 

1.2- Use IsSelected Method to Check the State of Checkbox/Radio button.

If you’ve selected/deselected a Checkbox/Radio Button and you just want to check its final state. Then, you can use the <IsSelected> command to know that the correct status of the element.

 

Note: When there is a group of Radio Buttons/Check Boxes on the page then, it is possible that their names are same, but values are different. That’s why we’ve used the Webdriver findElements command to get the list of web elements.

 

1.3- Use Element Value for Selecting Checkbox/Radio button.

One of the intuitive ways to select the Radio Buttons/Check Boxes is by toggling their Values. Please follow the below code example for more clarity.

 

1.4- Use CssSelector for Selecting Checkbox/Radio button.

Another easy way to select/deselect a checkbox or a radio button is by using the cssSelector. Please refer the below code snippet to bring more clarity.

 

2- HTML form and example code for hands-on practice.

Below is the HTML code of the input form which you can save as an HTML file locally to practice the checkbox and radio button operations.

 

If you’ve copied the above HTML code to a file, then run the below Java code in Eclipse IDE to perform the checkbox and radio button operations. We’ve listed down the summary of the actions which this code is executing.

  1. Create the FireFox instance and load the HTML form in the browser.
  2. Set the Webdriver implicit wait to 10 seconds.
  3. Get the total count of checkboxes and radio buttons.
  4. Select all of the check boxes and radio buttons.
  5. Close the Firefox instance.

 

Final word.

There are many interesting tutorials on our blog which you can refer to build your automation skills. We wish you well in your learning journey

If you liked the above Webdriver tutorial, then please care to share it on the social media of your choice.

 

Best,

TechBeamers.

Leave a Reply


*