Checkboxes | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Automation of User Interfaces
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explored how to automate checkboxes using Cypress . The demonstration involved interacting with checkboxes on a toaster page that contains three checkboxes, two of which are checked and one unchecked. Key Concepts Checkboxes are input elements with a type of checkbox . Use the check method to interact with checkboxes. When using check , pass force: true if the checkbox is visually hidden. Automation Steps Create a new test for checkboxes in VS Code . Use a locator to select all checkboxes on the page. Run the test in Cypress to observe checkbox behavior. Method Behavior The check method sets the checkbox state to checked regardless of its current state. The uncheck method sets the checkbox state to unchecked. The click command toggles the checkbox state but does not set it explicitly. It is recommended to use check and uncheck for a more stable approach when automating checkboxes, as they ensure the desired state is achieved. Validation Validation of checkbox states can be performed similarly to radio buttons, ensuring that all targeted checkboxes are checked as expected. In summary, to automate checkboxes in Cypress: Target the input field of type checkbox . Use check to set the checkbox as checked and uncheck to set it as unchecked. Prefer check and uncheck for stability over click . That's it for this lesson. See you in the next one!
Video Transcript
All right, in this lesson, we will talk about checkboxes, how to automate those in Cypress. Let's jump into it. So for this demo, we're going to use different page models and overlays and toaster page. Clicking on the toaster page, we have three checkboxes. Two are checked and one is unchecked, and we will automate those. So similarly to the radio buttons, if I inspect checkboxes is also input element that have a type of checkbox. You can use method check to interact with this type of the input elements only if the type is the checkbox. So let's automate this stuff. So going back to VS Code, in UI components, I created a new test for the checkboxes and navigate to models and overlays and toaster. So let me select the checkboxes right away, and I will use just the type checkboxes. So grabbing this locator, and this locator will find for me all three checkboxes on this page. I will use the same method check right here, and I also will need to pass force true because the checkbox is visually hidden like this. So now let me run this, and I will show you interesting detail about the behavior of this method. So I'm going back to the Cypress and running that test. So navigating and here we go. So look, the locator checkboxes found all three elements. So that is fine, and then Cypress made the check on all three elements one by one. But what actually happened? Look, the first and third remained check, but the second checkbox is checked. Let me show you the second example. If we want to uncheck, and there is a separate method, uncheck and going back to the application. Look, now all checkboxes are unchecked, and this is the feature of this method. So technically, check or uncheck method, not only clicking on the checkbox, it set the state for the checkbox. So if you want checkbox to be checked, regardless of the current state of the checkbox, the checkbox will be selected. So if the currently checkbox is selected, and when you call a check on it, nothing gonna happen. But if the checkbox unselected, then it will be selected. And compared to the click command, it just doesn't care. Click command will click whatever checkbox is right now, just flipping the status to the opposite. And for example, if I change this to the click like this, and by the way, it will not work just out of the box because we found three elements, and click can perform only on a single element. But click command has a second flag called multiple, multiple true. You can pass it like this, and it will click on all elements that are found. So going back and look what happened. So initial state of our checkboxes is first and third are checked and middle one is not. But then we call the click, and that essentially just reverted selection of our checkbox. So that's pretty much the key difference between using check uncheck or using click for the checkboxes. And as a recommended way, well, use check on uncheck. It is more stable approach for interacting with the checkboxes. So you set the right state and just forget about it. And for validation, it's similar to like radio buttons. So I call our checkboxes and I validating that all of them should be checked like this, going back to the test. And here we go, validation pass that all three checkboxes are checked. So that's it guys. So let's quickly summarize what we did in this lesson. For the checkboxes, you need to target the input field of the type checkbox. Use method check to set the state that this checkbox is check or method uncheck to uncheck the box and make the state as unchecked. Method click essentially will just revert or flip the current state of the checkbox. So using check or uncheck technically is a more stable approach when you automating checkboxes. So that's it guys, and I'll see you in the next lesson.