[Selenium With C# 基础教程] Lesson15- HTML5和JavaScript

随着Web技术的不断演进，HTML5 应运而生。HTML5包含很多新的功能和动态Web应用和接口。而且随着JavaScript的不断广泛应用，各类网站也越来越动态化。在要本节将介绍一些使用Selenium测试HTML5的示例。

注意HTML5中一些新的功能并不是所有浏览器都完全支持，所以在测试过程中，会有一些示例在特定浏览器出现测试失败的情况，这里推荐大家使用Google Chrome浏览器。

HTML5中的E-mail类型

HTML5中的E-mail类型示例如下图所示：

15-1 HTML5 E-mail示例_c2i.jpg

HTML源码如下：

<input id="email" name="email" type="email" style="height:25px; width: 300px;" />

这里的处理方式与普通的页面是一样的，示例代码如下：

driver.FindElement(By.Id("email")).SendKeys("test");

HTML5中的时间类型

HTML5中的时间类型示例如下所示:

15-2 HTML时间示例_c2i.jpg

HTML源码如下所示：

<h3>HTML5时间示例</h3>
<input id="start_time_1" name="start_time" type="time" style="height:25px; width: 150px;"/>

下面的示例代码演示了先输入一个时间，然后清除时间，再输入新的时间，详细如下：

    IWebElement timeele= driver.FindElement(By.Id("time"));
    timeele.SendKeys("02:27AM");
    driver.FindElement(By.Id("email")).Click();
    Thread.Sleep(500);
    timeele.Click();
    //逐步清除时间
    timeele.SendKeys(Keys.Delete);
    timeele.SendKeys(Keys.Right);
    timeele.SendKeys(Keys.Delete);
    timeele.SendKeys(Keys.Right);
    timeele.SendKeys(Keys.Delete);
    //输入新的时间
    driver.FindElement(By.Id("email")).Click();
    driver.FindElement(By.Id("time")).SendKeys("08:35PM");

JavaScript中的OnXXXX事件

在一些页面中，当点击一些文本框后，会在下面或右边弹出一些提示，如下图所示：

15-3 JS事件初始状态_c2i.jpg

HTML源码网如下：

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>测试JavaScript事件</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        function ShowTipClick() {
            var target = document.getElementById('click');
            target.style.display = "block";
        }
        function ShowTipChange() {
            var target = document.getElementById('change');
            target.style.display = "block";
        }
    </script>
</head>
<body>
    <br /><br />
    <input type="text" name="test" id="onclick"  onclick="ShowTipClick()" size="40" />
    <span id="click" style="display:none;margin-right:20px;color:red;">测试OnClick方法</span>
    <br /><br /><br />
    <input type="text" name="test" id="onchange" onchange="ShowTipChange()" size="40" />
    <br />
    <span id="change" style="display:none;margin-right:20px;color:blue;">测试OnChange方法</span>
</body>
</html>

调用OnClick()事件

示例代码：

driver.FindElement(By.Id("testText")).SendKeys("Test JavaScript OnClick()方法");

当我们使用代码正常输入文字后，相应的文字并没有显示出来。这个时候其实是没有触发OnClick()方法，我们可以再次单击一下即可，示例代码如下：

driver.FindElement(By.Id("testText")).Click();
driver.FindElement(By.Id("testText")).SendKeys("Test JavaScript OnClick()方法");
Assert.AreEqual<string>("最多允许32个字符", driver.FindElement(By.Id("tip")).Text);

触发OnChange()事件

示例代码：

driver.FindElement(By.Id("onchange")).SendKeys("Test JavaScript OnChange()方法");
string js = @"$('#onchange').trigger('change')";
((IJavaScriptExecutor)driver).ExecuteScript(js);
Assert.AreEqual<string>("测试OnChange方法", driver.FindElement(By.Id("change")).Text);

在上面代码使用到JQuery的一些方法，在页面加载时需要添加jquery.js文件

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

15-4 JS事件测试结果图_c2i.jpg

调整滚动条

在测试过程会遇到一个页面无法全部显示的状态，这时候需要调整滚动条的水平或垂直位置。我们可以采取以下的方法进行调整：

使用JavaScript调整

driver.Url = "http:www.jb51.net";
driver.Manage().Window.Maximize();
//调整到底部
string jsToBottom = "window.scrollTo(0,document.body.scrollHeight)";
((IJavaScriptExecutor)driver).ExecuteScript(jsToBottom);
//调整到指定位置
IWebElement ele = driver.FindElement(By.XPath("//div[@id='mainbody']/div[8]/div[4]/h2/span[1]"));
int elePosition = ele.Location.Y;
string jsToCustomerPostion = "window.scrollTo(0,"+elePosition+")";
((IJavaScriptExecutor)driver).ExecuteScript(jsToCustomerPostion);

使用键盘组合键调整

driver.Url = "http:www.jb51.net";
driver.Manage().Window.Maximize();
//使用键盘Ctrl+End到底部
driver.FindElement(By.TagName("body")).SendKeys(Keys.Control + Keys.End);
//使用键盘Ctrl+Home回到顶端
driver.FindElement(By.TagName("body")).SendKeys(Keys.Control+Keys.Home);

基于JQuery的插件：Chonsen

单选下拉列表

Chosen是一款流行的JQuery插件，它可以让我们下拉选择列表框界面更加友好和美观，下图是基于Chosen的示意图：

15-5 Chosen单选示例图_c2i.jpg

HTML源码如下所示：

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="css/chosen.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery1.4.4.min.js"></script>
    <script type="text/javascript" src="js/chosen.jquery.js"></script>
    <script>
        $(function () {
            $('.dept_select').chosen({
                no_results_text: "未能找到",
                allow_single_deselect: true,
                width: "15%"
            });
        });
        $(function () {
            $('.contry_select').chosen({
                no_results_text: "未能找到",
                allow_single_deselect: true,
                width: "20%"
            });
        });
    </script>
</head>
<body>
    <h3>测试Chosen下拉列表单选</h3>
    <h4>请选择您的部门</h4>
    <select name="dept" id="dept1" style="width:200px" class="dept_select">
        <option value="请选择部门">--请选择部门--</option>
        <option value="开发">开发</option>
        <option value="测试">测试</option>
        <option value="产品">产品</option>
        <option value="市场">市场</option>
        <option value="销售">销售</option>
        <option value="财务">财务</option>
        <option value="人事">人事</option>
        <option value="技术">技术</option>
    </select>
    <br /><br />
    <h3>测试Chosen下拉列表多选</h3>
    <h4>请选择您最希望去旅游的国家</h4>
    <select name="contry" id="contry1" style="width:200px" multiple="multiple" data-placeholder="请选择国家" class="contry_select">
        <option value="请选择国家">--请选择国家--</option>
        <option value="中国">中国</option>
        <option value="美国">美国</option>
        <option value="英国">英国</option>
        <option value="法国">法国</option>
        <option value="德国">德国</option>
        <option value="俄罗斯">俄罗斯</option>
    </select>
</body>
</html>

Chosen插件下载地址：http://plugins.jquery.com/chosen/
以上代码参考资料：http://blog.csdn.net/iamduoluo/article/details/11519909

从上面的代码来看，其与标准的下拉列表框没有太多区别，唯一区别就是class的内容是调用了Chosen中的chosen()方法。如果使用这种方式，则在浏览器加载显示时，页面select下面会添加以下的HTML代码片断：

<div class="chosen-container chosen-container-single" style="width: 15%;" title="" id="dept1_chosen">
    <a class="chosen-single" tabindex="-1">
        <span>--请选择部门--</span>
        <div>
            <b></b>
        </div>
    </a>
    <div class="chosen-drop">
        <div class="chosen-search">
            <input type="text" autocomplete="off">
        </div>
        <ul class="chosen-results">
            <li class="active-result result-selected" style="" data-option-array-index="0">--请选择部门--</li>
            <li class="active-result" style="" data-option-array-index="1">开发</li>
            <li class="active-result" style="" data-option-array-index="2">测试</li>
            <li class="active-result" style="" data-option-array-index="3">产品</li>
            <li class="active-result" style="" data-option-array-index="4">市场</li>
            <li class="active-result" style="" data-option-array-index="5">销售</li>
            <li class="active-result" style="" data-option-array-index="6">财务</li>
            <li class="active-result" style="" data-option-array-index="7">人事</li>
        </ul>
    </div>
</div>

以上这些HTML片断代码都是动态生成的，在HTML源码中是无法看到的。我们可以在浏览器中使用快捷键F12进行查看。

在测试之前，我们先来看看如何选中选项

1、单击--请选择部门--
2、选择一个选项

这样的操作与标准的下拉列表框选择并没有什么不同，我们可以使用Firefox来查看浏览器是如何运行的。在Chosen插件中，当我们单击--请选择部门--时，事实上单击的是ID为dept1_chosen的div(==这里的ID实际上是select中设定的ID==)下面的链接chosen-single。在点击选择下拉列表中的选项时，实际上选择的是位于li中class为active-result下面的选项。基于这些特点，我们就可以使用XPath来编写脚本，示例代码如下：

Thread.Sleep(2000);
driver.FindElement(By.XPath("//div[@id='dept1_chosen']/a[contains(@class,'chosen-single')]")).Click();
ReadOnlyCollection<IWebElement> eles = driver.FindElements(By.XPath("//div[@id='dept1_chosen']//div[contains(@class,'chosen-drop')]//ul/li[contains(@class,'active-result')]"));
for (int i = 0; i < eles.Count; i++)
{
    if (eles[i].Text == "财务")
    {
        eles[i].Click();
        break;
    }
}

在Chosen插件中，可以允许输入文字然后在选项中搜索查找选中，所以我们也可以使用以下方法进行测试选中选项。

Thread.Sleep(2000);
driver.FindElement(By.XPath("//div[@id='dept1_chosen']/a[contains(@class,'chosen-single')]")).Click();
IWebElement serachBoxEle = driver.FindElement(By.XPath("//div[@id='dept1_chosen']//div[contains(@class,'chosen-drop')]//div[contains(@class,'chosen-search')]/input"));
serachBoxEle.SendKeys("销售");
Thread.Sleep(1000);
serachBoxEle.SendKeys(Keys.Enter);

多选下拉列表

在Chosen插件中的下拉列表多选是一种增强版的下拉选项，如下图所示：

15-5 Chosen多选示例图_c2i.jpg

HTML源码如下所示：

<h3>测试Chosen下拉列表多选</h3>
<h4>请选择您最希望去旅游的国家</h4>
<select name="contry" id="contry1" style="width:200px" multiple="multiple" data-placeholder="请选择国家" class="contry_select">
    <option value="请选择国家">--请选择国家--</option>
    <option value="中国">中国</option>
    <option value="美国">美国</option>
    <option value="英国">英国</option>
    <option value="法国">法国</option>
    <option value="德国">德国</option>
    <option value="俄罗斯">俄罗斯</option>
</select>

同单选一样，在浏览器加载时也会添加同样的HTML代码片断，如下所示：

<div class="chosen-container chosen-container-multi" style="width: 20%;" title="" id="contry1_chosen">
    <ul class="chosen-choices">
        <li class="search-field">
            <input type="text" value="请选择国家" class="default" autocomplete="off" style="width: 90px;">
        </li>
    </ul><div class="chosen-drop">
        <ul class="chosen-results">
            <li class="active-result" style="" data-option-array-index="0">--请选择国家--</li>
            <li class="active-result" style="" data-option-array-index="1">中国</li>
            <li class="active-result" style="" data-option-array-index="2">美国</li>
            <li class="active-result" style="" data-option-array-index="3">英国</li>
            <li class="active-result" style="" data-option-array-index="4">法国</li>
            <li class="active-result" style="" data-option-array-index="5">德国</li>
            <li class="active-result" style="" data-option-array-index="6">俄罗斯</li>
        </ul>
    </div>
</div>

测试示例代码如下：

Thread.Sleep(2000);
driver.FindElement(By.XPath("//div[@id='contry1_chosen']//ul[contains(@class,chosen-choices)]//li[contains(@class,'search-field')]/input")).Click();
ReadOnlyCollection<IWebElement> firstMulEles = driver.FindElements(By.XPath("//div[@id='contry1_chosen']//div[contains(@class,'chosen-drop')]//ul[contains(@class,'chosen-results')]/li[contains(@class,'active-result')]"));
//第一次选择
foreach (var item in firstMulEles)
{
    if (item.Text.Equals("美国"))
    {
        item.Click();
        break;
    }
}
//第二次选择
driver.FindElement(By.XPath("//div[@id='contry1_chosen']//ul[contains(@class,chosen-choices)]//li[contains(@class,'search-field')]/input")).Click();
ReadOnlyCollection<IWebElement> SecondMulEles = driver.FindElements(By.XPath("//div[@id='contry1_chosen']//div[contains(@class,'chosen-drop')]//ul[contains(@class,'chosen-results')]/li[contains(@class,'active-result')]"));
foreach (var item in SecondMulEles)
{
    if (item.Text.Equals("俄罗斯"))
    {
        item.Click();
        break;
    }
}

在上面的代码里面我们实现了多选，如果有要清除选择的项，该如何操作？事实上，在清除时，我们是点击选择项右边的x，以下是清除指定项和全部清除

//清除指定指定项，注意里面的XPath用法
Thread.Sleep(500);
ReadOnlyCollection<IWebElement> clearSpecificEles = driver.FindElements(By.XPath("//div[@id='contry1_chosen']//ul[contains(@class,'chosen-choices')]//li[contains(@class,'search-choice')]//span"));
foreach (IWebElement item in clearSpecificEles)
{
    string clearText="美国";
    if (item.Text.Equals(clearText))
    {
       IWebElement clearTextEle = driver.FindElement(By.XPath("//div[@id='contry1_chosen']//ul[contains(@class,'chosen-choices')]//li[contains(@class,'search-choice')]//span[contains(text(),'" + clearText + "')]/../a[contains(@class,'search-choice-close')]"));
        clearTextEle.Click();
    }
}

//清除所有选择项
Thread.Sleep(500);
ReadOnlyCollection<IWebElement> clearEles = driver.FindElements(By.XPath("//div[@id='contry1_chosen']//ul[contains(@class,'chosen-choices')]//li[contains(@class,'search-choice')]//a[contains(@class,'search-choice-close')]"));
foreach (IWebElement item in clearEles)
{
    item.Click();
}

到本节结束，Selenium With C# 基础教程系统就已经算是结束了，后面有空再写进阶系列的文章，谢谢各位的关注。

最后编辑于：2018.09.19 21:21:34

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 199,519评论 5赞 468
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 83,842评论 2赞 376
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 146,544评论 0赞 330
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 53,742评论 1赞 271
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 62,646评论 5赞 359
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,027评论 1赞 275
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,513评论 3赞 390
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,169评论 0赞 254
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,324评论 1赞 294
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,268评论 2赞 317
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,299评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,996评论 3赞 315
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,591评论 3赞 303
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,667评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,911评论 1赞 255
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,288评论 2赞 345
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 41,871评论 2赞 341

[Selenium With C# 基础教程] Lesson15- HTML5和JavaScript

HTML5中的E-mail类型

HTML5中的时间类型

JavaScript中的OnXXXX事件

调用OnClick()事件

触发OnChange()事件

调整滚动条

使用JavaScript调整

使用键盘组合键调整

基于JQuery的插件：Chonsen

单选下拉列表

多选下拉列表

推荐阅读更多精彩内容