A browser page compatibility testing system based on the DOM tree

Abstract

An embodiment of this specification discloses a browser page compatibility testing system based on a DOM tree, including an acquisition module that acquires the web page code resources of a first web page, a DOM tree construction module that constructs DOM trees of a plurality of first web pages by using the web page code resources in different target browsers, a DOM tree feature extraction module that extracts the features of the DOM trees of the plurality of first web pages through a decision tree algorithm to generate a plurality of first features, and a compatibility difference analysis module that compares the plurality of 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. Through automated DOM tree construction, feature extraction, comparison, and analysis, the present invention greatly reduces the workload of manual testing, can quickly complete the compatibility testing of a large number of web pages on multiple browsers, thereby improving the testing efficiency.

Description

Technical Field

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

[0002] With the rapid development of Internet technology, web applications have become increasingly complex and diverse. When different browsers parse and render web pages, due to differences in their kernels, versions, and implementation details, the same web page often presents inconsistent effects on different browsers, which is the so-called browser compatibility problem.

[0003] Traditional browser compatibility testing mainly relies on manually browsing 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 prone to missing problems. There are also some automated testing tools based on simple rule matching that cannot deeply analyze the complex relationships between web page structures and elements, and it is difficult to accurately detect deep compatibility problems. For the core structure of web pages, the Document Object Model Tree (DOM tree), there are differences in its construction and parsing in different browsers, but the existing technologies have not fully utilized the characteristics of the DOM tree for comprehensive and efficient browser compatibility testing and analysis. Summary of the Invention

[0004] In a first aspect, embodiments of this specification provide a browser page compatibility testing system based on the DOM tree, including:

[0005] An acquisition module that acquires the web page code resources of a first web page;

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

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

[0008] A compatibility difference analysis module that uses a data difference comparison algorithm to compare several first features to form a first difference feature and analyzes the first difference feature to obtain a first result;

[0009] The compatibility difference analysis module uses the Diff algorithm to compare the DOM trees of several first web pages to generate a second difference feature and analyzes the second difference 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] Further, it also includes a target web page comparison module. The target web page comparison module generates a number of image blocks Q for target web pages in different browser environments through a neural network model and an image recognition module.

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

[0013] A number of collections of image blocks P include a number of 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] Further, when the reference collection of 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 reference collection of 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 reference collection of image blocks to form an accurate collection of image blocks.

[0018] Compare the elements of the reference collection of 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] Further, 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 a number of 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 respectively compares a number of first features 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 further includes a simulation module, and the simulation module is used to click on elements in a set P of a number of image blocks 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 P of image blocks 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 the 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 P of a number of image blocks.

[0032] Furthermore, extract the features of the DOM tree of several third web pages through the DOM tree feature extraction module, and generate a number of 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 a number of 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 P of a number of image blocks include page layout, color matching of page elements, font styles, sizes, colors, and icon styles.

[0037] Furthermore, 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 fed into the compatibility difference analysis module to assist in completing the third compatibility issue report.

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

[0040] The compatibility difference analysis module selects the appropriate 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 pages.

[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, thereby verifying the accuracy of the first compatibility issue report and the second compatibility issue report, 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 description 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 testing system architecture provided for the embodiments of this specification.

[0050] Figure 2 Schematic diagram of the page compatibility testing system process provided for the embodiments of this specification. Detailed Description of the Embodiments

[0051] The technical solutions in the embodiments of this specification will be explained and described 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 all 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, terms such as "inner", "outer", "upper", "lower", "left", "right", etc. indicating orientation or positional relationship are 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 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 that acquires the web page code resources of the first web page;

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

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

[0060] A compatibility difference analysis module that compares several first features 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 uses the Diff algorithm to compare the DOM trees of several first web pages 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 and uses a comparative analysis method to corroborate each other to generate 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] Using a browser engine or a dedicated DOM parsing library, in different target browser environments, including Chrome, Firefox, Safari, etc., by constructing the DOM tree of this 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 and 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. At the same time, record the error information and time during the process of constructing the DOM tree, so as to complete the establishment of the DOM tree of the first web page;

[0066] It should be noted specifically that the parsing errors, parsing time, etc. that occur during the process of constructing the DOM tree are recorded;

[0067] Subsequently, by writing a Python script and using the DOM parsing library, BeautifulSoup is used to read the saved DOM tree data in JSON format. For each node, various attributes are extracted, and the node structure relationship is transformed into data structures such as parent-child node ID mappings for storage. For JavaScript-related features, by analyzing the JavaScript code in the web page and using an abstract syntax tree parsing tool, information such as event bindings and node dynamic modifications is extracted and associated with the DOM tree nodes to confirm the first feature of the DOM tree of each web page;

[0068] Preferably, a decision tree algorithm is used to construct a tree from the DOM tree features, enabling efficient partitioning of the features at each node and ultimately achieving high-precision classification to confirm the first feature of the DOM tree of each web page. The decision tree algorithm is as follows: ;

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

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

[0071] is the data of the third node for feature values;

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

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

[0074] The first feature includes but is not limited to node attribute features, element tag names, class names, IDs, 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 also be extracted, such as event binding situations and node dynamic modifications. For example, for a button element, features such as whether its tag name "button" and class name "btn-primary" are bound to click events are extracted;

[0076] Furthermore, by designing a reasonable data difference comparison algorithm to compare the first features of the DOM tree of each first web page, a first result is generated to find the inconsistencies in node attributes, structures, and JavaScript interactions;

[0077] 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] where 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 node structure difference, 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 specifically that, for example, 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 in common and are deleted. Subsequently, the remaining tree branches of the second DOM tree are 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 trees and quickly obtain the differences between the DOM trees, thereby obtaining the second distinguishing feature;

[0092] It should be noted specifically 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 the 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 discoveries in the 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 specifically 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 for intuitive display of the problems.

[0098] It also 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;

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

[0100] Several collections of image blocks P include several elements;

[0101] Select the collection of image blocks P with the largest number of elements 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 issue 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 several browsers, all the elements on the first web page are boxed to form image blocks P, and several copies of 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 set of image blocks P with the largest number of image blocks Q is selected as the benchmark image block set, and the sets of image blocks P of the remaining respective browser environment pages are compared with this benchmark image block set to corroborate the first compatibility problem report. When compatibility problems not appearing in the first compatibility problem report occur, the set of image blocks P 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 problem report and improving its accuracy;

[0112] When the set of benchmark image blocks contains the elements of the compared set of image blocks P, mark the missing parts of the elements of the set of image blocks P. Use the comparison analysis method to mutually corroborate the marking result, the first result, and the second result, and modify the first compatibility problem report according to the corroboration result;

[0113] When the set of benchmark image blocks does not completely contain the compared set of image blocks P, supplement the redundant parts of the elements in the compared set of image blocks P into the set of benchmark image blocks to form a precise image block set;

[0114] Compare the elements of the set of benchmark image blocks with the elements of the remaining compared sets of image blocks P, mark the missing parts of the elements of the set of image blocks P again, and transmit the marking result to the first compatibility problem report to refine the first compatibility problem report.

[0115] By forming a set of benchmark image blocks, it is determined that the precise image block set has the highest compatibility among all browser pages. Using this precise image block set 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 problem report through the precise image block-assisted compatibility difference analysis module, so that the report generation block can generate the first compatibility problem report more precisely.

[0116] Embodiment 2

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

[0118] Through the program that associates the elements in the set of benchmark image blocks 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 a second compatibility issue report based on the third result and the fourth result. The second compatibility issue report is used to optimize the first compatibility issue report.

[0123] Use AI to associate the elements in the reference 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 reference image block collection, so as to generate new browser page code, thus fixing the original browser page compatibility issue. Then 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, and compare the second feature with the first feature to know whether there are other compatibility issues with the first feature, so as to obtain the fourth result. 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. Generate a second compatibility issue report based on the third result and the fourth result. The second compatibility issue report is used to optimize the first compatibility issue report;

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

[0125] It also includes a simulation module. The simulation module is used to click on the elements in the 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, that 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 is generated. Then, the feature extraction block of the block and the DOM tree of the third web page extracts the features of the DOM tree of the third web page through the DOM tree construction block and analyzes them 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 error tolerance rate and improving the accuracy of the compatibility problem report.

[0141] It should be particularly noted that the collection elements of several image blocks P include page layout, color matching of page elements, font styles, sizes, colors, and icon styles;

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

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

[0144] The above are only the preferred embodiments of the present invention. It should be pointed out that for those of ordinary skill in the art in the technical field, without departing from the technical principle of the present invention, several improvements and refinements can be made, and these improvements and refinements should also be regarded as the protection scope of the present invention.

Claims

1. A browser page compatibility testing system based on the DOM tree, characterized in that Including: An acquisition module that acquires the web page code resources of the first web page; A DOM tree construction module that constructs DOM trees of several first web pages by using the web page code resources in different target browsers; A DOM tree feature extraction module that extracts the features of the DOM trees of several first web pages through a decision tree algorithm to generate several first features; 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; The compatibility difference analysis module compares the DOM trees of several first web pages by using the Diff algorithm to generate a second difference feature and analyzes the second difference feature to obtain a second result; A report generation module that transmits the first result and the second result to the report generation module to mutually verify by using a comparative analysis method and generates a first compatibility problem report; It further includes a target web page comparison module that selects target web page pages in different browser environments through a neural network model and an image recognition module to generate several image blocks Q; The image block Q includes several sets of image blocks P; Several sets of image blocks P include several elements; Select the set of image blocks P with the largest number of elements among them as the reference set of image blocks; Compare the elements of the reference set of image blocks with the elements of the remaining sets of image blocks P respectively to corroborate the first compatibility problem report.

2. The browser page compatibility testing system based on the DOM tree according to claim 1, characterized in that: When the reference set of image blocks contains the elements of the compared set of image blocks P, mark the missing parts of the elements of the set of image blocks P, mutually verify the marking result, the first result and the second result by using a comparative analysis method, and modify the first compatibility problem report according to the verification result; When the reference set of image blocks does not completely contain the compared set of image blocks P, supplement the extra parts of the elements in the compared set of image blocks P into the reference set of image blocks to form a precise set of image blocks; Compare the elements of the reference set of image blocks with the elements of the remaining compared sets of image blocks P, mark the missing parts of the elements of the set of image blocks P again and transmit the marking result to the first compatibility problem report to refine the first compatibility problem report.

3. The browser page compatibility testing system based on the DOM tree according to claim 2, characterized in that: Associate the precise set of image blocks with the corresponding DOM tree features and simulate to generate a second web page; 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 second features; 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; Taking the second feature as a reference, compare several first features respectively through the compatibility difference analysis module to form a fourth difference feature and analyze the fourth difference 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.

4. The browser page compatibility testing system based on the DOM tree according to claim 3, wherein: Also includes a simulation module, the simulation module is used to click on the target web page several image blocks P collection of elements and generate at least three web page changes; Three of the web page variations include: The first web page changes without any response; The first web page image block P collection element 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.

5. The browser page compatibility testing system based on the DOM tree according to claim 4, wherein: 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.

6. The browser page compatibility testing system based on the DOM tree according to claim 4, wherein: Extracting features of a plurality of third webpage DOM trees 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.

7. The browser page compatibility testing system based on the DOM tree according to claim 2, wherein: The image block P collection elements include page layout, color matching of page elements, font style, size, color and icon style.

8. The browser page compatibility testing system based on the DOM tree according to claim 1, wherein: 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.

9. The browser page compatibility testing system based on the DOM tree according to claim 4, 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