TWI559214B - Web page layout and browser compatibility of the automatic detection methods, systems and their computers Program, computer device - Google Patents

Web page layout and browser compatibility of the automatic detection methods, systems and their computers Program, computer device Download PDF

Info

Publication number
TWI559214B
TWI559214B TW103136477A TW103136477A TWI559214B TW I559214 B TWI559214 B TW I559214B TW 103136477 A TW103136477 A TW 103136477A TW 103136477 A TW103136477 A TW 103136477A TW I559214 B TWI559214 B TW I559214B
Authority
TW
Taiwan
Prior art keywords
webpage
layout
version
mask
area
Prior art date
Application number
TW103136477A
Other languages
Chinese (zh)
Other versions
TW201616338A (en
Inventor
Mei-Jin Wang
Jer Min Tsai
Chien Jen Wang
Der Min Tsai
Houn Yuan Lin
Original Assignee
Univ Kun Shan
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Univ Kun Shan filed Critical Univ Kun Shan
Priority to TW103136477A priority Critical patent/TWI559214B/en
Publication of TW201616338A publication Critical patent/TW201616338A/en
Application granted granted Critical
Publication of TWI559214B publication Critical patent/TWI559214B/en

Links

Description

網頁版面與瀏覽器相容性之自動偵測方法、系統及其電腦 程式、電腦裝置 Automatic detection method, system and computer for web page layout and browser compatibility Program, computer device

本發明係有關於一種網頁版面與瀏覽器相容性之自動偵測方法、系統及其電腦程式、電腦裝置,特別是指一種可用以偵測網站之網頁版面是否發生異常之方法、系統及其程式與裝置。 The present invention relates to a method and system for automatically detecting web page layout and browser compatibility, a computer program thereof, and a computer device, and particularly a method and system for detecting whether an abnormality occurs on a web page of a website. Programs and devices.

目前一般網站上用以供瀏覽使用之網頁,均必須先經過設計編排後,才能放上網站之伺服器,以供使用者瀏覽。但由於瀏覽器之種類有很多種,較為常見的則有Internet Explorer(IE)、Mozilla Firefox(火狐)、Google Chrome、Opera及Safari。惟每一款瀏覽器核心的排版引擎(Layout Engine)並不同,而且每一款瀏覽器之設計組成亦不相同,因此相同的網頁編排,在不同的瀏覽器上所呈現出來的網頁版面也會有所不同,甚至於嚴重者會造成版面錯亂。所以網頁開發者於網頁編排完成後,均必須以人工方式進行不同瀏覽器的測試瀏覽,藉以確保所編排設計的網頁版面可以在每一款的瀏覽器上均能完整的呈現及瀏覽。再者,大型網站的網頁多半都會嵌入任意變動的廣告或活動內容,更增加自動偵測的困難,因此目前人工檢查還是主要的除錯方式。但測試瀏覽以人工方式進行比對檢查,不僅耗費人力、時間,而且容易有誤判的情形發生。 At present, the webpages used for browsing on the general website must be designed and arranged before they can be placed on the server of the website for users to browse. However, due to the variety of browsers, Internet Explorer (IE), Mozilla Firefox (Firefox), Google Chrome, Opera, and Safari are more common. However, the layout engine of each browser core is different, and the design composition of each browser is different. Therefore, the same web page layout will be displayed on different browsers. It is different, even if it is serious, it will cause the layout to be disordered. Therefore, after the web page is compiled, the web developer must manually test and browse different browsers to ensure that the layout of the web page can be fully rendered and browsed on each browser. In addition, most of the pages of large websites will be embedded with any changes in advertising or activity content, which increases the difficulty of automatic detection. Therefore, manual inspection is still the main debugging method. However, the test browsing manually checks the comparison, which is not only labor-intensive, time-consuming, but also prone to misjudgment.

另外有如中華民國103年2月21日所公告之發明第I427490號「網頁檢視方法及系統,及其電腦程式產品」專利案,其係揭露:一種網頁檢視方法, 適用於一電子裝置,包括下列步驟:取得一網頁;依據相應該網頁之一網址、或該網頁之一內容分析相應該網頁之一特定類別;由一檢視樣板資料庫中擷取相應該特定類別之一瀏覽設定,其中,該檢視樣板資料庫至少記錄相應複數類別中之每一者之該瀏覽設定;以及依據該瀏覽設定檢視該網頁;其中,該檢視樣板資料庫中更記錄相應每一該等類別之一文件物件模型(Document Object Model)樣態,且依據該網頁之該內容分析相應該網頁之該特定類別的方法包括下列步驟:取得相應該網頁之一文件物件模型樹;將相應該網頁之該文件物件模型樹與相應每一該等類別之該文件物件模型樣態進行比對,從而得到該文件物件模型樹符合之至少一候選類別;選擇該至少一候選類別為相應該網頁之該特定類別;將相應該網頁之該文件物件模型樹與相應該至少一候選類別之該文件物件模型樣態進行一相似度分析,從而得到相應之一相似度;以及選擇相應最高之該相似度之該候選類別為相應該網頁之該特定類別。藉以可依據網頁之網址與/或內容來自動根據不同之瀏覽設定檢視網頁之方法及系統。 In addition, there is a patent case for the "Page View Method and System and Its Computer Program Product" published by the Republic of China on February 21, 103, which discloses a web page viewing method. Applicable to an electronic device, comprising the steps of: obtaining a webpage; analyzing a specific category of the webpage according to a webpage corresponding to the webpage or a content of the webpage; and extracting the corresponding category from a preview template database a browsing setting, wherein the viewing template database records at least the browsing setting of each of the corresponding plural categories; and viewing the webpage according to the browsing setting; wherein the viewing template database further records each of the corresponding A method of analyzing a document object model according to one of the categories, and the method for analyzing the specific category of the webpage according to the content of the webpage comprises the following steps: obtaining a file object model tree corresponding to one of the webpages; Comparing the file object model tree of the webpage with the file object model of each of the corresponding categories, thereby obtaining at least one candidate category that the file object model tree meets; selecting the at least one candidate category for the corresponding webpage The specific category; the file object model tree corresponding to the web page and the corresponding at least one candidate category The document object model like state performing a similarity analysis, whereby the corresponding one of similarity; and selecting a category corresponding to the candidate of the highest relative similarity of the web page should be specific category. The method and system for automatically viewing web pages according to different browsing settings according to the web address and/or content of the webpage.

然,上述該專利前案雖然能根據不同的可攜式裝置的螢幕尺寸,在瀏覽不同網頁時,可以自動改變縮放比例或文字重排等,藉以取得最適當的網頁版面的瀏覽畫面。但是如果網頁開發者一開始的網頁編排設計即產生錯誤,而無法於某一款的瀏覽器上完整呈現網頁版面,而上述該專利前案即使是能自動進行調整,仍然無法完整呈現出網頁版面,所以目前仍然需要採用人工方式進行網頁編排的檢查,以確保網頁版面之完整呈現,所以仍然會形成相當大的困擾。 However, the above patents can automatically change the zoom ratio or text rearrangement when browsing different web pages according to the screen size of different portable devices, so as to obtain the most appropriate web page browsing screen. However, if the web page developer's initial web page design is wrong, and the web page cannot be completely rendered on a certain browser, the above patent case can not fully display the web page even if it can be automatically adjusted. Therefore, it is still necessary to manually check the page layout to ensure the complete rendering of the page layout, so it will still cause considerable trouble.

爰此,有鑑於目前仍然以人工方式對於網頁版面的編排進行檢查。故本發明提供一種網頁版面與瀏覽器相容性之自動偵測方法,其係透過一電腦裝置執行,包含下列步驟:A.使一瀏覽器瀏覽一網頁版面排列正常的一待偵測網站,在一解析度條件下,於一定螢幕範圍內擷取一網頁圖形,作為一正常網頁版型圖;B.在上述解析度條件下,使該瀏覽器於同一螢幕範圍內異時擷取上述待偵測網站的複數網頁圖形,以供建立一網頁版型遮罩;C.將步驟B中各網頁圖形之圖素相同的部分,視為是一網頁版型區,據此建立該網頁版型遮罩;D.在上述解析度條件下,使該瀏覽器於同一螢幕範圍內異時再擷取上述網站的一網頁圖形,作為一比對用網頁版型圖;E.利用該網頁版型遮罩之濾除,比較該正常網頁版型圖與該比對用網頁版型圖,二者在該網頁版型區的圖素出現差異之數量比例是否超過一預設值,作為判斷步驟D在擷取該網頁圖形時,當時該網頁版面是否異常。 For this reason, in view of the fact that the layout of the web page is still checked manually. Therefore, the present invention provides an automatic detection method for web page layout and browser compatibility, which is executed by a computer device, and includes the following steps: A. causing a browser to browse a website to be detected with a normal page layout. Under a resolution condition, a webpage graphic is captured in a certain screen range as a normal webpage layout image; B. under the above resolution condition, the browser is allowed to take the above-mentioned waiting time in the same screen range. Detecting a plurality of webpage graphics of the website for creating a webpage type mask; C. treating the same part of each webpage graphic in step B as a webpage version area, thereby establishing the webpage version Masking; D. Under the above resolution condition, the browser is allowed to capture a webpage image of the website in the same screen range as a comparison webpage layout; E. using the webpage version Filtering the mask, comparing the normal webpage layout map and the comparison webpage layout image, whether the proportion of the difference between the two pixels in the webpage version area exceeds a preset value, as the judging step D Drawing the webpage graphics When the page layout is abnormal.

上述步驟B係擷取四張網頁圖形,然後就第一張及第二張之網頁圖形進行比對,偵測該二張網頁圖形之間圖素的差異,就將其設定為一非網頁版型區,然後就第二張及第三張網頁圖形進行比對,偵測該二張網頁圖形之間圖素的差異,就將其設定為一非網頁版型區,接著再就第三張及第四張網頁圖形進行比對,偵測該二張網頁圖形之間圖素的差異,就將其設定為一非網頁版型區,直到該四張網頁圖形被比對完成後,將該四張所有屬於非網頁版型區之圖素集合在一起,並將該等非網頁版型區設置為一黑色遮罩部份,該非網頁版型區以外之區域即設定為該網頁版型區,而該網頁版型區則設置為一空白部份,藉以建立該網頁版型遮罩。 In the above step B, four webpage graphics are captured, and then the first and second webpage graphics are compared, and the difference between the two webpage graphics is detected, and the non-webpage version is set as a non-webpage version. The type area, then compare the second and third webpage graphics, detect the difference between the two webpage graphics, set it as a non-webpage layout area, and then the third And comparing the fourth webpage graphic to detect the difference of the pixels between the two webpage graphics, and setting it as a non-webpage layout area, until the four webpage graphics are compared, Four pixels belonging to the non-webpage layout area are grouped together, and the non-webpage layout area is set as a black mask portion, and the area other than the non-webpage layout area is set as the webpage layout area. And the webpage version area is set to a blank portion to create the webpage type mask.

上述所有步驟中圖素之比對方式,發現單一圖素出現差異,則針對周圍n*n個範圍內之圖素,都設定為非版形區域,該n係為一正整數。 In the above-mentioned method of comparing the pixels in all the steps, if a single pixel is found to be different, the pixels in the surrounding n*n range are set as non-pattern regions, and the n is a positive integer.

上述n=7為最佳。 The above n=7 is the best.

上述步驟E係利用該網頁版型遮罩與該正常網頁版型圖重疊,用以比對出其網頁版型區同一位置之圖素的差異,以及利用該網頁版型遮罩與該比對用網頁版型圖重疊,用以比對出其網頁版型區同一位置之圖素的差異,當該比對用網頁版型圖之網頁版型區與該正常網頁版型圖之網頁版型區之間同一位置的圖素出現差異的數量比例超過該預設值,就認定該網頁版面發生異常。 The foregoing step E is to overlap the normal webpage layout by using the webpage type mask to compare the difference of the pixels in the same position of the webpage version area, and use the webpage type mask to compare with the webpage layout mask. The webpage layout is overlapped to compare the difference of the pixels in the same position of the webpage version area, and the webpage version of the webpage layout of the comparison is compared with the webpage version of the normal webpage layout. If the proportion of the pixels in the same position between the regions exceeds the preset value, it is determined that the page layout is abnormal.

上述預設值係為0.01%至10%。 The above preset values are from 0.01% to 10%.

上述解析度條件係指經由該電腦裝置內自動控制,或經由人工調整控制,使其於一定的解析度下達到全螢幕模式,或者是將其解析度調整到瀏覽器之螢幕具有固定的大小範圍,藉以使該瀏覽器於一定螢幕範圍內所顯示出來的圖素數量都能保持一樣。 The above resolution condition means that the screen is automatically controlled by the computer device, or is manually adjusted to achieve a full screen mode at a certain resolution, or the resolution of the screen is adjusted to a fixed size range of the browser. In order to keep the number of pixels displayed by the browser within a certain screen range the same.

本發明亦可為一種電腦程式,係供安裝於一電腦裝置,該電腦程式係執行上述網頁版面與瀏覽器相容性之自動偵測方法。 The present invention can also be a computer program for installation on a computer device that performs an automatic detection method for web page layout and browser compatibility.

本發明亦可為一種電腦裝置,係安裝有上述之電腦程式,並執行該電腦程式。 The present invention can also be a computer device in which the above computer program is installed and executed.

本發明亦可為一種網頁版面與瀏覽器相容性之自動偵測系統,係用以執行上述網頁版面與瀏覽器相容性之自動偵測方法,包括有:一網頁擷取子系統,其係透過一網際網路,用以擷取該待偵測網站上網頁版面的任一網頁圖形;一待偵測網站資料庫,其係訊號連接至該網頁擷取子系統,該待偵測網 站資料庫係內建所有待偵測網站之網址,用以提供該網頁擷取子系統可以連結至任一待偵測網站;一學習用網頁畫面資料庫,其係訊號連接至該網頁擷取子系統,該學習用網頁畫面資料庫係用以儲存該網頁圖形;一版型遮罩建構子系統,其係訊號連接至該學習用網頁畫面資料庫,該版型遮罩建構子系統係能讀取該學習用網頁畫面資料庫內所儲存之網頁圖形,而分別建立該正常網頁版型圖及該網頁版型遮罩;一正常網頁版型圖資料庫,其係訊號連接至該版型遮罩建構子系統,用以儲存及更新該正常網頁版型圖;一網頁版型遮罩資料庫,其係訊號連接至該版型遮罩建構子系統,用以儲存及更新該網頁版型遮罩;一版型變更偵測子系統,其係分別訊號連接至該網頁擷取子系統、正常網頁版型圖資料庫及網頁版型遮罩資料庫,用以將該網頁擷取子系統偵測時所擷取到之網頁圖形作為該比對用網頁版型圖,並將該網頁版型遮罩分別與該正常網頁版型圖,以及該比對用網頁版型圖進行比對,並輸出結果,用以判斷該待偵測網站之網頁版面是否發生異常。 The invention can also be an automatic detection system for web page layout and browser compatibility, which is an automatic detection method for performing web page layout and browser compatibility, including: a webpage retrieval subsystem, The system uses an internet connection to retrieve any webpage graphics on the webpage of the website to be detected; a webpage to be detected, the system signal is connected to the webpage retrieval subsystem, the to-be-detected network The website database has built-in websites for all the websites to be detected to provide the webpage retrieval subsystem to be linked to any website to be detected; a learning webpage database, the signal is connected to the webpage a subsystem, the learning webpage image database is used for storing the webpage graphics; a version of the mask construction subsystem, the system signal is connected to the learning webpage image database, and the layout mask construction subsystem is capable of Reading the webpage graphics stored in the learning webpage database, and respectively establishing the normal webpage layout and the webpage type mask; a normal webpage layout database, the signal is connected to the version a mask construction subsystem for storing and updating the normal webpage layout image; a webpage layout mask database, wherein the signal is connected to the layout mask construction subsystem for storing and updating the webpage layout a mask type change detection subsystem, wherein the signal is connected to the webpage capture subsystem, the normal webpage schema database, and the webpage mask database for use in the webpage capture subsystem Detection The captured webpage graphic is used as the comparison webpage layout diagram, and the webpage layout mask is respectively compared with the normal webpage layout diagram, and the comparison webpage layout diagram is compared, and the result is output. It is used to determine whether an abnormality occurs in the webpage layout of the website to be detected.

本發明具有下列之優點: The invention has the following advantages:

1.本發明係可供針對目前各種不同的瀏覽器種類,進行網頁版面的自動偵測,以供可第一時間發現網頁版面異常,而立即進行網頁之修正。 1. The present invention is capable of automatically detecting webpage layouts for various browser types at present, so that the webpage layout abnormality can be found at the first time, and the webpage correction is immediately performed.

2.本發明係可改善習知網頁開發者,必須消耗大量的時間開啟各種瀏覽器一一進行比對,以偵測網頁版面是否錯亂,而本發明則可大幅節省人力、時間及金錢,對於網頁開發者及網頁開發者有莫大的助益。 2. The present invention can improve the developer of a conventional webpage, and must spend a lot of time to open various browsers for comparison to detect whether the webpage layout is disordered, and the invention can save manpower, time and money substantially. Web developers and web developers have great help.

3.本發明由於網頁版面之內容與廣告係經常變更,以致於造成整個網頁版面的影像很難被區分出那一塊是不常變更內容的網頁版型區,那一塊 又是常變更內容的非網頁版型區。經由本發明利用學習方式,可以持續進行偵測及更新,藉以確定網頁版型區所在之區域,以建立網頁版型遮罩,藉此自動偵測網頁版型區是否發生異常,以確保達到最佳的偵測正確率。 3. The present invention is frequently changed due to the content of the web page and the advertising system, so that it is difficult to distinguish the image of the entire web page from the web version area where the content is not changed frequently. It is also a non-web version area that often changes content. Through the use of the learning method of the present invention, the detection and update can be continuously performed to determine the area where the webpage version area is located, so as to establish a webpage type mask, thereby automatically detecting whether an abnormality occurs in the webpage type area to ensure the most Good detection accuracy rate.

(1)‧‧‧網頁擷取子系統 (1) ‧ ‧ web page capture subsystem

(2)‧‧‧待偵測網站資料庫 (2) ‧ ‧ website database to be detected

(3)‧‧‧學習用網頁畫面資料庫 (3) ‧ ‧ learning web page database

(4)‧‧‧版型遮罩建構子系統 (4) ‧‧‧ version of the mask construction subsystem

(5)‧‧‧正常網頁版型圖資料庫 (5) ‧‧‧Normal web page schema database

(6)‧‧‧網頁版型遮罩資料庫 (6) ‧‧‧ web version of the mask database

(7)‧‧‧版型變更偵測子系統 (7) ‧‧‧ version change detection subsystem

(A)‧‧‧網際網路 (A) ‧ ‧ Internet

(B)‧‧‧正常網頁版型圖 (B) ‧‧‧Normal web page layout

(B1)‧‧‧網頁版型區 (B1) ‧‧‧ web version area

(B2)‧‧‧非網頁版型區 (B2) ‧ ‧ non-web version area

(C)‧‧‧網頁版型遮罩 (C) ‧‧‧ web version of the mask

(D)‧‧‧比對用網頁版型圖 (D) ‧ ‧ Alignment web page layout

[第一圖]係為本發明自動偵測系統之配置圖。 [First figure] is a configuration diagram of the automatic detection system of the present invention.

[第二圖]係為本發明自動偵測方法之步驟流程圖。 [Second Picture] is a flow chart of the steps of the automatic detection method of the present invention.

[第三圖]係為本發明正常網頁版型圖係區分為網頁版型區及非網頁版型區之示意圖。 [Third image] is a schematic diagram of the normal webpage layout of the present invention being divided into a webpage type area and a non-webpage type area.

[第四圖]係為本發明擷取四張網頁圖形用以建立網頁版型遮罩之示意圖。 [Fourth figure] is a schematic diagram of drawing four webpage graphics for creating a webpage type mask for the present invention.

[第五圖]係為本發明網頁版型遮罩係區分為網頁版型區及非網頁版型區之示意圖。 [Fifth figure] is a schematic diagram of the webpage type mask of the present invention being divided into a webpage type area and a non-web version type area.

[第六圖]係為本發明網頁版型遮罩區完成後之簡單示意圖。 [Sixth figure] is a simple schematic diagram after completion of the webpage mask area of the present invention.

[第七圖]係為本發明利用網頁版型遮罩分別與正常網頁版型圖、比對用網頁版型圖重疊進行比對之示意圖。 [Seventh figure] is a schematic diagram of the comparison of the webpage layout mask with the normal webpage layout diagram and the comparison webpage layout diagram by the present invention.

[表一]係為本發明用以做為實驗之待偵測網站之網址、名稱及屬性。 [Table 1] is the website address, name and attribute of the website to be detected used as an experiment.

[表二]係為本發明對於非網頁版型區做變更,而網頁版型區不做變更的情況下所產生之實驗結果。 [Table 2] is the experimental result produced by the present invention in the case where the non-web page type area is changed, and the web page type area is not changed.

[表三]係為本發明對於非網頁版型區不做變更,而網頁版型區做變更的情況下所產生之實驗結果。 [Table 3] is the experimental result produced by the present invention in the case where the non-web page type area is not changed, and the web page type area is changed.

[表四]係為本發明於建立網頁版型遮罩時加入了n*n的遮罩,以及網頁版型區之圖素改變預設值為0.01%時所產生之實驗結果。 [Table 4] is the experimental result that the n*n mask is added when the webpage type mask is created, and the preset value of the pixel change of the webpage type area is 0.01%.

[附件圖一]係為本發明實際從待偵測網站上所擷取之網頁圖形。 [Attachment Figure 1] is the webpage image actually taken from the website to be detected by the present invention.

[附件圖二]係為本發明實際建立網頁版型遮罩過程之網頁圖形。 [Attachment Figure 2] is a webpage graphic for the actual establishment of the webpage masking process of the present invention.

[附件圖三]係為本發明實際上有無加入遮罩對於網頁版型區之圖素進行比對產生差異之示意圖。 [Attachment Figure 3] is a schematic diagram showing whether there is a difference in the comparison between the pixels of the webpage version area and the presence or absence of the mask.

[附件圖四]係為本發明實際所完成後之網頁版型遮罩。 [Attachment Figure 4] is the webpage type mask after the actual implementation of the invention.

本發明係為一種網頁版面與瀏覽器相容性之自動偵測系統,請參閱第一圖所示。其係包括有網頁擷取子系統(1)、待偵測網站資料庫(2)、學習用網頁畫面資料庫(3)、版型遮罩建構子系統(4)、正常網頁版型圖資料庫(5)、網頁版型遮罩資料庫(6)及版型變更偵測子系統(7)。 The present invention is an automatic detection system for web page layout and browser compatibility, as shown in the first figure. The system includes a webpage retrieval subsystem (1), a website database to be detected (2), a webpage database for learning (3), a layout mask construction subsystem (4), and a normal webpage layout data. Library (5), web version mask database (6) and version change detection subsystem (7).

網頁擷取子系統(1),其係透過一網際網路(A),用以連結至任何的待偵測網站,並擷取該待偵測網站上網頁版面中的任一網頁圖形。 The webpage capture subsystem (1) is connected to any website to be detected through an internet (A) and retrieves any webpage graphics in the webpage layout of the website to be detected.

待偵測網站資料庫(2),其係訊號連接至該網頁擷取子系統(1)。該待偵測網站資料庫(2)係內建上述所有待偵測網站之網址,用以提供該網頁擷取子系統(1)可以連結至任一待偵測網站。又該待偵測網站資料庫(2)係能隨時建立、追踪及更新任何待偵測網站之網址。 The website database to be detected (2) is connected to the webpage retrieval subsystem (1). The website database to be detected (2) is a web site of all the websites to be detected, and the webpage retrieval subsystem (1) can be linked to any website to be detected. The website database (2) to be detected can establish, track and update the website address of any website to be detected at any time.

學習用網頁畫面資料庫(3),其係訊號連接至該網頁擷取子系統(1)。該學習用網頁畫面資料庫(3)係用以儲存該網頁擷取子系統(1)所擷取得到之網頁圖形。 The learning webpage database (3) is connected to the webpage retrieval subsystem (1). The learning webpage image database (3) is used to store webpage graphics obtained by the webpage retrieval subsystem (1).

版型遮罩建構子系統(4),其係訊號連接至該學習用網頁畫面資料庫(3)。該版型遮罩建構子系統(4)係能讀取該學習用網頁畫面資料 庫(3)內所儲存之網頁圖形,而將其分別建立一做為比對標準之正常網頁版型圖,以及一做為比對用之網頁版型遮罩。 The layout mask construction subsystem (4) is connected to the learning webpage image database (3). The version of the mask construction subsystem (4) can read the learning webpage image data The webpage graphics stored in the library (3) are respectively created as a normal webpage layout as a comparison standard, and as a webpage type mask for comparison.

正常網頁版型圖資料庫(5),其係訊號連接至該版型遮罩建構子系統(4),用以儲存及更新該版型遮罩建構子系統(4)所建立之正常網頁版型圖。 The normal webpage layout database (5) is connected to the layout mask construction subsystem (4) for storing and updating the normal webpage version established by the layout mask construction subsystem (4). Type map.

網頁版型遮罩資料庫(6),其係訊號連接至該版型遮罩建構子系統(4),用以儲存及更新該版型遮罩建構子系統(4)所建立之網頁版型遮罩。 a webpage type mask database (6), wherein the signal is connected to the type mask construction subsystem (4) for storing and updating the webpage version established by the type mask construction subsystem (4) Mask.

版型變更偵測子系統(7),其係分別訊號連接至該網頁擷取子系統(1)、正常網頁版型圖資料庫(5)及網頁版型遮罩資料庫(6),用以將該網頁擷取子系統偵測時所擷取到之網頁圖形作為一比對用網頁版型圖,並將該網頁版型遮罩資料庫(6)所儲存之網頁版型遮罩分別與該正常網頁版型圖資料庫(5)所儲存之正常網頁版型圖,以及該比對用網頁版型圖進行比對,並輸出結果,用以判斷該待偵測網站之網頁版面是否發生異常。 The version change detection subsystem (7) is separately connected to the webpage retrieval subsystem (1), the normal webpage schema database (5), and the webpage type mask database (6), The webpage image captured by the webpage retrieval subsystem is used as a comparison webpage layout image, and the webpage layout masks stored in the webpage layout mask database (6) are respectively Comparing with the normal webpage layout image stored in the normal webpage layout database (5), and comparing the webpage layout of the comparison, and outputting a result for judging whether the webpage of the website to be detected is An exception occurs.

本發明係為一種網頁版面與瀏覽器相容性之自動偵測方法,其係透過上述網頁版面與瀏覽器相容性之自動偵測系統安裝於一電腦裝置而執行,如第一圖及第二圖所示,包含下列步驟: The present invention is an automatic detection method for web page layout and browser compatibility, which is implemented by installing an automatic detection system for web page layout and browser compatibility on a computer device, as shown in the first figure and the first As shown in the second figure, it contains the following steps:

A.使一瀏覽器瀏覽一網頁版面排列正常的一待偵測網站,在一解析度條件下,於一定螢幕範圍內擷取一網頁圖形,作為一正常網頁版型圖。係利用上述電腦裝置經由該待偵測網站資料庫(2)所內建之待偵測網站之網址,透過該網際網路(A)而連結至該待偵測網站,然後開啟該電腦裝置之瀏覽器,開始瀏覽該待偵測網站之網頁版面最原始且正常的網頁圖形。利用該網頁擷取子系統(1)擷取該網頁版面的網頁圖形。該網頁擷取子系統(1)為了能擷 取該待偵測網站之網頁圖形,以及避免二次取像所造成之顏色失真,本發明並不使用照相設備,而係使用螢幕擷取方式以取得該網頁圖形之畫面。該網頁擷取子系統(1)則使用Java Robot類別來控制瀏覽器進入該待偵測網站後,取得該待偵測網站之網頁圖形所顯示之畫面,並將該網頁圖形之畫面擷取下來,以供其他子系統可以使用。該網頁擷取子系統(1)所擷取下來的網頁圖形,為了減少瀏覽器造成的干擾,係直接進行網站影像大小正規化,因此將瀏覽器設定為一全螢幕模式,並於一特定之解析度〔1366*768〕條件下,即可確保於一定螢幕範圍內執行所有的網頁圖形取得工作。上述所稱之解析度條件係指可以經由電腦裝置內之程式自動控制,亦可以經由人工調整控制。使其於一定的解析度下達到全螢幕模式,或者是將其解析度調整到瀏覽器之螢幕具有固定的大小範圍皆可,主要是以能控制瀏覽器於一定螢幕範圍內所顯示出來的圖素數量都能保持一樣〔長、寬均具有一樣的圖素〕。該網頁擷取子系統(1)所擷取下來最原始且正常的網頁圖形,係會儲存到該學習用網頁畫面資料庫(2)。而該版型遮罩建構子系統(4)則會讀取該學習用網頁畫面資料庫(3)內所儲存之最原始且正常之網頁圖形,如第三圖所示,將其建立一可供做為比對標準之正常網頁版型圖(B)〔並請參考附件之圖一圖所示,其係為一實際待偵測網站所擷取之網頁圖形〕。然後將該正常網頁版型圖(B)予以儲存至該正常網頁版型圖資料庫(6)內。該正常網頁版型圖(B)係可區分為一長久不會變更內容之網頁版型區(B1),以及如同活動廣告、動畫、跑馬燈等經常會變更內容之非網頁版型區(B2)。而該網頁版型區(B1)則為本實施例中所欲偵測監控之網頁版面中的主要目標物。又本實施例中係以不同的幾何形狀,用以代表該網頁版型區(B1)及非網頁版型區(B2)之區域形狀,但不代表網頁版面之內容均為該幾何形狀之排列方式。 A. Having a browser browse a website to be detected that is normally arranged in a webpage, and under a resolution condition, draw a webpage graphic within a certain screen range as a normal webpage layout. Using the above-mentioned computer device to connect to the website to be detected through the Internet (A) through the website of the website to be detected built in the website database (2) to be detected, and then open the computer device. The browser starts to browse the most original and normal webpage graphics of the webpage of the website to be detected. The webpage capture subsystem (1) is used to retrieve the webpage graphics of the webpage layout. This web page capture subsystem (1) in order to be able to Taking the webpage graphics of the website to be detected and avoiding the color distortion caused by the secondary image capturing, the present invention does not use a camera device, but uses a screen capture method to obtain a picture of the webpage graphics. The webpage retrieval subsystem (1) uses the Java Robot category to control the browser to enter the website to be detected, obtains the image displayed by the webpage graphic of the website to be detected, and extracts the image of the webpage graphic. For other subsystems to use. The webpage captures the webpage graphics captured by the subsystem (1). In order to reduce the interference caused by the browser, the image size of the website is directly normalized, so the browser is set to a full screen mode, and in a specific Under the condition of resolution [1366*768], it can ensure that all webpage graphics acquisition work is performed within a certain screen range. The above-mentioned resolution condition means that it can be automatically controlled by a program in a computer device, or can be manually adjusted. It can reach the full screen mode at a certain resolution, or adjust the resolution to the browser screen with a fixed size range, mainly to control the browser to display within a certain screen range. The number of primes can be kept the same (both long and wide have the same pixels). The most original and normal webpage image captured by the webpage retrieval subsystem (1) is stored in the learning webpage image database (2). The version mask construction subsystem (4) reads the most original and normal webpage image stored in the learning webpage database (3), as shown in the third figure, and establishes it. It is used as a normal web version of the comparison standard (B) (see also the figure in the attached figure, which is a web page image taken by the actual website to be detected). The normal web page layout (B) is then stored in the normal web page schema database (6). The normal webpage layout (B) can be divided into a webpage type area (B1) that does not change the content for a long time, and a non-webpage type area (B2) that often changes content such as an event advertisement, an animation, a marquee, and the like. ). The webpage version area (B1) is the main target in the webpage layout to be detected and monitored in this embodiment. In this embodiment, the geometric shape is used to represent the shape of the area of the webpage (B1) and the non-webpage (B2), but the content of the webpage is not the arrangement of the geometric shape. the way.

B,在上述解析度條件下,使該瀏覽器於同一螢幕範圍內異時擷取上述待偵測網站的複數網頁圖形,以供建立一網頁版型遮罩。而該網頁擷取子系統(1)則於不同時間內分別擷取該待偵測網站之網頁版面上複數張的網頁圖形。本實施例係以擷取四張網頁圖形做為說明,如第四圖之a~d所示。該網頁擷取子系統(1)所擷取下來的四張網頁圖形,同樣會儲存到該學習用網頁畫面資料庫(2)。而該版型遮罩建構子系統(4)則會讀取該學習用網頁畫面資料庫(3)內所儲存之四張網頁圖形,將其建立一可供做為比對用之網頁版型遮罩(C)。該版型遮罩建構子系統(4)係採用類似影像處理「背景建構」的演算法,用以偵測出該待偵測網站一段時間內持續沒有變更的部份,當成是網頁版型區(B1)的組成。本發明之演算法是假設活動廣告、動畫、跑馬燈等非網頁版型區(B2)內容都會不斷變更,僅有網頁版型區(B1)會維持穩定不變。因此如果在一定時間內網頁版面都沒有被變更的網頁圖素,應該就是屬於網頁版型區(B1),因此一旦有變更的網頁圖素則相對會被視為是屬於非網頁版型區(B2)。由於沒有經過二次取像,不需要考慮失真問題,所以該版型遮罩建構子系統(4)只要發現原始的RGB顏色數值不同,就認為是「有差異」,而不需做更進一步的差異分析。 B. Under the above resolution condition, the browser captures the plurality of webpage graphics of the website to be detected in the same screen range for establishing a webpage type mask. The webpage retrieval subsystem (1) separately retrieves a plurality of webpage graphics on the webpage of the website to be detected at different times. This embodiment uses four webpage graphics as an illustration, as shown in a to d of the fourth figure. The four webpage graphics captured by the webpage retrieval subsystem (1) are also stored in the learning webpage image database (2). The version mask construction subsystem (4) reads the four webpage graphics stored in the learning webpage database (3), and creates a webpage version for comparison. Mask (C). The version of the mask construction subsystem (4) adopts an algorithm similar to image processing "background construction" to detect the part of the website to be detected that has not changed continuously for a period of time, and is regarded as a web version area. The composition of (B1). The algorithm of the present invention assumes that the content of the non-web version area (B2) such as the active advertisement, animation, and marquee will be continuously changed, and only the web version area (B1) will remain stable. Therefore, if the webpage of the webpage has not been changed within a certain period of time, it should belong to the webpage typed area (B1), so if there is a changed webpage, it will be regarded as belonging to the non-webpage typed area ( B2). Since there is no secondary image acquisition, there is no need to consider the distortion problem, so the layout mask construction subsystem (4) is considered to be "different" as long as the original RGB color values are found to be different, without further processing. Difference analysis.

該版型遮罩建構子系統(4)首先假定整個網頁版面都是網頁版型區(B1),然後讀取前兩張網頁圖形(如第四圖之圖a及圖b)進行比對,偵測每個圖素如果有差異,就將該區域設定為非網頁版型區(B2)。然後讀取第二張及第三張網頁圖形(如第四圖之圖b及圖c)進行比對,偵測每個圖素如果有差異,就將該區域設定為非網頁版型區(B2)。接著再讀取第三張及第四張網頁圖形(如第四圖之圖c及圖d)進行比對,偵測每個圖素如果有差異,就將該區域設定為非網頁版型區(B2)。直到所有被擷取之四張網頁 圖形被比對完成後。將該四張所有屬於非網頁版型區(B2)之圖素的區域集合在一起,就變成該待測網站的網頁版型遮罩(C)〔如第五圖所示〕,其中非網頁版型區(B2)以外之區域即屬於網頁版型區(B1),其並包含了前述做為比對標準之正常網頁版型圖(B)之網頁版型區(B1)〔係以虛線表示之〕。另外請參考附件之圖二所示,係為一實際待偵測網站所擷取之四張網頁圖形,予以建立該網頁版型遮罩(C)的過程。遮罩黑色部份就是網頁版型區(B1)之圖素,白色部份就是非網頁版型區(B2)之圖素。其中第1階段的結果是第一、二張網頁圖形進行比對的結果〔即為本實施例第四圖中圖a、b之聯集結果〕。第2階段則是第二、三張網頁圖形進行比對的結果,再與第1階段遮罩聯集的結果〔即為本實施例第四圖中圖a、b、c之聯集結果〕。第3階段則是第三、四張網頁圖形比對的結果,再與第2階段遮罩聯集所得到的結果〔即為本實施例第四圖中圖a、b、c、d之聯集結果,係相同於本實施中之第五圖〕。 The version of the mask construction subsystem (4) first assumes that the entire web page layout is the web page layout area (B1), and then reads the first two web page graphics (such as the fourth picture a and b) for comparison. If there is a difference in detecting each pixel, the area is set to a non-web version area (B2). Then read the second and third webpage graphics (such as the graph b and c of the fourth graph) for comparison, and if there is a difference in each pixel, the region is set as a non-webpage version area ( B2). Then read the third and fourth webpage graphics (such as the graph c and d in the fourth graph) for comparison, and if there is a difference in each pixel, the region is set as a non-webpage layout area. (B2). Until all four pages were captured After the graphics are compared. By grouping all the four regions belonging to the non-web page type area (B2), it becomes the web page type mask (C) of the website to be tested (as shown in the fifth figure), wherein the non-web page The area other than the version area (B2) belongs to the web page type area (B1), and includes the web page type area (B1) of the normal web page layout (B) as the comparison standard (with a dotted line) Express it]. In addition, please refer to the figure 2 of the attached file, which is a process of creating a webpage type mask (C) for the four webpage graphics captured by the actual website to be detected. The black part of the mask is the picture of the web version area (B1), and the white part is the picture of the non-web version area (B2). The result of the first stage is the result of the comparison of the first and second webpage graphics (that is, the result of the combination of graphs a and b in the fourth graph of the embodiment). The second stage is the result of the comparison between the second and third webpage graphics, and the result of the first phase mask combination (that is, the result of the combination of the graphs a, b, and c in the fourth graph of the embodiment) . The third stage is the result of the comparison of the third and fourth webpage graphics, and the result obtained by the second stage mask combination (that is, the connection of the graphs a, b, c, d in the fourth figure of the embodiment). The result set is the same as the fifth figure in this embodiment.

又由於實際待偵測網站的內容元素,不可能是以一個圖素大小進行改變,如果僅利用圖素比對來進行偵測,可能會無法偵測到合理的版面範圍。因此本發明利用遮罩(mask)的觀念,當偵測到一個待偵測網站之網頁圖形之單一圖素產生差異時,就將該圖素周圍n*n個圖素當成是非網頁版型區(B2)之圖素,上述n係為一正整數。透過加入遮罩,可有效提昇偵測的穩定性。有無加入遮罩的網頁版型遮罩之結果,如附件之圖三所示。係可以看出不使用遮罩時非網頁版型區(B2)中的圖素仍有一部份會被誤判為屬於網頁版型區(B1)之圖素,如矩形部份所標示。 Moreover, due to the content elements of the actual website to be detected, it is impossible to change the size of one pixel. If only the pixel alignment is used for detection, a reasonable layout range may not be detected. Therefore, the present invention utilizes the concept of a mask. When a single pixel of a webpage image of a website to be detected is detected to be different, the n*n pixels around the pixel are regarded as non-webpage type regions. The pixel of (B2), the above n is a positive integer. By adding a mask, the stability of detection can be effectively improved. The result of the presence or absence of a masked web page mask, as shown in Figure 3 of the attached file. It can be seen that some pixels in the non-web version area (B2) will be misjudged as belonging to the page layout area (B1) when no mask is used, as indicated by the rectangular part.

C.將步驟B中各網頁圖形之圖素相同的部分,視為是一網頁版型區,據此建立該網頁版型遮罩。為了方便進行偵測時之比對效果,如第六圖所 示,其係將該非網頁版型區(B2)設置為一黑色遮罩部份,而該網頁版型區(B1)則設置為一空白部份,並請參考附件之圖四所示,其係為一實際所製成之網頁版型遮罩(C)。又本發明為了能節省空間以及避免失真,全部之網頁圖形均採用png格式進行儲存。又欲偵測不同之待偵測網站,則需分別建立不同之網頁版型遮罩(C)。 C. The same portion of each web page graphic in step B is regarded as a web page type area, and the web page type mask is established accordingly. In order to facilitate the comparison effect when detecting, as shown in the sixth figure The non-web page type area (B2) is set as a black mask part, and the web page type area (B1) is set as a blank part, and please refer to the attached figure 4, It is an actual web page type mask (C). In addition, in order to save space and avoid distortion, all the webpage graphics are stored in the png format. In order to detect different websites to be detected, different web page masks (C) need to be created separately.

D.在上述解析度條件下,使該瀏覽器於同一螢幕範圍內異時再擷取上述網站的一網頁圖形,作為一比對用網頁版型圖〔請參考第七圖所示〕。當開始監控進行偵測時,該網頁擷取子系統(1)係以相同之解析度及全螢幕持續擷取該待偵測網站上網頁版面的任一網頁圖形,藉以作為一可供進行比對之比對用網頁版型圖。 D. Under the above-mentioned resolution condition, the browser can capture a webpage image of the above website in the same screen range as a comparison webpage layout image (please refer to the seventh figure). When the monitoring is started, the webpage retrieval subsystem (1) continuously captures any webpage graphics of the webpage on the website to be detected with the same resolution and full screen, thereby serving as an available ratio. Compare it to the web page layout.

E.利用該網頁版型遮罩之濾除,比較該正常網頁版型圖與該比對用網頁版型圖,二者在該網頁版型區的圖素出現差異的數量比例是否超過一預設值,作為判斷步驟D在擷取該網頁圖形時,當時該網頁版面是否異常。該版型變更偵測子系統(7)係會利用該網頁版型遮罩資料庫(6)所儲存之網頁版型遮罩(C),將其分別與該正常網頁版型圖資料庫(5)所儲存之正常網頁版型圖(B)及該網頁擷取子系統(1)偵測時所擷取之比對用網頁版型圖(D)進行比對〔如第七圖所示〕。即利用該網頁版型遮罩(C)與該正常網頁版型圖(B)重疊,用以比對出該網頁版型區(B1)同一位置之圖素的差異,以及利用該網頁版型遮罩(C)與該比對用網頁版型圖(D)重疊,用以比對出該網頁版型區(B1)同一位置之圖素的差異。如果比對該比對用網頁版型圖(D)之網頁版型區(B1)與該正常網頁版型圖(B)之網頁版型區(B1)之間於同一位置的圖素出現差異的數量比例超過一個預設值時,就可以認定是網頁版面已變更而發生錯亂等異常現象。其造成之原因則有可能是因 為使用不同瀏覽器所造成的網頁版面錯亂,或者是經由輸入不同的內容後所導致的網頁版面錯亂,因此比對網頁版型區(B1)於同一位置之圖素時才會產生差異,故可利用圖素是否產生差異,藉以做為網頁版面發生異常之判斷標準。如此,則不需使用人工,即能自動偵測網頁版面在不同的瀏覽器上之顯示是否有產生異常,而能立即通知網頁開發者予以修正網頁版面之設定,藉以節省人力、時間及成本。 E. Using the filtering of the webpage version mask, comparing the normal webpage layout image with the comparison webpage layout image, whether the proportion of the difference between the two pixels in the webpage version area exceeds a pre-predetermined ratio The value is set as the judgment step D when the webpage graphic is captured, and whether the webpage layout is abnormal at that time. The version change detection subsystem (7) utilizes the webpage type mask (C) stored in the webpage masking database (6) and respectively separates it from the normal webpage schema database ( 5) The normal webpage layout (B) stored and the comparison of the webpage retrieval subsystem (1) are compared with the webpage layout (D) (as shown in the seventh diagram). ]. That is, the webpage type mask (C) is overlapped with the normal webpage layout (B) for comparing the difference of the pixels at the same position of the webpage version area (B1), and using the webpage version. The mask (C) overlaps with the comparison with the webpage layout (D) for comparing the difference of the pixels at the same position of the webpage version area (B1). If there is a difference between the pixel at the same position between the web page type area (B1) of the web page layout (D) and the web version area (B1) of the normal web page layout (B). When the number of cases exceeds a preset value, it can be considered that the page layout has changed and an error has occurred. The reason for this may be due to In order to use the different browsers, the layout of the webpage is disordered, or the layout of the webpage caused by the input of different content is different, so the difference is only when the pixels in the same position of the webpage layout area (B1) are different. Whether the pixel can be used to make a difference is used as a criterion for the occurrence of an abnormality in the web page layout. In this way, without manual use, it can automatically detect whether the display of the webpage on different browsers is abnormal, and can immediately notify the web developer to modify the layout of the webpage, thereby saving manpower, time and cost.

又本發明係可持續不斷的重覆執行上述步驟A到步驟E,可以連續對於該正常網頁版型圖(B)、該網頁版型遮罩(C)及該比對用網頁版型圖(D)進行偵測、比對及更新,透過不間斷的學習方式,藉以精準的確定該網頁版型區(B1)所在區域,而能第一時間自動偵測該網頁版型區(B1)是否發生異常,以確保可以達到最佳的偵測正確率。 The present invention is also capable of repeatedly performing the above steps A to E repeatedly, and continuously for the normal webpage layout (B), the webpage type mask (C), and the comparison webpage layout ( D) Detect, compare and update, through the uninterrupted learning method, to accurately determine the area where the webpage version area (B1) is located, and automatically detect whether the webpage type area (B1) is the first time An exception has occurred to ensure that the best detection accuracy is achieved.

為了驗證本發明之功效與偵測正確性,係採用一台筆記型電腦,CPU為Intel Core i5-3337U 1.8GHz、記憶體為4G Byte,採用Windows 8家用64位元作業系統進行實驗。 In order to verify the effectiveness and detection accuracy of the present invention, a notebook computer is used, the CPU is Intel Core i5-3337U 1.8GHz, the memory is 4G Byte, and the experiment is performed by Windows 8 home 64-bit operating system.

實驗共以15個待偵測網站的首頁來進行測試,以每個待偵測網站的9張畫面來建立網頁版型遮罩(C),並以1張網頁圖形做為比對用網頁版型圖(D),用以進行網頁版型區(B1)及非網頁版型區(B2)之變更偵測。每張網頁圖形之解析度皆為1366*768。測試用的15個待偵測網站中,11個是網際網路上的大型網站,4個是申請人自行架設或申請目前佔有率比較高的CRM網站系統,以便測試網頁版面之變更。待偵測網站如表1所示。 The experiment was conducted on the first page of the 15 websites to be detected, and the web page type mask (C) was created with 9 pictures of each website to be detected, and one web page graphic was used as the comparison web version. Type map (D) for detecting changes in the web page type area (B1) and the non-web page type area (B2). The resolution of each web page graphic is 1366*768. Of the 15 websites to be tested for testing, 11 are large websites on the Internet, and 4 are CRM website systems that the applicants set up or apply for at present, so as to test the changes of the page layout. The websites to be detected are shown in Table 1.

本實驗針對15個待偵測網站的其中11個網站,對於非網頁版型區(B2)做變更,但網頁版型區(B1)不做變更的情況下進行偵測。除了使用所提出的網頁版型遮罩(C)進行比對,並於遮罩=13*13的狀況下進行偵測外,還比較了使用網頁上每個圖素比對的傳統偵測方法。認定網頁版面改變的預設值係為10%的圖素發生變化時,就認定網頁版型區(B1)有做變更。其實驗結果如表2所示。 This experiment is for the 11 websites to be detected, and the non-web version area (B2) is changed, but the web version area (B1) is detected without change. In addition to using the proposed web page mask (C) for comparison, and detecting under the condition of mask=13*13, the traditional detection method using each pixel alignment on the webpage is compared. . When it is determined that the default value of the page layout change is 10%, the screen version area (B1) is changed. The experimental results are shown in Table 2.

