Nesting callbacks with protractor

Question

I'm using test framework protractor to test an angularjs app. I've been doing this for sometime now and one of the question that I've not been able to answer is :

Suppose I want to modify a the value a data on my page. Clicking on the eleme brings up a form for the modification and clicking on save registers the new value in the database. So is there a difference between option 1 and option 2 below ?

option 1

element(by.id("id1"))
.click()
.then(function() {
    element(by.id("input"))
        .clear()
        .sendKeys("new value");
    element(by.id("saveButton"))
        .click()
        .then(function() {
            expect(element(by.id("id1")).getText()).toEqual("new value");
        });
});

option 2

element(by.id("id1"))
    .click();
element(by.id("input"))
    .clear()
    .sendKeys("new value");
element(by.id("saveButton"))
    .click();
expect(element(by.id("id1")).getText()).toEqual("new value");

Answer 1

There is no theoretical difference between the two options.

In Protractor/WebDriverJS, there is always that active Control Flow mechanism which is a dynamic queue of promises that handles the ordering of the promises and their resolutions. In other words, there is no need to explicitly resolve promises of click() actions as in your first option.

Answer 2

It is not necessarily be equal as in option1 you are waiting for promise of click to return and then you are performing clear and sendkeys() whereas in option2 you are not waiting for promise to return so there might be a possibility of clear() and sendKeys() try to execute along with/after click().

So there is no necessary rule that option2 will give desired output all the time.

Answer 3

We just had a big refactor resolving this issue. We had our entire code base using the first option and there were a few problems with that. The ones mentioned in the answers before me and additionally when you start doing a little more complex things like API calls and switching between angular and non-angular pages, having loops in the code etc. then the first option becomes unreliable.

We also observed that having unneccesary then would some times give false positives.

Some observations/rules of thumb we learned and implmented:

• Use then only when you a value that is returned. e.g. getText() or something like that
• then after a for loop if you want to use a variable outside the loop which is assigned with some value inside the loop.
• If there is an error while waiting for Protractor to sync with the page
  • Once the ignoreSynchronization flag is set to false, should not usethen
  • When you must set ignoreSynchronization to false and then true in the same test. They must be separated by a then block