如何使用由 $index 的 ng-repeat track 创建的量角器选择元素？答案

【问题标题】：How to select elements using protractor created by ng-repeat track by $index?如何使用由 $index 的 ng-repeat track 创建的量角器选择元素？
【发布时间】：2016-05-30 05:05:18
【问题描述】：

我需要选择由 ng-repeat 创建的文本框并使用 sendKeys 函数发送一些值。但我不确定选择文本框的方法。请建议一种方法来完成此操作，或者我应该改用 css 选择器。

<div class="qst_input_hld ng-scope" ng-repeat="option in options track by $index">
<input type="text" class="input-sm ng-pristine ng-valid" ng-model="options[$index]" placeholder="Option 1" ng-class="isOptionEmpty[$index] ? 'error-border' : ''">
<!-- ngIf: $index > 1 -->
</div>

【问题讨论】：

标签： angularjs protractor

【解决方案1】：

有多种方法可以定位文本输入，并且由于那里有一个转发器，我怀疑有多个文本框。假设您想将密钥发送给第一个，这里有一个选项：

var desiredInput = element.all(by.repeater("option in options")).first().all(by.tagName("input")).first();
desiredInput.sendKeys("desired text");

请注意，您根本不需要处理 track by 部分 - 它会被 Protractor (source code reference) 剥离。

还请注意，我刚刚使用了by.tagName() 技术，这可能会或可能不会起作用，具体取决于您是否有其他input 元素。您可以更严格并改用 CSS 选择器，例如检查占位符：

var desiredInput = element.all(by.repeater("option in options")).first().$('input[placeholder="Option 1"]');

而且，如果您想为转发器中的每个项目向输入元素发送键，请使用each()：

element.all(by.repeater("option in options")).each(function (elm) {
    var desiredInput = elm.$('input[placeholder="Option 1"]');
    desiredInput.sendKeys("desired text");
});

【讨论】：

+1 提到我们根本不需要处理跟踪。我在谷歌搜索中寻找那个确认，它让我得到了这个答案。我会向 Protractor 团队索取更多相关文档。
@Keith 谢谢！顺便说一句，我在eslint-plugin-protractor ESLint plugin 中添加了一条规则，如果您在by.repeater() 定位器中使用扩展转发器语法，它会发出警告。 Check it out.

【解决方案2】：

为您的文本框提供名称和 id 属性：

<input ... name="your_textbox" id="textbox_{{index}}" />

如果你想选择所有文本框：

document.getElementsByName("your_textbox");

具体的文本框：

document.getElementById("textbox_"+i);   //i=index

通过量角器：先把你输入框的ng-model改成：

<input type="text" class="input-sm ng-pristine ng-valid" ng-model="option" placeholder="Option 1" ng-class="isOptionEmpty[$index] ? 'error-border' : ''"> <!-- see ng-model=option -->

然后使用模型选择它：

var repeaterElements= element(by.repeater('option in options'));

repeaterElements.each(function(entry) {
    var input = entry.element(by.model("option"));
});

【讨论】：

我的意思是使用 element(by.repeater) 来选择 Protractor E2E 测试框架中的文本框。有没有可能。