Question

考虑以下视图模型：

$scope.data = {};
$scope.data.person = {};
$scope.data.person.firstname = "";
$scope.data.person.lastname = "";
$scope.data.person.username = "";

和以下元素指令：

<custom-form-directive ng-model="data.person"></custom-form-directive>

包含三个输入标签以显示数据。如何通过定位ng-model="data.person"使用量角器填充输入字段？

Answer 1

这正是评估方法的用途：http://angular.github.io/protractor/#/api?view=ElementFinder.prototype.evaluate

element(by.model('data.person')).evaluate('data.person.firstname = "yourvaluehere"');

我认为，通过“定位模型”，您想要更改控制器的值，并让ng-model指令更新视图，而不是相反。

Answer 2

我认为你想构建类似于＆＃34; pageObject＆＃34; （请参阅https://github.com/angular/protractor/blob/master/docs/page-objects.md）了解您的custom-form-directive指令。该对象将理解该指令如何映射到Protractor将理解的基元（例如，特定的输入字段）。它应该采用一个定位器，以便其调用者可以传递如何在页面上查找指令，但该对象应该在此之后处理所有内容。

var object = new customFormDirectiveObject(by.model('data.person'));

取决于您的指令如何运作，您可以执行以下操作：

object.setName(first, last, user);

或者如果它更像这样的动态：

object.setName({firstname: first, lastname: last, username: user });

Answer 3

使用一些辅助功能，您可以轻松地完成它。辅助对象只需包裹量角器，使其更加安全可靠。特别是在远程系统上运行时。

var helper = {
  getElement: function (selector) {
    return element(by.css(selector));
  },

  resolveSelector: function (selector) {
    var el;
    if (typeof selector === 'string') {
      el = self.getElement(selector);
    } else {
      el = selector;
    }
    return el;
  },

  waitForElementClickable: function (selector) {
    var el = self.resolveSelector(selector);
    var condition = function () {
      return self.waitForElement(el).then(function () {
        return self.isElementEnabled(el);
      });
    };
    return self.wait(condition, 15000, 'Element not clickable. (' + selector + ')');
  },

  setElementValue: function (selector, value) {
    var el = self.resolveSelector(selector);
    return self.waitForElementClickable(el).then(function () {
      el.click().clear().sendKeys(value);
    });
  },

  getElementValue: function (selector) {
    var el = self.resolveSelector(selector);
    return el ? el.getAttribute('value') : '';
  }

}

然后你可以使用常规的CSS选择器来设置你的值：

helper.setElementValue('[ng-model="data.person"] input:nth-child(1)', '1st Input Value');
helper.setElementValue('[ng-model="data.person"] input:nth-child(2)', '2nd Input Value');
helper.setElementValue('[ng-model="data.person"] input:nth-child(3)', '3rd Input Value');

您可以使用以下内容检查预期值：

expect(helper.getElementValue('[ng-model="data.person"] input:nth-child(1)')).toEqual('something')

使用Protractor定位元素指令中的元素

3 个答案: