PS：本文轉(zhuǎn)載自黑馬測(cè)試高贊知乎文章

鏈接：https://www.zhihu.com/question/29922082/answer/2642635207

本文內(nèi)容篇幅較長(zhǎng)。為避免不勞累，先將本文結(jié)構(gòu)拆分如下，建議讀者對(duì)于自己已經(jīng)了解的部分可以跳過不看哈：

1、什么是前端測(cè)試？
2、前端測(cè)試有哪些類型？
3、如何做好前端自動(dòng)化？—好用平臺(tái)篇
4、如何做好前端自動(dòng)化？—python代碼
5、如何做好前端自動(dòng)化？—使用錄制工具
6、前端自動(dòng)化學(xué)習(xí)視頻推薦

一、什么是前端測(cè)試？

所謂前端，是指計(jì)算機(jī)Web應(yīng)用程序（網(wǎng)站）的前臺(tái)頁面。

Web 應(yīng)用程序具有三個(gè)功能層——客戶端、服務(wù)器、資源（或信息系統(tǒng)）。前端測(cè)試處理客戶端層，也就是呈現(xiàn)給客戶端的軟件部分。

前端通常包括：

1）最終用戶在應(yīng)用程序時(shí)可以看到的任何內(nèi)容，例如菜單、按鈕、表單（也叫GUI元素）。
2）影響整體用戶體驗(yàn)的因素，比如頁面加載速度等方面的內(nèi)容。

前端測(cè)試主要有下面三個(gè)目標(biāo)：

1）識(shí)別性能問題：
2）驗(yàn)證跨瀏覽器和跨設(shè)備功能：前端測(cè)試的一個(gè)重要方面是驗(yàn)證多個(gè)瀏覽器、瀏覽器版本和設(shè)備（移動(dòng)和桌面）上的網(wǎng)站和應(yīng)用程序行為。這不僅包括功能，還包括對(duì)各種尺寸和分辨率的屏幕的響應(yīng)能力。
3）驗(yàn)證第三方集成的服務(wù)：隨著軟件即服務(wù)平臺(tái)變得幾乎司空見慣，大多數(shù)應(yīng)用程序利用第三方集成來提供更好的服務(wù)和增強(qiáng)的用戶體驗(yàn)。

總結(jié)成一句話就是，前端測(cè)試主要目的是為了驗(yàn)證所述 GUI 元素是否按預(yù)期運(yùn)行，驗(yàn)證網(wǎng)站或應(yīng)用程序的表示層是否存在錯(cuò)誤。

例如，它檢查輸入字段是否接受正確的字符，是否僅在填寫必填字段后才提交表單，導(dǎo)航是否足夠容易，頁面加載是否足夠快等等......

二、前端測(cè)試的類型

前端測(cè)試一般分為單元測(cè)試（Unit Tests）、集成測(cè)試（Integrated Test）和端到端測(cè)試（E2E Test）這三種。

1、單元測(cè)試階段

單元測(cè)試獨(dú)立于其他模塊，驗(yàn)證應(yīng)用程序的最小可能模塊（單元）的功能。

在該測(cè)試階段，測(cè)試人員和/或開發(fā)人員隔離最小的應(yīng)用程序組件，檢查它們的行為并在開發(fā)管道的早期識(shí)別缺陷。

例如，在 C# 中，將方法視為一個(gè)單元（要測(cè)試的最小組件）。在這種情況下，單元測(cè)試將獨(dú)立于其他方法（即整個(gè)軟件）來驗(yàn)證該方法的某些特性。單元測(cè)試通常分為基于狀態(tài)的測(cè)試和基于交互的測(cè)試。前者檢查軟件是否在特定條件下產(chǎn)生預(yù)期結(jié)果。后者驗(yàn)證軟件是否正確調(diào)用特定方法來實(shí)現(xiàn)其目的。

2、集成測(cè)試階段

單元測(cè)試之后通常是集成測(cè)試。

集成測(cè)試驗(yàn)證兩個(gè)軟件單元或模塊之間的接口。

它側(cè)重于檢查模塊是否充分通信，并暴露集成單元之間的任何錯(cuò)誤。集成測(cè)試對(duì)于分析包含多個(gè)連接元素的系統(tǒng)行為至關(guān)重要。

? 端到端的測(cè)試階段

端到端測(cè)試是一種測(cè)試整條應(yīng)用鏈路的測(cè)試方式。

它通過模擬用戶真實(shí)場(chǎng)景的行為和操作，來保證這條鏈路上集成的相關(guān)系統(tǒng)或者應(yīng)用，能夠做出正確的響應(yīng)。該階段是大多數(shù)軟件測(cè)試工作的基礎(chǔ)。它有助于確保您的應(yīng)用程序的核心功能正常工作并正確顯示給最終用戶。

階段總結(jié)：開始運(yùn)行單元測(cè)試，然后繼續(xù)進(jìn)行集成測(cè)試，最后執(zhí)行端到端測(cè)試。一旦這種結(jié)構(gòu)到位，實(shí)現(xiàn)相當(dāng)高的測(cè)試覆蓋率將相對(duì)容易。

三、如何做好前端自動(dòng)化？——好用工具推薦

隨著不斷提高的業(yè)務(wù)復(fù)雜度，不斷發(fā)展的 UI，不斷變化的用戶偏好，加上跨瀏覽器和跨設(shè)備等問題........傳統(tǒng)手工測(cè)試，其消耗的人力及增加的成本都是巨大的。

且傳統(tǒng)手工測(cè)試很難對(duì)每個(gè)頁面，每種設(shè)備進(jìn)行全方位的測(cè)試，這可能導(dǎo)致一個(gè)不注意，核心功能出現(xiàn)不正常，或是將一些低級(jí)錯(cuò)誤暴露到線上，而毫無察覺。

為了保證在Web 或桌面應(yīng)用程序的核心功能正常工作，并正確顯示給最終用戶；為了測(cè)試團(tuán)隊(duì)可以更快地更新或發(fā)布新功能，我們需要通過自動(dòng)化前端測(cè)試，來減少錯(cuò)誤。

好用的前端自動(dòng)化測(cè)試工具，推薦如下：

1. Selenium

Selenium 是一個(gè)自動(dòng)化瀏覽器的開源測(cè)試框架。借助 Selenium WebDriver，可以使用 Ruby、Java、Python 等編程語言。它不僅僅免費(fèi)，還可以兼容多種編程語言，所以至今仍被廣泛使用。

同時(shí)Selenium 還提供了一個(gè)稱為 Selenium IDE 的記錄和播放功能和一個(gè) WebDriver，還允許你連接到其他測(cè)試語言庫。

2.Katalon

Katalon Studio 是一個(gè)建立在 Selenium 和 Appium 之上的記錄和回放測(cè)試自動(dòng)化平臺(tái)。它也適用于 Groovy 和 Java，它提供 Web、桌面、移動(dòng)和 API 測(cè)試。

但更吸引大家的，是開發(fā)人員可以輕松停止和重新啟動(dòng)測(cè)試記錄以插入額外的代碼行，這有助于促進(jìn)開發(fā)人員和技術(shù)含量較低的軟件測(cè)試人員之間的協(xié)作。

且該工具它具有易于使用的界面，可幫助沒有編程背景的測(cè)試人員使用拖放式手動(dòng)編輯器創(chuàng)建測(cè)試。Katalon 還可使用 Selenium 或 JavaScript 添加自定義代碼，以實(shí)現(xiàn)高級(jí)測(cè)試自動(dòng)化腳本。

同時(shí)官方還提供了Katalon Studio 免費(fèi)版，當(dāng)然它的功能非常有限。例如，可以運(yùn)行測(cè)試并知道它是否失敗，但您將無法訪問屏幕截圖、錄音或建議的修復(fù)功能。

3.Cypress.io

http://Cypress.io是一個(gè)面向使用 JavaScript 的開發(fā)人員的前端測(cè)試框架。需要對(duì) JavaScript有一定了解，可以幫助前端開發(fā)人員來完成整個(gè)測(cè)試過程。

可以創(chuàng)建各種各樣的測(cè)試場(chǎng)景并在本地瀏覽器執(zhí)行它們。

