Reputation: 1316
I have the following Angular HTML code and I am trying to do end to end test via protractor for clicking on a dropdown.
Here is the html:
<ul class="dropdown-menu">
<li ng-repeat="currency in availableCurrencies">
<a href="#" class="ng-binding">USD</a>
</li>
<li ng-repeat="currency in availableCurrencies">
<a href="#" class="ng-binding">EUR</a>
</li>
<li ng-repeat="currency in availableCurrencies">
<a href="#" class="ng-binding">GBP</a>
</li>
</ul>
Here is the protractor/js code which is suppose to click EUR:
it('Change Currency to EUR',function(){
var curr_EUR = element.all(by.repeater('currency in availableCurrencies').row(1));
curr_EUR.click();
/*curr_EUR.element(by.linkText('EUR')).click();*/
});
Having trouble click on the element the error I am getting is:
ElementNotVisibleError: element not visible.
Can anyone point out where I am going wrong?
Upvotes: 2
Views: 696
Reputation: 11
Try with this it should work. I will work for all combination
`for(i=0; i<4; i++) {
element(by.className("dropdown-menu").click();
element.all(by.repeater('currency in availableCurrencies').row(i)).click();
}`
Upvotes: 0
Reputation: 474271
Two things to do:
a
element inside the li
The code (I think you can avoid using by.repeater()
locator at all):
var dropdown = element(by.css('ul.dropdown-menu'));
dropdown.click();
dropdown.element(by.linkText('EUR')).click();
Upvotes: 1
Reputation: 10891
This usually means that the element is not visible.
What I suggest you do is to try things out as a regular user. I suspect that if you follow the steps you have in your protractor code exactly when you want to click EUR, it will be invisible.
Instead you will have to do something (probably click something) to make it visible. Add that something to your protractor code and it should work.
So your code looks like a drop down menu, you will probably have to (in your protractor code) click the drop down menu before EUR becomes visible.
Upvotes: 2