Automated testing method, apparatus, electronic device, and computer-readable storage medium

Abstract

The application provides an automatic test method, device, electronic equipment and computer readable storage medium. The method comprises the following steps: obtaining a template and a script of a Vue component of a to-be-tested browser; performing static analysis on the template and the script to obtain a DOM tree representing elements in the template, an event-method mapping table representing the relationship between events in the template and functions in the script, and a dynamic attribute dependency graph representing the data dependency relationship between each instruction in the template; parsing the DOM tree, the event-method mapping table and the dynamic attribute dependency graph to construct a state transition directed graph, wherein the nodes of the state transition directed graph are state snapshots of the DOM tree, and the edges are trigger conditions; generating a test script according to the DOM tree, the event-method mapping table and the state transition directed graph; and testing the to-be-tested browser according to the test script. The application can realize automatic testing of the Vue component, and the automatic testing has high accuracy, low cost and high efficiency.

Description

Technical Field

[0001] This application relates to the field of automated testing technology, and in particular to an automated testing method, apparatus, electronic device, and computer-readable storage medium. Background Technology

[0002] In modern front-end development, the Vue.js framework is widely used due to its reactive data binding and component-based features. However, automated testing of Vue components faces the following challenges: 1. Complex component logic: The DOM structure, event binding, and dynamic properties (such as v-if, v-for, v-model) of Vue components are tightly coupled, making it difficult for traditional testing tools to accurately parse their logical relationships, resulting in low test accuracy; 2. Inefficient test case generation: Manually writing Selenium test cases is time-consuming and prone to missing boundary scenarios, especially when component states change frequently, making it difficult to dynamically adapt assertion logic; 3. High maintenance costs: Test cases need to be updated synchronously when components iterate, but existing tools lack an automated synchronization mechanism based on the component structure, leading to decreased test coverage.

[0003] To solve the above problems, there is an urgent need for an automated testing method that can automatically parse Vue components. Summary of the Invention

[0004] In view of this, this application provides an automated testing method, apparatus, electronic device, and computer-readable storage medium, which can realize automated testing of Vue components, and the automated testing is highly accurate, low-cost, and efficient.

[0005] A first aspect of this application provides an automated testing method, comprising: obtaining a template and script of a Vue component of a browser to be tested; performing static analysis on the template and script to obtain a DOM tree representing elements in the template, an event-method mapping table representing the relationship between events in the template and functions in the script, and a dynamic attribute dependency graph representing the dependency relationship between instructions and data in the template; parsing the DOM tree, the event-method mapping table, and the dynamic attribute dependency graph to construct a state transition directed graph, wherein the nodes of the state transition directed graph are state snapshots of the DOM tree, and the edges are triggering conditions; generating a test script based on the DOM tree, the event-method mapping table, and the state transition directed graph, wherein a selector for controlling page elements of the browser to be tested is generated based on the DOM tree, operation instructions for the test script are generated based on the event-method mapping table, and assertion logic for the test script is generated based on the state transition directed graph; and testing the browser to be tested based on the test script.

[0006] In one possible implementation, the static analysis of the template and the script to obtain a DOM tree representing the elements in the template, an event-method mapping table representing the relationship between instructions in the template and functions in the script, and a dynamic attribute dependency graph representing the dependency relationships between each instruction in the template includes: extracting HTML elements from the template; constructing the DOM tree of the HTML elements, wherein the DOM tree includes the tag name, attributes, and hierarchical relationship of each HTML element; identifying a first feature instruction in the template used to listen for DOM events; associating the first feature instruction with the calling function of the script to generate the event-method mapping table; identifying a second feature instruction in the template used to control the HTML elements, and extracting the feature attributes of the second feature instruction, wherein the feature attributes are used to represent the data that the second feature instruction depends on; and constructing the dynamic attribute dependency graph based on the second feature instruction and the feature attributes, wherein the nodes of the dynamic attribute dependency graph are the attributes of the data, and the edges of the dynamic attribute dependency graph are the dependencies between each instruction in the template and the data.

[0007] In one possible implementation, parsing the DOM tree, the event-method mapping table, and the dynamic attribute dependency graph to construct a directed state transition graph includes: identifying logic for triggering state changes based on the event-method mapping table and the calling functions in the script; constructing a method call graph based on the logic, the method call graph being used to display the call paths and dependencies between the calling functions; obtaining state change points for recording specific events or operations that cause state changes; and constructing the directed state transition graph based on the DOM tree, the method call graph, the state change points, and the dynamic attribute dependency graph.

[0008] In one possible implementation, the method further includes: obtaining a first characteristic parameter corresponding to the `data` function in the script and a second characteristic parameter corresponding to the `props` function, wherein the first characteristic parameter is the initial value of the property and its data type in the object returned by the `data` function, and the second characteristic parameter is the externally passed-in property and its type definition received by the Vue component through the `props` function; obtaining data update logic based on the computed property and watch listener of the script; generating an initial state snapshot based on the first characteristic parameter, the second characteristic parameter, and the data update logic; and generating the assertion logic of the test script based on the state transition directed graph includes: generating the assertion logic based on the initial state snapshot and the state transition directed graph.

[0009] In one possible implementation, the test script includes multiple test cases; testing the browser under test according to the test script includes: executing the test script to obtain the execution result of each test case; determining the failed test cases among the multiple test cases based on the execution results; analyzing the failed test cases based on the initial state snapshot to obtain a first analysis result; obtaining test coverage based on the initial state snapshot and the execution results; and generating a test analysis report for the browser under test based on the first analysis result and the test coverage.

[0010] In one possible implementation, after obtaining the test coverage based on the initial state snapshot and the execution result, the method further includes: determining untested state transition paths based on the test coverage; optimizing the test script to obtain a new test script, wherein the new test script includes target test cases that cover the untested state transition paths.

[0011] In one possible implementation, the static analysis of the template and the script includes: performing static analysis on the template and the script according to a component parsing engine, wherein the component parsing engine includes an analysis rule base; determining rule defect information of the analysis rule base based on the first analysis result; and updating the analysis rule base according to the rule defect information to obtain a new analysis rule base.

[0012] Secondly, embodiments of this application also provide an automated testing device, comprising: an acquisition module, an analysis module, a parsing module, a generation module, and a testing module; the acquisition module is used to acquire the template and script of the Vue component of the browser to be tested; the analysis module is used to perform static analysis on the template and the script to obtain a DOM tree representing the elements in the template, an event-method mapping table representing the relationship between events in the template and functions in the script, and a dynamic attribute dependency graph representing the dependency relationship between each instruction and data in the template; the parsing module is used to analyze the DOM tree, the event-method mapping table, and the dynamic attribute dependency graph. The attribute dependency graph is parsed to construct a directed state transition graph, where the nodes of the directed state transition graph are snapshots of the DOM tree's state, and the edges are triggering conditions. The generation module is used to generate test scripts based on the DOM tree, the event-method mapping table, and the directed state transition graph. Specifically, it generates selectors for controlling page elements of the browser under test based on the DOM tree, operation instructions for the test script based on the event-method mapping table, and assertion logic for the test script based on the directed state transition graph. The testing module is used to test the browser under test based on the test scripts.

[0013] Thirdly, embodiments of this application also provide an electronic device, the electronic device including a processor and a memory, the memory being used to store instructions, and the processor being used to call the instructions in the memory, causing the electronic device to execute the automated testing method as described in the first aspect.

[0014] Fourthly, embodiments of this application also provide a computer-readable storage medium that stores computer instructions that, when executed on an electronic device, cause the electronic device to perform the automated testing method as described in the first aspect.

[0015] Compared with related technologies, this application has at least the following advantages: By performing static analysis on the templates and scripts of Vue components, the DOM tree, event-method mapping table, and dynamic property dependency graph can be extracted. Since the DOM tree represents elements in the template, the event-method mapping table represents the relationship between events in the template and functions in the script, and the dynamic property dependency graph represents the dependency relationship between instructions and data in the template, the logical relationship between the DOM structure, event binding, and dynamic properties in Vue components can be accurately analyzed through the DOM tree, event-method mapping table, and dynamic property dependency graph, thereby improving the accuracy of subsequent automated testing. Furthermore, by analyzing the DOM tree, event-method mapping table, and dynamic property dependency graph, a directed state transition graph is constructed, which can automatically generate test scripts without manual generation, making automated testing both cost-effective and efficient.

[0016] Furthermore, the aforementioned automated testing methods, automated testing devices, electronic devices, and computer-readable storage media can automatically generate test scripts, making automated testing both cost-effective and efficient. Attached Figure Description

[0017] Figure 1 A flowchart illustrating the steps of an automated testing method provided in an embodiment of this application.

[0018] Figure 2 This is a flowchart illustrating the process of parsing Vue component code, provided as an embodiment of this application.

[0019] Figure 3 This is a flowchart illustrating a test script generation method provided in an embodiment of this application.

[0020] Figure 4 This is another flowchart of the automated testing method provided in an embodiment of this application.

[0021] Figure 5 This is an interactive diagram illustrating the automatic optimization of test scripts provided in one embodiment of this application.

[0022] Figure 6 This is a functional block diagram of an automated testing device provided in an embodiment of this application.