http://Cypress.io 目前支持 Chrome 和 Firefox 的跨瀏覽器測(cè)試，但不支持 Safari。它還與 Linux、Unix、Windows 和 Mac OS 等操作系統(tǒng)兼容。

4. Ranorex Studio

Ranorex Studio 是一個(gè)自動(dòng)化的 UI 測(cè)試框架，同時(shí)也是另一個(gè)基于 Selenium 的錄制和播放工具。支持結(jié)合使用記錄和播放，以及從預(yù)設(shè)列表或存儲(chǔ)庫中選擇拖放操作，來編寫測(cè)試腳本。

它與 Katalon 等其他錄制和播放工具的不同之處在于其基于圖像的測(cè)試功能。它允許用戶在任何測(cè)試步驟中插入用于視覺驗(yàn)證的屏幕截圖。但是要求測(cè)試人員在每個(gè)測(cè)試步驟中手動(dòng)添加這些視覺驗(yàn)證。

5. PhantomCSS

PhantomCSS 是一個(gè)為自動(dòng)化 CSS 測(cè)試（一種視覺回歸測(cè)試）而設(shè)計(jì)的開源工具。

PhantomCSS使用 PhantomJS 作為他們的無頭瀏覽器，使用 CasperJS 來導(dǎo)航應(yīng)用程序并定義操作，并使用 ResembleJS 將屏幕截圖圖像與 基線 進(jìn)行比較?；€是使用從你的第一次測(cè)試運(yùn)行中截取的屏幕截圖創(chuàng)建的。

基線：在軟件開發(fā)中，基線是軟件工程活動(dòng)從一個(gè)環(huán)節(jié)轉(zhuǎn)入另外一個(gè)環(huán)節(jié)時(shí)對(duì)階段產(chǎn)品或組件的標(biāo)識(shí)。

6. Watir：基于 Ruby 構(gòu)建的開源測(cè)試框架

Watir（Ruby 中的 Web 應(yīng)用程序測(cè)試）是一種自動(dòng)化測(cè)試工具。

Watir可以更輕松地使用 Ruby 編寫測(cè)試腳本。例如，在沒有 Watir 的情況下，您將需要手動(dòng)寫入加載時(shí)間較長(zhǎng)的頁面的等待時(shí)間。然而，Watir 會(huì)在繼續(xù)測(cè)試之前自動(dòng)等待頁面加載。

Watir 在功能上有所限制（例如，它們不提供跨平臺(tái)測(cè)試或錯(cuò)誤跟蹤）。但是，它們可以很容易地與大多數(shù)測(cè)試工具集成，包括 Jenkins 等 DevOps、Cucumber 等 BDD 工具或測(cè)試管理工具。

7. Micro Focus UFT

Micro Focus UFT（以前稱為 QTP）是一種記錄和播放工具，僅支持 VBScript 腳本語言，但僅支持 Microsoft 操作系統(tǒng)。

但是，Micro Focus 確實(shí)適用于多種瀏覽器，包括 Safari、Firefox、Chrome、IE 和 Edge。

您可以使用多種方法創(chuàng)建測(cè)試——從自己編寫代碼到錄制和回放選項(xiàng)。每種方法都需要不同級(jí)別的編碼能力，這對(duì)不同的團(tuán)隊(duì)很有幫助。

8. Appium：基于 Selenium 構(gòu)建的移動(dòng)應(yīng)用程序測(cè)試工具

Appium 是一個(gè)開源框架，它修改了 Selenium 以使移動(dòng)應(yīng)用程序測(cè)試成為可能。它還可以自動(dòng)化桌面瀏覽器（Windows、MacOS 和 Linux）,但是最出名的則是支持 iOS、Android 和 Windows 應(yīng)用程序的移動(dòng)測(cè)試。

Appium幾乎可以集成到任何軟件開發(fā)工具中。

以上，就是Ui自動(dòng)化的工具方法介紹。
接下來，我們?cè)賮斫榻B下如何通過代碼來做自動(dòng)化測(cè)試操作。

四、如何做好前端自動(dòng)化？使用Python代碼實(shí)現(xiàn)

