[Selenium] 輔助 Senium UI 測試的工具

Selenium UI 測試小工具記錄

先廢話一下

  • 第一次的案例可以透過 Recorder 協助手動產生腳本,重複播放腳本確定沒有問題。
  • 手動測試沒有問題就可以考慮自動化測試,把腳本匯出 C#,放到測試專案,就能整合 CI 自動測試。
  • UI 結構一變 WebDriver 找不到標籤,測試程式就會壞掉,在設計標籤時,盡量讓標籤有 Id 或是 Name,或是其他可識別的屬性,盡量讓 UI 結構變化對測試程式的影響不要太大

本文連結

Selenium Page Object Generator

用來產生整頁的 Page Object

Chrome 擴充套件

https://chrome.google.com/webstore/detail/selenium-page-object-gene/epgmnmcjdhapiojbohkkemlfkegmbebb?utm_source=chrome-ntp-icon

Page Object 是為了隔離網頁結構的物件,讓測試程式碼不會出現 FindElment 這樣的代碼,提升測試程式碼的可讀性,請參考 https://martinfowler.com/bliki/PageObject.html

 

操作步驟

按下 Generate,另存檔案 .cs

把檔案放進專案,還要安裝 Install-Package Selenium.Support

他長了兩千多行,到 github 看吧

https://github.com/yaochangyu/sample.dotblog/blob/master/Test/WebDriver/Lab.PageObjectTest/Selenium%20Page%20Object%20Generator/RegisterPage.cs
 

轉出來的東西,會把每一個找到的標籤變成 IWebElement,掛上 FindsByAttribute 跟路徑

[FindsBy(How = How.CssSelector, Using = "a[href='/support']")]
[CacheLookup]
private IWebElement DocsSupport;

 

簡單來講就是把找標籤的動作放到 Attribute,然後放到快取裡面

最後寫個簡單的測試、運行

用 PageFactory.InitElements 方法建立 RegisterPage 物件

[TestMethod]
public void TestMethod2()
{
    driver.Navigate().GoToUrl("https://www.telerik.com/login/v2/telerik#register");
    var register = PageFactory.InitElements<RegisterPage>(driver);
 
    register.SetEmail2EmailField("aaa@gmail.com")
            .SetFirstNameTextField("first name")
            .SetLastNameTextField("last name")
            .SetCompany3TextField("company")
            .SetCountryDropDownListField("Taiwan")
            .SetPhoneTextField("1234567890");
}

 

這裡有用一個 Dictionary 來一次填滿多個欄位,如果不喜歡這樣做也可以改成丟強型別物件進去,原始碼在手,想怎樣就怎樣

[TestMethod]
public void TestMethod3()
{
    driver.Navigate().GoToUrl("https://www.telerik.com/login/v2/telerik#register");
    var data = new Dictionary<string, string>
    {
        {"EMAIL_2", "aa@bb.cc"},
        {"FIRST_NAME", "FirstName"},
        {"LAST_NAME", "LastName"},
        {"PHONE", "Phone"},
        {"COMPANY_3", "Company"},
        {"COUNTRY", "Taiwan"},
    };
    var register = new RegisterPage(driver, data);
    PageFactory.InitElements(driver, register);
    register.Fill();
}

 

使用心得

  • 頁面命名命得好,轉出來的東西還蠻不錯的,命得不好就要重構一下才好用
  • 會一次轉太多不必要的標籤,導致發生重複欄位,程式碼出問題,要手動修一下
  • 有 Fluent Pattern,語意可以更清楚

 

Page Modeller

可以針對某一個 div 產生 Page Object

Chrome:
https://chrome.google.com/webstore/detail/page-modeller/ejgkdhekcepfgdghejpkmbfjgnioejak?utm_source=chrome-ntp-icon

Firefox:
https://addons.mozilla.org/zh-TW/firefox/addon/page-modeller/?src=search

 

操作步驟

按 F12,進入開發模式

如下圖:

 

找到 div 區段的所有標籤,可以根據需求新增、修改、刪除

 

很貼心的提供了多種標籤搜尋方式,一次只能選擇一種唷

 

最後轉成 C#,複製到剪貼簿

 

使用心得

  • 不會轉一堆用不到的東西進來,漂亮多了
  • 可以自己選擇哪一個標籤要、不要
  • 沒有 Fluent Pattern,要得話得自己加
  • 沒有 div 的轉不出來

 

FluentAutomation.SeleniumWebDriver

除了用上述的工具產生 Page Object 之外還有這套也不能錯過,年代有點久遠,不過仍然可用

https://dotblogs.com.tw/yc421206/2014/12/16/147668

https://dotblogs.com.tw/yc421206/2014/12/15/147658

 

ChroPath

這個是用來找出 XPath 的工具

Chrome:
https://chrome.google.com/webstore/detail/chropath/ljngjbnaijcbncmcnjfhigebomdlkcjo?utm_source=chrome-ntp-icon

Firefox:
https://addons.mozilla.org/zh-TW/firefox/addon/chropath-for-firefox/?src=search

 

操作步驟

按 F12,進入開發模式

操作步驟如下圖:


Katalon Recorder

上篇有提到,就不在提了,請參考

https://dotblogs.com.tw/yc421206/2019/03/20/via_selenium3_automation_test_web_ui#Katalon Recorder

 

範例專案位置

https://github.com/yaochangyu/sample.dotblog/tree/master/Test/WebDriver/Lab.PageObjectTest

若有謬誤,煩請告知,新手發帖請多包涵


Microsoft MVP Award 2010~2017 C# 第四季
Microsoft MVP Award 2018~2022 .NET

Image result for microsoft+mvp+logo