虽然在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文件中，来亲自做一遍，就能加深理解了。
