UI 測(cè)試是一種測(cè)試類型，也稱為用戶界面測(cè)試，通過(guò)該測(cè)試，我們檢查應(yīng)用程序的界面是否工作正常或是否存在任何妨礙用戶行為且不符合書面規(guī)格的 BUG。了解用戶將如何在用戶和網(wǎng)站之間進(jìn)行交互以執(zhí)行 UI 測(cè)試至關(guān)重要，通過(guò)執(zhí)行 UI 測(cè)試，測(cè)試人員將嘗試模仿用戶的行為，以查看用戶將如何與程序進(jìn)行交互，并查看網(wǎng)站的運(yùn)行情況是否如預(yù)期的那樣，是否有缺陷。

在上次的自動(dòng)化測(cè)試系列（二）中為大家大體介紹了API測(cè)試的概念及在豬齒魚中的實(shí)踐展開，本文主要圍繞UI測(cè)試進(jìn)行概念介紹及Choerodon中的實(shí)踐展開。

下面為大家詳細(xì)介紹豬齒魚提供的UI測(cè)試功能：

什么是 UI 測(cè)試

UI 測(cè)試涵蓋了用戶交互部分，包括用戶關(guān)注的網(wǎng)站結(jié)構(gòu)和視覺(jué)部分。Web 網(wǎng)站包含許多來(lái)自 CSS，JavaScript 和許多其他語(yǔ)言的不同 Web 元素，網(wǎng)站元素可以連接到屏幕、鍵盤、鼠標(biāo)或用戶用于與網(wǎng)站進(jìn)行交互的任何其他工具，UI 測(cè)試則捕獲這些元素并對(duì)其進(jìn)行測(cè)試和聲明。

在執(zhí)行 UI 測(cè)試時(shí)，需要注意確保應(yīng)用程序不存在任何跨瀏覽器兼容性問(wèn)題。由于每個(gè)瀏覽器都使用不同的瀏覽器引擎，并且可能不支持相同的 CSS 功能。因此，確保UI 在所有主要瀏覽器上無(wú)縫呈現(xiàn)非常重要。在不同的瀏覽器上進(jìn)行測(cè)試稱為跨瀏覽器測(cè)試，可以幫助測(cè)試人員在所有主要瀏覽器和設(shè)備（包括手機(jī)，平板電腦等）的多種組合下測(cè)試其網(wǎng)站。

手動(dòng)或自動(dòng)，如何選擇？

與其他任何類型的測(cè)試一樣，UI 測(cè)試也可以手動(dòng)或通過(guò)自動(dòng)化執(zhí)行。手動(dòng)測(cè)試要求測(cè)試人員在每個(gè)元素上手動(dòng)執(zhí)行每個(gè)測(cè)試。例如，測(cè)試輸入字段將需要針對(duì)任何差異一次又一次地鍵入不同的值。如果網(wǎng)站 UI 的組件較少??，則最好通過(guò)手動(dòng)過(guò)程進(jìn)行 UI 測(cè)試，快速地完成。但它不適合復(fù)雜的網(wǎng)站，用戶界面豐富的網(wǎng)站使手動(dòng) UI 測(cè)試則非常低效，費(fèi)時(shí)且容易出錯(cuò)。

適合UI自動(dòng)化測(cè)試的場(chǎng)景

不是所有的測(cè)試場(chǎng)景都適合用自動(dòng)化測(cè)試來(lái)實(shí)現(xiàn)，對(duì)此，可以參考以下的標(biāo)準(zhǔn)輔助判斷：

• 項(xiàng)目的需求不會(huì)頻繁變動(dòng)
• 頁(yè)面的 UI 已經(jīng)進(jìn)入穩(wěn)定階段
• 項(xiàng)目周期足夠長(zhǎng)
• 大量回歸的測(cè)試任務(wù)

其中，有些項(xiàng)目是明顯不適合使用 UI 自動(dòng)化測(cè)試的，例如視頻播放器，音樂(lè)播放器等交動(dòng)性強(qiáng)，并發(fā)依賴強(qiáng)的軟件。

UI自動(dòng)化測(cè)試的優(yōu)點(diǎn)

UI自動(dòng)化測(cè)試過(guò)程簡(jiǎn)化了創(chuàng)建UI測(cè)試、運(yùn)行測(cè)試以及查看結(jié)果的過(guò)程，開發(fā)和測(cè)試團(tuán)隊(duì)選擇自動(dòng)化UI測(cè)試的原因有很多，最值得注意的包括：

• 時(shí)間 – 手動(dòng)測(cè)試速度很慢，無(wú)法與許多開發(fā)過(guò)程保持同步。
• 成本 – 手動(dòng)測(cè)試需要大量資源且成本很高。
• 準(zhǔn)確性 – 執(zhí)行重復(fù)性任務(wù)時(shí)，手動(dòng)測(cè)試容易出現(xiàn)更多錯(cuò)誤。相反，自動(dòng)化減少了這些錯(cuò)誤的機(jī)會(huì)。
• 規(guī)模化 – 執(zhí)行復(fù)雜的迭代時(shí)，很難依靠手動(dòng)測(cè)試。
• 趨勢(shì) – 大多數(shù)組織已經(jīng)意識(shí)到如何從自動(dòng)化測(cè)試中受益，因此，跳上自動(dòng)化潮流的壓力越來(lái)越大。

UI自動(dòng)化測(cè)試設(shè)計(jì)原則

• 一個(gè)測(cè)試用例完成一個(gè)功能點(diǎn)測(cè)試（常用）：一個(gè)手工用例對(duì)應(yīng)一個(gè)自動(dòng)化測(cè)試用例；
• 一個(gè)腳本是一個(gè)完整的場(chǎng)景；
• 腳本之間獨(dú)立，不能有依賴（腳本間相互隔離）：例如與登陸狀態(tài)相關(guān)的用例：個(gè)人中心、訂單詳情、下單購(gòu)物等，如果腳本之間不獨(dú)立，相互依賴，在登陸的測(cè)試腳本失敗的情況下，會(huì)導(dǎo)致個(gè)人中心、訂單詳情、下單購(gòu)物的測(cè)試腳本全軍覆滅，后續(xù)修復(fù)與維護(hù)成本高；
• 設(shè)置合適的檢查點(diǎn)：通過(guò)斷言判斷用例的成功與否；
• 設(shè)計(jì)良好的框架：Python 常用的測(cè)試框架有 unittest 與 pytest，利用框架，及對(duì)共用的測(cè)試模塊進(jìn)行封裝，減少自動(dòng)化測(cè)試腳本維護(hù)的工作量；

WEB端UI測(cè)試工具介紹

API測(cè)試用例主要由4個(gè)部分組成，分別是：用例的基礎(chǔ)信息、前置步驟、請(qǐng)求腳本以及斷言。

UTF

UTF( Unified Functional Testing) = QTP( Quick Test Pro) + ST( Service Test)由 HP 公司開發(fā)。它是一種企業(yè)級(jí)的自動(dòng)測(cè)試工具，提供了強(qiáng)大易用的錄制回放功能，同時(shí)兼容對(duì)象識(shí)別模式與圖像識(shí)別模式兩種識(shí)別方式，支持 B/S 與 C/S 兩種架構(gòu)的軟件測(cè)試，是目前主流的自動(dòng)化測(cè)試工具。主要是用于回歸測(cè)試和同一軟件的新版本測(cè)試。

Robot Framework

是一款基于 Python 語(yǔ)言編寫的自動(dòng)化測(cè)試框架，具備良好的可擴(kuò)展性，支持關(guān)鍵字驅(qū)動(dòng)，可以同時(shí)測(cè)試多種類型的客戶端或者接口，可以進(jìn)行分布式測(cè)試。

Selenium

Selenium概要

Selenium 也是一個(gè)用于 Web 應(yīng)用程序測(cè)試的工具，支持多平臺(tái)、多瀏覽器、多語(yǔ)言去實(shí)現(xiàn)自動(dòng)化測(cè)試，目前在 Web 自動(dòng)化領(lǐng)域應(yīng)用最為廣泛。

Selenium 是最廣泛使用的開源 Web UI（用戶界面）自動(dòng)化測(cè)試套件之一，最初由杰森·哈金斯（Jason Huggins）于 2004 年開發(fā)，作為 Thought Works 的內(nèi)部工具。Selenium 支持跨不同瀏覽器，平臺(tái)和編程語(yǔ)言的自動(dòng)化。

Selenium功能特性

• Selenium 是一個(gè)開源和可移植的 Web 測(cè)試框架。
• Selenium IDE 為創(chuàng)作測(cè)試提供了回放和錄制功能，而無(wú)需學(xué)習(xí)測(cè)試腳本語(yǔ)言。
• 它可以被視為領(lǐng)先的基于云的測(cè)試平臺(tái)，可幫助測(cè)試人員記錄他們的操作并將其導(dǎo)出為可重復(fù)使用的腳本，并具有易于理解且易于使用的界面。
• Selenium 支持各種操作系統(tǒng)，瀏覽器和編程語(yǔ)言。如下列表:
  • 編程語(yǔ)言: C# ，Java，Python，PHP，Ruby，Perl 和 JavaScript
  • 操作系統(tǒng):Android，iOS，Windows，Linux，Mac，Solaris。
  • 瀏覽器:谷歌瀏覽器，Mozilla Firefox，Internet Explorer，Edge，Opera，Safari 等。
