5. UI Components

Dropdowns

// Select by label, value, or index
await page.selectOption('#country', 'India');            // by label
await page.selectOption('#country', { value: 'IN' });   // by value
await page.selectOption('#country', { index: 2 });       // by index

// Multi-select
await page.selectOption('#hobbies', ['Reading', 'Music']);

Radio Buttons & Checkboxes

// Radio: just click the label or input
await page.getByLabel('Male').check();

// Checkbox
await page.getByRole('checkbox', { name: 'Agree' }).check();
await expect(page.getByRole('checkbox', { name: 'Agree' })).toBeChecked();

// Toggle
await page.getByLabel('Subscribe').uncheck();

Child Windows (Popups)

// Handle new window/tab
const [newPage] = await Promise.all([
  page.waitForEvent('popup'),
  page.click('#open-new-window'),
]);
await newPage.waitForLoadState();
await expect(newPage).toHaveTitle('New Window');

Tabs

// Open a new tab in the same context
const page2 = await context.newPage();
await page2.goto('https://example.com');

// Switch between tabs
await page.bringToFront();
await page2.bringToFront();

file Uploads

// Single file
await page.getByLabel('Upload').setInputFiles('resume.pdf');

// Multiple files
await page.getByLabel('Upload').setInputFiles(['file1.pdf', 'file2.pdf']);

// Remove files
await page.getByLabel('Upload').setInputFiles([]);