Front-end page automatic testing method and device based on artificial intelligence

Abstract

The invention discloses a front-end page automatic testing method and device based on artificial intelligence. The method comprises the steps that actual rendering data of a target front-end page are obtained through an automatic testing framework of a plurality of configured equipment parameters and network conditions, and the actual rendering data at least comprise a visual rendering image and document object model structure data; the actual rendering data is compared with preset benchmark test data, a comparison result is obtained, and comparison at least comprises visual difference analysis and content semantic analysis executed by an artificial intelligence model; and generating a test report containing difference position, difference type and difference degree information based on a comparison result.

Description

Technical Field

[0001] This invention relates to the field of automated testing technology, and more specifically, to an automated testing method and apparatus for front-end pages based on artificial intelligence. Background Technology

[0002] With the rapid development of internet technology, the complexity and update frequency of front-end pages are constantly increasing, posing numerous challenges to traditional testing methods: Visual regression testing is inefficient: Traditional pixel-based visual testing methods are too sensitive to minute changes (such as a 1-pixel offset), resulting in a large number of false alarms, requiring manual verification and thus low testing efficiency.

[0003] Low level of automation in copywriting testing: Existing testing frameworks mainly verify whether the text content matches completely, and cannot handle semantic verification in dynamic content and multilingual scenarios.

[0004] High test case maintenance costs: Frequent changes to the front-end UI cause element locators in the test scripts to become invalid, requiring manual updates and maintenance.

[0005] Insufficient cross-environment testing coverage: Traditional methods are unable to fully simulate page performance under different device, resolution, and network conditions.

[0006] Performance and experience testing are disconnected: visual testing, functional testing, and performance testing are usually conducted independently, lacking a unified analytical perspective. Summary of the Invention

[0007] To address the shortcomings of existing technologies, this invention provides an automated testing method and apparatus for front-end pages based on artificial intelligence.

[0008] According to one aspect of the present invention, an artificial intelligence-based automated testing method for front-end pages is provided, comprising: An automated testing framework with various configured device parameters and network conditions is used to obtain the actual rendering data of the target front-end page. The actual rendering data includes at least visual rendering images and document object model structure data. The actual rendered data is compared with the preset benchmark test data to obtain the comparison results. The comparison includes at least visual difference analysis and content semantic analysis performed by the artificial intelligence model. Based on the comparison results, a test report is generated that includes information on the location, type, and degree of difference.

[0009] According to another aspect of the present invention, an artificial intelligence-based automated testing device for front-end pages is provided, comprising: The first acquisition module is used to acquire the actual rendering data of the target front-end page through an automated testing framework configured with various device parameters and network conditions. The actual rendering data includes at least visual rendering images and document object model structure data. The second acquisition module is used to compare the actual rendered data with the preset benchmark test data and obtain the comparison results. The comparison includes at least visual difference analysis and content semantic analysis performed by the artificial intelligence model. The generation module is used to generate a test report based on the comparison results, which includes information on the location, type, and degree of difference.

[0010] According to another aspect of the present invention, a computer-readable storage medium is provided, the storage medium storing a computer program for performing the methods described in any of the above aspects of the present invention.

[0011] According to another aspect of the present invention, an electronic device is provided, the electronic device comprising: a processor; a memory for storing executable instructions of the processor; the processor being configured to read the executable instructions from the memory and execute the instructions to implement the method described in any of the preceding aspects of the present invention.

[0012] Therefore, this invention utilizes AI to achieve front-end testing, which can automatically compare the consistency of page style and copy with the target webpage, quickly identify differences, improve testing efficiency and accuracy, and thus ensure the quality of the front-end page and user experience. Attached Figure Description

[0013] Exemplary embodiments of the present invention can be more fully understood by referring to the following figures: Figure 1 This is a flowchart illustrating an AI-based automated testing method for front-end pages provided in an exemplary embodiment of the present invention. Figure 2 This is a schematic diagram of the structure of an AI-based automated front-end page testing device provided in an exemplary embodiment of the present invention; Figure 3 This is the structure of an electronic device provided in an exemplary embodiment of the present invention. Detailed Implementation

[0014] Hereinafter, exemplary embodiments according to the present invention will be described in detail with reference to the accompanying drawings. Obviously, the described embodiments are merely some embodiments of the present invention, and not all embodiments of the present invention; it should be understood that the present invention is not limited to the exemplary embodiments described herein.

