protractor cannot click an element but able to getText

Question

I have a search results page where I'm trying to click on the pagination buttons. I'm able to locate page elements via repeater. I'm also able to get text of the individual page element. But when I click on the page button, the results are different depending on the click method I use. I tried all kinds of click() methods but none work. What else can I try?

Here is the code I have:

this.clickPageNumber = function(pgNum) {
    browser.executeScript('window.scrollTo(254,1600);').then(function() {
                paginationPageNumberList.get(pgNum).then(function(we) {
                    browser.wait(EC.elementToBeClickable(we), 10000);
                    we.getText().then(function(pgText) { 
                        console.log('Clicking page: ' + pgText); //prints correct pg
                        we.click(); //this part doesn't work
                        browser.pause(); 
                    });

                });
        });
};

so here is everything I tried

browser.actions().mouseMove(we).click(); //no error but pg does not paginate
we.sendKeys(protractor.Key.ENTER); //Error: Failed: unknown error : cannot focus element
we.click(); //rror: Failed: unknown error: Element is not clickable at point (254, 806). Other element would receive the click: <a href="" ng-click="selectPage(page - 1)" class="ng-binding">...</a>

Here is the html:

<div id="dispute-queue-search-result-pagination" class="pagination-controller">
<ul class="pagination ng-isolate-scope ng-valid" ng-change="resultController.pageChanged()" next-text="›" previous-text="‹" max-size="resultController.maxSize" ng-model="resultController.currentPage" items-per-page="resultController.itemsPerPage" total-items="resultController.totalItems">
<!-- ngIf: boundaryLinks -->
<!-- ngIf: directionLinks -->
<li class="ng-scope disabled" ng-class="{disabled: noPrevious()}" ng-if="directionLinks">
<a class="ng-binding" ng-click="selectPage(page - 1)" href="">‹</a>
</li>
<!-- end ngIf: directionLinks -->
<!-- ngRepeat: page in pages track by $index -->
<li class="ng-scope active" ng-class="{active: page.active}" ng-repeat="page in pages track by $index">
<a class="ng-binding" ng-click="selectPage(page.number)" href="">1</a>
</li>
<!-- end ngRepeat: page in pages track by $index -->
<li class="ng-scope" ng-class="{active: page.active}" ng-repeat="page in pages track by $index">
<a class="ng-binding" ng-click="selectPage(page.number)" href="">2</a>
</li>
<!-- end ngRepeat: page in pages track by $index -->
<li class="ng-scope" ng-class="{active: page.active}" ng-repeat="page in pages track by $index">
<a class="ng-binding" ng-click="selectPage(page.number)" href="">3</a>
</li>
<!-- end ngRepeat: page in pages track by $index -->
<li class="ng-scope" ng-class="{active: page.active}" ng-repeat="page in pages track by $index">
<a class="ng-binding" ng-click="selectPage(page.number)" href="">4</a>
</li>
<!-- end ngRepeat: page in pages track by $index -->
<li class="ng-scope" ng-class="{active: page.active}" ng-repeat="page in pages track by $index">
<a class="ng-binding" ng-click="selectPage(page.number)" href="">5</a>
</li>
<!-- end ngRepeat: page in pages track by $index -->
<!-- ngIf: directionLinks -->
<li class="ng-scope" ng-class="{disabled: noNext()}" ng-if="directionLinks">
<a class="ng-binding" ng-click="selectPage(page + 1)" href="">›</a>
</li>
<!-- end ngIf: directionLinks -->
<!-- ngIf: boundaryLinks -->
</ul>
</div>

Answer 1

For every element found by repeater, you need to click the a element:

paginationPageNumberList.get(pgNum).element(by.tagName("a")).click();

Or in case you want to wait for it to be clickable:

var link = paginationPageNumberList.get(pgNum).element(by.tagName("a"));

browser.wait(EC.elementToBeClickable(link), 10000);
link.click();

---

You can also approach it differently and use by.linkText locator:

this.clickPageNumber = function(pgNum) {
    browser.executeScript('window.scrollTo(254,1600);').then(function() {
        var link = element(by.css("ul.pagination")).element(by.linkText(pgNum.toString()));
        link.click();
    });
};

Answer 2

If nothing works, try this!

var element = element(by.css('.foo'));
browser.executeScript("arguments[0].click();", element.getWebElement());