title: Mixing Angular & Non Angular Into Page Object Pattern
body: <p>I have a question that is related to the the following link</p>
  
  <p><a href="https://stackoverflow.com/questions/34950589/pageobjects-non-angular-page-how-to-join-them/38787245#38787245">PageObjects + non-angular page - how to join them?</a></p>
  
  <p>However, I do this using protractor-cucumber-framework rather than jasmine. The log in process is the following</p>
  
  <ol>
  <li>Navigate to home page &amp; enter credentials [angular]</li>
  <li>Wait for iFrame pop up [non-angular]</li>
  <li>Continue login process on iFrame [non-angular]</li>
  <li>iFrame disappears and user is returned to home page [angular]</li>
  </ol>
  
  <p>As the four steps listed are part of the logon process ideally I would like to store fields for the angular &amp; non-angular elements in the one page object pattern </p>
  
  <p>My steps are listed below:</p>
  
  <pre><code>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 &lt;EmployerCode&gt; &amp; 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);
  
      })
  
  });
  </code></pre>
  
  <p>And My Page object Pattern is</p>
  
  <pre><code>'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;
  </code></pre>
  
  <p>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</p>
  
  <pre><code>return this.RunNonAngular(function()
  </code></pre>
  
  <p>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) &amp; initializing later? Thanks in advance.</p>