CN104077221A - Style test method and device for front-end page - Google Patents
Style test method and device for front-end page Download PDFInfo
- Publication number
- CN104077221A CN104077221A CN201410303018.9A CN201410303018A CN104077221A CN 104077221 A CN104077221 A CN 104077221A CN 201410303018 A CN201410303018 A CN 201410303018A CN 104077221 A CN104077221 A CN 104077221A
- Authority
- CN
- China
- Prior art keywords
- node
- coordinate
- interval
- end page
- actual
- 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.)
- Granted
Links
Landscapes
- Design And Manufacture Of Integrated Circuits (AREA)
Abstract
The invention provides a style test method and a style test device for a front-end page. The method comprises: traversing nodes on a dom tree corresponding to the front-end page, and computing the actual coordinate region of each node according to space length and width occupied by each node and the initial coordinate of each node; comparing the actual coordinate region of each node with the actual coordinate region of the adjacent brother node or with the current coordinate region to judge whether the coordinate regions are overlapped; using at least one node of the two nodes of which the coordinate regions are overlapped as the mode having style defects. Compared with prior art, the style test method and device for the front-end page have the advantages that: whether a style error exists in the front-end page can be dynamically identified, thus not only greatly reducing workload of testers but also significantly improving efficiency and accuracy.
Description
Technical field
The present invention relates to a kind of pattern method of testing and device of the front end page, relate in particular to a kind of for element position in the front end page overlapping method of testing and device.
Background technology
In the test process of product line, the pattern test job of the front end page is a very important part.The pattern of the front end page may exist the series of problems such as element dislocation, word folding row, picture and text aliasing, and these problems affect the bandwagon effect of the page all the time, bring very large quality problems.
All the time, the test of the pattern of the front end page has spent tester's great effort, at present, tester can only open some browsers, with the naked eye checks whether page effect meets expection, and not only efficiency is very low for this, and inaccurate, careless slightlyly will omit possible bug.In addition, when carrying out regression test, tester still needs to open all pages by some browsers, repeats identical clicking operation, with the naked eye confirms page effect, wastes time and energy.
Summary of the invention
One of object of the present invention is to provide a kind of pattern method of testing and device of the front end page.
One of for achieving the above object, an embodiment of the present invention provides a kind of pattern method of testing of the front end page, and it comprises:
Travel through the node on the dom tree that the front end page is corresponding, the space length and width and the origin coordinates that according to each node, take, the actual coordinate that calculates each node is interval;
Actual coordinate interval or the current coordinate interval of the brotgher of node that the actual coordinate interval of each node is adjacent compare, and judge whether its coordinate interval has overlapping;
Coordinate interval is had two overlapping nodes at least one of them as the node with pattern defect.
As the further improvement of an embodiment of the present invention, described " traveling through the node on the dom tree that the front end page is corresponding, the space length and width and the origin coordinates that take according to each node, the actual coordinate interval of calculating each node " step specifically comprises:
First, the actual coordinate of the brotgher of node of the cotyledon node under calculating father node and described cotyledon node is interval;
Secondly, calculate the actual coordinate interval of described father node.
As the further improvement of an embodiment of the present invention, described actual coordinate interval is: (coordinate-node on edge, node the top is the coordinate on edge bottom; The coordinate on coordinate-node rightmost edge on node Far Left edge).
As the further improvement of an embodiment of the present invention, described " actual coordinate interval or the current coordinate interval of the brotgher of node that the actual coordinate interval of each node is adjacent compare, and judge whether its coordinate interval has overlapping " step specifically comprises:
Judge that whether present node and next node are set membership, if so, finish the comparison of present node; If not, continue comparison;
Judge whether present node and next node are relation of inclusion, if so, finish the comparison of present node, if not, actual coordinate interval or current coordinate interval interval according to the actual coordinate of present node and next node compare, and judge whether coordinate interval exists overlapping.
One of for achieving the above object, an embodiment of the present invention provides a kind of pattern method of testing of the front end page, and it comprises:
Travel through the node on the dom tree that the front end page is corresponding, the space length and width and the origin coordinates that according to each node, take, the actual coordinate that calculates each node is interval;
When the actual coordinate interval of a node is not identical with the current coordinate interval of this node, using this node as the node with pattern defect.
As the further improvement of an embodiment of the present invention, described " traveling through the node on the dom tree that the front end page is corresponding, the space length and width and the origin coordinates that take according to each node, the actual coordinate interval of calculating each node " step specifically comprises:
First, the actual coordinate of the brotgher of node of the cotyledon node under calculating father node and described cotyledon node is interval;
Secondly, calculate the actual coordinate interval of described father node.
As the further improvement of an embodiment of the present invention, described actual coordinate interval is: (coordinate-node on edge, node the top is the coordinate on edge bottom; The coordinate on coordinate-node rightmost edge on node Far Left edge).
One of for achieving the above object, an embodiment of the present invention provides a kind of pattern proving installation of the front end page, and it comprises:
Query count module, for traveling through the node on the dom tree that the front end page is corresponding, the space length and width and the origin coordinates that according to each node, take, the actual coordinate that calculates each node is interval;
Comparing module, for the actual coordinate of the brotgher of node that the actual coordinate interval of each node is adjacent, interval or current coordinate interval compares, and judges whether its coordinate interval has overlapping;
Output module, for coordinate interval is had two overlapping nodes at least one of them as the node with pattern defect.
As the further improvement of an embodiment of the present invention, described actual coordinate interval is: (coordinate-node on edge, node the top is the coordinate on edge bottom; The coordinate on coordinate-node rightmost edge on node Far Left edge).
As the further improvement of an embodiment of the present invention, described comparing module is used for:
Judge that whether present node and the brotgher of node are set membership, if so, finish the comparison of present node; If not, continue comparison;
Judge whether present node and the brotgher of node are relation of inclusion, if so, finish the comparison of present node, if not, actual coordinate interval or current coordinate interval interval according to the actual coordinate of present node and its brotgher of node compare, and judge whether coordinate interval exists overlapping.
One of for achieving the above object, an embodiment of the present invention provides a kind of pattern proving installation of the front end page, and it comprises:
Query count module, for traveling through the node on the dom tree that the front end page is corresponding, the space length and width and the origin coordinates that according to each node, take, the actual coordinate that calculates each node is interval;
Comparing module, for comparing the actual coordinate interval of each node with the current coordinate interval of this node;
Output module, when the actual coordinate of node interval when not identical with current coordinate interval, using this node as the node with pattern defect.
As the further improvement of an embodiment of the present invention, described actual coordinate interval is: (coordinate-node on edge, node the top is the coordinate on edge bottom; The coordinate on coordinate-node rightmost edge on node Far Left edge).
Compared with prior art, the invention has the beneficial effects as follows: whether the capable of dynamic identification front end page exists pattern mistake, not only greatly reduces tester's workload, and has significantly improved efficiency and accuracy.
Accompanying drawing explanation
Figure 1A～1C is the instance graph of front end page pattern defect in an embodiment of the present invention.
Fig. 2 is the process flow diagram of pattern method of testing of the front end page of an embodiment of the present invention;
Fig. 3 is the process flow diagram that judges in an embodiment of the present invention that whether coordinate interval is overlapping;
Fig. 4 is the process flow diagram of pattern detection mode of the front end page of another embodiment of the present invention;
Fig. 5 A～5H is the overlapping schematic diagram of the element of the front end page in an embodiment of the present invention;
Fig. 6 is the module map of pattern proving installation of the front end page of an embodiment of the present invention.
Embodiment
Below with reference to each embodiment shown in the drawings, describe the present invention.But these embodiments do not limit the present invention, the conversion in the structure that those of ordinary skill in the art makes easily according to these embodiments, method or function is all included in protection scope of the present invention.
As shown in Figure 1A, a hurdle above this front end page, all elements belongs to same div element, and the link of the child node that its element is corresponding " details page-please Click here " and the icon on right side belong to the brotgher of node, and they should occupy certain space length and width separately.Yet there is overlapping region in the space occupying due to " details page-please the Click here " space occupying and the pentagram icon on right side, thereby has caused occurring that pentagram blocks situation word " here " in the front end page.
As shown in Figure 1B, the highlight regions in figure has shown that " details page-please Click here " links manual space length and width, and as shown in Figure 1 C, the highlight regions in figure has shown pentagram icon, sent the space length and width that note icon occupies.Be not difficult to find out, the right side area of " details page-please Click here " link and the left field at pentagram icon place all exist overlapping with vertical direction in the horizontal direction, thereby cause pentagram icon to block the normal demonstration that " details page-please Click here " links, occurred the mistake of picture and text aliasings.
As shown in Figure 2, an embodiment of the present invention provides a kind of pattern method of testing of the front end page, and it comprises:
Travel through the node on the dom tree that the front end page is corresponding, the space length and width and the origin coordinates that according to each node, take, the actual coordinate that calculates each node is interval;
The front end page can be understood as a dom tree, and each element in the page is a node for dom tree.The content of the front end page and pattern are to realize by put or fill different elements on the diverse location of the page, and different disposing ways has formed different dom trees, have also just formed the front end page of different content and pattern.In an embodiment of the present invention, carry out to upper strata from bottom in the actual coordinate interval of traversal computing node:
The actual coordinate of the brotgher of node that first calculates cotyledon node under father node and described cotyledon node is interval; The actual coordinate that calculates again described father node is interval.For example, first travel through and calculate the cotyledon node N under father node N, then, judge whether this cotyledon node N exists the brotgher of node, if there is the brotgher of node-cotyledon node N ' in this cotyledon node N, the actual coordinate that calculates this cotyledon node N ' is interval, until all cotyledon nodes under described father node N have been calculated, then calculate the actual coordinate interval of father node N; Then, judge whether father node N exists the brotgher of node-father node M, if exist, calculate the cotyledon node under father node M ... so repeatedly, until complete the calculating of the lower all nodes of dom tree.
Take Figure 1A as example, by the traversal front end page, corresponding dom sets, can inquire and comprise and " details page-please the Click here " node that this element is corresponding, and obtain the attribute of this node, for example, the space length and width that this node takies are in the horizontal direction 150px, and its current coordinate interval is in the horizontal direction (200,300), wherein, its starting point coordinate is (200,0), through calculating, can learn, the actual coordinate interval of this node should be (200, (200+150))=(200,350).
Actual coordinate interval or current coordinate the interval actual coordinate of each node is interval and its brotgher of node compare, and judge whether its coordinate interval has overlapping; Wherein, current coordinate interval refers to that the lower defined coordinate of the current dom tree of this coordinate is interval.
Take Figure 1A as example, and the current coordinate of pentagram icon interval is (300,310).Significantly, the current coordinate of this pentagram icon actual coordinate interval interval and text " details page-please Click here " exists overlapping, can judge that this overlapping meeting causes the element of the front end page to have the situation of pattern aliasing.Current, also can intervally by the actual coordinate of " details page-please Click here " compare with the actual coordinate interval of pentagram icon, the actual coordinate of the pentagram icon for example calculating by above-mentioned steps is interval for (300,320), so, the current coordinate of this pentagram icon actual coordinate interval interval and text " details page-please Click here " exists overlapping.
Wherein, in an embodiment of the present invention, as shown in Figure 3, above-mentioned comparison and deterministic process specifically comprise:
Judge whether present node and next node are set membership, if so, do not compare, get another node as present node row judgement again, if not, whether overlappingly compare in the manner described above actual coordinate actual coordinate interval or the current coordinate interval interval and next node of present node;
Judge whether present node and next node are relation of inclusion, if, do not compare, get another node as present node row judgement again, if not, actual coordinate interval or current coordinate interval interval according to the actual coordinate of present node and next node compare, and judge whether coordinate interval exists overlapping.
Coordinate interval is had two overlapping nodes at least one of them as the node with pattern defect.Further, in an embodiment of the present invention, can automatically for the region with pattern defect, carry out mark and sectional drawing, and output test result.
It should be noted that in the above-mentioned example with Figure 1A to Fig. 1 C, for convenient statement and understanding, only got the coordinate of a dimension, be horizontal coordinate x, yet in fact described actual coordinate interval comprise: (coordinate-node on edge, node the top is the coordinate on edge bottom; The coordinate on coordinate-node rightmost edge on node Far Left edge).In any one dimension, there is the overlapping element pattern aliasing that all can cause the front end page.
As shown in Figure 4, another embodiment of the present invention provides a kind of pattern method of testing of the front end page, and it comprises:
Travel through the node on the dom tree that the front end page is corresponding, the actual coordinate that calculates each node according to the real area of the origin coordinates of each node and node is interval;
The front end page can be understood as a dom tree, and each element in the page is a node for dom tree.The content of the front end page and pattern are to realize by put or fill different elements on the diverse location of the page, and different disposing ways has formed different dom trees, have also just formed the front end page of different content and pattern.In an embodiment of the present invention, carry out to upper strata from bottom in the actual coordinate interval of traversal computing node:
The actual coordinate of the brotgher of node that first calculates cotyledon node under father node and described cotyledon node is interval; The actual coordinate that calculates again described father node is interval.For example, first travel through and calculate the cotyledon node N under father node N, then, judge whether this cotyledon node N exists the brotgher of node, if there is the brotgher of node-cotyledon node N ' in this cotyledon node N, the actual coordinate that calculates this cotyledon node N ' is interval, until all cotyledon nodes under described father node N have been calculated, then calculate the actual coordinate interval of father node N; Then, judge whether father node N exists the brotgher of node-father node M, if exist, calculate the cotyledon node under father node M ... so repeatedly, until complete the calculating of the lower all nodes of dom tree.
When the actual coordinate interval of a node is not identical with the current coordinate interval of this node, using this node as the node with pattern defect, wherein, current coordinate interval refers to that the lower defined coordinate of the current dom tree of this coordinate is interval.
Take Figure 1A as example, by the traversal front end page, corresponding dom sets, can inquire and comprise and " details page-please the Click here " node that this element is corresponding, and obtain the attribute of this node, for example, the space length and width that this node takies are in the horizontal direction 150px, and its current coordinate interval is in the horizontal direction (200,300), wherein, its starting point coordinate is (200,0), through calculating, can learn, the actual coordinate interval of this node should be (200, (200+150))=(200,350).So, the actual coordinate of this node current coordinate interval interval and this node be with, obviously, it is inconsistent at the represented element of the front end page and default typesetting, has pattern defect.Further, also can be only when the actual coordinate interval of node be greater than the current coordinate interval of this node, using this node as the node with pattern defect.
In an embodiment of the present invention, can automatically for the region with pattern defect, carry out mark and sectional drawing, and output test result.
It should be noted that in the above-mentioned example with Figure 1A to Fig. 1 C, for convenient statement and understanding, only got the coordinate of a dimension, be horizontal coordinate x, yet in fact described actual coordinate interval comprise: (coordinate-node on edge, node the top is the coordinate on edge bottom; The coordinate on coordinate-node rightmost edge on node Far Left edge).In any one dimension, occur that actual coordinate is interval inconsistent with current coordinate interval, all can cause the element of the front end page to there is pattern defect.
As shown in Fig. 5 A～5H, in an embodiment of the present invention, the element overlap mode of the front end page roughly comprises following several, wherein, being greater than, being less than in formula is all numerical values recited judgements by corresponding coordinate, in the front end page, using the upper left corner as zero point, vertically increase to the right and downwards:
As shown in 5A, overlap mutually the upper left of the bottom right of A element and B element.From the coordinates regional reflection of node, the left margin coordinate of the left margin coordinate <B element of A element; The left margin coordinate of the width G reatT.GreaT.GTB element that left margin coordinate+A element of A element takies in the horizontal direction; The upper edge coordinate of the upper edge coordinate <B element of A element; The upper edge coordinate of the height >B element that upper edge coordinate+A element of A element takies in vertical direction, the lower edge coordinate of the lower edge coordinate <B element of A element.
As shown in 5B, overlap mutually the lower-left of the upper right of A element and B element.From the coordinates regional reflection of node, the left margin coordinate of the left margin coordinate <B element of A element; The left margin coordinate of the width G reatT.GreaT.GTB element that left margin coordinate+A element of A element takies in the horizontal direction; The upper edge coordinate of the upper edge coordinate >B element of A element; The upper edge coordinate of the height >A element that upper edge coordinate+B element of B element takies in vertical direction, the lower edge coordinate of the lower edge coordinate >B element of A element.
As shown in Figure 5 C, overlap mutually in the left side of the right side of A element and B element.From the coordinates regional reflection of node, the left margin coordinate of the left margin coordinate <B element of A element; The left margin coordinate of the width G reatT.GreaT.GTB element that left margin coordinate+A element of A element takies in the horizontal direction; The upper edge coordinate of the upper edge coordinate <B element of A element; The upper edge coordinate of the height >B element that upper edge coordinate+A element of A element takies in vertical direction, the lower edge coordinate of the lower edge coordinate >B element of A element.
As shown in Figure 5 D, overlap mutually in the left side of the right side of A element and B element.From the coordinates regional reflection of node, the left margin coordinate of the left margin coordinate <B element of A element; The left margin coordinate of the width G reatT.GreaT.GTB element that left margin coordinate+A element of A element takies in the horizontal direction; The upper edge coordinate of the upper edge coordinate >B element of A element; The upper edge coordinate of the height >B element that upper edge coordinate+A element of A element takies in vertical direction, the lower edge coordinate of the lower edge coordinate <B element of A element.
As shown in Fig. 5 E, the downside of the upside of A element and B element overlaps mutually.From the coordinates regional reflection of node, the upper edge coordinate of the upper edge coordinate >B element of A element; The upper edge coordinate of the height >A element that upper edge coordinate+B element of B element takies in vertical direction; The left margin coordinate of the left margin coordinate >B element of A element; The left margin coordinate of the width G reatT.GreaT.GTA element that left margin coordinate+B element of B element takies in the horizontal direction, the lower edge coordinate of the lower edge coordinate >B element of A element; The right of A element is along the right of coordinate <B element along coordinate.
As shown in Fig. 5 F, the upside of the downside of A element and B element overlaps mutually.From the coordinates regional reflection of node, the upper edge coordinate of the upper edge coordinate <B element of A element; The upper edge coordinate of the height >B element that upper edge coordinate+A element of A element takies in vertical direction; The left margin coordinate of the left margin coordinate >B element of A element; The left margin coordinate of the width G reatT.GreaT.GTA element that left margin coordinate+B element of B element takies in the horizontal direction, the lower edge coordinate of the lower edge coordinate <B element of A element; The right of A element is along the right of coordinate <B element along coordinate.
As shown in Fig. 5 G, the upside of the downside of A element and B element overlaps mutually.From the coordinates regional reflection of node, the upper edge coordinate of the upper edge coordinate <B element of A element; The upper edge coordinate of the height >B element that upper edge coordinate+A element of A element takies in vertical direction; The left margin coordinate of the left margin coordinate <B element of A element; The left margin coordinate of the width G reatT.GreaT.GTB element that left margin coordinate+A element of A element takies in the horizontal direction, the lower edge coordinate of the lower edge coordinate <B element of A element; The right of A element is along the right of coordinate >B element along coordinate.
As shown in Fig. 5 H, overlap mutually the both sides up and down of the left and right sides of A element and B element.From the coordinates regional reflection of node, the upper edge coordinate of the upper edge coordinate >B element of A element; The upper edge coordinate of the height >A element that upper edge coordinate+B element of B element takies in vertical direction; The left margin coordinate of the left margin coordinate <B element of A element; The left margin coordinate of the width G reatT.GreaT.GTA element that left margin coordinate+B element of B element takies in the horizontal direction, the lower edge coordinate of the lower edge coordinate >B element of A element; The right of A element is along the right of coordinate <B element along coordinate.
As shown in Figure 6, in an embodiment of the present invention, the pattern proving installation of the front end page comprises query count module 100, contrast module 200, output module 300, wherein,
Described query count module 100, for traveling through the node on the dom tree that the front end page is corresponding, the space length and width and the origin coordinates that according to each node, take, the actual coordinate that calculates each node is interval;
The front end page can be understood as a dom tree, and each element in the page is a node for dom tree.The content of the front end page and pattern are to realize by put or fill different elements on the diverse location of the page, and different disposing ways has formed different dom trees, have also just formed the front end page of different content and pattern.In an embodiment of the present invention, carry out to upper strata from bottom in the actual coordinate interval of traversal computing node:
The actual coordinate of the brotgher of node that first calculates cotyledon node under father node and described cotyledon node is interval; The actual coordinate that calculates again described father node is interval.For example, first travel through and calculate the cotyledon node N under father node N, then, judge whether this cotyledon node N exists the brotgher of node, if there is the brotgher of node-cotyledon node N ' in this cotyledon node N, the actual coordinate that calculates this cotyledon node N ' is interval, until all cotyledon nodes under described father node N have been calculated, then calculate the actual coordinate interval of father node N; Then, judge whether father node N exists the brotgher of node-father node M, if exist, calculate the cotyledon node under father node M ... so repeatedly, until complete the calculating of the lower all nodes of dom tree.
Take Figure 1A as example, by the traversal front end page, corresponding dom sets, can inquire and comprise and " details page-please the Click here " node that this element is corresponding, and obtain the attribute of this node, for example, the space length and width that this node takies are in the horizontal direction 150px, and its current coordinate interval is in the horizontal direction (200,300), wherein, its starting point coordinate is (200,0), through calculating, can learn, the actual coordinate interval of this node should be (200, (200+150))=(200,350).
Comparing module 200, for the actual coordinate of each node is interval, compare with actual coordinate interval or the current coordinate interval of its brotgher of node, judge whether its coordinate interval has overlapping, wherein, current coordinate interval refers to that the lower defined coordinate of the current dom tree of this coordinate is interval;
Take Figure 1A as example, and the current coordinate of pentagram icon interval is (300,310).Significantly, the current coordinate of this pentagram icon actual coordinate interval interval and text " details page-please Click here " exists overlapping, can judge that this overlapping meeting causes the element of the front end page to have the situation of pattern aliasing.Current, also can intervally by the actual coordinate of " details page-please Click here " compare with the actual coordinate interval of pentagram icon, the actual coordinate of the pentagram icon for example calculating by above-mentioned steps is interval for (300,320), so, the current coordinate of this pentagram icon actual coordinate interval interval and text " details page-please Click here " exists overlapping.
Wherein, in an embodiment of the present invention, described comparing module 200 also for
Judge whether present node and next node are set membership, if so, do not compare, get another node as present node row judgement again, if not, whether overlappingly compare in the manner described above actual coordinate actual coordinate interval or the current coordinate interval interval and next node of present node;
Judge whether present node and next node are relation of inclusion, if, do not compare, get another node as present node row judgement again, if not, actual coordinate interval or current coordinate interval interval according to the actual coordinate of present node and next node compare, and judge whether coordinate interval exists overlapping.
Output module 300, for coordinate interval is had two overlapping nodes at least one of them as the node with pattern defect.Further, in an embodiment of the present invention, can automatically for the region with pattern defect, carry out mark and sectional drawing, and output test result.
It should be noted that in the above-mentioned example with Figure 1A to Fig. 1 C, for convenient statement and understanding, only got the coordinate of a dimension, be horizontal coordinate x, yet in fact described actual coordinate interval comprise: (coordinate-node on edge, node the top is the coordinate on edge bottom; The coordinate on coordinate-node rightmost edge on node Far Left edge).In any one dimension, there is the overlapping element pattern aliasing that all can cause the front end page.
As shown in Figure 5, an embodiment of the present invention provides the pattern proving installation of the another kind of front end page, comprises query count module 100, comparing module 200, output module 300, wherein,
Query count module 100, for traveling through the node on the dom tree that the front end page is corresponding, the actual coordinate that calculates each node according to the real area of the origin coordinates of each node and node is interval;
The front end page can be understood as a dom tree, and each element in the page is a node for dom tree.The content of the front end page and pattern are to realize by put or fill different elements on the diverse location of the page, and different disposing ways has formed different dom trees, have also just formed the front end page of different content and pattern.In an embodiment of the present invention, carry out to upper strata from bottom in the actual coordinate interval of traversal computing node:
The actual coordinate of the brotgher of node that first calculates cotyledon node under father node and described cotyledon node is interval; The actual coordinate that calculates again described father node is interval.For example, first travel through and calculate the cotyledon node N under father node N, then, judge whether this cotyledon node N exists the brotgher of node, if there is the brotgher of node-cotyledon node N ' in this cotyledon node N, the actual coordinate that calculates this cotyledon node N ' is interval, until all cotyledon nodes under described father node N have been calculated, then calculate the actual coordinate interval of father node N; Then, judge whether father node N exists the brotgher of node-father node M, if exist, calculate the cotyledon node under father node M ... so repeatedly, until complete the calculating of the lower all nodes of dom tree.
Comparing module 200, for the actual coordinate interval of each node is compared with the current coordinate interval of this node, wherein, current coordinate interval refers to that the lower defined coordinate of the current dom tree of this coordinate is interval;
Output module 300, when not identical with current coordinate interval for the actual coordinate interval when node, using this node as the node with pattern defect.
Take Figure 1A as example, by the traversal front end page, corresponding dom sets, can inquire and comprise and " details page-please the Click here " node that this element is corresponding, and obtain the attribute of this node, for example, the space length and width that this node takies are in the horizontal direction 150px, and its current coordinate interval is in the horizontal direction (200,300), wherein, its starting point coordinate is (200,0), through calculating, can learn, the actual coordinate interval of this node should be (200, (200+150))=(200,350).So, the actual coordinate of this node current coordinate interval interval and this node be with, obviously, it is inconsistent at the represented element of the front end page and default typesetting, has pattern defect.Further, also can be only when the actual coordinate interval of node be greater than the current coordinate interval of this node, using this node as the node with pattern defect.
In an embodiment of the present invention, can automatically for the region with pattern defect, carry out mark and sectional drawing, and output test result.
It should be noted that in the above-mentioned example with Figure 1A to Fig. 1 C, for convenient statement and understanding, only got the coordinate of a dimension, be horizontal coordinate x, yet in fact described actual coordinate interval comprise: (coordinate-node on edge, node the top is the coordinate on edge bottom; The coordinate on coordinate-node rightmost edge on node Far Left edge).In any one dimension, occur that actual coordinate is interval inconsistent with current coordinate interval, all can cause the element of the front end page to there is pattern defect.
In sum, the present invention is by above-mentioned embodiment, and whether the capable of dynamic identification front end page exists pattern mistake, not only greatly reduces tester's workload, and has significantly improved efficiency and accuracy.
Those skilled in the art can be well understood to, for convenience and simplicity of description, the system of foregoing description, the specific works process of device and unit, can, with reference to the corresponding process in preceding method embodiment, not repeat them here.
In several embodiments provided by the present invention, should be understood that, disclosed system, apparatus and method, can realize by another way.For example, device embodiments described above is only schematic, for example, the division of described unit, be only that a kind of logic function is divided, during actual realization, can have other dividing mode, for example a plurality of unit or assembly can in conjunction with or can be integrated into another system, or some features can ignore, or do not carry out.Another point, shown or discussed coupling each other or direct-coupling or communication connection can be by some interfaces, indirect coupling or the communication connection of device or unit can be electrically, machinery or other form.
The described unit as separating component explanation can or can not be also physically to separate, and the parts that show as unit can be or can not be also physical locations, can be positioned at a place, or also can be distributed in a plurality of network element.Can select according to the actual needs some or all of unit wherein to realize the object of present embodiment scheme.
In addition, each functional unit in each embodiment of the present invention can be integrated in a processing unit, can be also that the independent physics of unit exists, and also can more than 2 or 2 be integrated in a unit unit.Above-mentioned integrated unit both can adopt the form of hardware to realize, and the form that also can adopt hardware to add SFU software functional unit realizes.
The integrated unit that the above-mentioned form with SFU software functional unit realizes, can be stored in a computer read/write memory medium.Above-mentioned SFU software functional unit is stored in a storage medium, comprise that some instructions are with so that a computer installation (can be personal computer, server, or network equipment etc.) or processor (processor) carry out the part steps of method described in each embodiment of the present invention.And aforesaid storage medium comprises: USB flash disk, portable hard drive, ROM (read-only memory) (Read-Only Memory, ROM), the various media that can be program code stored such as random access memory (Random Access Memory, RAM), magnetic disc or CD.
Finally it should be noted that: above embodiment only, in order to technical scheme of the present invention to be described, is not intended to limit; Although the present invention is had been described in detail with reference to aforementioned embodiments, those of ordinary skill in the art is to be understood that: its technical scheme that still can record aforementioned each embodiment is modified, or part technical characterictic is wherein equal to replacement; And these modifications or replacement do not make the essence of appropriate technical solution depart from the spirit and scope of each embodiment technical scheme of the present invention.
Claims (12)
1. a pattern method of testing for the front end page, is characterized in that, described method comprises:
Travel through the node on the dom tree that the front end page is corresponding, the space length and width and the origin coordinates that according to each node, take, the actual coordinate that calculates each node is interval;
Actual coordinate interval or the current coordinate interval of the brotgher of node that the actual coordinate interval of each node is adjacent compare, and judge whether its coordinate interval has overlapping;
Coordinate interval is had two overlapping nodes at least one of them as the node with pattern defect.
2. the pattern method of testing of the front end page according to claim 1, it is characterized in that, described " traveling through the node on the dom tree that the front end page is corresponding, the space length and width and the origin coordinates that take according to each node, the actual coordinate interval of calculating each node " step specifically comprises:
First, the actual coordinate of the brotgher of node of the cotyledon node under calculating father node and described cotyledon node is interval;
Secondly, calculate the actual coordinate interval of described father node.
3. the pattern method of testing of the front end page according to claim 1, is characterized in that, described actual coordinate interval is: (coordinate-node on edge, node the top is the coordinate on edge bottom; The coordinate on coordinate-node rightmost edge on node Far Left edge).
4. the pattern method of testing of the front end page according to claim 1, it is characterized in that, described " actual coordinate interval or the current coordinate interval of the brotgher of node that the actual coordinate interval of each node is adjacent compare, and judge whether its coordinate interval has overlapping " step specifically comprises:
Judge that whether present node and next node are set membership, if so, finish the comparison of present node; If not, continue comparison;
Judge whether present node and next node are relation of inclusion, if so, finish the comparison of present node, if not, actual coordinate interval or current coordinate interval interval according to the actual coordinate of present node and next node compare, and judge whether coordinate interval exists overlapping.
5. a pattern method of testing for the front end page, is characterized in that, described method comprises:
Travel through the node on the dom tree that the front end page is corresponding, the space length and width and the origin coordinates that according to each node, take, the actual coordinate that calculates each node is interval;
When the actual coordinate interval of a node is not identical with the current coordinate interval of this node, using this node as the node with pattern defect.
6. the pattern method of testing of the front end page according to claim 5, it is characterized in that, described " traveling through the node on the dom tree that the front end page is corresponding, the space length and width and the origin coordinates that take according to each node, the actual coordinate interval of calculating each node " step specifically comprises:
First, the actual coordinate of the brotgher of node of the cotyledon node under calculating father node and described cotyledon node is interval;
Secondly, calculate the actual coordinate interval of described father node.
7. the pattern method of testing of the front end page according to claim 5, is characterized in that, described actual coordinate interval is: (coordinate-node on edge, node the top is the coordinate on edge bottom; The coordinate on coordinate-node rightmost edge on node Far Left edge).
8. a pattern proving installation for the front end page, is characterized in that, the pattern proving installation of the described front end page comprises:
Query count module, for traveling through the node on the dom tree that the front end page is corresponding, the space length and width and the origin coordinates that according to each node, take, the actual coordinate that calculates each node is interval;
Comparing module, for the actual coordinate of the brotgher of node that the actual coordinate interval of each node is adjacent, interval or current coordinate interval compares, and judges whether its coordinate interval has overlapping;
Output module, for coordinate interval is had two overlapping nodes at least one of them as the node with pattern defect.
9. the pattern proving installation of the front end page according to claim 8, is characterized in that, described actual coordinate interval is: (coordinate-node on edge, node the top is the coordinate on edge bottom; The coordinate on coordinate-node rightmost edge on node Far Left edge).
10. the pattern proving installation of the front end page according to claim 8, is characterized in that, described comparing module is used for:
Judge that whether present node and the brotgher of node are set membership, if so, finish the comparison of present node; If not, continue comparison;
Judge whether present node and the brotgher of node are relation of inclusion, if so, finish the comparison of present node, if not, actual coordinate interval or current coordinate interval interval according to the actual coordinate of present node and its brotgher of node compare, and judge whether coordinate interval exists overlapping.
The pattern proving installation of 11. 1 kinds of front end pages, is characterized in that, the pattern proving installation of the described front end page comprises:
Query count module, for traveling through the node on the dom tree that the front end page is corresponding, the space length and width and the origin coordinates that according to each node, take, the actual coordinate that calculates each node is interval;
Comparing module, for comparing the actual coordinate interval of each node with the current coordinate interval of this node;
Output module, when the actual coordinate of node interval when not identical with current coordinate interval, using this node as the node with pattern defect.
The pattern proving installation of the 12. front end pages according to claim 11, is characterized in that, described actual coordinate interval is: (coordinate-node on edge, node the top is the coordinate on edge bottom; The coordinate on coordinate-node rightmost edge on node Far Left edge).
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410303018.9A CN104077221B (en) | 2014-06-27 | 2014-06-27 | The pattern method of testing and device of front end page |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410303018.9A CN104077221B (en) | 2014-06-27 | 2014-06-27 | The pattern method of testing and device of front end page |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN104077221A true CN104077221A (en) | 2014-10-01 |
| CN104077221B CN104077221B (en) | 2017-10-24 |
Family
ID=51598489
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201410303018.9A Active CN104077221B (en) | 2014-06-27 | 2014-06-27 | The pattern method of testing and device of front end page |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN104077221B (en) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111930616A (en) * | 2020-07-27 | 2020-11-13 | 北京大米未来科技有限公司 | Data processing method and device, electronic equipment and readable storage medium |
| CN112115043A (en) * | 2020-08-12 | 2020-12-22 | 浙江大学 | Image-based on-end intelligent page quality inspection method |
| CN116401178A (en) * | 2023-06-09 | 2023-07-07 | 成都融见软件科技有限公司 | UI component problem point positioning method, electronic device and medium |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102750372A (en) * | 2012-06-15 | 2012-10-24 | 翁时锋 | Analytical method for automatically acquiring webpage structured information |
| CN102841790A (en) * | 2012-07-02 | 2012-12-26 | 北京大学 | Web application interface dynamic adapting method for heterogeneous terminal |
| CN103488560A (en) * | 2012-06-12 | 2014-01-01 | 腾讯科技（深圳）有限公司 | Test object processing method and test object processing device for webpage test |
| US8655913B1 (en) * | 2012-03-26 | 2014-02-18 | Google Inc. | Method for locating web elements comprising of fuzzy matching on attributes and relative location/position of element |
| US20140136944A1 (en) * | 2012-11-09 | 2014-05-15 | Adobe Systems Incorporated | Real time web development testing and reporting system |
-
2014
- 2014-06-27 CN CN201410303018.9A patent/CN104077221B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8655913B1 (en) * | 2012-03-26 | 2014-02-18 | Google Inc. | Method for locating web elements comprising of fuzzy matching on attributes and relative location/position of element |
| CN103488560A (en) * | 2012-06-12 | 2014-01-01 | 腾讯科技（深圳）有限公司 | Test object processing method and test object processing device for webpage test |
| CN102750372A (en) * | 2012-06-15 | 2012-10-24 | 翁时锋 | Analytical method for automatically acquiring webpage structured information |
| CN102841790A (en) * | 2012-07-02 | 2012-12-26 | 北京大学 | Web application interface dynamic adapting method for heterogeneous terminal |
| US20140136944A1 (en) * | 2012-11-09 | 2014-05-15 | Adobe Systems Incorporated | Real time web development testing and reporting system |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111930616A (en) * | 2020-07-27 | 2020-11-13 | 北京大米未来科技有限公司 | Data processing method and device, electronic equipment and readable storage medium |
| CN111930616B (en) * | 2020-07-27 | 2024-03-19 | 北京大米未来科技有限公司 | Data processing method, device, electronic equipment and readable storage medium |
| CN112115043A (en) * | 2020-08-12 | 2020-12-22 | 浙江大学 | Image-based on-end intelligent page quality inspection method |
| CN116401178A (en) * | 2023-06-09 | 2023-07-07 | 成都融见软件科技有限公司 | UI component problem point positioning method, electronic device and medium |
| CN116401178B (en) * | 2023-06-09 | 2023-08-11 | 成都融见软件科技有限公司 | UI component problem point positioning method, electronic device and medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN104077221B (en) | 2017-10-24 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8756541B2 (en) | Relative ordering circuit synthesis | |
| US20070192754A1 (en) | Method for treating design errors of a layout of an integrated circuit | |
| CN104252410A (en) | Method and equipment for testing control in page | |
| CN104077401A (en) | Database data migration device and method | |
| CN107943466B (en) | Database access statement generation method, device and equipment | |
| CN104077221A (en) | Style test method and device for front-end page | |
| CN105335246A (en) | Method for automatically repairing program crash defect based on question-answer website analysis | |
| US10628550B2 (en) | Method for designing an integrated circuit, and method of manufacturing the integrated circuit | |
| CN111258575A (en) | Page layout processing method and device | |
| CN104636717A (en) | Method and device for identifying diagram | |
| US20150234978A1 (en) | Cell Internal Defect Diagnosis | |
| CN102760109A (en) | Data communication method, device and system | |
| JP4533918B2 (en) | Circuit specification description design analysis apparatus and circuit specification description design analysis method | |
| CN101699409B (en) | Method for controlling testing equipment to test and system thereof | |
| CN102375889A (en) | Method for constructing webpage through webpage construction database | |
| CN110286912A (en) | Code detection method, device and electronic equipment | |
| CN112380127B (en) | Test case regression method, device, equipment and storage medium | |
| US20220180033A1 (en) | Identifying potential improvement opportunities for simulation performance of an integrated circuit design | |
| CN104615510A (en) | Programmable device-based dual-mode redundant fault-tolerant method | |
| CN103678107A (en) | Data processing method and system | |
| CN103164526A (en) | Generation method and generation device of test report | |
| WO2012140540A1 (en) | A digital netlist partitioning system for faster circuit reverse-engineering | |
| US9514258B2 (en) | Generation of memory structural model based on memory layout | |
| CN107563617B (en) | Method and device for determining oil and gas amount on oil and gas migration path | |
| CN101866312A (en) | System and method for detecting hardware failure based on dynamic I/O value invariance |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |