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

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

Try the same for your scenario.

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); }); }