Order of execution of AngularJS E2E tests

Issue

So, I noticed that the it() functions inside describe() blocks don’t (always) run in the order I wrote them.

Are they asynchronous then? And how to force them to run in a certain order ?

I want to chain a bunch of UI mutations and basically have each it() function check the state of the UI after the previous step.

If they are executed asynchronously, that kind of beats the point. That would mean each it() block would need to contain all the steps from the previous one?

it('should do something', function() {
  // app is in state 1
  // do something
  // leave app in state 2
});
it('should continue from the state left after the previous block', function() {
  // app is in state 2
  // do something
  // leave app in state 3
});
it('should continue from the state left after the previous block', function() {
  // app is in state 3
  // do something
  // leave app in state 4
});
it('should continue from the state left after the previous block', function() {
  // app is in state 4
  // do something
  // leave app in state 5
});
...

Solution

Everything inside an “it” function is an independent test. What you need to do is put shared steps in a “beforeEach” function

describe('Check pdf popup', function() {
    beforeEach(function() {
        element('.navbar a:eq(3)').click();
    });

    it('We should see the pdf popup', function() {
        expect(element('.modal h4:visible').text()).toMatch(/Email PDF/);
    });

    it('Cancel should dispel the pdf popup', function() {
        // exit pdf box
        element('input[value="Cancel"]').click();
        expect(repeater('.modal h4:visible').count()).toBe(0);
    });

    it('if customer email not set, display input for email', function() {
        expect(repeater('.modal #pdfemail:visible').count()).toBe(1);
        expect(repeater('.modal #pdfcustomercheckbox:visible').count()).toBe(0);
    });

});

You can nest additional “describe” blocks inside each other, containing additional “beforeEach” functions, having the effect of issuing consecutive commands.

describe('fuel comparison', function() {
    beforeEach(function() {
        element("#gasvsdiesel").click();
    });

    it('should switch to Fuel Comparison calculator', function() {
        expect(element('.brand').text()).
            toBe("Fuel Comparison");
    });

    describe('changing gas price', function() {
        beforeEach(function() {
            input("compareFuelPrice").enter("5.888");
        });

        it('should change fuelinfo text to show reset link', function() {
            element('#content .nav-pills a[tap-click="tab=\'calculations\'"]').click();
            expect(element("#fuelinfo span:visible").text()).toBe("(Click here to set fuel prices to California defaults)");
        });

    });
   });

Answered By – Karen Zilles

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.