CN105760290A - Problem positioning method based on web front-end testing as well as related device and system - Google Patents

Abstract

This application discloses a method for locating problems based on webpage front-end testing and related devices and systems. Based on a selector corresponding to the development language of the target webpage, it determines the position of the problem information obtained from the webpage front-end testing in the source code of the target webpage, and obtains Problem location information, and generate auxiliary codes for describing the problem information, then add the auxiliary codes to the source code according to the problem location information, and then perform webpage display according to the source code with the auxiliary codes, so that when the source code is displayed At the same time as the corresponding target web page, the problem information corresponding to the auxiliary code is also displayed on the target web page, so that when the web page is displayed, the problem information can be displayed at the relevant position of the corresponding abnormal web page element, realizing automatic and visual problem positioning and improving Locating efficiency and reducing time-consuming locating are conducive to quickly determining the priority of each problem, giving priority to repairing serious problems, and reducing or even eliminating the risk of target page crashes.

Description

Problem location method and related device and system based on webpage front-end test

technical field

The present application relates to the technical field of webpage front-end testing, in particular to a method for locating problems based on webpage front-end testing and related devices and systems.

Background technique

Web page (web) front-end testing refers to the development of front-end development languages such as HTML (HyperTextMarkupLanguage, Hypertext Markup Language), CSS (CascadingStyleSheets, Cascading Style Sheets), XML (ExtensibleMarkupLanguage, Extensible Markup Language) and JavaScript. Web pages perform static analysis and dynamic analysis based on their source code to obtain problem information on the web page, so as to locate and repair problems based on the problem information, achieve the purpose of optimizing the display effect of the web page and improving the loading speed of the web page.

The so-called problem location refers to determining the position of the abnormal web page element corresponding to the problem information in the web page. Commonly used problem location methods require manual analysis, that is, relevant technical personnel first determine that there are corresponding features in the source code of the webpage by analyzing the ID, class (class), url (ie UniformResourceLocator, Uniform Resource Locator) and other features in the problem information. The position of the abnormal code, and then determine the position of the web page element corresponding to the abnormal code by comparing the source code and the web page display rules, that is, the position of the abnormal web page element in the web page.

The above-mentioned problem location based on manual assisted analysis is not only low in efficiency and high in cost, but also makes it impossible to quickly determine the impact area and repair priority of each problem in the web page, which is not conducive to timely repair of serious problems, and there is a large risk of web page crashes.

Contents of the invention

In order to overcome the problems existing in related technologies, the present application provides a method for locating problems based on webpage front-end testing, and related devices and systems.

The first aspect of the present application provides a method for locating problems based on webpage front-end testing; the method includes:

Obtain the source code of the target web page and the problem information of the target web page obtained through the front-end test of the web page;

Determine the position of the abnormal code corresponding to the problem information in the source code based on the selector corresponding to the development language of the target webpage, and obtain problem location information;

generate ancillary codes describing the problem information;

Adding the auxiliary code to a relevant position of the corresponding abnormal code in the source code according to the problem location information;

Executing webpage display according to the source code with auxiliary code, so that the problem information is displayed at the relevant position of the corresponding abnormal webpage element in the target webpage.

With reference to the first aspect, in the first feasible implementation manner of the first aspect, adding the auxiliary code to the relevant position of the corresponding exception code in the source code according to the problem location information includes:

According to the source code parsing, the document object model DOM corresponding to the target web page is obtained;

determining a problem node in the DOM according to the problem location information;

Determining the abnormal element display area corresponding to the problem node in the target webpage;

An area related to the abnormal element display area is selected as a problem information display area according to preset rules, and the auxiliary code is added to a code position corresponding to the problem information display area in the source code.

With reference to the first feasible implementation manner of the first aspect, in the second feasible implementation manner of the first aspect, the problem location method further includes:

Generate a tag code corresponding to the default tag, and add the tag code to the source code, so that the default tag is displayed in the abnormal element display area when displaying the target webpage.

The second aspect of the present application provides a device for locating problems based on webpage front-end testing; the device includes:

The test result acquisition unit is used to obtain the source code of the target webpage and the problem information of the target webpage obtained through the front-end test of the webpage;

A positioning information acquisition unit, configured to determine the position of the abnormal code corresponding to the problem information in the source code based on the selector corresponding to the development language of the target webpage, and obtain problem positioning information;

an auxiliary code generating unit, configured to generate auxiliary codes for describing the problem information;

A source code editing unit, configured to add the auxiliary code to a relevant position of the corresponding abnormal code in the source code according to the problem location information;

The web page display unit is configured to perform web page display according to the source code with auxiliary codes, so that the problem information is displayed at the relevant position of the corresponding abnormal web page element in the target web page.

With reference to the second aspect, in the first possible implementation manner of the second aspect, the source code editing unit includes:

DOM generation module, for obtaining the document object model DOM corresponding to the target web page according to the source code parsing;

A problem node determining module, configured to determine a problem node in the DOM according to the problem location information;

An abnormal area determination module, configured to determine the abnormal element display area corresponding to the problem node in the target web page;

An auxiliary code insertion module, configured to select an area related to the abnormal element display area as a problem information display area according to preset rules, and add the auxiliary code to the code position corresponding to the problem information display area in the source code place.

With reference to the first feasible implementation manner of the second aspect, in the second feasible implementation manner of the second aspect, the source code editing unit further includes:

a markup code insertion module, configured to generate a markup code corresponding to a preset markup, and add the markup code to the source code, so that the preset markup is displayed in the abnormal element display area when displaying the target webpage .

The third aspect of the present application provides a server for problem location based on web front-end testing; the server includes:

processor;

memory for storing processor-executable instructions;

Wherein, the processor is configured as:

Obtain the source code of the target web page and the problem information of the target web page obtained through the front-end test of the web page;

Determine the position of the abnormal code corresponding to the problem information in the source code based on the selector corresponding to the development language of the target webpage, and obtain problem location information;

generate ancillary codes describing the problem information;

According to the problem location information, add the auxiliary code to the relevant position of the corresponding abnormal code in the source code, and send the source code with the auxiliary code to the client, so that the client can The source code of the code executes the web page display.

With reference to the third aspect, in the first feasible implementation manner of the third aspect, in order to add the auxiliary code to the relevant position of the corresponding exception code in the source code according to the problem location information, the server is Configured as:

According to the source code parsing, the document object model DOM corresponding to the target web page is obtained;

determining a problem node in the DOM according to the problem location information;

Determining the abnormal element display area corresponding to the problem node in the target webpage;

An area related to the abnormal element display area is selected as a problem information display area according to preset rules, and the auxiliary code is added to a code position corresponding to the problem information display area in the source code.

With reference to the first feasible implementation manner of the third aspect, in the second feasible implementation manner of the third aspect, the server is further configured to:

Generate a tag code corresponding to the default tag, and add the tag code to the source code, so that the default tag is displayed in the abnormal element display area when displaying the target webpage.

The fourth aspect of the present application provides a webpage front-end test and problem location system, including: a front-end test subsystem, a location server and a client;

The front-end testing subsystem is configured as:

Perform a front-end test on the target webpage according to the source code of the target webpage, and obtain the problem information of the target webpage;

The location server is configured to:

Obtain the source code and problem information;

Determine the position of the abnormal code corresponding to the problem information in the source code based on the selector corresponding to the development language of the target webpage, and obtain problem location information;

generate ancillary codes describing the problem information;

Add the auxiliary code to the relevant position of the corresponding abnormal code in the source code according to the problem location information, and send the source code with the auxiliary code to the client;

The client is configured as:

Executing webpage display according to the source code with auxiliary code, so that the problem information is displayed at the relevant position of the corresponding abnormal webpage element in the target webpage.

With reference to the fourth aspect, in the first feasible implementation manner of the fourth aspect, in order to add the auxiliary code to the relevant position of the corresponding exception code in the source code according to the problem location information, the location server is configured as:

According to the source code parsing, the document object model DOM corresponding to the target web page is obtained;

determining a problem node in the DOM according to the problem location information;

determining the abnormal code area corresponding to the problem node in the source code;

The auxiliary code is added to the relevant position of the corresponding exception code area in the source code.

With reference to the first feasible implementation manner of the fourth aspect, in the second feasible implementation manner of the fourth aspect, the server is further configured to:

Generate a tag code corresponding to the default tag, and add the tag code to the source code, so that the default tag is displayed in the abnormal element display area when displaying the target webpage.

It can be seen from the above technical solutions that, for the problem information obtained by the front-end test of the webpage in the embodiment of the present application, first, based on the selector corresponding to the development language of the target webpage, the position of the problem information in the source code of the target webpage is determined to obtain the problem location information, and generate auxiliary codes for describing the problem information, then add the auxiliary codes to the source code according to the problem location information, and then perform webpage display according to the source codes with the auxiliary codes, so that the displayed source code corresponds to At the same time as the target web page, the problem information corresponding to the auxiliary code is also displayed on the target web page, and because the position where the auxiliary code is added to the source code is not arbitrary, but the relative position of the corresponding abnormal code determined according to the problem location information, Therefore, when performing web page display, the problem information can be displayed at the relevant position of the corresponding abnormal web page element; according to the above web page display results, the problem information of each sub-problem existing in the target web page and the corresponding problem generation position can be intuitively displayed to the Relevant technicians have realized automatic and visual problem positioning, which improves the positioning efficiency and reduces time-consuming, which is conducive to quickly determining the priority of each problem and prioritizing the repair of serious problems, thereby reducing or even eliminating the risk of target page crashes.

It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the application.

Description of drawings

The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the invention and together with the description serve to explain the principles of the invention.

FIG. 1 is a flow chart of a method for locating problems based on web front-end testing provided by an embodiment of the present application.

FIG. 2 is a flow chart of another method for locating problems based on web front-end testing provided by an embodiment of the present application.

FIG. 3 is a schematic diagram of data processing in the problem location method shown in FIG. 2 .

Fig. 4 is a schematic diagram of determining a problem information display area in the problem location method provided by the embodiment of the present application.

FIG. 5 is a block diagram of an apparatus for locating problems based on webpage front-end testing provided by an embodiment of the present application.

FIG. 6 is a block diagram of another device for locating problems based on webpage front-end testing provided by an embodiment of the present application.

Fig. 7 is a block diagram of a server provided by an embodiment of the present application.

FIG. 8 is a block diagram of a webpage front-end testing and problem location system provided by an embodiment of the present application.

detailed description

Reference will now be made in detail to the exemplary embodiments, examples of which are illustrated in the accompanying drawings. When the following description refers to the accompanying drawings, the same numerals in different drawings refer to the same or similar elements unless otherwise indicated. The implementations described in the following exemplary examples do not represent all implementations consistent with the present invention. Rather, they are merely examples of apparatuses and methods consistent with aspects of the invention as recited in the appended claims.

FIG. 1 is a flow chart of a method for locating problems based on web front-end testing provided by an embodiment of the present application. As shown in Figure 1, the method includes the following steps.

S11. Obtain the source code of the target webpage, and the problem information of the target webpage obtained through the front-end test of the webpage.

The webpage front-end testing system completes the front-end test of the target webpage, and the test result obtained is the problem information; the problem information can include one or more sub-question information, and each sub-question information corresponds to a specific problem in the target webpage, for example The page title is not displayed in the center, the link of a subtitle is wrong, etc.; each sub-problem information can include the corresponding problem type, cause, and repair suggestions.

S12. Determine the position of the problem information in the source code based on the selector corresponding to the development language of the target web page, and obtain problem location information.

The above-mentioned selector is usually used to define a specific style for an element or component with a specified feature in a web page, for example, to define the color of an element whose id attribute is a specified value as red. The embodiment of the present application uses a selector to set the abnormal web page elements corresponding to the relevant features involved in the above problem information into a specific style, so as to determine the position of the abnormal code corresponding to these abnormal web page elements in the source code, that is, to determine the above problem location information.

Different front-end development languages have different types of selectors; for HTML-based target web pages, CSS selectors or XPATH (ie XMLPathLanguage, XML Path Language) selectors can be used. For example, based on the CSS selector, the following code can be used to select the element whose id attribute value is "ID" in the HTML source code: $(".ID"); another example, based on the XPATH selector, select all the names in the body element in the HTML source code The following code can be used as a child element of div: /html/body/div.

S13. Generate auxiliary codes for describing the question information.

S14. Add the auxiliary code to the source code according to the problem location information.

Since the above problem location information respectively records the position of the exception code corresponding to each sub-problem information in the source code, according to the problem location information, the auxiliary code of each sub-problem information can be added to the relevant position of the corresponding exception code; for example, it is possible to unify Set to add the auxiliary code before the first line of the corresponding exception code.

S15. Perform webpage display according to the source code with the auxiliary code, so that the problem information is displayed at the location of the corresponding abnormal webpage element in the target webpage.

According to where the auxiliary code is added in the source code, the corresponding problem information is also displayed at the relevant position of the abnormal web page element corresponding to the abnormal code in the target web page; for example, the auxiliary code is added to the first line of the corresponding abnormal code above Previously, when the web page was displayed, the problem information corresponding to the auxiliary code was also displayed before the abnormal web page element corresponding to the abnormal code.

It can be seen from the above technical solutions that, for the problem information obtained by the front-end test of the webpage in the embodiment of the present application, first, based on the selector corresponding to the development language of the target webpage, the position of the problem information in the source code of the target webpage is determined to obtain the problem location information, and generate auxiliary codes for describing the problem information, then add the auxiliary codes to the source code according to the problem location information, and then perform webpage display according to the source codes with the auxiliary codes, so that the displayed source code corresponds to At the same time as the target web page, the problem information corresponding to the auxiliary code is also displayed on the target web page, and because the position where the auxiliary code is added to the source code is not arbitrary, but the relative position of the corresponding abnormal code determined according to the problem location information, Therefore, when performing web page display, the problem information can be displayed at the relevant position of the corresponding abnormal web page element; according to the above web page display results, the problem information of each sub-problem existing in the target web page and the corresponding problem generation position can be intuitively displayed to the Relevant technicians have realized automatic and visual problem positioning, which improves the positioning efficiency and reduces time-consuming, which is conducive to quickly determining the priority of each problem and prioritizing the repair of serious problems, thereby reducing or even eliminating the risk of target page crashes.

FIG. 2 is a flow chart of another method for locating problems based on webpage front-end testing provided by an embodiment of the present application, and FIG. 3 is a schematic diagram of data processing in the method for locating problems shown in FIG. 2 . Referring to Fig. 2 and Fig. 3, the problem location method includes the following steps.

S21. Obtain the source code of the target webpage, and the problem information of the target webpage obtained through the front-end test of the webpage.

S22. Determine the position of the problem information in the source code based on the selector corresponding to the development language of the target web page, and obtain problem location information.

S23. Generate auxiliary codes for describing the question information.

S24. Obtain a file object model corresponding to the target web page according to the source code analysis.

The above-mentioned Document Object Model (DocumentObjectModel, DOM) is also called a DOM tree, which is a collection of multiple nodes with hierarchical relationship. Each webpage element in the target webpage is regarded as a node, and a tree-structured model, that is, a DOM tree, can be obtained by connecting each node according to the relationship between corresponding webpage elements.

S25. Determine a problem node in the DOM according to the problem location information.

S26. Determine the abnormal element display area corresponding to the problem node in the target web page.

S27. Select an area related to the abnormal element display area as a problem information display area according to preset rules, and add the auxiliary code to a code position corresponding to the problem information display area in the source code.

Since this embodiment will realize the display of question information in the target webpage, it is possible to determine the adding position of the auxiliary code in the source code according to the display area of the question information in the target webpage; wherein, the display area of the question information in the target webpage can be based on the corresponding The display zone setting of the unusual page element in the landing page. The embodiment of the present application pre-sets the relative position between the problem information display area and the abnormal element display area, that is, the above-mentioned preset rules, so that after determining the abnormal element display area corresponding to each sub-question in the target webpage through the DOM tree, according to The above preset rules determine the corresponding question information display area, and then add the auxiliary code to the code position corresponding to the question information display area. According to actual application requirements such as the typesetting of the target webpage, the above preset rule can be: the problem information display area 410 is located at the upper left or upper right of the abnormal element display area 420, as shown in FIG. 4; of course, the above preset rule can also be: The problem information display area is located at the bottom left, right above, etc. of the abnormal element display area.

S28. Perform webpage display according to the source code with the auxiliary code, so that the problem information is displayed at the location of the corresponding abnormal webpage element in the target webpage.

The above steps S24 to S27 realize the addition of auxiliary codes to the source code of the target webpage. Based on this, the embodiment of the present application can display the question information of each sub-question in the target webpage when executing the webpage display according to the above-mentioned source code with auxiliary codes. Displayed in the relevant area of the corresponding abnormal element display area (that is, in the corresponding problem information display area), so that relevant technical personnel can intuitively know the location of each abnormal element and specific problem information from the display interface of the target web page .

As can be seen from the above technical solutions, the embodiments of the present application first use the selector that matches the language of the front-end development of the target webpage to screen the source code of the target webpage according to the problem information of the target webpage to obtain the corresponding problem location information; then according to the problem Locate the information, determine the problem node in the Dom tree of the target web page, and then determine the location of the abnormal code corresponding to the problem node in the source code; add the auxiliary code corresponding to the problem information to the relevant position of the area where the corresponding abnormal code is located in the source code ;Finally, perform webpage display according to the source code with auxiliary code, so that the problem information is displayed at the relevant position of the display area where the corresponding abnormal webpage element is located in the target webpage, so that each sub-problem existing in the target webpage can be intuitively displayed The problem information and the corresponding problem location are displayed to relevant technical personnel, which realizes automatic and visual problem positioning, improves positioning efficiency and reduces time-consuming, which is conducive to quickly determining the priority of each problem and prioritizing the repair of serious problems. Reduce or even eliminate the risk of landing page crashes.

In other embodiments of the present application, in order to improve the effect of problem location and make the abnormal elements in the target web page more prominent and easy to distinguish, after performing step S26, that is, after determining the display area of abnormal elements, the following steps can also be performed: generating preset tags corresponding markup code, and adding the markup code into the source code.

Referring to Fig. 4, the above-mentioned preset mark can be: a mark frame 431 surrounding the above-mentioned abnormal element display area, a mark layer 432 covering the above-mentioned abnormal element display area; in addition, the color of the mark frame 431 and the mark layer 432 can also be set ( In order to achieve the marking effect, it is preferred to be different from the background color of the target webpage and the background color of the abnormal element (or the color of the main color as the color of the default mark).

FIG. 5 is a structural block diagram of a device for locating problems based on webpage front-end testing provided by an embodiment of the present application. Referring to FIG. 5 , the problem location device includes: a test result acquisition unit 110 , a location information acquisition unit 120 , an auxiliary code generation unit 130 , a source code editing unit 140 and a webpage display unit 150 .

The test result acquisition unit 110 is configured to acquire the source code of the target webpage and the problem information of the target webpage obtained through the front-end test of the webpage.

The location information acquisition unit 120 is configured to determine the location of the abnormal code corresponding to the problem information in the source code based on the selector corresponding to the development language of the target webpage, and obtain problem location information.

The auxiliary code generation unit 130 is configured to upload the location information to a server, so that the user can obtain the location information from the server.

The source code editing unit 140 is configured to add the auxiliary code to a relevant position of the corresponding abnormal code in the source code according to the problem location information.

The web page display unit 150 is configured to perform web page display according to the source code with auxiliary codes, so that the problem information is displayed at the relevant position of the corresponding abnormal web page element in the target web page.

From the above technical solution, it can be seen that in the embodiment of the present application, while displaying the target web page corresponding to the source code, the problem information corresponding to the auxiliary code is also displayed on the target web page, and because the position where the auxiliary code is added to the source code is not arbitrary, and It is the relevant position of the corresponding abnormal code determined according to the problem location information, so that when the web page is displayed, the problem information can be displayed at the relevant position of the corresponding abnormal web page element; according to the above web page display result, the target web page can be visually The problem information of each sub-problem in the system and the corresponding problem location are displayed to relevant technical personnel, which realizes automatic and visual problem positioning, improves positioning efficiency and reduces time-consuming, which is conducive to quickly determining the priority of each problem and prioritizing repair Affect serious issues, thereby reducing or even eliminating the risk of the target page crashing.

Referring to FIG. 6, in a feasible embodiment of the present application, the source code editing unit 140 may include:

Wherein, the DOM generation module 141 is configured to obtain the DOM corresponding to the target web page according to the source code analysis;

The problem node determining module 142 is configured to determine the problem node in the DOM according to the problem location information;

The abnormal area determination module 143 is configured to determine the abnormal element display area corresponding to the problem node in the target web page;

The auxiliary code insertion module 144 is configured to select an area related to the abnormal element display area as the problem information display area according to preset rules, and add the auxiliary code to the source code corresponding to the problem information display area. at the code location.

In addition, the above-mentioned source code editing unit 140 may further include: a marking code insertion module 145 . The markup code insertion module 145 is configured to generate markup code corresponding to a preset markup, and add the markup code to the source code, so that the preset markup is displayed on the abnormal element when displaying the target webpage in the display area.

Regarding the apparatus in the foregoing embodiments, the specific manner in which each module executes operations has been described in detail in the embodiments related to the method, and will not be described in detail here.

In addition, the embodiment of the present application also provides a computer storage medium, such as ROM, random access memory (RAM), CD-ROM, magnetic tape, floppy disk, and optical data storage device, etc.; the computer storage medium stores programs, When the program in the storage medium is executed by a processor of a related device (such as a server), the related device is enabled to execute some or all steps of the problem location method described in the above method embodiments.

Fig. 7 is a block diagram of a server 600 for implementing problem location based on web front-end testing according to an exemplary embodiment. 7, server 600 includes processing component 622, which further includes one or more processors, and a memory resource represented by memory 632 for storing instructions executable by processing component 622, such as application programs. The application program stored in memory 632 may include one or more modules each corresponding to a set of instructions. In addition, the processing component 622 is configured to execute instructions to perform the above-mentioned method for locating problems.

Server 600 may also include a power component 626 configured to perform power management of server 600 , a wired or wireless network interface 650 configured to connect server 600 to a network, and an input-output (I/O) interface 658 . The server 600 may operate based on an operating system stored in the memory 632, such as Windows Server™, Mac OS X™, Unix™, Linux™, FreeBSD™ or the like.

Wherein, in this embodiment, the processing component 622 can complete the following steps by executing the instructions in the memory 632:

Obtain the source code of the target web page and the problem information of the target web page obtained through the front-end test of the web page;

Determine the position of the abnormal code corresponding to the problem information in the source code based on the selector corresponding to the development language of the target webpage, and obtain problem location information;

generate ancillary codes describing the problem information;

According to the problem location information, add the auxiliary code to the relevant position of the corresponding abnormal code in the source code, and send the source code with the auxiliary code to the client, so that the client can The source code of the code executes the web page display.

In a feasible embodiment of the present application, in order to add the auxiliary code to the relevant position of the corresponding exception code in the source code according to the problem location information, the processing component 622 may perform the following steps:

According to the source code parsing, the document object model DOM corresponding to the target web page is obtained;

determining a problem node in the DOM according to the problem location information;

Determining the abnormal element display area corresponding to the problem node in the target webpage;

An area related to the abnormal element display area is selected as a problem information display area according to preset rules, and the auxiliary code is added to a code position corresponding to the problem information display area in the source code.

In a feasible embodiment of the present application, the processing component 622 may perform the following steps:

Generate a tag code corresponding to the default tag, and add the tag code to the source code, so that the default tag is displayed in the abnormal element display area when displaying the target webpage.

It can be seen from the above technical solutions that the server provided by the embodiment of the present application can display the target web page corresponding to the source code, and the problem information corresponding to the auxiliary code can also be displayed on the target web page, and because the position where the auxiliary code is added to the source code is not arbitrary Instead, the relevant location of the corresponding abnormal code is determined according to the problem location information, so that when the webpage is displayed, the problem information can be displayed at the relevant location of the corresponding abnormal webpage element; according to the above webpage display results, it can be intuitively Display the problem information of each sub-problem in the target webpage and the corresponding problem location to relevant technical personnel, realize automatic and visual problem positioning, improve positioning efficiency, reduce time-consuming, and help quickly determine the priority of each problem , prioritizing fixes for high-impact issues, reducing or even eliminating the risk of target page crashes.

FIG. 8 is a schematic structural diagram of a webpage front-end testing and problem location system 700 provided by an embodiment of the present application. Referring to FIG. 8 , the system includes: a front-end testing subsystem 710 , a positioning server 720 and a client 730 .

Wherein, the front-end testing subsystem 710 is configured to: perform a front-end test on the target webpage according to the source code of the target webpage, and obtain problem information of the target webpage.

The positioning server 720 is configured to:

Obtain the source code and problem information;

Determine the position of the abnormal code corresponding to the problem information in the source code based on the selector corresponding to the development language of the target webpage, and obtain problem location information;

generate ancillary codes describing the problem information;

Add the auxiliary code to the relevant position of the corresponding abnormal code in the source code according to the problem location information, and send the source code with the auxiliary code to the client

The client 730 is configured to: perform webpage presentation according to the source code with auxiliary codes, so that the problem information is displayed at the relevant position of the corresponding abnormal webpage element in the target webpage.

In addition, in other feasible embodiments of the present application, the above operation of "determining the position of the abnormal code corresponding to the problem information in the source code based on the selector corresponding to the development language of the target web page" can also be performed by the front-end testing subsystem Step 710 executes, and stores the problem location information and the corresponding source code and problem information in the database; correspondingly, after receiving the location request from the client 730, the location server 720 can directly obtain the source code and problem information of the target webpage from the database. Information and problem location information, and then perform subsequent operations such as generating auxiliary codes and adding auxiliary codes to the source code.

In a feasible embodiment of the present application, in order to add the auxiliary code to the relevant position of the corresponding exception code in the source code according to the problem location information, the location server 720 is configured to:

According to the source code parsing, the document object model DOM corresponding to the target web page is obtained;

determining a problem node in the DOM according to the problem location information;

Determining the abnormal element display area corresponding to the problem node in the target webpage;

An area related to the abnormal element display area is selected as a problem information display area according to preset rules, and the auxiliary code is added to a code position corresponding to the problem information display area in the source code.

In another feasible embodiment of the present application, the positioning server 720 is further configured to:

Generate a tag code corresponding to the default tag, and add the tag code to the source code, so that the default tag is displayed in the abnormal element display area when displaying the target webpage.

As can be seen from the above technical solutions, the webpage front-end test and problem location system provided by the embodiment of the present application can realize the front-end test to the target webpage, and display the problem information obtained by the test on the relevant position of the corresponding abnormal webpage element in the target webpage; The display results of the above webpage can intuitively display the problem information of each sub-problem in the target webpage and the corresponding problem location to relevant technical personnel, realizing automatic and visual problem positioning, improving positioning efficiency, reducing time-consuming, and effectively It is helpful to quickly determine the priority of each problem, and fix the problems with serious impact first, so as to reduce or even eliminate the risk of target page crash.

Other embodiments of the invention will be readily apparent to those skilled in the art from consideration of the specification and practice of the invention disclosed herein. This application is intended to cover any modification, use or adaptation of the present invention, these modifications, uses or adaptations follow the general principles of the present invention and include common knowledge or conventional technical means in the technical field not disclosed in this application . The specification and examples are to be considered exemplary only, with a true scope and spirit of the invention being indicated by the following claims.

It should be understood that the present invention is not limited to the precise constructions which have been described above and shown in the accompanying drawings, and various modifications and changes may be made without departing from the scope thereof. The scope of the invention is limited only by the appended claims.

Claims (12)

1. the positioning problems method based on webpage front-end test, it is characterised in that including:

Obtain the source code of target web and the problem information of the target web obtained by webpage front-end test；

Determine abnormality code that described problem information the is corresponding position in described source code based on the selector corresponding with the development language of target web, obtain positioning problems information；

Generate the auxiliary code for describing described problem information；

According to described positioning problems information, described auxiliary code is added into the relevant position place of abnormality code corresponding in described source code；

Web page display is performed so that described problem information is shown in the relevant position place of abnormal web page element corresponding in target web according to the described source code with auxiliary code.

2. positioning problems method according to claim 1, it is characterised in that the described relevant position place that according to described positioning problems information, described auxiliary code is added into abnormality code corresponding in described source code, including:

Resolve according to described source code and obtain the document dbject model DOM that target web is corresponding；

The trouble node in described DOM is determined according to described positioning problems information；

Determine the abnormal elements display area that described trouble node is corresponding in target web；

Select the region relevant to described abnormal elements display area as problem information display area according to preset rules, and described auxiliary code is added into the code position place that problem information display area described in described source code is corresponding.

3. positioning problems method according to claim 2, it is characterised in that also include:

Generate and preset the marker code that labelling is corresponding, and described marker code is added in described source code, in order to when showing target web, described default labelling is showed in described abnormal elements display area.

4. the positioning problems device based on webpage front-end test, it is characterised in that including:

Test result acquiring unit, for obtaining the source code of target web, and the problem information of the target web obtained by webpage front-end test；

Location information acquisition unit, for determining abnormality code that described problem information the is corresponding position in described source code based on the selector corresponding with the development language of target web, obtains positioning problems information；

Auxiliary code generates unit, for generating the auxiliary code for describing described problem information；

Source code edit cell, for being added into the relevant position place of abnormality code corresponding in described source code according to described positioning problems information by described auxiliary code；

Web page display unit, the source code described in basis with auxiliary code performs web page display so that described problem information is shown in the relevant position place of abnormal web page element corresponding in target web.

5. positioning problems device according to claim 4, it is characterised in that described source code edit cell includes:

DOM generation module, obtains, for resolving according to described source code, the document dbject model DOM that target web is corresponding；

Trouble node determines module, for determining the trouble node in described DOM according to described positioning problems information；

Abnormal area determines module, the abnormal elements display area corresponding in target web for determining described trouble node；

Auxiliary code inserts module, for selecting the region relevant to described abnormal elements display area as problem information display area according to preset rules, and described auxiliary code is added into the code position place that problem information display area described in described source code is corresponding.

6. positioning problems device according to claim 5, it is characterised in that described source code edit cell also includes:

Marker code inserts module, for generating the marker code that default labelling is corresponding, and is added in described source code by described marker code, in order to be showed in described abnormal elements display area by described default labelling when showing target web.

7. a server, it is characterised in that for the positioning problems based on webpage front-end test, including:

Processor；

For storing the memorizer of processor executable；

Wherein, described processor is configured to:

Obtain the source code of target web and the problem information of the target web obtained by webpage front-end test；

Determine abnormality code that described problem information the is corresponding position in described source code based on the selector corresponding with the development language of target web, obtain positioning problems information；

Generate the auxiliary code for describing described problem information；

According to described positioning problems information, described auxiliary code is added into the relevant position place of abnormality code corresponding in described source code, and the described source code with auxiliary code is sent to client so that described client according to described in there is the source code execution web page display of auxiliary code.

8. server according to claim 7, it is characterised in that for realizing being added into by described auxiliary code the relevant position place of abnormality code corresponding in described source code according to described positioning problems information, described server is configured to:

Resolve according to described source code and obtain the document dbject model DOM that target web is corresponding；

The trouble node in described DOM is determined according to described positioning problems information；

Determine the abnormal elements display area that described trouble node is corresponding in target web；

Select the region relevant to described abnormal elements display area as problem information display area according to preset rules, and described auxiliary code is added into the code position place that problem information display area described in described source code is corresponding.

9. server according to claim 8, it is characterised in that described server is also configured to

Generate and preset the marker code that labelling is corresponding, and described marker code is added in described source code, in order to when showing target web, described default labelling is showed in described abnormal elements display area.

10. a webpage front-end test and positioning problems system, it is characterised in that including: head end test subsystem, location-server and client；

Described head end test subsystem is configured to:

Target web is performed head end test by the source code according to target web, obtains the problem information of target web；

Described location-server is configured to:

Obtain described source code and problem information；

Determine abnormality code that described problem information the is corresponding position in described source code based on the selector corresponding with the development language of target web, obtain positioning problems information；

Generate the auxiliary code for describing described problem information；

According to described positioning problems information, described auxiliary code is added into the relevant position place of abnormality code corresponding in described source code, and the described source code with auxiliary code is sent to client；

Described client is configured to:

Web page display is performed so that described problem information is shown in the relevant position place of abnormal web page element corresponding in target web according to the described source code with auxiliary code.

11. system according to claim 10, it is characterised in that for realizing being added into by described auxiliary code the relevant position place of abnormality code corresponding in described source code according to described positioning problems information, described location-server is configured to:

Resolve according to described source code and obtain the document dbject model DOM that target web is corresponding；

The trouble node in described DOM is determined according to described positioning problems information；

Determine the abnormality code region that described trouble node is corresponding in described source code；

Described auxiliary code is added into the relevant position place in abnormality code region corresponding in described source code.

12. system according to claim 11, it is characterised in that described server is also configured to

Generate and preset the marker code that labelling is corresponding, and described marker code is added in described source code, in order to when showing target web, described default labelling is showed in described abnormal elements display area.