《手把手教你》系列技巧篇（四十一）-java+ selenium自动化测试 - 处理iframe -上篇（详解教程）

北京-宏哥

发布于 2021-11-15 10:08:01

5000

发布于 2021-11-15 10:08:01

文章被收录于专栏：Java+ Selenium自动化测试北京宏哥Java+ Selenium自动化测试

1.简介

　　原估计宏哥这里就不对iframe这个知识点做介绍和讲解了，因为前边的窗口切换就为这种网页处理提供了思路，另一个原因就是虽然iframe很强大，但是现在很少有网站用它了。但是还是有小伙伴或者童鞋们私下问这个问题，那么宏哥就单独写一篇关于iframe网页处理的文章。

2.iframe是什么

　　iframe就是我们常用的iframe标签：<iframe>。iframe标签是框架的一种形式，也比较常用到，iframe一般用来包含别的页面，例如我们可以在我们自己的网站页面加载别人网站或者本站其他页面的内容。iframe标签的最大作用就是让页面变得美观。iframe标签的用法有很多，主要区别在于对iframe标签定义的形式不同，例如定义iframe的长宽高。简单的一句话概括就是：iframe 就是HTML 中，用于网页嵌套网页的。一个网页可以嵌套到另一个网页中，可以嵌套很多层。和俄罗斯套娃差不多吧。

3.selenium处理iframe的方法

// 进入 id 叫frameA 的 iframe
dr.switchTo().frame("frameA");

// 回到主窗口
dr.switchTo().defaultContent();

4.项目实战

网上找了半天也没有找到这样的例子，以前百度、163的邮箱是这种。最近几年技术升级了，已经不是这种了。不找了索性宏哥自己在本地做一个这样的小demo给小伙伴或者童鞋们来演示一下。

注：本文演示的数据大家可以在公众号后台回复宏哥41，在java+selenium->41 文件夹领取。

4.1被测的HTML代码

1.准备测试练习index.html，如下：

<!DOCTYPE html>
<html>
<head>
    <title>北京-宏哥|iframeTestDemo</title>
    <style type="text/css">
        
        .button1 {
            background-color: #f44336; 
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 28px;
            margin-bottom: 100px;
            text-decoration:none;
            color: white;
        }
        #myAnchor
        {
          text-decoration:none;
          color: white;
        }
    </style>
</head>
<body style="text-align:center">
<div id="wrapper" style="position: relative;top: 100px;left:0px;">
    <button class="button1"><a id="myAnchor" href="https://www.cnblogs.com/du-hong/">北京-宏哥</a></button></br>
    <div id="id1">I am a index page's div!</div>
    <input type="text" id="maininput" />
    <br/>
    <iframe id="frameA" frameborder="0" scrolling="no" style="left:857px;position:absolute;" src="iframe.html"></iframe>
</div>
</body>
</html>

2.准备测试练习iframe.html，如下：

<!DOCTYPE html>
<html>
<head>
    <title>I am a iframe!</title>
</head>
<body>
    <div id="div1">I am iframes div!</div>
    <input id="iframeinput"></input>
</body>
</html>

3.页面效果，如下图所示：

5.代码实战练习

5.1代码设计

5.2参考代码

package lessons;

import java.util.concurrent.TimeUnit;

import org.junit.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

/**
 * @author 北京-宏哥
 * 
 * 《手把手教你》系列技巧篇（四十一）-java+ selenium自动化测试 - 处理iframe（详解教程）
 *
 * 2021年11月7日
 */
public class testIframe {
    
    @Test 
    public void testRadio() throws InterruptedException { 
        System.setProperty("webdriver.gecko.driver", ".\\Tools\\chromedriver.exe");
        
        WebDriver driver =null;
        driver =new ChromeDriver();
        driver.get("file:///C:/Users/DELL/Desktop/test/iframe/index.html"); 
        driver.manage().window().maximize(); 
        driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS); 
        // 在 主窗口的时候
        driver.findElement(By.id("maininput")).sendKeys("This is a main input!");
        // 此时 没有进入到iframe, 以下语句会报错
        //driver.findElement(By.id("iframeinput")).sendKeys("iframe input");
                
        driver.switchTo().frame("frameA");
        driver.findElement(By.id("iframeinput")).sendKeys("This is a iframe input!");
        
        // 此时没有在主窗口，下面语句会报错
        //driver.findElement(By.id("maininput")).sendKeys("main input");
        
        // 回到主窗口
        driver.switchTo().defaultContent();
        driver.findElement(By.id("maininput")).sendKeys("This is a main input!");  
        
    }

}