[0015] It should be noted that, unless otherwise specifically stated, the relative arrangement, numerical expressions, and values ​​of the components and steps described in these embodiments do not limit the scope of the invention.

[0016] Those skilled in the art will understand that the terms "first," "second," etc., in the embodiments of the present invention are only used to distinguish different steps, devices, or modules, and do not represent any specific technical meaning, nor do they indicate a necessary logical order between them.

[0017] It should also be understood that in the embodiments of the present invention, "multiple" can refer to two or more, and "at least one" can refer to one, two or more.

[0018] It should also be understood that any component, data or structure mentioned in the embodiments of the present invention can generally be understood as one or more unless explicitly defined or given contrary instructions in the context.

[0019] Furthermore, the term "and / or" in this invention is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, A and B existing simultaneously, or B existing alone. Additionally, the character " / " in this invention generally indicates that the preceding and following related objects have an "or" relationship.

[0020] It should also be understood that the description of the various embodiments in this invention emphasizes the differences between the various embodiments, and the similarities or similarities can be referred to each other. For the sake of brevity, they will not be described in detail.

[0021] At the same time, it should be understood that, for ease of description, the dimensions of the various parts shown in the accompanying drawings are not drawn according to actual scale.

[0022] The following description of at least one exemplary embodiment is merely illustrative and is in no way intended to limit the invention or its application or use.

[0023] Techniques, methods, and equipment known to those skilled in the art may not be discussed in detail, but where appropriate, they should be considered part of the specification.

[0024] It should be noted that similar labels and letters in the following figures indicate similar items; therefore, once an item is defined in one figure, it does not need to be discussed further in subsequent figures.

[0025] The embodiments of this invention can be applied to electronic devices such as terminal devices, computer systems, and servers, and can operate together with a wide range of other general-purpose or special-purpose computing system environments or configurations. Well-known examples of terminal devices, computing systems, environments, and / or configurations suitable for use with electronic devices such as terminal devices, computer systems, and servers include, but are not limited to: personal computer systems, server computer systems, thin clients, thick clients, handheld or laptop devices, microprocessor-based systems, set-top boxes, programmable consumer electronics, network PCs, minicomputer systems, mainframe computer systems, and distributed cloud computing environments including any of the above systems, etc.

[0026] Electronic devices such as terminal devices, computer systems, and servers can be described in the general context of computer system executable instructions (such as program modules) executed by a computer system. Typically, program modules can include routines, programs, object programs, components, logic, data structures, etc., which perform specific tasks or implement specific abstract data types. Computer systems / servers can be implemented in distributed cloud computing environments, where tasks are executed by remote processing devices linked through communication networks. In distributed cloud computing environments, program modules can reside on local or remote computing system storage media, including storage devices.

[0027] Exemplary methods Figure 1 This is a flowchart illustrating an automated front-end page testing method based on artificial intelligence, provided in an exemplary embodiment of the present invention. This embodiment can be applied to electronic devices, such as… Figure 1 As shown, the AI-based automated testing method 100 for front-end pages includes the following steps: Step 101: Obtain the actual rendering data of the target front-end page through an automated testing framework configured with various device parameters and network conditions. The actual rendering data includes at least visual rendering images and document object model structure data. Step 102: Compare the actual rendered data with the preset benchmark test data to obtain the comparison results. The comparison includes at least visual difference analysis and content semantic analysis performed by the artificial intelligence model. Step 103: Based on the comparison results, generate a test report containing information on the location, type, and degree of difference.

[0028] Specifically, this invention aims to provide an AI-based automated testing solution for front-end pages, addressing the technical problems of traditional testing methods such as low efficiency, high maintenance costs, and incomplete coverage. It includes the following steps: S1: Multi-dimensional environment simulation and data acquisition.

[0029] Render the target front-end page using a configurable automated testing framework (such as a cluster based on Selenium Grid, Playwright, or Appium) under various preset device parameters (such as screen resolution, operating system, browser type and version) and network conditions (such as bandwidth, latency, and packet loss rate). During this process, multimodal actual rendering data is collected synchronously; this data packet includes at least: Visually rendered images: full screenshots of the page or viewport screenshots.

[0030] Document Object Model (DOM) structural data: namely, the DOM tree and its node attributes and calculated style values.

[0031] Optional additional data: network request timeline, browser performance timeline, console logs, accessibility tree, etc.

[0032] S2: Multimodal AI intelligent comparison and analysis.

[0033] The actual rendering data collected in step S1 is compared with the preset benchmark test data. This comparison is not a simple equivalence comparison, but a deep analysis performed collaboratively by a series of artificial intelligence models, mainly including: Visual difference analysis: Identify substantial UI changes and filter out non-critical differences using computer vision models.

[0034] Content semantic analysis: Verify the compliance and consistency of text content through natural language processing models.

[0035] Furthermore, the intelligent visual difference analysis module is the core solution to the high false alarm rate of traditional pixel comparison. Its optimized workflow includes: a. Feature Extraction: Using pre-trained deep convolutional neural networks (such as ResNet, VGG) or specialized UI component detection models (such as Faster R-CNN), benchmark and actual rendered images are transformed into high-dimensional feature vectors or structured layout trees. This is more robust to interference than directly comparing pixels.

[0036] b. Difference Detection and Filtering: Calculate the differences between features and introduce dynamic content filtering rules. For example, by identifying frequently changing areas in an image (such as a carousel), ignoring changes within containers marked with specific CSS class names, or using OCR technology to identify and exclude text blocks containing time or random numbers, the differences can be focused on static core UI components.

[0037] c. Difference Classification and Output: The identified differences are further classified into: layout structure differences (such as element misalignment and overlap), style attribute differences (such as color, font, and margin mismatch), and static visual element differences (such as missing or incorrect icons or logos). The output results can be precisely linked to DOM nodes.

[0038] Furthermore, a content semantic analysis module is included, designed to ensure content accuracy beyond simple string matching. Its preferred implementation includes: a. Semantic Similarity Calculation: For text that is not completely identical, semantic encoding models such as Sentence-BERT are used to convert the baseline text and the actual text into semantic vectors. Cosine similarity is then calculated to determine whether the rewritten text has substantially changed the original meaning. This is extremely effective for fine-tuning and verifying product descriptions, operation prompts, and other similar content.

[0039] b. Multi-dimensional compliance verification: * Keyword / Banned word check: Scans against the preset business thesaurus and compliance thesaurus.

[0040] * Multilingual consistency verification: Not only can the integrity of the translation be checked between the base language (such as Chinese) and the translated language (such as English and Japanese) pages, but also the consistency of key data (such as price and date).

[0041] * Format and regulatory compliance: Use regular expressions to check whether the formats of telephone numbers, price lists, etc., comply with local regulations.

[0042] Furthermore, this invention emphasizes comparisons in multiple environments to identify compatibility issues. Specifically, the implementation is as follows: Maintain a separate set of benchmark data for each important "device-network-browser" combination.

[0043] When performing the comparison, data collected under specific conditions is compared with baseline data for the corresponding environment. This can accurately identify style inconsistencies that only appear in iPhone Safari, or layout anomalies that are only triggered under weak network conditions.

[0044] At the same time, it can aggregate analysis results across environments to identify common problems.

[0045] S3: Intelligent adjudication and report generation.

[0046] Based on the comparison results from step S2, a structured intelligent test report is generated. This report not only indicates whether differences exist, but more importantly, it provides actionable insights, including: the precise location of the differences on the page (in the form of coordinates or element highlights), the type of differences (such as visual layout defects, style errors, semantic violations, etc.), the severity of the differences (such as severe, warning, pass), and root cause inferences and remedial suggestions based on historical data.

[0047] Furthermore, the test script self-healing mechanism is a key innovation that reduces maintenance costs. When a test fails and the root cause is determined to be a page element positioning failure, the self-healing mechanism is activated: a. Failure Analysis: Analyze the error log to locate the failed element locator and the test step in which it occurred.

[0048] b. Intelligent relocation: Using the features of the original invalid element in the baseline DOM and visual image (such as neighboring unique text, visual features, and relative path XPath in the DOM tree) as "clues", similarity search and matching are performed in the changed actual DOM.

[0049] c. Generate and validate new strategies: Generate more robust targeting strategies for newly matched elements (e.g., prioritizing the use of the data-testid attribute, or generating accessibility selectors based on roles and names). This testing step is then automatically executed in a sandbox environment to validate the effectiveness of the new locator.

[0050] d. Script Update: After successful verification, the test script in the version control system will be updated automatically or upon confirmation.

[0051] In one specific embodiment of the present invention, an automated front-end page testing system integrating visual analysis, semantic verification, and self-healing capabilities is provided. Through multi-layered AI analysis technology, it achieves efficient, accurate, and intelligent front-end quality assurance. Core innovation points: Intelligent visual difference analysis: Using computer vision technology, it can identify substantial UI changes and automatically filter out non-critical differences.

[0052] Semantic-level copy verification: Combining NLP technology to achieve semantic similarity comparison and multilingual consistency check.

[0053] Test script self-healing mechanism: When UI changes cause test failures, the system can automatically repair the element locator.

[0054] Environmental adaptive testing: Automatically simulates multi-dimensional test environments and establishes performance baseline monitoring.

[0055] Implementation steps: 1. Define the testing objectives: Clearly define the webpage to be tested and its specific requirements for style and text. This includes: page layout, colors and fonts, text content, and interactive functions.

[0056] 2. Data Collection: Through an automated testing framework configured with various device parameters and network conditions, the style and text of the target webpage are collected. Data can also be obtained through the following methods: Web scraping: Using tools (such as Beautiful Soup, Scrapy) to scrape the HTML and CSS of the target webpage.

[0057] Developer tools: Use your browser's developer tools (F12) to view styles and structure.

[0058] 3. Design test cases: Design specific test cases to ensure coverage of all important styles and text. This may include: Copy consistency test (whether the text content is the same) Style consistency test (whether CSS styles match) Layout consistency test (whether the positions of elements are consistent) 4. Build a testing environment: Use automated testing frameworks (such as Selenium, Cypress, Puppeteer, etc.) and AI tools to implement front-end testing.

[0059] 5. Use AI tools for visual testing To perform style comparison using AI visual testing tools (such as Applitools or Percy), follow these steps: a. Installation and Configuration Choose a suitable visual testing tool.

[0060] Install and configure the tool according to its documentation.

[0061] b. Write test scripts Write automated test scripts to load the webpage to be tested and the target webpage.

[0062] c. Visual comparison Use AI visual testing tools for image comparison. For example, use the Applitools API for screenshot comparison. The following sections will continue with steps on how to use AI tools for front-end testing, specifically how to use visual testing tools to compare screenshots.

[0063] 5. Using AI tools for visual testing (continued) c. Visual comparison (continued) To perform visual comparisons using Applitools, further configuration and usage of its API are required. Below is a complete example demonstrating how to perform visual testing using Applitools: Python from selenium import webdriver from applitools.selenium import Eyes, Target # Initialize Selenium WebDriver driver = webdriver.Chrome() # Initialize Applitools Eyes eyes = Eyes() eyes.api_key = 'YOUR_API_KEY' # Replace with the Applitools API key # Start Test eyes.open(driver, "My Application", "Test Page Comparison", {'width':800, 'height': 600}) # Open the page to be tested driver.get("http: / / your-test-page.com") # Visual comparison eyes.check("Test Page", Target.window().fully()) # Open the target page for comparison driver.get("http: / / your-target-page.com") # Visual comparison eyes.check("Target Page", Target.window().fully()) # End of test results = eyes.close() print("Test results: ", results) Close WebDriver driver.quit() In this example, Selenium WebDriver and Applitools Eyes are initialized first. The `eyes.check()` method can be called for each page to compare the page to be tested with the target page.

[0064] 6. Run the test Run the test script you wrote. Ensure your environment is configured correctly and all dependencies are installed. You can use the command line or an integrated development environment (IDE) to execute the script.

[0065] 7. Analysis Results After the test is complete, you will see the results. These tools typically provide comparison reports showing the differences between the two pages. You can then analyze these results. Determine which parts match and which parts differ.

[0066] If there are any discrepancies, make adjustments as needed to ensure that the front-end page is consistent with the target webpage.

[0067] 8. Continuous Integration Integrating such automated tests into the continuous integration (CI) process allows you to use CI tools such as Jenkins, GitHub Actions, Travis CI, etc., to run them regularly.

[0068] Therefore, this invention utilizes AI to achieve front-end testing, which can automatically compare the consistency of page style and copy with the target webpage, quickly identify differences, improve testing efficiency and accuracy, and thus ensure the quality of the front-end page and user experience.

[0069] Exemplary device Figure 2 This is a schematic diagram of the structure of an AI-based automated front-end page testing device provided in an exemplary embodiment of the present invention. Figure 2 As shown, the device 200 includes: The first acquisition module 210 is used to acquire the actual rendering data of the target front-end page through an automated testing framework configured with multiple device parameters and network conditions. The actual rendering data includes at least visual rendering images and document object model structure data. The second acquisition module 220 is used to compare the actual rendering data with the preset benchmark test data and obtain the comparison results. The comparison includes at least visual difference analysis and content semantic analysis performed by an artificial intelligence model. The generation module 230 is used to generate a test report containing information on the location, type, and degree of difference based on the comparison results.

[0070] Exemplary electronic devices Figure 3 This is the structure of an electronic device provided in an exemplary embodiment of the present invention. For example... Figure 3 As shown, the electronic device 30 includes one or more processors 31 and memory 32.

[0071] The processor 31 may be a central processing unit (CPU) or other form of processing unit with data processing and / or instruction execution capabilities, and may control other components in the electronic device to perform desired functions.

[0072] The memory 32 may include one or more computer program products, which may include various forms of computer-readable storage media, such as volatile memory and / or non-volatile memory. The volatile memory may include, for example, random access memory (RAM) and / or cache memory. The non-volatile memory may include, for example, read-only memory (ROM), hard disk, flash memory, etc. One or more computer program instructions may be stored on the computer-readable storage medium, and the processor 31 may execute the program instructions to implement the methods of the software programs of the various embodiments of the present invention described above, and / or other desired functions. In one example, the electronic device may also include an input device 33 and an output device 34, these components being interconnected via a bus system and / or other forms of connection mechanisms (not shown).

[0073] In addition, the input device 33 may also include, for example, a keyboard, a mouse, etc.

[0074] The output device 34 can output various information to the outside. The output device 34 may include, for example, a display, a speaker, a printer, and a communication network and its connected remote output devices, etc.

[0075] Of course, for the sake of simplicity, Figure 3 Only some of the components of the electronic device relevant to the present invention are shown, omitting components such as buses, input / output interfaces, etc. In addition, the electronic device may include any other suitable components depending on the specific application.

[0076] Exemplary computer program products and computer-readable storage media In addition to the methods and apparatus described above, embodiments of the present invention may also be computer program products, which include computer program instructions that, when executed by a processor, cause the processor to perform the steps of the methods according to various embodiments of the present invention described in the "Exemplary Methods" section above.

[0077] The computer program product can be written in any combination of one or more programming languages ​​to perform the operations of the embodiments of the present invention. The programming languages ​​include object-oriented programming languages ​​such as Java and C++, as well as conventional procedural programming languages ​​such as C or similar languages. The program code can be executed entirely on the user's computing device, partially on the user's computing device, as a standalone software package, partially on the user's computing device and partially on a remote computing device, or entirely on a remote computing device or server.

[0078] Furthermore, embodiments of the present invention may also be computer-readable storage media storing computer program instructions thereon, which, when executed by a processor, cause the processor to perform the steps of the methods for information mining of historical change records according to various embodiments of the present invention as described in the "Exemplary Methods" section above.

[0079] The computer-readable storage medium may be any combination of one or more readable media. A readable medium may be a readable signal medium or a readable storage medium. A readable storage medium may be, for example, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, system, or device, or any combination thereof. More specific examples of readable storage media (a non-exhaustive list) include: an electrical connection having one or more wires, a portable disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof.

[0080] The basic principles of the present invention have been described above with reference to specific embodiments. However, it should be noted that the advantages, benefits, and effects mentioned in the present invention are merely examples and not limitations, and should not be considered as essential features of each embodiment of the present invention. Furthermore, the specific details disclosed above are for illustrative and facilitative purposes only, and are not limitations. These details do not limit the present invention to the necessity of employing the aforementioned specific details.

[0081] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on its differences from other embodiments. Similar or identical parts between embodiments can be referred to interchangeably. For system embodiments, since they largely correspond to method embodiments, the description is relatively simple; relevant parts can be referred to the descriptions in the method embodiments.

[0082] The block diagrams of devices, systems, devices, and systems involved in this invention are merely illustrative examples and are not intended to require or imply that they must be connected, arranged, or configured in the manner shown in the block diagrams. As those skilled in the art will recognize, these devices, systems, devices, and systems can be connected, arranged, and configured in any manner. Words such as “comprising,” “including,” “having,” etc., are open-ended terms meaning “including but not limited to,” and are used interchangeably with them. The terms “or” and “and” as used herein refer to the terms “and / or,” and are used interchangeably with them unless the context clearly indicates otherwise. The term “such as” as used herein refers to the phrase “such as but not limited to,” and is used interchangeably with it.

[0083] The methods and systems of the present invention may be implemented in many ways. For example, they may be implemented by software, hardware, firmware, or any combination of software, hardware, and firmware. The above-described order of steps for the methods is for illustrative purposes only, and the steps of the methods of the present invention are not limited to the order specifically described above unless otherwise specifically stated. Furthermore, in some embodiments, the present invention may also be implemented as a program recorded on a recording medium, the program comprising machine-readable instructions for implementing the methods according to the present invention. Thus, the present invention also covers recording media storing programs for performing the methods according to the present invention.

