網頁前端測試方法及裝置與流程

本發明涉及互聯網技術領域，具體而言，涉及網頁前端測試方法及裝置。

背景技術：

網頁前端為互聯網技術的重要分支，在界面展示和用戶交互方面占據極為重要的地位。隨著互聯網的發展，越來越多的后端業務邏輯逐步前端化，使得前端業務邏輯日趨復雜。

近些年前端技術日新月異，隨之，前端領域也紛紛涌現出各種單元測試方案，如：jasmine、mocha等。這些單元測試方案雖從一定程度上能保證前端代碼質量。但均存在將業務功能的測試用例直接耦合在業務代碼中，前端業務代碼的高耦合度致使前端單元測試用例維護變得異常復雜。

技術實現要素：

本發明的目的在于提供一種網頁前端測試方法，用以改善上述問題。

本發明的另一目的在于提供一種網頁前端測試裝置，用以改善上述問題。

為了實現上述目的，本發明實施例采用的技術方案如下：

本發明實施例提供一種網頁前端測試方法。所述方法應用于相互通信連接的客戶端與網頁服務器。所述方法包括：所述客戶端響應測試指令，生成訪問請求數據，其中，所述訪問請求數據包括用于標識需要測試的待測試功能的測試標識；所述客戶端將所述訪問請求數據發送給所述網頁服務器；所述網頁服務器根據所述測試標識，獲得與待測試功能對應的測試用例；所述網頁服務器根據訪問請求數據，獲取待反饋數據，其中，所述待反饋數據包括與所述待測試功能對應的待測試文件；所述網頁服務器根據所述測試用例及待反饋數據，生成響應數據；所述網頁服務器將所述響應數據發送至所述客戶端；所述客戶端執行所述響應數據，以得測試結果。

本發明實施例還提供一種網頁前端測試方法。所述方法應用于與客戶端通信連接的網頁服務器，所述方法包括：接收所述客戶端發送的訪問請求數據，其中，所述訪問請求數據包括用于標識需要測試的待測試功能的測試標識；根據所述測試標識，獲得與待測試功能對應的測試用例；根據訪問請求數據，獲取待反饋數據，其中，所述待反饋數據包括與所述待測試功能對應的待測試文件；根據所述測試用例及待反饋數據，生成響應數據；將所述響應數據發送至所述客戶端，以獲得所述客戶端反饋的測試結果，其中，所述測試結果由所述客戶端執行所述響應數據后生成。

本發明實施例還提供一種網頁前端測試裝置。所述裝置應用于與客戶端通信連接的網頁服務器，所述裝置包括：接收模塊、獲取模塊、生成模塊及發送模塊。接收模塊，用于接收所述客戶端發送的訪問請求數據，其中，所述訪問請求數據包括用于標識需要測試的待測試功能的測試標識。獲取模塊，用于根據所述測試標識，獲得與待測試功能對應的測試用例；及還用于根據訪問請求數據，獲取待反饋數據，其中，所述待反饋數據包括與所述待測試功能對應的待測試文件。生成模塊，用于根據所述測試用例及待反饋數據，生成響應數據。發送模塊，用于將所述響應數據發送至所述客戶端，以獲得所述客戶端反饋的測試結果，其中，所述測試結果由所述客戶端執行所述響應數據后生成。

與現有技術相比，本發明提供的一種網頁前端測試方法及裝置。可應用于相互通信連接的客戶端與網頁服務器。所述方法包括所述客戶端響應測試指令，生成訪問請求數據，其中，所述訪問請求數據包括用于標識需要測試的待測試功能的測試標識。所述網頁服務器根據所述測試標識，獲得與待測試功能對應的測試用例。精確及快速的查找到對應的測試用例，通過效率。根據訪問請求數據，獲取待反饋數據，其中，所述待反饋數據包括與所述待測試功能對應的待測試文件；根據所述測試用例及待反饋數據，生成響應數據。從而減少待反饋數據與測試用例的高度耦合，提高測試用例可維護性以及測試效率。

為使本發明的上述目的、特征和優點能更明顯易懂，下文特舉較佳實施例，并配合所附附圖，作詳細說明如下。

附圖說明

為了更清楚地說明本發明實施例的技術方案，下面將對實施例中所需要使用的附圖作簡單地介紹，應當理解，以下附圖僅示出了本發明的某些實施例，因此不應被看作是對范圍的限定，對于本領域普通技術人員來講，在不付出創造性勞動的前提下，還可以根據這些附圖獲得其他相關的附圖。

圖1示出了本發明較佳實施例的應用環境示意圖。

圖2為本發明較佳實施例提供的網頁服務器的方框示意圖。

圖3為本發明第一實施例提供的一種網頁前端測試方法的流程圖。

圖4為圖3中步驟s101的子步驟流程圖。

圖5為圖3中步驟s105的子步驟流程圖。

圖6為本發明第二實施例提供的一種網頁前端測試方法的流程圖。

圖7本發明第三實施例提供的一種網頁前端測試裝置的方框示意圖。

圖標：400-用戶終端；401-客戶端；100-網頁服務器；300-網絡；111-存儲器；112-處理器；113-通信單元；200-網頁前端測試裝置；201-接收模塊；202-獲取模塊；203-生成模塊；204-發送模塊。

具體實施方式

下面將結合本發明實施例中附圖，對本發明實施例中的技術方案進行清楚、完整地描述，顯然，所描述的實施例僅僅是本發明一部分實施例，而不是全部的實施例。通常在此處附圖中描述和示出的本發明實施例的組件可以以各種不同的配置來布置和設計。因此，以下對在附圖中提供的本發明的實施例的詳細描述并非旨在限制要求保護的本發明的范圍，而是僅僅表示本發明的選定實施例。基于本發明的實施例，本領域技術人員在沒有做出創造性勞動的前提下所獲得的所有其他實施例，都屬于本發明保護的范圍。

應注意到：相似的標號和字母在下面的附圖中表示類似項，因此，一旦某一項在一個附圖中被定義，則在隨后的附圖中不需要對其進行進一步定義和解釋。同時，在本發明的描述中，術語“第一”、“第二”等僅用于區分描述，而不能理解為指示或暗示相對重要性。

本發明下述各實施例如無特別說明均可應用于如圖1所示的環境中，如圖1所示，用戶終端400、網頁服務器100位于網絡300中，網絡300包括無線網絡或有線網絡，通過網絡300，用戶終端400與網頁服務器100進行數據交互。網頁服務器100可以是一個服務器，也可以是多個執行不同任務的服務器。

于本發明實施例中，用戶終端400優選為移動終端設備，例如可以包括智能手機、平板電腦、電子書閱讀器、膝上型便攜計算機、車載電腦、穿戴式移動終端等等。該用戶終端400中安裝客戶端401，與網頁服務器100相對應，為用戶提供服務。所述客戶端401與所述網頁服務器100通信連接。所述客戶端401可以是瀏覽器，也可以為其他可訪問網頁服務器100的app。

如圖2所示，是圖1中網頁服務器100的方框示意圖。所述網頁服務器100包括網頁前端測試裝置200、存儲器111、處理器112及通信單元113。

所述存儲器111、處理器112以及通信單元113各元件相互之間直接或間接地電性連接，以實現數據的傳輸或交互。例如，這些元件相互之間可通過一條或多條通訊總線或信號線實現電性連接。所述網頁前端測試裝置200包括至少一個可以軟件或固件(firmware)的形式存儲于所述存儲器111中或固化在所述網頁服務器100的操作系統(operatingsystem，os)中的軟件功能模塊。所述處理器112用于執行所述存儲器111中存儲的可執行模塊，例如所述網頁前端測試裝置200所包括的軟件功能模塊及計算機程序等。

其中，所述存儲器111可以是，但不限于，隨機存取存儲器(randomaccessmemory，ram)，只讀存儲器(readonlymemory，rom)，可編程只讀存儲器(programmableread-onlymemory，prom)，可擦除只讀存儲器(erasableprogrammableread-onlymemory，eprom)，電可擦除只讀存儲器(electricerasableprogrammableread-onlymemory，eeprom)，實現了數據持久化功能的存儲系統等。其中，存儲器111用于存儲程序或者數據。所述通信單元113用于通過所述網絡300建立所述網頁服務器100與其它通信終端之間的通信連接，并用于通過所述網絡300收發數據。

應當理解的是，圖1所示的結構僅為網頁服務器100的結構示意圖，所述網頁服務器100還可包括比圖1中所示更多或者更少的組件，或者具有與圖1所示不同的配置。圖1中所示的各組件可以采用硬件、軟件或其組合實現。

第一實施例

請參照圖3，是本發明較佳實施例提供的一種網頁前端測試方法，應用于相互通信連接的客戶端401與網頁服務器100。所述網頁前端測試方法包括以下步驟：

步驟s101，所述客戶端401響應測試指令，生成訪問請求數據。

本實施例中，客戶端401通過訪問請求數據從網頁服務器100獲取加載網頁的數據及實現各種前端網站服務的數據。所述訪問請求數據包括用于標識需要測試的待測試功能及與待測試功能對應的待測試文件的測試標識。需要說明的是，待測試功能與待測試文件之間的對應關系可以預先設置。所述訪問請求數據還包括網頁服務器100對應的網頁地址(例如，百度網頁服務器100對應的網頁地址為www.baidu.com)。待測試功能可以是網頁的前端網站服務對應的功能模塊。待測試文件可以是實現待測試功能的腳本文件，例如可以是前端javascript腳本文件。如圖4所示，步驟s101包括以下子步驟：

子步驟s1011，所述客戶端401響應所述測試指令，獲得與所述測試指令對應的待測試業務信息。

在本實施例中，測試指令可以是觸發對網頁的一個或多個前端網站服務進行測試的指令。測試指令可以由測試員通過用戶終端400觸發，也可以是按照預設置的規則觸發。待測試業務信息可以是被指定需要被測試的一個或多個前端網站服務對應的待測試功能的業務信息。待測試業務信息包括待測試功能的標識信息及實現待測試功能的業務規則。前端網站服務與待測試業務信息之間的對應關系可以通過預先設置于用戶終端400。

子步驟s1012，所述客戶端401根據待測試業務信息生成與所述待測試功能對應的測試標識。

在本實施例中，測試標識包括待測試文件標識及待測試功能標識。待測試文件標識可以是待測試文件名稱，例如，待測試文件名稱可以是demo.js；待測試功能標識可以是待測試功能的名稱，例如，待測試功能的名稱可以是democontroller.demofunction。客戶端401根據待測試業務信息生成待測試文件標識及待測試功能標識。

子步驟s1013，所述客戶端401獲取與所述網頁服務器100對應的網頁地址。

子步驟s1014，所述客戶端401根據所述網頁地址及所述測試標識生成所述訪問請求數據。

在本實施例中，客戶端401通過網頁地址訪問網頁服務器100以獲取加載網頁的數據及實現各種前端網站服務的數據，例如，與各項前端網站服務對應的多個前端js腳本文件、前端css樣式文件、jpg、png等圖片資源文件，這些資源文件在訪問時可以同時從網頁服務器100中獲取。所述測試標識用于標示通過訪問請求數據需要測試的待測試功能及待測試文件。所述訪問請求數據可以是包括訪問地址，訪問地址包括網頁地址及測試標識。例如，訪問地址可以是baidu.com？testfile＝demo.js&testmodule＝democontroller.demofunction。

步驟s102，客戶端401將所述訪問請求數據發送給所述網頁服務器100。

在本實施例中，客戶端401在生成訪問請求數據后自動發送給網頁服務器100。具體地，通過網絡300將訪問請求發送給網頁服務器100。以便流程進入步驟s103。

步驟s103，所述網頁服務器100根據所述測試標識，獲得與待測試功能對應的測試用例。

在本實施例中，網頁服務器100接收訪問請求數據后，解析訪問請求數據中的測試標識，以獲得測試標識中的待測試文件標識及待測試功能標識。測試用例(testcase)是為某個特殊目標而編制的一組測試輸入、執行條件以及預期結果。每一個待測試功能都存在對應的測試用例。測試用例、及測試用例與待測功能之間的對應關系可以是預先存儲在網頁服務器100內。因此，當從測試標識中解析出待測試功能標識后，根據待測試功能標識，利用測試用例與待測功能之間的對應關系從預先存儲的測試用例中獲取與待測試功能對應的測試用例。這樣提高查找與待測試功能對應的測試用例的精確性和效率。

步驟s104，所述網頁服務器100根據訪問請求數據，獲取待反饋數據，其中，所述待反饋數據包括與所述待測試功能對應的待測試文件。

在本實施例中，待反饋數據可以是反饋給客戶端401以便客戶端401加載網頁的數據及實現各種前端網站服務的數據。待反饋數據可以包括，但不限于包括：待測試文件、暫不測試的功能對應的腳本文件、前端css樣式文件、jpg、png等圖片資源文件。

步驟s105，所述網頁服務器100根據所述測試用例及待反饋數據，生成響應數據。

在本實施例中，所述網頁服務器100將獲取的所述測試用例動態的注入所述待反饋數據，以生成響應數據。測試用例與所有的腳本文件分離，在測試時通過將獲取與待測試功能對應的測試用例動態注入待反饋數據中，有效的降低了響應數據的耦合度，使響應數據被優化，減輕客戶端401加載響應數據的負擔。同時通過動態注入測試用例降低甚至脫離測試用例對運行環境的依賴，實現任意環境的測試用例引入，極大地提高測試用例可維護性以及測試效率。可選地，如圖5所示，步驟s105包括以下子步驟：

子步驟s1051，所述網頁服務器100根據所述待測試文件標識從所述待反饋數據中獲取對應的所述待測試文件。

在本實施例中，待反饋數據中包括實現各個前端網站服務的腳本文件，從所有的腳本文件中通過待測試文件標識查找出待測試文件。需要說明的是，即使只測試一個前端網站服務，客戶端401均需先訪問網頁服務器100，而訪問網頁服務器100，會同時請求多個前端網站服務對應的多個前端js腳本文件。

子步驟s1052，所述網頁服務器100根據與所述待測試功能標識對應的業務規則將所述測試用例注入所述待測試文件。

在本實施例中，業務規則可以是網站服務實現過程中的業務邏輯，例如，搜索服務的業務規則為先顯示搜索界面，再接收搜索內容，接著進行搜素，最后顯示搜索結果。注入測試用例可以是將測試用例加入待測試文件的腳本文件中。按照業務規則將測試用例注入待測試文件中可以是，根據業務規則在待測試文件中選擇加入測試用例的位置。例如，測試搜索功能時，根據搜索服務的業務規則，將測試搜索功能的測試用例注入在實現顯示搜索界面的腳本文件之后，使待測試文件在被執行的過程中，當顯示了搜索界面后開始執行測試搜索功能的測試用例。這樣可減少、甚至是消除測試用例對測試環境的依賴。

在本實施例中，將已注入測試用例的待測試文件替換待反饋數據中沒注入測試用例的待測試文件，以生成響應數據。

步驟s106，所述網頁服務器100將所述響應數據發送至所述客戶端401。

在本實施例中，并將響應數據通過網絡300發送給客戶端401。

步驟s107，所述客戶端401執行所述響應數據，以得測試結果。

在本實施例中，客戶端401根據響應數據對網頁進行加載。啟動待測試功能。可以是運行與待測試功能對應的注入了測試用例的待測試文件，以獲得當前測試環境下的測試結果。可選地，可以使用javascriptobjectnotation進行測試結果收集。

步驟s108，所述客戶端401將所述測試結果發送至所述網頁服務器100。

在本實施例中，將收集的測試結果發送給網頁服務器100。例如，將json格式的測試結果通過ajax發送給網頁服務器100。

步驟s109，所述網頁服務器100對所述測試結果進行展示。

在本實施例中，解析接收到的測試結果。集中展示不同網站服務對應的測試結果。以便對不同網站服務的測試結果進行處理，例如，當測試結果顯示一項網站業務的業務邏輯存在邏輯問題，則對該網站也的業務邏輯順序進行調整等。能夠給網站開發人員提供從微觀(單項前端業務功能)到宏觀(網站前端整體業務功能)的統一監控，極大地提高業務功能和整個網站的穩定性和維護性。

第二實施例

如圖6所示，是本發明較佳實施例提供的一種網頁前端測試方法，所述方法應用于網頁服務器100，所述網頁前端測試方法包括以下步驟：

步驟s201，接收所述客戶端401發送的訪問請求數據，其中，所述訪問請求數據包括用于標識需要測試的待測試功能的測試標識。

在本實施例中，解析訪問請求數據，從訪問請求數據中獲取對需要測試的待測試功能的測試標識。測試標識包括待測試文件標識及待測試功能標識。待測試文件標識可以是待測試文件名稱，例如，待測試文件名稱可以是demo.js；待測試功能標識可以是待測試功能的名稱，例如，待測試功能的名稱可以是democontroller.demofunction。客戶端401根據待測試業務信息生成待測試文件標識及待測試功能標識。

步驟s202，根據所述測試標識，獲得與待測試功能對應的測試用例。

在本實施例中，測試用例、及測試用例與待測功能之間的對應關系可預先存儲在網頁服務器100內。因此，當從測試標識中解析出待測試功能標識后，根據待測試功能標識，利用測試用例與待測功能之間的對應關系從預先存儲的測試用例中獲取與待測試功能對應的測試用例。這樣提高查找與待測試功能對應的測試用例的精確性和效率。

步驟s203，根據訪問請求數據，獲取待反饋數據，其中，所述待反饋數據包括與所述待測試功能對應的待測試文件。

在本實施例中，待反饋數據可以是反饋給客戶端401以便客戶端401加載網頁的數據及實現各種前端網站服務的數據。待反饋數據可以包括，但不限于包括：待測試文件、暫不測試的功能對應的腳本文件、前端css樣式文件、jpg、png等圖片資源文件。

步驟s204，根據所述測試用例及待反饋數據，生成響應數據。

在本實施例中，所述網頁服務器100將獲取的所述測試用例動態的注入所述待反饋數據，以生成響應數據。測試用例與所有的腳本文件分離，在測試時通過將獲取與待測試功能對應的測試用例動態注入待反饋數據中，有效的降低了響應數據的耦合度，使響應數據被優化，減輕客戶端401加載響應數據的負擔。同時通過動態注入測試用例降低甚至脫離測試用例對運行環境的依賴，實現任意環境的測試用例引入，極大地提高測試用例可維護性以及測試效率。可選地，執行步驟s204的方式可以是根據所述待測試文件標識從所述待反饋數據中獲取對應的所述待測試文件；根據與所述待測試功能標識對應的業務規則將所述測試用例注入所述待測試文件。

步驟s205，將所述響應數據發送至所述客戶端401，以獲得所述客戶端401反饋的測試結果，其中，所述測試結果由所述客戶端401執行所述響應數據后生成。

步驟s206，對所述測試結果進行展示。

在本實施例中，解析接收到的測試結果。集中展示不同網站服務對應的測試結果。以便對不同網站服務的測試結果進行處理，例如，當測試結果顯示一項網站業務的業務邏輯存在邏輯問題，則對該網站也的業務邏輯順序進行調整等。能夠給網站開發人員提供從微觀(單項前端業務功能)到宏觀(網站前端整體業務功能)的統一監控，極大地提高業務功能和整個網站的穩定性和維護性。

第三實施例

請參照圖7，是本發明較佳實施例提供的應用于網頁服務器100的網頁前端測試裝置200。網頁前端測試裝置200包括：接收模塊201、獲取模塊202、生成模塊203及發送模塊204。

接收模塊201，用于接收所述客戶端401發送的訪問請求數據，其中，所述訪問請求數據包括用于標識需要測試的待測試功能的測試標識。

在本發明實施例中，步驟s201可以由接收模塊201執行。

獲取模塊202，用于根據所述測試標識，獲得與待測試功能對應的測試用例；及還用于根據訪問請求數據，獲取待反饋數據，其中，所述待反饋數據包括與所述待測試功能對應的待測試文件。

在本實施例中，步驟s202、步驟s203、步驟s103步驟s104可以由獲取模塊202執行。

生成模塊203，用于根據所述測試用例及待反饋數據，生成響應數據。

在本實施例中，步驟s204及步驟s105可以由生成模塊203執行。需要說明的是，子步驟s1051及子步驟s1051也可以由生成模塊203執行。生成模塊203執行步驟s204或步驟s105的方式可以是將獲取的所述測試用例動態的注入所述待反饋數據，以生成響應數據。可選地，所述測試用例動態的注入通過如下方式：根據所述待測試文件標識從所述待反饋數據中獲取對應的所述待測試文件，再根據與所述待測試功能標識對應的業務規則將所述測試用例注入所述待測試文件。

發送模塊204，用于將所述響應數據發送至所述客戶端401，以獲得所述客戶端401反饋的測試結果，其中，所述測試結果由所述客戶端401執行所述響應數據后生成。

在本實施例中，步驟s205及步驟s106可以由發送模塊204執行。

在本實施例中，網頁前端測試裝置200還包括展示模塊，所述展示模塊用于對所述測試結果進行展示。可選地，步驟s109及步驟s206可以由展示模塊執行。

綜上所述，本發明實施例提供的一種網頁前端測試方法及裝置。所述方法應用于相互通信連接的客戶端與網頁服務器。所述方法包括：客戶端響應測試指令，生成訪問請求數據，其中，所述訪問請求數據包括用于標識需要測試的待測試功能的測試標識；將所述訪問請求數據發送給所述網頁服務器；所述網頁服務器根據所述測試標識，獲得與待測試功能對應的測試用例；根據訪問請求數據，獲取待反饋數據，其中，所述待反饋數據包括與所述待測試功能對應的待測試文件；根據所述測試用例及待反饋數據，生成響應數據；將所述響應數據發送至所述客戶端；所述客戶端執行所述響應數據，以得測試結果。降低測試過程中客戶端加載數據的耦合度，降低測試用例對測試環境的依賴，提高測試效率。測試用例也更加方便管理維護。進而減少網頁前端測試工作的人力成本和時間成本。

以上所述，僅為本發明的具體實施方式，但本發明的保護范圍并不局限于此，任何熟悉本技術領域的技術人員在本發明揭露的技術范圍內，可輕易想到變化或替換，都應涵蓋在本發明的保護范圍之內。因此，本發明的保護范圍應所述以權利要求的保護范圍為準。