Page testing method, apparatus and electronic device

Abstract

The application provides a page detection method and device and electronic equipment, and relates to the technical field of software testing. The method comprises the following steps: receiving a test request; obtaining corresponding React Native page code according to the test request; establishing communication with a non-interface browser, controlling the non-interface browser to execute the React Native page code, and starting a corresponding React Native page; performing a performance test operation on the React Native page through the non-interface browser; receiving a page detection result sent by the non-interface browser, and storing the page detection result in a performance log file; and analyzing the performance log file and generating a test report. In the above design, automatic performance detection of React Native can be realized, problems can be actively found, and corresponding performance optimization and improvement can be carried out in the process of business development according to the test report, so that the problem analysis efficiency is improved.

Description

Technical Field

[0001] This application relates to the field of software testing technology, and more specifically, to a page testing method, apparatus, and electronic device. Background Technology

[0002] Currently, React Native cross-platform technology has been widely used in various applications, but some problems still exist in the development process, mainly including the need for manual performance analysis and the high threshold of performance analysis.

[0003] First, React Native cannot proactively analyze problems; performance analysis requires manual intervention. Typically, manual analysis is only performed when serious page performance issues are discovered, making it impossible to identify all performance problems. Some performance issues may go undetected and unresolved in a timely manner, and manual analysis is inefficient.

[0004] Secondly, performance analysis in React Native has a relatively high barrier to entry. Developers need additional learning and practice with performance debugging tools to perform performance analysis. Summary of the Invention

[0005] In order to at least overcome the above-mentioned deficiencies in the prior art, the purpose of this application is to provide a page testing method, apparatus and electronic device.

[0006] In a first aspect, embodiments of this application provide a page testing method, the page testing method comprising: Receive test request; Obtain the corresponding React Native page code based on the test request; Establish communication with a headless browser, control the headless browser to execute the React Native page code, and launch the corresponding React Native page; Perform performance testing on the React Native page using the headless browser. Receive the page detection results sent by the headless browser and store the page detection results in the performance log file; The performance log files are analyzed and a test report is generated.

[0007] In one possible implementation, the step of receiving the page detection result sent by the headless browser and storing the page detection result in the performance log file includes: Receive a stop test command sent by the automated testing platform, and send the stop test command to the headless browser to cause the headless browser to stop testing the React Native page; Receive the page detection results sent by the headless browser and store the page detection results in the performance log file.

[0008] In one possible implementation, the step of establishing communication with a headless browser, controlling the headless browser to execute the React Native page code, and launching the corresponding React Native page includes: Establish communication with a headless browser to obtain routing URL information; The corresponding React Native page is launched based on the routing URL information, so that the React Native page connects to the remote debugging service through the routing URL information.

[0009] In one possible implementation, the step of establishing communication with the headless browser includes: Establish communication with the Headless Chromium browser via the Chrome DevTools Protocol.

[0010] In one possible implementation, the step of receiving the test request includes: Receive an HTTP request, which includes React Native business information.

[0011] In one possible implementation, after the step of receiving the HTTP request, the HTTP request including ReactNative business information, the method further includes: The React Native business code is obtained based on the React Native business information, and a duplicate rendering check is performed on the React Native business code. The duplicate rendering information is then stored in the performance log file.

[0012] In one possible implementation, the steps of obtaining React Native business code based on the React Native business information, performing duplicate rendering checks on the React Native business code, and storing duplicate rendering information in a performance log file include: An abstract syntax tree for the React Native business code is generated using a code compiler; Based on the abstract syntax tree, the detection code is added to the React Native business code to perform duplicate rendering checks and obtain duplicate rendering information; The repeated rendering information is stored in a performance log file.

[0013] Secondly, embodiments of this application also provide a page testing apparatus, comprising: The first receiving module is used to receive test requests; The second receiving module is used to obtain the corresponding React Native page code according to the test request; The control module is used to establish communication with the headless browser, control the headless browser to execute the ReactNative page code, and launch the corresponding React Native page; The testing module is used to perform performance testing operations on the React Native page through the headless browser; The storage module is used to receive the page detection results sent by the headless browser and store the page detection results in the performance log file; The analysis module is used to analyze the performance log files and generate test reports.

