[Robot Framework] Checkbox and Radio button

In this article, I want to share the notices when handling checkboxes and radio buttons. There are 2 main topics:

1. Handle “select checkbox/radio button” function
2. Catch checkbox/radio button elements?
3. Verify checkbox/radio button is checked

Let’s get started with the first topic.?

1. Handle “select checkbox/radio button” function

To increase the stability and decrease the effort to maintain the scripts, we need to handle the checkbox and radio buttons so they can be run in any situation.?

For example: One action in your scripts is selecting a checkbox,?

• you have to click on it if it’s not checked,?
• but vice versa if the checkbox is checked, you don’t need to do anything.?

If you only use the click method for any situations, it’s only right when the checkbox is not checked. But if your SUT changes the default value, your script can fail somewhere. To avoid this failure, let’s consider the status of elements before you do anything. The idea is like this:

These actions depend on the status of elements, therefore the previous situation will never happen. It’s a simple structure.

2. Catch checkbox/radio button elements

All checkbox/radio buttons are input elements:

• Checkbox: input element with “checkbox” type
• Radio button: input element with “radio” type

It’s pretty simple because you can easily get these elements, click on them, and use the isSelected() method to get their status. But the problem is sometimes other elements cover it. You can see the example below:

In this situation, you can see the SVG and label elements cover over the input elements. From the user's perspective, it makes the UI look more beautiful, instead of the default UI. But it makes your scripts fail because we cannot click on input elements. They are not visible on the screen. How to handle that, there are 2 solutions:

• You will have 2 locators: The first is the input element to check the element's status, and the second is the label element to help you select them. (you cannot use the label element to get the element's status). This way will make your script more complicated.
• You still use the input element for both actions: 1. click the element and 2. get the element's status. When clicking on the input element, let’s use the click method by Javascript. With Javascript, you can click on elements that are not visible on the screen, but it’s not like the actions of real users.?

For me, the 2nd way is better. But don't abuse it.

3. Verify checkbox/radio button is checked

To verify checkbox/radio button is checked. In Selenium, you can use the isSelected() method. But with Robot Framework, this method is wrapped and its “Checkbox Should Be Selected” and “Radio Button Should Be Set To”.

But sometimes, in the lower version of Robot Framework, they can not be used to check the checkbox/radio buttons are selected. At this time, you can consider using Javascript. You can get the “checked” attribute of these elements

• checked = false: checkbox/radio button is not selected
• checked = true: checkbox/radio button is selected

You can select the specific strategy to find elements and after that get the checked attribute by Javascript code like this:

return document.getElementById("impressiveRadio").checked        

return arguments[0].checked ? ? ARGUMENTS ? <WebElement>        

The complete code to get the element's status like this:

*** Settings ***
Library    SeleniumLibrary
Test Teardown   Close All Browsers

*** Test Cases ***
Get The Status Of Radio Button
    Open Browser    https://demoqa.com/radio-button   Chrome

    # Using ID strategy
    ${checked}=     Execute Javascript      return document.getElementById("impressiveRadio").checked

    # Using XPath strategy
    ${element}=     Get WebElement    //input[@id='impressiveRadio']
    ${checked}=     Execute Javascript      return arguments[0].checked     ARGUMENTS   ${element}        

Based on my suggestion, hopefully, you can have new ideas to build your scripts and make them more professional. The complete code is not here. Let's take a look and practice.

Reference sites:

[Image 02] https://demos.telerik.com/kendo-ui/checkbox/index

[Image 03] https://material.angular.io/components/radio/examples

[Image 04] https://demoqa.com/checkbox

[Image 05] https://demoqa.com/radio-button