CN114860521A - Automatic test method for UI interface reduction degree - Google Patents
Automatic test method for UI interface reduction degree Download PDFInfo
- Publication number
- CN114860521A CN114860521A CN202210431206.4A CN202210431206A CN114860521A CN 114860521 A CN114860521 A CN 114860521A CN 202210431206 A CN202210431206 A CN 202210431206A CN 114860521 A CN114860521 A CN 114860521A
- Authority
- CN
- China
- Prior art keywords
- interface
- page
- marking
- html page
- reduction degree
- 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.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/22—Detection or location of defective computer hardware by testing during standby operation or during idle time, e.g. start-up testing
- G06F11/2205—Detection or location of defective computer hardware by testing during standby operation or during idle time, e.g. start-up testing using arrangements specific to the hardware being tested
- G06F11/221—Detection or location of defective computer hardware by testing during standby operation or during idle time, e.g. start-up testing using arrangements specific to the hardware being tested to test buses, lines or interfaces, e.g. stuck-at or open line faults
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/22—Detection or location of defective computer hardware by testing during standby operation or during idle time, e.g. start-up testing
- G06F11/2273—Test methods
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Computer Hardware Design (AREA)
- Quality & Reliability (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Debugging And Monitoring (AREA)
Abstract
The invention relates to the technical field of UI design assistance, in particular to an automatic test method for UI interface restoration degree. The HTML page and the UI design interface are compared in a page superposition comparison mode, the HTML page and the UI design interface can be split layer by layer when a special complex graph is compared, and superposition comparison is carried out after layer by layer comparison. The situation that image elements are too complex and cannot be compared is avoided. Compared with the traditional method, the method has low manual testing efficiency and non-uniform standard, and the automatic UI interface reduction degree testing method can automatically test and issue the reduction degree score by marking and modifying suggestions by comparing UI reduction degree testing files. The UI designer can finish the UI marking at the pixel level quickly and accurately, writing cost between the designer and the engineer is reduced, and the UI designer and the engineer can not check and modify repeatedly. A large amount of labor cost is saved, and UI interface reduction degree testing efficiency is improved.
Description
Technical Field
The invention relates to the technical field of UI design assistance, in particular to an automatic test method for UI interface restoration degree.
Background
With the rapid development of computer technology, the UI interface reduction degree test of various devices is in greater demand at present. In the prior art, a UI designer performs observation and comparison on each HTML page, and manually records the result of the reduction test to form a text. Obviously, the UI interface reduction degree test method in the prior art needs manual execution, the test results are slightly different each time, and the test process is time-consuming and tedious; moreover, the standards for UI interface reduction degree test are different, the unification difficulty of multi-person test standards is large, the UI interfaces in daily systems are hundreds of thousands, and the manual test mode cannot meet the requirement of large-batch UI interface test.
Therefore, how to improve the efficiency of testing the UI interface, keep the standard uniformity of the test, reduce the labor cost, and meet the requirement of large-scale UI interface tests is a technical problem which needs to be solved as soon as possible by the technical personnel in the field.
Disclosure of Invention
In order to overcome the problems in the prior art, the invention aims to provide an automatic UI interface reduction degree testing method, which solves the problems in the prior art.
The technical scheme of the invention is realized as follows:
a UI interface reduction degree automatic test method comprises the following steps:
s1, filling out an HTML page address;
s2, selecting a UI design interface as a comparison basic file, wherein the suffix name of the file format is psd or sketch;
s3, adjusting the size of the HTMI page and the UI design interface to be consistent in display scale;
s4, comparing the HTML page with a UI design interface in a page superposition comparison mode, comparing with the UI design interface as a standard, marking a difference area, comparing and calling a PageRuler.js plug-in from the page by using image comparison, and marking the HTML page from multiple dimensions such as position layout, space, icon, dividing line, character, picture, wire frame, projection and color;
s5, deriving and marking a test result, wherein the format of the test result is jpg or png; the marking test result comprises a position keyword, a marking style difference size and a color reduction degree difference value.
The step S4 is divided into the following steps:
s401, element processing
In an HTML page and a UI design interface, layers are not combined, are overlapped in a crossed mode, and a multi-layer complex background image and the like are separated independently to form layered elements;
s402, superposition processing
Comparing hierarchical elements in a UI design interface and an HTML page to establish a corresponding relation, selecting a golden section, a Sudoku section, a symmetrical partition or a format tower principle to carry out element independent comparison according to a layout mode of the page, and carrying out coordinate attribute and style comparison to form a mapping relation;
s403, superposition contrast
And comparing the difference of elements and layout in the UI design interface and the HTML page according to the coordinate attribute and the style contrast.
The steps have the advantages that the image can be split layer by layer when a special complex image is compared, and the image can be superposed and compared after being compared layer by layer. The situation that image elements are too complex and cannot be compared is avoided.
And in the step S4, the HTML page is labeled by multiple dimensions, and score evaluation is carried out according to scores set by different dimensions.
The steps have the advantages that the scores are effectively subdivided in different dimensions, the scoring precision is easily improved, the score proportion among the dimensions can be adjusted according to different page requirements, if a theme color interface is available, the color value score proportion is improved, the color test accuracy is better guaranteed, and the button type interface can be spaced at the score proportion, the layout position is better guaranteed, and the layout position is accurate.
Compared with the traditional method, the method has low manual testing efficiency and non-uniform standard, and the automatic UI interface reduction degree testing method can automatically test and issue the reduction degree score by marking and modifying suggestions by comparing UI reduction degree testing files. The UI designer can finish the UI marking at the pixel level quickly and accurately, writing cost between the designer and the engineer is reduced, and the UI designer and the engineer can not check and modify repeatedly. A large amount of labor cost is saved, and UI interface reduction degree testing efficiency is improved.
Drawings
FIG. 1 is a flow chart of the test of the present invention.
Detailed Description
A UI interface reduction degree automatic test method comprises the following steps:
s1, filling out an HTML page address;
s2, selecting a UI design interface as a comparison basic file, wherein the suffix name of the file format is psd or sketch;
s3, adjusting the sizes of the HTMI page and the UI design interface to be consistent in display proportion;
s4, comparing the HTML page with a UI design interface in a page superposition comparison mode, comparing with the UI design interface as a standard, marking a difference area, comparing and calling a PageRuler.js plug-in from the page by using image comparison, and marking the HTML page from multiple dimensions such as position layout, space, icon, dividing line, character, picture, wire frame, projection and color;
s5, deriving and marking a test result, wherein the format of the test result is jpg or png; the marking test result comprises a position keyword, a marking style difference size and a color reduction degree difference value.
The step S4 is divided into the following steps:
s401, element processing
In an HTML page and a UI design interface, layers are not combined, are overlapped in a crossed mode, and a multi-layer complex background image and the like are separated independently to form layered elements;
s402, superposition processing
Comparing hierarchical elements in a UI design interface and an HTML page to establish a corresponding relation, selecting a golden section, a Sudoku section, a symmetrical partition or a format tower principle to carry out element independent comparison according to a layout mode of the page, and carrying out coordinate attribute and style comparison to form a mapping relation;
s403, superposition contrast
And comparing the difference of elements and layout in the UI design interface and the HTML page according to the coordinate attribute and the style contrast.
And in the step S4, the HTML page is labeled by multiple dimensions, and score evaluation is carried out according to scores set by different dimensions.
The HTMI page and UI design interface are displayed at 100% of the original pixel size. The display effect is prevented from being reduced in the zooming of the computer display equipment.
The following dimension score requirements are given by combining the existing UI design elements for score evaluation, the scores can be adjusted according to the actual interface requirements, the evaluation is not the only evaluation standard of the scheme, the following table has the function of giving specific comparative developed element classification, and the scheme is characterized in that after the scores are finished, the scores are used for designers and development engineers to check. And confirming the problem needing to be modified through the score, and scoring the latest element for priority treatment. The invention realizes the accurate control of the interface reduction degree, and the contrast fraction not only effectively tests the reduction degree but also clearly indicates the direction to be modified through effectively and quantitatively detecting the index by elements. The UI designer can finish the UI marking at the pixel level quickly and accurately, writing cost between the designer and the engineer is reduced, and the UI designer and the engineer can not check and modify repeatedly. A large amount of labor cost is saved, and UI interface reduction degree testing efficiency is improved.
Claims (4)
1. A UI interface reduction degree automatic test method is characterized by comprising the following steps:
s1, filling out an HTML page address;
s2, selecting a UI design interface as a comparison basic file, wherein the suffix name of the file format is psd or sketch;
s3, adjusting the size of the HTMI page and the UI design interface to be consistent in display scale;
s4, comparing the HTML page with a UI design interface in a page superposition comparison mode, comparing with the UI design interface as a standard, marking a difference area, comparing and calling a PageRuler.js plug-in from the page by using image comparison, and marking the HTML page from multiple dimensions such as position layout, space, icon, dividing line, character, picture, wire frame, projection and color;
s5, deriving and marking a test result, wherein the format of the test result is jpg or png; the marking test result comprises a position keyword, a marking style difference size and a color reduction degree difference value.
2. The method for automatically testing the UI interface reducibility according to claim 1, wherein the step S4 is divided into the following steps:
s401, element processing
In an HTML page and a UI design interface, layers are not combined, are overlapped in a crossed mode, and a multi-layer complex background image and the like are separated independently to form layered elements;
s402, superposition processing
Comparing hierarchical elements in a UI design interface and an HTML page to establish a corresponding relation, selecting a golden section, a Sudoku section, a symmetrical partition or a format tower principle to carry out element independent comparison according to a layout mode of the page, and carrying out coordinate attribute and style comparison to form a mapping relation;
s403, superposition contrast
And comparing the difference of elements and layout in the UI design interface and the HTML page according to the coordinate attribute and the style contrast.
3. The method according to claim 1, wherein in S4, the HTML page is labeled in multiple dimensions, and score evaluation is performed according to scores set for different dimensions.
4. The method for automatically testing the reducibility of a UI interface as claimed in claim 1, wherein the HTMI page and the UI design interface are displayed according to 100% of an original pixel size.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210431206.4A CN114860521A (en) | 2022-04-23 | 2022-04-23 | Automatic test method for UI interface reduction degree |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210431206.4A CN114860521A (en) | 2022-04-23 | 2022-04-23 | Automatic test method for UI interface reduction degree |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114860521A true CN114860521A (en) | 2022-08-05 |
Family
ID=82632927
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210431206.4A Pending CN114860521A (en) | 2022-04-23 | 2022-04-23 | Automatic test method for UI interface reduction degree |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114860521A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115328855A (en) * | 2022-10-17 | 2022-11-11 | 北京尽微致广信息技术有限公司 | Method and device for evaluating file reduction degree, storage medium and equipment |
-
2022
- 2022-04-23 CN CN202210431206.4A patent/CN114860521A/en active Pending
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115328855A (en) * | 2022-10-17 | 2022-11-11 | 北京尽微致广信息技术有限公司 | Method and device for evaluating file reduction degree, storage medium and equipment |
| WO2024083109A1 (en) * | 2022-10-17 | 2024-04-25 | 北京创作美好科技有限公司 | File restoration degree evaluation method and apparatus, storage medium and device |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9141746B1 (en) | System and method to drag instance master physical shell | |
| US7921390B2 (en) | Method and system for creating, viewing, editing, and sharing output from a design checking system | |
| US9047437B2 (en) | Method, system and software for accessing design rules and library of design features while designing semiconductor device layout | |
| US8174522B2 (en) | Three-dimensional (3D) structure data creation method, 3D structure data creation apparatus, computer-readable record media and computer system | |
| US7990375B2 (en) | Virtual view schematic editor | |
| US9552450B2 (en) | Determining a user-specified location in a graphical user interface of an electronic design automation tool | |
| CN114860521A (en) | Automatic test method for UI interface reduction degree | |
| CN105183966B (en) | Instrument floor plan fast drawing method based on database | |
| JPH08212241A (en) | Design method for mask pattern for semiconductor integrated circuit or directly plotting pattern on wafer and their design rule confirming method | |
| EP2711897A1 (en) | Panoptic visualization document differencing | |
| JP5691743B2 (en) | Mounting design support program, method and apparatus | |
| US10055533B2 (en) | Visualization of analysis process parameters for layout-based checks | |
| US10163787B2 (en) | Semiconductor structure | |
| US10068046B2 (en) | Systems and methods for tracking changes to and identifying layers of integrated circuit devices | |
| KR101874459B1 (en) | Apparatus and method for generating user interface for pre-verifying dfm | |
| CN103440391A (en) | Semiconductor process corner scanning and simulating method based on numerical value selection function | |
| CN112149377A (en) | Method and device for rapidly generating FPD layout and readable storage medium | |
| CN103135894B (en) | Bill data input device and bill data input method | |
| US20210232717A1 (en) | Measurement tables including target identification information indicating a measurement target | |
| TWI651541B (en) | On-board component examination device, examination device control method and examination system control method | |
| JP2008304716A (en) | System and program for designing reticle | |
| US8826197B2 (en) | Pattern-based replacement for layout regularization | |
| JPH03171260A (en) | Graphic editor device | |
| TWI428775B (en) | System and method for copying graphics of a die | |
| CN110457720A (en) | The execution method that plate member checks device, checks device and checks system |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |