使用Selenium2测试含有iframe的Ajax网页

樱桃小丸子樱花

2012-03-28

关注关注

前言

本文主要通过一个简单的例子，来讨论以下两个问题：

使用Selenium对由Ajax动态加载的页面进行测试
测试含有iframe标签的网页

本文不是Selenium2的简单介绍或者入门内容，目标读者是至少使用过Selenium2进行测试的各位朋友。

准备工作

假设你有一项业务，需要在用户进行输入的时候用Ajax弹出辅助输入的窗口，然后再将这些值传回主窗口。

为了叙述简便，这里使用一个简单的iframe标签对弹出窗口进行简化。

首先需要两个网页，一个是主页面main.html:

<HTML> 



    <HEAD> 




        <TITLE>寸木的Selenium+Ajax测试</TITLE> 




        <SCRIPT language="javascript"> 



        function loadFrame() {  


            // 取得DIV对象  



            var divElement = document.getElementById("TestDiv");  



            // 插入iFrame元素  



            divElement.innerHTML = "<iframe id='TestFrame'style='width:200px;height:250px;'/>";  



            // 取得动态插入的iFrame元素  



            var frameElement = document.getElementById("TestFrame");  



               



            frameElement.src = "SubPage.html";  



        }  



        </SCRIPT> 




        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 




    </HEAD> 




    <BODY> 




        <H1>主页面</H1> 



        下面的区域是测试用的Frame。  



        <div id="TestDiv" style="width:200px;height:250px;border:solid 1px #000000;">&nbsp;</div><br /> 




        <input type="button" value="Load Frame" onclick="loadFrame();" id="btnLoad"/><br /> 




        接收到的信息：<label id="lblMsg">Waiting mesage</label> 




    </BODY> 




</HTML>

接着是被弹出的窗口SubPage.html

<HTML> 



    <HEAD> 




        <TITLE>寸木的Selenium+Ajax测试</TITLE> 




        <SCRIPT language="javascript"> 



            function removeDefaultInfo(webElement) {  



                var strDefalutInfo = "请输入信息...";  




                if(webElement.value == strDefalutInfo) {  




                    webElement.value = "";  



                }  


            }  


            function setDefaultInfo(webElement) {  



                var strDefalutInfo = "请输入信息...";  




                if(webElement.value == "") {  




                    webElement.value = strDefalutInfo;  



                }  


            }  


            function sendToMainPage() {  



                parent.document.getElementById("lblMsg").innerHTML = document.getElementById("frameText").value;  



            }  



        </SCRIPT> 




        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 




    </HEAD> 




    <BODY style="background-color:#009900;"> 




        <H1>子页面</H1> 




        Hi, 这里是子页面，为了和主页面加以区别，我被标注成了绿色。<br/ > 




        <input type="text" id="frameText" value="请输入信息..." onfocus="removeDefaultInfo(this);" onblur="setDefaultInfo(this);"/> 




        <input type="button" value="传送到主窗口" onclick="sendToMainPage();" id="btnSendBack" /> 




    </BODY> 




</HTML>

关键问题

我们的目标是用Java编写一段能够自动测试这一完整业务逻辑的测试代码。因此，我们首先想到的可能会是类似下面的代码

/**  


 *  


 */ 



package com.cnblogs.www.hexin0614;  



   



import org.openqa.selenium.By;  




import org.openqa.selenium.WebDriver;  




import org.openqa.selenium.firefox.FirefoxDriver;  



   



/**  


 * @author hexin  


 *  


 */ 



public class TestSa {  



       



    /**  


     * @param args  


     * @throws Exception  


     */ 



    public static void main(String[] args) throws Exception {  



           


           



        // Declare  




        WebDriver driver = new FirefoxDriver();  



           



        // Load page  




        driver.get("file:///C:/tmp/Main.html");  



           


        Thread.sleep(15000);  


           



        // Load subpage  




        driver.findElement(By.id("btnLoad")).click();  



           



        // Input message  




        driver.findElement(By.id("frameText")).sendKeys("Message from Selenium.");  




        // Send message back to main page  




        driver.findElement(By.id("btnSendBack")).click();  



           


        Thread.sleep(2000);  


           



        // Go back to main frame  




        System.out.println(driver.findElement(By.id("lblMsg")).getText());  



           


        driver.close();  


    }  


}

实际运行的时候会报告找不到"frameText"元素的错误。这是怎么回事呢？

原来Selenium2在使用get()方法打开一个网页的时候，是不会继续加载里面的iframe中的内容的(这一点与Selenium有所区别)。

那么，我们就需要人为的要求Selenium2对iframe中的内容进行加载。

// Step into the subpage  



driver.switchTo().frame("TestFrame");

这样就可以找到id为"frameText"的元素了。

重新运行，发现还是有错，这一次报告的是"lblMsg"元素找不到？奇怪吗？

不奇怪，因为我们通过上面的switchTo()方法已经切换到了iframe的内部，而subpage中是不存在id为"lblMsg"对象的。

怎么办？只有重新回到Mainpage上来。

根据Selenium2的在线文档，有很多方法可以切换回MainPage。（别告诉我你没有耐心的去读那些文档）

笔者经过摸索发现了一个比较简单的方法：利用getWindowHandle()方法可以快速的进行切换。该方法的JavaDoc如下

Return an opaque handle to this window that uniquely identifies it within this driver instance.This can be used to switch to this window at a later date

看来只要在切换至iframe内部的时候，提前记录下Mainpage的句柄就可以在将来的任何时候回到主窗口了。于是我们追加下面两行代码。

// Back up main page's handler  


String strMainHandler = driver.getWindowHandle();  


   



// ........  



   



// Go back to main frame  



driver.switchTo().window(strMainHandler);

好了，问题解决了，是不是很简单？最后送出完整的Java代码。

iframe ajax