如何使用Protractor在元素指令中定位元素?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (18)

考虑以下视图模型:

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

包含三个输入标记来显示数据。如何使用Protractor通过目标填充输入字段ng-model="data.person"?

提问于
用户回答回答于

这取决于你如何在指令中输入/输出数据。但是,在所有情况下,你都可以将element(<locator>)调用链接在一起以搜索该指令的子元素

var directive = element(by.model('data.person'));
var subElement = directive.element(by.<something>);

如果ng-model在每个输入的指令本身中使用,可以执行如下操作:

var directive = element(by.model('data.person'));

// Assuming the inputs have attributes like `ng-model="firstname"` in the directive template
var firstnameInput = directive.element(by.model('firstname'));
var lastnameInput = directive.element(by.model('lastname'));
var usernameInput = directive.element(by.model('surnamname'));

然后每次调用 sendKeys

firstnameInput.sendKeys('Peter');
secondnameInput.sendKeys('Piper');
usernameInput.sendKeys('PickledPumpernickle');

如果你没有ng-model在指令模板中使用,则可以使用其他定位器来查找子元素,以及get是否需要,以及它们在DOM中的顺序

var inputs = directive.element(by.css('input'));
var firstnameInput = inputs.get(0);
var secondnameInput = inputs.get(1);
var usernameInput = inputs.get(2);

但是,如果replace: true在指令中指定了上述内容,则怀疑以上都不起作用,因为它取决于原始元素,并且该ng-model属性位于DOM中。

用户回答回答于

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

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

我假定通过“定位模型”来改变控制器的值,并让ng-model指令更新视图,而不是相反。

扫码关注云+社区