Selecting from Dropdowns in Playwright JS

Learn how to select and get values from dropdowns in Playwright. 

HTML Select Dropdowns and Multi Select are ways to provide user input fields that allow for predetermined options.  

If we’re using these fields for critical information, we need to make sure that they’re working inside of our tests.

How to Select from Dropdowns with Playwright

Starting off with a Playwright test, I want to say that every time I go.to the Select page, I want to make sure that I “should select an option from the select dropdown”. To do that, I’m going to first await this command. Then I’m going to say that on the page object, I want to use the selectOption method.

The first argument I’m going to pass in is the ID of that select dropdown itself (“#spices-select-single”). For the second argument, I want to actually pass in the value that I want to select. When I pass in this value, I want to make sure I’m not passing in the label, but the actual value itself. In this instance, I want to say, I want to select the value of “ginger”. 

Next, I want to know how to get the value of that selectOption. That way I can make sure that that selectOption is actually working. I’m going to create a constant and I’m going to call that const selectedValue and I’m going to set that equal to await. Then I’m going to use the page object where I’m going to say, I want to eval. What it’s going to do, it’s going to allow us to evaluate the selector that we find, and we can actually use the node inside of the HTML to actually grab its value. 

Using the same selector, I’m going to say that I want to evaluate my spices — $eval(‘#spices-select-single’, ). Then I’m going to pass in my second argument, which is going to be a function. 

For that function, I’m going to receive an argument of element — element => element.value — where that’s going to be the node that I can interact with. I’m saying that I want to access the element’s value. 

Then we can use our expect function from Playwright test, where I’m going to say that I want to expect that my selectedValue is going toContain my “ginger”. 

If we run that test, we can see that Playwright is going to open up the browser in this instance. It’s going to select that dropdown, and we can see that it asserted correctly.

How to Test Multi Select Dropdowns with Playwright

Next, we want to also test the multi select. I’m starting a new test that says it “should select multiple options from the multi select dropdown”. 

To start, we can use the same selectOption method. I’m going to paste that right in, but this time, instead of just “ginger”, I want to select both “ginger” and “paprika”. I’m going to pass that in as an array — [‘ginger’, ‘paprika’] — so I can select multiple values. Also, we want to also make sure that our selector is updated. In our instance, this is going to be “#spices-select-multi”.

Now, this is where it becomes a little bit more complicated than our first example. I’m going to first copy and paste our selectedValue line. But this time I’m going to change it to selectedValues, as ultimately, we want to grab multiple values.

Next, we want to make sure that we update that selector, but instead of targeting this single value, we want to grab all the values. Luckily, we can use the property of selectedOptions on that element. 

When we’re using selectedOptions, it’s going to pass back all the element nodes instead of the actual value. We want to grab the value of each of those selectedOptions. 

First, we can use Array.from where we’re going to turn this node list into an array. Then we can say that we want to map through each one of these options. We’re going to say for each option that we want to retrieve the option.value. 

Finally, we can use that expect function again, where we’re going to pass in our selectedValues. But this time we’re going to use toEqual, where we’re going to say that we want that array of selectedValues to equal the values that we passed in to selectOption.

Again, if we try to run these tests, Playwright is going to open this up inside of a browser and it’s going to go through and it’s going to select all our options.

Summing It Up – Testing Select Dropdowns with Playwright 

In review, in dealing with selects, we really have 2 different types of selects. We have our dropdown where you can select a single value. But we also have our multi select where we can select multiple values. 

In order to both select an option value and get the value, first we can use the page.selectOption method. We’re going to first tell Playwright what value that we want and a select, whether it’s a single String value or an array of Strings. 

Next, we’re going to use the eval statement. We’re going to say that we want to grab that particular HTML element. We’re going to grab the value in the case of a single select. Because that value is going to be a String, we can make sure that it is equal to that particular String.

Then for a multiselect, we’re going to use that same page.$eval method, but this time we’re going to look for all the selectedOptions. Because that’s coming in as a node list, we’re going to first turn that into an array where we’re going to map through each one of those options and grab that String value. Finally, we’re going to use expect to make sure that that selectedValues array is equal to the array that we’re passing into our select.

Resources

• Git Repo – select.spec.js

Applitools Kitchen – Selecting from Dropdown