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
?
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:
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"]');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With