I have an angular application where I have a timeline with list event dates and corresponding event description. This is the source code for Html.
<h4 class="font-thin m-t-lg m-b-lg text-primary-lt">Historical Timeline</h4>
<p></p>
<div id="timeline"class="timeline m-l-sm m-r-sm b-info b-l">
<div ng-repeat = "timeline in formattedTimelineData | orderBy : '-eventDate'">
<div class = "tl-item">
<i class="pull-left timeline-badge {{timeline.class}} "></i>
<div class="m-l-lg">
<div id="eventDate{{$index}}" class="timeline-title">{{timeline.eventDate}}</div>
<p id="eventDescription{{$index}}" class="timeline-body">{{timeline.description}}</p>
</div>
</div>
</div>
</div>
Now I'm basically trying to use a protractor to ensure that the correct date of the event matches the description of the event. So I decided to use the map function. The problem is that I will have a variable x that tells me how many events there are. For example, there may be 2 events, 6 events, etc. Events are dynamically generated dynamically, as you can tell by viewing also the html code. Here is the code for my test that I wrote.
it('FOO TEST', function(){
var x = 0;
while(x<4){
var timeline = element.all(by.css('#timeline')).map(function (timeline) {
return {
date: timeline.element(by.css('#eventDate'+x)).getText(),
events: timeline.element(by.css('#eventDescription'+x)).getText()
}
});
x++
}
timeline.then(function (Value) {
console.log(Value);
});
});
, - 5 . . - . promises, . , .
user5049061