I have a question that is related to the the following link
PageObjects + non-angular page - how to join them?
However, I do this using protractor-cucumber-framework rather than jasmine. The log in process is the following
- Navigate to home page & enter credentials [angular]
- Wait for iFrame pop up [non-angular]
- Continue login process on iFrame [non-angular]
- iFrame disappears and user is returned to home page [angular]
As the four steps listed are part of the logon process ideally I would like to store fields for the angular & non-angular elements in the one page object pattern
My steps are listed below:
this.Given(/^A User Navigates To The (.+)$/, {timeout: 60 * 1000}, function (AcaExternalLoginPage)
{
//1. Navigate To Webpage
return Page = new Page();
});
this.When(/^Employer Code (.+) Is Entered And User Logs On$/, {timeout: 20 * 1000}, function (EmployerCode)
{
//1. Enter <EmployerCode> & Press Login In Button
return Page.EmployerEnterCodeAndLogin(EmployerCode);
});
this.Then(/^The Browser Title Should Equal (.+) And The Popup Frame Should Display (.+)$/, {timeout: 20 * 1000}, function (BrowserTitle, PopupFrameGreeting)
{
var World = this;
//1. Expect Browser Title To Equal Passed In Value
expect(browser.getTitle()).to.eventually.equal(BrowserTitle);
return this.RunNonAngular(function()
{
expect(browser.isElementPresent(Page.EmployerSssiFrame)).to.eventually.equal(true);
Page.SwitchToEmployerSssiFrame;
expect(Page.EmployerSssDynamicPromptLabel).to.eventually.equal(true);
//2. Pop up Frame To Equal Passed In Value
/expect(Page.TextEmployerSssDynamicPromptLabel).to.eventually.equal(PopupFrameGreeting);
})
});
And My Page object Pattern is
'use strict';
var Page = function ()
{
var baseUrl = 'http://172.16.87.185:54810/';
browser.get(baseUrl + 'login');
};
Page.prototype = Object.create({},
{
//1: Element Locators
EmployerNameCodeTextBox:
{
get: function ()
{
return element(by.id('employee-code'));
}
},
EmployerLoginButton:
{
get: function ()
{
return element(by.buttonText('Login'));
}
},
EmployerSssiFrame:
{
get: function ()
{
return element(by.id('fbContent'));
}
},
EmployerSssDynamicPromptLabel:
{
get: function ()
{
return element(by.id('lblRequestActionText'));
}
},
//2. Actions|Events
EmployerEnterCodeAndLogin:
{
value: function (EmployerNameCode)
{
this.EmployerNameCodeTextBox.sendKeys(EmployerNameCode);
this.EmployerLoginButton.click();
}
},
SwitchToEmployerSssiFrame:
{
value: function ()
{
//Need to switch this way because of issue https://github.com/angular/protractor/issues/1846
browser.switchTo().frame(this.EmployerSssiFrame.getWebElement());
}
},
//3. Static Text Retrieval
TextEmployerSssDynamicPromptLabel:
{
get: function ()
{
return this.EmployerSssDynamicPromptLabel.getText();
}
}
});
module.exports = Page;
Ideally I would like to keep the page objects on the one page as they are all part of the login process. When it gets to block
return this.RunNonAngular(function()
it timeouts as it is unable to find the iframe. Any suggestions on how to circumvent this? Maybe storing iFrame elements in another page (although this isn't ideal) & initializing later? Thanks in advance.
