In a previous post we wrote about how end2end testing Ionic applications with protractor could throw-up some issues. One of these issues was the assumption that Protractor’s repeater locator could be used to identify items that were output by Ionic’s collection-repeat directive. As a follow-up we are pleased to announce protractor-ionic-locator, an open-source NPM package that can be used to find Ionic specific elements within your Protractor end2end tests.
The first drop covers the specific case of collection-repeat but the idea is to add more locators that would be useful to Ionic developers.
Imagine, for example, that we have code like this;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ion-list> <ion-item class="item" collection-repeat="project in projects" type="item-text-wrap" href="#/tab/project/{{project.Id}}"> <h3>{{project.Name}}</h3> <p>{{project.Description}}</p> </ion-item> </ion-list> |
We can now use protractor-ionic-locator’s collRepeater locator to select the collection-repeat items in the same manner that we’d use Protractor’s repeater locator.
|
1 2 3 |
var rows = element.all(by.collRepeater('project in projects')); |
The package, as at the time of writing, also supports (a subset of, not .rows() etc yet) the default locator’s functionality so it should be able to also select ng-repeat lists too
The package is open source and can be found on github here and NPM here, so please feel free to fork and contribute.