Protractor map function fails to provide a defined output

Question

Protractor map function fails to provide a defined output

When working with an application containing multiple widgets, each with its own title and content, I want to effectively map the elements of each widget for easier testing purposes.

For instance, let's consider a page:

this.widgets = element.all(by.css('ul.widget-grid')).map(function(widget, index) {
    return {
        index: index,
        title: widget.element(by.css('div.title')).getText()
    };
});

Then, in my specification file:

expect(page.widgets[0].index).toBe(0);
expect(page.widgets[0].title).toBe('The Title');

However, I am encountering issues where my expectations are returning undefined.

What could be causing this issue? My development environment uses Protractor 2.0.

javascript selenium testing selenium-webdriver protractor

Answer 1

Answer №1

I was perplexed by this situation, so I decided to provide an answer to assist others...

Even though I had a grasp on the fact that map() yields a promise, my expectation was that when used in an expect, it would be resolved and then behave like an array. However, that assumption turned out to be incorrect. Instead of an array, it actually returns an object that mimics an array but is not truly an array.

Answer 2

I was perplexed by this situation, so I decided to provide an answer to assist others...

Even though I had a grasp on the fact that map() yields a promise, my expectation was that when used in an expect, it would be resolved and then behave like an array. However, that assumption turned out to be incorrect. Instead of an array, it actually returns an object that mimics an array but is not truly an array.

Answer 3

Answer №2

When faced with a similar issue, I found that none of the suggested solutions worked for me. After some research, I discovered the actual solution to be as follows:

element.all(by.css('ul.widget-grid')).map(function(widget, index) {
    return {
        index: index,
        title: widget.element(by.css('div.title')).getText()
    }
}).then(function(map){
      this.widgets = map;
   });

Answer 4

When faced with a similar issue, I found that none of the suggested solutions worked for me. After some research, I discovered the actual solution to be as follows:

element.all(by.css('ul.widget-grid')).map(function(widget, index) {
    return {
        index: index,
        title: widget.element(by.css('div.title')).getText()
    }
}).then(function(map){
      this.widgets = map;
   });

Answer 5

Answer №3

map() will provide a promise that resolves into an array of objects.

To properly check the index and title of the first widget, you can use the following code snippet:

var firstWidget = page.widgets[0];

expect(firstWidget.index).toEqual(0);
expect(firstWidget.title).toEqual('The Title');

Answer 6

map() will provide a promise that resolves into an array of objects.

To properly check the index and title of the first widget, you can use the following code snippet:

var firstWidget = page.widgets[0];

expect(firstWidget.index).toEqual(0);
expect(firstWidget.title).toEqual('The Title');

Answer 7

Answer №4

I encountered some challenges with Protractor's ElementArrayFinder.prototype.map function.
To resolve this issue, I opted for a traditional approach using a for loop:

 var myElements = element.all(by.css('ul li')) - 1;
 var n = myElements.length - 1;

 for (var i = 0; i < n; i++) {
     var elem = myElements.get(i);
     var open = elem.element(by.css('.some-class'));
     open.click();
     var childElem = filter.element(by.css('[some-attribute]'));
     expect(childElem.isPresent()).toBe(true);
 }

Answer 8

I encountered some challenges with Protractor's ElementArrayFinder.prototype.map function.
To resolve this issue, I opted for a traditional approach using a for loop:

 var myElements = element.all(by.css('ul li')) - 1;
 var n = myElements.length - 1;

 for (var i = 0; i < n; i++) {
     var elem = myElements.get(i);
     var open = elem.element(by.css('.some-class'));
     open.click();
     var childElem = filter.element(by.css('[some-attribute]'));
     expect(childElem.isPresent()).toBe(true);
 }

Protractor map function fails to provide a defined output

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the method for performing a spelling check on every property within an array of Objects?

Learn how to efficiently pre-load data using the prefetchQuery method in React-Query

VueJs - Dynamic select menu

Determine the presence of a Facebook user by using JavaScript

I am looking to transfer an image stored in a database onto a card

Is it possible to generate an ArrayBuffer or Float32Array by combining two separate underlying buffers?

"Implementing Nested Actions in Vuex: A Guide on Calling Actions within Actions

Build a JavaScript image carousel featuring custom text for each image

What is the process for generating a collection of web elements?

Prevent tooltips from disappearing when hovering over them

Setting a CSS Variable with the Help of jQuery

Tips on how to highlight a clicked list item:

The console is displaying an undefined error for _co.photo, but the code is functioning properly without any issues

Loading a gallery dynamically using AJAX in a CakePHP application

Using React to retrieve data from Firebase through axios

Encountering an issue with React JS Array Filtering: running into the error message "

Ensure to verify within the ngOnInit function whether the checkbox has been selected

Unable to produce scrolling animation using JavaScript

Angular: Cleaning an image tag in sanitized HTML text

AngularJS directive $destroy is a useful tool for managing the