作者：京東零售杜興文

首先聊一下概念，Web 前端自動化測驗是一種通過撰寫代碼來自動化執行 Web 應用程式的測驗任務的方法，它通常使用 JavaScript 和測驗框架 (如 Selenium、Appium 等) 來實作，

Web 前端自動化測驗的優點是可以提高測驗效率、減少測驗時間和測驗成本，并且可以確保測驗質量，以下是一些 Web 前端自動化測驗的優點:

提高測驗效率：自動化測驗可以在短時間內完成大量的測驗任務，從而減少測驗所需的時間和測驗成本，
減少測驗成本：自動化測驗不需要手動執行測驗任務，從而減少了測驗所需的人員和成本，
提高測驗質量：自動化測驗可以確保測驗的覆寫率和提高測驗的準確性，從而減少測驗遺漏和測驗質量不高的問題，
覆寫更多場景：自動化測驗可以覆寫更多的測驗場景，從而確保軟體質量得到保障，
減少人為錯誤：自動化測驗可以減少測驗人員的人為錯誤，從而提高測驗的準確性，

在實際應用中，Web 前端自動化測驗通常用于測驗 Web 應用程式的互動功能、性能、安全性等方面，例如，可以使用自動化測驗工具來測驗 Web 應用程式的登錄、注冊、導航、表單驗證等功能，或者使用自動化測驗工具來測驗 Web 應用程式的性能，如回應速度、頁面加載時間等，

總之，Web 前端自動化測驗是一種可以提高測驗效率、減少測驗成本和提高測驗質量的方法，適用于各種型別的 Web 應用程式，

本文談談前端自動化測驗從入門到精通再到專家級的方案與思維！分為以下不分：

一、首先來構建一個 Selenium 自動化測驗用例

示例測驗需求非常簡單：訪問百度主頁，搜索某個關鍵詞，并驗證搜索結果頁面的標題是“被搜索的關鍵詞”+“_ 百度搜索”，如果搜索的關鍵詞是“ChatGPT”，那么搜索結果頁面的標題就應該是“ ChatGPT_ 百度搜索”，

明白了測驗需求后，我強烈建議你先用手工方式執行一遍測驗，具體步驟是：打開 Chrome 瀏覽器，輸入百度的網址“www.baidu.com”；在搜索輸入框中輸入關鍵詞“ChatGPT”并按下回車鍵；驗證搜索結果頁面的標題是否是“ChatGPT _ 百度搜索”，

明確了 GUI 測驗的具體步驟后，我們就可以用 Java 代碼，基于 Selenium 實作這個測驗用例了，這里，我要用到 Chrome 瀏覽器，所以需要先下載 Chrome Driver 并將其放入環境變數，接下來，你可以用自己熟悉的方式建立一個空的 Maven 專案，然后在 POM 檔案中加入 Selenium 2.0 的依賴，如圖 1 所示，

圖 1 在 POM 檔案中加入 Selenium 2.0 的依賴

接著用 Java 創建一個 main 方法，并把如圖 2 所示的代碼復制到你的 main 方法中，下面是基于 Selenium 的自動化測驗用例的樣本代碼

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class BaiduSearch {
    public static void main(String[] args) {
        // 設定驅動路徑
        System.setProperty("webdriver.chrome.driver", "/path/to/chromedriver");

        // 啟動瀏覽器
        WebDriver driver = new ChromeDriver();

        // 訪問百度首頁
        driver.get("https://www.baidu.com");

        //獲取百度搜索輸入框元素，并自動寫入搜索內容
        driver.findElement(By.id("kw")).sendKeys("ChatGPT");

        //執行緒睡眠1秒
        Thread.sleep(1000);

        //獲取“百度一下”元素，并自動點擊
        driver.findElement(By.id("su")).click();

        //執行緒睡眠3秒
        Thread.sleep(3000);

        Assert.assertEquals("ChatGPT _ 百度搜索",driver.getTitle());
        //退出瀏覽器
        driver.quit();
}

以上是從 0 到 1 建立了一個最簡單直接的 GUI 自動化測驗用例，這個用例的實作很簡單，但是只有真正理解了 Selenium 工具的原理，你才能真正用好它，

二、入門了之后我們要在測驗職責的效率上大展身手，即腳本與資料的解耦 + Page Object模型，

“測驗腳本和資料解耦”的本質是實作了資料驅動的測驗，讓操作相同但是資料不同的測驗可以通過同一套自動化測驗腳本來實作，只是在每次測驗執行時提供不同的測驗輸入資料，

在測驗腳本中通過 data provider 去 CSV 檔案中讀取一行資料，賦值給相應的變數，執行測驗用例，接著再去 CSV 檔案中讀取下一行資料，讀取完所有的資料后，測驗結束，CSV 檔案中有幾行資料，測驗用例就會被執行幾次，具體流程如下圖所示，

“頁面物件模型”的核心理念是，以頁面為單位來封裝頁面上的控制元件以及控制元件的部分操作，而測驗用例使用頁面物件來完成具體的界面操作，

頁面物件模型的核心理念是，以頁面（Web Page 或者 Native App Page）為單位來封裝頁面上的控制元件以及控制元件的部分操作，而測驗用例，更確切地說是操作函式，基于頁面封裝物件來完成具體的界面操作，最典型的模式是“XXXPage.YYYComponent.ZZZOperation”，

基于這個思想，上述用例的偽代碼可以進化成下圖所示的結構，這里給出了 login 函式的偽代碼，建議大家按照這種思路自己去實作一下 search 和 logout 的代碼，這樣可以更好的體會頁面物件模型帶來的變化，

三、讓自動化測驗腳本更好地描述業務

業務流程抽象是，基于操作函式的更接近于實際業務的更高層次的抽象方式，基于業務流程抽象實作的測驗用例往往靈活性會非常好，你可以很方便地組裝出各種測驗用例，

假設，某個具體的業務流程是：已注冊的用戶登錄電商平臺購買指定的書籍，那么，基于業務流程抽象的測驗用例偽代碼，如下圖所示，

這段偽代碼的資訊量很大，但是理解了這段代碼的設計思想，也就掌握了業務流程抽象的精髓，

從整體結構上看，偽代碼順序呼叫了 4 個業務流程，依次是完成用戶登錄的 LoginFlow、完成書籍查詢的 SearchBookFlow、完成書籍購買的 CheckoutBookFlow、完成用戶登出的 LogoutFlow，

四、前端GUI自動化測驗的測驗資料

GUI 自動化測驗的測驗資料是指用于測驗應用程式用戶界面 (GUI) 的測驗資料，在自動化測驗中，測驗資料通常是從測驗資料集中獲取的，這些資料集包含了應用程式的不同輸入和輸出，

以下是一些常見的 GUI 自動化測驗資料:

輸入資料：輸入資料是指用于測驗應用程式輸入區域的輸入資料，例如文本框、下拉框、單選按鈕等，輸入資料通常包括變數名、變數值、資料型別等，
按鈕資料：按鈕資料是指用于測驗應用程式按鈕的點擊操作的輸入資料，按鈕資料通常包括按鈕的名稱、描述、點擊事件等，
文本資料：文本資料是指用于測驗應用程式文本輸入區域的輸入資料，文本資料通常包括變數名、變數值、文本內容等，
影像資料：影像資料是指用于測驗應用程式影像輸入區域的輸入資料，影像資料通常包括變數名、影像內容、尺寸等，
表格資料：表格資料是指用于測驗應用程式表格的輸入資料，表格資料通常包括表格名稱、行資料、列資料等，
圖表資料：圖表資料是指用于測驗應用程式圖表的輸入資料，圖表資料通常包括圖表名稱、資料系列、資料值等，

在 GUI 自動化測驗中，測驗資料集的構建對于測驗的成功非常重要，測驗資料集應該盡可能地覆寫應用程式的不同輸入和輸出，以便在測驗程序中識別潛在的問題和缺陷，

傳統上，資料質量被分成6個方面，

?準確性：一項資訊在多大程度上反映了現實？

?完備性：它是否滿足你對全面性的期望？

?連貫性：存盤在一個地方的資訊與存盤在其他地方的相關資料是否一致？

?及時性：當你需要時，你的資訊是否可用？

?有效性：資訊是否有特定的格式、型別或大小？它是否遵循業務規則/最佳實踐？

?完整性：不同的資料集能否被正確地連接起來，以反映一個更大的畫面？關系是否被很好地定義和實施？

這些維度是在對設計資料倉庫采取廣泛的觀點時定義的，考慮了所有定義和收集的資料集，它們之間的關系，以及正確服務于組織的能力，

五、提高 GUI 自動化測驗穩定性的關鍵技術

提高 GUI 自動化測驗穩定性的理論點包括以下幾點:

選擇合適的測驗框架：測驗框架是 GUI 自動化測驗的核心，它決定了測驗的效率和穩定性，選擇合適的測驗框架需要綜合考慮測驗工具、測驗環境、測驗需求等多個因素，
撰寫高質量的測驗用例：測驗用例是 GUI 自動化測驗的關鍵，它決定了測驗的覆寫率和測驗質量，撰寫高質量的測驗用例需要深入了解軟體功能和界面設計，能夠覆寫軟體的各個功能點和細節，
選擇適當的測驗資料：測驗資料是 GUI 自動化測驗的基礎，它決定了測驗的準確性和效率，選擇適當的測驗資料需要綜合考慮軟體功能、界面設計、測驗需求等多個因素，
優化測驗環境：測驗環境是 GUI 自動化測驗的基石，它決定了測驗的穩定性和可靠性，優化測驗環境需要綜合考慮測驗工具、測驗環境、測驗需求等多個因素，保證測驗環境的穩定性和兼容性，
進行性能測驗:GUI 自動化測驗需要在測驗程序中考慮軟體的性能和回應速度，進行性能測驗需要模擬大量的用戶操作和負載，評估軟體的性能和回應速度，及時發現和解決軟體性能瓶頸，
定期進行測驗維護:GUI 自動化測驗需要定期進行測驗維護，更新測驗用例和測驗資料，清理過時的測驗環境和測驗工具，保證測驗的及時性和有效性，

提高 GUI 自動化測驗穩定性的關鍵技術點包括以下幾點:

1. 基本HTML/CSS/JS技能：對于一個web前端自動化測驗工程師，基本的HTML/CSS/JS技能必不可少，可以幫助其更好的理解頁面互動與渲染機制，

2. 工具鏈技術：對于 web 前端自動化測驗，工具鏈技術是必備技能，例如 Grunt 和 Gulp 等，

3. 語言技能：web自動化測驗需要用到多種編程語言，如Java、Python、JavaScript等，具備這些語言的開發能力是必不可少的，

4. 基本的測驗技術：web前端自動化測驗工程師需要熟知測驗的基本概念和方法，如測驗計劃、測驗用例、測驗策略等，

5. API和介面測驗：web前端自動化測驗工程師需要熟悉如何對API和介面進行測驗，這對于確保應用程式功能的準確性非常重要，

6. 自動化測驗框架技術：web前端自動化測驗工程師需要掌握至少一種自動化測驗框架技術，如Selenium、WebdriverIO等，

7. 除錯技能：web前端自動化測驗工程師需要熟練使用除錯技能來解決測驗程序中的問題，如使用Fiddler、Chrome開發者工具等，

8. 資料庫技術：web前端自動化測驗工程師需要熟悉基本的資料庫操作和SQL陳述句，以便在測驗時進行資料驗證和資料比對，

9. 腳本撰寫技能：通過撰寫JavaScript和Python等腳本，可以幫助測驗人員實作自動化測驗和快速生成測驗報告，

10. 高效的測驗方法：web前端自動化測驗工程師需要熟練掌握各種測驗方法和技巧，以便在作業中更加高效和全面的完成測驗任務，

總之，提高 GUI 自動化測驗穩定性需要綜合考慮測驗框架、測驗用例、測驗資料、測驗環境、性能測驗和測驗維護等多個因素，通過不斷優化和升級，提高測驗效率和質量，大概可從以下5個方面來進行入手：

1、對于非預計的彈出對話框引起的不穩定，可以引入“例外場景恢復模式”來解決，

2、對于頁面控制元件屬性的細微變化造成的不穩定，可以使用“組合屬性”定位控制元件，并且可以通過“模糊匹配技術”提高定位識別率，

3、對于 A/B 測驗帶來的不穩定，需要在測驗用例腳本中做分支處理，并且需要腳本做到正確識別出不同的分支，

4、對于隨機的頁面延遲造成的不穩定，可以引入重試機制，重試可以是步驟級別的，也可以是頁面級別的，甚至是業務流程級別的，

5、對于測驗資料引起的不穩定，我在這里沒有詳細展開，留到后續的測驗資料準備系列文章中做專門介紹，

六、優雅的自動化測驗報告

早期基于視頻的 GUI 測驗報告由于體積較大，而且不能比較方便地和日志適配，所以并不是最好的解決方案，理想的 GUI 測驗報告應該是由一系列按時間順序的螢屏截圖組成，并且可以在這些截圖上高亮你所操作的元素，同時按照執行時序配有相關操作步驟的詳細描述，

商業 GUI 自動化測驗框架的 GUI 測驗報告已經做得非常成熟，通常不需要欄位外的定制或者開發，

但是開源 GUI 自動化測驗框架的 GUI 測驗報告往往需要自己來開發，主要使用了擴展 Selenium 原本的操作函式的方式以及 Hook 函式來實作，

開源 GUI 測驗框架的測驗報告實作思路

但是，如果你使用的是開源軟體，比如 Selenium WebDriver，那就需要自己去實作截圖以及高亮顯示操作元素的功能，實作的思路通常是：利用 Selenium WebDriver 的 screenshot 函式在一些特定的時機（比如，頁面發生跳轉時，在頁面上操作某個控制元件時，或者是測驗失敗時，等等）完成界面截圖功能，

具體到代碼實作，通常有兩種方式：1、擴展 Selenium 原本的操作函式；2、在相關的 Hook 操作中呼叫 screenshot 函式，

第一，擴展 Selenium 原本的操作函式實作截圖以及高亮顯示操作元素的功能

既然 Selenium 原生的 click 操作函式并不具備截圖以及高亮顯示操作元素的功能，那我們就來實作一個自己 click 函式，當自己實作的 click 函式被呼叫時：

首先，用 Javascript 代碼高亮顯示被操作的元素，高亮的實作方式就是利用 JavaScript 在物件的邊框上渲染一個 5-8 個像素的邊緣；

然后，呼叫 screenshot 函式完成點擊前的截圖；

最后，呼叫 Selenium 原生的 click 函式完成真正的點擊操作，

那么，以后凡是需要呼叫 click 函式時，都直接呼叫這個自己封裝的 click 函式，直接得到高亮了被操作物件的界面截圖，

第二，在相關的 Hook 操作中呼叫 screenshot 函式實作截圖以及高亮顯示操作元素的功能

其實使用 Hook 的方法比較簡單和直觀，但是你首先要理解什么是 Hook，

Hook 中文的意思是“鉤子”，直接通過定義介紹什么是“鉤子”會有些難以理解，那么我就通過一個實體來跟你解釋一下，當執行某個函式 F 時，系統會在執行函式 F 前先隱式執行一個空實作的函式，那么當你需要做一些擴展或者攔截時，就可以在這個空實作的函式中加入自定義的操作了，那么這個空實作的函式就是所謂的 Hook 函式，

第三是全球化 GUI 測驗報告的創新設計

所謂全球化測驗是指，同一個業務在全球各個國家都有自己網站，比如，一些大型全球化電商企業在很多國家都有自己的站點，那么對這些站點的測驗除了要關注基本的功能，以及各個國家特有的功能外，還要去驗證界面布局以及翻譯在背景關系環境中是否合適，

早期的做法是，雇傭當地的測驗工程師，由他們手工執行主要的業務場景測驗，并驗證相關的頁面布局，以及翻譯內容與背景關系中的匹配度，在當地專門雇傭的這些測驗工程師，被稱為 LQA，

顯然，聘請 LQA 的效率非常低，主要原因是：全部測驗作業都由 LQA 在專案后期手工執行，執行前還需要對他們進行業務培訓；同時，我們需要準備非常詳盡的測驗用例檔案，LQA 也要花很大的精力去截圖并完成最終的測驗報告，為了解決這種低效的模式，最好的解決方法就是：利用 GUI 自動化測驗工具生成完整的測驗執行程序的截圖，

這樣，LQA 就不再需要去手工執行測驗用例了，而是直接分析測驗報告中業務操作程序中 GUI 界面截圖就可以了，然后發現頁面布局問題或者是不恰當的翻譯問題，

這個方案看起來已經比較完美了，LQA 的作業重點也更清晰了，但這并不是最優的方案，因為這些 LQA 在實際作業中，還會有以下三個比較痛苦的地方：

需要經常在多個國家的測驗報告之間來回切換去比較頁面布局；

需要頻繁切換到美國網站（也就是主站）的報告，去比較翻譯內容與背景關系的匹配度；

發現缺陷后，還是需要從 GUI 測驗報告中復制截圖，并用影像軟體標注有問題的點，然后才能打開缺陷管理系統遞交缺陷報告，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/550030.html

標籤：Html/Css

上一篇：物流路由線路配載前端演算法邏輯實作方案

下一篇：漲姿勢了，有意思的氣泡 Loading 效果

前端自動化測驗之葵花寶典