I have the following part of the web page that I want to click using Protractor+Cucumber:
<div ng-show="entities.length" ng-repeat="entity in entities track by entity.id" op-library-inject="">
<op-box template-path="components" type="media" settings="boxSettings" entity="entity" index="0"><div class="box-container" ng-class="{'box-media-checked': entity.checked}">
<div data-media-id="1234" data-media-username="enfesyiyecek" id="box-1234" class="box-wrapper">
<div class="box-media-wrapper" style="background-image:url(https://s3.amazonaws.com/photorank-media/media/8/b/j/8bj2iu3/mobile.jpg)">
<!-- ngIf: ::(settings.showCheckbox) --><input class="box-media-check ng-pristine ng-untouched ng-valid" value="1" id="box-check-1234" name="check-1234" ng-model="entity.checked" ng-change="checkboxChange()" ng-if="::(settings.showCheckbox)" type="checkbox"><!-- end ngIf: ::(settings.showCheckbox) -->
<!-- ngIf: ::(settings.showCheckbox) --><div class="box-check" ng-if="::(settings.showCheckbox)">
<label for="box-check-1234"><i class="fa fa-check"></i></label>
</div><!-- end ngIf: ::(settings.showCheckbox) -->
<!-- ngIf: ::(entity.video_url) --><div class="box-play" ng-if="::(entity.video_url)" ng-click="photoClick(index)"><i class="fa fa-play"></i></div><!-- end ngIf: ::(entity.video_url) -->
<div class="box-hover" ng-click="photoClick(index)"></div>
<div class="box-badges">
<ul class="badges-list">
<!-- ngRepeat: action in actionsBadges track by action.id --><!-- ngIf: action.showIf(entity) --><!-- end ngRepeat: action in actionsBadges track by action.id --><!-- ngIf: action.showIf(entity) --><!-- end ngRepeat: action in actionsBadges track by action.id --><!-- ngIf: action.showIf(entity) --><!-- end ngRepeat: action in actionsBadges track by action.id --><!-- ngIf: action.showIf(entity) --><!-- end ngRepeat: action in actionsBadges track by action.id --><!-- ngIf: action.showIf(entity) --><!-- end ngRepeat: action in actionsBadges track by action.id -->
</ul>
</div>
</div>
<div class="box-info-wrapper" ng-class="{'box-info-wrapper-complete-caption': showCompleteCaption}">
<div class="box-tools">
....
</div>
</li><!-- end ngIf: actionsToolsMore.length -->
</div>
<div class="box-date-location-wrapper box-section-wrapper">
<ul>
...
</ul>
</div>
<div class="box-name-actions-wrapper box-section-wrapper">
<ul>
<li class="box-name-wrapper">
...
</li>
<li class="box-actions-wrapper">
<div class="box-actions">
<ul>
<!-- ngRepeat: action in actionsSubTools track by action.id --><!-- ngIf: action.showIf(entity) --><li ng-repeat="action in actionsSubTools track by action.id" ng-if="action.showIf(entity)">
...
</li><!-- end ngIf: action.showIf(entity) --><!-- end ngRepeat: action in actionsSubTools track by action.id -->
</ul>
</div>
</li>
</ul>
</div>
<div class="box-caption-wrapper box-section-wrapper" ng-click="toogleCaption()" ng-class="box-caption-wrapper-click">
<p class="box-caption-small">...
</div>
<div class="fade-out ng-hide" ng-show="showCompleteCaption" ng-click="toogleCaption()"></div>
<div class="box-tags-stream-wrapper">
...
<div class="slider-container show-arrows" ng-class="{'show-arrows': shouldShowArrows()}">
<div class="products-slider">
...
<a ng-click="moveSliderToTheLeft()" class="slider-action slider-action-back -disabled" href="javascript:;" ng-class="{'-disabled': !canMoveSliderToTheLeft()}"><i class="fa fa-caret-left"></i></a>
<a ng-click="moveSliderToTheRight()" class="slider-action slider-action-forward" href="javascript:;" ng-class="{'-disabled': !canMoveSliderToTheRight()}"><i class="fa fa-caret-right"></i></a>
</div>
</div>
</op-box-slider></div>
</div>
...
</div><!-- end ngIf: ::settings.showTagButton -->
</div>
</div>
</div>
</div>
</op-box>
</div>
The Problem with this is that Protractor takes up to 30/35 seconds to click on it, these is a grid with 30 elements paginated, but it only takes at most 1/3 seconds to render all 30 elements (to have the element completely seen and clickable) (I've been following the test running and attempted to click on it)... So I was wondering, what can I do speed up the click action? why could be the reason that protractor takes so long? it only does it with this particular section. Maybe, I can use another strategy to click on it! (?) I tried several ways to. I had declared the element as this
this.libraryBoxImage = element.all(by.css('.box-media-wrapper'));
and when I try to click on it I do:
this.When(/^user selects item number "([^"]*)"$/, function(position, done) {
browser.wait(EC.invisibilityOf(loginPage.spin));
browser.wait(EC.visibilityOf(basePage.mediaLibrary)).then(function() {
libraryPage.libraryBoxImage.get(position).click().then(function() {
done();
});
});
});