[0014] Thirdly, embodiments of this application also provide an electronic device, including: Memory, used to store one or more programs; The processor, when the one or more programs are executed by the processor, implements the page testing method provided in the first aspect above.

[0015] Fourthly, embodiments of this application also provide a computer-readable storage medium having a computer program stored thereon, characterized in that the computer program, when executed by a processor, implements the page testing method provided in the first aspect above.

[0016] Based on any of the above aspects, the page testing method, apparatus, and electronic device provided in this application can obtain React Native page code through a test request, and after establishing communication with a headless browser, control the headless browser to execute the React Native page code, start the React Native page, perform performance testing operations on the React Native page through the headless browser, and store the page test results in a performance log file to generate a test report. In this way, automated performance testing of React Native can be achieved, proactively identifying problems, and enabling corresponding performance optimization and improvement during business development based on the test report, thereby improving the efficiency of problem analysis. Attached Figure Description

[0017] To more clearly illustrate the technical solutions of the embodiments of this application, the accompanying drawings required in the embodiments will be briefly introduced below. It should be understood that the following drawings only show some embodiments of this application and should not be regarded as a limitation of the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0018] Figure 1 This is an illustrative application scenario diagram of the page detection method provided in this embodiment; Figure 2 This is one of the schematic flowcharts of the page detection method provided in this embodiment; Figure 3 This is a schematic diagram of the sub-steps of step S500 provided in this embodiment; Figure 4 This is a schematic diagram of the sub-steps of step S300 provided in this embodiment; Figure 5 This is the second illustrative flowchart of the page detection method provided in this embodiment; Figure 6 This is a schematic structural block diagram of the electronic device provided in this embodiment; Figure 7 This is a schematic diagram of the functional modules of the page detection device provided in this embodiment.

[0019] Icons: 100 - Automated testing platform; 200 - Automated performance analysis service; 300 - Headless browser; 700 - Electronic device; 710 - Processor; 720 - Computer-readable storage medium; 730 - Page detection device; 731 - First receiving module; 732 - Second receiving module; 733 - Control module; 734 - Test module; 735 - Storage module; 736 - Analysis module. Detailed Implementation

[0020] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. The components of the embodiments of this application described and shown in the accompanying drawings can generally be arranged and designed in various different configurations.

[0021] Therefore, the following detailed description of the embodiments of this application provided in the accompanying drawings is not intended to limit the scope of the claimed application, but merely to illustrate selected embodiments of the application. All other embodiments obtained by those skilled in the art based on the embodiments of this application without inventive effort are within the scope of protection of this application.

[0022] It should be noted that similar labels and letters in the following figures indicate similar items. Therefore, once an item is defined in one figure, it does not need to be further defined and explained in subsequent figures.

[0023] In the description of this application, it should be noted that the terms "upper," "lower," etc., indicating the orientation or positional relationship are based on the orientation or positional relationship shown in the accompanying drawings, or the orientation or positional relationship commonly used when the product is in use. They are used only for the convenience of describing this application and simplifying the description, and do not indicate or imply that the device or element referred to must have a specific orientation, or be constructed and operated in a specific orientation, and therefore should not be construed as a limitation on this application. In addition, the terms "first," "second," etc., are used only to distinguish descriptions and should not be construed as indicating or implying relative importance.

[0024] It should be noted that, where there is no conflict, different features in the embodiments of this application can be combined with each other.

[0025] This embodiment provides a solution to the above problems. The specific implementation of this application will be described in detail below with reference to the accompanying drawings.

[0026] Please refer to Figure 1 , Figure 1 This embodiment provides a page inspection system, which includes an automated testing platform 100, an automated performance analysis service 200, and a headless browser 300. The automated testing platform 100 and the automated performance analysis service 200 can communicate with each other via Hypertext Transfer Protocol (HTTP). The automated performance analysis service 200 and the headless browser 300 can communicate with each other via Chrome DevTools Protocol (CDP).

