Switching to iframe using Protractor

Question

Anyone have experience/guidance on switching to an iFrame using Protractor? The iFrame opens and I have a wait for a specific button on top of the iFrame that is a separate module but cannot get focus in the iframe itself.

I have tried using browser.switchTo().frame(0); with no luck. The line below is what I would need to target, I assume. Within the iFrame a editor opens where text needs to be modified. <iframe style="height:100%;width:100%;min-width:1024px;border:0px;background-color: #32373A" onmousewheel="" src="https://app.getbee.io/v18.01.10.0914/index.html"></iframe>

Answer 1

If you haven't already, refer to Steve's answer on this question. I have not modified the original code he posted. All credits to him.

var driver = browser.driver;
var loc = by.tagName('iframe');
var el = driver.findElement(loc);
browser.switchTo().frame(el);

driver.findElement(by.tagName('body')).sendKeys('my test string');

browser.switchTo().defaultContent();
browser.waitForAngular();

This is what worked for me while working with iframes in Protractor.

Answer 2

Ended up fixing by having dev implement an ID on the iframe.

Answer 3

You can use also css-selector or Xpath to find the iframe element although this could be resolved by adding ID attribute. This way we won't need to approach development team to add ID attributes.

However, following are some approaches that you can follow to switch frames using protractor.

1st approach: driver.switchTo().frame(driver.findElement(protractor.By.cssselector('css-selector')));

Once you perform the required action on this frame. Please run following code to come out of the iframe: driver.switchTo().defaultContent();

2nd approach: Create a function named SwitchToFrame(By by) and have this code under that function 'driver.switchTo().frame(driver.findElement(protractor.By.cssselector('css-selector')));'.

In this way, you can call the 'SwitchToFrame(By by)' function every time you want to switch to the frame by providing the required By argument.

Put this method in root file so that you can access in child pages as well:

function SwitchToFrame(By by) {     driver.switchTo().frame(driver.findElement(protractor.By.cssselector('css-selector'))); } 

function SwitchToDefaultContent()

{  
 driver.switchTo().defaultContent();
}

We are using above approaches in our frameworks in automation testing company