Test method, system, device and storage medium for page component

Abstract

This invention proposes a method, system, device, and storage medium for testing page components. The method includes: instantiating the information of the page to be tested using the Vue framework to obtain a Vue test instance; for components on the page to be tested, if the component is self-developed, the component's name conforms to a preset rule; iterating through the Vue test instance, determining whether a target field in the Vue test instance is empty; if not empty, obtaining the content information corresponding to the target field, where the target field is the field corresponding to the component on the page to be tested, and the content information is the component's name; determining whether the content information conforms to a preset rule; if it does, determining that the component is self-developed, and testing the component. This embodiment of the invention distinguishes between page components, testing only self-developed components, effectively improving the efficiency of page component testing.

Description

Technical Field

[0001] This invention relates to the field of computer technology, and in particular to a method, system, device, and storage medium for testing page components. Background Technology

[0002] Within large corporations, different business units develop their own components and build their own component libraries. However, when the acceptance department verifies these components, testing is only required for components from the library; for newly developed components, testing is necessary. The traditional acceptance method involves designers comparing component screenshots with the design drafts one by one. This manual method is inefficient, leading to the development of automated component inspection tools. These tools identify whether a component is from the library or custom-developed by adding a class name or setting attributes to the outermost DOM node. However, the added class names can easily conflict with other class names in the library, causing errors. Furthermore, the need to iterate through multiple page nodes slows down the process when the page is large, resulting in very low testing efficiency. Summary of the Invention

[0003] This invention provides a method, system, device, and storage medium for testing page components. Its main purpose is to differentiate page components and test only self-developed components, thereby effectively improving the testing efficiency of page components.

[0004] In a first aspect, embodiments of the present invention provide a method for testing page components, comprising:

[0005] The information of the page to be tested is instantiated using the Vue framework to obtain the Vue test instance. For the components on the page to be tested, if the components are self-developed, the names of the components conform to the preset rules.

[0006] The Vue instance to be tested is traversed, and it is determined whether the target field in the Vue instance to be tested is empty. If it is not empty, the content information corresponding to the target field is obtained. The target field is the field corresponding to the component on the page to be tested, and the content information is the name of the component.

[0007] Determine whether the content information conforms to the preset rules. If it does, determine that the component is self-developed and test the component.

[0008] Preferably, the step of instantiating the information of the page to be tested using the Vue framework to obtain the Vue test instance includes:

[0009] Obtain the configuration file information corresponding to the page to be tested. The configuration file information includes the name of the page to be tested, the location of the page to be tested, the data contained in the page to be tested, the components contained in the page to be tested, and the dynamic scripts.

[0010] A new initial Vue instance is created using the Vue framework, and values ​​are assigned to the initial Vue instance according to the configuration file information to obtain the Vue instance to be tested. The components contained in the page to be tested are mounted on the target fields of the Vue instance to be tested.

[0011] Preferably, the step of iterating through the Vue instance to be tested and determining whether the Vue instance to be tested contains the target field includes:

[0012] The traversal begins from the root node of the Vue instance under test;

[0013] If the target field is encountered during iteration, the value corresponding to the target field is obtained. If the value is not empty, the value is stored in a preset array; otherwise, the iteration continues.

[0014] Preferably, the testing of the component includes:

[0015] Obtain the execution action corresponding to the component in the page to be tested;

[0016] Based on the input parameters, the execution action, and the preset code, a test script is generated;

[0017] Execute the test script to obtain the execution results corresponding to the components in the page under test;

[0018] If the execution result is different from the preset execution corresponding to the execution action, then the component is determined to have failed the test.

[0019] Preferably, the action to be performed includes input, selection, and clicking.

[0020] Preferably, after determining that the component is self-developed, the method further includes:

[0021] Add a preset overlay identifier to the component so that the component is identified by the preset overlay on the page to be tested.

[0022] Preferably, the preset rule is a regular expression.

[0023] Secondly, embodiments of the present invention provide a testing system for page components, comprising:

[0024] The instantiation module is used to instantiate the information of the page to be tested through the Vue framework and obtain the Vue test instance. For the components on the page to be tested, if the components are self-developed, the names of the components conform to preset rules.

[0025] The traversal module is used to traverse the Vue instance under test, determine whether the target field in the Vue instance under test is empty, and if it is not empty, obtain the content information corresponding to the target field. The target field is the field corresponding to the component on the page under test, and the content information is the name of the component.

[0026] The testing module is used to determine whether the content information conforms to the preset rules. If it does, the module determines that the component is self-developed and tests the component.

[0027] Thirdly, embodiments of the present invention provide a computer device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the steps of the above-described page component testing method.

[0028] Fourthly, embodiments of the present invention provide a computer storage medium storing a computer program, which, when executed by a processor, implements the steps of the above-described page component testing method.

[0029] This invention proposes a method, system, device, and storage medium for testing page components. It instantiates the information of the page under test using the Vue framework, which is faster and performs better than traditional HTML tag node traversal. Furthermore, it stores node names through target fields, replacing traditional HTML tag nodes, making the page structure clearer and easier for testers to identify which content uses components. Finally, by detecting self-developed components, testers can easily inspect those components, while undetected components do not require inspection, thus avoiding the need for testers to inspect every single component, saving testing time, and improving the efficiency of page component testing. Attached Figure Description

[0030] Figure 1 An application scenario diagram of a page component testing method provided in an embodiment of the present invention;

[0031] Figure 2 A flowchart illustrating a testing method for a page component provided in an embodiment of the present invention;

[0032] Figure 3 This is a flowchart of a method for instantiating information of a page to be tested, provided by an embodiment of the present invention;

[0033] Figure 4 This is a flowchart illustrating the process of traversing the Vue instance under test in this embodiment of the invention.

[0034] Figure 5 This is a flowchart of the component testing method in an embodiment of the present invention;

[0035] Figure 6 A schematic diagram of the structure of a page component testing system provided in an embodiment of the present invention;

[0036] Figure 7 This is a schematic diagram of the structure of a computer device provided in an embodiment of the present invention.

[0037] The realization of the objective, functional features and advantages of the present invention will be further explained in conjunction with the embodiments and with reference to the accompanying drawings. Detailed Implementation

[0038] It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.

[0039] Figure 1 This is an application scenario diagram of a page component testing method provided in an embodiment of the present invention, such as... Figure 1 As shown, the user selects the page to be tested on the client, and the client sends the information of the page to be tested to the server. After receiving the information of the page to be tested, the server executes the test method of the page component to test the page to be tested.

[0040] It should be noted that the server can be implemented using a standalone server or a server cluster consisting of multiple servers. The client can be a smartphone, tablet, laptop, desktop computer, etc., but is not limited to these. The client and server can connect via Bluetooth, USB (Universal Serial Bus), or other communication connection methods, which are not limited in this embodiment of the invention.

[0041] Figure 2 A flowchart of a testing method for a page component provided in an embodiment of the present invention is shown below. Figure 2 As shown, the method includes:

[0042] S210, instantiate the information of the page to be tested using the Vue framework, obtain the Vue test instance, and for the components on the page to be tested, if the components are self-developed, the names of the components conform to preset rules;

[0043] First, select the page to be tested. This page is an HTML (Hypertext Markup Language) page. HTML tags are an important component of an HTML page. Different content on a webpage can be described using HTML tags. Typically, keywords in the webpage content are represented by angle brackets. Different tag symbols within angle brackets represent different webpage content. Information such as the webpage title, character format, language, compatibility, keywords, and description are displayed within the tags. The content to be displayed on the webpage needs to be nested within the tags. Furthermore, buttons on the webpage are defined within... <button>In the tag, the image on the webpage is defined in <canvas>In the `` tag, the dropdown list on the webpage is defined in... <datalist>Within the `<select>` tag, the options in the selection list on the webpage are defined in... <option> Within the tags. When extracting information from a page under test, you can extract it based on the HTML tags within that page. For example, to extract the page title information, find the content corresponding to the tag; to find page button information, find...< / option> < / datalist> < / canvas> < / button> <button>The content corresponding to the tags can be determined based on the specific information needed when obtaining information about the page to be tested. The tag name corresponding to each piece of information is known in advance, while the specific content contained in the information can be determined based on the actual situation. This embodiment of the invention does not impose specific limitations on this. For ease of description, this embodiment of the invention will use component information, dynamic data, and scripts as examples to illustrate the information of the page to be tested.

