Selecting a element in a drop-down menu in protractor - protractor

Question

I have a drop-down menu on my page. My goal for protractor testing is to click one of the options of this drop-down menu and have protractor check the results:
<ul class="dropdown">
<li class="nav-header">portfolio</li>
<li class="divider"></li>
<li class="dropdown-submenu"> ... </li>
<li ng-repeat="p in user.portfolios">
<!-- this is the option we will click for our testing -->
<a href ng-click="displayPortfolio(p)>Portfolio 1 </a>
</li>
<li ng-repeat="p in user.portfolios">
<a href ng-click="displayPortfolio(p)>Portfolio 2 </a>
</li>
<li ng-repeat="p in user.portfolios">
<a href ng-click="displayPortfolio(p)>Portfolio 3 </a>
</li>
</ul>
my protractor test looks something like:
it('should display relevant portfolio when clicked',function(){
ptor.ignoreSynchronization = true;
element.all(by.xpath("//a[#ng-click='displayPortfolio(p)'])).then(function(list){
list[0].click();
expect(... some assertion here);
});
ptor.ignoreSynchronization = false;
}
Just in case you were wondering, ptor.ignoreSynchronization is enabled because my web-page is constantly polling the backend for some updates.
Protractor throw the following error when I run the test:
ElementNotVisisbleError: element not visible
I don't quiet understand what this error is about. The element is surely visible since when I do view source of the page, I can see it in the DOM structure.
Kindly advice

Answer 1

I have handled same case by setting value directly. locate the element and set the value using "sendKeys".
Try the same for your scenario.

Answer 2

Have you tried using the repeater locator?
it('should display relevant portfolio when clicked',function(){
var elements = element.all(by.repeater('p in user.portfolios'));
elements.get(0).click().then(function(){
expect(... some assertion here);
});
}