Protractor Timing Issues

Question

I currently have the following code in one of my test specs for Protractor:

.then(function() {
    return button.click();
})
.then(function() {
    return element(otherButton).isDisplayed();
})
.then(function(otherButtonIsPresent) {
    if(otherButtonIsPresent) {
        return browser.wait(EC.elementToBeClickable(element(otherButton)), getWaitTime())
            .then(function() {
                element(otherButton).click();
                return element(continueButton).isPresent();
            })
    }
})

When I use Chrome to debug using the --debug-brk and --inspect flags, I am able to pass these checks and resume as normal. When I run the same test without the flags, the test fails and stalls during looking for otherButton before trying to click on it.

I'm wondering if this is because during debugging, I set breakpoints and wait for the buttons to show up on the screen before attempting to click on them.

I need to make sure that this element is visible on the page before trying to click it and was wondering if there were another way if accomplishing this?

Thanks

Try using browser.wait() along with ExpectedConditions to make webdriver to until some specific condition. refer http://www.protractortest.org/#/api?view=ProtractorExpectedConditions. — Sudharsan Selvaraj, Sep 28 '17 at 06:01

Ernst Zwingli · Answer 1 · 2017-09-29T13:24:55.870

I'm using Answer as I can't comment yet.

You're basically mention it yourself: after you clicked a button you just want to wait until a next button is clickable. Therefore your .then()-functions should start from the button it depends on. To me it seems, the three lined-up .then()-functions depend on the same condition, so after you .click() the first button, the second .then() gets immediately executed, not waiting the previous .click() to finish.

Therefore putting the .then() directly behind the relevant .click() and inside the preceding .then()-function, this should work:

.then(function() {
    element(button).click().then(function(){
       element(otherButton).click().then(function(){
           return element(continueButton).isPresent();
       });
    });
});

Or if you go with ExpectedConitions, you shouldn't need .then()-functions. Because Protractor should manage the ControlFlow, allowing you to write it without chained .then()-functions:

.then(function() {
    browser.wait(EC.elementToBeClickable(element(button)), getWaitTime());
    element(button).click();
    browser.wait(EC.elementToBeClickable(element(otherButton)), getWaitTime());
    element(otherButton).click();
    browser.wait(EC.elementToBeClickable(element(continueButton)), getWaitTime());
    return element(continueButton).isPresent();
});

This nice post elaborates a bit on asynchronous writing, but thanks to Protractor synchronous execution.

As alternative an example combining my both inputs, kind of double-securing the test:

.then(function() {
    browser.wait(EC.elementToBeClickable(element(button)), getWaitTime());
    element(button).click().then(function(){
       browser.wait(EC.elementToBeClickable(element(otherButton)), getWaitTime());
       element(otherButton).click().then(function(){
           browser.wait(EC.elementToBeClickable(element(continueButton)), getWaitTime());
           return element(continueButton).isPresent();
       });
    });
});

Protractor Timing Issues

1 Answers1

Linked