Protractor fails to find Angular

I can't seem to get Protractor to realize that Angular is loaded and running. When it opens Chrome my app loads fully in the browser, so I know that Angular is loaded and running correctly.

The config file:

exports.config = {
seleniumServerJar: 'C:/Dev/PrismWeb/selenium/selenium-server-standalone-2.35.0.jar',

seleniumPort: null,

chromeDriver: 'C:/Dev/PrismWeb/selenium/chromedriver.exe',

seleniumArgs: [],

seleniumAddress: null,

allScriptsTimeout: 110000,

specs: ['c:/dev/prismweb/test/e2e/*.js'],

capabilities: {'browserName': 'chrome'},

baseUrl: 'http://localhost:8080',

rootElement: 'html',

jasmineNodeOpts: {
    onComplete: null,
    isVerbose: true,
    showColors: true,
    includeStackTrace: true,
    defaultTimeoutInterval: 30000
}
};

I've only got one test that I am trying to run and it fails because Protractor can't find Angular.

The Test:

describe('homepage loads: ', function(){
var ptor;

    ptor = protractor.getInstance();

    beforeEach(function(){
        ptor.get('/');
    });

it('should load the prism homepage: ', function(){
    var usernameField = ptor.findElement(protractor.By.id("username"));
    //expect(usernameField).toBeDefined();
});
});

This is the error I get:

UnknownError: javascript error: angular is not defined (Session info: chrome=30.0.1599.69) (Driver info: chromedriver=2.2,platform=Windows NT 6.1 SP1 x86_64) (WARNING: The server did not provide any stacktrace information) Command duration or timeout: 19 milliseconds Build info: version: '2.35.0', revision: 'c916b9d', time: '2013-08-12 15:42:01' System info: os.name: 'Windows 7', os.arch: 'amd64', os.version: '6.1', java.version: '1.7.0_21' Session ID: 1ef7dcd7c5fc9c4e9e1dede050002adf Driver info: org.openqa.selenium.chrome.ChromeDriver Capabilities [{platform=XP, acceptSslCerts=true, javascriptEnabled=true, browserName=chrome, chrome={chromedriverVersion=2.2}, rotatable=false, locationContextEnabled=true, version=30.0.1599.69, cssSelectorsEnabled=true, databaseEnabled=true, handlesAlerts=true, browserConnectionEnabled=false, webStorageEnabled=true, nativeEvents=true, applicationCacheEnabled=false, takesScreenshot=true}]

I've tried moving the ng-app attribute to the body tag (and changing the config accordingly) but I got the same error. We also have an ng-controller attribute on the html tag, and I tried moving that to the body and leaving the ng-app attribute alone on the html tag, but the result was the same. Does anybody have any insight as to why this fails?

EDIT: Just a couple of notes that might help. I've updated the test above to include the manual bootstrapping efforts. The script tags for Angular and all of the modules are located at the bottom of the page, right before the closing BODY tag. The HTML tag still has the ng-app="myApp" attribute plus the ng-controller="baseController" attribute. If I try to bootstrap the app manually in the test, I get the following:

ReferenceError: angular is not defined

One other thing that worries me is that one of the modules we use absolutely needs "$" to be mapped to jQuery, so we map it like this:

<script type="text/javascript">
    var $jq=jQuery.noConflict();
    var $=jQuery.noConflict();
</script>

Where the ng-app is included:

<!DOCTYPE html>
<html ng-app="prismApp" ng-controller="baseController">
<head>

回答1:

I'm not too sure about doing a beforeEach() within a, it() but that aside, have you tried waiting a while? Obviously by this i mean either a ptor.waitForAngular() or a ptor.wait()?

Try a ptor.sleep(10000) after your ptor.get() just to see if it is a timing thing.

Edit: also take a look at the protractor api and how wait() works:

ptor.wait(function () {
  // Return a condition. Code will continue to run once it is true      
}, 10000); // Only do this for 10 seconds

Edit: Try ptor.driver.get('my-page'); instead of ptor.get('my-page');

Edit: Protractor now exposes browser as a global so you can just use browser.get('index.html#/foo') or browser.wait() etc.

回答2:

Try including this in your test file:

browser.ignoreSynchronization = true;

It switches off your test's sync with angular and makes it work.

回答3:

Are you using ng-app to bootstrap your Angular application? Or are you manually bootstrapping your application?

I see that in your configuration file that rootElement is set to 'html'.

By default protractor assumes that the root of the app will be on the body tag. If the <html> tag is not where angular bootstraps in your application, try changing the root element in the config file to where angular first bootstraps(wether it is manually or though using the ng-app directive). This really helps with timing issues, and speeds protractors execution up.