How to handle multi-select dropdown in Playwright?

The Answer

For native `<select multiple>` elements, pass an array to `selectOption()`. For custom multi-select UI components, interact with each option individually.

Deep Dive Explanation

The `toHaveValues()` matcher (plural) is specifically designed for multi-select validation. It checks that the selected options match the expected array exactly — the order doesn't matter.

example.spec.ts

// Native <select multiple>
const multiSelect = page.locator('#skills-select');

// Select multiple by value
await multiSelect.selectOption(['javascript', 'typescript', 'python']);

// Select multiple by label
await multiSelect.selectOption([
  { label: 'JavaScript' },
  { label: 'TypeScript' },
]);

// Verify selected values
await expect(multiSelect).toHaveValues(['javascript', 'typescript', 'python']);

// Deselect all
await multiSelect.selectOption([]);

// Custom multi-select (checkbox-based)
await page.getByRole('checkbox', { name: 'JavaScript' }).check();
await page.getByRole('checkbox', { name: 'TypeScript' }).check();