Lists and Dropdowns | Bondar Academy
Course: Mastering testRigor
Module: Interation with Web Elements
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explore how to work with dropdowns and lists using Test Trigger . We focus on two main types of dropdowns: Native Dropdowns: Implemented using the SELECT tag. Custom Dropdowns: Use different component libraries with unique styling. To identify a dropdown, right-click and inspect the element. For native dropdowns, look for the SELECT tag and its corresponding OPTION tags. Custom dropdowns may use different tags, such as NBSELECT , and require different interaction methods. Interacting with Dropdowns There are two main approaches to select values from dropdowns: Main Approach: Use the SELECT keyword followed by the value and label. For example: SELECT SUCCESS FROM toaster type Relative Location: If no label is available, use relative positioning. For example: SELECT info from dropdown above height-click Validating Selected Values To assert the selected values, use: check that dropdown toaster type is equal to SUCCESS Selecting by Index You can also select options by their index: SELECT third option from dropdown below toaster type Custom Dropdowns For custom dropdowns without a SELECT tag, interact using relative locations. For example: Click button above title, then select top left In summary, use the appropriate method based on the type of dropdown and its structure. This lesson provides a comprehensive approach to effectively manage dropdowns in Test Trigger.
Video Transcript
In this lesson, we will talk about how to work with the dropdowns and lists using Test Trigger. So let's get into it. So we are on the well-known Toaster page that we used before in the previous lesson. And here we have different dropdowns. For example, dropdown number one and dropdown number two. So there are two main types of the dropdown. Native dropdown, which use native HTML tags to implement this, and more custom dropdown, which use different component libraries with own styling. So this dropdown on the right is a classical dropdown using the SELECT tag. So how to identify this? So right-click Inspect, I click on this dropdown. And what we are looking for is the tag name called SELECT. And if we expand this tag, we see the option tags over here with a value that provides the value for the option. If we click on this, it looks like more native browser-included types of the dropdown. And different options can be selected. The other version of the dropdown is this one. So if I select on this one, first of all, you can see by design, it looked a little bit different compared to this one. And from HTML perspective, it also looks differently. So it doesn't have a SELECT tag. It has some NBSELECT, but this is a custom tag. It has a button instead. It has some span and the icon. If we extract this, there is only a selected value displayed over here. The rest of the values is just, you know, some playholders without the text. And the actual values for the dropdown located in completely different section of the DOM in some NB option container and so on. So why is it important? Because Test Trigger has two main options or two main ways how you can interact with the dropdowns. And if your dropdown is not standard, you need to use a different approach. And in this lesson, I will show you both of those approaches. So let's create a new tests. And I need to navigate to the page. So let me do this. I copy from the previous lesson. It will be a little bit faster. So we need to navigate to this page. And first approach, I call it main approach. How would you select the values from the dropdown? So let's say from this dropdown, we want to select success. In the Test Trigger, your prompt would be like this, SELECT. Then you need to provide the value that you want to select, which is SUCCESS FROM. And then you need to provide a label related to this dropdown. In our example, the label will be toaster type right here. So let me right-click inspect here one more time. Here we go. So this is our SELECT tag. And right next to the SELECT is a label. And label has a text. So we are looking for a text related to the SELECT. So this is how Test Trigger will identify the correct dropdown that we are looking for. And if you are dealing with a classical dropdown and you have a label, this is the most easiest approach to select the value from the dropdown. So SELECT SUCCESS FROM toaster type and click and run. Let's see. And let's check the screenshot. You can see SUCCESS was successfully selected from the dropdown. Another example. So let's say that you have a dropdown like this one, classical dropdown with a SELECT tag, but you don't have a label. How to be in this situation? In this situation, you can use traditional relative location. So you can use a label. So let's say we want to select the info from this dropdown in relation to height-click checkbox. This also will work. And I will call this example, if no label available. So I will type SELECT info from label. SELECT info from dropdown. Now we need to provide the type of the element that we are looking for and where. Above and our text for the height-click is this one. Above height-click. So we are selecting info from the dropdown above height-click if we don't have a label. So let's run this test. Test passed successfully. Let's check the screenshot. And here we go. Height-click, dropdown above the height-click, and info was selected successfully. And by the way, let's add the assertion. How to assert the values of selected values? So you would type, check that dropdown toast type. Dropdown toast type is equal to, and the value that we expect is success. And in this example, since we don't have a label, we would provide a relative location. So let's check that dropdown above height-click is equal to, we are looking for info. And let's run this to see if this validation is working as expected. Test passed successfully. Validation happened successfully. You can see the dropdown is highlighted by the box. So let's move on. Another option how you can select the elements from the list is just by the index. So select by index. So I can use a relative location, something like this. Select third option from dropdown below toaster type. Or you can type something like select option, for example, five from, and the label related to this toaster. Okay, and let's run this test. All right, let's check it out. And we can see that danger was selected. And danger is the last option, is the option number five in this list. So this worked successfully. All right, and another example, when you are dealing with a not typical type of the dropdowns, which do not have a select tag, which is this one, top right. So how would we select top left, for example? In this example, you would interact with this type of element like you normally would do using relative location on the page. So what you need to do is to click on this, then select this value on the page, and then validate that this is displayed. And if we make a right-click inspect over here, we can see that this box represent a button. So we can interact with this section as a button, and we can click on that. So let's automate this scenario as well. So the default value is the top right, and we want to select the top left. And we will use a relative location, for example, this title. So we want to click on this button above the title, then we want to select top left. And then we want to validate that this section is selected with the top left value. So let's do this. So first, I need to click button above the title, above this one. So we are targeting this button. Then I need to click on the desired value that we want to select. The value will be top left. Click top left, and then we need to make a validation. Check that button above title contains top left. So pretty simple. Let's run this test. And test pass successfully. Let's check the screenshots. So we clicked above the title. The drop down was expanded. Then we clicked top left. And then we made a validation. And now we need to validate that this section is selected with the top left value. So let's do this. So we clicked above the title. The drop down was expanded. Then we clicked top left. And then we made a validation that top left is above the title inside of the button. So everything worked correctly. So let's quickly summarize what we did in this lesson. So when you interact with the drop downs, there are two types. If you have a standard drop down which has a select tag, you can use select keyword in your prompt to select the desired value of the drop down based on the label related to this select. If you don't have a label, you can use a relative location to this drop down using the keyword drop down and targeting from the other relative locators around the page. Also, you can select values from the drop down using the index or providing, okay, which option do I want to select? Option one, option two, and so on in relation to the label related to this drop down. And if you have not typical drop down with custom tags or custom component libraries, you will need to use a standard click navigation, navigating relatively to other elements, like click on the button, click on the values that you want to select, and then make a validation. All right, that's it, guys, and see you in the next lesson.