• 它還支持并行測(cè)試執(zhí)行，從而減少了時(shí)間并提高了測(cè)試效率。
• Selenium 可以與 Ant 和 Maven 等框架集成，用于源代碼編譯。
• Selenium 還可以與 TestNG 等測(cè)試框架集成，以進(jìn)行應(yīng)用程序測(cè)試和生成報(bào)告。
• 與其他自動(dòng)化測(cè)試工具相比，Selenium 需要的資源更少。
• WebDriver API 已經(jīng)嘗試集于 Selenium 中，這是對(duì) Selenium 進(jìn)行的最重要的修改之一。
• Selenium Web 驅(qū)動(dòng)程序不需要服務(wù)器安裝，測(cè)試腳本直接與瀏覽器交互。
• Selenium 命令根據(jù)不同的類進(jìn)行分類，使其更易于理解和實(shí)現(xiàn)。
• Selenium Remote Control(RC)與 WebDriver API 一起被稱為 Selenium 2.0。此版本旨在支持充滿活力的網(wǎng)頁(yè)和 Ajax。

Selenium三大優(yōu)點(diǎn)

• 速度：時(shí)間是每家公司的主要資源，自動(dòng)化測(cè)試可以節(jié)省很多時(shí)間。Selenium Automation 測(cè)試要求我們只編寫一次測(cè)試，然后一次又一次地運(yùn)行它們，而不會(huì)以不同的值和不同的方案進(jìn)行任何干預(yù)。
• 準(zhǔn)確性：只要測(cè)試編寫正確，Selenium Automation 測(cè)試就可以幫助我們正確執(zhí)行測(cè)試。手動(dòng)測(cè)試的主要缺點(diǎn)是容易發(fā)生人為錯(cuò)誤。
• 透明度：Selenium Automation 測(cè)試還有助于快速生成報(bào)告，并在測(cè)試完成后立即與團(tuán)隊(duì)共享。另一方面，手動(dòng)測(cè)試需要時(shí)間來(lái)提取結(jié)果并手動(dòng)報(bào)告結(jié)果以通過(guò)軟件或手動(dòng)生成報(bào)告。

Choerodon UI測(cè)試

安裝

若在Choerodon 中使用 UI 測(cè)試，需要先安裝Selenium IDE 。

Selenium IDE(集成開發(fā)環(huán)境)是 Selenium Suite 下的開源 Web 自動(dòng)化測(cè)試工具。與 Selenium WebDriver 和 RC 不同，它不需要任何編程邏輯來(lái)編寫其測(cè)試腳本，而只需記錄與瀏覽器的交互以創(chuàng)建測(cè)試用例。之后，可以使用播放選項(xiàng)重新運(yùn)行測(cè)試用例。 注意：Selenium IDE 僅作為 Firefox 和 Chrome 插件提供，它無(wú)法在 Firefox 和 Chrome 以外的瀏覽器上記錄測(cè)試用例。記錄的測(cè)試腳本也可以導(dǎo)出到 C#，Java，Ruby 或 Python 等編程語(yǔ)言。

Firefox 瀏覽器

• 打開 URL =>https://addons.mozilla.org/en-us/firefox/addon/selenium-ide/， 它會(huì)將重定向到 Firefox 的官方附加頁(yè)面。
• 點(diǎn)擊 Add to Firefox 按鈕。

Chrome 瀏覽器

• 在插件商店(https://chrome.google.com/webstore/category/extensions)搜索%E6%90%9C%E7%B4%A2)Selenium IDE
• 點(diǎn)擊添加至 Chrome

使用

在 Chrome 瀏覽器上使用 Selenium IDE 錄制與回放腳本

1、打開 IDE，初始化界面如圖：

2、創(chuàng)建并開始錄制，輸入錄制的 web 地址

3、錄制完成，右擊測(cè)試用例，保存或?qū)С觥elenium IDE 保存的都是.side 的單文件

Choerodon 中的 UI 測(cè)試是通過(guò) Selenium IDE 中錄制生成的 side 文件導(dǎo)入系統(tǒng)中，在 UI 測(cè)試界面中生成對(duì)應(yīng)的測(cè)試用例與步驟；而后便能直接執(zhí)行對(duì)應(yīng)的測(cè)試文件來(lái)對(duì)界面 UI 操作進(jìn)行測(cè)試，可以直觀的看到生成的測(cè)試報(bào)告。

總結(jié)

UI測(cè)試是軟件測(cè)試周期的重要組成部分，是改善用戶體驗(yàn)和客戶滿意度的重要驅(qū)動(dòng)力，大多數(shù)最終用戶更關(guān)心他們實(shí)際看到和觸摸的內(nèi)容。因此，這也是為什么UI或用戶界面變得如此重要，從而進(jìn)行UI測(cè)試的原因。

本文由豬齒魚技術(shù)團(tuán)隊(duì)原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處：豬齒魚官網(wǎng)