[小北De編程手記] : Lesson 04 - Selenium For C# 之 API 上 Lesson 03 - Selenium For C# 之元素定位 Lesson 02 - Sele

時間 2019-12-05

標籤編程手記 lesson selenium c# api 元素定位 sele 欄目 C# 简体版

原文原文鏈接

　　這一部分，我準備向你們介紹Selenium WebDriver的經常使用API，學習這部份內容須要你們最好有一些簡單的HTML相關知識，本文主要涉及到如下內容：html

Selenium API：元素檢查
Selenium API：簡單事件處理

　　回顧一下我以前講過的一個概念：所謂自動化測試，能夠簡單的歸結爲是一個從被測試程序中識別或是定位元素以及執行操做和驗證元素的過程。從框架設計的角度來說，一個自動化測試框架的驅動程序應該向使用者提供「元素定位，執行操做和元素驗證」的功能。關於Selenium提供的優秀的「元素定位」能力，上一篇文章《Lesson 03 - Selenium For C# 之元素定位》我已經作了相關的描述。而這一篇博客，會介紹Selenium如何模擬用戶執行操做以及如何獲取須要驗證的元素。git

（一）Selenium API：元素檢查

　　談到基於B/S的自動化測試，咱們須要檢查的主要對象是網頁的DOM元素，而Selenium爲咱們提供了不少標準的API來獲取咱們想要的內容：github

獲取元素的文本
獲取元素的屬性
獲取元素的CSS樣式

@.獲取元素文本信息

　　說到這裏我先簡單的介紹一下這三部份內容和DOM元素的關係（照顧一下徹底不懂HTML的同窗）。所謂元素的文本，能夠簡單的認爲是手工測試過程當中頁面上可見的文本信息（即顯示內容），如一個輸入框內的文本，一個只讀的文本域或是一個網頁的Title... .... 這些都指的是元素的文本。IWebElement定義了獲取元素文本的方式（只讀的Text屬性）：編程

 1     public interface IWebElement : ISearchContext
 2     {
 3         //省略其餘屬性方法... ...
 4         //
 5         // Summary:
 6         //     Gets the innerText of this element, without any leading or trailing whitespace,
 7         //     and with other whitespace collapsed.
 8         //
 9         // Exceptions:
10         //   OpenQA.Selenium.StaleElementReferenceException:
11         //     Thrown when the target element is no longer valid in the document DOM.
12         string Text { get; }
13     }

下面這段代碼就是獲取了博客園首頁導航的文本並輸出，測試輸出如圖所示：瀏覽器

 1         /// <summary>
 2         /// demo1 : 檢查首頁文本
 3         /// </summary>
 4         [Fact(DisplayName = "Cnblogs.SeleniumAPI.Demo1")]
 5         public void SeleniumAPI_Demo1()
 6         {
 7             _output.WriteLine("Step 01 : 啓動瀏覽器並打開博客園首頁。");
 8             IWebDriver driver = new FirefoxDriver();
 9             driver.Url = "http://www.cnblogs.com";
10 
11             _output.WriteLine("Step 02 : 尋找須要檢查的頁面元素。");
12             var lnkHome = driver.FindElement(By.XPath(".//ul[@class='post_nav_block']/li[1]/a"));
13 
14             _output.WriteLine(string.Format("導航內欄內容：{0}", lnkHome.Text));
15 
16             _output.WriteLine("Step 04 : 關閉瀏覽器。");
17             driver.Close();
18         }

@.獲取元素屬性

　　開發人員能夠經過配置各類元素的屬性來控制DOM元素的行爲或者樣式。這裏須要說明一下，什麼是DOM元素的屬性。仍是以博客園首頁爲例，用Firebug查看導航中「首頁」對應的元素：服務器

通常的DOM元素格式以下：框架

<tag_name attribute1="value1" attribute2="value2"... ...>Text Content</tag_name>函數

　　這裏tag_name是a，而class，href分別是該元素對應的屬性。咱們能夠用IWebElement定義的GetAttribute方法來獲取屬性對應的值。從而獲取對DOM作相關的驗證和判斷，能夠用如下代碼獲取獲取這個元素的class屬性：post

1 　　　　_output.WriteLine("Step 02 : 尋找須要檢查的頁面元素。");
2        var lnkHome = driver.FindElement(By.XPath(".//ul[@class='post_nav_block']/li[1]/a"));
3        var value = lnkHome.GetAttribute("class");

@.獲取元素CSS樣式

　　簡單的說DOM元素的TagName和屬性描述了DOM元素的類型（即這個元素是什麼，文本框，按鈕仍是下拉菜單），而元素的展示樣式則是由CSS（層疊樣式表）決定的。在此我默認讀者是一個懂一些CSS知識的同窗，畢竟咱們的主題是Selenium。CSS定義了元素的樣式，好比寬度，高度，顏色等等... ... ,咱們能夠用IWebElement定義的GetCssValue方法獲取元素的樣式，好比咱們須要驗證某個元素的顯示字體，顏色，或是顯示與否等信息。均可以通個這個方法來獲取。一樣咱們能夠獲取並輸出博客園是首頁文本的字體和顏色：學習

 1         /// <summary>
 2         /// demo2 : 檢查首頁文本的屬性，字體和顏色
 3         /// </summary>
 4         [Fact(DisplayName = "Cnblogs.SeleniumAPI.Demo2")]
 5         public void SeleniumAPI_Demo2()
 6         {
 7             _output.WriteLine("Step 01 : 啓動瀏覽器並打開博客園首頁。");
 8             IWebDriver driver = new FirefoxDriver();
 9             driver.Url = "http://www.cnblogs.com";
10 
11             _output.WriteLine("Step 02 : 尋找須要檢查的頁面元素。");
12             var lnkHome = driver.FindElement(By.XPath(".//ul[@class='post_nav_block']/li[1]/a"));
13             
14             lnkHome.GetCssValue("color");
15 
16             _output.WriteLine(string.Format("導航內欄內容：{0}", lnkHome.Text));
17             _output.WriteLine(string.Format("classs屬性內容：{0}", lnkHome.GetAttribute("class")));
18             _output.WriteLine(string.Format("字體：{0}", lnkHome.GetCssValue("font-family")));
19             _output.WriteLine(string.Format("顏色：{0}", lnkHome.GetCssValue("color")));
20 
21 
22             _output.WriteLine("Step 04 : 關閉瀏覽器。");
23             driver.Close();
24         }

輸出結果：

（二）Selenium API：事件處理

　　Selenium的事件處理大可分爲兩個部分：簡單事件處理和複合操做。

簡單事件：指的是相似單擊某個按鈕，輸入文本等等。
複合事件：指的是執行一組事件鏈（好比：按住Ctrl的同時單擊鼠標）

@.簡單事件處理

　　這部份內容我在以前的文章中提到過《Lesson 02 - Selenium For C# 之核心對象》，IWebElement定義了一常見的事件處理函數：

Clear ：清空當前DOM元素內容（用於文本輸入元素）。
Click ：單擊當前DOM元素。
SendKey ：向當前DOM元素輸入指定文本。
Submit ：提交當前元素到Web服務器。

　　下面的例子實現了以下功能：（導航到博客園首頁>在搜索框中輸入「小北De編程手記」>點擊「找找看」並等待五秒>關閉瀏覽器）

 1         /// <summary>
 2         /// demo3 : 首頁查詢
 3         /// </summary>
 4         [Fact(DisplayName = "Cnblogs.SeleniumAPI.Demo3")]
 5         public void SeleniumAPI_Demo3()
 6         {
 7             _output.WriteLine("Step 01 : 啓動瀏覽器並打開博客園首頁。");
 8             IWebDriver driver = new FirefoxDriver();
 9             driver.Url = "http://www.cnblogs.com";
10 
11             _output.WriteLine("Step 02 : 尋找須要操做的頁面元素。");
12             var txtSearch = driver.FindElement(By.Id("zzk_q"));
13             var btnSearch = driver.FindElement(By.XPath(".//input[@type='button' and @value='找找看']"));
14 
15             _output.WriteLine("Step 03 : 輸入查詢文本");
16             txtSearch.SendKeys("小北De編程手記"); 17 
18             _output.WriteLine("Step 04 : 點擊查詢");
19  btnSearch.Click(); 20 
21             System.Threading.Thread.Sleep(5000);
22 
23             _output.WriteLine("Step 05 : 關閉瀏覽器。");
24             driver.Close();
25         }