Handling Select/DropDown | Playwright - Part 9

In this video, we're going to learn how to handle select or dropdown in playwright?

Key moments:
0:00 handling select in playwright
0:12 How to read docs?
1:28 select using label
4:34 Jest expect
7:28 Multiple select
11:00 Find options length
13:00 How to get the selected option playwright
19:00 Recap

Source code:

API link:

Issue Link:

#playwright #letcode
Join this channel to get access to perks:

[彭偉倫-bg]

thanks for your teaching! The think path of using selectoption really help me a lot.

[sukhwindersingh-kzzd]

Thank you for sharing the info, however is there workaround to handle the select2 not select as I am getting err in playwright i.e Element is not a <select> element

[MiguelAngel-ouzm]

Will last scenario (selected option) work when wanting to know if an option is present in a dropdown, not selected? btw, awesome explanation.

[Aowek]

Hi Koushik,

How can I handle dynamic angular dropdown using Page object model ? Could you please showcase an example?

[arutchelvana]

Hi Koushik,
In Angular application, this is handled as <mat-options>, I tried using this select, But not working.
So would like to know, How do we handle the select option in angular based <mat-select>, <mat-Option> cases.
Now we are using a normal click on the arrow and select the option using another click.
Thank you for your support....

[jackweaver]

Hi, can you explain how we could get all of the values inner texts in the dropdown? And do assertions? If a certain value exists or does not exist in the dropdown? I suppose it is of the use of an array to go over the length, then create a variable to get the inner texts of all what is in the array, then we can do the expect to contain or not to contain a certain value right?

[abhedpatil]

I'm kind of struggling to validate the dropdown values. When i used TextContext - all dropdown values are returned. When i follow your strategy i.e. const selectedvalue = await this.page.$eval<string, HTMLSelectElement>(locator, element => element.value); The resulted returned is : selected value for priority is : 1: how do i validate using actual text ?

[webtestingui]

Hi Kaushik
I have installed jest cli but when I run the jest followed the test case file name then it doesn't run. could you please help me with this
I get exception as "Invalid transformer module"

[Kittycat-pgdu]

hi, I am trying to figure out how to code the auto suggestive dropdown for location. I am not able to inspect the list because it disappears when I right click on it, I am using Javascript and Playwright

[gello]

Hi Koushik. how to deal with frames in this case. eg . like "page.$eval" is fine however "frame.$eval" is saying its not a function.

[saivamshikrishnapeddammala]

Hi Koushik, Thanks for the video.

Based on the variable I have passed, Need to select webelement

[maranbalu]

Hello bro, I wanted to fetch the selected option from a drop-down using playwright-java. Would you be able to help me with it.

[azimadayani]

Hi kaushik
Could you please provide link to sample framework. I kept searching but I’m unable to locate

[azimadayani]

How do you verify table is sorted in ascending or descending order when clicking on title for example date.

[feedingjuan]

Hi,

How can I include the CSS and XPath on the inspect element?

[AliKhan-wmlt]

Hi Koushik,
Is there a way to select an option/text from the dropdown with partial text/value?

[gentrithoxha]

can you show us how to use this feature to fill date picker

[ramachandranv]

CheckBox/Radio button not been used? can you help me with that.

[prasadverma]

Hi Koushik, how to handle a dropdown with input tag. Thank you

[waleedabbasi]

Can u help me How to Select Edit icons?