系列目錄 <https://www.cnblogs.com/tylerzhou/p/11204826.html>
通過前面的單元測(cè)試,我們能夠保證項(xiàng)目的基本模塊功能邏輯是正常的,通過集成測(cè)試能夠保證接口的請(qǐng)求是正常的.然而最終項(xiàng)目交付我們還需要對(duì)項(xiàng)目進(jìn)行頁面的行為進(jìn)行測(cè)試,比如頁面布局是否正常,按鈕是否能點(diǎn)擊,點(diǎn)擊后執(zhí)行的動(dòng)作是否正確,鏈接是否正常等功能進(jìn)行測(cè)試,表單提交是否返回正確結(jié)果等.這些都是一些墨盒測(cè)試,一般是由專門測(cè)試人員來完成,然而隨著web的發(fā)展,各種自動(dòng)化工具越來越完善,有一些頁面功能的測(cè)試也可以由程序員來編寫自動(dòng)測(cè)試代碼完成.這里主要結(jié)合Selenium來介紹如何完成頁面行為的測(cè)試.
點(diǎn)擊按鈕
前面我們已經(jīng)講到如何安裝和簡單使用Selenium,這里不再介紹.下面介紹一下如何使用Selenium來觸發(fā)一個(gè)按鈕點(diǎn)擊事件.
首先我們?cè)贖elloWorldController里新建Action FormTest(也可以在其它控制器里創(chuàng)建,這里隨意),代碼如下
public IActionResult FormTest() { return View(); } [HttpPost] public
IActionResult FormTest(string name) { return Content(name); }
以上代碼非常簡單,我們創(chuàng)建FormTest并請(qǐng)求自己,然后把請(qǐng)求的數(shù)據(jù)返回
我們?yōu)檫@個(gè)Action新建一個(gè)頁面,并且引入jquery.
頁面代碼如下
<!DOCTYPE html> <html> <head> <meta name="viewport"
content="width=device-width" /> <script src="~/js/JQueryt.js"></script>
<title>FormTest</title> </head> <body> <form method="post" id="frm1"> <input
id="btn1" type="button" value="點(diǎn)我"/> </form> <script>
$("#btn1").click(function() { alert("hello,world"); }); </script> </body>
</html>
這個(gè)頁面里有一個(gè)btn1,如果我們點(diǎn)擊它就會(huì)彈出一個(gè)alert框.
測(cè)試代碼如下
[Fact] public void ClickTest() { IWebDriver driver = new
ChromeDriver(Environment.CurrentDirectory); driver.Url =
"http://localhost:28614/HelloWorld/FormTest"; driver.Navigate(); var element =
driver.FindElement(By.Id("btn1")); element.Click(); }
我們先通過id找到這個(gè)按鈕,然后令它觸發(fā)一個(gè)click事件.我們運(yùn)行測(cè)試
我們并沒有手動(dòng)點(diǎn)擊按鈕,但是彈出了上面的彈框,說明點(diǎn)擊事件正確觸發(fā)了.
自動(dòng)填寫表單
通過以上代碼我們可以看到,觸發(fā)一個(gè)按鈕點(diǎn)擊事件在Selenium是非常容易的,這對(duì)我們自動(dòng)模擬表單提交提供了大大的便利.Selenium還可以模擬自動(dòng)填寫表單,思路和上面是一樣的,首先獲取到要填寫的表單,然后模擬填寫內(nèi)容.下面我們改動(dòng)一下網(wǎng)頁代碼,在form里面添加一個(gè)簡單的表單
<input type="text" name="name"/>
測(cè)試代碼改為如下:
[Fact] public void ClickTest() { IWebDriver driver = new
ChromeDriver(Environment.CurrentDirectory); driver.Url =
"http://localhost:28614/HelloWorld/FormTest"; driver.Navigate(); var input =
driver.FindElement(By.Name("name")); input.SendKeys("hello,world"); }
以上代通過FindElement By.Name獲取到頁面里name為name的元素(聽起來有點(diǎn)繞),然后通過SendKeys方法模擬向指定元素填寫內(nèi)容
頁面的開以后便會(huì)自動(dòng)填寫以上內(nèi)容.這樣我們就可以自動(dòng)填寫內(nèi)容,然后點(diǎn)擊點(diǎn)我按鈕提交表單了.
自動(dòng)填寫表單,然后提交
綜合以上我們模擬一次自動(dòng)填寫表單,然后提交的動(dòng)作.
下面貼出修改后的完整代碼.
<html> <head> <meta name="viewport" content="width=device-width" /> <script
src="~/js/JQueryt.js"></script> <title>FormTest</title> </head> <body> <form
method="post" id="frm1"> <input type="text" name="name"/> <input id="btn1"
type="button" value="點(diǎn)我"/> </form> <script> $("#btn1").click(function() {
$.ajax({ type: "POST", url: "/HelloWorld/FormTest", data:
$("#frm1").serialize(), dataType: "text", success: function (response) {
alert("返回的數(shù)據(jù)是:"+response); } }); }); </script> </body> </html>
這次當(dāng)按鈕點(diǎn)擊以后我們觸發(fā)一次ajax提交,然后alert服務(wù)器返回的數(shù)據(jù)
測(cè)試代碼如下:
[Fact] public void ClickTest() { IWebDriver driver = new
ChromeDriver(Environment.CurrentDirectory); driver.Url =
"http://localhost:28614/HelloWorld/FormTest"; driver.Navigate(); var input =
driver.FindElement(By.Name("name")); input.SendKeys("hello,world"); var btn =
driver.FindElement(By.Id("btn1")); btn.Click(); }
上面的代碼執(zhí)行了兩個(gè)動(dòng)作,第一是模擬填寫表單數(shù)據(jù),第二是點(diǎn)擊按鈕,提交表單.
我們運(yùn)行測(cè)試代碼,看一下結(jié)果
可以看到表單自動(dòng)提交了.
獲取Alert框
我們前面都是通過截圖來看指定的行為是否產(chǎn)生了正確的結(jié)果,然而在自動(dòng)化環(huán)境中這是不能接受的,更多的時(shí)候我們是在無頭模式下進(jìn)行測(cè)試,然后自動(dòng)獲取行為產(chǎn)生的結(jié)果,然后斷言此結(jié)果是否是期待的一個(gè)值.下面我們改造以上代碼,自動(dòng)獲致到Alert框并取得它里面的值,然后斷言這個(gè)值是我們想要的值.
[Fact] public void ClickTest() { IWebDriver driver = new
ChromeDriver(Environment.CurrentDirectory); driver.Url =
"http://localhost:28614/HelloWorld/FormTest"; driver.Navigate(); var input =
driver.FindElement(By.Name("name")); input.SendKeys("hello,world"); var btn =
driver.FindElement(By.Id("btn1")); btn.Click(); Thread.Sleep(3000); var alert =
driver.SwitchTo().Alert(); var txt = alert.Text;
Assert.Equal("返回的數(shù)據(jù)是:hello,world", txt); }
以上代碼的關(guān)鍵是通過SwitchTo獲取到Alert框,進(jìn)而獲取到它的Text值,我們?cè)赼jax請(qǐng)求成功的處理是"返回的數(shù)據(jù)是:"
+提交的值,因此如果正常則以上代碼會(huì)執(zhí)行成功.這樣我們就不用守著頁面查看結(jié)果了.
獲取自定義彈出層
做到以上并沒有成事大吉,實(shí)際業(yè)務(wù)中我們很少使用瀏覽器自帶的Alert,而是使用一些第三方的組件,因?yàn)樵鶤lert用戶體驗(yàn)實(shí)在不是太好,只能在測(cè)試的時(shí)候玩一玩還可以.由于第三方組件實(shí)現(xiàn)方式不同,這就導(dǎo)致獲取的方法也不一樣,我們還要根據(jù)具體情況而定.下面我們結(jié)合layui的alert框來介紹一下如何來獲取它里面的內(nèi)容.
我們?cè)陧?xiàng)目中引入layui,然后把a(bǔ)jax請(qǐng)求成功后的alert換成layui的alert,代碼如下
<html> <head> <meta name="viewport" content="width=device-width" /> <link
href="~/lib/layui/css/layui.css" rel="stylesheet" /> <script
src="~/lib/jquery/dist/jquery.js"></script> <script
src="~/lib/layui/layui.all.js"></script> <title>FormTest</title> </head> <body>
<form method="post" id="frm1"> <input type="text" name="name"/> <input
id="btn1" type="button" value="點(diǎn)我"/> </form> <script> var layer = layui.layer;
$("#btn1").click(function() { $.ajax({ type: "POST", url:
"/HelloWorld/FormTest", data: $("#frm1").serialize(), dataType: "text",
success: function (response) { layer.alert("返回的數(shù)據(jù)是:" + response); } }); });
</script> </body> </html>
由于這是一個(gè)自定義alert,我們先運(yùn)行一下項(xiàng)目,然后手動(dòng)點(diǎn)擊下按鈕,等alert框出來以后我們分析一下它的結(jié)構(gòu):
我們可以看到,layui的這個(gè)alert框?qū)嶋H上是一個(gè)div層,由于id是動(dòng)態(tài)生成的,因此我們不能使用,但是它的class是固定的,它包含了兩個(gè)class元素,內(nèi)部彈出的具體內(nèi)容則是藍(lán)色高亮的那個(gè)div里面的內(nèi)容,它的class也是固定的,我們這里可以使用class獲取到它們.
下面看測(cè)試代碼:
[Fact] public void ClickTest() { IWebDriver driver = new
ChromeDriver(Environment.CurrentDirectory); driver.Url =
"http://localhost:28614/HelloWorld/FormTest"; driver.Navigate(); var input =
driver.FindElement(By.Name("name")); input.SendKeys("hello,world"); var btn =
driver.FindElement(By.Id("btn1")); btn.Click(); Thread.Sleep(3000); var layer =
driver.FindElement(By.ClassName("layui-layer-dialog")); var content =
layer.FindElement(By.ClassName("layui-layer-content")); var text =
content.Text; Assert.Equal("返回的數(shù)據(jù)是:hello,world", text); }
產(chǎn)生我們通過class獲取到這個(gè)彈出層元素,然后再通過它找到它的子元素(包含彈出信息文字的div).這里的sleep前面說過,由于js是異步執(zhí)行的,因此點(diǎn)擊后并不能馬上獲取到結(jié)果,這里我們sleep一下.
需要特別注意的是,通過By.ClassName獲取到的元素可能不止一下,默認(rèn)取得的是獲取到的第一個(gè),這在有些時(shí)候可能并不能滿足我們的要求(這里代碼比較少,發(fā)生沖突的機(jī)率比較小),實(shí)際工作中我們一定要想辦法保證元素的惟一性,也就是獲取到的元素確定是我們所需要的.
還有一點(diǎn)需要注意的是第三方的組件實(shí)現(xiàn)方式可能會(huì)改變導(dǎo)致獲取不到內(nèi)容,這確實(shí)沒有比較好的解決方案.
實(shí)際工作中可能還會(huì)有更為復(fù)雜的行為要去模擬,比如說彈出層是一個(gè)帶有tab的面板,我們需要切換到特定的tab去尋找想要的內(nèi)容,由于這些內(nèi)容都是非標(biāo)準(zhǔn)實(shí)現(xiàn),因此模擬的難度根據(jù)采用框架的復(fù)雜度而定,有時(shí)候可能特別復(fù)雜,但是只要靜下心來分析分析,總是能找到解決方案的.
前面講到了如何填寫表單,點(diǎn)擊按鈕提交表單以及獲取彈出層內(nèi)容.下面講解一下如何獲取鏈接,彈出頁面,iframe以及高級(jí)行為.這里仍然是以實(shí)際應(yīng)該為主導(dǎo)講解一些最基本最常用的功能,并不求面面俱到,有興趣的同事可以查看官方文檔,第三方博客,書籍等獲取更多知識(shí).
鏈接行為測(cè)試
鏈接很多時(shí)候可以完成按鈕的功能,但是最常用的是跳到一個(gè)新的頁面,下面講一下如何獲取到新的頁面
我們?cè)谏瞎?jié)的頁面中添加一個(gè)a鏈接,代碼如下:
<a id="clk" href="http://www.baidu.com" target="_blank">飛往百度</a>
以上代碼很簡單,點(diǎn)擊一下a標(biāo)簽就會(huì)出現(xiàn)一個(gè)新的百度頁面,我們想要判斷一下是否正確打開了百度頁面,測(cè)試代碼如下:
[Fact] public void LinkClick() { IWebDriver driver = new
ChromeDriver(Environment.CurrentDirectory); driver.Url =
"http://localhost:28614/HelloWorld/FormTest"; driver.Navigate(); var link =
driver.FindElement(By.Id("clk")); link.Click(); var hands =
driver.WindowHandles; var wind = driver.SwitchTo().Window(hands[1]); var title
= wind.Title; Assert.Equal("百度一下,你就知道", title); }
上面代碼主要的功能在于當(dāng)點(diǎn)擊鏈接以后通過driver.WindowHandles獲取到容器的句柄,需要說明的是這里的句柄并不是指針類型的句柄,而是一個(gè)字符串類類型的變量,我們可以通過它找到指定的窗口,下面部分通過SwitchTo切換到一個(gè)窗口(SwitchTo我們前面講到過),Window接收一個(gè)字符串類開的參數(shù),雖然提示字符說是窗口的標(biāo)題,實(shí)際上并不是,而是我們剛才獲取到的句柄,我們知道現(xiàn)在共有兩個(gè)窗口,百度窗口是后打開的,因此它的索引是是1.然后我們?cè)佾@取它的標(biāo)題,看看是不是"百度一下,
你就知道"
需要說明的是,以上我們雖然是通過索引獲取的百度窗口,這樣可能會(huì)因?yàn)槲恢们袚Q造成問題(這里強(qiáng)烈不建議手動(dòng)修改自動(dòng)過程中的行為,實(shí)際上真實(shí)的測(cè)試環(huán)境是無頭環(huán)境,因此這其實(shí)不是一個(gè)很大的問題),就上面的例子我們確實(shí)有辦法能惟一確定百度窗口,但是如果窗口過多想要不使用索引獲取到指定的窗口還是很困難的,這里強(qiáng)烈建議如果有打開非常多的窗口的復(fù)雜行為時(shí),把測(cè)試分成若干個(gè)測(cè)試,每個(gè)測(cè)試?yán)锏倪壿嬛淮蜷_少量窗口,這樣出現(xiàn)問題也更容易排查.
點(diǎn)擊時(shí)按下修改鍵
前面我們多次用到了模擬點(diǎn)擊事件,其實(shí)這也是實(shí)際項(xiàng)目中用的最多的,但是也不排除少數(shù)情況下會(huì)用到其它的按鍵,比如說拖拽,雙擊,ctrl+點(diǎn)擊等,
下面我們演示如何在百度首頁點(diǎn)擊百度新聞并在新頁面打開,我們知道百度首頁的新聞默認(rèn)是在本頁打開的,如果點(diǎn)擊鏈接時(shí)按下ctrl鍵則會(huì)在新頁面中打開.下面我們模擬ctrl+點(diǎn)擊這個(gè)行為
這里其實(shí)也很簡單,主要通過Actions封裝對(duì)象來觸發(fā)一系列動(dòng)作來達(dá)到我們的目的.
下面看測(cè)試代碼:
[Fact] public void LinkClick() { IWebDriver driver = new
ChromeDriver(Environment.CurrentDirectory); driver.Url =
"http://www.baidu.com"; driver.Navigate(); var link =
driver.FindElement(By.LinkText("新聞")); Actions actions = new Actions(driver);
actions.KeyDown(Keys.LeftControl).Click(link).Build().Perform(); }
以上代碼主要是通過傳入driver對(duì)象構(gòu)造一個(gè)Actions類型對(duì)象,這個(gè)對(duì)象在調(diào)用build之前會(huì)一直返回自身,類似是是jQuery里的鏈?zhǔn)讲僮?這樣我們就可以連續(xù)執(zhí)行多個(gè)動(dòng)作.
下面的代碼我們先是調(diào)用actions對(duì)象的keyDown方法,然后傳入要按下的鍵,然后再調(diào)用點(diǎn)擊事件,最后調(diào)用Build方法終止鏈?zhǔn)秸{(diào)用,最后再執(zhí)行Perform執(zhí)行前面的操作.啟動(dòng)測(cè)試就會(huì)發(fā)現(xiàn)瀏覽器在新的頁面打開了百度新聞頁
上面用到了一個(gè)以前沒用到的選擇方法那就是By.LinkText,語義非常明確那就是根據(jù)鏈接的文本找到鏈接對(duì)象.
Iframe對(duì)象的獲取
我們知道Iframe對(duì)象的處理比較麻煩,里面是一個(gè)比較封裝的區(qū)域與外面通信過程比較麻煩,在selenium里它的處理也比較特殊,直接按照id或者其它特征獲取到它幾乎沒有任何作用,因?yàn)闊o法獲取到內(nèi)容元素,selenium是通過switchTo.Frame傳入獲取到的iframe對(duì)象對(duì)它進(jìn)行一層封裝,然后就能夠正常獲取到它內(nèi)部的元素了.
我們?cè)陧撁嫣砑右粋€(gè)簡單的iframe頁面,代碼如下
<iframe id="ifrm1" src="http://www.baidu.com"></iframe>
測(cè)試代碼如下
[Fact] public void FindIframe() { IWebDriver driver = new
ChromeDriver(Environment.CurrentDirectory); driver.Url =
"http://localhost:28614/HelloWorld/FormTest"; driver.Navigate(); var ele =
driver.FindElement(By.Id("ifrm1")); var frm = driver.SwitchTo().Frame(ele); var
txt = frm.FindElement(By.LinkText("新聞")).Text; Assert.Equal("新聞", txt); }
以上代碼首先像獲取普通元素一樣獲取到這個(gè)iframe對(duì)象,然后通過SwitchTo.Frame把它傳入封裝成個(gè)frame對(duì)象,后面就可以獲取到它內(nèi)部的元素了.(iframe指向百度首頁,我們獲取到新聞鏈接)
然而實(shí)際項(xiàng)目中,往往我們并不自己去創(chuàng)建iframe,而是由一些第三方ui框架自動(dòng)創(chuàng)建的,框架生成的iframe要么沒有id,要么是動(dòng)態(tài)的,因此使用自動(dòng)生成元素的id要非常慎重,但是筆者見過不少在生成iframe時(shí)可以給iframe指定name的,由于頁面中iframe一般都不會(huì)太多,我們可以給它命一個(gè)惟一的名字,通過名字找到它.如果沒有名字,還可以根據(jù)它的class找到它,一般iframe樣式class都是固定的,但是這時(shí)候要想辦法確保選擇到的對(duì)象是惟一的,這樣才能保證測(cè)試結(jié)果的穩(wěn)定性.
獲取下拉列表
在一些查詢功能中,往往全有下拉列表,通過js獲取或者設(shè)置下拉項(xiàng)并不是一件很困難的事,然而我們并不想不了測(cè)試而增加無關(guān)的js代碼,這樣用完還要?jiǎng)h除非常麻煩,其實(shí)Selenium也提供了設(shè)置下拉列表選項(xiàng)的功能,這樣極大方便了我們的測(cè)試.
下面看示例代碼
我們首先 在頁面中添加如下代碼
<select name="China" id="zhengzhouDistrict"> <option
value="">--請(qǐng)選擇區(qū)域--</option> <option value="pdditrict">中原區(qū)</option> <option
value="hpditrict">二七區(qū)</option> <option value="xhditrict">管城區(qū)</option> <option
value="cnditrict">高新區(qū)</option> <option value="sjditrict">開發(fā)區(qū)</option> </select>
測(cè)試代碼如下:
[Fact] public void DropDownListTest() { IWebDriver driver = new
ChromeDriver(Environment.CurrentDirectory); driver.Url =
"http://localhost:28614/HelloWorld/FormTest"; driver.Navigate(); var element =
driver.FindElement(By.Id("zhengzhouDistrict")); SelectElement dropdownList =
new SelectElement(element); dropdownList.SelectByIndex(3); var select =
dropdownList.SelectedOption.Text; Assert.Equal("管城區(qū)", select); }
以上代碼中我們先是通過普通方法獲取到了這個(gè)下拉列表,然后把它封裝成一個(gè)SelectElement對(duì)象,然后調(diào)用它的SelectByIndex設(shè)置選中的項(xiàng),這樣選中的項(xiàng)就是不默認(rèn)值了,而是我們想要選擇的值.
select還有按索引,鍵,值等設(shè)置選擇項(xiàng)的方法,并且可以取消選擇,大家自己嘗試一下,這里不再介紹.
然而以上方法并沒有什么太大作用,由于瀏覽器自帶的select界面往往都不太美觀,并且動(dòng)態(tài)交互性不是非常好,實(shí)際項(xiàng)目中我們很少使用原生的select,而是使用第三方ui框架帶的select,而第三方框架往往都是把select隱藏起來,然后把它的值賦值給一個(gè)input元素,它設(shè)置和獲取值都是通過第三方框架提供的api而非原生select自帶的方法.如果這時(shí)候使用以上方法獲取select元素就會(huì)導(dǎo)致失敗,selenium會(huì)提交元素被隱藏?zé)o法交互.針對(duì)這個(gè)問題筆者采用了一種比較笨的方法那就是模擬按鍵,當(dāng)然這里模擬按鍵并不引入第三方按鍵類框架,而是使用selenium本身的功能.
下面仍然以layui為例說明如何設(shè)置下拉列表值.
頁面代碼如下
<html> <head> <meta name="viewport" content="width=device-width" /> <link
href="~/lib/layui/css/layui.css" rel="stylesheet" /> <script
src="~/lib/jquery/dist/jquery.js"></script> <script
src="~/lib/layui/layui.all.js"></script> <title>FormTest</title> </head> <body>
<form class="layui-form" action=""> <div class="layui-form-item"> <div
class="layui-input-inline"> <select name="China" id="zhengzhouDistrict">
<option value="">--請(qǐng)選擇區(qū)域--</option> <option value="pdditrict">中原區(qū)</option>
<option value="hpditrict">二七區(qū)</option> <option value="xhditrict">管城區(qū)</option>
<option value="cnditrict">高新區(qū)</option> <option value="sjditrict">開發(fā)區(qū)</option>
</select> </div> </div> </form> <script> var layer = layui.layer; var form =
layui.form; form.render(); </script> </body> </html>
以上代碼和上面的類似,只是這里把它封裝成layui的select,我們的思路是先獲取到layui的顯示select的元素,也就是最終渲染的input元素,經(jīng)過觀察發(fā)現(xiàn)這個(gè)元素有一個(gè)這樣的樣式layui-input,我們可以通過這個(gè)關(guān)鍵信息找到它,然后點(diǎn)擊一下,這時(shí)候下拉列表就出來了,此時(shí)再點(diǎn)擊向下按鈕,在想要的位置處click一下就可以得到想要的結(jié)果了.
測(cè)試代碼如下:
[Fact] public void DropDownListTest() { IWebDriver driver = new
ChromeDriver(Environment.CurrentDirectory); driver.Url =
"http://localhost:28614/HelloWorld/FormTest"; driver.Navigate(); var input =
driver.FindElement(By.ClassName("layui-input")); input.Click(); Actions action
= new Actions(driver);
action.SendKeys(Keys.ArrowDown+Keys.ArrowDown+Keys.ArrowDown).Click().Build().Perform();
}
以上主要是使用的Actions連續(xù)點(diǎn)擊兩次向下,就可以選擇到指定的元素了.
日期框處理
這里結(jié)合layui來講解如何處理日期框的問題
首先我們來觀察一下layui日期輸入框的特點(diǎn),它其實(shí)是一個(gè)input,并且是可以接受用戶輸入的,這就跟我們模擬手動(dòng)輸入帶來了方便,但是事情并沒有這么簡單,我們可以看到手輸內(nèi)容之后還要點(diǎn)擊那個(gè)彈出層的確定按鈕來確認(rèn)輸入,一旦點(diǎn)擊了確定則會(huì)把彈出層默認(rèn)選中的日期輸入到input框中,覆蓋了剛才的選擇.然而它卻有以下一個(gè)特點(diǎn):如果我們輸入以后不點(diǎn)擊確認(rèn),而是把光標(biāo)移到空白色點(diǎn)擊或者光標(biāo)焦點(diǎn)移到其它可輸入元素內(nèi),則也可以確認(rèn)輸入.這樣我們就可以在日期輸入框輸入內(nèi)容以后再把焦點(diǎn)移到其它輸入框就能夠確認(rèn)輸入了.
頁面代碼如下:
<html> <head> <meta name="viewport" content="width=device-width" /> <link
href="~/lib/layui/css/layui.css" rel="stylesheet" /> <script
src="~/lib/jquery/dist/jquery.js"></script> <script
src="~/lib/layui/layui.all.js"></script> <title>FormTest</title> </head> <body>
<div class="layui-inline"> <input type="text" class="layui-input" id="test1">
<input type="text" id="input1"/> </div> <script> var laydate = layui.laydate;
laydate.render({ elem: '#test1' }); </script> </body> </html>
以上有兩個(gè)input框,一個(gè)是普通input,一個(gè)是日期框,我們模擬在日期輸入框輸入內(nèi)容后把焦點(diǎn)移動(dòng)它右邊空白處點(diǎn)擊,然后看看上面日期輸入框里的值是不是我們賦予的.
測(cè)試代碼如下:
[Fact] public void DropDownListTest() { IWebDriver driver = new
ChromeDriver(Environment.CurrentDirectory); driver.Url =
"http://localhost:28614/HelloWorld/FormTest"; driver.Navigate(); var input =
driver.FindElement(By.Id("test1")); input.SendKeys("2008-5-3"); var position =
input.Location; var clickposition = position.X + 200; Actions actions = new
Actions(driver); actions.MoveByOffset(clickposition,
0).Click().Build().Perform(); var txt = input.GetAttribute("value");
Assert.Equal("2008-05-03", txt); }
以上代碼我們首先獲取到這個(gè)日期選擇框,然后給它輸入值.下面我們獲取它的位置主要是為了讓它關(guān)閉(如果點(diǎn)擊了空白處或者其它可點(diǎn)擊控件,則日期選擇框就會(huì)消失,這里只所以要關(guān)閉它是因?yàn)樗?dāng)前處于激活狀態(tài),如果不關(guān)閉則會(huì)影響其它操作).我們獲取到它的位置后向右移動(dòng)鼠標(biāo)到空白處,然后點(diǎn)擊空白處日期選擇框就消失了.我們輸入的是'2008-5-3'而斷言它是'2008-05-03'是因?yàn)閘ayui有格式糾正功能,自動(dòng)把一位的數(shù)據(jù)前面補(bǔ)零.
這里獲取input的值是通過GetAttribute獲取的,而不是通過Text,text是獲取元素內(nèi)部的文本(也就是文本包含在標(biāo)簽里),而input的值是它的value屬性的一個(gè)值,因此使用Text獲取不到.
一定要注意點(diǎn)擊位置,如果點(diǎn)擊位置位于鏈接或者提交按鈕上則可能觸發(fā)不可預(yù)期的效果.
前面我們介紹了如何通過普通的方法給元素設(shè)置值以及模擬特定的行為,本篇主要介紹如何獲取頁面cookie,如何模擬手機(jī)測(cè)試.
獲取頁面cookie
有些比較復(fù)雜的測(cè)試可能會(huì)用到cookie,在Selenium里通過driver.Manage().Cookies就可以獲取到頁面所有的cookie對(duì)象了.
模擬手機(jī)瀏覽器
由于目前沒有手機(jī)項(xiàng)目,這里并不詳細(xì)介紹,只是作為一個(gè)知識(shí)點(diǎn)簡單介紹一下.
看以下測(cè)試代碼
[Fact] public void DropDownListTest() { ChromeOptions opts = new
ChromeOptions(); opts.EnableMobileEmulation("iPhone X"); IWebDriver driver =
new ChromeDriver(Environment.CurrentDirectory,opts); driver.Url =
"http://www.baidu.com"; driver.Navigate(); }
這里主要是增加一個(gè)谷歌瀏覽器啟用模擬手機(jī)瀏覽器選項(xiàng),并指定一個(gè)模擬器的名字(這些名字可以通過谷歌瀏覽器的手機(jī)模式查看).然后再啟動(dòng)頁面就會(huì)在指定的手機(jī)模擬器運(yùn)行了.
以上運(yùn)行結(jié)果截圖如下:
熱門工具 換一換
感谢您访问我们的网站,您可能还对以下资源感兴趣:
调教肉文小说-国产成本人片免费av-空姐av种子无码-在线观看免费午夜视频-综合久久精品激情-国产成人丝袜视频在线观看软件-大芭区三区四区无码-啊啊好爽啊啊插啊用力啊啊-wanch视频网-国产精品成人a免费观看