量角器 - 使用动态填充的输入测试 Angular 表单

Question

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

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

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

页面对象：

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

考虑到 orderSelect 在从 customerSelect 中选择一个选项后只能被 selected 填充一次，我想知道在调用 [= 时挂钩返回的承诺16=]，所以调用 this.selectRandomOrder，但似乎这是未定义的，因为我从量角器收到错误消息，说它找不到 selectRandomOrder 函数。

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

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

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

谢谢

更新：

我已经通过调用 getAttribute() 检查是否存在 disabled 属性来解决这个问题。

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

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()returns一个承诺。您必须解析它以检查它的值：

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

量角器 - 使用动态填充的输入测试 Angular 表单

Protractor - testing an Angular form with dynamically populated inputs

angularjs

angularjs-e2e

protractor