Day 4: Page Interactions — Click, Fill, Select, Upload, and Keyboard

This is Day 4 of the 21-Day Playwright with TypeScript Challenge. One lesson per day. Zero to production-ready in 3 weeks.

🎭 Want to master this with real projects? Join the Playwright Automation Mastery course at The Testing Academy.

---

Every user action has a Playwright method. Click buttons, fill forms, select dropdowns, upload files, trigger keyboard shortcuts. Each auto-waits for element readiness.

Complete Interaction Reference

// Clicking
await page.getByRole('button', { name: 'Submit' }).click();
await page.getByText('Menu').dblclick();
await page.getByRole('link').click({ force: true }); // Skip actionability

// Form filling
await page.getByLabel('Email').fill('test@example.com');
await page.getByLabel('Email').clear();
await page.getByLabel('Bio').type('Hello', { delay: 100 }); // Keystroke sim

// Dropdowns
await page.getByLabel('Country').selectOption('US');
await page.getByLabel('Color').selectOption({ label: 'Red' });

// Checkboxes and radio
await page.getByLabel('Accept terms').check();
await page.getByLabel('Accept terms').uncheck();
await page.getByLabel('Premium').setChecked(true);

// File upload
await page.getByLabel('Upload').setInputFiles('resume.pdf');
await page.getByLabel('Photos').setInputFiles(['a.jpg', 'b.jpg']);

// Keyboard
await page.getByLabel('Search').press('Enter');
await page.keyboard.press('Control+a');
await page.keyboard.press('Escape');

// Mouse
await page.getByText('Tooltip target').hover();
await page.locator('#source').dragTo(page.locator('#target'));

Complete Form Automation Example

test('complete registration form', async ({ page }) => {
  await page.goto('/register');
  
  await page.getByLabel('Full name').fill('Jane Doe');
  await page.getByLabel('Email').fill('jane@example.com');
  await page.getByLabel('Password').fill('Secure123!');
  await page.getByLabel('Country').selectOption('US');
  await page.getByLabel('I agree to terms').check();
  await page.getByLabel('Profile photo').setInputFiles('photo.jpg');
  await page.getByRole('button', { name: 'Register' }).click();
  
  await expect(page.getByText('Registration successful')).toBeVisible();
});

Tomorrow (Day 5): Page Object Model — structure tests that scale.