通常我們通過編寫代碼來進(jìn)行UI自動(dòng)化，來提高手工測(cè)試效率，以減少人力投入目的。

常用的代碼方式通常是通過python進(jìn)行編碼。

下面通過簡(jiǎn)單的案例我們看看如何做到的：

場(chǎng)景：我們想做的是去查看天氣預(yù)報(bào)并對(duì)當(dāng)前的天氣溫度進(jìn)行判斷

那我們看下操作步驟：

步驟1）打開瀏覽器，我們通過百度https://www.baidu.com/

步驟2）搜索：天氣預(yù)報(bào)

步驟3）點(diǎn)擊進(jìn)入?北京天氣預(yù)報(bào)_一周天天氣預(yù)報(bào)

步驟4）查看當(dāng)前溫度

總的來看：我們要打開瀏覽器，進(jìn)入百度首頁；然后搜索：天氣預(yù)報(bào)；進(jìn)入天氣詳情頁，查看當(dāng)前溫度并對(duì)溫度進(jìn)行斷言。

那么我們要模擬這個(gè)操作過程就需要對(duì)UI前端頁面進(jìn)行定位，來模擬人為手工的操作。來看使用python結(jié)合pytest+selenium如何實(shí)現(xiàn)：

1）通過對(duì)id的定位可以定位到搜索框，并鍵入要搜索的內(nèi)容也就是 天氣預(yù)報(bào)。

2）如何通過python打開瀏覽器？通過WebDriver。

WebDriver概述：

WebDriver（selenium2=selenium1+webdriver）是一種用于Web應(yīng)用程序的自動(dòng)化測(cè)試工具，它提供了一套友好的API，與Selenium1相比，WebDriver的api更容易理解和使用，其可讀性和可維護(hù)性也大大提高了。WebDriver完全是一套類庫，不依賴于任何測(cè)試框架，除了必要的瀏覽器驅(qū)動(dòng)，不需要啟動(dòng)其他的進(jìn)程或者安裝其他的程序

不同的瀏覽器的WebDriver驅(qū)動(dòng)：

Chrome：https://chromedriver.chromium.org/downloads

Edge：https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/

Firefox：https://github.com/mozilla/geckodriver/releases

Safari：https://webkit.org/blog/6900/webdriver-support-in-safari-10/

大家可根據(jù)自己使用的瀏覽器自行下載，如果以上鏈接打不開，可以查閱其他關(guān)于“WebDriver驅(qū)動(dòng)下載”的文章，類似的安裝步驟根據(jù)不同的操作系統(tǒng)都會(huì)有，請(qǐng)自行查閱。本文只以Chrome為例。

注意事項(xiàng)：
webdriver 和chrome的版本要匹配、webdriver 版本要和瀏覽器兼容。

1)在Python中安裝Selenium：

Plaintext pip install selenium

然后我們根據(jù)操作步驟來進(jìn)行編碼如下：

from selenium import webdriver from selenium.webdriver.common.by import By import time # 目標(biāo)地址 url = "https://www.baidu.com/" # 操作的目標(biāo)瀏覽器 driver = webdriver.Chrome() # 瀏覽器打開目標(biāo)地址 driver.get(url) # 定位百度輸入框 driver.find_element(By.ID,"kw").click() # 清除輸入框中的內(nèi)容 driver.find_element(By.ID,"kw").clear() # 輸入框 發(fā)送搜索的數(shù)據(jù) driver.find_element(By.ID,"kw").send_keys(u"天氣預(yù)報(bào)") # 點(diǎn)擊去定搜索 driver.find_element(By.ID,"su").click() # 等待網(wǎng)頁加載 time.sleep(3) # link_text打開天氣預(yù)報(bào) driver.find_element(By.LINK_TEXT,u"北京天氣預(yù)報(bào)_一周天氣預(yù)報(bào)").click() # 控制新窗口 cls = driver.window_handles driver.switch_to.window(cls[1]) # 也可以打開跳轉(zhuǎn)鏈接 # driver.get("https://weathernew.pae.baidu.com/weathernew/pc?query=%E5%8C%97%E4%BA%AC%E5%A4%A9%E6%B0%94&srcid=49822") # assert對(duì)當(dāng)前溫度定位并進(jìn)行斷言 assert (driver.find_element(By.XPATH,"//div[@id='sfr-app']/div/div[2]/div/div[2]/div/div/div[2]/div/span").text == u"31°")

3）使用Pytest的用例運(yùn)行級(jí)別

setup和teardown都是在對(duì)應(yīng)的模塊、函數(shù)、類、方法中最開始、最后執(zhí)行，而不是在模塊、函數(shù)、類、方法之前執(zhí)行。

1、模塊級(jí)（setup_module/teardown_module）,開始于模塊的始末，在模塊的全局起作用【全局，不在類中】；
2、函數(shù)級(jí)（setup_function/reardown_function）,只對(duì)函數(shù)用例生效，不在類中起作用【不在類中】；
3、類級(jí)（setup_class/teardown_class）,只在類中的前后運(yùn)行一次【在類中】；
4、方法級(jí)（setup_method/teardown_method）,開始于方法始末【在類中】；
5、類里面的（setup/teardown）,運(yùn)行在調(diào)用方法的前后。

執(zhí)行順序：setup_method>test_weather>teardown_method

4）按照pytest稍加改造，代碼如下：

Plaintext import time from selenium import webdriver from selenium.webdriver.common.by import By class TestWeather(): ? ?def setup_method(self, method): ? ? ? ?self.driver = webdriver.Chrome() ? ? ? ?self.vars = {} ? ?def teardown_method(self, method): ? ? ? ?self.driver.qUIt() ? ?def test_weather(self): ? ? ? ?self.driver.get("https://www.baidu.com/") ? ? ? ?self.driver.find_element(By.ID,"kw").click() ? ? ? ?self.driver.find_element(By.ID,"kw").clear() ? ? ? ?self.driver.find_element(By.ID,"kw").send_keys(u"天氣預(yù)報(bào)") ? ? ? ?self.driver.find_element(By.ID,"su").click() ? ? ? ?time.sleep(3) ? ? ? ?self.driver.find_element(By.LINK_TEXT,u"北京天氣預(yù)報(bào)_一周天氣預(yù)報(bào)").click() ? ? ? ?# cls = self.driver.window_handles ? ? ? ?# self.driver.switch_to.window(cls[1]) ? ? ? ?self.driver.get("https://weathernew.pae.baidu.com/weathernew/pc?query=%E5%8C%97%E4%BA%AC%E5%A4%A9%E6%B0%94&srcid=4982") ? ? ? ?assert (self.driver.find_element(By.XPATH,"//div[@id='sfr-app']/div/div[2]/div/div[2]/div/div/div[2]/div/span").text == u"26°")

隨著氣溫的不斷下降我們的運(yùn)行后斷言失敗了，斷言失敗：

我們將溫度修改后，斷言成功：

補(bǔ)充：對(duì)于一些前端組件，無法定位的，我們可以通過JS來進(jìn)行傳參：

推薦學(xué)習(xí)：黑馬程序員移動(dòng)開發(fā)教程|5天快速玩轉(zhuǎn)JavaScript基礎(chǔ)教程（JS教程）

當(dāng)然對(duì)于大多數(shù)新手來講這些比較困難，其次之前我們也提到了，隨著業(yè)務(wù)復(fù)雜度較高，編碼起來工作量巨大，如何將它變得更簡(jiǎn)單呢？答案是：我們可以通過錄制工具來進(jìn)行并生成對(duì)應(yīng)的測(cè)試腳本。

五、如何做好前端自動(dòng)化？——使用錄制工具實(shí)現(xiàn)

錄制工具原理：它類似于按鍵精靈一樣。簡(jiǎn)單講：記錄你在瀏覽器中的各種操作。這有助于大家可以在短時(shí)間內(nèi)完成龐大的編碼任務(wù)，更注重場(chǎng)景設(shè)計(jì)。

優(yōu)先推薦，selenium IDE、katalon，這兩種跨平臺(tái)能力比較強(qiáng)的擴(kuò)展插件，通常在各種瀏覽器中都可以找到他們的身影。

1、selenium IDE：

1）瀏覽器擴(kuò)展中搜索selenium IDE并安裝

2）打開后點(diǎn)擊右上角rec進(jìn)行錄制：

3）錄制時(shí)調(diào)用瀏覽器，打開一個(gè)全新的頁面：

4）當(dāng)結(jié)束錄制時(shí)同樣點(diǎn)擊右上角該區(qū)域便結(jié)束錄制

5）結(jié)束錄制后將得到一個(gè)記錄全部操作步驟，操作路徑上的元素，及元素所對(duì)應(yīng)的值。

6）我們可以在這里修改和調(diào)試，添加一個(gè)斷言，將當(dāng)前溫度改為21°運(yùn)行，斷言結(jié)果失?。?br>

我們將溫度調(diào)整為當(dāng)前的溫度并運(yùn)行它，斷言結(jié)果成功。

7）導(dǎo)出并選擇想要導(dǎo)出的語言：

2、Katalon擴(kuò)展應(yīng)用操作簡(jiǎn)單介紹

katalon也是可以通過瀏覽器中的擴(kuò)展進(jìn)行添加。添加以后可以錄制腳本，方法同selenium IDE類似。

優(yōu)點(diǎn)是：當(dāng)你回放阻塞的時(shí)候，它會(huì)進(jìn)行截圖記錄。

斷言失?。?/p>

斷言成功：

導(dǎo)出并生成對(duì)應(yīng)語言的腳本：

如果選擇Python語言，導(dǎo)出的內(nèi)容將是Python2+WebDriver+Unittest組合的腳本。

推薦學(xué)習(xí)視頻：黑馬程序員Python自動(dòng)測(cè)試教程，python從基礎(chǔ)到UnitTest框架管理測(cè)試用例

既然可以錄制，為什么還要有人進(jìn)行編碼呢？那就要說下錄制腳本的缺點(diǎn)：

缺點(diǎn)1：錄制導(dǎo)出后代碼可維護(hù)性低，通用性較差，需要改造；
缺點(diǎn)2：遇到交互性特強(qiáng)的模塊需要錄制多個(gè)用例，對(duì)這種模塊的處理能力有限；
缺點(diǎn)3：如果要對(duì)自動(dòng)化測(cè)試框架進(jìn)行維護(hù)，對(duì)測(cè)試人員要求比較高，所以具有一定局限性；

但好處是：對(duì)于新手來講是學(xué)習(xí)自動(dòng)化最好的入門工具，較容易上手。

六、前端自動(dòng)化學(xué)習(xí)視頻推薦

當(dāng)然為了沖向更強(qiáng)的測(cè)試崗位，成為更好的測(cè)試人員，還是要加強(qiáng)學(xué)習(xí)。推薦下列前端ui測(cè)試自學(xué)視頻：

若你是對(duì)測(cè)試不太了解的測(cè)試小萌新，有太多太多對(duì)測(cè)試的疑惑（前途、薪資、技術(shù)含量、男生是否可以干.....），強(qiáng)烈推薦你觀看《測(cè)試小白必看：學(xué)習(xí)軟件測(cè)試必問的100個(gè)問題，從此貼開始》，相信能掃除掉你心目中90%以上的常見問題。

《100個(gè)常見問題鏈接》：http://bbs.itheima.com/thread-507947-1-1.html

最后，為方便大家自學(xué)軟件測(cè)試，特意給大家準(zhǔn)備了一份13G的超實(shí)用干貨學(xué)習(xí)資源，涉及的內(nèi)容非常全面。

包括軟件學(xué)習(xí)路線圖，黑馬50多天的上課視頻、16個(gè)突擊實(shí)戰(zhàn)項(xiàng)目，80余個(gè)軟件測(cè)試用軟件，37份測(cè)試文檔，70個(gè)軟件測(cè)試相關(guān)問題，40篇測(cè)試經(jīng)驗(yàn)級(jí)文章，上千份測(cè)試真題分享,還有2020軟件測(cè)試面試寶典，還有軟件測(cè)試求職的各類精選簡(jiǎn)歷，希望對(duì)大家有所幫助…..?

《2022黑馬測(cè)試學(xué)習(xí)路線圖鏈接》：http://bbs.itheima.com/thread-405757-1-1.html