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

Answer

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.