Playwright with Javascript — How to handle DropDown
This article explains how to handle dropdowns using Playwright with JavaScript. To select an option from a dropdown list, you can use the selectOption() method. Various options can be passed here, such as label, text, or visible text, the value or bypass the index in multiple ways.
The most popular option is label. Within curly braces, you can pass a keyword called label, and inside quotes, you can specify the country you want to select.
Label
await page.locator('#country').selectOption({label: 'United Kingdom'})
Visible text
Here we can directly pass the value.
await page.locator('#country').selectOption('United Kingdom')or
await page.selectOption('#country', 'United Kingdom')Value Attribute
We can select an option from the dropdown list using the value attribute.
await page.locator('#country').selectOption({value: 'uk'})Index Value
We can select an option from the dropdown list using the index value.
await page.locator('#country').selectOption({index: 1})Assertions
Suppose we have a dropdown list and let’s say we are expecting five options or 10 options should be there in dropdown list.
Check total number of options in drop down list
We need to fisrt capture all the options from the drop down list into a variables.
await page.locator('#country option')`#country option` this will return all the options which are available in the drop down list. We need to store this in a variable.
const options = await page.locator('#country option')This statment return all elements locators.
How to check total number of options in the drop down list. First we need to capture all the options into the variable and we can apply one expect function this is assertion.
await expect(options).toHaveCount(10)
Check number of options in dropdown — array format
Get Dinusha Somarathne’s stories in your inbox
Join Medium for free to get updates from this writer.
Here we will get all options into the varaible and we want to captre all the options in the array format. In the array format we want to get the options inside the array and then we can find a length of an array. If you want to get all the options all theelements in the array format we can user something called $$ options.
const options = await page.$$('#country option')If you want to print those options length before counting we can use
console.log('Number of options ', options.length)It will print how many options are there in the array or length of an array.
Now we can add assertion here.
await expect(options.length).toBe(10)
Check perticular option in the dropdown list
Here we are checling particular option is present in the dropdown list. We can extract the all content in the options using textContent(). textContent() will return the text contained of this perticular locator.
await page.locator('#country').textContent()We can add this it to variable called content and it will return the string format.
const content = await page.locator('#country').textContent()Wecan write assertion to check ‘United Kingdom’ should be part of the dropdown list and it will return true or false.
await expect(content.includes('United Kingdom')).toBeTruthy()This assertion will pass if the content is having ‘United Kingdom’.
Check presence of value in the drop down list using looping
First, we need to capture all the options into variables.
const options = await page.$$('#country option')Then we need to check paricular option is present in the dropdown list or not. We can make a one variable called status and we can make it to false intially because we will start the option is not vailable in the dropdown list.
let status= falseOnce you found that option in the drop down list then we can make the status as true.
We already capture options. We need to specify that options variable now from this options we need to read each and every option one by one. We can create one varable called option of options and this option is const.
const options = await page.$$('#country option')
let status= false
for(const option of options){
console.log(await option.textContent())
}Here from the options it will read each and evry option one by one into this option variable. From this ‘option’ we have to capture each and every text because this elemnt is a web elemnt. From this web elemnt we have to extract the text content. We can print all options using console window. When we execute this loop this will read each and evry option from the drop down and print inside the console window.
Now we need to check one of the option is present inside the drop down or not. Before assertion we need to write one if condition. When you found the value ‘France’ immediately we can make the status is true and then it will break the loop because we don’t need to go with the rest of the value.
const options = await page.$$('#country option')
let status= false
for(const option of options){
// console.log(await option.textContent())
let value = await option.textContent()
if(value.includes('France'))
{
status= true;
break;
}
}After coming out from this for loop we have to put one assertion.
expect(status).toBeTruthy()
Select option from dropdown using loop
We can select that option from the drop down by writing loop statement.
const options = await page.$$('#country option')
for(const option of options){
// console.log(await option.textContent())
let value = await option.textContent()
if(value.includes('France'))
{
await page.selectOption('#country', value)
break;
}
}From the options, we need to read each option into a variable one by one. We must capture the textContent from each option. Once the text content is captured, we compare it with the value we want to select. If both match, we select the value 'France' from the dropdown. We should avoid hardcoding the selected option because the value is obtained through the loop's iteration. If the value matches our expected value, it is passed inside the if condition, and once it is selected, the loop will break. Finally, we can verify the selected value.
