目錄

• web前端自動化測試（基于QT4W框架）
• • 一、背景
  • • • • 1.1前端測試種類
  • 二、技術方案
  • 三、核心代碼
  • • • • 3.1控件封裝
        • 3.2操作控件方法實現
        • 3.3測試用例case
        • 3.4斷言方法

web前端自動化測試（基于QT4W框架）

導語 現在基于前端的自動化測試有很多思路和方案，比較常用的有Selenium +python+lxml等。本篇文章主要是基于QTA自動化平臺的QT4W框架，實現包括對跳轉頁面404/500和jserror等異常報錯的捕獲，可以作為系統測試階段的一種回歸測試，或者作為一種每天定時跑的監控腳本，可以節省在這一部分的重復人力。

一、背景

1.1前端測試種類

前端測試主要分為兩大類：單元測試和集成測試（e2e測試）。
所謂單元測試，就是測試一個函數或某個代碼片段，通過模擬輸入確保輸出符合預期。包括mocha，jasmine，jest這類的測試框架，單元測試的意義在于比較細粒度的去測試我們業務代碼中寫的function，測試function里提供的method是否可靠。
集成測試，測的是一個功能模塊，比如用戶注冊功能，集成測試又包括UI測試，UI測試用于確保頁面正常渲染。
e2e測試就是端對端測試，簡而言之，就是利用一些工具庫提供的API使用代碼來模擬終端用戶在UI界面上的操作，比如輸入，點擊等等。目前常用的工具有，selenium， puppeteer，phantom，protractor（angular）， Nightwatch（Vue）等等。
經常聽到后端的開發同學說“單元測試”，但是前端的單元測試相對來說就少很多。主要有下面兩個方面的原因：
1、前端屬于GUI軟件，瀏覽器眾多，兼容問題讓人頭大，用戶量有一定規模的瀏覽器包括：IE8、IE9、IE10、IE11、chrome、FireFox、360瀏覽器、搜狗瀏覽器、QQ瀏覽器……要在這么多瀏覽器上做幾輪測試并不容易。
2、前端界面變化快，很多時候界面比測試腳本迭代的更快，測試跟不上腳步，投入產出不成正比。。
正如前端開發者很少做單元測試一樣，測試工程師做UI自動化測試建設也少很多。但前端自動化的測試還是很有必要的，對主流程頁面做冒煙測試，可以作為該模塊發布前的一種check手段，畢竟一個頁面的元素還是有很多。每次發布前單純靠人工測試還是需要投入部分時間。

二、技術方案

QT4W (Quick Test for Web) 是QTA自動化體系內實現支持Web自動化測試能力的支持庫，是QTA的Android、iOS、Windows和Mac自動化測試中實現Web自動化測試能力的基礎。
原生控件和Web控件的關系如下圖所示，我們可以理解為，所有的網頁（Web Page）都是在原生控件提供的一個Web View的基礎上實現的。

三、核心代碼

3.1控件封裝

Web控件是Web頁面的基礎,QT4W在WebElement類中封裝常見的控件操作，一般情況下，我們可以使用Webelement來表示絕大部分的Web控件。對于一些比較特殊的控件，可以在WebElement的基礎上在進行封裝。QT4W還提供了FrameElement、inputElement以及SelectElement的實現。FrameElement對應Frame控件；InputElement用于輸入控件，selectElement用于選擇類型的控件。

#元素控件的封裝 ui_map = {'url_404':{'type': WebElement,'locator': XPath('//link[@href="https://ke.qq.com/404.html"]')},'url_502': {'type': WebElement, 'locator': XPath('//div[@class="error-code" and @jscontent="errorCode"]')},'header-index-logo':{'type': WebElement,'locator': XPath('//a[@class="header-index-logo"]')},'分類': {'type': WebElement, 'locator': XPath('//a[@href="//ke.qq.com/course/list"]')},}

封裝一個Web控件首先需要定義一個控件名，此控件名會作為控件的唯一標志，后續使用到該控件時會通過該控件名來調用該控件。在封裝控件時，一般會傳入兩個參數type和locator,type用來指示控件的類型，locator用于傳遞控件的Xpath，此處的Xpath采用標準的xpath寫法，具體xpath標準參考xpath標準。

3.2操作控件方法實現

一般情況下控件都是在WebPage頁面類進行封裝，如果想操作該控件可以使用control方法來獲取控件對象，示例如下：

''' 控件的具體方法封裝實現 ''' #點擊logo def click_header_index_logo(self):self.control('header-index-logo').click() # control方法來實現點擊控件time.sleep(1)self.exec_script('location.href = "https://ke.qq.com/course/185189"') # 在頁面執行JavaScript代碼

3.3測試用例case

測試用例實現起來很簡單，首先導入測試相關的庫，Browser是瀏覽器的基類庫，主要提供和瀏覽器相關的接口（包括獲取瀏覽器、注冊瀏覽器、通過url打開頁面、在當前打開頁面中查找指定url等）。
OnlineEducationTestCase庫是在Browser基礎上把比較常用的瀏覽器操作封裝成測試用例（比如注冊不同瀏覽器對象，瀏覽器清除操作等）
Course_Detail_Page是前面兩步的封裝庫，通過該庫能獲取到指定頁面下面封裝好的控件的路徑和具體的操作方法。

from qt4w.browser.browser import Browser # 瀏覽器基類 from onlineedulib.testcase import OnlineEducationTestCase # 測試用例模本庫 from onlineedulib.course_detail_page import Course_Detail_Page # 測試頁面封裝庫class EDU_Course_Detail_Test(OnlineEducationTestCase): '''課程詳情頁測試用例'''owner = "xxx"timeout = 5priority = OnlineEducationTestCase.EnumPriority.Highstatus = OnlineEducationTestCase.EnumStatus.Readydef run_test(self): self.startStep('1.設置信息并提交')browser = Browser("Chrome")url = 'https://ke.qq.com/course/185189'page = browser.open_url(url, Course_Detail_Page)page.click_header_index_logo() # 點擊騰訊課堂logo

3.4斷言方法

前端自動化的目的是為了判斷控件的跳轉是否正常，是否會出現一些jserror的報錯。
因為ke.qq.com域名下面的頁面出現404訪問異常的時候，都會統一重定向到https://ke.qq.com/404.html頁面，所以最簡單的方法就是判斷跳轉的頁面url是否為https://ke.qq.com/404.html，如果是就拋出異常，如果否就執行通過。
當然，還有另外一種方法，通過獲取頁面控件的方式來實現錯誤的捕獲。404頁面和502頁面都是有明顯區分于其他頁面的唯一元素，只需要判斷該控件是否exist，如果存在就拋出異常，如果不存在就執行通過。

#斷言是否為404、502頁面 def find_url_404(self):if self.exec_script('location.href === "https://ke.qq.com/404.html"') == 'true': # 判斷是否存在元素raise RuntimeError('This is 404 page!!!') # 拋出異常else: print "no 404 page, it's ok"if self.control('url_502').exist == 'true': raise RuntimeError('This is 502 page!!!') else: print "no 502 page, it's ok"

一種簡單判斷是否有js error的方法，使用window自帶的onerror判斷控制臺是否有報錯。

if self.exec_script('window.onerror') == 'false': # 判斷是否有js errorraise RuntimeError('This is 502 page!!!') else: print "no js error page, it's ok"

未完待續！！！
未完待續！！！
未完待續！！！

總結

以上是生活随笔為你收集整理的web前端自动化测试（基于QT4W框架）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。