How to automate the radio, checkboxes & Input Fields in Playwright | Day 6 | Playwright with JavaScript in 30 Days Challenge | Tech Bharat
Playwright Radio Button Handling Notes
What We Will Learn
Locate radio buttons
Select a radio button
Validate whether radio button is selected
Use isChecked() method
Perform negative validation
Understand toBeTruthy() and toBeFalsy()
Difference between radio button and checkbox behavior
Navigate to Application
await page.goto('https://rahulshettyacademy.com/AutomationPractice/');
Purpose
Used to open the application URL in the browser.
Locate a Radio Button
const radio = page.locator("input[value='radio2']");
Purpose
locator() is used to identify the web element.
Here we are locating the radio button whose value is radio2.
Select the Radio Button
await radio.check();
Purpose
check() is used to select radio buttons or checkboxes.
If already selected, Playwright will not select it again.
Validate Radio Button is Selected
Approach 1: Using toBeChecked()
await expect(radio).toBeChecked();
Purpose
Checks whether the radio button is selected.
Recommended Approach
This is the preferred Playwright assertion for validation.
Alternative Validation Using isChecked()
await expect(await radio.isChecked()).toBeTruthy();
Understanding isChecked()
radio.isChecked()
Returns
Understanding toBeTruthy()
toBeTruthy()
Purpose
Passes the test if returned value is:
true
non-empty
valid value
Fails if value is:
false
null
undefined
0
Locate Another Radio Button
const radio3 = page.locator("input[value='radio3']");
Purpose
Locates another radio button for negative validation.
Negative Validation
Using toBeFalsy()
await expect(await radio3.isChecked()).toBeFalsy();
Purpose
Checks whether radio button is NOT selected.
Understanding toBeFalsy()
toBeFalsy()
Passes When Value Is:
false
null
undefined
0
empty string
Another Negative Validation Approach
await expect(radio3).not.toBeChecked();
Purpose
Verifies that the radio button is not selected.
Recommended Approach
Cleaner and more readable compared to toBeFalsy().
Important Note About Radio Buttons
// await radio.uncheck();
Explanation
Radio buttons generally cannot be unchecked directly.
Selecting another radio button automatically deselects the previous one.
uncheck() is mainly used for checkboxes.
Static Wait
await page.waitForTimeout(6000);
Purpose
Pauses script execution for 6 seconds.
Important Note
Mainly used for debugging
Not recommended in real automation frameworks
Prefer assertions and dynamic waits
Assertions Used in This Example
Important Methods Used
Best Practices
✅ Prefer toBeChecked() for validation
✅ Use not.toBeChecked() for negative testing
✅ Avoid unnecessary static waits
✅ Use meaningful locators
✅ Use assertions after every important action
✅ Avoid using isChecked() with extra assertions unless needed
Difference Between Radio Button and Checkbox
Complete Flow Summary
Open application
Locate radio button
Select radio button
Validate selection using assertions
Perform negative validation on another radio button
Understand truthy/falsy assertions
Pause execution for observation
import { test, expect } from '@playwright/test';
test('Study built-in locator', async ({ page }) => {
// Navigate to application
await page.goto('https://rahulshettyacademy.com/AutomationPractice/');
// Locate the radio button
const radio = page.locator("input[value='radio2']");
// Check the radio button
await radio.check();
// Verify whether the radio button is checked or not
await expect(radio).toBeChecked();
// Another approach using isChecked()
// isChecked() returns true if the radio button is checked, otherwise false
// toBeTruthy() passes the test if the value is true
await expect(await radio.isChecked()).toBeTruthy();
// Locate another radio button
const radio3 = page.locator("input[value='radio3']");
// Verify that radio3 is not checked
await expect(await radio3.isChecked()).toBeFalsy();
// Another approach
await expect(radio3).not.toBeChecked();
// Uncheck is mainly used for checkboxes
// Radio buttons cannot usually be unchecked directly
// await radio.uncheck();
// Static wait (not recommended in real projects)
await page.waitForTimeout(6000);
});
Playwright Input Field Validation Notes
What We Will Learn
Validate input field visibility
Check whether input field is empty
Verify input field is editable
Verify input field is enabled
Enter data into input field
Understand static wait usage
Navigate to Application
await page.goto('https://the-internet.herokuapp.com/inputs');
Purpose
Used to open the application URL in the browser.
Wait for Element
await page.waitForSelector("input[type='number']");
Purpose
Waits until the element is visible on the page.
Ensures the element is loaded before performing actions.
Note
In Playwright, explicit waits are usually not required because Playwright has auto-waiting capability.
Locate the Input Field
page.locator("input[type='number']")
Purpose
Locates the input field whose type is number.
Validate Input Field is Visible
await expect(page.locator("input[type='number']")).toBeVisible();
Purpose
Checks whether the input field is visible on the webpage.
Assertion Used
toBeVisible()
Validate Input Field is Empty
await expect(page.locator("input[type='number']")).toBeEmpty();
Purpose
Checks whether the input field is empty.
Assertion Used
toBeEmpty()
Validate Input Field is Editable
await expect(page.locator("input[type='number']")).toBeEditable();
Purpose
Checks whether the user can type into the input field.
Assertion Used
toBeEditable()
Validate Input Field is Enabled
await expect(page.locator("input[type='number']")).toBeEnabled();
Purpose
Checks whether the input field is enabled for user interaction.
Assertion Used
toBeEnabled()
Enter Data into Input Field
await page.locator("input[type='number']").type("rajat");
Purpose
Used to type data into the input field.
Important Note
This field accepts only numeric values because its type is number.
Typing "rajat" may not work correctly depending on browser validation.
Better Example
await page.locator("input[type='number']").type("12345");
Static Wait
await page.waitForTimeout(5000);
Purpose
Pauses execution for 5 seconds.
Important Note
waitForTimeout() is mainly used for debugging purposes.
Avoid using static waits in real automation frameworks.
Prefer dynamic waits or assertions.
Assertions Used in This Example
Important Methods Used
Best Practices
✅ Use assertions before performing actions
✅ Prefer fill() over type() in most cases
✅ Avoid unnecessary static waits
✅ Use meaningful locators
✅ Rely on Playwright auto-waiting whenever possible
✅ Validate field state before interaction
Recommended Improvement
Instead of:
.type("rajat")
Use:
.fill("123")
Because the field type is number.
Complete Flow Summary
Open application
Wait for input field
Verify field is visible
Verify field is empty
Verify field is editable
Verify field is enabled
Enter data into field
Pause execution for observation
import{test, expect} from '@playwright/test';
test("study bulit in locator",async ({page})=>{
await page.goto('https://the-internet.herokuapp.com/inputs');
//check the check box is visible or not
await page.waitForSelector("input[type='number']");
await expect(await page.locator("input[type='number']")).toBeVisible();
//check whether the input field is empty or not
await expect(await page.locator("input[type='number']")).toBeEmpty();
//check whether the input foeld id editable or not
await expect(await page.locator("input[type='number']")).toBeEditable();
//check whether the input field is enable or not
await expect(await page.locator("input[type='number']")).toBeEnabled();
await page.locator("input[type='number']").type("rajat");
await page.waitForTimeout(5000) // pausing the script
}
)
Playwright Checkbox Handling Notes
What We Will Learn
Select a single checkbox
Validate whether checkbox is checked
Uncheck a checkbox
Negative validation
Handle multiple checkboxes using loops
Uncheck multiple checkboxes dynamically
Navigate to Application
await page.goto('https://rahulshettyacademy.com/AutomationPractice/');
Used to open the application URL in the browser.
Locate a Checkbox
const checkbox2 = page.locator("#checkBoxOption2");
locator() is used to identify the web element.
Here we are locating Checkbox Option 2.
Select a Single Checkbox
await checkbox2.check();
check() is used to select a checkbox.
If checkbox is already selected, Playwright will not select it again.
Verify Checkbox is Checked
Approach 1: Using toBeChecked()
await expect(checkbox2).toBeChecked();
Validates whether the checkbox is selected or not.
Recommended approach in Playwright.
Approach 2: Using isChecked()
await expect(await checkbox2.isChecked()).toBeTruthy();
Explanation
isChecked() returns:
true → if checkbox is selected
false → if checkbox is not selected
toBeTruthy() passes the test if returned value is true.
Uncheck a Checkbox
await checkbox2.uncheck();
uncheck() is used to deselect the checkbox.
Works only if checkbox is already checked.
Negative Testing
const checkbox3 = page.locator("#checkBoxOption3");
Example:
await expect(checkbox3).not.toBeChecked();
Purpose
Used to validate that checkbox is NOT selected.
Handle Multiple Checkboxes
Store Multiple Locators in an Array
const checkboxesLocator = [
"input[id='checkBoxOption3']",
"input[id='checkBoxOption2']",
"input[id='checkBoxOption1']",
];
Why Use Array?
Reduces duplicate code
Makes framework reusable
Easy to maintain
Select Multiple Checkboxes Using Loop
for (const checkboxelement of checkboxesLocator) {
await page.locator(checkboxelement).check();
}
Explanation
Loop iterates through all checkbox locators
check() selects each checkbox one by one
Uncheck Multiple Checkboxes
for (const checkboxelement of checkboxesLocator) {
if (await page.locator(checkboxelement).isChecked()) {
await page.locator(checkboxelement).uncheck();
}
}
Explanation of Above Logic
Step 1
Loop through all checkboxes.
Step 2
Check whether checkbox is already selected using:
isChecked()
Step 3
If selected, uncheck it using:
uncheck()
Important Methods Used
Best Practices
✅ Use toBeChecked() for validation
✅ Use loops for handling multiple checkboxes
✅ Avoid hardcoded duplicate code
✅ Use arrays for reusable automation
✅ Prefer dynamic handling in frameworks
✅ Avoid unnecessary static waits in real projects
Complete Flow Summary
Open the application
Locate checkbox
Select checkbox
Validate checkbox selection
Perform negative validation
Handle multiple checkboxes using array + loop
Uncheck selected checkboxes dynamically
import { test, expect } from '@playwright/test';
test('Study built-in locator', async ({ page }) => {
// Navigate to application
await page.goto('https://rahulshettyacademy.com/AutomationPractice/');
const checkbox2=page.locator("#checkBoxOption2");
//select the single checkbox
checkbox2.check();
//check whether the checkbox is checked or not
await expect(checkbox2).toBeChecked();
//another approach
await expect(checkbox2.isChecked()).toBeTruthy();
//
//uncheck the checkbox
// checkbox2.uncheck();
//negative testing , checkbox3 is not selected
const checkbox3=page.locator("#checkBoxOption3");
// await expect(await checkbox3.isChecked()).toBeTruthy()
//selected the multiple checkboxes
//first capture the locators of those element and put those into a array
const checkboxesLocator=[
"input[id='checkBoxOption3']",
"input[id='checkBoxOption2']",
"input[id='checkBoxOption1']",
];
for(const checkboxelement of checkboxesLocator)
{
await page.locator(checkboxelement).check();
}
//uncheck all the checkboxes
for(const checkboxelement of checkboxesLocator)
{
if(await page.locator(checkboxelement).isChecked())
{
await page.locator(checkboxelement).uncheck();
}
}
await page.waitForTimeout(5000);
}
)
- Join our Telegram channel: https://t.me/thetechbharat
- Join our WhatsApp Group: https://chat.whatsapp.com/BBu2ZXxqASr7AHilRfSUzh?mode=gi_t
- Follow us for more info: www.linkedin.com/in/rajat-bhatti
- Subscribe to our YouTube channel: https://www.youtube.com/@Techbharat12
Post a Comment