Selecting from AngularJS dropdown in Protractor.

I have searched to forums over and over again - tried to make sense of some of what people have said, but the solutions never seem to fit my case.

My problem concerns selecting an item from a drop down list that has been coded in AngularJS on a website. I am running automated tests using Protractor and a Selenium server. Right now I am running different scripts I have coded on various websites that have been coded in AngularJS. Its fascinating to see something I code fill out a form automatically - so cool!

Unfortunately whenever I come across a drop down in my test I try and come up with a solution for hours and never have been able to figure it out. So I have come to stack!!

This is the code I am working with it's actually jetblue's sign up website so if you want to take a look go here: https://trueblue.jetblue.com/web/trueblue/register/
The trouble starts on page two with the dropdowns - don't know how to fill out a single one.

Thanks,
FB

<div class="row has-dropdown form-value error" style="z-index: 108; position: relative;"> <label for="my-info-title"> <span aria-hidden="true">*</span> <span class="visuallyHidden">required</span> Title
<div class="tb-select accountData_title"><span class="tb-select-title error">Select</span><div class="tb-select-dropdown"><ul><li class="selected" title=""><span>Select</span></li><li title="DR"><span> Dr
</span></li><li title="JT"><span> Jetter
</span></li><li title="MISS"><span> Miss
</span></li><li title="MR"><span> Mr
</span></li><li title="MRS"><span> Mrs
</span></li><li title="MS"><span> Ms
</span></li></ul></div><select name="accountData_title" class="my-info-title-select" id="my-info-title" style="display: none;"> <option value="">Select</option> <option value="DR"> Dr
</option> <option value="MISS"> Miss
</option> <option value="MR"> Mr
</option> <option value="MRS"> Mrs
</option> <option value="MS"> Ms


1 Answer
1

title: ElementFinder = $('select#my-info-title');
list: ArrayElementFinder = $('select#my-info-title > option');

title: ElementFinder = $('select#my-info-title');
list: ArrayElementFinder = $('select#my-info-title > option');

First perform the title.click()[This clicks on the title dropdown]. Then choose the title you want to select.

title.click()

eg: list.get(1).click() which chooses the title as DR

list.get(1).click()

DR

Hope this gives the answer for your problem.

Note: The solution is given with CSS Selectors and typescript.

if the above method fails try the below alternate function.

var selectDropdownbyNum = function ( element, optionNum ) {
if (optionNum){
var options = element.all(by.tagName('option'))
.then(function(options){
options[optionNum].click();
});
}
};


Hope above functions helps you!!

0506

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.