Locating elements of non angular iframe using protractor's switchTo

Question

I have an angularjs app containing an iframe that display the page allowing to log into another website. I am trying to put some value in the fields contained in the iframe but I can't find the elements using any locator.

Here is my test :

describe("Harvest", function() {

  beforeEach(function () {

browser.get('http://localhost:8110/');

expect(browser.getCurrentUrl()).toMatch('_*#/login$');

element(by.model('user.username')).sendKeys('sam');
element(by.model('user.password')).sendKeys('pass');

element(by.id('bt_signin')).click();

  });

  afterEach(function () {
    browser.executeScript('window.sessionStorage.clear();');
  });

  describe('A user', function () {

beforeEach(function () {
  browser.get('http://localhost:8110/');
});

it('should be able to obtain an access token from harvest', function () {
  expect(browser.getCurrentUrl()).toMatch('_*#/home$');

  //Display and close the window
  element(by.id('btHarvest')).click();

  expect(element(by.id('modalHarvest')).isPresent()).toBe(true);

  element(by.id('btCloseModal')).click();

  expect(element(by.id('modalHarvest')).isPresent()).toBe(false);

  //Authenticate into harvest
  element(by.id('btHarvest')).click();

  expect(element(by.id('modalHarvest')).isPresent()).toBe(true);

  browser.switchTo().frame('iframeHarvest');

  //It fails here with a null exceptions, guess it can't find it
  element(by.id('email')).sendKeys(browser.params.harvestLogins.user);
  element(by.id('user_password')).sendKeys(browser.params.harvestLogins.password);
  element(by.id('sign-in-button')).click();

  expect(element(by.name('commit')).isPresent()).toBe(true);

  browser.driver.switchTo().defaultContent();



});

});

});

And here is the exception generated

1) Harvest A user should be able to obtain an access token from harvest
   Message:
     [31mError: Error while waiting for Protractor to sync with the page: {}[0m
   Stacktrace:
     Error: Error while waiting for Protractor to sync with the page: {}
    at Error (<anonymous>)
==== async task ====
WebDriver.executeScript()
    at null.<anonymous> (/Users/samdurand/workspace/cake/subbie/src/test/web/js/features/harvest.js:45:22)
==== async task ====
Asynchronous test function: it()
Error
    at null.<anonymous> (/Users/samdurand/workspace/cake/subbie/src/test/web/js/features/harvest.js:26:5)
    at null.<anonymous> (/Users/samdurand/workspace/cake/subbie/src/test/web/js/features/harvest.js:20:3)
    at Object.<anonymous> (/Users/samdurand/workspace/cake/subbie/src/test/web/js/features/harvest.js:1:63)

After correcting the iframe call as suggested I get this error :

1) Projects A user is possible to create a project based on harvest data
   Message:
     [31mError: Error while waiting for Protractor to sync with the page: {}[0m
   Stacktrace:
     Error: Error while waiting for Protractor to sync with the page: {}
    at Error (<anonymous>)

Answer 1

Since yours is an Angular Application, could you please try using:

browser.switchTo().frame('iframeHarvest');

instead of:

browser.driver.switchTo().frame(element(by.id('iframeHarvest')));