Navigating through the map function within Protractor

Question

Navigating through the map function within Protractor

In my Angular application, I have implemented a timeline that displays event dates with their respective descriptions. Below is the HTML source code for this feature:

  <!-- timeline -->
  <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>
  <!-- / timeline -->

I am currently utilizing Protractor to verify that each event date corresponds correctly to its description. To achieve this, I decided to use a map function in my test script. The challenge I encountered was determining how many events there are since they are dynamically generated based on the HTML code provided above. Here's the test code snippet 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);  
  });

});

The issue I am facing is that when I run the test in the command line, it only prints the details of the last event out of multiple events (5 in this case). It fails to display information about other events. As I am new to working with promises, any suggestions or advice regarding this problem would be greatly appreciated. My goal is to conduct individual tests for each event within the timeline.

javascript angularjs protractor

Answer 1

Answer №1

The issue lies in the timeline locator: the selector #timeline matches the timeline container instead of the individual timeline blocks. To address this, you can use the following approach:

var timeline = element.all(by.repeater('timeline in formattedTimelineData')).map(function (item) {
    return {
        date: item.element(by.binding('timeline.eventDate')).getText(),
        events: item.element(by.binding('timeline.description')).getText()
    }
});

timeline.then(function (data) {
    console.log(data);
});

You can then iterate over the items like so:

timeline.then(function (data) {
    for (var i = 0; i < data.length; ++i) {
        // perform actions with data[i]
    }
});

Alternatively, you can validate the entire timeline variable as a promise using expect, resolving it implicitly into an array of objects, for example:

expect(timeline).toEqual([
    {
        date: "First date",
        events: "Nothing happened"
    },
    {
        date: "Second date",
        events: "First base"
    },
    {
        date: "Third date",
        events: "Second base"
    }, 
]);

Answer 2

The issue lies in the timeline locator: the selector #timeline matches the timeline container instead of the individual timeline blocks. To address this, you can use the following approach:

var timeline = element.all(by.repeater('timeline in formattedTimelineData')).map(function (item) {
    return {
        date: item.element(by.binding('timeline.eventDate')).getText(),
        events: item.element(by.binding('timeline.description')).getText()
    }
});

timeline.then(function (data) {
    console.log(data);
});

You can then iterate over the items like so:

timeline.then(function (data) {
    for (var i = 0; i < data.length; ++i) {
        // perform actions with data[i]
    }
});

Alternatively, you can validate the entire timeline variable as a promise using expect, resolving it implicitly into an array of objects, for example:

expect(timeline).toEqual([
    {
        date: "First date",
        events: "Nothing happened"
    },
    {
        date: "Second date",
        events: "First base"
    },
    {
        date: "Third date",
        events: "Second base"
    }, 
]);

Answer 3

Answer №2

It is not recommended to include logic in your tests, as discussed in this article: .

Using a while loop involves logic.

Before writing your specifications, you should determine the number of events that will be in your timeline, which is 4 in this example case. Your specs should then look like:

element.all(by.css("#timeline")).then(function(events){
    expect(events.count).toEqual(4);
    expect(events[0].someThing()).toEqual(expectedValue0);
    expect(events[1].someThing()).toEqual(expectedValue1);
...
    expect(events[3].someThing()).toEqual(expectedValue3);
 })

Answer 4

It is not recommended to include logic in your tests, as discussed in this article: .

Using a while loop involves logic.

Before writing your specifications, you should determine the number of events that will be in your timeline, which is 4 in this example case. Your specs should then look like:

element.all(by.css("#timeline")).then(function(events){
    expect(events.count).toEqual(4);
    expect(events[0].someThing()).toEqual(expectedValue0);
    expect(events[1].someThing()).toEqual(expectedValue1);
...
    expect(events[3].someThing()).toEqual(expectedValue3);
 })

Answer 5

Answer №3

I'm encountering a problem with the repeater in my situation due to the large number of elements it contains. My Protractor spec is timing out while looping through all these elements. How can I limit the loop to only run for the first 10 elements of the repeater? I've tried various approaches but haven't been successful. Is there a way to iterate through just the first 10 elements of a repeater when using map()?

In the example above, the timeline variable retrieves data for every element in the repeater. Is there a way to modify this so that the timeline variable only captures data for the first 10 elements of the repeater? Looping through thousands of entries in the repeater is causing my Protractor spec to timeout, so limiting it to the first 10 would be more efficient.

Answer 6

I'm encountering a problem with the repeater in my situation due to the large number of elements it contains. My Protractor spec is timing out while looping through all these elements. How can I limit the loop to only run for the first 10 elements of the repeater? I've tried various approaches but haven't been successful. Is there a way to iterate through just the first 10 elements of a repeater when using map()?

In the example above, the timeline variable retrieves data for every element in the repeater. Is there a way to modify this so that the timeline variable only captures data for the first 10 elements of the repeater? Looping through thousands of entries in the repeater is causing my Protractor spec to timeout, so limiting it to the first 10 would be more efficient.

Navigating through the map function within Protractor

Answer №1

Answer №2

Answer №3

Similar questions

Launching the node application using `node` as the starting command is successful, however, using `/usr/bin/node` as the starting

Ionic's select feature fails to include an object in the options

What causes Jest to throw ReferenceErrors?

How can the dot badge in Material-UI be enlarged?

Removing a Request with specified parameters in MongoDB using NodeJS

Using Vue.js, separate the values that are separated by commas

What is the best way to smoothly scroll to another page using a specific id?

How can I confirm that all elements have been properly reset to their original positions prior to making any further adjustments to them?

Is there a method similar to insertBefore that works with arrays and/or HTMLCollections?

Avoid requesting Chrome Camera permission if it has already been granted during a previous WebRTC call

In client.js, learn how to retrieve the value of an input tag (Name) from a login form

Is there a way to align my two tables next to each other using CSS?

Angular 1: Handling Multiple Conditions and Exclusions Based on Other Conditions

Reposition picture "overlays" additional HTML components

Are two identical directives conflicting with each other?

Exploring AngularJS concepts with a focus on understanding view problems (ng-if, ng-switch)

Flask Server produces a response with a considerable delay when accessed through AJAX

The marriage of Vue 2.0 and Rails 5: Shifting from Reactive to Declarative Rendering

Understanding information in Backbone.js

Unable to bring in the Firebase Firestore Colletion