Element logic acquisition method
By responding to click events in complex projects, and using machine learning models to generate logical reports, the time-consuming and laborious problem of code logic understanding and modification process in project maintenance is solved, real-time code logic insights and simplified logical understanding process are achieved.
Patent Information
- Application Number
- CN202411931277.6
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-12-25
- Publication Date
- 2025-04-29
AI Technical Summary
In complex projects, especially when the project is maintained for more than 2 years and the logic is complex, new developers, test engineers and product managers need to spend a lot of time familiarizing themselves with and analyzing the code logic to understand element presentation and click logic.
Provides a method of obtaining element logic, which obtains its code location by clicking on the target element of the bound code location on the target web page, and retrieves relevant code based on the code location and page address. Then, a machine learning model is used to analyze the relevant code and generate logical reports related to the target elements.
This method provides developers, test engineers, and product managers with instant code logic insights, simplifies the understanding and modification process of logic such as element display in complex projects, and significantly reduces the time to locate problems.
Smart Images
Figure CN119903250A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the technical field of data processing, and in particular to a method for acquiring element logic. Background Art
[0002] In daily development, for projects that have been maintained for more than 2 years, the logic is complex and the maintainers may be unstable. There are often some small requirements to make some changes to the display logic and click logic of a certain element, or R&D (RD) / Quality Assurance (QA) / Project Management (PM) need the front-end to help sort out the display logic of certain buttons, etc. For people who are not familiar with the project, it may take a long time to sort out the logic.
[0003] For example, the second-hand housing system is complex and has a heavy historical burden. If you want to check online problems, modify requirements (make some small changes to the original business logic), or the front-end helps the product RD understand the logic of a certain function, such as why a certain button displays a specific text, the processing logic of click events, etc., for project members (especially new members), it takes a lot of time to familiarize themselves with and analyze the code logic in order to understand certain functions, which is time-consuming and laborious. Summary of the invention
[0004] The purpose of the present invention is to provide a method for obtaining element logic, which can provide developers, test engineers, product managers, etc. with instant code logic insights, thereby simplifying the process of understanding and modifying logic such as element display in complex projects.
[0005] In order to achieve the above-mentioned purpose, the first aspect of the present invention provides a method for obtaining element logic, which includes: in response to the action of clicking a target element with a bound code position on a target web page, obtaining the code position of the target element; based on the code position and the page address of the target web page, retrieving the relevant code of the target element; and using a machine learning model and based on the relevant code, obtaining a logic report related to the target element.
[0006] In one embodiment, the acquisition method further includes: binding the target element to the code position; and acquiring a page address of a target webpage of the target element.
[0007] In one embodiment, the code location of the target element includes: the file path and line and column numbers of the target element in the source code.
[0008] In one embodiment, the retrieving the relevant code of the target element includes: based on the code position, obtaining the target file where the source code of the target element is located; obtaining multiple file links corresponding to multiple web pages that call the target file; based on the page address of the target web page, obtaining the file link corresponding to the target web page from the multiple file links corresponding to the multiple web pages; and based on the file link corresponding to the target web page, retrieving the relevant code that calls the target element.
[0009] In one embodiment, the page address is a URL.
[0010] In one embodiment, the logic report includes: a logic file and a corresponding interface.
[0011] In one embodiment, the acquisition method further includes: acquiring data returned by the corresponding interface on the target webpage; and acquiring a logic verification result of the target element based on the acquired data and the logic file.
[0012] In one embodiment, the target element is a button, a picture or a text.
[0013] Through the above technical scheme, the present invention creatively responds to the action of clicking a target element at a bound code position on a target web page to obtain the code position of the target element; then, based on the code position and the page address of the target web page, the relevant code of the target element is retrieved; finally, a machine learning model is used to obtain a logic report related to the target element based on the relevant code. Therefore, the present invention can provide developers, test engineers, product managers, etc. with instant code logic insights, thereby simplifying the understanding and modification process of the logic of element display and the like in complex projects.
[0014] A second aspect of the present invention provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the method for obtaining element logic is implemented.
[0015] A third aspect of the present invention provides a computer program product, comprising a computer program, which implements the element logic acquisition method when executed by a processor.
[0016] Other features and advantages of the present invention will be described in detail in the following detailed description. BRIEF DESCRIPTION OF THE DRAWINGS
[0017] The accompanying drawings are used to provide a further understanding of the embodiments of the present invention and constitute a part of the specification. Together with the following specific embodiments, they are used to explain the embodiments of the present invention, but do not constitute a limitation on the embodiments of the present invention. In the accompanying drawings:
[0018] Figure 1 It is a flowchart of a method for obtaining element logic provided by an embodiment of the present invention. DETAILED DESCRIPTION
[0019] The specific implementation of the present invention is described in detail below in conjunction with the accompanying drawings. It should be understood that the specific implementation described here is only used to illustrate and explain the present invention, and is not used to limit the present invention.
[0020] Figure 1 FIG. 1 is a flow chart of a method for obtaining element logic provided by an embodiment of the present invention. Figure 1 As shown, the acquisition method includes: step S1, in response to the action of clicking the target element with a bound code position on the target web page, acquiring the code position of the target element; step S2, based on the code position and the page address of the target web page, retrieving the relevant code of the target element; and step S3, using a machine learning model and based on the relevant code, acquiring a logic report related to the target element.
[0021] In one embodiment, the target element is a button (such as a process button or a function button), a picture, or text, etc. The process button can be any of the following: next, confirm, cancel, return, save, etc. buttons; the function button can be any of the following: display, click, etc. buttons.
[0022] In one embodiment, the code location of the target element includes: the file path and line and column numbers of the target element in the source code.
[0023] For step S1, the target element and its code position have been bound, as described below, so the corresponding code position can be obtained by clicking the target element. Taking the OK button as an example, its code position can be obtained by clicking the OK button (the code position includes the file path and row and column number of the OK button in the source code).
[0024] Before executing step S1, the acquisition method further includes: binding the target element with the code position; and acquiring the page address of the target webpage of the target element.
[0025] In the process of front-end code packaging, for example, react-dev-inspector is used to add the code position of the element for each target element (e.g., DOM element), and the code position may include the file path and line number of the target element in the source code. In other words, the file path and line number A of the element are bound to the element during packaging. Then, the target web page (e.g., web page 1) can be opened in the browser, and the address of the current page (e.g., web page 1) (e.g., URL address B) can be recorded.
[0026] For step S2, the retrieval of the relevant code of the target element includes: based on the code position, obtaining the target file where the source code of the target element is located; obtaining multiple file links corresponding to multiple web pages that call the target file; based on the page address of the target web page, obtaining the file link corresponding to the target web page from the multiple file links corresponding to the multiple web pages; and based on the file link corresponding to the target web page, retrieving the relevant code that calls the target element.
[0027] In one embodiment, the page address may be a URL.
[0028] Specifically, the code position obtained through step S1 can retrieve the source code file (such as file A) related to the target element (such as the confirmation button), which may involve multiple web pages to reference the source code file (such as file A) through different paths, that is, there may be multiple file links corresponding to multiple calling relationships. For example, according to the code position of a confirmation button, the target file is determined to be file A. Then, the following information can be obtained: file B calls file A, files C and D call file B, web page E (URL1) calls file C, and web page F (URL2) calls file D; that is, the file link of web page F is F->D->B->A, and the file link of web page E is E->C->B->A. Since the page address URL2 of the target web page is equal to the address of web page F, the relevant code for calling file A (the code fragment of the confirmation button in the target web page) is obtained through the file link F->D->B->A.
[0029] Through steps S1 and S2, the element is bound to its code location during packaging, and combined with the page URL, it is possible to quickly retrieve the relevant code segment, greatly reducing the time to locate the problem. In other words, instant code binding and retrieval is achieved.
[0030] In one embodiment, the logic report includes: a logic file and a corresponding interface.
[0031] The logic file at least includes display logic. When the source code of the target element also involves other click logic (such as click logic), the logic file also includes the other logic (such as click logic).
[0032] For step S3, the relevant code of the OK button obtained in step S2 is input into a machine learning model (e.g., an artificial intelligence model) for in-depth code logic analysis. After the machine learning model (e.g., artificial intelligence model) completes the analysis, a logic report related to the OK button is output, which at least includes the display logic and the interface used. And, it is provided to the user in the form of a file with an explanation. In other words, the intelligent agent trained using machine learning technology can automatically identify and analyze the logical relationships in the code, and provide users with clear explanations of the element display logic, etc.
[0033] In step S3, the user can interactively explore the code logic through a machine learning model (e.g., an artificial intelligence model), obtain real-time element display reasons, and data and code of related interfaces, thereby enhancing the intuitiveness of problem diagnosis.
[0034] The machine learning model (e.g., artificial intelligence model) can continuously learn and optimize its analytical capabilities based on user feedback and usage, ensuring that the accuracy and relevance of the tool improve as the project develops. Therefore, the machine learning model (e.g., artificial intelligence model) can more fully realize interactive logic exploration through continuous learning and optimization.
[0035] In one embodiment, the acquisition method further includes: acquiring data returned by the corresponding interface on the target webpage; and acquiring a logic verification result of the target element based on the acquired data and the logic file.
[0036] Among them, the corresponding interface can be obtained according to the logic report. Specifically, if the logic file in the logic report is that field b in the data returned by interface a is true and field d in the data returned by interface c is false, indicating that the OK button is displayed, then the corresponding interfaces are interface a and interface c. If you need to further verify the display logic of the OK button, you can obtain the data returned by interface a and the data returned by interface c on the target web page, and analyze whether field b in the data returned by interface a is true and whether field d in the data returned by interface c is false. If so, the logical verification result of displaying this button is correct; otherwise, the logical verification result of displaying this button is wrong.
[0037] The tools provided by the above embodiments not only provide a quick way for new members to get started, but also provide a powerful collaboration and communication tool for existing team members (developers, test engineers, product managers, etc.), thereby improving the work efficiency of the entire team. The above embodiments not only improve the efficiency of code maintenance, but also bring a new perspective to project management, making even the most complex projects easier to understand and operate.
[0038] The above embodiments can be provided in the form of browser plug-ins. The above embodiments are intended to simplify the process of understanding and modifying the logic of element display and click in complex projects that are maintained for a long time. The smart browser plug-in provides developers, test engineers and product managers with instant code logic insights through advanced code analysis technology.
[0039] Specifically, the process of obtaining element logic can be briefly described through the following 5 steps.
[0040] 1. When packaging, bind the file path and row and column number A where a confirmation button is located to the confirmation button.
[0041] 2. Get the URL address B of the target web page where the confirmation button is located.
[0042] 3. Based on A and B obtained in step 1, obtain the relevant source code file and code snippet C.
[0043] 4. Give the code snippet C to the artificial intelligence model, analyze the display logic and click logic related to the target element and the interface D used, and give it to the user in the form of a file with an explanation.
[0044] 5. If you need to further verify the display logic of the button, you can obtain the data of interface D and code snippet C on the page to analyze the specific logic of the button.
[0045] In summary, the present invention creatively responds to the action of clicking a target element at a bound code position on a target web page to obtain the code position of the target element; then, based on the code position and the page address of the target web page, the relevant code of the target element is retrieved; finally, a machine learning model is used to obtain a logic report related to the target element based on the relevant code. Therefore, the present invention can provide developers, test engineers, product managers, etc. with instant code logic insights, thereby simplifying the understanding and modification process of the logic of element display and the like in complex projects.
[0046] An embodiment of the present invention provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the method for obtaining element logic is implemented.
[0047] An embodiment of the present invention provides a computer program product, including a computer program, which implements the element logic acquisition method when executed by a processor.
[0048] The preferred embodiments of the present invention are described in detail above in conjunction with the accompanying drawings. However, the present invention is not limited to the specific details in the above embodiments. Within the technical concept of the present invention, a variety of simple modifications can be made to the technical solution of the present invention, and these simple modifications all belong to the protection scope of the present invention.
[0049] It should also be noted that the various specific technical features described in the above specific embodiments can be combined in any suitable manner without contradiction. In order to avoid unnecessary repetition, the present invention will not further describe various possible combinations.
[0050] Those skilled in the art can understand that all or part of the steps in the above-mentioned embodiment method can be completed by instructing the relevant hardware through a program, and the program is stored in a storage medium, including a number of instructions to enable a single-chip microcomputer, a chip or a processor to execute all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk and other media that can store program codes.
[0051] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems, or computer program products. Therefore, the present application may adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment in combination with software and hardware. Moreover, the present application may adopt the form of a computer program product implemented in one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) that include computer-usable program code.
[0052] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.
[0053] In addition, various embodiments of the present invention may be arbitrarily combined, and as long as they do not violate the concept of the present invention, they should also be regarded as the contents disclosed by the present invention.
Claims
1. A method for obtaining element logic, characterized in that: The acquisition method comprises: In response to an action of clicking a target element on a target webpage to which a code position has been bound, obtaining the code position of the target element; Retrieving the relevant code of the target element based on the code location and the page address of the target webpage; and A logic report related to the target element is obtained by using a machine learning model and based on the related code.
2. The acquisition method according to claim 1, characterized in that: The acquisition method further includes: Binding the target element to the code location; and Obtain the page address of the target web page of the target element.
3. The acquisition method according to claim 1 or 2, characterized in that: The code position of the target element includes: the file path and line and column numbers of the target element in the source code.
4. The acquisition method according to claim 1, characterized in that: The relevant code for retrieving the target element includes: Based on the code location, obtaining the target file where the source code of the target element is located; Acquire multiple file links corresponding to multiple web pages that call the target file; Based on the page address of the target webpage, acquiring the file link corresponding to the target webpage from the multiple file links corresponding to the multiple webpages; and Based on the file link corresponding to the target webpage, the relevant code for calling the target element is retrieved.
5. The acquisition method according to claim 1, characterized in that: The page address is a URL.
6. The acquisition method according to claim 1, characterized in that: The logic report includes: a logic file and a corresponding interface.
7. The acquisition method according to claim 6, characterized in that: The acquisition method further includes: Acquire the data returned by the corresponding interface on the target webpage; and Based on the acquired data and the logic file, a logic verification result of the target element is acquired.
8. The acquisition method according to claim 1, characterized in that: The target element is a button, a picture or a text.
9. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, which, when executed by a processor, implements the method for obtaining element logic according to any one of claims 1 to 8.
10. A computer program product, characterized in that The invention comprises a computer program, which, when executed by a processor, implements the method for obtaining element logic according to any one of claims 1 to 8.