|
無論哪一種自動(dòng)化測試的驅(qū)動(dòng)框架（基于B/S，桌面應(yīng)用，還是手機(jī)App）。都應(yīng)當(dāng)具有一套優(yōu)秀的元素定位技術(shù)。通常的自動(dòng)化測試流程也可以簡單的歸結(jié)為是一個(gè)從被測試程序中識(shí)別或是定位元素以及執(zhí)行操作和驗(yàn)證元素的過程。這一篇我們就開始給大家介紹一下Selenium中是如何定位DOM元素的。本文將會(huì)介紹如下內(nèi)容：
（一）Selenium DOM主要定位方式上一篇中，我們介紹了WebDriver 和 WebElement兩個(gè)類型。他們都具有方法FindElement和FindElements。 這便是Selenium WebDriver的API提供給我們的元素定位方式。IWebDriver要求同時(shí)實(shí)現(xiàn)接口ISearchContext，元素查找的方法便是在這個(gè)接口中定義的： 1 public interface IWebDriver : ISearchContext, IDisposable 2 { 3 //省略部分Code... ... 4 }  1 namespace OpenQA.Selenium 2 { 3 // Summary: 4 // Defines the interface used to search for elements. 5 public interface ISearchContext 6 { 7 IWebElement FindElement(By by); 8 9 ReadOnlyCollection<IWebElement> FindElements(By by); 10 } 11 } 他們都會(huì)接受一個(gè)By類型的參數(shù)。該類型的官網(wǎng)定義如下所示，Selenium主要提供了以下幾種方式定位元素：
元素定位的調(diào)用方式如下： 1 IWebDriver driver = new FirefoxDriver (); 2 IWebElement element; 3 4 element = driver.FindElement(By.Id("ObjectID")); 5 element = driver.FindElement(By.Name("ObjectName")); 6 element = driver.FindElement(By.ClassName("ObjectClassName")); 7 element = driver.FindElement(By.TagName("ObjectTagText")); 8 element = driver.FindElement(By.LinkText("ObjectLinkText")); 9 element = driver.FindElement(By.PartialLinkText( "ObjectPartialLinkText")); 10 11 // Use css selector. 12 element = driver.FindElement(By.CssSelector( "CssSelector For Object")); 13 // Use xPath. 14 element = driver.FindElement(By.XPath("XPath For Object")); 下面簡單的介紹一下DOM元素的ID，Name，ClassName... ...XPath，CssSelector都是些什么鬼？ 當(dāng)然，如果你是一個(gè)已經(jīng)很熟悉這些概念的小伙伴就可以直接忽略這部分內(nèi)容。關(guān)于DOM元素的基本概念和知識(shí)這里我就不詳細(xì)的描述了，有興趣的小伙伴可以到這個(gè)鏈接學(xué)習(xí)一下：http://www.runoob.com/html/html-tutorial.html。 簡單的說基本的HTML元素（DOM元素）構(gòu)成了網(wǎng)頁的內(nèi)容，每個(gè)元素都是以一個(gè)個(gè)DOM標(biāo)簽的形式表現(xiàn)出來的。下面是一個(gè)網(wǎng)頁標(biāo)簽的結(jié)構(gòu)。我標(biāo)出了ID，TagName，ClassName，Name所對應(yīng)了位置。 結(jié)合之前介紹的By Class提供的靜態(tài)方法。我們就可以定位到對應(yīng)的HTML元素的位置。說到這里，很多資料或是書本都會(huì)有這樣的描述：“編碼中，使用ID，Name，Class屬性是定位元素的首選方法”。沒錯(cuò)這些元素定位簡單直接，而且理論上的執(zhí)行效率較快。但是（請注意，我說了但是～～～），現(xiàn)實(shí)的情況是開發(fā)人員可能根本就沒有為元素定義這些屬性，或者實(shí)際的應(yīng)用ID是自動(dòng)隨機(jī)生成的，Name和ClassName又不能準(zhǔn)確的唯一定位，此刻我們就需要其他的方式來定位元素。這也是XPath和Css選擇器的作用了，實(shí)際的工作中，這兩種定位方式應(yīng)當(dāng)是伴隨你的主要方式，so ... ... 好好了解一下還是很有必要的。關(guān)于XPath和Css選擇器的語法已經(jīng)超出了我們要討論的問題，想了解的小伙伴可以網(wǎng)上找一下相關(guān)的資料，這里我就不多說了。下面我們可以看一下定位博客園首頁導(dǎo)航的XPath： 1 var divMain = driver.FindElement(By.Id("main")); 2 var lnkHome = driver.FindElement(By.XPath(".//ul[@class='post_nav_block']/li[1]/a")); 3 var lnkEssence = driver.FindElement(By.XPath(".//ul[@class='post_nav_block']/li[2]/a")); 4 var lnkCandidate = driver.FindElement(By.XPath(".//ul[@class='post_nav_block']/li[3]/a")); 5 var lnkNews = driver.FindElement(By.XPath(".//ul[@class='post_nav_block']/li[4]/a")); 關(guān)于獲取超鏈接元素的兩個(gè)方法By.LinkText和By.PartialLinkText，簡單明了，在此我就不多做介紹了。 （二）Selenium 如何擴(kuò)展元素定位的方式除了基本的定位方式之外，如果我們想擁有自定義的定位應(yīng)該如何處理呢？比如，我們的測試過程中，我們想一次性獲取到所有CSS樣式是.btn的input標(biāo)簽應(yīng)當(dāng)如何處理？ Selenium本身的底層驅(qū)動(dòng)是基于JS的，同時(shí)也為我們上層的使用者（測試CASE編寫者或測試框架開發(fā)者）為提供了可以的執(zhí)行自定義JS，并返回?cái)?shù)據(jù)的方法。回顧一下上文中將到的核心對象WebDriver，都是繼承自RemoteWebDriver。而RemoteWebDriver實(shí)現(xiàn)了IJavaScriptExecutor接口，該接口定義了執(zhí)行JS的行為： 1 namespace OpenQA.Selenium 2 { 3 // Summary: 4 // Defines the interface through which the user can execute JavaScript. 5 public interface IJavaScriptExecutor 6 { 因此，我們可以利用如下方式來執(zhí)行我們自定義的JS，略懂JavaScript的同學(xué)看到這里，貌似應(yīng)該明白了什么。沒錯(cuò)，你可以自由的翱翔了（定義任何你想要的定位邏輯，不僅僅是定位元素）。當(dāng)然，這個(gè)只是Selenium提供的接口，真正的使用和企業(yè)級(jí)的封裝有機(jī)會(huì)的話我會(huì)開一個(gè)新的系列為大家介紹，本節(jié)先介紹到這里。 1 IJavaScriptExecutor jsExecutor = driver as IJavaScriptExecutor ; 2 jsExecutor.ExecuteScript("return $('#elementID')"); （三）瀏覽器輔助工具編程就像習(xí)武，功力深厚固然好，但總要有合手的兵器。接下來，為大家推薦一下元素定位可能會(huì)用到的工具： 如果你用的是Firefox瀏覽器，建議你下載Firebug和FirePath:
如果你用的是Chrome或是IE瀏覽器，他們都有內(nèi)置的開發(fā)者工具。 關(guān)于XPath的驗(yàn)證步驟，請參考下圖（輸入Xpath>點(diǎn)擊Eval>查看定位到的元素）： （四）Demo說了這么多，又到了做Demo時(shí)候了。so... 同樣做了個(gè)簡單的Demo供大家參考。Code上傳到Github地址是：https://github.com/DemoCnblogs/Selenium，本節(jié)的Demo是用來驗(yàn)證了博客園首頁的導(dǎo)航欄內(nèi)的文字是否正確，使用了幾種方式獲取DOM元素，代碼如下： 1 using OpenQA.Selenium; 2 using OpenQA.Selenium.Firefox; 3 using System.Collections.Generic; 4 using Xunit; 5 using Xunit.Abstractions; 6 7 namespace Demo.SeleniumTest 8 { 9 public class Lesson03_FindElement 10 { 11 /// <summary> 12 /// 輸出對象 13 /// </summary> 14 private readonly ITestOutputHelper _output; 15 /// <summary> 16 /// 構(gòu)造函數(shù)，初始化輸出對象 17 /// </summary> 18 /// <param name="output">注入輸出對象</param> 19 public Lesson03_FindElement(ITestOutputHelper output) 20 { 21 this._output = output; 22 } 23 24 /// <summary> 25 /// demo1 : 獲取元素 26 /// </summary> 27 [Fact(DisplayName = "Cnblogs.CheckNavBar.Demo1")] 28 public void CheckNavBar_GetElement() 29 { 30 _output.WriteLine("Step 01 : 啟動(dòng)瀏覽器并打開博客園首頁。"); 31 IWebDriver driver = new FirefoxDriver(); 32 driver.Url = "http://www.cnblogs.com"; 33 34 _output.WriteLine("Step 02 : 尋找需要檢查的頁面元素。"); 35 var divMain = driver.FindElement(By.Id("main")); 36 var lnkHome = driver.FindElement(By.XPath(".//ul[@class='post_nav_block']/li[1]/a")); 37 var lnkEssence = driver.FindElement(By.XPath(".//ul[@class='post_nav_block']/li[2]/a")); 38 var lnkCandidate = driver.FindElement(By.XPath(".//ul[@class='post_nav_block']/li[3]/a")); 39 var lnkNews = driver.FindElement(By.XPath(".//ul[@class='post_nav_block']/li[4]/a")); 40 41 _output.WriteLine("Step 03 : 檢查導(dǎo)航條文字信息。"); 42 Assert.Equal<string>("首頁", lnkHome.Text); 43 Assert.Equal<string>("精華", lnkEssence.Text); 44 Assert.Equal<string>("候選", lnkCandidate.Text); 45 Assert.Equal<string>("新聞", lnkNews.Text); 46 47 _output.WriteLine("Step 04 : 關(guān)閉瀏覽器。"); 48 driver.Close(); 49 } 50 51 52 [Fact(DisplayName = "Cnblogs.CheckNavBar.Demo2")] 53 public void CheckNavBar_GetElements() 54 { 55 _output.WriteLine("Step 00 : 準(zhǔn)備測試數(shù)據(jù)。"); 56 var testDatas = new List<string>() { "首頁", "精華", "候選", "新聞" }; //準(zhǔn)備測試數(shù)據(jù) 57 58 _output.WriteLine("Step 01 : 啟動(dòng)瀏覽器并打開博客園首頁。"); 59 IWebDriver driver = new FirefoxDriver(); 60 driver.Url = "http://www.cnblogs.com"; 61 62 _output.WriteLine("Step 02 : 尋找需要檢查的頁面元素。"); 63 var divMain = driver.FindElement(By.Id("main")); 64 var lnkNavList = driver.FindElements(By.XPath(".//ul[@class='post_nav_block']/li[1]/a")); 65 66 _output.WriteLine("Step 03 : 檢查導(dǎo)航條文字信息。"); 67 for (var i = 0; i < lnkNavList.Count; i++) 68 { 69 Assert.Equal<string>(testDatas[i], lnkNavList[i].Text); 70 } 71 _output.WriteLine("Step 04 : 關(guān)閉瀏覽器。"); 72 driver.Close(); 73 } 74 } 75 } 
總結(jié)：本文主要介紹了以下幾點(diǎn)內(nèi)容。
關(guān)于《Selenium For C#》 系列，我計(jì)劃給大家逐一介紹一些Selenium Driver的基礎(chǔ)知識(shí)和框架的擴(kuò)展點(diǎn)。 當(dāng)然，之后會(huì)有更多關(guān)于測試框架構(gòu)以及軟件構(gòu)建方面的文章。愿我主保佑我有時(shí)間做完這件事情... ... 《Selenium For C#》的相關(guān)文章：Click here.
說明：Demo地址：https://github.com/DemoCnblogs/Selenium 如果您認(rèn)為這篇文章還不錯(cuò)或者有所收獲，可以點(diǎn)擊右下角的【推薦】按鈕，因?yàn)槟愕闹С质俏依^續(xù)寫作，分享的最大動(dòng)力！
作者：小北@North
來源：http://www.cnblogs.com/NorthAlan
聲明：本博客原創(chuàng)文字只代表本人工作中在某一時(shí)間內(nèi)總結(jié)的觀點(diǎn)或結(jié)論，與本人所在單位沒有直接利益關(guān)系。非商業(yè)，未授權(quán)，貼子請以現(xiàn)狀保留，轉(zhuǎn)載時(shí)必須保留此段聲明，且在文章頁面明顯位置給出原文連接。
|
|
|
