There are different types of web elements used in application development, such as buttons, text boxes, links, checkboxes, drop-downs, radio buttons, etc. Radio buttons are used in the applications to choose one option from the given options.
With Selenium WebDriver, we can easily identify the radio buttons using different locator strategies, and also we can perform validations like selecting and validating the status of the radio buttons.
Radio buttons can be toggled only, i.e. we can switch between one button to another radio button. We can not deselect a radio button unless there is an external option like a button provided to reset the status.
In this article, we look at how to handle radio buttons while performing automation testing with Selenium WebDriver.
What is a radio button?
The radio button is a special type of input button that is used for selecting a single option among the given options. The radio buttons in an application are grouped together to represent mutually exclusive options.
In the below screenshot, we can see sample radio buttons on a web page are grouped into two sections one is “Radio Button Demo” and the second one is “Group Radio Buttons”.
Radio button’s DOM structure
In any web application, the radio buttons are designed using the HTML tag <input> and with the type as radio. Along with the input tag and type, based on the requirement, developers will add or use properties like id, name, value, class, text, etc., in defining a radio button.
To identify the radio buttons, we can use any locator such as ID, XPATH, NAME, CSS, etc. Which locator to choose depends on how efficiently one can identify the radio button uniquely.
If each radio button has a unique ID, we use By.id() to identify it. If we can identify the radio button using two or more properties of the radio button, we go with By.xpath() or By.cssSelector().
Inspecting the web element in the DOM
Let’s inspect the above radio buttons and observe them in the DOM.
From the DOM structure, we can see that the “Male” and “Female” radio buttons have properties like type, value, name, and class in the “input” tag.
To find the radio buttons, we can use any web locator such as ID, NAME, TEXT, XPATH, etc. But we have to choose a locator that identifies the web element uniquely.
In the above example, the radio buttons “Male” and “Female” do not have locator IDs. Properties “type” and “name” are the same for both the radio buttons, but the property “value” is unique for both of them. So we can use XPATH as the locator to identify both the elements.
The xpath that identifies the ‘Male’ radio button uniquely is “//input[@name=’optradio’ and @value=’Male’]”. In the below screenshot, we can see that result.
Demo Application:
In this blog post, we will use LambdaTest’s Selenium Playground application to demonstrate different test scenarios of radio buttons that we may have to automate in real-time.
As we can see in the above image, there are different radio buttons specifying the gender and age group.
Below are the list of test scenarios we are going to cover in this blog post:
- How to find radio button(s) on a web page and verify their status?
- How to select a radio button and verify the status?
Project Setup
The prerequisites for writing/executing the different test scenarios are below, please ensure tools or libraries are installed.
- IntellIJ IDE (or Eclipse)
- Java
- Maven
- TestNG
Let’s create a Selenium with Java project in IntelliJ IDE using the Maven build tool.
Step 1: Open the IntelliJ IDE from the File menu, and click on New Project.
Step 2: On the next window as shown in the below window, select Maven Archetype on the left pane and give a meaningful project name(radiobuttons-selenium-java in this case).
Also select the archetype from Archetype drop down. We are selecting the quickstart archetype as shown in the below image.
Now click on the create button to complete the project creation.
Step 3: Now the project should look like below after the successful creation.
Step 4: Add Selenium and TestNG dependencies in pom.xml under the <dependencies> section in the pom.xml.
The latest selenium-java dependency from the Maven repository.
The latest TestNG dependency from the Maven repository.
Add these two repositories to pom.xml as shown below:
FileName – pom.xml
private Capabilities buildCapabilities () {
final var deviceName = getProperty (DEVICE_NAME_KEY, “Pixel_6_Pro“);
final var deviceVersion = getProperty (DEVICE_VERSION_KEY, “11“);
final var options = new UiAutomator2Options ();
options.setPlatformName (“Android“)
.setPlatformVersion (deviceVersion)
.setDeviceName (deviceName)
.setAvd (deviceName)
.setApp (Path.of (getProperty (“user.dir“), “src/test/resources/proverbial.apk“)
.toString ())
.setAutoGrantPermissions (true)
.setIsHeadless (parseBoolean (getProperty (“headless“, “false“)));
return options;
Step 5: To download the dependencies and them to the project, right click on the pom.xml and select Maven → Reload project.
Step 6: Under the test folder create a package radio_buttons and under this package create a new java class HandlingRadioButtonTests as shown in the below image.
Step 7: Create a method initializeBrowser() in the test class created in Step 6. And annotate it with the @BeforeMethod TestNG annotation.
This method will contain the code that initializes the browser. And this method will be executed before each test method as it is annotated with @BeforeMethod annotation.
Step 8: Create another method closeBrowser() in the test class and annotate it with @AfterMethod TestNG annotation. This method will be executed after each test method and it is responsible for closing the browser after test execution.
Executing Tests on Cloud Platform
The advantages of adapting the cloud platforms to execute the automation tests are:
- To resolve the issues like “It is working fine on my machine”.
- Test engineers can focus more on developing test scripts and test coverage rather than focusing on the setup and maintenance infrastructure.
- This also helps us to achieve “Build once, run anywhere”. This means we can execute our locally developed tests on any platform, browser, and device.
The cloud-based testing platform like LambdaTest offers a Selenium cloud grid to execute tests across 3000+ browsers and operating systems, all in the cloud. It also provides AI-based test orchestration and execution to run manual and automated tests at scale. Also, it is easy to port our locally working tests to LambdaTest’s cloud platform.
To execute the tests on the LambdaTest’s cloud, create a LambdaTest account. In the profile, we will be provided with a username and access key. This username and access key are required to configure our tests on the LambdaTest cloud platform.
Using LambdaTest’s capabilities generator, we can generate the desired capabilities. We have to select the browser, the platform, language binding, etc., as shown in the screenshot.
Copy the browser options code generated and paste it into the initializeBrowser() method in the test class.
Create a class “GlobalConfigVariables” under the utils package to maintain your username, accesskey globally and hide them from visibility for security reasons.
Configuring the RemoteWebDriver to connect LambdaTest cloud and execute tests on it.
With this, we have completed the project set-up successfully. Let’s start with test scenario writing & execution.
Test Scenario 1: How to find the radio button (s) on the web page and verify their status?
In the demo application, inspect the radio button in the DOM. All the radio buttons have an “input” tag, and type “radio” as shown below.
To find all the radio buttons, we will write an xpath using the input tag and type property. The xpath is “//input[@type=’radio’]”.
We can see in the DOM that there are eight radio buttons found for this xpath, as shown in the above screenshot.
Now write a test script to find all the radio buttons on the page and verify the status of each radio button using the above xpath.
In the above test script, we have two cases,
Case 1: To find all radio buttons on the web page and print the count of the radio buttons
Case 2: To verify the status of each radio button using the isSelected() method. This method will return true if the radio button is selected, otherwise, it returns false.
Execute the test in the IntelliJ Idea, which should start executing in the LambdaTest platform.
And the output in the IntelliJ IDE console prints the number of radio buttons as 8 and the status of each radio button as false, as no radio button has been selected on the page yet.
Test Scenario 2: How to select the radio buttons and verify the status in Selenium automation?
From the demo application, we have radio buttons in two sections “Radio Button Demo” and “Group Radio Buttons Demo”.
Case 1: We are going to select the “Male” radio button and click on the “Get Checked Values” button from “Radio Button Demo”. Upon clicking on the button, it displays the text as shown in the below screenshot.
Please check the test case written to select the radio button in the below screenshot.
Let’s execute the test and verify the result.
From the console output shown above, it is clear that the radio button is selected, and we are able to fetch the displayed text.
Case 2: In this case, we are going to select Gender “Female” and Age Group “15 to 50” radio buttons and click on the “Get Values” button in “Group Radio Buttons Demo”. And then getting the result displayed text.