[0027] Please refer to Figure 2 , Figure 2 This embodiment provides a flowchart illustrating a page testing method, which can be applied to, for example, Figure 1 The automated performance testing service shown may include the following steps.

[0028] Step S100: Receive test request.

[0029] In this embodiment, the test request sent by the automated testing platform or the React Native CLI tool can be received, and performance testing operations, such as duplicate rendering detection, can be performed according to the test request.

[0030] Step S200: Obtain the corresponding React Native page code according to the test request.

[0031] In this embodiment, the test request obtained in step S100 can be parsed to determine the relevant information of the React Native page to be tested, and the corresponding React Native page code can be retrieved based on the obtained relevant information.

[0032] React Native (RN) is a cross-platform mobile application development framework that currently supports both iOS and Android platforms. RN uses JavaScript, JSX (similar to HTML), and CSS to develop mobile applications.

[0033] Step S300: Establish communication with the headless browser 300, control the headless browser 300 to execute the React Native page code, and start the corresponding React Native page.

[0034] In this embodiment, communication can be established with the headless browser 300 to control the headless browser 300 to execute the React Native page code obtained in step S200, and to enable the automated testing platform 100 to launch the corresponding React Native page.

[0035] Specifically, in the process of establishing communication with the headless browser 300, the React Native debugging service can be started on the server first, and then the headless browser 300 can be started on the server, thereby realizing communication with the headless browser 300.

[0036] Step S400: Perform a performance test on the React Native page using the headless browser 300.

[0037] In this embodiment, performance testing can be performed on the React Native page opened in step S300 using the headless browser 300. For example, user actions on the React Native page can be simulated, such as clicking buttons, entering text, and scrolling the page. These actions can be implemented by executing JavaScript code. During the simulation of user interaction, breakpoints can be set at specific code locations for debugging and performance analysis.

[0038] During performance testing, performance data can be collected and recorded, such as page load time, rendering performance, and interaction response time. Based on the collected performance data, page test results can be generated.

[0039] Step S500: Receive the page detection result sent by the headless browser 300 and store the page detection result in the performance log file.

[0040] In this embodiment, the performance test operation performed on the React Native page in step S400 can be performed, for example, simulating user actions on the React Native page, to obtain the page detection results sent by the headless browser 300, and store the page detection results in the performance log (Profile) file. The page detection results may include indicators such as the React Native page's loading time, rendering performance, resource loading status, and interaction response time.

[0041] Step S600: Analyze the performance log file and generate a test report.

[0042] In this embodiment, the performance log (profile) file obtained in step S500 can be analyzed, and a test report can be generated based on the analysis results. The test report may include JS thread time consumption distribution, JS memory distribution, component rendering count, and repeated component rendering count. Specifically, JS thread time consumption distribution refers to the time distribution of JS threads under different operations or event triggers; JS memory distribution refers to the distribution of JS memory under different operations or event triggers, including memory usage and memory leaks; component rendering count refers to the number of times each component is rendered, including the number of times each component is rendered in different scenarios; and repeated component rendering count refers to the number of times a component is repeatedly rendered under the same Props and State.

[0043] After generating the test report, it can be sent to the automated testing platform 100, which will then send a performance test email. The performance test email may include a summary of the test report, key metrics, issues, and suggestions, so that corresponding performance optimizations and improvements can be made during business development.

[0044] As can be seen, based on the above design, the page testing method provided in this application embodiment can obtain the React Native page code through the test request, and after establishing communication with the headless browser 300, control the headless browser 300 to execute the React Native page code, start the React Native page, and perform performance testing operations on the React Native page through the headless browser 300. The page test results are stored in the performance log (Profile) file, thereby generating the test report. In this way, automated performance testing of React Native can be achieved, proactively identifying problems, and enabling corresponding performance optimization and improvement during business development based on the test report, thus improving the efficiency of problem analysis.

[0045] In one possible implementation, please refer to Figure 3 Step S500 may include the following sub-steps.

[0046] Step S510: Receive a stop test command sent by the automated testing platform 100, and send the stop test command to the headless browser 300, so that the headless browser 300 stops testing the React Native page.

[0047] In this embodiment, when the automated testing platform 100 opens the React Native page, the automated testing platform 100 can operate on the React Native page, such as clicking buttons or scrolling the page. When the number of times the automated testing platform 100 operates on the React Native page (such as clicking the page or scrolling the page) reaches a preset threshold, the automated testing platform 100 can send the stop test command to the automated performance analysis service 200. At this time, the automated performance analysis service 200 can receive the stop test command sent by the automated testing platform 100 and send the stop test command to the headless browser 300, so that the headless browser 300 stops performing performance testing on the React Native page.

[0048] For example, when the automated testing platform 100 scrolls the React Native page back and forth 5 times, the automated testing platform 100 can send the stop test command to the automated performance analysis service 200.

[0049] Specifically, the automated testing platform 100 and the automated performance analysis service 200 can communicate via the Hypertext Transfer Protocol (HTTP).

[0050] Step S520: Receive the page detection result sent by the headless browser 300 and store the page detection result in the performance log file.

[0051] In this embodiment, when the headless browser 300 stops detecting the React Native page, the system can receive the page detection results sent by the headless browser 300 and store the page detection results in the performance log (profile) file. At this time, the React Native debugging service (packager server) can be stopped, and after stopping the React Native debugging service (packager server), the performance log (profile) file can be analyzed to generate the test report. After generating the test report, it can be sent to the automated testing platform 100, which will then send a performance test email. The performance test email may include a summary of the test report, key metrics, problem areas, and suggestions to facilitate performance optimization and improvement during business development.

[0052] In one possible implementation, please refer to Figure 4 Step S300 may include the following sub-steps.

[0053] Step S310: Establish communication with the headless browser 300 to obtain the routing URL information.

[0054] In this embodiment, when establishing communication with the headless browser 300, a React Native debugging service (packager server) can be started on the server side first to obtain the address and port number of the React Native debugging service (packager server). Then, the headless browser 300 is started on the server side to achieve communication with the headless browser 300. After establishing communication with the headless browser 300, the routing URL information can be generated based on the address and port number of the React Native debugging service (packager server).

[0055] The React Native debugger server (packager server) can communicate with the headless browser 300 via WebSocket.

[0056] Step S320: Launch the corresponding React Native page according to the routing URL information, so that the React Native page connects to the remote debugging service through the routing URL information.

[0057] In this embodiment, the routing URL information generated in step S310 can be sent to the automated testing platform 100, so that the automated testing platform 100 can open the corresponding React Native page according to the routing URL information. This allows the React Native page to connect to the remote debugging service through the routing URL information, facilitating remote debugging, performance analysis, and error troubleshooting.

[0058] In step S510, when the number of times the automated testing platform 100 operates on the React Native page (such as clicking the page, scrolling the page) reaches a preset threshold, the automated testing platform 100 can also send the stop test instruction to the automated performance analysis service 200 through the routing URL information generated in step S310. At this time, the automated performance analysis service 200 can receive the stop test instruction sent by the automated testing platform 100 through the routing URL information, and send the stop test instruction to the headless browser 300, so that the headless browser 300 can stop the performance test on the React Native page according to the stop test instruction, and send the page detection result to the automated performance analysis service 200.

[0059] In one possible implementation, when establishing communication with the headless Chromium browser 300, communication can be established via the Chrome DevTools Protocol.

[0060] In this embodiment, the HeadlessChromium browser can be launched via CDP (Chrome DevTools Protocol), thereby establishing communication with the HeadlessChromium browser. This enables the execution of JavaScript code in automated tests, thus achieving interaction with React Native applications.

[0061] Specifically, CDP (Chrome DevTools Protocol) is a communication protocol used for remotely controlling the behavior of Chrome / Chromium, and can be used for operations such as opening a browser / opening a page / intercepting requests / extracting page content. The headless browser 300 can be a headless Chromium browser, which is a Chromium browser that does not display a user interface.

