Radio Buttons | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Automation of User Interfaces
Instructor: Artem Bondar
Lesson Summary
In this lesson, we will explore how to automate radio buttons in Cypress . Here are the key points discussed: Understanding Radio Buttons Radio buttons are elements that allow users to select one option from a set. When one radio button is selected, others are automatically deselected. In the DOM, radio buttons are represented as <input> elements with a type of radio . Cypress Methods for Radio Buttons The check method is specifically designed for radio buttons and checkboxes. While you can use the click command, using check is recommended for better reliability. Actionability Checks Cypress performs actionability checks to ensure elements are visible and enabled before interacting with them. If these checks fail, actions like check or click will not execute. Handling Hidden Elements Sometimes, radio buttons may be visually hidden (e.g., styled with a class like visually hidden ). In such cases, you can bypass actionability checks by using the force: true option: cy.get('selector').check({ force: true }) However, use this option cautiously as it can lead to flaky tests. Assertions and Validations To validate if a radio button is checked, use should('be.checked') . To check if a radio button is not checked, use should('not.be.checked') . To validate if a radio button is disabled, use should('be.disabled') . Selecting Radio Buttons by Label You cannot directly select radio buttons using their labels or adjacent text. Instead, you can: Use the click method on the label element. Target the input field using the label's parent element. Despite these alternatives, the recommended approach is still to use the check method for selecting radio buttons. In summary, focus on the input type, utilize the check method, and be cautious with the force: true option to ensure reliable test automation.
Video Transcript
All right, in this lesson, we will talk about how to automate radio buttons in Cypress, so let's get into it. So this is our test application using the grid, and here we have two radio buttons. These are two round elements, so when I click on the first one, it is selected. But when I click on the second one, the first one is deselected. This is how radio buttons work. And let's look into the DOM, so click Inspect. And radio buttons usually represent is there also input field tag. But what is more important, it should have a type of radio. And for the checkboxes, there will be a type of checkboxes. Why it is important? Because Cypress has a special method called check, and this method works only with radio buttons and checkboxes. You can also select the radio buttons using just regular click command. But it's better to use method check because this is what it is designed for. So let's jump into the code and let's run some code. So I set up a new test in the UI components. Spec file, and let me grab this using the grid. And I will locate the radio buttons inside of it. So I will try to find the all radio buttons by its type. So I want to interact with all radio buttons in the sequence. So I will use type radio. So it will return me the list or the collection of radio buttons. And then I will use then to use this collection later to avoid copy pasting this long locator. So it will be all radio buttons like this, and then we'll work with it. So they are called side wrap like this, and use all radio buttons. And then I want to click, let's say, first radio button. I will use method EQ that will select by index, and index for the first radio button will be zero. And then I call method check to select this radio button. So yeah, the initial setup is ready, so let's try to run it. So here's the Cypress UI component, and let's run this test. So opening the form layouts page, and unfortunately, we were not able to select the radio button. Let me explain why. So there is a tricky part related to that, and it will be a good demo. So remember when we were talking about actionability and how Cypress retries on the web element. I will show you this actionability page in the documentation. So when you call methods like click, double click, right click, clear, check, uncheck, so all these methods. What Cypress does, it is checking if the element is in the view. If it is not hidden, it's not disabled, not detached, and so on. So it's a default checks to interact with the elements before interacting with the elements that this element is ready to receive the action. And when the actionability checks, at least one of them did not pass, then Cypress is not able to perform this action of one of those elements. And look what we have with this particular guy. So if I will hover over, we have a class visually hidden. So let me type like this, you see, visually hidden. So for the Cypress, even if we see visually this radio button, that it's visually, it's right there, Cypress does not see it. Why? Because the actual input field in the design of this application is hidden. It's behind this kind of additional layer radio button. So if I remove this guy and click Enter, look, now we have, no, this is not a good example, let me click on this one. Okay, now you see two radio buttons, the outer circle and inner circle. So this inner circle is the real native radio button that browser renders. And this outer circle is just the design of this application, custom radio button of the bigger size, nicer design, and so on. Developers of this website decided, okay, we want to hide the natively look radio button and replace it with the bigger one because we like this design. And this one will be hidden. But Cypress looking for the native radio button, and because it is hidden, it's not able to click on that. So refreshing on this, so that's the reason why we have this issue. How to overcome this? Cypress has a flag that you can pass in any command, not only check and click or any action command called force.true, like this. Force colon true. When you pass the force true, it means that you are disabling actionability checks and you're telling Cypress, hey, find this web element. And even if it is not ready, whatever, I want you to click on this. But Cypress is telling you, well, okay, I got your command, but I am not guaranteed that this element will actually be selected. So that's kind of a dialogue that you guys both have. But if we go back over here, and now you see the radio button is selected. So just one more time, force true is a kind of a hacky way to bypass the actionability checks. And this is one of the most misused command, especially for beginner engineer in the framework. Sometimes when you cannot select the element, engineers discover, we have a force true, we just pass the force true and it works. And they literally start passing the force true to every single command. But what happened because of that, that has become more flaky. Because Cypress does not wait automatically for element to be ready to receive the event and action. So use force true only when you really know that there is no other way around how to bypass this problem, and when you understand the consequences behind it. So if you pass the force true, your test may be more flaky. So use it very carefully. All right, moving, moving, moving back. So force true, radio button was selected. Now, how to make an assertion? So you just type should, and there is assertion to be checked like this. And this validate that this radio button was checked, like this. So let's move on. Let's select then the second radio button, like this. And then I use EQ1 and also check force true, like this. And then after this, I expect that the first radio button should not be checked, like this. Let's go back to the test. And did I make a mistake? Hold on, of course. I need to remove this check because we're just validating that the first radio button should not be checked. All right, so we selected second radio button and the first one is not checked. And let's do one more validation. Our application has three radio buttons actually, so the disabled option. And let's validate that this one is disabled. So let's add this one. I call this radio button and this index will be two because this is the third radio button. And it should be disabled. This is the validation I'm looking for. Going back and test pass successfully, we validated that the last radio button is disabled. All right, moving, moving, moving on. So in this example, I was using the indexes of radio buttons to select them. But our radio buttons also have labels like option one and option two. Can we use labels to select radio buttons? We can, but there is a little catch, so let me show you. So let's say that I want to select using the grid. And then select by text contains option one. And then check force true like this. And let's go back to the application and look, you see a test failed. The test failed because option one is not the radio button, it is not the element. So look, if I make right click inspect, option one, it is a span where the actual text is located. So our input field that can receive the action for the checking the radio button is like a sibling element to a span. And there are a couple workarounds for that. Workaround number one, you can use just click. So like this, click, and then click event will go somewhere to that direction. And here we go, the first radio button is selected. The second option, you can target the parent element for this span, which is a label, and then from the label, find the input field. And then you can use check. So you can modify your code like this. So site contains a label. So we target an apparent element for the option. And then you can find the input field that will be a child element input. And then you can use method check, and it should work. Going back, yeah, you see, right now it will work successfully. So we found option one, then we found the child element input, and then check force true. So that's, you see, I've shown you some other options how you can play around. So there is a workaround, you can use click for the radio buttons. But I would recommend try to use check, because this is what recommended by the Cypress framework for the radio buttons use a check method. But click actually should work also just fine. So that's pretty much it. Let's quickly summarize what we did in this lesson. So when you interact with the radio buttons or check boxes, look for the type of radio for the input element. In this case, you can use method check. Keep in mind that if your element is disabled, hidden, or something like this, you can bypass this externability check using force true flag that you can pass inside of the check, click, or other actionability commands. To make a validation, you can use to be checked or not to be checked for the radio buttons to validate the status. Keep in mind that you cannot select the radio button by its label or by the text next to the radio button. You need precisely target the input elements for the radio button. But in the situations like this, you can use method click to select the radio button that way. But still, a recommended approach to use method check to select the radio buttons. All right, that's it, guys, and see you in the next lesson.