A front-end affected function point analysis method, device, equipment and storage medium

Abstract

The application discloses a front-end affected function point analysis method, device and equipment and a storage medium. The method comprises the following steps: analyzing a target front-end code file to obtain a target syntax tree; wherein the target syntax tree comprises a hypertext markup syntax tree, a page script syntax tree and a page style syntax tree; determining incremental codes of the target front-end code file and obtaining start and end code line numbers of each incremental code; for each incremental code, determining a matched DOM element in the hypertext markup syntax tree as an affected function point according to the start and end code line numbers of the current incremental code and the target syntax tree. By using the method, the DOM element affected by the modification can be found by analyzing the modified front-end code, and the tester can quickly determine the affected function point of the front end, thereby reducing the occurrence of missed test conditions.

Description

Technical Field

[0001] This invention relates to the field of computer software testing technology, specifically to a method, apparatus, device, and storage medium for analyzing front-end affected functional points. Background Technology

[0002] During the iteration process of computer software projects, front-end pages are frequently changed. Furthermore, the front-end architecture of some computer software projects is based on Vue. When modifying the code of a component in the front-end architecture, it will simultaneously affect other front-end pages that reference that component. This makes it impossible for testers to fully assess the scope of front-end testing, and testers also cannot obtain the call and influence relationships between front-end code and components, ultimately resulting in the inability to obtain accurate and comprehensive test results.

[0003] Existing technologies include using the front-end low-level compilation tool Babel to parse the JavaScript code in front-end components. However, this can only find function-level call relationships and cannot find the specific functional impact points of the page, thus failing to assist testers in analyzing front-end projects. Summary of the Invention

[0004] This invention provides a method, apparatus, device, and storage medium for analyzing front-end affected functionalities, in order to solve the technical problem of finding front-end affected functionalities after front-end code modifications.

[0005] To address the aforementioned technical problems, in a first aspect, the present invention provides a method for analyzing front-end affected functionalities, the method comprising:

[0006] Parse the target front-end code file to obtain the target syntax tree; wherein, the target syntax tree includes a hypertext markup syntax tree, a page script syntax tree, and a page style syntax tree;

[0007] Determine the incremental code in the target front-end code file and obtain the start and end line numbers of each incremental code;

[0008] For each incremental code, based on the start and end line numbers of the current incremental code and the target syntax tree, the matching DOM element in the hypertext markup syntax tree is determined as the affected function point.

[0009] Optionally, the step of determining the matching DOM element in the hypertext markup syntax tree based on the start and end line numbers of the current incremental code and the target syntax tree includes:

[0010] Obtain the start and end line numbers of the hypertext markup syntax tree, page script syntax tree, and page style syntax tree respectively;

[0011] By comparing the start and end line numbers of the current incremental code with the start and end line numbers of the hypertext markup syntax tree, the page script syntax tree, and the page style syntax tree, the syntax tree that matches the current incremental code is determined.

[0012] Based on the start and end line numbers of the current incremental code and the hypertext markup syntax tree and / or page script syntax tree affected by the matched syntax tree, the matching DOM element is determined in the hypertext markup syntax tree.

[0013] Optionally, the step of determining the matching DOM element in the hypertext markup syntax tree based on the start and end line numbers of the current incremental code and the hypertext markup syntax tree and / or page script syntax tree affected by the matched syntax tree includes:

[0014] If the matched syntax tree is a hypertext markup syntax tree, obtain the start and end line numbers of each DOM element in the hypertext markup syntax tree;

[0015] The DOM elements are determined by matching the start and end line numbers of the current incremental code with the start and end line numbers of each DOM element.

[0016] Optionally, the step of determining the matching DOM element in the hypertext markup syntax tree based on the start and end line numbers of the current incremental code and the hypertext markup syntax tree and / or page script syntax tree affected by the matched syntax tree includes:

[0017] If the matched syntax tree is a page script syntax tree, the final call object or final call method is obtained from the page script syntax tree in a recursive manner according to the start and end line numbers of the current incremental code.

[0018] Obtain the attributes of each DOM element in the hypertext markup syntax tree, and match the final call object or final call method with the attributes of each DOM element to determine the DOM element.

[0019] Optionally, the step of determining the matching DOM element in the hypertext markup syntax tree based on the start and end line numbers of the current incremental code and the hypertext markup syntax tree and / or page script syntax tree affected by the matched syntax tree includes:

[0020] If the matched syntax tree is a page style syntax tree, obtain the start and end line numbers of each DOM element in the hypertext markup syntax tree; match the start and end line numbers of the current incremental code with the start and end line numbers of each DOM element to determine the DOM element;

[0021] Alternatively, based on the start and end line numbers of the current incremental code, the final call object or final call method can be obtained from the page script syntax tree using a recursive approach; the attributes of each DOM element in the hypertext markup syntax tree can be obtained, and the final call object or final call method can be matched with the attributes of each DOM element to determine the DOM element.

[0022] Optionally, the step of recursively retrieving the final call object or final call method from the page script syntax tree based on the start and end line numbers of the current incremental code includes:

[0023] Obtain the start and end line numbers of the object definition section and the method definition section of the page script syntax tree, respectively;

[0024] The start and end line numbers of the current incremental code are matched with the start and end line numbers of the object definition and method definition parts. If they match the object definition part, the target calling object is obtained from the page script syntax tree recursively. Otherwise, the target calling method is obtained from the page script syntax tree recursively.

[0025] Optionally, after the affected functional point, the method further includes:

[0026] The system can visually display the element tags and business text corresponding to the DOM element, or simultaneously display the route address of the front-end page that imports the target front-end code file.

[0027] Secondly, the present invention provides a front-end affected function point analysis device, including a syntax tree parsing module, an incremental code module, and a DOM element module;

[0028] The syntax tree parsing module is used to parse the target front-end code file to obtain the target syntax tree; wherein, the target syntax tree includes a hypertext markup syntax tree, a page script syntax tree, and a page style syntax tree;

[0029] The incremental code module is used to determine the incremental code of the target front-end code file and obtain the start and end line numbers of each incremental code.

[0030] The DOM element module is used to determine the matching DOM element in the hypertext markup syntax tree for each incremental code, based on the start and end line numbers of the current incremental code and the target syntax tree, as the affected function point.

[0031] Thirdly, the present invention provides a front-end affected function point analysis device, including a memory and a processor, wherein:

[0032] The memory is used to store computer programs;

[0033] The processor is used to read the program in the memory and execute the steps of the front-end affected function point analysis method provided in the first aspect above.

[0034] Fourthly, the present invention provides a computer-readable storage medium having a readable computer program stored thereon, which, when executed by a processor, implements the steps of the front-end affected function point analysis method provided in the first aspect above.

[0035] Compared with the prior art, the present invention provides a method, apparatus, device, and storage medium for analyzing front-end affected functional points, which has the following beneficial effects:

[0036] By analyzing the modified front-end code, we can identify the DOM elements affected by the changes. Furthermore, we can find the element tags and business text of the affected DOM elements, as well as the pages that called the modified code, and visualize these findings. This allows testers to quickly determine the scope of the affected front-end functionalities at a lower cost, greatly reducing the occurrence of missed tests. Attached Figure Description

[0037] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention, and not all embodiments. For those skilled in the art, other drawings obtained from these drawings without creative effort are all within the scope of protection of this application.

[0038] Figure 1 This is a schematic diagram illustrating an implementation scenario of a front-end affected function point analysis method provided in an embodiment of the present invention;

[0039] Figure 2 This is a flowchart illustrating a method for analyzing front-end affected functionalities provided in an embodiment of the present invention;

[0040] Figure 3 This is a flowchart illustrating the process of determining the matching DOM element in a front-end affected function point analysis method provided by an embodiment of the present invention;

[0041] Figure 4 This is a visual illustration of a front-end affected function point analysis method provided in an embodiment of the present invention;

[0042] Figure 5 This is a schematic diagram of the structure of a front-end affected function point analysis device provided in an embodiment of the present invention;

[0043] Figure 6This is a schematic diagram of the structure of a front-end affected function point analysis device provided in an embodiment of the present invention;

[0044] Figure 7 This is a schematic diagram of the structure of a computer-readable storage medium provided in an embodiment of the present invention. Detailed Implementation

[0045] To make the objectives, technical solutions, and advantages of this invention clearer, the invention will be further described in detail below with reference to the accompanying drawings and specific embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the invention.

[0046] To make the description of this disclosure more detailed and complete, illustrative descriptions of embodiments and specific examples of the present invention are provided below; however, these are not the only forms of implementing or utilizing the specific embodiments of the present invention. The embodiments cover features of multiple specific embodiments and the methods, steps, and their order for constructing and operating these specific embodiments. However, other specific embodiments may also be used to achieve the same or equivalent functions and step sequences. Based on the embodiments in this application, all other embodiments obtained by those skilled in the art without inventive effort are within the scope of protection of this application.

[0047] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this invention are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of the invention described herein can be implemented in sequences other than those illustrated or described herein.

[0048] In the description of the embodiments of the present invention, unless otherwise stated, " / " means "or". For example, A / B can mean A or B. The word "and / or" in the text is merely a description of the relationship between related objects, indicating that there can be three relationships. For example, A and / or B can mean: A exists alone, A and B exist simultaneously, and B exists alone. In addition, in the description of the embodiments of this application, "multiple" means two or more. Other quantifiers should be understood similarly. The preferred embodiments described herein are only used to illustrate and explain the present invention and are not intended to limit the present invention. Furthermore, the embodiments and features in the embodiments of this application can be combined with each other without conflict.

[0049] Please refer to Figures 1-7 This is used to solve the technical problem of finding the affected functionalities in the front-end after modifications to the front-end code.

[0050] like Figure 1The diagram illustrates an implementation scenario of a front-end affected function point analysis method provided by an embodiment of the present invention. The computer device is used to execute the steps of the front-end affected function point analysis method.

[0051] The aforementioned computer equipment can be a personal computer or a laptop computer; it can also be a server, which can be a standalone server or a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, content delivery networks (CDNs), and big data and artificial intelligence platforms. This invention does not limit the specific implementation of the aforementioned computer equipment; any implementation that can achieve the above functions can be used in this invention. It is understood that the above... Figure 1 The number of computer devices shown is merely illustrative and can be expanded in any number according to actual needs.

[0052] Based on the above implementation scenarios, this embodiment of the invention provides a method for analyzing front-end affected functionalities. For example... Figure 2 The above is a flowchart illustrating a method for analyzing front-end affected functional points according to an embodiment of the present invention, specifically used in the computer device described in the above implementation scenario. The method includes the following steps.

[0053] Step S101: Parse the target front-end code file to obtain the target syntax tree; wherein, the target syntax tree includes a hypertext markup syntax tree, a page script syntax tree, and a page style syntax tree.

[0054] The target front-end code file mentioned above is a Vue file.

[0055] It should be noted that any method that can parse front-end code files can be applied to the embodiments of the present invention, and the embodiments of the present invention do not impose any limitations on this.

[0056] As an alternative implementation, the Babel tool can be used to parse the target front-end code file into an object containing three parts: html, script, and style.

[0057] The html, script, and style sections are independent of each other. The html section is where the target front-end code file defines html tags. The script section is where the target front-end code file defines JavaScript scripts, specifically including the data section and the methods section. The style section is where the target front-end code file defines CSS (Cascading Style Sheets) styles, which are used to coordinate with the styles of elements rendered in the html section.

[0058] It should be noted that the specific form of the target syntax tree mentioned above can be an AST (Abstract Syntax Tree), and the embodiments of the present invention do not impose any limitations on it.

[0059] As an optional implementation, the above-mentioned HTML part is parsed into the above-mentioned Hypertext Markup Syntax Tree using the parser5 tool; the above-mentioned script part is parsed into the above-mentioned Page Script Syntax Tree using the babel or parser tool; and the above-mentioned style part is parsed into the above-mentioned Page Style Syntax Tree using the postcss tool.

[0060] Step S102: Determine the incremental code of the target front-end code file and obtain the start and end line numbers of each incremental code.

[0061] It should be noted that any method that can obtain the above-mentioned incremental code can be applied to the embodiments of the present invention, and the embodiments of the present invention do not impose any limitations on it.

[0062] As an optional implementation, the target front-end code file is parsed using a diff tool to obtain the incremental code of the current target front-end code file relative to the previous version of the target front-end code file.

[0063] Furthermore, the start and end line numbers of the incremental code are extracted and stored.

[0064] Furthermore, if the target front-end code file contains at least two incremental code instances, a new incremental code object collection is created. Then, a new incremental code object is generated each time an incremental code instance is parsed. This incremental code object stores the start and end line numbers of the parsed incremental code. Finally, the incremental code object is stored in the incremental code object collection.

[0065] Step S103: For each incremental code, determine the matching DOM element in the hypertext markup syntax tree based on the start and end line numbers of the current incremental code and the target syntax tree, as the affected function point.

[0066] The DOM (Document Object Model) is the programming interface for HTML and XML documents. The DOM provides a structured representation of a document and defines a way to access this structure from within a program, thereby allowing changes to the document's structure, style, and content.

[0067] Furthermore, such as Figure 3 The diagram shown is a flowchart illustrating the process of determining the matching DOM element in a method for identifying front-end affected functionalities according to an embodiment of the present invention. Step S103 includes:

[0068] Step S1031: Obtain the start and end line numbers of the hypertext markup syntax tree, page script syntax tree, and page style syntax tree, respectively.

[0069] Step S1032: Compare the start and end line numbers of the current incremental code with the start and end line numbers of the hypertext markup syntax tree, page script syntax tree, and page style syntax tree to determine the syntax tree that matches the current incremental code.

[0070] Specifically, the start and end line numbers of the HTML section, the script section, and the style section are extracted respectively. The start and end line numbers of the current incremental code are then matched with the start and end line numbers of the current incremental code to determine which part the current incremental code is located in.

[0071] Step S1033: Based on the start and end line numbers of the current incremental code and the hypertext markup syntax tree and / or page script syntax tree affected by the matched syntax tree, determine the matching DOM element in the hypertext markup syntax tree.

[0072] As an optional implementation, if the matched syntax tree is a hypertext markup syntax tree, the start and end line numbers of each DOM element in the hypertext markup syntax tree are obtained;

[0073] The DOM elements are determined by matching the start and end line numbers of the current incremental code with the start and end line numbers of each DOM element.

[0074] Specifically, if the current incremental code is located in the html section, then the html section is traversed, and the start and end line numbers of the current incremental code are compared with the start and end line numbers of each DOM element in the html section until a matching DOM element is found in the html section.

[0075] Finally, store the element tag and business text corresponding to the DOM element. For example, if the DOM element is determined to be "<key-button type=”text”> If the text is set to "Edit", then the element tag "key-button" and the business text "Edit" will be extracted and stored.

[0076] As an optional implementation, if the matched syntax tree is a page script syntax tree, the final call object or final call method is obtained from the page script syntax tree in a recursive manner according to the start and end line numbers of the current incremental code.

[0077] Obtain the attributes of each DOM element in the hypertext markup syntax tree, and match the final call object or final call method with the attributes of each DOM element to determine the DOM element.

[0078] Specifically, the code content corresponding to the final calling object or the final calling method is matched with the code content in the attributes of each DOM element to find the matching DOM element.

[0079] Furthermore, the final invoked object or method is matched against the aforementioned hypertext markup syntax tree, traversing each DOM element and extracting the corresponding attributes. If the attribute of the traversed DOM element contains the final invoked object or method, the element tag and business text corresponding to that DOM element are stored.

[0080] Specifically, the steps described above, which involve recursively retrieving the final call object or final call method from the page script syntax tree based on the start and end line numbers of the current incremental code, include:

[0081] Obtain the start and end line numbers of the object definition section and the method definition section of the page script syntax tree, respectively.

[0082] The start and end line numbers of the current incremental code are matched with the start and end line numbers of the object definition and method definition parts. If they match the object definition part, the target calling object is obtained from the page script syntax tree recursively. Otherwise, the target calling method is obtained from the page script syntax tree recursively.

[0083] In another, more specific embodiment, if the matched syntax tree is a page script syntax tree, i.e., the incremental code is located in the script section, then the data block and methods block in the script section are traversed first to obtain the start and end line numbers of the data block and methods block, respectively. The data block is where the target front-end code file defines objects, and the methods block is where the target front-end code file defines methods.

[0084] Then, the start and end line numbers of the data and methods blocks are matched against the incremental code. If a match is found, the line number determines the object or method to which the incremental code belongs, and that object or method is stored.

[0085] The above page script syntax tree is recursively processed. If a new calling object or calling method is found in a certain recursion, the new calling object or calling method is used to replace the above-mentioned object or method until the recursion process ends. If the above-mentioned object or method is no longer updated, then the above-mentioned object or method is the final calling object or method.

[0086] For example, if an incremental code is located in the script section, and both its starting and ending lines are within the `link()` method, then the `link()` method is used as a new search object in the script section. It is found that the `link()` method is called within the `toggleRowSelection()` method. Therefore, the `toggleRowSelection()` method is used as a new search object in the script section. After the search is complete and no new calling method is found, `toggleRowSelection()` is then used to search the aforementioned HTML section.

[0087] As an optional implementation, if the matched syntax tree is a page style syntax tree, the start and end line numbers of each DOM element in the hypertext markup syntax tree are obtained;

[0088] Match the start and end line numbers of the current incremental code with the start and end line numbers of each DOM element to determine the DOM element;

[0089] Alternatively, based on the start and end line numbers of the current incremental code, the final call object or final call method can be obtained from the page script syntax tree using a recursive approach;

[0090] Obtain the attributes of each DOM element in the hypertext markup syntax tree, and match the final call object or final call method with the attributes of each DOM element to determine the DOM element.

[0091] The specific implementation methods for determining DOM elements based on the hypertext markup syntax tree and the page script syntax tree are described above and will not be repeated here.

[0092] As an optional implementation, after identifying the matching DOM element as the affected functional point, the element tag and business text corresponding to the DOM element are displayed visually, or the routing address of the front-end page that introduces the target front-end code file is displayed at the same time.

[0093] In another, more specific embodiment, the route address corresponding to the front-end code file is generated by the path of the front-end code file, and the current project files to which the front-end code file belongs are traversed. For each front-end code file, its script part is parsed using Babel or a parser tool. Other front-end pages that have imported the front-end code file corresponding to the traversed route address are found by import statements, and the corresponding route address is generated using the import path.

[0094] For example, the current incremental code is located in the component list.vue, which, according to the path, is under the file directory resourcev2. Therefore, the corresponding route address is http: / / xxxx / resourcev2 / list.

[0095] like Figure 4 As shown, this is a visualization diagram of a front-end affected function point analysis method provided by an embodiment of the invention. The modified incremental Vue file is located on the left, the middle part shows the incremental code snippet in a certain Vue file, and the right side shows the route address, the page to which it belongs, the entry point of the affected point, and the element type extracted from the incremental Vue file.

[0096] The element type mentioned above is the same as the element tag mentioned earlier. Figure 4 In the code, the element tag "kye-button" is mapped to a Chinese button according to the rules in the code. The entry points for the Chinese button are anomaly detection and self-service query, respectively.

[0097] Through the above visualization, testers can quickly find out which incremental files the target application has, the incremental code blocks modified in the incremental files, and which specific types of tags under which routes the incremental code blocks affect. By using the business text of the tags, they can quickly locate the affected functionalities.

[0098] Furthermore, the above visualization method can be used to monitor the front-end framework. When there are changes to the front-end framework, the affected business function components can be automatically analyzed and displayed to the relevant developers and testers.

[0099] The present invention provides a method for analyzing front-end affected functionalities, which has the following beneficial effects:

[0100] By analyzing the modified front-end code, we can identify the affected DOM elements. Furthermore, we can find the element tags and business text of the affected DOM elements, as well as the pages that called the modified code, and visualize these details. This allows testers to quickly determine the scope of affected front-end functionalities at a lower cost, greatly reducing the occurrence of missed tests.

[0101] Converting the front-end code file into a syntax tree for matching further improves matching efficiency and reduces the time spent finding the affected front-end functionalities.

[0102] Based on the above analysis method for affected front-end functions, such as Figure 5 The diagram shown is a structural schematic of a front-end affected function point analysis device provided in an embodiment of the present invention, including a syntax tree parsing module 51, an incremental code module 52, and a DOM element module 53;

[0103] The syntax tree parsing module 51 is used to parse the target front-end code file to obtain the target syntax tree; wherein, the target syntax tree includes a hypertext markup syntax tree, a page script syntax tree, and a page style syntax tree;

[0104] The incremental code module 52 is used to determine the incremental code of the target front-end code file and obtain the start and end line numbers of each incremental code.

[0105] The DOM element module 53 is used to determine the matching DOM element in the hypertext markup syntax tree for each incremental code, based on the start and end line numbers of the current incremental code and the target syntax tree, as the affected function point.

[0106] For other details regarding the implementation of the above technical solution by each module in the aforementioned front-end affected function point analysis device, please refer to the description in the front-end affected function point analysis method provided in the above-mentioned invention embodiments, which will not be repeated here.

[0107] Based on the above analysis method for affected front-end functions, such as Figure 6As shown in the diagram, this embodiment of the invention also provides a schematic diagram of a front-end affected function point analysis device. This identification device includes a processor 61 and a memory 62 coupled to the processor 61. The memory 62 stores a computer program. When the computer program is executed by the processor 61, the processor 61 performs the steps of the front-end affected function point analysis method described in the above embodiment.

[0108] For other details regarding the implementation of the above technical solution by the processor 61 in the aforementioned front-end affected function point analysis device, please refer to the description in the front-end affected function point analysis method provided in the above-mentioned invention embodiments, which will not be repeated here.

[0109] The processor 61 can also be called a CPU (Central Processing Unit). The processor 61 may be an integrated circuit chip with signal processing capabilities. The processor 61 can also be a general-purpose processor, a DSP (Digital Signal Processor), an ASIC (Application Specific Integrated Circuit), an FPGA (Field Programmable Gate Array), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components. The general-purpose processor can be a microprocessor, or the processor 61 can be any conventional processor.

[0110] like Figure 7 As shown in the diagram, this embodiment of the invention also provides a schematic diagram of a computer-readable storage medium, on which a readable computer program 701 is stored. The computer program 701 can be stored in the storage medium in the form of a software product, including several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) or processor to execute all or part of the steps of the methods described in various embodiments of the invention. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, magnetic disks or optical disks, ROM (Read-Only Memory), RAM (Random Access Memory), or terminal devices such as computers, servers, mobile phones, and tablets.

[0111] In the several embodiments provided in this application, it should be understood that the disclosed systems, apparatuses, and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of modules is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple modules or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be indirect coupling or communication connection through some interfaces, apparatuses, or modules, and may be electrical, mechanical, or other forms.

[0112] The modules described as separate components may or may not be physically separate. The components shown as modules may or may not be physical modules; that is, they may be located in one place or distributed across multiple network modules. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs.

[0113] Furthermore, the functional modules in the various embodiments of this application can be integrated into one processing module, or each module can exist physically separately, or two or more modules can be integrated into one module. The integrated module can be implemented in hardware or as a software functional module. If the integrated module is implemented as a software functional module and sold or used as an independent product, it can be stored in a computer-readable storage medium.

[0114] In the above embodiments, implementation can be achieved, in whole or in part, through software, hardware, firmware, or any combination thereof. When implemented in software, it can be implemented, in whole or in part, as a computer program product.

[0115] The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the processes or functions described in the embodiments of this application are generated. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions may be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions may be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium may be any available medium that a computer can store or a data storage device such as a server or data center that integrates one or more available media. The available medium may be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., solid-state disk (SSD)).

[0116] The technical solutions provided in this application have been described in detail above. Specific examples have been used in this application to illustrate the principles and implementation methods of this application. The description of the above embodiments is only for the purpose of helping to understand the method and core ideas of this application. At the same time, for those skilled in the art, there will be changes in the specific implementation methods and application scope based on the ideas of this application. Therefore, the content of this specification should not be construed as a limitation of this application.

[0117] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0118] This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to this application. It should be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart illustrations. Figure 1One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0119] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0120] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0121] Obviously, those skilled in the art can make various modifications and variations to this application without departing from the spirit and scope of this application. Therefore, if such modifications and variations fall within the scope of the claims of this application and their equivalents, this application also intends to include such modifications and variations.

Claims

1. A method for analyzing front-end affected functionalities, characterized in that, include: Parse the target front-end code file to obtain the target syntax tree; wherein, the target syntax tree includes a hypertext markup syntax tree, a page script syntax tree, and a page style syntax tree; Determine the incremental code in the target front-end code file and obtain the start and end line numbers of each incremental code; For each incremental code, based on the start and end line numbers of the current incremental code and the target syntax tree, the matching DOM element in the hypertext markup syntax tree is determined as the affected function point; The affected functionalities include the element tags and business text corresponding to the matched DOM elements; The step of determining the matching DOM element in the hypertext markup syntax tree based on the start and end line numbers of the current incremental code and the target syntax tree includes: obtaining the start and end line numbers of the hypertext markup syntax tree, the page script syntax tree, and the page style syntax tree respectively; comparing the start and end line numbers of the current incremental code with the start and end line numbers of the hypertext markup syntax tree, the page script syntax tree, and the page style syntax tree to determine the syntax tree that matches the current incremental code; and determining the matching DOM element in the hypertext markup syntax tree based on the start and end line numbers of the current incremental code and the hypertext markup syntax tree and / or the page script syntax tree affected by the matching syntax tree. Specifically, when the matched syntax tree is a Hypertext Markup Syntax Tree, the syntax tree affected by the matched syntax tree is the Hypertext Markup Syntax Tree; when the matched syntax tree is a Page Script Syntax Tree, the syntax trees affected by the matched syntax tree are the Page Script Syntax Tree and the Hypertext Markup Syntax Tree; when the matched syntax tree is a Page Style Syntax Tree, the syntax tree affected by the matched syntax tree is the Hypertext Markup Syntax Tree, or the Page Script Syntax Tree and the Hypertext Markup Syntax Tree.

2. The front-end affected function point analysis method according to claim 1, characterized in that, The step of determining the matching DOM element in the hypertext markup syntax tree based on the start and end line numbers of the current incremental code and the hypertext markup syntax tree and / or page script syntax tree affected by the matched syntax tree includes: If the matched syntax tree is a hypertext markup syntax tree, obtain the start and end line numbers of each DOM element in the hypertext markup syntax tree; The DOM elements are determined by matching the start and end line numbers of the current incremental code with the start and end line numbers of each DOM element.

3. The front-end affected function point analysis method according to claim 1, characterized in that, The step of determining the matching DOM element in the hypertext markup syntax tree based on the start and end line numbers of the current incremental code and the hypertext markup syntax tree and / or page script syntax tree affected by the matched syntax tree includes: If the matched syntax tree is a page script syntax tree, the final call object or final call method is obtained from the page script syntax tree in a recursive manner according to the start and end line numbers of the current incremental code. Obtain the attributes of each DOM element in the hypertext markup syntax tree, and match the final call object or final call method with the attributes of each DOM element to determine the DOM element.

4. The front-end affected function point analysis method according to claim 1, characterized in that, The step of determining the matching DOM element in the hypertext markup syntax tree based on the start and end line numbers of the current incremental code and the hypertext markup syntax tree and / or page script syntax tree affected by the matched syntax tree includes: If the matched syntax tree is a page style syntax tree, obtain the start and end line numbers of each DOM element in the hypertext markup syntax tree; match the start and end line numbers of the current incremental code with the start and end line numbers of each DOM element to determine the DOM element; Alternatively, based on the start and end line numbers of the current incremental code, the final call object or final call method can be obtained from the page script syntax tree using a recursive approach; the attributes of each DOM element in the hypertext markup syntax tree can be obtained, and the final call object or final call method can be matched with the attributes of each DOM element to determine the DOM element.

5. The front-end affected function point analysis method according to claim 3 or 4, characterized in that, The step of recursively retrieving the final call object or final call method from the page script syntax tree based on the start and end line numbers of the current incremental code includes: Obtain the start and end line numbers of the object definition section and the method definition section of the page script syntax tree, respectively; The start and end line numbers of the current incremental code are matched with the start and end line numbers of the object definition and method definition parts. If they match the object definition part, the target calling object is obtained from the page script syntax tree recursively. Otherwise, the target calling method is obtained from the page script syntax tree recursively.

6. The front-end affected function point analysis method according to claim 1, characterized in that, Following the description of the affected functional points, the method further includes: The system can visually display the element tags and business text corresponding to the DOM element, or simultaneously display the route address of the front-end page that imports the target front-end code file.

7. A front-end affected function point analysis device, the device being used to implement the steps of the front-end affected function point analysis method as described in any one of claims 1-6, characterized in that, This includes a syntax tree parsing module, an incremental code module, and a DOM element module; The syntax tree parsing module is used to parse the target front-end code file to obtain the target syntax tree; wherein, the target syntax tree includes a hypertext markup syntax tree, a page script syntax tree, and a page style syntax tree; The incremental code module is used to determine the incremental code of the target front-end code file and obtain the start and end line numbers of each incremental code. The DOM element module is used to determine the matching DOM element in the hypertext markup syntax tree for each incremental code, based on the start and end line numbers of the current incremental code and the target syntax tree, as the affected function point.

8. A front-end affected function point analysis device, characterized in that, Includes memory and processor, wherein: The memory is used to store computer programs; The processor is used to read the computer program in the memory and execute any step of the front-end affected function point analysis method as described in claims 1 to 6.

9. A computer-readable storage medium, characterized in that, It stores a readable computer program that, when executed by a processor, implements any step of the front-end affected function point analysis method as described in claims 1 to 6.

Images