[0023] Figure 7 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. Detailed Implementation

[0024] To better understand the above-mentioned objectives, features, and advantages of this application, the application will be described in detail below with reference to the accompanying drawings and specific embodiments. It should be noted that, unless otherwise specified, the embodiments and features described in these embodiments can be combined with each other.

[0025] The following description sets forth many specific details to provide a full understanding of this application. The described embodiments are only some, not all, of the embodiments of this application.

[0026] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs. The terminology used herein in the specification of this application is for the purpose of describing particular embodiments only and is not intended to be limiting of this application.

[0027] It should be further noted that, in this document, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes that element.

[0028] In this application, "at least one" means one or more, and "more than one" means two or more. "And / or" describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, or B alone, where A and B can be singular or plural. The terms "first," "second," "third," "fourth," etc. (if present) in the specification, claims, and drawings of this application are used to distinguish similar objects, not to describe a specific order or sequence.

[0029] In the embodiments of this application, the terms "exemplary" or "for example" are used to indicate that something is an example, illustration, or description. Any embodiment or design that is described as "exemplary" or "for example" in the embodiments of this application should not be construed as being more preferred or advantageous than other embodiments or design. Specifically, the use of the terms "exemplary" or "for example" is intended to present the relevant concepts in a specific manner.

[0030] For ease of understanding, exemplary descriptions of some concepts related to the embodiments of this application are provided for reference.

[0031] Vue components: These are the core concept in the Vue.js framework used to build reusable UI fragments. They encapsulate specific functionality and appearance, supporting independent development and management of HTML, CSS, and JavaScript.

[0032] HTML elements are the basic units that make up a web page document. They refer to all the code from the start tag to the end tag, including the tag itself and its content.

[0033] CSS selectors: These allow for one-to-one, one-to-many, or many-to-one control over elements in an HTML page. Each CSS style definition consists of two parts, in the following form: [code] selector {style} [ / code] The part before the curly braces is the "selector." The "selector" specifies the target of the "style" within the curly braces, that is, which elements in the webpage the "style" applies to.

[0034] XPath: XML Path Language, is a language used to determine the location of a part of an XML document.

[0035] Static analysis: This involves directly analyzing the structure of source code or binary files without running the code. For example, tools can be used during the development phase to check for variable naming conventions or potential memory leaks. Its advantage lies in early intervention; developers can identify potential defects while coding, reducing the cost of subsequent fixes.

[0036] Please refer to Figure 1 , Figure 1 This is a flowchart illustrating the steps of an embodiment of the automated testing method of this application. Depending on different requirements, the order of the steps in this flowchart can be changed, and some steps can be omitted. The automated testing method of this application is applied to vehicles.

[0037] The specific process of this embodiment is as follows: Figure 1 As shown, it includes the following steps: S101, retrieve the template and script of the Vue component for the browser to be tested.

[0038] In some embodiments, the code file of the Vue component is obtained, which includes the template, script and style parts of the Vue component.

[0039] S102, perform static analysis on the template and script to obtain the DOM tree representing the elements in the template, the event-method mapping table representing the relationship between events in the template and functions in the script, and the dynamic attribute dependency graph representing the dependency relationship between each instruction and data in the template.

[0040] In some embodiments, static analysis tools (@babel / parser or a custom AST parser) are used to parse the template, script, and style portions of a Vue component.

[0041] Specifically, static analysis of the template and script is performed as follows: HTML elements are extracted from the template, and a DOM tree of the HTML elements is constructed, where the DOM tree includes the tag name, attributes, and hierarchical relationship of each HTML element; the first characteristic directive used to listen for DOM events in the template is identified; the first characteristic directive is associated with the script's calling functions to generate an event-method mapping table; the second characteristic directive used to control HTML elements in the template is identified, and the characteristic attributes of the second characteristic directive are extracted, which are used to characterize the data that the second characteristic directive depends on; a dynamic attribute dependency graph is constructed based on the second characteristic directive and the characteristic attributes, where the nodes of the dynamic attribute dependency graph are the attributes of the data, and the edges of the dynamic attribute dependency graph represent the dependencies between each directive in the template and the data.

[0042] To facilitate understanding, the following will be combined with... Figure 2 This embodiment provides a detailed explanation of how to parse the code files of Vue components: Please refer to Figure 2 This is a flowchart illustrating the process of parsing Vue component code, provided in an embodiment of this application.

[0043] 1. Extract DOM structure: Extract HTML elements from the template, construct a tree structure, also known as the DOM tree; record the tag name, attributes (such as id, class) and hierarchical relationship of each element.

