Protractor sequencing basic test. Run test after login

Question

I am trying to figure out how to make this basic test pass consistently.

describe('home page', function () {

  beforeEach(function () {
      browser.driver.get('https://localhost:0000/xxxx/');
  });

  it('should have a title', function () {
      var userName = browser.driver.findElement(by.id('userid_inputtext')).sendKeys('userNameXX');
      var passWord = browser.driver.findElement(By.id("password_inputtext")).sendKeys("passWordXX");
      var login = browser.driver.findElement(By.id('sign_in_button'));

      login.click();

      browser.driver.getCurrentUrl();
      browser.driver.getTitle().then(function (title) {
          expect(title).toEqual('Webpage Title');
      });
  });

});

The login in page is not Angular but after login it loads the Angular app. Right now my test is passing some of the time. The problem is that sometimes it picks up the title of the login page and sometimes it picks up the title of the home page(I want it to consistently test the title of the home page after login).

I am have played around with using a promise and browser.wait a little bit but have not really nailed this down. Any advice would be great!

Answer 1

Couple of things I could think of - most of the methods in protractor API are asynchronous and return promises.

In your login page once you login.click() , your homePage takes some time to load and therefore following async methods like - browser.getCurrentUrl & browser.getTitle are called first. This happens inconsistently as you pointed out.

Also you should assign variables to element locators and then perform actions on them! You should use Page Objects to store your locators. Please refer the Official Protractor Style Guide

browser.getCurrentUrl also returns a promise you have to resolve it as well.

To solve this issue you should use browser.wait in the right way:

describe('home page', function () {

 beforeEach(function () {
  browser.driver.get('https://localhost:0000/xxxx/');
});

it('should have a title', function () {
  var userName = browser.driver.findElement(by.id('userid_inputtext'));
  userName.clear();
  userName.sendKeys('userNameXX');

  var passWord = browser.driver.findElement(By.id("password_inputtext"));
  passWord.clear();
  passWord.sendKeys("passWordXX");

  var login = browser.driver.findElement(By.id('sign_in_button'));

  browser.driver.wait(login.click(),5000,'homePage should be loaded within 5 secs'); // would throw an error if the page takes more than 5 secs to load

 // you could also use `browser.driver.sleep(500)` but not advisable as sleeps slow the tests down!

  browser.driver.getCurrentUrl().then(function (url) {
      expect(url).toEqual('homePage url');
  });
  browser.driver.getTitle().then(function (title) {
      expect(title).toEqual('Webpage Title');
  });
});

});

Also since your login page is non-angular, you could write your test in the right way which is to use browser.ignoreSynchronization and using the protractor api methods in a cleaner way.

describe('home page', function () {

 beforeEach(function () {
  browser.get('https://localhost:0000/xxxx/');
});

it('should have a title', function () {
  browser.ignoreSynchronization = true; // set it to true for non-angular pages(loginPage)
  var userName = element(by.id('userid_inputtext'));
  userName.clear();
  userName.sendKeys('userNameXX');

  var passWord = element(By.id("password_inputtext"));
  passWord.clear();
  passWord.sendKeys("passWordXX");

  var login = element(By.id('sign_in_button'));

  browser.wait(login.click(),5000,'homePage should be loaded within 5 secs');
  browser.ignoreSynchronization = false; // set it to false for angular pages(homePage)

  browser.getCurrentUrl().then(function (url) {
      expect(url).toEqual('homePage url');
  });
  browser.getTitle().then(function (title) {
      expect(title).toEqual('Webpage Title');
  });
});

});

Notice there is no need of accessing the browser.driver object, you can directly use protractor's methods!