上述表2之實驗結果顯示本發明所提出的演算法,係具備相當的強固性,更可以正確偵測出網頁版面之改變,不會受到活動廣告、動畫、跑馬燈等內容變更的干擾。但是當遇到臉書這類絕大部分是內容區塊,網頁版面之網頁版型區(B1)多變,且僅佔頁面小部份區域的網站時,仍然會有偵測失敗的機率。 The experimental results in Table 2 above show that the algorithm proposed by the present invention has considerable robustness, and can correctly detect changes in the web page layout without being disturbed by content changes such as active advertisements, animations, and marquees. However, when most of Facebook, such as Facebook, is a content block, the web page layout area (B1) of the web page is changeable, and only the website of a small area of the page has a chance of detecting failure.

又再進一步利用申請人所能控制的4個網站於同樣的偵測條件下,但是對於非網頁版型區(B2)不做變更,而網頁版型區(B1)做變更的情況下進行偵測,其實驗結果如表3所示。 Further, the four websites that the applicant can control are used under the same detection conditions, but the non-web version area (B2) is not changed, and the web version area (B1) is changed. The experimental results are shown in Table 3.

又當網頁版型區(B1)做變更時,原則上各種的演算法都能偵測出來,不過到底佔多少比例的網頁版型區(B1)之圖素變更才算是改變,以及在建立網頁版型遮罩(C)時加入了n*n的遮罩,是否可以增加整個演算法的強固度,而網頁版型區(B1)之圖素改變的預設值設為0.01%時,產生了如表4的實驗結果。 When the web page type area (B1) is changed, in principle, various algorithms can be detected, but in the end, what percentage of the web page type area (B1) is changed, and the web page is created. When the version mask (C) is added with a mask of n*n, can it increase the robustness of the whole algorithm, and the default value of the pixel change of the web page type area (B1) is set to 0.01%, The experimental results as shown in Table 4.

經由上述表4之實驗結果可知,當使用遮罩n=7時,可以取得最佳的強固性。而圖素變更之預設值,則可設為低於0.01%,亦算是一合理的預設值。而上述實驗中,一個網頁版型遮罩(C)之建立時間於遮罩N=7*7時,使用9張網頁圖形建立一個網頁版型遮罩(C),平均需時5.857秒,網頁版型區(B1)變更之偵測平均時間則為1.185秒。遠較使用人工傳統方式進行偵測,確實具有節省人力、時間及成本之功效。 It can be seen from the experimental results in Table 4 above that when the mask n=7 is used, the best robustness can be obtained. The default value of the pixel change can be set to less than 0.01%, which is also a reasonable preset value. In the above experiment, the creation time of a web page type mask (C) is set to a web page type mask (C) using 9 webpage graphics when the mask is N=7*7, and the average time is 5.857 seconds. The average detection time for the change of the layout area (B1) is 1.185 seconds. It is much more efficient than human labor, time and cost.

本發明亦可為一種電腦程式,以供安裝於上述之電腦裝置,用以執行上述網頁版面與瀏覽器相容性之自動偵測方法。 The present invention can also be a computer program for installing on the above-mentioned computer device for performing the automatic detection method of the above-mentioned web page layout and browser compatibility.

惟,以上所述僅為本發明其中之一實施例,當不能以此限定本發明之申請專利保護範圍,舉凡依本發明之申請專利範圍及說明書內容所作之簡單的等效變化與替換,皆應仍屬於本發明申請專利範圍所涵蓋保護之範圍內。 However, the above description is only one of the embodiments of the present invention. When the scope of the patent application of the present invention is not limited thereto, the simple equivalent changes and substitutions made by the scope of the patent application and the contents of the specification of the present invention are It is still within the scope of the protection covered by the scope of the invention.

Claims (7)

