Automation with playwright - Part 3 handle Inputs

Interacting with Input Boxes and Radio Buttons in Playwright

Playwright provides multiple methods to perform actions on form elements like input boxes and radio buttons. You can also apply useful assertions to validate their state.

Input field

// Using locator + fill
await page.locator('#name').fill('John');

// Or directly using page.fill
await page.fill('#name', 'John');

Radio Button AND checkbox.

Both have similar functions

const maleRadio = page.locator('//input[@value="Male"]');
await maleRadio.check();

// Or directly
await page.check('//input[@value="Male"]');

// is it checked 
maleRadio.isChecked()

// CHECKBOX: 

const checkbox = page.locator('//input[@id="monday"]');
// check uncheck
await checkbox.check();
await checkbox.uncheck()

// check current status
await checkbox.isChecked();


// select a dropdown item
await page.locator('#colors').selectOption('blue');
// Select Multiple Options
await page.locator('#colors').selectOption(['blue', 'red', 'yellow']);
// shortcut
await page.selectOption('#colors', ['blue', 'red', 'yellow']);

// Wait to Observe Selection
await page.waitForTimeout(5000);