A webpage automation method based on multi-agent cooperation

Abstract

The application discloses a webpage automation method based on multi-agent cooperation, and belongs to the technical field of webpage automation optimization and front-end engineering automation. The method receives a webpage optimization task by a workflow scheduling gateway, creates a Shadow isolated execution environment, collects webpage structures and block screenshots through browser automation, scans front-end source code and analyzes routes, components, styles and dependency relationships, and generates project context files; a design execution module generates a design scheme containing visual audit, theme decision and whitelist according to design constraints, a code execution module modifies source code according to the whitelist and performs construction verification, and a test module checks construction products and outputs a report. The method sets design audit and code audit nodes, and realizes failure rollback in combination with Git snapshots, can improve webpage optimization efficiency, reduce automatic modification risks, and is suitable for automatic optimization and reconstruction of enterprise official websites, portal websites and front-end pages.

Description

Technical Field

[0001] This invention belongs to the fields of webpage automation optimization, workflow scheduling, front-end engineering automation, and multi-agent collaborative execution technology. Specifically, it relates to a method that uses a workflow gateway to uniformly schedule design execution modules, code execution modules, and testing and verification modules to automatically collect data from a target webpage, analyze its source code, generate optimization solutions, modify code, build and verify the results, conduct manual review, and output the final result. This method can be applied to automated visual optimization and engineering transformation scenarios for corporate websites, product showcases, data portals, government service sites, and other front-end webpage systems. Background Technology

[0002] Existing enterprise websites and portal systems typically consist of a large number of front-end pages, routes, components, style files, and static resources. As the number of pages increases and business iterations become more frequent, traditional manual optimization methods require developers to first browse the pages, then find the corresponding source code files, then manually modify the styles and perform build verification. This process is cumbersome and prone to overlooking component dependencies.

[0003] In web page visual optimization scenarios, designers often offer modification suggestions based on screenshots or subjective experience, and developers then locate the code based on the descriptions. Due to the lack of a unified mechanism for web page structure collection, source code mapping, and context generation, information gaps easily occur between the design scheme and the source code implementation, leading to problems such as unclear scope of modifications, inconsistent style variables, and disjointed styles between components.

[0004] Furthermore, most existing automated code generation tools only focus on generating code content, lacking independent execution environments, version snapshots, build verification, and manual review mechanisms. If automated modifications cause build failures or page anomalies, manual location and recovery are required, increasing risk and reducing the reliability of automated optimization processes.

[0005] Therefore, there is an urgent need for a multi-stage automated method for web page optimization scenarios, which integrates web page collection, source code analysis, optimization scheme generation, code modification, build verification, human review and rollback control into a complete closed loop, so that web page optimization can be transformed from discrete manual operations into an executable, traceable and recoverable workflow. Summary of the Invention

[0006] 1. Purpose of the invention To address the problems existing in current webpage optimization processes, such as difficulties in mapping page structure to source code, inconsistencies between design and development information, lack of security boundaries in automatic modification, high recovery costs after build failures, and the disconnect between manual review and automated processes, this invention proposes a webpage automation method based on multi-agent collaboration. This method, with a workflow scheduling gateway at its core, integrates webpage structure acquisition, source code mapping, project context generation, design scheme generation, automatic code modification, build verification, manual review, and rollback mechanisms into a unified task pipeline, thereby improving webpage optimization efficiency and result reliability.

[0007] 2. Technical Solution The present invention adopts the following technical solution: Step 1: Task Reception and Isolation Environment Setup: The workflow scheduling gateway receives external task requests, which include a project identifier, isolation directory, optimization target, and cache refresh flag. The system locates the source web application based on the project identifier, copies it to the Shadow execution environment, and initializes the Git repository and dependency environment.

[0008] Step 2: Automatic webpage content collection: Access the target website's homepage, detail page, product page, or other configured routes through browser automation tools, extract page titles, block structures, title text, image resources, body previews, and DOM block attributes, and save the results as a webpage content structure file.

[0009] Step 3: Visual Screenshot Audit: The system takes full-page screenshots and segmented screenshots of the homepage and key blocks, generating a visual audit file that can be used as a reference for the design and execution modules, to help determine the current theme, the style of adjacent blocks, and the scope of subsequent optimization.

[0010] Step 4: Source code structure mapping: The system scans the front-end source code directory, parses the route files, Vue page components, public components, CSS, SCSS, JS, TS files and component dependencies, identifies component style class names, import paths, text previews and background theme tags, and generates source code structure mapping files.

[0011] Step 5: Project Context Generation: The system merges the webpage content structure file with the source code structure mapping file, performs keyword matching on components based on optimization goals, and outputs a project context file. This file serves as a shared reference for the design execution module, code execution module, and test verification module.

