自动化UI测试Selenium Webdriver如何处理iFrame

江小编

3 年前

Selenium Webdriver中的iFrame是嵌入在另一个网页中的网页或内联框架，自动化UI测试Selenium Webdriver如何处理iFrame，或者嵌入在另一个 HTML 文档中的 HTML 文档。iframe 通常用于将来自其他来源的内容（如广告）添加到网页中。iframe 是用 <iframe> 标签定义的。

自动化UI测试Selenium找到iframe

我们无法仅通过查看页面或检查 Firebug 来检测 iframe。观察下图，显示的广告是一个 Iframe，我们无法通过使用 Firebug 进行检查来定位或识别。所以问题是如何识别iframe？

我们可以使用下面给出的方法识别 Selenium 中的iframe：

右键单击该元素，如果您找到“此框架”之类的选项，则它是 iframe。（请参阅上图）
右键单击页面并单击“查看页面源代码”并使用“iframe”进行搜索，如果您可以找到任何带有“iframe”的标签名称，则表示该页面包含一个 iframe。

在上图中，您可以看到右键单击“此框架”选项可用，因此我们现在确定它是一个 iframe。

我们甚至可以使用以下代码段来识别 iframe 的总数。

int size = driver.findElements(By.tagName("iframe")).size();

如何使用 Web Driver 命令切换 iframe 中的元素：

基本上，我们可以使用 3 种方式在 Selenium 中切换元素和处理 iframe。

按索引
按名称或 ID
按网络元素

按索引切换到iframe：

索引是 Selenium 中 iframe 处理的属性之一，我们可以通过它切换到它。

iframe 的索引以“0”开头。

假设如果page中有100个iframe，我们可以通过索引切换到Selenium中的frame。

driver.switchTo().frame(0);
driver.switchTo().frame(1);

按名称或 ID 切换到框架：

Name 和 ID 是 Selenium 中处理 iframe 的属性，通过它们我们可以切换到 iframe。

driver.switchTo().frame(“iframe1”);
driver.switchTo().frame(“元素的id”);

通过ID切换到iframe的例子：

让我们举一个例子，在下图中显示的 Selenium 中切换iframe。我们的要求是点击 iframe。

我们可以通过以下 URL 访问此 iframe： https://jhrs.com

由于它是一个 iframe ，因此无法通过XPath直接单击iframe。首先，我们必须切换到框架，然后我们可以使用 xpath 单击。

第1步）

WebDriver driver = new FirefoxDriver();

driver.get("https://jhrs.com/");

driver.manage().window().maximize();

我们初始化 Firefox 驱动程序。
导航到包含 iframe 的“jhrs.com”站点。
最大化窗口。

第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(); //导航到浏览器
	    driver.get("https://jhrs.com/"); 
	       //导航到包含 iframe 的页面
	       driver.manage().window().maximize();
	       driver.switchTo().frame("a077aa5e"); //switching the frame by ID
			System.out.println("********我们切换到iframe*******");
     		driver.findElement(By.xpath("html/body/a/img")).click();
  		    //Clicks the iframe
  			System.out.println("*********已经搞定***************");
      }
}

输出：

浏览器导航到包含上述 iframe 的页面并单击 iframe。

通过 Web Element 切换到框架：

我们甚至可以使用 web element 切换到 iframe。

driver.switchTo().frame(WebElement);

如何切换回主框架

我们必须从 iframe 中走出来。

要移回父框架，您可以使用 switchTo().parentFrame() 或者如果您想返回主（或大多数父）框架，您可以使用 switchTo().defaultContent();

driver.switchTo().parentFrame(); 
driver.switchTo().defaultContent();

如何切换框架，如果我们不能使用ID或Web Element切换：

假设页面中有 100 个框架，并且没有可用的 ID，在这种情况下，我们只是不知道从哪个 iframe 加载所需的元素（当我们不知道框架的索引时就是这种情况还）。

上述问题的解决方案是，我们必须找到加载元素所通过的 iframe 的索引，然后我们需要通过索引切换到 iframe。

以下是使用以下代码段查找加载元素的框架索引的步骤

第1步）

WebDriver driver = new FirefoxDriver();
driver.get("https://jhrs.com/");
driver.manage().window().maximize();

初始化 Firefox 驱动程序。
导航到包含 iframe 的“guru99”站点。
最大化窗口。

第2步）

int size = driver.findElements(By.tagName("iframe")).size();

上面的代码使用标记名“iframe”查找页面内存在的 iframe 总数。

步骤 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("https://jhrs.com");  
	    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();}}}

执行这个程序，输出如下：

输出：

验证输出，您可以找到 0 和 1 的序列。

无论您在哪里找到输出中的“1”，它都是加载元素的 Frame 的索引。
由于iframe的指标与“0”开始，如果你在1米找到1^日的地方，那么指数为0。
如果你发现1 3^次到位，指数为2。

一旦找到索引，我们就可以注释掉 for 循环。
第四步）

driver.switchTo().frame(0);

找到元素的索引后，您可以使用上述命令切换iframe。
driver.switchTo().frame(从步骤3中找到的索引);

步骤 5)

driver.findElement(By.xpath("html/body/a/img")).click();

上面的代码将点击 iframe 或 iframe 中的元素。

所以完整的代码如下：

public class SwitchToframe   {
public static void main(String[] args) throws NoSuchElementException{
	    WebDriver driver = new FirefoxDriver();
	    driver.get("https://jhrs.com/");  
	    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(); //返回主窗体
	 }*/
	            
		//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("*********打完收工***************");
	        }
	    }

输出：
浏览器导航到包含上述 iframe 的页面并点击 iframe。

嵌套 iframe 的概念（iframe 内的 iframe）：

假设有两个iframe，如下图所示，一个在另一个iframe中，我们的要求是在外iframe和内 iframe 中打印文本。
在嵌套框架的情况下，

首先我们必须通过 iframe 的 Index 或 ID 切换到外部iframe
一旦我们切换到外iframe，我们就可以找到外iframe内的 iframe 总数，并且
我们可以通过任何已知的方法切换到内部 iframe。

在退出 iframe 时，我们必须按照我们从内部 iframe 进入它的相同顺序退出，然后是外部iframe 。

上述嵌套 iframe 的 Html 代码如下所示。

上面的 HTML 代码清楚地解释了另一个 iframe 嵌套中的 iframe 标记（以绿色突出显示），表明存在嵌套的 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());

切换到外部iframe。
在外部 iframe 上打印文本。

一旦我们切换到外部 iframe，我们应该知道外部 iframe 内是否存在任何内部 iframe

第2步）

size = driver.findElements(By.tagName("iframe")).size();
    // prints the total number of frames inside outer frame           
    System.out.println("Total Frames --" + size);

查找外部 iframe 内的 iframe 总数。
如果发现大小为“0”，则 iframe内没有内部 iframe。

步骤 3)

driver.switchTo().frame(0); // Switching to innerframe
System.out.println(driver.findElement(By.xpath("xpath of the inner element ")).getText());

切换到内部 iframe
在内部 iframe上打印文本。

这是完整的代码：

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
	    // prints the total number of frames inside outer frame

输出：
上述代码的输出将在内部 iframe 和外部 iframe 中打印文本。