CN113742626A - Visual verification method and system for preset webpage file - Google Patents
Visual verification method and system for preset webpage file Download PDFInfo
- Publication number
- CN113742626A CN113742626A CN202111044008.4A CN202111044008A CN113742626A CN 113742626 A CN113742626 A CN 113742626A CN 202111044008 A CN202111044008 A CN 202111044008A CN 113742626 A CN113742626 A CN 113742626A
- Authority
- CN
- China
- Prior art keywords
- target
- source
- node
- webpage
- 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
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Debugging And Monitoring (AREA)
Abstract
The invention discloses a visual verification method and a system for a preset webpage file, wherein at least one target node is selected from a target webpage, and the position information of the target node or a target area limited between the two target nodes in the target webpage is acquired; in a source webpage, the source webpage is obtained by loading a preset file on the webpage, corresponding positions in the source webpage are respectively determined based on the position information of the target node or the target area on the target webpage, and the source node or the source area loaded on the corresponding positions are respectively obtained; and comparing and verifying the target node and the source node, or comparing and verifying the source region and the target region to obtain a verification result of the source node or the target region. Therefore, in the embodiment of the invention, the whole process is automatically completed by the set plug-in program without manual participation in the process of realizing the visual verification of the preset files of the webpage, so that the verification accuracy is improved, and the time and the labor are saved.
Description
Technical Field
The invention relates to the computer internet technology, in particular to a visual verification method and a visual verification system for a preset webpage file.
Background
With the continuous development of computer network technology, the contents displayed by web pages are more and more diverse, and the contents borne by web pages are also more and more diverse. Especially with the rise of single page Web applications (SPAs), Web applications are increasingly trending towards native application interactions. Under the condition, whether the preset webpage file can be accurately displayed in the webpage or not is regarded as an important ring for ensuring the webpage application experience, and unprecedented importance is attached to the industry. Visual walk-through verification of the preset webpage file is the most important and unique process for ensuring the reduction degree of the preset webpage file.
At present, there are two main ways of performing visual verification on preset documents of a web page.
In the first mode, a designer obtains the difference information between a source webpage obtained by bearing a webpage preset file on a webpage and a webpage expected to be obtained, namely a target webpage, directly by observing, and displays the difference information in an online document mode, wherein the difference information comprises the visual problem and problem description of the webpage preset file. And the designer determines the distinguishing information through the online document and manually maintains the visual problem and the problem solving state of the webpage preset file in the online document. The method needs manual work to participate in the visual verification process, and has multiple intermediate links and low efficiency.
In the second mode, a browser extension technology is adopted, a source webpage obtained by bearing a webpage preset file on a webpage is covered on a target webpage, and the transparency of the source webpage is adjusted to directly compare with the target webpage, so that visual difference information is quickly positioned. The method needs manual work to participate in the visual verification process, reduces the workload to a certain extent, but does not greatly improve the visual verification efficiency of the preset webpage file, and still needs great communication cost and maintenance cost during visual verification.
It can be seen that no matter which way is adopted to perform visual verification on the preset webpage file, manual participation is required, and a manual and one-to-one visual comparison verification process needs to be performed on a source webpage and a target webpage obtained from the preset webpage file, so that verification is inaccurate, and time and labor are consumed.
Disclosure of Invention
In view of this, the embodiment of the present invention provides a visual verification method for a preset webpage file, which can implement visual verification on the preset webpage file without human intervention, and improve verification accuracy.
The embodiment of the invention also provides a visual verification system for the preset webpage file, which can realize the visual verification of the preset webpage file without manual participation and improve the verification accuracy.
The embodiment of the invention is realized as follows:
a visual verification method for a preset file of a webpage comprises the following steps:
selecting at least one target node in a target webpage, and acquiring the position information of the target node or a target area limited between the two target nodes in the target webpage;
loading a preset webpage file on a webpage to obtain a source webpage, respectively determining corresponding positions in the source webpage according to position information of the target node or the target area on the target webpage, and obtaining a source node or a source area loaded on the corresponding positions;
and comparing and verifying the target node and the source node, or comparing and verifying the source region and the target region to obtain a verification result of the source node or the source region.
Preferably, before at least one target node is selected from the target web page, the method further includes:
and loading the target page to a browser for display, and carrying out walkthrough on the target page in the browser.
Preferably, the method further comprises:
when the verification result of the source node is obtained and is visual difference with the corresponding target node, displaying the verification result of the source node on a source page based on the corresponding position information of the source node on the source page and the obtained current environment information;
and when the verification result of the source region is obtained and the visual difference exists between the verification result of the source region and the corresponding target region, displaying the verification result of the source region on a source page based on the corresponding position information of the source region on the source webpage and the obtained current environment information.
Preferably, determining the corresponding positions in the source page according to the position information of the target node or the target area on the target web page, respectively, and acquiring the source node or the source area carried at the corresponding positions further includes:
acquiring characteristic information of the target node or the target area in the target webpage respectively;
determining a corresponding position in the source page according to the position information of the target node in the target webpage and the characteristic information of the target page, and acquiring a source node loaded on the corresponding position;
or determining a corresponding position in the source page according to the position information of the target area on the target webpage and the characteristic information of the target page, and acquiring a source area loaded on the corresponding position.
Preferably, the feature information of the target node on the target page includes: the size information of the target node and the position information of the target node in a browser window bearing the target page;
the characteristic information of the target area on the target page comprises: the size information of the target area and the position information of the target area in a browser window of the target node bearing the target page.
Preferably, the comparing and verifying the target node and the source node, or the comparing and verifying the source area and the target area comprises:
in the target page, comparing and verifying the target node with a source node, or comparing and verifying the source region with the target region.
Preferably, the target node is a target document object model dom node, and the source node is a source dom node.
A visual verification system for preset files of a webpage comprises: a target page processing unit, a source page processing unit and a visual verification unit, wherein,
the target page processing unit is used for selecting at least one target node from a target webpage and acquiring the position information of the target node or a target area limited between the two target nodes in the target webpage;
the source page processing unit is used for loading a preset webpage file on a webpage to obtain a source webpage, respectively determining corresponding positions in the source webpage according to the position information of the target node or the target area on the target webpage, and acquiring a source node or a source area loaded on the corresponding positions;
and the visual verification unit is used for comparing and verifying the target node and a source node, or comparing and verifying the source region and the target region to obtain a verification result of the source node or the source region.
A visual verification device for preset files of a webpage comprises:
a memory; and a processor coupled to the memory, the processor being configured to execute any one of the above-mentioned visual verification methods for a preset document of a web page based on instructions stored in the memory.
A computer-readable storage medium, on which a computer program is stored, which, when executed by a processor, implements any of the above-mentioned visual verification methods for a preset document of a web page.
As seen above, in the embodiments of the present invention, at least one target node is selected from a target webpage, and position information of the target node or a target area defined between two target nodes in the target webpage is obtained; in a source webpage, the source webpage is obtained by loading a preset file on the webpage, corresponding positions in the source webpage are respectively determined based on the position information of the target node or the target area on the target webpage, and the source node or the source area loaded on the corresponding positions are respectively obtained; and comparing and verifying the target node and the source node, or comparing and verifying the source region and the target region to obtain a verification result of the source node or the target region. Therefore, in the embodiment of the invention, the whole process is automatically completed by the set plug-in program without manual participation in the process of realizing the visual verification of the preset files of the webpage, so that the verification accuracy is improved, and the time and the labor are saved.
Drawings
Fig. 1 is a flowchart of a visual verification method for a preset document of a web page according to an embodiment of the present invention;
FIG. 2 is a flowchart illustrating an embodiment of a visual verification method for a default document of a web page according to the present invention;
fig. 3 is a schematic structural diagram of a visual verification system for a preset document of a web page according to an embodiment of the present invention.
Detailed Description
The technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only a part of the embodiments of the present application, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.
The terms "first," "second," "third," "fourth," and the like in the description and in the claims, as well as in the drawings, if any, are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used is interchangeable under appropriate circumstances such that the embodiments of the invention described herein are, for example, capable of operation in sequences other than those illustrated or otherwise described herein. Furthermore, the terms "comprising" and "having," as well as any variations thereof, are intended to cover non-exclusive inclusions. For example, a process, method, system, article, or apparatus that comprises a list of steps or elements is not necessarily limited to those steps or elements explicitly listed, but may include other steps or elements not explicitly listed or inherent to such process, method, article, or apparatus.
The technical solution of the present invention will be described in detail with specific examples. Several of the following embodiments may be combined with each other and some details of the same or similar concepts or processes may not be repeated in some embodiments.
As can be seen from the background art, when performing visual verification on a preset webpage file, manual participation is required, and a manual and one-to-one visual comparison verification process needs to be performed on a source webpage and a target webpage obtained from the preset webpage file, so that verification is inaccurate, and time and labor are consumed. Furthermore, in the background art, when visual verification is performed, a source page and a target page are identified in a picture identification mode, so that the fault tolerance is poor, and the referential performance is not high during actual use. After the distinguishing information between the source webpage and the target webpage is obtained, generally, an online list document is set to be embodied in a list mode and manual maintenance is performed through the document, so that time is consumed for locating a visual problem area in the source webpage through the distinguishing information.
In order to overcome the problems, the embodiment of the invention adopts the following method: selecting at least one target node in a target webpage, and acquiring the position information of the target node or a target area limited between the two target nodes in the target webpage; in a source webpage, the source webpage is obtained by loading a preset file on the webpage, corresponding positions in the source webpage are respectively determined based on the position information of the target node or the target area on the target webpage, and the source node or the source area loaded on the corresponding positions are respectively obtained; and comparing and verifying the target node and the source node, or comparing and verifying the source region and the target region to obtain a verification result of the source node or the target region.
The method of the embodiment of the invention is realized by adopting the set plug-in program, the plug-in program is a program for realizing a certain software interface, namely the set plug-in program is used for realizing the communication interaction between the source page and the target page through the interaction between the interface of the source page and the interaction between the interface of the target page and the target page, respectively obtaining the source node and the target node or the source region and the target region, and carrying out the comparative visual verification to obtain the verification result.
Therefore, in the embodiment of the invention, the whole process is automatically completed by the set plug-in program without manual participation in the process of realizing the visual verification of the preset webpage file, so that the verification accuracy is improved, and the time and the labor are saved.
In the embodiment of the invention, a plurality of target nodes are selected, and the visual verification process between the target node and the corresponding source node or between the target region and the source region is carried out by adopting the scheme aiming at each target node or the target regions limited by two target nodes, so that the complete preset webpage file is verified.
In the embodiment of the invention, when the verification result of the source node is obtained and the verification result is that the visual difference exists between the verification result and the corresponding target node, or the verification result of the source region is obtained and the verification result is that the visual difference exists between the verification result and the corresponding target region, the verification result of the source node or the source region can be displayed at the corresponding position of the source webpage based on the source node or the source region, so that the position of the visual difference point can be positioned in a preset page file, and the visual difference point is convenient for a designer to view and maintain.
The method provided by the embodiment of the invention can realize the process of visual verification of the preset webpage file, directly realize the circulation and tracking of each visual problem of the preset webpage file, and conveniently know the progress of the whole visual verification in real time. According to the embodiment of the invention, the verification result, the position information and the characteristic information of the source node or the source region with the vision problem in the whole vision verification process are recorded through the set plug-in program, so that the follow-up related personnel can conveniently and quickly position the vision problem in the preset page file. The designer of the embodiment of the invention can adopt a picture recognition mode to carry out walkthrough recognition on the target page, and after the target node or the target area is determined, the designer can automatically walk through the source page based on the target node or the target area to obtain the corresponding source node or source area, so that the visual verification process is automatically carried out, and the visual verification work of the designer is simplified.
Fig. 1 is a flowchart of a visual verification method for a preset document of a web page according to an embodiment of the present invention, which includes the following specific steps:
102, loading a preset webpage file on a webpage to obtain a source webpage, respectively determining corresponding positions in the source webpage according to position information of the target node or the target area on the target webpage, and acquiring a source node or a source area loaded on the corresponding positions;
The method is completed by the set plug-in program.
In the method, before at least one target node is selected from the target web page, the method further includes:
and loading the target page to a browser for display, and carrying out walkthrough on the target page in the browser.
In the method, a plurality of target nodes are selected, and for each target node, the scheme shown in fig. 1 is adopted to perform a visual verification process between the target node and a corresponding source node, so that complete visual verification is performed on a preset webpage file.
In the method, a plurality of target areas are selected, each target area is obtained from an area limited between every two different target nodes, and the scheme shown in fig. 1 is adopted to perform a visual verification process between the target area and a corresponding source area, so that complete visual verification is performed on a preset webpage file.
The method further comprises the following steps:
when the verification result of the source node is obtained and visual difference exists between the verification result of the source node and the corresponding target node, displaying the verification result of the source node on the corresponding position of a source webpage based on the source node;
and when the verification result of the source region is that the visual difference exists between the source region and the corresponding target region, displaying the verification result of the source region on the corresponding position of the source webpage based on the source region.
Therefore, the specific positions of the visual distinguishing points are positioned in the page preset file, and the designer can conveniently check and maintain the visual distinguishing points.
Here, before presenting the verification result of the source node or the verification result of the source region, the method further includes: and sending the obtained verification result of the source node or the source region and the obtained current environment information to a source page. Therefore, after receiving the position information, the designer can directly display the position with the visual problem in the source page, and the designer can conveniently modify and maintain the position. Here, the current environment information includes: system files (host), operating system and visual screen pixel information, etc.
In the method, the target node is a target document object model (dom) node, and the source node is a source dom node. The method and the device for achieving the DOM node communication interaction between the target webpage and the source webpage have the advantages that the DOM is an Application Program Interface (API) document based on the tree, the DOM node is a node in the DOM, the target DOM node can be obtained through interaction between the set plug-in program and the target webpage through the API of the target webpage, the source DOM node is obtained through interaction between the API of the source webpage and the source webpage, and the communication interaction between the target webpage and the source webpage about the DOM node is achieved.
In this method, the determining, according to the location information of the target node or the target area on the target web page, corresponding locations in the source page respectively, and the obtaining of the source node or the source area carried in the corresponding locations further includes:
acquiring characteristic information of the target node or the target area in the target webpage respectively;
determining a corresponding position in the source page according to the position information of the target node in the target webpage and the characteristic information of the target page, and acquiring a source node loaded on the corresponding position; or determining a corresponding position in the source page according to the position information of the target area on the target webpage and the characteristic information of the target page, and acquiring a source area loaded on the corresponding position.
Here, the feature information of the target node on the target page includes: the size information of the target node and the position information of the target node in a browser window bearing the target page.
Here, the feature information of the target area on the target page includes: the size information of the target area and the position information of the target area in a browser window of the target node bearing the target page.
In the method, the comparing and verifying the target node and the source node, or the comparing and verifying the source area and the target area comprises:
in the target page, comparing and verifying the target node with a source node, or comparing and verifying the source region with the target region. Thus, automatic visual verification can be performed in the target page walked in the browser.
The following description will be made in detail with reference to a specific example.
Fig. 2 is a flowchart of an embodiment of a method for visually verifying a preset document on a webpage according to an embodiment of the present invention, which includes the following steps:
in this step, the target page of the preset webpage file is actually the page expected by the designer;
in this step, when a plug-in program running instruction is received (which may be triggered by a designer through clicking), the plug-in program is run in a target page;
in this step, the plug-in goes through the target page, that is, the target page is sequentially scrolled in the browser according to the display sequence of the target page.
202, the plug-in loads a preset webpage file on a webpage to obtain a source webpage;
in this step, a source page corresponding to the preset webpage file, that is, a visual page corresponding to the preset webpage file, that is, a page to be visually verified of the preset webpage file, is opened through the browser.
Step 203, selecting a dom node in a target page, and acquiring the position information of the dom node in the target page by the plug-in program;
in the step, the selection of the dom node in the target page is determined by receiving a click dom node instruction;
in this step, the position (x, y) coordinates of the dom node are obtained when the specific plug-in program is obtained, a document.
Step 204, the plug-in program obtains the characteristic information of the dom node on the target page;
in the step, the plug-in program carries out communication interaction with a target page by adopting a getBoundingClientRect () method, and the target page feeds back the size of a dom node and the position information of the dom node in a browser window; therefore, the feature information of the dom node on the target page includes the size information of the dom node and the position information of the browser window bearing the target page.
the implementation process of this step is the same as steps 103-104, and is not described herein again;
in this step, the first and second dom nodes in the target page are selected by the designer by sending a selection instruction in a mouse-moving manner.
Step 206, the plug-in program calculates and obtains distance information and characteristic information of a target area defined between the two dom nodes based on the position information and the characteristic information of the two dom nodes;
the implementation process of the step is as follows: the plug-in program initializes a browser Port object by calling a target webpage label page execution (emitEvent) method, and calls a Port.
the implementation process of the step is as follows: the background of the plug-in initializes the browser Port object by calling chrome.
in the step, the plug-in sends the source dom node or the source region to a target page through the background of the plug-in based on the process of the step 107-108, and the target page performs a visual verification comparison process and determines to obtain a visual verification result;
in this step, the visual verification result includes visual problem description information;
and step 211, sending the obtained visual verification result and the corresponding current environment information, so that the designer can restore the visual verification result.
In this step, the current environment information includes host, operating system, visual screen pixel information, and the like.
Fig. 3 is a schematic structural diagram of a visual verification system for a preset document of a web page according to an embodiment of the present invention, where the system includes: a target page processing unit, a source page processing unit and a visual verification unit, wherein,
the target page processing unit is used for selecting at least one target node from a target webpage and acquiring the position information of the target node or a target area limited between the two target nodes in the target webpage;
the source page processing unit is used for loading a preset webpage file on a webpage to obtain a source webpage, respectively determining corresponding positions in the source webpage according to the position information of the target node or the target area on the target webpage, and acquiring a source node or a source area loaded on the corresponding positions;
and the visual verification unit is used for comparing and verifying the target node and a source node, or comparing and verifying the source region and the target region to obtain a verification result of the source node or the source region.
In the system, the target page processing unit is further configured to load the target page to a browser for display, and perform walkthrough on the target page in the browser.
The system further comprises a display unit, wherein the display unit is used for displaying the verification result of the source node at the corresponding position of the source webpage based on the source node when the verification result of the source node is obtained that the visual difference exists between the verification result of the source node and the corresponding target node; and when the verification result of the source region is that the visual difference exists between the source region and the corresponding target region, displaying the verification result of the source region at the corresponding position of the source webpage based on the source region.
In the system, the source page processing unit is further configured to acquire feature information of the target node or the target area on the target webpage respectively; determining a corresponding position in the source page according to the position information of the target node in the target webpage and the characteristic information of the target page, and acquiring a source node loaded on the corresponding position; or determining a corresponding position in the source page according to the position information of the target area on the target webpage and the characteristic information of the target page, and acquiring a source area loaded on the corresponding position.
Therefore, the plug-in the embodiment of the invention can feed back the visual problem in real time when the plug-in walks through the target page, can effectively improve the visual verification efficiency of the preset file of the page, and can record the position of the visual problem on the source page and the current environmental information of the visual problem in detail. Therefore, the designer can visually see the position of the visual problem fed back on the source page by opening the source page through the browser, the state of the visual problem can be conveniently and rapidly modified on the source page after the visual problem is repaired, and the efficiency of repairing the visual problem by the designer is improved.
In the embodiment of the invention, a designer can visually monitor the whole visual verification through a background management interface at the background of the plug-in program.
Embodiments of the present application also provide a computer-readable storage medium, which stores instructions that, when executed by a processor, may perform the performing steps in the visual verification method for the preset document of the webpage as described above. In practical applications, the computer readable medium may be included in the apparatus/device/system described in the above embodiments, or may exist alone without being assembled into the apparatus/device/system. The computer-readable storage medium carries one or more programs, and when the one or more programs are executed, the method for visually verifying the preset document of the webpage described in the above embodiments may be implemented. According to embodiments disclosed herein, the computer-readable storage medium may be a non-volatile computer-readable storage medium, which may include, for example and without limitation: a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing, without limiting the scope of the present disclosure. In the embodiments disclosed herein, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.
The embodiment of the invention also provides electronic equipment, wherein the device for realizing the method in the embodiment of the application can be integrated. Specifically, the method comprises the following steps:
the electronic device may include a processor of one or more processing cores, memory of one or more computer-readable storage media, and a computer program stored on the memory and executable on the processor. When the program of the memory is executed, the visual verification method for the preset webpage file can be realized.
Specifically, in practical applications, the electronic device may further include a power supply, an input unit, an output unit, and other components. Those skilled in the art will appreciate that the configuration of the electronic device in the embodiments of the present invention is not intended to be limiting, and may include more or fewer components than those shown, or some components in combination, or a different arrangement of components. Wherein:
the processor is a control center of the electronic device, connects various parts of the whole electronic device by various interfaces and lines, and performs various functions of the server and processes data by running or executing software programs and/or modules stored in the memory and calling data stored in the memory, thereby performing overall monitoring of the electronic device.
The memory may be used to store software programs and modules, i.e., the computer-readable storage media described above. The processor executes various functional applications and data processing by executing software programs and modules stored in the memory. The memory may mainly include a storage program area and a storage data area, wherein the storage program area may store an operating system, an application program required for at least one function, and the like; the storage data area may store data created according to the use of the server, and the like. Further, the memory may include high speed random access memory, and may also include non-volatile memory, such as at least one magnetic disk storage device, flash memory device, or other volatile solid state storage device. Accordingly, the memory may also include a memory controller to provide the processor access to the memory.
The electronic equipment also comprises a power supply for supplying power to each component, and the power supply can be logically connected with the processor through the power management system, so that the functions of charging, discharging, power consumption management and the like can be managed through the power management system. The power supply may also include any component of one or more dc or ac power sources, recharging systems, power failure detection circuitry, power converters or inverters, power status indicators, and the like.
The electronic device may further include an input unit operable to receive input numeric or character information and generate keyboard, mouse, joystick, optical or trackball signal inputs related to user settings and function control.
The electronic device may further include an output unit that may be used to display information input by or provided to a user as well as various graphical user interfaces that may be made up of graphics, text, icons, video, and any combination thereof.
The flowchart and block diagrams in the figures of the present application illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments disclosed herein. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams or flowchart illustration, and combinations of blocks in the block diagrams or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
Those skilled in the art will appreciate that various combinations and/or combinations of features recited in the various embodiments and/or claims of the present disclosure can be made, even if such combinations or combinations are not explicitly recited in the present application. In particular, the features recited in the various embodiments and/or claims of the present application may be combined and/or coupled in various ways, all of which fall within the scope of the present disclosure, without departing from the spirit and teachings of the present application.
The principles and embodiments of the present invention are explained herein using specific examples, which are provided only to help understanding the method and the core idea of the present invention, and are not intended to limit the present application. It will be appreciated by those skilled in the art that changes may be made in this embodiment and its broader aspects and without departing from the principles, spirit and scope of the invention, and that all such modifications, equivalents, improvements and equivalents as may be included within the scope of the invention are intended to be protected by the claims.
Claims (10)
1. A visual verification method for preset files of a webpage is characterized by comprising the following steps:
selecting at least one target node in a target webpage, and acquiring the position information of the target node or a target area limited between the two target nodes in the target webpage;
loading a preset webpage file on a webpage to obtain a source webpage, respectively determining corresponding positions in the source webpage according to position information of the target node or the target area on the target webpage, and obtaining a source node or a source area loaded on the corresponding positions;
and comparing and verifying the target node and the source node, or comparing and verifying the source region and the target region to obtain a verification result of the source node or the source region.
2. The method of claim 1, wherein prior to selecting at least one target node in the target web page, further comprising:
and loading the target page to a browser for display, and carrying out walkthrough on the target page in the browser.
3. The method of claim 1, wherein the method further comprises:
when the verification result of the source node is obtained and is visual difference with the corresponding target node, displaying the verification result of the source node on a source page based on the corresponding position information of the source node on the source page and the obtained current environment information;
and when the verification result of the source region is obtained and the visual difference exists between the verification result of the source region and the corresponding target region, displaying the verification result of the source region on a source page based on the corresponding position information of the source region on the source webpage and the obtained current environment information.
4. The method as claimed in claim 1, wherein the corresponding positions in the source page are respectively determined according to the position information of the target node or the target area in the target web page, and the obtaining of the source node or the source area carried at the corresponding positions further comprises:
acquiring characteristic information of the target node or the target area in the target webpage respectively;
determining a corresponding position in the source page according to the position information of the target node in the target webpage and the characteristic information of the target page, and acquiring a source node loaded on the corresponding position;
or determining a corresponding position in the source page according to the position information of the target area on the target webpage and the characteristic information of the target page, and acquiring a source area loaded on the corresponding position.
5. The method of claim 4, wherein the characteristic information of the target node at the target page comprises: the size information of the target node and the position information of the target node in a browser window bearing the target page;
the characteristic information of the target area on the target page comprises: the size information of the target area and the position information of the target area in a browser window of the target node bearing the target page.
6. The method of claim 1, wherein the comparatively verifying the target node with a source node or the source region with the target region comprises:
in the target page, comparing and verifying the target node with a source node, or comparing and verifying the source region with the target region.
7. The method of claim 1, wherein the target node is a target document object model (dom) node and the source node is a source dom node.
8. A visual verification system for preset documents of a webpage is characterized by comprising: a target page processing unit, a source page processing unit and a visual verification unit, wherein,
the target page processing unit is used for selecting at least one target node from a target webpage and acquiring the position information of the target node or a target area limited between the two target nodes in the target webpage;
the source page processing unit is used for loading a preset webpage file on a webpage to obtain a source webpage, respectively determining corresponding positions in the source webpage according to the position information of the target node or the target area on the target webpage, and acquiring a source node or a source area loaded on the corresponding positions;
and the visual verification unit is used for comparing and verifying the target node and a source node, or comparing and verifying the source region and the target region to obtain a verification result of the source node or the source region.
9. A visual verification device for presetting files on a webpage is characterized by comprising:
a memory; and a processor coupled to the memory, the processor configured to execute the method for visually verifying the preset document of the webpage according to any one of claims 1 to 7 based on the instructions stored in the memory.
10. A computer-readable storage medium, on which a computer program is stored, which, when executed by a processor, implements a method for visually verifying a preset document of a web page according to any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111044008.4A CN113742626A (en) | 2021-09-07 | 2021-09-07 | Visual verification method and system for preset webpage file |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111044008.4A CN113742626A (en) | 2021-09-07 | 2021-09-07 | Visual verification method and system for preset webpage file |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113742626A true CN113742626A (en) | 2021-12-03 |
Family
ID=78736570
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111044008.4A Pending CN113742626A (en) | 2021-09-07 | 2021-09-07 | Visual verification method and system for preset webpage file |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113742626A (en) |
-
2021
- 2021-09-07 CN CN202111044008.4A patent/CN113742626A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9354776B1 (en) | Applied client-side service integrations in distributed web systems | |
| CN110413922B (en) | Page information display method, device, computer equipment and storage medium | |
| CN110888582A (en) | Tag information processing method, device, storage medium and terminal | |
| CN107908604B (en) | Report form graph generation method and device, computer equipment and storage medium | |
| CN112306880A (en) | Test method, test device, electronic equipment and computer readable storage medium | |
| CN105468373A (en) | Branch merging method and device | |
| US8074182B2 (en) | Work procedure display method and system, production process management method and system, and computer program of the same | |
| CN105117272A (en) | Operating system manager, virtual machine and switching method between operating systems | |
| CN111158806B (en) | Interface display method, device, computer equipment and storage medium | |
| CN115481030A (en) | Automatic testing method, device, terminal and storage medium | |
| US20160283199A1 (en) | Multiple display environment for software development projects | |
| US10627984B2 (en) | Systems, devices, and methods for dynamic virtual data analysis | |
| CN114625448A (en) | Flow generation method and device combining RPA and AI, electronic equipment and storage medium | |
| CN110543113A (en) | robot hardware assembling and managing method, device, medium, system, front-end assembling client and robot body operation system | |
| US20050097374A1 (en) | Graphical view of shutdown process | |
| CN113742626A (en) | Visual verification method and system for preset webpage file | |
| CN112882869B (en) | Servo system parameter management method, device, equipment and storage medium | |
| CN116167935A (en) | Repairing method, device, equipment and medium for two-dimensional code | |
| CN105868957A (en) | Continuous integration method and device | |
| CN112765946B (en) | Chart display method and device and electronic equipment | |
| CN112633853A (en) | Project management method and device and electronic equipment | |
| CN114880241A (en) | Task robot testing method and device, electronic equipment and storage medium | |
| CN114693116A (en) | Method and device for detecting code review validity and electronic equipment | |
| CN114528626A (en) | Data integration method and system based on three-dimensional BIM model and electronic equipment | |
| US20120330619A1 (en) | Dynamic connection visualization in computer aided design package |
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 |