[0084] It should also be noted that in the systems, apparatus, and methods of the present invention, the components or steps can be disassembled and / or recombined. These disassemblies and / or recombinations should be considered equivalents of the present invention. The above description of the disclosed aspects is provided to enable any person skilled in the art to make or use the invention. Various modifications to these aspects will be readily apparent to those skilled in the art, and the general principles defined herein can be applied to other aspects without departing from the scope of the invention. Therefore, the invention is not intended to be limited to the aspects shown herein, but rather to be carried out within the widest scope consistent with the principles and novel features disclosed herein.

[0085] The above description has been given for purposes of illustration and description. Furthermore, this description is not intended to limit the embodiments of the invention to the forms disclosed herein. Although numerous exemplary aspects and embodiments have been discussed above, those skilled in the art will recognize certain variations, modifications, alterations, additions, and sub-combinations therein.

Claims

1. An automated testing method for front-end pages based on artificial intelligence, characterized in that, include: An automated testing framework with various configured device parameters and network conditions is used to obtain the actual rendering data of the target front-end page. The actual rendering data includes at least visual rendering images and document object model structure data. The actual rendered data is compared with preset benchmark test data to obtain comparison results, wherein the comparison includes at least visual difference analysis and content semantic analysis performed by an artificial intelligence model; Based on the comparison results, a test report is generated that includes information on the location, type, and degree of difference.

2. The method according to claim 1, characterized in that, The visual difference analysis specifically includes: The actual rendered image and the reference rendered image are used to extract features through a computer vision model to obtain actual features and reference features. The actual features and the benchmark features are compared to identify and filter out non-substantial visual differences caused by dynamic content; Based on the aforementioned non-substantial visual differences, output at least one of the following: differences in layout structure, differences in style attributes, and differences in static visual elements.

3. The method according to claim 1, characterized in that, The content semantic analysis specifically includes: The text content in the actual rendered data is extracted and analyzed using a natural language processing model. The semantic similarity of the text content with the benchmark text is calculated, or compliance checks are performed on keywords, prohibited words, and multilingual consistency to obtain the semantic comparison results.

4. The method according to claim 1, characterized in that, Also includes: When the test report indicates a test failure, analyze the cause of the failure. If it is caused by a failure in locating page elements, analyze the changes in the DOM structure, automatically generate a new element location strategy, and update the test script.

5. The method according to claim 1, characterized in that, The actual rendered data is compared with preset benchmark test data to obtain the comparison results, including: The actual rendering data under different environments is compared with the preset benchmark test data to obtain the comparison results.

6. An automated testing device for front-end pages based on artificial intelligence, characterized in that, include: The first acquisition module is used to acquire the actual rendering data of the target front-end page through an automated testing framework configured with multiple device parameters and network conditions. The actual rendering data includes at least visual rendering images and document object model structure data. The second acquisition module is used to compare the actual rendering data with preset benchmark test data and obtain the comparison results, wherein the comparison includes at least visual difference analysis and content semantic analysis performed by an artificial intelligence model; The generation module is used to generate a test report containing information on the location, type, and degree of difference based on the comparison results.

7. The apparatus according to claim 6, characterized in that, The visual difference analysis described in the second acquisition module specifically includes: The actual rendered image and the reference rendered image are used to extract features through a computer vision model to obtain actual features and reference features. The actual features and the benchmark features are compared to identify and filter out non-substantial visual differences caused by dynamic content; Based on the aforementioned non-substantial visual differences, output at least one of the following: differences in layout structure, differences in style attributes, and differences in static visual elements.

8. The apparatus according to claim 6, characterized in that, The semantic analysis of content in the second acquisition module specifically includes: The text content in the actual rendered data is extracted and analyzed using a natural language processing model. The semantic similarity of the text content with the benchmark text is calculated, or compliance checks are performed on keywords, prohibited words, and multilingual consistency to obtain the semantic comparison results.

9. A computer-readable storage medium, characterized in that, The storage medium stores a computer program for performing the method described in any one of claims 1-5.

10. An electronic device, characterized in that, The electronic device includes: processor; Memory used to store the processor's executable instructions; The processor is configured to read the executable instructions from the memory and execute the instructions to implement the method described in any one of claims 1-5.

Images