System browser page comparison method and system based on DOM overlay algorithm

Abstract

The present invention discloses a system browser page comparison method and system based on the DOM overlay algorithm, which relates to the technical field of dynamic analysis of web page structure. The method comprises the following steps: performing structural analysis on an interaction graph of an initial DOM structure, constructing an interaction behavior sequence, obtaining a DOM structure snapshot corresponding to a current page state, and constructing a DOM snapshot sequence that is spatiotemporally aligned with the interaction behavior sequence; performing structural preprocessing on the DOM snapshot sequence, extracting common node features of all snapshots, and constructing an aggregated DOM structure; evaluating nodes in the aggregated DOM structure, filtering invalid nodes according to the evaluation results to generate a purified DOM structure; performing DOM overlay comparison on the purified DOM structure, and identifying substantial structural change areas through hierarchical topology matching. The present application solves the problems of insufficient perception of dynamic interaction changes, excessive structural redundancy interference, and low comparison accuracy in existing page comparison by constructing an interaction behavior sequence, generating DOM snapshots, and evaluating node validity, in combination with a DOM overlay comparison method.

Description

Technical Field

[0001] The present invention relates to the technical field of dynamic analysis of web page structures, and more particularly to a system browser page comparison method and system based on a DOM overlay algorithm. Background Art

[0002] With the rapid development of internet technology, web applications are becoming increasingly complex and interactive, and web page structures and presentations are becoming increasingly diverse and dynamic. System browser page comparison, a crucial technical tool in web testing, automated verification, and front-end regression detection, is widely used in scenarios such as version update difference analysis, visual regression detection, and functional verification. Accurately and efficiently identifying structural differences between different web page versions to ensure user experience and system stability is one of the core goals of current web page comparison technology.

[0003] For example, patent publication CN107423391B discloses a method for extracting information from structured web page data. The method first preprocesses the web page code to remove noise. Using the web page layout tags as nodes, the method constructs a DOM tree based on the nested and hierarchical relationships of the layout tags and stores it in a list. The DOM tree is pruned by determining whether branches are identical, forming a reconstructed DOM tree. Nodes are then labeled by their paths, and the corresponding DOM reconstructed trees of two web pages are compared to determine the characteristic path of the target object. A corresponding wrapper is generated for automatic extraction. This method can automatically and quickly process large amounts of web content and extract accurate information.

[0004] For example, the invention patent with the announcement number CN111428444B discloses a method for automatically extracting web page information, which is characterized by including the following steps: pre-processing web page information; constructing a block DOM tree; locating the text area; and extracting the web page text; wherein, constructing the block DOM tree includes the following steps: performing fault tolerance compensation and DOM parsing on the web page source code; constructing a block DOM structure based on the DOM and combining HTML block layout elements; counting the number of DOM block basic theme elements in combination with display features; and performing weighted calculation on the DOM block basic theme elements; wherein, when locating the text area, the text area is located according to the theme weight obtained by the weighted calculation. The benefit of the present invention is that it takes into account both the efficiency and accuracy of web page information extraction, and takes into account the layout characteristics of the web page and some visual features of HTML without significantly reducing the traditional web page extraction method, thereby effectively improving the accuracy of web page information extraction.

[0005] The above disclosed technical solutions have at least the following technical problems:

[0006] Existing system browser page comparison methods based on DOM overlay algorithms have a high number of redundant nodes in the DOM structure and lack effective filtering mechanisms, resulting in noisy and inaccurate comparison results. Traditional comparisons often rely on simple node difference determination during the DOM overlay algorithm comparison process, making it difficult to accurately capture structural changes at the visual and semantic levels. To address these issues, the present invention proposes a solution. Summary of the Invention

[0007] In order to overcome the above-mentioned defects of the prior art, the embodiments of the present invention provide a system browser page comparison method and system based on the DOM overlay algorithm. By aggregating the DOM generation mechanism and the purified overlay comparison method, it can effectively solve the problems of insensitivity to dynamic structural changes, frequent interference from invalid nodes, and inaccurate positioning of version differences in the existing browser page comparison, and significantly improve the detection accuracy and comparison efficiency of complex page structure changes.

[0008] To achieve the above object, the present invention provides the following technical solutions:

[0009] A system browser page comparison method based on a DOM overlay algorithm comprises: performing structural analysis on an interaction graph of an initial DOM structure, constructing an interaction behavior sequence, obtaining a DOM structure snapshot corresponding to a current page state, and constructing a DOM snapshot sequence that is spatiotemporally aligned with the interaction behavior sequence; performing structural preprocessing on the DOM snapshot sequence, extracting common node features of all snapshots, and constructing an aggregated DOM structure; evaluating nodes in the aggregated DOM structure, filtering invalid nodes based on the evaluation results to generate a purified DOM structure; performing DOM overlay comparison on the purified DOM structure, and identifying areas of substantial structural change through hierarchical topological matching.

[0010] In a preferred embodiment, the construction of the interactive behavior sequence is specifically as follows: obtaining the initial DOM structure of the target page and identifying the set of interactive elements therein; constructing an interaction graph based on the set of interactive elements, and extracting the attribute feature vector of each vertex; inputting the interaction graph into a neural network for topological analysis, and outputting the structural variation sensitivity of each node; constructing a joint scoring function based on the structural variation sensitivity and the attribute characteristics of the vertex, and generating an action priority strategy; selecting and executing interactive actions in sequence according to the action priority strategy, obtaining a snapshot of the page DOM structure after the interaction and performing structural difference analysis on the structure before the interaction; updating the vertex attributes and edge weights of the interaction graph according to the difference characteristics, executing the loop until the termination condition is met, and outputting the page interactive behavior sequence.

[0011] In a preferred embodiment, the vertex attributes and edge weights of the interaction graph are updated according to the difference characteristics, and the execution is repeated until the termination condition is met, and the page interaction behavior sequence is output, specifically as follows: the interaction graph is updated according to the structural difference characteristics after the interaction operation, including adding interactive nodes and vertex attributes generated by the structural difference and adjusting the associated edge weights; the information of the current interaction node and the structural difference feedback are recorded as behavior items; the termination condition is determined after each round of interaction, and the final interaction behavior sequence is output.

[0012] In a preferred embodiment, the interaction graph is input into a neural network for topological analysis, and the structural variation sensitivity of each node is output, specifically as follows: the attribute features of each node in the interaction graph are extracted to generate a node feature matrix, and the connection relationship in the graph structure is extracted to construct an adjacency matrix; the feature matrix and the adjacency matrix are input into the graph neural network, feature aggregation and embedding calculations are performed, and the embedding vector of each node is obtained by propagation and fusion of neighbor information through a multi-layer graph neural network; the embedding vector is input into the structural variation sensitivity prediction layer, and the structural variation sensitivity score of each node is output.

[0013] In a preferred embodiment, the method of obtaining a DOM structure snapshot corresponding to the current page state and constructing a DOM snapshot sequence that is spatiotemporally aligned with the interaction behavior sequence is as follows: configuring an independent page rendering view for each interaction behavior and capturing the corresponding rendering frame image; comparing the current frame with the historical frame through a visual similarity algorithm, and activating a DOM change listener when the structural change exceeds a threshold; recording the event context when the listener is triggered, and determining whether to trigger snapshot collection based on a preset scoring strategy; for changes that reach the collection threshold, triggering an incremental snapshot mechanism and dynamically aggregating them into a DOM snapshot sequence.

[0014] In a preferred embodiment, the scoring strategy is as follows: responding to page structure change events triggered by user interaction, identifying the DOM area range of the structural change; rendering the state of the area before and after the interaction as image frames, respectively, to generate a before-state image block and a after-state image block; inputting the image blocks into a pre-trained lightweight multi-layer visual model, extracting perceptual features and outputting a perceptual feature vector; extracting the semantic attributes of the DOM nodes in the changed area, constructing a semantic vector, and aligning and fusing it with the perceptual feature vector to generate a representation vector for the changed area; inputting the representation vector into an importance scoring model, and outputting the importance score of the changed area.

[0015] In a preferred embodiment, the DOM snapshot sequence is structurally preprocessed to extract common node features of all snapshots and construct an aggregated DOM structure, specifically as follows: a unique structural positioning path is generated for the nodes of each DOM snapshot in the interactive row sequence to construct a path space; the node content under the same path is extracted, and the nodes are classified using a hash function, the classification including redundant nodes, newly added nodes, and state-mutated nodes; the state-mutated nodes and newly added nodes are inserted into the aggregate structure according to the path index; the inserted aggregate structure is topologically optimized, the node change type is marked, and the final aggregated DOM structure is generated.

[0016] In a preferred embodiment, the evaluation of the nodes in the aggregated DOM structure is specifically as follows: traversing all nodes in the aggregated DOM structure, extracting a multi-dimensional data feature set of each node; normalizing the feature set to generate a standardized node feature vector; inputting the node feature vector into a node effectiveness scoring model, and outputting a node effectiveness score.

[0017] In a preferred embodiment, the nodes in the aggregated DOM structure are evaluated, and invalid nodes are filtered out based on the evaluation results to generate a purified DOM structure. Specifically, the following steps are performed: a scoring threshold is set according to task requirements, all nodes in the aggregated DOM structure are traversed, nodes that meet the scoring threshold and their subtrees are screened out, and a filtered aggregated DOM structure is generated; based on the structural nested position relationship, a path mapping operation is performed on different versions of the filtered aggregated DOM structure to establish a node mapping set; and an overlay comparison is performed based on the mapping relationship, and a structural difference report is output.

[0018] A system for a system browser page comparison method based on a DOM overlay algorithm includes a snapshot sequence module, a structure construction module, a filtering module, and an overlay comparison module, and there are connections between the modules; the snapshot sequence module is used to perform structural analysis on an interaction graph of an initial DOM structure, construct an interaction behavior sequence, obtain a DOM structure snapshot corresponding to a current page state, and construct a DOM snapshot sequence that is spatiotemporally aligned with the interaction behavior sequence; the structure construction module is used to perform structural preprocessing on the DOM snapshot sequence, extract common node features of all snapshots, and construct an aggregated DOM structure; the filtering module is used to evaluate nodes in the aggregated DOM structure, and filter invalid nodes according to the evaluation results to generate a purified DOM structure; the overlay comparison module is used to perform DOM overlay comparison on the purified DOM structure, and identify areas of substantial structural change through hierarchical topological matching.

[0019] The technical effects and advantages of the system browser page comparison method and system based on the DOM overlay algorithm of the present invention are as follows:

[0020] 1. The present invention can simulate the click, scroll, expand and other operations of real users on the page by constructing an interactive behavior sequence, and drive the evolution of the page structure in a controllable manner. This sequence not only captures the interactive action itself, but also forms a two-way association between the interactive link and the structural change through the differential feedback mechanism, significantly enhancing the modeling ability of dynamic page state transitions, and solving the problem that traditional static DOM snapshots cannot reflect the real interactive path of the page. In addition, a graph neural network is introduced to perform topological analysis and structural sensitivity modeling on the interaction graph, which effectively depicts the role of each interactive node in structural evolution. By constructing a joint scoring function based on structural variation sensitivity and node attribute characteristics, dynamic priority sorting of interactive actions can be achieved, the goal orientation of interactive path construction and the structural coverage of page exploration can be improved, and the number of redundant interactions in the comparison process can be reduced.

[0021] 2. The present invention uses a multimodal fusion importance scoring strategy to determine whether the page changes are sufficient to collect a snapshot after each interaction, and no longer relies on a full-volume collection mechanism, which significantly reduces DOM snapshot redundancy. At the same time, by combining three types of features: structural semantics, visual perception, and style consistency, a unified change area representation vector is constructed, which is then input into the scoring model to output an importance score, thereby improving the recognition accuracy and interpretability of key structural changes. The DOM structure aggregation method based on the comparison of path space and node content hashes can unify and fuse DOM snapshots in multiple versions and states. By identifying redundant nodes, newly added nodes, and state-mutated nodes, and performing structural insertion and annotation operations with the path as the index, a sustainably evolving aggregated DOM structure is constructed, providing a unified and standardized structural semantic support for subsequent comparisons. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] Figure 1 The figure is a flow chart of a system browser page comparison method based on DOM overlay algorithm of the present invention.

[0023] Figure 2 The diagram is a structural diagram of a system browser page comparison system based on a DOM overlay algorithm according to the present invention. DETAILED DESCRIPTION

[0024] The following will provide a clear and complete description of the technical solutions in the embodiments of the present invention in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. All other embodiments obtained by ordinary technicians in this field based on the embodiments of the present invention without making any creative efforts shall fall within the scope of protection of the present invention.

[0025] Example 1, Figure 1 The present invention provides a system browser page comparison method based on a DOM overlay algorithm, comprising:

[0026] S1, perform structural analysis on the interaction graph of the initial DOM structure, build an interaction behavior sequence, obtain the DOM structure snapshot corresponding to the current page state, and build a DOM snapshot sequence.

[0027] In this embodiment, the interaction behavior sequence is constructed as follows:

[0028] Get the initial DOM structure of the target page, and use the rule engine to identify the interactive elements in the initial DOM structure. The interactive elements include label nodes with click, scroll, hover and other capabilities, such as <button> <divclass="clickable">wait;

[0029] Based on the interactive elements, an interaction graph is constructed. The nodes of the graph represent the interactive DOM elements, and the edges represent the page jumps, local updates, or structural changes that may be caused by the interactive operations. This forms a graph structure model for analyzing user behavior paths.

[0030] Extract node attribute features from each node in the interaction graph. These include, but are not limited to, element operability labels (e.g., clickable, hoverable), CSS style saliency scores (e.g., z-index, footprint), event binding types, and depth location information for subsequent graph learning and modeling.

[0031] Perform topological analysis on the interaction graph through a graph neural network (such as GraphSAGE or GAT) and output the structural variation sensitivity of each node. The structural variation sensitivity indicates the likelihood of a significant update to the page structure after the node is triggered.

[0032] Construct a joint scoring function based on structural variation sensitivity and node attribute characteristics;

[0033] Candidate interaction nodes are sorted in descending order based on the scoring function to generate an action priority list. An action priority strategy is then constructed based on the action priority list. Specifically, if the combined score is below a threshold, the node is excluded from the action pool. If a node is highly similar to a recently executed node (e.g., similar XPath structure, identical parent node), it is considered a "duplicate node" and its score is reduced or selection is postponed. If a node has already been executed, a cooldown period is set to avoid immediate repeated clicks and improve information coverage diversity.

[0034] According to the action priority strategy, the interaction node with the highest current score is selected from the action priority list as the target node to be executed. The user behavior is simulated based on the operation type of the node (such as click, scroll, hover) to execute the interaction action.

[0035] After each interaction operation is completed, a snapshot of the page DOM structure after the interaction is obtained and compared with the structure before the interaction to analyze the structural differences, such as changes in the number of nodes, changes in the visible area, changes in the focus element, etc., and generate structural difference features;

[0036] Based on the structural difference characteristics, the interaction graph is updated, and the current interaction action and its structural feedback result are combined into a behavior record. This record is appended to the interaction behavior sequence in chronological order until the action pool is exhausted or the preset termination condition is met. This constructs a page interaction behavior sequence with high coverage and sensitivity to structural changes.

[0037] The preset termination conditions include: the action pool is empty, that is, all interactive nodes have been processed or eliminated; no new changes have occurred in the page interaction graph, and there is no significant structural feedback after N consecutive interactions; the interaction behavior sequence has reached the set maximum step length; the time window is exhausted or the user-defined termination logic is triggered.

[0038] The joint scoring function is specifically as follows:

[0039]

[0040]

[0041] Where: represents the joint score, Representation node The structural variation sensitivity score of Representation node The weighted total score of the attribute characteristics, and is an adjustable weight coefficient used to balance the importance of the two types of indicators. Indicates whether the node is bound to an interactive event. If bound, it is 1, and if not, it is 0. Indicates the visible area ratio of the node in the page viewport, with a value range of [0, 1]. Indicates the depth of the node in the DOM tree. The inverse is taken and normalized to favor the upper structure. Indicates the historical access frequency of the node in the user click heat map (such as the normalized number of clicks), Indicates the complexity score of the node binding event, such as whether it contains asynchronous operations, nested functions, etc. 、 、 、 and is the weighting coefficient of each feature item.

[0042] Based on the structural difference characteristics, the interaction graph is updated, and the current interaction action and its structural feedback result are combined into a behavior record, which is appended to the interaction behavior sequence in chronological order until the action pool is exhausted or the preset termination condition is met, thereby constructing a page interaction behavior sequence with high coverage and sensitive to structural changes, as follows:

[0043] Based on the structural difference features identified after the current interaction operation is completed, determine whether new interactive nodes appear on the page, or whether the status of the original node changes (such as from hidden to visible, binding to a new event, etc.). If a new or changed node is identified, it is added to the interaction graph as a new node and an edge connection is established between it and the current interaction node to reflect the structural evolution path that may be triggered by this interaction, thereby dynamically updating the interaction graph;

[0044] According to the updated interaction graph, the information of the current interaction node (including node ID, interaction type, execution time, trigger path) and its corresponding structural difference feedback (such as DOM tree difference summary and structural variation label) are combined into a behavior record item as an item in the interaction behavior sequence;

[0045] After each round of interaction, it is determined whether the action pool is exhausted or the preset termination condition is met. If any condition is met, the behavior sequence construction process is stopped and the final interaction behavior sequence is output. The behavior sequence consists of multiple interaction records arranged in chronological order, which can effectively characterize the evolution path of the page structure and the actual feedback of the interaction behavior. This sequence can be applied to application scenarios such as user path simulation, page robustness testing, automated regression testing and usability analysis.

[0046] In this embodiment, a graph neural network (such as GraphSAGE or GAT) is used to perform topological analysis on the interaction graph and output the structural variation sensitivity of each node, as follows:

[0047] Based on historical interaction behavior logs, we annotate structural changes of some nodes in the interaction graph. This means we label each node with a structural variation label to indicate whether it has triggered significant page structure updates (such as DOM node reordering, addition, or visual area mutation) in historical interactions. This allows us to construct a training dataset for supervised learning.

[0048] According to the constructed interaction graph, the attribute features of each node in the graph are extracted to generate the node feature matrix , and extract the connection relationship in the graph structure to build the adjacency matrix , where N represents the number of nodes, F represents the feature dimension of each node, and each row represents the feature vector of a node;

[0049] The feature matrix and adjacency matrix are input into the graph neural network to perform feature aggregation and embedding calculations, and the embedding vector of each node is gradually obtained by propagating and fusing neighbor information through the multi-layer graph neural network. ,in Representation node Structural semantic representation in low-dimensional space;

[0050] The embedding vector is input to the structural variation sensitivity prediction layer, which can be a simple feedforward neural network or a linear classifier with sigmoid activation. It is used to output the structural variation probability score of each node, that is, the structural variation sensitivity. The higher the score, the stronger the structural variation sensitivity of the node, and its interaction value should be given priority in the subsequent consideration.

[0051] The structural variation sensitivity results of all nodes are output as vectors, which are used in the construction of joint scoring functions and the sorting strategy of interaction action priorities.

[0052] In this embodiment, a DOM structure snapshot corresponding to the current page state is obtained, and a DOM snapshot sequence is constructed, as follows:

[0053] Start the target browser, build a virtual container environment that supports multi-instance rendering, and configure the page rendering perspective at two different time points before and after each interactive behavior (such as click, scroll), and record the corresponding rendered frame images;

[0054] Compare the rendered frames using a visual similarity algorithm (such as the structural similarity metric SSIM or a perceptual difference metric based on VGG features) to determine whether the interaction has caused significant changes in the visual structure.

[0055] If a visual change is identified, a DOM change listener is immediately injected into the page. The listener runs based on the MutationObserver mechanism and monitors the addition, deletion, modification, attribute change, and subtree adjustment of the DOM structure in real time.

[0056] When the listener triggers an event, it records its event context information, including but not limited to the triggering node ID, timestamp, DOM range of the changed area, and change type. It then uses the preset importance scoring strategy to determine whether the event has reached the snapshot collection threshold.

[0057] For change events that meet the collection conditions, the "incremental snapshot mechanism" is triggered. That is, instead of re-collecting the entire DOM tree, the structural change area is located, the corresponding DOM subtree structure (Sub-DOM) is extracted, and the subtree difference is merged into the previous version of the DOM snapshot based on a tree structure difference algorithm (such as Tree-Diff). Dynamic aggregation updates are completed, and finally a DOM snapshot sequence reflecting the page evolution process is formed.

[0058] The importance scoring strategy is as follows:

[0059] Whenever a user performs an interactive operation on a page (such as clicking or scrolling), a page structure change event is triggered. The system uses a preset DOM monitoring mechanism (such as MutationObserver) or a DOM snapshot difference mechanism to identify the area where the structure has changed.

[0060] Locate the changed DOM sub-region from the page, extract the structural range corresponding to the changed region, and render the state of the region before and after the interaction into image frames, recorded as state image blocks, each of which includes the current state image block and the previous state image block;

[0061] Extracting structural style features from the DOM nodes involved in the changed area, including but not limited to font size, color, position, border style, transparency, etc., and mapping the structural style features to a unified standard style space;

[0062] Input the image frames of the current state image block and the previous state image block into a pre-trained lightweight multi-layer visual model respectively, extract the corresponding perceptual features such as texture gradient, edge contour, and salient area, and form a perceptual feature vector. The perceptual feature includes the perceptual feature vector of the current area before the interaction and the perceptual feature vector after the interaction.

[0063] Extract the semantic attributes of the DOM nodes in the changed area, including tag type (such as button, nav), ARIA role, class name, etc., and construct a semantic vector;

[0064] Semantic vector alignment is combined with perceptual feature vector to construct the changed region representation vector. ,in is the perceptual feature vector of the current region after interaction, is the perceptual feature vector of the current region before interaction, is the structural semantic vector of the current region after interaction, The structural semantic vector of the current region before interaction, is the style change feature difference vector;

[0065] Input the changed region representation vector into a preset importance scoring model and output an importance score, which represents the degree of impact of the changed region on the user's visual or interactive experience in the current environment.

[0066] Determine whether the event has reached the snapshot collection threshold based on the importance score.

[0067] The importance scoring model is specifically as follows:

[0068]

[0069] Where: is the importance score, is the Sigmoid function, which is used to compress the output value to the [0,1] interval as the probability score of the change importance. Is the weight parameter matrix, which represents the weight of each feature dimension in the score. is the change region representation vector, is a bias term used to adjust the overall offset of the score to prevent underfitting.

[0070] S2 performs structural preprocessing on the DOM snapshot sequence, extracts the common node features of all snapshots, and constructs an aggregated DOM structure.

[0071] In this embodiment, the DOM snapshot sequence is subjected to structural preprocessing, common node features of all snapshots are extracted, and an aggregated DOM structure is constructed, as follows:

[0072] Obtain the DOM structure snapshot corresponding to each key interaction node in the interaction behavior sequence. Based on XPath, CSSSelector, or a custom path encoding mechanism, generate a unique structural positioning path for each node in the DOM snapshot, and build a unified path space. Even if the same node in different snapshots has a slightly different tree structure position, it can still be logically aligned and mapped.

[0073] Extract the node content in each snapshot of the node path that appears multiple times in the path space. The node content includes: tag name, attribute set (such as class, id, style), embedded text content (innerText, innerHTML), event binding and interactive properties;

[0074] Use a hash function (such as SHA-1, MD5) or a structured signature algorithm to generate a content digest for the node content, and determine whether the content of the node under the path in each snapshot is consistent.

[0075] Identify redundant nodes, newly added nodes, and nodes with status changes based on the judgment results, as follows:

[0076] If the node contents in multiple snapshots under the same path are consistent, they are considered redundant nodes and only the first version is retained;

[0077] If there are differences, they are marked as "state variation nodes" and enter the subsequent structure merging process;

[0078] If the path exists only in some snapshots, it is considered a "newly added node";

[0079] Based on the path index results, the insertion positions for the state mutation nodes and the newly added nodes are assigned in the aggregate DOM structure as follows:

[0080] If the path does not exist in the aggregate DOM, it is inserted directly;

[0081] If the path already exists but the content is different, the structure can coexist by introducing state tags (such as data-state="afterClick") or version tags;

[0082] If there is a parent node structure conflict, the final insertion position is determined based on context consistency (such as parent node type and child node order);

[0083] After completing the fusion and insertion operations of all state-mutated nodes and newly added nodes, the merged DOM structure is further aggregated and annotated to construct the final aggregated DOM structure.

[0084] It's important to note that this aggregated structure not only fully captures all valid DOM nodes that have appeared during the interaction process, but also appends the source snapshot number and corresponding triggering interaction action label to each node to preserve its generation context. Furthermore, a visual state marker is added to each node to distinguish the visibility and activity of the node at different interaction steps, thus supporting subsequent applications such as page state restoration, coverage statistics, or automated interaction playback. This structure, as the final output, boasts high information fidelity and state reproducibility, significantly improving the modeling and analysis capabilities of complex page interaction structures.

[0085] The merged DOM structure is aggregated and annotated to construct the final aggregated DOM structure, as follows:

[0086] Aggregation processing is performed on the initial merged DOM structure of the fused DOM snapshots at each stage to eliminate redundant nodes and unify node identifiers, including:

[0087] Based on XPath or CSS selector path method, DOM nodes with the same path in different snapshots are mapped to a unified path space;

[0088] For nodes with the same path, calculate their structural hash (structured structure + key attribute set) and content hash (text content + data attribute value);

[0089] If the structure hash and content hash are consistent, it is considered a duplicate node and only one copy is retained;

[0090] For nodes with identical structure but different styles (e.g., CSS properties, visibility, class names), a new data-style-delta attribute is added to retain a copy of the primary node. This attribute is used to record the difference vectors between the snapshot styles (e.g., display / block vs. none, color contrast, size change, etc.) to facilitate subsequent style restoration or playback.

[0091] If a node exists in all snapshots and its structure, content, and style remain consistent, it is considered a stable node. The data-stable="true" attribute is added to the node to indicate that it does not change during interaction, which can be used to optimize rendering or caching during playback.

[0092] Adding source context information to each node in the aggregated merged structure;

[0093] Based on the DOM rendering results and view screenshot analysis results corresponding to each interaction stage, mark the visual state of each node in the aggregated DOM;

[0094] Based on the above aggregation and annotation results, a complete aggregation DOM structure is constructed and output.

[0095] Adding the source context information of each node in the aggregated merged structure specifically includes:

[0096] data-snapshot-id: identifies the node's location in multiple snapshots. For example, data-snapshot-id="S1,S3" indicates that the node exists in snapshots S1 and S3.

[0097] data-trigger-action: records the interactive trigger action to which the node is attached, such as click, scroll, etc., for example, data-trigger-action="click#btn_submit";

[0098] data-interaction-depth: records the interaction path level of the node, which is used to analyze the interaction stage in which it appears.

[0099] The visual state of each node in the aggregated DOM is marked, including but not limited to:

[0100] data-visible: used to identify in which snapshots the node is visible, such as data-visible="S1,S2";

[0101] data-occluded: used to identify whether the node is invisible due to occlusion, scrolling, page switching, etc.

[0102] data-theme-variant: used to distinguish the visual appearance of nodes in different theme modes (such as light / dark), for example, data-theme-variant="dark".

[0103] S3, evaluates the nodes in the aggregated DOM structure, and filters out invalid nodes based on the evaluation results to generate a purified DOM structure.

[0104] In this embodiment, the nodes in the aggregated DOM structure are evaluated as follows:

[0105] Traverse all nodes in the aggregated DOM structure and extract node data features, including the node's visual contribution, structural position, interactive response, and historical co-occurrence frequency;

[0106] Normalize the node data features to form a node feature vector;

[0107] The node feature vector is input into the node effectiveness scoring model and the node effectiveness score is output.

[0108] The node effectiveness scoring model is as follows:

[0109]

[0110]

[0111] Where: is the updated representation of node v at layer l+1, that is, the new feature vector obtained after node v aggregates its neighbors. is the feature vector representation of node u in layer l, is the set of adjacent nodes of node v, is the representation vector of node v in layer l, is a feature aggregation function (which can be the mean of neighbor features, weighted sum, attention weighting, etc.), Is the effectiveness score of the node, the value range is between 0 and 1, is the weight vector of the output layer, is the activation function (usually Sigmoid, which compresses the value to 0-1), The final representation of node v after L layers of propagation, is the bias term.

[0112] It should be noted that the visual contribution index: through the browser viewport rendering analysis tool, the actual visible area of each node in the user's window is obtained, and its visual occupancy weight is expressed as this percentage;

[0113] Structural position score: Calculates the structural weight based on the node's depth in the DOM tree, parent-child structure weight, position symmetry, and other information through structural heuristic rules or position mapping network;

[0114] Interaction response: Detect whether the node is bound to a JavaScript event handler (such as onclick, onhover), and combine historical interaction behavior logs to extract the node trigger frequency and interaction heat;

[0115] Historical co-occurrence frequency: By analyzing the frequency of occurrence of the node in multiple versions of the page in the past, its structural stability and versatility can be judged.

[0116] S4, filtering invalid nodes in the aggregated DOM structure according to the evaluation result, and performing DOM overlay comparison on the filtered aggregated DOM structure.

[0117] In this embodiment, invalid nodes in the aggregated DOM structure are filtered according to the evaluation results, and the filtered aggregated DOM structure is subjected to DOM overlay comparison, as follows:

[0118] Set a scoring threshold based on task requirements, traverse all aggregated DOM nodes, filter out nodes and their subtrees that meet the scoring threshold, and form a filtered aggregated DOM structure;

[0119] If some parent nodes have low scores but are necessary parents of valid nodes, they will be retained but marked as "weak nodes";

[0120] Based on node paths (such as XPath) or structure nesting position comparison, path mapping is performed on the filtered aggregated DOM structures between different versions to ensure a one-to-one match between nodes and handle node addition, deletion, and movement.

[0121] Compare the filtered aggregated DOM structures based on the mapping relationship to identify differences in node attributes, including node content, attributes, and style changes;

[0122] Generate a structured difference report based on the difference results, clearly identifying the DOM structure differences and change points between page versions, facilitating subsequent page change analysis and automated testing.

[0123] Example 2, Figure 2 The present invention provides a system browser page comparison system based on DOM superposition algorithm, which is characterized by comprising a snapshot sequence module, a structure construction module and a filtering module, and there are connections between the modules;

[0124] The snapshot sequence module is used to perform structural analysis on the interaction graph of the initial DOM structure, build an interaction behavior sequence, obtain the DOM structure snapshot corresponding to the current page state, and build a DOM snapshot sequence;

[0125] The structure building module is used to build the aggregate DOM structure based on the preprocessed DOM snapshot sequence;

[0126] The filtering module is used to evaluate the nodes in the aggregated DOM structure, filter out invalid nodes in the aggregated DOM structure according to the evaluation results, and perform DOM overlay comparison on the filtered aggregated DOM structure.

[0127] The above formulas are all dimensionless and numerical calculations. The formulas are obtained by collecting a large amount of data and performing software simulation to obtain the most recent real situation. The preset parameters in the formulas are set by technicians in this field according to actual conditions.

[0128] The above embodiments may be implemented in whole or in part through software, hardware, firmware, or any other combination thereof. When implemented using software, the above embodiments may be implemented in whole or in part in the form of a computer program product.

[0129] Those skilled in the art will appreciate that the modules and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0130] In addition, each functional module in each embodiment of the present application may be integrated into one processing module, or each module may exist physically separately, or two or more modules may be integrated into one module.

[0131] The above description is merely a specific embodiment of the present application, but the scope of protection of the present application is not limited thereto. Any changes or substitutions that can be easily conceived by a person skilled in the art within the technical scope disclosed in this application should be included in the scope of protection of this application. Therefore, the scope of protection of this application should be based on the scope of protection of the claims.

[0132] Finally: The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present invention should be included in the scope of protection of the present invention.< / button>

Claims

1. A system browser page comparison method based on DOM overlay algorithm, characterized in that: include: Perform structural analysis on the interaction graph of the initial DOM structure, construct an interaction behavior sequence, obtain the DOM structure snapshot corresponding to the current page state, and construct a DOM snapshot sequence that is temporally and spatially aligned with the interaction behavior sequence; Perform structural preprocessing on the DOM snapshot sequence, extract the common node features of all snapshots, and construct an aggregated DOM structure; Evaluate the nodes in the aggregated DOM structure, and filter out invalid nodes based on the evaluation results to generate a purified DOM structure; The purified DOM structure is subjected to DOM overlay comparison, and the areas of substantial structural changes are identified through hierarchical topological matching; Perform structural preprocessing on the DOM snapshot sequence, extract the common node features of all snapshots, and construct the aggregated DOM structure, as follows: Generate a unique structural positioning path for each node of the DOM snapshot in the interactive line sequence and build a path space; Extract the node content under the same path and classify the nodes using a hash function. The classification includes redundant nodes, newly added nodes, and state-mutated nodes. Insert the state mutation nodes and the newly added nodes into the aggregation structure according to the path index; Perform topological optimization on the aggregate structure after insertion, mark the node change type and generate the final aggregate DOM structure.

2. The system browser page comparison method based on DOM overlay algorithm according to claim 1 is characterized in that: The construction of the interaction behavior sequence is as follows: Get the initial DOM structure of the target page and identify the set of interactive elements in it; Construct an interaction graph based on a set of interactive elements and extract the attribute feature vector of each vertex; The interaction graph is input into the neural network for topological analysis, and the structural variation sensitivity of each node is output; A joint scoring function is constructed based on the sensitivity of structural variation and the attribute characteristics of vertices to generate an action priority strategy; Select and execute interactive actions in sequence according to the action priority strategy, obtain a snapshot of the page DOM structure after the interaction and perform structural difference analysis on the structure before the interaction; Update the vertex attributes and edge weights of the interaction graph based on the difference features, execute the loop until the termination condition is met, and output the page interaction behavior sequence.

3. The system browser page comparison method based on DOM overlay algorithm according to claim 2 is characterized in that: The method updates the vertex attributes and edge weights of the interaction graph according to the difference features, executes the loop until the termination condition is met, and outputs the page interaction behavior sequence, which is as follows: Update the interaction graph based on the structural difference characteristics after the interaction operation, including adding interactive nodes and vertex attributes generated by the structural difference and adjusting the associated edge weights; Record the information and structural difference feedback of the current interaction node as a behavior item; After each round of interaction, the termination condition is determined and the final interaction behavior sequence is output.

4. The system browser page comparison method based on DOM overlay algorithm according to claim 3 is characterized in that: The interaction graph is input into the neural network for topological analysis, and the structural variation sensitivity of each node is output as follows: Extract the attribute features of each node in the interaction graph, generate a node feature matrix, and extract the connection relationship in the graph structure to construct an adjacency matrix; The feature matrix and adjacency matrix are input into the graph neural network to perform feature aggregation and embedding calculations. The embedding vector of each node is obtained by fusing the neighbor information through multi-layer graph neural network propagation. The embedding vector is input into the structural variation sensitivity prediction layer, which outputs the structural variation sensitivity score of each node.

5. The system browser page comparison method based on DOM overlay algorithm according to claim 4 is characterized in that: The method of obtaining a DOM structure snapshot corresponding to the current page state and constructing a DOM snapshot sequence that is time-space aligned with the interaction behavior sequence is as follows: Configure an independent page rendering view for each interactive behavior and capture the corresponding rendering frame image; Compare the current frame with the historical frames through a visual similarity algorithm, and activate the DOM change listener when the structural change exceeds a threshold; When the listener is triggered, the event context is recorded and the triggering of snapshot collection is determined based on the preset scoring strategy. For changes that reach the collection threshold, the incremental snapshot mechanism is triggered and dynamically aggregated into a DOM snapshot sequence.

6. The system browser page comparison method based on DOM overlay algorithm according to claim 5 is characterized in that: The scoring strategy is as follows: Respond to page structure change events triggered by user interactions and identify the DOM area scope of the structure change; Rendering the state of the region before and after the interaction into image frames respectively to generate a before-state image block and a after-state image block; Inputting the image block into a pre-trained lightweight multi-layer vision model, extracting perceptual features and outputting a perceptual feature vector; Extract the semantic attributes of the DOM nodes in the changed area, construct a semantic vector, and align and fuse it with the perceptual feature vector to generate a representation vector for the changed area; The representation vector is input into an importance scoring model, and an importance score of the changed region is output.

7. The system browser page comparison method based on DOM overlay algorithm according to claim 6 is characterized in that: The nodes in the aggregate DOM structure are evaluated as follows: Traverse all nodes in the aggregate DOM structure and extract the multi-dimensional data feature set of each node; Normalizing the feature set to generate a standardized node feature vector; The node feature vector is input into the node effectiveness scoring model and the node effectiveness score is output.

8. The system browser page comparison method based on DOM overlay algorithm according to claim 7 is characterized in that: The nodes in the aggregated DOM structure are evaluated, and invalid nodes are filtered out according to the evaluation results to generate a purified DOM structure, as follows: Set a scoring threshold based on task requirements, traverse all nodes in the aggregate DOM structure, filter out nodes that meet the scoring threshold and their subtrees, and generate a filtered aggregate DOM structure; Based on the structural nested position relationship, path mapping operations are performed on the filtered aggregated DOM structures of different versions to establish a node mapping set; Perform superposition comparison based on the mapping relationship and output a structural difference report.

9. A system using the system browser page comparison method based on the DOM overlay algorithm as claimed in any one of claims 1 to 8, characterized in that: It includes snapshot sequence module, structure construction module, filtering module and overlay comparison module, and there are connections between modules; The snapshot sequence module is used to perform structural analysis on the interaction graph of the initial DOM structure, construct an interaction behavior sequence, obtain the DOM structure snapshot corresponding to the current page state, and construct a DOM snapshot sequence that is spatially and temporally aligned with the interaction behavior sequence; The structure building module is used to perform structural preprocessing on the DOM snapshot sequence, extract the common node features of all snapshots, and build an aggregated DOM structure; The filtering module is used to evaluate the nodes in the aggregated DOM structure and filter out invalid nodes based on the evaluation results to generate a purified DOM structure; The overlay comparison module is used to perform DOM overlay comparison on the purified DOM structure and identify areas with substantial structural changes through hierarchical topological matching.

Images