Front-end page testing method and device, storage medium and computer equipment

Abstract

The invention provides a front-end page test method and device, a storage medium and computer equipment, and the method comprises the steps: determining a to-be-tested front-end page and a corresponding recording script when a test instruction is received, then using the recording script to carry out playback test on the front-end page, and in the playback process, when a preset action is triggered, carrying out the playback test on the front-end page. According to the method, a current front-end page is subjected to screenshot to obtain a source image, a target image in a recording script is matched with the source image to determine a corresponding region of the target image on the source image, a region to be tested is positioned through image matching, and a test result is determined in combination with the target image during recording. In this way, the situation that the recorded script is frequently updated due to the fact that the elements are positioned based on the attributes of the page elements can be avoided, the maintenance cost for testing the front-end page is reduced, meanwhile, test errors caused by untimely updating can be avoided, and the test accuracy is ensured.

Description

Technical Field

[0001] The present application relates to the field of UI testing technology, and in particular to a front-end page testing method, device, storage medium and computer equipment. Background Art

[0002] The cypress automated testing framework is a UI testing framework for front-end web applications. Based on this UI testing framework, detailed test scripts can be written. These test scripts can locate page elements through selectors and perform corresponding operations, thereby simulating the interaction between real users and front-end web applications to achieve the purpose of testing the interface of front-end web applications.

[0003] However, as the front-end web application is updated, the properties of UI elements may also change. To ensure the accuracy of the test, testers can only continuously update the test scripts to match the UI elements with changed properties, resulting in high maintenance costs for testing the front-end pages. If the update is not timely, it will also affect the accuracy of the page test. Summary of the invention

[0004] The purpose of the present application is to solve at least one of the above-mentioned technical defects. In particular, in the prior art, as the front-end web application is updated, the attributes of the UI elements may also change. To ensure the accuracy of the test, the tester can only continuously update the test script to match the UI elements with changed attributes, resulting in high maintenance costs for testing the front-end page, and if the update is not timely, it will also affect the accuracy of the page test.

[0005] In a first aspect, the present application provides a front-end page testing method, the method comprising:

[0006] When receiving a test instruction, determine the front-end page to be tested and its corresponding recording script;

[0007] Playing back the recorded script on the front-end page;

[0008] During playback, when a preset action is triggered, a screenshot of the current front-end page is taken to obtain the source image;

[0009] Acquire a target image in the recording script, and match the source image with the target image to determine a region corresponding to the target image on the source image;

[0010] The test result of the front-end page in this page test is determined according to the target image and its corresponding area on the source image.

[0011] In one embodiment, when the script type of the recorded script is an assertion type, determining the test result of the front-end page in this page test according to the target image and its corresponding area on the source image includes:

[0012] Obtaining parameters of the controls contained in the region, and obtaining parameters of the controls contained in the target image;

[0013] The parameters of the controls contained in the area are compared with the parameters of the controls contained in the target image to determine the test result of the front-end page in this page test.

[0014] In one embodiment, when the script type of the recorded script is a click type, determining the test result of the front-end page in this page test according to the target image and its corresponding area on the source image includes:

[0015] Determining at least one control to be tested according to an area corresponding to the target image on the source image;

[0016] Trigger each control to be tested separately, and record the feedback information of triggering each control to be tested;

[0017] Acquiring a feedback information set corresponding to the target image in the recording script;

[0018] The feedback information set is compared with a set formed by feedback information that triggers each to-be-tested control to determine a test result of the front-end page in this page test.

[0019] In one embodiment, determining the test result of the front-end page in the current page test includes:

[0020] If the comparison is consistent, a test result is generated indicating that the front-end page has passed the test in this page test;

[0021] If the comparison is inconsistent, comparison difference information is generated, and a test result indicating that the front-end page has failed the test in this page test is generated.

[0022] In one embodiment, the process of generating the recording script includes:

[0023] When the script recording is triggered, the script type of the recording script to be recorded is determined, and a screenshot of the current front-end page is taken to obtain a recording image;

[0024] Obtain the cursor position when triggering script recording, and determine the target area corresponding to the cursor position;

[0025] Calculating position parameters of the target area relative to the recorded image, and cropping the recorded image according to the position parameters to determine the target image;

[0026] A recording script is generated according to the operation that triggers script recording, the script type, and the target image.

[0027] In one embodiment, matching the source image and the target image to determine a region corresponding to the target image on the source image includes:

[0028] Extracting image features of the source image and the target image respectively;

[0029] The image features of the target image are compared with the image features of the source image to determine the region in the source image that has the highest similarity with the image features of the target image, and the region is determined as the region corresponding to the target image on the source image.

[0030] In one embodiment, after determining the test result of the front-end page in the current page test, the method further includes:

[0031] According to the test result of the front-end page in this page test, an image search test graph is generated.

[0032] In a second aspect, the present application provides a front-end page testing device, the device comprising:

[0033] The instruction receiving module is used to determine the front-end page to be tested and its corresponding recording script when receiving the test instruction;

[0034] A script playback module, used to play back the recorded script in the front-end page;

[0035] The page capture module is used to capture the current front-end page to obtain the source image when a preset action is triggered during playback;

[0036] An image matching module is used to obtain a target image in a recorded script, and match the source image with the target image to determine a region corresponding to the target image on the source image;

[0037] The result determination module is used to determine the test result of the front-end page in this page test according to the target image and its corresponding area on the source image.

[0038] In a third aspect, the present application provides a storage medium storing computer-readable instructions. When the computer-readable instructions are executed by one or more processors, the one or more processors execute the steps of the front-end page testing method described in any of the above embodiments.

[0039] In a fourth aspect, the present application provides a computer device, comprising: one or more processors, and a memory;

[0040] The memory stores computer-readable instructions, and when the one or more processors execute the computer-readable instructions, the steps of the front-end page testing method described in any one of the above embodiments are performed.

[0041] It can be seen from the above technical solutions that the embodiments of the present application have the following advantages:

[0042] The front-end page testing method, device, storage medium and computer equipment provided by the present application include: upon receiving a test instruction, determining the front-end page to be tested and its corresponding recording script, and then using the recording script to perform a playback test on the front-end page. During the playback process, when a preset action is triggered, a screenshot of the current front-end page is taken to obtain a source image, and then the target image in the recording script is matched with the source image to determine the area corresponding to the target image on the source image, and finally, the test result is determined based on the target image and its corresponding area on the source image. In this way, the area to be tested is located by image matching, and the test result is determined in combination with the target image during recording. This can avoid frequent updates of the recording script due to positioning elements based on the attributes of page elements, reduce the maintenance cost of testing the front-end page, and also avoid test errors caused by untimely updates to ensure the accuracy of the test. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0044] Figure 1 A schematic diagram of a flow chart of a front-end page testing method provided in an embodiment of the present application;

[0045] Figure 2 One of the flow charts of determining the test result of the front-end page in the current page test according to the target image and its corresponding area on the source image provided in the embodiment of the present application;

[0046] Figure 3 A second flow chart of determining the test result of a front-end page in this page test according to a target image and its corresponding area on a source image provided in an embodiment of the present application;

[0047] Figure 4 A schematic diagram of a process for generating a recording script according to an embodiment of the present application;

[0048] Figure 5 A schematic diagram of the structure of a front-end page testing device provided in an embodiment of the present application;

[0049] Figure 6 An internal structure diagram of a computer device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0050] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0051] In one embodiment, the present application provides a front-end page testing method, and the following embodiment is described by applying the method to a server. It can be understood that the front-end page testing method can be executed by a single server or a server cluster composed of multiple servers, and the present application does not make specific restrictions on this.

[0052] like Figure 1 As shown, the present application provides a front-end page testing method, the method comprising:

[0053] S101: When a test instruction is received, a front-end page to be tested and its corresponding recording script are determined.

[0054] The front-end page refers to the interface of the front-end application to be tested. The recording script refers to the script generated by recording the user's operation process on the front-end page through the automated testing tool.

[0055] In this step, when the tester needs to test a front-end page, he can determine a recording script in the recording script corresponding to the front-end page. At this time, the client can generate a test instruction based on the front-end page to be tested by the tester and the determined recording script, and send the test instruction to the server. When the server receives the test instruction, it determines the front-end page to be tested and its corresponding recording script according to the information carried in the test instruction.

[0056] S102: Play back the recorded script on the front-end page.

[0057] In this step, when the front-end page to be tested and its corresponding recording script are determined, the recording script can be played back in the front-end page to perform automated UI testing on the front-end page.

[0058] S103: During the playback process, when a preset action is triggered, a screenshot is taken of the current front-end page to obtain a source image.

[0059] The preset action refers to the action recorded in the recording script that triggers the test execution. The preset action can be a right-click pop-up menu or clicking a button. This application does not impose specific restrictions on this. The source image refers to the image corresponding to the page displayed by the current front-end application.

[0060] In this step, during the playback of the recorded script, when the preset action is triggered, a screenshot of the current front-end page is taken to obtain a source image. In this process, in order to determine whether the front-end page during the playback process meets expectations compared with the front-end page when the recorded script was recorded, a screenshot of the current front-end page can be taken.

[0061] Specifically, when the preset action is a right-click pop-up menu, when the right-click pop-up menu action is triggered, a screenshot of the current front-end page can be taken first, and then the right-click menu can be popped up to avoid the right-click menu from blocking the current front-end page.

[0062] S104: Acquire a target image in the recording script, and match the source image with the target image to determine a region corresponding to the target image on the source image.

[0063] The target image refers to the image corresponding to the area to be tested in the recording script.

[0064] In this step, the target image is obtained from the recorded script, and then the source image and the target image are processed by image recognition, feature matching, etc. to complete the matching between the source image and the target image, and then determine the area corresponding to the target image on the source image.

[0065] S105: Determine the test result of the front-end page in this page test according to the target image and its corresponding area on the source image.

[0066] The test results include test pass and test fail.

[0067] In this step, after determining the area corresponding to the target image on the source image, we can now determine the target image during recording and the area corresponding to the target image on the source image during playback. The target image and its corresponding area on the source image are combined to determine the test result of the front-end page in this page test.

[0068] The front-end page testing method, device, storage medium and computer equipment provided by the present application include: upon receiving a test instruction, determining the front-end page to be tested and its corresponding recording script, and then using the recording script to perform a playback test on the front-end page. During the playback process, when a preset action is triggered, a screenshot of the current front-end page is taken to obtain a source image, and then the target image in the recording script is matched with the source image to determine the area corresponding to the target image on the source image, and finally, the test result is determined based on the target image and its corresponding area on the source image. In this way, the area to be tested is located by image matching, and the test result is determined in combination with the target image during recording. This can avoid frequent updates of the recording script due to positioning elements based on the attributes of page elements, reduce the maintenance cost of testing the front-end page, and also avoid test errors caused by untimely updates to ensure the accuracy of the test.

[0069] like Figure 2 As shown, in one embodiment, when the script type of the recorded script is an assertion type, the test result of the front-end page in this page test is determined according to the target image and its corresponding area on the source image, including:

[0070] S201: Acquire the parameters of the controls contained in the area, and acquire the controls contained in the target image.

[0071] The parameters are used to control the appearance of the control, including but not limited to color, size, position, transparency, control status, etc.

[0072] In this step, you can first determine the script type of the recorded script based on the information in the recorded script. If the script type of the recorded script is an assertion type, then after determining the area corresponding to the target image on the source image, you can obtain the parameters of the controls contained in the area based on the controls involved in the area.

[0073] Specifically, the parameters of the control obtained in this embodiment can be realized by calling the interface of the corresponding function, or by checking the corresponding CSS style sheet, or by analyzing and determining based on the image. The specific method can be selected according to the actual situation, and this application does not make specific restrictions on this.

[0074] S202: Compare the parameters of the controls contained in the area with the parameters of the controls contained in the target image to determine the test result of the front-end page in this page test.

[0075] By comparing the parameters of the controls contained in the target image during recording with the parameters of the controls contained in the corresponding area of ​​the source image, it is possible to use a certain area of ​​the front-end page during recording as a reference to determine whether the controls in this area of ​​the front-end page during playback meet expectations, thereby completing the UI automation test of the front-end page.

[0076] like Figure 3 As shown, in one embodiment, when the script type of the recorded script is a click type, the test result of the front-end page in this page test is determined according to the target image and its corresponding area on the source image, including:

[0077] S301: Determine at least one control to be tested according to an area corresponding to a target image on a source image.

[0078] In this step, the script type of the recorded script can first be determined based on the information in the recorded script. If the script type of the recorded script is a click type, then at least one control to be tested can be determined in the corresponding area on the source image based on the target image to perform a click test on the determined space to be tested.

[0079] S302: Trigger each control to be tested respectively, and record feedback information of triggering each control to be tested.

[0080] The feedback information is used to indicate the feedback of the front-end page on the action after the control to be tested is triggered.

[0081] In this step, click each control to be tested respectively, and then record the feedback information after clicking each control to be tested.

[0082] S303: Obtain a feedback information set corresponding to the target image in the recording script.

[0083] The feedback information set refers to a collection of feedback information.

[0084] S304: Compare the feedback information set with the set formed by the feedback information that triggers each control to be tested, so as to determine the test result of the front-end page in this page test.

[0085] By comparing the feedback information set corresponding to the target image during recording with the set formed by the feedback information that triggers each control to be tested, the feedback generated by clicking the controls of the front-end page during recording can be used as a reference to determine whether the feedback generated when clicking the corresponding controls of the front-end page during playback meets expectations, thereby completing the control click test of the front-end page.

[0086] It is understandable that, depending on the script type of the recorded script, different playback logics can be executed to complete assertion testing and click testing, thereby covering various test scenarios in front-end page testing to the greatest extent possible to improve the test coverage of front-end page testing.

[0087] In one embodiment, determining the test result of the front-end page in the current page test includes:

[0088] S1: If the comparison is consistent, a test result is generated indicating that the front-end page has passed the test in this page test.

[0089] S2: If the comparison is inconsistent, then the comparison difference information is generated, and a test result indicating that the front-end page has failed the test in this page test is generated.

[0090] In this embodiment, there are two situations when the comparison is consistent, as follows:

[0091] (1) The parameters of the controls contained in the region are consistent with the parameters of the controls contained in the target image.

[0092] (2) The feedback information set is consistent with the set formed by the feedback information that triggers each control to be tested.

[0093] When one of the above situations occurs, a test result can be generated that shows that the front-end page has passed the test in this page test.

[0094] There are two situations when the comparison is inconsistent, as follows:

[0095] (1) The parameters of the controls contained in this area are inconsistent with the parameters of the controls contained in the target image.

[0096] (2) The feedback information set is inconsistent with the set formed by the feedback information that triggers each control to be tested.

[0097] When one of the above situations occurs, specific comparison difference information can be generated, and a test result indicating that the front-end page has failed the test in this page test can be generated.

[0098] Specifically, the feedback information set and the set formed by the feedback information that triggers each control to be tested can be compared to determine the information that differs between the two, and then the comparison difference information is generated based on the information that differs between the two. In this way, when the comparison exception information is sent to the client, the tester can quickly locate the specific control or area that failed the test.

[0099] like Figure 4 As shown, in one embodiment, the process of generating the recording script includes:

[0100] S401: When script recording is triggered, the script type of the script to be recorded is determined, and a screenshot of the current front-end page is taken to obtain a recorded image.

[0101] Among them, the script type includes assertion type and click type.

[0102] In this step, the tester can trigger the script recording, then select the script type of the recording script to be recorded, and then take a screenshot of the current front-end page to obtain the recording image. Specifically, the way in which the tester triggers the script recording includes but is not limited to clicking a specific button, sending a specific instruction, etc., which can be determined according to the design of the client, and this application does not make specific restrictions on this.

[0103] S402: Obtain the cursor position when triggering script recording, and determine the target area corresponding to the cursor position.

[0104] The cursor position refers to the position where the mouse is clicked, and the target area refers to the area where the cursor is located.

[0105] In this step, the cursor position when the script recording is triggered is obtained, and then the target area corresponding to the cursor position can be determined with the cursor position as the center point through the preset size parameters. A strategy can also be formulated to determine the target area corresponding to the cursor position according to the position of the cursor position in the recorded image. This application does not impose specific restrictions on this.

[0106] S403: Calculate position parameters of the target area relative to the recorded image, and crop the recorded image according to the position parameters to determine the target image.

[0107] In this step, since the position parameters of the target area may not be relative to the current front-end interface, it is necessary to convert the position parameters of the target area into position parameters relative to the recorded image. Based on the converted position parameters, the area corresponding to the target area on the recorded image can be accurately found, and then the recorded image can be cropped to obtain the image corresponding to the target area on the recorded image, that is, the target image.

[0108] S404: Generate a recording script according to the operation that triggers the script recording, the script type, and the target image.

[0109] Specifically, in this step, the interactive operations with the front-end page after the recording is triggered are recorded, and the final recording script is generated in combination with the script type and the target image.

[0110] It is understandable that in the process of automated UI testing of the front-end page, due to the high maintenance cost of using element attributes to locate elements, once the element attributes change, the recorded script needs to be updated. In this embodiment, the elements in the front-end page are located through image recognition and matching, and then the front-end page is asserted or click tested. This can avoid the situation where frequent updates of recorded scripts are caused by locating elements based on the attributes of page elements, reduce the maintenance cost of testing the front-end page, and at the same time avoid test errors caused by untimely updates to ensure the accuracy of the test.

[0111] In one embodiment, matching the source image and the target image to determine the area corresponding to the target image on the source image includes:

[0112] S1: Extract image features of source image and target image respectively.

[0113] S2: Compare the image features of the target image with the image features of the source image to determine a region in the source image that has the highest similarity with the image features of the target image, and determine the region as the region corresponding to the target image on the source image.

[0114] Among them, image features refer to the attributes or information extracted from the image and used to describe the image content.

[0115] In this embodiment, when extracting features from the source image and the target image, it can be done based on a preset feature extraction model or using a feature extraction algorithm, and this application does not impose any specific restrictions on this. When the image features of the source image and the target image are extracted, the image features of the target image are compared with the image features of the source image, and then the similarity between the image features of the target image and the image features of each region of the source image is calculated, and then the region with the highest similarity is determined as the region of the target image on the source image.

[0116] Furthermore, the similarity calculation method may adopt a trained deep learning model, or may adopt a suitable similarity calculation algorithm such as cosine similarity, etc. This application does not impose any specific restrictions on this.

[0117] It can be understood that the area corresponding to the target image in the source image is determined by comparing the image features of the target image with the image features of the source image, that is, the area to be tested in this page test. This can avoid frequent updates of the recording script due to locating elements based on the attributes of page elements, thereby reducing the maintenance cost of testing the front-end page.

[0118] In one embodiment, after determining the test result of the front-end page in the current page test, the front-end page test method further includes:

[0119] Generate an image search test graph based on the test results of the front-end page in this page test.

[0120] Among them, the image search test graph refers to a visual display of the test results of the front-end page in this page test.

[0121] In this embodiment, the test results of this page test are marked in the front-end page to generate a graph search test graph, so that the tester can view the test results intuitively and visually, thereby improving the readability of the test results.

[0122] It should be understood that, although the various steps in the flowcharts involved in the above-mentioned embodiments are displayed in sequence according to the indication of the arrows, these steps are not necessarily executed in sequence according to the order indicated by the arrows. Unless there is a clear explanation in this article, the execution of these steps does not have a strict order restriction, and these steps can be executed in other orders. Moreover, at least a part of the steps in the flowcharts involved in the above-mentioned embodiments can include multiple steps or multiple stages, and these steps or stages are not necessarily executed at the same time, but can be executed at different times, and the execution order of these steps or stages is not necessarily to be carried out in sequence, but can be executed in turn or alternately with other steps or at least a part of the steps or stages in other steps.

[0123] The front-end page testing device provided in an embodiment of the present application is described below. The front-end page testing device described below and the front-end page testing method described above can be referenced to each other.

[0124] like Figure 5 As shown, the present application provides a front-end page testing device 500, the device comprising:

[0125] The instruction receiving module 501 is used to determine the front-end page to be tested and its corresponding recording script when receiving the test instruction;

[0126] The script playback module 502 is used to play back the recorded script in the front-end page;

[0127] The page capture module 503 is used to capture the current front-end page to obtain the source image when a preset action is triggered during playback;

[0128] An image matching module 504 is used to obtain a target image in the recorded script and match the source image with the target image to determine the area corresponding to the target image on the source image;

[0129] The result determination module 505 is used to determine the test result of the front-end page in this page test according to the target image and its corresponding area on the source image.

[0130] In one embodiment, when the script type of the recorded script is an assertion type, the result determination module includes:

[0131] An acquisition submodule, used for acquiring parameters of the controls contained in the region and acquiring parameters of the controls contained in the target image;

[0132] The first comparison submodule is used to compare the parameters of the controls contained in the area with the parameters of the controls contained in the target image to determine the test result of the front-end page in this page test.

[0133] In one embodiment, when the script type of the recorded script is a click type, the result determination module includes:

[0134] A control determination submodule, used to determine at least one control to be tested according to the area corresponding to the target image on the source image;

[0135] The control triggering submodule is used to trigger each control to be tested respectively and record the feedback information of triggering each control to be tested;

[0136] An information set acquisition submodule, used to acquire a feedback information set corresponding to a target image in a recorded script;

[0137] The second comparison submodule is used to compare the feedback information set with the set formed by the feedback information that triggers each control to be tested, so as to determine the test result of the front-end page in this page test.

[0138] In one embodiment, the first comparison submodule or the second comparison submodule includes:

[0139] The first judgment unit is used to generate a test result indicating that the front-end page has passed the test in this page test if the comparison is consistent;

[0140] The second judgment unit is used to generate comparison difference information if the comparison is inconsistent, and generate a test result indicating that the front-end page has failed the test in this page test.

[0141] In one embodiment, the instruction receiving module includes:

[0142] The page screenshot submodule is used to determine the script type of the recording script to be recorded when the script recording is triggered, and to take a screenshot of the current front-end page to obtain a recording image;

[0143] The area determination submodule is used to obtain the cursor position when triggering script recording and determine the target area corresponding to the cursor position;

[0144] A parameter calculation submodule is used to calculate the position parameters of the target area relative to the recorded image, and to crop the recorded image according to the position parameters to determine the target image;

[0145] The script generation submodule is used to generate a recording script according to the operation that triggers the script recording, the script type, and the target image.

[0146] In one embodiment, the image matching module includes:

[0147] A feature extraction submodule, used to extract image features of the source image and the target image respectively;

[0148] The feature comparison submodule is used to compare the image features of the target image with the image features of the source image to determine the area in the source image that has the highest similarity with the image features of the target image, and determine the area as the corresponding area of ​​the target image on the source image.

[0149] In one embodiment, the front-end page testing device further includes:

[0150] The visualization module is used to generate an image search test graph based on the test results of the front-end page in this page test.

[0151] The division of each module in the above-mentioned front-end page test device is only for illustration. In other embodiments, the front-end page test device can be divided into different modules as needed to complete all or part of the functions of the above-mentioned front-end page test device. Each module in the above-mentioned front-end page test device can be implemented in whole or in part by software, hardware and a combination thereof. The above-mentioned modules can be embedded in or independent of the processor in the computer device in the form of hardware, or can be stored in the memory in the computer device in the form of software, so that the processor can call and execute the operations corresponding to the above modules.

[0152] In one embodiment, the present application also provides a storage medium storing computer-readable instructions. When the computer-readable instructions are executed by one or more processors, the one or more processors execute the steps of the front-end page testing method described in any of the above embodiments.

[0153] In one embodiment, the present application also provides a computer device having computer-readable instructions stored therein. When the computer-readable instructions are executed by one or more processors, the one or more processors execute the steps of the front-end page testing method as described in any one of the above embodiments.

[0154] Indicatively, if Figure 6 As shown, Figure 6This is a schematic diagram of the internal structure of a computer device provided in an embodiment of the present application. The computer device 600 may be provided as a server. Figure 6 , the computer device 600 includes a processing component 602, which further includes one or more processors, and a memory resource represented by a memory 601, for storing instructions executable by the processing component 602, such as an application. The application stored in the memory 601 may include one or more modules, each corresponding to a set of instructions. In addition, the processing component 602 is configured to execute instructions to perform the front-end page testing method of any of the above embodiments.

[0155] The computer device 600 may further include a power supply component 603 configured to perform power management of the computer device 600, a wired or wireless network interface 604 configured to connect the computer device 600 to a network, and an input / output (I / O) interface 605. The computer device 600 may operate based on an operating system stored in the memory 601, such as Windows Server TM, Mac OS X TM, Unix TM, Linux TM, Free BSD TM, or the like.

[0156] Those skilled in the art will understand that Figure 6 The structure shown in the figure is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than those shown in the figure, or combine certain components, or have a different arrangement of components.

[0157] Finally, it should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish an entity or operation from another entity or operation, and do not necessarily require or imply that there is any such actual relationship or order between these entities or operations. Moreover, the term "include", "comprise" or any other variant thereof is intended to cover non-exclusive inclusion, so that the process, method, article or equipment including a series of elements not only include those elements, but also include other elements that are not clearly listed, or also include elements inherent to such process, method, article or equipment. In the absence of more restrictions, the elements limited by the sentence "comprise one..." do not exclude the existence of other identical elements in the process, method, article or equipment including the elements. Herein, the singular "one", "one" and "described / the" may also include plural forms, unless the context clearly indicates another way. It should also be understood that the terms "include / comprise" or "have" etc. specify the existence of stated features, wholes, steps, operations, components, parts or combinations thereof, but do not exclude the possibility of the existence or addition of one or more other features, wholes, steps, operations, components, parts or combinations thereof. At the same time, the term "and / or" used in this specification includes any and all combinations of the relevant listed items.

[0158] The various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The various embodiments can be combined as needed, and the same or similar parts can refer to each other.

[0159] The above description of the disclosed embodiments enables those skilled in the art to implement or use the present application. Various modifications to these embodiments will be apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present application. Therefore, the present application will not be limited to the embodiments shown herein, but will conform to the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A front-end page testing method, characterized in that: The method comprises: When receiving a test instruction, determine the front-end page to be tested and its corresponding recording script; Playing back the recorded script on the front-end page; During playback, when a preset action is triggered, a screenshot of the current front-end page is taken to obtain the source image; Acquire a target image in the recording script, and match the source image with the target image to determine a region corresponding to the target image on the source image; The test result of the front-end page in this page test is determined according to the target image and its corresponding area on the source image.

2. The front-end page testing method according to claim 1, characterized in that: When the script type of the recorded script is an assertion type, determining the test result of the front-end page in this page test according to the target image and its corresponding area on the source image includes: Obtaining parameters of the controls contained in the region, and obtaining parameters of the controls contained in the target image; The parameters of the controls contained in the area are compared with the parameters of the controls contained in the target image to determine the test result of the front-end page in this page test.

3. The front-end page testing method according to claim 1, characterized in that: When the script type of the recorded script is a click type, determining the test result of the front-end page in this page test according to the target image and its corresponding area on the source image includes: Determining at least one control to be tested according to an area corresponding to the target image on the source image; Trigger each control to be tested separately, and record the feedback information of triggering each control to be tested; Acquiring a feedback information set corresponding to the target image in the recording script; The feedback information set is compared with a set formed by feedback information that triggers each to-be-tested control to determine a test result of the front-end page in this page test.

4. The front-end page testing method according to claim 2 or 3, characterized in that: Determining the test result of the front-end page in this page test includes: If the comparison is consistent, a test result is generated indicating that the front-end page has passed the test in this page test; If the comparison is inconsistent, comparison difference information is generated, and a test result indicating that the front-end page has failed the test in this page test is generated.

5. The front-end page testing method according to claim 1, characterized in that: The generation process of the recording script includes: When the script recording is triggered, the script type of the recording script to be recorded is determined, and a screenshot of the current front-end page is taken to obtain a recording image; Obtain the cursor position when triggering script recording, and determine the target area corresponding to the cursor position; Calculating position parameters of the target area relative to the recorded image, and cropping the recorded image according to the position parameters to determine the target image; A recording script is generated according to the operation that triggers script recording, the script type, and the target image.

6. The front-end page testing method according to claim 1, characterized in that: The matching the source image and the target image to determine a region corresponding to the target image on the source image includes: Extracting image features of the source image and the target image respectively; The image features of the target image are compared with the image features of the source image to determine the region in the source image that has the highest similarity with the image features of the target image, and the region is determined as the region corresponding to the target image on the source image.

7. The front-end page testing method according to claim 1, characterized in that: After determining the test result of the front-end page in the current page test, the method further includes: According to the test result of the front-end page in this page test, an image search test graph is generated.

8. A front-end page testing device, characterized in that: The device comprises: The instruction receiving module is used to determine the front-end page to be tested and its corresponding recording script when receiving the test instruction; A script playback module, used to play back the recorded script in the front-end page; The page capture module is used to capture the current front-end page to obtain the source image when a preset action is triggered during playback; An image matching module is used to obtain a target image in a recorded script, and match the source image with the target image to determine a region corresponding to the target image on the source image; The result determination module is used to determine the test result of the front-end page in this page test according to the target image and its corresponding area on the source image.

9. A storage medium, characterized in that: The storage medium stores computer-readable instructions, and when the computer-readable instructions are executed by one or more processors, the one or more processors execute the steps of the front-end page testing method as described in any one of claims 1 to 7.

10. A computer device, characterized in that: include: one or more processors, and memory; The memory stores computer-readable instructions, and when the computer-readable instructions are executed by the one or more processors, the steps of the front-end page testing method according to any one of claims 1 to 7 are performed.

Images