Browser page compatibility test system based on DOM tree

Abstract

The embodiment of the invention discloses a browser page compatibility test system based on a DOM (Document Object Model) tree, which comprises an acquisition module for acquiring webpage code resources of a first webpage, and a DOM tree construction module for constructing a plurality of DOM trees of the first webpage by utilizing the webpage code resources in different target browsers, the DOM tree feature extraction module is used for extracting features of a plurality of DOM trees of the first webpage through a decision tree algorithm to generate a plurality of first features, and the compatibility difference analysis module is used for comparing the plurality of first features through a data difference comparison algorithm to form a first distinguishing feature and analyzing the first distinguishing feature to obtain a first result. Through automatic DOM tree construction, feature extraction and comparative analysis, the workload of manual testing is greatly reduced, compatibility testing of a large number of webpages on various browsers can be rapidly completed, and therefore the testing efficiency is improved.

Description

Technical Field

[0001] Multiple embodiments of this specification relate to the technical field of page compatibility testing, and specifically to a browser page compatibility testing system based on a DOM tree. Background Art

[0002] With the rapid development of Internet technology, web applications are becoming increasingly complex and diversified. When different browsers parse and render web pages, due to differences in their kernel, version and implementation details, the same web page often presents inconsistent effects on different browsers. This is the so-called browser compatibility issue.

[0003] Traditional browser compatibility testing mainly relies on manual browsing of web pages on various browsers to observe whether the page display is correct and whether the functions are normal. This method is extremely inefficient and easy to miss problems. There are also some automated testing tools based on simple rule matching, which cannot deeply analyze the complex relationship between web page structure and elements, and it is difficult to accurately detect deep-seated compatibility issues. For the core structure of the web page, the Document Object Model tree, its construction and parsing are different in different browsers, but the existing technology has not fully utilized the characteristics of the DOM tree to perform comprehensive and efficient browser compatibility testing and analysis. Summary of the invention

[0004] In a first aspect, an embodiment of the present specification provides a browser page compatibility testing system based on a DOM tree, comprising:

[0005] An acquisition module is used to acquire webpage code resources of the first webpage;

[0006] A DOM tree construction module, wherein the DOM tree construction module uses the web page code resources in different target browsers to construct DOM trees of several first web pages;

[0007] A DOM tree feature extraction module, wherein the DOM tree feature extraction module extracts features of the DOM trees of the first web pages through a decision tree algorithm to generate a plurality of first features;

[0008] a compatibility difference analysis module, wherein the compatibility difference analysis module compares a plurality of first features using a data difference comparison algorithm to form a first distinguishing feature, and analyzes the first distinguishing feature to obtain a first result;

[0009] The compatibility difference analysis module compares the DOM trees of the first web pages using a Diff algorithm to generate a second distinguishing feature, and analyzes the second distinguishing feature to obtain a second result;

[0010] The report generation module transmits the first result and the second result to the report generation module, where they are mutually verified using the comparative analysis method to generate a first compatibility issue report.

[0011] Furthermore, it further includes a target web page comparison module. The target web page comparison module generates several image blocks Q for the target web pages in different browser environments through a neural network model and an image recognition module.

[0012] The image block Q includes several collections of image blocks P.

[0013] Several collections of image blocks P include several elements.

[0014] Select the collection of image blocks P with the largest number of elements among them as the reference collection of image blocks.

[0015] Compare the elements of the reference collection of image blocks with the elements of the remaining collections of image blocks P respectively to corroborate the first compatibility issue report.

[0016] Furthermore, when the collection of reference image blocks contains the elements of the compared collection of image blocks P, mark the missing parts of the elements of that collection of image blocks P. Mutually verify the marking result, the first result, and the second result using the comparative analysis method, and modify the first compatibility issue report according to the verification result.

[0017] When the collection of reference image blocks does not completely contain the compared collection of image blocks P, supplement the extra parts of the elements in the compared collection of image blocks P into the collection of reference image blocks to form an accurate collection of image blocks.

[0018] Compare the elements of the collection of reference image blocks with the elements of the remaining compared collections of image blocks P, mark the missing parts of the elements of the collection of image blocks P again, and transmit the marking result to the first compatibility issue report to refine the first compatibility issue report.

[0019] Furthermore, associate the accurate collection of image blocks with the corresponding DOM tree features and simulate to generate a second web page.

[0020] Construct the DOM tree of the second web page through the DOM tree construction module, extract the features of the DOM tree of the second web page through the DOM tree feature extraction module, and generate a second feature.

[0021] Taking the DOM tree of the second web page as a reference, compare the DOM trees of several first web pages respectively through the compatibility difference analysis module to form a third difference feature, and analyze the third difference feature to obtain a third result.

[0022] Based on the second feature, the compatibility difference analysis module compares several first features respectively to form a fourth distinguishing feature, and analyzes the fourth distinguishing feature to obtain a fourth result;

[0023] Generate a second compatibility issue report according to the third result and the fourth result, and the second compatibility issue report is used to optimize the first compatibility issue report.

[0024] Furthermore, it also includes a simulation module, which is used to click on the elements in a set of several image blocks P on the target web page and generate at least three web page changes;

[0025] The three web page changes include:

[0026] The first web page change has no response;

[0027] The elements in the set of image blocks P on the first web page increase;

[0028] The first web page jumps to generate a third web page;

[0029] Import at least one web page change of several different browser pages into the web page comparison module, and compare the web page changes of several different browser pages through the target web page comparison module, so as to reduce the error tolerance rate of the first compatibility issue report and the second compatibility issue report.

[0030] The generation system obtains the elements and source code of image block Q, imports the elements and source code into the basic program, and generates an adjustment program;

[0031] The adjustment program enters the target web page to obtain the elements in a set of several image blocks P.

[0032] Furthermore, extract the features of the DOM trees of several third web pages through the DOM tree feature extraction module, and generate several third features;

[0033] Compare the differences between different web page DOM trees through the compatibility difference analysis module to form a fifth distinguishing feature, and analyze the fifth distinguishing feature to obtain a fifth result;

[0034] Compare several third features through the compatibility difference analysis module to generate a sixth distinguishing feature, and analyze the sixth distinguishing feature to obtain a sixth result;

[0035] Generate a third compatibility issue report according to the fifth result and the sixth result, and the third compatibility issue report is used to correct the first compatibility issue report.

[0036] Furthermore, the elements in the set of several image blocks P include page layout, color matching of page elements, font styles, sizes, colors, and icon styles.

[0037] Further, the target web page comparison module reads the page loading speed data, response time data, user concurrency performance data, and resource utilization rate data.

[0038] The page loading speed data, response time data, user concurrency performance data, and resource utilization rate data are imported into the compatibility difference analysis module to assist in completing the third compatibility issue report.

[0039] Further, the web page code resources include HTML, CSS, and JavaScript.

[0040] The compatibility difference analysis module selects the adapted web page code resources to generate the second web page and the third web page.

[0041] The beneficial effects brought by the technical solutions provided in some embodiments of this specification at least include:

[0042] In multiple embodiments of this specification, a browser page compatibility testing system based on the DOM tree greatly reduces the workload of manual testing through automated DOM tree construction, feature extraction, and comparative analysis, and can quickly complete the compatibility testing of a large number of web pages on multiple browsers, thereby improving the testing efficiency.

[0043] By deeply analyzing the characteristics of each layer of the DOM tree, it is possible to discover deep compatibility problems that are difficult to detect by traditional testing methods, providing more comprehensive and accurate compatibility problem feedback to web developers.

[0044] The generated report details all aspects of the compatibility problems, facilitating web developers to quickly locate and solve problems, saving development and debugging time, and improving the quality and user experience of the web page.

[0045] By forming a collection of benchmark image blocks to determine that the collection of benchmark image blocks has the highest compatibility among all browser pages, and then using the collection of benchmark image blocks to compare the remaining browser pages respectively, it is possible to more quickly and efficiently determine which browser pages have poor compatibility. The collection of benchmark image blocks assists the compatibility difference analysis module to further optimize the difference record list, enabling the report generation block to generate a more accurate compatibility problem report.

[0046] The DOM tree construction block and the DOM tree feature extraction block extract the features of the DOM tree of the third web page and analyze them through the compatibility difference analysis module to verify the accuracy of the first compatibility issue report and the second compatibility issue report, thereby reducing the error tolerance rate and improving the accuracy of the compatibility issue report.

[0047] Other features and advantages of multiple embodiments of this specification will be further revealed in the following detailed implementation manners and the accompanying drawings. Description of the Drawings

[0048] To more clearly illustrate the technical solutions in the embodiments of this specification, the accompanying drawings required for the embodiments will be briefly introduced below. Obviously, the accompanying drawings in the following description are only some embodiments of this specification. For those of ordinary skill in the art, without creative efforts, other accompanying drawings can be obtained based on these drawings.

[0049] Figure 1 Schematic diagram of the page compatibility test system architecture provided for the embodiments of this specification.

[0050] Figure 2 Schematic diagram of the page compatibility test system process provided for the embodiments of this specification. Detailed Implementation Manner

[0051] The technical solutions of the embodiments of this specification will be explained and illustrated below with reference to the accompanying drawings of the embodiments of this specification. However, the following embodiments are only the preferred embodiments of this specification, not all of them. Based on the embodiments in the implementation manner, other embodiments obtained by those of ordinary skill in the art without creative efforts fall within the protection scope of this specification.

[0052] The terms "first", "second", "third", etc. in the specification, claims and the above accompanying drawings of this specification are used to distinguish different objects, rather than to describe a specific order. In addition, the terms "include" and "have" and any variations thereof are intended to cover non-exclusive inclusion. For example, a process, method, system, product or device that includes a series of steps or units is not limited to the listed steps or units, but optionally further includes steps or units not listed, or optionally further includes other steps or units inherent to these processes, methods, products or devices.

[0053] In the following description, the appearance of terms such as "inner", "outer", "upper", "lower", "left", "right", etc. indicating orientation or positional relationship is only for the convenience of describing the embodiments and simplifying the description, rather than indicating or implying that the device or element referred to must have a specific orientation, be constructed and operated in a specific orientation, and therefore cannot be understood as a limitation of this specification.

[0054] The data involved in this application are all information and data authorized by users or fully authorized by all parties, and the collection of relevant data complies with the relevant laws, regulations and standards of relevant countries and regions.

[0055] Embodiment 1

[0056] Please refer toFigure 1 , a browser page compatibility testing system based on the DOM tree, includes:

[0057] An acquisition module to acquire the web page code resources of the first web page;

[0058] A DOM tree construction module that constructs several DOM trees of the first web page by using the web page code resources in different target browsers;

[0059] A DOM tree feature extraction module that extracts the features of several DOM trees of the first web page through a decision tree algorithm to generate several first features;

[0060] A compatibility difference analysis module that compares several first features by using a data difference comparison algorithm to form a first difference feature and analyzes the first difference feature to obtain a first result;

[0061] The compatibility difference analysis module compares several DOM trees of the first web page by using the Diff algorithm to generate a second difference feature and analyzes the second difference feature to obtain a second result;

[0062] A report generation module that transmits the first result and the second result to the report generation module to mutually confirm by using a comparative analysis method and generates a first compatibility problem report.

[0063] The browser application environment includes but is not limited to HarmonyOS, Android, iOS, KaiOS, Ubuntu Touch, Windows Phone, etc.;

[0064] By using a browser engine or a dedicated DOM parsing library, in different target browser environments, including Chrome, Firefox, Safari, etc., construct the DOM tree of the web page by building the DOM tree of the web page in the above browsers respectively;

[0065] Specifically, use the Scrapy framework of Python as a web crawler tool, configure the URL list of the target web page, for each URL, use the Selenium library combined with the drivers of different browsers, the drivers include Chrome Driver, GeckoDriver, load the web page in the corresponding browser environment, obtain the DOM tree structure after the web page is loaded through the API provided by the browser, and save it in JSON format, and record the error information and time during the process of building the DOM tree, so as to complete the establishment of the DOM tree of the first web page;

[0066] It should be particularly noted that record the parsing errors, parsing time, etc. that occur during the process of building the DOM tree;

[0067] Then, by writing a Python script, using the DOM parsing library, BeautifulSoup, to read the saved JSON format DOM tree data, for each node, extract its various attributes, convert the node structure relationship into data structures such as parent-child node ID mapping for storage, and for JavaScript-related features, by analyzing the JavaScript code in the web page, with the help of the abstract syntax tree parsing tool, extract event binding, node dynamic modification and other information, and associate it with the DOM tree nodes, so as to confirm the first feature of the DOM tree of each web page;

[0068] Preferably, the DOM tree features are constructed into a tree through a decision tree algorithm, so that the features are efficiently divided at each node, and finally high-precision classification is achieved, so as to confirm the first feature of the DOM tree of each web page, wherein the decision tree algorithm is: ;

[0069] A) is the first node data of the feature value;

[0070] D is the second node data of the feature value;

[0071] The third node data for feature value;

[0072] It is the node data directory and does not participate in the operation;

[0073] It should be noted that frac is a division operation, which is used to calculate the web page node data that supports each other, that is, the connection point node data. For example, assuming that the DOM parsing library obtains the node data 6, 2 and 3, the formula is 2=6 / 3, so 6 and 2 are selected from a large amount of node data, and 3 is found in a large amount of data through the calculation formula to determine the value, and quickly classify the data that meets the same category;

[0074] The first feature includes but is not limited to node attribute features, element tag name, class name, ID, style attributes, and node structure features, such as the hierarchical relationship of nodes, the number of sibling nodes, and the number of child nodes;

[0075] Furthermore, features related to JavaScript interaction can be extracted, such as event binding, node dynamic modification, etc. For example, for a button element, features such as its tag name "button" and class name "btn-primary" can be extracted to determine whether the click event is bound.

[0076] Further, by designing a reasonable data difference comparison algorithm, the first feature of the DOM tree of each first web page is compared to generate a first result, so as to find out the inconsistencies in node attributes, structure, JavaScript interaction, etc.;

[0077] Among them, the data difference comparison algorithm formula is as follows:

[0078] ;

[0079] is the data value of the feature node;

[0080] mu is the mean vector of the feature;

[0081] TS is the covariance matrix;

[0082] is the inverse matrix of the covariance matrix;

[0083] sqrt is the square root;

[0084] Among them, mu = ( + + + + ) / n;

[0085] It should be noted that when calculating the numerical values of several feature node data values, when the numerical results of the nodes being compared differ greatly or are different, it is determined that there is a compatibility problem with this node in the browser page compatibility, and thus the first distinguishing feature is obtained.

[0086] For example, if in the DOM tree of the Chrome browser, a certain image element has a specific "alt" attribute value, while in the DOM tree of the Firefox browser this attribute value is missing or different, it is judged as a compatibility problem. For the difference in node structure, if the number of child nodes of a certain element in the Safari browser is more or less than that in other browsers, it also needs to be marked as a potential compatibility problem;

[0087] Subsequently, the compatibility difference analysis module uses the Diff algorithm to compare the DOM trees of several first web pages, generates the second distinguishing feature, analyzes the second distinguishing feature to obtain the second result. Comparing the features of the DOM tree is in the microscopic state, while comparing the DOM trees of different web pages is in the macroscopic situation, so as to mutually confirm the two and reduce the occurrence of omissions, thereby improving the accuracy of the overall compatibility test;

[0088] Among them, the calculation method of the Diff algorithm is as follows:

[0089] Given each distinguishing feature as different strings (A = a_1a_2...a_n), (B = b_1b_2...b_m), find their longest common subsequence (LCS), and set the longest common subsequence (LCS) as ;

[0090] ;

[0091] It should be noted that, for example, when selecting a DOM tree as the basis, the tree branches of this DOM tree include A, B, C, D, and E, and the tree branches of the second DOM tree include A, C, D, F, and G. Therefore, A, C, and D are common and will be deleted. Subsequently, the remaining tree branches of the second DOM tree will be changed to the tree branches of the first DOM tree. Therefore, an insertion or replacement step is required to make the tree branches of the two DOM trees the same. Mark the insertion or replacement step in this way to complete the overall comparison of the DOM tree and quickly obtain the differences between the DOM trees, thereby obtaining the second distinguishing feature;

[0092] It should be noted that by designing Python functions to compare the DOM tree feature data generated by different browsers, for node attributes, use the dictionary comparison method to find nodes with different attribute values. For node structures, find the inconsistent parts by comparing the ID mapping relationships of parent and child nodes. For JavaScript interaction features, check the differences in the execution results of event binding and dynamic modification operations in different browsers, and record all the findings in a difference record list to form the first compatibility issue report;

[0093] Furthermore, the first compatibility issue report includes the specific locations where the problems occur, and the specific locations include the web page URL and the node path in the DOM tree;

[0094] The browsers involved, and the problem types include node attribute differences and structural differences;

[0095] And the possible impacts, which include abnormal page display and inability to use functions properly;

[0096] For example, the report points out that in the web page "www.example.com", the "src" attribute value of the image element with the path "html / body / div[2] / img" is inconsistent in the Firefox browser and the Chrome browser, which may cause the image to not be displayed correctly;

[0097] It should be noted that according to the difference record list, use a Python report generation library (such as ReportLab) to generate the first compatibility issue report in PDF format. The first compatibility issue report is classified according to the web page URL, and details the compatibility issues of each web page among different browsers, including problem descriptions, node paths, browser information involved, and attaches relevant screenshots to visually display the problems.

[0098] It also includes a target web page comparison module. The target web page comparison module generates a number of image blocks Q for the target web pages in different browser environments through a neural network model and an image recognition module;

[0099] The image block Q includes a number of collections of image blocks P;

[0100] The number of collections of a number of image blocks P includes a number of elements;

[0101] Select the collection of image blocks P with the largest number of elements among them as the reference collection of image blocks;

[0102] Compare the elements of the reference collection of image blocks with the elements of the remaining collections of image blocks P respectively to corroborate the first compatibility problem report.

[0103] For the first browser, the target web page comparison module scans the first web page of the first browser;

[0104] For the second browser, the target web page comparison module scans the first web page of the second browser;

[0105] For the third browser, the target web page comparison module scans the first web page of the third browser;

[0106] For the Nth browser, the target web page comparison module scans the first web page of the Nth browser;

[0107] By scanning the first web pages of a number of browsers, all the elements on the first web page are boxed to form image blocks P, and a number of copies of the image blocks P are saved and recorded in the background;

[0108] Among them, the elements of the first collection of image blocks P include structure, and the structure includes text, images, videos, and links;

[0109] The elements of the second collection of image blocks P include presentation, and the presentation includes visual elements such as the font, color, layout, and spacing of the web page;

[0110] The elements of the third collection of image blocks P include behavior, and the behavior includes clicking buttons, filling out forms, and loading content, such as the header area, advertisement pictures, main content area, and footer;

[0111] Through the target web page module, several image blocks Q in different browser environments are captured using a neural network model and an image recognition module. The image recognition module records several image blocks Q in different browser environments, and uses the neural network model to identify and classify several image blocks Q and mark the page attribution of their respective browser environments. The image block P collection with the largest number in the selected image block Q is used as the benchmark image block collection, and the image block P collections of the remaining respective browser environment pages are compared with this benchmark image block collection to corroborate the first compatibility issue report. When there are compatibility issues not appearing in the first compatibility issue report, the image block P collection with problems is associated with the elements of the browser page to determine the DOM tree of the browser page. In this way, through the compatibility difference analysis module, further comparison and analysis are carried out, thereby further optimizing the first compatibility issue report and improving its accuracy;

[0112] When the collection of benchmark image blocks contains the elements of the compared image block P collection, mark the missing part of the elements of the image block P collection. The marking result, the first result, and the second result are mutually corroborated using the comparative analysis method, and the first compatibility issue report is modified according to the corroboration result;

[0113] When the collection of benchmark image blocks does not completely contain the compared image block P collection, the extra part of the elements in the compared image block P collection is supplemented into the benchmark image block collection to form a precise image block collection;

[0114] Compare the elements of the benchmark image block collection with the elements of the remaining compared image block P collections, mark the missing part of the elements of the image block P collection again, and transmit the marking result to the first compatibility issue report to refine the first compatibility issue report.

[0115] By forming a benchmark image block collection, it is determined that the precise image block collection has the highest compatibility among all browser pages. Using this precise image block collection to compare the remaining browser pages respectively, it is possible to more quickly and efficiently determine which browser pages have poor compatibility problems, and further optimize the first compatibility issue report through the precise image block-assisted compatibility difference analysis module, so that the report generation block can generate the first compatibility issue report more precisely.

[0116] Embodiment 2

[0117] This embodiment is an improvement made on the basis of Embodiment 1. Specifically, please refer to Figure 1 , associate the precise image block collection with the corresponding DOM tree features and simulate to generate a second web page;

[0118] Through the program that associates the elements in the benchmark image block collection with the corresponding DOM tree and the elements, generate web page code through AI and import it into a virtual browser to obtain the generated second web page;

[0119] Construct the DOM tree of the second web page through the DOM tree construction module, extract the features of the DOM tree of the second web page through the DOM tree feature extraction module, and generate the second feature;

[0120] Taking the DOM tree of the second web page as a reference, compare the DOM trees of several first web pages respectively through the compatibility difference analysis module to form the third difference feature, and analyze the third difference feature to obtain the third result;

[0121] Taking the second feature as a reference, compare several first features respectively through the compatibility difference analysis module to form the fourth difference feature, and analyze the fourth difference feature to obtain the fourth result;

[0122] Generate the second compatibility problem report according to the third result and the fourth result, and the second compatibility problem report is used to optimize the first compatibility problem report.

[0123] Use AI to associate the elements in the benchmark image block collection with the corresponding program web page code of the DOM tree and supplement them into the web page code associated with the original benchmark image block collection, so as to generate new browser page code, thus fixing the original browser page compatibility problem, and import the new browser page code into the virtual browser to obtain the second web page. Taking the second web page as a reference, construct the DOM tree of the second web page, the module extracts the features of the DOM tree of the second web page and generates the second feature, compare the second feature with the first feature, so as to know whether there are other compatibility problems with the first feature, and obtain the fourth result in this way. Compare the DOM trees of the remaining first web pages with the DOM tree of the second web page in turn, generate and analyze the third difference feature to generate the third result, and generate the second compatibility problem report from the third result and the fourth result. The second compatibility problem report is used to optimize the first compatibility problem report;

[0124] Compared with the first compatibility problem report, the second compatibility problem report further improves all elements. Therefore, when all browser pages in Embodiment 1 have different compatibility problems, there is no accurate basis as the target of the compatibility difference analysis module, and only all contents can be analyzed. For example, when there are 10 browser environments that need to be compared with each other 45 times, when there are more browser environments, a large amount of time is required for analysis and comparison. However, by collecting all elements as a benchmark through the benchmark image block collection and forming the second web page, the second web page covers all browser page elements. Therefore, only the first web pages of 10 browser environments need to be compared with the second web page in turn, and only 10 comparisons are needed. In this way, the compatibility difference analysis module can quickly analyze and compare, thus improving the compatibility test efficiency.

[0125] It also includes a simulation module, and the simulation module is used to click on the elements in a collection of several image blocks P on the target web page and generate at least three web page changes;

[0126] The three types of web page changes include:

[0127] The first web page change has no response;

[0128] The elements of the image block P collection on the first web page increase;

[0129] The first web page jumps to generate the third web page;

[0130] Import at least one web page change of several different browser pages into the web page comparison module. Compare the web page changes of several different browser pages through the target web page comparison module, so as to reduce the error tolerance rate of the first compatibility problem report and the second compatibility problem report;

[0131] The simulation module includes a basic program and a generation system;

[0132] The generation system obtains the elements and source code of the image block Q, imports the elements and source code into the basic program, and generates an adjustment program;

[0133] The adjustment program enters the target web page to obtain the elements in several image block P collections.

[0134] Obtain the elements and source code of the image block Q through the generation system to determine the structure, presentation, and behavior of the page, so that the generation system obtains a simulation path, which is the adjustment program. Run the adjustment program to automatically simulate clicking on all elements on the page, so as to determine whether there are compatibility problems on the first web page. Further corroborate the second compatibility problem report through the detection results of the simulation module, so as to detect the content not mentioned in the second compatibility problem report, thereby further improving the accuracy and precision of the detection;

[0135] It should be noted that through the basic program and generation system of the simulation module, pages on any browser can be quickly detected.

[0136] Extract the features of the DOM trees of several third web pages through the DOM tree feature extraction module, and generate several third features;

[0137] Compare the differences between different web page DOM trees through the compatibility difference analysis module to form a fifth difference feature, and analyze the fifth difference feature to obtain a fifth result;

[0138] Compare several third features through the compatibility difference analysis module to generate a sixth difference feature, and analyze the sixth difference feature to obtain a sixth result;

[0139] Generate a third compatibility problem report according to the fifth result and the sixth result. The third compatibility problem report is used to correct the first compatibility problem report.

[0140] When the jump link of the first web page is clicked, a third web page will be generated, and the features of the DOM tree of the third web page will be extracted through the DOM tree construction block and the DOM tree feature extraction block, and analyzed through the compatibility difference analysis module, so as to verify the accuracy of the first compatibility problem report and the second compatibility problem report, thereby reducing the fault tolerance rate and improving the accuracy of the compatibility problem report.

[0141] It should be noted that the elements of the set of several image blocks P include page layout, color matching of page elements, font style, size, color and icon style;

[0142] The target web page comparison module reads the page loading speed data, response time data, user concurrent performance data and resource usage data;

[0143] The page loading speed data, response time data, user concurrent performance data and resource utilization data are imported into the compatibility difference analysis module to assist in completing the third compatibility problem report.

[0144] The above are only preferred embodiments of the present invention. It should be pointed out that, for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the technical principles of the present invention. These improvements and modifications should also be regarded as within the scope of protection of the present invention.

Claims

1. A browser page compatibility testing system based on DOM tree, characterized in that: include: An acquisition module is used to acquire webpage code resources of the first webpage; A DOM tree construction module, wherein the DOM tree construction module uses the web page code resources in different target browsers to construct DOM trees of several first web pages; A DOM tree feature extraction module, wherein the DOM tree feature extraction module extracts features of the DOM trees of the first web pages through a decision tree algorithm to generate a plurality of first features; a compatibility difference analysis module, wherein the compatibility difference analysis module compares a plurality of first features using a data difference comparison algorithm to form a first distinguishing feature, and analyzes the first distinguishing feature to obtain a first result; The compatibility difference analysis module compares the DOM trees of the first web pages using a Diff algorithm to generate a second distinguishing feature, and analyzes the second distinguishing feature to obtain a second result; The report generation module transmits the first result and the second result to the report generation module for mutual verification by comparative analysis to generate a first compatibility problem report.

2. The browser page compatibility testing system based on DOM tree according to claim 1, characterized in that: It also includes a target web page comparison module, which selects target web pages in different browser environments through a neural network model and an image recognition module to generate a number of image blocks Q; The image block Q includes a collection of several image blocks P; The set of several image blocks P includes several elements; Selecting one of the image block sets P with the largest number of elements as a reference image block set; The elements of the reference image block set are compared with the elements of the remaining image block sets P respectively, so as to support the first compatibility problem report.