[0062] In step S510, when the automated performance analysis service 200 sends the stop test instruction to the headless browser 300, causing the headless browser 300 to stop testing the React Native page, the automated performance analysis service 200 can send the stop test instruction to the headless Chromium browser via CDP (Chrome DevTools Protocol), thereby causing the headless Chromium browser to stop performing performance testing on the React Native page according to the stop test instruction.

[0063] In one possible implementation, when receiving the test request, an HTTP request may be received, the HTTP request including React Native business information.

[0064] In this embodiment, the test request can be an HTTP request. The system can receive HTTP requests sent by the automated testing platform or the React Native CLI tool and perform performance testing operations, such as duplicate rendering detection, based on the HTTP request. The HTTP request may include React Native business information, such as page name and version number.

[0065] The automated testing platform 100 and the automated performance analysis service 200 can communicate via the Hypertext Transfer Protocol (HTTP).

[0066] In one possible implementation, after receiving the HTTP request, React Native business code can be obtained based on the React Native business information, and duplicate rendering checks can be performed on the React Native business code, with the duplicate rendering information stored in a performance log file.

[0067] The inventors discovered that component re-rendering is one of the most common problems in React Native, usually caused by changes in a component's props or state. When a component's props or state change, React re-renders the component to reflect these changes. This can lead to unnecessary re-rendering of components in some cases, impacting application performance and user experience. Therefore, it is necessary to perform re-render checks on the React Native business logic code.

[0068] In this embodiment, the React Native business code can be obtained based on the React Native business information contained in the HTTP request, and a duplicate rendering check can be performed on the React Native business code. When duplicate rendering is detected, the duplicate rendering information can be stored in the performance log (profile) file, thereby generating the test report. The duplicate rendering information may include the component name and the reason for the duplicate rendering.

[0069] In one possible implementation, please refer to Figure 5 When obtaining React Native business code based on the React Native business information, performing duplicate rendering checks on the React Native business code, and storing the duplicate rendering information in the performance log file, the method may further include the following steps.

[0070] Step S710: Generate the abstract syntax tree of the React Native business code using a code compiler.

[0071] In this embodiment, the React Native business code can be parsed by the code compiler to obtain the Abstract Syntax Tree (AST). The Abstract Syntax Tree (AST) is a tree-like representation of the abstract syntactic structure of the React Native business code, where each node represents a structure within the React Native business code.

[0072] Specifically, the code compiler can be a JavaScript compiler, such as the Babel compiler. When obtaining the abstract syntax tree (AST) of the React Native business code using the code compiler, the Babel compiler can be used to perform static analysis (analyzing the code without executing it) on the React Native business code, thereby generating the AST. The Babel compiler provides APIs for parsing the React Native business code and constructing the AST.

[0073] When generating the Abstract Syntax Tree (AST) using the Babel compiler, the character stream from the React Native business code needs to be read first. Then, lexical analysis generates lexical unit tokens, and finally, syntax analysis transforms these tokens into the syntactically meaningful Abstract Syntax Tree (AST). Lexical analysis involves dividing the entire code string into an array of minimal syntactic units; syntax analysis, on the other hand, involves establishing and analyzing the relationships between these syntactic units based on tokenization.

[0074] Step S720: Based on the abstract syntax tree, the detection code is added to the React Native business code for duplicate rendering check to obtain duplicate rendering information.

[0075] In this embodiment, the relevant code for component rendering can be located by traversing the Abstract Syntax Tree (AST) generated in step S710. The detection code can then be added to a suitable location within the React Native business code, executing simultaneously with the React Native business code. Thus, by executing the detection code, duplicate rendering checks can be performed on the React Native business code, and duplicate rendering information, such as the component name and the reason for the duplicate rendering, can be recorded when duplicate rendering is detected.

[0076] Specifically, the detection code can be used to detect whether duplicate rendering exists in the React Native business logic code. When adding the detection code to the React Native business logic code, a runtime lint framework can be used to add the detection code, thereby performing duplicate rendering checks on the React Native business logic code. The runtime lint framework can dynamically monitor and analyze the execution status of the React Native business logic code during application runtime, and provide real-time feedback and warnings.

[0077] The detection code can be stub code. The React Native business logic code can be JavaScript code.