[0044] The Vue framework is a progressive framework for building user interfaces. It allows you to selectively use one or more components instead of all of them. When instantiating information from a page under test using Vue, you first need to create a new Vue object using the Vue front-end editor. Then, based on the name of the page under test, you use the function `document.getElementById("app")._vue_` to retrieve relevant information from the page and instantiate it into the newly created Vue object. Here, `app` represents the name of the page under test. Knowing the name of the page under test allows you to use the above function to instantiate its information into the Vue test instance. A Vue instance under test includes lifecycle hooks, data, methods, components, computed properties, and watch functions. A Vue instance has a complete lifecycle, which is a series of processes from creation, data initialization, template compilation, DOM mounting, rendering, updating, and unmounting. These processes are called the Vue lifecycle, or simply the process from the creation to the destruction of a Vue instance. Different lifecycles correspond to different lifecycle hooks. A Vue instance includes eight lifecycle hooks. In testing the lifecycle functions of Vue components, it is usually necessary to test whether the eight lifecycle hooks (beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, and destroyed) can be executed successfully.

[0045] In addition, when developers are developing components, the names of the components must conform to preset rules. These preset rules may include component name mirroring, component name length range, component name conforming to regular expressions, etc. Component name mirroring means that the component name is symmetrical about a certain middle character, and the letters on the other two sides are symmetrical. Component name length range means that the length of the component name is within a preset range. This preset range can distinguish between components in the model library and components developed by the developer. Generally speaking, the component names in the model library are within the range of 8 bytes. Therefore, when developing a component, the component name is specified to be within the range of 10 to 15 bytes. Thus, it can be distinguished from a component in the model library or a self-developed component by name. The specific rules can be determined according to the actual situation. This embodiment of the invention does not impose specific limitations here.

[0046] In this embodiment of the invention, the information of the page to be tested is instantiated using the Vue framework. Compared with the traditional traversal of HTML tag nodes, Vue instances are faster and have better performance.

[0047] S220, traverse the Vue instance to be tested, determine whether the target field in the Vue instance to be tested is empty, if it is not empty, obtain the content information corresponding to the target field, the target field is the field corresponding to the component on the page to be tested, and the content information is the name of the component;

[0048] Next, we iterate through the Vue instance under test. Common iteration methods include `for in`, `for of`, `foreach`, `entries`, `keys`, and `values`. Specifically, `for in` iterates over an object, allowing it to iterate over itself and its inherited enumerable properties. `for of` iterates over an object; this is a new iteration method introduced in ES6. ES6 introduced the concept of Iterator, similar to Java. Objects that implement Iterator support `for of`. ES6 specifies that the default Iterator interface is implemented in the `Symbol.iterator` property of the data structure. In other words, a data structure can be considered "iterable" as long as it has the `Symbol.iterator` property. The `Symbol.iterator` property itself is a function, which is the default iterator generation function for the current data structure. Executing this function will return an iterator. The difference between the two is that `for in` can only obtain the key name of the object, not the key value, while `for of` allows traversal to obtain the key value. The array iterator interface only returns the property with the numeric index. `forEach` cannot be exited midway; the `break` or `return` commands will not work. `entries` returns an iterator object used to traverse the array composed of [key name, key value]. For arrays, the key name is the index value. For Sets, the key name and key value are the same. The Iterator interface of the Map structure calls the `entries` method by default. `keys` returns an iterator object used to traverse all key names. `values` returns an iterator object used to traverse all key values. The specific traversal method can be determined according to the actual situation, and this embodiment of the invention does not impose specific limitations on it.

[0049] Then, the target fields of the Vue instance to be tested are obtained through iteration. The target fields are fields used to store information about the components of the page to be tested. Specifically, in this embodiment of the invention, the target fields are: <options>The `_componentTag` field of the tag indicates which components on the page under test are attached to this target field. After obtaining the target field, it's determined whether it's empty. Specifically, the content of the target field is extracted first, and then it's checked if the content is empty. If it's not empty, it means there are components on the page under test, and the target field stores the names of those components. If the content is empty, it means there are no components on the page under test. In this embodiment, the page under test can have one or more components. When there are multiple components, there will be multiple target fields, and the content of each target field is checked sequentially.

[0050] In the specific implementation of this invention, the content of the target field is stored in the cmpArr array, and the array is used to realize the storage and retrieval of the target field content.

[0051] This invention avoids the traditional traversal of HTML tag nodes by traversing the Vue instance under test. The traversal is achieved through the traversal function built into the Vue framework, which is faster and saves developers' coding time. Since it is a built-in traversal function, the code complexity of this method is also reduced.

[0052] S230, determine whether the content information conforms to the preset rules. If it does, determine that the component is self-developed and test the component.

[0053] Next, the content information corresponding to the target field is evaluated to see if it conforms to preset rules. If it does, the component is considered custom-developed and requires testing. If it doesn't, the component is from the model library and doesn't need testing. As described above, custom-developed components must have names that conform to preset rules. Now, by checking if the content information conforms to these rules, the component's authenticity is determined. This combination of naming simplifies the component identification process, improving the efficiency of determining whether a component is custom-developed or from the model library, and further accelerating the testing efficiency of page components.

[0054] In specific implementation of this invention, the testing method for the page component is made into a testing tool. When the testing tool is needed to test the page to be tested, the page to be tested is opened, the testing tool is used and executed, and the testing tool will automatically mark the self-developed components on the page to be tested, so that testers can easily test the components. Components that are not marked do not need to be tested, thereby avoiding the need for testers to test every component, saving testers' testing time and improving the testing efficiency of page components.

[0055] This invention provides a method for testing page components. It instantiates the information of the page under test using the Vue framework, which is faster and more performant than traditional HTML tag node traversal. Furthermore, it stores node names using target fields, replacing traditional HTML tag nodes, making the page structure clearer and easier for testers to identify which content uses components. Finally, by detecting self-developed components, testers can easily perform testing on those components, while undetected components do not require testing. This avoids the need for testers to test every single component, saving testing time and improving the efficiency of page component testing.

[0056] Based on the above embodiments, preferably, Figure 3 This is a flowchart illustrating a method for instantiating information of a page to be tested, as provided in an embodiment of the present invention. Figure 3 As shown, the instantiation of the information of the page to be tested using the Vue framework to obtain the Vue test instance includes:

[0057] S310, the configuration file information corresponding to the page to be tested, the configuration file information includes the name of the page to be tested, the location of the page to be tested, the data contained in the page to be tested, the components contained in the page to be tested, and the dynamic scripts.

[0058] First, obtain the configuration file information corresponding to the page to be tested. This configuration file information includes the name of the page to be tested, the location of the page to be tested, the data contained in the page to be tested, the components contained in the page to be tested, and dynamic scripts. Specifically, the configuration file information can be obtained using pre-written web crawler software. By executing the web crawler software on the page to be tested, the web crawler software can be used to traverse all component information on the page to be tested and obtain the configuration file information corresponding to each component.

[0059] S320, a new initial Vue instance is created using the Vue framework, and the initial Vue instance is assigned values ​​according to the configuration file information to obtain the Vue instance to be tested, wherein the components contained in the page to be tested are mounted on the target fields of the Vue instance to be tested.

[0060] Then, a new initial Vue instance is created using the Vue framework. The specific method for creating the instance can be implemented using the `new` function. Then, the initial Vue instance is assigned values ​​using the configuration file information, and finally, the Vue instance to be tested is obtained.

[0061] Based on the above embodiments, preferably, Figure 4 This is a flowchart of the process of traversing the Vue instance under test in an embodiment of the present invention, such as... Figure 4 As shown, the step of iterating through the Vue instance under test and determining whether the Vue instance under test contains the target field includes:

[0062] The traversal begins from the root node of the Vue instance under test;

[0063] If the target field is encountered during iteration, the value corresponding to the target field is obtained. If the value is not empty, the value is stored in a preset array; otherwise, the iteration continues.

[0064] Specifically, the process iterates from the root node of the Vue instance under test. If the target field, i.e., the `componentTag` field mentioned above, is encountered, the return value of this field is the component name, stored in the `cmpArr` array. Generally, a Vue instance has only one root node. Starting from the root node, if the target field is encountered, its value is retrieved. If the value is not empty, it is stored in a predefined array; otherwise, it is retrieved from the `cmpArr` array. <children>The tags continue to be traversed, repeating the above steps until there are no more tags to traverse. <children>The tags are then used to generate a component node tree.

[0065] Specifically, this invention is implemented using the following code in this embodiment:

[0066] findCmpTag(cmpInstance,cmpArr,index){

[0067] if(cmpInstance.$options._componentTag||cmpInstance.$vnode.data.

[0068] routerView){

[0069] if(!cmpInstance.$options._comonetTag){

[0070] }

[0071] cmpArr.push({…

[0072] })

[0073] if(cmpInstance.$children.length){

[0074] }

[0075] }else if(cmpInstance.$children.length){

[0076] cmpInstance.$children.forEach((instance,index)=>{this.findCmpTag(instance,cmpArr,index)

[0077] })

[0078] }

[0079] }

[0080] Based on the above embodiments, preferably, Figure 5 This is a flowchart of the component testing method in an embodiment of the present invention, such as... Figure 5 As shown, the testing of the component includes:

[0081] S510, Obtain the execution action corresponding to the component in the page to be tested;

[0082] S520, Based on the input parameters, the execution action, and the preset code, a test script is generated;

[0083] S530, Execute the test script to obtain the execution result corresponding to the component in the page to be tested;

[0084] S540, if the execution result is different from the preset execution corresponding to the execution action, then it is determined that the component has failed the test.

[0085] It should also be noted that the page to be tested in this embodiment of the invention can be a front-end page, website page, browser page, application page, App page, and Web page, etc. The page to be tested can contain various types of components, such as display components (which can display text, images, sound, or video information) and interactive components (such as text boxes for obtaining user input, dropdown menus for user selection, etc.). To test the components in the page to be tested, the specific testing method is to perform corresponding operations on the components and see if the results are as expected. For example, for display components, see if the component can display information correctly; for interactive components, if an option is selected from the dropdown menu, see if the component produces the corresponding execution result. If it does, the component has passed the test; otherwise, the component has a problem. In this embodiment of the invention, the execution action corresponding to the component is first obtained. The execution action may be input, selection, or click. The execution actions corresponding to different components are different. In this embodiment of the invention, the type of execution action may be determined according to the specific type of the component, and then one of the execution actions of that type may be selected as the execution action of the component. Alternatively, the components and their corresponding execution actions may be recorded in advance through a mapping table, so the execution action corresponding to the component may be found by first searching in the mapping table.

[0086] Then, based on the input parameters, execution actions, and preset code, a test script is generated. The input parameters in the page under test are also related to the component type. For example, when the component type is a text box, the input information can include text, English, or punctuation marks, etc., including as many different types of information as possible. After the input information is entered into the text box, the display results of the text box for different types of input information can be obtained. The preset code represents the automation script, which contains a series of instructions for component testing. These instructions can be executed by the automation testing tool. In order to improve the maintainability and reusability of the test script, they must be constructed before executing the test script. The automation script reserves information such as the component's input parameters and execution actions. When the automation script needs to be used, the test script is generated directly by combining the specific input parameters and execution actions during the test.

[0087] Next, the test script is executed to obtain the execution results of the components on the page under test. If the execution result is different from the preset execution result, the component is judged to have failed the test. In this embodiment of the invention, the preset execution result is also recorded in the test script. Based on the input parameters and execution actions, the reaction of the component can be theoretically recorded. By comparing the actual execution of the component with the preset execution result, it is seen whether the two are the same. If they are different, the component is considered to have failed the test. If they are the same, the component is considered to have passed the test only when the actual execution result of the component for different types of input parameters is the same as the preset execution result, or only when the proportion of the actual execution result of the component being the same as the preset execution result within the preset number of tests is greater than the preset proportion, the component is considered to have passed the test. It is not possible to judge whether the component has passed the test based on a single test result. In this embodiment of the invention, the preset number of tests and the preset proportion can be determined according to the actual situation, and this embodiment of the invention does not make specific limitations on them.

[0088] Based on the above embodiments, preferably, after determining that the component is self-developed, the method further includes:

[0089] Add a preset overlay identifier to the component so that the component is identified by the preset overlay on the page to be tested.

[0090] In this embodiment of the invention, after determining that a component is self-developed, a preset overlay identifier is added to the component. The overlay identifier refers to covering the component on the page under test with an overlay element whose width and height completely cover the component's width and height. This allows the overlay element to be displayed on the component, thus identifying it. The overlay element can be gray, a shadow, etc., and can be determined according to the actual situation. This embodiment of the invention marks self-developed components on the page under test, facilitating testing by testers. Components not marked do not need to be tested, thus avoiding the need for testers to test every component, saving testing time, and improving the efficiency of page component testing.

[0091] In this embodiment of the invention, a data-paui identifier is added to the node. In specific implementation, this is achieved through the following code:

[0092] AddPauiAttribute(cmpArr){

[0093] cmpArr.forEach((item)=>{

[0094] if( / KUN|kun-|Mu|mu-|LUX|lux- / .test(item.name)){

[0095] item.instance.$el.setAttribute('data_paui','true')

[0096] }else if(item.children.length){

[0097] this.addPauiAttribute(item.children)

[0098] }

[0099] })

[0100] }

[0101] Based on the above embodiments, preferably, the preset rule is a regular expression.

[0102] Specifically, the preset rule in this embodiment of the invention is a regular expression, meaning the component name conforms to a regular expression. A regular expression, also known as a rule expression, is a text pattern that includes ordinary characters (such as letters from a to z) and special characters; it is a concept in computer science. A regular expression uses a single string to describe and match a series of strings that match a certain syntax rule. It is typically used to retrieve and replace text that conforms to a certain pattern (rule). A regular expression is a logical formula for string manipulation; it uses predefined specific characters and combinations of these characters to form a "rule string," which expresses a filtering logic for strings. By using regular expressions, ordinary component names can be filtered out, thereby selecting the components to be developed.

[0103] Figure 6 This is a schematic diagram of the structure of a page component testing system provided in an embodiment of the present invention, as shown below. Figure 6 As shown, the system includes an instantiation module 610, a traversal module 620, and a testing module 630, wherein:

[0104] The instantiation module 610 is used to instantiate the information of the page to be tested through the Vue framework and obtain the Vue test instance. For the components on the page to be tested, if the components are self-developed, the names of the components conform to preset rules.

[0105] The traversal module 620 is used to traverse the Vue instance under test, determine whether the target field in the Vue instance under test is empty, and if it is not empty, obtain the content information corresponding to the target field. The target field is the field corresponding to the component on the page under test, and the content information is the name of the component.

[0106] The testing module 630 is used to determine whether the content information conforms to the preset rules. If it does, it determines that the component is self-developed and tests the component.

[0107] This embodiment is a system embodiment corresponding to the above method. Its specific implementation process is the same as that of the above method embodiment. For details, please refer to the above method embodiment. The embodiments of the present invention will not be described again here.

[0108] Based on the above embodiments, preferably, the instantiation module includes a configuration unit and an assignment unit, wherein:

[0109] The configuration unit is used to obtain the configuration file information corresponding to the page to be tested. The configuration file information includes the name of the page to be tested, the location of the page to be tested, the data contained in the page to be tested, the components contained in the page to be tested, and the dynamic scripts.

[0110] The assignment unit is used to create a new initial Vue instance using the Vue framework, and assign values ​​to the initial Vue instance according to the configuration file information to obtain the Vue instance to be tested, wherein the components contained in the page to be tested are mounted on the target fields of the Vue instance to be tested.

[0111] Based on the above embodiments, preferably, the traversal module includes a traversal unit and a judgment unit, wherein:

[0112] The traversal unit is used to traverse starting from the root node of the Vue instance under test;

[0113] The judgment unit is used to obtain the value corresponding to the target field if the target field is encountered during traversal, and if the value is not empty, store the value in a preset array; otherwise, continue traversal.

[0114] Based on the above embodiments, preferably, the test module includes an acquisition unit, a script unit, an execution unit, and a comparison unit, wherein:

[0115] The acquisition unit is used to acquire the execution action corresponding to the component in the page to be tested;

[0116] The script unit is used to generate a test script based on the input parameters, the execution action, and the preset code;

[0117] The execution unit is used to execute the test script to obtain the execution results corresponding to the components in the page to be tested;

[0118] The comparison unit is used to determine that the component has failed the test if the execution result is different from the preset execution corresponding to the execution action.

[0119] Based on the above embodiments, preferably, the execution action includes input, selection, and clicking.

[0120] Based on the above embodiments, preferably, a masking module is also included, wherein:

[0121] The overlay module is used to add a preset overlay identifier to the component so that the component is identified by the preset overlay on the page to be tested.

[0122] Based on the above embodiments, preferably, the preset rule is a regular expression.

[0123] Each module in the aforementioned page component testing system can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in a computer device, or stored in the computer device's memory as software, so that the processor can call and execute the corresponding operations of each module.

[0124] Figure 7 This is a schematic diagram of the structure of a computer device provided in an embodiment of the present invention. The computer device may be a server, and its internal structure diagram may be as follows: Figure 7 As shown. The computer device includes a processor, memory, network interface, and database connected via a system bus. The processor provides computing and control capabilities. The memory includes a computer storage medium and internal memory. The computer storage medium stores the operating system, computer programs, and the database. The internal memory provides an environment for the operation of the operating system and computer programs in the computer storage medium. The database stores data generated or acquired during the execution of a page component testing method, such as information about the page under test. The network interface is used to communicate with external terminals via a network connection. The computer program, when executed by the processor, implements a page component testing method.

[0125] In one embodiment, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, it implements the steps of the page component testing method in the above embodiment. Alternatively, when the processor executes the computer program, it implements the functions of each module / unit in the page component testing system embodiment.

[0126] In one embodiment, a computer storage medium is provided, on which a computer program is stored. When executed by a processor, the computer program implements the steps of the page component testing method in the above embodiment. Alternatively, when executed by a processor, the computer program implements the functions of each module / unit in the page component testing system embodiment described above.

[0127] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium, and when executed, it can include the processes of the embodiments of the above methods. Any references to memory, storage, databases, or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory can include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in various forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), dual data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), Rambus direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), etc.

[0128] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the above-described division of functional units and modules is used as an example. In practical applications, the above functions can be assigned to different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above.

[0129] The above-described embodiments are only used to illustrate the technical solutions of the present invention, and are not intended 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 modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should all be included within the protection scope of the present invention.< / children> < / children> < / options> < / button>

Claims

1. A method for testing page components, characterized in that, include: The information of the page to be tested is instantiated using the Vue framework to obtain the Vue test instance. For the components on the page to be tested, if the components are self-developed, the names of the components conform to the preset rules. The instantiation of the information of the page to be tested using the Vue framework to obtain the Vue test instance includes: Obtain the configuration file information corresponding to the page to be tested. The configuration file information includes the name of the page to be tested, the location of the page to be tested, the data contained in the page to be tested, the components contained in the page to be tested, and the dynamic scripts. A new initial Vue instance is created using the Vue framework, and the initial Vue instance is assigned values ​​according to the configuration file information to obtain the Vue instance to be tested. The components contained in the page to be tested are mounted on the target fields of the Vue instance to be tested. The Vue instance to be tested is traversed, and it is determined whether the target field in the Vue instance to be tested is empty. If it is not empty, the content information corresponding to the target field is obtained. The target field is the field corresponding to the component on the page to be tested, and the content information is the name of the component. Determine whether the content information conforms to the preset rules. If it does, determine that the component is self-developed and test the component.

2. The testing method for page components according to claim 1, characterized in that, The step of iterating through the Vue instance under test and determining whether the Vue instance under test contains the target field includes: The traversal begins from the root node of the Vue instance under test; If the target field is encountered during iteration, the value corresponding to the target field is obtained. If the value is not empty, the value is stored in a preset array; otherwise, the iteration continues.

3. The testing method for page components according to claim 1, characterized in that, The testing of the component includes: Obtain the execution action corresponding to the component in the page to be tested; Based on the input parameters, the execution action, and the preset code, a test script is generated; Execute the test script to obtain the execution results corresponding to the components in the page under test; If the execution result is different from the preset execution corresponding to the execution action, then the component is determined to have failed the test.

4. The testing method for page components according to claim 3, characterized in that, The actions performed include inputting, selecting, and clicking.

5. The testing method for page components according to any one of claims 1 to 4, characterized in that, The step of determining that the component is self-developed further includes: Add a preset overlay identifier to the component so that the component is identified by the preset overlay on the page to be tested.

6. The testing method for page components according to any one of claims 1 to 4, characterized in that, The preset rule is a regular expression.

7. A testing system for page components, characterized in that, The system is used to perform the steps of the testing method for page components as described in any one of claims 1-6, including: The instantiation module is used to instantiate the information of the page to be tested through the Vue framework and obtain the Vue test instance. For the components on the page to be tested, if the components are self-developed, the names of the components conform to preset rules. The traversal module is used to traverse the Vue instance under test, determine whether the target field in the Vue instance under test is empty, and if it is not empty, obtain the content information corresponding to the target field. The target field is the field corresponding to the component on the page under test, and the content information is the name of the component. The testing module is used to determine whether the content information conforms to the preset rules. If it does, the module determines that the component is self-developed and tests the component.

8. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the steps of the test method for page components as described in any one of claims 1 to 6.

9. A computer storage medium storing a computer program, characterized in that, When the computer program is executed by a processor, it implements the steps of the test method for page components as described in any one of claims 1 to 6.

Images