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

时间:2016-06-11 21:17:14

标签: angularjs protractor angularjs-e2e

我正在为我的角度应用程序编写一个e2e测试,特别是一个有3个选择输入的表单。测试需要涉及从这些选择中挑选随机选项。第一个选择已经填充了数据,但是另外两个选择在选择之前选择时异步填充,因此它们相互依赖。

选择输入也使用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();
      });
    }
  };

鉴于orderSelect只能在从customerSelect中选择一个选项后填充选项时才能选择this.customerSelectOptions.count(),我想知道在调用this.selectRandomOrder时挂钩返回的承诺,所以调用{ {1}},但似乎这是未定义的,因为我从量角器得到一个错误,说它无法找到selectRandomOrder函数。

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

另外,我不确定使用isEnabled()是否真的对我有效,因为我确信这应该在我的第二次输入时返回true,但是如果我控制台记录这个,我看是假的。这不适用于ng-disabled吗?

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

由于

更新:

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

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

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

我确实尝试在this.selectRandomOrder之后立即调用option.click(),但是我收到错误,说没有这样的函数,似乎this无法从返回的promise函数回调中访问。

1 个答案:

答案 0 :(得分:2)

发布的代码中至少存在一个主要问题:

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

此处isEnabled() 返回承诺。您必须解决它以检查它的值:

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