UI (User Interface) restoration degree checking method and system based on chrome plug-in

Abstract

The invention discloses a UI restoration degree checking method and system based on a chrome plug-in, and relates to the technical field of UI design, and the method comprises the following steps: converting a design page into an html file; extracting element information of the development elements; extracting element information of the design elements; splitting the design page into a plurality of first blocks; splitting the development page into a plurality of second blocks; performing duplicate removal on the first block and the second block; searching matched development elements and design elements by utilizing the deduplicated first block and the deduplicated second block to obtain element pairs; comparing the element information of the development element and the design element in the element pair to obtain a check result; and marking the unreduced development elements according to the check result. According to the method, the development elements and the design elements are extracted and compared in the form of the chrome plug-in and are visually displayed at the same time, so that the problem of occupation of server resources is solved, and the situation that some problems are missed to be checked due to lack of manual confirmation is also solved.

Description

Technical Field

[0001] The present invention relates to the technical field of UI design, and in particular to a method and system for checking UI restoration based on a Chrome plug-in. Background Art

[0002] After web developers complete development according to the UI designer's design draft, they usually need the UI designer to compare the development interface with the UI design draft to check the web developer's degree of restoration of the current design draft.

[0003] This process requires the UI to compare the differences between the development interface and the design draft from a visual level. This purely visual troubleshooting method is prone to omissions. In the prior art, the development page elements and the design page elements are compared based on the server, and the differences between the development page and the design page are finally obtained. Although this solution can detect problems with the development page, it cannot intuitively display the differences between the development page and the design page for developers or designers, and the degree of visualization is not high. On the one hand, it cannot quickly guide developers to fix problems. On the other hand, it cannot be manually confirmed, which may cause certain problems to not be discovered in time. In addition, although this method can be integrated into CI (continuous integration) and CD (continuous deployment) to check whether the development page meets the needs of the design page, it is not feasible to quickly find the differences between the development page and the design page. There are certain defects, and this method is completely calculated by the server, which requires the consumption of certain server resources. Summary of the invention

[0004] The present invention provides a method and system for checking UI restoration degree based on a Chrome plug-in, so as to overcome at least one technical problem existing in the prior art.

[0005] On the one hand, the present invention provides a method for checking UI restoration degree based on a Chrome plug-in, comprising:

[0006] Convert the design page into an HTML file;

[0007] Opening a development page, and extracting element information of all development elements in the development page;

[0008] Utilize the Chrome plug-in to extract the element information of all design elements in the HTML file;

[0009] Using the element information of the design element, splitting the design page into a plurality of first blocks, and storing the first blocks in a first storage object;

[0010] Using the element information of the development element, splitting the development page into a plurality of second blocks, and storing the second blocks in a second storage object;

[0011] Deduplication of the first block and the second block;

[0012] Searching for matching development elements and design elements using the first block and the second block after deduplication to obtain element pairs;

[0013] Compare the element information of the development element and the design element in the element pair to obtain the inspection result;

[0014] Based on the inspection results, the development elements that were not restored are marked.

[0015] Optionally, a development page is opened, and element information of all development elements in the development page is extracted, specifically:

[0016] Open the development page using a browser;

[0017] Opening the Chrome plug-in, and using the Chrome plug-in to read element information of all development elements in the development page; the element information of the development element includes at least element position, element style, and element content;

[0018] The element information of all the development elements read is stored in the memory of the chrome plug-in.

[0019] Optionally, the element information of all design elements in the HTML file is extracted using a Chrome plug-in, specifically:

[0020] Upload the html file to the chrome plug-in;

[0021] Parsing the HTML file using the Chrome plug-in to read element information of all design elements in the HTML file; the element information of the design elements at least includes element position, element style, and element content;

[0022] The element information of all design elements in the HTML file read is stored in the memory of the Chrome plug-in.

[0023] Optionally, deduplication is performed on the first block, specifically by:

[0024] Traverse all first blocks in the first storage object and obtain block information of each first block, wherein the block information includes the length of the block. a 、Width a And the distance from the top of the browser a and Left a distance;

[0025] The block information of each first block is compared, and if the block information of two first blocks is the same, one of the first blocks is deleted.

[0026] Optionally, deduplication is performed on the second block, specifically:

[0027] Traverse all second blocks in the second storage object and obtain block information of each second block, wherein the block information includes the length of the block. a 、Width a And the distance from the top of the browser a and Left a distance;

[0028] The block information of each second block is compared, and if the block information of two second blocks is the same, one of the second blocks is deleted.

[0029] Optionally, the first block and the second block after deduplication are used to search for matching development elements and design elements to obtain element pairs, specifically:

[0030] Traverse the first block, and for each first block, traverse the second block to obtain the length Height of the current first block a 、Width a And the distance from the top of the browser a and Left a distance, get the first set of data; at the same time get the length of the current second block Height b 、Width b And the distance from the top of the browser b and Left b The distance is obtained to obtain the second set of data;

[0031] Compare the first set of data with the second set of data. If Height a =Height b 、Width a =Width b 、Top a =Top b 、Left a =Left b , it means that the development elements and design elements corresponding to the current first block and the current second block match.

[0032] Optionally, if after traversing all the first blocks and second blocks, no completely identical first data groups and second data groups are found, the first blocks and second blocks with the largest overlapping areas are taken as matching blocks, and the development elements and design elements corresponding to the matching blocks are taken as element pairs.

[0033] Optionally, the overlap area ratio=the overlap area / the first block area;

[0034] The overlapping area is expressed as:

[0035] min(Height a -(Top b -Top a ),Height b -(Top a -Top b ))*min(Width a -(Left b -Left a ),Width b -(Left a -Left b ));

[0036] The area of ​​the first block is expressed as: Height a *Width a .

[0037] Optionally, the design page is converted into an HTML file using the design draft to code technology D2C.

[0038] On the other hand, the present invention also provides a UI restoration degree inspection system based on a Chrome plug-in, comprising:

[0039] Conversion module, used to convert the design page into HTML file;

[0040] A first extraction module, used for opening a development page and extracting element information of all development elements in the development page;

[0041] The second extraction module is used to extract element information of all design elements in the HTML file using a Chrome plug-in;

[0042] A first splitting module, used to split the design page into a plurality of first blocks by using the element information of the design element, and store the first blocks in a first storage object;

[0043] A second splitting module, used to split the development page into a plurality of second blocks by using the element information of the development element, and store the second blocks in a second storage object;

[0044] A deduplication module, configured to dedupe the first block and the second block;

[0045] A search module, used to search for matching development elements and design elements using the first block and the second block after deduplication, to obtain element pairs;

[0046] A comparison module, used for comparing the element information of the development element and the design element in the element pair to obtain the inspection result;

[0047] The marking module is used to mark the unrestored development elements according to the inspection results.

[0048] The innovative features of the embodiments of the present invention include:

[0049] 1. In this embodiment, the development elements and design elements are extracted and compared in the form of a chrome plug-in in the browser, which not only solves the problem of server resource occupation, but also solves the problem of missing certain problems due to lack of manual confirmation, which is one of the innovative points of the embodiment of the present invention.

[0050] 2. In this embodiment, the unrestored development elements are marked through the visual interface in the browser, so that developers, UI designers and other inspectors can quickly determine whether the development page is restored according to the design page, and quickly locate problems in the development page through the visual interface. This is one of the innovations of the embodiment of the present invention.

[0051] 3. In this embodiment, developers can use the visualization page to walk through the development page, quickly discover development problems, and avoid repairing the restoration degree when going online, which is one of the innovations of the embodiment of the present invention. BRIEF DESCRIPTION OF THE DRAWINGS

[0052] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0053] Figure 1 A flow chart of an inspection method provided by an embodiment of the present invention;

[0054] Figure 2 A flow chart for extracting development elements provided by an embodiment of the present invention;

[0055] Figure 3 A flow chart for extracting design elements provided by an embodiment of the present invention;

[0056] Figure 4 A flow chart of deduplication of a first block provided by an embodiment of the present invention;

[0057] Figure 5 A flow chart of deduplication of a first block provided by an embodiment of the present invention;

[0058] Figure 6 A flow chart for obtaining element pairs provided by an embodiment of the present invention;

[0059] Figure 7 A schematic diagram of a structure of an overlapping area provided in an embodiment of the present invention;

[0060] Figure 8 A schematic diagram of the structure of an inspection system provided in an embodiment of the present invention. DETAILED DESCRIPTION

[0061] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0062] It should be noted that the terms "including" and "having" and any variations thereof in the embodiments of the present invention and the accompanying drawings are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device including a series of steps or units is not limited to the listed steps or units, but may optionally include steps or units not listed, or may optionally include other steps or units inherent to these processes, methods, products or devices.

[0063] The embodiment of the present invention discloses a method and system for checking UI restoration degree based on a Chrome plug-in, which are described in detail below.

[0064] Figure 1 For a flow chart of the inspection method provided by the embodiment of the present invention, please refer to Figure 1 , the UI restoration degree inspection method based on the Chrome plug-in provided by the embodiment of the present invention includes:

[0065] Step 1: Convert the design page into an HTML file;

[0066] Step 2: Open the development page and extract the element information of all development elements in the development page;

[0067] Step 3: Use the Chrome plug-in to extract the element information of all design elements in the HTML file;

[0068] Step 4: using the element information of the design element, splitting the design page into a plurality of first blocks, and storing the first blocks in the first storage object;

[0069] Step 5: using the element information of the development element, splitting the development page into a plurality of second blocks, and storing the second blocks in the second storage object;

[0070] Step 6: De-duplicate the first block and the second block;

[0071] Step 7: Use the first block and the second block after deduplication to find matching development elements and design elements to obtain element pairs;

[0072] Step 8: Compare the element information of the development element and the design element in the element pair to obtain the inspection result;

[0073] Step 9: Based on the inspection results, mark the development elements that have not been restored.

[0074] Specifically, please refer to Figure 1 , the UI restoration degree inspection method based on Chrome plug-in provided by the embodiment of the present invention first converts the design page into an HTML file through step 1. The design page refers to the design draft of the UI designer. During the conversion, the design draft to code technology D2C can be used to generate an HTML file from the design page. Design drafts are generally files of sketch and figma types, and these files are also stored in the form of JSON trees, which contain detailed information of each element. The meaning of each attribute of the JSON tree corresponding to sketch and figma is different, so we need to parse different types of JSON trees, and parse different types of JSON trees into an HTML file. The HTML file generated after parsing contains the element position, element style, and element content of each element. For example: element attributes such as up, down, left, and right offset distances, absolute positioning, relative positioning, color, chamfer, shadow, font size, and font.

[0075] Open the development page through step 2, and extract the element information of all development elements in the development page. In step 3, use the chrome plug-in to extract the element information of all design elements in the html file. By extracting the element information of the design elements and the element information of the development elements and comparing the element information, the degree of restoration can be determined. When extracting the element information of the development page here, the browser can be used for extraction instead of completely calculating and extracting by the server, so that the consumption of server resources can be reduced.

[0076] In theory, the HTML generated by the development page and the design page should be consistent, but the actual situation is that there may be different implementation schemes for the same style. Therefore, it is necessary to judge whether the development page restores the design draft by comparing the position, style, font, copy, etc. of the HTML elements generated by the development elements and the design page, and judging whether there are differences between the two. When comparing, first find the matching element pair through the element information, and then compare whether the information of the elements in the element pair is consistent, so as to judge the restoration degree of the development page. In the present invention, the design page and the development page are split into several blocks respectively, and the blocks are used for pairing. When splitting the pages, the design page is split by step 4, and the development page is split by step 5.

[0077] When splitting the design page, the design page is regarded as a large block using the element information of the design elements, and the large block is gradually split into multiple small blocks according to the position information of the design elements. The multiple small blocks obtained by splitting the design page are recorded as the first block.

[0078] Similarly, when splitting the development page, the element information of the development element is used to regard the development page as a large block, and the large block is gradually split into multiple small blocks according to the location information of the development element. The multiple small blocks obtained by splitting the development page are recorded as second blocks. Since it is necessary to search for matching element pairs through the first block and the second block obtained by splitting, in this step, it is also necessary to store the first block and the second block in their respective storage objects, for example, the first block is stored in the first storage object, and the second block is stored in the second storage object.

[0079] After obtaining all the blocks of the design page and the development page, in order to ensure that there is no situation where the block information of a certain block is completely consistent with that of other blocks, it is necessary to deduplicate all the blocks obtained from the design page and the development page through step 6, that is, delete the repeated blocks in the first block and the second block. In this way, multiple calculations and comparisons of repeated blocks can be avoided, which is conducive to reducing the amount of calculation, thereby simplifying the calculation process and improving calculation efficiency.

[0080] After deduplication is completed, the element pair search can be performed. In step 7, by traversing the first block and the second block after deduplication, the element information in the first block and the second block is compared. If the element information of the design element in the first block and the development element in the second block matches, the design element in the first block and the development element in the second block are regarded as an element pair.

[0081] After obtaining the element pair, in step 8, the element information of the development element and the design element in the element pair are compared. It should be noted that when searching for an element pair, the element position in the element information (the location where the element content is located) is compared to determine whether the first block and the second block match. When comparing the element information of the development element and the design element in the element pair, it is mainly by comparing the element style (font size, color, etc.) and the element content. Here, the element style and element content in the element pair can be found through the DOM (Document Object Model) tree. Only when the element style and the element content are consistent, it means that the development element has restored the corresponding design element. Otherwise, it means that the development element has not restored the corresponding design element. For example, when the element style is consistent but the element content is inconsistent, it means that the development element has not restored the corresponding design element.

[0082] In order to enable developers, UI designers and other walkthrough personnel to quickly determine whether the development page is restored according to the design page, the present invention marks the unrestored elements through step 9. When a development element is not restored, the development element is marked through the visual interface in the browser. In this way, developers, UI designers and other walkthrough personnel can quickly determine whether the development page is restored according to the design page, and quickly locate problems with the development page through the visual interface. In addition, developers can also use this device to walk through the development page, quickly discover development problems, and avoid repairing the restoration degree when going online.

[0083] Optionally, Figure 2 For a flow chart of extracting development elements provided by an embodiment of the present invention, please refer to Figure 1 and Figure 2 In step 2, the development page is opened, and the element information of all development elements in the development page is extracted, specifically: step 21, using a browser to open the development page; step 22, opening the Chrome plug-in, and using the Chrome plug-in to read the element information of all development elements in the development page; the element information of the development elements includes at least element position, element style, and element content; step 23, storing the read element information of all development elements in the memory of the Chrome plug-in.

[0084] Specifically, please refer to Figure 2, when extracting the element information of all development elements in the development page, first in step 21, the development page is opened by a browser. Then, through step 22, the Chrome plug-in in the browser is opened, and the element information of all development elements in the development page, such as element position, element style, and element content, is read by the Chrome plug-in. And through step 23, the element information of all development elements read is stored in the memory of the Chrome plug-in, so as to be compared with the element information of the design elements read in the design page.

[0085] Optionally, Figure 3 For a flowchart of extracting design elements provided by an embodiment of the present invention, please refer to Figure 1 and Figure 3 In step 3, the element information of all design elements in the HTML file is extracted using the Chrome plug-in, specifically: Step 31, upload the HTML file to the Chrome plug-in; Step 32, parse the HTML file using the Chrome plug-in, and read the element information of all design elements in the HTML file; the element information of the design elements includes at least element position, element style, and element content; Step 33, store the element information of all design elements in the HTML file read into the memory of the Chrome plug-in.

[0086] Specifically, please refer to Figure 3 , when extracting the element information of all design elements in the design page, first in step 31, upload the html file generated by the design page in step 1 to the chrome plug-in. Then in step 32, open the Chrome plug-in in the browser, and use the Chrome plug-in to parse the html file to read the element information of all design elements in the html file, such as element position, element style, and element content. And in step 33, store the read element information of all design elements in the memory of the chrome plug-in to compare with the element information of the development elements read in the development page.

[0087] Optionally, Figure 4 For a flowchart of deduplication of the first block provided by an embodiment of the present invention, please refer to Figure 1 and Figure 4 In step 6, the first block is deduplicated, specifically: step 61, traverse all the first blocks in the first storage object, obtain the block information of each first block, the block information includes the length of the block Height a 、Width a And the distance from the top of the browser a and Left astep 62, comparing the block information of each first block, if the block information of two first blocks is the same, then delete one of the first blocks.

[0088] Specifically, please refer to Figure 4 When deduplicating the first block, firstly, through step 61, all the first blocks in the first storage object are traversed, and the JavaScript application program interface API is called to query the block information of each first block. When comparing the design page and the development page, considering that the design page is a static page and the development page is a dynamic page, the present invention adopts an absolute positioning method for comparison, that is, the design page and the development page compare the positions of the two elements according to the distance from the top and left of the page.

[0089] When matching blocks, in addition to determining the distance from the top and left of the page, the length and width of the block itself should also be considered. Therefore, in this embodiment, when comparing blocks, the block information that needs to be obtained includes the block's length Height, width Width, and distance from the top of the browser. a and Left a distance.

[0090] Then in step 62, the block information of each first block is compared. When comparing the block information of the first blocks, a first block can be taken out, and then the remaining first blocks are traversed, and the remaining first blocks are compared with the taken out first blocks in turn. If the block information of a first block is the same as the block information of the taken out first block, the first block is deleted. After the comparison of the current first block is completed, the next first block is taken out and the traversal comparison is performed using the same traversal method as the previous first block, so that all repeated first blocks can be deduplicated.

[0091] Optionally, Figure 5 For a flowchart of deduplication of the first block provided by an embodiment of the present invention, please refer to Figure 1 and Figure 5 In step 6, the second block is deduplicated, specifically: step 601, traverse all the second blocks in the second storage object, obtain the block information of each second block, the block information includes the length of the block Height a 、Width a And the distance from the top of the browser a and Left a step 602, comparing the block information of each second block, if the block information of two second blocks is the same, then delete one of the second blocks.

[0092] Specifically, please refer to Figure 5When deduplicating the second block, firstly, through step 601, all the second blocks in the second storage object are traversed, and the JavaScript application program interface API is called to query the block information of each second block. When comparing the design page and the development page, considering that the design page is a static page and the development page is a dynamic page, the present invention adopts an absolute positioning method for comparison, that is, the design page and the development page compare the positions of the two elements according to the distance from the top and left of the page.

[0093] When matching blocks, in addition to determining the distance from the top and left of the page, the length and width of the block itself should also be considered. Therefore, in this embodiment, when comparing blocks, the block information that needs to be obtained includes the block's length Height, width Width, and distance from the top of the browser. a and Left a distance.

[0094] Then in step 602, the block information of each second block is compared. When comparing the block information of the second blocks, a second block can be taken out, and then the remaining second blocks are traversed, and the remaining second blocks are compared with the taken out second blocks in turn. If the block information of a second block is the same as the block information of the taken out second block, the second block is deleted. After the comparison of the current second block is completed, the next second block is taken out, and the traversal comparison is performed using the same traversal method as the previous second block, so that all repeated second blocks can be deduplicated.

[0095] Optionally, Figure 6 For a flowchart of obtaining element pairs provided by an embodiment of the present invention, please refer to Figure 1 and Figure 6 In step 7, the first block and the second block after deduplication are used to find matching development elements and design elements to obtain element pairs, specifically: Step 71, traverse the first block, for each first block, traverse the second block, and obtain the length Height of the current first block a 、Width a And the distance from the top of the browser a and Left a distance, get the first set of data; at the same time get the length of the current second block Height b 、Width b And the distance from the top of the browser b and Left b distance, obtain the second set of data; Step 72, compare the first set of data and the second set of data, if Height a =Heightb 、Width a =Width b 、Top a =Top b 、Left a =Left b , it means that the development elements and design elements corresponding to the current first block and the current second block match.

[0096] Specifically, please refer to Figure 6 When comparing element information, firstly, the block information is matched with the first block and the second block to obtain element pairs, and then the elements in each element pair are compared. When matching blocks, firstly, all first blocks are traversed through step 71, and each time a first block is selected, and the JavaScript application program interface API is called to obtain the length Height of the first block. a 、Width a And the distance from the top of the browser a and Left a The distance is taken as the first set of data. For the first block, the second block is traversed. When traversing the second block, each time a second block is selected, the length Height of the current second block is obtained by calling the JavaScript application program interface API b 、Width b And the distance from the top of the browser b and Left b The distance is taken as the second set of data.

[0097] Each time the first set of data and the second set of data corresponding to the first block and the second block are obtained, step 72 is performed to compare the first set of data and the second set of data currently obtained. a =Height b 、Width a =Width b 、Top a =Top b 、Left a =Left b , it means that the current first block matches the current second block, that is, the development elements and design elements corresponding to the current first block and the second block match. Repeat the above steps until all first blocks and second blocks are traversed, and the comparison results of all development elements and design elements can be obtained.

[0098] Optionally, if after traversing all first blocks and second blocks, no identical first data group and second data group are found, the first block and second block with the largest overlap area ratio are taken as matching blocks, and the development elements and design elements corresponding to the matching blocks are taken as element pairs. Overlap area ratio = overlap area area / first block area; overlap area is expressed as: min(Height a -(Top b -Top a ),Height b -(Top a -Top b ))*min(Width a -(Left b -Left a ),Width b -(Left a -Left b )); The area of ​​the first block is expressed as: Height a *Width a .

[0099] Specifically, if after traversing all first blocks and second blocks, there are unmatched elements or blocks, for example, a second data group that is completely identical to a data group corresponding to a first block is not found, such as Height a =Height b 、Width a =Width b 、Top a =Top b , but Left a ≠Left b , it is considered that the first data group and the second data group are not completely the same. At this time, the block corresponding to the second data group whose data is closest to the first data group is taken as the matching block of the first block.

[0100] In this embodiment, the data is judged to be similar by calculating the percentage of overlapping areas. For the unmatched first block, all second blocks are traversed, and the second block with the largest percentage of overlapping area with the first block is used as its matching block. After the matching block is obtained, the development element and design element corresponding to the matching block can be used as an element pair.

[0101] Figure 7 For a schematic diagram of a structure of an overlapping area provided in an embodiment of the present invention, please refer to Figure 7 In this embodiment, the overlap area ratio = overlap area / first block area, where the calculation of the overlap area requires comparison of Height a +Topa and Height b +Top b Size, and Width a +Left a and Width b +Left b The size of the overlapped area and the area of ​​the first block can be calculated by the following formulas: overlapped area = min(Height a -(Top b -Top a ),Height b -(Top a -Top b ))*min(Width a -(Left b -Left a ),Wi dth b -(Left a -Left b )), the area of ​​the first block = -Height a *Width a .

[0102] It should be noted that when matching blocks, if a first block in the design page cannot find the corresponding second block in the development page, then the development page can be considered to have a restoration defect. On the contrary, if a second block in the development page does not have a corresponding first block in the design page, then it is necessary to find out whether the second block has a corresponding visual presentation, such as borders, background colors, outer borders, inner borders, and other attributes that cause page redrawing or rearrangement. If not, the second block can be ignored and treated as a tag with no side effects.

[0103] Based on the same inventive concept, the present invention also provides a UI restoration degree inspection system 100 based on a Chrome plug-in. Figure 8 For a schematic diagram of a structure of an inspection system provided by an embodiment of the present invention, please refer to Figure 8 The UI restoration degree inspection system 100 based on the Chrome plug-in provided by the present invention is characterized by comprising:

[0104] The conversion module 10 is used to convert the design page into an HTML file;

[0105] A first extraction module 20, used to open a development page and extract element information of all development elements in the development page;

[0106] The second extraction module 30 is used to extract element information of all design elements in the HTML file using the Chrome plug-in;

[0107] A first splitting module 40 is used to split the design page into a plurality of first blocks by using the element information of the design element, and store the first blocks in a first storage object;

[0108] A second splitting module 50 is used to split the development page into a plurality of second blocks by using the element information of the development element, and store the second blocks in a second storage object;

[0109] A deduplication module 60, configured to perform deduplication on the first block and the second block;

[0110] A search module 70, configured to use the first block and the second block after deduplication to search for matching development elements and design elements to obtain element pairs;

[0111] A comparison module 80, for comparing the element information of the development element and the design element in the element pair to obtain a check result;

[0112] The marking module 90 is used to mark the unrestored development elements according to the inspection results.

[0113] Specifically, please refer to Figure 8 , the UI restoration degree inspection system based on Chrome plug-in provided by the embodiment of the present invention first converts the design page into an HTML file through the conversion module 10. The design page refers to the design draft of the UI designer. During the conversion, the design draft to code technology D2C can be used to generate an HTML file from the design page. Design drafts are generally files of sketch and figma types, and these files are also stored in the form of JSON trees, which contain detailed information of each element. The meaning of each attribute of the JSON tree corresponding to sketch and figma is different, so we need to parse different types of JSON trees, and parse different types of JSON trees into an HTML file. The HTML file generated after parsing contains the element position, element style, and element content of each element. For example: element attributes such as up, down, left, and right offset distances, absolute positioning, relative positioning, color, chamfer, shadow, font size, and font.

[0114] The development page is opened by the first extraction module 20, and the element information of all development elements in the development page is extracted. The second extraction module 30 uses the chrome plug-in to extract the element information of all design elements in the HTML file. By extracting the element information of the design elements and the element information of the development elements, and comparing the element information, the degree of restoration can be determined. When extracting the element information of the development page here, the browser can be used for extraction, rather than completely calculating and extracting by the server, so that the consumption of server resources can be reduced.

[0115] In theory, the HTML generated by the development page and the design page should be consistent, but the actual situation is that there may be different implementation schemes for the same style. Therefore, it is necessary to judge whether the development page restores the design draft by comparing the position, style, font, copy, etc. of the HTML elements generated by the development elements and the design page, and judging whether there are differences between the two. When comparing, first find the matching element pair through the element information, and then compare whether the information of the elements in the element pair is consistent, so as to judge the restoration degree of the development page. In the present invention, the design page and the development page are split into several blocks respectively, and the blocks are used for pairing. When splitting the pages, the design page is split by the first splitting module 40, and the development page is split by the second splitting module 50.

[0116] When splitting the design page, the design page is regarded as a large block using the element information of the design elements, and the large block is gradually split into multiple small blocks according to the position information of the design elements. The multiple small blocks obtained by splitting the design page are recorded as the first block.

[0117] Similarly, when splitting the development page, the element information of the development element is used to regard the development page as a large block, and the large block is gradually split into multiple small blocks according to the location information of the development element. The multiple small blocks obtained by splitting the development page are recorded as second blocks. Since it is necessary to search for matching element pairs through the first block and the second block obtained by splitting, it is also necessary to store the first block and the second block in their respective storage objects, for example, the first block is stored in the first storage object, and the second block is stored in the second storage object.

[0118] After all the blocks of the design page and the development page are obtained, in order to ensure that the block information of a certain block is not completely consistent with that of other blocks, it is necessary to deduplicate all the blocks obtained from the design page and the development page through the deduplication module 60, that is, delete the repeated blocks in the first block and the second block. In this way, multiple calculations and comparisons of repeated blocks can be avoided, which is conducive to reducing the amount of calculation, thereby simplifying the calculation process and improving the calculation efficiency.

[0119] After deduplication is completed, the element pair search can be performed. The search module 70 traverses the first block and the second block after deduplication, compares the element information in the first block and the second block, and if the element information of the design element in the first block and the development element in the second block matches, the design element in the first block and the development element in the second block are regarded as an element pair.

[0120] After obtaining the element pair, the comparison module 80 compares the element information of the development element and the design element in the element pair. It should be noted that when searching for an element pair, the element position in the element information (the location where the element content is located) is compared to determine whether the first block and the second block match. When comparing the element information of the development element and the design element in the element pair, it is mainly by comparing the element style (font size, color, etc.) and the element content. Here, the element style and element content in the element pair can be found through the DOM (Document Object Model) tree. Only when the element style and the element content are consistent, it means that the development element has restored the corresponding design element. Otherwise, it means that the development element has not restored the corresponding design element. For example, when the element style is consistent, but the element content is inconsistent, it means that the development element has not restored the corresponding design element.

[0121] In order to enable developers and UI designers and other walkthrough personnel to quickly determine whether the development page is restored according to the design page, the present invention marks the unrestored elements through the marking module 90. When a development element is not restored, the development element is marked through the visual interface in the browser. In this way, developers and UI designers and other walkthrough personnel can quickly determine whether the development page is restored according to the design page, and quickly locate problems with the development page through the visual interface. In addition, developers can also use this device to walk through the development page, quickly discover development problems, and avoid repairing the restoration degree when going online.

[0122] Those skilled in the art can understand that the accompanying drawings are only schematic diagrams of an embodiment, and the modules or processes in the accompanying drawings are not necessarily required to implement the present invention.

[0123] Those skilled in the art can understand that the modules in the device in the embodiment can be distributed in the device in the embodiment according to the description of the embodiment, or can be changed accordingly and located in one or more devices different from the embodiment. The modules in the above embodiment can be combined into one module, or can be further divided into multiple sub-modules.

[0124] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A method for checking UI restoration based on a Chrome plug-in, characterized in that: include: Convert the design page into an HTML file; Opening a development page, and extracting element information of all development elements in the development page; Utilize the Chrome plug-in to extract the element information of all design elements in the HTML file; Using the element information of the design element, splitting the design page into a plurality of first blocks, and storing the first blocks in a first storage object; Using the element information of the development element, splitting the development page into a plurality of second blocks, and storing the second blocks in a second storage object; Deduplication of the first block and the second block; Searching for matching development elements and design elements using the first block and the second block after deduplication to obtain element pairs; Compare the element information of the development element and the design element in the element pair to obtain the inspection result; Based on the inspection results, the development elements that were not restored are marked.

2. The method for checking UI restoration degree based on a Chrome plug-in according to claim 1, characterized in that: Open the development page and extract the element information of all development elements in the development page, specifically: Open the development page using a browser; Opening the Chrome plug-in, and using the Chrome plug-in to read element information of all development elements in the development page; the element information of the development element includes at least element position, element style, and element content; The element information of all the development elements read is stored in the memory of the chrome plug-in.

3. The method for checking UI restoration degree based on a Chrome plug-in according to claim 1, characterized in that: The chrome plug-in is used to extract the element information of all design elements in the html file, specifically: Upload the html file to the chrome plug-in; Parsing the HTML file using the Chrome plug-in to read element information of all design elements in the HTML file; The element information of the design element includes at least element position, element style, and element content; The element information of all design elements in the HTML file read is stored in the memory of the Chrome plug-in.

4. The method for checking UI restoration degree based on a Chrome plug-in according to claim 1, characterized in that: Deduplication of the first block is performed as follows: Traverse all first blocks in the first storage object and obtain block information of each first block, wherein the block information includes the length of the block. a 、Width a And the distance from the top of the browser a and Left a distance; The block information of each first block is compared, and if the block information of two first blocks is the same, one of the first blocks is deleted.

5. The method for checking UI restoration degree based on a Chrome plug-in according to claim 1, characterized in that: Deduplication of the second block is performed as follows: Traverse all second blocks in the second storage object and obtain block information of each second block, wherein the block information includes the length of the block. a 、Width a And the distance from the top of the browser a and Left a distance; The block information of each second block is compared, and if the block information of two second blocks is the same, one of the second blocks is deleted.

6. The method for checking UI restoration degree based on a Chrome plug-in according to claim 1, characterized in that: The first block and the second block after deduplication are used to search for matching development elements and design elements to obtain element pairs, specifically: Traverse the first block, and for each first block, traverse the second block to obtain the length Height of the current first block a 、Width a And the distance from the top of the browser a and Left a distance, get the first set of data; at the same time get the length of the current second block Height b 、Width b And the distance from the top of the browser b and Left b The distance is obtained to obtain the second set of data; Compare the first set of data with the second set of data. If Height a =Height b 、Width a =Width b 、Top a =Top b 、Left a =Left b , it means that the development elements and design elements corresponding to the current first block and the current second block match.

7. The method for checking UI restoration degree based on a Chrome plug-in according to claim 6 is characterized in that: If after traversing all the first blocks and second blocks, no completely identical first data groups and second data groups are found, the first blocks and second blocks with the largest overlapping areas are taken as matching blocks, and the development elements and design elements corresponding to the matching blocks are taken as element pairs.

8. The method for checking UI restoration degree based on a Chrome plug-in according to claim 7, characterized in that: Overlapping area ratio = overlapping area / first block area; The overlapping area is expressed as: min(Height a -(Top b -Top a ),Height b -(Top a -Top b ))*min(Width a -(Left b -Left a ),Width b -(Left a -Left b )); The area of ​​the first block is expressed as: Height a *Width a .

9. The method for checking UI restoration degree based on a Chrome plug-in according to claim 1, characterized in that: Use the design draft to code technology D2C to convert the design page into an HTML file.

10. A UI restoration degree inspection system based on Chrome plug-in, characterized in that: include: Conversion module, used to convert the design page into HTML file; A first extraction module, used for opening a development page and extracting element information of all development elements in the development page; The second extraction module is used to extract element information of all design elements in the HTML file using a Chrome plug-in; A first splitting module, used to split the design page into a plurality of first blocks by using the element information of the design element, and store the first blocks in a first storage object; A second splitting module, used to split the development page into a plurality of second blocks by using the element information of the development element, and store the second blocks in a second storage object; A deduplication module, configured to dedupe the first block and the second block; A search module, used to search for matching development elements and design elements using the first block and the second block after deduplication, to obtain element pairs; A comparison module, used for comparing the element information of the development element and the design element in the element pair to obtain the inspection result; The marking module is used to mark the unrestored development elements according to the inspection results.

Images