Use protractor to test login on non-AngularJS page

All we need is an easy explanation of the problem, so here it is.

I have an AngularJS app which authenticates using oAuth SSO at GitHub. I am trying to figure out a way to use protractor and automate the login tests. I cannot figure out how to retrieve a non-angular field and how to manage wait’ing for the page to load with browser.driver, My spec looks like this:

// Create a repository                                                                                                                     
describe('login', function() {

  it('should login', function() {
      // this issues a redirect to GitHub
      browser.driver.get( process.env.HOST + '/auth/github' ) 
      browser.sleep( 4000 ); // Sleep to make sure page loads fully..                                                                      
      // browser.debugger(); // tried to use debugger...                                                                                   
      var login = element( "login_field" ) );
      login.sendKeys( process.env.USERNAME );
      var password = element( "password" ) );
      password.sendKeys( process.env.PASSWORD )

I run the command like this:

HOST= USERNAME=foobar PASSWORD=barfoo protractor config/protractor.conf 

How can I properly load the authenticate page, enter the correct information into the fields, and then wait for redirection back into my Angularized application (I can handle things from there).

I tried to use the debugger to jump into this code, but it was not intuitive for me. When the debugger blocked, I did not seem to be inside my code, but inside of cli.js. If I hit ‘c’ then my script continued all the way to execution and failed without blocking further. Am I misunderstanding where to use the debugger command inside my script? And, from the Chrome inspector I hoped to to use window.clientSideScripts.findInputs but was thwarted there as well; these seem to be for AngularJS elements, not elements which are not angularized.

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Testing non-angular pages with Protractor can be tricky regarding waiting for stuff.

I suggest you upgrade Protractor to latest (1.5.0 as of now), use a custom function waitReady() that browser.wait for elements ready and rewrite your test like below.

// TODO: use page objects
var loginNameInputElm = $('#login_field'); // or element('login_field'))
var passwordInputElm = $('#password'); // same as element('password'))
var loginBtnElm = $('button[type=submit]');

it('non-angular page so ignore sync and active wait to load', function() {
    browser.ignoreSynchronization = true;
    browser.get(process.env.HOST + '/auth/github');

it('should fill user and password and logins', function() {

it('restores ignore sync when switching back to angular pages', function() {
    browser.ignoreSynchronization = false; // restore

More details of why waitReady here.

Note: in the past I’ve suggested setting a high implicit, e.g.


That hack allows to you avoid waitReady and keep using the standard


But has an ugly disadvantage when testing for elements NOT present, i.e. when testing for absent or non visible elements in which case it will wait 5 seconds (5000ms) in vane, e.g. when doing


Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply