User Interface Testing Method, Device, Electronic Device and Storage Medium for Components

Abstract

The present invention provides a method, apparatus, electronic device and storage medium for user interface testing of components. The method includes: obtaining a plurality of comparison test cases based on a comparison component library, and obtaining a plurality of benchmark test cases based on a benchmark component library; obtaining comparison combined components based on the comparison component library through composite pattern abstraction and permutation and combination of component elements, and obtaining benchmark combined components based on the benchmark component library; obtaining comparison combined test cases based on the comparison combined components, and obtaining benchmark combined test cases based on the benchmark combined components; performing user interface testing on the comparison component elements in the comparison component library based on the comparison test cases and the benchmark test cases, as well as the comparison combined test cases and the benchmark combined test cases, to obtain test results. By combining component elements and performing UI testing on the combined components in combination with the component elements, the present invention can quickly locate single-component errors with higher accuracy.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular, to a method, device, electronic device, and storage medium for testing the user interface of components. Background Art

[0002] With the development of World Wide Web (WEB) front-end technology and the emergence of various JavaScript (JS) frameworks, major component libraries emerge in an endless stream. By using component libraries, the styles of pages can be standardized, and by combining basic components in a personalized manner, business components can be precipitated, thereby improving the development efficiency of developers.

[0003] The quality of components affects the external presentation effect of pages. Therefore, it is necessary to test the quality of components. At present, the quality testing of components includes two aspects: functional testing and user interface (UI) style testing, both of which can be attributed to the category of unit testing.

[0004] However, when components are used in the production environment, they often appear in a combined form, and the styles will affect each other after multiple components are combined. At present, the testing of components generally tests each component separately, and testing a component alone cannot guarantee the correctness of the display effect when combined with other components. Summary of the Invention

[0005] The present invention provides a method, device, electronic device, and storage medium for testing the user interface of components, which are used to solve the defects of inaccurate testing in the prior art when used in the combined form of components, and achieve the goal of effectively reducing the mutual influence between components and improving the testing accuracy in the combined form of components.

[0006] The present invention provides a method for testing the user interface of components, including:

[0007] Based on a comparison component library, obtain multiple comparison test cases, and based on a reference component library, obtain multiple reference test cases, where there are overlapping component elements between the comparison component library and the reference component library;

[0008] Through combination mode abstraction and permutation and combination of component elements, obtain comparison combined components based on the comparison component library, and obtain reference combined components based on the reference component library;

[0009] Based on the comparison combined components, obtain comparison combined test cases, and based on the reference combined components, obtain reference combined test cases;

[0010] Based on the comparison test cases and the benchmark test cases, as well as the comparison combined test cases and the benchmark combined test cases, perform a user interface test on the comparison component elements in the comparison component element library to obtain test results.

[0011] The present invention also provides a user interface test device for components, including:

[0012] A component element use case module, configured to obtain a plurality of comparison test cases based on a comparison component element library, and obtain a plurality of benchmark test cases based on a benchmark component element library, where there are overlapping component elements between the comparison component element library and the benchmark component element library;

[0013] A component combination module, configured to obtain comparison combined components based on the comparison component element library through combination mode abstraction and permutation and combination of component elements, and obtain benchmark combined components based on the benchmark component element library;

[0014] A combined component use case module, configured to obtain comparison combined test cases based on the comparison combined components, and obtain benchmark combined test cases based on the benchmark combined components;

[0015] A test output module, configured to perform a user interface test on the comparison component elements in the comparison component element library based on the comparison test cases and the benchmark test cases, as well as the comparison combined test cases and the benchmark combined test cases, to obtain test results.

[0016] The present invention also provides an electronic device, including a memory, a processor, and a program or instruction stored on the memory and executable on the processor. When the processor executes the program or instruction, the steps of the user interface test method for components as described in any one of the above are implemented.

[0017] The present invention also provides a non-transitory computer-readable storage medium, on which a program or instruction is stored. When the program or instruction is executed by a computer, the steps of the user interface test method for components as described in any one of the above are implemented.

[0018] The user interface test method, device, electronic device, and storage medium for components provided by the present invention are based on basic component elements, automatically perform permutation and combination of component elements to obtain combined components by abstracting common modes of component element combinations, and further perform UI tests on the combined components in combination with component elements, which can quickly locate deep-level errors of a single component and have higher accuracy. Description of the Drawings

[0019] To more clearly illustrate the technical solutions in the present invention or the prior art, the following will briefly introduce the drawings required for the description of the embodiments of the present invention or the prior art. Obviously, the drawings in the following description are some embodiments of the present invention. For those of ordinary skill in the art, without creative efforts, other drawings can also be obtained based on these drawings.

[0020] Figure 1 One of the flow diagrams of the user interface testing method for the components provided by the present invention;

[0021] Figure 2 The flow diagram for obtaining comparison test cases in the user interface testing method for components provided by the present invention;

[0022] Figure 3 Another flow diagram of the user interface testing method for the components provided by the present invention;

[0023] Figure 4 The structural diagram of the user interface testing device for the components provided by the present invention;

[0024] Figure 5 The physical structure diagram of the electronic device provided by the present invention. Detailed implementation manners

[0025] To make the objectives, technical solutions, and advantages of the present invention clearer, the following will clearly and completely describe the technical solutions in the present invention in conjunction with the drawings in the present invention. Obviously, the described embodiments are some, but not all, of the embodiments of the present invention. All other embodiments obtained by those of ordinary skill in the art without creative efforts based on the embodiments in the present invention belong to the scope of protection of the present invention.

[0026] Aiming at the problems of inaccurate testing when the prior art is used for the combined form of components, based on component elements, by abstracting the common modes of component element combinations, automatically performing permutations and combinations of component elements to obtain combined components, and further combining component elements to perform UI testing on the combined components, it can quickly locate deep-level errors of a single component element with higher accuracy. The following will specifically expand and introduce the present invention through multiple embodiments in conjunction with the drawings.

[0027] Figure 1 One of the flow diagrams of the user interface testing method for the components provided by the present invention, as Figure 1 shown, the method includes:

[0028] S101, obtaining a plurality of comparison test cases based on a comparison component element library, and obtaining a plurality of benchmark test cases based on a benchmark component element library.

[0029] Among them, there are overlapping component elements between the comparison component element library and the reference component element library.

[0030] It can be understood that the present invention can collect the basic materials of test cases in advance, including preparing a reference component element library and creating a new component element library. It can be understood that in an actual web development scenario, the new component element library can be customized and combined as needed to precipitate the desired business components, thereby improving the development efficiency of developers. However, to ensure the quality of the component elements in the new component element library, it needs to be tested. Therefore, it can be used as a comparison component element library for comparative testing with the reference component element library.

[0031] Among them, the reference component element library contains reference component elements, that is, single components that have not been combined, and these single components are known correct components of the user interface (UI). The comparison component element library is a new component library with component overlaps with the reference component element library. It can be understood that component elements are essentially a type of component and are the smallest unit components, with the attributes of components.

[0032] Only when there are overlapping component elements in both the comparison component element library and the reference component element library can comparative verification and testing be carried out. It can be understood that the number of overlapping component elements is not restricted. There can be only one overlapping component element, or all can overlap.

[0033] For example, if component element library A contains three component elements a, b, and c, and component element library B contains four component elements a, b, c, and d, and the component elements in component element library A are all known to be correct, then component element library A can be used as the reference component element library to test the component elements in component element library B (as the comparison component element library).

[0034] Among them, the reference component elements in the reference component element library and the comparison component elements in the comparison component element library are the basic materials for UI testing and are used to form test cases for testing. A component element can contain all its related code and other related static resources. The code generally includes html files, js files, and css files, and static resources such as pictures and font files. A component element has a unique ID, and a component element library is a collection of multiple component elements.

[0035] On the basis of determining the reference component element library and the comparison component element library, the reference component elements and comparison component elements therein can be respectively converted into UI test cases that can be tested, usually rendered pages.

[0036] That is, the reference component elements and the comparison component elements are respectively rendered into corresponding static interfaces to obtain static UI test cases, and dynamic interaction UI test cases for the static interfaces are determined based on the static UI test cases, so as to obtain multiple reference test cases corresponding to multiple reference component elements and multiple comparison test cases corresponding to multiple comparison component elements.

[0037] S102, through the combination mode abstraction and the permutation and combination of component elements, obtain comparison combined components based on the comparison component element library, and obtain reference combined components based on the reference component element library.

[0038] It can be understood that, for UI testing of component elements in the combined situation, the present invention respectively combines the reference component elements in the reference component element library and the corresponding comparison component elements in the comparison component element library.

[0039] Specifically, according to the actual application scenario, the combination mode of component elements is disassembled and abstracted to determine the possible combination relationships between component elements. Then, according to these combination relationships, the comparison component elements in the comparison component element library and the reference component elements in the reference component element library are respectively subjected to corresponding permutation and combination. That is to say, the comparison component elements are permuted and combined according to the above combination relationships to obtain corresponding combined components as comparison combined components. And, the reference component elements corresponding to the comparison component elements in the reference component element library are subjected to the same permutation and combination according to the same combination relationships as those of the comparison component elements to obtain corresponding combined components as reference combined components.

[0040] S103, obtain comparison combined test cases based on the comparison combined components, and obtain reference combined test cases based on the reference combined components.

[0041] It can be understood that, on the basis of obtaining the comparison combined components and the reference combined components, use case conversion is respectively performed on these two types of combined components. That is: by rendering the comparison combined components in code form into static UI pages that can be tested, that is, static UI test cases, determine the dynamic interaction UI test cases for the static UI test cases, and further determine the comparison combined test cases corresponding to the comparison combined components. At the same time, using a similar processing flow, perform page rendering processing on the reference combined components to obtain static UI test cases corresponding to the reference combined components, and based on the corresponding static UI test cases, determine the dynamic interaction UI test cases for the corresponding static UI test cases, so as to obtain the reference combined test cases corresponding to the reference combined components.

[0042] S104. Based on the comparison test cases and the benchmark test cases, as well as the comparison combined test cases and the benchmark combined test cases, perform a user interface test on the comparison component elements in the comparison component element library to obtain test results.

[0043] It can be understood that at the end of the embodiments of the present invention, the comparison test cases corresponding to the comparison component elements and the benchmark test cases corresponding to the benchmark component elements are used as a group to perform a screenshot comparison of the running effects, and the comparison combined test cases corresponding to the comparison combined components and the benchmark combined test cases corresponding to the benchmark combined components are used as a group to perform a screenshot comparison of the running effects, automatically detect the UI problems of the comparison component elements, and determine the faulty component elements.

[0044] The user interface test method for the components provided by the present invention is based on component elements. By abstracting the common patterns of component element combinations, automatically perform permutations and combinations of component elements to obtain combined components, and further combine the component elements to perform UI tests on the combined components, which can quickly locate deep - seated errors of a single component with higher accuracy.

[0045] Optionally, according to the user interface test method for components provided in the above embodiments, the obtaining of the comparison combined components based on the comparison component element library and the obtaining of the benchmark combined components based on the benchmark component element library include: through the combination pattern abstraction, determine the types of combination relationships that may exist between component elements, and for each type of the combination relationships, determine the combination relationship implementation methods; based on the types of combination relationships, through permutations and combinations, determine the first combination relationship between the comparison component elements in the comparison component element library and the second combination relationship between the benchmark component elements in the benchmark component element library; based on the combination relationship implementation methods, combine the comparison component elements under the first combination relationship to obtain the comparison combined components, and combine the benchmark component elements under the second combination relationship to obtain the benchmark combined components.

[0046] It can be understood that when the present invention combines component elements, first through pattern abstraction, define the types of combination relationships that may be formed between component elements and the corresponding code implementation methods for these types of combination relationships, and then further perform permutations and combinations on the comparison component elements and the benchmark component elements according to the types of combination relationships and the code implementation methods to obtain the corresponding combined components. That is, permute and combine the component elements according to the abstracted patterns to create component combination test cases, that is, produce UI test cases for subsequent comparison of differences. At the same time, the present invention can also produce combined code as logical test cases.

[0047] Among them, when defining the types of combination relationships that may be formed between component elements, it is carried out for all component elements in the comparison component element library and the reference component element library. That is, by analyzing the possible relationship types between all comparison component elements in the comparison component element library and the possible relationship types between all reference component elements in the reference component element library, the types of combination relationships between component elements are defined.

[0048] Specifically, first, the relationship types that can be formed between components (such as siblings, parent-child, existing as parameters, etc.) can be defined through pattern abstraction, and the combination methods for restoring the relationship (such as code splicing, etc.) can be defined, which are used to mix and assemble component elements in various ways to form new combined components.

[0049] For example, the definition of the relationship can include three basic relationships such as siblings, parent-child, and existing as parameters. By defining and outputting a relationship table, this relationship table is used to describe the combination relationships between all components. If the number of comparison component elements for the target test is N, then the relationship can be described under each dimension within N. That is, an N-dimensional combination relationship between N comparison component elements, an (N - 1)-dimensional combination relationship between (N - 1) comparison component elements, an (N - 2)-dimensional combination relationship between (N - 2) comparison component elements,..., and a 2-dimensional combination relationship between 2 comparison component elements can be established. For example, in the case where the dimension is 2, element1 and element2 are in a parent-child relationship, and at the same time, element2 and element3 are in a parameter substitution relationship. Such examples are used to define the relationship descriptions for all possible combinations.

[0050] After that, for each defined relationship, the relevant implementation code is defined. That is to say, similar to obtaining the javascript script fragments according to the component elements above, for the reference library and the comparison library, using the defined relationship table between components, the code of each comparison combined component and reference combined component is restored, and the code fragments of the corresponding combined components are produced. For example, the sibling relationship can render two components in sequence, and the parent-child relationship appends the child component to the inside of the parent component.

[0051] Among them, according to the user interface test method for components provided in the above embodiments, optionally, the processing flow of obtaining multiple comparison test cases based on the comparison component element library is as Figure 2 shown, which is a schematic flow diagram of obtaining comparison test cases in the user interface test method for components provided by the present invention. In order to test the differences between each component element in the reference component library and the comparison component library, the present invention needs to create test cases for each component element (which can include comparison component elements and reference component elements) for subsequent comparison of differences. That is, the code of a single component element is converted into a UI test case (page) that can be tested.

[0052] As shown Figure 2 in the figure, it includes:

[0053] S201. According to the display state requirements of the comparison component elements in the comparison component element library, at least one script segment is formed. The script segment is used to render the comparison component elements onto a page for static display.

[0054] It can be understood that in the present invention, first, according to the display state requirements of the comparison component elements, the comparison component elements are converted into javascript script segments corresponding to page static display. That is, a script file is written using javascript, and the output of the script file is a javascript script segment for rendering the comparison component elements onto a page for static display. In an actual scenario, multiple script segments can be created as use cases according to the display state requirements of the components.

[0055] For the reference component elements in the reference component element library, a similar processing method can be adopted to write the javascript script segments corresponding to the reference component elements.

[0056] S202. Execute the script segment to render the comparison component elements into a user interface with interactive effects, and obtain the second static user interface test case.

[0057] It can be understood that on the basis of the above steps, the chrome headless engine can be used to execute the javascript script segment corresponding to the comparison component elements on an html to render the comparison component elements into a page with a UI effect, and this page can be used as the UI test case corresponding to the comparison component elements, that is, the second static user interface test case.

[0058] Similarly, according to the above processing steps, the reference component elements in the reference component element library can also be rendered into a page with a UI effect to obtain the user interface test case corresponding to the reference component elements.

[0059] S203. Based on the second static user interface test case, an interaction script is formed. The interaction script is used to drive and simulate the user interface interaction based on the second static user interface test case.

[0060] It can be understood that this step creates an interactive UI test case for the comparison component element. The page generated based on the UI test case, that is, the second static user interface test case, writes an interactive script using the cypress engine framework. After this interactive script is executed, it can drive the simulated UI interaction. The interactive script is in the form of 'cy.get("[data-cy=submit]").click()' and can be used to describe operations such as clicking, hovering, and dragging. For the baseline component element, the present invention can write the corresponding interactive script for the baseline component element by performing similar operations.

[0061] S204. Based on the second static user interface test case and the interactive script, obtain the second interactive user interface test case corresponding to the comparison component element.

[0062] It can be understood that the present invention can use the above-mentioned interactive script together with the static page output by the UI test case in step 202 as a test case for testing the interactive UI, that is, the second interactive user interface test case, to dynamically evaluate and test the rendered page.

[0063] S205. Based on the second static user interface test case and the second interactive user interface test case, determine the comparison test case.

[0064] It can be understood that the test points of the component elements of the present invention include two parts: UI display and interaction effect. Therefore, the test cases also include these two parts of content. That is, the UI test case (i.e., the second static user interface test case) and the interactive UI test case (i.e., the second interactive user interface test case) obtained according to the above steps are used together as the comparison test case corresponding to the comparison component element.

[0065] The present invention can create two types of test cases for each pair of components with the same name (same ID) in the baseline library and the comparison library, that is, the comparison test case corresponding to the comparison component element and the baseline test case corresponding to the baseline component element.

[0066] Among them, for the user interface test method of the components provided in the above embodiments, optionally, obtaining the comparison combination test cases based on the comparison combination components includes: obtaining the page display script segment corresponding to the comparison combination components, and using a page rendering tool to render the page display script segment into a first static display page as the first static user interface test case corresponding to the comparison combination components; based on the first static display page, obtaining an interaction script for the first static display page, and when the interaction script for the first static display page is executed, driving the interaction operations for the first static display page; based on the interaction script for the first static display page and the first static user interface test case, determining the first interactive user interface test case corresponding to the comparison combination components; and based on the first static user interface test case and the first interactive user interface test case, determining the comparison combination test cases.

[0067] It can be understood that when the present invention obtains the comparison combination test cases corresponding to the comparison combination components, a processing flow similar to that for obtaining the comparison test cases described above can be adopted, that is: through the chrome headless engine, rendering the code segment of the combination components into a web page, thereby forming the UI test cases of this combination component, and then combining the UI test cases with the UI interaction script to output the interactive UI test cases. It can be understood that this processing flow is also applicable to the process of obtaining the reference combination test cases based on the reference combination components.

[0068] Specifically, according to the display state requirements of the comparison combination components, the comparison combination components can be converted into javascript script segments corresponding to the static page display. That is, using javascript to write the javascript script segments that can render the comparison combination components onto the page for static display. In actual scenarios, according to the display state requirements of the comparison combination components, multiple script segments can be created as the test cases for the comparison combination components. For the reference combination components, a similar processing method can be adopted to write the javascript script segments corresponding to the reference combination components.

[0069] After that, page rendering tools such as the chrome headless engine can be used to execute the javascript script segments corresponding to the comparison combination components on an html to render a page with UI effects as the UI test cases corresponding to the comparison combination components, that is, the first static user interface test cases. Similarly, a similar processing flow can be adopted to render the reference combination components to obtain the UI test cases corresponding to the reference combination components.

[0070] After that, based on the UI test cases corresponding to the combined components, an interaction script for the UI test cases can be written using the cypress engine framework. After the execution of the interaction script, it can drive the simulation of the UI interaction for the UI test cases.

[0071] Finally, the UI test cases corresponding to the comparison combined components and the interaction scripts for the UI test cases are used together as the interaction UI test cases corresponding to the comparison combined components to dynamically evaluate and test the rendered page. Then, the UI test cases for static testing and the interaction UI test cases for dynamic testing of the comparison combined components together constitute the comparison combined test cases corresponding to the comparison combined components.

[0072] The present invention adopts a similar processing flow as above, and can obtain the reference combined test cases corresponding to the reference combined components based on the reference combined components.

[0073] Optionally, according to the component user interface test method provided in the above embodiments, the user interface test for the comparison component elements in the comparison component library includes: taking the comparison test cases and the reference test cases as a group, and taking the comparison combined test cases and the reference combined test cases as a group to form the test samples for the comparison component elements; using the test samples as inputs to perform user interface tests on the comparison component elements.

[0074] It can be understood that when the present invention performs UI tests on the comparison component elements, image comparison is performed on the comparison and reference test cases according to the cypress engine, that is, multiple comparison test cases, multiple reference test cases, and the corresponding comparison combined test cases and reference combined test cases are used as inputs. The reference cases and comparison cases of each element are taken as a group, and the reference cases and comparison cases of each mixed scenario are taken as a group, and the cypress engine is used to perform UI tests. Further, while performing component UI tests, functional tests can also be performed, that is, logical verification is achieved by running JS cases, and when the verification logic test script fails, it is determined that there is an error in the corresponding comparison component element.

[0075] Optionally, according to the component user interface test method provided in the above embodiments, the obtaining of the test results includes: obtaining the output results of the user interface test, and based on the output results, recording the comparison component elements and combination relationships involved in the error cases: if the error case involves a single comparison component element, determining the single comparison component element as an error component element; if the error case involves a combination relationship and the comparison component elements associated with the combination relationship, determining the error component element according to the number of times the associated comparison component elements appear in error.

[0076] It can be understood that the present invention adopts an image comparison technology, with the cypress engine as the framework, to take screenshots and compare the running effects of components, that is, to detect whether there are pixel deviations and automatically discover UI problems. Specifically, collect the detection results of the cypress engine, and record the component elements involved in the error use cases and the names of the combination relationships between the component elements in the comparison combined components. If the record includes errors of individual component elements, it can be determined that there are errors in the component elements; if there are errors in the combination relationship use cases, record all relevant component elements, and in the form of "element1_parent-child", rank the relevant component elements in the description of all error-related combination relationships. For example, rank according to the number of times the relevant component elements appear, and it can be determined that the components with higher rankings have problems in UI implementation.

[0077] Optionally, the user interface testing method for components provided according to the above embodiments further includes: if the error use case involves a combination relationship and the comparison component elements associated with the combination relationship, loop through the following processing flow until a single error component element in the comparison component elements is determined. The following processing flow includes: re-arranging and combining the associated comparison component elements and the reference component elements, and according to the new combination result, go to the step of obtaining the comparison combined test cases based on the comparison combined components, and execute the corresponding user interface testing process.

[0078] It can be understood that the present invention performs recursive testing based on regression testing on the combined components that are tested and have errors according to the above embodiments. The regression testing is: taking the component elements included in the combined components as samples, re-performing the arrangement and combination testing of the component elements to accurately locate the single component element with the error.

[0079] Specifically, if it is determined according to the above embodiments that there are errors in the comparison combined components formed by the comparison component elements with each other, the respective comparison component elements involved in the comparison combined components, that is, the associated comparison component elements, can be determined according to the test result records.

[0080] After that, these associated comparison component elements are re-combined and arranged in a new combination manner to obtain a new combined component, that is, a new comparison combined component.

[0081] Then, replace the comparison combined components of the above embodiments with these new comparison combined components, replace the comparison component elements of the above embodiments with the associated comparison component elements, re-execute the UI testing process, and determine the comparison component elements that individually have errors among these associated comparison component elements according to the test results.

[0082] That is, obtain the comparison test cases and benchmark test cases corresponding to the associated comparison component elements respectively, as well as the new comparison test cases and new benchmark test cases corresponding to the new comparison combined components, and perform UI testing on this basis to obtain the test results.

[0083] For the new comparison combined components for which it is impossible to determine whether a single associated comparison component element in the combined relationship is abnormal, continue to perform the above-mentioned process of re-combining and arranging the comparison component elements involved in its combined relationship to the comparison component elements with individual errors determined according to the test results until the single comparison component element with errors is accurately located.

[0084] To further illustrate the technical solution of the present invention, the following is an example, but it does not limit the scope of protection required by the present invention.

[0085] Based on the scenario of component permutation and combination application, the user interface testing method for components provided by the present invention is as Figure 3 shown, which is the second flowchart of the user interface testing method for components provided by the present invention, and is used to solve the problem that the existing solution can only detect single-component problems and cannot guarantee the quality problems when multiple components are combined and used. For example, although the UI display of a single component is correct, when it is arranged side by side with other components or in a parent-child relationship, problems such as margins and adaptation may occur in the UI part. As Figure 3 shown, it includes the following processing steps:

[0086] (1) Component library module: Collect the basic materials for test cases, that is, prepare a benchmark component element library and a comparison component element library.

[0087] What is prepared in this step is the basic material for UI testing and is used to form test cases for testing. A component element includes all its related codes and other related static resources. Generally, the codes include html files, js files, and css files, and the static resources such as pictures and font files. A component element has a unique ID, and the component library is a collection of multiple component elements.

[0088] The objects processed in this step include the benchmark component element library and the comparison component element library. Among them, the benchmark component element library is an existing component library with correct UI, and the comparison component element library is a new component library that overlaps with the component elements of the benchmark component element library. Only when there is an overlap between the two components can comparison verification and testing be carried out.

[0089] (2) Component sample library module: Convert the single-component codes of the component elements in the comparison component element library and the benchmark component element library into UI pages that can be tested, and create test cases for the component elements for use in comparing differences in subsequent processing flows.

[0090] To test the differences between each component element in the benchmark component element library and the comparison component element library, test cases need to be created for each component element. The test points of the component element include two parts: UI display and interaction effects. Therefore, the test cases also include these two parts of content.

[0091] UI test cases: Write cases using JavaScript. The output of the case is a JavaScript script fragment that renders the component element to the page for static display. Multiple script fragments need to be created as test cases according to the display status of the component. Then, use the Chrome headless engine to execute the JavaScript script fragment on an HTML page and render it into a static page with UI effects as the UI test case.

[0092] Interactive UI test cases: Based on the page generated by the UI test case, write an interaction script based on the Cypress engine framework. After the interaction script is executed, it can drive the simulated UI interaction. The script is in the form of 'cy.get("[data-cy=submit]").click()' to describe operations such as clicking, hovering, and dragging. This script, together with the page output by the UI test case, serves as the test case for testing the interactive UI, that is, the interactive UI test case.

[0093] In this step, for each component element with the same name (the same ID) in the benchmark component element library and the comparison component element library, the above two types of test cases are created respectively.

[0094] In addition, if you want to perform functional tests on the component element, the code of the component element can be directly used as a logical test case.

[0095] (3) Combined sample library module: Arrange and combine the component elements according to the abstracted patterns and create combined component test cases, that is, the UI test cases and interactive UI test cases of the combined components, for use in comparing differences in subsequent processing flows.

[0096] First, define the feasible combination relationships between components and determine the combination methods (such as code splicing) to restore the combination relationships for multiple mixed combinations of component elements. For example, the relationship definition can include three basic relationships: sibling, parent-child, and existence as a parameter, and output a relationship table to describe the combination relationships between all component elements. If the number of component elements to be tested is N, then the combination relationships can be described under each dimension within N. For example, in the case of dimension 2, element1 and element2 are in a parent-child relationship, and at the same time, element2 and element3 are in a parameter substitution relationship. Such examples are used to describe the relationship definitions for all possible combinations.

[0097] After that, for each combination relationship, relevant implementation codes are defined. For example, for the sibling relationship, two components can be rendered in sequence, and for the parent-child relationship, the child component is appended to the inside of the parent component.

[0098] After that, similar to the component elements in the previous step, for the reference component element library and the comparison component element library, using the defined component relationship table, the code of each combined component is restored to generate combined code snippets. And as above, through the chrome headless engine, the combined code snippets are rendered into web pages, thereby forming the UI test cases for this combined component. Then, combined with the UI interaction script, the interactive UI test cases are output.

[0099] (4) Test module: For the component elements and combined components corresponding to the above-mentioned reference component element library and comparison component element library respectively, for the reference test cases and comparison test cases, image comparison is performed according to the cypress engine to determine the test results.

[0100] Taking the test cases produced in (2) and (3) as inputs, the reference test cases and comparison test cases of each component element are taken as a group, and the reference test cases and comparison test cases of each combined scenario are taken as a group, and the cypress engine is used for UI testing.

[0101] At the same time, test JS cases can be run for functional testing.

[0102] (5) Error analysis module: By detecting whether there is pixel deviation, the faulty component elements are determined.

[0103] Collect the detection results of the cypress engine, and record the component elements and relationship names involved in the error cases. If a single component element is faulty, its error can be directly determined; if an error occurs in a relationship case (such as described as "element1_parent-child"), record all the relevant component elements of this relationship case, and rank all the relevant component elements (such as ranking by the total number of times the component elements appear alone and in combination with errors), and the ones ranked higher are the components with problems in UI implementation.

[0104] Based on the same inventive concept, the present invention also provides a user interface test device for components according to the above embodiments, and this device is used to implement the user interface test of components in the above embodiments. Therefore, the descriptions and definitions in the user interface test method of components in the above embodiments can be used for the understanding of each execution module in the present invention. For details, reference can be made to the above method embodiments, and details will not be repeated here.

[0105] According to an embodiment of the present invention, the structure of the user interface testing device for components is shown in FIG. 4, which is a schematic structural diagram of the user interface testing device for components provided by the present invention. This device can be used to implement the user interface testing of components in the above-mentioned method embodiments. The device includes: a component element use case module 401, a component combination module 402, a combined component use case module 403, and a test output module 404. Among them:

[0106] The component element use case module 401 is used to obtain a plurality of comparison test cases based on the comparison component element library, and obtain a plurality of benchmark test cases based on the benchmark component element library. There are overlapping component elements between the comparison component element library and the benchmark component element library; the component combination module 402 is used to obtain comparison combined components based on the comparison component element library through combination mode abstraction and permutation and combination of component elements, and obtain benchmark combined components based on the benchmark component element library; the combined component use case module 403 is used to obtain comparison combined test cases based on the comparison combined components, and obtain benchmark combined test cases based on the benchmark combined components; the test output module 404 is used to perform user interface testing on the comparison component elements in the comparison component element library based on the comparison test cases and the benchmark test cases, as well as the comparison combined test cases and the benchmark combined test cases, and obtain test results.

[0107] Specifically, the present invention can collect the basic materials of test cases in advance, including preparing a benchmark component element library and creating a new component element library. It can be understood that in the actual web development scenario, the new component element library can be customized according to needs to precipitate the desired business components, thereby improving the development efficiency of developers. However, to ensure the quality of the component elements in the new component element library, it needs to be tested. Therefore, it can be used as a comparison component element library for comparison testing with the benchmark component element library.

[0108] Among them, the benchmark component element library contains benchmark component elements, that is, single uncombined elements, and these elements are known components with correct user interfaces. The comparison component element library is a new component library with component overlap with the benchmark component element library.

[0109] Only when there is component overlap between the comparison component element library and the benchmark component element library can comparison verification and testing be carried out. It can be understood that the number of overlapping component elements is not limited. There can be only one overlapping component element, or all can overlap.

[0110] On the basis of determining the reference component element library and the comparison component element library, the component element use case module 401 can convert the reference component elements and the comparison component elements therein into UI test cases that can be tested, usually rendered pages. That is to say, the component element use case module 401 renders the reference component elements and the comparison component elements into corresponding static interfaces respectively to obtain static UI test cases, and determines dynamic interaction UI test cases for the static interfaces according to the static UI test cases, obtaining multiple reference test cases corresponding to multiple reference component elements and multiple comparison test cases corresponding to multiple comparison component elements.

[0111] After that, according to the actual application scenario, the component combination module 402 disassembles and abstracts the combination modes of the component elements to determine the possible combination relationships between the component elements. Then, according to these combination relationships, the component combination module 402 performs corresponding permutations and combinations on the comparison component elements in the comparison component element library and the reference component elements in the reference component element library respectively. That is to say, the component combination module 402 performs permutations and combinations on the comparison component elements according to the above combination relationships to obtain corresponding combined components as comparison combined components. And, the reference component elements corresponding to the comparison component elements in the reference component element library are subjected to the same permutations and combinations according to the same combination relationships as those of the comparison component elements to obtain corresponding combined components as reference combined components.

[0112] After that, on the basis of obtaining the comparison combined components and the reference combined components, the combined component use case module 403 performs use case conversion on these two types of combined components respectively. That is: by rendering the comparison combined components in code form into static UI pages that can be tested, that is, static UI test cases, determining dynamic interaction UI test cases for the static UI test cases, and further determining comparison combined test cases corresponding to the comparison combined components. At the same time, adopting a similar processing flow, the combined component use case module 403 performs page rendering processing on the reference combined components to obtain static UI test cases corresponding to the reference combined components, and based on the corresponding static UI test cases, determines dynamic interaction UI test cases for the corresponding static UI test cases, so as to obtain reference combined test cases corresponding to the reference combined components.

[0113] Finally, the test output module 404 takes the comparison test cases corresponding to the comparison component elements and the reference test cases corresponding to the reference component elements as a group to perform a screenshot comparison of the running effects, and takes the comparison combined test cases corresponding to the comparison combined components and the reference combined test cases corresponding to the reference combined components as a group to perform a screenshot comparison of the running effects, automatically detecting UI problems of the comparison component elements and determining the faulty component elements.

[0114] The user interface testing device for components provided by the present invention is based on component elements. By abstracting the common patterns of component element combinations, it automatically performs permutations and combinations of component elements to obtain combined components, and further combines the component elements to perform UI testing on the combined components, which can quickly locate deep - seated errors in a single component with higher accuracy.

[0115] Optionally, the component combination module is used for:

[0116] Through the abstraction of the combination pattern, determine the types of combination relationships that can exist between component elements, and for each type of the combination relationship, determine the combination relationship implementation method;

[0117] Based on the type of the combination relationship, through permutation and combination, determine the first combination relationship between the comparison component elements in the comparison component element library and the second combination relationship between the reference component elements in the reference component element library;

[0118] Based on the combination relationship implementation method, combine the comparison component elements under the first combination relationship to obtain the comparison combined component, and combine the reference component elements under the second combination relationship to obtain the reference combined component.

[0119] Optionally, when the combined component use - case module is used to obtain comparison combined test cases based on the comparison combined component, it is used for:

[0120] Obtain the page display script fragment corresponding to the comparison combined component, and use a page rendering tool to render the page display script fragment into a first static display page as the first static user interface test case corresponding to the comparison combined component;

[0121] Based on the first static display page, obtain an interaction script for the first static display page. When the interaction script for the first static display page is executed, it drives the interaction operations for the first static display page;

[0122] Based on the interaction script for the first static display page and the first static user interface test case, determine the first interactive user interface test case corresponding to the comparison combined component;

[0123] Based on the first static user interface test case and the first interactive user interface test case, determine the comparison combined test case.

[0124] Optionally, when the component element use - case module is used to obtain multiple comparison test cases based on the comparison component element library, it is used for:

[0125] Form at least one script segment according to the display status requirements of the comparison component elements in the comparison component element library, where the script segment is used to render the comparison component elements onto a page for static display;

[0126] Execute the script segment to render the comparison component elements into a user interface with interactive effects, and obtain a second static user interface test case;

[0127] Based on the second static user interface test case, form an interaction script, where the interaction script is used to drive the simulation of user interface interactions based on the second static user interface test case;

[0128] Based on the second static user interface test case and the interaction script, obtain a second interactive user interface test case corresponding to the comparison component elements;

[0129] Based on the second static user interface test case and the second interactive user interface test case, determine the comparison test case.

[0130] Optionally, when the test output module is used for user interface testing of the comparison component elements in the comparison component element library, it is used for:

[0131] Take the comparison test case and the benchmark test case as a group, and take the comparison combined test case and the benchmark combined test case as a group to form a test sample for the comparison component elements;

[0132] Use the test sample as input to perform user interface testing on the comparison component elements.

[0133] Optionally, when the test output module is used for obtaining the test result, it is used for:

[0134] Obtain the output result of the user interface test, and based on the output result, record the comparison component elements and combination relationships involved in the error cases:

[0135] If the error case involves a single comparison component element, determine the single comparison component element as the error component element;

[0136] If the error case involves a combination relationship and the comparison component elements associated with the combination relationship, determine the error component element according to the number of times the associated comparison component elements have errors.

[0137] Optionally, when the test output module is used for determining the error component element according to the number of times the associated comparison component elements have errors, it is used for:

[0138] Loop and execute the first processing flow until all the comparison component elements involved in the error use case are individual ones. The first processing flow includes:

[0139] Obtain the associated comparison test cases of the associated comparison component elements, and obtain the associated reference test cases of the reference component elements corresponding to the associated comparison component elements;

[0140] Re - permute the associated comparison component elements and the reference component elements, and according to the new combination result, re - execute the steps from obtaining the comparison combination test cases based on the comparison combination components to obtaining the test results, and accumulate the number of times the associated comparison component elements have errors;

[0141] Sort the number of times each of the associated comparison component elements has errors, and determine the error - prone component elements among the individual comparison component elements according to the sorting.

[0142] It can be understood that in the present invention, the above - mentioned various related program modules in the devices of the above - mentioned embodiments can be implemented by a hardware processor. And, the user interface test device of the components of the present invention utilizes the above - mentioned various program modules to be able to implement the user interface test process of the components of the above - mentioned various method embodiments. When used to implement the user interface test of the components in the above - mentioned various method embodiments, the beneficial effects produced by the device of the present invention are the same as those of the corresponding above - mentioned various method embodiments, and reference can be made to the above - mentioned various method embodiments, which will not be elaborated here.

[0143] As another aspect of the present invention, according to the above - mentioned various embodiments, this embodiment provides an electronic device. The electronic device includes a memory, a processor, and a program or instruction stored on the memory and executable on the processor. When the processor executes the program or instruction, the steps of the user interface test method of the components as described in the above - mentioned various embodiments are implemented.

[0144] Furthermore, the electronic device of the present invention may further include a communication interface and a bus. Refer to Figure 5 , which is the schematic physical structure diagram of the electronic device provided by the present invention, including: at least one memory 501, at least one processor 502, a communication interface 503, and a bus 504.

[0145] Among them, the memory 501, the processor 502, and the communication interface 503 complete mutual communication through the bus 504. The communication interface 503 is used for information transmission between the electronic device and the component library device; the memory 501 stores a program or instruction executable on the processor 502. When the processor 502 executes the program or instruction, the steps of the user interface test method of the components as described in the above - mentioned various embodiments are implemented.

[0146] It can be understood that the electronic device at least includes a memory 501, a processor 502, a communication interface 503, and a bus 504. The memory 501, the processor 502, and the communication interface 503 form a communication connection with each other through the bus 504 and can complete communication with each other. For example, the processor 502 reads program instructions of the user interface test method of the component from the memory 501. In addition, the communication interface 503 can also implement a communication connection between the electronic device and the component library device and can complete information transmission with each other. For example, the reading of the comparison component element or the reference component element is realized through the communication interface 503.

[0147] When the electronic device is running, the processor 502 calls the program instructions in the memory 501 to execute the methods provided in the above method embodiments. For example, it includes: obtaining a plurality of comparison test cases based on the comparison component element library, and obtaining a plurality of reference test cases based on the reference component element library; obtaining a comparison combined component based on the comparison component element library through the combination mode abstraction and the permutation and combination of the component elements, and obtaining a reference combined component based on the reference component element library; obtaining a comparison combined test case based on the comparison combined component, and obtaining a reference combined test case based on the reference combined component; performing a user interface test on the comparison component elements in the comparison component element library based on the comparison test cases and the reference test cases, and the comparison combined test cases and the reference combined test cases, and obtaining a test result, etc.

[0148] When the program instructions in the above-mentioned memory 501 can be implemented in the form of software function units and sold or used as an independent product, they can be stored in a computer-readable storage medium. Alternatively, all or part of the steps of implementing the above method embodiments can be completed by hardware related to the program instructions. The foregoing program can be stored in a computer-readable storage medium. When the program is executed, it executes the steps including the above method embodiments; and the foregoing storage medium includes: various media such as a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disc that can store program codes.

[0149] The present invention also provides a non-transitory computer-readable storage medium according to the above embodiments, on which a program or instructions are stored. When the program or instructions are executed by a computer, the steps of the user interface testing method of the components described in the above embodiments are implemented, for example, including: obtaining a plurality of comparison test cases based on a comparison component library, and obtaining a plurality of reference test cases based on a reference component library; through combinatorial pattern abstraction and permutation and combination of component elements, obtaining comparison combined components based on the comparison component library, and obtaining reference combined components based on the reference component library; obtaining comparison combined test cases based on the comparison combined components, and obtaining reference combined test cases based on the reference combined components; performing user interface testing on the comparison component elements in the comparison component library based on the comparison test cases and the reference test cases, as well as the comparison combined test cases and the reference combined test cases, to obtain test results, etc.

[0150] As another aspect of the present invention, this embodiment also provides a computer program product according to the above embodiments. The computer program product includes a computer program stored on a non-transitory computer-readable storage medium. The computer program includes program instructions. When the program instructions are executed by a computer, the computer can execute the user interface testing method of the components provided in the above method embodiments. The method, for example, includes: obtaining a plurality of comparison test cases based on a comparison component library, and obtaining a plurality of reference test cases based on a reference component library; through combinatorial pattern abstraction and permutation and combination of component elements, obtaining comparison combined components based on the comparison component library, and obtaining reference combined components based on the reference component library; obtaining comparison combined test cases based on the comparison combined components, and obtaining reference combined test cases based on the reference combined components; performing user interface testing on the comparison component elements in the comparison component library based on the comparison test cases and the reference test cases, as well as the comparison combined test cases and the reference combined test cases, to obtain test results.

[0151] The electronic device, non-transitory computer-readable storage medium, and computer program product provided by the present invention, by executing the steps of the user interface testing method of the components described in the above embodiments, based on basic component elements, automatically perform permutation and combination of component elements to obtain combined components by abstracting common patterns of component element combinations, and further perform UI testing on the combined components in combination with component elements, can quickly locate deep-seated errors of a single component, with higher accuracy.

[0152] It can be understood that the embodiments of the devices, electronic devices, and storage media described above are merely illustrative. The units described as separate components may or may not be physically separated, and may be located in one place or distributed to different network units. Some or all of the modules can be selected according to actual needs to achieve the objectives of the solutions of this embodiment. A person of ordinary skill in the art can understand and implement this without creative effort.

[0153] Through the description of the above embodiments, those skilled in the art can clearly understand that each embodiment can be implemented by means of software plus a necessary general hardware platform, and of course, it can also be implemented by hardware. Based on this understanding, the essence of the above technical solutions, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product can be stored in a computer-readable storage medium, such as a USB flash drive, a mobile hard disk, a ROM, a RAM, a magnetic disk, or an optical disc, etc., and includes several instructions for causing a computer device (such as a personal computer, a server, or a network device, etc.) to execute the methods described in the above method embodiments or some parts of the method embodiments.

[0154] In addition, those skilled in the art should understand that in the application documents of the present invention, the terms "including", "comprising", or any other variant thereof are intended to cover non-exclusive inclusion, so that a process, method, article, or device including a series of elements not only includes those elements, but also includes other elements not explicitly listed, or further includes elements inherent to such a process, method, article, or device. Without more limitations, an element defined by the statement "including one..." does not exclude the existence of another identical element in the process, method, article, or device including the said element.

[0155] In the description of the present invention, a large number of specific details are set forth. However, it should be understood that the embodiments of the present invention can be practiced without these specific details. In some instances, well-known methods, structures, and technologies are not shown in detail so as not to obscure the understanding of this specification. Similarly, it should be understood that, in order to streamline the disclosure of the present invention and assist in understanding one or more of the various inventive aspects, in the above description of the exemplary embodiments of the present invention, the various features of the present invention are sometimes grouped together into a single embodiment, figure, or description thereof.

[0156] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it; although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the foregoing embodiments, or perform equivalent replacements on some of the technical features; and these modifications or replacements do not make the essence of the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the various embodiments of the present invention.

Claims

1. A method for testing the user interface of a component, characterized in that, Including: Based on a comparison component library, obtain a plurality of comparison test cases, and based on a benchmark component library, obtain a plurality of benchmark test cases, where there are overlapping component elements between the comparison component library and the benchmark component library; Through composite pattern abstraction and permutation and combination of component elements, obtain a comparison composite component based on the comparison component library, and obtain a benchmark composite component based on the benchmark component library; Based on the comparison composite component, obtain comparison composite test cases, and based on the benchmark composite component, obtain benchmark composite test cases; Based on the comparison test cases and the benchmark test cases, as well as the comparison composite test cases and the benchmark composite test cases, perform user interface testing on the comparison component elements in the comparison component library to obtain test results; The obtaining of the test results includes: Obtain the output result of the user interface testing, and based on the output result, record the comparison component elements and combination relationships involved in the error cases: If the error case involves a single comparison component element, determine the single comparison component element as an error component element; If the error case involves a combination relationship and the comparison component elements associated with the combination relationship, determine the error component element according to the number of times the associated comparison component elements appear in error; The determining of the error component element according to the number of times the associated comparison component elements appear in error includes: Loop and execute a first processing flow until all the error cases involve single comparison component elements. The first processing flow includes: Obtain the associated comparison test cases of the associated comparison component elements, and obtain the associated benchmark test cases of the benchmark component elements corresponding to the associated comparison component elements; Re-perform permutation and combination on the associated comparison component elements and the benchmark component elements, and according to the new combination result, re-execute the steps from obtaining the comparison composite test cases based on the comparison composite component to obtaining the test results, and accumulate the number of times the associated comparison component elements appear in error; Sort the number of times each of the associated comparison component elements appears in error, and according to the sorting, determine the error component elements among the single comparison component elements.

2. The method for testing the user interface of a component according to claim 1, characterized in that, The obtaining of the comparison composite component based on the comparison component library and the obtaining of the benchmark composite component based on the benchmark component library include: Through the composite pattern abstraction, determine the types of combination relationships that can exist between component elements, and for each type of the combination relationships, determine the combination relationship implementation methods; Based on the types of combination relationships, through permutation and combination, determine the first combination relationship between the comparison component elements in the comparison component library and the second combination relationship between the benchmark component elements in the benchmark component library; Based on the combination relationship implementation methods, combine the comparison component elements under the first combination relationship to obtain the comparison composite component, and combine the benchmark component elements under the second combination relationship to obtain the benchmark composite component.

3. The method for testing the user interface of a component according to claim 2, characterized in that, The obtaining of the comparison composite test cases based on the comparison composite component includes: Obtain the page display script segment corresponding to the comparison combination component, and use a page rendering tool to render the page display script segment into a first static display page as the first static user interface test case corresponding to the comparison combination component; Based on the first static display page, obtain an interaction script for the first static display page. When the interaction script for the first static display page is executed, it drives the interaction operations for the first static display page; Based on the interaction script for the first static display page and the first static user interface test case, determine the first interactive user interface test case corresponding to the comparison combination component; Based on the first static user interface test case and the first interactive user interface test case, determine the comparison combination test case.

4. The method for testing the user interface of a component according to claim 1 or 2 or 3, characterized in that, The obtaining of multiple comparison test cases based on the comparison component library includes: According to the display state requirements of the comparison component elements in the comparison component library, form at least one script segment for rendering the comparison component elements onto a page for static display; Execute the script segment to render the comparison component elements into a user interface with interactive effects, and obtain a second static user interface test case; Based on the second static user interface test case, form an interaction script for driving the simulation of user interface interactions based on the second static user interface test case; Based on the second static user interface test case and the interaction script, obtain the second interactive user interface test case corresponding to the comparison component element; Based on the second static user interface test case and the second interactive user interface test case, determine the comparison test case.

5. The method for testing the user interface of a component according to claim 1, characterized in that, The user interface testing of the comparison component elements in the comparison component library includes: Take the comparison test case and the benchmark test case as a group, and take the comparison combination test case and the benchmark combination test case as a group to form the test samples of the comparison component elements; Use the test samples as input to perform user interface testing on the comparison component elements.

6. A user interface testing device for a component, characterized in that, It includes: A component element use case module for obtaining multiple comparison test cases based on a comparison component library and obtaining multiple benchmark test cases based on a benchmark component library, where there are overlapping component elements between the comparison component library and the benchmark component library; A component combination module for obtaining comparison combination components based on the comparison component library and obtaining benchmark combination components based on the benchmark component library through combination mode abstraction and permutation and combination of component elements; A combination component use case module for obtaining comparison combination test cases based on the comparison combination components and obtaining benchmark combination test cases based on the benchmark combination components; A test output module for performing user interface testing on the comparison component elements in the comparison component library based on the comparison test cases and the benchmark test cases, as well as the comparison combination test cases and the benchmark combination test cases, to obtain test results; When used for obtaining the test result, the test output module is configured to: Obtain the output result of the user interface test, and based on the output result, record the comparison component elements and combination relationships involved in the error test cases: If the error test case involves a single comparison component element, determine the single comparison component element as the error component element; If the error test case involves a combination relationship and the comparison component elements associated with the combination relationship, determine the error component element according to the number of times the associated comparison component elements appear in error; When used for determining the error component element according to the number of times the associated comparison component elements appear in error, the test output module is configured to: Loop through the first processing flow until all the error test cases involve single comparison component elements. The first processing flow includes: Obtain the associated comparison test cases of the associated comparison component elements, and obtain the associated reference test cases of the reference component elements corresponding to the associated comparison component elements; Rearrange the associated comparison component elements and the reference component elements, and according to the new combination result, re-execute the steps from obtaining the comparison combination test cases based on the comparison combination components to obtaining the test result, and accumulate the number of times the associated comparison component elements appear in error; Sort the number of times each of the associated comparison component elements appears in error, and according to the sorting, determine the error component elements among the single comparison component elements.

7. An electronic device, including a memory, a processor, and a program or instruction stored on the memory and executable on the processor, characterized in that, When the processor executes the program or instructions, the steps of the user interface test method of the component as described in any one of claims 1 to 5 are implemented.

8. A non-transitory computer-readable storage medium, on which a program or instruction is stored, characterized in that, When the program or instructions are executed by a computer, the steps of the user interface test method of the component as described in any one of claims 1 to 5 are implemented.

Images