Virtual Repeater and Protractor

Question

The Question:

What is the canonical/preferred way to locate the Virtual Repeaters in Protractor?

The Story:

In the Angular Material design there is a Virtual Repeater that helps to improve the rendering performance with the help of dynamic reuse of rows visible in the viewport area. Sample:

<div class="md-virtual-repeat-offsetter" style="transform: translateY(0px);">
    <div md-virtual-repeat="item in ctrl.dynamicItems" md-on-demand="" class="repeated-item ng-binding ng-scope flex" flex="">0</div>
    <div md-virtual-repeat="item in ctrl.dynamicItems" md-on-demand="" class="repeated-item ng-binding ng-scope flex" flex="">1</div>
    <div md-virtual-repeat="item in ctrl.dynamicItems" md-on-demand="" class="repeated-item ng-binding ng-scope flex" flex="">2</div>
</div>

At the moment, I have to use by.css location technique:

$$('[md-virtual-repeat="item in ctrl.dynamicItems"]');

Bonus Question:

Is there a way to make by.repeater also work with md-virtual-repeat?

Answer 1

According to the findRepeaterRows() and repeaterMatch() built-in functions, by.repeater locator uses CSS selectors to search for different "repeat"-like attributes with different prefixes:

ng-repeat
ng_repeat
data-ng-repeat
x-ng-repeat
ng:repeat

Then, it strips all the filters, tracking (track by), aliases (as) and then checks what repeater value are we trying to match.

In other words, by.repeater at this moment is not going to find virtual repeaters.

Created a feature request here:

• by.repeater to match virtual repeaters

---

At this moment, taking into account that virtual repeaters don't support advanced syntax elements as track or as, I think using a CSS selector is good enough:

$$('[md-virtual-repeat="item in ctrl.dynamicItems"]');