Lists and Dropdowns | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Mastering UI Elements
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explore how to automate lists and drop-downs in web applications. The focus is on selecting elements from lists and looping through them to perform various operations. Understanding the List Element The example application features a drop-down list that changes the application's color upon selection. It's important to note that the visual representation of the list does not correspond directly to the DOM structure. The actual list is often located in a separate section of the website, which necessitates different locators for the list and its items. Automating the Scenario Identify the locator for the drop-down box. Use page.locator to create a constant for the drop-down menu. Expand the list by clicking the identified locator. Selecting Items from the List To interact with the list, the recommended methods are: page.getByRole('list') for the entire list. page.getByRole('listitem') for individual items (if applicable). In this case, since the items are represented by <nb-option> tags, we create a locator for these items directly. Assertions and Validations Assertions can be made using await expect() to validate that the list contains the expected items. For example: await expect(optionList).toHaveText(['Light', 'Dark', 'Cosmic', 'Corporate']); Looping Through Items To validate color changes for each selection, we loop through an object containing color values. The loop iterates through each color, selects it, and asserts the corresponding background color: for (const color in colors) { await optionList.filter({ hasText: color }).click(); await expect(header).toHaveCSS('background-color', colors[color]); } In summary, when automating lists: Use getByRole methods for selection. Utilize locator assertions for validating list content. Implement loops for iterating through items and validating changes. These techniques enhance the automation of web elements effectively.
Video Transcript
In this lesson we will talk about how to automate lists and drop-downs types of the web element So you will learn how to select elements from the list and how to loop through the list of the web elements Performing different operations. So let's get into it So this is our test application and in the very top of the test application We have this list if you click on this drop-down and if we select the different items It will change the color of the application. So first thing that you need to know about the lists So visually if you look at this element It looks like this box with four items belongs to the box of the selector But it is actually not so let me make a right-click. I show you how it looks in the DOM So this is the button tag that represents the list input field And as you can see the actual list is not here. So if I scroll it up This is just our header and inside of the header We have this button and that's it inside of the span We have just a text that is displayed right now inside of the button But the actual list inspect is located in some kind of SDK overlay container And it's located in a completely separate section of the website Even if it's visually Presented like they located next to each other So that's why when you are locating the selector of the list and the list itself very often It can be a completely different locators. So let's start automating this Scenario, so our scenario will be just selecting a different items and then validating the color is changing on this web page And we begin with identify locator for this just box and then clicking on this locator Now I'm going back to application and I'm setting up a new test So, let's do a first thing find the locator for this box and click on it to expand the list right click inspect and What we have so we know that this is NGX header and inside of this NGX header We have and be select which looks like a parent element for the button which is inside So let's use this and be select as part of NGX header So I creating new constant Drop down menu equals to page dot locator and this is what parent element is NGX header and Then child in relation to it and be select and Then we wait drop down menu Click to expand it and let's see if it work Lists and drop downs running And We can see yes click was performed on the button and we see expanded list Now how to select items from the list the recommended ways in the playwright to interact with the list is using of course Get by role so we can use either page Get by role List And the second page get by role Is list Item list can be used when the list has a you L Tag and list item can be used when the list has Li Tag, this is a typical HTML tags that are used in lists and list items And if you have those you can use this get by role list or get by role list item list Represent the parent container for the entire list and list item will get you all the list items From the list and will represent the array or list of the list elements. So now let's look in our dome right click inspect and What we see so we have this UL which is option list and we can definitely use this get by role to get the list itself But we actually need the least items and we have four and B options and unfortunately in this application We don't have Li tech. We have a different library probably used here, which is used and B option So we cannot use a list item get by role. So we will use just a regular locator So let's create a locator for the option list items So The first approach is page dot get by role and we can provide our List first and then find a child elements locator and the child elements is and B option and This will work just fine So first we found the list and then part of this list We found all the NB option which represent the items of our list, but I would prefer to use a different approach Let me comment this out More compact way would be something like this option list Page dot locator and we just provide And B option list as our parent and then child and B option And it will be exactly the same result just looks a little bit more compact Now, let's say we want to make an assertion that our list has all list items in the list that we expect So how to do that is using locator assertion a weight Expect we provide our option list and Validate to have Text And Since we are getting the entire list of the elements the return result for the half text Will be array of the items and then we simply provide all the expected items that should be in this list All the expected items that should be in this list, which is light Dark Cosmic and Corporate let's run this test All right, and we can see that past test pass successfully, where is our assertion this is the assertion We got the list of all the items and assertion happens successfully and let's say if I will Change any of the items run this test again And And Assertion failed and we can see the difference in the array This is the expected array and this is the actual array. So there is a difference. That's why it's failed Now, let's make a selection of any of the items in this list. Let's say we want to select a cosmic color And we put a weight And Call our option list and then we will use method filter to select the item from the list has text And the item is Cosmic And perform click Running this test one more time Now we can see cosmic was selected successfully And now let's try to make a validation of the background color, which is changed when we select a cosmic So how to do that? Let's inspect the dom to understand what is changing. So this is our header This is the full header and b layout header And we are looking into the styles and properties on the right panel over here And we are looking our nb Layout header this is this element and it has a property background color This is the color that was selected when we click a cosmic and we can make assertion of this color So if I click right here, we see that rgb code for this color is 50 50 89 and we can make a validation that property of background color for this particular element is matching This rgb code of the color so let's do this So first, let me create a new locator for the header Equals to page dot locator and it is nb Layout header and then await Expect Header To have css css property is Background color And the value for this property is rgb and We provide the value 50 comma 50 comma 89 Okay, and let's run this one more time Okay Okay scrolling down we see assertion passed successfully So we validated that our application actually changed the color when we selected an item from the drop down And now let's make a little bit more fun with this scenario. Let's say we want to Validate every color and every selection option from the list So we want to select all the items from the list one by one and then validate that For each of the selection we have the color change of the application So first I begin with identifying of all the expectations of all the color codes and I will create the object const colors And inside of this object I will put all the known values for each of the color and just to speed up the process I just copy pasted the already prepared colors that I explored before so I know that the light is Is this color dark is this color cosmic is this color? I showed you how I found this out and corporate also have this color not what we're gonna do We will make a loop through the list of the colors in this object And we select the item for each of this color that when we select the color this color should match the expected value Start with this simple for loop But this time it will be not for off loop. It will be for in loop because we are looping through the object const Color it will be our iterator In colors, so we're looping through the object of the values now await option list filter We need to select the color first has text And instead of providing the exact value how we did it right here I just provide the value of our iterator I provide color dot click So one more time what is happening here by setting up this loop This iterator will look into the colors object right here and will take the value from the list First it's going to take light then dark then cosmic then corporate. So this color Constant will represent the value of the light on the very first round of the loop And then we make an assertion await expect header To have css And here again the same thing instead of providing the exact value of the expectation We want to read this object and based on the value of the iterator get the value of the property So we call colors object And reading the colors object based on the value of color Colors with the color and this expression will return us a value from our object for this particular Color and after we made the validation of the color We need to continue the loop and open this drop down menu one more time So I copy this await click in order to repeat this loop. We want to open it Again and to begin this loop since we are Selecting the color here and it's closing down. We need to open it right here before beginning this loop So I think we are all set and ready to run this test Yeah, and I think it worked so let me quickly go Through this hover over in the mouse we can see that it's selecting a different colors And you can see below how it's looping through each of the colors in our for loop So it is working perfectly fine. The only one thing I would make a little adjustment is at the end of our loop Let's make our loop closed here at the final step. We want to add a condition if color Is not equal to Corporate We want to perform a click it means That until color is corporate. We want to open Our drop down again in order to continue the loop But if color is corporate, we don't want to click on it again because loop is simply over Let's run it and verify that our logic is working fine Okay, so we are selecting the elements selecting the colors And our list is collapsed All right So that's it Let's quickly summarize what we did in this lesson when you interact with the list The recommended approach would be to use get by roll list or get by roll list items If your dom has ul tag or li tag available in order to make this approach working When you want to validate the list content by single assertion You can use to have text locator assertion and providing the array as your assertion value To select the items from the list The best approach would be to use a filter and providing the text of the list item that you want to select And if you want to loop through your list You absolutely can do this using javascript for in loop or for off loop how I showed you in this example All right, that's it guys and see you in the next lesson