IFrame と Frame の操作
Frameは、同じドメイン上の複数のドキュメントからサイトレイアウトを構築する非推奨の手段となりました。 HTML5以前のWebアプリを使用している場合を除き、frameを使用することはほとんどありません。 iFrameは、まったく異なるドメインからのドキュメントの挿入を許可し、今でも一般的に使用されています。
FrameまたはiFrameを使用する必要がある場合、Webdriverを使用して同じ方法で作業できます。 iFrame内のボタンがある場合を考えてみましょう。ブラウザー開発ツールを使用して要素を検査すると、次のように表示される場合があります。
<div id="modal">
<iframe id="buttonframe" name="myframe" src="https://seleniumhq.github.io">
<button>Click here</button>
</iframe>
</div>
iFrameがなければ、次のようなボタンを使用してボタンをクリックします。
//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()
ただし、iFrameの外側にボタンがない場合は、代わりにno such elementエラーが発生する可能性があります。 これは、Seleniumがトップレベルのドキュメントの要素のみを認識するために発生します。 ボタンを操作するには、ウィンドウを切り替える方法と同様に、最初にFrameに切り替える必要があります。 WebDriverは、Frameに切り替える3つの方法を提供します。
WebElementを使う
WebElementを使用した切り替えは、最も柔軟なオプションです。好みのセレクタを使用してFrameを見つけ、それに切り替えることができます。
//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(); # Store iframe web element
iframe = driver.find_element(By.CSS_SELECTOR, "#modal > iframe")
# switch to selected iframe
driver.switch_to.frame(iframe)
# Now click on button
driver.find_element(By.TAG_NAME, 'button').click()
//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()
nameまたはIDを使う
FrameまたはiFrameにidまたはname属性がある場合、代わりにこれを使うことができます。 名前またはIDがページ上で一意でない場合、最初に見つかったものに切り替えます。
//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 frame by id
driver.switch_to.frame('buttonframe')
# Now, Click on the button
driver.find_element(By.TAG_NAME, 'button').click()
//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();// 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()
インデックスを使う
JavaScriptの window.frames を使用して照会できるように、Frameのインデックスを使用することもできます。
//switch To IFrame using index
driver.switchTo().frame(0); # Switch to the second frame
driver.switch_to.frame(1)
//switch To IFrame using index
driver.SwitchTo().Frame(0); # switching to second iframe based on index
iframe = driver.find_elements(By.TAG_NAME,'iframe')[1]
# switch to selected iframe
driver.switch_to.frame(iframe)
// Switches to the second frame
await driver.switchTo().frame(1);
// Switches to the second frame
driver.switchTo().frame(1)
Frameを終了する
iFrameまたはFrameセットを終了するには、次のようにデフォルトのコンテンツに切り替えます。
//leave frame
driver.switchTo().defaultContent(); # switch back to default content
driver.switch_to.default_content()
//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()