一種網頁版面與瀏覽器相容性之自動偵測方法,其係透過一電腦裝置執行,包含下列步驟:A.使一瀏覽器瀏覽一網頁版面排列正常的一待偵測網站,在一解析度條件下,於一定螢幕範圍內擷取一網頁圖形,作為一正常網頁版型圖,該解析度條件係指經由該電腦裝置內自動控制,或經由人工調整控制,藉以使該瀏覽器於一定螢幕範圍內所顯示出來的圖素數量都能保持一樣;B.在上述解析度條件下,使該瀏覽器於同一螢幕範圍內異時擷取複數上述待偵測網站的複數網頁圖形,將上述網頁圖形兩兩進行比對,建立一非網頁版型區,集合比對後之上述非網頁版型區之圖素,並將該等非網頁版型區設置為一黑色遮罩部份,該非網頁版型區以外之區域即設定為該網頁版型區,而該網頁版型區則設置為一空白部份,藉以建立一網頁版型遮罩;C.將步驟B中各網頁圖形之圖素相同的部分,視為是一網頁版型區,據此建立該網頁版型遮罩;D.在上述解析度條件下,使該瀏覽器於同一螢幕範圍內異時再擷取上述網站的一網頁圖形,作為一比對用網頁版型圖;E.利用該網頁版型遮罩與該正常網頁版型圖重疊,用以比對出其網頁版型區同一位置之圖素的差異,以及利用該網頁版型遮罩與該比對用網頁版型圖重疊,用以比對出其網頁版型區同一位置之圖素的差異,比較該正常網頁版型圖之網頁版型區與該比對用網頁版型圖之網頁版型區同一位置的圖素,二者在該網頁 版型區的圖素出現差異之數量比例是否超過一預設值,作為判斷步驟D在擷取該網頁圖形時,當時該網頁版面是否異常。 An automatic detection method for web page layout and browser compatibility, which is executed by a computer device, and includes the following steps: A. causing a browser to browse a website to be detected with a normal layout, at a resolution Under the condition, a webpage graphic is captured in a certain screen range as a normal webpage layout diagram, and the resolution condition refers to automatic control in the computer device or manual adjustment control, so that the browser is on a certain screen. The number of pixels displayed in the range can be kept the same; B. Under the above resolution conditions, the browser can capture multiple webpage graphics of the above-mentioned website to be detected in the same screen range, and the above webpage is The graphics are compared in pairs, a non-webpage layout area is created, the pixels of the non-webpage layout area after the comparison are set, and the non-webpage layout area is set as a black mask part, the non-webpage The area outside the layout area is set as the webpage version area, and the webpage version area is set as a blank part to create a webpage type mask; C. the webpage graphics in step B The same part of the pixel is regarded as a webpage type area, and the webpage type mask is established accordingly; D. under the above resolution condition, the browser is used to capture the above time in the same screen range. a webpage graphic of the website as a comparison webpage layout image; E. using the webpage type mask to overlap with the normal webpage layout image for comparing the pixels of the same position of the webpage version area Difference, and using the webpage type mask to overlap with the comparison webpage layout image, for comparing the difference of the pixels in the same position of the webpage version area, comparing the webpage version of the normal webpage layout The area and the pixel in the same position in the webpage version of the webpage layout, both of which are on the webpage Whether the proportion of the difference in the pixels of the layout area exceeds a preset value, and as a judgment step D, when the webpage graphic is captured, whether the webpage layout is abnormal at that time. 如申請專利範圍第1項所述網頁版面與瀏覽器相容性之自動偵測方法,其中,發現單一圖素出現差異,則針對周圍n*n個範圍內之圖素,都設定為非版形區域,該n係為一正整數。 For example, in the automatic detection method of web page layout and browser compatibility described in claim 1, in which a single pixel is found to be different, the pixels in the surrounding n*n range are set to non-version. In the shape region, the n is a positive integer. 如申請專利範圍第2項所述網頁版面與瀏覽器相容性之自動偵測方法,其中,該n=7為最佳。 For example, the automatic detection method for web page layout and browser compatibility described in claim 2, wherein n=7 is optimal. 如申請專利範圍第1項所述網頁版面與瀏覽器相容性之自動偵測方法,其中,該預設值係為0.01%至10%。 For example, the automatic detection method for web page layout and browser compatibility described in claim 1 is wherein the preset value is 0.01% to 10%. 一種電腦程式,係供安裝於一電腦裝置,該電腦程式係執行包含申請專利範圍第1項至第5項中任一項所述網頁版面與瀏覽器相容性之自動偵測方法。 A computer program for installing on a computer device for performing an automatic detection method including web page layout and browser compatibility according to any one of claims 1 to 5. 一種電腦裝置,係安裝有申請專利範圍第6項所述之電腦程式,並執行該電腦程式。 A computer device is installed with a computer program as described in claim 6 and executes the computer program. 一種網頁版面與瀏覽器相容性之自動偵測系統,係用以執行包含申請專利範圍第1項至第5項中任一項所述網頁版面與瀏覽器相容性之自動偵測方法,包括有:一網頁擷取子系統,其係透過一網際網路,用以擷取該待偵測網站上網頁版面的任一網頁圖形;一待偵測網站資料庫,其係訊號連接至該網頁擷取子系統,該待偵測網站資料庫係內建所有待偵測網站之網址,用以提供該網頁擷取子系統可以連結至任一 待偵測網站;一學習用網頁畫面資料庫,其係訊號連接至該網頁擷取子系統,該學習用網頁畫面資料庫係用以儲存該網頁圖形;一版型遮罩建構子系統,其係訊號連接至該學習用網頁畫面資料庫,該版型遮罩建構子系統係能讀取該學習用網頁畫面資料庫內所儲存之網頁圖形,而分別建立該正常網頁版型圖及該網頁版型遮罩;一正常網頁版型圖資料庫,其係訊號連接至該版型遮罩建構子系統,用以儲存及更新該正常網頁版型圖;一網頁版型遮罩資料庫,其係訊號連接至該版型遮罩建構子系統,用以儲存及更新該網頁版型遮罩;一版型變更偵測子系統,其係分別訊號連接至該網頁擷取子系統、正常網頁版型圖資料庫及網頁版型遮罩資料庫,用以將該網頁擷取子系統偵測時所擷取到之網頁圖形作為該比對用網頁版型圖,並將該網頁版型遮罩分別與該正常網頁版型圖,以及該比對用網頁版型圖進行比對,並輸出結果,用以判斷該待偵測網站之網頁版面是否發生異常。 An automatic detection system for web page layout and browser compatibility is used for executing an automatic detection method for web page layout and browser compatibility according to any one of claims 1 to 5 of the patent application scope. The method includes: a webpage retrieval subsystem, which is configured to retrieve any webpage graphics of a webpage on the website to be detected through an internetwork; and a signal to be detected, the system signal is connected to the webpage a webpage retrieval subsystem, wherein the website database to be detected has a website address of all the websites to be detected, and the webpage retrieval subsystem can be connected to any a website to be detected; a learning webpage database, the signal is connected to the webpage retrieval subsystem, the learning webpage database is used to store the webpage graphics; a version of the mask construction subsystem, The system signal is connected to the learning webpage image database, and the version of the mask construction subsystem is capable of reading the webpage graphics stored in the learning webpage database, and respectively establishing the normal webpage layout and the webpage. a type of mask; a normal web version of the map database, the signal is connected to the version of the mask construction subsystem for storing and updating the normal web version; a web version of the mask database, The signal is connected to the version of the mask construction subsystem for storing and updating the webpage type mask; a version of the change detection subsystem, which is separately connected to the webpage retrieval subsystem, the normal webpage version a type map database and a webpage type mask database for using the webpage image captured by the webpage retrieval subsystem as the comparison webpage layout image, and masking the webpage layout Separately with the normal Figure page version, and the ratio of the web version to compare with the chart type, and output the results to determine the page layout of the site to be detected is abnormal.
TW103136477A 2014-10-22 2014-10-22 Web page layout and browser compatibility of the automatic detection methods, systems and their computers Program, computer device TWI559214B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
TW103136477A TWI559214B (en) 2014-10-22 2014-10-22 Web page layout and browser compatibility of the automatic detection methods, systems and their computers Program, computer device

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
TW103136477A TWI559214B (en) 2014-10-22 2014-10-22 Web page layout and browser compatibility of the automatic detection methods, systems and their computers Program, computer device

Publications (2)

Publication Number Publication Date
TW201616338A TW201616338A (en) 2016-05-01
TWI559214B true TWI559214B (en) 2016-11-21

Family

ID=56508579

Family Applications (1)

Application Number Title Priority Date Filing Date
TW103136477A TWI559214B (en) 2014-10-22 2014-10-22 Web page layout and browser compatibility of the automatic detection methods, systems and their computers Program, computer device

Country Status (1)

Country Link
TW (1) TWI559214B (en)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
TWI669624B (en) * 2018-09-19 2019-08-21 宏碁股份有限公司 Webpage content self-protection method and associated server

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20040253991A1 (en) * 2003-02-27 2004-12-16 Takafumi Azuma Display-screen-sharing system, display-screen-sharing method, transmission-side terminal, reception-side terminal, and recording medium
TW201216143A (en) * 2010-10-12 2012-04-16 Inventec Corp Displaying and adjusting system for webpages and method thereof
CN102662958A (en) * 2012-03-06 2012-09-12 苏州阔地网络科技有限公司 Page segmentation display method
US20140063042A1 (en) * 2012-08-31 2014-03-06 Google Inc. Display error indications

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20040253991A1 (en) * 2003-02-27 2004-12-16 Takafumi Azuma Display-screen-sharing system, display-screen-sharing method, transmission-side terminal, reception-side terminal, and recording medium
TW201216143A (en) * 2010-10-12 2012-04-16 Inventec Corp Displaying and adjusting system for webpages and method thereof
CN102662958A (en) * 2012-03-06 2012-09-12 苏州阔地网络科技有限公司 Page segmentation display method
US20140063042A1 (en) * 2012-08-31 2014-03-06 Google Inc. Display error indications

Also Published As

Publication number Publication date
TW201616338A (en) 2016-05-01

Similar Documents

Publication Publication Date Title
US20130145255A1 (en) Systems and methods for filtering web page contents
WO2015143956A1 (en) Method and apparatus for blocking advertisement in web page
JP6036100B2 (en) Step-by-step visual comparison of web browser screens
US9213777B2 (en) Method and apparatus for archiving dynamic webpages based on source attributes
US20100220923A1 (en) Automatic page layout validation
WO2019019358A1 (en) Page compatibility detection method and apparatus, server, and storage medium
CN102682097A (en) Method and equipment for detecting secrete links in web page
US9053199B2 (en) Uniquely identifying script files by appending a unique identifier to a URL
US20180107580A1 (en) Metadata enabled comparison of user interfaces
US20160239162A1 (en) System and Method for Determining Distances Among User Interface Elements
Saar et al. Browserbite: cross‐browser testing via image processing
CN107861860A (en) The automatic checking of the mobile applications of synchronizing moving equipment
Selay et al. Adaptive random testing for image comparison in regression web testing
TWI559214B (en) Web page layout and browser compatibility of the automatic detection methods, systems and their computers Program, computer device
WO2016131276A1 (en) Document checking method and device
Walsh et al. Automatically identifying potential regressions in the layout of responsive web pages
WO2017148349A1 (en) Method and device for browsing thumbnails in web page
US10631050B2 (en) Determining and correlating visual context on a user device with user behavior using digital content on the user device
US20150154160A1 (en) System and method for displaying image on webpage according to visible area
JP2011164783A (en) Device, method and program for verifying operation
CN103383695B (en) A kind of method and apparatus for being used to identify WAP web page
JP6446945B2 (en) Incompatible detection device, incompatible detection method, and program
JP2017138715A (en) Screen difference pass/fail determination device, screen difference pass/fail determination method, and program
US8700992B1 (en) Method for determining position and dimensions of webpage elements by wireframe injection
CN104090926A (en) Browser zoom state detecting method and device