When angular does not load on initial page, how to select, click element with protractor's element explorer

Question

I can't seem to select element and click them with protractor's element explorer.

e.g.

it('should do ', function(){
    browser.get('localhost:3000/myapp');
    browser.getCurrentUrl().then(val){
        console.log(val);
    }
    var profileIcon = element(by.css('profile-icon'));
    profileIcon.click(); // scenario 1
    profileIcon.isPresent(); // scenario 2
})

it will always return somethign like

There was a webdriver error: UnknownError unknown error: Runtime.evaluate threw
exception: TypeError: Cannot call method 'click' of null
  (Session info: chrome=32.0.1700.76)
  (Driver info: chromedriver=2.8.241075,platform=Windows NT 6.2 x86_64) (WARNING
: The server did not provide any stacktrace information)
Command duration or timeout: 9 milliseconds
Build info: version: '2.39.0', revision: 'ff23eac', time: '2013-12-16 16:11:15'
System info: host: 'Kwik-Desktop', ip: '108.209.248.41', os.name: 'Windows 8', o
s.arch: 'amd64', os.version: '6.2', java.version: '1.7.0_45'

the real prblem here seems to be that angular was not loaded on inital start up, how can I start poking around the buttons and stuff to get to the page where angular come into play via require.js?

Answer 1

If you are running Chrome, try to close the DevTools if you have them open.

For some reason I have been seeing the same error when accessing elements that exist on the page only if the Developer Tools are open.

Answer 2

The element explorer is a tool that will help you to test protractor selectors while you are writing a test.

Julie gave a presentation a couple of days ago and she gives a quick demo. Check this video:

http://www.youtube.com/watch?v=aQipuiTcn3U#t=815