Protractor: Testing non-Angular App in an Iframe

Question

I'm writing e2e tests for my non-angular app, using protractor Version 3.3.0. My app loads another non-Angular App inside an iframe, and i'm trying to write tests to the iframed-in with Protractor.

I tried the above, using browser.driver.ignoreSynchronization = true:

1.

 var EC = protractor.ExpectedConditions;
 var button = $("div[automation-id='homescreen']")
 var isClickable = EC.elementToBeClickable(button);

 browser.wait(isClickable, 50000).then(function(){
      browser.driver.sleep(500);
      button.click();
 }) 

Received the error "Failed: unknown error: Element is not clickable at point (326, 624)..."

2.

var loc = by.id('myFrame');
el = browser.driver.findElement(loc)
browser.driver.switchTo().frame(el);

Received the error "Failed: no such element: Unable to locate element: {"method":"css selector","selector":"*[id="myFrame"]"}"

even thought el was retrieved successfully..

3.

browser.driver.switchTo().frame(0);

tried with index 1 and received "Failed: no such frame.." error

4.

browser.driver.getAllWindowHandles()

Received only one window...

Answer 1

If this is the only iframe on the page, the option 3 looks promising. I'd just wait for the iframe to be present before switching to it:

// wait for the frame to be present
var EC = protractor.ExpectedConditions;
browser.wait(EC.presenceOf(element(by.tagName("iframe"))), 5000);

// switch to frame
browser.driver.switchTo().frame(0);

Answer 2

To Switch to Iframe

For Non Angular Page

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

browser.driver.switchTo().frame("Frame id or classname");

Answer 3

Please try this following code, iframe doesn't belong to angular app

browser.ignoreSynchronization = true;
return browser.switchTo().frame(iFrameEle.getWebElement())
            .then(function(){
                // in the iframe..

            })
            .then(function(){
                // restore sync for angular
                browser.ignoreSynchronization = false;
                return browser.switchTo().defaultContent();
            });

Answer 4

var elem = element(by.xpath('.//div[contains(@id,\'contents\') and contains(@id,\'cke\')]/iframe'));
        browser.sleep(3000);
        elem.click();
        browser.switchTo().frame(elem.getWebElement());
        browser.sleep(3000);
        element(by.tagName('body')).sendKeys('test'); // entering text on iframe 
        browser.switchTo().defaultContent();
        browser.sleep(3000);

I used the above code for in my application and its working. Hope it helps you. I am first clicking on iframe and then shifting focus to it.

Note: When i give sleep time then only its working.