Front-end performance test method and device

Abstract

The invention provides a front-end performance test method and device, and the method comprises the steps: obtaining the element information of a corresponding front-end interface through a to-be-tested front-end address, and recording the current time as the starting time; detecting the front-end interface according to a preset interface element and the maximum content element to obtain a detection result; and performing comparative analysis on the detection result and preset reference data to obtain a test result of the front-end interface, and outputting the test result. According to the method, the front-end performance data, namely the detection result, is obtained in the automatic interface testing process, front-end performance testing does not need to be conducted independently, and the overall testing period is effectively shortened. On the basis of the front-end performance test, potential problems in the front-end interface loading process can be better known, so that the performance is optimized, the white screen time is shortened, the loading speed is increased, and it is ensured that the page can become interactive more quickly. Through the optimization, the user experience is directly improved, the user feels smoother and more satisfactory in the using process, and the market competitiveness of the product is remarkably improved.

Description

Technical Field

[0001] The present invention relates to the technical field of software testing, and in particular to a front-end performance testing method and device. Background Art

[0002] With the rapid development of the Internet, more and more enterprises and organizations rely on Web applications to meet their daily business needs. Therefore, the performance of Web applications has become a key factor affecting user experience and enterprise operations, making front-end performance testing particularly important.

[0003] Although the front-end code is relatively simple and most browsers provide built-in performance tools, most front-end performance tests are still limited to the browser level and the test scope is limited. This is because the front-end code is relatively independent and runs on the client in most cases, making front-end performance testing more complex, time-consuming and labor-intensive than back-end performance testing. In addition, although there are some automated testing frameworks that can be used for front-end performance testing, these frameworks often only support specific browsers and operating systems and cannot fully cover all browsers and operating system versions.

[0004] Therefore, how to effectively expand the coverage of front-end performance testing, shorten the testing cycle, and improve testing efficiency is an urgent problem that needs to be solved. Summary of the invention

[0005] In view of this, an embodiment of the present invention provides a front-end performance testing method and device to solve the current problems of small front-end testing coverage, long testing cycle and low efficiency.

[0006] To achieve the above objectives, the embodiments of the present invention provide the following technical solutions:

[0007] A first aspect of the present invention discloses a front-end performance testing method, the method comprising:

[0008] Receive the front-end address to be tested;

[0009] Obtaining the element information of the corresponding front-end interface through the front-end address to be tested, and recording the current time as the start time; wherein the element information includes the preset interface element and the largest content element;

[0010] Detecting the front-end interface according to the preset interface element and the largest content element to obtain a detection result;

[0011] The test results are compared and analyzed with preset benchmark data to obtain the test results of the front-end interface and output them.

[0012] Preferably, the acquiring the element information of the corresponding front-end interface through the front-end address to be tested includes:

[0013] Load the front-end address to be tested through a browser, and locate the element information in the front-end interface corresponding to the front-end address to be tested;

[0014] The element information is obtained according to the positioning result.

[0015] Preferably, the detecting the front-end interface according to the preset interface element and the largest content element to obtain the detection result includes:

[0016] Performing white screen detection on the front-end interface through image recognition, and recording the white screen time when the first picture in the front-end interface is detected;

[0017] If the preset interface element is detected from the front-end interface, the first content rendering time is recorded;

[0018] When it is detected that the loading of the largest content element in the front-end interface is completed, the maximum content rendering time is recorded;

[0019] When all preset interface elements are traversed, the page loading time is recorded;

[0020] Operate the operable elements in the front-end interface;

[0021] If the operation is successful, the interactive time is recorded;

[0022] The start time, the white screen time, the first content rendering time, the maximum content rendering time, the page loading time and the interactive time are determined as detection results.

[0023] Preferably, comparing and analyzing the test result with preset benchmark data to obtain and output the test result of the front-end interface includes:

[0024] According to the start time and the detection result, calculate the white screen duration, the first content rendering duration, the maximum content rendering duration, the page loading duration and the interactive duration;

