Keeping data external to promises in protractor

Question

Keeping data external to promises in protractor

In my angular app, I have a timeline feature that displays the names and descriptions of players. All player names are under the common class player-title.ng-binding, while all player descriptions share the class .player-description.ng-binding

To retrieve the names and descriptions, I used the following code:

  element.all(by.css('.player-title.ng-binding')).getText().then(function(name){
        //prints name of first player
        console.log(name[0]);
  });


  element.all(by.css('.player-description.ng-binding')).getText().then(function(description){
        //prints description of first player
        console.log(description[0]);
  });

However, I'm struggling to verify that each player has the correct description. For example, using

expect(name[0]).toEqual(description[0]);

. I'm new to promises and would appreciate any advice on this issue.

Additionally, when I tried the following code, it printed undefined:

  var name = element.all(by.css('.player-title.ng-binding')).getText().then(function(name){

  });

  console.log(name[0]);

Below is the HTML code for displaying players:

 <!-- player -->
  <h4 class="font-thin m-t-lg m-b-lg text-primary-lt">Sponsor player</h4>
  <p></p>
  <div class="player m-l-sm m-r-sm b-info b-l">
    <div  ng-repeat = "player in formattedplayerData | orderBy : '-Name'">
      <div class = "tl-item">
        <i class="pull-left player-badge {{player.class}} "></i>
        <div class="m-l-lg">
          <div class="player-title">{{player.Name}}</div>
          <p class="player-description">{{player.description}}</p>
        </div>
      </div>
    </div>
  </div>
  <!-- / player -->

Any insights or suggestions on this topic would be greatly appreciated.

javascript angularjs selenium promise protractor

Answer 1

Answer №1

If you wish to verify whether the name matches the description:

var name = element.all(by.css('.player-title.ng-binding'))
  .first()
  .getText();

var description = element.all(by.css('.player-description.ng-binding'))
  .first()
  .getText();

var compareNameDesc = Promise.all([name, description]).then(function(info) {
  var name = info[0], description = info[1];
  return name === description;
});

expect(compareNameDesc).toBe(true);

To validate each name and description individually:

var correctNames = [...];
var correctDescriptions = [...];
var names = element.all(by.css('.player-title.ng-binding'));
var descriptions = element.all(by.css('.player-title.ng-binding'));
for (var i = 0; i < correctNames.length; i++) {
  expect(names.get(i).getText()).toEqual(correctNames[i]);
  expect(descriptions.get(i).getText()).toEqual(correctDescriptions[i]);
}

For more details, visit ElementArrayFinder#get

EDIT: To ensure that all names match all descriptions (as requested in comment):

var names = element.all(by.css('.player-title.ng-binding'))
  .map(getText);
var descriptions = element.all(by.css('.player-title.ng-binding'))
  .map(getText);

var namesMatchDescriptions = Promise.all([names, descriptions])
  .then(function(results) {
    return results[0].every(function(name, index) {
      return name === results[1][index];
    });
  });

expect(namesMatchDescriptions).toBe(true);

This approach utilizes map as recommended by @alecxe, in conjunction with Array#every

Additional Information:

Remember that promises operate asynchronously, so when using your last code block, accessing console.log(name[0]), name is a promise instance without a property 0, resulting in undefined.

In protractor, expect handles promises, enabling evaluation of actual values by unwrapping promises provided to expect().

Promises also unwind, meaning if a promise is returned within a then() call, the original promise-assigned variable will be fulfilled with that value.

Therefore, you can return both name and description from separate promises, subsequently applying these promises to expect.

Moreover, consider implementing first instead of utilizing then with an index.

var name = element.all(by.css('.player-title.ng-binding'))
  .first()
  .getText();

var description = element.all(by.css('.player-description.ng-binding'))
  .first()
  .getText();

expect(name).toEqual('name');
expect(description).toEqual('description');

Key Insights:

Although promises may be intricate, correctly employing them simplifies management.
ElementArrayFinder methods facilitate access to various elements within collections
Promise.all enables synchronization of promise completions
Operations like every, some, and reduce within lists can generate insights into the relationship between two collections; ideally this process should be more straightforward!

Answer 2

If you wish to verify whether the name matches the description:

var name = element.all(by.css('.player-title.ng-binding'))
  .first()
  .getText();

var description = element.all(by.css('.player-description.ng-binding'))
  .first()
  .getText();

var compareNameDesc = Promise.all([name, description]).then(function(info) {
  var name = info[0], description = info[1];
  return name === description;
});

expect(compareNameDesc).toBe(true);

To validate each name and description individually:

var correctNames = [...];
var correctDescriptions = [...];
var names = element.all(by.css('.player-title.ng-binding'));
var descriptions = element.all(by.css('.player-title.ng-binding'));
for (var i = 0; i < correctNames.length; i++) {
  expect(names.get(i).getText()).toEqual(correctNames[i]);
  expect(descriptions.get(i).getText()).toEqual(correctDescriptions[i]);
}

For more details, visit ElementArrayFinder#get

EDIT: To ensure that all names match all descriptions (as requested in comment):

var names = element.all(by.css('.player-title.ng-binding'))
  .map(getText);
var descriptions = element.all(by.css('.player-title.ng-binding'))
  .map(getText);

var namesMatchDescriptions = Promise.all([names, descriptions])
  .then(function(results) {
    return results[0].every(function(name, index) {
      return name === results[1][index];
    });
  });

expect(namesMatchDescriptions).toBe(true);

This approach utilizes map as recommended by @alecxe, in conjunction with Array#every

Additional Information:

Remember that promises operate asynchronously, so when using your last code block, accessing console.log(name[0]), name is a promise instance without a property 0, resulting in undefined.

In protractor, expect handles promises, enabling evaluation of actual values by unwrapping promises provided to expect().

Promises also unwind, meaning if a promise is returned within a then() call, the original promise-assigned variable will be fulfilled with that value.

Therefore, you can return both name and description from separate promises, subsequently applying these promises to expect.

Moreover, consider implementing first instead of utilizing then with an index.

var name = element.all(by.css('.player-title.ng-binding'))
  .first()
  .getText();

var description = element.all(by.css('.player-description.ng-binding'))
  .first()
  .getText();

expect(name).toEqual('name');
expect(description).toEqual('description');

Key Insights:

Although promises may be intricate, correctly employing them simplifies management.
ElementArrayFinder methods facilitate access to various elements within collections
Promise.all enables synchronization of promise completions
Operations like every, some, and reduce within lists can generate insights into the relationship between two collections; ideally this process should be more straightforward!

Answer 3

Answer №2

One approach that can be considered more elongated is by utilizing the map() function:

var players = element.all(by.css("div.tl-item")).map(function (player) {
    return {
        name: player.element(by.css("div.player-title")).getText(),
        description: player.element(by.css("p.player-description")).getText()
    }
});

The variable players would hold a promise that will eventually yield an array of player objects. To view the actual content of players, resolve the promise:

players.then(function (playersValue) {
    console.log(playersValue);
});

Alternatively, you can compare it to an expected array:

expect(players).toEqual([
    {name: "Player 1", description: "Player description 1"},
    {name: "Player 2", description: "Player description 2"}
]);

You also have the option to access players by index:

players.then(function (playersValue) {
    expect(playersValue[0].name).toEqual("Player 1");
    expect(playersValue[0].description).toEqual("Player description 1");
});

Answer 4

One approach that can be considered more elongated is by utilizing the map() function:

var players = element.all(by.css("div.tl-item")).map(function (player) {
    return {
        name: player.element(by.css("div.player-title")).getText(),
        description: player.element(by.css("p.player-description")).getText()
    }
});

The variable players would hold a promise that will eventually yield an array of player objects. To view the actual content of players, resolve the promise:

players.then(function (playersValue) {
    console.log(playersValue);
});

Alternatively, you can compare it to an expected array:

expect(players).toEqual([
    {name: "Player 1", description: "Player description 1"},
    {name: "Player 2", description: "Player description 2"}
]);

You also have the option to access players by index:

players.then(function (playersValue) {
    expect(playersValue[0].name).toEqual("Player 1");
    expect(playersValue[0].description).toEqual("Player description 1");
});

Keeping data external to promises in protractor

Answer №1

Answer №2

Similar questions

How to Fetch a Singular Value from a Service in Angular 4 Using a Defined Pattern

Using JavaScript to calculate dimensions based on the viewport's width and height

How can I dynamically assign ngModel in AngularJS?

Karma issue: The application myApp has not been defined

Combining two elements in Angular 2

The event "subscriptionRemoved" is not being triggered when a password change is made on the Microsoft Graph API

React state change is causing a functional component to not re-render

Utilize AJAX and jQuery to seamlessly submit a form

Tips for retrieving data from a Node.js server with a POST request in a React application

Exploring the Node.js Connector: Utilizing Collection.remove

Utilizing Three.js Texture with shaderMaterial

Retrieve information from subcategories in the Realtime Database using Firebase

How to access and utilize parent directive methods effectively in AngularJS

What methods can be used to ensure the document in mongoose is not deleted by updating the expires property on the createdAt field?

Steps for finding an element in Selenium

Using a JavaScript "for each" loop instead of having several "if

What is the reason for being unable to remove the event listener from a sibling element?

How can I address multiple buttons with various events using jQuery?

Creating a JavaScript function for a custom timed traffic light sequence

Error in Firefox when converting a string to a date in JavaScript using the format mm-dd-yyyy