javascript - 在 Protractor 中，我们如何迭代并为其中包含 $index 的 Angular 模型赋予不同的值？

Question

我需要点击一个按钮三次(这将放弃三个带有下面给出的 html 代码的文本框)，然后在出现的每个文本框上给出不同的值。

用于点击三次的代码是

for (var i = 0; i < 3; i++) {
    element(by.id('protractor-type')).click();
};

然后出现了三个文本框。文本框的html代码是

<input type="text" required="" ng-model="config.eTypes[$index]" ng-change="updateEySettings()" class="form-control ng-pristine ng-invalid ng-invalid-required ng-touched" placeholder="Eg: Dancing" tabindex="0" aria-required="true" aria-invalid="true">

我可以使用代码只给一个文本框赋值

element(by.model('config.eTypes[$index]')).sendKeys('1st box');

但我也需要在其他文本框上赋值。

我尝试做这样的事情没有成功

element.all(by.repeater('type in config.eTypes track by $index')).then(function(arr){
     arr[0].sendKeys('cat');
     arr[1].sendKeys('ball');
     arr[2].sendKeys('bat');
 });

请建议适当和正确的方法。

Answer 1

要迭代 Protractor 中的某些内容，请使用可靠的函数。 for() 循环的执行速度通常比 Protractor 点击按钮快得多。方法如下 -

for (var i = 1; i <= 3; i++) {
    clickBtn(i);
}
function clickBtn(val){
    element(by.id('protractor-type')).click();

    //Assert the presence of the element that you want to verify on clicking of button. Here's a custom wait() function.
    browser.wait(function(){
        return element.all(by.model('config.eTypes[$index]')).then(function(arr){
            return arr.length === val;
        });
    });

    //You can send values to the input here if required.
};

这将点击按钮 3 次并验证每次点击时都会创建 3 个输入元素。您可以使用 .all() 函数发送值，但我没有在您的元素上看到 ng-repeat 属性，因此使用 by.repeater 无法执行。方法如下 -

element.all(by.model('config.eTypes[$index]')).then(function(arr){
     arr[0].sendKeys('cat');
     arr[1].sendKeys('ball');
     arr[2].sendKeys('bat');
 });

希望对您有所帮助。