Working with Input box ,Radio Buttons & Checkboxes In Playwright

 Working with input boxes, radio buttons, and checkboxes in Playwright is pretty straightforward. Here's a quick guide with examples in JavaScript.

Interacting with Text Inputs

To fill out text inputs in Playwright, the locator.fill() method is commonly used. This method focuses on the element and triggers an input event with the provided text. Here’s how you can use it:

✅ Syntax

await page.fill('#username', 'myUsername'); // By ID
await page.fill('input[name="email"]', 'test@example.com'); // By name

NOTE : fill() clears existing text before typing.

Example :

// @ts-check
import { test, expect } from '@playwright/test';

test('Handle input box', async ({page}) => {

  await page.goto('https://demoqa.com/text-box');

  //Assertion in inputbox
  await expect(page.locator("[id='userName']")).toBeVisible();
  await expect(page.locator("[id='userName']")).toBeEmpty();
  await expect(page.locator("[id='userName']")).toBeEditable();
  await expect(page.locator("[id='userName']")).toBeEnabled();

  // Entering value in inputbox
  await page.locator("[id='userName']").fill("Sumit Kumar");

  //Check entered value.
  await expect(page.locator("[id='userName']")).toHaveValue("Sumit Kumar");
 
});

Output :

Interacting with Radio Buttons

Radio buttons allow users to select one option from a set. To automate interactions with radio buttons in Playwright, you can use the locator.check() method. This method checks the specified radio button, ensuring that it is selected. Here’s an example:

✅ Syntax

await page.check('input[type="radio"][value="male"]'); // Select radio by value

NOTE : Use check() to select. Playwright will throw if the radio is already selected or not visible.

Example 

// @ts-check
import { test, expect } from '@playwright/test';

test('Handle radio button', async ({page}) => {

  await page.goto('https://practice.expandtesting.com/radio-buttons');

  //Check radio button field
  await page.locator("[id='yellow']").check();

  //Assertion to radio button to verify it's checked
  await expect(page.locator("[id='yellow']")).toBeChecked();

  //Assertion to radio button to verify it's unchecked
  expect(await page.locator("[id='blue']").isChecked()).toBeFalsy(); 
});

Output:

Interacting with Checkboxes

you can use the locator.check() & locator.uncheck() method for selecting the Checkboxes.

✅ Syntax

await page.check('#subscribe');   // Check it
await page.uncheck('#subscribe'); // Uncheck it

Example :

// @ts-check
import { test, expect } from '@playwright/test';

test('Handle checkbox', async ({page}) => {

  await page.goto('https://practice.expandtesting.com/checkboxes');

  //Check checkbox field
  await page.locator("[id='checkbox1']").check();
  
  //Assertion to checkbox to verify it's checked
  await expect(page.locator("[id='checkbox1']")).toBeChecked();
  expect(await page.locator("[id='checkbox1']").isChecked()).toBeTruthy();
  
  //Uncheck checkbox field
  await page.locator("[id='checkbox1']").uncheck();
  
  //Assertion to checkbox to verify it's unchecked
  expect(await page.locator("[id='checkbox1']").isChecked()).toBeFalsy();  
 
});

Output: