Automatic operation method and device for front-end page, equipment and storage medium
By generating and embeding the front-end page json file on the automated operation processing platform, the front-end page is automated, and the problems of poor universality and difficult code maintenance in the existing technology are solved, and the efficiency and applicability of automated operations are improved.
Patent Information
- Application Number
- CN202311551373.3
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2023-11-20
- Publication Date
- 2025-05-27
AI Technical Summary
The automated operation methods of existing front-end pages are poorly versatile, and a large amount of code and scripts are required to be written, and the automated test code is prone to failure when the front-end page structure changes.
It provides an automated operation method for front-end pages. Through the automated operation processing platform, it obtains the URL and operation information of the front-end page, generates an executable json file, and embeds it into the front-end project of the front-end page. The server of the front-end page parses the json file to perform automated operations.
It reduces the user's need to write code and scripts, improves the efficiency and versatility of automated operations, and maintains the effectiveness of automated testing when the front-end page structure changes.
Smart Images

Figure CN120045444A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of automated testing, and particularly to a method, device, equipment, and storage medium for automated operation of a front-end page. Background Art
[0002] As one of the most important components of a Web application, with the rapid development of Internet technology, the front-end page has become increasingly complex and difficult to operate. However, developers need to perform various operations on the front-end page manually, which not only consumes time but also is prone to errors. Therefore, automated operation is crucial for front-end development.
[0003] In the existing technical solutions, front-end automated testing tools are one type. Such tools can simulate the behavior of users operating on the front-end page, such as clicking, inputting, swiping, etc., so as to complete the whole process of automated testing. At the same time, the existing front-end automated operation solutions also include some solutions for specific scenarios, such as automated form filling, automated data crawling, etc.
[0004] However, the existing front-end automated operation solutions usually require writing a large amount of code and scripts when applied. When the structure of the front-end page changes greatly, the automated test code is prone to failure and has poor versatility. Summary of the Invention
[0005] This application provides a method, device, equipment, and storage medium for automated operation of a front-end page to solve the technical problem of poor versatility of the existing front-end page automated operation method.
[0006] In a first aspect, this application provides a method for automated operation of a front-end page, which is applied to an automated operation processing platform. The method includes:
[0007] In response to a user's operation, obtain the URL of the front-end page that needs to perform automated operation and the operation information of the automated operation that needs to be performed. The operation information includes at least one control node identifier to be operated, operation event type, execution start time, and execution time interval;
[0008] Generate a JSON file that can execute the automated operation based on the operation information;
[0009] After establishing a connection with the front-end page according to the URL of the front-end page, embed the JSON file into the front-end engineering project of the front-end page.
[0010] In a possible design of the first aspect, the method further includes:
[0011] According to the URL of the front-end page, obtain the window object of the front-end page, and add an event listener for postMessage to the window object to establish a connection with the front-end page.
[0012] In a possible design of the first aspect, the method further includes:
[0013] After obtaining the end of the automated operation to be executed through the postMessage event listener, push an operation end prompt message to the user.
[0014] In a possible design of the first aspect,
[0015] The automated operation processing platform is pre-configured with a generation rule for generating automated operation code;
[0016] Correspondingly, generating a JSON file for executable automated operations based on the operation information includes:
[0017] Generate executable operation code according to the operation information and the generation rule;
[0018] Generate the JSON file for executable automated operations according to the executable operation code.
[0019] In a second aspect, the present application provides an automated operation method for a front-end page, which is applied to the server of the front-end page. The method includes:
[0020] Obtain a JSON file from the front-end engineering project of the front-end page. The JSON file is an executable file generated by the automated operation processing platform according to the operation information of the automated operations that need to be executed configured by the user. The operation information includes at least one control node identifier to be operated, an operation event type, an execution start time, and an execution time interval;
[0021] Parse the JSON file to obtain executable operation code;
[0022] Execute corresponding automated operations on the front-end page according to the executable operation code.
[0023] In a possible design of the second aspect, the step of parsing the JSON file to obtain executable operation code includes:
[0024] Parse the JSON file through the eval function to obtain the executable operation code.
[0025] In a third aspect, the present application provides an automated operation device for a front-end page, including:
[0026] An acquisition module, configured to, in response to an operation of a user, acquire a website address of a front-end page that needs to perform an automated operation and operation information of the automated operation to be performed, where the operation information includes at least one control node identifier to be operated, an operation event type, an execution start time, and an execution time interval;
[0027] A processing module, configured to generate a json file that can execute the automated operation based on the operation information;
[0028] The processing module is further configured to, after establishing a connection with the front-end page according to the website address of the front-end page, embed the json file into a front-end engineering project of the front-end page.
[0029] In a fourth aspect, the present application provides an automated operation device for a front-end page, including:
[0030] An acquisition module, configured to acquire a json file from a front-end engineering project of the front-end page, where the json file is an executable file generated by an automated operation processing platform according to operation information of an automated operation that needs to be performed as configured by a user; the operation information includes at least one control node identifier to be operated, an operation event type, an execution start time, and an execution time interval;
[0031] A processing module, configured to parse the json file to obtain executable operation codes;
[0032] The processing module is further configured to perform corresponding automated operations on the front-end page according to the executable operation codes.
[0033] In a fifth aspect, the present application provides an electronic device for automated operation of a front-end page, including: a processor and a memory communicatively connected to the processor;
[0034] The memory stores computer execution instructions;
[0035] The processor executes the computer execution instructions stored in the memory to implement the automated operation method of the front-end page according to any one of the first to second aspects.
[0036] In a sixth aspect, the present application provides a computer-readable storage medium, where computer execution instructions are stored in the computer-readable storage medium, and when the computer execution instructions are executed by a processor, they are used to implement the automated operation method of the front-end page according to any one of the first to second aspects.
[0037] In a seventh aspect, the present application provides a computer program product, which includes a computer program that, when executed by a processor, is used to implement the automated operation method of the front-end page as described in any one of the first to second aspects.
[0038] The present application provides an automated operation method, device, equipment, and storage medium for a front-end page. The automated operation method for the front-end page is applied to an automated operation processing platform and the server of the front-end page. After the automated operation processing platform is successfully started, the user only needs to input the corresponding front-end page website information and the automated operation information to be executed on this platform. This operation can reduce the user's need to write a large amount of code and scripts, improving the user experience. After the user has input the relevant information, the automated operation processing platform generates a json file that can execute automated operations based on the above information, and establishes a connection with the front-end page to embed the json file into the front-end engineering project of the front-end page. Thus, the server of the front-end page can parse the json file into executable operation code to perform corresponding automated operations on the front-end page. Compared with traditional automated operation solutions, the automated operation method for the front-end page does not require writing a large amount of code and scripts, and can quickly construct automated tests, with strong versatility. BRIEF DESCRIPTION OF THE DRAWINGS
[0039] The drawings herein are incorporated into the specification and form a part of the specification, showing embodiments consistent with the present application, and are used together with the specification to explain the principles of the present application.
[0040] Figure 1 It is a schematic diagram of the application scenario of the automated operation method for the front-end page provided by the present application;
[0041] Figure 2 It is a schematic flowchart of the first embodiment of the automated operation method for the front-end page provided by the present application;
[0042] Figure 3 It is a schematic flowchart of the second embodiment of the automated operation method for the front-end page provided by the present application;
[0043] Figure 4 It is a schematic flowchart of the third embodiment of the automated operation method for the front-end page provided by the present application;
[0044] Figure 5 It is a flowchart of the automated operation method for the front-end page provided by the present application;
[0045] Figure 6 It is a schematic flowchart of the fourth embodiment of the automated operation method for the front-end page provided by the present application;
[0046] Figure 7Schematic flowchart of the fifth embodiment of the method for automatically operating a front-end page provided by the present application;
[0047] Figure 8 Schematic structural diagram of the first embodiment of the device for automatically operating a front-end page provided by the present application;
[0048] Figure 9 Schematic structural diagram of the second embodiment of the device for automatically operating a front-end page provided by the present application;
[0049] Figure 10 Schematic structural diagram of the third embodiment of the device for automatically operating a front-end page provided by the present application;
[0050] Figure 11 Schematic structural diagram of the electronic device for automatically operating a front-end page provided by the present application.
[0051] Through the above-mentioned drawings, specific embodiments of the present application have been shown, and more detailed descriptions will be given in the following text. These drawings and textual descriptions are not intended to limit the scope of the concept of the present application in any way, but to illustrate the concept of the present application to those skilled in the art by referring to specific embodiments. Detailed implementation manners
[0052] Here, exemplary embodiments will be described in detail, and examples thereof are shown in the drawings. When the following description refers to the drawings, unless otherwise indicated, the same numerals in different drawings represent the same or similar elements. The implementation manners described in the following exemplary embodiments do not represent all implementation manners consistent with the present application. On the contrary, they are merely examples of devices and methods consistent with some aspects of the present application as detailed in the appended claims.
[0053] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data for analysis, stored data, displayed data, etc.) involved in the present application are all information and data authorized by the user or fully authorized by all parties, and the collection, use, and processing of relevant data need to comply with relevant laws, regulations, and standards, and corresponding operation entrances are provided for the user to select authorization or rejection.
[0054] With the continuous development of front-end technologies and the increasing complexity of application programs, the demand for front-end automatic operation is getting higher and higher. In early front-end automatic operation solutions, various operations on the front-end page were mainly achieved manually, which was not only time-consuming and laborious but also error-prone. Therefore, automatic operation is crucial for front-end development.
[0055] In existing technical solutions, the emergence of front-end automated testing tools has made various front-end automated operations easy and efficient. For example, Selenium - a web application testing tool, Postman - an API endpoint testing tool, and Watir - a Ruby automation tool, etc. These tools can simulate user behaviors for operating the front-end page, such as clicking, inputting, swiping, etc., thus completing the automated testing process. At the same time, existing front-end automated operation solutions also include some solutions for specific scenarios, such as automatically filling out forms, automatically scraping data, etc.
[0056] However, the above processing solutions have the following problems: When applying front-end automated testing tools, a large amount of code and scripts need to be written, and it is difficult to effectively test complex scenarios. When there are some framework changes or logic changes in the page to be automated, the corresponding code and scripts for automated operations need to be largely modified, which is a cumbersome and time-consuming process. At the same time, some front-end automated operation solutions are only applicable to specific scenarios and are difficult to be applied in a general way.
[0057] To address the above problems, during the research process of the front-end page automated operation solution, the inventor found that the current implementation method of automated code is mostly based on element selectors. When the structure of the front-end page changes significantly, the automated testing code is prone to failure and needs to be maintained again, which has certain limitations. At the same time, the current automated testing mainly focuses on black-box testing, with limited test coverage. For some complex or high-risk scenarios, manual testing or other methods need to be used for supplementation. Based on this, the inventor considered whether it is possible to perform corresponding automated operations on the front-end page without directly operating the front-end page. That is, the user inputs the URL of the front-end page to be automated and relevant automated operation information according to the prompt information on the automated operation processing platform. After receiving it, the platform first generates an executable json file based on the automated code generation rule, and then sends it to the front-end engineering project of the front-end page where the automated operation needs to be performed. After receiving the json file, the server of the front-end page performs a parsing operation on it to obtain executable operation code, thus realizing the automated operation of the front-end page. This front-end page automated operation method can avoid a series of problems caused by directly operating the front-end page, such as browser compatibility, problems caused by front-end page modification, etc. At the same time, this method is a general and configurable front-end page automated operation solution, which can realize the automated operation of any front-end page without writing a large amount of code and scripts, thus breaking through the limitations and increasing the general scope.
[0058] Figure 1 Schematic diagram of the application scenario of the front-end page automated operation method provided by this application. As Figure 1As shown, the application scenarios of the solution provided by this application include the server 100 and the server 101 of the front-end page. Among them, the server 100 is used to deploy the automated operation processing platform 1001. The server 100 is a high-performance computer with functions such as computing, storing, and processing data. Although Figure 1 only one server 100 and one server 101 of the front-end page are shown, it should be understood that there may be two or more servers 100 and servers 101 of the front-end page. The server 100 and the server 101 of the front-end page are connected through a communication network.
[0059] When the user has a need to perform an automated operation on the front-end page, they can log in to the automated operation processing platform 1001 deployed in the server 100. After the user fills in the URL of the front-end page to be automated and the relevant automated operation information in the automated operation processing platform 1001 according to the information prompt, the automated operation processing platform 1001 generates a JSON file that can execute the automated operation based on the filled information. At the same time, the automated operation processing platform 1001 establishes a communication connection with the server 101 of the front-end page and embeds the generated JSON file into the front-end engineering project of the front-end page to be automated. After the server 101 of the front-end page receives the JSON file, it parses the file to generate executable operation code, thereby performing corresponding automated operations on the front-end page.
[0060] The following uses specific embodiments to detail the technical solution of this application and how the technical solution of this application solves the above technical problems. These several specific embodiments can be combined with each other, and the same or similar concepts or processes may not be repeated in some embodiments. The embodiments of this application will be described below with reference to the accompanying drawings.
[0061] Figure 2 It is a schematic flowchart of the first embodiment of the automated operation method for the front-end page provided by this application. As Figure 2 shown, the process of the automated operation method for the front-end page may include:
[0062] S201: In response to the user's operation, obtain the URL of the front-end page that needs to perform an automated operation and the operation information of the automated operation to be performed. The operation information includes at least one control node identifier to be operated, an operation event type, an execution start time, and an execution time interval.
[0063] In this step, when the user has a need to perform automated operations on the front-end page, they can log in to the automated operation processing platform. After entering the corresponding automated operation information, click the submit operation button. The automated operation processing platform will then respond to the user's operation and obtain the URL of the front-end page that needs to perform automated operations and the operation information of the automated operations that need to be performed.
[0064] Among them, the URL of the front-end page that needs to perform automated operations can help the automated operation processing platform locate the specific front-end page, laying a foundation for subsequent automated operations on this front-end page. For example, if the front-end page for which automated operations are to be performed is the Baidu website, the user only needs to enter https: / / www.baidu.com / in the corresponding URL filling position of the automated operation processing platform. Similarly, if the front-end page for which automated operations are to be performed is the China Software Development Network, the user only needs to enter https: / / www.csdn.net / in the corresponding URL filling position of the automated operation processing platform. As long as the user enters the URL of the front-end page for which automated operations are to be performed completely into the corresponding URL filling position of the automated operation processing platform, the subsequent automated operation processing platform can establish a communication connection with the front-end page corresponding to this URL through communication technology.
[0065] The operation information of the automated operations that need to be performed includes at least one control node identifier to be operated, operation event type, execution start time, and execution time interval, etc. Among them, the control node identifier to be operated is unique, and it can locate a specific position in the front-end page where automated operations are to be performed. For example, when developing a certain front-end engineering project, the identifier set for a certain button on the front-end page corresponding to this front-end engineering project is button. If automated operations need to be performed on this button, the user only needs to enter this button identifier in the corresponding automated operation information input position of the automated operation processing platform.
[0066] The types of operation events mainly refer to what operations are performed on the controls to be operated. For example, the types of operation events include click, double - click, input, swipe, drag, etc. The execution start time refers to the time when automated operations are performed on the front - end page. For example, set to double - click a button in a certain front - end page at 14:00 on November 14, 2023. The execution time interval refers to the length of time interval between automated operations performed on the front - end page. For example, drag a button in a certain front - end page every 1 minute. Among them, the type of operation event, the execution start time, and the execution time interval are set according to actual needs when setting. At the same time, in the operation information of the automated operation to be performed, in addition to including at least one control node identifier to be operated, the type of operation event, the execution start time, and the execution time interval, it can also include other information, such as the number of times to loop through the front - end page for the automated operation to be performed and the type of operation event executed each time. At the same time, this automated processing operation platform has high scalability and can add more automated operations and functions according to requirements. For example, automated input and swipe operations can be added.
[0067] S202: Generate a JSON file for executable automated operations based on the operation information.
[0068] In this step, after the automated operation processing platform in step S201 responds to the user operation and obtains the URL of the front - end page that needs to perform automated operations and the operation information of the automated operations to be performed, the automated operation processing platform then generates a JSON file for executable automated operations based on the operation information.
[0069] Among them, the JSON file is a file of simple data structures and objects stored in the JavaScript Object Notation format, and this format is a standard data exchange format. It is mainly used to transfer data between web applications and servers. The automated operation processing platform generates a JSON file for executable automated operations based on the obtained URL of the front - end page and the operation information. This JSON file includes the URL of the front - end page that needs to perform automated operations and the automated operation information to be performed on this front - end page. Different programming languages have different ways of generating JSON files. Specifically, it can be summarized as first creating an empty JSON object, adding key - value pairs to the JSON object, then converting the JSON object into a JSON string, and finally outputting the JSON string. Among them, adding key - value pairs to the JSON object corresponds to the URL of the front - end page and the operation information, etc.
[0070] S203: After establishing a connection with the front - end page according to the URL of the front - end page, embed the JSON file into the front - end engineering project of the front - end page.
[0071] In this step, after generating a JSON file that can execute automated operations based on the operation information in step S202, the automated operation processing platform will establish a connection with the front-end page according to the URL of the front-end page and embed the JSON file into the front-end engineering project of the front-end page.
[0072] Among them, the automated operation processing platform establishes a communication connection based on the URL of the front-end page where the automated operation is to be executed input by the user. After the communication connection is established, the automated operation processing platform embeds the generated JSON file into the front-end engineering project of the front-end page.
[0073] The operation method by which the automated operation processing platform embeds the generated JSON file into the front-end engineering project of the front-end page can be manual or automated. If it is embedded manually, the user downloads the JSON file generated by the automated operation processing platform, opens the front-end engineering project of the front-end page, and stores the JSON file in the corresponding location. If it is embedded automatically, the user needs to write the specific location where the JSON file is to be embedded in the automated operation processing platform. Subsequently, after the automated operation processing platform establishes a communication connection with the front-end page, it can successfully embed the JSON file according to the specific embedding location and wait for the subsequent processing by the server of the front-end page.
[0074] S204: Obtain the JSON file from the front-end engineering project of the front-end page. The JSON file is an executable file generated by the automated operation processing platform according to the operation information of the automated operations that need to be executed according to the user configuration; the operation information includes at least one control node identifier to be operated, operation event type, execution start time, and execution time interval.
[0075] In this step, after the automated operation processing platform establishes a connection with the front-end page and embeds the JSON file into the front-end engineering project of the front-end page based on step S203, the server of the front-end page can obtain the JSON file from the front-end engineering project of the front-end page.
[0076] Among them, the JSON file obtained by the server of the front-end page is an executable file generated by the automated operation processing platform according to the operation information of the automated operations that need to be executed according to the user configuration. This operation information includes at least one control node identifier to be operated, operation event type, execution start time, and execution time interval.
[0077] The control node identifier to be operated is used to indicate the location where the automated operation is to be performed, such as a certain button on the front-end page or a certain input box on the front-end page. The types of operation events include click, input, swipe, drag, etc., which can be determined according to actual requirements. The execution start time is used to indicate when the automated operation is to be executed, and this time can be input as needed on the automated operation processing platform. The execution time interval is used to describe the time interval between each execution of the automated operation. For example, click on a certain button on the front-end page every 5 minutes, or input to a certain input box on the front-end page every 24 hours. The specific execution time interval can be input on the automated operation processing platform according to actual requirements.
[0078] S205: Parse the json file to obtain the executable operation code.
[0079] In this step, after the server of the front-end page obtains the json file from the front-end engineering project of the front-end page based on step S204, it performs a parsing operation on the json file to obtain the executable operation code.
[0080] Among them, the steps for the server of the front-end page to perform a parsing operation on the json file are to first read the json data from the json file, and then convert the json text data into the data structure inside the programming language. In most programming languages, there are built-in json parsing libraries or modules that can be used to parse json data. The parsed json data is represented as the data structure of the programming language, and the data can be accessed and operated through object attributes, dictionary key values, array indices, etc.
[0081] Based on the server of the front-end page performing a parsing operation on the json file, the executable operation code can be obtained.
[0082] S206: Perform corresponding automated operations on the front-end page according to the executable operation code.
[0083] In this step, based on step S205, the server of the front-end page parses the json file to obtain the executable operation code, and then the server of the front-end page performs corresponding automated operations on the front-end page according to the executable operation code.
[0084] Among them, the executable operation code is obtained based on the parsing of the json file and includes information such as the automated operation to be performed. Based on the executable operation code, the server of the front-end page runs the operation code to perform corresponding automated operations on the front-end page.
[0085] The automated operation method for the front-end page provided by this application mainly describes the process of how the automated operation platform performs automated operations on the corresponding front-end page based on user requirements. After the automated operation platform receives the front-end page URL and relevant automated operation information input by the user, it generates an executable json file, and after establishing a connection with the server of the front-end page, embeds the json file into the front-end engineering project corresponding to the front-end page. This operation can reduce the amount of code and scripts written by users and improve the efficiency of automated operations. The server of the front-end page parses the json file to obtain executable operation code and performs corresponding automated operations on the front-end page. This can perform automated operations on the front-end page without directly operating on the front-end page, avoiding a series of problems caused by directly operating on the front-end page, such as browser compatibility and problems caused by modifying the front-end page, improving development efficiency, and increasing the general scope of automated operations.
[0086] Figure 3 This is a schematic flowchart of the second embodiment of the automated operation method for the front-end page provided by this application. On the basis of the above embodiment, as Figure 3 shown, the process of the automated operation method for the front-end page may include:
[0087] S301: According to the URL of the front-end page, obtain the windows object of the front-end page, and add an event listening operation of postMessage to the windows object to establish a connection with the front-end page.
[0088] In this step, after the user inputs the URL of the front-end page to be automated and relevant information about the automated operation on the automated operation platform, the automated operation processing platform needs to perform automated operations on the corresponding front-end page according to the user's requirements. Before performing the automated operation, the automated operation processing platform needs to establish a communication connection with the front-end page on which the automated operation is to be performed. The specific way to establish the communication connection is that the automated operation processing platform obtains the windows object of the front-end page according to the URL of the front-end page, and adds an event listening operation of postMessage to the windows object, so as to establish a connection with the front-end page.
[0089] Among them, the window object of the front-end page represents the window opened by the browser. Besides being the global object of client-side JavaScript, it also implements all the global properties and methods defined by core JavaScript. In the browser environment, the window object is the global object in JavaScript. It represents the entire browser window or tab page. It provides properties and methods related to the browser window and document, as well as the ability to access other objects and functions defined in the global scope. At the same time, the window object is the entry point of the application programming interface provided by the browser. Through it, various functions and features of the browser can be accessed. The browser engine is responsible for implementing and managing the window object and providing access to and operations on it when executing JavaScript code.
[0090] postMessage is an application programming interface introduced in HTML5. The postMessage method allows scripts from different origins to communicate effectively asynchronously. It can achieve cross-text documents, multi-window, and cross-domain message passing, and is mostly used for data communication between windows. Since the URL of the automated operation processing platform and the URL of the front-end page where the automated operation is to be executed are of different origins. The same origin means the same protocol, domain name or IP, and port number. Browsers have the same-origin restriction. Scripts with the same origin can communicate with each other, and generally, scripts from different origins (cross-origin) are prohibited from communicating with each other. Therefore, the automated operation processing platform uses postMessage to provide a controlled mechanism to circumvent this restriction. Adding an event listener operation of postMessage to the window object can achieve the communication connection between the automated processing operation platform and the front-end page, and at the same time support data transmission between the automated processing operation platform and the front-end engineering project where the front-end page is located.
[0091] The automated operation method for the front-end page provided by this application mainly involves the process of establishing a communication connection between the automated operation processing platform and the front-end page. The automated processing operation platform obtains the window object of the front-end page based on the URL of the front-end page, and adds an event listener operation of postMessage to the window object, thereby achieving a connection with the front-end page. This way of establishing a communication connection allows scripts from different origins to communicate asynchronously in a limited way, and can achieve cross-text documents, multi-window, and cross-domain message passing. At the same time, the window object of the front-end page's window executes the event listener addition operation of postMessage, which can also be implemented in other browsers. It has the characteristics of high execution efficiency, low resource consumption, and compatibility with the vast majority of browsers and web-side page applications in the market, thus helping to increase the generality of front-end page automated operations.
[0092] Figure 4 This is a schematic flowchart of the third embodiment of the automated operation method for the front-end page provided by this application. Based on any of the above embodiments, as Figure 4 shown, the process of the automated operation method for the front-end page may include:
[0093] S401: After obtaining the end of the automated operation to be executed by listening to the postMessage event, push an operation end prompt message to the user.
[0094] In this step, after the server of the front-end page parses the json file to generate executable operation code, based on the executable operation code, corresponding automated operations are performed on the front-end page. After obtaining the end of the automated operation to be executed by listening to the postMessage event, the automated operation processing platform pushes an operation end prompt message to the user.
[0095] Among them, the addition operation of the postMessage event listening can maintain the communication between the automated operation processing platform and the server of the front-end page in real time, and at the same time can monitor the process of the front-end page executing automated operations. After the automated operation to be executed by the front-end page is completed, the postMessage event can be listened and obtained, and at this time, it triggers the automated operation processing platform to push an operation end prompt message to the user. The operation end prompt message can be to pop up a message box on the automated operation processing platform, with the content that your automated operation has been completely ended. The specific notification method can be set during the development of the automated operation processing platform.
[0096] The automated operation method for the front-end page provided by this application mainly involves the process of pushing an operation end prompt message to the user after all the automated operations are completed. The automated operation processing platform establishes a communication channel with the front-end page through the postMessage technology and can listen to messages from the front-end page. When it is obtained by listening to the postMessage event that the automated operation to be executed is completed, the automated operation processing platform pushes an operation end prompt message to the user. This kind of operation can listen to the messages of the front-end page in real time, has high stability and reliability, and at the same time, it can feedback the progress of the front-end page executing automated operations to the user in real time, thereby improving the user experience and user satisfaction.
[0097] Figure 5 This is a flowchart of the automated operation method for the front-end page provided by this application. As Figure 5 shown, the specific process includes:
[0098] S501: The automated operation processing platform configures the information that needs to be automated.
[0099] S502: Page automation operation configuration information.
[0100] S503: The automation operation processing platform reads the configured information.
[0101] S504: Bind event listening events to the windows object of the front-end page.
[0102] S505: The front-end page starts to execute automation operations.
[0103] S506: The front-end page automation operation ends, and a notification is sent or the operation is looped.
[0104] Among them, the automation operation method for the front-end page provided by this application mainly uses the postMessage technology as the main technical implementation method. By using the postMessage technology for message passing between the front-end page and the automation operation processing platform, the automation operation of any front-end page can be realized. Specifically, the first step is to perform basic configuration of information such as the page address on the configuration platform. The second step is to input the information of the automation operation to be executed step by step, such as the dom node id of the button to be clicked and the event type (single click, double click). The third step is to save the automation operation record and start the automation operation processing platform. The automation operation processing platform will, according to the configuration, obtain the windows object of the front-end page and add postMessage event listening to it according to the configuration file. The automation operation processing platform will send operation instructions of postMessage according to the configuration file, and immediately execute the automation operation after the operation is completed.
[0105] Figure 6 This is the flowchart of the fourth embodiment of the automation operation method for the front-end page provided by this application. On the basis of any of the above embodiments, as Figure 6 shown, the process of the automation operation method for the front-end page may include:
[0106] S601: The automation operation processing platform is pre-configured with rules for generating automation operation codes.
[0107] In this step, after the automation operation processing platform responds to the user's operation and obtains the website address of the front-end page that needs to execute the automation operation and the operation information of the automation operation to be executed, the automation operation processing platform is pre-configured with rules for generating automation operation codes.
[0108] Among them, the generation rules of automated operation code are an important part of software development. It can help developers improve work efficiency, reduce error rates, and achieve rapid code deployment and automated testing. The generation rules of automated operation code can specifically refer to the components of program code and also include the call relationships between components. For example, the required program code components include view containers, basic content, form components, navigation components, drawing components, etc. The call relationships between components include single-call relationships, two-way call relationships, recursive call relationships, event-driven call relationships, etc. How to configure specifically needs to be determined according to the actual system requirements and design specifications.
[0109] S602: Generate executable operation code according to the operation information and generation rules.
[0110] In this step, based on the generation rules for generating automated operation code pre-configured in the automated operation processing platform in step S601, after the automated operation processing platform obtains the operation information of the automated operation input by the user, it combines the generation rules to generate executable operation code.
[0111] Among them, after the user inputs the operation information of the automated operation to be executed on the front-end page provided by the automated operation processing platform, the back-end of the automated operation processing platform generates executable operation code according to the pre-configured automated operation code generation rules. Executable operation code refers to a set of code that can be loaded and executed by the operating system in a computer. This set of code is mainly used to indicate which automated operations to perform on which position of the target front-end page. For example, the front-end page for the automated operation to be executed is the Taobao page, and the automated operation to be executed is to continuously click on a certain product on the Taobao home page. After the user inputs based on the automated operation requirements at the corresponding position in the automated operation processing platform, the automated operation processing platform combines the information of the automated operation with the generation rules to generate executable operation code containing the automated operation information.
[0112] S603: Generate a JSON file for the executable automated operation according to the executable operation code.
[0113] In this step, based on step S601, after the automated operation processing platform generates executable operation code according to the operation information and generation rules, the automated operation processing platform will further generate an executable JSON file for the automated operation according to the executable operation code.
[0114] Among them, the automated operation processing platform generates a JSON file for the executable automated operation according to the programming language applied. This JSON file is a lightweight data exchange format mainly composed of key-value pairs and supports nesting. At the same time, this JSON file must be saved with the extension.json, both the keys and values must use double quotes and cannot use single quotes, and strings must be surrounded by double quotes. Subsequently, this JSON file will be embedded in the front-end engineering project of the front-end page to be automated for performing relevant automated operations.
[0115] The automated operation method for the front-end page provided by this application mainly describes the process of generating executable code from automated operation information according to the rule for generating automated operation code pre-configured in the automated operation processing platform. Based on the rule for generating automated operation code pre-configured in the automated operation processing platform, after the user inputs relevant information in the automated operation processing platform, the automated operation processing platform can fill the information filled in by the user into the corresponding code vacancies to generate the corresponding executable operation code, without the user having to do it manually. The whole process is automated by the automated operation processing platform, thus enhancing the user experience and improving the efficiency of automated operations. At the same time, the automated operation processing platform generates an executable JSON file according to the executable operation code for subsequent embedding into the corresponding front-end engineering project of the front-end page to perform the corresponding automated operation, further enhancing the efficiency and accuracy of automated operations.
[0116] Figure 7 It is a schematic flowchart of the fifth embodiment of the automated operation method for the front-end page provided by this application. On the basis of any of the above embodiments, as Figure 7 shown, by parsing the JSON file, executable operation code is obtained. The process of this automated operation method for the front-end page may include:
[0117] S701: Parse the JSON file through the eval function to obtain the executable operation code.
[0118] In this step, after the server side of the front-end page receives the JSON file sent by the automated operation processing platform, it is necessary to parse the JSON file through the eval function to obtain the executable operation code, so as to perform automated operations on the corresponding positions of the corresponding front-end page.
[0119] Among them, the eval function is a built-in function in Python. The function is used to convert a string into a Python statement and then execute the converted statement. The parameter of the eval function is a string. If the string represents an expression, the eval function calculates the expression. If the parameter represents one or more JavaScript statements, the eva function evaluates the statements. The principle of the eval function is to treat the string as code. Inside it, it will first analyze the string, then parse it and execute it, and finally parse the string back to a JavaScript value, rather than the string itself.
[0120] The server side of the front-end page parses the json file according to the eval function. After obtaining the executable operation code, it starts to perform automated operations on the corresponding position of the front-end page. The specific operation process is determined according to the executable operation code. The whole process is automated and does not require manual intervention.
[0121] The automated operation method for the front-end page provided by this application mainly involves how to obtain the executable operation code based on the json file. The server side of the front-end page embeds the json file based on the automated operation processing platform and applies the eval function to parse it, then the corresponding executable operation code can be obtained. After obtaining the executable operation code, the server side of the front-end page immediately performs automated operations. The whole process is an automated process, thus saving the time of automated operations and improving the efficiency of automated operations.
[0122] Figure 8 It is a schematic structural diagram of the first embodiment of the automated operation device for the front-end page provided by this application. As Figure 8 shown, the automated operation device 800 for the front-end page includes:
[0123] An acquisition module 801, configured to obtain the website address of the front-end page that needs to perform automated operations and the operation information of the automated operations that need to be performed in response to the user's operation. The operation information includes at least one control node identifier to be operated, an operation event type, an execution start time, and an execution time interval;
[0124] A processing module 802, configured to generate a json file for performing automated operations based on the operation information;
[0125] The processing module 802 is further configured to embed the json file into the front-end engineering project of the front-end page after establishing a connection with the front-end page according to the website address of the front-end page.
[0126] Optionally, the acquisition module 801 is further configured to:
[0127] According to the URL of the front-end page, obtain the window object of the front-end page, and add an event listener for postMessage to the window object to achieve connection with the front-end page.
[0128] Optionally, the processing module 802 is further configured to:
[0129] The generation rules for generating automated operation codes are pre-configured in the automated operation processing platform.
[0130] Optionally, the processing module 802 is further configured to:
[0131] Generate an executable operation code according to the operation information and the generation rules;
[0132] Generate a JSON file for executable automated operations according to the executable operation code.
[0133] The automated operation device for the front-end page provided in the foregoing embodiments can be used to execute the automated operation method for the front-end page in any of the foregoing method embodiments. The implementation principles and technical effects are similar. This automated operation device for the front-end page does not require writing a large amount of code and scripts, can quickly construct automated operation content, and has strong versatility.
[0134] Figure 9 This is a schematic structural diagram of Embodiment 2 of the automated operation device for the front-end page provided by this application. As Figure 9 shown, the automated operation device 800 for the front-end page further includes:
[0135] A sending module 803, configured to push an operation end prompt message to the user after obtaining that the automated operation to be executed has ended through postMessage event listening.
[0136] The automated operation device for the front-end page provided in this embodiment can be used to execute the automated operation method for the front-end page in any of the foregoing method embodiments. The implementation principles and technical effects are similar, and will not be elaborated here.
[0137] Figure 10 This is a schematic structural diagram of Embodiment 3 of the automated operation device for the front-end page provided by this application. As Figure 10 shown, the automated operation device 1000 for the front-end page includes:
[0138] An obtaining module 1001, configured to obtain a JSON file from the front-end engineering project of the front-end page. The JSON file is an executable file generated by the automated operation processing platform according to the operation information of the automated operation to be executed as configured by the user; the operation information includes at least one control node identifier to be operated, an operation event type, an execution start time, and an execution time interval;
[0139] A processing module 1002 is configured to parse a json file to obtain executable operation codes.
[0140] The processing module 1002 is further configured to perform corresponding automated operations on the front-end page according to the executable operation codes.
[0141] Optionally, the processing module 1002 is further configured to parse the json file through the eval function to obtain executable operation codes.
[0142] The automated operation device for the front-end page provided in this embodiment can be used to execute the automated operation method for the front-end page in any of the foregoing method embodiments. The implementation principles and technical effects are similar and will not be elaborated here.
[0143] Figure 11 It is a schematic structural diagram of an electronic device for automated operation of a front-end page provided in this application. As Figure 11 shown, the electronic device may specifically include a receiver 1100, a transmitter 1101, a processor 1102, and a memory 1103. Among them, the receiver 1100 and the transmitter 1101 are used to implement data transmission between the electronic device and the server of the front-end page. The memory 1103 stores computer execution instructions. The processor 1102 executes the computer execution instructions stored in the memory 1103 to implement the automated operation method for the front-end page in the foregoing embodiment.
[0144] This embodiment provides a computer-readable storage medium storing computer execution instructions, which are used to implement the automated operation method for the front-end page in the foregoing embodiment when executed by a processor.
[0145] This application embodiment also provides a computer program product, including a computer program, which implements the automated operation method for the front-end page provided in any one of the foregoing embodiments when executed by a processor.
[0146] It should be noted that for the foregoing method embodiments, for the sake of simple description, they are all expressed as a series of action combinations. However, those skilled in the art should know that this application is not limited by the described action sequence, because according to this application, certain steps can be performed in other sequences or simultaneously. Secondly, those skilled in the art should also know that the embodiments described in the specification are all optional embodiments, and the actions and modules involved are not necessarily essential to this application.
[0147] Further, it should be noted that although the steps in the flowchart are shown sequentially according to the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless there is a clear indication in this document, there is no strict order restriction for the execution of these steps, and these steps can be executed in other orders. Moreover, at least a part of the steps in the flowchart may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily executed at the same time, but can be executed at different times. The execution order of these sub-steps or stages is not necessarily sequential either, but can be executed alternately or in turn with at least a part of other steps or sub-steps or stages of other steps.
[0148] It should be understood that the above device embodiments are illustrative only, and the devices of the present application can also be implemented in other ways. For example, the division of units / modules in the above embodiments is only a logical function division, and there can be other division methods in actual implementation. For example, multiple units, modules or components can be combined, or can be integrated into another system, or some features can be ignored or not executed.
[0149] In addition, without special instructions, in each embodiment of the present application, each functional unit / module can be integrated in one unit / module, or each unit / module can exist physically alone, or two or more units / modules can be integrated together. The above integrated unit / module can be implemented in the form of hardware or in the form of a software program module.
[0150] When the integrated unit / module is implemented in the form of hardware, the hardware can be a digital circuit, an analog circuit, etc. The physical implementation of the hardware structure includes but is not limited to transistors, memristors, etc. Without special instructions, the processor can be any suitable hardware processor, such as CPU, GPU, FPGA, DSP, and ASIC, etc. Without special instructions, the storage unit can be any suitable magnetic storage medium or magneto-optical storage medium, such as resistive random access memory RRAM (Resistive Random Access Memory), dynamic random access memory DRAM (Dynamic Random Access Memory), static random access memory SRAM (Static Random-Access Memory), enhanced dynamic random access memory EDRAM (Enhanced Dynamic Random Access Memory), high-bandwidth memory HBM (High-Bandwidth Memory), hybrid memory cube HMC (Hybrid Memory Cube), etc.
[0151] When the integrated unit / module is implemented in the form of a software program module and sold or used as an independent product, it can be stored in a computer-readable memory. Based on such an understanding, the technical solution of the present application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a memory and includes several instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods in various embodiments of the present application. And the aforementioned memory includes: various media such as USB flash drives, read-only memories (ROM, Read-Only Memory), random access memories (RAM, Random Access Memory), mobile hard disks, magnetic disks, or optical discs that can store program codes.
[0152] In the above embodiments, the descriptions of the various embodiments have their own emphases. For the parts not detailed in a certain embodiment, reference can be made to the relevant descriptions of other embodiments. The technical features of the above embodiments can be combined arbitrarily. For the sake of brevity of description, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, it should be considered as within the scope described in this specification.
[0153] Those skilled in the art will readily think of other implementation manners of the present application after considering the specification and practicing the invention disclosed herein. The present application is intended to cover any variations, uses, or adaptations of the present application, which follow the general principles of the present application and include common general knowledge or conventional technical means in the technical field not disclosed in the present application. The specification and the embodiments are only regarded as exemplary, and the true scope and spirit of the present application are pointed out by the following claims.
[0154] It should be understood that the present application is not limited to the exact structure already described and shown in the drawings, and various modifications and changes can be made without departing from its scope. The scope of the present application is only limited by the appended claims.
Claims
1. An automated operation method for a front-end page, characterized in that, applied to an automated operation processing platform, the method includes: Responding to a user's operation, obtaining the URL of the front-end page that needs to perform automated operations and the operation information of the automated operations that need to be performed. The operation information includes at least one control node identifier to be operated, an operation event type, an execution start time, and an execution time interval; Based on the operation information, generate an executable json file for automated operations; After establishing a connection with the front-end page according to the URL of the front-end page, embed the json file into the front-end engineering project of the front-end page.
2. The method according to claim 1, characterized in that, the method further includes: According to the URL of the front-end page, obtain the windows object of the front-end page, and add an event listener operation of postMessage to the windows object to implement a connection with the front-end page.
3. The method according to claim 1 or 2, characterized in that, the method further includes: After obtaining the end of the automated operation to be performed through the postMessage event listener, push an operation end prompt message to the user.
4. The method according to claim 1 or 2, characterized in that, The automated operation processing platform is pre-configured with a generation rule for generating automated operation code; Correspondingly, the generating an executable json file for automated operations based on the operation information includes: Generating executable operation code according to the operation information and the generation rule; Generating the json file for executable automated operations according to the executable operation code.
5. An automated operation method for a front-end page, characterized in that, applied to the server side of the front-end page, the method includes: Obtain a json file from the front-end engineering project of the front-end page. The json file is an executable file generated by the automated operation processing platform according to the operation information of the automated operations that need to be performed as configured by the user. The operation information includes at least one control node identifier to be operated, an operation event type, an execution start time, and an execution time interval; Parse the json file to obtain executable operation code; Perform corresponding automated operations on the front-end page according to the executable operation code.
6. The method according to claim 5, characterized in that, the parsing the json file to obtain executable operation code includes: Parsing the json file through the eval function to obtain the executable operation code.
7. An automated operation device for a front-end page, characterized in that, includes: An acquisition module, configured to respond to a user's operation, obtain the URL of the front-end page that needs to perform automated operations and the operation information of the automated operations that need to be performed. The operation information includes at least one control node identifier to be operated, an operation event type, an execution start time, and an execution time interval; A processing module, configured to generate a JSON file for performing automated operations based on the operation information; The processing module is further configured to embed the JSON file into the front-end engineering project of the front-end page after establishing a connection with the front-end page according to the URL of the front-end page.
8. An automated operation device for a front-end page, characterized in that it includes: An acquisition module, configured to acquire a JSON file from the front-end engineering project of the front-end page, where the JSON file is an executable file generated by an automated operation processing platform according to operation information of automated operations that need to be performed according to user configurations; the operation information includes at least one control node identifier to be operated, an operation event type, an execution start time, and an execution time interval; A processing module, configured to parse the JSON file to obtain executable operation codes; The processing module is further configured to perform corresponding automated operations on the front-end page according to the executable operation codes.
9. An electronic device for automated operations of a front-end page, characterized in that it includes: A processor, and a memory communicatively connected to the processor; The memory stores computer-executable instructions; The processor executes the computer-executable instructions stored in the memory to implement the method according to any one of claims 1 to 6.
10. A computer-readable storage medium, characterized in that the computer-readable storage medium stores computer-executable instructions, and when the computer-executable instructions are executed by a processor, they are used to implement the method according to any one of claims 1 to 6.