When automating web applications, interacting with checkboxes and radio buttons is a common yet crucial task. Whether you are testing a signup form, a survey, or a settings page, handling these UI elements correctly ensures reliable and bug-free automation scripts.
In Playwright Java, interacting with these elements requires understanding how to locate them accurately, change their state, and verify that the intended action was successful. In this post, we will cover everything you need to know about handling checkboxes and radio buttons in Playwright.
One key advantage of Playwright over Selenium is its built-in action methods, which automatically handle element readiness, visibility, and scrolling into view. This eliminates the need for multiple wait conditions or JavaScript executions, making checkbox and radio button automation simpler and more stable.
- Working with Checkboxes
- Working with Radio Buttons
- Why Playwright handling of checkboxes and radio buttons is better than selenium
Throughout this article, we’ll use our playground website to demonstrate how to handle checkboxes and radio buttons in Playwright.
- For checkboxes, we will use: https://testkru.com/Elements/Checkboxes.
- For radio buttons, we will use: https://testkru.com/Elements/RadioButtons.
Working with Checkboxes
Checkboxes have two possible states: checked or unchecked. In this section, we’ll perform both operations step by step, and then learn how to check whether a checkbox is currently selected.
Selecting a checkbox
Let’s consider the below highlighted element present at this page: https://testkru.com/Elements/Checkboxes. We will try to select/check the highlighted checkbox.
We can easily locate the checkbox using its ID. In this case, the checkbox has the ID “firstSelect1”, so we can use it directly to find the element.
Locator firstCheckbox = page.locator("#firstSelect1");
Note: Please go through this post to learn how to locate element.
Then, we can directly use the “check()” method provided by the playwright to select the checkbox.
firstCheckbox.check();
Whole code
import com.microsoft.playwright.*;
public class CodekruTest {
public static void main(String[] args) {
Playwright playwright = Playwright.create();
Browser browser = playwright.chromium(). // Creating a "Browser" instance
launch(new BrowserType.LaunchOptions().setHeadless(false)); // visually opening the browser
Page page = browser.newContext().newPage(); // Creating a new page
page.navigate("https://testkru.com/Elements/Checkboxes");
Locator firstCheckbox = page.locator("#firstSelect1"); // locating element
firstCheckbox.check(); // selecting the checkbox
System.out.println("Checkbox is checked");
// closing the instances
browser.close();
playwright.close();
}
}
Output –
Checkbox is checkedSo, this is how easy it was to select a checkbox in playwright.
One important point – What if checkbox was already selected ?
If the checkbox is already selected, the check() method won’t make any changes. Let’s look at an example.
In the image below, you can see that the checkbox is already selected.
The overall code remains the same as before, with just a small change in the ID. The highlighted element in this case has the ID “firstSelect5”.
import com.microsoft.playwright.*;
public class CodekruTest {
public static void main(String[] args) throws InterruptedException {
Playwright playwright = Playwright.create();
Browser browser = playwright.chromium(). // Creating a "Browser" instance
launch(new BrowserType.LaunchOptions().setHeadless(false)); // visually opening the browser
Page page = browser.newContext().newPage(); // Creating a new page
page.navigate("https://testkru.com/Elements/Checkboxes");
Locator firstCheckbox = page.locator("#firstSelect5"); // locating element
firstCheckbox.check(); // selecting the checkbox
System.out.println("Checkbox is checked");
// closing the instances
browser.close();
playwright.close();
}
}
Deselecting a checkbox
We can use the uncheck() method provided by playwright to deselect a checkbox.
Let’s try it on the highlighted checkbox below, which is currently selected.
As we can see, the element’s ID is “firstSelect5”. We can use this ID to locate the element and then call the uncheck() method to deselect it.
Locator selectedCheckbox = page.locator("#firstSelect5"); // locating element
selectedCheckbox.uncheck(); // deselecting the checkbox
Whole code
import com.microsoft.playwright.*;
public class CodekruTest {
public static void main(String[] args) throws InterruptedException {
Playwright playwright = Playwright.create();
Browser browser = playwright.chromium(). // Creating a "Browser" instance
launch(new BrowserType.LaunchOptions().setHeadless(false)); // visually opening the browser
Page page = browser.newContext().newPage(); // Creating a new page
page.navigate("https://testkru.com/Elements/Checkboxes");
Locator selectedCheckbox = page.locator("#firstSelect5"); // locating element
selectedCheckbox.uncheck(); // deselecting the checkbox
// closing the instances
browser.close();
playwright.close();
}
}
Checking If a Checkbox is Selected
Sometimes, you may need to verify whether a checkbox is selected, either before performing an action or after selecting/deselecting it. The isChecked() method helps with this by returning true if the checkbox is selected, and false otherwise.
We’ll reuse the checkbox that’s already selected and check its state using the isChecked() method.
Locator selectedCheckbox = page.locator("#firstSelect5");
System.out.println("Is checkbox selected: " + selectedCheckbox.isChecked());
Whole code
import com.microsoft.playwright.*;
public class CodekruTest {
public static void main(String[] args) throws InterruptedException {
Playwright playwright = Playwright.create();
Browser browser = playwright.chromium(). // Creating a "Browser" instance
launch(new BrowserType.LaunchOptions().setHeadless(false)); // visually opening the browser
Page page = browser.newContext().newPage(); // Creating a new page
page.navigate("https://testkru.com/Elements/Checkboxes");
Locator selectedCheckbox = page.locator("#firstSelect5"); // locating element
System.out.println("Is checkbox selected: " + selectedCheckbox.isChecked());
// closing the instances
browser.close();
playwright.close();
}
}
Output –
Is checkbox selected: trueAs we can see, the isChecked() method returned true because the checkbox was already selected.
Working with Radio Buttons
Selecting a Radio Button
Radio buttons allow only one option to be selected at a time within a group. Playwright’s check() method works for radio buttons just like checkboxes, it ensures the option is selected without toggling off.
Let’s take the highlighted radio button shown in the image below. This radio button is located on: https://testkru.com/Elements/RadioButtons
As we can see, the element’s ID is “firstSelect1”. We can use this ID to locate the element and then call the check() method to select the radio button.
Locator radioButton = page.locator("#firstSelect1"); // locating element
radioButton.check(); // selecting the radio button
Whole code
import com.microsoft.playwright.*;
public class CodekruTest {
public static void main(String[] args) throws InterruptedException {
Playwright playwright = Playwright.create();
Browser browser = playwright.chromium(). // Creating a "Browser" instance
launch(new BrowserType.LaunchOptions().setHeadless(false)); // visually opening the browser
Page page = browser.newContext().newPage(); // Creating a new page
page.navigate("https://testkru.com/Elements/RadioButtons");
Locator radioButton = page.locator("#firstSelect1"); // locating element
radioButton.check(); // selecting the radio button
System.out.println("Radio button is selected");
// closing the instances
browser.close();
playwright.close();
}
}
Output –
Radio button is selectedSo, check() method can be used to select both radio buttons and checkboxes.
Checking If a Radio Button is Selected
Just like with checkboxes, we can use the isChecked() method to check whether a radio button is selected.
Let’s take the example of the below highlighted pre-selected radio button.
We can use the id to locate the element and then call the “isChecked() method” on the same.
Locator radioButton = page.locator("#firstSelect5"); // locating element
System.out.println("Is radio button selected: " + radioButton.isChecked());
Whole code
import com.microsoft.playwright.*;
public class CodekruTest {
public static void main(String[] args) throws InterruptedException {
Playwright playwright = Playwright.create();
Browser browser = playwright.chromium(). // Creating a "Browser" instance
launch(new BrowserType.LaunchOptions().setHeadless(false)); // visually opening the browser
Page page = browser.newContext().newPage(); // Creating a new page
page.navigate("https://testkru.com/Elements/RadioButtons");
Locator radioButton = page.locator("#firstSelect5"); // locating element
System.out.println("Is radio button selected: " + radioButton.isChecked());
// closing the instances
browser.close();
playwright.close();
}
}
Output –
Is radio button selected: trueWhy Playwright handling of checkboxes and radio buttons is better than selenium ?
In Playwright, handling checkboxes and radio buttons is easier because it provides built-in methods like check(), uncheck(), and isChecked() that are aware of the element’s current state. This means you don’t have to write extra conditions to verify whether the element is already selected before interacting with it. These methods also automatically wait until the element is visible, enabled, and ready for interaction, so there’s no need to add manual waits.
In Selenium, you typically have to check the element’s state with isSelected() and then use click() conditionally, often combined with explicit waits to avoid errors.
Playwright also scrolls elements into view automatically, which removes the need for JavaScript workarounds when elements are off-screen. All these features make Playwright’s approach cleaner, less error-prone, and more reliable than Selenium for handling checkboxes and radio buttons.
We hope that you have liked this article. If you have any doubts or concerns, please write to us in the comments or email us at admin@codekru.com.