A visual verification method and system for web page preset files

Abstract

The present invention discloses a method and system for visual verification of preset files on a web page. In an embodiment of the present invention, at least one target node is selected in a target web page, and the position information of the target node or the target area defined between two target nodes on the target web page is obtained; in a source web page, the source web page is obtained by carrying a preset file on a web page, and based on the position information of the target node or the target area on the target web page, the corresponding positions in the source page are determined respectively, and the source nodes or source areas carried on the corresponding positions are obtained respectively; the target node is compared and verified with the source node, or the source area is compared and verified with the target area, to obtain the verification result of the source node or the target area. It can be seen that in the embodiment of the present invention, there is no manual participation in the process of realizing the visual verification of preset files on a web page, and the entire process is automatically completed by the set plug-in program, which improves the accuracy of verification and saves time and labor.

Description

Technical Field

[0001] The invention relates to computer Internet technology, and in particular to a visual verification method and system for a preset file on a web page. Background Art

[0002] With the continuous development of computer network technology, the content displayed on web pages has become more and more diverse, and the content carried by web pages has also become more and more diverse. Especially with the rise of single page web applications (SPA), the web application experience is becoming more and more inclined towards native application interaction. In this case, whether the web page preset files can be accurately displayed on the web page, as a very important part of ensuring the web application experience, has received unprecedented attention in the industry. Visual inspection and verification of web page preset files is the most important and only process to ensure the restoration of web page preset files.

[0003] Currently, there are two main ways to perform visual verification on web page preset files.

[0004] In the first method, designers directly obtain the difference information between the source web page obtained by carrying the web page preset file on the web page and the expected web page, that is, the target web page, through observation, and display the difference information in the form of an online document. The difference information includes the visual problems and problem descriptions of the web page preset file. Designers determine the difference information through the online document and manually maintain the visual problems and problem solving status of the web page preset file in the online document. This method requires manual participation in the visual verification process, and there are many intermediate links, which is inefficient.

[0005] The second method uses browser extension technology to overlay the source web page obtained by carrying the web page preset file on the web page onto the target web page, and by adjusting the transparency of the source web page, directly compare it with the target web page to quickly locate visual difference information. This method requires manual participation in the visual verification process. Although it reduces the workload to a certain extent, it does not significantly improve the visual verification efficiency of web page preset files. Visual verification still requires huge communication costs and maintenance costs.

[0006] It can be seen that no matter which of the above methods is used to perform visual verification on the web page preset file, human participation is required, and a manual and one-to-one visual comparison and verification process is required between the source web page obtained from the web page preset file and the target web page. The verification is inaccurate and time-consuming and labor-intensive. Summary of the invention

[0007] In view of this, an embodiment of the present invention provides a method for visually verifying a preset file of a web page. The method can realize visual verification of the preset file of a web page without human intervention, thereby improving verification accuracy.

[0008] The embodiment of the present invention also provides a visual verification system for a preset file on a web page. The system can realize visual verification of the preset file on a web page without human intervention, thereby improving verification accuracy.

[0009] The embodiment of the present invention is implemented as follows:

[0010] A visual verification method for a preset file of a web page, the method comprising:

[0011] Selecting at least one target node in the target webpage, and obtaining position information of the target node or a target area defined between two target nodes on the target webpage;

[0012] The webpage preset file is carried on the webpage to obtain a source webpage, and the corresponding positions in the source page are determined according to the position information of the target node or the target area on the target webpage, and the source node or source area carried on the corresponding position is obtained;

[0013] The target node is compared and verified with the source node, or the source area is compared and verified with the target area to obtain a verification result of the source node or the source area.

[0014] Preferably, before selecting at least one target node in the target webpage, the method further includes:

[0015] The target page is loaded into the browser for display, and the target page is checked in the browser.

[0016] Preferably, the method further comprises:

[0017] When the verification result of the source node is obtained to be visually different from the corresponding target node, based on the corresponding position information of the source node on the source webpage and the obtained current environment information, the verification result of the source node is displayed on the source page;

[0018] When the verification result of the source area is obtained to be visually different from the corresponding target area, the verification result of the source area is displayed on the source page based on the corresponding position information of the source area on the source webpage and the obtained current environment information.

[0019] Preferably, the corresponding positions in the source page are determined according to the position information of the target node or the target area in the target webpage, and obtaining the source node or source area carried at the corresponding position further comprises:

[0020] Acquire characteristic information of the target node or the target area on the target webpage;

[0021] Determine the 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 obtain the source node carried by the corresponding position;

[0022] Alternatively, according to the position information of the target area on the target webpage and the characteristic information of the target page, the corresponding position in the source page is determined, and the source area carried at the corresponding position is acquired.

[0023] Preferably, the characteristic information of the target node on the target page includes: size information of the target node and position information of the target node in the browser window carrying the target page;

[0024] The characteristic information of the target area on the target page includes: size information of the target area and position information of the target area on the target node in the browser window carrying the target page.

[0025] Preferably, the comparing and verifying the target node with the source node, or comparing and verifying the source area with the target area includes:

[0026] In the target page, the target node is compared and verified with the source node, or the source area is compared and verified with the target area.

[0027] Preferably, the target node is a target document object model (DOM) node, and the source node is a source DOM node.

[0028] A visual verification system for a preset file of a web page includes: a target page processing unit, a source page processing unit and a visual verification unit, wherein:

[0029] A target page processing unit, configured to select at least one target node in a target web page, and obtain position information of the target node or a target area defined between two target nodes on the target web page;

[0030] A source page processing unit, used for carrying a preset web page file on a web page to obtain a source web page, determining a corresponding position in the source page according to the position information of the target node or the target area on the target web page, and obtaining a source node or source area carried on the corresponding position;

[0031] The visual verification unit is used to compare and verify the target node with the source node, or to compare and verify the source area with the target area, to obtain a verification result of the source node or the source area.

[0032] A visual verification device for a preset file on a web page, comprising:

[0033] A memory; and a processor coupled to the memory, wherein the processor is configured to execute any of the above-mentioned methods for visual verification of a preset web page file based on instructions stored in the memory.

[0034] A computer-readable storage medium stores a computer program, which, when executed by a processor, implements any of the above-mentioned visual verification methods for preset files on a web page.

[0035] As can be seen above, the embodiment of the present invention selects at least one target node in the target web page, and obtains the position information of the target node or the target area defined between two target nodes on the target web page; in the source web page, the source web page is obtained by carrying a preset file on the web page, and based on the position information of the target node or the target area on the target web page, the corresponding positions in the source page are determined respectively, and the source node or source area carried on the corresponding position is obtained respectively; the target node is compared and verified with the source node, or the source area is compared and verified with the target area, to obtain the verification result of the source node or the target area. It can be seen that in the embodiment of the present invention, there is no human intervention in the process of realizing the visual verification of the preset file of the web page, and the entire process is automatically completed by the set plug-in program, which improves the accuracy of the verification and saves time and labor. BRIEF DESCRIPTION OF THE DRAWINGS

[0036] Figure 1 A flow chart of a visual verification method for a preset file on a web page provided by an embodiment of the present invention;

[0037] Figure 2 A flowchart of a specific example of a visual verification method for a preset file on a web page provided by an embodiment of the present invention;

[0038] Figure 3 A schematic diagram of the structure of a visual verification system for preset files on a web page provided by an embodiment of the present invention. DETAILED DESCRIPTION

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

[0040] The terms "first", "second", "third", "fourth", etc. (if any) in the specification and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments of the present invention described herein can be implemented in an order other than those illustrated or described herein, for example. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions. For example, a process, method, system, product, or device that includes a series of steps or units is not necessarily limited to those steps or units that are clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products, or devices.

[0041] The technical solution of the present invention is described in detail with specific embodiments below. The following specific embodiments can be combined with each other, and the same or similar concepts or processes may not be described in detail in some embodiments.

[0042] It can be seen from the background technology that when visual verification is performed on the preset files of the web pages, manual participation is required, and the source web pages obtained from the preset files of the web pages need to be manually and one-to-one visually compared and verified with the target web pages, so the verification is inaccurate and time-consuming and labor-intensive. Furthermore, when the background technology performs visual verification, the source page and the target page are identified by image recognition, which has poor fault tolerance and is not very useful for reference in actual use. After obtaining the difference information between the source web page and the target web page, an online list document is generally set up to reflect it in a list form and is manually maintained through the document, which results in time-consuming positioning of the visual problem area in the source web page through the difference information.

[0043] In order to overcome the above-mentioned problems, the embodiment of the present invention adopts the following method: selecting at least one target node in a target web page, and obtaining the position information of the target node or the target area defined between two target nodes on the target web page; in a source web page, the source web page is obtained by carrying a preset file on a web page, and based on the position information of the target node or the target area on the target web page, respectively determining the corresponding positions in the source page, and respectively obtaining the source nodes or source areas carried at the corresponding positions; comparing and verifying the target node with the source node, or comparing and verifying the source area with the target area, to obtain the verification result of the source node or the target area.

[0044] The above method of the embodiment of the present invention is implemented by the set plug-in program, which is a program that implements a certain software interface. That is, through the set plug-in program, the source page is interacted with through the interface of the source page, and the target page is interacted with through the interface of the target page, so as to realize the communication interaction between the source page and the target page, and obtain the source node and the target node, or the source area and the target area respectively, and perform visual verification of comparison to obtain the verification result.

[0045] In this way, in the embodiment of the present invention, there is no human intervention in the process of visual verification of the preset file of the web page, and the entire process is automatically completed by the set plug-in program, which improves the accuracy of the verification and saves time and labor.

[0046] In an embodiment of the present invention, multiple target nodes are selected, and for each target node, or for the target area defined by two target nodes, the above-mentioned scheme is used to perform a visual verification process between the target node and the corresponding source node, or a visual verification process between the target area and the source area, so as to verify the complete web page preset file.

[0047] In an embodiment of the present invention, when the verification result of the source node is obtained and the verification result is that there is a visual difference between the source node and the corresponding target node, or when the verification result of the source area is obtained and the verification result is that there is a visual difference between the source area and the corresponding target area, the verification result of the source node or the source area can be displayed at the corresponding position of the source web page based on the source node or the source area, so that the position of the visual difference point can be located in the page preset file, which is convenient for designers to view and maintain.

[0048] It can be seen that the method provided by the embodiment of the present invention streamlines the visual verification process of the preset file of the web page, directly realizes the flow and tracking of various visual problems of the preset file, and facilitates real-time understanding of the progress of the entire visual verification. The embodiment of the present invention records the verification results, location information and feature information of the source nodes or source areas with visual problems in the entire visual verification process through the plug-in program set, which facilitates subsequent personnel involved to quickly locate visual problems in the preset file of the page. The designer of the embodiment of the present invention can use image recognition to check and identify the target page. After determining the target node or target area, the source page is automatically checked based on the target node or target area to obtain the corresponding source node or source area, and the visual verification process is automatically performed, simplifying the visual verification work of the designer.

[0049] Figure 1 A flowchart of a visual verification method for a preset file on a web page provided by an embodiment of the present invention, wherein the specific steps include:

[0050] Step 101: Select at least one target node in a target webpage, and obtain location information of the target node or a target area defined between two target nodes on the target webpage;

[0051] Step 102: Load the webpage preset file on the webpage to obtain a source webpage, determine the corresponding positions in the source page according to the position information of the target node or the target area on the target webpage, and obtain the source node or source area loaded on the corresponding position;

[0052] Step 103: Compare and verify the target node with the source node, or compare and verify the source area with the target area to obtain a verification result of the source node or the source area.

[0053] The method is completed by a set plug-in program.

[0054] In the method, before selecting at least one target node in the target webpage, the method further includes:

[0055] The target page is loaded into the browser for display, and the target page is checked in the browser.

[0056] In this method, the target node is selected as multiple nodes, and for each target node, Figure 1 The scheme performs a visual verification process between the target node and the corresponding source node, thereby performing a complete visual verification of the web page preset file.

[0057] In this method, the target area is selected as multiple areas, each of which is obtained by defining the area between different target nodes. Figure 1 The scheme performs a visual verification process between the target area and the corresponding source area, thereby performing a complete visual verification of the web page preset file.

[0058] The method further comprises:

[0059] When the verification result of the source node is obtained to be visually different from the corresponding target node, displaying the verification result of the source node at a corresponding position of the source webpage based on the source node;

[0060] When the verification result of the source area is obtained to be visually different from the corresponding target area, the verification result of the source area is displayed at a corresponding position of the source webpage based on the source area.

[0061] In this way, the specific position of each visual difference point can be located in the page preset file, making it convenient for designers to view and maintain.

[0062] Here, before displaying the verification result of the source node or the verification result of the source area, it also includes: sending the obtained verification result of the source node or the source area and the obtained current environment information to the source page. In this way, after receiving it, the designer can directly display the location where the visual problem occurs in the source page, which is convenient for the designer to modify and maintain. Here, the current environment information includes: system files (host), operating system and visual screen pixel information, etc.

[0063] In the method, the target node is a target document object model (DOM) node, and the source node is a source DOM node. DOM is a tree-based application program interface (API) document, and a DOM node is a node in the DOM. The embodiment of the present invention can interact with the target web page through the API of the target web page through a set plug-in program to obtain the target DOM node, and interact with the source web page through the API of the source web page to obtain the source DOM node, thereby realizing the communication interaction between the target web page and the source web page about the DOM node.

[0064] In the method, determining the corresponding positions in the source page according to the position information of the target node or the target area in the target webpage, and obtaining the source node or source area carried at the corresponding position also includes:

[0065] Acquire characteristic information of the target node or the target area on the target webpage;

[0066] According to the position information of the target node on the target web page and the characteristic information of the target page, the corresponding position in the source page is determined, and the source node carried on the corresponding position is obtained; or according to the position information of the target area on the target web page and the characteristic information of the target page, the corresponding position in the source page is determined, and the source area carried on the corresponding position is obtained.

[0067] Here, the characteristic information of the target node on the target page includes: size information of the target node and position information of the target node in the browser window carrying the target page.

[0068] Here, the characteristic information of the target area on the target page includes: size information of the target area and position information of the target area on the target node in the browser window carrying the target page.

[0069] In the method, comparing and verifying the target node with the source node, or comparing and verifying the source area with the target area includes:

[0070] In the target page, the target node is compared and verified with the source node, or the source area is compared and verified with the target area. In this way, automatic visual verification can be performed in the target page being walked through in the browser.

[0071] The following is a specific example to explain in detail.

[0072] Figure 2 A flowchart of a specific example of a visual verification method for a preset file on a web page provided by an embodiment of the present invention, wherein the specific steps include:

[0073] Step 201: Obtain a target page of a preset web page file, open it through a browser, and run a plug-in program in the target page, and the plug-in program performs a walkthrough of the target page;

[0074] In this step, the target page of the web page preset file is actually the page that the designer expects to get;

[0075] In this step, when a plug-in program execution instruction is received (which may be triggered by a click by the designer), the plug-in program is executed in the target page;

[0076] In this step, the plug-in program walks through the target page, that is, scrolls the target page sequentially in the browser according to the display order of the target page.

[0077] Step 202: the plug-in program carries the webpage preset file on the webpage to obtain a source webpage;

[0078] In this step, the source page corresponding to the preset web page file, that is, the visual page corresponding to the preset web page file, that is, the page to be visually verified of the preset web page file, is opened through a browser.

[0079] Step 203: Select a DOM node in the target page, and the plug-in program obtains the position information of the DOM node in the target page;

[0080] In this step, the DOM node in the target page is selected by receiving a click DOM node instruction;

[0081] In this step, the specific plug-in program obtains the position (x, y) coordinates of the DOM node, uses the document.elementsFromPoint(x, y) method to communicate and interact with the target page, and the target page feeds back the position (x, y) coordinates of the DOM node in the target page.

[0082] Step 204: The plug-in program obtains characteristic information of the DOM node on the target page;

[0083] In this step, the plug-in uses the getBoundingClientRect() method to communicate and interact with the target page, and the target page feeds back the size of the DOM node and the position information in the browser window; therefore, the characteristic information of the DOM node in the target page includes the size information of the DOM node and the position information in the browser window carrying the target page.

[0084] Step 205: Select a first DOM node and a second DOM node in the target page, the plug-in program obtains position information and feature information of the first DOM node in the target page, and the plug-in program obtains position information and feature information of the second DOM node in the target page;

[0085] The implementation process of this step is the same as steps 103 to 104, and will not be repeated here;

[0086] In this step, the first DOM node and the second DOM node in the target page are selected by the designer sending a selection instruction by moving the mouse.

[0087] Step 206: The plug-in program calculates the distance information and feature information of the target area defined between the two DOM nodes based on the position information and feature information of the two DOM nodes;

[0088] Step 207, the plug-in program sends the position information and feature information of the DOM node on the target page, or the distance information and feature information of the area between two DOM nodes to the background of the plug-in program;

[0089] The implementation process of this step is: the plug-in program calls the target web page tab execution (emitEvent) method, initializes the browser Port object through the chrome.tabs.connect method, and calls the port.postMessage method to send data to the background of the plug-in program.

[0090] Step 208: After receiving the location information and feature information of the DOM node on the target page, or the distance information and feature information of the target area, the background of the plug-in program sends it to the source web page;

[0091] The implementation process of this step is: the background of the plug-in initializes the browser Port object by calling chrome.runtime.connect and sends it through port.postMessage.

[0092] Step 209: After receiving the position information and feature information of the DOM node on the target page, or the distance information and feature information of the target area, the source web page obtains the position of the DOM node, or the position of the target area on the source page, obtains the source node, or the source area at the position of the DOM node, and feeds it back to the plug-in program.

[0093] Step 210: the plug-in compares the DOM node with the corresponding source DOM node to determine a visual verification result of the source DOM node, or compares the target area with the source area to determine a visual verification result of the source area;

[0094] In this step, the plug-in program sends the source DOM node or source area to the target page through the background of the plug-in program based on the process of steps 107 to 108, and the target page performs a visual verification comparison process and determines to obtain a visual verification result;

[0095] In this step, the visual verification results include visual problem description information;

[0096] Step 211: Send the obtained visual verification result and the corresponding current environment information to enable the designer to restore.

[0097] In this step, the current environment information includes the host, operating system, and visual screen pixel information.

[0098] Figure 3 A schematic diagram of a visual verification system for a preset file of a web page provided by an embodiment of the present invention is provided, wherein the system comprises: a target page processing unit, a source page processing unit and a visual verification unit, wherein:

[0099] A target page processing unit, configured to select at least one target node in a target web page, and obtain position information of the target node or a target area defined between two target nodes on the target web page;

[0100] A source page processing unit, used for carrying a preset web page file on a web page to obtain a source web page, determining a corresponding position in the source page according to the position information of the target node or the target area on the target web page, and obtaining a source node or source area carried on the corresponding position;

[0101] The visual verification unit is used to compare and verify the target node with the source node, or to compare and verify the source area with the target area, to obtain a verification result of the source node or the source area.

[0102] In the system, the target page processing unit is also used to load the target page into the browser for display, and to perform a walkthrough of the target page in the browser.

[0103] The system also includes a display unit for displaying the verification result of the source node at a corresponding position on a source web page based on the source node when the verification result of the source node is visually different from the corresponding target node; and for displaying the verification result of the source area at a corresponding position on a source web page based on the source area when the verification result of the source area is visually different from the corresponding target area.

[0104] In the system, the source page processing unit is also used to obtain the characteristic information of the target node or the target area on the target web page respectively; determine the corresponding position in the source page according to the position information of the target node on the target web page and the characteristic information on the target page, and obtain the source node carried at the corresponding position; or determine the corresponding position in the source page according to the position information of the target area on the target web page and the characteristic information on the target page, and obtain the source area carried at the corresponding position.

[0105] It can be seen that the plug-in program in the embodiment of the present invention can provide real-time feedback on visual problems when walking through the target page, which can effectively improve the efficiency of visual verification of the page preset file, and can also record in detail the location of the visual problem on the source page and the environmental information of the visual problem at that time. In this way, the designer can open the source page through the browser and can intuitively see the location of the visual problem reported on the source page. After repairing the visual problem, the state of the visual problem can be conveniently modified on the source page, which improves the efficiency of the designer in repairing the visual problem.

[0106] In the embodiment of the present invention, in the background of the plug-in program, through the background management interface, the designer can intuitively supervise the entire visual verification.

[0107] The embodiment of the present application also provides a computer-readable medium, the computer-readable storage medium stores instructions, and the instructions can execute the execution steps in the visual verification method for the preset file of the web page as described above when executed by the processor. In practical applications, the computer-readable medium can be included in the device / device / system described in the above embodiment, or it can exist alone without being assembled into the device / device / system. The above computer-readable storage medium carries one or more programs, and when the above one or more programs are executed, the visual verification method for the preset file of the web page described in the above embodiments can be implemented. According to the embodiment disclosed in the present application, the computer-readable storage medium can be a non-volatile computer-readable storage medium, for example, it can include but is not limited to: a portable computer disk, 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 disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above, but it is not used to limit the scope of protection of the present application. In the embodiment disclosed in the present application, the computer-readable storage medium can be any tangible medium containing or storing a program, which can be used by an instruction execution system, a device or a device or used in combination with it.

[0108] The embodiment of the present invention further provides an electronic device, in which the device for implementing the method of the embodiment of the present application can be integrated. Specifically:

[0109] The electronic device may include a processor with one or more processing cores, a memory with one or more computer-readable storage media, and a computer program stored in the memory and executable on the processor. When executing the program in the memory, the above-mentioned visual verification method for a preset file of a web page may be implemented.

[0110] Specifically, in practical applications, the electronic device may further include components such as a power supply, an input unit, and an output unit. Those skilled in the art will appreciate that the structure of the electronic device in the embodiment of the present invention does not limit the electronic device, and may include more or fewer components than shown in the figure, or combine certain components, or arrange the components differently. Among them:

[0111] The processor is the control center of the electronic device. It uses various interfaces and lines to connect the various parts of the entire electronic device. It 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 monitoring the electronic device as a whole.

[0112] The memory can be used to store software programs and modules, that is, the above-mentioned computer-readable storage medium. The processor executes various functional applications and data processing by running the software programs and modules stored in the memory. The memory may mainly include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application required for at least one function, etc.; the data storage area may store data created according to the use of the server, etc. In addition, the memory may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other volatile solid-state storage devices. Accordingly, the memory may also include a memory controller to provide the processor with access to the memory.

[0113] The electronic device also includes a power supply for supplying power to various components, which can be logically connected to the processor through a power management system, so as to manage charging, discharging, and power consumption through the power management system. The power supply can also include any components such as one or more DC or AC power supplies, recharging systems, power failure detection circuits, power converters or inverters, and power status indicators.

[0114] The electronic device may further include an input unit, which may be used to receive input digital or character information and generate keyboard, mouse, joystick, optical or trackball signal inputs related to user settings and function controls.

[0115] The electronic device may further include an output unit, which may be used to display information input by a user or information provided to a user and various graphical user interfaces, which may be composed of graphics, texts, icons, videos and any combination thereof.

[0116] The flow chart and block diagram in the accompanying drawings of the present application show the possible architecture, function and operation of the system, method and computer program product according to the various embodiments disclosed in the present application. In this regard, each box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the above-mentioned module, program segment or a part of a code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some implementations as replacements, the functions marked in the box can also occur in the order of the standards in different figures. For example, the boxes represented by two connections can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram or flow chart, and the combination of the boxes in the block diagram or flow chart can be implemented with a dedicated hardware-based system that performs the specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0117] Those skilled in the art will appreciate that the features described in the various embodiments and / or claims of the present disclosure may be combined and / or combined in a variety of ways, even if such combinations or combinations are not explicitly described in the present application. In particular, without departing from the spirit and teachings of the present application, the features described in the various embodiments and / or claims of the present application may be combined and / or combined in a variety of ways, and all of these combinations and / or combinations fall within the scope disclosed in the present application.

[0118] Specific embodiments are used herein to illustrate the principles and implementation methods of the present invention. The description of the above embodiments is only used to help understand the method of the present invention and its core ideas, and is not used to limit the present application. For those skilled in the art, changes can be made in the specific implementation methods and application scopes according to the ideas, spirits and principles of the present invention, and any modifications, equivalent substitutions, improvements, etc. made therein should be included in the scope of protection of this application.

Claims

1. A visual verification method for a preset file on a web page, characterized in that: The method comprises: Selecting at least one target node in the target webpage, and obtaining position information of the target node or a target area defined between two target nodes on the target webpage; Loading a webpage preset file on a webpage to obtain a source webpage, 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 source area loaded on the corresponding position; The target node is compared and verified with the source node, or the source area is compared and verified with the target area to obtain a verification result of the source node or the source area; wherein, after obtaining the verification result of the source node or the source area, it also includes: when the verification result of the source node is that there is a visual difference between the source node and the corresponding target node, based on the corresponding position information of the source node on the source web page and the current environmental information obtained, the verification result of the source node is displayed on the source web page; when the verification result of the source area is that there is a visual difference between the source node and the corresponding target area, based on the corresponding position information of the source area on the source web page and the current environmental information obtained, the verification result of the source area is displayed on the source web page.

2. The method according to claim 1, characterized in that Before selecting at least one target node in the target webpage, the method further includes: The target web page is loaded into a browser for display, and the target web page is checked in the browser.

3. The method according to claim 1, characterized in that Determining the corresponding positions in the source webpage according to the position information of the target node or the target area in the target webpage, and obtaining the source node or source area carried at the corresponding position further includes: Acquire characteristic information of the target node or the target area on the target webpage; Determine the corresponding position in the source webpage according to the position information of the target node in the target webpage and the characteristic information of the target webpage, and obtain the source node carried by the corresponding position; Alternatively, according to the position information of the target area on the target webpage and the characteristic information of the target webpage, the corresponding position in the source webpage is determined, and the source area carried at the corresponding position is acquired.

4. The method according to claim 3, characterized in that The characteristic information of the target node on the target webpage includes: size information of the target node and position information of the target node in the browser window carrying the target webpage; The characteristic information of the target area on the target webpage includes: size information of the target area and position information of the target area on the target node in the browser window carrying the target webpage.

5. The method according to claim 1, characterized in that The comparing and verifying the target node with the source node, or comparing and verifying the source area with the target area includes: In the target webpage, the target node is compared and verified with the source node, or the source area is compared and verified with the target area.

6. The method according to claim 1, characterized in that The target node is a target document object model DOM node, and the source node is a source DOM node.

7. A visual verification system for web page preset files, characterized in that: include: A target web page processing unit, a source web page processing unit and a visual verification unit, wherein: A target webpage processing unit, configured to select at least one target node in the target webpage, and obtain position information of the target node or a target area defined between two target nodes on the target webpage; A source web page processing unit, configured to carry a preset web page file on a web page to obtain a source web page, determine a corresponding position in the source web page according to the position information of the target node or the target area on the target web page, and obtain a source node or source area carried on the corresponding position; A visual verification unit is used to compare and verify the target node with the source node, or to compare and verify the source area with the target area, to obtain a verification result of the source node or the source area; wherein, after obtaining the verification result of the source node or the source area, it also includes: when the verification result of the source node is that there is a visual difference between the source node and the corresponding target node, based on the corresponding position information of the source node on the source web page and the current environmental information obtained, the verification result of the source node is displayed on the source web page; when the verification result of the source area is that there is a visual difference between the source node and the corresponding target area, based on the corresponding position information of the source area on the source web page and the current environmental information obtained, the verification result of the source area is displayed on the source web page.

8. A visual verification device for a preset file on a web page, characterized in that: include: Memory; and a processor coupled to the memory, wherein the processor is configured to execute the visual verification method for a preset file of a web page according to any one of claims 1 to 6 based on instructions stored in the memory.

9. A computer-readable storage medium, characterized in that: A computer program is stored thereon, and when the program is executed by a processor, a visual verification method for a preset file of a web page as claimed in any one of claims 1 to 6 is implemented.

Images