CN116483687A - Front-end automatic verification method, device, equipment and storage medium - Google Patents
Front-end automatic verification method, device, equipment and storage medium Download PDFInfo
- Publication number
- CN116483687A CN116483687A CN202310260968.7A CN202310260968A CN116483687A CN 116483687 A CN116483687 A CN 116483687A CN 202310260968 A CN202310260968 A CN 202310260968A CN 116483687 A CN116483687 A CN 116483687A
- Authority
- CN
- China
- Prior art keywords
- dom
- base64 code
- dom element
- iteration
- target page
- 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
- 238000012795 verification Methods 0.000 title claims abstract description 80
- 238000000034 method Methods 0.000 title claims abstract description 47
- 238000004590 computer program Methods 0.000 claims description 18
- 230000000007 visual effect Effects 0.000 claims description 12
- 238000001914 filtration Methods 0.000 claims description 5
- 238000012216 screening Methods 0.000 claims description 3
- 238000010586 diagram Methods 0.000 description 18
- 238000012360 testing method Methods 0.000 description 8
- 230000006870 function Effects 0.000 description 7
- 238000012545 processing Methods 0.000 description 7
- 238000002372 labelling Methods 0.000 description 4
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 230000008569 process Effects 0.000 description 3
- 238000004891 communication Methods 0.000 description 2
- 230000004075 alteration Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 239000003086 colorant Substances 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000012217 deletion Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 239000000284 extract Substances 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 230000010354 integration Effects 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 238000011179 visual inspection Methods 0.000 description 1
- 238000012800 visualization Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/3668—Software testing
- G06F11/3672—Test management
- G06F11/3688—Test management for test execution, e.g. scheduling of test suites
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Computer Hardware Design (AREA)
- Quality & Reliability (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Debugging And Monitoring (AREA)
Abstract
The invention discloses a front-end automatic verification method, a device, equipment and a storage medium, wherein the method comprises the following steps: acquiring a first DOM element before target page iteration and a second DOM element after iteration; drawing the first DOM element and the second DOM element on a first canvas element and a second canvas element respectively, and correspondingly converting the first DOM element and the second DOM element into a first base64 code and a second base64 code; and comparing the first base64 code with the second base64 code to obtain an automatic check result. By using the method disclosed by the invention, the problem that automatic verification cannot be performed due to the security fingerprint can be solved, and the accuracy of the verification result can be improved.
Description
Technical Field
The present invention relates to the field of front end verification technologies, and in particular, to a front end automatic verification method, device, equipment, and storage medium.
Background
And the front-end visual verification is to compare the page layout and the element style rendered by the front end before and after the front-end visual verification. The traditional front-end visual verification mode is usually verified by a tester through visual inspection, the verification efficiency of the mode is low, the uncertainty of a result can be caused by human factors, and meanwhile, the front-end visual verification cost is extremely high because each complicated page has a large number of web elements and no abundant test time. In the existing front-end visual verification mode based on automatic testing, a more general verification scheme is to directly compare the CSS (Cascading Style Sheets, cascading style sheet) screen shots of the page before verification and the page after verification, and judge whether a difference exists or not. However, in some scenarios, due to factors such as information security, an interface to be checked may randomly generate a section of security fingerprint in the screenshot data, where the security fingerprint may cause data inconsistency between the page before check and the page after check, so that automatic check cannot be performed due to low accuracy.
Disclosure of Invention
The invention provides a front-end automatic verification method, a device, equipment and a storage medium, which are used for solving the technical problem that the existing front-end visual verification method cannot automatically verify a page containing a security fingerprint.
In order to solve the above technical problems, in a first aspect, the present invention provides a front-end automatic verification method, which includes:
acquiring a first DOM element before target page iteration and a second DOM element after iteration;
drawing the first DOM element and the second DOM element on a first canvas element and a second canvas element respectively, and correspondingly converting the first DOM element and the second DOM element into a first base64 code and a second base64 code;
and comparing the first base64 code with the second base64 code to obtain an automatic check result.
Optionally, the automated verification result includes the target page before and/or after the iteration of the visual presentation.
Optionally, before the automatic verification result is obtained, the method further includes:
if the first base64 code and the second base64 code are inconsistent, comparing the first DOM element and the second DOM element, and determining a difference element;
and marking the difference element in the second canvas element, and converting the difference element into a third base64 code.
Optionally, the automated verification result includes a front end img tag embedded with the first base64 code and the third base64 code.
Optionally, if the first base64 code and the second base64 code are identical, the automated verification result includes a front end img tag embedded with the first base64 code or the second base64 code.
Optionally, after the obtaining the first DOM element before the target page iteration and the second DOM element after the iteration, the method further includes:
and screening out preset filtering information in the first DOM element and the second DOM element.
Optionally, the obtaining the first DOM element before the target page iterates and the second DOM element after the target page iterates includes:
acquiring a first DOM node tree before target page iteration and a second DOM node tree after iteration;
extracting an attribute set of each DOM in the first DOM node tree and an offset position relative to a body element in the first DOM node tree to obtain the first DOM element;
and extracting an attribute set of each DOM in the second DOM node tree and an offset position relative to a body element in the second DOM node tree to obtain the second DOM element.
In a second aspect, the present invention provides a front-end automation verification device, including:
the element acquisition module is used for acquiring a first DOM element before iteration of the target page and a second DOM element after iteration;
the element drawing module is used for drawing the first DOM element and the second DOM element on the first canvas element and the second canvas element respectively and correspondingly converting the first DOM element and the second DOM element into a first base64 code and a second base64 code;
and the automatic verification module is used for comparing the first base64 code with the second base64 code to obtain an automatic verification result.
In a third aspect, the present invention provides a front-end automation verification device comprising a memory and a processor, wherein:
the memory is used for storing a computer program;
the processor is configured to read the computer program in the memory and perform the steps of any of the front-end automated verification methods provided in the first aspect above.
In a fourth aspect, the present invention provides a computer readable storage medium having stored thereon a readable computer program which when executed by a processor performs the steps of the front-end automated verification method as provided in the first aspect above.
Compared with the prior art, the front-end automatic verification method, the device, the equipment and the storage medium provided by the invention have the following beneficial effects:
the method comprises the steps of respectively drawing a first DOM element and a second DOM element before target page iteration and a second DOM element after target page iteration on the first canvas element and the second canvas element, correspondingly converting the first DOM element and the second DOM element into a first base64 code and a second base64 code, and comparing the first base64 code and the second base64 code to obtain an automatic verification result. By using the method disclosed by the invention, the problem that automatic verification cannot be performed due to the security fingerprint can be solved, and the accuracy of the verification result can be improved.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions of the prior art, the drawings that are required in the embodiments or the description of the prior art will be briefly described, and it is apparent that the drawings in the following description are only some embodiments of the present invention, but not all embodiments, and other drawings obtained according to these drawings without inventive effort are all within the scope of the present invention.
FIG. 1 is a flow chart of a front end automated verification method provided by an embodiment of the present invention;
FIG. 2 is a flowchart of a DOM element obtaining method according to an embodiment of the present invention;
FIG. 3 is a schematic diagram of an automated verification result provided by an embodiment of the present invention;
FIG. 4 is a flow chart of a labeling difference element provided by an embodiment of the present invention;
FIG. 5 is a schematic diagram of another automated verification result provided by an embodiment of the present invention;
FIG. 6 is a schematic diagram of a third base64 code in an automated verification result according to an embodiment of the present invention;
FIG. 7 is a schematic structural diagram of a front-end automatic verification device according to an embodiment of the present invention;
FIG. 8 is a schematic structural diagram of a front-end automatic verification device according to an embodiment of the present invention;
fig. 9 is a schematic structural diagram of a computer-readable storage medium according to an embodiment of the present invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention more apparent, the present invention will be described in further detail with reference to the accompanying drawings and specific embodiments. It should be understood that the specific embodiments described herein are for purposes of illustration only and are not intended to limit the scope of the invention.
In order that the present disclosure may be more fully described and fully understood, the following description is provided by way of illustration of embodiments and specific examples of the present invention; this is not the only form of practicing or implementing the invention as embodied. The description covers the features of the embodiments and the method steps and sequences for constructing and operating the embodiments. However, other embodiments may be utilized to achieve the same or equivalent functions and sequences of steps. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.
It should be noted that the terms "first," "second," and the like in the description and the claims of the present invention and the above figures are used for distinguishing between similar objects and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used may be interchanged where appropriate such that the embodiments of the invention described herein may be implemented in sequences other than those illustrated or otherwise described herein.
In the description of the embodiments of the present invention, unless otherwise indicated, "/" means or, for example, a/B may represent a or B; the text "and/or" is merely an association relation describing the associated object, and indicates that three relations may exist, for example, a and/or B may indicate: in addition, in the description of the embodiments of the present invention, "plural" means two or more, and other words and the like, it is to be understood that the preferred embodiments described herein are for illustration and explanation of the present invention only, and are not intended to limit the present invention, and embodiments of the present invention and features in the embodiments may be combined with each other without conflict.
Example 1
As shown in fig. 1, a flowchart of a front-end automatic verification method according to an embodiment of the present invention includes the following steps:
step S101, a first DOM (Document Object Model ) element before target page iteration and a second DOM element after iteration are obtained;
in step S101, the target page refers to a page for which front-end visual verification is required. The target page will generate two versions in the iteration, namely a target page before the iteration and a target page after the iteration.
DOM, the document object model, is a standard API (Application Programming Interface ) that processes HTML and XML files. DOM by using the document as a tree structure, each node of the tree represents an HTML tag or text item within the tag, and the inter-relevance between tags in the HTML document can be accurately described.
Specifically, before the automatic test is executed, a first DOM element is firstly obtained, and then after the automatic test is executed, a second DOM element is obtained, so that the first DOM element before the target page iterates and the second DOM element after the target page iterates are obtained.
Further, please refer to fig. 2, which is a flowchart of a DOM element obtaining method according to an embodiment of the present invention. In the embodiment of the present invention, in step S101, the obtaining the first DOM element before the target page iterates and the second DOM element after the target page iterates includes:
step S1011: acquiring a first DOM node tree before target page iteration and a second DOM node tree after iteration;
step S1012: extracting an attribute set of each DOM in the first DOM node tree and an offset position relative to a body element in the first DOM node tree to obtain the first DOM element;
step S1013: and extracting an attribute set of each DOM in the second DOM node tree and an offset position relative to a body element in the second DOM node tree to obtain the second DOM element.
Specifically, in the embodiment of the invention, an automation program firstly acquires a first DOM node tree before target page iteration, traverses the first DOM node tree, extracts an attribute set of each DOM and an offset position relative to a body element in the first DOM node tree according to the sequence of the first DOM node tree, and stores the attribute set and the offset position to obtain the first DOM element; the body element refers to a root element of the whole DOM, and in the embodiment of the invention, only the DOM element in the body element is checked. And then, obtaining a second DOM node tree after target page iteration, traversing the second DOM node tree, extracting an attribute set of each DOM and an offset position relative to a body element in the second DOM node tree according to the sequence of the second DOM node tree, and storing to obtain the second DOM element.
Step S102, the first DOM element and the second DOM element are respectively drawn on the first canvas element and the second canvas element, and are correspondingly converted into a first base64 code and a second base64 code;
in step S102, canvas is a canvas element comprising a plurality of drawing paths, rectangles, circles, characters, and methods of adding images for drawing graphics on a web page.
Specifically, the first DOM element is firstly obtained, a first canvas element is newly built, the first DOM element is drawn on the first canvas element according to the DOM node tree sequence of the target page before iteration by using the API of the canvas, and the first canvas element is converted into a first base64 code to be stored.
And similarly, after the automatic test is executed, acquiring the second DOM element, creating a second canvas element, drawing the second DOM element on the second canvas element by using an API of the canvas according to the DOM node tree sequence of the target page after iteration, and converting the second canvas element into a second base64 code for storage.
According to the embodiment of the invention, the first DOM element and the second DOM element are respectively drawn on the first canvas element and the second canvas element and correspondingly converted into the first base64 code and the second base64 code, so that the problem that automatic verification cannot be performed due to the security fingerprint can be solved.
Step S103, comparing the first base64 code with the second base64 code to obtain an automatic verification result;
in this step, by comparing the first base64 code with the second base64 code, so as to determine whether the target page before iteration is consistent with the target page after iteration, the problem of inconsistent rendering patterns caused by resolution problems existing in simply comparing attribute information such as CSS can be avoided, and the accuracy of the verification result is improved.
Further, in the embodiment of the present invention, the automated verification result includes the target page before and/or after the iteration of the visual display.
Further, please refer to fig. 3, which is a schematic diagram of an automated verification result according to an embodiment of the present invention.
If the first base64 code and the second base64 code are consistent, the automated verification result includes a front end img tag embedded with the first base64 code or the second base64 code. In the embodiment of the invention, the automatic verification result comprises a front-end img tag embedded with the first base64 code.
Further, please refer to fig. 4, which is a flowchart illustrating a difference element labeling according to an embodiment of the present invention. In step S103, before the automatic verification result is obtained, the method further includes:
s1031: if the first base64 code and the second base64 code are inconsistent, comparing the first DOM element and the second DOM element, and determining a difference element;
s1032: and marking the difference element in the second canvas element, and converting the difference element into a third base64 code.
Specifically, the difference elements include, but are not limited to, page layout or element style of the target page before and after iteration, such as adding, deleting, or modifying the difference parts of the elements, and when the first base64 code and the second base64 code are consistent, the target page is indicated to be consistent before and after iteration; conversely, if the first base64 code and the second base64 code are inconsistent, the page layout or element style of the target page is changed before and after iteration.
In the embodiment of the invention, when comparing the first base64 code and the second base64 code, if the first base64 code and the second base64 code are inconsistent, the first DOM element and the second DOM element are further compared to determine the difference element, and the difference element is marked in the second canvas element and the third base64 code is generated, so that a tester can more intuitively understand the difference element of the target page before and after iteration, and the test efficiency is greatly improved.
Further, in the embodiment of the present invention, the automated verification result includes a front end img tag embedded with the first base64 code and the third base64 code.
Further, please refer to fig. 5, which is a schematic diagram illustrating another automatic verification result according to an embodiment of the present invention.
Specifically, when the first base64 code is inconsistent with the second base64 code, the first DOM element and the second DOM element are compared, so that a difference DOM element such as a new increment, a modification or a deletion of the target page relative to the target page before iteration is found out, the coordinates of the difference DOM element are obtained, different forms, such as different colors, lines or shapes, are used at the same coordinate position on the second canvas element by using the API of the canvas, the difference DOM element is subjected to frame selection labeling, then the second canvas after the frame selection labeling is converted into a third base64 code, the third base64 code is embedded into a front end img label for visual display, visual visualization of front end automatic verification is realized, and a tester can understand the difference element of the target page before and after iteration with minimum cost, so that the test efficiency is greatly improved.
Specifically, as shown in fig. 6, a schematic diagram of a third base64 code in an automatic verification result provided by the embodiment of the present invention is shown, where "wholesale unit price" and "average price" selected by a solid line Fang Kuangkuang are newly added difference elements before and after iteration of a target page, and "business unit" selected by a dashed line Fang Kuangkuang is a modified difference element before and after iteration of the target page.
Further, in some embodiments, the automated verification result may also include only a front-end img tag embedded with the third base64 code.
Further, in the embodiment of the present invention, in step S101, after the obtaining the first DOM element before the target page iteration and the second DOM element after the iteration, the method further includes:
and screening out preset filtering information in the first DOM element and the second DOM element.
Specifically, after the first DOM element and the second DOM element are obtained, preset filtering information in the first DOM element and the second DOM element is filtered respectively, wherein the filtering information includes but is not limited to variable data such as time and number, and the problem of inconsistent screenshot data of the page before and after the test caused by the variable data can be avoided.
Example 2
Based on the foregoing front-end automatic calibration method, an embodiment of the present invention provides a front-end automatic calibration device, as shown in fig. 7, which is a schematic structural diagram of the front-end automatic calibration device provided by the embodiment of the present invention, where the front-end automatic calibration device 30 includes:
the element acquisition module 31 is configured to acquire a first DOM element before iteration and a second DOM element after iteration of the target page;
the element drawing module 32 is configured to draw the first DOM element and the second DOM element on the first canvas element and the second canvas element, and convert the first DOM element and the second DOM element into a first base64 code and a second base64 code, respectively;
and the automatic verification module 33 is configured to compare the first base64 code with the second base64 code to obtain an automatic verification result.
For other details of implementing the above technical solution by each module in the front-end automatic verification device, reference may be made to the description in the front-end automatic verification method provided in the above embodiment of the present invention, which is not repeated herein.
Based on the foregoing front-end automatic verification method, an embodiment of the present invention provides a front-end automatic verification device, as shown in fig. 8, which is a schematic structural diagram of the front-end automatic verification device provided in the embodiment of the present invention, where the device 40 includes a processor 41 and a memory 42 coupled to the processor 41. The memory 42 stores a computer program which, when executed by the processor 41, causes the processor 41 to perform the steps of the front-end automated verification method in the above-described embodiment.
For further details of the implementation of the foregoing technical solution by the processor 41 in the foregoing front-end automatic verification device, reference may be made to the description of the front-end automatic verification method provided in the foregoing embodiment of the present invention, which is not repeated herein.
Wherein the processor 41 may also be referred to as a CPU (Central Processing Unit ), the processor 41 may be an integrated circuit chip with signal processing capability; the processor 41 may also be a general purpose processor, such as a microprocessor or the processor 41 may be any conventional processor, a DSP (Digital Signal Process, digital signal processor), ASIC (Application Specific Integrated Circuit ), FPGA (Field Programmable Gata Array, field programmable gate array) or other programmable logic device, discrete gate or transistor logic device, discrete hardware components.
Based on the foregoing front-end automatic verification method, an embodiment of the present invention provides a computer readable storage medium, as shown in fig. 9, which is a schematic structural diagram of the computer readable storage medium provided in the embodiment of the present invention, where a readable computer program 51 is stored on the storage medium; the computer program 51 may be stored in the storage medium in the form of a software product, and includes several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) or a processor (processor) to execute all or part of the steps of the methods according to the embodiments of the present invention. And the aforementioned storage medium includes: various media capable of storing program codes, such as a usb disk, a removable hard disk, a magnetic or optical disk, a ROM (Read-Only Memory), a RAM (Random Access Memory), or a terminal device such as a computer, a server, a mobile phone, or a tablet.
In the several embodiments provided in the present invention, it should be understood that the disclosed systems, devices, and methods may be implemented in other manners. For example, the apparatus embodiments described above are merely illustrative, and for example, the division of the modules is merely a logical function division, and there may be additional divisions when actually implemented, for example, multiple modules or components may be combined or integrated into another system, or some features may be omitted or not performed. Alternatively, the coupling or direct coupling or communication connection shown or discussed with each other may be an indirect coupling or communication connection via some interfaces, devices or modules, which may be in electrical, mechanical, or other forms.
The modules described as separate components may or may not be physically separate, and components shown as modules may or may not be physical modules, i.e., may be located in one place, or may be distributed over a plurality of network modules. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of this embodiment.
In addition, each functional module in each embodiment of the present invention may be integrated into one processing module, or each module may exist alone physically, or two or more modules may be integrated into one module. The integrated modules may be implemented in hardware or in software functional modules. The integrated modules, if implemented in the form of software functional modules and sold or used as a stand-alone product, may be stored in a computer readable storage medium.
In the above embodiments, it may be implemented in whole or in part by software, hardware, firmware, or any combination thereof. When implemented in software, may be implemented in whole or in part in the form of a computer program product.
The computer program product includes one or more computer instructions. When loaded and executed on a computer, produces a flow or function in accordance with embodiments of the present invention, in whole or in part. The computer may be a general purpose computer, a special purpose computer, a computer network, or other programmable apparatus. The computer instructions may be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another computer-readable storage medium, for example, the computer instructions may be transmitted from one website, computer, server, or data center to another website, computer, server, or data center by a wired (e.g., coaxial cable, fiber optic, digital Subscriber Line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.). The computer readable storage medium may be any available medium that can be stored by a computer or a data storage device such as a server, data center, etc. that contains an integration of one or more available media. The usable medium may be a magnetic medium (e.g., a floppy disk, a hard disk, a magnetic tape), an optical medium (e.g., a DVD), or a semiconductor medium (e.g., a Solid State Disk (SSD)), or the like.
The above description has been made in detail for the technical solutions provided by the present invention, and specific examples are applied in the present invention to illustrate the principles and embodiments of the present invention, and the above examples are only used to help understand the method and core ideas of the present invention; meanwhile, as those skilled in the art will have variations in the specific embodiments and application scope in accordance with the ideas of the present invention, the present description should not be construed as limiting the present invention in view of the above.
It will be appreciated by those skilled in the art that embodiments of the present invention may be provided as a method, system, or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems) and computer program products according to the invention. It will be understood that each flow and/or block of the flowchart illustrations and/or block diagrams, and combinations of flows and/or blocks in the flowchart illustrations and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
It will be apparent to those skilled in the art that various modifications and variations can be made to the present invention without departing from the spirit or scope of the invention. Thus, it is intended that the present invention also include such modifications and alterations insofar as they come within the scope of the appended claims or the equivalents thereof.
Claims (10)
1. A front-end automation verification method, comprising:
acquiring a first DOM element before target page iteration and a second DOM element after iteration;
drawing the first DOM element and the second DOM element on a first canvas element and a second canvas element respectively, and correspondingly converting the first DOM element and the second DOM element into a first base64 code and a second base64 code;
and comparing the first base64 code with the second base64 code to obtain an automatic check result.
2. The front-end automated verification method of claim 1, wherein the automated verification result comprises the target page before and/or after an iteration of a visual presentation.
3. The front-end automation verification method according to claim 1 or 2, further comprising, before the automatic verification result is obtained:
if the first base64 code and the second base64 code are inconsistent, comparing the first DOM element and the second DOM element, and determining a difference element;
and marking the difference element in the second canvas element, and converting the difference element into a third base64 code.
4. The front-end automation verification method of claim 3, wherein,
the automated verification result includes a front end img tag embedded with the first base64 code and the third base64 code.
5. The front-end automation verification method of claim 2, wherein,
if the first base64 code and the second base64 code are consistent, the automated verification result includes a front end img tag embedded with the first base64 code or the second base64 code.
6. The method for automatically verifying the front end according to claim 1, further comprising, after the obtaining the first DOM element before the target page iteration and the second DOM element after the iteration:
and screening out preset filtering information in the first DOM element and the second DOM element.
7. The method for automatically verifying the front end according to claim 1, wherein the step of obtaining the first DOM element before the target page is iterated and the second DOM element after the target page is iterated includes:
acquiring a first DOM node tree before target page iteration and a second DOM node tree after iteration;
extracting an attribute set of each DOM in the first DOM node tree and an offset position relative to a body element in the first DOM node tree to obtain the first DOM element;
and extracting an attribute set of each DOM in the second DOM node tree and an offset position relative to a body element in the second DOM node tree to obtain the second DOM element.
8. A front-end automation verification device, comprising:
the element acquisition module is used for acquiring a first DOM element before iteration of the target page and a second DOM element after iteration;
the element drawing module is used for drawing the first DOM element and the second DOM element on the first canvas element and the second canvas element respectively and correspondingly converting the first DOM element and the second DOM element into a first base64 code and a second base64 code;
and the automatic verification module is used for comparing the first base64 code with the second base64 code to obtain an automatic verification result.
9. A front-end automation verification device comprising a memory and a processor, wherein:
the memory is used for storing a computer program;
the processor is configured to read the computer program in the memory and perform the steps of any of the front-end automated verification methods of claims 1-7.
10. A computer readable storage medium, characterized in that a readable computer program is stored thereon, which program, when being executed by a processor, implements the steps of the front-end automation verification method according to any of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310260968.7A CN116483687A (en) | 2023-03-13 | 2023-03-13 | Front-end automatic verification method, device, equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310260968.7A CN116483687A (en) | 2023-03-13 | 2023-03-13 | Front-end automatic verification method, device, equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116483687A true CN116483687A (en) | 2023-07-25 |
Family
ID=87218532
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310260968.7A Pending CN116483687A (en) | 2023-03-13 | 2023-03-13 | Front-end automatic verification method, device, equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116483687A (en) |
-
2023
- 2023-03-13 CN CN202310260968.7A patent/CN116483687A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110337641B (en) | Determining application test results using screen shot primitive data | |
| CN109614424B (en) | Page layout generation method, device, computing equipment and medium | |
| CN110442511B (en) | Visual embedded point testing method and device | |
| CN103518393B (en) | The system and method for detecting mobile communication equipment content | |
| US20130004087A1 (en) | Method and system for webpage regression testing | |
| CN111290956B (en) | Brain graph-based test method and device, electronic equipment and storage medium | |
| CN110908890A (en) | Automatic test method and device for interface | |
| CN111144493B (en) | Method for automatically identifying algorithm index test, storage medium and electronic terminal | |
| CN112445693B (en) | Page update detection method, device, equipment and storage medium | |
| CN110990010A (en) | Software interface code generation method and device | |
| CN112306495A (en) | Picture verification method and device, computer equipment and computer-readable storage medium | |
| CN111966580A (en) | Automatic testing method, device, equipment and storage medium based on artificial intelligence | |
| CN114529933A (en) | Contract data difference comparison method, device, equipment and medium | |
| CN104809053A (en) | Control style testing method and device | |
| US9881210B2 (en) | Generating a computer executable chart visualization by annotating a static image | |
| CN116483687A (en) | Front-end automatic verification method, device, equipment and storage medium | |
| US8473892B1 (en) | Computer aided design system and method | |
| CN111933228B (en) | Method and device for realizing project distribution and management system in clinical research | |
| US20220237108A1 (en) | Source traceability-based impact analysis | |
| CN114339208A (en) | Video testing method and device, electronic equipment and computer storage medium | |
| CN113868137A (en) | Method, device and system for processing buried point data and server | |
| CN108629012B (en) | Intelligent verification method and system for forensic data analysis accuracy | |
| CN104809061A (en) | Regression testing method and device | |
| CN113704650A (en) | Information display method, device, system, equipment and storage medium | |
| CN104572595A (en) | Word stock check device and word stock check method |
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 |