Use protractor to test login on non-AngularJS page

Question

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 ho

Answer 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(by.id('login_field'))
var passwordInputElm = $('#password'); // same as element(by.id('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');
    expect(loginNameInputElm.waitReady()).toBeTruthy();
    expect(passwordInputElm.waitReady()).toBeTruthy();
});

it('should fill user and password and logins', function() {
    loginNameInputElm.sendKeys(process.env.USERNAME);
    passwordInputElm.sendKeys(process.env.PASSWORD);
    loginBtnElm.click();
});

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

More details of why waitReady here.

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

browser.manage().timeouts().implicitlyWait(5000);

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

expect(loginNameInputElm.isPresent()).toBeTruthy();

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

expect(someNonExistingElm.isPresent()).toBeFalsy();