I am currently working on writing protractor tests for our application. One specific challenge I have encountered is dealing with a non-angular page within an angular page as an iframe.
The issue I am facing is that I cannot properly map fields from the non-angular page in my Page Object and use them at the right time in my test specifications.
Some notes to consider:
- I have tried defining the Page Object both as an object (var DamagePage: {}) and as a function (var DamagePage = function() {}). However, neither approach works well in this scenario.
- While calling fields from the non-angular page directly in the spec works without any issues, I prefer to have them organized within the Page Object for better project management.
- I have set browser.driver.ignoreSynchronization = true;
Here is an excerpt from 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(){
browser.driver.switchTo().frame('padIframe');
});
it('Open a zone', function() {
browser.driver.findElement(by.id('30_0_79')).click();
browser.sleep(2000);
});
it('Select a part', function () {
browser.driver.findElement(by.id('32_0_201')).click();
browser.sleep(3000);
});
it('Put I on it with 5 WU', function() {
// Click I
damagePage.leftMenuButtons.I.button.click();
});
And here is my PageObject (defined as a function):
'use strict';
var CaseInterface = require('./CaseInterface.js');
var DamagePage = function() {
// LEFT-SITE MENU BUTTONS
this.leftMenuButtons = {
I: {
button: browser.driver.findElement(by.id('operation-button-I'))
},
E: {
button: element(by.id('operation-button-E')),
mutation: element(by.id('operation-button-mutation-E'))
}
};
};
module.exports = DamagePage;
Everything in the spec works fine until it reaches the 'Put I on it with 5 WU' step. At this point, I encounter an error shortly after starting Protractor:
C:\Users\xxx\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\atoms\error.js:108 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:
This issue stems from using "browser.driver.findElement" syntax in the Page Object. Switching to "element" resolves this initial error, but then another problem arises at the 'Put I on it with 5 WU' step:
Failed: Error while waiting for Protractor to sync with the page: "angular could not be found on the window"