How to do simple javascript looping in protractor

Question

for ( i = 0; i < 100; i++) {
         browser.manage().logs().get('browser').then(function(browserLog) {
                console.log(i);  
                });

    }

I am trying to run this using protractor, but i get hundred times 100 printed in console. I have some functionality which am trying to implement using looping.How can i do looping in protractor?

At least from your code the problem is not protractor, but your lack of knowledge for JS variable scoping and async coding. See http://stackoverflow.com/q/750486/1169798 for a solution — Sirko, Nov 12 '14 at 10:50

score 2 · Accepted Answer · answered Nov 12 '14 at 10:51

This is because the functions you're passing to then all close over the variable i, not the value that variable has when you create the functions. So later, when the functions are called, they all see the value of i as it is then, after the loop is complete (100).

If you want to capture the value of i as it is when you create the function, you can use ES5's Function#bind:

for ( i = 0; i < 100; i++) {
    browser.manage().logs().get('browser').then(function(index, browserLog) {
        console.log(index);  
    }.bind(null, i));
}

bind returns a new function that, when called, will call the original function with a given this value (in this case I'm using null) and any arguments you follow that with, followed by arguments given to the function bind returned.

Another approach is a builder function:

for ( i = 0; i < 100; i++) {
    browser.manage().logs().get('browser').then(buildHandler(i));
}
function buildHandler(index) {
    return function(browserLog) {
        console.log(index);
    };
}

That has the advantage of allowing the caller to control this.

@Rahul: No "bad," a lot of people don't get this at first. :-) Glad that helped. — T.J. Crowder, Nov 12 '14 at 11:14

How to do simple javascript looping in protractor

1 Answers1