CN106649805B - Efficient detection system and method for cross-browser layout compatibility of Web application - Google Patents
Efficient detection system and method for cross-browser layout compatibility of Web application Download PDFInfo
- Publication number
- CN106649805B CN106649805B CN201611242296.3A CN201611242296A CN106649805B CN 106649805 B CN106649805 B CN 106649805B CN 201611242296 A CN201611242296 A CN 201611242296A CN 106649805 B CN106649805 B CN 106649805B
- Authority
- CN
- China
- Prior art keywords
- node
- nodes
- changed
- browser
- event
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Management, Administration, Business Operations System, And Electronic Commerce (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The invention relates to a high-efficiency detection system and a method for cross-browser layout compatibility of Web application, which comprises the following steps: the system comprises a data processing module, a node matching module, an AG graph constructing module and a node comparing module, wherein the data processing module is responsible for processing page data of a single browser; the node matching module is responsible for matching nodes of the same event change in the reference browser and the browser to be tested; the AG graph constructing module is responsible for constructing an AG graph for the area changed in each event to obtain a father node and a brother node of each node on the layout; and the node comparison module is responsible for comparing the parent-child relationship and the brother relationship of the matched nodes to obtain the layout compatibility problem of the nodes. The invention improves the efficiency of Web application layout compatibility detection and also avoids repeated report of detection results.
Description
Technical Field
The invention relates to a high-efficiency detection system and method for cross-browser layout compatibility of Web application, belonging to the technical field of Internet and Web.
Background
With the rapid development of the internet and Web technologies, Web applications are becoming important information acquisition and communication platforms. Application developers want applications to behave consistently across the various mainstream browser platforms, but because of differences in browser implementation technologies and different levels of standard support, inconsistencies in behavior and page rendering may occur when Web applications run on different browser platforms, called a cross-browser incompatibility problem (XBIs). The cross-browser incompatibility problem (XBI) is generally divided into three categories: inconsistent behavior, inconsistent layout, and inconsistent content. The behavior is not consistent: such inconsistencies generally refer to functional failures of elements in the page, such as clicking a link page cannot jump, and clicking a button page does not respond; layout inconsistency: refers to the errors in the layout of the elements in the page. For example: the two buttons are horizontally arranged and vertically aligned in the Chrome browser, but are displayed in the vertical arrangement in the IE browser; content inconsistency: further divided into textual content inconsistencies and visual content inconsistencies. Text inconsistency refers to differences in text within an element, and visual content inconsistency refers to differences in visualization of the element, such as picture content, element style, and the like. According to the literature (S.Roy Choudhury, M.R.Prasad, and A.Orso.X-pert: Accurate identification of cross-brower issues in webpplications.In Proceedings of the 2013International reference on software engineering, pages 702-711. IEEE Press,2013), the problem of structural inconsistency is most prevalent among the three types of cross-browser compatibility problems above, accounting for 57% of the compatibility inconsistencies found.
To detect the problem of structural inconsistencies, work (S.R. Choudhury, H.Versee, and A.Orso. Webdiff: Automated identification of cross-brower issues in webpplications. in ICSM' 2010) has proposed one. In order to reduce false alarm of detection results, work (S.RoyChoudhury, M.R.Prasad, and A.Orso.X-per: Accurate identification of cross-brower issues in web applications. in Proceedings of the 2013International conference on Software Engineering, pages 702-711. IEEE Press,2013) firstly constructs Alignment Graph for two pages with detection respectively, and determines whether the problem of inconsistent structure exists by detecting whether the matched nodes in the pages have the same parent-child relationship and sibling relationship. The main deficiency of this method is that for each page of the Web application, a complete Alignment Graph needs to be constructed, and all nodes in the two pages are matched once before detecting the structural inconsistency. For modern popular Web 2.0 applications (e.g., office 365, Gmail, google docs, etc.), Ajax technology is widely adopted to locally update pages by asynchronous communication to provide the page responsiveness and user experience. When the structure inconsistency of the Web application is detected, the existing method can cause repeated detection on the detected page nodes, so that the detection efficiency is reduced, and repeated reporting of the detection result can be caused. For example, considering a shopping website (accessed using the Chrome browser) as shown in FIG. 1, when the user clicks the "Add ToCart" button, only a portion of the page elements have changed in FIG. 2 (as indicated by the red boxes in the figure). The existing detection method needs to construct an Alignment Graph for the whole page corresponding to fig. 1 and fig. 2, and match and detect all nodes. However, most elements in the page of fig. 2 have been detected in the page corresponding to fig. 1 and have not changed in the current page, if the pages corresponding to fig. 1 and fig. 2 are respectively detected as a whole regardless of whether the page node information changes, repeated detection of a large number of nodes may be caused, and repeated reporting of the detection result may also be caused.
Disclosure of Invention
The invention aims to improve the efficiency of Web application compatibility detection and provides an efficient system and a method for detecting the compatibility of a Web application cross-browser layout.
The technical solution of the invention is as follows: an efficient Web application cross-browser layout compatibility detection system, comprising: the system comprises a data processing module, a node matching module, an AG graph constructing module and a node comparing module, wherein:
the data processing module is responsible for processing page data collected from the reference browser and the browser to be tested; the module obtains a changed node and a changed area in each event by comparing data of two adjacent events, wherein the changed node comprises: added nodes, deleted nodes, coordinate-changed nodes, attribute-changed nodes, parent node-changed nodes, and nodes in order-changed in the parent node; sending the changed nodes to a node matching module, and sending the changed areas to an AG graph constructing module;
the node matching module is used for matching changed nodes in the same event in the reference browser and the browser to be tested based on changed node information obtained by the data processing module after each event is processed by the reference browser and the browser to be tested; the module comprises two steps: the method comprises the steps of complete matching according to layers and global most similar matching, wherein the complete matching according to layers refers to the fact that similarity comparison is carried out between a node to be matched in a browser to be tested and a node of the same layer in a reference browser until the same node is found; the global most similar matching means that the most similar node is found between the reference browser and the node which is not matched in the previous step in the browser to be tested and is used as a matched node;
the AG graph constructing module is responsible for constructing an AG graph for the area changed in each event to obtain a father node and a brother node of each node on the layout;
and the node comparison module is used for comparing whether the parent-child relationship and the brother relationship of the matched nodes are the same or not based on the AG graph constructed by the AG graph construction module for the reference browser and the change area of the browser to be tested and the node matching information calculated by the node matching module for the reference browser and the change area of the browser to be tested, if the parent-child relationship and the brother relationship are the same, the problem of layout compatibility does not exist, and otherwise, the problem of layout compatibility exists between the two nodes.
The data processing module is specifically realized as follows:
(1) when the Web application page is generated, an id is distributed to each newly created node, the data processing module obtains the same node in adjacent events according to the id, firstly, the following six changed nodes are obtained by comparing the data of the two adjacent events,
an added node that is not in a previous event but only in a subsequent event;
a deleted node, the node id not in the next event but in the previous event;
a coordinate-changing node, the node having different coordinates in a context;
the node with the changed attributes is different from the node attributes in the preceding and following events, and the node attributes comprise class and style;
the node changed by the father node is embodied in that the prefix of the Xpath is changed in the front and back events of the node;
the node with the sequence changed in the father node is embodied in that the sequence number of the Xpath is changed in the node in the front and back events;
(2) obtaining the six changed nodes, and then obtaining changed areas according to the changed nodes in the events;
(21) traversing all changed nodes in the event, obtaining a root node of a changed area in the event according to the inclusion relation among the nodes, wherein each node is represented by a rectangle in the generated page, the position of the rectangle is determined by the coordinates of the upper left corner and the lower right corner of the rectangle in the page, if the rectangle represented by the node A contains the rectangle represented by the node B, the node A is reserved as the root node, the node A continues to carry out comparison, and the node B does not carry out comparison;
the containment relationships between nodes are calculated as follows: let a coordinate representation of a (xa1, xa2, ya1, ya2), B coordinates (xb1, xb2, yb1, yb2), where (xa1, ya1) is the upper left coordinate of a, (xa2, ya2) is the lower right coordinate of a, (xb1, yb1) is the upper left coordinate of B, (xb2, yb2) is the lower right coordinate of B, if xa1< ═ xb1, and xa2> -xb 2, and ya1> -yb 1, and ya2< ═ yb2, then a contains B;
(22) the root node obtained in the step (21) belongs to a node which changes in the event, in order to compare the parent-child relationship and the brother relationship of the root node in the subsequent detection, the parent node of the root node is found according to the coordinates, and the rule is that the node meets two conditions, wherein the coordinates of the node contain the root node, and the node is the node with the smallest area in all the nodes meeting the condition I;
(23) and (3) taking the father node obtained in the step (22) as a final root node of the changed region in the event, traversing all the nodes to obtain nodes in the changed region in the event, wherein the nodes comprise unchanged nodes, and the rule is that if a certain node is contained by the root node, the node belongs to the changed region in the event.
The node matching module is specifically realized as follows:
respectively taking the changed nodes in the reference browser and the browser to be matched as respective nodes to be matched,
(1) completely matching according to layers, traversing a node A which changes in a reference browser from top to bottom according to a DOM tree, selecting a node PB which is matched with a father node PA of the node A in the browser to be tested, comparing the node A with a child node of the node PB in the DOM tree, matching the node A with the node B and storing the node B into a matching table if the node B is found to be completely the same as the node A, namely the similarity is 1, and respectively moving the node A and the node B out of a list to be matched;
(2) globally most similar matching, traversing the node A of the reference browser to-be-matched list, selecting the node B with the highest similarity with the node A from the to-be-matched list of the browser to be tested, wherein the similarity of the node B and the node A is higher than a threshold value, namely the node A and the node B are matched and stored in a matching table, and the node A and the node B are respectively moved out of the to-be-matched list;
(3) and referring to the residual nodes in the to-be-matched lists of the browser and the to-be-tested browser, namely the unmatched nodes.
The AG diagram construction module is specifically realized as follows:
(1) the AG map describes two structural relationships of elements in the page: parent-child relationships and sibling relationships. For two nodes A and B, if A is the node with the smallest area in all the nodes containing B, A is the father of B, B is the child of A, and the relationship between all the child nodes of the node A is the sibling relationship. For constructing an AG graph, firstly traversing nodes in a change area according to the sequence of the node areas from small to large, traversing subsequent nodes for each traversed node A, finding out a first node containing A as a father node P of the A, calculating the father-son relationship of the P and the A according to the coordinates of the P and the A, and storing the A into a son node list of the P;
(2) traversing all father nodes P in the change area again to obtain a child node list CL of P, constructing all nodes in the CL into brothers pairwise, and calculating brothers relationship of the nodes according to coordinates;
(3) after the two steps, each node has a parent-child relationship list and a sibling relationship list.
The node comparison module is specifically implemented as follows:
(1) traversing the node A which changes with reference to the browser, and inquiring a matching table output from the node matching module to obtain a matched node B;
(2) inquiring the parent-child relations respectively constructed by the AG graph construction module for the node A and the node B, and comparing, wherein if the node A and the node B have the same parent-child relation, the problem of layout compatibility does not exist, otherwise, the problem of layout compatibility exists;
(3) and inquiring brother relations respectively constructed by the AG graph construction module for the node A and the node B, and comparing, wherein if the A and the B have the same brother relation, the problem of layout compatibility does not exist, otherwise, the problem of layout compatibility exists.
An efficient detection of cross-browser layout compatibility of Web applications is implemented by the following steps:
(1) processing page data: respectively processing page data of a reference browser and a browser to be tested to obtain a changed area and a changed node in each event, firstly obtaining page data before and after the event occurs for each event, mapping the nodes in the page data into a Map table according to id, traversing the page data node id before the event occurs, finding a corresponding node in the page data Map table after the event occurs, if the node cannot be found, recording the current node as a deleted node and deleting the deleted node from the page data Map table before the event occurs, and if the node is found, judging whether the node is changed according to the types and deleting the node from the page data Map table before and after the event occurs respectively; after traversing is finished, if nodes exist in the page data Map table after the event occurs, recording the nodes as added nodes; then combining the changed nodes according to the coordinates to obtain a root node of the changed area; then finding out father nodes on the layout for the root nodes to serve as final root nodes of the change area; re-traversing the nodes of the current event to find all the nodes in each change area, wherein the rule is that the node is contained by the root node of each change area; finally, processing the page data to obtain the changed nodes and changed areas of each event;
(2) matching the changed nodes, namely matching the changed nodes in the same event of the reference browser and the browser to be tested; taking the changed nodes as nodes to be matched, generating a node list to be matched, firstly, carrying out complete matching according to layers, moving the nodes on the complete matching out of the node list to be matched, then carrying out global most similar matching on the rest nodes to be matched, and moving the matched nodes out of the node list to be matched; finally, a node matching table is obtained;
(3) the AG graph constructing module constructs an AG graph through node coordinates in each changed area after an event occurs, wherein the AG graph is composed of a parent-child relationship and a brother relationship of each node;
(4) and comparing the changed nodes, namely comparing the changed nodes in the same event of the reference browser and the browser to be tested, traversing the changed node A in the reference browser, obtaining a matched node B from the node matching table, then respectively obtaining the parent-child relationship and the brother relationship of the A and the B from the corresponding AG graph, and comparing to finally obtain the problem of layout incompatibility of the A and the B.
Compared with the prior art, the invention has the advantages that: in order to detect the layout compatibility of a page, the existing method carries out global matching on all nodes on the page, constructs an AG (access graph) for the whole page, and ignores the characteristic that the modern Web application carries out local refreshing on the page, thereby causing slow detection speed and low efficiency. The invention only matches the page nodes changed after the event occurs, constructs the AG graph only for the changed nodes, and can quickly detect the layout compatibility problem of the page by checking whether the changed nodes have the same parent-child relationship and sibling relationship.
Drawings
FIG. 1 is a block diagram of the system components of the present invention;
FIG. 2 is a flow chart of an implementation of a data processing module computing a change node;
FIG. 3 is a flow chart of an implementation of a data processing module incorporating change nodes;
FIG. 4 is a flow chart of an implementation of the data processing module calculating the change region;
FIG. 5 is a flow chart of the implementation of the complete matching by layers of the node matching module;
FIG. 6 is a flowchart illustrating the implementation of global most similar matching by the node matching module;
FIG. 7 is a flow diagram of an implementation of the AG map construction module;
fig. 8 is a flowchart of an implementation of the node comparison module.
Detailed Description
The present invention will be described in detail with reference to the accompanying drawings.
As shown in fig. 1, the incremental compatibility detection method for Web applications of the present invention includes: the system comprises a data processing module, a node matching module, an AG graph constructing module and a node comparing module.
And the data processing module is responsible for processing page data of a single browser and obtains a changed area and a changed node of the next event by comparing the data of two adjacent events. The changed nodes include: added nodes, deleted nodes, coordinate-changed nodes, attribute-changed nodes, parent-changed nodes, and order-changed nodes in the parent node.
The node matching module is responsible for matching nodes of the same event change in the reference browser and the browser to be tested, and comprises the following two steps: complete matching by layer, global most similar matching. The complete matching according to the layers means that similarity comparison is carried out on the nodes to be matched and the nodes in the same layer in another browser until the identical nodes are found. The global most similar matching means that the nodes which are not matched in the previous step in the two browsers find the most similar nodes with each other as matched nodes.
And the AG graph constructing module is responsible for constructing an AG graph for the area changed in each event to obtain the father node and the brother node of each node on the layout.
And the node comparison module is responsible for comparing the parent-child relationship and the brother relationship of the matched nodes to obtain the layout compatibility problem of the nodes.
The data processing module is specifically realized as follows:
when the Web application page is generated, the system distributes an id to each newly created node, and the data processing module obtains the same node in the adjacent event according to the id. Firstly, the module obtains the following six changed nodes by comparing the data of two adjacent events.
1) For an added node, the node id is not in the previous event but only in the next event.
2) For a deleted node, the node id is not in the next event but only in the previous event.
3) For a node with a coordinate change, the coordinates of the node in the context are different.
4) For a node with a changed attribute, the node has different node attributes in the previous and subsequent events, and the node attributes comprise class, style and the like.
5) For the node changed by the father node, the prefix of the Xpath is changed in the front and back events of the node, such as/HTML/BODY/DIV/A and/HTML/BODY/SPAN/A.
6) For the node with the sequence changed in the father node, the sequence number of the Xpath in the front and back events of the node is changed, such as/HTML/BODY/DIV/A2 and/HTML/BODY/DIV/A3.
The six changed nodes are obtained, and then the module obtains changed areas according to the changed nodes.
1) And traversing all the changed nodes, and comparing the coordinates of the nodes to obtain the root node of the changed area. The rule is that if a contains B, a is retained as the root node, a continues to compare, and B does not compare. The inclusion relationship is expressed as a coordinates (xa1, xa2, ya1, ya2), B coordinates (xb1, xb2, yb1, yb2), a contains B if xa1 [ < xb1& & xa2> & & xb2& & ya 1& & yb1& & ya2> -yb 2.
2) In order to compare the parent-child relationship and the brother relationship of the root node in subsequent detection, the module finds the parent node of the root node according to the coordinates, and the rule is that the node meets two conditions, wherein one is that the coordinates of the node contain the root node, and the other is that the node has the smallest area in all the nodes meeting the condition one.
3) And taking the father node obtained in the last step as a final root node of the change area, traversing all the nodes to obtain nodes (including unchanged nodes) in the change area, wherein the rule is that if a certain node is contained by the root node, the node belongs to the change area.
The node matching module is specifically realized as follows:
and respectively taking the changed nodes in the reference browser and the browser to be matched as the respective nodes to be matched.
1) And completely matching according to layers, traversing the node A which changes in the reference browser from top to bottom according to the DOM tree, selecting a node PB matched with the father node PA of the node A in the browser to be tested, comparing the child nodes of the node A and the node PB in the DOM tree, matching the node A and the node B and storing the node B in a matching table if the node B is found to be completely the same as the node A, namely the similarity is 1, and respectively moving the node A and the node B out of the list to be matched.
2) And performing global most similar matching, traversing the node A of the reference browser to-be-matched list, selecting the node B with the highest similarity with the node A from the to-be-matched list of the browser to be tested, wherein the similarity of the node B and the node A is higher than a threshold value, namely, matching the node A and the node B, storing the node B into a matching table, and respectively moving the node A and the node B out of the to-be-matched list.
3) And referring to the remaining nodes in the to-be-matched lists of the browser and the to-be-tested browser, namely the nodes of the two browsers which are not matched.
The AG diagram construction module is specifically realized as follows:
the module constructs an AG map by all nodes in each event change area, and one change area constructs one AG map. The AG map describes two structural relationships of elements in the page: parent-child (container) and Sibling (sitting). "node 2 contact node 1" must satisfy two conditions, one is that the coordinates of node2contain node1, and the other is that node2 is the smallest area of all nodes satisfying the condition one, and the parent-child relationship is 8 in total, as shown in table 1. "node 1 mapping node 2" indicates that two elements are in the same parent node, and there are 8 sibling relationships, as shown in table 2.
1) And traversing the nodes A in the change area according to the sequence of the node areas from small to large, continuously traversing subsequent nodes, finding a first node containing A for the nodes A, namely a father node P of the nodes A, calculating the father-son relationship of the nodes A and the first node according to the coordinates of the nodes P and A, and storing the nodes A into a son node list of the nodes P.
2) And traversing the nodes P in the change area to obtain a child node list CL of the P, constructing all the nodes in the CL into brothers pairwise, and calculating brothers relationship of the nodes and the brothers according to the coordinates.
After the two steps, each node has a parent-child relationship continue and a sibling relationship list Siblings.
Table 18 parent-child relationships
| XFILL | The x-coordinate of the child element is similar to the parent element. |
| X-center | The child element is centered on the x-coordinate of the parent element. |
| left-JUSTIFICATION | The child element is to the left on the x-coordinate of the parent element. |
| right-JUSTIFICATION | The child element is to the right on the x-coordinate of the parent element. |
| YFILL | The y-coordinate of the child element is similar to the parent element. |
| Y-center | The child element is centered on the y-coordinate of the parent element. |
| top-ALIGNMENT | The child element is biased in the y-coordinate of the parent element. |
| bottom-ALIGNMENT | Sub-elementsDown the y coordinate of the parent element. |
TABLE 28 brother relationships
| left-EDGE | The x1 coordinates of element 1 and |
| right-EDGE | The x2 coordinates of element 1 and |
| LEGT-right | Element 1 x2 is less than element 2 x 1. |
| right-left | Element 1 x1 is greater than element 2 x 2. |
| top-EDGE | Element 1 and |
| bottom-EDGE | Element 1 and |
| top-bottom | Y2 for element 1 is less than y1 for |
| bottom-top | Y1 of element 1 is greater than y2 of |
The node comparison module is specifically implemented as follows:
(4) and traversing the node A which changes with the reference browser, and obtaining a matched node B from the matching table.
(5) And comparing the parent-child relationship of A and B.
(6) The sibling relationships of a and B are compared.
An efficient method for detecting cross-browser layout compatibility of a Web application is implemented as shown in fig. 1:
1) processing page data: and the data processing module is used for processing the page data of the reference browser and the page data of the browser to be tested respectively to obtain the changed area and the changed node in each event. The page data is composed of a series of event data such as: [ event, event. Firstly, a data processing module selects two adjacent event data, and maps nodes in each event data into a Map table according to id. And traversing the node id in the previous event, finding the corresponding node in a Map table of the next event, if the node id cannot be found, recording that the current node is the deleted node and deleting the node from the previous event, and if the node id is found, judging whether the node is changed according to the types and deleting the node from the previous event and the next event respectively. After the traversal is finished, if nodes still exist in the latter event, the nodes are recorded as added nodes. And then combining the changed nodes according to the coordinates to obtain a root node of the changed area. And then finding out parent nodes on the layout for the root nodes to serve as final root nodes of the change area. And re-traversing the nodes of the current event to find all the nodes in each change area, wherein the rule is that the node is contained by the root node of each change area. Finally, the processing of the module obtains the changed nodes and the changed areas of each event.
2) And matching the changed nodes, wherein the node matching module matches the changed nodes in the same event of the reference browser and the browser to be tested. And taking the changed nodes as the nodes to be matched, firstly, completely matching according to layers, and moving the nodes on the complete matching out of the list to be matched. And then carrying out global most similar matching on the rest nodes to be matched, and moving the matched nodes out of the list to be matched. And finally obtaining a node matching table.
3) And the AG graph constructing module constructs an AG graph through nodes in each change area in each event according to the coordinates, wherein the AG graph is composed of a parent-child relationship and a sibling relationship of each node.
4) And comparing the changed nodes, wherein the node comparison module compares the changed nodes in the same event of the reference browser and the browser to be tested. Traversing the changed node A in the reference browser, obtaining the matched node B from the node matching table, then respectively obtaining the parent-child relationship and the brother relationship of the node A and the node B from the corresponding AG graph, and comparing to finally obtain the problem of layout incompatibility of the node A and the node B.
The modules of the present invention will be described in detail with reference to examples.
As shown in fig. 2, fig. 3, and fig. 4, the data processing module of the present invention is specifically implemented as follows:
the data processing module is mainly responsible for processing page data of a single browser, and obtains a changed area and a changed node of the next event by comparing data of two adjacent events:
1) as shown in FIG. 2, the nodes in two adjacent events e and pe are compared according to the id allocated to the node to obtain the changed node in the e event. Nodes that do not exist in pe are nodes added in e; two nodes of the same id are pn in pe and n in e. If the pn and n attributes are not consistent, n is a node with changed attributes in e; if the coordinates of the pn and the n are not consistent, the n is a node with changed coordinates; if the xpath prefixes of the pn and the n are not consistent, such as/HTML/BODY/DIV/A and/HTML/BODY/SPAN/A, the n is a node with a changed father node; if the xpath serial numbers of pn and n are different,/HTML/BODY/DIV/A2 and/HTML/BODY/DIV/A3, then n is the node with order change; more nodes in pe than e are the deleted nodes in e.
2) As shown in fig. 3, merging all the change nodes results in several root nodes of local change regions. All the changed nodes n are traversed and n is compared with the node r in the root node list RL. N may be skipped if r contains n, r may be deleted if n contains r, and finally n is added to the root node list RL. The inclusion relationship is expressed as a coordinates (xa1, xa2, ya1, ya2), B coordinates (xb1, xb2, yb1, yb2), a contains B if xa1 [ < xb1& & xa2> & & xb2& & ya 1& & yb1& & ya2> -yb 2.
3) As shown in fig. 4, first, a parent node of a root node in a local change area is obtained, the root node obtained in fig. 3 belongs to a changed node, and in order to compare a parent-child relationship and a sibling relationship of the root node in subsequent detection, the module finds the parent node of the root node according to coordinates, and the rule is that the node satisfies two conditions, one is that the coordinates of the node include the root node, and the other is that the node has the smallest area among all nodes satisfying the first condition. Combining the areas with overlapped coordinates to obtain a final area with local change; and finally, traversing all nodes of the event to obtain all nodes in each change area, wherein the rule is that a certain node is contained by the area, and the node belongs to the change area.
As shown in fig. 5 and 6, the node matching module of the present invention is specifically implemented as follows:
the node matching module is mainly responsible for matching nodes of the same event change in a reference browser and a browser to be tested, and comprises the following two steps: full match by layer and global most similar match.
1) And according to complete matching, as shown in fig. 5, traversing the node n1 which changes in the reference browser from top to bottom according to the DOM tree, selecting the node p2 which is matched with the parent node p1 of the n1 from the matching table, comparing the n1 with all child nodes of the p2 in the DOM tree, if the node n2 is found to be identical to the node n1, namely the similarity is 1, matching the n1 with the n2 and storing the n1 into the matching table, and respectively removing the n1 and the n2 from the list to be matched.
2) Global most similar matching is as shown in fig. 6, the unmatched node n1 in the reference browser is traversed, the similarity is calculated with all the unmatched nodes n2 of the browser to be tested, the node with the highest similarity is the most similar node bm, bm and n1 are added into the matching table, and n1 and n2 are removed from the list to be matched.
As shown in fig. 7, the AG diagram constructing module of the present invention is specifically implemented as follows:
the AG graph constructing module is mainly responsible for constructing an AG graph for the area changed in each event to obtain the father node and the brother node of each node on the coordinate.
1) Traversing all nodes NL in the change area in the order from small to large according to the area of the nodes, selecting a head node n1, continuously traversing subsequent nodes, finding a first node n2 containing n1 for n1 as a parent node p of n1, calculating the parent-child relationship of the node n2 and the parent-child relationship according to the coordinates of p and n1, storing the parent-child relationship in n1 and storing n1 in a child node list of p.
2) And traversing all the father nodes p to obtain a child node list CL of p, constructing all the nodes in the CL into brothers, calculating brothers of the two nodes and storing the brothers into the two nodes respectively.
As shown in fig. 8, the node comparison module of the present invention is specifically implemented as follows:
1) the traversal of the reference browser changes the node to an1, and the matching node an2 is obtained from the matching table.
2) Judging whether the parent nodes of an1 and an2 are matched, if not, reporting that the parent nodes of an1 and an2 are not consistent, and ending the comparison of the nodes, otherwise, continuing to compare
3) And judging whether the parent-child relationships of an1 and an2 are consistent or not, and reporting that the parent-child relationships of the two are inconsistent if the parent-child relationships of the an1 and the an2 are inconsistent.
4) Traversing the sibling relationship of an1 to obtain s1, the corresponding sibling node is sn 1. And obtaining the node sn2 matched with the sn1 from the matching table. And judging whether the sibling nodes of an2 have sn2, if not, reporting that the sibling nodes of an1 and an2 are inconsistent, then re-taking out a new sibling relationship, and if so, continuing to compare.
5) And obtaining a sibling relation s2 in an2 according to the sn2, comparing whether s1 is consistent with s2, and reporting that the sibling relations of an1 and an2 are inconsistent if the sibling relations are inconsistent. And returning to the fourth step to compare other sibling relationships.
The above examples are provided only for the purpose of describing the present invention, and are not intended to limit the scope of the present invention. The scope of the invention is defined by the appended claims. Various equivalent substitutions and modifications can be made without departing from the spirit and principles of the invention, and are intended to be within the scope of the invention.
Claims (6)
1. An efficient Web application cross-browser layout compatibility detection system, comprising: the system comprises a data processing module, a node matching module, an Alignment GraphAG graph constructing module and a node comparing module, wherein:
the data processing module is responsible for processing page data collected from the reference browser and the browser to be tested; the module obtains a changed node and a changed area in each event by comparing data of two adjacent events, wherein the changed node comprises: added nodes, deleted nodes, coordinate-changed nodes, attribute-changed nodes, parent node-changed nodes, and nodes in order-changed in the parent node; sending the changed nodes to a node matching module, and sending the changed areas to an AG graph constructing module;
the node matching module is used for matching changed nodes in the same event in the reference browser and the browser to be tested based on changed node information obtained by the data processing module after each event is processed by the reference browser and the browser to be tested; the module comprises two steps: the method comprises the steps of complete matching according to layers and global most similar matching, wherein the complete matching according to layers refers to the fact that similarity comparison is carried out between a node to be matched in a browser to be tested and a node of the same layer in a reference browser until the same node is found; the global most similar matching means that the most similar node is found between the reference browser and the node which is not matched in the previous step in the browser to be tested and is used as a matched node;
an Alignment GraphAG graph constructing module which is responsible for constructing an Alignment GraphAG graph for the area changed in each event to obtain a father node and brother nodes of each node on the layout;
and the node comparison module is used for comparing whether the parent-child relationship and the brother relationship of the matched nodes are the same or not based on the Alignment GraphAG graph constructed by the AG graph construction module for the reference browser and the change area of the browser to be tested and the node matching information calculated by the node matching module for the reference browser and the change area of the browser to be tested, if the parent-child relationship and the brother relationship are the same, the problem of layout compatibility does not exist, and otherwise, the problem of layout compatibility exists between the two nodes.
2. The efficient Web application cross-browser layout compatibility detection system of claim 1, wherein: the data processing module is specifically realized as follows:
(1) when the Web application page is generated, an id is distributed to each newly created node, the data processing module obtains the same node in adjacent events according to the id, firstly, the following six changed nodes are obtained by comparing the data of the two adjacent events,
an added node that is not in a previous event but only in a subsequent event;
a deleted node, the node id not in the next event but in the previous event;
a coordinate-changing node, the node having different coordinates in a context;
the node with the changed attributes is different from the node attributes in the preceding and following events, and the node attributes comprise class and style;
the node changed by the father node is embodied in that the prefix of the Xpath is changed in the front and back events of the node;
the node with the sequence changed in the father node is embodied in that the sequence number of the Xpath is changed in the node in the front and back events;
(2) obtaining the six changed nodes, and then obtaining changed areas according to the changed nodes in the events;
(21) traversing all changed nodes in the event, obtaining a root node of a changed area in the event according to the inclusion relation among the nodes, wherein each node is represented by a rectangle in the generated page, the position of the rectangle is determined by the coordinates of the upper left corner and the lower right corner of the rectangle in the page, if the rectangle represented by the node A contains the rectangle represented by the node B, the node A is reserved as the root node, the node A continues to carry out comparison, and the node B does not carry out comparison;
the containment relationships between nodes are calculated as follows: let a coordinate representation of a (xa1, xa2, ya1, ya2), B coordinates (xb1, xb2, yb1, yb2), where (xa1, ya1) is the upper left coordinate of a, (xa2, ya2) is the lower right coordinate of a, (xb1, yb1) is the upper left coordinate of B, (xb2, yb2) is the lower right coordinate of B, if xa1< ═ xb1, and xa2> -xb 2, and ya1> -yb 1, and ya2< ═ yb2, then a contains B;
(22) the root node obtained in the step (21) belongs to a node which changes in the event, in order to compare the parent-child relationship and the brother relationship of the root node in the subsequent detection, the parent node of the root node is found according to the coordinates, and the rule is that the node meets two conditions, wherein the coordinates of the node contain the root node, and the node is the node with the smallest area in all the nodes meeting the condition I;
(23) and (3) taking the father node obtained in the step (22) as a final root node of the changed region in the event, traversing all the nodes to obtain nodes in the changed region in the event, wherein the nodes comprise unchanged nodes, and the rule is that if a certain node is contained by the root node, the node belongs to the changed region in the event.
3. The efficient Web application cross-browser layout compatibility detection system of claim 1, wherein: the node matching module is specifically realized as follows:
respectively taking the changed nodes in the reference browser and the browser to be matched as respective nodes to be matched,
(1) completely matching according to layers, traversing a node A which changes in a reference browser from top to bottom according to a DOM tree, selecting a node PB which is matched with a father node PA of the node A in the browser to be tested, comparing the node A with a child node of the node PB in the DOM tree, matching the node A with the node B and storing the node B into a matching table if the node B is found to be completely the same as the node A, namely the similarity is 1, and respectively moving the node A and the node B out of a list to be matched;
(2) globally most similar matching, traversing the node A of the reference browser to-be-matched list, selecting the node B with the highest similarity with the node A from the to-be-matched list of the browser to be tested, wherein the similarity of the node B and the node A is higher than a threshold value, namely the node A and the node B are matched and stored in a matching table, and the node A and the node B are respectively moved out of the to-be-matched list;
(3) and referring to the residual nodes in the to-be-matched lists of the browser and the to-be-tested browser, namely the unmatched nodes.
4. The efficient Web application cross-browser layout compatibility detection system of claim 1, wherein: the AG diagram construction module is specifically realized as follows:
(1) the Alignment graph AG graph describes two structural relationships of elements in a page: for two nodes A and B, if A is the node with the smallest area in all the nodes containing B, A is the father of B, B is the child of A, and the relationship among all the child nodes of the node A is the brother relationship; in order to construct an Alignment GraphAG graph, firstly traversing nodes in a change area according to the sequence of the node areas from small to large, traversing subsequent nodes for each traversed node A, finding a first node containing A as a father node P of the A, calculating the father-son relationship of the P and the A according to the coordinates of the P and the A, and storing the A into a son node list of the P;
(2) traversing all father nodes P in the change area again to obtain a child node list CL of P, constructing all nodes in the CL into brothers pairwise, and calculating brothers relationship of the nodes according to coordinates;
(3) after the two steps, each node has a parent-child relationship list and a sibling relationship list.
5. The efficient Web application cross-browser layout compatibility detection system of claim 1, wherein: the node comparison module is specifically implemented as follows:
(1) traversing the node A which changes with reference to the browser, and inquiring a matching table output from the node matching module to obtain a matched node B;
(2) inquiring the parent-child relationships respectively constructed by the Alignment GraphAG graph construction module for the node A and the node B, and comparing, wherein if the A and the B have the same parent-child relationship, the problem of layout compatibility does not exist, otherwise, the problem of layout compatibility exists;
(3) and inquiring brother relations respectively constructed by the Alignment graph AG graph construction module for the node A and the node B, and comparing, wherein if the A and the B have the same brother relation, the problem of layout compatibility does not exist, otherwise, the problem of layout compatibility exists.
6. An efficient method for detecting the cross-browser layout compatibility of Web application is characterized by comprising the following implementation steps:
(1) processing page data: respectively processing page data of a reference browser and a browser to be tested to obtain a changed area and a changed node in each event, firstly obtaining page data before and after the event occurs for each event, mapping the nodes in the page data into a Map table according to id, traversing the page data node id before the event occurs, finding a corresponding node in the page data Map table after the event occurs, if the node cannot be found, recording the current node as a deleted node and deleting the deleted node from the page data Map table before the event occurs, and if the node is found, judging whether the node is changed according to the types and deleting the node from the page data Map table before and after the event occurs respectively; after traversing is finished, if nodes exist in the page data Map table after the event occurs, recording the nodes as added nodes; then combining the changed nodes according to the coordinates to obtain a root node of the changed area; then finding out father nodes on the layout for the root nodes to serve as final root nodes of the change area; re-traversing the nodes of the current event to find all the nodes in each change area, wherein the rule is that the node is contained by the root node of each change area; finally, processing the page data to obtain the changed nodes and changed areas of each event;
(2) matching the changed nodes, namely matching the changed nodes in the same event of the reference browser and the browser to be tested; taking the changed nodes as nodes to be matched, generating a node list to be matched, firstly, carrying out complete matching according to layers, moving the nodes on the complete matching out of the node list to be matched, then carrying out global most similar matching on the rest nodes to be matched, and moving the matched nodes out of the node list to be matched; finally, a node matching table is obtained;
(3) constructing an Alignment GraphAG graph of the change area, wherein an Alignment GraphAG graph constructing module constructs an Alignment GraphAG graph through node coordinates in each change area after an event occurs, and the Alignment GraphAG graph is composed of a parent-child relationship and a brother relationship of each node;
(4) and comparing the changed nodes, namely comparing the changed nodes in the same event of the reference browser and the browser to be tested, traversing the changed node A in the reference browser, obtaining a matched node B from the node matching table, then respectively obtaining the parent-child relationship and the brother relationship of the A and the B from the corresponding Alignment graph AG diagram, and comparing to finally obtain the problem of layout incompatibility of the A and the B.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201611242296.3A CN106649805B (en) | 2016-12-29 | 2016-12-29 | Efficient detection system and method for cross-browser layout compatibility of Web application |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201611242296.3A CN106649805B (en) | 2016-12-29 | 2016-12-29 | Efficient detection system and method for cross-browser layout compatibility of Web application |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106649805A CN106649805A (en) | 2017-05-10 |
| CN106649805B true CN106649805B (en) | 2020-02-11 |
Family
ID=58835808
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201611242296.3A Active CN106649805B (en) | 2016-12-29 | 2016-12-29 | Efficient detection system and method for cross-browser layout compatibility of Web application |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106649805B (en) |
Families Citing this family (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107480192A (en) * | 2017-07-12 | 2017-12-15 | 长城计算机软件与系统有限公司 | A kind of method and system of browser interface adjust automatically |
| CN108304318B (en) * | 2018-01-02 | 2020-12-04 | 深圳壹账通智能科技有限公司 | Device compatibility testing method and terminal device |
| CN108845799B (en) * | 2018-06-04 | 2021-10-01 | 南京南瑞继保电气有限公司 | Visual program verification method and device and computer readable storage medium |
| CN109684220A (en) * | 2018-12-26 | 2019-04-26 | 苏州博纳讯动软件有限公司 | A kind of browser compatibility analysis method based on event replay |
| CN111752663B (en) * | 2020-06-29 | 2023-06-30 | 广东电网有限责任公司 | Method and device for repairing layout compatibility problem in Web application |
| CN112380116A (en) * | 2020-11-10 | 2021-02-19 | 深圳市共进电子股份有限公司 | Browser comparison test method and device and browser data forwarding method |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104866570A (en) * | 2015-05-22 | 2015-08-26 | 国云科技股份有限公司 | Method for implementing CSS multi-browser compatibility |
| CN105468779A (en) * | 2015-12-16 | 2016-04-06 | 中国科学院软件研究所 | Browser compatibility detection oriented client Web application capture and playback system and method |
| CN106168959A (en) * | 2016-06-29 | 2016-11-30 | 合网络技术（北京）有限公司 | Page layout method and device |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8316387B2 (en) * | 2008-08-28 | 2012-11-20 | Microsoft Corporation | Exposure of remotely invokable method through a webpage to an application outside web browser |
| US20150331864A1 (en) * | 2014-05-14 | 2015-11-19 | Eric Lucas | Ranking and rating system and method utilizing a computer network |
-
2016
- 2016-12-29 CN CN201611242296.3A patent/CN106649805B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104866570A (en) * | 2015-05-22 | 2015-08-26 | 国云科技股份有限公司 | Method for implementing CSS multi-browser compatibility |
| CN105468779A (en) * | 2015-12-16 | 2016-04-06 | 中国科学院软件研究所 | Browser compatibility detection oriented client Web application capture and playback system and method |
| CN106168959A (en) * | 2016-06-29 | 2016-11-30 | 合网络技术（北京）有限公司 | Page layout method and device |
Non-Patent Citations (1)
| Title |
|---|
| 面向浏览器不兼容性的自动化测试的研究;吴小东等;《计算机应用与软件》;20160315;第14页-第17页，第30页 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106649805A (en) | 2017-05-10 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106649805B (en) | Efficient detection system and method for cross-browser layout compatibility of Web application | |
| EP3928168B1 (en) | Automatic extraction of assets data from engineering data sources | |
| Tong et al. | A linear road object matching method for conflation based on optimization and logistic regression | |
| US10078802B2 (en) | Method and system of discovering and analyzing structures of user groups in microblog | |
| US8433714B2 (en) | Data cell cluster identification and table transformation | |
| US8145703B2 (en) | User interface and method in a local search system with related search results | |
| US7809721B2 (en) | Ranking of objects using semantic and nonsemantic features in a system and method for conducting a search | |
| US11657101B2 (en) | Document information extraction system using sequenced comparators | |
| US20090248707A1 (en) | Site-specific information-type detection methods and systems | |
| US10650559B2 (en) | Methods and systems for simplified graphical depictions of bipartite graphs | |
| US20090132646A1 (en) | User interface and method in a local search system with static location markers | |
| CN115546809A (en) | Table structure identification method based on cell constraint and application thereof | |
| CN116682130A (en) | Method, device and equipment for extracting icon information and readable storage medium | |
| CN111858613B (en) | Service data retrieval method | |
| CN115147857A (en) | Semantic analysis-based method and system for structured extraction of symmetric table character data | |
| RU2433467C1 (en) | Method of forming aggregated data structure and method of searching for data through aggregated data structure in data base management system | |
| CN101996190A (en) | Method and device for extracting information from webpage | |
| CN108628703B (en) | Mirror image website discovery method and system based on visual similarity | |
| CN113609433B (en) | Method and device for determining arithmetic layout, electronic equipment and storage medium | |
| US20090132486A1 (en) | User interface and method in local search system with results that can be reproduced | |
| CN114596070A (en) | Product optimization design platform construction method based on knowledge graph | |
| CN109086450B (en) | Web deep network query interface detection method | |
| Cheng et al. | Generic cumulative annular bucket histogram for spatial selectivity estimation of spatial database management system | |
| CN114218215B (en) | Optimized rendering method for large-scale GIS data | |
| US20090132505A1 (en) | Transformation in a system and method for conducting a search |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |