WO2019019358A1 - 页面兼容性检测方法、装置、服务器和存储介质 - Google Patents
页面兼容性检测方法、装置、服务器和存储介质 Download PDFInfo
- Publication number
- WO2019019358A1 WO2019019358A1 PCT/CN2017/104204 CN2017104204W WO2019019358A1 WO 2019019358 A1 WO2019019358 A1 WO 2019019358A1 CN 2017104204 W CN2017104204 W CN 2017104204W WO 2019019358 A1 WO2019019358 A1 WO 2019019358A1
- Authority
- WO
- WIPO (PCT)
- Prior art keywords
- tested
- page
- browser
- reference interface
- obtaining
- Prior art date
- Legal status (The legal status 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 status listed.)
- Ceased
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Prevention of errors by analysis, debugging or testing of software
- G06F11/3668—Testing of software
Definitions
- the present application relates to the field of computer technologies, and in particular, to a page compatibility detection method, apparatus, server, and storage medium.
- the page file In order to make the page file open on each terminal or each browser, the display effect is better, and the display effect tends to be consistent, so as to improve user perception, after the page file is completed, the page file needs to be tested and run on different terminals. Different browsers load the page file through different browsers to detect the display effect of the page file after being loaded. Because multiple terminals are involved, and multiple browsers need to be loaded and run multiple times on multiple terminals, The inspection work requires a lot of human resources, resulting in high detection costs and low detection efficiency.
- a page compatibility detecting method, apparatus, server, and storage medium capable of being low cost, efficient, and fast are provided.
- a page compatibility detecting method includes: simulating a running environment of a terminal;
- the page to be tested is loaded by the browser to be tested, and the page corresponding to the page to be tested is displayed on the browser to be tested;
- a page compatibility detecting device includes:
- a browser running module configured to run a browser to be tested in the running environment
- a page obtaining module configured to acquire a page address, and obtain, by the browser to be tested, a page file to be tested at the page address;
- a page display module configured to load the page to be tested by the browser to be tested, and display a page corresponding to the page file to be tested on the browser to be tested;
- a reference interface acquisition module configured to obtain a reference interface
- a comparison module configured to compare the reference interface with a page displayed in the browser to be tested to obtain a comparison similarity
- the detecting module is configured to detect whether the comparison similarity is greater than a preset threshold, and output compatibility prompt information when the comparison similarity is greater than or equal to a preset threshold.
- a computer apparatus comprising a memory and a processor, the memory storing computer readable instructions, the computer readable instructions being executed by the processor such that the processor performs the following steps:
- the page to be tested is loaded by the browser to be tested, and the page corresponding to the page to be tested is displayed on the browser to be tested;
- One or more non-transitory readable storage mediums storing computer readable instructions, when executed by one or more processors, cause the one or more processors to perform the following steps:
- the page to be tested is loaded by the browser to be tested, and the page corresponding to the page to be tested is displayed on the browser to be tested;
- FIG. 1 is an application environment diagram of a page compatibility detecting method in an embodiment
- FIG. 2 is a flow chart of a page compatibility detecting method in an embodiment
- FIG. 3 is a structural block diagram of a page compatibility detecting apparatus in an embodiment
- FIG. 4 is a block diagram showing the structure of a server in an embodiment.
- the page compatibility detecting method provided in the embodiment of the present application can be applied to an application environment as shown in FIG. 1.
- the plurality of test servers 102 are respectively connected to the page file server 104 via the network.
- Each of the test servers 102 is respectively installed with a simulator for simulating the operating environment of the mobile terminal, and the browser to be tested is run in the simulation generated operating environment of each test server 102, and the browser to be tested of the test server 102 is tested.
- the page file server 104 stores the address of the page file to be tested by the page address, and acquires the page file to be tested from the page file server 104.
- the browser to be tested of the test server 102 loads the page file to be tested, displays the page corresponding to the page file to be tested on the browser to be tested, and obtains a reference interface, and compares the reference interface with the page displayed in the browser to be tested to obtain Comparing the similarity, detecting whether the comparison similarity is greater than a preset threshold, and when the comparison similarity is greater than or equal to the preset threshold, indicating that the page to be tested is compatible with the browser to be tested, and outputting the compatibility prompt information.
- a page compatibility detection method is provided.
- the method is applied to the server in FIG. 1 as an example, and specifically includes the following steps:
- Step 202 Simulate an operating environment of the terminal.
- the terminal in this embodiment is a mobile terminal, and the mobile terminal is an intelligent terminal.
- the mobile operating system of the mobile terminal is run by the simulator, and the mobile operating system simulated running on the simulator is the operating environment of the browser to be tested, and it should be understood that the simulator simulates the running operation of the mobile device.
- the system can be an operating system of Android, Apple's mobile operating system, Windows Mobile Windows mobile operating system, and other mobile terminals.
- Step 204 Run the browser to be tested in the running environment.
- the browser to be tested is run on the simulated mobile operating system, and the browser to be tested is a browser compatible with the mobile operating system.
- Step 206 Obtain a page address, and obtain a page file to be tested at the page address by using the browser to be tested.
- the page address is an address of the page to be tested on the server.
- the address bar of the browser to be tested on the server obtains the page address, and then accesses the server, thereby obtaining the page file to be tested from the server.
- the page file to be tested is an HTML (HyperText Markup Language) 5 page file.
- Step 208 The page to be tested is loaded by the browser to be tested, and the page corresponding to the page file to be tested is displayed on the browser to be tested.
- the server loads the page to be tested through the browser to be tested, and generates a page corresponding to the page file to be tested on the browser to be tested and displays the page, so that the page of the page to be tested is displayed on the browser to be tested.
- Step 210 Obtain a reference interface.
- the reference interface is a display interface corresponding to the page file to be tested, and the reference interface may be a page displayed on a browser, or may be a picture, for example, the picture is a screenshot of a page displayed on the browser.
- the reference interface can be understood to be generated by a page file to be tested, for example, by a browser loaded and tested to be compatible with the page file to be tested, and the reference interface provides a standard for comparison. That is to say, the reference interface is an interface of a page generated by the browser loaded by the browser to be tested, or may be a screenshot of an interface generated by the browser loaded by the browser to be tested.
- the reference interface is pre-stored, for example, the reference interface is pre-stored in the memory of the server, or is pre-existing on the server, and the server can obtain the reference interface from its own memory or obtain a reference interface from the server.
- Step 212 Compare the reference interface with the page displayed in the browser to be tested, and obtain a similar comparison. degree.
- the server compares the reference interface with the page displayed in the browser to be tested, and generates a comparison similarity according to the comparison result.
- the comparison method can use an image comparison method to compare the reference interface with the page displayed in the browser to be tested to detect whether the two are similar.
- Step 214 Detect whether the comparison similarity is greater than a preset threshold, and output compatibility prompt information when the comparison similarity is greater than or equal to the preset threshold.
- the larger the value of the comparison similarity the closer the reference interface is to the page displayed in the browser to be tested, indicating that the closer the page displayed in the browser to be tested is to the standard display effect, the browser to be tested The compatibility of the page file to be tested is higher.
- the comparison similarity is greater than or equal to the preset threshold, it indicates that the displayed page displayed in the browser to be tested is better, and there is not much display error, indicating that the browser to be tested is compatible with the page to be tested. If the comparison is less than the preset threshold, it indicates that the page displayed in the browser to be tested is poorly displayed, and there are more display errors, indicating that the browser to be tested is to be tested. The file is not compatible.
- the page of the page to be tested is compared with the reference interface on the browser to be tested, thereby detecting the display in the browser to be tested. Whether there is an error in the page, and whether the test page file is compatible with the browser to be tested, and does not need to manually repeat the detection on multiple terminals, thereby effectively improving the detection efficiency and effectively reducing the detection cost.
- the step of loading the page to be tested by the browser to be tested, and displaying the page corresponding to the page file to be tested on the browser to be tested includes: acquiring preset display parameters; and displaying the parameters based on the browser to be tested
- the page to be tested is loaded, and the page corresponding to the page file to be tested is displayed on the browser to be tested.
- the step of obtaining the reference interface includes: obtaining a reference interface generated based on the display parameters.
- the display parameter may be a resolution, that is, a resolution of a page of the page file to be tested on the browser to be tested, or a display size of the page on the browser to be tested, and the display parameter includes
- the display width and the display height are the display width and display width of the page of the page file to be tested on the browser to be tested.
- the display parameter is preset, that is, the display parameter may be a pre-existing server or a memory pre-existing in the server, and the display parameter can match the display size of the display screen of the terminal, so that the browser to be tested can The page of the page file to be tested is displayed according to the display size of the display screen of the terminal.
- the preset plurality of display parameters may be the display size of the mainstream mobile terminal, for example, the preset display parameters are multiple, in this embodiment, from a plurality of preset display parameters. Obtain one of them, so that the browser to be tested under different resolutions or different display sizes can be detected, or the page file to be tested under different resolutions or different display sizes is in the browser to be tested. The displayed page is detected.
- the reference interface When the reference interface is acquired, the reference interface is obtained under the same display parameter, that is, the reference interface is generated by loading the browser based on the same display parameter based on the same display parameter, and is compared based on the same display parameter.
- the page of the page to be tested displayed on the browser to be tested and the reference interface can be based on the same display parameter, thereby making the detection result more accurate.
- comparing the reference interface with the page displayed in the browser to be tested includes: parsing the reference interface to obtain the color block parameter of the reference interface; and parsing the page displayed in the browser to be tested, Obtaining the color block parameter of the page displayed in the browser to be tested; comparing the color block parameter of the reference interface with the color block parameter of the page displayed in the browser to be tested, obtaining contrast similarity; and outputting the contrast similarity.
- the comparison between the reference interface and the page displayed in the browser to be tested is compared by using a color block contrast.
- the reference interface is divided into a plurality of color blocks, and the page displayed in the browser to be tested is also divided into a plurality of color blocks. Under the same display size, the color blocks of the reference interface based on the same position are to be tested.
- the color blocks of the page displayed in the browser are respectively compared, the color block parameters include the hue of the color block, the brightness of the color block, and the saturation of the color block, and the hue of the color block includes a red value, a blue value, and a yellow value, for example,
- the above-mentioned color block parameters are numerically calculated, and the similarity is calculated by comparing the color block parameters of the color blocks of the page displayed in each browser to be tested with the color block parameters of the color blocks of the reference interface, so that Obtain a ratio of the ratios obtained at a plurality of positions, and then calculate the difference between each position and the obtained ratio by 1 to obtain the difference with the largest absolute value, take the absolute value, and subtract the absolute value. 1, the result obtained is the contrast similarity.
- the hue of one of the color blocks displayed on the page to be tested is 155, and the hue of a color block of the reference interface at the same position is 120, the ratio of the two is 1.29; the page is displayed in the browser to be tested.
- the hue of the other color block is 115, and the hue of the other color block of the reference interface at the same position is 120, the ratio of the two is 1.29, and the ratio of the two is 0.96, respectively, and the difference is calculated with 1 to obtain 0.29.
- each color block of the displayed page in the browser to be tested may be a function button, an image, or an input box, which are elements in the page. It should be understood that The hue, brightness and saturation of each element are quite different. If the function button is offset or not displayed, the smaller the similarity of the corresponding color blocks at that position, the corresponding description of the browser to be tested. The displayed page is incomplete or incorrect. Therefore, it can be determined that the page file to be tested is not compatible with the browser to be tested.
- the comparison similarity is also output, and the comparison similarity is recorded, so that the detection result of each browser to be tested can be recorded and can be consulted.
- the method before the outputting the similarity degree, further includes the steps of: acquiring the identification identifier of the browser to be tested, establishing an association relationship between the identification identifier of the browser to be tested and the comparison similarity, and storing the identifier.
- the identification identifier is unique identification information of the browser to be tested.
- the identifier includes the name and version number of the browser to be tested, and may also include an operating environment of the browser to be tested, such that each browser to be tested is After the detection, the detection results can be saved and associated with the browser to be tested, which facilitates the inspection of the detection results.
- the step of obtaining the comparison similarity includes: acquiring the color block parameters of the plurality of reference color blocks in the reference interface, and acquiring the reference color blocks in the Refer to the relative position on the interface; based on the same relative position, obtain the color block parameters of several page color blocks in the page displayed in the browser to be tested; and compare the colors of several reference color blocks of the reference interface based on the same relative position Block parameters and color block parameters of several page patches for comparison Similarity; output contrast similarity.
- the reference interface and the page displayed in the browser to be tested are generated based on different display parameters, but the reference interface and the page displayed in the browser to be tested have the same aspect ratio, ideally, the test is to be tested.
- the page displayed in the browser is enlarged or reduced in a certain proportion, and the same display graphic as the reference interface can be obtained. That is to say, in the embodiment, the reference interface and the page displayed in the browser to be tested have different display widths and displays. Height, but both have the same aspect ratio.
- the relative position is fixed relative to the display interface itself relative to the display interface itself, and does not change its position in the display interface with the enlargement or reduction of the display interface, such as
- the relative position includes a relative X-axis position and a relative Y-axis position, wherein the relative X-axis position is a ratio of a lateral coordinate value at a reference point on the display interface to a width of the display interface, and the relative Y-axis position is the The ratio of the longitudinal coordinate value of the reference point to the height of the display interface.
- the width and height of the display interface are 16 and 9, respectively. Then, the left end of the display interface is used as the starting point, and the coordinate value of a reference point in the display interface is displayed.
- the relative position of the reference point is (5/16, 8/9), when the display interface is enlarged or reduced proportionally, the reference point will not be positioned relative to the display interface itself.
- the change that is, the position of the reference point relative to the display interface does not change as the display interface zooms in or out.
- the relative position can be used in the browser to be tested according to the relative position.
- the page color blocks corresponding to the displayed page, so that the reference color blocks and the page color blocks in the same relative position are compared.
- the reference interface in the embodiment and the page displayed in the browser to be tested are displayed based on different display parameters, but since the comparison is based on the same relative position, the two can be compared, that is, based on different display parameters.
- the reference interface and the page displayed in the browser under test are implemented. Compared, it improves the efficiency of detection.
- the method further includes: when the comparison similarity is less than the preset threshold, acquiring location information of a different part of the page displayed in the browser to be tested and the reference interface; according to the page displayed in the browser to be tested Generate a contrast image and add a preset marker to the comparison image based on the location information.
- the page displayed in the browser to be tested has more errors or incomplete display. Therefore, the page to be tested is incompatible with the browser to be tested.
- Obtaining location information of a different part of the page displayed in the browser to be tested and the reference interface that is, obtaining location information of a part of the page file to be tested that is displayed incorrectly or incompletely displayed, the location information is displayed in the browser to be tested.
- the position on the page for example, when the ratio of the color block on the same position of the page displayed in the browser to be tested is the same as the ratio of the color block on the same position of the reference interface, the color block is obtained in the browser to be tested.
- the location information of the displayed page for example, when the ratio of the color block on the same position of the page displayed in the browser to be tested is the same as the ratio of the color block on the same position of the reference interface, the color block is obtained in the browser to be tested.
- a comparison image is generated, for example, a screenshot is displayed on the page displayed in the browser, a comparison image is generated, and a preset mark is added in the corresponding position on the image, and the output is added.
- the marked contrast picture is set, so that the difference portion of the page displayed in the browser to be tested can be highlighted, so that the error of the page or the incomplete part can be quickly obtained.
- the page compatibility detection method in the foregoing embodiment is also applicable to simultaneous detection by multiple browsers to be tested, so that the detection efficiency can be effectively improved.
- the method includes simulating an operating environment of a plurality of terminals, respectively running the browser to be tested in a plurality of operating environments, and loading the to-be-tested page files by the browsers to be tested, respectively, on each browser to be tested.
- the page corresponding to the page file to be tested is displayed, and the page displayed on the browser to be tested is compared with the reference interface, thereby implementing simultaneous detection of multiple browsers to be tested.
- each running environment can respectively run one or more browsers to be tested, and the browsers to be tested running in the same running environment can be different types of browsers. It can also be a different version of the same browser.
- a page compatibility detecting apparatus including: an analog module 302, a browser running module 304, a page obtaining module 306, a page display module 308, a reference interface acquiring module 310, Comparison module 312 and detection module 314, wherein:
- the simulation module 302 is used to simulate the operating environment of the terminal.
- the browser running module 304 is configured to run the browser to be tested in an operating environment.
- the page obtaining module 306 is configured to obtain a page address, and obtain a page file to be tested at the page address by using the browser to be tested.
- the page display module 308 is configured to load the page file to be tested by the browser to be tested, and display the page corresponding to the page file to be tested on the browser to be tested.
- the reference interface acquisition module 310 is configured to acquire a reference interface.
- the comparison module 312 is configured to compare the reference interface with the page displayed in the browser to be tested to obtain a comparison similarity.
- the detecting module 314 is configured to detect whether the comparison similarity is greater than a preset threshold, and output the compatibility prompt information when the comparison similarity is greater than or equal to the preset threshold.
- page display module 308 includes:
- the parameter obtaining unit is configured to obtain a preset display parameter.
- the display unit is configured to load the page file to be tested based on the display parameter by the browser to be tested, and display the page corresponding to the page file to be tested on the browser to be tested.
- the reference interface acquisition module 310 is further configured to acquire a reference interface generated based on the display parameters.
- the comparison module 312 includes:
- the first parsing unit is configured to parse the reference interface to obtain the patch parameter of the reference interface.
- the second parsing unit is configured to parse the page displayed in the browser to be tested, and obtain the color block parameter of the page displayed in the browser to be tested.
- the comparison unit is configured to compare the color block parameters of the reference interface with the color block parameters of the page displayed in the browser to be tested to obtain a comparison similarity.
- the similarity output unit is used to output the contrast similarity.
- the comparing unit is further configured to acquire color block parameters of the plurality of reference color blocks in the reference interface, and obtain relative positions of the reference color blocks on the reference interface; Obtaining, according to the relative position, color patch parameters of a plurality of page color blocks in the page displayed in the browser to be tested; and comparing color block parameters of the plurality of the reference color blocks of the reference interface respectively according to the same relative position And a plurality of color patch parameters of the page color block to obtain the contrast similarity; outputting the Compare similarities.
- the detecting module 314 is further configured to: when the comparison similarity is less than a preset threshold, acquire location information of a page displayed in the browser to be tested and a different portion of the reference interface; The page displayed in the browser to be tested generates a comparison picture, and a preset mark is added to the comparison picture according to the location information.
- Each of the above-described page compatibility detecting devices may be implemented in whole or in part by software, hardware, and a combination thereof.
- the page obtaining module 306 is configured to receive a page file sent by the page file server through a network interface of the test server.
- the network interface may be an Ethernet card or a wireless network card.
- the above modules may be embedded in the hardware of the base station or may be stored in the memory of the base station in a software form, so that the processor can call the corresponding operations of the above modules.
- the processor may be a central processing unit (CPU) or a microprocessor.
- a server in one embodiment, as shown in FIG. 4, includes a processor coupled via a system bus, an internal memory, a non-volatile storage medium, and a network interface.
- the non-volatile storage medium of the server stores an operating system and computer readable instructions for executing a page compatibility detecting method.
- the server's processor is used to provide computing and control capabilities that support the operation of the entire server.
- the server's network interface is used to connect to other computer devices and communicate with other computer devices.
- the server can be a separate server or a clustered server. It will be understood by those skilled in the art that the structure shown in FIG.
- FIG. 4 is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the server to which the present application is applied.
- a particular server may include more or fewer components than shown, or some components may be combined, or have different component arrangements.
- a computer device includes a memory, a processor, and computer readable instructions stored on the memory and executable on the processor, the processor executing the computer readable instructions to implement the following steps: simulating The running environment of the terminal; running the browser to be tested in the running environment; obtaining the page address, obtaining the page file to be tested at the page address through the browser to be tested; loading the file to be tested through the browser to be tested, on the browser to be tested Display a page corresponding to the page file to be tested; obtain a reference interface; compare the reference interface with the page displayed in the browser to be tested, and obtain a comparison similarity; detect whether the comparison similarity is greater than a preset threshold, and when the comparison similarity is greater than or equal to Output threshold when preset threshold Prompt information.
- the loading, by the browser to be tested, the page to be tested, and displaying the page corresponding to the page to be tested on the browser to be tested includes: acquiring preset display parameters;
- the page to be tested is loaded by the browser to be tested, and the page corresponding to the page to be tested is displayed on the browser to be tested;
- the obtaining reference interface includes: acquiring The reference interface generated by the parameter display is displayed.
- comparing the reference interface with the page displayed in the browser to be tested, and obtaining the comparison similarity includes: parsing the reference interface to obtain a color block parameter of the reference interface; The page displayed in the browser is obtained, and the color block parameter of the page displayed in the browser to be tested is obtained; the color block parameter of the reference interface and the color block parameter of the page displayed in the browser to be tested are obtained. For comparison, the contrast similarity is obtained; the contrast similarity is output.
- comparing the reference interface with the page displayed in the browser to be tested, and obtaining the comparison similarity includes: acquiring color block parameters of the plurality of reference color blocks in the reference interface, and Acquiring a relative position of each of the reference color blocks on the reference interface; acquiring color block parameters of a plurality of page color blocks in the page displayed in the browser to be tested based on the same relative position; And comparing the color block parameters of the plurality of the reference color blocks of the reference interface and the color block parameters of the plurality of the page color blocks to obtain the contrast similarity; and outputting the contrast similarity.
- the computer readable instructions cause the processor to cause the processor to perform the following steps after performing the detecting whether the contrast similarity is greater than a preset threshold: when the comparison similarity is less than a preset threshold, obtaining the Measure the position information of the different parts of the page displayed in the browser and the reference interface; generate a comparison picture according to the page displayed in the browser to be tested, and add a preset mark on the comparison picture according to the location information.
- a computer readable storage medium having stored thereon computer readable instructions that, when executed by a processor, implement the following steps: emulating an operating environment of a terminal; operating in an operating environment The browser is obtained; the page address is obtained, and the page to be tested is obtained by the browser to be tested; the page to be tested is loaded by the browser to be tested, and the page corresponding to the page to be tested is displayed on the browser to be tested; Interface; compare the reference interface with the page displayed in the browser to be tested to obtain contrast similarity; detect whether the contrast similarity is greater than a preset threshold, when comparing When the degree of similarity is greater than or equal to the preset threshold, the compatibility prompt information is output.
- the loading, by the browser to be tested, the page to be tested, and displaying the page corresponding to the page to be tested on the browser to be tested includes: acquiring preset display parameters;
- the page to be tested is loaded by the browser to be tested based on the display parameter, and the page corresponding to the page file to be tested is displayed on the browser to be tested.
- the obtaining the reference interface includes: acquiring a reference interface generated based on the display parameter.
- comparing the reference interface with the page displayed in the browser to be tested, and obtaining the comparison similarity includes: parsing the reference interface to obtain a color block parameter of the reference interface; and parsing the browser to be tested
- the displayed page obtains the color block parameter of the page displayed in the browser to be tested; compares the color block parameter of the reference interface with the color block parameter of the page displayed in the browser to be tested, and obtains the contrast similarity; and outputs the contrast similarity .
- comparing the reference interface with the page displayed in the browser to be tested, and obtaining the comparison similarity includes: acquiring color block parameters of the plurality of reference color blocks in the reference interface, and acquiring each The relative position of the reference color block on the reference interface; based on the same relative position, obtaining the color block parameters of several page color blocks in the page displayed in the browser to be tested; and comparing several reference references of the reference interface based on the same relative position The color block parameters of the color block and the color block parameters of several page color blocks obtain contrast similarity; the output contrast similarity.
- the computer readable instructions are further executed by the processor to: when the comparison similarity is less than a preset threshold, obtaining the test The position information of the different parts of the page displayed in the browser and the reference interface; generating a comparison picture according to the page displayed in the browser to be tested, and adding a preset mark on the comparison picture according to the location information.
- the storage medium may be a magnetic disk, an optical disk, a read-only memory (ROM), or the like.
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Computer Hardware Design (AREA)
- Quality & Reliability (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Debugging And Monitoring (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
一种页面兼容性检测方法、装置、服务器和存储介质，方法包括：模拟终端的运行环境（202）；在运行环境下运行待测浏览器（204）；获取页面地址，通过待测浏览器在页面地址获取待测页面文件（206）；通过待测浏览器加载待测页面文件，在待测浏览器上显示待测页面文件对应的页面（208）；获取参考界面（210）；将参考界面与待测浏览器中显示的页面进行对比，获得对比相似度（212）；检测对比相似度是否大于预设阈值，当对比相似度大于或等于预设阈值时，输出兼容提示信息（214）。通过在模拟运行待测浏览器并加载待测页面文件，对待测页面文件在待测浏览器上的页面与参考界面进行对比，从而检测待测浏览器中显示的页面是否存在错误，检测待测页面文件是否兼容待测浏览器，有效提高检测效率，并且有效降低检测成本。
Description
本申请要求于2017年07月26日提交中国专利局，申请号为2017106197479，发明名称为“页面兼容性检测方法、装置、服务器和存储介质”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
本申请涉及计算机技术领域，特别是涉及一种页面兼容性检测方法、装置、服务器和存储介质。
页面文件在完成后需要在终端上的浏览器运行并打开，同一个页面文件在不同的终端，不同的浏览器上打开，显示效果会略有差异，甚至部分浏览器在加载后存在页面显示不全的情况。
为了使得页面文件在各终端或各浏览器上打开的显示效果较佳，且显示效果趋于一致，以提高用户感知，在页面文件完成后，需要对页面文件进行测试，在不同终端上，运行不同的浏览器，通过不同浏览器加载该页面文件，进而检测该页面文件被加载后的显示效果，由于涉及到多个终端，以及需要在多个终端上多次加载运行多个浏览器，使得检测工作需要占用较多人力资源，造成检测成本较高，且检测效率低下。
发明内容
根据本申请的各种实施例，提供一种能够低成本、高效和快速的页面兼容性检测方法、装置、服务器和存储介质。
一种页面兼容性检测方法，包括：模拟终端的运行环境；
在所述运行环境下运行待测浏览器；
获取页面地址，通过所述待测浏览器在所述页面地址获取待测页面文件；
通过所述待测浏览器加载所述待测页面文件，在所述待测浏览器上显示所述待测页面文件对应的页面；
获取参考界面；
将所述参考界面与所述待测浏览器中显示的页面进行对比，获得对比相似度；及
检测所述对比相似度是否大于预设阈值，当所述对比相似度大于或等于预设阈值时，输出兼容提示信息。
一种页面兼容性检测装置，包括：
模拟模块，用于模拟终端的运行环境；
浏览器运行模块，用于在所述运行环境下运行待测浏览器；
页面获取模块，用于获取页面地址，通过所述待测浏览器在所述页面地址获取待测页面文件；
页面显示模块，用于通过所述待测浏览器加载所述待测页面文件，在所述待测浏览器上显示所述待测页面文件对应的页面；
参考界面获取模块，用于获取参考界面；
对比模块，用于将所述参考界面与所述待测浏览器中显示的页面进行对比，获得对比相似度；及
检测模块，用于检测所述对比相似度是否大于预设阈值，当所述对比相似度大于或等于预设阈值时，输出兼容提示信息。
一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述计算机可读指令被所述处理器执行时，使得所述处理器执行以下步骤：
模拟终端的运行环境；
在所述运行环境下运行待测浏览器；
获取页面地址，通过所述待测浏览器在所述页面地址获取待测页面文件；
通过所述待测浏览器加载所述待测页面文件，在所述待测浏览器上显示所述待测页面文件对应的页面；
获取参考界面；
将所述参考界面与所述待测浏览器中显示的页面进行对比，获得对比相似度；及
检测所述对比相似度是否大于预设阈值，当所述对比相似度大于或等于预设阈值时，输出兼容提示信息。
一个或多个存储有计算机可读指令的非易失性可读存储介质，所述计算机可读指令被一个或多个处理器执行时，使得所述一个或多个处理器执行以下步骤：
模拟终端的运行环境；
在所述运行环境下运行待测浏览器；
获取页面地址，通过所述待测浏览器在所述页面地址获取待测页面文件；
通过所述待测浏览器加载所述待测页面文件，在所述待测浏览器上显示所述待测页面文件对应的页面；
获取参考界面；
将所述参考界面与所述待测浏览器中显示的页面进行对比，获得对比相似度；及
检测所述对比相似度是否大于预设阈值，当所述对比相似度大于或等于预设阈值时，输出兼容提示信息。
本申请的一个或多个实施例的细节在下面的附图和描述中提出。本申请的其它特征、目的和优点将从说明书、附图以及权利要求书变得明显。
为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为一个实施例中页面兼容性检测方法的应用环境图；
图2为一个实施例中页面兼容性检测方法的流程图；
图3为一个实施例中页面兼容性检测装置的结构框图；
图4为一个实施例中服务器的结构框图。
为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。
本申请实施例中所提供的页面兼容性检测方法可以应用于如图1所示的应用环境中。其中，多个测试服务器102通过网络分别与页面文件服务器104进行连接。每个测试服务器102上分别安装有模拟器，该模拟器用于模拟移动终端的运行环境，且每个测试服务器102的模拟生成的运行环境中运行待测浏览器，测试服务器102的待测浏览器通过页面地址获取到页面文件服务器104存储待测页面文件的地址，并从页面文件服务器104上获取待测页面文件。测试服务器102的待测浏览器加载待测页面文件，在待测浏览器上显示待测页面文件对应的页面，并且获取参考界面，将参考界面与待测浏览器中显示的页面进行对比，获得对比相似度，检测对比相似度是否大于预设阈值，当对比相似度大于或等于预设阈值时，则表明该待测页面文件兼容该待测浏览器，输出兼容提示信息。
在一个实施例中，如图2所示，提供了一种页面兼容性检测方法，以该方法应用于图1中的服务器为例进行说明，具体包括以下步骤：
步骤202，模拟终端的运行环境。
具体地，本实施例中的终端为移动终端，该移动终端为智能终端，应该理解的是，不同的智能终端上运行有不同移动操作系统，为了能够在服务器上运行基于不同移动操作系统的浏览器，本步骤中，通过模拟器运行移动终端的移动操作系统，则该模拟器上模拟运行的移动操作系统则为待测浏览器的运行环境，应该理解的是，模拟器模拟运行的移动操作系统可以是安卓系统、苹果公司的移动操作系统、Windows Mobile视窗移动操作系统以及其他的移动终端的操作系统。
值得一提的是，该模拟器以及模拟器的模拟运行原理为现有技术，本实施例中不对此作累赘描述。
步骤204，在运行环境下运行待测浏览器。
本步骤中，在模拟的移动操作系统上运行待测浏览器，该待测浏览器为兼容该移动操作系统的浏览器。
步骤206，获取页面地址，通过待测浏览器在页面地址获取待测页面文件。
具体地，该页面地址为待测页面在服务器上的地址，本步骤中，服务器上的待测浏览器的地址栏获取到页面地址，进而访问服务器，从而从服务器上获取待测页面文件。
本实施例中，该待测页面文件为HTML(HyperText Markup Language，超文本标记语言)5页面文件。
步骤208，通过待测浏览器加载待测页面文件，在待测浏览器上显示待测页面文件对应的页面。
本步骤中，服务器通过待测浏览器加载待测页面文件，在待测浏览器上生成待测页面文件对应的页面并显示，使得该待测页面文件的页面在待测浏览器上显示。
步骤210，获取参考界面。
具体地，该参考界面为待测页面文件对应的一个显示界面，该参考界面可以是一个浏览器上显示的页面，也可以是一个图片，例如，该图片为浏览器上显示的页面的截图。该参考界面可以理解为由待测页面文件生成，比如是通过一个经过测试且兼容该待测页面文件的浏览器加载而生成，该参考界面提供了一个对比参考的标准。也就是说，该参考界面是兼容该待测页面文件的浏览器加载而生成的页面的界面，也可以是兼容该待测页面文件的浏览器加载而生成的页面的界面的截图。
应该理解的是，该参考界面为预存的，例如，参考界面预存在服务器的存储器内，或者是预存在服务器上，服务器可以从自身的存储器中获取该参考界面或者从服务器上获取参考界面。
步骤212，将参考界面与待测浏览器中显示的页面进行对比，获得对比相似
度。
本步骤中，服务器在获取参考界面后，将参考界面和在待测浏览器中显示的页面进行对比，根据对比结果生成对比相似度。该对比的方法可以采用图像对比方法，将参考界面和在待测浏览器中显示的页面进行对比，检测两者是否相似。
步骤214，检测对比相似度是否大于预设阈值，当对比相似度大于或等于预设阈值时，输出兼容提示信息。
具体地，对比相似度的值越大，则表明参考界面和在待测浏览器中显示的页面越相近，则表明待测浏览器中显示的页面越接近标准的显示效果，则待测浏览器对待测页面文件的兼容性越高。
也就是说，当对比相似度大于或等于预设阈值时，表明待测浏览器中显示的页面显示效果较佳，并无太多的显示错误，则表明待测浏览器对待测页面文件是兼容的，则输出兼容提示信息；反之，当对比相似小于预设阈值时，则表明待测浏览器中显示的页面显示效果较差，存在较多的显示错误，则表明待测浏览器对待测页面文件不兼容。
上述方法，通过在模拟运行待测浏览器，并通过待测浏览器加载待测页面文件，对待测页面文件在待测浏览器上的页面与参考界面进行对比，从而检测待测浏览器中显示的页面是否存在错误，进而检测待测页面文件是否兼容待测浏览器，而无需人工重复多次在多个终端上进行检测，有效提高检测效率，并且有效降低检测成本。
在一个实施例中，通过待测浏览器加载待测页面文件，在待测浏览器上显示待测页面文件对应的页面的步骤包括：获取预设的显示参数；通过待测浏览器基于显示参数加载待测页面文件，在待测浏览器上显示待测页面文件对应的页面。获取参考界面的步骤包括：获取基于显示参数生成的参考界面。
本实施例中，该显示参数可以是分辨率，即待测页面文件的页面的在待测浏览器上的分辨率，也可以是页面的在待测浏览器上的显示尺寸，该显示参数包括显示宽度和显示高度，该显示宽度和显示宽度为待测页面文件的页面的在待测浏览器上的显示宽度和显示宽。
应该理解的是，该显示参数为预设的，即该显示参数可以是预存在服务器或者预存在服务器的存储器中，该显示参数能够匹配终端的显示屏的显示尺寸，使得该待测浏览器能够根据终端的显示屏的显示尺寸对待测页面文件的页面进行显示。
为了适应不同的终端的显示屏，预设的多个显示参数可以主流的移动终端的显示尺寸，例如，预设的显示参数为多个，本实施例中，从多个预设的显示参数中获取其中一个，这样，即可对不同分辨率或者不同的显示尺寸下的待测浏览器进行检测，或者说，对不同分辨率或者不同的显示尺寸下的待测页面文件在待测浏览器的显示的页面进行检测。
而在对参考界面进行获取时，则获取与同一显示参数下参考界面，即该参考界面是与待测页面文件基于同一显示参数在浏览器加载而生成，通过在基于同一显示参数进行对比，使得待测浏览器上显示的待测页面文件的页面与参考界面能够基于同一显示参数，进而使得检测结果更为精确。
在一个实施例中，将参考界面与待测浏览器中显示的页面进行对比，获得对比相似度的步骤包括：解析参考界面获取参考界面的色块参数；解析待测浏览器中显示的页面，获取待测浏览器中显示的页面的色块参数；将参考界面的色块参数和待测浏览器中显示的页面的色块参数进行对比，获得对比相似度；输出对比相似度。
本实施例中，对参考界面和待测浏览器中显示的页面的对比采用色块对比的方式进行对比。具体地，将参考界面划分成若干个色块，并将待测浏览器中显示的页面也划分为若干的色块，在同一显示尺寸下，基于相同位置的对参考界面的色块和待测浏览器中显示的页面的色块分别进行比较，该色块参数包括色块的色相、色块的明度以及色块的饱和度，色块的色相包括红色数值、蓝色数值和黄色数值，例如，将上述色块参数数值化，计算对比相似度的方式为，将每一待测浏览器中显示的页面的色块的色块参数与参考界面的色块的色块参数作比，这样将获得多个位置上的作比所得的比值，随后将各位置上作比所取得的比值分别与1进行差值计算，获取绝对值最大的差值，取其绝对值，用这个绝对值去减1，获得的结果即为对比相似度。
比如说，待测浏览器中显示页面的其中一个色块的色相为155，相同位置上的参考界面的一个色块的色相为120，两者之比为1.29；待测浏览器中显示页面的另一个色块的色相为115，相同位置上的参考界面的另一个色块的色相为120，两者之比为1.29，两者之比为0.96，分别与1进行差值计算，得出0.29和0.04，两者的绝对值中最大的绝对值为0.29，获取0.29，随后1-0.29＝0.71，也就是对比相似度为71％。
应该理解的是，待测浏览器中显示页面每一色块内的对象可以是一个功能按钮，也可以是一个图片，也可以是一个输入框，这些都是页面中的元素，应该理解的是，各元素之间的色相、明度以及饱和度相差较大，如果功能按钮偏移了或者没有得到显示，则对应的该位置上的色块的对比相似度越小，相应地说明待测浏览器中显示的页面显示不全或者有误，因此，可以判断待测页面文件与该待测浏览器不兼容。这样，通过分别计算各色块的比值，进而获得待测浏览器中显示的页面在相同位置上，是否存在与参考界面不一致的部分，比如，页面上的功能按钮是否与参考界面一致，比如，页面上的输入框是否与参考界面一致。
本实施例中，还输出了对比相似度，并记录该对比相似度，进而使得每一待测浏览器的检测结果能够得到记录并且可以查阅。
在一个实施例中，在输出对比相似度之前，还包括步骤，获取待测浏览器的识别标识，将待测浏览器的识别标识与对比相似度建立关联关系，并存储。该识别标识为待测浏览器的唯一识别信息，比如，该识别标识包括待测浏览器的名称和版本号，还可以包括该待测浏览器的运行环境，这样，每一个待测浏览器在检测后，其检测结果都能得到保存，并且与待测浏览器关联，便于对检测结果的查阅。
在一个实施例中，将参考界面与待测浏览器中显示的页面进行对比，获得对比相似度的步骤包括：获取参考界面内若干个参考色块的色块参数，并获取各参考色块在参考界面上的相对位置；基于相同的相对位置，获取待测浏览器中显示的页面内若干个页面色块的色块参数；基于同一相对位置，分别对比参考界面的若干个参考色块的色块参数和若干个页面色块的色块参数，获得对比
相似度；输出对比相似度。
本实施例中，参考界面和待测浏览器中显示的页面是基于不同的显示参数生成的，但参考界面和待测浏览器中显示的页面具有相同的宽高比，理想情况下，待测浏览器中显示的页面在一定比例放大或缩小，可以获得与参考界面相同的显示图形，也就是说，本实施例中，参考界面和待测浏览器中显示的页面具有不同的显示宽度和显示高度，但是两者具有相同的宽高比。
具体地，相对位置为相对于某一显示界面本身而言，该相对位置相对于显示界面本身而言是固定的，而不随该显示界面的放大或缩小而改变其在显示界面中的位置，比如，该相对位置包括相对X轴位置和相对Y轴位置，该相对X轴位置为显示界面上的某一参照点上的横向坐标值与该显示界面的宽度的比值，该相对Y轴位置为该参照点的纵向坐标值与该显示界面的高度的比值，比如，显示界面的宽度和高度分别为16和9，那么，以显示界面下方的左端为起点，显示界面中某一参照点坐标值为(5，8)，那么，该参照点的相对位置为(5/16，8/9)，当显示界面按等比例放大或者缩小时，该参照点相对于显示界面本身而言其位置不会改变，也就是说，该参照点相对于该显示界面的位置并不会随显示界面放大或缩小而改变。
本实施例中，由于参考界面和待测浏览器中显示的页面具有相同的宽高比，因此，在获得参考界面上参考色块的相对位置后，能够根据该相对位置在待测浏览器中显示的页面对应的页面色块，进而使得同一相对位置上的参考色块以及页面色块得以对比。
值得一提的是，在一些实施例中，无需对参考界面以及待测浏览器中显示的页面进行整体对比，也就是说可以进行两者的局部对比，比如，对参考界面中较为重要的位置进行对比，对比若干个相对位置上的参考色块的色块参数以及页面色块的色块参数，而无需对测浏览器中显示的页面的每一个色块都进行比较，能够减小对比计算量，从而有效提高检测效率。
本实施例中的参考界面和待测浏览器中显示的页面基于不同的显示参数进行显示，但是由于在对比时是基于同一相对位置，进而使得两者可以进行对比，即使得基于不同显示参数的参考界面和待测浏览器中显示的页面得以实现对
比，提高了检测的效率。
在一个实施例中，方法还包括步骤：当对比相似度小于预设阈值时，获取待测浏览器中显示的页面与参考界面的相异部分的位置信息；根据待测浏览器中显示的页面生成对比图片，并根据位置信息在对比图片上添加预设标记。
本实施例中，对比相似度小于预设阈值时，该待测浏览器中显示的页面存在较多的错误或者显示不完全，因此，表明该待测页面文件与该待测浏览器不兼容，则获取待测浏览器中显示的页面与参考界面的相异部分的位置信息，即获取待测页面文件显示错误或者显示不完全的部分的位置信息，该位置信息是该待测浏览器中显示的页面上的位置，比如，当待测浏览器中显示的页面的某一色块与参考界面相同位置上的色块的作比获得的比值较大，则获取该色块在待测浏览器中显示的页面的位置信息。
随后，根据待测浏览器中显示的页面生成对比图片，比如，对待测浏览器中显示的页面进行截图，生成对比图片，并在该图片上的相应位置添加预设标记，并输出添加了预设标记的对比图片，进而使得该待测浏览器中显示的页面的差异部分可以突出显示，便于对该页面的错误或者显示不完全的部分进行快速获取。
应该理解的是，上述实施例中的页面兼容性检测方法还适用于多个待测浏览器同时检测，这样，能够有效提高检测效率。在一个实施例中，方法包括模拟多个终端的运行环境，在多个运行环境下分别运行待测浏览器，分别通过各待测浏览器加载待测页面文件，在各待测浏览器上分别显示待测页面文件对应的页面，并且分别将待测浏览器上显示的页面与参考界面对比，进而实现多个待测浏览器的同时检测。值得一提的是，在同时模拟的多个运行环境中，每一个运行环境可以分别运行一个或多个待测浏览器，在同一运行环境下运行的待测浏览器可以是不同类型的浏览器，也可以是同一浏览器的不同版本，通过对多个运行环境以及多个待测浏览器同时进行检测，能够有效提高检测效率。
在一个实施例中，如图3所示，提供了一种页面兼容性检测装置，包括：模拟模块302、浏览器运行模块304、页面获取模块306、页面显示模块308、参考界面获取模块310、对比模块312和检测模块314，其中：
模拟模块302用于模拟终端的运行环境。
浏览器运行模块304用于在运行环境下运行待测浏览器。
页面获取模块306用于获取页面地址，通过待测浏览器在页面地址获取待测页面文件。
页面显示模块308用于通过待测浏览器加载待测页面文件，在待测浏览器上显示待测页面文件对应的页面。
参考界面获取模块310用于获取参考界面。
对比模块312用于将参考界面与待测浏览器中显示的页面进行对比，获得对比相似度。
检测模块314用于检测对比相似度是否大于预设阈值，当对比相似度大于或等于预设阈值时，输出兼容提示信息。
在一个实施例中，页面显示模块308包括：
显示参数获取单元，用于获取预设的显示参数。
显示单元，用于通过待测浏览器基于显示参数加载待测页面文件，在待测浏览器上显示待测页面文件对应的页面。
参考界面获取模块310还用于获取基于显示参数生成的参考界面。
在一个实施例中，对比模块312包括：
第一解析单元，用于解析参考界面获取参考界面的色块参数。
第二解析单元，用于解析待测浏览器中显示的页面，获取待测浏览器中显示的页面的色块参数。
对比单元，用于将参考界面的色块参数和待测浏览器中显示的页面的色块参数进行对比，获得对比相似度。
相似度输出单元，用于输出对比相似度。
在一个实施例中，所述对比单元还用于获取所述参考界面内若干个参考色块的色块参数，并获取各所述参考色块在所述参考界面上的相对位置；基于相同的所述相对位置，获取所述待测浏览器中显示的页面内若干个页面色块的色块参数；基于同一相对位置，分别对比所述参考界面的若干个所述参考色块的色块参数和若干个所述页面色块的色块参数，获得所述对比相似度；输出所述
对比相似度。
在一个实施例中，检测模块314还用于当所述对比相似度小于预设阈值时，获取所述待测浏览器中显示的页面与所述参考界面的相异部分的位置信息；根据所述待测浏览器中显示的页面生成对比图片，并根据所述位置信息在所述对比图片上添加预设标记。
上述页面兼容性检测装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。例如，在硬件实现上，上述页面获取模块306用于通过测试服务器的网络接口接收页面文件服务器发送的页面文件。其中，网络接口可以是以太网卡或无线网卡等。上述各模块可以硬件形式内嵌于或独立于基站的处理器中，也可以以软件形式存储于基站的存储器中，以便于处理器调用执行以上各个模块对应的操作。其中，处理器可以为中央处理单元(CPU)或微处理器等。
在一个实施例中，如图4所示，提供了一种服务器，包括通过系统总线连接的处理器、内存储器、非易失性存储介质和网络接口。其中，该服务器的非易失性存储介质中存储有操作系统和计算机可读指令，该计算机可读指令用于执行一种页面兼容性检测方法。服务器的处理器用于提供计算和控制能力，支撑整个服务器的运行。该服务器的网络接口用于连接其他计算机设备，与其他计算机设备进行通信。该服务器可以单独的服务器，也可以是集群服务器。本领域技术人员可以理解，图4中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的服务器的限定。具体的服务器可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。
在一个实施例中，计算机设备包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机可读指令，处理器执行所述计算机可读指令时实现以下步骤：模拟终端的运行环境；在运行环境下运行待测浏览器；获取页面地址，通过待测浏览器在页面地址获取待测页面文件；通过待测浏览器加载待测页面文件，在待测浏览器上显示待测页面文件对应的页面；获取参考界面；将参考界面与待测浏览器中显示的页面进行对比，获得对比相似度；检测对比相似度是否大于预设阈值，当对比相似度大于或等于预设阈值时，输出兼
容提示信息。
在一个实施例中，所述通过所述待测浏览器加载所述待测页面文件，在所述待测浏览器上显示所述待测页面文件对应的页面包括：获取预设的显示参数；通过所述待测浏览器基于所述显示参数加载所述待测页面文件，在所述待测浏览器上显示所述待测页面文件对应的页面；所述获取参考界面包括：获取基于所述显示参数生成的所述参考界面。
在一个实施例中，所述将所述参考界面与所述待测浏览器中显示的页面进行对比，获得对比相似度包括：解析所述参考界面获取所述参考界面的色块参数；解析所述待测浏览器中显示的页面，获取所述待测浏览器中显示的页面的色块参数；将所述参考界面的色块参数和所述待测浏览器中显示的页面的色块参数进行对比，获得所述对比相似度；输出所述对比相似度。
在一个实施例中，所述将所述参考界面与所述待测浏览器中显示的页面进行对比，获得对比相似度包括：获取所述参考界面内若干个参考色块的色块参数，并获取各所述参考色块在所述参考界面上的相对位置；基于相同的所述相对位置，获取所述待测浏览器中显示的页面内若干个页面色块的色块参数；基于同一相对位置，分别对比所述参考界面的若干个所述参考色块的色块参数和若干个所述页面色块的色块参数，获得所述对比相似度；输出所述对比相似度。
在一个实施例中，计算机可读指令使得处理器在执行检测所述对比相似度是否大于预设阈值后，还使得所述处理器执行以下步骤：当对比相似度小于预设阈值时，获取待测浏览器中显示的页面与参考界面的相异部分的位置信息；根据待测浏览器中显示的页面生成对比图片，并根据位置信息在对比图片上添加预设标记。
在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机可读指令，计算机可读指令被处理器执行时实现以下步骤：模拟终端的运行环境；在运行环境下运行待测浏览器；获取页面地址，通过待测浏览器在页面地址获取待测页面文件；通过待测浏览器加载待测页面文件，在待测浏览器上显示待测页面文件对应的页面；获取参考界面；将参考界面与待测浏览器中显示的页面进行对比，获得对比相似度；检测对比相似度是否大于预设阈值，当对比相
似度大于或等于预设阈值时，输出兼容提示信息。
在一个实施例中，所述通过所述待测浏览器加载所述待测页面文件，在所述待测浏览器上显示所述待测页面文件对应的页面包括：获取预设的显示参数；通过待测浏览器基于显示参数加载待测页面文件，在待测浏览器上显示待测页面文件对应的页面；所述获取参考界面包括：获取基于显示参数生成的参考界面。
在一个实施例中，所述将所述参考界面与所述待测浏览器中显示的页面进行对比，获得对比相似度包括：解析参考界面获取参考界面的色块参数；解析待测浏览器中显示的页面，获取待测浏览器中显示的页面的色块参数；将参考界面的色块参数和待测浏览器中显示的页面的色块参数进行对比，获得对比相似度；输出对比相似度。
在一个实施例中，所述将所述参考界面与所述待测浏览器中显示的页面进行对比，获得对比相似度包括：获取参考界面内若干个参考色块的色块参数，并获取各参考色块在参考界面上的相对位置；基于相同的相对位置，获取待测浏览器中显示的页面内若干个页面色块的色块参数；基于同一相对位置，分别对比参考界面的若干个参考色块的色块参数和若干个页面色块的色块参数，获得对比相似度；输出对比相似度。
在一个实施例中，在执行检测所述对比相似度是否大于预设阈值后，所述计算机可读指令被处理器执行时还实现以下步骤：当对比相似度小于预设阈值时，获取待测浏览器中显示的页面与参考界面的相异部分的位置信息；根据待测浏览器中显示的页面生成对比图片，并根据位置信息在对比图片上添加预设标记。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机可读指令来指令相关的硬件来完成，所述的程序可存储于一非易失性计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)等。
以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对
上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。
Claims (20)
- 一种页面兼容性检测方法，包括：模拟终端的运行环境；在所述运行环境下运行待测浏览器；获取页面地址，通过所述待测浏览器在所述页面地址获取待测页面文件；通过所述待测浏览器加载所述待测页面文件，在所述待测浏览器上显示所述待测页面文件对应的页面；获取参考界面；将所述参考界面与所述待测浏览器中显示的页面进行对比，获得对比相似度；及检测所述对比相似度是否大于预设阈值，当所述对比相似度大于或等于预设阈值时，输出兼容提示信息。
- 根据权利要求1所述的方法，其特征在于，所述通过所述待测浏览器加载所述待测页面文件，在所述待测浏览器上显示所述待测页面文件对应的页面包括：获取预设的显示参数；及通过所述待测浏览器基于所述显示参数加载所述待测页面文件，在所述待测浏览器上显示所述待测页面文件对应的页面；所述获取参考界面包括：获取基于所述显示参数生成的所述参考界面。
- 根据权利要求2所述的方法，其特征在于，所述将所述参考界面与所述待测浏览器中显示的页面进行对比，获得对比相似度包括：解析所述参考界面获取所述参考界面的色块参数；解析所述待测浏览器中显示的页面，获取所述待测浏览器中显示的页面的色块参数；将所述参考界面的色块参数和所述待测浏览器中显示的页面的色块参数进行对比，获得所述对比相似度；及输出所述对比相似度。
- 根据权利要求3所述的方法，其特征在于，所述将所述参考界面与所述待测浏览器中显示的页面进行对比，获得对比相似度包括：获取所述参考界面内若干个参考色块的色块参数，并获取各所述参考色块在所述参考界面上的相对位置；基于相同的所述相对位置，获取所述待测浏览器中显示的页面内若干个页面色块的色块参数；基于同一相对位置，分别对比所述参考界面的若干个所述参考色块的色块参数和若干个所述页面色块的色块参数，获得所述对比相似度；及输出所述对比相似度。
- 根据权利要求1所述的方法，其特征在于，所述方法还包括：当所述对比相似度小于预设阈值时，获取所述待测浏览器中显示的页面与所述参考界面的相异部分的位置信息；及根据所述待测浏览器中显示的页面生成对比图片，并根据所述位置信息在所述对比图片上添加预设标记。
- 一种页面兼容性检测装置，包括：模拟模块，用于模拟终端的运行环境；浏览器运行模块，用于在所述运行环境下运行待测浏览器；页面获取模块，用于获取页面地址，通过所述待测浏览器在所述页面地址获取待测页面文件；页面显示模块，用于通过所述待测浏览器加载所述待测页面文件，在所述待测浏览器上显示所述待测页面文件对应的页面；参考界面获取模块，用于获取参考界面；对比模块，用于将所述参考界面与所述待测浏览器中显示的页面进行对比，获得对比相似度；及检测模块，用于检测所述对比相似度是否大于预设阈值，当所述对比相似度大于或等于预设阈值时，输出兼容提示信息。
- 根据权利要求6所述的装置，其特征在于，所述页面显示模块包括：显示参数获取单元，用于获取预设的显示参数；及显示单元，用于通过所述待测浏览器基于所述显示参数加载所述待测页面文件，在所述待测浏览器上显示所述待测页面文件对应的页面；参考界面获取模块还用于获取基于所述显示参数生成的所述参考界面。
- 根据权利要求7所述的装置，其特征在于，所述对比模块包括：第一解析单元，用于解析所述参考界面获取所述参考界面的色块参数；第二解析单元，用于解析所述待测浏览器中显示的页面，获取所述待测浏览器中显示的页面的色块参数；对比单元，用于将所述参考界面的色块参数和所述待测浏览器中显示的页面的色块参数进行对比，获得所述对比相似度；及相似度输出单元，用于输出所述对比相似度。
- 根据权利要求8所述的装置，其特征在于，所述对比单元还用于获取所述参考界面内若干个参考色块的色块参数，并获取各所述参考色块在所述参考界面上的相对位置；基于相同的所述相对位置，获取所述待测浏览器中显示的页面内若干个页面色块的色块参数；基于同一相对位置，分别对比所述参考界面的若干个所述参考色块的色块参数和若干个所述页面色块的色块参数，获得所述对比相似度；输出所述对比相似度。
- 根据权利要求6所述的装置，其特征在于，检测模块还用于当所述对比相似度小于预设阈值时，获取所述待测浏览器中显示的页面与所述参考界面的相异部分的位置信息；根据所述待测浏览器中显示的页面生成对比图片，并根据所述位置信息在所述对比图片上添加预设标记。
- 一种服务器，包括存储器和处理器，所述存储器中储存有计算机可读指令，所述计算机可读指令被所述处理器执行时时，使得所述处理器执行以下步骤：模拟终端的运行环境；在所述运行环境下运行待测浏览器；获取页面地址，通过所述待测浏览器在所述页面地址获取待测页面文件；通过所述待测浏览器加载所述待测页面文件，在所述待测浏览器上显示所述待测页面文件对应的页面；获取参考界面；将所述参考界面与所述待测浏览器中显示的页面进行对比，获得对比相似度；及检测所述对比相似度是否大于预设阈值，当所述对比相似度大于或等于预设阈值时，输出兼容提示信息。
- 根据权利要求11所述的服务器，其特征在于，所述通过所述待测浏览器加载所述待测页面文件，在所述待测浏览器上显示所述待测页面文件对应的页面包括：获取预设的显示参数；及通过所述待测浏览器基于所述显示参数加载所述待测页面文件，在所述待测浏览器上显示所述待测页面文件对应的页面；所述获取参考界面包括：获取基于所述显示参数生成的所述参考界面。
- 根据权利要求12所述的服务器，其特征在于，所述将所述参考界面与所述待测浏览器中显示的页面进行对比，获得对比相似度包括：解析所述参考界面获取所述参考界面的色块参数；解析所述待测浏览器中显示的页面，获取所述待测浏览器中显示的页面的色块参数；将所述参考界面的色块参数和所述待测浏览器中显示的页面的色块参数进行对比，获得所述对比相似度；及输出所述对比相似度。
- 根据权利要求13所述的服务器，其特征在于，所述将所述参考界面与所述待测浏览器中显示的页面进行对比，获得对比相似度包括：获取所述参考界面内若干个参考色块的色块参数，并获取各所述参考色块在所述参考界面上的相对位置；基于相同的所述相对位置，获取所述待测浏览器中显示的页面内若干个页面色块的色块参数；基于同一相对位置，分别对比所述参考界面的若干个所述参考色块的色块 参数和若干个所述页面色块的色块参数，获得所述对比相似度；及输出所述对比相似度。
- 根据权利要求11所述的服务器，其特征在于，在检测所述对比相似度是否大于预设阈值后，还使得所述处理器执行以下步骤：当所述对比相似度小于预设阈值时，获取所述待测浏览器中显示的页面与所述参考界面的相异部分的位置信息；及根据所述待测浏览器中显示的页面生成对比图片，并根据所述位置信息在所述对比图片上添加预设标记。
- 一个或多个存储有计算机可读指令的非易失性可读存储介质，所述计算机可读指令被一个或多个处理器执行时，使得所述一个或多个处理器执行以下步骤：模拟终端的运行环境；在所述运行环境下运行待测浏览器；获取页面地址，通过所述待测浏览器在所述页面地址获取待测页面文件；通过所述待测浏览器加载所述待测页面文件，在所述待测浏览器上显示所述待测页面文件对应的页面；获取参考界面；将所述参考界面与所述待测浏览器中显示的页面进行对比，获得对比相似度；及检测所述对比相似度是否大于预设阈值，当所述对比相似度大于或等于预设阈值时，输出兼容提示信息。
- 根据权利要求16所述的非易失性可读存储介质，其特征在于，所述通过所述待测浏览器加载所述待测页面文件，在所述待测浏览器上显示所述待测页面文件对应的页面包括：获取预设的显示参数；及通过所述待测浏览器基于所述显示参数加载所述待测页面文件，在所述待测浏览器上显示所述待测页面文件对应的页面；所述获取参考界面包括：获取基于所述显示参数生成的所述参考界面。
- 根据权利要求17所述的非易失性可读存储介质，其特征在于，所述将所述参考界面与所述待测浏览器中显示的页面进行对比，获得对比相似度包括：解析所述参考界面获取所述参考界面的色块参数；解析所述待测浏览器中显示的页面，获取所述待测浏览器中显示的页面的色块参数；将所述参考界面的色块参数和所述待测浏览器中显示的页面的色块参数进行对比，获得所述对比相似度；及输出所述对比相似度。
- 根据权利要求18所述的非易失性可读存储介质，其特征在于，所述将所述参考界面与所述待测浏览器中显示的页面进行对比，获得对比相似度包括：获取所述参考界面内若干个参考色块的色块参数，并获取各所述参考色块在所述参考界面上的相对位置；基于相同的所述相对位置，获取所述待测浏览器中显示的页面内若干个页面色块的色块参数；基于同一相对位置，分别对比所述参考界面的若干个所述参考色块的色块参数和若干个所述页面色块的色块参数，获得所述对比相似度；及输出所述对比相似度。
- 根据权利要求16所述的非易失性可读存储介质，其特征在于，计算机可读指令被一个或多个处理器执行时，还使得所述一个或多个处理器执行以下步骤：当所述对比相似度小于预设阈值时，获取所述待测浏览器中显示的页面与所述参考界面的相异部分的位置信息；及根据所述待测浏览器中显示的页面生成对比图片，并根据所述位置信息在所述对比图片上添加预设标记。
Applications Claiming Priority (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710619747.9 | 2017-07-26 | ||
| CN201710619747.9A CN107678937A (zh) | 2017-07-26 | 2017-07-26 | 页面兼容性检测方法、装置、服务器和介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| WO2019019358A1 true WO2019019358A1 (zh) | 2019-01-31 |
Family
ID=61134096
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| PCT/CN2017/104204 Ceased WO2019019358A1 (zh) | 2017-07-26 | 2017-09-29 | 页面兼容性检测方法、装置、服务器和存储介质 |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN107678937A (zh) |
| WO (1) | WO2019019358A1 (zh) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110532181A (zh) * | 2019-08-19 | 2019-12-03 | 广州华旻信息科技有限公司 | Es6特性兼容性检测系统及方法 |
| CN111324519A (zh) * | 2020-02-21 | 2020-06-23 | 浪潮电子信息产业股份有限公司 | 一种兼容性测试方法、系统、装置及可读存储介质 |
| CN113220587A (zh) * | 2021-06-02 | 2021-08-06 | 中国农业银行股份有限公司 | Web界面兼容性测试方法及装置 |
| CN115756471A (zh) * | 2022-12-14 | 2023-03-07 | 北京百度网讯科技有限公司 | 一种页面代码生成方法、装置、电子设备及存储介质 |
Families Citing this family (17)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110609522A (zh) * | 2018-06-15 | 2019-12-24 | 虫洞科技股份有限公司 | 机台参数撷取装置 |
| CN109254908A (zh) * | 2018-08-03 | 2019-01-22 | 北京达佳互联信息技术有限公司 | 可视化回归测试方法、装置、终端设备及可读存储介质 |
| CN111159607B (zh) * | 2018-11-07 | 2023-09-19 | 中国移动通信集团重庆有限公司 | 网站兼容性设置方法、装置、设备和介质 |
| CN109815426A (zh) * | 2018-12-14 | 2019-05-28 | 深圳壹账通智能科技有限公司 | 页面信息检测方法及装置、终端和计算机可读存储介质 |
| CN109697164A (zh) * | 2018-12-17 | 2019-04-30 | 北京城市网邻信息技术有限公司 | 浏览器中调起App的测试方法、装置、存储介质及终端 |
| CN109740096B (zh) * | 2018-12-28 | 2021-04-20 | 广州华多网络科技有限公司 | 一种实时预览的实现方法、装置、系统及存储介质 |
| CN110046072A (zh) * | 2019-03-13 | 2019-07-23 | 平安城市建设科技(深圳)有限公司 | 页面的监控方法、装置、终端及可读存储介质 |
| CN109949295A (zh) * | 2019-03-21 | 2019-06-28 | 中国工商银行股份有限公司 | 浏览器网页的差异性检测方法、装置及计算机存储介质 |
| CN109976854B (zh) * | 2019-03-22 | 2023-02-24 | 维沃移动通信有限公司 | 一种应用程序处理方法及终端设备 |
| CN110245068A (zh) * | 2019-04-25 | 2019-09-17 | 深圳壹账通智能科技有限公司 | H5页面的自动化测试方法、装置及计算机设备 |
| CN110896473A (zh) * | 2019-07-12 | 2020-03-20 | 研祥智能科技股份有限公司 | 显示界面切换功能的检测方法及系统 |
| CN112380116A (zh) * | 2020-11-10 | 2021-02-19 | 深圳市共进电子股份有限公司 | 浏览器对比测试方法、装置和浏览器数据转发方法 |
| CN113094287B (zh) * | 2021-05-12 | 2024-03-15 | 深圳市腾讯信息技术有限公司 | 页面兼容性检测方法、装置、设备及存储介质 |
| CN114356747B (zh) * | 2021-11-25 | 2025-12-12 | 腾讯科技（深圳）有限公司 | 显示内容的测试方法、装置、设备、存储介质及程序产品 |
| CN114579461B (zh) * | 2022-03-11 | 2025-01-07 | 北京达佳互联信息技术有限公司 | 浏览器兼容性检测方法及相关设备 |
| CN117078777A (zh) * | 2023-08-22 | 2023-11-17 | 中国工商银行股份有限公司 | 页面检查方法、装置、设备及存储介质 |
| CN119669088A (zh) * | 2024-12-09 | 2025-03-21 | 浙江极氪智能科技有限公司 | H5页面兼容性测试方法、装置、设备、存储介质及产品 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103514090A (zh) * | 2012-06-26 | 2014-01-15 | 腾讯科技（深圳）有限公司 | 测试浏览器的方法和装置 |
| CN103546907A (zh) * | 2012-07-11 | 2014-01-29 | 深圳市世纪光速信息技术有限公司 | 一种无线应用协议网页的测试系统及测试方法 |
| CN106502891A (zh) * | 2016-10-19 | 2017-03-15 | 广州视源电子科技股份有限公司 | 用户界面的自动检测方法和装置 |
| CN106598846A (zh) * | 2016-11-29 | 2017-04-26 | 上海亿账通互联网科技有限公司 | 应用界面测试方法和装置 |
-
2017
- 2017-07-26 CN CN201710619747.9A patent/CN107678937A/zh active Pending
- 2017-09-29 WO PCT/CN2017/104204 patent/WO2019019358A1/zh not_active Ceased
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103514090A (zh) * | 2012-06-26 | 2014-01-15 | 腾讯科技（深圳）有限公司 | 测试浏览器的方法和装置 |
| CN103546907A (zh) * | 2012-07-11 | 2014-01-29 | 深圳市世纪光速信息技术有限公司 | 一种无线应用协议网页的测试系统及测试方法 |
| CN106502891A (zh) * | 2016-10-19 | 2017-03-15 | 广州视源电子科技股份有限公司 | 用户界面的自动检测方法和装置 |
| CN106598846A (zh) * | 2016-11-29 | 2017-04-26 | 上海亿账通互联网科技有限公司 | 应用界面测试方法和装置 |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110532181A (zh) * | 2019-08-19 | 2019-12-03 | 广州华旻信息科技有限公司 | Es6特性兼容性检测系统及方法 |
| CN111324519A (zh) * | 2020-02-21 | 2020-06-23 | 浪潮电子信息产业股份有限公司 | 一种兼容性测试方法、系统、装置及可读存储介质 |
| CN111324519B (zh) * | 2020-02-21 | 2022-06-17 | 浪潮电子信息产业股份有限公司 | 一种兼容性测试方法、系统、装置及可读存储介质 |
| CN113220587A (zh) * | 2021-06-02 | 2021-08-06 | 中国农业银行股份有限公司 | Web界面兼容性测试方法及装置 |
| CN115756471A (zh) * | 2022-12-14 | 2023-03-07 | 北京百度网讯科技有限公司 | 一种页面代码生成方法、装置、电子设备及存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN107678937A (zh) | 2018-02-09 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| WO2019019358A1 (zh) | 页面兼容性检测方法、装置、服务器和存储介质 | |
| CN102932197B (zh) | 一种测试方法及测试系统 | |
| US10474481B2 (en) | User interface layout comparison | |
| CN110825651A (zh) | 网页兼容性测试方法、装置、系统及存储介质 | |
| WO2017005148A1 (zh) | 一种自动化地软件测试方法和装置 | |
| CN107025174B (zh) | 用于设备的用户界面异常测试的方法、装置和可读储介质 | |
| CN105224456B (zh) | 一种测试脚本生成方法、装置和系统 | |
| US20120278698A1 (en) | Method and system for processing a webpage | |
| CN108459850B (zh) | 生成测试脚本的方法、装置及系统 | |
| CN107656872B (zh) | 软件测试方法、装置、设备和计算机存储介质 | |
| CN102075632A (zh) | 一种移动终端摄像头调试方法及装置 | |
| CN105653056A (zh) | 输入法的测试方法及装置 | |
| CN104239206A (zh) | 网页测试方法和装置 | |
| CN112445693A (zh) | 一种页面更新检测方法、装置、设备及存储介质 | |
| CN104915297A (zh) | 一种android设备的APP耗电量的自动化测试方法 | |
| CN106033387A (zh) | 测试flash内部控件的方法和装置 | |
| CN108763054B (zh) | 测试案例的测试效果展示方法、电子装置及存储介质 | |
| CN107491385B (zh) | 一种软件测试过程中录屏的方法及装置 | |
| CN106897209A (zh) | 一种界面加载时间计算方法和装置 | |
| CN109213465B (zh) | 一种用于教育操作系统的多显示器标识方法及系统 | |
| CN116126671B (zh) | 电子设备的测试方法、装置、设备和可读存储介质 | |
| US11397662B2 (en) | Method for debugging computer program, device employing method, and storage medium | |
| CN111949510A (zh) | 测试处理方法、装置、电子设备及可读存储介质 | |
| CN111008147B (zh) | 应用程序的测试方法、终端及计算机可读存储介质 | |
| WO2017159631A1 (ja) | ソフトウェアの動作検証装置、ソフトウェアの動作検証方法 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| 121 | Ep: the epo has been informed by wipo that ep was designated in this application |
Ref document number: 17919211 Country of ref document: EP Kind code of ref document: A1 |
|
| NENP | Non-entry into the national phase |
Ref country code: DE |
|
| 122 | Ep: pct application non-entry in european phase |
Ref document number: 17919211 Country of ref document: EP Kind code of ref document: A1 |
|
| 32PN | Ep: public notification in the ep bulletin as address of the adressee cannot be established |
Free format text: NOTING OF LOSS OF RIGHTS PURSUANT TO RULE 112(1) EPC (EPO FORM 1205A DATED 28.05.2020) |
|
| 122 | Ep: pct application non-entry in european phase |
Ref document number: 17919211 Country of ref document: EP Kind code of ref document: A1 |