Angular Protractor end-2-end test fails after clicking a button

Question

So today I have been working on setting up end-2-end testing for an Angular JS app with Protractor. For writing cleaner tests, I make use of the Page Object pattern as described on the Protractor website.

Test scenario: When a user enters the website, he/she needs to login first. By filling in their credentials and clicking a button, the user is redirected to a validation page. There they need to enter a code that has been sent to them by email. In this case, the validation code is always the same when running end-2-end tests (123456). When the user has entered his/her code, the validation button needs to be clicked in order to enter the landing page (organisations). There a list of organisations is presented to the user.

The Protractor test:

organisations.spec.js

'use strict';

describe('when selecting organisation', function () {
  var page;

  var util = require('../../util');

  browser.get('/#/login');

  // login before each test case
  beforeEach(function () {
    page = require('./organisations.po');
    util.login('username', 'password');
  });

  // logout after each one
  afterEach(function () {
    page.logoutButton.click();
  });

  it('should have a list of organisations', function () {
    expect(browser.getCurrentUrl()).toEqual('http://localhost:9111/#/organisations');
    expect(page.organisationList.isPresent()).toBe(true);
  });
});

organisations.po.js (the page object)

'use strict';

var MainPage = function () {
  // organisations
  this.organisationList = element(by.css('.select-list'));
  this.logoutButton = element(by.css('.logout-button'));
};

module.exports = new MainPage();

util.js (code for login process)

'use strict';

var Util = function () {
  this.login = function login(username, password) {
    browser.get('/#/login');

    var loginPage = require('./spec/login/login.po');
    var validationPage = require('./spec/login/validate.po');

    // fill in login form
    loginPage.username.sendKeys(username);
    loginPage.password.sendKeys(password);

    // submit login form and navigate to validation page
    loginPage.loginButton.click();

    // fill in validation form
    validationPage.validationCode.sendKeys('123456');

    // submit validation form and navigate to landing page
    validationPage.submitValidateBtn.click();
  }
};

module.exports = new Util();

What happens when running the test: Protractor is able to fill in the user credentials and click the login button. However, the corresponding redirect to the validation page does not occur, causing the expectations to fail as Protractor is not able to locate the page objects since these are on another page. Here is a part of the error message that Protractor produces. Just in case, here can you see the Protractor configuration file that is being used.

I tried putting explicit waits (browser.wait(<condition>) around the button clicks, but that just seems to have the same effect. Could someone point out what I am doing wrong and why that redirect is not happening? Am I missing something obvious here? Thanks in advance!

Answer 1

If your login-pages are non-Angular, double check whether you need to set browser.ignoreSynchronization to false in Protractor.

If they are Angular, I would think you'd need to wait for the click promise to complete after login? Does the following work?

loginPage.loginButton.click().then(function () {
  validationPage.validationCode.sendKeys('123456');
  ...
}

In this way, Protractor does the wait (suggested in other answers) itself, provided the login/validation page are indeed done in Angular.

As a related remark, in your beforeEach and afterEach, you may also want to use the optional done callback, so that the actual test only starts after login has been successful:

beforeEach(function (done) {
    ...
    util.login(user, pw).then(done);
}

This does require, though, that your login method actually returns the promise of the validation click. (I typically let all my page object methods return the promises).

Also related to your page objects, instead of having a Login page object with just the element finders as fields, why not give that page object the more abstract login method that is now in a util class?

Furthermore, I tend to give every page object a 'self check' method, that permits checking that the browser is indeed on the expected page. After clicking login on the Login page, I expect to be on the validation page. Thus, the first thing I do is check (assert) that I'm indeed on the validation page. Only then do I actually press the validate button. This tends to give cleaner error messages in case your application's routing is broken.

I wrote a bit more about state navigation and page objects on my blog.

Answer 2

I've had some issues with code in a part further along interrupting at a spot earlier than you'd expect. For example, as soon as it loads up a page object that has the right path, but maybe an error with the declaration of the page itself, the whole test crashes.

First, I would comment everything out after clicking the login button. Then maybe add a 10s sleep. Run the test and watch it. Does it click the button? Does it get past the login screen?

If that is working, uncomment one line at a time and see where it crashes. Try keeping the sleep in there to see if it makes a difference. If the sleep does make a difference, that means whatever wait you were using wasn't one that works in that situation.

Of course, if you hit a line that crashes you every single time, then you can dig further!

Answer 3

what I have found to help work is to force protractor to wait till a page loads by waiting till the title is a specific title.

for example: the title could be login at your login page but then after you hit login the next page title is validation. So you can force protractor to wait till the validation page loads.

NOTE: I don't know the actual names of your titles so I'm just using place holders.

'use strict';

var Util = function () {
  this.login = function login(username, password) {
    browser.get('/#/login');

    var loginPage = require('./spec/login/login.po');
    var validationPage = require('./spec/login/validate.po');

    // fill in login form
    loginPage.username.sendKeys(username);
    loginPage.password.sendKeys(password);

    // submit login form and navigate to validation page
    loginPage.loginButton.click();

    // wait till our validation page loads then do our validation
    browser.wait(protractor.until.titleIs("Validation"), 5000, "✗ Failed to wait for the validation page to load").then(function(){

        // fill in validation form
        validationPage.validationCode.sendKeys('123456');

        // submit validation form and navigate to landing page
        validationPage.submitValidateBtn.click();
    });

  }
};