[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源码如下所示：

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

1. 通过index或Name定位到Frame
2. 切换到该Frame内部
3. 在该Frame下面进行操作
4. 切换到默认页面（即包含所有Frame的页面）
5. 如果还需要到其他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源码

    

        
测试iFrame
        测试用户名：*在iFrame外面


            *在iFrame里面
     
    


    
测试主页面选中1
    
测试主页面选中2

iFrameLogin.html源码

    

        

            

                

                    用户名：
                
            
            

                

                    密    码：
                
            
        
 
    
    

下面我们来演示在分别主页面中和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源码

    

        
测试iFrame
        测试用户名：*在iFrame外面


        父iFrame
    
    


    
测试主页面选中1
    
测试主页面选中2

iFrameQuery.html源码

    子iFrame-1
    


    子iFrame-2
    


    在子iFrame中:

iFrameLogin.html源码：

    

        

            

                

                    用户名：
                
            
            

                

                    密    码：
                
            
        
 
    
    

以下示例代码演示了依次从最外层的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文件中，来亲自做一遍，就能加深理解了。