user2377585 user2377585 - 1 year ago 114
Javascript Question

PageObjects + non-angular page - how to join them?

I'm writing some protractor tests for our application.
There is one place where is non-angular page as iframe in angular page.

Problem: I'm unable to map fields from non-angular page in Page Object object and use them in right time in my test specs.


  • I tried write Page Object as object (var DamagePage: {}) and as function (var DamagePage = function() {}) too. Both works bad in this situation.

  • Calling fields from non-angular page in spec works obviously fine, but I want to have it in Page Object for correct project organization.

  • I have set browser.driver.ignoreSynchronization = true;

Here is my spec>

'use strict';

var DamagePage = require('../../pages/case/CaseDamagePage.po.js');

describe('Damage selection - ', function() {

var damagePage = new DamagePage();

it('Switch to iFrame',function(){

it('Open a zone', function() {

it('Select a part', function () {

it('Put I on it with 5 WU', function() {
// Click I;

And here is my PageObject (actually as function)>

'use strict';

var CaseInterface = require('./CaseInterface.js');

var DamagePage = function() {

this.leftMenuButtons = {
I: {
button: browser.driver.findElement('operation-button-I'))
E: {
button: element('operation-button-E')),
mutation: element('operation-button-mutation-E'))

module.exports = DamagePage;

In the spec all works fine until it comes to 'Put I on it with 5 WU' step. In this configuration, I got error immediately after protractor start:

var template = new Error(this.message);
NoSuchElementError: no such element: Unable to locate element: {"method":"id","selector":"operation-button-I"}
(Session info: chrome=47.0.2526.106)
(Driver info: chromedriver=2.19.346078 (6f1f0cde889532d48ce8242342d0b84f94b114a1),platform=Windows NT 6.1 SP1 x86_64) (WARNING: The server did not provide any stacktrace information)
Command duration or timeout: 22 milliseconds
For documentation on this error, please visit:

Well, it is thanks to "browser.driver.findElement" syntax in Page Object. When I change it to "element", protractor starts correctly and run until 'Put I on it with 5 WU' step. Here it throws:

Failed: Error while waiting for Protractor to sync with the page: "angular could not be found on the window"

Answer Source

I got error immediately after protractor start

This is because of where you initialize the Page Object - Protractor initializes your Page Object very early, when gathering the specs. You need to initialize the page object inside the beforeEach():

describe('Damage selection - ', function() {
    var damagePage;

    beforeEach(function () {
       damagePage = new DamagePage();

    // ...

Or, directly inside the it():

it('Put I on it with 5 WU', function() {
    var damagePage = new DamagePage();

    // Click I;