[0044] 2. Extract event bindings: Identify the v-on or @ directives in the template, i.e., the first characteristic directives; associate the v-on or @ directives with the corresponding functions of the methods object in the script, i.e., call the functions; generate an event-method mapping table in the format { element path: { event type: method name}}.

[0045] 3. Parse dynamic attributes: Parse directives such as v-bind, v-if, and v-for, which are also second-feature directives, and extract dependent data (such as data, props, or computed attributes); construct dependency relationship chains to obtain a dynamic attribute dependency graph.

[0046] In some embodiments, the DOM tree and event-method mapping table are in JSON format.

[0047] S103 parses the DOM tree, event-method mapping table, and dynamic attribute dependency graph, and constructs a directed graph of state transitions. The nodes of the directed graph of state transitions are snapshots of the state of the DOM tree, and the edges are triggering conditions.

[0048] In some embodiments, the construction of a directed graph of state transition includes: identifying logic for triggering state changes based on an event-method mapping table and calling functions in a script; constructing a method call graph based on the logic, the method call graph being used to show the call paths and dependencies between calling functions; obtaining state change points for recording specific events or operations that change the state; and constructing a directed graph of state transition based on the DOM tree, the method call graph, the state change points, and the dynamic attribute dependency graph.

[0049] Specifically, the DOM tree is used to understand the structure and hierarchy of Vue components, such as identifying which elements are controlled by dynamic properties (e.g., v-if). The event-method map provides the association between events (e.g., @click) and methods in the script (e.g., handleClick), guiding method chain tracing. The dynamic property dependency graph records the dependencies between data (e.g., data.show) and template directives (e.g., v-if), aiding in the construction of the directed graph of state transitions. The method call graph shows the call paths and dependencies between functions in methods; for example, handleClick might call other functions, reflecting the logical flow. By identifying state change points, the operations that trigger state changes can be located (e.g., toggleShow modifies data.show), providing key data for the directed graph of state transitions. Therefore, the directed graph of state transitions can be constructed based on the DOM tree, method call graph, state change points, and dynamic property dependency graph.

[0050] S104 generates a test script based on the DOM tree, event-method mapping table, and directed graph of state transitions.

[0051] Specifically, it generates selectors for controlling elements on the browser page under test based on the DOM tree, generates operation instructions for the test script based on the event-method mapping table, and generates assertion logic for the test script based on the state transition directed graph.

[0052] In some embodiments, the system also obtains the first characteristic parameter corresponding to the `data` function in the script and the second characteristic parameter corresponding to the `props` function. The first characteristic parameter is the initial value of the property and its data type in the object returned by the `data` function, and the second characteristic parameter is the externally passed-in property and its type definition received by the Vue component through the `props` function. Based on the script's computed properties and watch listeners, the system obtains the data update logic. An initial state snapshot is generated based on the first characteristic parameter, the second characteristic parameter, and the data update logic. Assertion logic for the test script is generated based on the directed graph of state transitions, including generating assertion logic based on the initial state snapshot and the directed graph of state transitions.

[0053] Specifically, the update logic of computed properties is as follows: computed properties are derived properties calculated based on other reactive data (such as data or props). When the data they depend on changes, computed properties are automatically recalculated and updated. For example, if there is a computed property: { fullMessage() { return this.message + '!'}}, when data.message changes from "Hello" to "Hi", fullMessage will be updated to "Hi!". The tracking logic includes dependencies (such as messages) and computed expressions.

[0054] The update logic of the watch listener: watch is used to listen for changes in specific data (such as data or props) and execute the corresponding callback function. For example, if there is a watch: { show(newVal) { console.log('show changed to', newVal)}}, when data.show changes from false to true, the callback is triggered to record the change. The tracking logic includes the monitored data (such as show) and the state updates that may be triggered in the callback (such as modifying other data).

[0055] It's worth noting that the initial state snapshot is used as the basis for generating dynamic assertion logic. For example, combined with a directed graph of state transitions, the assertion logic verifies whether DOM changes or data states match the expectations of the initial state (e.g., after `show: {value: false, type: boolean}` becomes true, the `p` element is displayed). The initial state snapshot also helps determine the starting state of test cases, ensuring that sequences of interactive actions (such as clicking a button) begin with the correct initial value.

[0056] To facilitate understanding, the following will be combined with... Figure 3 This embodiment provides a detailed explanation of how the test script is generated: Please refer to Figure 3 This is a flowchart illustrating the test script generation method provided in this application embodiment.

[0057] 1. Generate element locators (i.e., selectors): Generate CSS selectors or XPath expressions based on the hierarchy and attributes of the DOM element tree; prioritize stable positioning methods (such as id or unique class) and avoid dynamically generated class names.

