Getting the Angular Content to load in protractor tests

Question

I have an angular application that I am writing e2e test for using protractor.

Following is my conf.js file setup

var project = require('./package.json');
var HtmlReporter = require('protractor-jasmine2-screenshot-reporter');

var multiCapabilities = [{
    'browserName': 'chrome'
}];

multiCapabilities = [{
    'browserName': 'chrome',
    "platform": "Windows 7",
    'build': 'Testing',
    'name': project.name + ' tests'
}]

exports.config = {
    framework: 'jasmine2',
    sauceUser: 'blahblhablah',
    sauceKey: 'xyzabcdxyzabac',
    multiCapabilities: multiCapabilities,
    specs: ['e2e/main.spec.js'],
    jasmineNodeOpts: {
        showColors: true,
        defaultTimeoutInterval: 30000
    },
    onPrepare: function() {
        jasmine.getEnv().addReporter(new HtmlReporter({
            dest: 'reports/e2e'
        }));
    }
};

Following is my test spec file

'use strict';

var mainPage = require('./page.js');
describe('Demo', function() {

    //Check if title pages are consistent
    it('Test 1', function() {

        browser.get('http://localhost:3000/'); 
        expect(browser.getTitle()).toEqual('NBA LIVE');
    });
});

I am running my test on saucelabs when I run them locally I have no issues. So after I ran this test I got the following error message.

   Message:
      Failed: Angular could not be found on the page http://localhost:3000/ : retries looking for
      angular exceeded

So i did a little more research and realized I can set browser.ignoreSynchronization = true; in my test spec file.

So after doing that I get the following error message:

   Message:
      Expected 'http://localhost:3000/' to equal 'NBA LIVE'.

So I think maybe the angular or the content is not loading because of me setting ignoring synchronization to true but if i do not then I get the other error. Again none of this is an issue when running my test locally on my laptop but only when doing on saucelab. It is clear I need to add something to make angular content load. Please advice me on what to do.

Answer 1

what might be happening is that it's checking the expect before the page loads so you could try to make it wait till the title says NBA LIVE before you expect it by using the protractor.until statments

    browser.wait(protractor.until.titleIs("NBA LIVE"), 5000, "✗ Failed to wait for the NBA LIVE page to load");
    expect(browser.getTitle()).toEqual("NBA LIVE");

EDIT:

Since you are using a local app and using saucelabs then you will need to setup sauce connect