[0012] Step 6: Design Scheme Generation: The design execution module reads the design constraint file, project context file, and task file to generate a design scheme file that includes visual audit, theme decision, whitelist file, color system, component details, and animation strategy.

[0013] Step 7: Design Review and Control: The system pauses the process after the design scheme is generated, awaiting manual review. If the review is approved, the code modification phase begins; if the review is rejected or times out, the current task is terminated.

[0014] Step 8: Automatic Code Modification and Build Verification: The code execution module only modifies source code files within the design scheme whitelist, maintaining the original text and template binding content, and performs build verification after each file modification. In case of build failure, it automatically rolls back based on the Git snapshot.

[0015] Step 9: Code Review and Testing Verification: After the code build passes, it enters the second manual review node. After the review is passed, the testing verification module performs the final build check and artifact check, and outputs the task status and verification report.

[0016] 3. Beneficial effects (1) Automatically establish the correspondence between web pages, routes, components and source code files, reducing the cost of manual searching and communication; (2) By using project context files to unify the design, coding, and test execution basis, the information gap between design intent and code implementation can be reduced; (3) Control the scope of automatic modification through whitelist and theme variable constraints to prevent unauthorized modification and style pollution; (4) Task isolation and failure rollback are achieved through the Shadow execution environment and Git snapshot mechanism, reducing the risk of automated code modification; (5) By retaining human decision-making control through manual review nodes, the automated optimization process becomes more controllable; (6) By constructing a closed loop of verification and product inspection, the optimization results are guaranteed to be operable. Detailed Implementation

[0017] Example 1: Cross-county government service integration Users submit a task via the workflow interface to "optimize the homepage banner to a dark tech style and add a scrolling animation." After receiving the task, the workflow scheduling gateway creates a Shadow execution directory, copies the production source code to this directory, and initializes the dependency environment and Git snapshot.

[0018] The system uses browser automation tools to access the website's homepage and configure routes, collecting page titles, DOM information for each section, title lists, image resources, and text previews. Simultaneously, the system generates a complete screenshot of the homepage, as well as screenshots of sections such as the banner, company profile, business, products, and news.

[0019] The source code mapping module scans the src directory, parses the route mappings in router / index.ts, and identifies the import relationships, style class names, and text previews of components such as HomeBanner.vue and HomeBusiness.vue. The system then generates a PROJECT_CONTEXT.md file, marking the components and their paths that should be prioritized for optimization.

[0020] The design execution module reads the design constraint file and PROJECT_CONTEXT.md, and outputs the DESIGN.md file, which lists the visual audit results, theme decisions, whitelisted components, CSS variables, and animation specifications. After manual review and approval, the code execution module modifies the component styles according to the whitelist and executes `npm run build`. After a successful build, the module enters the testing and verification phase, outputting the build status and result report. Example 2: Cross-city industrial supply and demand service matching In this embodiment, the design execution module explicitly defines a Scope section in DESIGN.md, listing the files that are allowed to be modified and their corresponding themes. For example, HomeBanner.vue has a dark theme, and HomeBusiness.vue has a light theme. After reading this Scope section, the code execution module only processes the whitelisted files.

[0021] When a component is marked as a light theme, the code execution module uses light background variables, light card variables, and light text variables; when a component is marked as a dark theme, the code execution module uses dark blue background variables, dark card variables, and light text variables. The system prohibits the misuse of dark background variables in light-themed components to avoid abrupt breaks in page layout.

[0022] In this way, the system transforms design constraints into automatic code execution boundaries, enabling multi-component optimization to achieve both automated efficiency and a controllable scope of modification.

[0023] Example 3: Cross-regional market supervision coordination and docking During the code execution phase, the system triggers a build verification every time a whitelisted file is modified. If the build process returns an error or fails to generate the dist / index.html build artifact, the system marks the task as failed and calls the Gitreset command to restore the snapshot before the modification.

[0024] This mechanism ensures that even if automatic modifications result in syntax errors, dependency conflicts, or style file errors, the original project directory will not be affected, and failure logs can be retained for subsequent analysis.

[0025] Example 4: Manual Review Closed-Loop Control The system has two control nodes: design review and code review. The design review node is used to confirm whether the visual scheme, whitelist scope, and theme variables in DESIGN.md meet the requirements; the code review node is used to confirm whether the built page effect meets expectations.

[0026] The review status can be controlled through a status file or the review interface. When a .design-approved or .code-approved file is detected, the system continues to the next stage; when a .design-declined or .code-declined file is detected, the system terminates or waits for reprocessing. This approach makes the automated execution process subject to human control.

Claims

1. A web page automation method based on multi-agent collaboration, comprising the steps of task reception, web page structure acquisition, source code structure mapping, project context generation, design scheme generation, automatic code modification, construction verification, and result output, characterized in that, Specifically, it includes the following steps: S1. The workflow scheduling gateway receives a webpage optimization task request. The task request includes at least a project identifier, an isolated execution directory, an optimization target description, and cache refresh parameters. Based on the project identifier, a Shadow execution environment independent of the source project is created, and a version snapshot of the Shadow execution environment is initialized. S2. Call the browser's automated data collection module to access multiple route pages of the target webpage, obtain the page title, page blocks, title tags, image resources, text previews, block heights and the number of child elements, and write the collection results into the webpage content structure file; S3. Call the source code mapping module to scan the front-end source code project corresponding to the target webpage, parse the route file, page components, public components, style files, script files, component import relationships, component usage relationships and style class names, and generate a source code structure mapping file; S4. Merge the webpage content structure file with the source code structure mapping file, perform keyword matching and priority sorting of components based on the optimization target description, and generate a project context file shared by subsequent execution modules; S5. The design execution module reads the design constraint file, project context file, and optimization task file to generate a design scheme file that includes visual audit, theme decision, file whitelist, color variables, component modification details, and animation specifications. S6. After the design scheme is generated, it enters the first manual review node. If the design is detected as passed, it proceeds to the next step. If the design is detected as rejected or timed out, the current optimization process is terminated. 2.S7. The code execution module reads the project context file and design scheme file, modifies the corresponding source code files one by one according to the file whitelist in the design scheme, and triggers build verification after each source code file is modified; If the build fails, a rollback will be performed based on the version snapshot; S8. After the code build is successful, proceed to the second manual review node. If the code is detected as passed, proceed to the test verification step. If the code is detected as rejected, stop the task and retain the rollback evidence. S9. The test and verification module executes the project build command, checks whether the build artifacts have been generated, and outputs the task status, build results, and test and verification report.

3. The web page automation method based on multi-agent collaboration according to claim 1, characterized in that, The Shadow execution environment described in step S1 is generated by copying the source web project directory. During the copying process, historical build artifacts and version directories are excluded. After the copying is completed, dependency detection or dependency installation is performed, and the Git repository is initialized for subsequent snapshots and rollbacks.

4. The web page automation method based on multi-agent collaboration according to claim 1, characterized in that, In step S2, the browser automated collection module accesses the target website route based on a headless browser and generates screenshot files for the complete homepage, Banner block, Company Profile block, Business block, Product block, and News block, respectively, for visual auditing by the subsequent design execution module.

5. The web page automation method based on multi-agent collaboration according to claim 1, characterized in that, The source code structure mapping file mentioned in step S3 includes the correspondence between route paths and page files, a list of Vue page components, a list of common components, a list of CSS / SCSS / JS / TS files, a component dependency graph, whether the components have light-colored background markers, and a preview of the text content.

6. The web page automation method based on multi-agent collaboration according to claim 1, characterized in that, In step S4, keyword matching is performed based on the similarity between the optimization target description and the component name, style class name, and text preview content, and a priority component list is generated based on the matching score.

7. The web page automation method based on multi-agent collaboration according to claim 1, characterized in that, The design scheme document mentioned in step S5 shall include at least the Visual Audit section, the Theme Decisions section, the Scope Whitelist section, the Color System section, and the Component Details section.

8. The web page automation method based on multi-agent collaboration according to claim 1, characterized in that, The design constraint file mentioned in step S5 specifies dark theme, light theme, mask transparency, prohibited background color, text contrast, and component-level theme decision rules. The design execution module generates a design scheme that can be directly executed by the code execution module based on the design constraint file.

9. The web page automation method based on multi-agent collaboration according to claim 1, characterized in that, The manual review nodes in steps S6 and S8 are implemented by detecting status files or calling the review interface within the Shadow execution environment. The status files include design pass files, design reject files, code pass files, and code reject files.

10. The web page automation method based on multi-agent collaboration according to claim 1, characterized in that, In step S7, the code execution module only allows modification of the whitelist range of the design scheme file when modifying the source code file, retains the original text content and template binding content, and selects the corresponding CSS variables according to the theme annotation.

11. The web page automation method based on multi-agent collaboration according to claim 1, characterized in that, The build verification in step S7 includes executing the web project build command, judging the build return status, checking whether the dist / index.html build artifact exists, and recording the build log; when the build verification fails, Git rollback is automatically executed, and the rollback result is marked in the task status.

12. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, it implements the web page automation method based on multi-agent collaboration as described in any one of claims 1 to 10.

13. A webpage automated optimization device based on multi-agent collaboration, comprising a processor, a memory, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the web page automation method based on multi-agent collaboration as described in any one of claims 1 to 10.