在 Selenium Webdriver 中處理 iFrame：switchTo（） · Guru99 中文系列教程

# 在 Selenium Webdriver 中處理 iFrame：switchTo（） > 原文： [https://www.guru99.com/handling-iframes-selenium.html](https://www.guru99.com/handling-iframes-selenium.html) ### 什么是 iframe？ IFrame 是嵌入在另一個網頁中的網頁或嵌入在另一個 HTML 文檔中的 HTML 文檔。 IFrame 通常用于將來自其他來源的內容（例如廣告）插入 Web 頁面。 < **iframe** >標簽指定一個內聯框架。在本教程中，您將學習- 1. [如何識別 iframe：](#1) 2. [如何使用 Web 驅動程序命令切換 iframe 中的元素：](#2) 3. [嵌套框架（框架內的框架）的概念：](#3) ## 如何識別 iframe：我們僅通過查看頁面或檢查 Firebug 就無法檢測到框架。觀察下圖，顯示的廣告是 iframe，我們僅通過使用 Firebug 進行檢查就無法找到或識別該廣告。因此，問題是如何識別 iframe？ ![Handling iFrames in Selenium Webdriver](https://img.kancloud.cn/0b/b5/0bb50df6457a7cd2c7bcd059f21464b0_776x357.png "Handling Iframes in Selenium") 我們可以使用以下給出的方法識別 iframe： * 右鍵單擊該元素，如果找到“此框架”之類的選項，則為 iframe。（請參見上圖） * 右鍵單擊頁面，然后單擊“查看頁面源代碼”，然后使用“ iframe”進行搜索，如果您可以找到帶有“ iframe”的任何標簽名稱，則表示該頁面包含一個 iframe。在上圖中，您可以在右鍵單擊時看到' **This Frame** '選項，因此我們現在確定它是 iframe。通過使用以下代碼段，我們甚至可以識別 iframe 的總數。 ``` Int size = driver.findElements(By.tagName("iframe")).size(); ``` ## 如何使用 Web 驅動程序命令切換 iframe 中的元素：基本上，我們可以使用 3 種方式切換幀中的元素。 * **按索引** * **按名稱或 ID** * **通過網絡元素** **按索引切換到幀：** 索引是 Iframe 的屬性之一，通過它我們可以切換到它。 iframe 的索引以“ 0”開頭。假設頁面中有 100 幀，我們可以使用索引切換到 iframe。 * driver.switchTo（）。frame（0）; * driver.switchTo（）。frame（1）; **通過名稱或 ID 切換到幀：** 名稱和 ID 是 iframe 的屬性，通過它們我們可以切換到它。 * driver.switchTo（）。frame（“ iframe1”）; * driver.switchTo（）。frame（“元素的 id”）; **通過 ID 切換到 iframe 的示例：** 讓我們以下圖所示的 iframe 顯示為例。我們的要求是點擊 iframe。我們可以通過以下網址訪問此 iframe： [http://demo.guru99.com/test/guru99home/](http://demo.guru99.com/test/guru99home/) ![Handling iFrames in Selenium Webdriver](https://img.kancloud.cn/62/fc/62fcfdab96e464120588873c0a655cf1_793x181.png "Handling Iframes in Selenium") 由于它是 iframe，因此無法直接通過 [XPath](/xpath-selenium.html) 單擊 iframe。首先，我們必須切換到框架，然后才能使用 xpath 單擊。 **步驟 1）** ``` WebDriver driver = new FirefoxDriver(); driver.get("http://demo.guru99.com/test/guru99home/"); driver.manage().window().maximize(); ``` * 我們初始化 Firefox 驅動程序。 * 導航到包含 iframe 的“ guru99”網站。 * 最大化窗口。 **步驟 2）** ``` driver.switchTo().frame("a077aa5e"); ``` * 在這一步中，我們需要通過 Firebug 進行檢查以找出 iframe 的 ID。 * 然后通過 ID 切換到 iframe。 **步驟 3）** ``` driver.findElement(By.xpath("html/body/a/img")).click(); ``` * 在這里，我們需要找出要單擊的元素的 xpath。 * 單擊上面顯示的使用 Web 驅動程序命令的元素。這是完整的代碼： ``` public class SwitchToFrame_ID { public static void main(String[] args) { WebDriver driver = new FirefoxDriver(); //navigates to the Browser driver.get("http://demo.guru99.com/test/guru99home/"); // navigates to the page consisting an iframe driver.manage().window().maximize(); driver.switchTo().frame("a077aa5e"); //switching the frame by ID System.out.println("********We are switch to the iframe*******"); driver.findElement(By.xpath("html/body/a/img")).click(); //Clicks the iframe System.out.println("*********We are done***************"); } } ``` **輸出：** 瀏覽器導航到包含上述 iframe 的頁面，然后單擊 iframe。 **通過 Web 元素切換到框架：** 我們甚至可以使用 web element 切換到 iframe。 * driver.switchTo（）。frame（WebElement）; **如何切換回主機** 我們必須走出 iframe。要移回父框架，可以使用 switchTo（）。parentFrame（）；如果要返回到主框架（或大多數父框架），則可以使用 switchTo（）。defaultContent（）;。 ``` driver.switchTo().parentFrame(); driver.switchTo().defaultContent(); ``` **如果我們無法使用 ID 或 Web 元素進行切換，如何切換框架：** 假設頁面中有 100 個框架，并且沒有可用的 ID，在這種情況下，我們只是不知道從哪個 iframe 加載了必需的元素（這種情況是我們不知道框架的索引的情況也）。解決上述問題的方法是，我們必須找到通過其加載元素的 iframe 的索引，然后我們需要通過該索引切換到 iframe。以下是使用下面的代碼段查找用于加載元素的幀的索引的步驟 **Step 1)** ``` WebDriver driver = new FirefoxDriver(); driver.get("http://demo.guru99.com/test/guru99home/"); driver.manage().window().maximize(); ``` * 初始化 Firefox 驅動程序。 * 導航到包含 iframe 的“ guru99”網站。 * 最大化窗口。 **Step 2)** ``` int size = driver.findElements(By.tagName("iframe")).size(); ``` * 上面的代碼使用標記名“ iframe”查找頁面內存在的 iframe 總數。 **Step 3)** 的目標是找出 iframe 的索引。 ``` for(int i=0; i<=size; i++){ driver.switchTo().frame(i); int total=driver.findElements(By.xpath("html/body/a/img")).size(); System.out.println(total); driver.switchTo().defaultContent();} ``` 在“ forloop”上方，迭代頁面中的所有 iframe，如果找到所需的 iframe，則打印“ 1”，否則返回“ 0”。 **這是直到步驟 3 的完整代碼：** ``` public class IndexOfIframe { public static void main(String[] args) { WebDriver driver = new FirefoxDriver(); driver.get("http://demo.guru99.com/test/guru99home/"); driver.manage().window().maximize(); //driver.manage().timeouts().implicitlyWait(100, TimeUnit.SECONDS); int size = driver.findElements(By.tagName("iframe")).size(); for(int i=0; i<=size; i++){ driver.switchTo().frame(i); int total=driver.findElements(By.xpath("html/body/a/img")).size(); System.out.println(total); driver.switchTo().defaultContent();}}} ``` **執行此程序，輸出如下：** **Output:** ``` 1 0 0 0 0 0 ``` Verify the output, you can find the series of 0's and 1's. * 無論在哪里找到輸出中的“ 1”，即裝入元素的幀的索引。 * 如果在第 1 個 <sup>st</sup> 位置找到 1，則 iframe 的索引以'0'開頭，因此索引為 0。 * 如果在<sup>和</sup>位置中找到三分之一，則索引為 2。 We can comment out the for loop, once we found the index. **Step 4)** ``` driver.switchTo().frame(0); ``` * 找到元素的索引后，就可以使用上述命令切換框架。 * driver.switchTo（）。frame（從步驟 3 中找到的索引）; **Step 5)** ``` driver.findElement(By.xpath("html/body/a/img")).click(); ``` * 上面的代碼將單擊 iframe 或 iframe 中的元素。 So the complete code would be like below: ``` public class SwitchToframe { public static void main(String[] args) throws NoSuchElementException{ WebDriver driver = new FirefoxDriver(); driver.get("http://demo.guru99.com/test/guru99home/"); driver.manage().window().maximize(); //int size = driver.findElements(By.tagName("iframe")).size(); /*for(int i=0; i<=size; i++){ driver.switchTo().frame(i); int total=driver.findElements(By.xpath("html/body/a/img")).size(); System.out.println(total); driver.switchTo().defaultContent(); //switching back from the iframe }*/ //Commented the code for finding the index of the element driver.switchTo().frame(0); //Switching to the frame System.out.println("********We are switched to the iframe*******"); driver.findElement(By.xpath("html/body/a/img")).click(); //Clicking the element in line with Advertisement System.out.println("*********We are done***************"); } } ``` **Output:** Browser navigates to the page consisting the above iframe and clicks on the iframe. ## 嵌套框架（框架內的框架）的概念： Let's assume that there are two frames one inside other like shown in below image and our requirement is printing the text in the outer frame and inner frame. In the case of nested frames, * 首先，我們必須通過 iframe 的索引或 ID 切換到外部框架 * 切換到外部框架后，我們可以找到外部框架中 iframe 的總數，并且 * 我們可以通過任何已知方法切換到內部框架。 While exiting out of the frame, we must exit out in the same order as we entered into it from the inner frame first and then outer frame. ![Handling iFrames in Selenium Webdriver](https://img.kancloud.cn/ca/3a/ca3afbcd58ae12aa37cc017e582e28a7_456x332.png "Handling Iframes in Selenium") 上面的嵌套框架的 HTML 代碼如下所示。 ![Handling iFrames in Selenium Webdriver](https://img.kancloud.cn/cd/5a/cd5adc0895094b78b94aec78078c82ff_550x176.png "Handling Iframes in Selenium") 上面的 HTML 代碼清楚地說明了另一個 iframe 標簽中的 iframe 標簽（以綠色突出顯示），表明存在嵌套的 iframe。以下是切換到外框并在外框上打印文本的步驟：**步驟 1）** ``` WebDriver driver=new FirefoxDriver(); driver.get("Url"); driver.manage().window().maximize(); driver.manage().timeouts().implicitlyWait(2, TimeUnit.SECONDS); int size = driver.findElements(By.tagName("iframe")).size(); System.out.println("Total Frames --" + size); // prints the total number of frames driver.switchTo().frame(0); // Switching the Outer Frame System.out.println (driver.findElement(By.xpath("xpath of the outer element ")).getText()); ``` * 切換到外部框架。 * 在外框上打印文本。切換到外部框架后，我們應該知道外部框架內部是否存在任何內部框架 **Step 2)** ``` size = driver.findElements(By.tagName("iframe")).size(); // prints the total number of frames inside outer frame System.out.println("Total Frames --" + size); ``` * 查找外部框架內的 iframe 總數。 * 如果發現大小為“ 0”，則說明框架內部沒有內部框架。 **Step 3)** ``` driver.switchTo().frame(0); // Switching to innerframe System.out.println(driver.findElement(By.xpath("xpath of the inner element ")).getText()); ``` * 切換到內框 * 在內部框架上打印文本。 **Here is the complete code:** ``` public class FramesInsideFrames { public static void main(String[] args) { WebDriver driver=new FirefoxDriver(); driver.get("Url"); driver.manage().window().maximize(); driver.manage().timeouts().implicitlyWait(2, TimeUnit.SECONDS); int size = driver.findElements(By.tagName("iframe")).size(); System.out.println("Total Frames --" + size); // prints the total number of frames driver.switchTo().frame(0); // Switching the Outer Frame System.out.println (driver.findElement(By.xpath("xpath of the outer element ")).getText()); //Printing the text in outer frame size = driver.findElements(By.tagName("iframe")).size(); // prints the total number of frames inside outer frame System.out.println("Total Frames --" + size); driver.switchTo().frame(0); // Switching to innerframe System.out.println(driver.findElement(By.xpath("xpath of the inner element ")).getText()); //Printing the text in inner frame driver.switchTo().defaultContent(); } } ``` **Output**: The output of the above code would print the text in the Inner frame and Outer frame.