3. The browser page compatibility testing system based on DOM tree according to claim 2, characterized in that: When the set of reference image blocks contains elements of the set of compared image blocks P, mark the missing parts of the set of image blocks P, verify the marked result, the first result and the second result with each other by using a comparative analysis method, and modify the first compatibility problem report according to the verification result; When the reference image block collection does not completely contain the comparison image block collection P, the redundant parts of the elements in the comparison image block collection P are added to the reference image block collection to form a precise image block collection; The elements of the reference image block set are compared with the elements of the remaining comparison image block sets P, the missing parts of the elements of the image block set P are marked again and the marking results are transmitted to the first compatibility problem report to refine the first compatibility problem report.

4. The browser page compatibility testing system based on DOM tree according to claim 3 is characterized in that: Associating the precise image block collection with corresponding DOM tree features and simulating generation of a second web page; Constructing a DOM tree of the second webpage through the DOM tree construction module, extracting features of the DOM tree of the second webpage through the DOM tree feature extraction module, and generating a second feature; Taking the DOM tree of the second webpage as a reference, the compatibility difference analysis module compares the DOM trees of several first webpages respectively to form a third distinguishing feature, and analyzes the third distinguishing feature to obtain a third result; Taking the second feature as a reference, using the compatibility difference analysis module to respectively compare a plurality of first features to form a fourth distinguishing feature, and analyzing the fourth distinguishing feature to obtain a fourth result; A second compatibility problem report is generated according to the third result and the fourth result, and the second compatibility problem report is used to optimize the first compatibility problem report.

5. The browser page compatibility testing system based on DOM tree according to claim 4 is characterized in that: It also includes a simulation module, the simulation module is used to click on the elements in the set of several image blocks P of the target web page and generate at least three web page changes; Three of the web page variations include: The first web page changes without any response; The image block P collection element of the first webpage is increased; The first web page jumps to generate a third web page; At least one web page change of several different browser pages is imported into the web page comparison module, and the web page changes of several different browser pages are compared through the target web page comparison module, so as to reduce the fault tolerance rate of the first compatibility problem report and the second compatibility problem report.

6. The browser page compatibility testing system based on DOM tree according to claim 5, characterized in that: The simulation module includes a basic program and a generation system; The generation system obtains elements and source code of the image block Q, imports the elements and source code into the basic program, and generates an adjustment program; The adjustment program enters the target web page to obtain elements in a collection of several image blocks P.

7. The browser page compatibility testing system based on DOM tree according to claim 5, characterized in that: Extracting features of the DOM trees of a plurality of third web pages through the DOM tree feature extraction module, and generating a plurality of third features; Comparing the differences between the DOM trees of different web pages by the compatibility difference analysis module to form a fifth distinguishing feature, and analyzing the fifth distinguishing feature to obtain a fifth result; Comparing the plurality of third features by the compatibility difference analysis module to generate a sixth distinguishing feature, and analyzing the sixth distinguishing feature to obtain a sixth result; A third compatibility problem report is generated according to the fifth result and the sixth result, and the third compatibility problem report is used to correct the first compatibility problem report.

8. The browser page compatibility testing system based on DOM tree according to claim 3, characterized in that: The image block P collection elements include page layout, color matching of page elements, font style, size, color and icon style.

9. The browser page compatibility testing system based on DOM tree according to claim 2, characterized in that: The target web page comparison module reads the page loading speed data, response time data, user concurrent performance data and resource usage rate data; The page's loading speed data, response time data, user concurrent performance data, and resource usage rate data are imported into the compatibility difference analysis module to assist in completing the third compatibility problem report.

10. The browser page compatibility testing system based on DOM tree according to claim 5, characterized in that: The web page code resources include HTML, CSS and JavaScript; The compatibility difference analysis module selects the compatible web page code resources to generate the second web page and the third web page.

Images