Browser compatibility detection method and related equipment

Abstract

The disclosed embodiment provides a browser compatibility detection method and related equipment. The method includes: obtaining a design page and a page rendering file determined according to the design page; rendering the page rendering file through a browser to generate a target page to obtain a page screenshot of the target page; determining the page similarity between the design page and the page screenshot; and determining the compatibility of the page rendering file with the browser according to the page similarity between the design page and the page screenshot. The method can automatically detect the compatibility of the page rendering file with the browser, thereby improving the efficiency of browser compatibility detection.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technology, and in particular to a browser compatibility detection method, a browser compatibility detection device, an electronic device, a computer-readable storage medium, and a computer program product. Background Art

[0002] With the rapid development of Internet technology, web applications are becoming an important platform for information acquisition and communication. Web developers hope that applications can perform consistently on browser platforms, but due to differences in browser implementation technology and different levels of support for standards, web applications may have inconsistent behaviors and page displays when running on different browser platforms, which is the browser incompatibility problem.

[0003] In the related art, a method of manually detecting the compatibility of a browser is used to detect the compatibility of the browser, which has high operation cost and poor accuracy.

[0004] It should be noted that the information disclosed in the above background technology section is only used to enhance the understanding of the background of the present disclosure, and therefore may include information that does not constitute the prior art known to ordinary technicians in the field. Summary of the invention

[0005] The embodiments of the present disclosure provide a browser compatibility detection method, a browser compatibility detection device, an electronic device, a computer-readable storage medium, and a computer program product. The method can automatically detect the compatibility of a page rendering file with a browser, thereby improving the efficiency of browser compatibility detection.

[0006] An embodiment of the present disclosure provides a browser compatibility detection method, which includes: obtaining a design page and a page rendering file determined based on the design page; rendering the page rendering file through a browser to generate a target page to obtain a page screenshot of the target page; determining the page similarity between the design page and the page screenshot; and determining the compatibility of the page rendering file with the browser based on the page similarity between the design page and the page screenshot.

[0007] In some exemplary embodiments of the present disclosure, the design page includes at least one design element, and the page screenshot includes at least one page element corresponding to the at least one design element; determining the page similarity between the design page and the page screenshot includes: obtaining the element difference between each design element and the page element corresponding thereto; and obtaining the page similarity based on the element difference between each design element and the page element corresponding thereto.

[0008] In some exemplary embodiments of the present disclosure, if the page similarity is less than a similarity threshold, a target page element whose element difference is greater than the element difference threshold and the position information of the target page element are obtained from the at least one page element; and the target business code is located in the page rendering file based on the position information of the target page element.

[0009] In some exemplary embodiments of the present disclosure, locating the target business code in the page rendering file according to the location information of the target page element includes: obtaining a rendering tree generated during the rendering process of the target page; determining a target rendering node in the rendering tree according to the location information of the target page element; obtaining a target cascading style sheet object model by inverse analysis according to the target rendering node; and obtaining a target cascading style sheet by inverse analysis according to the target cascading style sheet object model to determine the target business code.

[0010] In some exemplary embodiments of the present disclosure, rendering the page rendering file through a browser to generate a target page to obtain a page screenshot of the target page includes: rendering the page rendering file to generate multiple target pages by using multiple browsers with different kernels respectively to obtain multiple page screenshots of the multiple target pages; wherein, determining the page similarity between the design page and the page screenshots includes: respectively determining the page similarity between the design page and the multiple page screenshots of the multiple target pages; wherein, determining the compatibility of the target page with the browser based on the page similarity between the design page and the page screenshots includes: determining the compatibility of the page rendering file with multiple browsers with different kernels based on the page similarity between the design page and the multiple page screenshots of the multiple target pages.

[0011] In some exemplary embodiments of the present disclosure, the compatibility of the page rendering file with the browser is determined based on the page similarity between the design page and the page screenshot, including: if the page similarity is less than a similarity threshold, determining that the page rendering file is incompatible with the browser; if the page similarity is greater than or equal to the similarity threshold, determining that the page rendering file is compatible with the browser.

[0012] In some exemplary embodiments of the present disclosure, rendering the page rendering file through a browser to generate a target page to obtain a page screenshot of the target page includes: generating a cascading style sheet object model according to the page rendering file through the browser; generating a rendering tree according to the cascading style sheet object model; rendering and generating the target page according to the rendering tree; and taking a screenshot of the target page through the browser to obtain a page screenshot of the target page.

[0013] An embodiment of the present disclosure provides a browser compatibility detection device, including: an acquisition module, configured to execute acquisition of a design page and a page rendering file determined based on the design page; an access module, configured to execute rendering of the page rendering file through a browser to generate a target page to obtain a page screenshot of the target page; a determination module, configured to execute determination of page similarity between the design page and the page screenshot; the determination module is also configured to determine the compatibility of the page rendering file with the browser based on the page similarity between the design page and the page screenshot.

