angularjs - Protractor - 使用动态填充的输入测试 Angular 表单

Question

我正在尝试为我的 Angular 应用程序编写端到端测试，尤其是具有 3 个选择输入的表单。测试将需要涉及从这些选择中随机选择选项。第一个 select 已经填充了数据，但是其他 2 个 select 在选择了之前的一个时异步填充，因此它们相互依赖。

选择输入也使用 ng-disabled，并且仅在根据其 ng-repeat 表达式有可用选项时才启用。

我在测试中使用了页面对象方法，因此我尝试制作一些实用函数来实现我在测试中需要的随机选择行为:

页面对象:

    this.selectRandomCustomer = function() {
    var option,
      randomIndex;
    this.customerSelect.click();
    this.customerSelectOptions.count().then(function(count) {
      randomIndex = Math.floor(Math.random() * count);
      option = element(by.repeater('customer in vm.customers').row(randomIndex));
      option.click();
    });
  };

  this.selectRandomOrder = function() {
    if(this.orderSelect.isEnabled()===true) {
      var option,
        randomIndex;
      this.orderSelect.click();
      this.orderSelectOptions.count().then(function(count) {
        randomIndex = Math.floor(Math.random() * count);
        option = element(by.repeater('order in vm.orders').row(randomIndex));
        option.click();
      });
    }
  };

鉴于从 customerSelect 中选择一个选项后，只能选择一次填充了选项的 orderSelect，我想知道调用 时返回的 promise this.customerSelectOptions.count()，所以调用 this.selectRandomOrder，但似乎这是未定义的，因为我从 Protractor 中收到错误消息，说找不到 selectRandomOrder 功能。

现在我只能通过第一个选择来选择一个选项，因为它总是在初始页面加载时填充。

此外，我不确定使用 isEnabled() 是否真的对我有用，因为我确定这应该为我的第二个输入返回 true，但是如果我控制台注销它，我见假。这不适用于 ng-disabled 吗？

处理最初不会填充数据并等待 Angular 获取和填充任何可用选项的表单上的输入的最佳做法是什么？

谢谢

更新:

我已经通过调用 getAttribute() 来检查是否存在 disabled 属性。

所以我可以从 it block 中的规范文件中调用

page.customerSelect.getAttribute('disabled').then(function(result){
    if(!result) {
        page.selectRandomCustomer();
    }
});

page.orderSelect.getAttribute('disabled').then(function(result){
    if(!result) {
        page.selectRandomOrder();
    }
});

理想情况下，我希望能够在单击 selectRandomCustomer 中的选项后调用 selectRandomOrder:

this.selectRandomCustomer = function() {
    var option,
        randomIndex;
    this.customerSelect.click();
    this.customerSelectOptions.count().then(function(count) {
        randomIndex = Math.floor(Math.random() * count);
        option = element(by.repeater('customer in vm.customer').row(randomIndex));
        option.click();
        //Like to be able to call selectRandomOrder but only after angular has finished performing AJAX request for data and received response
    });
};

this.selectRandomOrder = function() {
    var option,
        randomIndex;
    this.orderSelect.click();
    this.orderSelectOptions.count().then(function(count) {
        randomIndex = Math.floor(Math.random() * count);
        option = element(by.repeater('order in vm.orders').row(randomIndex));
        option.click();
    });
};

我确实尝试在 option.click() 之后立即调用 this.selectRandomOrder 但是我得到一个错误说没有这样的函数，看起来 this 无法从返回的 promise 函数回调内部访问。

Answer 1

贴出的代码至少有一个主要问题:

if(this.orderSelect.isEnabled()===true) {

这里 isEnabled() 返回一个 promise 。您必须解决它以检查它的值(value):

var self = this;  // saving the page object reference
this.orderSelect.isEnabled().then(function (isEnabled) {
    if (isEnabled) {
        var option,
            randomIndex;
        self.orderSelect.click();
        self.orderSelectOptions.count().then(function(count) {
            randomIndex = Math.floor(Math.random() * count);
            option = element(by.repeater('order in vm.orders').row(randomIndex));
            option.click();
        });
    }
});