[0025] The white screen duration, the first content rendering duration, the maximum content rendering duration, the page loading duration and the interactive duration are respectively compared and analyzed with corresponding preset benchmark data to obtain and output the test results of the front-end interface.

[0026] Preferably, after comparing and analyzing the test result with the preset benchmark data to obtain the test result of the front-end interface and outputting it, the method further includes:

[0027] Get cache data, cookies and form data and delete them.

[0028] A second aspect of the present invention discloses a front-end performance testing device, the device comprising:

[0029] A receiving unit, used for receiving the address of the front end to be tested;

[0030] An acquisition unit, used to acquire element information of the corresponding front-end interface through the front-end address to be tested, and record the current time as the start time; wherein the element information includes a preset interface element and a maximum content element;

[0031] A detection unit, used to detect the front-end interface according to the preset interface element and the largest content element to obtain a detection result;

[0032] The comparison and analysis unit is used to compare and analyze the detection result with the preset reference data, obtain the test result of the front-end interface and output it.

[0033] Preferably, the acquisition unit includes:

[0034] A positioning module, used to load the front-end address to be tested through a browser, and locate the element information in the front-end interface corresponding to the front-end address to be tested;

[0035] The acquisition module is used to acquire the element information according to the positioning result.

[0036] Preferably, the detection unit comprises:

[0037] A first recording module is used to perform white screen detection on the front-end interface through image recognition, and when the first picture in the front-end interface is detected, record the white screen time;

[0038] A second recording module, configured to record the first content rendering time if the preset interface element is detected from the front-end interface;

[0039] A third recording module is used to record the maximum content rendering time when it is detected that the loading of the largest content element in the front-end interface is completed;

[0040] The fourth recording module is used to record the page loading time when all preset interface elements are traversed;

[0041] An operation module, used to operate the operable elements in the front-end interface;

[0042] The fifth recording module is used to record the interactive time if the operation is successful;

[0043] A determination module is used to determine the start time, the white screen time, the first content rendering time, the maximum content rendering time, the page loading time and the interactive time as the detection result.

[0044] Preferably, the comparison and analysis unit comprises:

[0045] A calculation module, used to calculate the white screen duration, the first content rendering duration, the maximum content rendering duration, the page loading duration and the interactive duration according to the start time and the detection result;

[0046] The comparison and analysis module is used to compare and analyze the white screen duration, the first content rendering duration, the maximum content rendering duration, the page loading duration and the interactive duration with the corresponding preset benchmark data, obtain the test results of the front-end interface and output them.

[0047] Preferably, it also includes:

[0048] The deletion unit is used to obtain cache data, cookies and form data and delete them.

[0049] Based on the above-mentioned embodiment of the present invention, a front-end performance testing method and device are provided. The element information of the corresponding front-end interface is obtained through the front-end address to be tested, and the current time is recorded as the start time; the front-end interface is detected according to the preset interface elements and the largest content element to obtain the detection result; the detection result is compared and analyzed with the preset benchmark data to obtain and output the test result of the front-end interface. The present invention obtains the front-end performance data, that is, the detection result, during the interface automation test process, without the need to conduct a separate front-end performance test, effectively shortening the overall test cycle. Based on the front-end performance test, the potential problems in the front-end interface loading process can be better understood, thereby optimizing the performance, reducing the white screen time, increasing the loading speed, and ensuring that the page can become interactive faster. These optimizations will directly improve the user experience, making users feel more smooth and satisfied during use, and significantly improving the market competitiveness of the product. BRIEF DESCRIPTION OF THE DRAWINGS

[0050] In order to more clearly illustrate the embodiments of the present invention 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 embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying creative work.

[0051] Figure 1 A flow chart of a front-end performance testing method provided by an embodiment of the present invention;

[0052] Figure 2 A flowchart of obtaining element information through the front-end address to be tested provided by an embodiment of the present invention;

[0053] Figure 3 A flow chart of detecting the front-end interface and obtaining the detection result provided by the embodiment of the present invention;