[0014] In some exemplary embodiments of the present disclosure, the design page includes at least one design element, and the page screenshot includes at least one page element corresponding to the at least one design element; the determination module also includes: an acquisition module, configured to execute obtaining the element difference between each design element and the corresponding page element; the acquisition module is also configured to execute obtaining the page similarity based on the element difference between each design element and the corresponding page element.

[0015] In some exemplary embodiments of the present disclosure, the device also includes: a positioning module; the acquisition module is also configured to execute, if the page similarity is less than a similarity threshold, obtaining a target page element whose element difference is greater than an element difference threshold and the position information of the target page element from the at least one page element; the positioning module is configured to execute, according to the position information of the target page element, locating the target business code in the page rendering file.

[0016] In some exemplary embodiments of the present disclosure, the apparatus further includes: a reverse analysis module; the obtaining module is further configured to obtain a rendering tree generated during the rendering process of the target page; the determining module is further configured to determine a target rendering node in the rendering tree according to position information of the target page element; the reverse analysis module is configured to perform reverse analysis according to the target rendering node to obtain a target cascading style sheet object model; the reverse analysis module is further configured to perform reverse analysis according to the target cascading style sheet object model to obtain a target cascading style sheet to determine a target business code.

[0017] In some exemplary embodiments of the present disclosure, the access module is further configured to execute rendering of the page rendering file by using multiple browsers with different kernels to generate multiple target pages, so as to obtain multiple page screenshots of the multiple target pages; the determination module is further configured to execute determination of page similarities between the design page and the multiple page screenshots of the multiple target pages, respectively; the determination module is further configured to determine the compatibility of the page rendering file with multiple browsers with different kernels based on the page similarities between the design page and the multiple page screenshots of the multiple target pages.

[0018] In some exemplary embodiments of the present disclosure, the determination module is further configured to determine that the page rendering file is incompatible with the browser if the page similarity is less than a similarity threshold; the determination module is further configured to determine that the page rendering file is compatible with the browser if the page similarity is greater than or equal to the similarity threshold.

[0019] In some exemplary embodiments of the present disclosure, the device also includes: a generation module; the generation module is configured to generate a cascading style sheet object model according to the page rendering file through a browser; the generation module is also configured to generate a rendering tree according to the cascading style sheet object model; the generation module is also configured to generate a target page according to the rendering tree; the acquisition module is also configured to take a screenshot of the target page through the browser to obtain a page screenshot of the target page.

[0020] An embodiment of the present disclosure provides an electronic device, comprising: a processor; and a memory for storing processor-executable instructions; wherein the processor is configured to execute the executable instructions to implement any of the above-mentioned browser compatibility detection methods.

[0021] An embodiment of the present disclosure provides a computer-readable storage medium. When instructions in the computer-readable storage medium are executed by a processor of an electronic device, the electronic device can execute any of the above-mentioned browser compatibility detection methods.

[0022] An embodiment of the present disclosure provides a computer program product, including a computer program, which implements any of the above-mentioned browser compatibility detection methods when executed by a processor.

[0023] The browser compatibility detection method provided by the embodiment of the present disclosure obtains a design page and a page rendering file determined according to the design page, and renders the page rendering file through the browser to generate a target page, so as to obtain the actual effect of the design page displayed in the browser; according to the page similarity of the page screenshots of the design page and the target page, the compatibility of the page rendering file with the browser can be automatically detected, thereby improving the efficiency of browser compatibility detection and improving the accuracy of browser compatibility detection.

[0024] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0025] The accompanying drawings herein are incorporated into the specification and constitute a part of the specification, illustrate embodiments consistent with the present disclosure, and together with the specification are used to explain the principles of the present disclosure. Obviously, the accompanying drawings described below are only some embodiments of the present disclosure, and for ordinary technicians in this field, other accompanying drawings can be obtained based on these accompanying drawings without creative work.

[0026] Figure 1 A schematic diagram showing an exemplary system architecture to which the browser compatibility detection method according to an embodiment of the present disclosure can be applied.

[0027] Figure 2 The present invention is a flowchart of a browser compatibility detection method according to an exemplary embodiment.

[0028] Figure 3 is a schematic diagram of a design page and a page screenshot according to an example.

[0029] Figure 4 The figure is a flow chart of another browser compatibility detection method according to an exemplary embodiment.

[0030] Figure 5 The figure is a block diagram of a browser compatibility detection device according to an exemplary embodiment.

[0031] Figure 6 It is a schematic diagram showing the structure of an electronic device suitable for implementing the exemplary embodiments of the present disclosure according to an exemplary embodiment. DETAILED DESCRIPTION

[0032] Example embodiments will now be described more fully with reference to the accompanying drawings. However, example embodiments can be implemented in many forms and should not be construed as limited to the embodiments set forth herein; rather, these embodiments are provided so that this disclosure will be comprehensive and complete and will fully convey the concepts of the example embodiments to those skilled in the art. The same reference numerals in the figures represent the same or similar parts, and thus their repeated description will be omitted.

