Hello everyone, this is my first post so please be gentle with me. :)
I am a newcomer to protractor and I could really use your assistance. I have been tasked with writing a test for the following code snippet:
<div class="content ps-container ps-active-y expand" ng-class={hide:items.length === 2}" ng-transclude="" csf-product-navigator-content="" csf-scrollbar="" style="">
<div class="product-wrp prod-active" ng-class="{'prod-active' : active, 'odd' : (odd === true && !active), 'even' : (odd !== true && !active)}" ng-repeat="product in accounts" csf-product-navigator-item="">
<div class="product-wrp odd" ng-class="{'prod-active' : active, 'odd' : (odd === true && !active), 'even' : (odd !== true && !active)}" ng-repeat="product in accounts" csf-product-navigator-item="">
<div class="product-item animate-hide" ng-click="onDropdowmItemClick()" ng-transclude="" csf-product-navigator-anim-item="">
<div class="ng-scope" ng-repeat="product in accounts" csf-product-navigator-item="">
<div class="navigator-view ng-hide" ng-show="active">
<div class="" ng-hide="active">
<div class="product-choice ng-scope" ng-if="product.type !== 'SM'">
<section class="product-name">
<header class="ng-scope" ng-if="product.name">
<p class="product-details" ng-show="product.type">
<span class="ng-binding" ng-bind="product.no">PL84 9101 0003 2001 0006 1883 0004</span>
</p>
</section>
<section class="product-amount">
</div>
</div>
</div>
</div>
</div>
<div class="product-wrp even" ng-class="{'prod-active' : active, 'odd' : (odd === true && !active), 'even' : (odd !== true && !active)}" ng-repeat="product in accounts" csf-product-navigator-item="">
<div class="product-wrp even" ng-class="{'prod-active' : active, 'odd' : (odd === true && !active), 'even' : (odd !== true && !active)}" ng-repeat="product in accounts" csf-product-navigator-item="">
<div class="product-wrp odd" ng-class="{'prod-active' : active, 'odd' : (odd === true && !active), 'even' : (odd !== true && !active)}" ng-repeat="product in accounts" csf-product-navigator-item="">
<div class="product-wrp even" ng-class="{'prod-active' : active, 'odd' : (odd === true && !active), 'even' : (odd !== true && !active)}" ng-repeat="product in accounts" csf-product-navigator-item="">
My objective is to determine the number of products on the dropdown list.
Therefore, I believe that obtaining all elements in the container and then iterating through them using a function could help achieve this goal.
Here's the code I've come up with:
Features (iOwe):
var iOwe = function () {
this.accNo = element(by.className('content ps-container ps-active-y expand')).all(by.className('product-item animate-hide'))
}
Spec (iOwe):
it('should display account numbers on the dropdown list', function () {
expect(iOwe.accNo.count()).not.toBe(0);
iOwe.accNo.each(function(elem) {
elem.element(by.className('product-details')).getText()
.then
(function (text){
console.log(text);
});
});
The issue I'm encountering is that every time I run the tests, the output in the console varies. It only displays the first 3 or 4 strings instead of all 7, leaving the rest empty.
Thank you for your assistance.
EDIT:
To understand what exactly happens during the test, I added
browser.sleep(5000);
each time a string is printed in the console. Surprisingly, I discovered that I need to visually see the following account in the browser in order for the test to read it correctly.