[0078] Step S730: Store the repeated rendering information in a performance log file.

[0079] In this embodiment, when the detection code detects duplicate rendering, it can obtain the duplicate rendering information and store the duplicate rendering information in the performance log (profile) file.

[0080] When analyzing the performance log (profile) file and generating a test report, the duplicate rendering information can also be analyzed and displayed in the test report. The test report can statistically analyze the rendering count of each component, including the number of times each component is rendered in different scenarios. This allows for the identification of components that render frequently, thereby pinpointing potential performance issues. The test report can also statistically analyze the rendering count of components that render repeatedly, i.e., the number of times a component is rendered repeatedly under the same props and state. This facilitates the identification of components with duplicate rendering issues, enabling optimization and improvement.

[0081] In the above design, the Abstract Syntax Tree (AST) generated by the code compiler is used to inject the detection code into the React Native business code to perform duplicate rendering checks. This can proactively detect duplicate rendering issues and facilitate performance optimization during business development.

[0082] Based on the same inventive concept, this embodiment also provides an electronic device 700, please refer to... Figure 6 , Figure 6 This is a block diagram illustrating the electronic device 700. The electronic device 700 includes a page detection device 730, a computer-readable storage medium 720, and a processor 710.

[0083] The computer-readable storage medium 720 and the processor 710 are electrically connected directly or indirectly to achieve data transmission or interaction. For example, these components can be electrically connected to each other through one or more communication buses or signal lines. The page detection device 730 includes multiple software function modules that can be stored in the computer-readable storage medium 720 in the form of software or firmware or embedded in the operating system (OS) of the page detection device 730. The processor 710 is used to execute executable modules stored in the computer-readable storage medium 720, such as the software function modules and computer programs included in the page detection device 730.

[0084] The computer-readable storage medium 720 may be, but is not limited to, random access memory (RAM), read-only memory (ROM), programmable read-only memory (PROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), etc. The computer-readable storage medium 720 is used to store a program, which the processor 710 executes upon receiving an execution instruction.

[0085] The processor 710 may be an integrated circuit chip with signal processing capabilities. The processor 710 can be a general-purpose processor 710, including a central processing unit (CPU), a network processor (NP), etc.; it can also be a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components. It can implement or execute the methods, steps, and logic block diagrams disclosed in the embodiments of this application. The general-purpose processor 710 can be a microprocessor 710, or any conventional processor 710, etc.

[0086] Please refer to Figure 7This application also provides a page detection device 730. The page detection device 730 includes multiple functional modules that can be stored in software form in a computer-readable storage medium 720. Functionally, the page detection device 730 may include a first receiving module 731, a second receiving module 732, a control module 733, a testing module 734, a storage module 735, and an analysis module 736. Wherein: The first receiving module 731 can be used to receive test requests.

[0087] In this embodiment, the first receiving module 731 can be used to perform... Figure 2 For a detailed description of the first receiving module 731, please refer to the description of step S100 shown.

[0088] The second receiving module 732 can be used to obtain the corresponding React Native page code according to the test request.

[0089] In this embodiment, the second receiving module 732 can be used to perform... Figure 2 For a detailed description of the second receiving module 732, please refer to the description of step S200 shown.

[0090] The control module 733 can be used to establish communication with the headless browser 300, control the headless browser 300 to execute the React Native page code, and launch the corresponding React Native page.

[0091] In this embodiment, the control module 733 can be used to execute... Figure 2 For a detailed description of the control module 733, please refer to the description of step S300 shown.

[0092] The test module 734 can be used to perform performance testing operations on the React Native page through the headless browser 300.

[0093] In this embodiment, the test module 734 can be used to perform... Figure 2 For a detailed description of the test module 734, please refer to the description of step S400 shown.

[0094] The storage module 735 can be used to receive the page detection results sent by the headless browser 300 and store the page detection results in the performance log file.

[0095] In this embodiment, the storage module 735 can be used to execute... Figure 2For a detailed description of the storage module 735, please refer to the description of step S500 shown.

[0096] The analysis module 736 can be used to analyze the performance log file and generate a test report.