[0033] The features, structures or characteristics described in the present disclosure may be combined in one or more embodiments in any suitable manner. In the following description, many specific details are provided to provide a full understanding of the embodiments of the present disclosure. However, those skilled in the art will appreciate that the technical solutions of the present disclosure may be practiced while omitting one or more of the specific details, or other methods, components, devices, steps, etc. may be adopted. In other cases, known methods, devices, implementations or operations are not shown or described in detail to avoid blurring the various aspects of the present disclosure.

[0034] The accompanying drawings are only schematic diagrams of the present disclosure, and the same reference numerals in the drawings represent the same or similar parts, so their repeated description will be omitted. Some block diagrams shown in the accompanying drawings do not necessarily correspond to physically or logically independent entities. These functional entities can be implemented in software form, or implemented in at least one hardware module or integrated circuit, or implemented in different networks and / or processor devices and / or microcontroller devices.

[0035] The flowcharts shown in the accompanying drawings are only exemplary and do not necessarily include all the contents and steps, nor must they be executed in the order described. For example, some steps can be decomposed, and some steps can be combined or partially combined, so the actual execution order may change according to actual conditions.

[0036] In this specification, the terms "a", "an", "the", "said" and "at least one" are used to indicate the presence of at least one element / component / etc.; the terms "comprising", "including" and "having" are used to express an open-ended inclusion and mean that additional elements / components / etc. may exist in addition to the listed elements / components / etc.; the terms "first", "second" and "third" etc. are used only as labels and are not intended to limit the quantity of their objects.

[0037] Figure 1 A schematic diagram showing an exemplary system architecture to which the browser compatibility detection method according to an embodiment of the present disclosure can be applied.

[0038] like Figure 1As shown, the system architecture may include a server 101, a network 102, a terminal device 103, a terminal device 104, and a terminal device 105. The network 102 is used to provide a medium for a communication link between the terminal device 103, the terminal device 104, or the terminal device 105 and the server 101. The network 102 may include various connection types, such as wired, wireless communication links, or optical fiber cables, etc.

[0039] The server 101 may be a server that provides various services, such as a background management server that provides support for devices operated by users using the terminal device 103, the terminal device 104, or the terminal device 105. The background management server may analyze and process the received request and other data, and feed back the processing results to the terminal device 103, the terminal device 104, or the terminal device 105.

[0040] Terminal device 103, terminal device 104 and terminal device 105 can be a smart phone, a tablet computer, a laptop computer, a desktop computer, a smart speaker, a wearable smart device, a virtual reality device, an augmented reality device, etc., but are not limited thereto.

[0041] In the disclosed embodiment, the server 101 may: obtain a design page and a page rendering file determined based on the design page; render the page rendering file through a browser to generate a target page to obtain a page screenshot of the target page; determine the page similarity between the design page and the page screenshot; and determine the compatibility of the page rendering file with the browser based on the page similarity between the design page and the page screenshot.

[0042] It should be understood that Figure 1 The number of terminal devices 103, terminal devices 104, terminal devices 105, networks 102 and servers 101 are merely illustrative. Server 101 may be a physical server, a server cluster consisting of multiple servers, or a cloud server. Depending on actual needs, any number of terminal devices, networks and servers may be provided.

[0043] The following will describe in more detail the various steps of the browser compatibility detection method in the exemplary embodiment of the present disclosure in conjunction with the accompanying drawings and embodiments. The method provided in the exemplary embodiment of the present disclosure can be executed by any electronic device, such as the above Figure 1 The server 101 and / or terminal device 103 in the embodiment of the present invention are referred to herein, but the present disclosure does not limit this.

[0044] Figure 2 The present invention is a flowchart of a browser compatibility detection method according to an exemplary embodiment.

[0045] like Figure 2As shown, the method provided by the embodiment of the present disclosure may include the following steps.

[0046] In step S210, a design page and a page rendering file determined according to the design page are obtained.

[0047] In the disclosed embodiment, the design page (also referred to as a design drawing) is a simple web page provided by a UI (User Interface) designer during business development that contains relevant information such as layers and sizes. The design page does not contain interactive functions and real data.

[0048] In the disclosed embodiment, the design page may be preprocessed: the acquired format of the design page may be converted into a picture format and compressed.

[0049] In the disclosed embodiment, the page rendering file is obtained by the page developer according to the design page development. The page rendering file may include, for example, business code (also referred to as web page development code), and the page rendering file may include CSS (Cascading Style Sheets) code file.

[0050] Specifically, the design elements, dimensions, colors, sizes, positions and other information in the design page can be converted into web page development codes that can be recognized by the browser, that is, the design page can be restored to a target page with interactive functions and real data.

[0051] In an exemplary embodiment, a design page includes at least one design element.

[0052] The design elements may include at least one of text elements, picture elements, button elements, hyperlink elements, and table elements.

[0053] In step S220, the page rendering file is rendered by a browser to generate a target page to obtain a page screenshot of the target page.

[0054] In an exemplary embodiment, the page screenshot includes at least one page element corresponding to at least one design element.

[0055] Among them, the page elements may include at least one of text elements, picture elements, button elements, hyperlink elements, and table elements. Generally, design elements and page elements correspond one to one.

[0056] Figure 3 is a schematic diagram of a design page and a page screenshot according to an example.

