What is the best way to loop through and assign various values to an angular model using $index in Protractor?

Question

What is the best way to loop through and assign various values to an angular model using $index in Protractor?

To create three text boxes with different values, I need to click a button three times using the following code:

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

After clicking thrice, three text boxes will appear. The HTML code for the text box is:

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

Using the code below, you can give a value to only one textbox:

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

However, to provide values to all textboxes, attempt like this was unsuccessful:

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');
 });

If you have suggestions on how to achieve this properly, please share.

javascript angularjs selenium jasmine protractor

Answer 1

Answer №1

When working with Protractor, it is best to use functions for iteration as they are reliable. The for() loop tends to execute much faster than clicking buttons in Protractor. Here's an example:

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

    // Verify the presence of the desired element after clicking the button using a custom wait() function
    browser.wait(function(){
        return element.all(by.model('config.eTypes[$index]')).then(function(array){
            return array.length === value;
        });
    });

    // Optionally send values to the input fields here if needed
};

This code will click the button 3 times and ensure that 3 input elements are created each time it is clicked. You can populate the input fields using .all() function. Since there is no ng-repeat attribute on your element, you cannot use by.repeater. Here's how to do it:

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

I hope this explanation proves useful.

Answer 2

When working with Protractor, it is best to use functions for iteration as they are reliable. The for() loop tends to execute much faster than clicking buttons in Protractor. Here's an example:

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

    // Verify the presence of the desired element after clicking the button using a custom wait() function
    browser.wait(function(){
        return element.all(by.model('config.eTypes[$index]')).then(function(array){
            return array.length === value;
        });
    });

    // Optionally send values to the input fields here if needed
};

This code will click the button 3 times and ensure that 3 input elements are created each time it is clicked. You can populate the input fields using .all() function. Since there is no ng-repeat attribute on your element, you cannot use by.repeater. Here's how to do it:

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

I hope this explanation proves useful.

What is the best way to loop through and assign various values to an angular model using $index in Protractor?

Answer №1

Similar questions

What steps can I take to modify my webpage, like a dashboard, on the internet?

Tips for adjusting the position of an infowindow in ArcGIS

The WordPress site you are trying to access does not have the 'Access-Control-Allow-Origin' header included in the requested resource

Incorporate a PHP file using AJAX in a development project with Vue

Determine time without discerning the timezone of the device

Utilizing Rails to incorporate a comment box through jquery on individual posts within a index page showcasing all listed posts

What steps should I take to ensure my .js.erb files are compatible with Rails 7?

Troubleshooting Challenges with JSON and jQuery Encoding

What steps can I take to stop my React child component from fetching data each time it re-renders or mounts?

Ways to determine if the v-menu is currently visible or hidden

There is a lack of communication between the tomcat application and the database

Creating a dynamic select functionality in Drupal forms

Issue with JSONP success function not being triggered

Error: This Service Worker is restricted to secure origins only due to a DOMException

Retrieve the currently selected element following the button press

What is the best method for loading a script in a PHP file that is triggered by an Ajax request?

Illustrating Angular Scope and Controller Relationships in Sequence Diagrams

"Exploring the world of custom middleware in NextJs on a localhost

NodeJS package 'jquery' npm not functioning properly (issue with $.on())

What is the best way to include a variable (string) in an XPath contains function?