[0054] Figure 4 A structural block diagram of a front-end performance testing device provided in an embodiment of the present invention. DETAILED DESCRIPTION

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

[0056] In this application, the terms "comprises", "comprising" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device comprising a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the sentence "comprising a ..." does not exclude the presence of other identical elements in the process, method, article or device comprising the element.

[0057] As can be seen from the background technology, most of the front-end performance tests are still limited to the browser level, and the test scope is limited. In addition, since most of the time it is run on the client, the front-end performance test is more complicated, more time-consuming and labor-intensive than the back-end performance test, and the test efficiency is low.

[0058] Therefore, an embodiment of the present invention provides a front-end performance testing method and device, which obtains the element information of the corresponding front-end interface through the front-end address to be tested, and records the current time as the start time; detects the front-end interface according to the preset interface elements and the largest content element to obtain the detection result; compares and analyzes the detection result with the preset benchmark data to obtain and output the test result of the front-end interface. The present invention obtains the front-end performance data, that is, the detection result, during the interface automation test process, without the need to conduct a separate front-end performance test, effectively shortening the overall test cycle. Based on the front-end performance test, the potential problems in the front-end interface loading process can be better understood, thereby optimizing the performance, reducing the white screen time, increasing the loading speed, and ensuring that the page can become interactive faster. These optimizations will directly improve the user experience, making users feel more smooth and satisfied during use, and significantly improving the market competitiveness of the product.

[0059] See also Figure 1 , showing a flow chart of a front-end performance testing method provided by an embodiment of the present invention.

[0060] It should be noted that this method specifically tests the performance of the front-end interface of the front-end address based on the Web end. The method includes:

[0061] Step S101: receiving the front-end address to be tested.

[0062] It should be noted that the Web side refers to web applications running on the Internet, that is, websites. These applications are mainly built using programming languages ​​such as HTML, CSS, and JavaScript. They use the HTTP protocol to send information including static resources and dynamic content (such as PHP, ASP, etc.) to the user's browser. In this way, users can easily browse and use these websites in the browser.

[0063] In the specific implementation of step S101, the URL of the front-end address to be tested input by the developer is received.

[0064] It is understandable that the front end is the user interface, which refers to the part of a computer program written using technologies such as HTML and JavaScript. It is mainly responsible for displaying content to users. The core task of the front end is to manage the interaction between users and web applications and generate the web pages that users ultimately see. Usually, the technologies involved in front-end development include HTML, CSS, and JavaScript.

[0065] Step S102: Obtain element information of the corresponding front-end interface through the front-end address to be tested, and record the current time as the start time.

[0066] It should be noted that the element information includes the preset interface elements and the largest content element.

[0067] In the specific implementation of step S102, the element information on the web page is obtained by accessing the front-end address to be tested, such as type, attribute and text content, etc. At the same time, the current time is recorded as the starting time point of the test, so as to calculate the total duration of the test execution later.

[0068] It is understandable that the specific implementation process of obtaining element information through the front-end address to be tested is detailed in the embodiment of the present invention. Figure 2 The content in.

[0069] Step S103: Detect the front-end interface according to the preset interface elements and the largest content element to obtain a detection result.

[0070] It should be noted that when you enter the URL of the front-end address to be tested in the browser and wait for the page response, you can clarify several important performance parameters of the Web end by traversing the interface elements. From the time the browser starts to respond to the URL of the front-end address to be tested, it will go through the following key time points:

[0071] 1. First Paint (FP): This is the first time the page displays anything on the screen, marking the start of page rendering.

[0072] 2. First Contentful Paint (FCP): This is the point in time when the page first renders any content from the DOM, such as text or images.

[0073] 3. Largest Contentful Paint (LCP): This is the time point when the largest text block or image element on the page is rendered. It is usually used to measure the loading performance of the main content of the page.

[0074] 4. Page Load Time (PLT): This is the time point when all resources of the page are loaded.

[0075] 5. Time to Interactive (TTI): This is the point in time when the page becomes interactive, meaning that the main sub-resources of the page have been loaded and the user can interact with the page without being affected by the page loading.

[0076] Based on this, in the specific implementation process of step S103, the front-end interface is detected according to the preset interface elements and the largest content elements, and the white screen time (FP), the first content rendering time (FCP), the maximum content rendering time (LCP), the page loading time (PLT) and the interactive time (TTI) are detected and marked as the detection results.

[0077] It should be noted that the specific process of detecting the front-end interface to obtain the detection result is detailed in the embodiment of the present invention. Figure 3 The content in.

[0078] Understandably, these test results are crucial for evaluating and optimizing the loading speed and user experience of web pages. By measuring these time points, developers can identify performance bottlenecks and take corresponding optimization measures to improve page loading efficiency and user satisfaction.

[0079] Step S104: Compare and analyze the test results with the preset benchmark data to obtain and output the test results of the front-end interface.

[0080] In the process of specifically implementing step S104, based on the white screen time (FP), first content rendering time (FCP), maximum content rendering time (LCP), page loading time (PLT) and interactive time (TTI) in the detection results, as well as the start time, the white screen duration, first content rendering time, maximum content rendering time, page loading time and interactive time are calculated; then the white screen duration, first content rendering time, maximum content rendering time, page loading time and interactive time are compared and analyzed with the corresponding preset benchmark data (such as industry standards) to obtain and output the test results of the front-end interface.

[0081] It can be understood that the white screen duration is specifically the difference between the white screen time and the start time; the first content rendering duration is specifically the difference between the first content rendering time and the start time; the maximum content rendering duration is specifically the difference between the maximum content rendering time and the start time; the page loading duration is specifically the difference between the page loading time and the start time.

[0082] It should be noted that the calculation method of the interactive time is, for example: starting from the first content rendering time (FCP), there are no long tasks (execution time exceeding 50ms) and no more than two ongoing GET requests within 5 seconds, and tracing back to the end time of the last long task 5 seconds ago.

[0083] It should be noted that if each test is performed under the same starting conditions, the results of different tests can be compared more accurately. Based on this, in actual applications, after obtaining and outputting the test results of the front-end interface, the embodiments of the present invention obtain the cache data, Cookies and form data in the browser and delete them.

[0084] It is understandable that various temporary files and information generated by the browser during the test process are cleared to ensure the cleanliness and consistency of the test environment. This is especially important for automated testing, because automated testing usually needs to be run in an isolated and repeatable environment.

[0085] In an embodiment of the present invention, front-end performance data such as white screen time, page loading time, and interactive time are obtained without the need for separate front-end performance testing, which can greatly shorten the overall testing cycle. Web-side applications cover a variety of client devices and operating systems, so interface automation testing can cover a wider variety of hardware and software environments. Based on front-end performance testing, potential problems in the page loading process can be better understood, thereby optimizing performance, reducing white screen time, increasing loading speed, and ensuring that pages can become interactive faster. These optimizations will directly improve the user experience, making users feel more fluid and satisfied during use, and significantly improving the market competitiveness of the product.

[0086] The above embodiments of the present invention Figure 1 For the specific implementation process of obtaining element information through the front-end address to be tested, see the embodiment of the present invention. Figure 2 The content includes:

[0087] Step S201: load the front-end address to be tested through a browser, and locate the element information in the front-end interface corresponding to the front-end address to be tested.

[0088] In the specific implementation of step S201, a browser is used to open the URL of the front-end address to be tested (pointing to the Web page to be tested), and element information in the front-end interface corresponding to the front-end address to be tested is located one by one.

[0089] Step S202: Obtain element information according to the positioning result.

[0090] In the specific implementation process of step S202, once the front-end interface corresponding to the front-end address to be tested is loaded, the automated testing tool (such as Selenium WebDriver) will locate the specific element on the page according to a predefined selector (which may be a CSS selector, XPath expression or other positioning strategy).

[0091] It is understandable that after successful positioning, detailed information of these elements can be obtained, such as the element's tag name, attribute value, text content, whether it is visible, whether it is clickable, etc.

[0092] In the embodiments of the present invention, the basis of automated testing processes is disclosed, which allow test scripts to interact with Web pages and perform subsequent test operations, such as simulating user clicks, inputting text, verifying page content, etc. In this way, it is possible to automatically verify whether the functions and user interfaces of Web applications work as expected.

[0093] The above embodiments of the present invention Figure 1 For the specific implementation process of detecting the front-end interface to obtain the detection result, see the embodiment of the present invention. Figure 3 The content includes:

[0094] Step S301: perform white screen detection on the front-end interface through image recognition, and record the white screen time when the first picture in the front-end interface is detected.

[0095] In the process of implementing step S301, the web page content is parsed and the DOM structure is created through image recognition technology; the DOM structure is converted into a visual interface and the page status is updated, so as to perform white screen detection on the front-end interface. When the system detects that the picture appears on the front-end interface for the first time, the white screen duration is recorded, that is, the time of the first non-white screen in the front-end interface.

[0096] Step S302: If a preset interface element is detected from the front-end interface, the first content rendering time is recorded.

[0097] It should be noted that the preset interface elements are the recorded interface elements, including but not limited to type, attributes and text content.

[0098] In the specific implementation of step S302, when a preset interface element is detected from the front-end interface, the current time is recorded as the first content rendering time.

[0099] Step S303: When it is detected that the loading of the largest content element in the front-end interface is completed, the maximum content rendering time is recorded.

[0100] It should be noted that the largest content element div of the front-end interface is predetermined, wherein div is a commonly used container element that can contain other HTML elements and has no default style, and is usually used to divide the layout structure of a web page.

[0101] In the specific implementation of step S303, when it is detected that the maximum visible content (such as a large image or a large paragraph of text) in the front-end interface is loaded and displayed, the current time is recorded as the maximum content rendering time, which is used to evaluate the loading performance of the page.

[0102] Step S304: When all preset interface elements are traversed, the page loading time is recorded.

[0103] In the process of implementing step S304, during the loading process of the front-end interface, the preset interface elements (such as pictures, text boxes, buttons, etc.) on the front-end interface are checked or monitored in sequence until these elements are loaded and rendered, and the current time is recorded as the page loading time.

[0104] Understandably, page load time is used for performance monitoring and optimization, helping developers evaluate the speed of web page loading and user experience. By recording page load time, developers can understand which resources may affect page loading performance and optimize them.

[0105] Step S305: operate the operable elements in the front-end interface.

[0106] In the specific implementation of step S305, after all preset interface elements are loaded and rendered, the operable elements in the front-end interface are operated.

[0107] Step S306: If the operation is successful, the interactive time is recorded.

[0108] In the process of specifically implementing step S306, if the operation on the operable element in the front-end interface is successful, the current time is recorded as the interactive time.

[0109] In other words, the interactive time indicates the time point when the webpage first reaches a fully interactive state. The interactive state means that the UI components on the page are interactive (can respond to user clicks, input, form submission, etc.), and not only that, at this time the main thread has reached a "smooth" level, and the main thread tasks do not exceed 50 milliseconds.

[0110] Step S307: The start time, white screen time, first content rendering time, maximum content rendering time, page loading time and interactive time are determined as detection results.

[0111] In the process of specifically implementing step S307, the start time, white screen time, first content rendering time, maximum content rendering time, page loading time and interactive time recorded in the above process are uniformly determined as the detection result.

[0112] In the embodiment of the present invention, the determination process of the start time, white screen time, first content rendering time, maximum content rendering time, page loading time and interactive time is introduced, and these key time indicators are clarified, which helps to effectively monitor and optimize the front-end interface loading and rendering process, thereby improving the performance of the web page. It not only provides a clear goal for performance optimization, but also provides data support for continuous improvement and tuning, enabling the development team to achieve continuous performance improvement in all aspects.

[0113] Corresponding to a front-end performance testing method provided by the above embodiment of the present invention, see Figure 4 , shows a structural block diagram of a front-end performance testing device provided by an embodiment of the present invention.

