Locating elements of non angular iframe using protractor's switchTo - angularjs

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

As discussed, the issue that you are facing is because the iframe that you are switching to is non-angular. Thus, element(by.id) will not work after you switch to that iframe. Instead, findElement needs to be used!

Answer 2

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')));

Answer 3

I found a solution but I still wait for an explanation from the angular team, because I don't understand why using element fails but using the driver directly succeed. Here is the code that works (I included the suggestion from #Sakshi even thought it doesn't change the result) :
browser.switchTo().frame(element(by.id('iframeHarvest')));
browser.driver.findElement(by.id('email')).sendKeys(browser.params.harvestLogins.user);
edit : here is the protractor subject https://github.com/angular/protractor/issues/1465