Protractor: Protractor doesn't work switching from non-angular pages to angular pages

[ayxos]

Currently im trying to convert a non-angular primefaces site to Angular. Im using Protractor for E2E test.

_config file_

var HtmlReporter = require('protractor-html-screenshot-reporter');
exports.config = {
  seleniumAddress: 'http://selenium:4444/wd/hub',
  capabilities: {
    'browserName': 'chrome'
  },
  framework: 'jasmine2',
  rootElement: '#tupm',
  suites: {
      all: ['../specs/demo.js', '../specs/app/wizard.js'],
      demo: ['../specs/demo.js'],
      appWizard: ['../specs/app/wizard.js']
  },
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    onComplete: null,
    isVerbose: true,
    includeStackTrace: true
  },
  params: {
    waitTimeout: 5000,
    user: process.env.E2E_USER,
    password: process.env.E2E_PASSWORD
  },

  onPrepare: function() {
    // Add a screenshot reporter and store screenshots to `/tmp/screnshots`: 
    jasmine.getEnv().addReporter(new HtmlReporter({
       baseDirectory: 'output'
    }));
    var LoginPage = require('../specs/login/login.page.js');
    var loginPage = new LoginPage();
    return loginPage.loginAction();
  }
};

_test_

var SupportPage = require('./support.page.js');

describe('Support', function() {
  browser.get(browser.baseUrl + '/pages/support.xhtml');
  browser.rootEl = 'div#tupm';
  supportPage = new SupportPage();

  it('Email field exists', function() {
    // Find element with {{scopeVar}} syntax.
    element(by.binding('formData.email')).getText().then(function(name) {
      expect(name).toBe('Foo');
    });
  });
});

_HTML_

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="/pages/templates/baseLayout.xhtml">

    <f:metadata>
        <f:viewAction
                action="#{breadCrumbController.createBreadCrumb('SUPPORT')}"/>
    </f:metadata>

    <ui:define name="content">
        <div class="ng-content content-center">
            <div class="form--small dialog" ng-app="smaatoApp" id="tupm">
                <form angular-form="supportController" target='../api/support/v1/support-request' id="supportForm"
                      name="supportForm" class="form" novalidate="novalidate" ng-submit="submit();"
                      ng-class="{responded: responded}">
                    <fieldset class="fieldset">
                        <legend class="legend">Support</legend>
                        <p class="form-description" ng-bind-html="message"/>

                        <div class="form-inner">
                            <label class="label ng-cloak">
                                <span class="label__text">
                                    Email
                                </span>
                                {{formData.email}}
                            </label>
                            <label class="label">
                            <span class="label__text">
                                App
                            </span>
                            <div ng-model="form.appId" name="apps" dropdown="appsDropdown"></div>
                        </label>
                        <label class="label">
                            <span class="label__text">
                                Type of Request *
                            </span>
                            <div ng-model="form.supportRequestType" required="required" name="requestType" dropdown="requestTypeDropdown"></div>
                        </label>
                        <div ng-messages="supportForm.requestType.$error" ng-if='supportForm.$submitted' class="ng-hide-onload" role="alert">
                            <div ng-message="required" class="message-error">{{errMessages.EMPTY}}</div>
                        </div>
                        <label class="label">
                            <span class="label__text">
                                Detailed Description *
                            </span>
                            <textarea class="textarea" ng-model="form.description" required="required" name="description"></textarea>
                        </label>
                        <div ng-messages="supportForm.description.$error" ng-if='supportForm.$submitted' class="ng-hide-onload" role="alert">
                            <div ng-message="required" class="message-error">{{errMessages.EMPTY}}</div>
                        </div>
                        <label class="label">
                            <span class="label__text" />
                            <button type="submit" class="angular-button__submit">Submit</button>
                        </label>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
    </ui:define>
</ui:composition>

Terminal Outpout

[10:21:03] Using gulpfile ~/git/publisher-adserver-portal/spp/Gulpfile.js
[10:21:03] Starting 'protractor'...
Using the selenium server at http://localhost:4444/wd/hub
[launcher] Running 1 instances of WebDriver
Support
  Email field exists - fail


Failures:

  1) Support Email field exists
   Message:
     Error while waiting for Protractor to sync with the page: "angular could not be found on the window"
   Stacktrace:
     undefined

Finished in 0.427 seconds
1 test, 1 assertion, 1 failure

[launcher] 0 instance(s) of WebDriver still running
[launcher] chrome #1 failed 1 test(s)
[launcher] overall: 1 failed spec(s)
[launcher] Process exited with error code 1
ERROR!!
[10:21:10] 'protractor' errored after 6.73 s
[10:21:10] Error in plugin 'gulp-protractor'
Message:
    protractor exited with code 1

Please HELP! i have been trying to fix it reading all documentation but im not able to do it. What am i doing wrong?

[juliemr]

You'll need to turn browser.ignoreSynchronization = true on when you are accessing a non-angular page. We need some better docs on this, which I'll work on adding soon.

[colinkigo]

@juliemr how about when you're trying to navigate away from a non-angular page back to an angular page

[giriibm]

I'm facing same problem :(. My login screen is SSO non-angular page so i have made browser.ignoreSynchronization = true. When I'm in Home page which is angular page I made it browser.ignoreSynchronization = false but Protractor don't know what to do and hangs-up.

[sunainajain]

@giriibm I am facing the same issue
did you find a solution?

[giriibm]

You have to check with your developer or development team. It’s something to do with the angularjs code. I worked with the developer and get it resolved.

[laxmanpagadala]

I used refresh command (driver.Navigate().Refresh();) after setting browser.ignoreSynchronization = false and it worked fine for me.