Protractor cannot find angular came from non angular site

Question

In protractor I search for a LinkText Login thats worked fine. I were redirect to the login site (non angular) and type in the username and pw. Clicking the submit button i came back to the first site. Now the Login Button is a Logout button. But protractor cannot see a angular site I only can find the button with selenium indicators.

The spec.js file:

it ('should have a login Button to click', function() {
    loginPage.clickLoginButton();
});

it('should be on idm to login', function() {
    var url = browser.driver.getCurrentUrl();
    expect( url ).toEqual('http://localhost/webapp/login');
});

it('should have access with the given user', function() {
    var idmPage = require('./idmPage.js');
    idmPage.setUsername('bla');
    idmPage.setPassword('secret');
    idmPage.clickSubmitButton();
});

The pageobject.js:

var IdmPage = function() {
var userField =  browser.driver.findElement(by.id('id_login'));
var passwordField = browser.driver.findElement(by.id('id_password'));
var submitButton = browser.driver.findElement(by.id('authentication-button'));

this.setUsername = function(username) {
    userField.sendKeys(username);
};
this.setPassword = function(password) {
    passwordField.sendKeys(password);
};

this.clickSubmitButton = function() {
    submitButton.click();
}; };  module.exports = new IdmPage();

The conf.js

'use strict';

var baseDir = 'test/e2e'; exports.config = {

// The adress of a runnung selenium server.
seleniumAddress: 'http://localhost:4444/wd/hub',

//Capabilities to be passed to the webdirver instance.
capabilities: {
    browserName: 'chrome'
},

//Spec patterns are relative to the current working directly when protractor is called

suites: {
    login: baseDir + '/login/**/*_spec.js',
    content: [baseDir + '/content/*_spec.js']
},

//Options to be passed to Jasmine-node
jasmineNodeOpts: {
    onComplete: null,
    isVerbose: true,
    showColors: true,
    includeStackTrace: false,
    defaultTimeoutInterval: 11000
}

};

Answer 1

You may want to make sure that protractor is actually waiting for your inputs to load when switching between non-angular and angular pages. So did you try using a browser.sleep() or browser.wait() after clicking the submit button? You should set browser.ignoreSynchronization = true; when testing non-angular pages. What is browser.ignoreSynchronization in protractor?

UPDATE:

browser.ignoreSynchronization = true;
this.clickLogoutButton = function(){
    browser.wait(function(){
        return loginButton.isPresent();
    }, 10000).then(function(){
        loginButton.click();
    });
}

this way your test will wait a maximum of 10 seconds before the test times out. You can update this depending on how long it should take at maximum before the button would appear clickable. This is how i deal with testing my non-angular web-pages. I hope this works for you