Radio Buttons in Selenium Web driver

 Selenium is one of the most popular and widely used tools when it comes to automating web applications and testing web applications. Selenium allows developers and QA testers to automate certain tasks in web applications like filling out forms navigating to a certain page or testing if the functions are working as expected or not. Selenium helps in conducting automation tasks and automating web applications easily.

Radio Buttons:

One of the most common tasks while interacting with the web application is handling radio buttons. Radio Buttons are the elements on the web page that allow the users to select a select option from a list and allow the users to select an option from the list of options.

Different options for locating a Radio button with in a page:

1. By ID attributes

2. Using Is Selected()

3. Using Name

4. Using element Value

5. By CSS Selector

6. With XPath
   

Locating a radio button using an ID locator:

If a radio button has an id attribute that contains a unique value, then we can use the ID locator provided by the Selenium WebDriver for locating and selecting the element. We can select a radio button; the click operation needs to perform. So, once we locate the element, we need to click to select it.

Locating a radio button using the name locator:

If the radio button contains a unique value in the "name " attribute, then we can use the className locator of Selenium to locate the radio button. Once located, we can perform click operation on the radio button element to select the radio button.

Locating a radio button using the XPath locator:

Similar to other UI elements, we can also locate the Radio Buttons by using the XPath locator strategy. Sometimes, it's impossible to find a unique ID or name for a radio button; in that case, XPath can efficiently locate the element.

Selecting a radio button:

We can use click() method to select a radio button.

Code snippet for Click() method to select "active" and "inactive" radio button.

Validating a Radio Buttons using Selenium WebDriver:

Selenium WebDriver provides certain methods that can pre and post validate the states of Radion Buttons. Few of these methods are: 

·      isSelected()

·      isDisplayed()

·      isEnabled()

We can use these methods to validate the current state of the radio buttons. E.g., to validate that after clicking the radio button, whether it's selected or not, we can use the "isSelected()" method. Similarly, before clicking a radio button, we can validate that whether the radio button displays on the page and is in enabled status. After validating, only then click on the radio button. So, we can do such pre validations using the "isDisplayed()" and "isEnabled()" methods.

isSelected() method

We can use the isSelected()  method to validate the current state of the radio button, whether it is selected or not. We can use it both in pre and post validation. E.g., we can perform the click operation on the radio button when it is not already selected. Otherwise, we can skip the operation, as shown by the below code

WebElement radioButton=driver.findElement(By.id("active"));
boolean status=radioButton.isSelected();
if(status==false)
{
 	radioButton.click();
}

Once we ran this code, the code will first check if the radio button is selected or not. Then an if condition will validate if the returned value is true or false. In case if it is false, i.e., the radio button is not selected. Additionally, the code inside the if condition will execute, and the radio button will select.

isDisplayed() method

Let's write a simple selenium code to validate if a given radio button displays or not. If displayed, then we will click and select the radio button.

WebElement radioButton=driver.findElement(By.id("inactive"));
boolean status=radioButton.isDisplayed();
if(status==false)
{
 	radioButton.click();
}

The above test will validate if the given radio button displays on the page or not. If displayed, then it will make a selection. The output of the above code will be the same as was in the case of "isSelected()". Because the specified radio button is displayed, and it will be selected using the click option.

isEnabled() method:

Assume we want to select a radio button, but during the runtime, it may be disabled. To handle such scenarios, Selenium offers a method called "isEnabled()". This method validates if the given web element is enabled or not. This method will return the boolean value based on the status of the element. It will return 'true' if the element is enabled and 'false ' if it's not enabled.

WebElement radioButton=driver.findElement(By.id("inactive"));
boolean status=radioButton.isEnabled();
if(status==false)
{
 	radioButton.click();
}

The above code will first check if the element is in enabled status or not. If enabled, then it will perform the click operation. Else, no operation will perform. So, in this scenario, the radio button does not enable. Therefore, no click operation will perform on the specified radio button.

States Of Radio Buttons:

Now, let’s look at its different states along with their significance.

Normal: This state is nothing but the default option or default state.

Hover: The hover effect as it is visible, tells users that it is a clickable target. Also, it prepares the user to click the option, after seeing the hover effect.

Checked: This state specifically shows the radio option which is selected. The selected option is color-filled and can be easily identified as a selected option among the other options.

Disabled: Once an option is selected by the user, the remaining options might automatically fade out and the user has no choice to select any option among the remaining. These are known to be in disabled states, as it is only one option that can be selected at a time.

Disabled & Checked: On selecting a particular option, if the Radio button is disabled, it is to confirm the selection. That is you choose an option and it is frozen as confirmed. One can easily identify this option as compulsorily selected.

How Are Radio Buttons Different From Checkbox:

Radio Button	Check Box
Allows only one option selection at a time.	Allows multiple options selection at the same time.
It has 2 major conditions: True or False.	It can be Checked, Unchecked and/or Indeterminate.
Usually represented as a circular button.	Usually represented with a square box.

Key Takeaways

Radio buttons are the GUI element that allows users to select a single option out of several mutually exclusive options.

• Radio buttons are denoted by the <input> HTML tags having "type" as "radio"

• Moreover, we can locate the Radio button elements by id, name, XPath, or CSS selector.

• Also, we can select Radio buttons by using the click() method.

• Selenium also offers validation methods like isSelected(), isEnabled() and isDisplayed(). We can use these methods before performing any operation to make sure radio buttons are in the correct state.