Test Drop Down with Protractor
When testing applications, sometimes we have to test the drop down functionalities too. Therefore, it is important to know how to handle drop downs when testing them with Protractor.
If we consider a drop down in an application, simply it will look like this.
In a drop down, basically we do is, click the drop down button, then select a given value by clicking on that value. So, when we test that type of a drop down, we have to automate all the above mentioned actions too. Therefore, when writing automated tests for a drop down like in the above image, first you have to identify the following scenarios properly.
- The exact drop down button.
- Exact value list in the drop down.
- Storing place of the selected value.
Once you have identified all the above mentioned scenarios properly, you can easily write test cases for drop downs by using Protractor.
In an Angular application, normally it gets the data to a drop down by using the ng-repeat directive. In such cases, we can write the test case like this by using the by.repeater to get the data list.
In this code, 'testlist' is the id which is given to the drop down button and 'item in available list' is the name which equals to the ng-repeat in the given page. By using the get() command, you can decide the value that you need to select from the list. In order to do that, you only need to put the relevant number for the value inside the get() function. Simply it can decide whether you need to select the 1st value or the 2nd value or the 3rd value...etc. In the above example as you can see, I have selected the 1st value by using get(1).
Here, we use by.repeater to get the list of the selected drop down. By.repeater can use only we have used a ng-repeater in that page to load the drop down list. Otherwise, we can use the class name or the given id of the drop down. Then we have to give the value, that we are going to select, separately. It's not a difficult task. We can do that by using the following code.
Apart from that we can use the tag names to get the values of a drop down list. <li> is an example of a tag name. Here's a code example of using a tag name to get a list of data in a drop down.
Writing Protractor test cases to check the drop downs is not a very difficult task. You can simply do that by writing simple test codes.
So, that's it for today. Happy coding :-)
Is there any way to test Drop down with search ability? E.g. You click on drop down, start typing and results will be filtered in the drop down. I have tried this: I click on drop down and "sendkeys" whatever I am searching for, but protactor just can't see the element on page after clicking the drop down.
Hi Sachini. I can't see sample code using tag name above. Can u update here? I sample code like this. Still trying on how to automate the dropdown by selecting Panelist & Recruiter. Thanks <div id="ctl00_CPH_DashboardType" class="RadDropDownList RadDropDownList_Bootstrap" style="width:100%;" tabindex="0"> <span class="rddlInner rddlFocused"><span class="rddlFakeInput">Project</span><span class="rddlIcon"><!-- --></span></span><input id="ctl00_CPH_DashboardType_ClientState" name="ctl00_CPH_DashboardType_ClientState" type="hidden" autocomplete="off"> </div> <span class="rddlInner rddlFocused"><span class="rddlFakeInput">Project</span><span class="rddlIcon"><!-- --></span></span> <li class="rddlItem rddlItemSelected">Project</li> <li class="rddlItem">Panelist & Recruiter</li>