Issues with Protractor and Element Explorer resolving elements on page - angularjs

Question

I am able to run my protractor tests against localhost, but when hitting my in-house test server, I can't get protractor to find elements on the page. The same issues occur with Protractor 1.3.1 and 1.4.0 with the latest Chrome and Firefox drivers.
...AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\atoms\error.js:113
var template = new Error(this.message);
^
Process finished with exit code 1
So I've been trying to use the Element explorer to debug the issue, but it is giving me the following:
> list(by.css('#logindropdown'))
There was a webdriver error: UnknownError unknown error: Runtime.evaluate threw exception: TypeError: Cannot read property 'click' of null
(Session info: chrome=38.0.2125.111)
(Driver info: chromedriver=2.12.301325 (962dea43ddd90e7e4224a03fa3c36a421281abb7),platform=Windows NT 6.1 SP1 x86_64) (WARNING: The server did not provide any stacktrace information)
Command duration or timeout: 28 milliseconds
Build info: version: '2.44.0', revision: '76d78cf', time: '2014-10-23 20:02:37'
System info: host: 'NB2D1469', ip: '158.147.71.49', os.name: 'Windows 7', os.arch: 'amd64', os.version: '6.1', java.version: '1.7.0_67'
Session ID: 85966371ff89f75af8cf7fb5d15f6f23
Driver info: org.openqa.selenium.chrome.ChromeDriver
Capabilities [{platform=XP, acceptSslCerts=true, javascriptEnabled=true, browserName=chrome, chrome={userDataDir=C:\Users\mprent99\AppData\Local\Temp\scoped_dir6488_12276}, rotatable=false, locationContextEnabled=true, mobileEmulationEnabled=false, version=38.0
.2125.111, takesHeapSnapshot=true, cssSelectorsEnabled=true, databaseEnabled=false, handlesAlerts=true, browserConnectionEnabled=false, webStorageEnabled=true, nativeEvents=true, applicationCacheEnabled=false, takesScreenshot=true}]
Simple things like list(by.css('body')) also give the same exception above. Using by.id give the same results, list(by.id('logindropdown'))
Commands that have no results (when they should) seem to avoid the exceptions:
> list(by.css('a .caret'))
[ '' ]
> list(by.css('.caret'))
[ '' ]
In the webdriver-manager terminal, I am seeing the following:
at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
at sun.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:57)
at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)
at java.lang.reflect.Constructor.newInstance(Constructor.java:526)
at org.openqa.selenium.remote.ErrorHandler.createThrowable(ErrorHandler.java:204)
at org.openqa.selenium.remote.ErrorHandler.throwIfResponseFailed(ErrorHandler.java:156)
at org.openqa.selenium.remote.RemoteWebDriver.execute(RemoteWebDriver.java:599)
at org.openqa.selenium.remote.RemoteWebDriver.executeAsyncScript(RemoteWebDriver.java:526)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:57)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:606)
at org.openqa.selenium.support.events.EventFiringWebDriver$2.invoke(EventFiringWebDriver.java:101)
at com.sun.proxy.$Proxy1.executeAsyncScript(Unknown Source)
at org.openqa.selenium.support.events.EventFiringWebDriver.executeAsyncScript(EventFiringWebDriver.java:225)
at org.openqa.selenium.remote.server.handler.ExecuteAsyncScript.call(ExecuteAsyncScript.java:55)
at java.util.concurrent.FutureTask.run(FutureTask.java:262)
at org.openqa.selenium.remote.server.DefaultSession$1.run(DefaultSession.java:168)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1145)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:615)
at java.lang.Thread.run(Thread.java:745)
and
17:05:00.256 INFO - Executing: [execute async script: try { return (function (rootSelector, callback) {
var el = document.querySelector(rootSelector);
try {
if (angular.getTestability) {
angular.getTestability(el).whenStable(callback);
} else {
angular.element(el).injector().get('$browser').
notifyWhenNoOutstandingRequests(callback);
}
} catch (e) {
callback(e);
}
}).apply(this, arguments); }
catch(e) { throw (e instanceof Error) ? e : new Error(e); }, [body]])
17:05:00.562 WARN - Exception thrown
org.openqa.selenium.WebDriverException: unknown error: Runtime.evaluate threw exception: TypeError: Cannot read property 'click' of null
Versions in use:
protractor --version
Version 1.4.0 or Version 1.3.1
node --version
v0.10.30
webdriver-manager status
selenium standalone is up to date
chromedriver is up to date
IEDriver is not present
These same things work just fine in Chrome DevTools:
('.caret')
[<b class=​"caret">​</b>​]
$('a .caret')
[<b class=​"caret">​</b>​]
$('#logindropdown')
[<li id=​"logindropdown" class=​"dropdown ng-scope">​…​</li>​]
$('body')
[<body class=​"vertical-grow">​…​</body>​]
Here is the onPrepare where the failure appears to be happening:
onPrepare: function() {
var username = element(by.model('login.userName'));
var password = element(by.model('login.password'));
browser.driver.get(env.baseUrl);
browser.driver.findElement(by.css('a .caret')).click();
username.sendKeys('user#company.com');
password.sendKeys('password');
browser.driver.findElement(by.css('.btn-primary')).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.
browser.driver.wait(function() {
return browser.driver.getCurrentUrl().then(function(url) {
return (/dashboards/).test(url);
});
}, 5000);
}
Here is the rest of the conf.js:
/*global browser,element,by */
var env = require('./env.js');
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: [
'loginTest.js'
],
suites: {
//smoke: 'spec/smoketests/*.js',
//full: 'spec/*.js'
},
directConnect: false,
multiCapabilities: [
// {browserName: 'firefox'}
{browserName: 'chrome'}
],
maxSessions: -1,
framework: 'jasmine',
// Options to be passed to Jasmine-node.
jasmineNodeOpts: {
// If true, display spec names.
isVerbose: false,
// If true, print colors to the terminal.
showColors: true,
// If true, include stack traces in failures.
includeStackTrace: true,
// Default time to wait in ms before a test fails.
defaultTimeoutInterval: 360000
},
// Selector for the element housing the angular app - this defaults to
// body, but is necessary if ng-app is on a descendant of <body>
rootElement: 'html'
};
How do I debug this farther and get to the root of this issue?