Checkboxes | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Mastering UI Elements
Instructor: Artem Bondar
Lesson Summary
In this lesson, we will explore how to automate checkboxes using Playwright, including how to select, unselect, and perform assertions on checkbox selections. Key Concepts Checkbox Interaction: Learn to interact with checkboxes using Playwright's methods. Locator Selection: Use locators to find checkboxes by their roles and names. Methods: check : Checks the checkbox if it is not already checked. uncheck : Unchecks the checkbox if it is checked. click : Performs a click action without checking the current status. Example Implementation To interact with a checkbox: const checkbox = page.getByRole('checkbox', { name: 'Checkbox Name' }); await checkbox.check(); // Check the checkbox await checkbox.uncheck(); // Uncheck the checkbox Selecting All Checkboxes To select or unselect all checkboxes on a page: const allBoxes = page.getByRole('checkbox'); const boxesArray = await allBoxes.all(); // Convert to array for (const box of boxesArray) { await box.check(); // Check each checkbox expect(await box.isChecked()).toBeTruthy(); // Validate checked status } Summary Use check and uncheck methods for reliable checkbox status management, while click performs a simple action without status validation. Always convert locators to an array for looping through multiple elements. In conclusion, understanding these methods will enhance your ability to automate checkbox interactions effectively in your tests.
Video Transcript
In this lesson, we will talk about how to automate checkboxes and how to interact with the checkboxes. Playwright has a special method how to select the checkboxes and unselect the checkboxes. And also we will learn how to select all checkboxes and unselect all checkboxes, as well as how to perform assertion of this checkbox selection. So let's get into it. So this is our test application and I'm clicking on the model's overlays and select the toaster page. On the toaster page, we have three checkboxes, two are selected, one is not. And I will show you how to interact with those using a playwright. Going back to our test application and I will create a new test. So I will create it outside of our test described block because it will be on the different page. So I put it right here. And I will quickly set up the navigation to this page. So just for the convenience, I'll copy these two steps and modify them. So first we need to navigate to models and overlays. And then we need to navigate to a toaster page. So let's write a simple test. For example, to just click on this checkbox, which is hide on click. So we want to perform this action. First thing is we need to find the locator for this checkbox. So right click, inspect, and what we can see. So this is an in B icon. If we scroll down, we can see that this is also an input element. It has a type checkbox and it's also a type of checkbox. It has a type checkbox and it's also visually hidden. And also it has a label. So it means that this checkbox can be selected by role and by input. So let's use the recommended way of selecting by a checkbox. And since this is the only three checkboxes on this page, so it means if we select the checkbox by name, it will not select any other checkboxes. Going back to the code, page get by role. And I type a checkbox and our checkbox should have name. And I copied the name from the application. And I can perform a click. So let's run this and see what's going to happen. And it doesn't work because our checkbox is visually hidden. So we need to provide the flag force true. Let's run it one more time. Yeah, and now it's perfectly selected. You can see this checkbox was unchecked. And there is a different method in the playwright to interact with the checkbox called check, which we used previously in the radio buttons lesson. So let me type check and let's see what happened with this button right now. I run this test again. And right now we see the test passed, but the checkbox does not seem to be unchecked, right? Like we saw with the example with the click. And this is the difference between check and click. Check method will check the status of the checkbox. And if the checkbox already checked, it will not unselect this checkbox. It will remain selected. While click command is just performing the click and doesn't validate the status of the checkbox. So better to use a method check. And if you want to uncheck a certain command, you need to use appropriate method, which is called uncheck. And if we run this right now, you see it's perfectly worked. The checkbox was unchecked. So let's move on and select a second checkbox, just to make sure that check works as I just described. So I just copy this step and I just replace the name for our checkbox. So I need to take this name, going back, replacing it. And instead of uncheck, I type check. Running this one more time. And right now we can see that first checkbox is unchecked and second checkbox is checked according to the check method that we used. So just a quick summary, check and uncheck commands are checking the status of the checkbox. If the checkbox is checked, the check command will not make any selection. The same for uncheck. If uncheck box is already unchecked, it will not make any selection and the remain the checkbox in unchecked state. Let's say one more scenario. Let's say you want to select all checkboxes or unselect all checkboxes on the page. So how to do that? The approach is this one. First, we need to take the locator of all checkboxes on the page. And then we need to loop through those checkboxes and check them or uncheck them. So first of all, let's create a locator for all checkboxes. So const allBoxes equals to, and the locator will be simple. Page, getByRoll, checkbox. And we don't need a name, just a checkbox. So with this locator, we will get the list of all checkboxes. And now we're going to use just a simple JavaScript loop to loop through those elements. So for create a new constant for our iterator, box of allBoxes and then body of our loop. But this is not a complete form. All boxes represent the locator of the three elements, but it's not the collection of the elements. It's not the array. In order to loop through the elements, we need to convert them into the array. And in order to do that, we need to call a method dot all. Dot all will create array out of the list of this element. And since this is the promise that we call on our locator, we need to use a wait command. So this simple for loop will loop through the list of all checkboxes. With each cycle, we assign the locator for checkbox to this box iterator. And we can use this box iterator to interact with our checkboxes. And now inside of the loop, we put await box. And let's say we want to check all checkboxes. And we need to provide force true. And let's make a validation that they are checked. And I put expect await box is checked. And it should be truthy. To be truthy. Okay, I'm running this test. Yeah, you can see all checkboxes are checked right now. And let's do the opposite thing. So let's say we want to uncheck all checkboxes. And when we uncheck them, all boxes should be falsy. Like that. So we validate the status, is it check or not. The result is check will return a false. And we want to validate that it is falsy. Running this again. And right now we see that all checkboxes are unselected. So that's it. So let's quickly summarize what we did in this lesson. To interact with the checkboxes, better to use method check or uncheck. Check or uncheck method will check the status of the checkbox. And if it's already selected, check will not select this button again. Or if it is unchecked and we use uncheck method, the button will remain in the same unchecked status. Versus click command will just simply perform a mouse click and do not check the status of the checkbox. In order to look through the list of the elements or through the list of the checkboxes, you need to first take the locator of the checkboxes. And then using method all create array of the web element. And then you can look through this array using a JavaScript loop. And the validation of the checkbox is similar to a radio buttons. You just grab the status of the checkbox. Is it checked or no? And then validate is it truthy or is it falsy? All right. That's it, guys. And see you in the next lesson.