[0057] refer to Figure 3For example, the design page 301 may include picture elements 302, text elements 303, and button elements 304, and the page screenshot 305 may include picture elements 306, text elements 307, and button elements 308, among which picture elements 302 and picture elements 306 correspond to each other, text elements 303 and text elements 307 correspond to each other, and button elements 304 and button elements 308 correspond to each other.

[0058] In the disclosed embodiment, a target page may be rendered by a browser based on a page rendering file, and a screenshot of the target page may be taken by the browser to obtain a page screenshot of the target page.

[0059] In the disclosed embodiment, the above-mentioned browser can be a headless browser, wherein the headless browser can be used to simulate the operation of the browser, and the server can start and render the target page, take a screenshot of the target page, etc. through the interface provided by the headless browser.

[0060] In an exemplary embodiment, a browser generates a cascading style sheet object model according to a page rendering file; generates a rendering tree according to the cascading style sheet object model; generates a target page according to the rendering tree; and takes a screenshot of the target page through the browser to obtain a page screenshot of the target page.

[0061] In the disclosed embodiment, a CSSOM (CSS Object Model) can be generated according to a CSS code file, a render tree can be generated according to the CSSOM, and a target page can be rendered according to the render tree.

[0062] For example, the rendering engine can parse an HTML (Hyper Text Markup Language) file into a DOM (Document Object Model) tree, parse a CSS code file into a CSSOM, and combine the DOM tree and the CSSOM to generate a rendering tree. The rendering tree can be composed of rectangles with attributes such as color and size, and the rendering tree can be displayed on the screen in the correct order.

[0063] In an exemplary embodiment, a plurality of browsers with different kernels are used to render a page rendering file respectively to generate a plurality of target pages, so as to obtain a plurality of page screenshots of the plurality of target pages.

[0064] The following description is made by taking multiple browsers including a first browser and a second browser as an example, but the present disclosure is not limited thereto.

[0065] The first browser and the second browser have different kernels, and the description is given by taking the kernel of the first browser and the kernel of the second browser as the second kernel as an example.

[0066] In the disclosed embodiment, a first browser with a first kernel can be used to render and generate a first target page, and a screenshot of the first target page can be taken using the first browser to obtain a first page screenshot of the first target page; a second browser with a second kernel can be used to render and generate a second target page, and a screenshot of the second target page can be taken using the second browser to obtain a second page screenshot of the second target page.

[0067] Since browsers with different kernels have different support for development language codes, the same business code may appear differently. That is, the target pages generated by the same page rendering file in browsers with different kernels may be different, so the resulting page screenshots may be different.

[0068] In step S230, the page similarity between the design page and the page screenshot is determined.

[0069] In the disclosed embodiment, the design page and the page screenshot can be compared by using techniques such as image processing, signing, and comparison to obtain the page similarity between the design page and the page screenshot.

[0070] In an exemplary embodiment, page similarities of a design page and a plurality of page screenshots of a plurality of target pages are respectively determined.

[0071] In the disclosed embodiment, the design page may be compared with multiple page screenshots of multiple target pages to obtain the similarities between the design page and the multiple page screenshots.

[0072] For example, the design page may be compared with the first page screenshot to obtain a first similarity between the design page and the first page screenshot; the design page may be compared with the second page screenshot to obtain a second similarity between the design page and the second page screenshot.

[0073] In an exemplary embodiment, the element difference between each design element and the corresponding page element is obtained; and the page similarity is obtained according to the element difference between each design element and the corresponding page element.

[0074] In the disclosed embodiment, each design element in the design page and the page elements corresponding to each design element in the page screenshot can be compared to obtain the element difference between each design element and the corresponding page element; based on the element difference between each design element and the corresponding page element, the page similarity between the design page and the page screenshot can be determined.

[0075] For example, refer to Figure 3 , the picture element 302 in the design page 301 and the picture element 306 in the page screenshot 305 can be compared to obtain the element difference between the picture element 302 and the picture element 306; the text element 303 in the design page 301 and the text element 307 in the page screenshot 305 can be compared to obtain the element difference between the text element 303 and the text element 307; the button element 304 in the design page 301 and the button element 308 in the page screenshot 305 can be compared to obtain the element difference between the button element 304 and the button element 308; according to the element difference between the picture element 302 and the picture element 306, the element difference between the text element 303 and the text element 307, and the element difference between the button element 304 and the button element 308, the page similarity of the design page 301 and the page screenshot 305 is determined.

[0076] In an exemplary embodiment, a target page element whose element difference is greater than an element difference threshold may be marked from at least one page element in the page screenshot.

[0077] For example, continue to refer to Figure 3 , if the element difference between the button element 304 and the button element 308 is greater than the element difference threshold, the button element 308 (ie, the target page element) is marked in the page screenshot 305 .

[0078] In step S240, the compatibility of the page rendering file with the browser is determined according to the page similarity between the design page and the page screenshot.

[0079] In an exemplary embodiment, if the page similarity is less than the similarity threshold, it is determined that the page rendering file is incompatible with the browser; if the page similarity is greater than or equal to the similarity threshold, it is determined that the page rendering file is compatible with the browser.

[0080] In the embodiment of the present disclosure, page similarity can be represented by a numerical value, and the maximum value can be 100%, which means that the design page and the page screenshot are exactly the same; the similarity threshold can be set according to actual conditions, and the present disclosure does not limit this.

[0081] In the disclosed embodiment, the page similarity and the similarity threshold can be compared. If the page similarity is less than the similarity threshold, it is determined that the page rendering file is incompatible with the browser, that is, the browser compatibility test fails; if the page similarity is greater than or equal to the similarity threshold, it is determined that the page rendering file is compatible with the browser, that is, the browser compatibility test passes.

[0082] In the disclosed embodiment, when the page rendering file is incompatible with the browser, that is, when the browser compatibility check fails, the target business code (e.g., the problematic business code) can be located by reverse engineering the page rendering file, and the target business code can be fed back to the web developer, allowing the web developer to change the page rendering file, thereby improving the efficiency of web development.

[0083] In an exemplary embodiment, the compatibility of a page rendering file with multiple browsers of different kernels is determined according to page similarities between a design page and multiple page screenshots of multiple target pages.

[0084] In the disclosed embodiment, the page similarities of a design page and multiple page screenshots of multiple target pages can be compared with a similarity threshold respectively. If the page similarity of the design page and the page screenshots of the target page is less than the similarity threshold, it is determined that the page rendering file is incompatible with the kernel browser that renders the target page, that is, the kernel browser compatibility test fails; if the page similarity of the design page and the target page is greater than or equal to the similarity threshold, it is determined that the page rendering file is compatible with the kernel browser that renders the target page, that is, the kernel browser compatibility test passes.

[0085] In the disclosed embodiment, the compatibility of browsers under different kernels can be automatically detected, thereby improving the detection efficiency of the compatibility of browsers under different kernels.

[0086] The browser compatibility detection method provided by the embodiment of the present disclosure obtains a design page and a page rendering file determined according to the design page, and renders the page rendering file through the browser to generate a target page, so as to obtain the actual effect of the design page displayed in the browser; according to the page similarity of the page screenshots of the design page and the target page, the compatibility of the page rendering file with the browser can be automatically detected, thereby improving the efficiency of browser compatibility detection and improving the accuracy of browser compatibility detection.

[0087] Figure 4 The figure is a flow chart of another browser compatibility detection method according to an exemplary embodiment.

[0088] In the embodiment of the present disclosure, Figure 2 Based on the browser compatibility detection method shown, Figure 4 The browser compatibility detection method shown may also include the following steps.

[0089] In step S410, if the page similarity is less than the similarity threshold, a target page element whose element difference is greater than the element difference threshold and position information of the target page element are obtained from at least one page element.

[0090] The target page element may be a page element with compatibility issues.

[0091] In the disclosed embodiment, each design element in the design page can be compared with the page elements corresponding to each design element in the page screenshot to obtain the element difference between each design element and the corresponding page element. Then, the page elements (i.e., target page elements) whose element difference is greater than an element difference threshold can be marked in the page screenshot; when it is determined that the page similarity between the design page and the page screenshot is less than the similarity threshold, a page screenshot with the marked target page element is obtained, and at the same time, the position information of the target page element in the page screenshot can be obtained.

[0092] In the embodiment of the present disclosure, when the page similarity is less than the similarity threshold and it is determined that the page rendering file is incompatible with the browser, the page elements (i.e., the target page elements) whose element difference is greater than the element difference threshold can be marked in the page screenshot, and the position information of the target page elements in the page screenshot can be obtained.

[0093] In the disclosed embodiment, a page element whose element difference is greater than an element difference threshold is used as a target page element, and the target page element may be considered to be a page element with a compatibility problem.

[0094] In the disclosed embodiment, the position information of the page element is used to indicate the position of the page element in the page screenshot. For example, the position information of the page element is the horizontal and vertical coordinates of the page element, such as the horizontal and vertical coordinates of the text element, the horizontal and vertical coordinates of the outline of the picture element, and the horizontal and vertical coordinates of the outline of the button element.

[0095] In an exemplary embodiment, a target page element whose element difference is greater than an element difference threshold may be marked from at least one page element in the page screenshot.

[0096] In step S420, the target service code is located in the page rendering file according to the location information of the target page element.

[0097] The target service code may be a service code having compatibility issues.

[0098] In the embodiment of the present disclosure, the business code (ie, the target business code) having a compatibility problem in the business code of the page rendering file can be obtained by reverse analysis according to the location information of the target page element.

[0099] In an exemplary embodiment, locating a target business code in a page rendering file according to location information of a target page element includes: obtaining a rendering tree generated during the rendering process of a target page; determining a target rendering node in the rendering tree according to the location information of the target page element; obtaining a target cascading style sheet object model by inverse analysis according to the target rendering node; and obtaining a target cascading style sheet by inverse analysis according to the target cascading style sheet object model to determine the target business code.

