CODEWITHSUNDEEP
javascriptfor-loopprotractorpageobjects
llacey
llacey

Reputation: 25

For Loop in a Page Object Not Running Properly

I am trying to check for the presence of a modal. If the modal is not present then it will place the value of the timer into browser.sleep(). This will give time for the modal to appear. I am having an issue with a for loop in a page object. When I run the code below I do not receive the alert and console.log messages under the if when I force a failure by getting changing the object. Also, I do not receive the Timer expired message.

from page_object file (relevant code)

editVinModal: { get: function () {
    return browser.element({id: 'editableVINPart'});
}},

doEditVIN: { value: function () {
    modalFailedToAppear = true;
    console.log('In doEditVIN');

    for(modal_timer = 0 ; modal_timer <= 30; modal_timer++) {

       if (!(this.editVinModal)) {
            alert('In If');
            console.log('Modal failed to appear');
           console.log('Under if - modalFailedToAppear: ', modalFailedToAppear);
            browser.sleep(modal_timer);
           console.log('under if - modal_timer: ',modal_timer);
       }
  else {
            console.log('In else  if else loop');
            //  console.log(browser.isElementPresent(this.editVinModal));
           console.log('modalFailedToAppear: ',modalFailedToAppear);
            modalFailedToAppear = false;
           console.log('modalFailedToAppear: ',modalFailedToAppear);
           console.log('modal_timer: ',modal_timer);
           break;
        }
    }
    if (modalFailedToAppear){
        console.log("Modal is not present within the given time period. Timer has expired.");
    }
    this.editVinLink.click();

    }},

Thanks in advance for

Upvotes: 1

Views: 237

Answers (1)

Isaac Lyman
Isaac Lyman

Reputation: 2205

Looks like you're new around here. Welcome!

browser.sleep(), generally speaking, does not belong in your Protractor tests (except for debugging purposes). That's the bad news. The good news is that Protractor actually provides a function that does exactly (I think) what you're trying to do. It's called browser.wait() and it works like this:

browser.wait( function() {  
  return element(by.id('editableVINpart')).isPresent().then( function(present) { 
    return present;
  });
}, 5000)
.then(function() { 
  element(by.id('editableVINpart')).click();
}, function() { 
  console.log('Element not found. :( ');
});

browser.wait() takes two arguments: first, an anonymous function, which it will execute repeatedly until it returns true; second, an amount of time to wait in milliseconds (by the way, browser.sleep() also takes a millisecond wait time, so your for loop is only waiting 465 milliseconds if it iterates all the way through, or about a half second--not very long).

Then, since browser.wait() returns a promise, just like all Protractor functions, we can attach a .then() statement to the end of it, which will execute the first passed-in function if the promise is successful, or the second passed-in function if it is not.

If you often have to wait for an element to be present (and for some reason it isn't synchronized with the Angular page load), it may be useful to you to have a reusable form of the function, like this:

var waitThenClick = function(el) {
  browser.wait( function() {
    return el.isPresent().then( function(present) { 
       return present;
    });
  }, 5000)
  .then(function() { 
    el.click();
  }, function() { 
    console.log('Element with locator: ' + el.locator + ' was not found. :( ');
  });
};

Then you could just call it like this, for whatever element you need:

waitThenClick(element(by.id('editableVINpart')));

Good luck! Make sure to get good and clever with asynchronous stuff (especially promises) with problems like this. Protractor promises trip up the best of us.

Upvotes: 3

Related Questions