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

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

这取决于您如何在指令中输入/输出数据.但是,在所有情况下,您可以将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在指令模板中使用,你可以使用其他定位器来查找子元素,以及getif需要,并依赖于它们在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中.

Answer 2

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

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

我假设通过"瞄准模型"你想要改变控制器的值并让ng-model指令更新视图,而不是相反.