Selenium WebDriver - 處理IFrames

Selenium Webdriver 可用於處理網頁上的 iframe。iframe（稱為內聯框架）基本上是 HTML 5 中包含的 html 標籤。一個iframe 標籤用於在另一個HTML文件中包含 HTML 文件。

HTML 中的 frame 和 iframe 標籤之間存在細微差別。frame 標籤可以將網頁垂直和水平方向分割，而 iframe 標籤用於在另一個 HTML 文件中包含 HTML 文件。但是，從 HTML 5 版本開始，不再使用 frame 概念。

網頁上 iframe 的識別

開啟 Chrome 瀏覽器，右鍵單擊網頁，然後單擊“檢查”按鈕。然後，整個頁面的完整 HTML 程式碼現在就可以訪問了。要調查頁面上的 iframe，請單擊左側向上的箭頭，該箭頭位於可見 HTML 的頂部，如下所示。

一旦我們單擊並將箭頭指向Selenium - Automation Practice Form（在Iframe 1下方），其 HTML 程式碼就可見了，顯示了文字Selenium- Automation Practice Form位於 iframe 標籤名內的事實。

並且文字Selenium- Automation Practice Form出現在標題標籤內（稱為“h1”並用<>括起來）。

<h1>Selenium - Automation Practice Form</h1>

在上面的頁面中，我們將獲取文字Selenium - Automation Practice Form，該文字位於 iframe 內。我們觀察到該文字出現在頁面上的第一個 iframe 內，因此其索引將為 0。

為了訪問 html 中 iframe 標籤內的 web 元素，webdriver 應該能夠首先找到頁面內所有 iframe，然後找到它們內部的專案。為了實現上述目的，我們必須將驅動程式上下文從主瀏覽器切換到內部的 iframe。

在 Selenium 中處理 iframe 的基本方法

下面列出了處理 iframe 的基本過載方法：

switchTo.frame(args)

iframe 索引號作為引數傳遞給方法。iframe 的起始索引為 0。驅動程式切換到傳遞給方法的 iframe 編號。

語法

driver.switchTo.frame(0), switching to the first iframe.

switchTo.frame(args)

iframe id 或名稱作為引數傳遞給方法。驅動程式切換到傳遞給方法的 iframe id 或名稱。

語法

driver.switchTo.frame(“id”), switching to the 
   iframe having id or name value as id.

switchTo.frame("args")

iframe webelement 作為引數傳遞給方法。驅動程式切換到傳遞給方法的 iframe webelement。

語法

driver.switchTo.frame("id"), switching to the 
   iframe having webelement value as id.

driver.switchTo.defaultContent()

將驅動程式上下文從 iframe 切換到主網頁。

示例 1

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;

public class Iframe {
   public static void main(String[] args) throws InterruptedException {
   
      //Initiate the Webdriver
      WebDriver driver = new ChromeDriver();
      
      //adding implicit wait of 12 secs
      driver.manage().timeouts().implicitlyWait(12, TimeUnit.SECONDS);
      
      //Opening the webpage where we will access iframes
      driver.get("https://tutorialspoint.tw/selenium/practice/frames.php");
      
      //switch to an iframe with first iframe index
      driver.switchTo().frame(0) ;
      
      // identify the text inside the iframe and retrieve with getText() 
      String text = driver.findElement(By.tagName("h1")).getText() ;
      System.out.println(" Text is: " + text);
      
      //switch back the driver out of the iframe to the main page
      driver.switchTo().defaultContent();
      
      //quitting the browser
      driver.quit();
   }
}

輸出

Text is: Selenium - Automation Practice Form

Process finished with exit code 0

在上面的示例中，我們已經識別了網頁上可用的 iframe 標籤，並將驅動程式上下文從主頁面切換到該 iframe。一旦實現這一點，我們已經訪問了該 iframe 內可用的文字，控制檯中的訊息為 - 文字為：Selenium - Automation Practice Form。

最後，收到訊息Process finished with exit code 0，表示程式碼已成功執行。

因此，我們能夠在網頁中識別 iframe。除此之外，我們還實現瞭如何使用 Selenium webdriver 中可用的 switchTo 方法將驅動程式的上下文從主頁面切換到 iframe。

示例 2

讓我們以以下頁面為例，其中有兩個 iframe。我們可以透過識別標籤名為 iframe 的元素並將其與 findElements(By.tagname()) 方法一起使用，來計算網頁上 iframe 的總數。這將返回頁面上 iframe 的列表。最後，列表的大小將幫助我們計算 iframe 的總數。

程式碼實現

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.List;
import java.util.concurrent.TimeUnit;

public class CountIframe {
   public static void main(String[] args) throws InterruptedException {

      //Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      //adding implicit wait of 12 secs
      driver.manage().timeouts().implicitlyWait(12, TimeUnit.SECONDS);

      //Opening the webpage where we will access iframes
      driver.get("https://tutorialspoint.tw/selenium/practice/frames.php");

      // count total iframes
      List<WebElement> f = driver.findElements(By.tagName("iframe"));
      int total = f.size();
      System.out.println("Total iframes: " + total);

      //quitting the browser
      driver.quit();
   }
}

輸出

Total iframes: 2

在上面的示例中，我們已經計算了頁面上 iframe 的總數，控制檯中的訊息為 - iframe 總數：2。

結論

這總結了我們關於 Selenium Webdriver 處理 iframe 的教程的全面概述。我們從描述如何在網頁上識別 iframe、Selenium 中處理 iframe 的基本方法開始，並逐步介紹瞭如何使用 Selenium Webdriver 處理 iframe 的示例。這使您能夠深入瞭解 Selenium Webdriver 處理 iframe。明智的做法是不斷練習您學到的知識，並探索與 Selenium 相關的其他知識，以加深您的理解並擴充套件您的視野。

列印頁面