[發明專利]一種頁面比對方法及系統

有效

• 申請號: 201310415046.5
• 申請日: 2013-09-12
• 公開（公告）號: CN104461310B
• 公開（公告）日: 2018-01-16
• 發明（設計）人: 周榮;孫世偉
• 申請（專利權）人: 阿里巴巴集團控股有限公司
• 主分類號: G06F3/0487
• 分類號: G06F3/0487;G06F3/0484
• 代理公司: 北京東方億思知識產權代理有限責任公司11258
• 代理人: 彭瓊

技術領域

本申請涉及計算機技術領域，尤其涉及一種頁面比對方法及系統。

背景技術

應用軟件開發過程中部署的代碼稱之為分支代碼，分支代碼上線應用到真實環境所部署的代碼稱之為主干代碼，分支代碼或主干代碼在后臺運行時，會在前臺生成相應的頁面。當分支代碼進行更新后，更新后的分支代碼運行時在前臺生成的頁面與當前的主干代碼運行時生成的頁面會有所不同，這兩個頁面的差別度也反映出對分支代碼的更新操作對其性能造成了何種程度的影響，因此，需要對更新后的分支代碼運行時生成的頁面與當前的主干代碼運行時生成的頁面進行相似度比對。

目前，常用的頁面相似度比對方式有以下兩種：

方式一：全像素精準比對。

第一步：確定需要進行比對的頁面的URL（Uniform Resource Locator，統一資源定位符）。由于進行對比的頁面是主干代碼和更新后的分支代碼生成的頁面（推廣開來也可視為不同版本的代碼生成的頁面），因此，需要進行對比的頁面具有相同的URL。

第二步：將所述URL分別發送給兩臺設備，由這兩臺設備利用所述URL獲取不同版本的頁面。假設設備1獲取版本1的頁面，設備2獲取版本2的頁面。

第三步：設備1對版本1的頁面做整張截圖，得到圖片1；設備2對版本2的頁面也做整張截圖，得到圖片2。

第四步：設備1將圖片1發送給設備3，設備2將圖片2發送給設備3，由設備3對圖片1和圖片2進行全像素的精準比對，若兩張圖片的相似度高，表示兩個版本的代碼性能差別不大；若兩張圖片的相似度低，表示兩個版本的代碼性能差別較大。

利用方式一進行頁面比對的優點是實現方案簡單，不會出現漏報的情況；但其缺點是誤報率高，這是因為方式一是全像素精準比對，即圖片中的每個像素點都要比對，而實際上，一個頁面中有重要區域也有非重要的區域，若重要區域的相似度很高，但非重要區域的相似度較低，則會影響最終的對比結果，導致出現誤報。

方式二：dom（Document Object Model，文檔對象模型)樹截取區域的模糊比對。

第一步：確定需要進行比對的頁面的URL。

第二步：將所述URL分別發送給設備1和設備2，由設備1獲取版本1的頁面，設備2獲取版本2的頁面。

第三步：設備1按照dom樹結構，對版本1的頁面做區域截圖，得到每個區域的圖片，即圖片1_1、圖片1_2...圖片1_n；設備2按照dom樹結構，對版本2的頁面做區域截圖，得到圖片2_1、圖片2_2...圖片2_n。

第四步：設備1將截取的圖片1_1、圖片1_2...圖片1_n發送給設備3，設備2將截取的圖片2_1、圖片2_2...圖片2_n發送給設備3，由設備3分別針對相同區域的截圖做模糊比對，得到每個區域的相似度結果。若所有區域的相似度都較高，則表示兩個版本的代碼性能差別較小；否則，表示兩個版本的代碼性能差別較大。

利用方式二進行頁面比對的優點也是實現方案簡單，且針對區域做模糊比對可降低誤報率；但其缺點是區域劃分不夠靈活，只能按照dom樹的結構進行劃分，且所有區域都按照相同的模糊度進行比對，若該模糊度取值較低，容易在非重要區域出現誤報；若該模糊度取值較高，又容易在重要區域出現漏報。

綜上所述，在目前的頁面比對方案中，劃分區域的方式不夠靈活，且進行模糊比對時容易出現誤報和漏報；另外，在從頁面中截圖時不能對頁面做任何行為操作，對于頁面中有下拉菜單等控件或是有滾播內容的情況，頁面的比對結果與實際情況相差會很大。

發明內容

本申請實施例提供了一種頁面比對方法及系統，用以解決現有技術中存在的頁面比對容易出現誤報和漏報的問題。

一種頁面比對方法，所述方法包括：

根據需要進行比對的頁面的地址信息，獲取該地址信息對應的不同版本的兩個頁面；

針對所述兩個頁面中按照相同的劃分條件劃分的每個區域，在該區域中執行為該區域設置的前置動作，并對該區域進行區域截圖，其中，兩個頁面中相同區域設置的前置動作相同；

針對所述兩個頁面進行區域截圖后得到的相同區域的圖片，利用為該區域設置的模糊度進行比對。

通過本申請實施例的方案，可以在截圖之前對頁面進行個性化的區域劃分，并對各區域執行設置的前置動作，確保截圖之前兩個頁面處于相同的頁面狀態，在對截圖進行比對時，根據為每個區域設置的模糊度分別進行比對操作，可有效降低誤報率和漏報率。

可選地，所述方法還包括：

在所述兩個頁面中分別執行為頁面設置的相同的前置動作；