Checkboxes and Radio Buttons | Bondar Academy
Course: Mastering testRigor
Module: Interation with Web Elements
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explore how to interact with checkboxes and radio buttons , as well as how to assert their statuses. We will automate functionality on the Toaster page of our test application. Checkbox Interaction We begin by navigating to the Toaster page, which contains three checkboxes. Here’s how to automate checkbox interactions: To uncheck a checkbox, use the Click command: Click checkbox HideOnClick To validate the checkbox status, use: CheckThat checkbox HideOnClick is not checked To check a checkbox, use: Enter one into checkbox HideOnClick To uncheck a checkbox regardless of its current state, use: Enter zero into checkbox HideOnClick Assertions can be made to confirm the checkbox state after actions. Radio Button Interaction Radio buttons allow selection of only one option at a time. To automate radio button interactions: Use the Click command for selection: Click radio button option one Validate the selected state with: Check that radio button option one is checked When selecting a different option, ensure the previous option is deselected. Summary To summarize: Use Click to toggle checkbox states. Use Enter zero or Enter one to set specific states. Radio buttons require a click for selection and can be validated similarly. Relative locators can be used for non-unique elements. That's all for this lesson!
Video Transcript
In this lesson, we will talk about how to interact with checkboxes and radio buttons. Also, we will learn how to make the assertions of status of checkbox and radio buttons. So let's get into it. So we will continue working with our test application, but this time we navigate to the Toaster page under Model and Overlays. On this page, we already have three checkboxes. Two of them are selected, one is not. And we will automate functionality for these checkboxes in this lesson. So let me create a new test. And I will need to navigate first to the Toaster page. So in Model and Overlays, I need to click on Model and Model and Overlays, and then click on Toaster. All right, this is ready, so let's say our first scenario would be to uncheck this HideOnClick checkbox, so let's do this. And with this example, I'll show you how you can simply select or unselect the checkbox. Select or unselect checkbox. So to interact with the checkboxes, you can use the well-known command Click. So just click on the checkbox. Also, you can specify the type of this web element, which is a checkbox. And provide the name of the checkbox that you want to click. In our example, it's HideOnClick. HideOnClick, that's it. And then to validate the status of the checkbox, I will use command CheckThat checkbox HideOnClick. So the checkbox that we are validating is not checked. All right, so because when we click on this checkbox, it will be unchecked. And we want to validate that this checkbox will be unchecked after the click. So let's quickly run this test, and to see how it's working. All right, test pass successfully. Let's open the latest screenshot, and here we go. The checkbox was unchecked. So if you're going to perform the click operation on the checkbox, which is already not checked, for example, this one. So in this example, so let me show you this. In this example, Test Trigger will perform a click on this checkbox. And in this example, it will check it. So we can change our assertion is checked, like this. So click checkbox prevent arising of duplicate toast. And this checkbox should be checked. And let's run this test. All right, test is completed. Let's check out the screenshot, and here we go. The checkbox is checked. So the logic here is pretty simple. The click command will not check the current status of the checkbox. It will just perform the click, and whatever status of the checkbox right now, it will revert it to the opposite one. So this is how straightforward this command is. And let me show you two other examples, how you can check the checkbox, knowing the status or setting the status of the checkbox that you want this to be selected. So for example, we want to unselect selected checkbox. So what we wanna do is to set the status to checkbox is unchecked regardless of status that currently this checkbox is having. So we know that by default, the hide on click value for this checkbox is checked. And we want to change the status to unchecked. So what would we do? So we type enter, and then we provide enter zero into checkbox and name of the checkbox, which is hide on click. And we want to validate that checkbox hide on click is not checked. And let's run this test. All right, test is completed. Let's check out the screenshot. And we can see that hide on click checkbox is unchecked. And if you have scenario when you have unchecked checkbox, but you want to make it checked, then you can use command enter one like this. So I type select unselected checkbox. And we replace enter one into checkbox hide on click. And in this example, the checkbox should be returned into the checked state. And let me run this test one more time. All right, the test passed and this checkbox was selected back again, as you can see. So the main difference between approach number one and approach number two, the approach number one is simply revert the current state of the checkbox, while the second approach set the desired state. And if, for example, I will make something like this, enter one into checkbox hide on click. So we're saying, hey, I want to check the checkbox hide on click. And if I run this, it will not uncheck the already checked checkbox, because this checkbox is already checked. And so this assertion should fail for us. And let's run this. And the test expectedly failed, because the original state of the checkbox was checked over here. And then when we executed command enter one into checkbox hide on click, test trigger verified that this checkbox already checked, so nothing has to be done. And since our assertion was to validate that it is not checked, the assertion failed expectedly. All right, so this is the main difference between click and enter one and enter zero. Let me revert this back. And let me show you another example. So if you have something like this, so when you have here remember me checkbox and scroll down and remember me over here. So in this kind of example, to interact with the checkbox, you will need to provide a relative location for this checkbox, as we learned from the previous lessons. So the example would be pretty simple. So let me navigate to the form layouts page first. So it will be forms and then form layouts. And then we need to, let's say, check this checkbox and I will type enter one into checkbox. Remember me and need to provide the location where this checkbox is located. Since I want to select the second one, not the first one, I will use the relative location of this horizontal form. And I will type below horizontal form. And I expect we need to add assertion. I inspect the checkbox remember me. Below horizontal form is checked. And let's run this test. All right, this test passed successfully. Let's check out the screenshot and remember me checkbox was selected accordingly and validation passed as well. So that was about the checkbox. And now let's talk about the radio buttons. Our form layouts page also have the radio buttons. The difference between radio buttons that usually they have several options and only one option can be selected. When you select option number two, option one is deselected and so on. So let's quickly automate this scenario for the option one and option two and how to validate the status. So for the radio buttons interaction would be pretty simple. It's just the regular click. So we type click radio button and provide the text option one. And since the option one is a unique value for this page, we don't need to provide any relative locator and validation will be very similar. Check that radio button option one is checked. That's it. Let's run this test. All right, test passed successfully. Option one was selected. And let's quickly update this test to check the second radio button and validate the status was changed. So when we click on the option number two, we want to check that radio button number two is checked, but the radio button number one should become not checked. And also let's make one more validation over here that we have one more radio button which has a disabled state, right? So let's validate this as well just additionally. Check that radio button disabled option is disabled. And here is a little mistake. And let's run this test. All right, test passed successfully. Let's check it out. So we can see that first option one was selected. Then we selected option two and we validated that disabled option radio button is disabled. All right, so let's quickly summarize what we did in this lesson. You have two ways to interact with the checkbox. Using just a click command, you will simply revert the value of the radio button of the checkbox compared to the current state. And using check that checkbox is checked or not checked, you can validate the status of the checkbox. The second option is providing enter zero or enter one. When you provide enter zero, you disable the currently selected state of the checkbox. And if you provide one, it will enable the checkbox. If the checkbox already unselected or selected, this enter zero or enter one will not revert this state. So this is very useful command when you want to set a specific state for the checkbox. And when you interact with the radio buttons, you just use a regular click. But for the assertion, you can use the same is checked or not checked, which is related to the checkbox. And if you need to interact with checkbox or radio buttons, which is not unique for the page, and you need to use a relative locator, you can use this as well. For example, here you can provide a relative location of the checkbox. And in your assertion, you can provide the relative location, check the checkbox, below horizontal form is checked. All right, that's it, guys. And see you in the next lesson.