Protractor / angular 2 control flow

Question

i'm currently learning to write tests using protractor and i'm stuck and unable to understand the proper way to write a simple login/logout test.

 describe('Login with dummy user', function () {
    browser.ignoreSynchronization = true;
    browser.get('https://localhost:44311');
    element(by.id('userNameInput')).sendKeys('blabla');
    element(by.id('passwordInput')).sendKeys('blablapassword');
    element(by.id('submitButton')).click();
    browser.ignoreSynchronization = false;
    browser.sleep(2000);

    it('page should have Inventory title', function () {
        expect(browser.getTitle()).toEqual('Inventory');
    });

    it(' page should have logout button', function () {
        var completedAmount = element.all(by.css('.logoutButton'));
        expect(completedAmount.count()).toEqual(1);
    });

    describe('clicking loging out button', function () {
        browser.sleep(2000);
        element(by.css('[href="/account/signout"]')).click();

        it('should redirect to account page', function () {
            expect(browser.getCurrentUrl()).toEqual('https://localhost:44311/account');
        });

        it('should display a signed out message', function () {
            expect(element(by.css('text-success')).getText()).toEqual('You have successfully signed out');
        });
    });
});

I expect that the first two it would run before the second describe, but the browser clicks the button, logouts, browser closes and only then do the tests run and fail.

Keep all your code relevant to it inside your it. You can't keep anything outside it blocks, so move element(by.id('userNameInput')).sendKeys('blabla'); and other to your it — FCin
But then how could i test 2 things? Or i am forced to have multiple expects in 1 it, instead of having multiple it? — Ban Ovidiu
You can make functions and keep repeated code inside the function, but each it should test what it has in its description. If you have to make couple of expects, you can. — FCin
You should look into Page Object Pattern for protractor. It really helps. — FCin

Vishal Aggarwal Vishal Aggarwal · Accepted Answer · 2016-12-16T17:53:54

I would suggest to keep all code inside 'it' blocks and keep the Login & LogOut functionality inside the "beforeAll" and "afterAll" functions respectively as below:

describe('Login with dummy user', function () {
   beforeAll(function() {
    // Login Steps
    // ignore synchronization set to true should have nested then statements
    // since the synchronization is removed. Example:
    // 
    // element(by.id('userNameInput')).sendKeys('blabla').then(() => {
    //   element(by.id('passwordInput')).sendKeys('blablapassword').then(() => {
    //     element(by.id('submitButton')).click();
    //   });
    // });
   });



    it('page should have Inventory title', function () {
        expect(browser.getTitle()).toEqual('Inventory');
    });

    it(' page should have logout button', function () {
        var completedAmount = element.all(by.css('.logoutButton'));
        expect(completedAmount.count()).toEqual(1);
    });



  afterAll(function() {
   //Logout steps
  });

});

Protractor / angular 2 control flow

1 Answers