[go: up one dir, main page]

CN119669019A - Front-end performance testing method and device - Google Patents

Front-end performance testing method and device Download PDF

Info

Publication number
CN119669019A
CN119669019A CN202411741661.XA CN202411741661A CN119669019A CN 119669019 A CN119669019 A CN 119669019A CN 202411741661 A CN202411741661 A CN 202411741661A CN 119669019 A CN119669019 A CN 119669019A
Authority
CN
China
Prior art keywords
time
interface
end interface
duration
content rendering
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202411741661.XA
Other languages
Chinese (zh)
Inventor
梁潇
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Agricultural Bank of China
Original Assignee
Agricultural Bank of China
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Agricultural Bank of China filed Critical Agricultural Bank of China
Priority to CN202411741661.XA priority Critical patent/CN119669019A/en
Publication of CN119669019A publication Critical patent/CN119669019A/en
Pending legal-status Critical Current

Links

Landscapes

  • Debugging And Monitoring (AREA)

Abstract

The invention provides a front-end performance testing method and device, which are characterized in that element information of a corresponding front-end interface is obtained through a front-end address to be tested, the current time is recorded as the starting time, the front-end interface is detected according to a preset interface element and a maximum content element to obtain a detection result, the detection result is compared with preset reference data to obtain a testing result of the front-end interface, and the testing result is output. According to the invention, the front-end performance data, namely the detection result, is obtained in the interface automatic test process, and the front-end performance test is not required to be independently carried out, so that the overall test period is effectively shortened. Based on the front-end performance test, potential problems in the front-end interface loading process can be better known, so that performance is optimized, white screen time is reduced, loading speed is improved, and pages can be enabled to be interactable more quickly. The optimization directly improves the user experience, so that the user feels smoother and satisfied in the use process, and the market competitiveness of the product is obviously improved.

Description