[0100] In the disclosed embodiment, the rendering process of the style of the target page includes: generating a CSSOM according to a CSS code file, generating a rendering tree according to the CSSOM, and rendering the target page according to the rendering tree (ie, CSS→CSSOM→render tree→pantingtree).

[0101] In the disclosed embodiment, according to the location information of the page element with compatibility problem (i.e., the target page element), matching can be performed in the rendering tree to find the rendering node (renderer) with compatibility problem (i.e., the target rendering node), the rendering node with compatibility problem can be deconstructed into the CSSOM with compatibility problem (i.e., the target cascading style sheet object model), the CSSOM with compatibility problem can be deconstructed into the CSS with compatibility problem (i.e., the target cascading style sheet), the CSS with compatibility problem can be determined as the target business code, or the target business code can be determined by combining the target page element with compatibility and the deconstructed CSS with compatibility problem, thereby assisting the webpage developer to modify the code.

[0102] Specifically, the problematic business code (i.e., the target business code) may be due to the use of newer standard syntax, which is not promptly supported on old browsers. For example, the current browser supports CSS2 version and below. If CSS3 version code is used, incompatibility issues may occur with the current browser.

[0103] The browser compatibility detection method provided by the embodiment of the present disclosure obtains a target page element whose element difference is greater than the element difference threshold and the position information of the target page element from at least one page element when the page similarity is less than the similarity threshold. According to the position information of the target page element, on the one hand, the target business code can be automatically and accurately located in the page rendering file, thereby achieving the precision of positioning the browser compatibility detection to the business code, and improving the precision and accuracy of the browser compatibility detection; on the other hand, locating the target business code in the page rendering file can assist web page developers in modifying the business code, improve the efficiency of web page development, and improve the compatibility between the page rendering file obtained by web page development and the browser.

[0104] In some embodiments, a target rendering node is determined in a rendering tree according to location information of a target page element; a target cascading style sheet object model is obtained by inverse analysis according to the target rendering node; a target cascading style sheet is obtained by inverse analysis according to the target cascading style sheet object model to determine a target business code; the inverse analysis method can automatically and accurately locate the target business code, thereby improving the precision and accuracy of browser compatibility detection.

[0105] It should be noted that the above figures are only schematic illustrations of the processes included in the method according to the exemplary embodiments of the present disclosure, and are not intended to be limiting. It is easy to understand that the processes shown in the above figures do not indicate or limit the time sequence of these processes. In addition, it is also easy to understand that these processes can be performed synchronously or asynchronously, for example, in multiple modules.

[0106] Figure 5 is a block diagram of a browser compatibility detection device according to an exemplary embodiment. Figure 5 , the device 500 may include an acquisition module 510 , an access module 520 and a determination module 530 .

[0107] Among them, the acquisition module 510 is configured to execute acquisition of the design page and the page rendering file determined based on the design page; the access module 520 is configured to execute rendering of the page rendering file through the browser to generate a target page to obtain a page screenshot of the target page; the determination module 530 is configured to execute determination of the page similarity between the design page and the page screenshot; the determination module 530 is also configured to execute determination of the compatibility of the page rendering file with the browser based on the page similarity between the design page and the page screenshot.

[0108] In some exemplary embodiments of the present disclosure, the design page includes at least one design element, and the page screenshot includes at least one page element corresponding to the at least one design element; the determination module 530 also includes: an acquisition module, configured to execute obtaining the element difference between each design element and the corresponding page element; the acquisition module is also configured to execute obtaining the page similarity based on the element difference between each design element and the corresponding page element.

[0109] In some exemplary embodiments of the present disclosure, the device also includes: a positioning module; the acquisition module is also configured to execute, if the page similarity is less than a similarity threshold, obtaining a target page element whose element difference is greater than an element difference threshold and the position information of the target page element from the at least one page element; the positioning module is configured to execute, according to the position information of the target page element, locating the target business code in the page rendering file.

[0110] In some exemplary embodiments of the present disclosure, the apparatus 500 further includes: a reverse analysis module; the obtaining module is further configured to obtain a rendering tree generated during the rendering process of the target page; the determining module 530 is further configured to determine a target rendering node in the rendering tree according to the position information of the target page element; the reverse analysis module is configured to perform reverse analysis according to the target rendering node to obtain a target cascading style sheet object model; the reverse analysis module is further configured to perform reverse analysis according to the target cascading style sheet object model to obtain a target cascading style sheet to determine a target business code.

[0111] In some exemplary embodiments of the present disclosure, the access module is further configured to render the page rendering file respectively to generate multiple target pages by using multiple browsers with different kernels to obtain multiple page screenshots of the multiple target pages; the determination module 530 is further configured to respectively determine the page similarities between the design page and the multiple page screenshots of the multiple target pages; the determination module 530 is further configured to determine the compatibility of the page rendering file with multiple browsers with different kernels based on the page similarities between the design page and the multiple page screenshots of the multiple target pages.

[0112] In some exemplary embodiments of the present disclosure, the determination module 530 is further configured to determine that the page rendering file is incompatible with the browser if the page similarity is less than a similarity threshold; the determination module 530 is further configured to determine that the page rendering file is compatible with the browser if the page similarity is greater than or equal to the similarity threshold.

