[Selenium With C# 基礎(chǔ)教程] Lesson15- HTML5和JavaScript

隨著Web技術(shù)的不斷演進(jìn)鞋屈，HTML5 應(yīng)運(yùn)而生范咨。HTML5包含很多新的功能和動(dòng)態(tài)Web應(yīng)用和接口。而且隨著JavaScript的不斷廣泛應(yīng)用厂庇，各類網(wǎng)站也越來越動(dòng)態(tài)化渠啊。在要本節(jié)將介紹一些使用Selenium測(cè)試HTML5的示例。

注意HTML5中一些新的功能并不是所有瀏覽器都完全支持权旷，所以在測(cè)試過程中替蛉，會(huì)有一些示例在特定瀏覽器出現(xiàn)測(cè)試失敗的情況，這里推薦大家使用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中的時(shí)間類型

HTML5中的時(shí)間類型示例如下所示:

15-2 HTML時(shí)間示例_c2i.jpg

HTML源碼如下所示：

<h3>HTML5時(shí)間示例</h3>
<input id="start_time_1" name="start_time" type="time" style="height:25px; width: 150px;"/>

下面的示例代碼演示了先輸入一個(gè)時(shí)間，然后清除時(shí)間译柏，再輸入新的時(shí)間镣煮，詳細(xì)如下：

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

JavaScript中的OnXXXX事件

在一些頁面中，當(dāng)點(diǎn)擊一些文本框后鄙麦，會(huì)在下面或右邊彈出一些提示典唇，如下圖所示：

15-3 JS事件初始狀態(tài)_c2i.jpg

HTML源碼網(wǎng)如下：

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>測(cè)試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;">測(cè)試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;">測(cè)試OnChange方法</span>
</body>
</html>

調(diào)用OnClick()事件

示例代碼：

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

當(dāng)我們使用代碼正常輸入文字后，相應(yīng)的文字并沒有顯示出來胯府。這個(gè)時(shí)候其實(shí)是沒有觸發(fā)OnClick()方法蚓聘，我們可以再次單擊一下即可，示例代碼如下：

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

觸發(fā)OnChange()事件

示例代碼：

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

在上面代碼使用到JQuery的一些方法盟劫，在頁面加載時(shí)需要添加jquery.js文件

最終的測(cè)試結(jié)果如下圖所示：

15-4 JS事件測(cè)試結(jié)果圖_c2i.jpg

調(diào)整滾動(dòng)條

在測(cè)試過程會(huì)遇到一個(gè)頁面無法全部顯示的狀態(tài)夜牡，這時(shí)候需要調(diào)整滾動(dòng)條的水平或垂直位置。我們可以采取以下的方法進(jìn)行調(diào)整：

使用JavaScript調(diào)整

driver.Url = "http:www.jb51.net";
driver.Manage().Window.Maximize();
//調(diào)整到底部
string jsToBottom = "window.scrollTo(0,document.body.scrollHeight)";
((IJavaScriptExecutor)driver).ExecuteScript(jsToBottom);
//調(diào)整到指定位置
IWebElement ele = driver.FindElement(By.XPath("http://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);

使用鍵盤組合鍵調(diào)整

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>測(cè)試Chosen下拉列表單選</h3>
    <h4>請(qǐng)選擇您的部門</h4>
    <select name="dept" id="dept1" style="width:200px" class="dept_select">
        <option value="請(qǐng)選擇部門">--請(qǐng)選擇部門--</option>
        <option value="開發(fā)">開發(fā)</option>
        <option value="測(cè)試">測(cè)試</option>
        <option value="產(chǎn)品">產(chǎn)品</option>
        <option value="市場(chǎng)">市場(chǎng)</option>
        <option value="銷售">銷售</option>
        <option value="財(cái)務(wù)">財(cái)務(wù)</option>
        <option value="人事">人事</option>
        <option value="技術(shù)">技術(shù)</option>
    </select>
    <br /><br />
    <h3>測(cè)試Chosen下拉列表多選</h3>
    <h4>請(qǐng)選擇您最希望去旅游的國家</h4>
    <select name="contry" id="contry1" style="width:200px" multiple="multiple" data-placeholder="請(qǐng)選擇國家" class="contry_select">
        <option value="請(qǐng)選擇國家">--請(qǐng)選擇國家--</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

從上面的代碼來看，其與標(biāo)準(zhǔn)的下拉列表框沒有太多區(qū)別影所，唯一區(qū)別就是class的內(nèi)容是調(diào)用了Chosen中的chosen()方法蹦肴。如果使用這種方式，則在瀏覽器加載顯示時(shí)猴娩，頁面select下面會(huì)添加以下的HTML代碼片斷：

<div class="chosen-container chosen-container-single" style="width: 15%;" title="" id="dept1_chosen">
    <a class="chosen-single" tabindex="-1">
        <span>--請(qǐng)選擇部門--</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">--請(qǐng)選擇部門--</li>
            <li class="active-result" style="" data-option-array-index="1">開發(fā)</li>
            <li class="active-result" style="" data-option-array-index="2">測(cè)試</li>
            <li class="active-result" style="" data-option-array-index="3">產(chǎn)品</li>
            <li class="active-result" style="" data-option-array-index="4">市場(chǎng)</li>
            <li class="active-result" style="" data-option-array-index="5">銷售</li>
            <li class="active-result" style="" data-option-array-index="6">財(cái)務(wù)</li>
            <li class="active-result" style="" data-option-array-index="7">人事</li>
        </ul>
    </div>
</div>

以上這些HTML片斷代碼都是動(dòng)態(tài)生成的阴幌，在HTML源碼中是無法看到的勺阐。我們可以在瀏覽器中使用快捷鍵F12進(jìn)行查看。

在測(cè)試之前矛双，我們先來看看如何選中選項(xiàng)

  • 1渊抽、單擊--請(qǐng)選擇部門--
  • 2、選擇一個(gè)選項(xiàng)

這樣的操作與標(biāo)準(zhǔn)的下拉列表框選擇并沒有什么不同议忽，我們可以使用Firefox來查看瀏覽器是如何運(yùn)行的懒闷。在Chosen插件中，當(dāng)我們單擊--請(qǐng)選擇部門--時(shí)栈幸，事實(shí)上單擊的是ID為dept1_chosen的div(==這里的ID實(shí)際上是select中設(shè)定的ID==)下面的鏈接chosen-single愤估。在點(diǎn)擊選擇下拉列表中的選項(xiàng)時(shí)，實(shí)際上選擇的是位于li中class為active-result下面的選項(xiàng)速址⊥嫜妫基于這些特點(diǎn)，我們就可以使用XPath來編寫腳本芍锚，示例代碼如下：

Thread.Sleep(2000);
driver.FindElement(By.XPath("http://div[@id='dept1_chosen']/a[contains(@class,'chosen-single')]")).Click();
ReadOnlyCollection<IWebElement> eles = driver.FindElements(By.XPath("http://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 == "財(cái)務(wù)")
    {
        eles[i].Click();
        break;
    }
}

在Chosen插件中昔园，可以允許輸入文字然后在選項(xiàng)中搜索查找選中，所以我們也可以使用以下方法進(jìn)行測(cè)試選中選項(xiàng)闹炉。

Thread.Sleep(2000);
driver.FindElement(By.XPath("http://div[@id='dept1_chosen']/a[contains(@class,'chosen-single')]")).Click();
IWebElement serachBoxEle = driver.FindElement(By.XPath("http://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插件中的下拉列表多選是一種增強(qiáng)版的下拉選項(xiàng)，如下圖所示：

15-5 Chosen多選示例圖_c2i.jpg

HTML源碼如下所示：

<h3>測(cè)試Chosen下拉列表多選</h3>
<h4>請(qǐng)選擇您最希望去旅游的國家</h4>
<select name="contry" id="contry1" style="width:200px" multiple="multiple" data-placeholder="請(qǐng)選擇國家" class="contry_select">
    <option value="請(qǐng)選擇國家">--請(qǐng)選擇國家--</option>
    <option value="中國">中國</option>
    <option value="美國">美國</option>
    <option value="英國">英國</option>
    <option value="法國">法國</option>
    <option value="德國">德國</option>
    <option value="俄羅斯">俄羅斯</option>
</select>

同單選一樣润樱，在瀏覽器加載時(shí)也會(huì)添加同樣的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="請(qǐng)選擇國家" 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">--請(qǐng)選擇國家--</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>

測(cè)試示例代碼如下：

Thread.Sleep(2000);
driver.FindElement(By.XPath("http://div[@id='contry1_chosen']//ul[contains(@class,chosen-choices)]//li[contains(@class,'search-field')]/input")).Click();
ReadOnlyCollection<IWebElement> firstMulEles = driver.FindElements(By.XPath("http://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("http://div[@id='contry1_chosen']//ul[contains(@class,chosen-choices)]//li[contains(@class,'search-field')]/input")).Click();
ReadOnlyCollection<IWebElement> SecondMulEles = driver.FindElements(By.XPath("http://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;
    }
}

在上面的代碼里面我們實(shí)現(xiàn)了多選，如果有要清除選擇的項(xiàng)壹若，該如何操作嗅钻？事實(shí)上，在清除時(shí)店展，我們是點(diǎn)擊選擇項(xiàng)右邊的x养篓，以下是清除指定項(xiàng)和全部清除

//清除指定指定項(xiàng)，注意里面的XPath用法
Thread.Sleep(500);
ReadOnlyCollection<IWebElement> clearSpecificEles = driver.FindElements(By.XPath("http://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("http://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();
    }
}

//清除所有選擇項(xiàng)
Thread.Sleep(500);
ReadOnlyCollection<IWebElement> clearEles = driver.FindElements(By.XPath("http://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();
}

到本節(jié)結(jié)束赂蕴，Selenium With C# 基礎(chǔ)教程系統(tǒng)就已經(jīng)算是結(jié)束了柳弄，后面有空再寫進(jìn)階系列的文章，謝謝各位的關(guān)注概说。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末碧注，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子糖赔，更是在濱河造成了極大的恐慌萍丐，老刑警劉巖，帶你破解...
    沈念sama閱讀 216,692評(píng)論 6贊 501
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件放典，死亡現(xiàn)場(chǎng)離奇詭異逝变，居然都是意外死亡基茵，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,482評(píng)論 3贊 392
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門壳影，熙熙樓的掌柜王于貴愁眉苦臉地迎上來拱层，“玉大人，你說我怎么就攤上這事态贤〔丈耄” “怎么了？”我有些...
    開封第一講書人閱讀 162,995評(píng)論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵悠汽，是天一觀的道長箱吕。 經(jīng)常有香客問我，道長柿冲，這世上最難降的妖魔是什么茬高？ 我笑而不...
    開封第一講書人閱讀 58,223評(píng)論 1贊 292
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮假抄，結(jié)果婚禮上怎栽，老公的妹妹穿的比我還像新娘。我一直安慰自己宿饱，他們只是感情好熏瞄，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,245評(píng)論 6贊 388
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著谬以，像睡著了一般强饮。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上为黎，一...
    開封第一講書人閱讀 51,208評(píng)論 1贊 299
  • 城市分裂傳說
    那天邮丰，我揣著相機(jī)與錄音，去河邊找鬼铭乾。 笑死剪廉，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的炕檩。 我是一名探鬼主播斗蒋，決...
    沈念sama閱讀 40,091評(píng)論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼笛质！你這毒婦竟也來了吹泡？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 38,929評(píng)論 0贊 274
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對(duì)情侶失蹤经瓷，失蹤者是張志新（化名）和其女友劉穎爆哑，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體舆吮，經(jīng)...
    沈念sama閱讀 45,346評(píng)論 1贊 311
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡揭朝，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,570評(píng)論 2贊 333
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年队贱，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片潭袱。...
    茶點(diǎn)故事閱讀 39,739評(píng)論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡柱嫌，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出屯换，到底是詐尸還是另有隱情编丘，我是刑警寧澤，帶...
    沈念sama閱讀 35,437評(píng)論 5贊 344
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布彤悔，位于F島的核電站嘉抓，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏晕窑。R本人自食惡果不足惜抑片，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,037評(píng)論 3贊 326
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望杨赤。 院中可真熱鬧敞斋，春花似錦、人聲如沸疾牲。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,677評(píng)論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽阳柔。三九已至焰枢，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間盔沫，已是汗流浹背医咨。 一陣腳步聲響...
    開封第一講書人閱讀 32,833評(píng)論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工枫匾， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留架诞，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,760評(píng)論 2贊 369
  • 代替公主和親
    正文 我出身青樓干茉，卻偏偏與公主長得像谴忧，于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子角虫，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,647評(píng)論 2贊 354

推薦閱讀更多精彩內(nèi)容