Front-end performance testing method and device
Technical Field
The present invention relates to the field of software testing technologies, and in particular, to a method and an apparatus for testing front end performance.
Background
With the rapid development of the internet, more and more enterprises and organizations rely on Web applications to meet daily business requirements, so that the performance of the Web applications becomes a key factor affecting user experience and enterprise operation, and front-end performance testing becomes particularly important.
Although 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 have limited testing scope. This is because the front-end code is relatively independent and runs in most cases on the client, making the front-end performance test more complex and time consuming than the back-end performance test. Furthermore, while some automated test frameworks exist for front-end performance testing, these frameworks often only support specific browsers and operating systems and do not fully cover all browser and operating system versions.
Therefore, how to effectively expand the coverage range of the front-end performance test, shorten the test period, and improve the test efficiency is a current urgent problem to be solved.
Disclosure of Invention
In view of the above, the embodiment of the invention provides a front-end performance testing method and device, so as to solve the problems of small coverage area, long testing period and low efficiency of the front-end testing at present.
In order to achieve the above object, the embodiment of the present invention provides the following technical solutions:
the first aspect of the invention discloses a front-end performance testing method, which comprises the following steps:
receiving a front-end address to be tested;
acquiring element information of a corresponding front-end interface through the front-end address to be tested, and recording the current time as the starting time, wherein the element information comprises a preset interface element and a maximum content element;
Detecting the front-end interface according to the preset interface element and the maximum content element to obtain a detection result;
And comparing and analyzing the detection result with preset reference data to obtain and output a test result of the front-end interface.
Preferably, the obtaining element information of the corresponding front-end interface through the front-end address to be tested includes:
loading the front-end address to be tested through a browser, and positioning element information in a front-end interface corresponding to the front-end address to be tested;
and acquiring the element information according to the positioning result.
Preferably, the detecting the front-end interface according to the preset interface element and the maximum content element to obtain a detection result includes:
performing white screen detection on the front end interface through image recognition, and recording white screen time when a first picture in the front end interface is detected;
if the preset interface element is detected from the front-end interface, recording first content rendering time;
Recording maximum content rendering time when the maximum content element loading in the front-end interface is detected to be completed;
when traversing to all preset interface elements, recording page loading time;
Operating the operable elements in the front-end interface;
If the operation is successful, recording the interactable time;
And determining the starting time, the white screen time, the first content rendering time, the maximum content rendering time, the page loading time and the interactable time as detection results.
Preferably, the comparing and analyzing the detection result with preset reference data to obtain and output a test result of the front end interface, including:
According to the starting time and the detection result, calculating the white screen time length, the first content rendering time length, the maximum content rendering time length, the page loading time length and the interactable time length;
and respectively comparing the white screen time length, the first content rendering time length, the maximum content rendering time length, the page loading time length and the interactable time length with corresponding preset reference data for analysis, obtaining and outputting a test result of the front-end interface.
Preferably, after comparing and analyzing the detection result with preset reference data to obtain and output a test result of the front end interface, the method further includes:
and obtaining and deleting the cache data, the Cookies and the form data.
The second aspect of the present invention discloses a front-end performance testing apparatus, the apparatus comprising:
The receiving unit is used for receiving the front-end address to be tested;
The acquisition unit is used for acquiring element information of a corresponding front-end interface through the front-end address to be tested and recording the current time as the starting time, wherein the element information comprises a preset interface element and a maximum content element;
The detection unit is used for detecting the front-end interface according to the preset interface element and the maximum content element to obtain a detection result;
and the comparison and analysis unit is used for comparing and analyzing the detection result with preset reference data to obtain and output a test result of the front-end interface.
Preferably, the acquiring unit includes:
The positioning module is used for loading the front-end address to be tested through a browser and positioning element information in a front-end interface corresponding to the front-end address to be tested;
and the acquisition module is used for acquiring the element information according to the positioning result.
Preferably, the detection unit includes:
The first recording module is used for carrying out white screen detection on the front-end interface through image recognition, and recording white screen time when a first picture in the front-end interface is detected;
The second recording module is used for recording the first content rendering time if the preset interface element is detected from the front-end interface;
the third recording module is used for recording the maximum content rendering time when the loading of the maximum content element in the front-end interface is detected to be completed;
the fourth recording module is used for recording page loading time when traversing all preset interface elements;
the operation module is used for operating the operable elements in the front-end interface;
The fifth recording module is used for recording the interactable time if the operation is successful;
and the determining module is used for determining the starting time, the white screen time, the first content rendering time, the maximum content rendering time, the page loading time and the interactable time as detection results.
Preferably, the comparison and analysis unit includes:
The calculating module is used for calculating the white screen time length, the first content rendering time length, the maximum content rendering time length, the page loading time length and the interactable time length according to the starting time and the detection result;
And the comparison analysis module is used for respectively comparing the white screen time length, the first content rendering time length, the maximum content rendering time length, the page loading time length and the interactable time length with corresponding preset reference data, obtaining and outputting a test result of the front-end interface.
Preferably, the method further comprises:
And the deleting unit is used for acquiring and deleting the cache data, the Cookies and the form data.
Based on the front-end performance testing method and device provided by the embodiment of the invention, the element information of the corresponding front-end interface is obtained through the front-end address to be tested, the current time is recorded as the starting time, the front-end interface is detected according to the preset interface element and the maximum content element to obtain a detection result, and the detection result is compared with the preset reference data to obtain and analyze the testing result of the front-end interface, and the testing result is output. According to the invention, the front-end performance data, namely the detection result, is obtained in the interface automatic test process, and the front-end performance test is not required to be independently carried out, so that the overall test period is effectively shortened. Based on the front-end performance test, potential problems in the front-end interface loading process can be better known, so that performance is optimized, white screen time is reduced, loading speed is improved, and pages can be enabled to be interactable more quickly. The optimization directly improves the user experience, so that the user feels smoother and satisfied in the use process, and the market competitiveness of the product is obviously improved.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings that are required to be used in the embodiments or the description of the prior art will be briefly described below, and it is obvious that the drawings in the following description are only embodiments of the present invention, and that other drawings can be obtained according to the provided drawings without inventive effort for a person skilled in the art.
FIG. 1 is a flow chart of a front end performance testing method according to an embodiment of the present invention;
FIG. 2 is a flowchart of acquiring element information through a front end address to be tested according to an embodiment of the present invention;
FIG. 3 is a flowchart of detecting a front end interface to obtain a detection result according to an embodiment of the present invention;
fig. 4 is a block diagram of a front end performance testing apparatus according to an embodiment of the present invention.
Detailed Description
The following description of the embodiments of the present invention will be made clearly and completely with reference to the accompanying drawings, in which it is apparent that the embodiments described are only some embodiments of the present invention, but not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.
In the present disclosure, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises an element.
As known from the background art, most of the front-end performance tests are still limited to the browser level, and the testing range is limited. And because the front-end performance test is operated at the client in most cases, the front-end performance test is more complex, time-consuming and labor-consuming compared with the back-end performance test, and the test efficiency is lower.
The embodiment of the invention provides a front-end performance testing method and device, which are characterized in that element information of a corresponding front-end interface is obtained through a front-end address to be tested, the current time is recorded as the starting time, the front-end interface is detected according to a preset interface element and a maximum content element to obtain a detection result, and the detection result is compared with preset reference data to obtain and analyze the test result of the front-end interface, and the test result is output. According to the invention, the front-end performance data, namely the detection result, is obtained in the interface automatic test process, and the front-end performance test is not required to be independently carried out, so that the overall test period is effectively shortened. Based on the front-end performance test, potential problems in the front-end interface loading process can be better known, so that performance is optimized, white screen time is reduced, loading speed is improved, and pages can be enabled to be interactable more quickly. The optimization directly improves the user experience, so that the user feels smoother and satisfied in the use process, and the market competitiveness of the product is obviously improved.
Referring to fig. 1, a flowchart of a front-end performance testing method provided by an embodiment of the present invention is shown.
It should be noted that, the method specifically tests the performance of the front end interface of the front end address based on the Web end. The method comprises the following steps:
step S101, receiving a front-end address to be tested.
It should be noted that the Web terminal refers to a Web application running on the internet, that is, a website. These applications are mainly built by programming languages such as HTML, CSS, and JavaScript. They use the HTTP protocol to send information including static resources and dynamic content (e.g., PHP, ASP, etc.) to the user's browser. In this way, the user can conveniently browse and use the websites in the browser.
In the specific implementation process of step S101, a front end address URL to be tested input by a developer is received.
It will be appreciated that the front end, i.e. the user interface, refers to the portion of the computer program written using HTML and JavaScript, etc., which is primarily responsible for presenting content to the user. The core task of the front end is to manage interactions between the user and the Web application and to generate the Web page that the user finally sees. Typically, technologies involved in front-end development include HTML, CSS, and JavaScript.
Step S102, acquiring element information of a corresponding front-end interface through a front-end address to be tested, and recording the current time as the starting time.
It should be noted that the element information includes a preset interface element and a maximum content element.
In the specific implementation process of step S102, element information, such as type, attribute, text content, and the like, on the Web page is obtained by accessing the front end address to be tested. And simultaneously, recording the current time as the starting time point of the test so as to calculate the total time length of test execution later.
It can be understood that the detailed implementation process of acquiring the element information through the front-end address to be tested is shown in fig. 2 in the embodiment of the present invention.
And step 103, detecting the front-end interface according to the preset interface element and the maximum content element to obtain a detection result.
It should be noted that, when the URL of the front end address to be tested is input in the browser and the page response is waited, several important performance parameters of the Web end can be clarified through interface element traversal. From the beginning of the browser response to the front-end address URL under test, the following key points in time are experienced:
1. White screen time (FIRST PAINT, FP), which is the point in time when the page first displays any content on the screen, marks the beginning of rendering of the page.
2. First content rendering time (First Contentful Paint, FCP), which is the point in time when the page first renders any content from the DOM, such as text or images.
3. Maximum content rendering time (Largest Contentful Paint, LCP), which is the point in time when the largest text block or image element on a page is rendered, is typically used to measure the loading performance of the main content of the page.
4. Page Load Time (PLT), which is the point in Time when all resource loads for a Page are complete.
5. Interactable time (Time to Interactive, TTI), which is the point in time when a page becomes interactable, means that the main sub-resource of the page has been loaded, and the user can interact with the page without being affected by the page loading.
Based on this, in the process of implementing step S103, the front-end interface is detected according to the preset interface element and the maximum content element, 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 interactable time (TTI) are detected, and marked as detection results.
It should be noted that, the specific process of detecting the front end interface to obtain the detection result is shown in fig. 3 in the embodiment of the present invention.
It will be appreciated that these detection results are critical to assessing and optimizing the loading speed and user experience of Web pages. By measuring these time points, the developer can identify performance bottlenecks and take corresponding optimization measures to improve page loading efficiency and user satisfaction.
And step S104, comparing and analyzing the detection result with preset reference data to obtain and output a test result of the front-end interface.
In the specific implementation process of step S104, based on the white screen time (FP), the first content rendering time (FCP), the maximum content rendering time (LCP), the Page Loading Time (PLT), the interactable time (TTI), and the start time in the detection result, calculating a white screen time length, a first content rendering time length, a maximum content rendering time length, a page loading time length, and an interactable time length, and comparing the white screen time length, the first content rendering time length, the maximum content rendering time length, the page loading time length, and the interactable time length with corresponding preset reference data (such as industry standard), respectively, and obtaining and outputting a test result of the front interface.
It can be understood that the white screen time length is specifically a difference value between the white screen time and the start time, the first content rendering time length is specifically a difference value between the first content rendering time and the start time, the maximum content rendering time length is specifically a difference value between the maximum content rendering time and the start time, and the page loading time length is specifically a difference value between the page loading time and the start time.
It should be noted that, the method for calculating the interactable duration is, for example, to calculate from the time of first content rendering (FCP), to last for 5 seconds, to have no long task (execution time is more than 50 ms) and to have no more than two GET requests in progress, and to trace back to the time of ending the last long task 5 seconds before.
It should be specifically noted that, if each test is performed under the same starting condition, the results of different tests can be more accurately compared, and therefore, in practical application, after the test result of the front-end interface is obtained and output, the cache data, cookies and form data in the browser are obtained and deleted.
It will be appreciated that various temporary files and information generated by the browser during the testing process are purged to ensure cleanliness and consistency of the testing environment. This is particularly important for automated testing, as automated testing typically needs to be run in an isolated and repeatable environment.
In the embodiment of the invention, the front-end performance data such as the white screen time, the page loading time and the interactive time are acquired, and the front-end performance test is not required to be independently carried out, so that the whole test period can be greatly shortened. Web-side applications cover a wide variety of client devices and operating systems, and thus, interface automation testing can cover a wider variety of hardware and software environments. Based on the front-end performance test, potential problems in the page loading process can be better known, so that performance is optimized, white screen time is reduced, loading speed is improved, and pages can be enabled to be interactable faster. The optimization directly improves the user experience, so that the user feels smoother and satisfied in the use process, and the market competitiveness of the product is obviously improved.
The specific implementation process for acquiring element information through a front-end address to be tested, which is mentioned in fig. 1 in the above embodiment of the present invention, see the content in fig. 2 in the embodiment of the present invention, includes:
Step S201, loading a front-end address to be tested through a browser, and positioning element information in a front-end interface corresponding to the front-end address to be tested.
In the specific implementation process of step S201, a browser is used to open a URL (point to a Web page to be tested) of a front end address to be tested, and element information in a front end interface corresponding to the front end address to be tested is located one by one.
And S202, acquiring element information according to the positioning result.
In the process of implementing step S202, once the front-end interface loading corresponding to the front-end address to be tested is completed, the automated test tool (e.g., selenium WebDriver) locates the specific element on the page according to the predefined selector (possibly the CSS selector, XPath expression, or other locating policy).
It will be appreciated that after successful positioning, detailed information about the elements may be obtained, such as the tag name, attribute value, text content, whether visible, clickable, etc. of the elements.
In an embodiment of the invention, the basis of an automated test flow is disclosed, which allows test scripts to interact with Web pages, performing subsequent test operations, such as simulating user clicks, entering text, verifying page content, etc. In this way, it is possible to automatically verify whether the functions and user interfaces of the Web application are working as intended.
The specific implementation process for detecting the front end interface to obtain the detection result in the embodiment of the present invention illustrated in fig. 1, see the content in fig. 3 of the embodiment of the present invention, includes:
Step S301, performing white screen detection on the front end interface through image recognition, and recording white screen time when a first picture in the front end interface is detected.
In the specific implementation process of step S301, the web page content is analyzed and a DOM structure is created through an image recognition technology, the DOM structure is converted into a visual interface and the page state is updated, so that the front-end interface is subjected to white screen detection, and when the system detects that the front-end interface displays a picture for the first time, the duration of the white screen, namely the time of the first non-white screen in the front-end interface, is recorded.
Step S302, if a preset interface element is detected from the front-end interface, recording the first content rendering time.
It should be noted that the preset interface elements, that is, the recorded interface elements, include, but are not limited to, types, attributes, text contents, and the like.
In the process of specifically implementing 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.
Step S303, when the maximum content element loading in the front-end interface is detected to be completed, recording the maximum content rendering time.
It should be noted that, the content element div with the largest front-end interface is predetermined, where div is a commonly used container element, may contain other HTML elements, and has no default style, and is commonly used to divide the layout structure of a web page.
In the process of implementing step S303, when loading and displaying of the maximum visual content (such as a large image or a large text) in the front-end interface is detected, the current time is recorded as the maximum content rendering time, and this time is used to evaluate the loading performance of the page.
Step S304, when traversing to all preset interface elements, recording page loading time.
In the specific implementation process of step S304, in the loading process of the front-end interface, each preset interface element (such as a picture, a text box, a button, etc.) on the front-end interface is checked or monitored in sequence until all the elements are loaded and rendered, and the current time is recorded as the page loading time.
It will be appreciated that page load time is used for performance monitoring and optimization, helping developers evaluate the speed and user experience of web page loading. By recording the page load time, a developer can know which resources may affect the page load performance, and optimize it.
And step S305, operating the operable elements in the front-end interface.
In the process of implementing step S305, after all the preset interface elements are loaded and rendered, the operable elements in the front-end interface are operated.
Step S306, if the operation is successful, recording the interactable time.
In the process of implementing step S306, if the operation on the operable element in the front-end interface is successful, the current time is recorded as the interactable time.
That is, the interactable time represents a point in time when the web page completely reaches the interactable state for the first time. The interactable state refers to that UI components on the page can interact (can respond to operations such as clicking a button, inputting information, submitting a form and the like by a user), and furthermore, the main thread has reached the degree of fluency at the moment, and the tasks of the main thread are not more than 50 milliseconds.
Step S307, determining the starting time, the white screen time, the first content rendering time, the maximum content rendering time, the page loading time and the interactable time as detection results.
In the process of implementing step S307, the start time, the white screen time, the first content rendering time, the maximum content rendering time, the page loading time, and the interactable time recorded in the above process are uniformly determined as detection results.
In the embodiment of the invention, the determination process of the starting time, the white screen time, the first content rendering time, the maximum content rendering time, the page loading time and the interactable time is introduced, the key time indexes are defined, the effective monitoring and optimization of the front-end interface loading and rendering process are facilitated, and the performance of the webpage is further improved. The method not only provides a clear target for performance optimization, but also provides data support for continuous improvement and tuning, so that a development team can realize continuous improvement of performance in each link.
Corresponding to the front-end performance testing method provided by the embodiment of the present invention, referring to fig. 4, a block diagram of a front-end performance testing device provided by the embodiment of the present invention is shown.
The apparatus includes a receiving unit 401, an acquiring unit 402, a detecting unit 403, and an alignment analyzing unit 404.
The receiving unit 401 is configured to receive a front-end address to be tested.
And the acquiring unit 402 is configured to acquire element information of a corresponding front-end interface through a front-end address to be tested, and record a current time as a start time, where the element information includes a preset interface element and a maximum content element.
The detecting unit 403 is configured to detect the front-end interface according to a preset interface element and a maximum content element, so as to obtain a detection result.
And the comparison and analysis unit 404 is configured to compare and analyze the detection result with preset reference data, obtain a test result of the front end interface, and output the test result.
In the embodiment of the invention, the front-end performance data such as the white screen time, the page loading time and the interactive time are acquired, and the front-end performance test is not required to be independently carried out, so that the whole test period can be greatly shortened. Web-side applications cover a wide variety of client devices and operating systems, and thus, interface automation testing can cover a wider variety of hardware and software environments. Based on the front-end performance test, potential problems in the page loading process can be better known, so that performance is optimized, white screen time is reduced, loading speed is improved, and pages can be enabled to be interactable faster. The optimization directly improves the user experience, so that the user feels smoother and satisfied in the use process, and the market competitiveness of the product is obviously improved.
In connection with what is shown in fig. 4, the acquisition unit 402 comprises a positioning module and an acquisition module.
And the positioning module is used for loading the front-end address to be tested through the browser and positioning the element information in the front-end interface corresponding to the front-end address to be tested.
And the acquisition module is used for acquiring the element information according to the positioning result.
In connection with the content shown in fig. 4, 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.
The first recording module is used for carrying out white screen detection on the front-end interface through image recognition, and recording white screen time when a first picture in the front-end interface is detected.
And the second recording module is used for recording the first content rendering time if the preset interface element is detected from the front-end interface.
And the third recording module is used for recording the maximum content rendering time when the loading of the maximum content element in the front-end interface is detected to be completed.
And the fourth recording module is used for recording page loading time when traversing to all preset interface elements.
And the operation module is used for operating the operable elements in the front-end interface.
And the fifth recording module is used for recording the interactable time if the operation is successful.
And the determining module is used for determining the starting time, the white screen time, the first content rendering time, the maximum content rendering time, the page loading time and the interactable time as detection results.
In connection with what is shown in fig. 4, the comparison analysis unit 404 includes a calculation module and a comparison analysis module.
The computing module is used for computing the white screen time length, the first content rendering time length, the maximum content rendering time length, the page loading time length and the interactable time length according to the starting time and the detection result.
The comparison analysis module is used for respectively comparing the white screen time length, the first content rendering time length, the maximum content rendering time length, the page loading time length and the interactable time length with corresponding preset reference data, obtaining and outputting a test result of the front-end interface.
The content shown in fig. 4 is combined with a deleting unit, which is used for acquiring and deleting the cache data, the Cookies and the form data.
In this specification, each embodiment is described in a progressive manner, and identical and similar parts of each embodiment are all referred to each other, and each embodiment mainly describes differences from other embodiments. In particular, for a system or system embodiment, since it is substantially similar to a method embodiment, the description is relatively simple, with reference to the description of the method embodiment being made in part. The systems and system embodiments described above are merely illustrative, wherein the elements illustrated as separate elements may or may not be physically separate, and the elements shown as elements may or may not be physical elements, may be located in one place, or may be distributed over a plurality of network elements. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of this embodiment. Those of ordinary skill in the art will understand and implement the present invention without undue burden.
Those of skill would further appreciate that the various illustrative elements and algorithm steps described in connection with the embodiments disclosed herein may be implemented as electronic hardware, computer software, or combinations of both, and that the various illustrative elements and steps are described above generally in terms of functionality in order to clearly illustrate the interchangeability of hardware and software. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the solution. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present invention.
The previous description of the disclosed embodiments is provided to enable any person skilled in the art to make or use the present invention. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the generic principles defined herein may be applied to other embodiments without departing from the scope of the invention. Thus, the present invention is not intended to be limited to the embodiments shown herein but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims (10)