[0113] In some exemplary embodiments of the present disclosure, the device 500 also includes: a generation module; the generation module is configured to generate a cascading style sheet object model according to the page rendering file through a browser; the generation module is also configured to generate a rendering tree according to the cascading style sheet object model; the generation module is also configured to generate a target page according to the rendering tree; the acquisition module is also configured to take a screenshot of the target page through the browser to obtain a page screenshot of the target page.

[0114] Regarding the device in the above embodiment, the specific manner in which each module performs operations has been described in detail in the embodiment of the method, and will not be elaborated here.

[0115] Refer to the following Figure 6 hereinafter describes an electronic device 600 according to such an embodiment of the present disclosure. Figure 6 The electronic device 600 shown is merely an example and should not bring any limitation to the functions and scope of use of the embodiments of the present disclosure.

[0116] like Figure 6 As shown, the electronic device 600 is in the form of a general computing device. The components of the electronic device 600 may include but are not limited to: at least one processing unit 610, at least one storage unit 620, a bus 630 connecting different system components (including the storage unit 620 and the processing unit 610), and a display unit 640.

[0117] The storage unit stores program codes, which can be executed by the processing unit 610, so that the processing unit 610 performs the steps according to various exemplary embodiments of the present disclosure described in the above “Exemplary Method” section of this specification. For example, the processing unit 610 can perform the following steps: Figure 2 The steps shown in .

[0118] For example, electronic devices can achieve Figure 2 The steps shown.

[0119] The storage unit 620 may include a readable medium in the form of a volatile storage unit, such as a random access memory unit (RAM) 621 and / or a cache memory unit 622 , and may further include a read-only memory unit (ROM) 623 .

[0120] The storage unit 620 may also include a program / utility 624 having a set (at least one) of program modules 625, such program modules 625 including but not limited to: an operating system, one or more application programs, other program modules, and program data, each of which or some combination may include an implementation of a network environment.

[0121] Bus 630 may represent one or more of several types of bus structures, including a memory unit bus or memory unit controller, a peripheral bus, an accelerated graphics port, a processing unit, or a local bus using any of a variety of bus architectures.

[0122] The electronic device 600 may also communicate with one or more external devices 670 (e.g., keyboards, pointing devices, Bluetooth devices, etc.), may also communicate with one or more devices that enable a user to interact with the electronic device 600, and / or communicate with any device that enables the electronic device 600 to communicate with one or more other computing devices (e.g., routers, modems, etc.). Such communication may be performed via an input / output (I / O) interface 650. Furthermore, the electronic device 600 may also communicate with one or more networks (e.g., local area networks (LANs), wide area networks (WANs), and / or public networks, such as the Internet) via a network adapter 660. As shown, the network adapter 660 communicates with other modules of the electronic device 600 via a bus 630. It should be understood that, although not shown in the figure, other hardware and / or software modules may be used in conjunction with the electronic device 600, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems.

[0123] Through the description of the above embodiments, it is easy for those skilled in the art to understand that the example embodiments described here can be implemented by software, or by software combined with necessary hardware. Therefore, the technical solution according to the embodiment of the present disclosure can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (which can be a CD-ROM, a USB flash drive, a mobile hard disk, etc.) or on a network, and includes several instructions to enable a computing device (which can be a personal computer, a server, a terminal device, or a network device, etc.) to execute the method according to the embodiment of the present disclosure.

[0124] In an exemplary embodiment, a computer-readable storage medium including instructions is also provided, such as a memory including instructions, and the above instructions can be executed by a processor of the device to complete the above method. Optionally, the computer-readable storage medium can be a ROM, a random access memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, etc.

[0125] In an exemplary embodiment, a computer program product is also provided, including a computer program / instruction, and when the computer program / instruction is executed by a processor, the browser compatibility detection method in the above embodiment is implemented.

[0126] Those skilled in the art will readily appreciate other embodiments of the present disclosure after considering the specification and practicing the invention disclosed herein. This application is intended to cover any variations, uses, or adaptations of the present disclosure that follow the general principles of the present disclosure and include common knowledge or customary techniques in the art that are not disclosed in the present disclosure. The specification and examples are intended to be exemplary only, and the true scope and spirit of the present disclosure are indicated by the following claims.

[0127] It should be understood that the present disclosure is not limited to the exact structures that have been described above and shown in the drawings, and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims

1. A browser compatibility detection method, characterized in that: include: Obtaining a design page and a page rendering file determined according to the design page; Rendering the page rendering file to generate a target page through a browser to obtain a page screenshot of the target page; The design page includes at least one design element, and the page screenshot includes at least one page element corresponding to the at least one design element; Determining the page similarity between the design page and the page screenshot includes: Obtaining the element difference between each design element and its corresponding page element; Obtaining the page similarity according to the element difference between each design element and the corresponding page element; Determining the compatibility of the page rendering file with the browser according to the page similarity between the design page and the page screenshot; If the page similarity is less than the similarity threshold, obtaining a target page element whose element difference is greater than the element difference threshold and position information of the target page element from the at least one page element; Locating the target business code in the page rendering file according to the location information of the target page element includes: Obtaining a rendering tree generated during the rendering process of the target page; Determining a target rendering node in the rendering tree according to the position information of the target page element; Obtaining a target cascading style sheet object model according to the target rendering node inverse analysis; The target cascading style sheet is obtained by inverse analysis according to the target cascading style sheet object model to determine the target service code.

