Working with IFrames and frames
Frames são um meio obsoleto de construir um layout de site a partir de vários documentos no mesmo domínio. É improvável que você trabalhe com eles a menos que você esteja trabalhando com um webapp pré-HTML5. Iframes permitem a inserção de um documento de um domínio totalmente diferente, e são ainda comumente usado.
Se você precisa trabalhar com frames ou iframes, o WebDriver permite que você trabalhe com eles da mesma maneira. Considere um botão dentro de um iframe. Se inspecionarmos o elemento usando as ferramentas de desenvolvimento do navegador, podemos ver o seguinte:
<div id="modal">
<iframe id="buttonframe" name="myframe" src="https://seleniumhq.github.io">
<button>Click here</button>
</iframe>
</div>
Se não fosse pelo iframe, esperaríamos clicar no botão usando algo como:
//This won't work
driver.findElement(By.tagName("button")).click();
# This Wont work
driver.find_element(By.TAG_NAME, 'button').click()
//This won't work
driver.FindElement(By.TagName("button")).Click();
# This won't work
driver.find_element(:tag_name,'button').click
// This won't work
await driver.findElement(By.css('button')).click();
//This won't work
driver.findElement(By.tagName("button")).click()
No entanto, se não houver botões fora do iframe, você pode em vez disso, obter um erro no such element. Isso acontece porque o Selenium é ciente apenas dos elementos no documento de nível superior. Para interagir com o botão, precisamos primeiro mudar para o quadro, de forma semelhante a como alternamos janelas. WebDriver oferece três maneiras de mudar para um frame.
Usando um WebElement
Alternar usando um WebElement é a opção mais flexível. Você pode encontrar o quadro usando seu seletor preferido e mudar para ele.
//switch To IFrame using Web Element
WebElement iframe = driver.findElement(By.id("iframe1"));
//Switch to the frame
driver.switchTo().frame(iframe);
assertEquals(true, driver.getPageSource().contains("We Leave From Here"));
//Now we can type text into email field
WebElement emailE= driver.findElement(By.id("email"));
emailE.sendKeys("admin@selenium.dev");
emailE.clear();# --- Switch to iframe using WebElement ---
iframe = driver.find_element(By.ID, "iframe1")
driver.switch_to.frame(iframe)
assert "We Leave From Here" in driver.page_source
email_element = driver.find_element(By.ID, "email")
email_element.send_keys("admin@selenium.dev")
email_element.clear()
driver.switch_to.default_content() //switch To IFrame using Web Element
IWebElement iframe = driver.FindElement(By.Id("iframe1"));
//Switch to the frame
driver.SwitchTo().Frame(iframe);
Assert.AreEqual(true, driver.PageSource.Contains("We Leave From Here"));
//Now we can type text into email field
IWebElement emailE = driver.FindElement(By.Id("email"));
emailE.SendKeys("admin@selenium.dev");
emailE.Clear(); # Store iframe web element
iframe = driver.find_element(:css,'#modal > iframe')
# Switch to the frame
driver.switch_to.frame iframe
# Now, Click on the button
driver.find_element(:tag_name,'button').click
// Store the web element
const iframe = driver.findElement(By.css('#modal > iframe'));
// Switch to the frame
await driver.switchTo().frame(iframe);
// Now we can click the button
await driver.findElement(By.css('button')).click();
//Store the web element
val iframe = driver.findElement(By.cssSelector("#modal>iframe"))
//Switch to the frame
driver.switchTo().frame(iframe)
//Now we can click the button
driver.findElement(By.tagName("button")).click()
Usando um name ou ID
Se o seu frame ou iframe tiver um atributo id ou name, ele pode ser usado alternativamente. Se o name ou ID não for exclusivo na página, o primeiro encontrado será utilizado.
//switch To IFrame using name or id
driver.findElement(By.name("iframe1-name"));
//Switch to the frame
driver.switchTo().frame(iframe);
assertEquals(true, driver.getPageSource().contains("We Leave From Here"));
WebElement email=driver.findElement(By.id("email"));
//Now we can type text into email field
email.sendKeys("admin@selenium.dev");
email.clear();# --- Switch to iframe using name or ID ---
iframe1=driver.find_element(By.NAME, "iframe1-name") # (This line doesn't switch, just locates)
driver.switch_to.frame(iframe)
assert "We Leave From Here" in driver.page_source
email = driver.find_element(By.ID, "email")
email.send_keys("admin@selenium.dev")
email.clear()
driver.switch_to.default_content() //switch To IFrame using name or id
driver.FindElement(By.Name("iframe1-name"));
//Switch to the frame
driver.SwitchTo().Frame(iframe);
Assert.AreEqual(true, driver.PageSource.Contains("We Leave From Here"));
IWebElement email = driver.FindElement(By.Id("email"));
//Now we can type text into email field
email.SendKeys("admin@selenium.dev");
email.Clear(); # Switch by ID
driver.switch_to.frame 'buttonframe'
# Now, Click on the button
driver.find_element(:tag_name,'button').click
// Using the ID
await driver.switchTo().frame('buttonframe');
// Or using the name instead
await driver.switchTo().frame('myframe');
// Now we can click the button
await driver.findElement(By.css('button')).click();
//Using the ID
driver.switchTo().frame("buttonframe")
//Or using the name instead
driver.switchTo().frame("myframe")
//Now we can click the button
driver.findElement(By.tagName("button")).click()
Usando um índice
Também é possível usar o índice do frame, podendo ser consultado usando window.frames em JavaScript.
//switch To IFrame using index
driver.switchTo().frame(0);driver.switch_to.frame(0)
assert "We Leave From Here" in driver.page_source# Switch to the second frame
driver.switch_to.frame(1) //switch To IFrame using index
driver.SwitchTo().Frame(0);// Switches to the second frame
await driver.switchTo().frame(1);// Switches to the second frame
driver.switchTo().frame(1)Deixando um frame
Para deixar um iframe ou frameset, volte para o conteúdo padrão como a seguir:
//leave frame
driver.switchTo().defaultContent();driver.switch_to.default_content()
assert "This page has iframes" in driver.page_source //leave frame
driver.SwitchTo().DefaultContent();# Return to the top level
driver.switch_to.default_content// Return to the top level
await driver.switchTo().defaultContent();// Return to the top level
driver.switchTo().defaultContent()
