Full transcript of “Playwright with Javascript | How to handle Auto Suggest/Auto Complete DropDown | Part 14”. Click a timestamp to open the video at that moment. Need another video? Use the YouTube transcript generator.
0:02 hi everyone welcome you all so in the today's video let us try to learn how to handle Auto suggest drop down in playwright so first of all let us see what is auto suggested drop down so for that I am trying to use one application redbus dot in and we can see in Auto suggest drop down in this particular application so if I look at here there is two options from Two and date so here if you want to search for some location let's say I'm searching for Delhi something like this now as soon as you provided some value in it it will give you some suggestions you can see some Auto suggestions it will give you now from this Auto suggestions I just want to select one of the option okay so this is simple Auto suggestion drop down so we can select one of these options and you
0:53 may not see these options on the same order most of the times so this order also will be changed okay so dynamically the order of these options will be changed so this is basically called as Auto suggest drop down okay now we'll see how to handle this in the playwriter so for that I have created uh one specification file under my test Auto suggest dropdown dot spec dot JS and I have imported test and expert functions from the delivery test model then I have created one test block and inside this I provided Auto suggest drop down this is a title of the test now this is a page fixture now here I'm launching my application redbus dot in now so as soon as you launch your application so first thing is what we need to provide some
1:40 text or some value into the from field okay so we need to inspect this element and then we can pass this value so for that what I'll do is let us try to inspect this element Auto suggest drop down and let's take the help of selector hub and if I look at this this is a relativex path which is provided for this particular element and basically SRC is an ID value so instead of XPath I'm trying to use directly CSS selector ID means we can use hash hash SRC so this will able to locate the element Now by using this locator I can inspect that element so simply what you can do is I wait page Dot locator and
2:30 specify the locator this basically input box so inside that box we can pass the search text so here I'm trying to fill uh let's say Delhi okay so now I have passed some value into the input box so as soon as you provided this value so it will give you some Auto suggestions automatically so you can see as soon as I provided some value here it will give you some Auto suggestions so the next next task is what we need to capture these options whatever Auto suggestions are providing we need to capture them into a variable then we have to repeat one by one and whichever is matching we have to select that option okay so normally what happens is this type of drop downs Auto session drop downs whenever you are searching for something it will take few
3:19 seconds of time to get this information from the server okay so as soon as you provided some value in that search box we need to wait for some time to display these options okay so for that what I will do is I will write one locator or selector which will locate all these options and then I will wait for these options are available okay I will wait for these options should be displayed so before that let us try to write one locator which will able to match all these Auto suggestions okay so for that what we need to do is we need to take the help of Cs uh we need to take the help of selector Hub and we can easily write the locator to capture these options so
4:05 if I inspect one of these options let me inspect the first option and this is a text element okay and before that there is one more text element you can see this is actually Delhi all our belongs to Delhi only that we need to select the main option right so the first text element we have to capture and this is part of the due tag again this is Again part of the Li and this Li is a part of the UL so basically this is a list box under user list we can find multiple allies okay now we need to write proper locator which will able to capture the values locations from the delete okay so I'm going to write one locator slash slash Li I'm directly jumping into Li
4:50 and this is basically an expat I am going to write Li and I say Li 38 items are displaying now I want to filter every Ally is having some class attribute you can see here SC iws kbi some class attribute is there so I've just filtered those allies which are having same class attribute at the rate class and what is the value of the classes SC iPhone iws kbi so this is the class value so again class is having multiple things right so I'm using uh I'm trying to use contains function here from the X path I can say contains
5:36 right so contains of at the rate class and this is the value we are expecting so now 18 elements are exactly matching now inside this Li again we need to go to uh div tag inside the div tag actual text tag is presented right so inside this we need to continue this comma uh div tag slash text so 34 elements are matching but again among 34 we don't need the second text actually for every text file you can say delete is a commonly there so that is actually the second text the only first text we need so I can pass some index number here like this now you can see this particular X path is exactly pointing the options or Auto suggestions from the drop down so now let me
6:25 use this uh locator and I will wait for all the options are displayed on the box so in play rate we have a method called await page Dot wait for selector I'm calling one method called wait for selector and here you can pass the selector whatever we are specifying so because this is the next PATH I can just put in the double quotations so this particular command basically wait for all the options displayed on the web page and after that we need to start reading each and every individual option by writing it for Looper and the for loop I can specify and before writing the option so we need to capture the options right here we are just waiting for the options so once the options are available
7:14 we need to capture them into a variable so what I'll do is I will write locator or here we are getting multiple locator multiple elements so I can say dollar dollar and inside this I can just pass the same locator whatever I mentioned above so this actually this locator is pointing with all the options which are displayed on this authorization box okay now this is a locator this will return all the options and basically they are from City options I'm getting one variable I'm creating one variable from City options from City options now I make this variable as const variable now I just want to read each and
8:01 every option from this so for that I can use from City options from the from City options each and every option I want to get in a variable let's say option of and they should be cancel letter you can Define one variable called it so now from the from CD options I'm reading each and every option into this option now from that option we have to capture the text so to capture the text imply I can say await option Dot text Contender so this is the function we have to call so this will exactly return the content the value of that option that I'm going to store in a variable and I can make this as a const variable
8:48 okay so before selecting the option out from the auto session let's try to print the values so for that I'm saying console.log and here I'm just printing the value whatever I'm capturing from the auto suggestion drop top all right so after printing I'm just wait for some time and then I close my page await page dot wait for time order so here I can just specify some 3000 milliseconds so simply what I have done here is I just first fill the value in the drop down basically that is having input box so we have filled the data and it is showing all the auto suggestions and I'm waiting for those Auto suggestions and once auto suggestions are displayed then I am
9:37 getting all the Auto Solutions into variable and then I'm reading each and every option into this option variable and then capture the text content of that variable and put this in the value and then I'm printing the batteries okay now let us try to execute this NC and then after execution of this then we will see how we can select that value so go to terminal take the new terminal and I'm running this command npx play rate test under test tab what is the file name Auto suggest to drop down Auto suggest drop down Auto suggest a drop down spec.js okay press enter now it is started executing my
10:27 code just observe it is provided daily and now it is giving some Auto suggestions and now we have to capture them and then we have to print in the console window so if I just look at this we got all the values printed in the console so these are the we provided Delhi so we have provided we got all the options displayed in the console so now the next thing is in this options we have to select one of the option let's say I want to select something called Anand vihar this is the option I want to select from the auto suggestion so now what we can do is instead of just printing the value okay so what I can do is I'm not going to print this so we already captured the value right now we need to put one if condition so I can say if
11:16 so whatever value we capture that value includes if the value includes and this is the value then what we should do we should go and click on that option so take this option whatever we capture and then perform the click that's it so we never use any command we use await so after clicking on the option we don't we don't need to go to the further options so immediately break the loop okay so simply we can do like this so after completion of the time so I can just wait for five seconds so that we can clearly see the option which is selected in the auto suggestion drop down okay now save the file and then clear and execute one more time
12:06 so now I have selected I provided Delhi here and inside the delay there are multiple cities so Anand vihar I am going to select from that options now execute now just observe the from you can see Anand vihar is got selected okay so this is how we can simply handle Auto suggest a drop down so even though the hard resolution options are dynamically changing still the same logic works so what we have done is we provided the search value and whatever Auto searches are up here we are waiting for those Auto suggestions then we capture all the suggestions and then we are reading each and every suggestion into variable and I capture the text content and if the text content is equal to this one then we go and click on that option and exit from the loop
12:57 so this is how we can simply handle Auto suggest to drop down in playwright okay so in the next video I will show you how to handle hidden Rock dot okay so that's all for this video thanks for watching we'll see in the next video