1.一种前端性能测试方法,其特征在于,所述方法包括: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 a preset interface element and a maximum 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.根据权利要求1所述的方法,其特征在于,所述通过所述待测试前端地址获取相应的前端界面的元素信息,包括:2. The method according to claim 1, characterized in that the step of obtaining the element information of the corresponding front-end interface through the front-end address to be tested comprises: 通过浏览器加载所述待测试前端地址,对所述待测试前端地址相应的前端界面中的元素信息进行定位;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.根据权利要求1所述的方法,其特征在于,所述根据所述预设的界面元素和最大内容元素对所述前端界面进行检测,得到检测结果,包括: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 comprises: 通过图像识别对所述前端界面进行白屏检测,当检测到所述前端界面中的第一个画面时,记录白屏时间;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.根据权利要求1所述的方法,其特征在于,所述将所述检测结果与预设基准数据进行比对分析,得到所述前端界面的测试结果并输出,包括:4. The method according to claim 1, characterized in that the comparing and analyzing the detection result with the preset benchmark data to obtain and output the test result of the front-end interface comprises: 根据所述起始时间和所述检测结果,计算白屏时长、首次内容渲染时长、最大内容渲染时长、页面加载时长和可交互时长;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.根据权利要求1所述的方法,其特征在于,将所述检测结果与预设基准数据进行比对分析,得到所述前端界面的测试结果并输出之后,还包括:5. The method according to claim 1, characterized in that after comparing and analyzing the test result with the preset benchmark data to obtain and output the test result of the front-end interface, it also includes: 获取缓存数据、Cookies和表单数据并进行删除。Get cache data, cookies and form data and delete them. 6.一种前端性能测试装置,其特征在于,所述装置包括: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 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 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.根据权利要求6所述的装置,其特征在于,所述获取单元,包括:7. The device according to claim 6, characterized in that the acquisition unit comprises: 定位模块,用于通过浏览器加载所述待测试前端地址,对所述待测试前端地址相应的前端界面中的元素信息进行定位;A positioning module, used to load the address of the front-end 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.根据权利要求6所述的装置,其特征在于,所述检测单元,包括: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 is used 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; 第五记录模块,用于若操作成功,则记录可交互时间;A fifth recording module, 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.根据权利要求6所述的装置,其特征在于,所述比对分析单元,包括: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.根据权利要求6所述的装置,其特征在于,还包括:10. The device according to claim 6, further comprising: 删除单元,用于获取缓存数据、Cookies和表单数据并进行删除。The deletion unit is used to obtain cache data, cookies and form data and delete them.
CN202411741661.XA 2024-11-29 2024-11-29 Front-end performance testing method and device Pending CN119669019A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202411741661.XA CN119669019A (en) 2024-11-29 2024-11-29 Front-end performance testing method and device

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202411741661.XA CN119669019A (en) 2024-11-29 2024-11-29 Front-end performance testing method and device

