Richard
Richard

Reputation: 65550

Protractor and Angular: How to test two pages in an app, one after the other?

I would like to run Protractor tests on two separate pages in my Angular app: /dashboard and /articles.

The complication is that I have to log in to the app manually.

Currently I have this setup:

var LoginPage = function() {
  ptor = protractor.getInstance();
  this.login = function(url) {
    ptor.get(url);
    ptor.findElement(protractor.By.model('email')).sendKeys(config.LOGIN_EMAIL);
    ptor.findElement(protractor.By.model('password')).sendKeys(config.LOGIN_PASS);
    ptor.findElement(protractor.By.tagName('button')).click();
  };
};

describe('The dashboard', function() {
  console.log('logging in');
  var loginPage = new LoginPage();
  loginPage.login(config.DASHBOARD_URL);
  console.log('logged in');
  it('has a heading', function() {
    console.log('testing dashboard 1');
    heading = ptor.findElement(protractor.By.tagName('h1'));
    expect(heading.getText()).toEqual(config.DASHBOARD_HEADING);
  });
});

describe('The article widget', function() {
  console.log('logging in');
  var loginPage = new LoginPage();
  loginPage.login(config.ARTICLE_URL);
  console.log('logged in');
  it('has a heading', function() {
    console.log('testing article 1');
    heading = ptor.findElement(protractor.By.tagName('h1'));
    expect(heading.getText()).toEqual(config.ARTICLES_HEADING);
  });
});

This gives me the following output:

Selenium standalone server started at http://192.168.2.9:56791/wd/hub
logging in
LoginPage
logged in
logging in
LoginPage
logged in
testing dashboard 1
Ftesting article 1

It looks as though both the describe sections are kicking off in parallel. How can I force the following sequence of events, while still structuring the code in a sensible way?

  1. Load dashboard page
  2. Log in
  3. Run dashboard tests
  4. Load article page (Assume we are already logged in)
  5. Run article tests

Upvotes: 10

Views: 15252

Answers (4)

Tamlyn
Tamlyn

Reputation: 23562

The Protractor documentation recommends

put your log-in code into an onPrepare function, which will be run once before any of your tests.

For example in your protractor.conf

onPrepare: function() {
    browser.driver.get('http://localhost/login.html');

    browser.driver.findElement(by.id('username')).sendKeys('Jane');
    browser.driver.findElement(by.id('password')).sendKeys('1234');
    browser.driver.findElement(by.id('clickme')).click();

    // Login takes some time, so wait until it's done.
    // For the test app's login, we know it's done when it redirects to
    // index.html.
    return browser.driver.wait(function() {
       return browser.driver.getCurrentUrl().then(function(url) {
          return /index/.test(url);
       });
    }, 10000);
}

Upvotes: 7

user3512851
user3512851

Reputation: 99

I had a similar issue with my e2e protractor tests. Describe blocks were being executed in parallel, causing my tests to fail.

My code before the fix was something like:

describe('test1', function() {
  it('do foo1', function() {..});
  describe('do test1', function() {..});
});
describe('test2', function() {
  it('do foo2', function() {..});
  describe('do test2', function() {..});
});

Both the describe blocks were being executed in parallel causing my tests to fail. The fix was to enclose the it blocks in describe blocks.

Code after the fix:

describe('test1', function() {
  describe('foo1', function() {
    it('do foo1', function() {..});  
  });
  describe('do test1', function() {..});
});
describe('test2', function() {
  describe('foo2', function() {
    it('do foo2', function() {..});  
  });
  describe('do test2', function() {..});
});

Link to a similar issue on protractor github: https://github.com/angular/protractor/issues/592

Upvotes: -1

Andres D
Andres D

Reputation: 8900

You can move the login to another file.

Then, in your protractor configuration file do this:

exports.config = {
  specs: [
    'spec/login.js',
    'spec/dashboard_test.js',
    'spec/article_test.js'
  ],
  ...
};

Login will run before the other tests

Upvotes: 9

user2167582
user2167582

Reputation: 6368

describe('my app', function(){
    beforeEach(function(){
        login()...
    })
    describe('dashboard');
    describe('the article widget')
});

Upvotes: 8

Related Questions