WebDriverIO – Handling Radio Button

<<Previous Post                          << Complete Tutorial>>                             Next Post>>

WebDriverIO – Handling Radio Button

Pre-requisite: Have ‘Visual Studio Code’ IDE installed in your machine (Click here to install if not installed in your machine)

Here is the small Exercise to Handle Radio Button in Webpages using WebDriverIO: –

WebDriverIO-Handling Radio Button

First, I will demonstrate the exercise we need to perform to automate handling  Radio Button using WebDriverIO, followed by practically demonstrating the WebDriverIO Automation code for achieving it.

Exercise:-

1. 1. Navigate to http://omayo.blogspot.com/

2. Look for the radio button on which you want to click.

3. Click on required radio button.

Practical Demonstration:

Following are the Steps to Perform above Exercise (i.e. Handling Dropdowns) using WebDriverIO Automation code in ‘Visual Studio Code’ IDE:

Pre-requisite: Download the Project from here (Click here to Download) and Unzip it

1. Open Visual Studio Code on your system.
2. Click on File and Select Open Folder. Select the project folder from the above extracted ZIP file:

3. Expand ‘test’ from the Explorer, right click on the displayed ‘specs’ and select ‘New File’ option as shown below:

4. Give any name of the newly created file say “Radiobutton_test.js” and copy the below given code into the newly created file as shown below and save the file:

The following is the WebDriverIO sample code for selecting the Radio Button option ‘female’ on ‘Omayo.blogspot.com’ application:

You can understand this code, by reading the comments provided in the below code:

Copy the code from here:-

const assert = require('assert');
describe ('Handle Radio Button', ()=> {
it('should handle radio button on webpage', ()=> {
    browser.url('http://omayo.blogspot.com/');
    const  radio_button = $('input[id="radio2"]');  //storing Xpath for the required Radio Button
                radio_button.click(); // clicking on radio button
                browser.pause(3000);
   });
});

5. Click on ‘wdio.conf.js’ to open in the IDE, and make sure the Test file name is updated properly in this file as shown below and save it:

6. Click on Terminal and Open New Terminal.

7. By Default, Powershell Terminal will open as shown below:

8. Run geckodriver.exe in the Powershell terminal as shown below to run Geckodriver in background.

If you don’t see anything, that means the geckodriver is running in the background.

9. Open Another Terminal in the same way we did in the step 5 and run below command in terminal

.\node_modules\.bin\wdio .\wdio.conf.js

Observe that the ‘Radiobutton_test.js’ will get executed successfully, the Firefox Browser will launch and the required Radiobutton will get selected in the browser by WebDriverIO Automation code.

And also, the result will be displayed as ‘Passed’ in the terminal as shown below:

This is how, we can handle the radio button options using WebDriverIO. I will explain handling other different UI elements on the webpages using WebDriverIO in the upcoming articles.

Happy Learning ?

About Me > Ajay Lunia 

Connect to me on LinkedIn (Click here)

On a mission to contribute to the Software Testing Community in all possible ways.

<<Previous Post                          << Complete Tutorial>>                             Next Post>>