Automatic testing method and device based on front-end UI and terminal

Abstract

The invention discloses an automatic testing method and device based on a front-end UI and a terminal, and belongs to the technical field of front-end development testing. Comprising the following steps: detecting a first test instruction of each set of front-end UI program, controlling to carry out demand analysis, determining a function module which needs to be subjected to UI automatic test according to a demand analysis result, and determining a test target; performing automatic technology type selection, and selecting a specified test tool and a continuous integration tool; generating a compiled test case according to the determined function module needing to be tested and the test target; running the test case, and generating a test script according to the test case and an automation technology type selection result; when the test script is verified to be correct, integrating the test script into a continuous integration tool, and automatically running a test through the test script when the code of the subsequent version of the front-end UI program is submitted; and generating a test report, positioning problems and giving repair suggestions. According to the invention, the testing efficiency is improved, and the labor cost of testing is reduced.

Description

Technical Field

[0001] The present invention relates to the field of front-end development and testing technology, and in particular to an automated testing method, device, intelligent terminal and storage medium based on a front-end UI. Background Art

[0002] In current software development practices, the scale and complexity of front-end projects are increasing. Traditional testing methods, especially for large projects with frequent iterations, face numerous challenges. Each version iteration or requirement change requires a significant investment of human resources for repetitive regression testing, which not only leads to low testing efficiency but also significantly increases project labor costs. Furthermore, this manual testing approach struggles to ensure comprehensiveness and consistency. This is especially true when testing boundary conditions, as developers often fail to fully verify all possible scenarios, leading to test omissions. Furthermore, manual testing faces challenges such as inconsistent test environment configuration and difficulty standardizing test results, all of which impact test reliability and project delivery schedules. Existing testing methods, unable to guarantee test quality or improve efficiency in frequently changing front-end projects, have become a bottleneck hindering rapid project iteration.

[0003] Therefore, the existing technology still needs to be improved and developed. Summary of the Invention

[0004] In order to solve the above technical problems, the present invention provides an automated testing method, device, intelligent terminal and storage medium based on front-end UI, which has the advantages of improving testing efficiency, reducing labor costs, ensuring comprehensiveness and consistency of testing, and optimizing test environment configuration.

[0005] This application provides an automated testing method based on the front-end UI. The technical solution is as follows: Detect the first test instructions of each front-end UI program, control the demand analysis, and analyze the test scenarios suitable for UI automation; according to the results of the demand analysis, determine the functional modules that need to be tested for UI automation, and determine the test objectives; according to the functional modules and test objectives that need to be tested, select the automation technology, select the specified test tools and continuous integration tools; according to the functional modules and test objectives that need to be tested, generate the written test cases; run the test cases in the local development environment of the front-end UI program, and generate test scripts based on the test cases and the results of the automation technology selection, and verify the test scripts; when the test scripts of the front-end UI program are verified to be correct, integrate the test scripts into the continuous integration tool, and automatically run the tests through the test scripts when the code of the subsequent versions of the front-end UI program is submitted; generate a test report based on the results of the test run, and locate the problem and give repair suggestions based on the analysis of the test report. Furthermore, the application also proposes that, when the first test instructions of each front-end UI program are detected, control the demand analysis, analyze the test scenarios suitable for UI automation, and screen suitable scenarios; wherein, the conditions considered in the test scenarios include the condition that the requirements do not change frequently, the UI stability condition, and the regression test scenario condition. Furthermore, this application proposes determining the scope of testing based on the results of the requirements analysis and identifying the functional modules requiring UI automated testing based on the test scope. These functional modules include: a login page module, a form submission module, and a page navigation module. Furthermore, based on the results of the requirements analysis, test objectives are determined, including verifying whether the interface layout, interaction logic, and data presentation meet requirements. Furthermore, this application proposes selecting automation technology based on the functional modules and test objectives identified for testing, including the selection of specific testing tools and continuous integration tools. A combination of Cypress and Cucumber is used as the testing tool, while Jenkins and GitHub Actions are used as continuous integration tools to integrate automated testing into CI and / or CD processes. Furthermore, this application proposes generating and writing test cases based on the functional modules and test objectives identified for testing. These test cases include: unit test cases, which test individual functions or components to verify their logic; UI test cases, which simulate component rendering and user interaction to verify the display and behavior of interface elements; and end-to-end test cases, which simulate the complete user operation process from a user's perspective to verify the functionality of the entire application. Furthermore, the present application also proposes to obtain a test script generated according to the test case; verify the correctness of the test script; after verifying the correctness of the locally developed script, integrate the test script into the continuous integration tool CI and / or CD process, and automatically run the test through the test script when the code of the subsequent version of the front-end UI program is submitted.Furthermore, the present application also proposes that, during the automatic testing of the code of subsequent versions of the front-end UI program through the test script, a test report including test coverage and pass rate is automatically generated through the Cypress test framework; the test results are analyzed according to the test report, the problems are analyzed and located, and repair suggestions are given; the test cases are updated according to the problems located and the repair suggestions given; and the test scripts are regularly optimized according to the updated test cases. Furthermore, the present application also proposes an automated testing device based on the front-end UI, the device including: a demand analysis module for detecting the first test instructions of each set of front-end UI programs, controlling demand analysis, and analyzing test scenarios suitable for UI automation; a test scope and target determination module for determining the functional modules that need to undergo UI automation testing and determining the test targets based on the demand analysis results; an automation technology selection module for selecting automation technology and selecting designated test tools and continuous integration tools based on the determined functional modules and test targets that need to be tested; a test case generation module for generating test cases based on the determined functional modules and test targets that need to be tested. The goal is to generate written test cases; a test script generation module is used to run the test cases in the local development environment of the front-end UI program, and generate test scripts based on the test cases and the results of the automation technology selection, and verify the test scripts; an automatic testing module is used to integrate the test scripts into the continuous integration tool when verifying that the test scripts of the front-end UI program are correct, and automatically run the test through the test scripts when the code of the subsequent version of the front-end UI program is submitted; a test result generation and problem suggestion module is used to generate a test report based on the results of the test run, and locate the problem and provide repair suggestions based on the analysis of the test report. Furthermore, the present application also proposes a smart terminal, including a memory and one or more programs, wherein one or more programs are stored in the memory and are configured to be executed by one or more processors, including the one or more programs for executing the above method. Furthermore, the present application also proposes a computer-readable storage medium, which enables the electronic device to execute the above method when the instructions in the storage medium are executed by the processor of the electronic device. From the above, it can be seen that the present application provides an automated testing method, device, intelligent terminal and storage medium based on the front-end UI, which solves the problems of low efficiency, inconsistent environment configuration and test omissions in traditional manual testing through the application of automated technology selection, test script generation and continuous integration tools. It has the advantages of improving test efficiency, reducing labor costs, ensuring test comprehensiveness and consistency, and optimizing test environment configuration. By using automated tools, the present invention entrusts the work of verification according to test cases to preset code programs for automatic execution, so the testing work becomes worry-free and labor-saving, and the project quality is also guaranteed.The present invention provides a front-end UI automation testing method, which can automatically perform regression testing of most old scenarios of the system without the need for human verification one by one. After the test is completed, a specific test report will be output, indicating where the system bugs occur, thereby improving testing efficiency and reducing testing labor costs. BRIEF DESCRIPTION OF THE DRAWINGS

[0006] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are only some embodiments recorded in the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0007] Figure 1 This is a flow chart of the front-end UI-based automated testing method provided in Example 1 of the present invention.

[0008] Figure 2 This is a flow chart of the automated testing method based on the front-end UI provided in Example 2 of the present invention.

[0009] Figure 3 A principle block diagram of an embodiment of an automated testing device based on a front-end UI provided by the present invention.

[0010] Figure 4 This is a block diagram of the internal structure of the smart terminal provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0011] In order to make the purpose, technical solutions and advantages of the present invention more clear and distinct, the present invention is further described in detail below with reference to the accompanying drawings and examples. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not intended to limit the present invention.

[0012] It should be noted that if the embodiments of the present invention involve directional indications (such as up, down, left, right, front, back, etc.), the directional indications are only used to explain the relative position relationship, movement status, etc. between the various components under a certain specific posture (as shown in the accompanying drawings). If the specific posture changes, the directional indications will also change accordingly.

[0013] In existing technologies, large-scale front-end projects in enterprise applications often face frequent iteration requirements, requiring manual regression testing for each version update. This type of testing involves numerous repetitive operations, such as verifying login processes, form submissions, and page transitions, resulting in significant resource consumption and extended delivery cycles. Furthermore, boundary condition testing in complex scenarios is often difficult to fully cover due to differences in environmental configurations or human oversight. For example, the multi-format input validation in rich text editors can introduce potential defects due to missed test steps, impacting product quality and stability.

[0014] In order to solve the above problems, the inventors and development team of this application realized that the traditional manual testing mode has efficiency bottlenecks and coverage blind spots, and began to explore how to transform repetitive operations into automated processes. By analyzing the project requirements, it was found that core functional modules with higher user interface stability are more suitable for automated testing, such as login verification, data display and other scenarios. Based on this, the inventors and development team of this application considered introducing an automated tool chain to convert test cases into executable script code and integrate it into the continuous delivery process to automatically trigger test tasks during the code submission stage, thereby reducing manual intervention.

[0015] Therefore, this application proposes an automated testing method based on front-end UI, which is described in detail in the following embodiments.

[0016] Example 1 like Figure 1 As shown, an automated testing method based on a front-end UI in embodiment 1 of the present invention includes the following steps: Step S100: Detect the first test instruction of each front-end UI program, control the demand analysis, and analyze the test scenarios suitable for UI automation; Step S200: Determine the functional modules that require UI automation testing and the test objectives based on the demand analysis results; Step S300: Select automation technology based on the functional modules and test objectives that need to be tested, and select designated testing tools and continuous integration tools; Step S400: Generate a test case based on the functional modules and test objectives that need to be tested. Step S500: running the test case in the local development environment of the front-end UI program, generating a test script based on the test case and the automation technology selection result, and verifying the test script; Step S600: When the test script of the front-end UI program is verified to be correct, the test script is integrated into a continuous integration tool, and the test is automatically run using the test script when the code of a subsequent version of the front-end UI program is submitted; Step S700: Generate a test report based on the results of the running test, and locate the problem and provide repair suggestions based on the analysis of the test report.

[0017] This application proposes to perform a demand analysis to screen scenarios suitable for automated testing after detecting the first test instructions of the front-end UI program; determine the functional modules and targets that need to be tested based on the analysis results; select automation tools and generate test cases; run the test cases in the local environment to generate scripts and verify their validity; integrate the verified scripts into the continuous integration tool to automatically execute the test when the subsequent version is submitted; generate a report based on the test results and locate the problem.

[0018] Requirements analysis involves systematically evaluating the functional characteristics of front-end UI programs, identifying test scenarios with stable interfaces and fixed business logic, such as user login verification or data list display modules. This can be achieved through parsing business requirements documents and analyzing user behavior data to determine the applicable scope of automated testing.

[0019] Determining test objectives involves defining specific validation metrics based on the characteristics of functional modules, such as checking data validation rules after form submission or the accuracy of page element rendering. This can be achieved by breaking down user operation paths and interface interaction logic to ensure that testing covers key business nodes.

[0020] Automation technology selection involves choosing a suitable testing framework based on the project's technology stack. For example, you can use Cypress to simulate browser operations and integrate it with Jenkins to build a continuous integration environment. During implementation, you can compare the compatibility and scalability of different tools to ensure stable execution of test scripts.

[0021] Test case generation involves converting functional verification requirements into structured test steps. For example, this involves defining a sequence of operations such as account entry, password verification, and error checking in a user login scenario. Behavior-driven development can be used to write highly readable test scripts.

[0022] Test script verification involves simulating a real-world operating environment in your local development environment to verify that the script correctly executes the pre-set test steps and catches any anomalies. Step-by-step debugging and log analysis can be used to ensure the accuracy of the script logic.

[0023] Continuous integration deployment involves configuring verified test scripts into hook functions in the code repository, so that each code commit automatically triggers a test task. Specifically, this can be achieved by configuring pipeline tasks to automatically build the test environment and provide feedback on the results.

[0024] Test report generation involves collecting execution data from the test process, such as stack traces and screenshots of failed tests, to form a structured analysis report. Visualization tools can be used to display test coverage and pass rate metrics to assist in problem identification.

[0025] Specifically, when the system detects that a new project requires automated testing, it first analyzes the composition of its functional modules and identifies test scenarios with high reuse rates. For example, in an e-commerce platform project, the specification selection and inventory display modules of the product details page are prioritized for inclusion in the scope of automated testing because of their fixed business logic. Subsequently, Cypress is selected as the end-to-end testing tool based on the characteristics of the module, and test cases covering user clicks and data loading verification are written. After the developer runs the script locally to verify the correctness of the interaction logic, the script is deployed to the GitHub Actions workflow. Whenever the code repository receives a new submission record, the test task is automatically triggered and a test report containing error location information is generated to guide developers to quickly fix interface rendering anomalies or data binding errors.

[0026] Compared with existing technologies, traditional manual testing requires testers to perform operations one by one and record the results, which is slow and susceptible to environmental interference. This solution, however, replaces repetitive operations with automated scripts, completing core functionality verification during the code submission phase, significantly shortening the testing cycle. Furthermore, automated testing can accurately replicate edge case testing scenarios, such as simulating interface adaptation on devices with different resolutions, thus avoiding operational deviations that can occur in manual testing.

[0027] Through the above technical solutions, this application effectively reduces human resource consumption during the iteration process of front-end projects and ensures regression test coverage of core functions. The continuous integration mechanism of automated test scripts can promptly capture interface defects introduced by code changes, reducing the incidence of online failures. Structured test reports provide clear error location information, accelerate the problem detection and repair process, and improve the quality and stability of project delivery.

[0028] This application further proposes that after detecting the first test instructions of each set of front-end UI programs, the control performs demand analysis, analyzes the test scenarios suitable for UI automation, and screens suitable scenarios. The conditions considered in the test scenarios include conditions of infrequent demand changes, UI stability conditions, and regression test scenario conditions.

[0029] The infrequent requirement change condition filters functional modules whose requirement change frequency falls below a preset threshold. This can be achieved by analyzing the change frequency of modules using historical version iteration data, for example by counting the number of module requirement changes based on code submission records. This condition ensures the stability of automated test cases and avoids excessive test script maintenance costs caused by frequent requirement adjustments.

[0030] The UI stability criterion involves selecting functional modules whose interface element layout and interaction logic remain relatively stable across version iterations. This can be achieved by obtaining module UI change rate data using interface element version diff tools. This criterion ensures the reusability of automated test scripts and reduces the risk of script failure caused by frequent UI adjustments.

[0031] Regression testing scenarios are used to identify functional modules that require repeated verification of core business processes during version iterations. This can be achieved by identifying high-frequency verification scenarios based on statistical data on test case execution frequency. This condition improves automated testing resource utilization and avoids redundant testing of occasional operational scenarios.

[0032] Specifically, when the first test instruction for a front-end UI program is detected, the demand analysis process is triggered. For example, when the order management module of the e-commerce platform is launched, the system automatically obtains the demand document and version history data of the module. The demand change tracking tool is used to analyze the number of demand adjustments of the module in the past three versions. If it is lower than the preset quarterly change threshold, it is determined that it meets the condition of infrequent demand changes. The UI element version comparison tool is further used to verify that the button position and form field layout of the order submission page have a change rate of less than 5% in historical versions, meeting the UI stability condition. At the same time, according to the test management system data, it is confirmed that the order status query function of the module is required to perform more than 20 manual regression tests for each version release, which meets the regression test scenario conditions. Based on the above-mentioned screening results, the order submission and status query functions of the module are finally included in the scope of automated testing.

[0033] Compared to existing technologies, traditional solutions rely solely on manual experience to select test scenarios, which can be highly subjective and subject to inconsistent screening criteria. For example, during the development of a logistics management system, a development team might include a complex shipping order tracking module in automated testing without considering the module's fluctuating requirements, such as weekly adjustments to the map display logic. This results in test scripts requiring refactoring more than three times per month. This solution, by using a quantitative conditional screening mechanism, effectively avoids automated coverage of frequently changing modules, reducing script maintenance costs by approximately 40%.

[0034] Through the above technical solutions, this application solves the problems of low efficiency and vague standards in manual screening of test scenarios. By quantitatively evaluating demand stability, UI change rate, and test frequency, high-value scenarios suitable for automated testing can be accurately identified to avoid investing automation resources in modules prone to demand adjustments. For example, in the rich text editor module of the content management system, since this module needs to add 2-3 new typesetting functions every week, the frequency of demand changes exceeds the preset threshold. The system automatically excludes it from the scope of automated testing and instead uses manual special testing, which effectively optimizes the configuration of test resources.

[0035] This application further proposes to determine the scope of the test based on the results of the demand analysis, and confirm the functional modules that need to undergo UI automation testing based on the test scope, where the functional modules include the login page module, the form submission module, and the page navigation module; determine the test objectives based on the results of the demand analysis, and the test objectives include verifying whether the interface layout, interaction logic, and data display meet the requirements.

[0036] Among them, the login page module refers to the front-end component that includes user identity authentication related interactions. Specifically, it can be achieved by simulating the user entering the account password and triggering the login action, which is used to verify the integrity and security of the authentication process. The form submission module refers to the front-end component that includes data entry and submission functions. Specifically, it can be achieved by simulating filling in form fields and triggering the submission action. It is used to verify data validation rules and interface response logic. The page navigation module refers to the front-end component that includes menu jump or route switching functions. Specifically, it can be achieved by simulating clicking on navigation elements and monitoring the page jump results. It is used to verify the correctness of the route configuration and page loading efficiency. Verifying the interface layout in the test target refers to confirming whether the position, size and style of UI elements meet the design specifications through pixel-level comparison or element positioning; verifying the interaction logic refers to simulating the user operation sequence and monitoring whether the system response meets the expected behavior; verifying the data display refers to ensuring the accuracy of data transmission through matching detection of the interface return value and the front-end rendering result.

[0037] Specifically, after the requirements analysis phase is completed, the test scope is divided into multiple independent functional modules. For example, the login page module is responsible for handling user credential verification, the form submission module is responsible for business data entry, and the page navigation module manages the jump path within the application. The test objectives are broken down into three levels: interface layout verification captures page element attributes through automated scripts and compares them with benchmark values; interaction logic verification triggers events through preset operation sequences and monitors system feedback; data display verification intercepts interface response data and performs consistency verification with the front-end rendering content. Each functional module corresponds to a set of test cases. For example, test scenarios for different account states are designed for the login page module, verification rules for boundary value input are designed for the form submission module, and path coverage for multi-level routing jumps is designed for the page navigation module.

[0038] Compared to existing technologies, traditional manual testing typically focuses solely on core business processes, lacking systematic coverage of specific functional modules. For example, it overlooks exception handling on the login page or boundary condition verification for form submissions. Existing testing objectives are often vague and lack clear distinctions between verification criteria for the three dimensions of interface, interaction, and data, resulting in inefficient problem location. This solution, through modularization and hierarchical goal definition, enables more targeted test case development and a clearer troubleshooting path.

[0039] Through the above technical solutions, this application can effectively improve the coverage granularity and accuracy of automated testing, and reduce test blind spots caused by missing module functions or single verification dimensions. By breaking down complex front-end systems into independent modules and setting hierarchical verification goals, automated scripts can quickly locate interface rendering anomalies, interaction logic errors, or data display deviations, shortening the problem repair cycle. At the same time, modular test design facilitates the expansion of local use cases for new functions in subsequent iterations, avoiding the repeated construction of complete test suites.

[0040] This application further proposes to select automation technology based on the functional modules and test objectives that need to be tested, and select specified testing tools and continuous integration tools. The testing tool uses a combination of Cypress and Cucumber, and the continuous integration tool uses Jenkins and GitHub Actions tools to integrate automated testing into the CI and CD processes.

[0041] Among them, Cypress refers to a front-end testing framework, which can be implemented by installing npm packages and configuring test scripts. It is used to perform end-to-end testing and view test results in real time. Cucumber refers to a tool that supports behavior-driven development. It can be implemented by writing Gherkin syntax to describe test scenarios. It is used to convert test cases into natural language to improve readability and collaboration efficiency. The combination of the two can be achieved by installing the cypress-cucumber-preprocessor plug-in, so that the test scripts can not only perform automated operations but also keep in sync with the business requirements document. Jenkins refers to an open source continuous integration server, which can be implemented by configuring pipeline tasks to trigger automated testing and manage the build process. GitHub Actions refers to a workflow tool integrated with the GitHub platform. It can be implemented by writing YAML files to define event trigger conditions. It is used to automatically execute test scripts when the code is submitted.

[0042] Specifically, after determining the front-end functional modules and test objectives, Cypress was selected as the core testing framework based on the module's technology stack, leveraging its built-in browser control capabilities to verify page element interactions. Cucumber was further used to convert test scenarios into use cases in a Given-When-Then format, facilitating a unified understanding of requirements between the development and testing teams. Once the test scripts were written, a scheduled task was created through Jenkins or a code submission hook was configured using GitHub Actions, integrating test execution into the continuous integration process. For example, when code is merged into the main branch, a test task is automatically triggered and a test result report is generated. If errors in the interface layout or abnormal data display are detected, the deployment process is interrupted.

[0043] Compared to existing technologies, traditional solutions require extensive manual configuration to adapt testing tools to continuous integration processes. For example, using Selenium requires setting up a separate browser-driven environment, while Cypress reduces environmental dependencies by integrating the Chrome browser. Furthermore, existing continuous integration tools typically only support a single platform, while this solution integrates both Jenkins and GitHub Actions, allowing for flexible selection based on project hosting platforms, avoiding process bottlenecks caused by tool limitations.

[0044] Through the above technical solutions, this application solves the problem of difficult adaptation of testing tools and development environments. Predefined technology selection combinations reduce configuration complexity and ensure stable operation of test scripts within the continuous integration process. Furthermore, test cases described in natural language reduce the cost of cross-team collaboration, enabling automated testing to quickly cover high-frequency scenarios such as login verification and form submission, avoiding the problem of uncovered boundary conditions due to manual omissions.

[0045] The present application further proposes to generate and write test cases based on the determined functional modules that need to be tested and the test objectives, wherein the test cases include unit test cases, UI test cases and end-to-end test cases.

[0046] Unit test cases refer to logic verification methods for independent functions or components. They can be implemented through input and output assertions using frameworks such as Jest or Mocha to ensure the correctness of the internal logic of a single functional module.

[0047] Among them, UI test cases refer to verification methods that simulate component rendering and user interaction behaviors. Specifically, tools such as Enzyme or Testing Library can be used to verify the display status and event response of interface elements to verify the consistency of the interface with design requirements.

[0048] Among them, end-to-end test cases refer to verification methods that simulate the complete user operation process. Specifically, they can be implemented through browser automation using tools such as Cypress or Puppeteer to cover the functional integrity in multi-module serial scenarios.

[0049] Specifically, after determining the functional modules and test objectives, unit test cases were generated for the login page module to verify the password encryption logic and assert whether the function output met expectations. UI test cases were generated for the form submission module to simulate user input and verify the submit button's disabled state. End-to-end test cases were generated for the page navigation module to simulate the complete process of a user navigating from the home page to the detail page and verify the loading status of page elements. Test cases were designed differently based on module characteristics and target levels, forming a comprehensive coverage system from the local to the overall level.

[0050] Compared to existing technologies, manual testing relies on testers to manually perform each step, making it difficult to cover the boundary conditions of complex scenarios, such as abnormal branches in form input validation or timing issues when jumping across pages. This solution, by automating the generation of layered test cases, systematically covers independent component logic, interface interactions, and end-to-end business processes, eliminating the instability of manual operations while ensuring a consistent test environment through coded use case management.

[0051] Through the above technical solutions, this application achieves multi-dimensional coverage of test scenarios, which can not only quickly locate code logic defects, but also detect interface display anomalies and process interruptions. Unit test cases ensure the reliability of basic functions, UI test cases reduce deviations at the visual and interactive levels, and end-to-end test cases avoid process loopholes during cross-module collaboration, thereby reducing manual testing costs while improving defect detection rates.

[0052] The present application further proposes to obtain test scripts generated according to test cases; verify the correctness of the test scripts; after verifying the correctness of the locally developed scripts, integrate the test scripts into the continuous integration tool CI and / or CD process, and automatically run the tests through the test scripts when the code of subsequent versions of the front-end UI program is submitted.

[0053] Verifying the correctness of test scripts involves running them in a local environment and observing whether the actual output matches the expected result. This can be achieved through a combination of assertion mechanisms and logging. For example, using the Cypress framework's built-in assertion library to compare results ensures that the script logic matches the test cases. Continuous integration tools (CI) and / or CD processes are platforms that automate build, testing, and deployment tasks. Specifically, Jenkins can be configured to listen for code repository commit events by configuring webhooks to trigger test script execution, thus achieving a seamless transition between the development phase and the testing process.

[0054] Specifically, after completing the test script writing in the local development environment, first execute the script by simulating the user operation path to verify whether it can correctly trigger the target functional module and capture the expected results. For example, for the test script of the login page module, it is necessary to verify whether it can automatically fill in the account password, click the login button and successfully jump to the specified page. After the script is verified, it is uploaded to the code repository configured by the continuous integration tool and associated with the code submission event. When the developer submits a new version of the code, the continuous integration tool automatically pulls the latest code and runs the test script. For example, the workflow file is configured in GitHub Actions so that it executes the preset test command after each push operation, generates test results and feeds back to the development team.

[0055] Compared with existing technologies, traditional manual testing requires manually executing test cases and recording results after each code change, which introduces operational delays and the risk of human error. This solution, by deeply integrating automated scripts with continuous integration tools, instantly triggers the testing process during the code submission phase, eliminating manual intervention and ensuring consistent and timely test execution. For example, for boundary value testing in form submission modules, traditional methods require testers to repeatedly enter different data combinations. However, this solution, through pre-configured parameterized test scripts, can automatically traverse multiple sets of data in milliseconds.

[0056] Through the above technical solutions, this application realizes the fully automated execution of the test process, effectively reducing the risk of defects missed due to manual operation omissions. In a development scenario with frequent iterations, each code change can quickly complete regression testing through a preset test script, significantly shortening the test cycle. At the same time, the automatic generation mechanism of test results helps developers quickly locate the problem code segment. For example, when the test script of the page navigation module detects a route jump anomaly, the relevant code file and line number information can be directly marked in the test report to improve the efficiency of defect repair.

[0057] This application further proposes generating a test report based on the results of running the test, locating problems and providing repair suggestions based on the analysis of the test report; automatically generating a test report through the Cypress test framework, including test coverage and pass rate, during the automatic testing of the code of subsequent versions of the front-end UI program through test scripts; analyzing the test results according to the test report, locating problems and providing repair suggestions; updating test cases based on the analysis and location of problems and the repair suggestions given; and regularly optimizing test scripts based on the updated test cases.

[0058] Among them, the test report refers to the data collection automatically recorded during the test process. Specifically, it can be implemented using the report generation module built into the Cypress framework, which forms a structured document by capturing the assertion results, error logs, and interface snapshots during the test execution. Problem location refers to analyzing the specific steps and contextual information of the test failure. Specifically, it can be implemented using stack tracing and DOM element snapshot comparison technology to accurately locate the error location to the code line or interface component level. Repair suggestions refer to solutions proposed based on the error type and occurrence scenario. Specifically, common error patterns can be matched through a preset rule library, such as element positioning failure, data loading timeout, etc., to automatically generate corresponding component reconstruction or parameter adjustment suggestions.

[0059] Specifically, after executing automated tests in a continuous integration environment, the Cypress framework will generate a comprehensive report including test coverage, assertion pass rate, and execution time. When a test case fails to execute, the system automatically captures a snapshot of the interface when the error occurs and records a detailed log of the operation steps. The analysis module locates the specific front-end component or back-end interface call point by parsing the stack information in the error log, and compares historical test data to determine whether it is an occasional problem. For reproducible defects, the system generates suggestions based on the preset repair strategy library, such as adjusting the element waiting time or modifying the CSS selector. Based on the analysis results, the corresponding use cases in the test case library will be marked and the verification conditions will be updated, and the version iteration process of the test script will be triggered to ensure that subsequent tests can cover the repaired scenarios.

[0060] Compared to existing technologies, traditional manual testing relies on testers to manually record errors and retrace their steps, which can easily lead to missing critical environmental information or misjudging the root cause of problems. This solution fully preserves test site data through an automated report generation mechanism. Combined with a rules engine, it quickly locates the root cause of problems, avoiding the subjectivity and inefficiency of manual analysis. Furthermore, the continuous optimization of test scripts addresses the issue of lagging use case maintenance in traditional automated testing, ensuring that test assets remain synchronized with system iterations.

[0061] Through the above technical solutions, this application achieves accurate traceability and closed-loop processing of test defects, reducing the time cost of problem investigation. The linkage mechanism between automated reporting and repair suggestions reduces the frequency of manual intervention, allowing the testing team to focus on verifying complex scenarios. The continuous optimization process of test scripts enhances the adaptability of automated testing, effectively addressing the maintenance challenges brought about by frequent changes to the front-end interface.

[0062] The present invention is further described in detail below through another specific application embodiment.

[0063] Example 2 like Figure 2 As shown, the second embodiment provides an automated testing method based on the front-end UI, including: S10, start, then enter S11; S11, demand analysis, and enter S12; In this specific application embodiment, the demand analysis first analyzes the test scenarios suitable for UI automation, such as scenarios where the requirements do not change frequently, the UI is relatively stable, and a large number of regression tests are required.

[0064] S12: Determine the test scope and objectives, and then proceed to S13; In this specific application embodiment, the functional modules that require UI automation testing will also be determined, such as the login page, form submission, page navigation, etc. The purpose of the test will also be clarified, such as verifying whether the interface layout, interaction logic, data display, etc. meet the requirements.

[0065] Next, we'll select automation technology. 1) First, we'll decide on the testing tool. Specifically, we can choose a combination of Cypress and Cucumber. Cypress offers advantages such as low learning curve, stability and reliability, fast execution and real-time feedback, deep integration with front-end applications, and powerful debugging capabilities.

[0066] 2) Select continuous integration tools: Use tools such as Jenkins and GitHub Actions to integrate automated testing into the CI / CD process.

[0067] S13, set the test case and enter S14; In this step, a test case written according to the requirements, test scope, and test objectives is obtained. The test case includes: 1) Unit test cases: Used to test independent functions or components to verify their logic. 2) UI test cases: Simulate component rendering and user interaction to verify the display and behavior of interface elements. 3) End-to-end test cases: From the user's perspective, simulate the complete user operation process to verify the functionality of the entire application.

[0068] S14, prepare the test environment and enter S15; S15. Install testing tools such as Cypress and proceed to S16. S16, configure the test framework and proceed to S17; S17, write a test script and go to S18; S18, execute the test, if the test is unsuccessful, go to S19, if the test is successful, go to S22; In a specific embodiment of the present invention, test case execution includes: 1) Local execution: running the test case in the local development environment, generating a test script based on the test case, and ensuring the correctness of the test script. 2) Integration into the CI / CD process: After verifying the correctness of the locally developed script, the test script is integrated into the continuous integration tool and automatically runs the test every time the code is submitted.

[0069] In the embodiment of the present invention, the test case is directly written and generated according to the requirements, and the test script is written and generated according to the test case and technology selection; the test case is equivalent to the test steps and methods, and the script is the code implementation of the test case.

[0070] S19, test fails and enters S20; S20, record the failure reason and return to S18; S22, the test passes, and then enters S23; S23, generate a test report and enter S24; S24, analyze the test results and proceed to S25; In the embodiment of the present invention, the generated test report is analyzed. Regarding the generation of the test report: the test report is automatically generated by the Cypress test framework, including test coverage, pass rate, etc. Then the test report is analyzed, and the test results are analyzed according to the test report to locate the problem and fix it. Then the process goes to step S25; S25, regression testing, and enter S26; That is, in a specific embodiment of the present invention, after analyzing the test results according to the test report, locating the problem and fixing it, the test cases will be updated in a timely manner; as the application iterates, the present invention will update the test cases in a timely manner to adapt to new functions and requirements, thereby increasing the coverage of automated testing.

[0071] The present invention also optimizes the test script: regularly optimizes the test script to improve the test efficiency. Then enter S26; S26, end.

[0072] It can be seen that the present invention provides a universal front-end UI automation testing method, which can automatically perform regression testing on most of the old scenarios of the system without the need for human verification one by one. After the test is completed, a specific test report will be output to indicate where the system bugs occur; thus, the test efficiency is improved and the labor cost of the test is reduced.

[0073] Exemplary devices like Figure 3 As shown, an embodiment of the present invention provides an automated testing device based on a front-end UI, the device comprising: The demand analysis module 310 is used to detect the first test instructions of each front-end UI program, control the demand analysis, and analyze the test scenarios suitable for UI automation; The test scope and target determination module 320 is used to determine the functional modules that need to be tested for UI automation and determine the test targets based on the demand analysis results; The automation technology selection module 330 is used to select automation technology based on the functional modules to be tested and the test objectives, and select the specified testing tools and continuous integration tools; The test case generation module 340 is used to generate written test cases based on the functional modules and test objectives that need to be tested; A test script generation module 350 is used to run the test case in the local development environment of the front-end UI program, generate a test script based on the test case and the automation technology selection result, and verify the test script; An automatic testing module 360 ​​is used to verify that the test script of the front-end UI program is correct, integrate the test script into a continuous integration tool, and automatically run the test using the test script when the code of a subsequent version of the front-end UI program is submitted; The test result generation and problem suggestion module 370 is used to generate a test report based on the results of the test run, and locate problems and provide repair suggestions based on the analysis of the test report.

[0074] Among them, the demand analysis module refers to the logical unit used to start the demand analysis when the first test instruction is triggered. It can be implemented by combining the event monitoring mechanism with the rule engine. For example, by monitoring the commit hook event of the code repository and triggering the analysis process after detecting the first test tag, its function is to screen out high-stability scenarios suitable for automated testing.

[0075] The test scope and target determination module refers to the decision-making unit that defines the test boundaries based on the results of the demand analysis. Specifically, a decision tree algorithm can be used to sort the priorities of functional modules. For example, the login page module is set to the highest priority. Its role is to focus on the verification goals of the core functions.

[0076] The automation technology selection module refers to a configuration unit that matches the technology stack according to test requirements. Specifically, a preset technology matrix can be used to match tools. For example, Cypress is selected as the end-to-end test framework based on the component type. Its role is to build a test technology system that adapts to the project characteristics.

[0077] The test case generation module is a unit that converts test requirements into executable cases. Specifically, the feature file can be written in BDD mode. For example, the Given-When-Then steps of the user login scenario can be described using Gherkin syntax. Its function is to establish a machine-readable test logic chain.

[0078] The test script generation module refers to the compilation unit that verifies the test logic in the local environment. Specifically, it can use the AST syntax tree to parse test cases and generate executable code. For example, it converts UI operation steps into a Cypress API call sequence. Its function is to ensure the consistency of the script with the test target.

[0079] The automatic testing module refers to the deployment unit connected to the continuous integration system. Specifically, it can use a plug-in architecture to connect to Jenkins' Pipeline tasks. For example, it automatically loads the test suite when a code merge request is triggered. Its function is to realize unattended operation of the test process.

[0080] The test result generation and problem suggestion module refers to the diagnostic unit that analyzes test data. Specifically, it can use log aggregation technology to extract error stack information. For example, it can generate error reports with code line numbers by parsing console output. Its function is to accelerate the defect location process.

[0081] Specifically, the device's workflow is as follows: When the requirements analysis module captures the initialization test event, it initiates the automated scenario screening process; the test scope and target determination module defines the test boundaries of the core functional modules based on the screening results; the automated technology selection module configures the appropriate test framework and tool chain based on the established boundaries; the test case generation module converts the test requirements into structured test steps; the test script generation module completes script compilation and logic verification in a local sandbox environment; the automated testing module deploys verified scripts to the continuous integration environment to trigger automated tests; and the test result generation and problem suggestion module ultimately outputs a visual report with error location. Furthermore, each module transmits data through standardized interfaces, such as encapsulating test configuration parameters in JSON format, thereby achieving decoupling and flexible expansion between modules.

[0082] Compared to existing technologies, traditional manual testing requires a significant amount of time and repetitive operations. This device, by building a modular testing system, achieves the automatic generation and verification of test cases. While existing technologies rely on manual maintenance for test environment configuration, this device's automated technology selection module can dynamically adapt to different technology stacks. Conventional methods struggle to obtain timely test feedback, but this device's continuous integration docking mechanism instantly triggers full testing during the code submission phase and quickly locates interface rendering anomalies or data validation errors through structured reports.

[0083] Through the above technical solutions, this application effectively solves the problem of inefficient manual regression testing. It achieves end-to-end automation of the testing process through standardized modules, reducing test result deviations caused by environmental differences. The continuous integration mechanism of test scripts ensures full-scenario coverage verification after each code change. The error location module significantly shortens troubleshooting time by aggregating multi-dimensional test data. The template design of the test case generation module improves the reusability and maintainability of test cases.

[0084] Based on the above embodiment, the present invention also provides an intelligent terminal, whose principle block diagram can be shown as follows: Figure 4 The intelligent terminal includes a processor, a memory, a network interface, a display screen, and a database connected via a system bus.

[0085] An intelligent terminal of the present application further includes one or more programs, wherein the one or more programs are stored in a memory and are configured to be executed by one or more processors to implement an automated testing method based on a front-end UI.

[0086] Among them, memory refers to hardware devices used to store computer programs and data. It can be implemented as a solid-state drive, flash memory chip or disk array, and is used to persistently store scripts, test cases and configuration information required for automated testing.

[0087] Among them, the processor refers to the computing unit that executes program instructions, which can be implemented using a multi-core CPU or distributed computing architecture, and is used to parse and execute logical judgments, test script scheduling and result analysis in the automated testing process.

[0088] Specifically, when the processor executes the program in the memory, it first triggers the requirements analysis module to identify scenarios suitable for automated testing and screen UI modules that meet stability requirements; then it calls the test scope and target determination module to define the test boundaries, such as the login page module or the form submission module; then, through the automation technology selection module, it selects the Cypress and Jenkins tool chains to generate a set of use cases covering unit testing, UI testing, and end-to-end testing. After running the test script in the local development environment to verify the logical correctness, the script is integrated into the continuous integration tool to automatically trigger the test process when the code is submitted. The test report is generated through the Cypress framework. The analysis module locates the problem and generates repair suggestions based on the coverage data, while dynamically updating the test case library to optimize the script.

[0089] In some specific implementations, the memory capacity can be configured to 512GB or more to support large-scale test data storage, and the processor core count can be adapted to 8 or more cores to execute multiple test tasks in parallel. The test script verification process can be integrated with containerization technology to isolate environmental differences, such as using Docker to build a standardized operating environment.

[0090] Compared with existing technologies, which rely on manual repetitive regression testing, this solution suffers from low efficiency and missed edge cases. This solution, however, covers all test scenarios through automated script execution, eliminating human error. Inconsistent test environment configuration in existing technologies leads to unreliable results. This solution standardizes the environment through continuous integration tools, ensuring repeatable testing. Existing technologies are unable to generate test reports in real time. This solution uses an integrated testing framework to automatically output coverage and problem location information, shortening troubleshooting cycles.

[0091] Through the above technical solutions, this application can transform front-end UI testing work into an automated process, reduce manual intervention, and improve the speed of test execution. The continuous integration mechanism of test scripts ensures that each code change triggers comprehensive verification to avoid regression defects from being missed. The dynamically updated test case library can adapt to changes in requirements and ensure continuous optimization of test coverage. The automated generation of problem location and repair suggestions further reduces maintenance costs, allowing test resources to focus on in-depth verification of complex scenarios.

[0092] The present application further proposes a computer-readable storage medium. When the instructions in the storage medium are executed by the processor of an electronic device, the electronic device is enabled to perform an automated testing method based on the front-end UI. The method includes detecting the first test instructions of the front-end UI program and analyzing the test scenario, determining the test functional modules and targets, selecting automation tools, generating test cases, running and verifying test scripts, integrating into continuous integration tools to trigger automatic testing, generating test reports and locating problems.

[0093] Among them, computer-readable storage medium refers to a non-temporary physical carrier that can store program code, which can be implemented by a solid-state drive, mechanical hard drive or flash memory device, and is used to persistently store executable instructions corresponding to the automated testing method. The processor refers to an arithmetic unit that executes instructions in the storage medium, which can be implemented by a central processing unit or a graphics processing unit, and triggers the automated testing process by reading and parsing the instruction content. Instructions refer to a set of program codes that implement the automated testing method, which can be written in JavaScript, Python or Shell scripting language, and are used to control electronic equipment to perform demand analysis, use case generation, script verification and test report generation operations according to preset steps.

[0094] Specifically, after the instructions in the storage medium are loaded by the processor, the electronic device is driven to execute the following process: when the first test instruction of the front-end UI program is detected, the scenarios that meet the stability and regression test conditions are automatically screened; the target modules such as the login page and form submission module to be tested are determined according to the scenario, and Cypress and Jenkins are selected as testing tools; unit tests, UI tests and end-to-end test cases are generated based on module characteristics, and the correctness of the scripts are run and verified in the local environment; the verified scripts are integrated into the continuous integration process, and the test tasks are automatically triggered when the code is submitted; finally, a report including coverage and pass rate is generated, the interface layout or data display problems are located and repair suggestions are provided, and the test cases are updated according to the analysis results to optimize the scripts.

[0095] Compared with existing technologies, existing solutions rely on manual execution of repetitive testing tasks, which have the risks of low efficiency, poor environmental consistency and missed boundary conditions. This solution solidifies the automated testing process through computer-readable storage media, enabling electronic devices to automatically perform full-process operations from demand analysis to problem location, eliminating human operation deviations, ensuring the standardization of test environment and execution logic, and at the same time achieving instant triggering of test tasks and result feedback through continuous integration.

[0096] Through the above technical solutions, this application realizes the standardization and automation of the front-end UI testing process, significantly reduces the need for manual intervention, avoids fluctuations in test results due to environmental differences, improves the efficiency of regression test execution and boundary condition coverage, and at the same time ensures the immediate verification of system stability after each code change through the continuous integration mechanism, shortening the response cycle for problem discovery and repair.

[0097] The above description is merely an embodiment of the present application and is not intended to limit the scope of protection of the present application. For those skilled in the art, various modifications and variations of the present application are possible. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present application shall be included in the scope of protection of the present application.

Claims

1. An automated testing method based on front-end UI, characterized in that: include: Detect the first test instructions of each front-end UI program, control the demand analysis, and analyze the test scenarios suitable for UI automation; Based on the results of the demand analysis, determine the functional modules that require UI automation testing and determine the test objectives; Select automation technology based on the functional modules and test objectives that need to be tested, and choose the designated testing tools and continuous integration tools; Generate test cases based on the functional modules and test objectives that need to be tested; Run the test case in the local development environment of the front-end UI program, generate a test script based on the test case and the automation technology selection results, and verify the test script; When the test script of the front-end UI program is verified to be correct, the test script is integrated into a continuous integration tool, and the test is automatically run through the test script when the code of a subsequent version of the front-end UI program is submitted; Generate a test report based on the results of the test run, and locate the problem and provide repair suggestions based on the analysis of the test report.

2. The front-end UI-based automated testing method according to claim 1, characterized in that: The steps of detecting the first test instruction of each front-end UI program, controlling the demand analysis, and analyzing the test scenarios suitable for UI automation include: Detect the first test instructions of each front-end UI program, control the demand analysis, analyze the test scenarios suitable for UI automation, and screen suitable scenarios; Among them, the conditions considered in the test scenario include the condition of infrequent demand changes, the condition of UI stability, and the condition of regression test scenario.

3. The front-end UI-based automated testing method according to claim 1, characterized in that: The steps of determining the functional modules that require UI automation testing and determining the test objectives based on the requirements analysis results include: Determine the scope of the test based on the results of the demand analysis, and confirm the functional modules that need to be tested for UI automation based on the test scope, where the functional modules include: login page module, form submission module, and page navigation module; Determine the test objectives based on the requirements analysis results, including verifying whether the interface layout, interaction logic, and data display meet the requirements.

4. The front-end UI-based automated testing method according to claim 1, characterized in that: The steps of selecting automation technology based on the functional modules and test objectives to be tested and selecting the designated testing tools and continuous integration tools include: According to the functional modules and test objectives that need to be tested, select automation technology, and select the specified test tools and continuous integration tools. Among them, the test tool uses the combination of Cypress+cucumber; The continuous integration tools used are Jenkins and GitHub Actions, which integrate automated testing into the CI and / or CD processes.

5. The front-end UI-based automated testing method according to claim 1, characterized in that: The step of generating a test case based on the determined functional modules and test objectives to be tested includes: Generate test cases based on the functional modules and test objectives that need to be tested; The test cases include: Unit test cases are used to test independent functions or components to verify whether their logic is correct; UI test cases, used to simulate component rendering and user interaction, and verify the display and behavior of interface elements; End-to-end test cases are used to simulate the complete user operation process from the user's perspective and verify the functionality of the entire application.

6. The front-end UI-based automated testing method according to claim 1, characterized in that: The steps of verifying that the test script of the front-end UI program is correct, integrating the test script into a continuous integration tool, and automatically running the test using the test script when the code of a subsequent version of the front-end UI program is submitted include: Obtaining a test script generated according to the test case; Verify the correctness of the test script; After verifying the correctness of the locally developed script, the test script is integrated into the continuous integration tool CI and / or CD process, and the test is automatically run through the test script when the code of the subsequent version of the front-end UI program is submitted.

7. The front-end UI-based automated testing method according to claim 1, characterized in that: The steps of generating a test report based on the results of the test run, and locating the problem and providing repair suggestions based on the analysis of the test report include: During the automatic testing of the code of subsequent versions of the front-end UI program through the test script, a test report including test coverage and pass rate is automatically generated through the Cypress test framework; Analyze test results according to the test report, locate problems and provide repair suggestions; Update test cases based on the analysis, identifying issues, and providing recommended fixes. Optimize test scripts regularly based on updated test cases.

8. An automated testing device based on front-end UI, characterized in that: The device comprises: The requirements analysis module is used to detect the first test instructions of each front-end UI program, control the requirements analysis, and analyze the test scenarios suitable for UI automation; The test scope and target determination module is used to determine the functional modules that need UI automation testing and determine the test objectives based on the requirements analysis results; The automation technology selection module is used to select automation technology based on the functional modules and test objectives that need to be tested, and to select the specified testing tools and continuous integration tools; The test case generation module is used to generate written test cases based on the functional modules and test objectives that need to be tested; A test script generation module is used to run the test case in the local development environment of the front-end UI program, generate a test script based on the test case and the automation technology selection result, and verify the test script; An automatic testing module is used to verify that the test script of the front-end UI program is correct, integrate the test script into the continuous integration tool, and automatically run the test through the test script when the code of the subsequent version of the front-end UI program is submitted; The test result generation and problem suggestion module is used to generate a test report based on the results of the test run, and locate the problem and provide repair suggestions based on the analysis of the test report.

9. An intelligent terminal, characterized in that: The device comprises a memory and one or more programs, wherein the one or more programs are stored in the memory and configured to be executed by one or more processors, and the one or more programs include being used to execute the method according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that When the instructions in the storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute the method according to any one of claims 1 to 7.

Images