[0114] The device includes: a receiving unit 401 , an acquiring unit 402 , a detecting unit 403 and a comparing and analyzing unit 404 .

[0115] The receiving unit 401 is used to receive the address of the front end to be tested.

[0116] The acquisition unit 402 is used to acquire the element information of the corresponding front-end interface through the front-end address to be tested, and record the current time as the start time; wherein the element information includes the preset interface element and the largest content element.

[0117] The detection unit 403 is used to detect the front-end interface according to the preset interface elements and the largest content element to obtain the detection result.

[0118] The comparison and analysis unit 404 is used to compare and analyze the test results with preset benchmark data, obtain the test results of the front-end interface and output them.

[0119] In an embodiment of the present invention, front-end performance data such as white screen time, page loading time, and interactive time are obtained without the need for separate front-end performance testing, which can greatly shorten the overall testing cycle. Web-side applications cover a variety of client devices and operating systems, so interface automation testing can cover a wider variety of hardware and software environments. Based on front-end performance testing, potential problems in the page loading process can be better understood, thereby optimizing performance, reducing white screen time, increasing loading speed, and ensuring that pages can become interactive faster. These optimizations will directly improve the user experience, making users feel more fluid and satisfied during use, and significantly improving the market competitiveness of the product.

[0120] Combination Figure 4 The content shown, the acquisition unit 402, includes: a positioning module and an acquisition module.

[0121] The positioning module is used to load the front-end address to be tested through the browser and locate the element information in the front-end interface corresponding to the front-end address to be tested.

[0122] The acquisition module is used to obtain element information according to the positioning result.

[0123] Combination Figure 4 The content shown, the detection unit 403, includes: a first recording module, a second recording module, a third recording module, a fourth recording module, an operation module, a fifth recording module and a determination module.

[0124] The first recording module is used to perform white screen detection on the front-end interface through image recognition, and record the white screen time when the first picture in the front-end interface is detected.

[0125] The second recording module is used to record the first content rendering time if a preset interface element is detected from the front-end interface.

[0126] The third recording module is used to record the maximum content rendering time when it is detected that the loading of the largest content element in the front-end interface is completed.

[0127] The fourth recording module is used to record the page loading time when all preset interface elements are traversed.

[0128] The operation module is used to operate the operable elements in the front-end interface.

[0129] The fifth recording module is used to record the interactive time if the operation is successful.

[0130] A determination module is used to determine the start time, white screen time, first content rendering time, maximum content rendering time, page loading time and interactive time as the detection result.

[0131] Combination Figure 4 The content shown, the comparison and analysis unit 404, includes: a calculation module and a comparison and analysis module.

[0132] The calculation module is used to calculate the white screen duration, first content rendering duration, maximum content rendering duration, page loading duration and interactive duration according to the start time and detection results.

[0133] The comparison and analysis module is used to compare and analyze the white screen duration, first content rendering duration, maximum content rendering duration, page loading duration and interactive duration with the corresponding preset benchmark data, obtain the test results of the front-end interface and output them.

[0134] Combination Figure 4 The content shown also includes: a deletion unit, which is used to obtain cache data, Cookies and form data and delete them.

[0135] Each embodiment in this specification is described in a progressive manner, and the same or similar parts between the embodiments can refer to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the system or system embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can refer to the partial description of the method embodiment. The system and system embodiments described above are merely schematic, wherein the units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the scheme of this embodiment. Ordinary technicians in this field can understand and implement it without creative work.

[0136] Professionals may further appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in the above description according to function. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professionals and technicians may use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of the present invention.

[0137] The above description of the disclosed embodiments enables those skilled in the art to implement or use the present invention. 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 scope of the present invention. Therefore, the present invention will not be limited to the embodiments shown herein, but rather to the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A front-end performance testing method, characterized in that: The method comprises: Receive the front-end address to be tested; Obtaining the element information of the corresponding front-end interface through the front-end address to be tested, and recording the current time as the start time; wherein the element information includes the preset interface element and the largest content element; Detecting the front-end interface according to the preset interface element and the largest content element to obtain a detection result; The test results are compared and analyzed with preset benchmark data to obtain the test results of the front-end interface and output them.

2. The method according to claim 1, characterized in that The obtaining the element information of the corresponding front-end interface through the front-end address to be tested includes: Load the front-end address to be tested through a browser, and locate the element information in the front-end interface corresponding to the front-end address to be tested; The element information is obtained according to the positioning result.

3. The method according to claim 1, characterized in that The detecting the front-end interface according to the preset interface element and the largest content element to obtain the detection result includes: Performing white screen detection on the front-end interface through image recognition, and recording the white screen time when the first picture in the front-end interface is detected; If the preset interface element is detected from the front-end interface, the first content rendering time is recorded; When it is detected that the loading of the largest content element in the front-end interface is completed, the maximum content rendering time is recorded; When all preset interface elements are traversed, the page loading time is recorded; Operate the operable elements in the front-end interface; If the operation is successful, the interactive time is recorded; The start time, the white screen time, the first content rendering time, the maximum content rendering time, the page loading time and the interactive time are determined as detection results.

4. The method according to claim 1, characterized in that: The comparing and analyzing the detection result with the preset reference data to obtain and output the test result of the front-end interface includes: According to the start time and the detection result, calculate the white screen duration, the first content rendering duration, the maximum content rendering duration, the page loading duration and the interactive duration; The white screen duration, the first content rendering duration, the maximum content rendering duration, the page loading duration and the interactive duration are respectively compared and analyzed with corresponding preset benchmark data to obtain and output the test results of the front-end interface.

5. The method according to claim 1, characterized in that After comparing and analyzing the test result with the preset benchmark data to obtain the test result of the front-end interface and outputting it, the method further includes: Get cache data, cookies and form data and delete them.

6. A front-end performance testing device, characterized in that: The device comprises: A receiving unit, used for receiving the address of the front end to be tested; An acquisition unit, used to acquire element information of the corresponding front-end interface through the front-end address to be tested, and record the current time as the start time; wherein the element information includes a preset interface element and a maximum content element; A detection unit, used to detect the front-end interface according to the preset interface element and the largest content element to obtain a detection result; The comparison and analysis unit is used to compare and analyze the detection result with the preset reference data, obtain the test result of the front-end interface and output it.

7. The device according to claim 6, characterized in that The acquisition unit comprises: A positioning module, used to load the front-end address to be tested through a browser, and locate the element information in the front-end interface corresponding to the front-end address to be tested; The acquisition module is used to acquire the element information according to the positioning result.

8. The device according to claim 6, characterized in that The detection unit comprises: A first recording module is used to perform white screen detection on the front-end interface through image recognition, and when the first picture in the front-end interface is detected, record the white screen time; A second recording module, configured to record the first content rendering time if the preset interface element is detected from the front-end interface; A third recording module is used to record the maximum content rendering time when it is detected that the loading of the largest content element in the front-end interface is completed; The fourth recording module is used to record the page loading time when all preset interface elements are traversed; An operation module, used to operate the operable elements in the front-end interface; The fifth recording module is used to record the interactive time if the operation is successful; A determination module is used to determine the start time, the white screen time, the first content rendering time, the maximum content rendering time, the page loading time and the interactive time as the detection result.

9. The device according to claim 6, characterized in that The comparison and analysis unit comprises: A calculation module, used to calculate the white screen duration, the first content rendering duration, the maximum content rendering duration, the page loading duration and the interactive duration according to the start time and the detection result; The comparison and analysis module is used to compare and analyze the white screen duration, the first content rendering duration, the maximum content rendering duration, the page loading duration and the interactive duration with the corresponding preset benchmark data, obtain the test results of the front-end interface and output them.

10. The device according to claim 6, characterized in that Also includes: The deletion unit is used to obtain cache data, cookies and form data and delete them.

Images