使用 IFrames 和框架

框架現在是一種已棄用的方法，用於從相同網域上的多個文件建構網站佈局。除非您正在使用 HTML5 之前的 Web 應用程式，否則您不太可能使用它們。Iframes 允許插入來自完全不同網域的文件，並且仍然常用。

如果您需要使用框架或 iframes，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 之外沒有按鈕，您可能會收到找不到元素錯誤。發生這種情況是因為 Selenium 只知道頂層文件中的元素。要與按鈕互動，我們需要先切換到框架，方式與我們切換視窗的方式類似。WebDriver 提供了三種切換到框架的方式。以下範例程式碼示範了我們如何使用線上 Web 範例來做到這一點。

使用 WebElement

使用 WebElement 切換是最彈性的選項。您可以使用您偏好的選擇器找到框架並切換到它。

移動程式碼

         //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();
在 GitHub 上檢視完整範例
    # 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();
在 GitHub 上檢視完整範例
    # 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()

使用名稱或 ID

如果您的框架或 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();
在 GitHub 上檢視完整範例
    # 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();
在 GitHub 上檢視完整範例
    # 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()

使用索引

也可以使用框架的索引，例如可以使用 JavaScript 中的 window.frames 查詢到的索引。

移動程式碼

         //switch To IFrame using index
         driver.switchTo().frame(0);
在 GitHub 上檢視完整範例
    # Switch to the second frame
driver.switch_to.frame(1)
  
            //switch To IFrame using index
            driver.SwitchTo().Frame(0);
在 GitHub 上檢視完整範例
// Switches to the second frame
await driver.switchTo().frame(1);
  

// Switches to the second frame
driver.switchTo().frame(1)

離開框架

要離開 iframe 或框架集，請切換回預設內容，如下所示

移動程式碼

         //leave frame
         driver.switchTo().defaultContent();
在 GitHub 上檢視完整範例
    # switch back to default content
driver.switch_to.default_content()
  
            //leave frame
            driver.SwitchTo().DefaultContent();
在 GitHub 上檢視完整範例
    # 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()
上次修改時間為 2024 年 9 月 26 日：為 csharp 新增框架程式碼 (#1961)[部署網站] (71e6c1e2afe)