Radio Buttons | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Mastering UI Elements
Instructor: Artem Bondar
Lesson Summary
In this lesson, we will discuss how to interact with radio buttons , automate their selection, and perform assertions to check their status (selected or not). Key Concepts Locating radio buttons using different methods. Using the check method to select radio buttons. Bypassing visibility checks when radio buttons are visually hidden. Validating the selection status of radio buttons. Locating Radio Buttons To select radio buttons, we can use the following locators: By Label: Use the label text (e.g., "option one") with the check method. By Role: Use the role of the radio button with the get by role method. Handling Visually Hidden Elements When radio buttons are visually hidden, the default check command may fail. To bypass this, use: check({ force: true }) Validating Selection Status To validate if a radio button is selected: Use a generic assertion with is checked to return a Boolean value. Use a locator assertion with to be checked . Example Assertions To check if a radio button is selected or not: expect(radioStatus).toBeTruthy(); For a locator assertion: await expect(locator).toBeChecked(); Summary The recommended method for selecting radio buttons is to use get by role and the check method. If the radio button is hidden, use force: true to bypass visibility checks. To validate the selection, use either generic or locator assertions to check if the radio button is selected or not. Thank you for watching, and see you in the next lesson!
Video Transcript
In this lesson, we will talk about how to interact with the radio buttons and how to automate the radio buttons and also how to perform assertion of the status of the radio button. Is it selected or not? So let's get into it. So going back to our test application, here is our using the grid form. And inside of this form, we have two radio buttons. So let's find out how to select those. So I will create a new test. And first thing that I will need is the locator for using the grid form. I will take the half of this locator and we'll rename it using the grid form. And now we need to locate the radio buttons to select the radio buttons. What kind of the options for the locators we have? Right click, inspect and look at this button. So radio button is this input field. Input, which is type radio. It is visually hidden. We need to point attention to this class. I will show you later why. And also we have a span with text option one, which is the name for our radio button. And all this is wrapped into a label tag. So we can select this element by label as well. And we have three radio buttons. One, two, three. If we open up, inside of it is a label and inside of the label is input field. So we can select this radio button by label and by role as a radio button. Let me show you that. So I type await using the grid form. And let's say first we selected by label. So we just provide the name of this label, which is option space one. And we use a method called check. This method is used to select the radio buttons. But for us, it will not work as is because our input field for the radio button in this particular application marked as visually hidden. I don't know why developers decided to go that way. But because it is visually hidden, the check command will not pass the default check, such as the element should be visible, clickable, and so on. So Playwright will not be able to select this element. And in order to bypass this validation of the availability, we need to pass the parameter force true. By providing the force true, we're disabling the verification of different statuses that check command is waiting for. So we're just literally clicking on this input field or we're checking this input field. And let me run this. And you can see the option one was successfully selected. Okay, the second example how you can select the radio button is using another type of the locator, using the grid form, get by role. And in this example, we will take a role of radio. And we provide the name of the radio button, which is option one. And we do the same thing. Check force true. Let me comment this out and run this test one more time. Yeah, and you can see option one is also selected successfully. So there are two options, get by label or get by role radio. Now how to validate if our selection was actually successful. If you want to use a generic type of the assertion, first, you need to take the status of this radio button. Is it selected or not? So I create a new constant and call it, let's say, radio status equals two. Then I take my locator of radio button and type is checked. So is checked will check the status of this radio button and will return us a Boolean. Is it true or false? So if this radio button is checked, radio status value will be true. If it's not checked, radio status value will be false. And then we make a validation of expect radio status and assertion will be to be truthy, this one. So we are validating the status is actually a true. Let me run this one more time. And test is passed successfully. Second type of the assertion would be a locator assertion. It will be await, expect. We provide the locator, which is using the grid radio option one. And we use a method to be checked. And this is the second way of validation of the status running this test. Yeah, and it's working fine. And let's continue our script with just a couple more validation. So let's say we want to select the second radio button, which is option two. And then we want to validate that after we selected the option two radio button, option one should not be checked. All right, so let's do this. So I just taken this locator right here, copy pasting it and providing option two. We want to select this one. And after we selected option two, we need to validate the option one radio button is not checked. So how to do that? And I will use my generic assertion. And without creating a new constant, I just copy my entire command inside of the expect. And then here I validate to be falsy. So I am validating that it is not check anymore. It is falsy. And then I am validating that the option two is to be truthy. This one is selected. So option one is not selected. It's falsy. And option two is selected. It is truthy. Let me run this test. You see, it works successfully. Option two was selected. And we see this test pass successfully. All right, so let me quickly summarize what we did in this lesson. In order to select the radio button, the most recommended way is to use get by role radio and provide the name of the radio button. To select the radio button, use a method check. If the radio button is hidden for some reason, you can use a command force true to bypass playwright check of availability. In order to validate the status, is it selected or not, you can use generic assertion or locator assertion. For generic assertion, using method is checked. You can get the status of the web element, and then you can make validation of the status. Is it truthy or falsy? Or if you use locator assertion, you can use method to be checked. And as a shortcut for generic assertion, you can always provide the entire locator as the argument to the expect command, and then to validate if the radio button status is falsy or truthy, which means it is unselected or selected. All right, that's it, guys, and see you in the next lesson.