Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 457
MBielski Avatar asked Oct 15 '13 21:10

MBielski


2 Answers

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.

like image 99
preeve Avatar answered Nov 06 '22 12:11

preeve


Try including this in your test file:

browser.ignoreSynchronization = true;

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

like image 41
Mohammad Ibrahim Khan Avatar answered Nov 06 '22 11:11

Mohammad Ibrahim Khan