2. The browser compatibility detection method according to claim 1, characterized in that: Rendering the page rendering file to generate a target page through a browser to obtain a page screenshot of the target page includes: The page rendering file is rendered by using multiple browsers with different kernels to generate multiple target pages respectively, so as to obtain multiple page screenshots of the multiple target pages; Wherein, determining the page similarity between the design page and the page screenshot includes: respectively determining page similarities of the design page and the plurality of page screenshots of the plurality of target pages; Wherein, determining the compatibility of the target page with the browser according to the page similarity between the design page and the page screenshot includes: The compatibility of the page rendering file with multiple browsers of different kernels is determined according to page similarities between the design page and multiple page screenshots of the multiple target pages.

3. The browser compatibility detection method according to claim 1, characterized in that: Determining the compatibility of the page rendering file with the browser according to the page similarity between the design page and the page screenshot includes: If the page similarity is less than a similarity threshold, determining that the page rendering file is incompatible with the browser; If the page similarity is greater than or equal to the similarity threshold, it is determined that the page rendering file is compatible with the browser.

4. The browser compatibility detection method according to claim 1, characterized in that: Rendering the page rendering file to generate a target page through a browser to obtain a page screenshot of the target page includes: Generate a cascading style sheet object model according to the page rendering file through a browser; Generate a rendering tree according to the cascading style sheet object model; Generate a target page by rendering according to the rendering tree; A screenshot of the target page is taken through the browser to obtain a page screenshot of the target page.

5. A browser compatibility detection device, characterized in that: include: An acquisition module is configured to execute acquisition of a design page and a page rendering file determined according to the design page; An access module is configured to render the page rendering file through a browser to generate a target page, so as to obtain a page screenshot of the target page; The design page includes at least one design element, and the page screenshot includes at least one page element corresponding to the at least one design element; A determination module, configured to determine the page similarity between the design page and the page screenshot; The determination module also includes: An obtaining module is configured to obtain the element difference between each design element and the corresponding page element; and obtain the page similarity according to the element difference between each design element and the corresponding page element; The determination module is further configured to determine the compatibility of the page rendering file with the browser according to the page similarity between the design page and the page screenshot; The device also includes: a positioning module and an inverse solution module; The obtaining module is further configured to execute, if the page similarity is less than a similarity threshold, obtaining a target page element whose element difference is greater than an element difference threshold and position information of the target page element from the at least one page element; obtaining a rendering tree generated during the rendering process of the target page; The positioning module is configured to locate the target business code in the page rendering file according to the position information of the target page element; The determination module is further configured to determine a target rendering node in the rendering tree according to the position information of the target page element; The inverse analysis module is configured to perform inverse analysis according to the target rendering node to obtain a target cascading style sheet object model; and inverse analysis according to the target cascading style sheet object model to obtain a target cascading style sheet to determine a target service code.

6. The browser compatibility detection device according to claim 5, characterized in that: The access module is further configured to execute rendering of the page rendering file by using multiple browsers with different kernels to generate multiple target pages, so as to obtain multiple page screenshots of the multiple target pages; The determination module is further configured to respectively determine page similarities of the design page and the plurality of page screenshots of the plurality of target pages; The determination module is further configured to determine the compatibility of the page rendering file with multiple browsers of different kernels according to page similarities between the design page and multiple page screenshots of the multiple target pages.

7. The browser compatibility detection device according to claim 5, characterized in that: The determination module is further configured to determine that the page rendering file is incompatible with the browser if the page similarity is less than a similarity threshold; The determination module is further configured to determine that the page rendering file is compatible with the browser if the page similarity is greater than or equal to the similarity threshold.

8. The browser compatibility detection device according to claim 5, characterized in that: The device also includes: a generating module; The generating module is configured to generate a cascading style sheet object model according to the page rendering file through a browser; The generating module is further configured to generate a rendering tree according to the cascading style sheet object model; The generating module is further configured to generate a target page by rendering according to the rendering tree; The obtaining module is further configured to execute a screenshot of the target page through the browser to obtain a page screenshot of the target page.

9. An electronic device, characterized in that: include: processor; a memory for storing instructions executable by the processor; The processor is configured to execute the executable instructions to implement the browser compatibility detection method as described in any one of claims 1 to 4.

10. A computer-readable storage medium, when instructions in the computer-readable storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute the browser compatibility detection method as described in any one of claims 1 to 4.

11. A computer program product, comprising a computer program, characterized in that When the computer program is executed by a processor, the browser compatibility detection method according to any one of claims 1 to 4 is implemented.

Images