javascript - How to test Pagination feature using Protractor

Question

Please guide me how to navigate through different pages of pagination using Protractor , i followed this blog: http://seleniumhome.blogspot.com/2013/07/how-can-we-automate-pagination-using.html, unfortunately the code is not working. Here is the code from my application:

<div class="vertical-align">
<ul class="pagination no-margins">
<li class="arrow unavailable" ng-class="{unavailable: currentPage === 0 || pagedRowsTotal.length == 0}">
<a class="ng-binding" ng-click="loadPage(0)" ng-bind-html="rsPaginatorText.first">First</a>
</li>
<li class="arrow unavailable" ng-class="{unavailable: currentGroup === 1 || pagedRowsTotal.length == 0}">
<li class="arrow unavailable" ng-class="{unavailable: currentPage === 0 || pagedRowsTotal.length == 0}">
<a class="ng-binding" ng-click="loadPage(currentPage - 1)" ng-bind-html="rsPaginatorText.previous">Previous</a>
</li>
<!-- ngRepeat: page in groupArray track by $index -->
<li class="ng-scope current" ng-class="{current: page === (currentPage + 1)}" ng-repeat="page in groupArray track by $index">
<a class="ng-binding" ng-click="loadPage(page-1)">1</a>
</li>
<!-- end ngRepeat: page in groupArray track by $index -->
<li class="ng-scope" ng-class="{current: page === (currentPage + 1)}" ng-repeat="page in groupArray track by $index">
<a class="ng-binding" ng-click="loadPage(page-1)">2</a>
</li>
<!-- end ngRepeat: page in groupArray track by $index -->
<li class="ng-scope" ng-class="{current: page === (currentPage + 1)}" ng-repeat="page in groupArray track by $index">
<a class="ng-binding" ng-click="loadPage(page-1)">3</a>
</li>
<!-- end ngRepeat: page in groupArray track by $index -->
<li class="ng-scope" ng-class="{current: page === (currentPage + 1)}" ng-repeat="page in groupArray track by $index">
<a class="ng-binding" ng-click="loadPage(page-1)">4</a>
</li>
<!-- end ngRepeat: page in groupArray track by $index -->
<li class="ng-scope" ng-class="{current: page === (currentPage + 1)}" ng-repeat="page in groupArray track by $index">
<a class="ng-binding" ng-click="loadPage(page-1)">5</a>
</li>
<!-- end ngRepeat: page in groupArray track by $index -->
<li class="arrow" ng-class="{unavailable: currentPage === pagedRowsTotal.length -1}">
<a class="ng-binding" ng-click="loadPage(currentPage + 1)" ng-bind-html="rsPaginatorText.next">Next</a>
</li>
<li class="arrow" ng-class="{unavailable: currentGroup === groupsTotal}">
<li class="arrow" ng-class="{unavailable: currentPage === pagedRowsTotal.length -1}">
<a class="ng-binding" ng-click="loadPage(pagedRowsTotal.length - 1)" ng-bind-html="rsPaginatorText.last">Last</a>
</li>
</ul>

This is what i tried, but receiving an error:

this.getPaginationsize = element.all(by.repeater('page in groupArray track by $index'));

summaryPage.getPaginationsize.getSize().then(function (pagination) {
            if (pagination > 0) {

                for (var i = 0; i < pagination; i++) {
                    summaryPage.getPaginationsize.get(i).click();
                }
            } else {
                console.log('Pagination not exists');
            }
        });

Failed: Cannot convert object to primitive value

Answer 1

summaryPage.getPaginationsize.getSize() method will return an Object with height and width of a webelement. Instead you need to use summaryPage.getPaginationsize.count() to get the total number of pageSize.

Reference:

getSize() : http://www.protractortest.org/#/api?view=webdriver.WebElement.prototype.getSize count() : http://www.protractortest.org/#/api?view=ElementArrayFinder.prototype.count