[0058] 2. Generate action sequences: Based on the event-method mapping table, generate Selenium operation instructions (such as click, sendKeys, hover), which are the operation instructions of the test script; arrange the action sequences to simulate user interaction paths (such as clicking a button and then entering text).

[0059] 3. Dynamic assertion injection: Generate assertion logic based on the directed graph of state transitions to verify DOM changes or data states. For example, after clicking a button, verify that data.show becomes true or that a certain element is displayed; use Selenium's assert method to inject the expected results.

[0060] In some embodiments, the test script is a Selenium test script, which includes test case metadata such as test case description, coverage path, and priority.

[0061] S105, Test the browser to be tested according to the test script. In some embodiments, the test script includes multiple test cases; testing the browser to be tested according to the test script includes: executing the test script to obtain the execution result of each test case; determining the failed test cases among the multiple test cases based on the execution result, analyzing the failed test cases based on the initial state snapshot to obtain a first analysis result; obtaining test coverage based on the initial state snapshot and the execution result; and generating a test analysis report of the browser to be tested based on the first analysis result and the test coverage.

[0062] Specifically, after generating the Selenium test script, the testing methods include: 1. Initialize Selenium WebDriver and configure the target browser and test environment.

[0063] 2. Execute the test script and record the execution result (pass / fail) of each test case.

[0064] 3. Capture detailed information about failed test cases (such as error stacks and screenshots).

[0065] 4. Coverage Analysis: Statistically analyze the logical branches and state transition paths covered by the test; mark the uncovered paths and generate a test analysis report.

[0066] Compared with related technologies, the embodiments of this application have at least the following advantages: By performing static analysis on the templates and scripts of Vue components, the DOM tree, event-method mapping table, and dynamic attribute dependency graph can be extracted. Since the DOM tree represents elements in the template, the event-method mapping table represents the relationship between events in the template and functions in the script, and the dynamic attribute dependency graph represents the dependency relationship between instructions and data in the template, the logical relationship between the DOM structure, event binding, and dynamic attributes in Vue components can be accurately analyzed through the DOM tree, event-method mapping table, and dynamic attribute dependency graph, thereby improving the accuracy of subsequent automated testing. Furthermore, by analyzing the DOM tree, event-method mapping table, and dynamic attribute dependency graph, a directed state transition graph is constructed, which can automatically generate test scripts without manual generation, making automated testing both cost-effective and efficient.

[0067] Please refer to Figure 4 , Figure 4 This is a flowchart illustrating the steps of an embodiment of the automated testing method of this application. Depending on different requirements, the order of the steps in this flowchart can be changed, and some steps can be omitted. This automated testing method can be applied to the aforementioned automated testing apparatus, but is not limited thereto, and the embodiments of this application do not limit it in this regard.

[0068] This embodiment is a further improvement on the aforementioned embodiment. The main improvement lies in the following: In this embodiment, untested state transition paths are also determined based on test coverage; the test scripts are optimized to obtain new test scripts, wherein the new test scripts include target test cases that cover the untested state transition paths. This approach enables dynamic optimization of test scripts, improving the coverage and stability of automated testing.

[0069] The specific process of this embodiment is as follows: Figure 4 As shown, it includes the following steps: S401 retrieves the template and script of the Vue component for the browser to be tested.

[0070] S402, perform static analysis on the template and script to obtain the DOM tree representing the elements in the template, the event-method mapping table representing the relationship between events in the template and functions in the script, and the dynamic attribute dependency graph representing the dependency relationship between each instruction and data in the template.

[0071] S403 parses the DOM tree, event-method mapping table, and dynamic property dependency graph, and constructs a directed graph of state transitions. The nodes of the directed graph of state transitions are snapshots of the state of the DOM tree, and the edges are triggering conditions.

[0072] S404 generates test scripts based on the DOM tree, event-method mapping table, and directed graph of state transitions.

[0073] S401 to S404 in this embodiment are similar to S101 to S104 in the previous embodiment. To avoid repetition, they will not be described again here.

[0074] S405, execute the test script and obtain the execution results of each test case.

[0075] S406: Based on the execution results, identify the failed test cases among multiple test cases, analyze the failed test cases based on the initial state snapshot, and obtain the first analysis result.

[0076] Specifically, the analysis of failed test cases relies on initial state snapshots to identify whether the problem is caused by deviations from the initial values.

[0077] S407, test coverage is obtained based on the initial state snapshot and execution results.

[0078] Specifically, the initial state snapshot is compared with the execution results for coverage analysis. Uncovered state change paths (such as boundary values ​​that were not tested in the initial state) are marked and adaptive optimization is triggered.

[0079] S408 generates a test analysis report for the browser under test based on the first analysis results and test coverage.

[0080] S409 determines the untested state transition path based on test coverage.

[0081] S410, optimize the test script to obtain a new test script, which includes target test cases that cover untested state transition paths.

[0082] In some embodiments, static analysis of templates and scripts includes: performing static analysis of templates and scripts according to a component parsing engine, wherein the component parsing engine includes an analysis rule base; determining rule defect information of the analysis rule base according to a first analysis result; and updating the analysis rule base according to the rule defect information to obtain a new analysis rule base.

[0083] To facilitate understanding, the following will be combined with... Figure 5 This embodiment provides a detailed explanation of how to automate the optimization of test scripts: 1. The test execution module sends the test coverage to the optimization module, and the optimization module queries the analysis rule base for the untested state transition path.

[0084] 2. The analysis rule base returns rule defect information to the optimization module, which then updates the parsed rules in the analysis rule base to obtain a new analysis rule base.

[0085] 3. The test execution module re-performs automated testing on the browser under test based on the parsing rules in the information analysis rule base.

[0086] Compared with related technologies, the embodiments of this application have at least the following advantages: By performing static analysis on the templates and scripts of Vue components, the DOM tree, event-method mapping table, and dynamic attribute dependency graph can be extracted. Since the DOM tree represents elements in the template, the event-method mapping table represents the relationship between events in the template and functions in the script, and the dynamic attribute dependency graph represents the dependency relationship between instructions and data in the template, the logical relationship between the DOM structure, event binding, and dynamic attributes in Vue components can be accurately analyzed through the DOM tree, event-method mapping table, and dynamic attribute dependency graph, thereby improving the accuracy of subsequent automated testing. Furthermore, by analyzing the DOM tree, event-method mapping table, and dynamic attribute dependency graph, a directed state transition graph is constructed, which can automatically generate test scripts without manual generation, making automated testing both cost-effective and efficient.

[0087] Based on the same idea as the automated testing method in the above embodiments, this application also provides an automated testing apparatus that can be used to execute the above automated testing method. For ease of explanation, the structural schematic diagram of the automated testing apparatus embodiment only shows the parts related to the embodiments of this application. Those skilled in the art will understand that the illustrated structure does not constitute a limitation on the apparatus, and may include more or fewer components than shown, or combine certain components, or have different component arrangements.

[0088] like Figure 6 As shown, the automated testing apparatus 60 includes an acquisition module 601, an analysis module 602, a parsing module 603, a generation module 604, and a testing module 605. In some embodiments, the above modules can be programmable software instructions stored in memory and executable by a processor. It is understood that in other embodiments, the above modules can also be program instructions or firmware embedded in the processor.

[0089] Get module 601, used to retrieve the templates and scripts of the Vue components in the browser to be tested; Analysis module 602 is used to perform static analysis on the template and the script to obtain a DOM tree representing the elements in the template, an event-method mapping table representing the relationship between events in the template and functions in the script, and a dynamic attribute dependency graph representing the dependency relationship between each instruction and data in the template. The parsing module 603 is used to parse the DOM tree, the event-method mapping table, and the dynamic attribute dependency graph, and construct a state transition directed graph, wherein the nodes of the state transition directed graph are state snapshots of the DOM tree, and the edges are triggering conditions; The generation module 604 is used to generate a test script based on the DOM tree, the event-method mapping table, and the state transition directed graph, wherein the selector for controlling the elements of the browser page to be tested is generated based on the DOM tree, the operation instructions of the test script are generated based on the event-method mapping table, and the assertion logic of the test script is generated based on the state transition directed graph. The test module 605 is used to test the browser to be tested according to the test script.

[0090] Please refer to point 7. Figure 7 This is a schematic diagram of an embodiment of the electronic device of this application.

[0091] In some embodiments, processor 701 may be a central processing unit (CPU), microprocessor, or other data processing chip, used to run program code stored in memory 702 or process data, such as the automated testing method of the present invention.

[0092] In some embodiments, processor 701 may be a single server or a group of servers. The server group may be centralized or distributed. In some embodiments, processor 701 may be local or remote. In some embodiments, processor 701 may be implemented on a cloud platform. In one embodiment, the cloud platform may include a private cloud, public cloud, hybrid cloud, community cloud, distributed cloud, intranet, multi-cloud, etc., or any combination thereof.

[0093] In some embodiments, memory 702 may be an internal storage unit of electronic device 700, such as a hard disk or memory of electronic device 700. In other embodiments, memory 702 may also be an external storage device of electronic device 700, such as a plug-in hard disk, smart media card (SMC), secure digital (SD) card, flash card, etc. equipped on electronic device 700.

[0094] Furthermore, the memory 702 may include both internal storage units of the electronic device 700 and external storage devices. The memory 702 is used to store application software and various types of data installed on the electronic device 700.

[0095] In some embodiments, display 703 may be an LED display, a liquid crystal display, a touch-sensitive liquid crystal display, or an OLED (Organic Light-Emitting Diode) touchscreen. Display 703 is used to display information from electronic device 700 and to display a visual user interface. Components 701-703 of electronic device 700 communicate with each other via a system bus.

[0096] In one embodiment, when the processor 701 executes the automated test program in the memory 702, the following steps can be implemented: Get the template and script of the Vue component for the browser to be tested; Static analysis is performed on the template and the script to obtain a DOM tree representing the elements in the template, an event-method mapping table representing the relationship between events in the template and functions in the script, and a dynamic attribute dependency graph representing the dependency relationship between each instruction and data in the template. The DOM tree, the event-method mapping table, and the dynamic attribute dependency graph are parsed to construct a state transition directed graph, wherein the nodes of the state transition directed graph are state snapshots of the DOM tree, and the edges are triggering conditions; A test script is generated based on the DOM tree, the event-method mapping table, and the directed state transition graph. Specifically, a selector for controlling the elements of the browser page under test is generated based on the DOM tree, operation instructions for the test script are generated based on the event-method mapping table, and assertion logic for the test script is generated based on the directed state transition graph. The browser to be tested is tested according to the test script.

[0097] It should be understood that when the processor 701 executes the automated test program in the memory 702, in addition to the functions mentioned above, it can also perform other functions, as detailed in the description of the corresponding method embodiments above.

[0098] Furthermore, this embodiment of the invention does not specifically limit the type of electronic device 700 mentioned. Electronic device 700 can be a mobile phone, tablet computer, personal digital assistant (PDA), wearable device, laptop computer, or other portable electronic device. Exemplary embodiments of portable electronic devices include, but are not limited to, portable electronic devices running iOS, Android, Microsoft, or other operating systems. The aforementioned portable electronic device can also be other portable electronic devices, such as a laptop computer with a touch-sensitive surface (e.g., a touch panel). It should also be understood that in some other embodiments of the invention, electronic device 700 may not be a portable electronic device, but rather a desktop computer with a touch-sensitive surface (e.g., a touch panel).

[0099] Accordingly, this application also provides a computer-readable storage medium for storing computer-readable programs or instructions. When the programs or instructions are executed by a processor, they can implement the steps or functions of the automated testing methods provided in the above-described method embodiments.

[0100] Those skilled in the art will understand that all or part of the processes of the methods described in the above embodiments can be implemented by a computer program instructing related hardware (such as a processor, controller, etc.), and the computer program can be stored in a computer-readable storage medium. The computer-readable storage medium may be a disk, optical disk, read-only memory, or random access memory, etc.

[0101] The above provides a detailed description of the automated testing method, apparatus, electronic device, and computer-readable storage medium provided in this application. Specific examples have been used to illustrate the principles and implementation methods of this application. The descriptions of the above embodiments are only for the purpose of helping to understand the method and core ideas of this application. At the same time, those skilled in the art will recognize that there will be changes in the specific implementation methods and application scope based on the ideas of this application. Therefore, the content of this specification should not be construed as a limitation of this application.

Claims

1. An automated testing method, characterized by, include: Get the template and script of the Vue component for the browser to be tested; Static analysis is performed on the template and the script to obtain a DOM tree representing the elements in the template, an event-method mapping table representing the relationship between events in the template and functions in the script, and a dynamic attribute dependency graph representing the dependency relationship between each instruction and data in the template. This includes: extracting HTML elements from the template; constructing the DOM tree of the HTML elements, wherein the DOM tree includes the tag name, attributes, and hierarchical relationship of each HTML element; identifying a first characteristic instruction in the template used to listen for DOM events; associating the first characteristic instruction with the calling function of the script to generate the event-method mapping table; identifying a second characteristic instruction in the template used to control the HTML elements, and extracting the characteristic attributes of the second characteristic instruction, wherein the characteristic attributes represent the data that the second characteristic instruction depends on; and constructing the dynamic attribute dependency graph based on the second characteristic instruction and the characteristic attributes, wherein the nodes of the dynamic attribute dependency graph are the attributes of the data, and the edges of the dynamic attribute dependency graph represent the dependency relationship between each instruction and data in the template. The DOM tree, the event-method mapping table, and the dynamic attribute dependency graph are parsed to construct a state transition directed graph, wherein the nodes of the state transition directed graph are state snapshots of the DOM tree, and the edges are triggering conditions; A test script is generated based on the DOM tree, the event-method mapping table, and the directed state transition graph. Specifically, a selector for controlling the elements of the browser page under test is generated based on the DOM tree, operation instructions for the test script are generated based on the event-method mapping table, and assertion logic for the test script is generated based on the directed state transition graph. The browser to be tested is tested according to the test script.

2. The automated testing method according to claim 1, characterized in that, The process of parsing the DOM tree, the event-method mapping table, and the dynamic attribute dependency graph to construct a directed graph of state transitions includes: Based on the event-method mapping table and the function calls in the script, identify the logic used to trigger state changes; Based on the aforementioned logic, a method call graph is constructed, which is used to display the call paths and dependencies between the called functions; Obtain the state change point used to record the specific event or operation that changed the state; The state transition directed graph is constructed based on the DOM tree, the method call graph, the state change points, and the dynamic attribute dependency graph.

3. The automated testing method according to claim 1 or 2, characterized in that, The method further includes: Obtain the first characteristic parameter corresponding to the data function in the script, and the second characteristic parameter corresponding to the props function. The first characteristic parameter is the initial value of the property and its data type in the object returned by the data function, and the second characteristic parameter is the externally passed-in property and its type definition received by the Vue component through the props function. Based on the computed property and watch listener of the script, obtain the data update logic; An initial state snapshot is generated based on the first feature parameter, the second feature parameter, and the data update logic; The assertion logic for generating the test script based on the directed graph of state transitions includes: The assertion logic is generated based on the initial state snapshot and the directed graph of state transitions.

4. The automated testing method according to claim 3, characterized in that, The test script includes multiple test cases; The step of testing the browser under test according to the test script includes: Execute the test script to obtain the execution result of each test case; Based on the execution results, multiple failed test cases are identified from the test cases. The failed test cases are then analyzed based on the initial state snapshot to obtain a first analysis result. The test coverage is obtained based on the initial state snapshot and the execution results; A test analysis report for the browser under test is generated based on the first analysis results and the test coverage.

5. The automated testing method according to claim 4, characterized in that, After obtaining the test coverage based on the initial state snapshot and the execution results, the method further includes: Determine the untested state transition path based on the test coverage; The test script is optimized to obtain a new test script, wherein the new test script includes a target test case that covers the untested state transition path.

6. The automated testing method according to claim 4, characterized in that, The static analysis of the template and the script includes: The template and the script are statically analyzed according to the component parsing engine, wherein the component parsing engine includes an analysis rule base; Based on the first analysis result, determine the rule defect information of the analysis rule base; The analysis rule base is updated based on the rule defect information to obtain a new analysis rule base.

7. An automated testing device, characterized in that, include: The module includes an acquisition module, an analysis module, a parsing module, a generation module, and a testing module. The acquisition module is used to acquire the templates and scripts of the Vue components of the browser to be tested; The analysis module is used to perform static analysis on the template and the script to obtain a DOM tree representing the elements in the template, an event-method mapping table representing the relationship between events in the template and functions in the script, and a dynamic attribute dependency graph representing the dependency relationship between each instruction and data in the template. This includes: extracting HTML elements from the template; constructing the DOM tree of the HTML elements, wherein the DOM tree includes the tag name, attributes, and hierarchical relationship of each HTML element; identifying a first feature instruction in the template used to listen for DOM events; associating the first feature instruction with the calling function of the script to generate the event-method mapping table; identifying a second feature instruction in the template used to control the HTML elements, and extracting the feature attributes of the second feature instruction, wherein the feature attributes represent the data that the second feature instruction depends on; and constructing the dynamic attribute dependency graph based on the second feature instruction and the feature attributes, wherein the nodes of the dynamic attribute dependency graph are the attributes of the data, and the edges of the dynamic attribute dependency graph represent the dependency relationship between each instruction and data in the template. The parsing module is used to parse the DOM tree, the event-method mapping table, and the dynamic attribute dependency graph to construct a state transition directed graph, wherein the nodes of the state transition directed graph are state snapshots of the DOM tree, and the edges are triggering conditions; The generation module is used to generate test scripts based on the DOM tree, the event-method mapping table, and the state transition directed graph. Specifically, it generates selectors for controlling elements of the browser page under test based on the DOM tree, generates operation instructions for the test script based on the event-method mapping table, and generates assertion logic for the test script based on the state transition directed graph. The testing module is used to test the browser under test according to the test script.

8. An electronic device, the electronic device comprising a processor and a memory, characterized in that, The memory is used to store instructions, and the processor is used to call the instructions in the memory to cause the electronic device to execute the automated testing method as described in any one of claims 1 to 6.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer instructions that, when executed on an electronic device, cause the electronic device to perform an automated testing method as described in any one of claims 1 to 6.

Images