Protractor clicking on the link, but element is not visible?

Question

Hu guys,

I have a problem when I want to click on a link that is in list on html page. Here is my html:

<h3>{{snapshot.contractKey}}&nbsp;</h3>
    <ul class="nav nav-pills nav-stacked">
                <li><a id="documentLink" href="" ng-click="checkAndRedirect('/document1/')"><span translate="contractDetail.document1"> Document</span>&nbsp;<i class="fa fa-file-text"></i></a></li>
                <li class="active"><a id="detailsLink" href="" ng-click="checkAndRedirect('/document2/')"> <span translate="contractDetail.document2"> Details</span>&nbsp;<i class="fa fa-list-ul"></i></a></li>
                <li><a id="revisionsLink" href="" ng-click="checkAndRedirect('/document3/')"> <span translate="contractDetail.document3"> Revisions </span>&nbsp;<i class="fa fa-exchange"></i></a></li>
                <li><a id="auditTrailLink" href="" ng-click="checkAndRedirect('/document4/')"> <span translate="contractDetail.document4"> Audit Trail</span>&nbsp;<i class="fa fa-tasks"></i></a></li>
                <li><a id="actionHistoryLink" href="" ng-click="checkAndRedirect('/document5/')"> <span translate="contractDetail.document5">Action History </span>&nbsp;<i class="fa fa-clock-o"></i></a></li>
     </ul>

When I want to click on a link by its ID in protractor test, error is shown No such element or Element is not visible.

Here is my test line of code:

element(by.id('documentLink')).click();

Do you know why it is bad solution and what do to?

When I do this:

element.all(by.tagName('a')).then(function(results){ 
        expect(results.length).toEqual(5);
  });

he returns me that is correct and there are 5 links on page. But when I try to access them by ID, I can not do that?

Answer 1

From your comment, I suggest you to use the onPrepare option in your Protractor config to maximize the browser window before your specs start running:

onPrepare: function() {
  browser.driver.manage().window().maximize();
}