Publications (1)

Publication Number Publication Date
CN119669019A true CN119669019A (en) 2025-03-21

Family

ID=94982886

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202411741661.XA Pending CN119669019A (en) 2024-11-29 2024-11-29 Front-end performance testing method and device

Country Status (1)

Country Link
CN (1) CN119669019A (en)

Similar Documents

Publication Publication Date Title
CA3018196C (en) Visual regresssion testing tool
US8104020B2 (en) Method and system to automate software testing using sniffer side and browser side recording and a toolbar interface
CN111061526B (en) Automatic test method, device, computer equipment and storage medium
US9459994B2 (en) Mobile application testing systems and methods
US7877681B2 (en) Automatic context management for web applications with client side code execution
US7685260B2 (en) Method for analyzing state transition in web page
US8326922B2 (en) Method for server-side logging of client browser state through markup language
CN102932197B (en) Testing method and system
US9003235B2 (en) Indicating coverage of web application testing
WO2018010552A1 (en) Test method and device
US20040205570A1 (en) Test assisting program and test assisting method
US12079298B2 (en) Methods and systems for browser extension used to generate relative XPath, absolute XPath and/or CSS selectors
CN107918575B (en) Page state monitoring method and device
CN112231213A (en) Web automated testing method, system, storage medium and terminal equipment
CN112115051A (en) Page traversal detection method, device and equipment for application and readable storage medium
CN110543429A (en) Test case debugging method, device and storage medium
KR20100069147A (en) Method and apparatus for testing quality of website
JP7344614B1 (en) Systems, methods, and programs for testing website vulnerabilities
Zhyhulin et al. Combined method of prioritization and automation of software regression testing
CN115878934B (en) A data collection method and system based on page browsing behavior modeling
CN119669019A (en) Front-end performance testing method and device
US20140245159A1 (en) Transport script generation based on a user interface script
Nejati et al. Wprofx: A fine-grained visualization tool for web page loads
Borzemski et al. Measured vs. perceived web performance
WO2015001721A1 (en) User-interface review method, device, and program

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination