本發(fā)明涉及互聯(lián)網(wǎng)領(lǐng)域，特別涉及一種頁(yè)面兼容性測(cè)試系統(tǒng)和方法。

背景技術(shù)：

電商平臺(tái)移動(dòng)端H5頁(yè)面，為使其能夠適用于各種不同的終端設(shè)備和軟件版本等，需要預(yù)先分別進(jìn)行兼容性測(cè)試。

現(xiàn)有技術(shù)中，主要采用用戶(測(cè)試人員)手動(dòng)的方式，進(jìn)行以下各方面的兼容性測(cè)試：操作系統(tǒng)/平臺(tái)兼容、瀏覽器兼容、屏幕尺寸/分辨率兼容等。

但是，這種測(cè)試方式比較耗時(shí)，且重復(fù)工作量很大，從而導(dǎo)致測(cè)試效率低下。

技術(shù)實(shí)現(xiàn)要素：

有鑒于此，本發(fā)明提供了一種頁(yè)面兼容性測(cè)試系統(tǒng)和方法，能夠提高測(cè)試效率。

為了達(dá)到上述目的，本發(fā)明的技術(shù)方案是這樣實(shí)現(xiàn)的：

一種頁(yè)面兼容性測(cè)試系統(tǒng)，包括：前端模塊和后端模塊；

所述前端模塊，用于在用戶設(shè)定的開始掃描到結(jié)束掃描這一時(shí)間段內(nèi)，利用Fiddler插件進(jìn)行以下處理：抓取對(duì)測(cè)試頁(yè)面進(jìn)行操作過(guò)程中所產(chǎn)生的符合預(yù)定要求的請(qǐng)求，并從抓取到的請(qǐng)求中過(guò)濾出預(yù)定類型的文件，將過(guò)濾出的各文件發(fā)送給所述后端模塊；

所述后端模塊，用于對(duì)過(guò)濾出的各文件進(jìn)行兼容性掃描，得到兼容性測(cè)試結(jié)果。

一種頁(yè)面兼容性測(cè)試方法，包括：

在用戶設(shè)定的開始掃描到結(jié)束掃描這一時(shí)間段內(nèi)，利用Fiddler插件抓取對(duì)測(cè)試頁(yè)面進(jìn)行操作過(guò)程中所產(chǎn)生的符合預(yù)定要求的請(qǐng)求，并從抓取到的請(qǐng)求中過(guò)濾出預(yù)定類型的文件；

對(duì)過(guò)濾出的各文件進(jìn)行兼容性掃描，得到兼容性測(cè)試結(jié)果。

可見，采用本發(fā)明所述方案，能夠快速掃描出可能存在的兼容性問(wèn)題，從而提高 了測(cè)試效率，而且，節(jié)省了大量的人力成本，另外，本發(fā)明所述方案實(shí)現(xiàn)起來(lái)簡(jiǎn)單方便，從而便于進(jìn)行普及和推廣。

附圖說(shuō)明

圖1為本發(fā)明頁(yè)面兼容性測(cè)試系統(tǒng)實(shí)施例的組成結(jié)構(gòu)示意圖。

圖2為本發(fā)明所述Fiddler插件的demo圖。

圖3為本發(fā)明頁(yè)面兼容性測(cè)試方法實(shí)施例的流程圖。

具體實(shí)施方式

為了使本發(fā)明的技術(shù)方案更加清楚、明白，以下參照附圖并舉實(shí)施例，對(duì)本發(fā)明所述方案作進(jìn)一步的詳細(xì)說(shuō)明。

圖1為本發(fā)明頁(yè)面兼容性測(cè)試系統(tǒng)實(shí)施例的組成結(jié)構(gòu)示意圖，如圖1所示，包括：前端模塊和后端模塊。

前端模塊，用于在用戶設(shè)定的開始掃描到結(jié)束掃描這一時(shí)間段內(nèi)，利用Fiddler插件進(jìn)行以下處理：抓取對(duì)測(cè)試頁(yè)面進(jìn)行操作過(guò)程中所產(chǎn)生的符合預(yù)定要求的請(qǐng)求，并從抓取到的請(qǐng)求中過(guò)濾出預(yù)定類型的文件，將過(guò)濾出的各文件發(fā)送給后端模塊；

后端模塊，用于對(duì)過(guò)濾出的各文件進(jìn)行兼容性掃描，得到兼容性測(cè)試結(jié)果。

其中，符合預(yù)定要求的請(qǐng)求可包括：響應(yīng)包中的超文本傳輸協(xié)議(http)狀態(tài)碼為2xx且包體內(nèi)容不為空的請(qǐng)求。

預(yù)定類型的文件可包括以下之一或任意組合：超文本標(biāo)記語(yǔ)言(HTML)文件、層疊樣式表(CSS)文件、JS(JavaScript)文件。

如圖3所示，后端模塊中又可具體包括：掃描子模塊和報(bào)告子模塊。

掃描子模塊，用于針對(duì)過(guò)濾出的各文件，分別根據(jù)預(yù)先生成的兼容性問(wèn)題知識(shí)庫(kù)對(duì)該文件進(jìn)行兼容性分析，得到分析結(jié)果；根據(jù)各分析結(jié)果生成預(yù)定格式的掃描報(bào)告素材，發(fā)送給報(bào)告子模塊；

報(bào)告子模塊，用于對(duì)接收到的掃描報(bào)告素材進(jìn)行保存，當(dāng)用戶請(qǐng)求查看兼容性測(cè)試結(jié)果時(shí)，將所述掃描報(bào)告素材加載到預(yù)先生成的報(bào)告模版中，呈現(xiàn)在用戶的瀏覽器 中。

另外，F(xiàn)iddler插件還可進(jìn)一步用于，對(duì)過(guò)濾出的各文件進(jìn)行壓縮打包，將得到的壓縮包發(fā)送給掃描子模塊；

相應(yīng)的，掃描子模塊還可進(jìn)一步用于，在對(duì)過(guò)濾出的各文件進(jìn)行兼容性掃描之前，對(duì)接收到的壓縮包進(jìn)行解壓，得到過(guò)濾出的各文件。

結(jié)合上述介紹，以下分別對(duì)Fiddler插件和后端模塊的具體實(shí)現(xiàn)進(jìn)行進(jìn)一步的詳細(xì)說(shuō)明。

(一)Fiddler插件

圖2為本發(fā)明所述Fiddler插件的demo圖，如圖2所示，用戶點(diǎn)擊“開始掃描”，并可通過(guò)APP或手機(jī)瀏覽器等訪問(wèn)測(cè)試頁(yè)面(如http://www.jd.com)并進(jìn)行操作，如輸入關(guān)鍵詞進(jìn)行搜索等，操作完成后，可點(diǎn)擊“結(jié)束掃描”。

另外，用戶可預(yù)先勾選需要掃描的文件類型，如圖2所示，其中的“全部掃描”即表示需要對(duì)HTML文件、CSS文件和JS文件均進(jìn)行掃描，假設(shè)本實(shí)施例中勾選“全部掃描”。

從開始掃描到結(jié)束掃描這一時(shí)間段內(nèi)，F(xiàn)iddler插件會(huì)抓取對(duì)測(cè)試頁(yè)面進(jìn)行操作過(guò)程中所產(chǎn)生的符合預(yù)定要求的請(qǐng)求，主要是對(duì)響應(yīng)包中的http狀態(tài)碼為2xx且包體內(nèi)容不為空的請(qǐng)求進(jìn)行抓取，并可根據(jù)響應(yīng)頭中的Content-Type字段進(jìn)行文件類型判斷，過(guò)濾出所需的HTML文件、CSS文件和JS文件，較佳的，還可對(duì)過(guò)濾出的各文件進(jìn)行Gzip壓縮打包，將得到的壓縮包發(fā)送給后端模塊。

Fiddler是一個(gè)http協(xié)議調(diào)試代理工具，為實(shí)現(xiàn)本發(fā)明所述功能，需要對(duì)現(xiàn)有Fiddler進(jìn)行擴(kuò)展，具體擴(kuò)展方式如下：

客戶端方面，使用.net框架語(yǔ)言進(jìn)行Fiddler擴(kuò)展，具體表現(xiàn)形式為用接口描述語(yǔ)言(IDE)建立一個(gè)C#的類庫(kù)項(xiàng)目，生成一個(gè)動(dòng)態(tài)鏈接庫(kù)(DLL)文件，將其放到Fiddler安裝文件中的Scripts文件夾；

可使用Fiddler相關(guān)擴(kuò)展的接口，如IAutoTamper接口里的OnLoad()方法提供相關(guān)用戶界面(UI)擴(kuò)展，另外，IFiddlerExtension接口中提供了對(duì)每一個(gè)http/https發(fā)送和接收請(qǐng)求的調(diào)用，可修改，記錄，或其它操作。

(二)后端模塊

如前所述，后端模塊中可具體包括：掃描子模塊和報(bào)告子模塊。

掃描子模塊接收到Fiddler插件發(fā)送來(lái)的壓縮包后，可對(duì)其進(jìn)行解壓，得到過(guò)濾出的各文件，并可進(jìn)一步識(shí)別各文件的類型是否為HTML、CSS或JS，忽略不需要進(jìn)行掃描的文件等，之后，可針對(duì)每個(gè)文件，分別根據(jù)預(yù)先生成的兼容性問(wèn)題知識(shí)庫(kù)對(duì)該文件進(jìn)行兼容性分析，即對(duì)該文件進(jìn)行代碼分析并與兼容性問(wèn)題知識(shí)庫(kù)中的內(nèi)容進(jìn)行匹配等，得到分析結(jié)果，并根據(jù)各分析結(jié)果生成預(yù)定格式的掃描報(bào)告素材，發(fā)送給報(bào)告子模塊。

兼容性問(wèn)題知識(shí)庫(kù)主要從業(yè)界已積累的兼容性問(wèn)題以及實(shí)際工作中反饋、搜集等得到的產(chǎn)品問(wèn)題分析和轉(zhuǎn)化而來(lái)，支持對(duì)兼容性問(wèn)題知識(shí)庫(kù)進(jìn)行隨時(shí)更新。兼容性問(wèn)題知識(shí)庫(kù)中中的內(nèi)容可分為兩類，即正則表達(dá)式和檢測(cè)腳本，其中，正則表達(dá)式主要用于代碼的按行分析，檢測(cè)腳本主要用于識(shí)別按行分析無(wú)法識(shí)別的問(wèn)題。

如何得到分析結(jié)果為現(xiàn)有技術(shù)，另外，所述預(yù)定格式可為可擴(kuò)展標(biāo)記語(yǔ)言(XML)格式或Json格式等，如何根據(jù)各分析結(jié)果生成預(yù)定格式的掃描報(bào)告素材同樣為現(xiàn)有技術(shù)。

報(bào)告子模塊可對(duì)接收到的掃描報(bào)告素材進(jìn)行保存，同時(shí)保存有預(yù)先生成的報(bào)告模版，當(dāng)用戶請(qǐng)求查看兼容性測(cè)試結(jié)果時(shí)，可將掃描報(bào)告素材加載到報(bào)告模版中，呈現(xiàn)在用戶的瀏覽器中。如圖2所示，當(dāng)用戶點(diǎn)擊“查看結(jié)果”時(shí)，可跳轉(zhuǎn)到相應(yīng)的統(tǒng)一資源定位符(URL)對(duì)應(yīng)的頁(yè)面進(jìn)行測(cè)試結(jié)果展示。

當(dāng)然，以上僅為舉例說(shuō)明，在實(shí)際應(yīng)用中，也可以采用其它方式，如將兼容性測(cè)試結(jié)果直接發(fā)送到用戶指定的郵箱中，以供用戶查看。

基于上述介紹，本發(fā)明同時(shí)公開了一種頁(yè)面兼容性測(cè)試方法。

圖3為本發(fā)明頁(yè)面兼容性測(cè)試方法實(shí)施例的流程圖，如圖3所示，包括以下步驟31～32。

步驟31：在用戶設(shè)定的開始掃描到結(jié)束掃描這一時(shí)間段內(nèi)，利用Fiddler插件抓取對(duì)測(cè)試頁(yè)面進(jìn)行操作過(guò)程中所產(chǎn)生的符合預(yù)定要求的請(qǐng)求，并從抓取到的請(qǐng)求中過(guò)濾出預(yù)定類型的文件。

其中，符合預(yù)定要求的請(qǐng)求可包括：響應(yīng)包中的http狀態(tài)碼為2xx且包體內(nèi)容不為空的請(qǐng)求。

預(yù)定類型的文件可包括以下之一或任意組合：HTML文件、CSS文件、JS文件。

步驟32：對(duì)過(guò)濾出的各文件進(jìn)行兼容性掃描，得到兼容性測(cè)試結(jié)果。

本步驟中，可針對(duì)過(guò)濾出的各文件，分別根據(jù)預(yù)先生成的兼容性問(wèn)題知識(shí)庫(kù)對(duì)該文件進(jìn)行兼容性分析，得到分析結(jié)果；根據(jù)各分析結(jié)果生成預(yù)定格式的掃描報(bào)告素材；

當(dāng)用戶請(qǐng)求查看兼容性測(cè)試結(jié)果時(shí)，可將所述掃描報(bào)告素材加載到預(yù)先生成的報(bào)告模版中，呈現(xiàn)在用戶的瀏覽器中。

在實(shí)際應(yīng)用中，支持對(duì)兼容性問(wèn)題知識(shí)庫(kù)進(jìn)行隨時(shí)更新。

總之，采用本發(fā)明所述方案，能夠快速掃描出可能存在的兼容性問(wèn)題，從而提高了測(cè)試效率，而且，節(jié)省了大量的人力成本，另外，通過(guò)對(duì)兼容性問(wèn)題知識(shí)庫(kù)進(jìn)行隨時(shí)更新，可保證兼容性掃描的正確性并擴(kuò)大掃描范圍，再有，本發(fā)明所述方案實(shí)現(xiàn)起來(lái)簡(jiǎn)單方便，從而便于進(jìn)行普及和推廣。

綜上所述，以上僅為本發(fā)明的較佳實(shí)施例而已，并非用于限定本發(fā)明的保護(hù)范圍。凡在本發(fā)明的精神和原則之內(nèi)，所作的任何修改、等同替換、改進(jìn)等，均應(yīng)包含在本發(fā)明的保護(hù)范圍之內(nèi)。