[Selenium With C# 基础教程] Lesson09-Frames

虽然在Web中可以使用Frame进行页面布局，但这并不是一种推荐的设计方案。但现实中仍有部分网站仍在使用，甚至部分网站还使用了iFrames。在Selenium API 中也提供关于 Frame 定位操作的一些方法，将在本文中进行介绍。

Selenium中Frame方法

在Web页面中如果需要定位到Frame中的元素时，需要切换到该Frame中，常使用的方法主要为：Frame(int frameIndex)、Frame(string frameName)和DefaultContent()。另外，还有一个方法是ParentFrame()，可以切换到当前Frame的上一层Frame中，主要用于存在多Frame嵌套的情况。下面是Selenium API提供的方法，如下所示：

9-2 Selenium Frame方法.jpg

测试Frames

常见的Frame页面布局一般分为三块，顶部的导航，左边的菜单和右边的信息展示栏，如下图所示：

9-1 Frame示例_c2i.jpg

HTML源码如下所示：

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <frameset rows="40%,60%">
    <frame name="nav" id="navId" src="https://www.baidu.com">
      <frameset cols="30%,60%">
        <frame name="menu" id="menuId" src="https://www.baidu.com">
        <frame name="content" id="contentId" src="https://www.baidu.com">
      </frameset>
  </frameset>
</html>

使用Selenium API进行Frame操作通常的步骤如下：

通过index或Name定位到Frame
切换到该Frame内部
在该Frame下面进行操作
切换到默认页面（即包含所有Frame的页面）
如果还需要到其他Frame进行定位的话，则重复以上步骤

下面示例代码将演示依次从上到下，从左到右切换到不同的Frame，详细如下：

driver.SwitchTo().Frame("nav");
driver.FindElement(By.Id("kw")).SendKeys("切换到nav Frame中");
driver.SwitchTo().DefaultContent();
//如果通过FrameIndex来定位切换Frame，下标从0开始
driver.SwitchTo().Frame(1);
driver.FindElement(By.Id("kw")).SendKeys("切换到menu Frame中");
driver.SwitchTo().DefaultContent();
driver.SwitchTo().Frame("content");
driver.FindElement(By.Id("kw")).SendKeys("切换到content Frame中");

如果通过FrameIndex来定位切换Frame，下标从0开始

最终的测试结果如下所示：

9-3 Frame代码切换_c2i.jpg

测试iFrames

一种常见的iFrame示例如下：

9-4 iFrame示例_c2i.jpg

iFram.html源码

<!--iFram.html-->
<body>
    <div id="divID">
        <h3>测试iFrame</h3>
        测试用户名：<input type="text" id="userName" />*在iFrame外面<br/><br />
        <iframe frameborder="1" id="iFrame1" name="iFrame1" src="iFrameLogin.html"></iframe>    *在iFrame里面
     </div>
    <br/><br/>
    <p><input type="checkbox" id="checkbox1" />测试主页面选中1</p>
    <p><input type="checkbox" id="checkbox2" />测试主页面选中2</p>
</body>

iFrameLogin.html源码

<!--iFrameLogin.html-->
<body>
    <table border="0" cellspacing="2" cellpadding="2">
        <tbody>
            <tr>
                <td>
                    用户名：<input type="text" id="userNameId" />
                </td>
            </tr>
            <tr>
                <td>
                    密    码：<input type="password" id="pwdId">
                </td>
            </tr>
        </tbody> 
    </table>
    <input type="submit" id="submitId" value="登录" />
</body>

下面我们来演示在分别主页面中和iFrame页面中输入用户名，示例代码如下：

driver.FindElement(By.Id("userName")).SendKeys("我在主页面中");
driver.SwitchTo().Frame("iFrame1");
driver.FindElement(By.Id("userNameId")).SendKeys("我在iFrame页面中");
driver.FindElement(By.Id("pwdId")).SendKeys("pwd");
driver.SwitchTo().DefaultContent();
driver.FindElement(By.Id("checkbox1")).Click();
driver.FindElement(By.Id("checkbox2")).Click();

最终运行的效果如下图所示：

9-5 iFrame运行效果图_c2i.jpg

测试多iFrames

一个页面可包含多个iFrame，一个典型的示例如下：

9-6 多个iFrame示例_c2i.jpg

该示例中存在3个iFrame，见图中红色框标识。各个HTML源码如下所示：
iFram.html源码

<!--iFram.html-->
<body>
    <div id="divID">
        <h3>测试iFrame</h3>
        测试用户名：<input type="text" id="userName" />*在iFrame外面<br /><br />
        <iframe frameborder="1" name="mainFrame" id="mainFrameId" height="400" width="450" src="iFrameQuery.html"></iframe>父iFrame
    </div>
    <br /><br />
    <p><input type="checkbox" id="checkbox1" />测试主页面选中1</p>
    <p><input type="checkbox" id="checkbox2" />测试主页面选中2</p>
</body>

iFrameQuery.html源码

<!--iFrameQuery.html-->
<body>
    <iframe frameborder="1" name="subFrame1" id="subFrame1" src="iFrameLogin.html"></iframe>子iFrame-1
    <br /><br />
    <iframe frameborder="1" name="subFrame2" id="subFrame2" src="iFrameLogin.html"></iframe>子iFrame-2
    <br /><br />
    在子iFrame中:<input type="text" id="text1" width="50">
</body>

iFrameLogin.html源码：

<!--iFrameLogin.html-->
<body>
    <table border="0" cellspacing="2" cellpadding="2">
        <tbody>
            <tr>
                <td>
                    用户名：<input type="text" id="userNameId" />
                </td>
            </tr>
            <tr>
                <td>
                    密    码：<input type="password" id="pwdId">
                </td>
            </tr>
        </tbody> 
    </table>
    <input type="submit" id="submitId" value="登录" />
</body>

以下示例代码演示了依次从最外层的iFrame切换到内层iFrame，并在同级iFrame中进行定位操作，再切换到外层iFrame进行操作，详细代码如下：

driver.FindElement(By.Id("userName")).SendKeys("我在主页面中");
//第一次切换iFrame
driver.SwitchTo().Frame("mainFrame");
Thread.Sleep(500);
//第二次切换iFrame
driver.SwitchTo().Frame("subFrame1");
driver.FindElement(By.Id("userNameId")).SendKeys("我在子iFrame-1");
driver.FindElement(By.Id("pwdId")).SendKeys("pwd");
//第三次切换iFrame，切换同级父iFrame，这时其实是位于mainFrame中
driver.SwitchTo().ParentFrame();
//第四次切换iFrame
driver.SwitchTo().Frame("subFrame2");
driver.FindElement(By.Id("userNameId")).SendKeys("我在子iFrame-2");
driver.FindElement(By.Id("pwdId")).SendKeys("pwd");
//第六次切换iFrame-方法一,推荐方法一
driver.SwitchTo().ParentFrame();
//第六次切换iFrame-方法二
//driver.SwitchTo().DefaultContent();
//driver.SwitchTo().Frame("mainFrame");
driver.FindElement(By.Id("text1")).SendKeys("我已经切换到父iFrame啦");
//第六次切换iFrame
driver.SwitchTo().DefaultContent();
driver.FindElement(By.Id("checkbox1")).Click();
driver.FindElement(By.Id("checkbox2")).Click();

注意方法SwitchTo().ParentFrame()和SwitchTo().DefaultContent()的区别

最终的运行效果如下：

9-7 多iFrame演示效果_c2i.jpg

通过以上的演示相信您已经可以掌握Frame在Selenium中的应用，如果不是特别理解，可以将以上HTML源码拷贝HTML文件中，来亲自做一遍，就能加深理解了。

[Selenium With C# 基础教程] Lesson09-Frames

Selenium中Frame方法

测试Frames

测试iFrames

测试多iFrames

推荐阅读更多精彩内容