[0097] In this embodiment, the analysis module 736 can be used to perform... Figure 2 For a detailed description of the analysis module 736, please refer to the description of step S600 shown.

[0098] In summary, the page testing method, apparatus, and electronic device provided in this application can obtain React Native page code through a test request, and after establishing communication with a headless browser, control the headless browser to execute the React Native page code, launch the React Native page, and perform performance testing operations on the React Native page through the headless browser. The page test results are then stored in a performance log file, thereby generating a test report. This enables automated performance testing of React Native, proactively identifying problems, and allowing for corresponding performance optimization and improvements during business development based on the test report, thus improving problem analysis efficiency.

[0099] The above description is merely a preferred embodiment of this application and is not intended to limit this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the protection scope of this application.

[0100] It will be apparent to those skilled in the art that this application is not limited to the details of the exemplary embodiments described above, and that this application can be implemented in other specific forms without departing from the spirit or essential characteristics of this application. Therefore, the embodiments should be considered illustrative and non-limiting in all respects, and the scope of this application is defined by the appended claims rather than the foregoing description. Thus, all variations falling within the meaning and scope of equivalents of the claims are intended to be included within this application. No reference numerals in the claims should be construed as limiting the scope of the claims.

Claims

1. A page detection method, characterized in that, The method includes: Receive test request; Obtain the corresponding React Native page code based on the test request; The system establishes communication with the headless browser via the Chrome DevTools Protocol to obtain the routing URL information. Based on the routing URL information, the system launches the corresponding React Native page, which then connects to the remote debugging service via the routing URL information. Perform performance testing on the React Native page using the headless browser. Receive the page detection results sent by the headless browser and store the page detection results in the performance log file; The performance log files are analyzed and a test report is generated.

2. The page detection method according to claim 1, characterized in that, The step of receiving the page detection results sent by the headless browser and storing the page detection results in the performance log file includes: Receive a stop test command sent by the automated testing platform, and send the stop test command to the headless browser to cause the headless browser to stop testing the React Native page; Receive the page detection results sent by the headless browser and store the page detection results in the performance log file.

3. The page detection method according to claim 1, characterized in that, The steps for establishing communication with a headless browser via Chrome DevTools Protocol include: Establish communication with the Headless Chromium browser via the Chrome DevTools Protocol.

4. The page detection method according to claim 1, characterized in that, The step of receiving the test request includes: Receive an HTTP request, which includes React Native business information.

5. The page detection method according to claim 4, characterized in that, After the step of receiving an HTTP request, wherein the HTTP request includes React Native business information, the method further includes: The React Native business code is obtained based on the React Native business information, and a duplicate rendering check is performed on the React Native business code. The duplicate rendering information is then stored in the performance log file.

6. The page detection method according to claim 5, characterized in that, The steps of obtaining React Native business code based on the React Native business information, performing duplicate rendering checks on the React Native business code, and storing duplicate rendering information in a performance log file include: An abstract syntax tree for the React Native business code is generated using a code compiler; Based on the abstract syntax tree, the detection code is added to the React Native business code to perform duplicate rendering checks and obtain duplicate rendering information; The repeated rendering information is stored in a performance log file.

7. A page detection device, characterized in that, include: The first receiving module is used to receive test requests; The second receiving module is used to obtain the corresponding React Native page code according to the test request; The control module is used to establish communication with the headless browser via the Chrome DevTools Protocol, obtain routing URL information, and launch the corresponding React Native page according to the routing URL information, so that the React Native page connects to the remote debugging service through the routing URL information; The testing module is used to perform performance testing operations on the React Native page through the headless browser; The storage module is used to receive the page detection results sent by the headless browser and store the page detection results in the performance log file; The analysis module is used to analyze the performance log files and generate test reports.

8. An electronic device, characterized in that, include: Memory, used to store one or more programs; A processor, when the one or more programs are executed by the processor, implements the method as described in any one of claims 1-6.

9. A computer-readable storage medium, characterized in that, It stores a computer program, characterized in that, when the computer program is executed by a processor, it implements the method as described in any one of claims 1-6.

Images