Ways to Select DropDown Value using Playwright Typescript | QA SDET
Playwright supports both standard HTML select dropdowns and custom dropdown UIs (like those built with React, Angular, etc.). Here's a concise summary of all possible methods:
1. Using selectOption()
Best for standard select tags. You can select by:
value: await page.selectOption('#dropdown', 'option1');
label: await page.selectOption('#dropdown', { label: 'Option 1' });
index: await page.selectOption('#dropdown', { index: 2 });
2. Manual Click (for Custom Dropdowns)
For styled dropdowns that aren’t native select elements:
await page.click('#dropdownTrigger');
await page.click('text=Option 2');
3. Keyboard Interaction
Useful when dropdown supports keyboard navigation:
await page.press('#dropdown', 'ArrowDown');
await page.press('#dropdown', 'Enter');
4. Locators with Filters
For targeting list items dynamically:
await page.locator('li').filter({ hasText: 'Option 1' }).click();
5. JavaScript Evaluation (Advanced)
For edge cases or hidden dropdowns:
await page.$eval('#dropdown', el = el.value = 'option1');
When to Use What:
Use selectOption() for basic HTML dropdowns.
Use manual clicks and locators for custom JS-based dropdowns.
Use keyboard or JS tricks only when other methods fail.