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

Question

考虑以下 View 模型:

$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" 填充输入字段?

Answer 1

这取决于您如何从指令的输入中获取数据。但是，在所有情况下，您都可以将 element(<locator>) 链接在一起。来电搜索sub-elements指令的:

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 中。