[原创]使用Selenium2测试含有iframe的Ajax网页

前言

本文主要通过一个简单的例子,来讨论以下两个问题:
  • 使用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代码。
    /*
     * Test
     */
    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();
    		
    		// Back up main page's handler
    		String strMainHandler = driver.getWindowHandle();
    		// Step into the subpage
    		driver.switchTo().frame("TestFrame");
    		
    		
    		// 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
    		driver.switchTo().window(strMainHandler);
    		System.out.println(driver.findElement(By.id("lblMsg")).getText());
    		
    		driver.close();
    	}
    }
    
    posted @ 2012-03-24 17:34  寸木  Views(1573)  Comments(0Edit  收藏  举报