javascript - 在 Protractor 中存储 promise 之外的值

Question

我的 Angular 应用程序中有一个时间轴类型的功能，其中包含玩家的姓名及其描述。所有玩家的名称共享一个名为 player-title.ng-binding 的公共(public)类，所有玩家的描述共享一个名为 .player-description.ng-binding 的公共(public)类

为了获取所有名称和相应的描述，我做了以下操作。

  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]);
  });

但是我无法想出一种方法来检查每个玩家是否都有正确的描述。例如，像 expect(name[0]).toEqual(description[0]); 我对 promise 和所有内容都很陌生，并且喜欢在这件事上的任何输入。

最后我还注意到，当我做这样的事情时，它打印出未定义。

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

  });

  console.log(name[0]);

玩家的 HTML 代码

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

非常感谢有关此事的所有意见。

Answer 1

如果您想检查name是否等于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 nameEqualsDesc = Promise.all([name, description]).then(function(info) {
  var name = info[0], description = info[1];
  return name === description;
});

expect(nameEqualsDesc).toBe(true);

要检查每个名称和描述是否正确:

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]);
}

有关更多信息，请查看ElementArrayFinder#get

编辑:检查所有名称是否等于所有描述(按照评论中的要求):

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 namesEqualDescriptions = Promise.all([names, descriptions])
  .then(function(results) {
    return results[0].every(function(name, index) {
      return name === results[1][index];
    });
  });

expect(namesEqualDescriptions).toBe(true);

此解决方案使用 map如 @alecxe 的答案中所指定，以及 Array#every

其他信息:

请记住，promise 是异步的，因此在最后一个代码块中，当您 console.log(name[0]), name是一个 Promise 的实例，它没有属性 0，这就是你未定义的原因。

Protractor 中的

expect understands promises ，所以你可以给 expect() 一个 promise ，它会知道解开它并检查它的实际值。

还要记住，promiseunwrap，这意味着如果您在 then() 调用中返回一个 Promise，那么您分配给原始 Promise 的变量将用该值来实现，例如

var p = Promise.resolve(2).then((x) => Promise.resolve(x * x));
p.then(console.log.bind(console)); // will log 4 (2 * 2)

因此，为了获得您想要的结果，您可以从两个不同的 Promise 返回名称和描述，然后将这些 Promise 提供给 expect。

此外，您还可以使用 first而不必将 then 与索引一起使用。

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');

要点

• Promise 可能会令人困惑，但是 using them correctly会让你和他们的生活变得更加轻松。
• ElementArrayFinder 方法可用于访问元素集合中的不同元素
• Promise.all 可用于“加入” promise 的完成
• 诸如 every、some 和 reduce 之类的列表操作方法可用于生成有关两个集合如何相互关联的信息。恕我直言，确实如此should be easier ;)