How do I choose an option from a drop-down menu using Playwright?


To select an option from a drop-down menu using @playwright/test, you can utilize the selectOption() method. First, locate the drop-down element with a selector and then call the selectOption() method on it.

Here's an example of selecting the "red" option from a drop-down with the label "Choose color":

await page.getByLabelText('Choose color').selectOption('red');

If you need to select multiple options, pass an array of values to the selectOption() method:

await page.getByLabelText('Choose color').selectOption(['red', 'green', 'blue']);

Playwright also offers methods for other pointer-related actions like clicking and hovering over elements. These methods wait for elements to be displayed and not obscured by other elements before performing their actions.

In case your app has complex logic where hovering over an element overlays it with another element that intercepts clicks, you can bypass actionability checks and force clicks using the { force: true } option in .click():

await page.click('.some-element', { force: true });

With Playwright, you have comprehensive support for interacting with web pages, including selecting drop-down options in various ways to suit your needs.

Thank you!
Was this helpful?
Still have questions?

If you still have questions, please ask a question and I will try to answer it.

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.