Protractor e2e Tests Login Redirection

All we need is an easy explanation of the problem, so here it is.

Currently have a partial end-to-end test that enters a username/password and clicks ‘sign in’.

It does that successfully, but concludes at a “thanks you’re logged in” page, instead of being redirected to the ‘account portal’ or ‘dashboard’, the way it would if I logged in through the browser.\

New to this project but we are using OAuth.

Main question: Does this sound like a need for http mocking?

Further details:

spec.js

describe('login page', function() {
    browser.driver.get('http://url.path/login');
    it('should render login page', function() {

      // Checking the current url
      var currentUrl = browser.driver.getCurrentUrl();
      expect(currentUrl).toMatch('/login');
    });
    it('should sign in', function() {

      // Find page elements
      var userNameField = browser.driver.findElement(By.id('username'));
      var userPassField = browser.driver.findElement(By.id('password'));
      var userLoginBtn  = browser.driver.findElement(By.id('loginbtn'));

      // Fill input fields
      userNameField.sendKeys('[email protected]');
      userPassField.sendKeys('1234');

      // Ensure fields contain what we've entered
      expect(userNameField.getAttribute('value')).toEqual('[email protected]');
      expect(userPassField.getAttribute('value')).toEqual('1234');

      // Click to sign in - waiting for Angular as it is manually bootstrapped.
      userLoginBtn.click().then(function() {
        browser.waitForAngular();
        expect(browser.driver.getCurrentUrl()).toMatch('/success');
      }, 10000);
    });
});

If I quickly click on the testing window, I can see it successfully reaches the ‘success’ page – but it does not redirect to the dashboard (it redirects when you manually sign in, through the browser). How can I continue this test to remain signed in and access the dashboard like a user would?

// New to the project, angular and and protractor.

EDIT – Summarizing this a bit:

  • I would like protractor to begin tests on the /login page
  • Protractor should find and fill out the username and password fields, then click Login
  • Protractor successfully log in, to see a /thankyou page, then immediately redirect to the user’s /dashboard page
  • Maybe I’m missing a step, do we need to manually redirect in Protractor tests?

(When a user manually logs in through the browser, they don’t see the /thankyou page – it’s a quick redirect to /dashboard . Protractor does not reach the dashboard page.

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Your post lacks information but I’ll try to make an assumption:

I suspect that your “thanks you’re logged in” page makes javascript redirect after a timeout.

So after you click “Login”, the browser loads “thanks you’re logged in” page, and since the second parameter to .then() does nothing, browser.waitForAngular() fails because there is no angular on that page.

You should try to use something like browser.driver.wait() with a reasonable timeout to detect url change (described here: https://github.com/angular/protractor/issues/610) and trigger browser.waitForAngular() after the browser get to /success page.

Method 2

Have you tried using an explicit wait?

    return browser.driver.wait(function() {
        return browser.driver.getCurrentUrl().then(function(url) {
            return /success/.test(url);
        });
    }, 10000);

Your code would be like that:

  // Click to sign in - waiting for Angular as it is manually bootstrapped.
  userLoginBtn.click();
  return browser.driver.wait(function() {
        return browser.driver.getCurrentUrl().then(function(url) {
            return /success/.test(url);
        });
  }, 10000);

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply