Front-end component testing method, terminal equipment and storage medium
By generating a collection of target dependencies and building a test environment, the problem of difficulty in building a front-end component test environment is solved, efficient and accurate front-end component testing is achieved, and testing costs are reduced.
Patent Information
- Application Number
- CN202311348675.0
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2023-10-17
- Publication Date
- 2025-04-29
AI Technical Summary
In the prior art, it is difficult to build a front-end component test environment, resulting in low testing efficiency, low accuracy and high cost.
By getting front-end components and target service instances, a target dependency collection is generated and a test environment is built based on the collection. Then, the test data based on the test environment is obtained for debugging, and finally the test results of the front-end component are tested through user simulation operations.
It realizes automatic configuration and construction of the test environment, simplifies the component testing and construction process, improves testing efficiency and accuracy, and reduces technical requirements and testing costs for testers.
Smart Images
Figure CN119902969A_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of communication technology, and in particular to a front-end component testing method, terminal equipment and storage medium. Background Art
[0002] In the process of front-end software development, unit testing or end-to-end (E2E) testing based on DOM (simulating HTML elements of the user interface) and unit testing are usually used to test front-end components.
[0003] However, whether it is based on DOM end-to-end testing or unit testing, setting up the test environment in the test suite has always been a difficult point. On the one hand, the dependencies of different front-end components in the front-end test environment are generally different, so the corresponding test environments are also different, so the test environments corresponding to each front-end component are not reusable; on the other hand, the dependency building of the test environment requires the front-end coders to manually analyze the dependencies of the front-end components on the premise that they have a good understanding of the front-end application framework, and manually configure and build them. This requires the staff to have high requirements for the technical ability to write tests, and the nested dependencies of complex projects, complex modules and complex components will also cause the test environment configuration part to be time-consuming and prone to errors, making it difficult to write and promote front-end test cases, resulting in low front-end component testing efficiency, low test accuracy and high test costs. Summary of the invention
[0004] The main purpose of the embodiments of the present application is to provide a front-end component testing method, terminal device and storage medium, aiming to solve the problems of low front-end component testing efficiency, low testing accuracy and high testing cost caused by difficulties in building a testing environment.
[0005] In a first aspect, an embodiment of the present application provides a front-end component testing method, the method comprising:
[0006] Obtain a front-end component and a target service instance, generate a target dependency set according to the target service instance and the front-end component, and build a test environment according to the target dependency set;
[0007] Acquire test data generated based on the test environment, and debug the front-end component according to the test data to obtain a target front-end component;
[0008] A user simulation operation is obtained, and the target front-end component is tested through the user simulation operation to obtain a test result of the front-end component.
[0009] In a second aspect, an embodiment of the present application provides a terminal device, the terminal device comprising:
[0010] A processor, a memory, a computer program stored in the memory and executable by the processor, and a data bus for realizing connection and communication between the processor and the memory, wherein when the computer program is executed by the processor, the steps of the front-end component testing method as described above are realized.
[0011] In a third aspect, an embodiment of the present application provides a storage medium for computer-readable storage, wherein the storage medium stores one or more programs, and the one or more programs can be executed by one or more processors to implement the steps of the front-end component testing method as described above.
[0012] The front-end component testing method, terminal device and storage medium provided in the embodiment of the present application obtain the front-end component and the target service instance, generate the target dependency set according to the target service instance and the front-end component, and build the test environment according to the target dependency set; obtain the test data generated based on the test environment, and debug the front-end component according to the test data to obtain the target front-end component; obtain the user simulation operation, and test the target front-end component through the user simulation operation to obtain the test result of the front-end component. In this way, the automatic configuration and construction of the test environment can be realized, so that the tester can only focus on the test business use case, which greatly simplifies the complex, time-consuming and professional work in the component test construction link, improves the efficiency and test accuracy of the front-end component test, and at the same time relaxes the technical requirements for the tester and reduces the test cost. BRIEF DESCRIPTION OF THE DRAWINGS
[0013] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.
[0014] Figure 1 A schematic diagram of a flow chart of a front-end component testing method provided in an embodiment of the present application;
[0015] Figure 2 A flowchart of another front-end component testing method provided in an embodiment of the present application;
[0016] Figure 3 A schematic diagram of a front-end component with multiple nested sub-components and circular dependencies provided in an embodiment of the present application;
[0017] Figure 4 A component relationship tree diagram corresponding to a front-end component provided in an embodiment of the present application;
[0018] Figure 5A schematic diagram of a scenario of a traditional unit test or a DOM-based end-to-end test method of a related technology provided in an embodiment of the present application;
[0019] FIG6( a ) is a schematic diagram of a scenario corresponding to a front-end component of a related technology provided in an embodiment of the present application;
[0020] FIG6( b ) is a schematic diagram of a scenario corresponding to a front-end component provided in an embodiment of the present application;
[0021] Figure 7 A flowchart of another front-end component testing method provided in an embodiment of the present application;
[0022] Figure 8 A flowchart of another front-end component testing method provided in an embodiment of the present application;
[0023] Fig. 9 A flowchart of another front-end component testing method provided in an embodiment of the present application;
[0024] Fig.10 A flowchart of another front-end component testing method provided in an embodiment of the present application;
[0025] Fig.11 A schematic block diagram of the structure of a front-end component testing device provided in an embodiment of the present application;
[0026] Fig.12 A schematic block diagram of the structure of a terminal device provided in an embodiment of the present application. DETAILED DESCRIPTION
[0027] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.
[0028] The flowcharts shown in the accompanying drawings are only examples and do not necessarily include all the contents and operations / steps, nor must they be executed in the order described. For example, some operations / steps may also be decomposed, combined or partially merged, so the actual execution order may change according to actual conditions.
[0029] It should be understood that the terms used in this application specification are only for the purpose of describing specific embodiments and are not intended to limit the application. As used in this application specification and the appended claims, unless the context clearly indicates otherwise, the singular forms "a", "an" and "the" are intended to include plural forms.
[0030] In related technologies, unit testing refers to code-level testing protection for applications, which tests the smallest units in an application, generally including services, components, modules, etc. Unit testing can provide quick feedback, reduce debugging time, have better code coverage, and make code maintenance and reconstruction more secure; however, traditional front-end unit testing makes it difficult to build business testing scenarios that combine multiple modules and components. For complex business scenarios with multiple modules or components, the operating logic and the interaction between modules are extremely difficult to test and ensure quality.
[0031] End-to-end testing based on DOM (simulating HTML elements of the user operation interface) (such as Cypress and Selenium) means simulating the elements of the user's real page HTML (for example: button clicks) in a real browser environment as test case input to test the interaction results after the operation. This test verification method is also implemented through changes in interface data or HTM elements. Because its end-to-end test truly simulates the user's operation behavior in the browser, the test results are more realistic. Although end-to-end testing can easily build a complete test scenario, the test cases are time-consuming and the test results are slow to feedback. In addition, when the test case fails to execute, it is impossible to accurately locate the code problem and it is impossible to achieve code-level protection and coverage.
[0032] Whether it is based on DOM (simulating HTML elements of the user interface) end-to-end or traditional unit testing, setting up the test environment in the test suite has always been a difficult point. On the one hand, the front-end test environment is at the granularity of the tested component. Different dependencies of the tested components will result in different corresponding test environments, so there is no reusability; on the other hand, the test environment dependency building requires the front-end coders to manually analyze the dependencies of the tested components on the premise that they have a good understanding of the front-end application framework, and manually configure and build them, which limits the technical capabilities of the testers. In addition, due to the current situation of complex projects, complex modules and complex component nested dependencies, the test environment configuration part is time-consuming and prone to errors, making it difficult to write and promote front-end test cases.
[0033] Whether based on DOM end-to-end or unit testing, the end-to-end testing in the front-end testing scenario is implemented based on simulating the DOM elements of the user operation interface HTML and the DOM elements of the verification interface HTML, and does not test the end-to-end business logic from the business code level. For custom services and interface requests, the traditional method is to replace the method manually in the test case, and there is no coverage test for the business logic part of the method. For business scenarios with nested components, they are also tested by decomposing them into each component, and the business interaction between components is tested, so the end-to-end test scenario at the business code level cannot be implemented.
[0034] like Figure 1 As shown, the implementation of this application mainly includes four parts:
[0035] 1: Prepare the data part, mainly: set the interface return data (also need to consider the interface return success, failure and abnormal scenarios of return data settings) and for the third-party tool services involved in the front-end components, such as permission services, which cannot be called during the local execution of use cases and need to rewrite methods to achieve a closed loop of business logic.
[0036] 2: Initialize the test environment, based on scanning and analyzing the dependencies and component calls of the components under test, to achieve automatic configuration of the test suite test environment and customized injection of third-party stubbing services.
[0037] 3: Coders design test cases based on business.
[0038] 4: Execute the test case, automatically completing the replacement of custom dependencies and returning the data interface according to the scenario.
[0039] This application mainly completes the preloading of dependent services before the unit test case runs based on the existing unit test, through various methods such as automatic loading of basic services, manual loading, unified modular loading of public services, and data-driven loading; and then provides a unified encapsulation acceptance interface and tool set through various links such as use case writing and use case result verification to ensure the convenience of coders in implementing use case writing, reduce learning costs, provide convenience for use case implementation, etc., and improve the quality and efficiency of software development.
[0040] The embodiment of the present application provides a front-end component testing method, a terminal device and a storage medium. The method can be applied to a terminal device, wherein the terminal device can include a fixed terminal such as a mobile phone, a tablet computer, a personal digital assistant (PDA), and the server can be, for example, a separate server or a server cluster, but is not limited thereto. Thus, different models can be used to identify sensitive data from different dimensions, ensuring that the category of sensitive data can be accurately determined, improving data identification efficiency and accuracy, thereby protecting sensitive data and avoiding leakage of important information.
[0041] Please refer to Figure 2 , Figure 2 A flow chart of a front-end component testing method provided in an embodiment of the present application. The front-end component testing method can identify sensitive data from different dimensions through different models, ensure that the category of sensitive data can be accurately determined, improve data identification efficiency and accuracy, thereby protecting sensitive data and avoiding leakage of important information.
[0042] like Figure 2 As shown, the front-end component testing method may include S101 to S104.
[0043] S101. Obtain a front-end component and a target service instance, generate a target dependency set according to the target service instance and the front-end component, and build a test environment according to the target dependency set.
[0044] The front-end component may be a component to be tested in a front-end environment such as a browser, for example, an application. The target service instance may be a service instance annotated and identified in the dependency set of the front-end component. The target dependency set is a dependency set generated after updating the dependency set obtained by the initial scan. The test environment is the environment in which the front-end component is tested.
[0045] In some embodiments, the front-end component is scanned to obtain a dependency set corresponding to the front-end component, and the dependency set is updated according to the target service instance to obtain a target dependency set, thereby accurately scanning and obtaining the target dependency set corresponding to the front-end component.
[0046] Among them, the dependency set corresponding to the scanned front-end component can be the dependency set of all required to initialize the test environment of the tested front-end component, that is, the dependency set corresponding to the real service instance in the front-end component, which may include dependency information such as service, component declaration, module import, etc.
[0047] like Figure 3 As shown, Figure 3A schematic diagram of a front-end component with multiple nested sub-components and circular dependencies provided in an embodiment of the present application. Specifically, the imported dependent services (such as dependent tool services, dependent custom services, etc.) and imported sub-components of the front-end component are scanned; and the dependent services and sub-components of the dependent services and sub-components are scanned again, so as to generate a dependency relationship set corresponding to the front-end component according to the dependent services and sub-components and their corresponding dependent services and sub-components.
[0048] For example, taking the Angular framework project based on the TS language as an example, by scanning the Angular framework, all dependency sets required for initializing the test environment of the component under test can be obtained, including dependent services, component declarations, module imports, etc.
[0049] In some embodiments, the dependency set is scanned to obtain a first service instance, which is a corresponding service instance in the dependency set; the first service instance is replaced by the target service instance to update the dependency set to obtain a target dependency set. Thus, the first service instance can be automatically replaced by the service instance identified by the annotation during the test case execution to update the dependency set, thereby accurately generating the target dependency set.
[0050] Among them, the first service instance can be a corresponding service instance in the dependency set, that is, an instance formed by the corresponding real service in the front-end component.
[0051] Specifically, the dependency set corresponding to the front-end component can be scanned again to extract the instance formed by the corresponding real service in the front-end component to obtain the first service instance; then the first service instance is replaced with the target service instance, so as to update the dependency set and obtain the target dependency set.
[0052] In some embodiments, a component relationship tree diagram is generated according to a target dependency relationship set; the component relationship tree diagram is parsed to obtain a dependency node set and a child node set corresponding to the front-end component; environment configuration information is generated according to the dependency node set and the child node set corresponding to the front-end component, and a test environment is configured according to the environment configuration information. In this way, the test environment corresponding to the front-end component can be accurately configured.
[0053] The component relationship tree diagram is a tree diagram formed by each node in the front-end component, which is used to represent the relationship between each node in the front-end component. The dependent node set is used to represent the set of each dependent node in the front-end component, and the child node set is used to represent the set of each child node in the front-end component. The environment configuration information is used to represent the basic information of the test environment configuration.
[0054] Specifically, the dependency / component reference relationship of the front-end component can be represented in a tree structure according to the target dependency set, thereby generating a component relationship tree diagram.
[0055] like Figure 4 As shown, exemplarily, the reference relationship between each dependency module and the corresponding dependency module, the reference relationship between each subcomponent and the corresponding dependency module, and the reference relationship between each subcomponent and the corresponding subcomponent can be extracted through the target dependency set; and then the above reference relationships are combined to generate a component relationship tree diagram corresponding to the front-end component.
[0056] Specifically, the component relationship tree diagram is parsed to obtain multiple dependent nodes and multiple child nodes, and the multiple dependent nodes and multiple child nodes are integrated to obtain the dependent node set and child node set corresponding to the front-end component; the node information of each dependent node and each child node in the dependent node set and child node set corresponding to the front-end component is extracted, and the environment configuration information is generated according to the node information of each dependent node and each child node, and finally the test environment is configured according to the environment configuration information.
[0057] Exemplarily, each dependent node and each child node in the dependent node set and child node set corresponding to the front-end component may be scanned to extract the corresponding environment configuration information.
[0058] like Figure 5 As shown, in traditional unit testing or DOM-based end-to-end testing methods, the processing of custom services and data request interfaces is done by stubbing services / requests, and the stubbing service / request interface cannot be tested in terms of business logic. In the multi-nested component scenario, for the tested front-end component, the sub-components are tested individually, and the interaction between component dependencies is eliminated by stubbing. However, the test of the interaction between multiple components in the complete business scenario cannot be covered. In the end-to-end testing concept, users hope to test the entire function chain through given conditions and inputs (the input may be the user's operation or the triggering of the function), while directly using the existing end-to-end testing framework (such as Cypress and Selenium) requires direct operation of DOM elements, which is slow in the development process and difficult to maintain. Moreover, since it is not a code-level test, it is impossible to build test cases through the code level, and the user's behavior can only be simulated through the DOM. The traditional testing method leads to low efficiency, low test accuracy and high test cost of front-end component testing.
[0059] As shown in Figure 6(a), the traditional UT will pile all the dependent layers of the front-end components and no longer pay attention to the logic between the combinations. As shown in Figure 6(b), this application mainly applies the end-to-end idea to the front-end development, provides a front-end test framework based on Karma and TS language, and automatically replaces the custom service and interface request results during the test case execution through the annotation idea, and provides the way of introducing the descendant component node instance through the front-end component operation, so as to help the development of different business test scenarios. The end-to-end construction, and ensure that the real component interaction and the communication or interaction between components / services are used in the entire test process, realize the integrity and accuracy verification of the entire business process of the front-end unit test, and the test results are quickly fed back. In addition, when the test case execution fails, the code problem can be accurately located to achieve code-level protection and coverage. In addition, the test case of the business scenario is sunk to the development stage of the unit test, and the coding implementation can quickly verify the correctness of its implementation, and quickly feedback through the actual results of the unit test case, thereby shortening the feedback cycle of the result verification of software development, and reducing the original FT (functional test) feedback cycle to the hour level. Through scenario-based design and functional acceptance of use cases, we can ensure that the logic finally implemented can meet the real scenario results after external interface encapsulation, reduce the joint debugging time of multi-module interactions, further shorten the software development time and increase the quality of software development.
[0060] S102: Acquire test data generated based on the test environment, and debug the front-end component according to the test data to obtain a target front-end component.
[0061] The test data may be data returned by the real interface during the unit test run. The target front-end component is the front-end component after the component parameters are debugged using the test data.
[0062] In some embodiments, a test case is obtained, and the test case is run based on a test environment, and a target interface is monitored when the test case is run; multiple interface data returned by the target interface based on the test case is obtained, and the multiple interface data are screened to obtain test data. In this way, the interface data can be accurately screened to obtain test data.
[0063] The test case may be a sample for testing the front-end component, and the target interface may be the real interface returned by the data.
[0064] Specifically, corresponding test cases can be constructed according to functional testing requirements, and test cases can be run based on the test environment. When running the test cases, the target interface can be listened to to receive data returned by the target interface; multiple interface data returned by the target interface based on the test case can be obtained, and the multiple interface data can be filtered to obtain test data.
[0065] Exemplarily, the test data may include the core network information interface return value being stubbed as successful, or may be the return value of the task details query interface, and so on.
[0066] In some embodiments, each interface data is parsed to obtain a test scenario corresponding to each interface data; and multiple interface data are screened according to the test scenario corresponding to each interface data to obtain test data. Thus, the corresponding test data can be accurately screened according to the test scenario.
[0067] Among them, the test scenarios may include core network setting addition scenarios or task viewing process scenarios, etc.
[0068] Specifically, the interface data is parsed to obtain the interface type corresponding to the interface, the data type of the interface data, etc., so that the test scenario corresponding to the interface data can be determined; according to the test scenario corresponding to each interface data, multiple interface data are screened to obtain test data.
[0069] Exemplarily, if the data returned by the target interface includes interface data A, interface data B, and interface data C, and the test scenarios corresponding to interface data A, interface data B, and interface data C are determined to be test scenario a, test scenario b, and test scenario a, respectively. According to the test scenarios corresponding to each interface data, multiple interface data are screened, for example, the interface data corresponding to test scenario a is screened out, that is, interface data A and interface data C are used as test data.
[0070] It should be noted that the return data of the target interface can be set in advance (at the same time, the return data settings under successful, failed and abnormal scenarios of the interface need to be considered) and the third-party tool services involved in the front-end components, such as permission services, cannot be called during the local execution of the use case and need to rewrite the methods to achieve a closed loop of business logic.
[0071] Specifically, the real interface return data during the unit test run can be replaced with the real test data required by the specific test scenario, thereby debugging the component parameters of the front-end component to obtain the target front-end component.
[0072] S103: Acquire user simulation operations, and test the target front-end component through the user simulation operations to obtain test results of the front-end component.
[0073] The user simulation operation is to simulate the real behavior of the user on the front-end component, such as simulating the user inputting various information contents, or simulating entering the task details interface, or simulating clicking the start analysis button, etc. The test results of the front-end component are used to represent the functional test effect of the front-end component.
[0074] In some embodiments, the callback function and functional test requirements corresponding to the test case are obtained, and based on the callback function, the user simulation operation is generated according to the functional test requirements. In this way, the user simulation operation corresponding to the target front-end component can be accurately generated, thereby completing the test of the front-end component.
[0075] Among them, the callback function is used to call the user simulation operation, and the functional test requirements may include core network setting addition requirements or task viewing requirements, etc.
[0076] For example, if the functional testing requirement is to add a requirement to the core network setting, the test case can be parsed to obtain the callback function and functional testing requirement corresponding to the test case; based on the callback function, a user simulation operation is generated according to the functional testing requirement to simulate the operation of the user inputting various information contents.
[0077] In some embodiments, the target front-end component is tested through user simulation operation to obtain the component display content corresponding to the target front-end component; the component display content is verified to obtain the verification result, and the test result of the front-end component is generated according to the component display content and the verification result. In this way, the target front-end component can be tested and verified, thereby accurately generating the test result of the front-end component.
[0078] The component display content is the content displayed by the component after the target front-end component performs the user simulation operation. The verification result is the result after verifying the component display content, and the verification result may include the test result meeting expectations and the test result not meeting expectations.
[0079] Exemplarily, if the test scenario is to add a scenario to the core network setting, the user simulation operation is to simulate the operation of the user inputting various information contents, so as to test the target front-end component and obtain the component display content corresponding to the target front-end component; then determine whether the component display content can realize the function set by the core network. If the function set by the core network can be realized, the verification result is that the test result meets expectations; if the function set by the core network cannot be realized, the verification result is that the test result does not meet expectations. Finally, the test result of the front-end component is generated according to the component display content and the verification result.
[0080] Exemplarily, if the test scenario is a task viewing scenario, the user simulates the operation of entering the task details interface, thereby testing the target front-end component and obtaining the component display content corresponding to the target front-end component; then determining whether the component display content can realize the task viewing function. If the task viewing function can be realized, the verification result is that the test result meets expectations; if the task viewing function cannot be realized, the verification result is that the test result does not meet expectations. Finally, the test result of the front-end component is generated according to the component display content and the verification result.
[0081] like Figure 7 As shown, the front-end component testing method provided by the embodiment of the present application is introduced by taking the Angular framework project based on the TS language as an example, which specifically includes S201-S207.
[0082] S201. Scan and obtain the dependencies of the front-end components.
[0083] S202. Replace the dependent service identified by the annotation.
[0084] S203. Build a test environment for UT operation.
[0085] S204: Test case runs.
[0086] S205. Control the interface return value during UT operation to replace it with real FT data.
[0087] S206: Simulate user operation through callback.
[0088] S207: Verify and generate test results of the target front-end component.
[0089] It should be noted that when multiple sets of unit tests are run, the test framework is initialized multiple times. If the framework has already scanned all classes under the storage path, the content in the cache can be used directly without reloading. The above behavior realizes the replacement of FT (functional test) by UT (unit test). This method breaks the limitations of unit testing and extends the comprehensiveness of unit testing to the functional testing effect of FT. The total test time of a single test case is reduced from several hours to several minutes.
[0090] like Figure 8 As shown, the front-end component testing method provided by the embodiment of the present application is introduced by taking the core network setting adding interface and adding function testing as an example. Thus, it can be achieved that: click the add core network button, a row of information that can be set and input is added to the table, fill in the corresponding content, and the setting is successful when each input check is met. Specifically including S301-S307.
[0091] S301. Write a test case, where the front-end component is CnEmsSettingPageComponent.
[0092] S302. Automatically generate the test environment required by the front-end components.
[0093] S303: Run the test case.
[0094] S304. Set the return value of the interface for setting the core network information as success.
[0095] S305, simulating the user's input operation of various information contents through the callback function, and finally simulating the confirmation of the input.
[0096] S306: Check whether the global prompt information contains a success prompt.
[0097] S307. The unit test completes the functional test effect and generates the test results of the target front-end component.
[0098] By using the above-mentioned embodiment to test the front-end components, it only takes 5 minutes to write the use case and only 0.56 seconds to run the use case, so that the tester can focus only on testing the business use case, which greatly simplifies the complex, time-consuming and professional work in the component test setup process, improves the efficiency and accuracy of the front-end component testing, and at the same time relaxes the technical requirements for testers and reduces the testing cost.
[0099] like Fig. 9 As shown, the front-end component testing method provided by the embodiment of the present application is introduced by taking the task viewing process as an example. Thus, it is possible to achieve the effect of querying the task details interface according to the task number in the url route, and constructing the task details interface according to the return value of the interface. Specifically including S401-S408.
[0100] S401. Write a test case, where the front-end component is TaskShowComponent.
[0101] S402. Replace the underlying routing service dependency through annotation so that it returns the routing parameter taskId 2 required by the test case.
[0102] S403. Automatically generate the test environment required by the front-end components.
[0103] S404: Run the test case.
[0104] S405: Replace the return value of the query task details interface with data in the real environment.
[0105] S406, simulate entering the task details interface.
[0106] S407: Verify whether the basic task information, task tracking object, and task tracking event are correct.
[0107] S408. Unit testing completes the functional testing effect.
[0108] By using the above-mentioned embodiment to test the front-end components, it only takes 10 minutes to write the use case and only 1.25 seconds to run the use case, so that the tester can focus only on testing the business use case, which greatly simplifies the complex, time-consuming and professional work in the component test setup process, improves the efficiency and accuracy of the front-end component testing, and at the same time relaxes the technical requirements for testers and reduces the testing cost.
[0109] like Fig.10 As shown, the front-end component testing method provided by the embodiment of the present application is introduced by taking a specific business scenario as an example. Thus, it can be achieved that: there are two sub-components in the front-end component, and the front-end component and the sub-component each have their own dependencies and sub-components. When we click the button in sub-component 1, a request is sent to the back-end, and a timing diagram of sub-component 1 is generated according to the content of the request, and the effect of modifying the display data in the root component and sub-component 2 is linked. Specifically including S501-S507.
[0110] S501. Write a test case, where the front-end component is TaskShowComponent.
[0111] S502. Automatically generate the test environment required by the front-end component, including all dependencies of the sub-components.
[0112] S503: Run the test case.
[0113] S504: Replace the return value of the start analysis interface with data in the real environment. Assume that 10 correct data are returned.
[0114] S505, obtain the descendant component method, obtain the child component 1 from the root component, and simulate clicking the start analysis button through the callback function of the button click.
[0115] S506. Verify that the 10 data in the timing diagram of subcomponent 1 are correct, the drop-down box of subcomponent 2 is linked correctly, the displayed data is correct, and the Name of the currently selected data is displayed in the root component.
[0116] S507. Unit testing completes the functional testing effect.
[0117] By using the above-mentioned embodiment to test the front-end components, it only takes 20 minutes to write the use cases and only 10 seconds to run the use cases, so that the testers can focus only on testing business use cases, which greatly simplifies the complex, time-consuming and professional work in the component test setup process, improves the efficiency and accuracy of the front-end component testing, and at the same time relaxes the technical requirements for testers and reduces the testing costs.
[0118] The front-end component testing method, terminal device and storage medium provided in the embodiment of the present application obtain the front-end component and the target service instance, generate the target dependency set according to the target service instance and the front-end component, and build the test environment according to the target dependency set; obtain the test data generated based on the test environment, and debug the front-end component according to the test data to obtain the target front-end component; obtain the user simulation operation, and test the target front-end component through the user simulation operation to obtain the test result of the front-end component. In this way, the automatic configuration and construction of the test environment can be realized, so that the tester can only focus on the test business use case, which greatly simplifies the complex, time-consuming and professional work in the component test construction link, improves the efficiency and test accuracy of the front-end component test, and at the same time relaxes the technical requirements for the tester and reduces the test cost.
[0119] Specifically, this application mainly completes the preloading of dependent services before the unit test case runs on the basis of existing unit testing, through various methods such as automatic loading of basic services, manual loading, unified modular loading of public services, and data-driven loading; and then provides a unified encapsulation acceptance interface and tool set through various links such as use case writing and use case result verification to ensure the convenience of coders in implementing use case writing, reduce learning costs, provide convenience for use case implementation, etc., thereby improving the quality and efficiency of software development.
[0120] See also Fig.11 , Fig.11 It is a schematic block diagram of a front-end component testing device provided in an embodiment of the present application. The front-end component testing device can be configured in a server to execute the aforementioned front-end component testing method.
[0121] like Fig.11 As shown, the front-end component testing device 600 includes: an environment construction module 601, a component debugging module 602, and a component testing module 603.
[0122] The environment construction module 601 is used to obtain a front-end component and a target service instance, generate a target dependency set according to the target service instance and the front-end component, and construct a test environment according to the target dependency set;
[0123] A component debugging module 602 is used to obtain test data generated based on the test environment, and debug the front-end component according to the test data to obtain a target front-end component;
[0124] The component testing module 603 is used to obtain user simulation operations, and test the target front-end component through the user simulation operations to obtain the test results of the front-end component.
[0125] The environment construction module 601 is also used to scan the front-end component to obtain the dependency set corresponding to the front-end component; update the dependency set according to the target service instance to obtain the target dependency set.
[0126] The environment construction module 601 is also used to scan and process the dependency set to obtain a first service instance, which is the corresponding service instance in the dependency set; the first service instance is replaced by the target service instance to update the dependency set to obtain a target dependency set.
[0127] The environment construction module 601 is also used to generate a component relationship tree diagram based on the target dependency set; parse the component relationship tree diagram to obtain the dependency node set and child node set corresponding to the front-end component; generate environment configuration information based on the dependency node set and child node set corresponding to the front-end component, and configure the test environment according to the environment configuration information.
[0128] The component debugging module 602 is also used to obtain test cases, run the test cases based on the test environment, and monitor the target interface when running the test cases; obtain multiple interface data returned by the target interface based on the test cases, and filter the multiple interface data to obtain test data.
[0129] The component debugging module 602 is further used to parse each of the interface data to obtain a test scenario corresponding to each of the interface data; and filter the multiple interface data according to the test scenario corresponding to each of the interface data to obtain test data.
[0130] The component testing module 603 is further used to obtain the callback function and functional testing requirements corresponding to the test case; based on the callback function, generate the user simulation operation according to the functional testing requirements.
[0131] The component testing module 603 is further used to test the target front-end component through the user simulation operation to obtain the component display content corresponding to the target front-end component; verify the component display content to obtain the verification result, and generate the test result of the front-end component according to the component display content and the verification result.
[0132] It should be noted that those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the above-described devices and modules and units can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.
[0133] The method and apparatus of the present application can be used in many general or special computing system environments or configurations, such as personal computers, server computers, handheld or portable devices, tablet devices, multiprocessor systems, microprocessor-based systems, set-top boxes, programmable consumer terminal devices, network PCs, minicomputers, mainframe computers, and distributed computing environments including any of the above systems or devices.
[0134] See also Fig.12 , Fig.12 A schematic block diagram of the structure of a terminal device provided in an embodiment of the present application.
[0135] like Fig.12 As shown, the terminal device 700 may include a processor 701 and a memory 702, and the processor 701 and the memory 702 are connected via a bus 703, such as an I2C (Inter-integrated Circuit) bus.
[0136] In an exemplary embodiment, the processor 701 can be used to provide computing and control capabilities to support the operation of the entire terminal device. The processor 701 can be a central processing unit (CPU), and the processor 701 can also be other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA) or other programmable logic devices, discrete gates or transistor logic devices, discrete hardware components, etc. Among them, the general-purpose processor can be a microprocessor or the processor can also be any conventional processor, etc.
[0137] Specifically, the memory 702 may be a Flash chip, a read-only memory (ROM) disk, an optical disk, a USB flash drive, or a mobile hard disk.
[0138] Those skilled in the art will understand that Fig.12 The structure shown in the figure is only a block diagram of a partial structure related to the embodiment of the present application, and does not constitute a limitation on the terminal device to which the embodiment of the present application is applied. The specific server may include more or fewer components than shown in the figure, or combine certain components, or have a different arrangement of components.
[0139] Among them, the processor 701 is used to run the computer program stored in the memory, and implement any front-end component testing method provided in the embodiments of the present application when executing the computer program.
[0140] In one embodiment, the processor 701 is used to run a computer program stored in a memory, and implement the following steps when executing the computer program: obtain a front-end component and a target service instance, generate a target dependency set based on the target service instance and the front-end component, and build a test environment based on the target dependency set; obtain test data generated based on the test environment, and debug the front-end component based on the test data to obtain a target front-end component; obtain a user simulation operation, and test the target front-end component through the user simulation operation to obtain a test result of the front-end component.
[0141] In one embodiment, when implementing the generation of the target dependency set based on the target service instance and the front-end component, the processor 701 is used to implement: scanning the front-end component to obtain the dependency set corresponding to the front-end component; updating the dependency set according to the target service instance to obtain the target dependency set.
[0142] In one embodiment, when the processor 701 implements the updating of the dependency set according to the target service instance to obtain the target dependency set, it is used to implement: scanning the dependency set to obtain a first service instance, where the first service instance is the corresponding service instance in the dependency set; replacing the first service instance with the target service instance to update the dependency set to obtain the target dependency set.
[0143] In one embodiment, when implementing the construction of the test environment according to the target dependency set, the processor 701 is used to implement: generating a component relationship tree diagram according to the target dependency set; parsing the component relationship tree diagram to obtain a dependency node set and a child node set corresponding to the front-end component; generating environment configuration information according to the dependency node set and the child node set corresponding to the front-end component, and configuring the test environment according to the environment configuration information.
[0144] In one embodiment, when implementing the acquisition of test data generated based on the test environment, the processor 701 is used to implement: obtaining a test case, running the test case based on the test environment, and listening to a target interface when running the test case; obtaining multiple interface data returned by the target interface based on the test case, and filtering the multiple interface data to obtain test data.
[0145] In one embodiment, when implementing the filtering of the multiple interface data to obtain test data, the processor 701 is used to implement: parsing each of the interface data to obtain a test scenario corresponding to each of the interface data; and filtering the multiple interface data according to the test scenario corresponding to each of the interface data to obtain test data.
[0146] In one embodiment, when implementing the acquisition of the user simulation operation, the processor 701 is used to implement: acquiring the callback function and functional testing requirements corresponding to the test case; and generating the user simulation operation according to the functional testing requirements based on the callback function.
[0147] In one embodiment, when the processor 701 implements the testing of the target front-end component through the user simulation operation to obtain the test result of the front-end component, it is used to implement: testing the target front-end component through the user simulation operation to obtain the component display content corresponding to the target front-end component; verifying the component display content to obtain the verification result, and generating the test result of the front-end component based on the component display content and the verification result.
[0148] It should be noted that technicians in the relevant field can clearly understand that for the convenience and simplicity of description, the specific working process of the network device described above can refer to the corresponding process in the aforementioned terminal capability reporting method embodiment, and will not be repeated here.
[0149] An embodiment of the present application also provides a storage medium for computer-readable storage, wherein the storage medium stores one or more programs, and the one or more programs can be executed by one or more processors to implement the steps of any front-end component testing method provided in the description of the embodiment of the present application.
[0150] The storage medium may be an internal storage unit of the terminal device described in the foregoing embodiment, such as a hard disk or memory of the terminal device. The storage medium may also be an external storage device of the terminal device, such as a plug-in hard disk, a smart memory card (Smart Media Card, SMC), a secure digital (SecureDigital, SD) card, a flash card (Flash Card), etc., equipped on the terminal device.
[0151] It will be appreciated by those skilled in the art that all or some of the steps, systems, and functional modules / units in the methods disclosed above may be implemented as software, firmware, hardware, and appropriate combinations thereof. In a hardware embodiment, the division between the functional modules / units mentioned in the above description does not necessarily correspond to the division of physical components; for example, a physical component may have multiple functions, or a function or step may be performed by several physical components in cooperation. Some or all physical components may be implemented as software executed by a processor, such as a central processing unit, a digital signal processor, or a microprocessor, or implemented as hardware, or implemented as an integrated circuit, such as an application-specific integrated circuit. Such software may be distributed on a computer-readable medium, which may include a computer storage medium (or non-transitory medium) and a communication medium (or temporary medium). As known to those skilled in the art, the term computer storage medium includes volatile and non-volatile, removable and non-removable media implemented in any method or technology for storing information (such as computer-readable instructions, data structures, program modules, or other data). Computer storage media include, but are not limited to, RAM, ROM, EEPROM, flash memory or other memory technology, CD-ROM, digital versatile disks (DVD) or other optical disk storage, magnetic cassettes, magnetic tapes, magnetic disk storage or other magnetic storage devices, or any other medium that can be used to store the desired information and can be accessed by a computer. In addition, it is well known to those of ordinary skill in the art that communication media typically contain computer-readable instructions, data structures, program modules, or other data in a modulated data signal such as a carrier wave or other transport mechanism, and may include any information delivery media.
[0152] It should be understood that the term "and / or" used in the present specification and the appended claims refers to any combination of one or more of the associated listed items and all possible combinations, including these combinations. It should be noted that, in this article, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or system including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or system. In the absence of further restrictions, an element defined by the sentence "including a..." does not exclude the presence of other identical elements in the process, method, article or system including the element.
[0153] The serial numbers of the embodiments of the present application are only for description and do not represent the advantages and disadvantages of the embodiments. The above are only specific embodiments of the present application, but the protection scope of the present application is not limited thereto. Any technician familiar with the technical field can easily think of various equivalent modifications or replacements within the technical scope disclosed in the present application, and these modifications or replacements should be included in the protection scope of the present application. Therefore, the protection scope of the present application shall be based on the protection scope of the claims.
Claims
1. A front-end component testing method, characterized in that: The method comprises: Obtain a front-end component and a target service instance, generate a target dependency set according to the target service instance and the front-end component, and build a test environment according to the target dependency set; Acquire test data generated based on the test environment, and debug the front-end component according to the test data to obtain a target front-end component; A user simulation operation is obtained, and the target front-end component is tested through the user simulation operation to obtain a test result of the front-end component.
2. The method according to claim 1, characterized in that: The generating a target dependency set according to the target service instance and the front-end component includes: Scan the front-end component to obtain a dependency relationship set corresponding to the front-end component; The dependency set is updated according to the target service instance to obtain a target dependency set.
3. The method according to claim 2, characterized in that The updating of the dependency set according to the target service instance to obtain a target dependency set includes: Scanning the dependency set to obtain a first service instance, where the first service instance is a corresponding service instance in the dependency set; The first service instance is replaced by the target service instance to update the dependency set, thereby obtaining a target dependency set.
4. The method according to claim 1, characterized in that: The step of constructing a test environment according to the target dependency set includes: Generate a component relationship tree diagram according to the target dependency relationship set; Parsing the component relationship tree diagram to obtain a dependent node set and a child node set corresponding to the front-end component; Environmental configuration information is generated according to the dependent node set and the child node set corresponding to the front-end component, and a test environment is configured according to the environmental configuration information.
5. The method according to claim 1, characterized in that The acquiring of test data generated based on the test environment includes: Acquire a test case, run the test case based on the test environment, and monitor a target interface when running the test case; Acquire multiple interface data returned by the target interface based on the test case, and filter the multiple interface data to obtain test data.
6. The method according to claim 5, characterized in that The screening of the plurality of interface data to obtain test data comprises: Parsing each of the interface data to obtain a test scenario corresponding to each of the interface data; The plurality of interface data are screened according to the test scenarios corresponding to the respective interface data to obtain test data.
7. The method according to claim 1, characterized in that The obtaining of user simulation operation includes: Obtain the callback function and functional testing requirements corresponding to the test case; Based on the callback function, the user simulation operation is generated according to the functional testing requirement.
8. The method according to claim 1, characterized in that The testing of the target front-end component by the user simulation operation to obtain the test result of the front-end component includes: Testing the target front-end component through the user simulation operation to obtain component display content corresponding to the target front-end component; The component display content is verified to obtain a verification result, and a test result of the front-end component is generated according to the component display content and the verification result.
9. A terminal device, characterized in that: The terminal device comprises: A processor, a memory, a computer program stored in the memory and executable by the processor, and a data bus for realizing connection and communication between the processor and the memory, wherein when the computer program is executed by the processor, the steps of the front-end component testing method as described in any one of claims 1 to 8 are realized.
10. A storage medium for computer-readable storage, characterized in that: The storage medium stores one or more programs, and the one or more programs can be executed by one or more processors to implement the steps of the front-end component testing method as described in any one of claims 1 to 8.