Front-end code coverage rate testing system and implementation method

Abstract

The invention discloses a front-end code coverage rate test system and an implementation method, and the method comprises the steps: configuring a first Jenkins task to obtain a front-end project, and configuring a second Jenkins task according to the code type of the front-end project for automatic instrumentation to obtain the front-end project after instrumentation; compiling and packaging the front-end project after instrumentation to obtain a static resource file, and converting the static resource file into a front-end page for testing; acquiring a coverage rate data set in the test process according to a preset time interval, and configuring a third Jenkins task to process the coverage rate data set to obtain total coverage rate data; and generating a coverage rate report according to the total coverage rate data, and sending the coverage rate report to the user side. The invention relates to the technical field of software testing, and solves the technical problems that an existing testing process is low in automation degree and seriously depends on manual operation.

Description

Technical Field

[0001] The present invention belongs to the field of software development and testing, and relates to continuous integration and automated task scheduling technology, and specifically is a front-end code coverage testing system and implementation method. Background Art

[0002] In today's digital age, Web applications have been deeply integrated into people's lives and work. As a key part of the interaction between Web applications and users, the quality of front-end code directly affects the user experience and the normal operation of the business. Front-end code coverage testing, as an important means of measuring the quality of front-end code, plays an important role in ensuring the stability, reliability and security of Web applications. By accurately measuring the proportion and degree of testing in the code, the development team can accurately locate the code areas that are not fully tested, discover potential problems in a timely manner, and effectively reduce the risks after the application is launched, thereby improving user satisfaction and corporate competitiveness.

[0003] However, the existing front-end code coverage testing methods have many drawbacks, the most prominent of which is the lack of automation and heavy reliance on manual operations. In the traditional testing process, testers are required to manually pull code from the code version library to the local PC, then determine whether the project is a Vite or WebPack project, and manually insert the stub code for different project types. After the stub is completed, it is necessary to manually compile and package the code to the web server. During the test execution phase, testers operate the front-end project according to the test cases. After completion, they manually click the "Generate Coverage" button on the front-end page to obtain coverage data, and then manually convert these data into a coverage report, and finally manually send an email to the relevant personnel.

[0004] This highly manual testing method not only consumes a lot of manpower and time, but is also prone to human errors. For example, during the manual plug-in process, the plug-in code may be wrong or missing due to negligence, affecting the accuracy of the test results; data errors or loss may also occur during manual conversion and processing of data, leading to misjudgment of code coverage. In addition, manual operations are inefficient and difficult to meet the needs of fast-iteration Web development. In the case of a tight project development cycle, comprehensive testing may not be completed in time, resulting in defective code being deployed online, bringing a bad experience to users and even causing economic losses. Summary of the invention

[0005] The present invention aims to solve at least one of the technical problems existing in the prior art; to this end, the present invention proposes a front-end code coverage testing system and implementation method, which are used to solve the technical problems that the traditional testing process has a low degree of automation and is heavily dependent on manual operations.

[0006] To achieve the above object, a first aspect of the present invention provides a front-end code coverage testing method, comprising:

[0007] S1, configure the first Jenkins task to obtain the front-end project, and configure the second Jenkins task to automatically insert the code according to the code type of the front-end project to obtain the front-end project after inserting the code;

[0008] S2, compile and package the front-end project after stub insertion to obtain static resource files, and convert the static resource files into front-end pages for testing;

[0009] S3, obtaining the coverage data set during the test process according to a preset time interval, and configuring the third Jenkins task to process the coverage data set to obtain the total coverage data;

[0010] S4, generating a coverage report according to the total coverage data, and sending the coverage report to the user end.

[0011] Furthermore, configuring the first Jenkins task to obtain the front-end project includes:

[0012] S11, use the first Jenkins task to pull the front-end project from the Git server to the test server;

[0013] S12, obtaining the code type of the front-end project according to the code framework and directory structure of the front-end project;

[0014] S13, write a shell script according to the code type of the front-end project, use the shell script to download the dependent plug-ins and stub plug-ins of the front-end project, and obtain the front-end project environment.

[0015] Furthermore, the use of shell scripts to download the dependency plug-ins and stub plug-ins of the front-end project includes:

[0016] If the code type of the front-end project is Vite, use the vite-plugin-istanbul plug-in in the shell script to download the dependent plug-ins and the stub plug-in;

[0017] If the code type of the front-end project is Webpack, use the webpack-plugin-istanbul plug-in in the shell script to download dependent plug-ins and stub plug-ins.

[0018] Furthermore, configuring the second Jenkins task to automatically insert a stub according to the code type of the front-end project includes:

[0019] If the code type of the front-end project is Vite, introduce the vite-plugin-istanbul plug-in in the vite.config.js file, configure the automatic instrumentation code and execute it to complete the automatic instrumentation of the front-end project code;

[0020] If the code type of the front-end project is Webpack, introduce the webpack-plugin-istanbul plug-in in the webpack.config.js file, configure the automatic instrumentation code and execute it to complete the automatic instrumentation of the front-end project code.

[0021] Furthermore, the automatic instrumentation code includes: an introduced plug-in, an instrumented file directory configuration, a filtered file directory configuration, a report storage location and storage format configuration.

[0022] Furthermore, the conversion of the static resource file into a front-end page for testing includes:

[0023] Store the static resource files in the www directory and compress them to obtain static files;

[0024] Upload the static files to the file server of the mobile application, download the front-end code of the static files from the mobile application, and convert them into front-end pages for testing.

[0025] Furthermore, obtaining the coverage data set during the test according to the preset time interval includes:

[0026] Get the value of windows.__coverage__ of the front-end page according to the preset time interval and convert it into a json file to obtain several json files;

[0027] Name several JSON files according to the acquisition time and version, and upload them to the test server to obtain the coverage data set.

[0028] Furthermore, configuring the third Jenkins task to process the coverage data set includes:

[0029] The third Jenkins task is used to deduplicate and correct errors in the coverage data set and then merge them into the total coverage data.

[0030] Furthermore, the coverage report is obtained in the following manner:

[0031] A coverage report of the total coverage data is generated using the command npx nyc report --reporter=html --temp-dir=. / coverage to obtain a coverage report; wherein the coverage report includes line coverage, statement coverage, function coverage, branch coverage, uncovered percentage, and functional description of the total coverage data.

[0032] A second aspect of the present invention provides a front-end code coverage testing system, comprising:

[0033] Environment configuration module: used to execute the first Jenkins task and pull the front-end project from the Git server to the test server;

[0034] Automatic plug-in module: used to execute the second Jenkins task, automatically plug-in according to the code type of the front-end project, and obtain the front-end project after plug-in;

[0035] Code testing module: used to compile and package the front-end project after stub insertion, generate static resource files, and convert static resource files into front-end pages for testing;

[0036] Data collection module: used to execute the third Jenkins task, obtain the coverage data set in the test process according to the preset time interval and process it to obtain the total coverage data;

[0037] Report generation module: Generates coverage report based on total coverage data and sends the coverage report to the user end.

[0038] Compared with the prior art, the present invention has the following beneficial effects:

[0039] In the traditional process, testers need to manually pull the code from the code version library to the local PC, and then manually insert the stub and compile and package it to the server. However, the present invention automatically completes these operations through the first and second Jenkins tasks, saving a lot of time and manpower. Testers only need to execute test cases on the mobile application, realizing full process automation, reducing manual operation links, avoiding errors and delays caused by manual operation, and thus improving overall testing efficiency.

[0040] During the testing process, automated data processing was used to solve the problem of merging coverage data generated by multiple people testing different functional modules. It also prevented coverage data loss due to application crashes and accidental exits, ensured data integrity and accuracy, and provided strong support for generating reliable coverage reports. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0042] Figure 1 It is a flow chart of the front-end code coverage testing method of the present invention;

[0043] Figure 2 It is a schematic diagram of the framework of the front-end code coverage testing system of the present invention. DETAILED DESCRIPTION

[0044] The technical solution of the present invention will be clearly and completely described below in conjunction with the embodiments. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0045] See also Figure 1-Figure 2 The first aspect of the present invention provides a method for implementing front-end code coverage, including:

[0046] S1, configure the first Jenkins task to obtain the front-end project, and configure the second Jenkins task to automatically insert the code according to the code type of the front-end project to obtain the front-end project after inserting the code;

[0047] S2, compile and package the front-end project after stub insertion to obtain static resource files, and convert the static resource files into front-end pages for testing;

[0048] S3, obtaining the coverage data set during the test process according to a preset time interval, and configuring the third Jenkins task to process the coverage data set to obtain the total coverage data;

[0049] S4, generating a coverage report according to the total coverage data, and sending the coverage report to the user end.

[0050] Traditional front-end code coverage testing methods are usually based on manual operations, and their workflow is:

[0051] When it is determined that the front-end project needs coverage testing, the tester manually pulls the code from the code version library to the local PC, then checks whether the project is a Vite or WebPack project, and manually inserts the stub code into the project code. After the stub is completed, the code is manually compiled and packaged to the web server; then the tester executes the front-end project according to the test case, and after the execution is completed, the tester manually clicks the "Generate Coverage" button on the front-end page to manually convert the generated local coverage data into a coverage report, and finally manually sends the coverage report to relevant personnel via email;

[0052] The entire process completely relies on manual operation and has certain requirements on the technical experience of the tester. Therefore, the present invention proposes a fully automated front-end code coverage testing system and implementation method to achieve efficient, accurate and low-cost front-end code test coverage measurement.

[0053] Specifically, the method of the present invention automatically pulls the front-end engineering code from the Git server to the test server by configuring the Jenkins task, determines the project type according to the code framework and directory structure, and uses the shell script to automatically download the dependent plug-ins and the plug-in plug-in to build a test environment for the front-end project;

[0054] Then, according to the project type, the corresponding Jenkins task is configured to achieve automatic instrumentation. The instrumentation code includes the introduction of plug-ins, configuration file directories, and report related information. The instrumented project is compiled and packaged to generate static resource files, which are stored in the www directory and compressed and uploaded to the file server for mobile application download and conversion into front-end pages for testing;

[0055] During the test, the value of the browser global variable windows.__coverage__ is automatically obtained at preset time intervals through a scheduled task, converted into JSON data, named and uploaded to the test server to form a coverage data set;

[0056] Finally, the Jenkins task is configured to remove duplicates, correct errors and merge the data set into total coverage data. Based on this data, a coverage report is generated using a specific command and automatically emailed to relevant personnel. The present invention realizes the automation of the test process, greatly reduces the dependence on the technical experience of the tester, improves the test efficiency, and can more accurately measure the test coverage and provide optimization suggestions.

[0057] In this embodiment, step S1 is intended to configure the first Jenkins task to obtain the front-end project, and configure the second Jenkins task to automatically insert the code according to its code type to obtain the front-end project after inserting the code;

[0058] Specifically, when configuring the first Jenkins task to obtain the front-end project, first use the first Jenkins task to pull the front-end project from the Git server to the test server; then determine the code type of the front-end project based on its code framework and directory structure; then write a shell script based on the code type. If the code type of the front-end project is Vite, use the vite-plugin-istanbul plug-in in the shell script to download dependent plug-ins and stub plug-ins. If it is Webpack, use the webpack-plugin-istanbul plug-in in the shell script to download dependent plug-ins and stub plug-ins, so as to obtain the front-end project environment;

[0059] When configuring the second Jenkins task for automatic instrumentation, if the code type of the front-end project is Vite, the vite-plugin-istanbul plug-in is introduced in the vite.config.js file, and the automatic instrumentation code including the introduced plug-in, the instrumentation file directory configuration, the filtered file directory configuration, the storage location and storage format configuration of the report is configured and executed to complete the automatic instrumentation of the front-end project code; if the code type of the front-end project is Webpack, the webpack-plugin-istanbul plug-in is introduced in the webpack.config.js file, and the automatic instrumentation code with the same content is configured and executed to complete the automatic instrumentation of the front-end project code.

[0060] Then in step S2, the front-end project after the stub is compiled and packaged to obtain static resource files, such as HTML, CSS, JavaScript files, etc., and these static resource files are converted into front-end pages for testing. The specific process is:

[0061] First, store the static resource file in the www directory and compress it to obtain a static file (www.zip); then upload the static file to the file server of the mobile application so that it can be accessed and operated on the mobile application;

[0062] In the mobile application, the tester clicks on the front-end page after the instrumentation that he wants to operate. The mobile application will download the front-end code of the latest uploaded static file from the file server and convert it into a front-end page for the tester to perform system testing.

[0063] In step S3, in order to accurately measure the test coverage of the front-end code, we will obtain the coverage data set during the test process according to the preset time interval, and configure the third Jenkins task to process these data sets to finally obtain the total coverage data.

[0064] Specifically, the value of windows.__coverage__ of the front-end page is obtained at a preset time interval, the execution status of the code during the test is comprehensively and dynamically recorded, and converted into a json file to obtain several json files;

[0065] Next, these JSON files are named according to the acquisition time and version to facilitate the subsequent distinction and management of coverage data of different time periods and versions, and then uploaded to the test server to obtain the coverage data set;

[0066] After that, configure the third Jenkins task to deduplicate and correct errors in the coverage data set, and then merge it into the total coverage data to generate the final coverage report.

[0067] Finally, in step S4, the system will generate a coverage report using the command npx nyc report --reporter=html --temp-dir=. / coverage. The report will contain detailed information such as line coverage, statement coverage, function coverage, branch coverage, etc. of the total coverage data, and will show the percentage of uncovered code and its functional description. The generated coverage report will be sent to the user end via email or other means for developers and testers to analyze and improve.

[0068] A second aspect of the present invention provides a front-end code coverage testing system, comprising:

[0069] Environment configuration module: used to execute the first Jenkins task and pull the front-end project from the Git server to the test server;

[0070] Automatic plug-in module: used to execute the second Jenkins task, automatically plug-in according to the code type of the front-end project, and obtain the front-end project after plug-in;

[0071] Code testing module: used to compile and package the front-end project after stub insertion, generate static resource files, and convert static resource files into front-end pages for testing;

[0072] Data collection module: used to execute the third Jenkins task, obtain the coverage data set in the test process according to the preset time interval and process it to obtain the total coverage data;

[0073] Report generation module: Generates coverage report based on total coverage data and sends the coverage report to the user end.

[0074] Part of the data in the above formula is calculated by removing the dimension and taking its numerical value. The formula is a formula closest to the actual situation obtained by software simulation of a large amount of collected data; the preset parameters and preset thresholds in the formula are set by technical personnel in this field according to actual conditions or obtained through simulation of a large amount of data.

[0075] Working principle of the present invention:

[0076] The present invention realizes automatic plugging, compilation and packaging, testing, coverage data collection and report generation of front-end engineering by automatically configuring Jenkins tasks. The whole process does not require manual intervention, which greatly improves the efficiency and accuracy of front-end code coverage testing. By supporting multiple front-end frameworks, it can be widely used in testing scenarios of different front-end engineering, providing efficient tool support for developers and testers.

[0077] The above embodiments are only used to illustrate the technical method of the present invention rather than to limit it. Although the present invention has been described in detail with reference to the preferred embodiments, those skilled in the art should understand that the technical method of the present invention may be modified or replaced by equivalents without departing from the spirit and scope of the technical method of the present invention.

Claims

1. A front-end code coverage testing method, characterized in that: include: S1, configure the first Jenkins task to obtain the front-end project, and configure the second Jenkins task to automatically insert the code according to the code type of the front-end project to obtain the front-end project after inserting the code; S2, compile and package the front-end project after stub insertion to obtain static resource files, and convert the static resource files into front-end pages for testing; S3, obtaining the coverage data set during the test process according to a preset time interval, and configuring the third Jenkins task to process the coverage data set to obtain the total coverage data; S4, generating a coverage report according to the total coverage data, and sending the coverage report to the user end.

2. A front-end code coverage testing method according to claim 1, characterized in that: The configuration of the first Jenkins task to obtain the front-end project includes: S11, use the first Jenkins task to pull the front-end project from the Git server to the test server; S12, obtaining the code type of the front-end project according to the code framework and directory structure of the front-end project; S13, write a shell script according to the code type of the front-end project, use the shell script to download the dependent plug-ins and stub plug-ins of the front-end project, and obtain the front-end project environment.

3. A front-end code coverage testing method according to claim 2, characterized in that: The method of downloading the dependency plug-ins and the plug-in plug-in of the front-end project by using the shell script includes: If the code type of the front-end project is Vite, use the vite-plugin-istanbul plug-in in the shell script to download the dependent plug-ins and the stub plug-in; If the code type of the front-end project is Webpack, use the webpack-plugin-istanbul plug-in in the shell script to download dependent plug-ins and stub plug-ins.

4. A front-end code coverage testing method according to claim 1, characterized in that: The second Jenkins task is configured to automatically insert piles according to the code type of the front-end project, including: If the code type of the front-end project is Vite, introduce the vite-plugin-istanbul plug-in in the vite.config.js file, configure the automatic instrumentation code and execute it to complete the automatic instrumentation of the front-end project code; If the code type of the front-end project is Webpack, introduce the webpack-plugin-istanbul plug-in in the webpack.config.js file, configure the automatic instrumentation code and execute it to complete the automatic instrumentation of the front-end project code.

5. A front-end code coverage testing method according to claim 4, characterized in that: The automatic instrumentation code includes: an introduced plug-in, an instrumented file directory configuration, a filtered file directory configuration, and a report storage location and storage format configuration.

6. A front-end code coverage testing method according to claim 1, characterized in that: The conversion of static resource files into front-end pages for testing includes: Store the static resource files in the www directory and compress them to obtain static files; Upload the static files to the file server of the mobile application, download the front-end code of the static files from the mobile application, and convert them into front-end pages for testing.

7. A front-end code coverage testing method according to claim 1, characterized in that: The step of obtaining a coverage data set during the test according to a preset time interval includes: Get the value of windows.__coverage__ of the front-end page according to the preset time interval and convert it into a json file to obtain several json files; Name several JSON files according to the acquisition time and version, and upload them to the test server to obtain the coverage data set.

8. A front-end code coverage testing method according to claim 1, characterized in that: The configuration of the third Jenkins task to process the coverage data set includes: The third Jenkins task is used to deduplicate and correct errors in the coverage data set and then merge them into the total coverage data.

9. A front-end code coverage testing method according to claim 1, characterized in that: The coverage report is obtained as follows: A coverage report of the total coverage data is generated using the command npx nyc report --reporter=html --temp-dir=. / coverage to obtain a coverage report; wherein the coverage report includes line coverage, statement coverage, function coverage, branch coverage, uncovered percentage, and functional description of the total coverage data.

10. A front-end code coverage testing system, applied to a front-end code coverage testing method according to any one of claims 1 to 9, characterized in that: include: Environment configuration module: used to execute the first Jenkins task and pull the front-end project from the Git server to the test server; Automatic plug-in module: used to execute the second Jenkins task, automatically plug-in according to the code type of the front-end project, and obtain the front-end project after plug-in; Code testing module: used to compile and package the front-end project after stub insertion, generate static resource files, and convert static resource files into front-end pages for testing; Data collection module: used to execute the third Jenkins task, obtain the coverage data set in the test process according to the preset time interval and process it to obtain the total coverage data; Report generation module: Generates coverage report based on total coverage data and sends the coverage report to the user end.

Images