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

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

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

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

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

文章图片
15-1 HTML5 E-mail示例_c2i.jpg HTML源码如下：

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

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

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

文章图片
15-2 HTML时间示例_c2i.jpg HTML源码如下所示：

HTML5时间示例

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

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源码网如下：

测试JavaScript事件 - 锐客网测试OnClick方法测试OnChange方法

调用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("最多允许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("测试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源码如下所示：

- 锐客网测试Chosen下拉列表单选请选择您的部门测试Chosen下拉列表多选请选择您最希望去旅游的国家

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

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

--请选择部门-- --请选择部门-- 开发测试产品市场销售财务人事

以上这些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 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源码如下所示：

测试Chosen下拉列表多选请选择您最希望去旅游的国家

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

--请选择国家-- 中国美国英国法国德国俄罗斯

测试示例代码如下：

Thread.Sleep(2000); driver.FindElement(By.XPath("//div[@id='contry1_chosen']//ul[contains(@class,chosen-choices)]//li[contains(@class,'search-field')]/input")).Click(); ReadOnlyCollection 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 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 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 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|[Selenium With C# 基础教程] Lesson15- HTML5和JavaScript】到本节结束，Selenium With C# 基础教程系统就已经算是结束了，后面有空再写进阶系列的文章，谢谢各位的关注。