CN113760738A - Skeleton screen generation method and device, electronic equipment and computer storage medium - Google Patents

Abstract

The embodiment of the invention provides a skeleton screen generation method, a skeleton screen generation device, electronic equipment and a computer storage medium, wherein the method comprises the following steps: when an automatic testing tool is used for accessing a browser page, a script for generating a skeleton screen is injected into the browser page; executing the following steps by calling the script: acquiring a DOM element corresponding to the browser page and a CSS corresponding to the framework screen, and acquiring an HTML file of the framework screen according to the DOM element and the CSS; and generating a skeleton screen according to the HTML file.

Description

Skeleton screen generation method, device, electronic device and computer storage medium

technical field

The present invention relates to the field of computer technology, and relates to, but is not limited to, a method, device, electronic device and computer storage medium for generating a Skeleton Screen.

Background technique

In recent years, network (WEB) technology is developing in various engineering and large-scale directions. The functions of frameworks such as Vue and React are becoming more and more powerful, and the functions of WEB are becoming more and more complex, so the project will become larger and larger. As a result, the loading speed will become slower and slower, which will lead to some user experience problems, such as a long white screen problem before the page appears.

In order to solve the experience problem caused by the long white screen time before the page is loaded, the skeleton screen is one of the optimization solutions. It feels like the page is about to load. Skeleton screens are also known as loading placeholders. It shows the general structure of the page to the user when the page data has not been loaded, and then waits for the data request to return before displaying the data content of the page, thereby replacing the skeleton screen. However, in the related art, the solution of generating the skeleton screen has high labor cost and time cost.

SUMMARY OF THE INVENTION

The embodiments of the present invention are expected to provide a technical solution for generating a skeleton screen, which can solve the problem of high labor cost and time cost of the solution for generating a skeleton screen.

An embodiment of the present invention provides a method for generating a skeleton screen, the method comprising:

When using the automated testing tool to access the browser page, the script for generating the skeleton screen is injected into the browser page;

By invoking the script, the following steps are performed: obtaining a Document Object Model (DOM) element corresponding to the browser page and a Cascading Style Sheet (CSS) corresponding to the skeleton screen, according to the DOM element and described CSS, obtain the hypertext markup language (Hyper TextMarkup Language, HTML) file of skeleton screen;

According to the HTML file, a skeleton screen is generated.

In some embodiments, the acquiring the DOM element corresponding to the browser page includes:

The DOM element used for generating the skeleton screen is acquired by traversing the browser page, and the DOM element used for generating the skeleton screen is used as the DOM element corresponding to the browser page.

In some embodiments, the HTML file of the skeleton screen is obtained according to the DOM element and the CSS, including:

The CSS is inserted into the head tag of the HTML file, and the DOM element is inserted into the body tag of the HTML file, so as to obtain the HTML file of the skeleton screen.

In some embodiments, the method further includes:

Monitor the static resource server for accessing the HTML file; when monitoring the startup of the static resource server, use an automated testing tool to access the browser page;

Correspondingly, generating the skeleton screen according to the HTML file includes: after the static resource server accesses the HTML file, generating the skeleton screen according to the HTML file accessed by the static resource server.

In some embodiments, the monitoring of the static resource server for accessing the HTML file includes: after obtaining the plug-in for representing the display parameters of the skeleton screen, monitoring the static resource server for accessing the HTML file;

Correspondingly, the method further includes: after the static resource server is started, using the plug-in to transmit the skeleton screen display parameters to the static resource server;

The generating the skeleton screen according to the HTML file accessed by the static resource server includes: generating the skeleton according to the display parameters of the skeleton screen in the static resource server and the HTML file accessed by the static resource server Screen.

In some embodiments, the plug-in is a custom plug-in packaged with a packaging tool.

An embodiment of the present invention also provides a device for generating a skeleton screen, the device comprising:

The first processing module is used to inject the script for generating the skeleton screen into the browser page when the automated test tool is used to access the browser page;

The second processing module is configured to perform the following steps by invoking the script: acquiring the DOM element corresponding to the browser page and the CSS corresponding to the skeleton screen, and obtaining the HTML of the skeleton screen according to the DOM element and the CSS document;

A generating module is used for generating a skeleton screen according to the HTML file.

In some embodiments, the second processing module, configured to obtain the DOM element corresponding to the browser page, includes:

The DOM element used for generating the skeleton screen is acquired by traversing the browser page, and the DOM element used for generating the skeleton screen is used as the DOM element corresponding to the browser page.

In some embodiments, the second processing module is configured to obtain the HTML file of the skeleton screen according to the DOM element and the CSS, including:

Insert the CSS into the head tag of the HTML file, and insert the DOM element into the body tag of the HTML file, so as to obtain the HTML file of the skeleton screen.

In some embodiments, the first processing module is further configured to monitor a static resource server for accessing HTML files; when monitoring the startup of the static resource server, use an automated testing tool to access a browser page;

Correspondingly, the generating module, configured to generate the skeleton screen according to the HTML file, includes: after the static resource server accesses the HTML file, generating the skeleton according to the HTML file accessed by the static resource server Screen.

In some embodiments, the first processing module, configured to monitor the static resource server for accessing the HTML file, includes: after obtaining the plug-in for representing the display parameters of the skeleton screen, monitoring the static resource for accessing the HTML file server;

Correspondingly, the first processing module is further configured to use the plug-in to transmit the skeleton screen display parameters to the static resource server after the static resource server is started;

The generating module is used to generate the skeleton screen according to the HTML file accessed by the static resource server, including: according to the skeleton screen display parameters in the static resource server and the HTML obtained by accessing the static resource server file to generate the skeleton screen.

In some embodiments, the plug-in is a custom plug-in packaged with a packaging tool.

An embodiment of the present invention further provides an electronic device, including a memory, a processor, and a computer program stored in the memory and running on the processor, where the processor implements any one of the above-mentioned skeleton screen generation when executing the program method.

Embodiments of the present invention also provide a computer storage medium, on which a computer program is stored, and when the computer program is executed by a processor, any one of the above-mentioned methods for generating a skeleton screen is implemented.

In the method, device, electronic device, and computer storage medium for generating a skeleton screen proposed in the embodiments of the present invention, when an automated testing tool is used to access a browser page, a script for generating a skeleton screen is injected into the browser page; The script performs the following steps: obtaining the DOM element corresponding to the browser page and the CSS corresponding to the skeleton screen, obtaining the HTML file of the skeleton screen according to the DOM element and the CSS; generating the skeleton according to the HTML file Screen.

It can be seen that, in this embodiment of the present invention, when an automated testing tool is used to access a browser page, a script can be used to execute the process of generating the HTML file of the skeleton screen, that is, the execution of the script is conducive to the automatic generation of the skeleton screen, It is beneficial to save the labor cost and time cost for generating the skeleton screen.

It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the invention.

Description of drawings

The accompanying drawings, which are incorporated into and constitute a part of this specification, illustrate embodiments consistent with the present invention, and together with the description, serve to explain the technical solutions of the present invention.

1 is a flowchart of a method for generating a skeleton screen according to an embodiment of the present invention;

2 is another flowchart of a method for generating a skeleton screen according to an embodiment of the present invention;

FIG. 3 is a schematic diagram of a composition structure of a skeleton screen generation device according to an embodiment of the present invention;

FIG. 4 is a schematic structural diagram of an electronic device according to an embodiment of the present invention.

Detailed ways

The present invention will be further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the embodiments provided herein are only used to explain the present invention, and are not intended to limit the present invention. In addition, the embodiments provided below are part of the embodiments for implementing the present invention, rather than providing all the embodiments for implementing the present invention. In the case of no conflict, the technical solutions described in the embodiments of the present invention can be combined arbitrarily. implement.

It should be noted that, in the embodiments of the present invention, the terms "comprising", "comprising" or any other variations thereof are intended to cover non-exclusive inclusion, so that a method or device including a series of elements not only includes the explicitly stated elements, but also other elements not expressly listed or inherent to the implementation of the method or apparatus. Without further limitation, an element defined by the phrase "comprises a..." does not preclude the presence of additional related elements (eg, steps in a method or a device) in which the element is included. A unit in an apparatus, for example, a unit may be part of a circuit, part of a processor, part of a program or software, etc.).

For example, the method for generating a skeleton screen provided by the embodiment of the present invention includes a series of steps, but the method for generating a skeleton screen provided by the embodiment of the present invention is not limited to the described steps. Similarly, the device for generating a skeleton screen provided by the embodiment of the present invention A series of modules are included, but the apparatus for generating a skeleton screen provided by the embodiment of the present invention is not limited to including the modules explicitly described, and may also include modules that need to be set for obtaining relevant information or processing based on the information.

The term "and/or" in this article is only an association relationship to describe associated objects, indicating that there can be three kinds of relationships, for example, C and/or D, which can mean: C alone exists, C and D exist simultaneously, and C and D exist alone D these three cases. Additionally, the term "at least one" herein refers to any one of a plurality or any combination of at least two of a plurality.

In the related art, there are mainly two schemes for generating a skeleton screen. The first scheme is to completely design a set of skeleton screens with the same structure as a page, implement HTML files and CSS by handwriting, and realize a set of skeleton screens that highly present the page structure. Structure; the second solution: the skeleton style is implemented through DOM pseudo-elements, and the dynamic switching between the skeleton and the page is realized by manipulating the style.

The advantages of the first solution are: high degree of restoration and good user experience, but the disadvantage is that the flexibility is relatively poor. When the style or layout of the page changes, it is also necessary to modify the style and layout of the skeleton screen, resulting in repeated mechanical labor. Work and later changes and maintenance costs are relatively large.

The advantage of the second scheme is that it is simple to develop, has a high degree of customization, and is not bloated; the disadvantage is that it has a low degree of automation and requires higher coordination requirements.

In addition, most schemes for generating skeleton screens in the related art depend on front-end frameworks such as Vue or React, that is, the degree of coupling with front-end frameworks such as Vue or React is relatively high, and the versatility is relatively low.

In view of the above technical problems, embodiments of the present invention provide a method, device, electronic device, and computer storage medium for generating a skeleton screen. Embodiments of the present invention may be implemented based on terminals and/or servers, which may be thin clients, thick clients, handheld or laptop devices, microprocessor-based systems, set-top boxes, programmable consumer electronics, network personal computers, small computer systems, etc. The server can be a small computer system, a large computer system, a distributed cloud computing technology environment including any of the above, and the like.

Electronic devices, such as servers, may be described in the general context of computer system-executable instructions, such as program modules, being executed by a computer system. Generally, program modules may include routines, programs, object programs, components, logic, data structures, etc. that perform particular tasks or implement particular abstract data types. Computer systems/servers may be implemented in distributed cloud computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed cloud computing environment, program modules may be located on local or remote computing system storage media including storage devices.

FIG. 1 is a flowchart of a method for generating a skeleton screen according to an embodiment of the present invention. As shown in FIG. 1 , the flowchart may include:

Step 101: When using the automated testing tool to access the browser page, inject the script for generating the skeleton screen into the browser page.

In some embodiments, the above-mentioned automated testing tool may be Puppeteer, Selenium or other automated testing tools.

Puppeteer is a Node library that uses the tool DevTools to provide a powerful Application Programming Interface (API) to control headless browsers, or it can be set to control a full browser (non-headless) model).

Selenium is an automated testing tool for web applications. Selenium can run directly in the browser. The main functions of Selenium include: testing compatibility with browsers, creating regression tests to verify software functions and user requirements.

In some embodiments, the browser page may be a page of a headless browser or a page of a browser in non-headless mode. Here, a headless browser is a browser without an operation interface, which is often used for automated testing of web pages, Using the API it provides, operation instructions can be executed automatically.

In some embodiments, the script for generating the skeleton screen may be a js (javascript) script or other types of scripts; in some embodiments, when the script for generating the skeleton screen is a js script, the page.addScriptTag method may be used to add the js script Injected into the browser page.

Step 102: Execute the following steps by calling the script: obtain the DOM element corresponding to the browser page and the CSS corresponding to the skeleton screen, and obtain the HTML file of the skeleton screen according to the DOM element and the CSS.

In this embodiment of the present invention, the DOM is a standard programming interface for processing extensible markup languages, and is a platform- and language-independent API that can dynamically access programs and scripts to update their content, structure, and document style. The DOM is a tree-based API document that requires the entire document to be represented in memory during processing.

CSS is a computer language used to express HTML or Extensible Markup Language (Extensible Markup Language, XML) and other file styles. CSS can not only statically modify web pages, but also dynamically format various elements of web pages with various scripting languages. change. CSS can perform pixel-level precise control over the layout of element positions in web pages, supports almost all font size styles, and has the ability to edit web page objects and model styles.

In some embodiments, the CSS corresponding to the skeleton screen may be the CSS of the accessed browser page.

In some embodiments, the DOM elements used for generating the skeleton screen may be obtained by traversing the browser page, and the DOM elements used for generating the skeleton screen may be used as DOM elements corresponding to the browser page.

Exemplarily, the DOM elements used to generate the skeleton screen can be obtained by executing the page.evaluate method in the browser page. Here, the page.evaluate method will recursively traverse to obtain the elements to be replaced by the skeleton in the browser page (that is, use DOM elements for generating skeleton screens), and then add class names to these elements for style coverage, thereby replacing them with skeleton screen elements.

It can be seen that, in the embodiment of the present invention, the DOM elements corresponding to the browser page can be obtained relatively easily and comprehensively by traversing the browser page.

In the embodiment of the present invention, the HTML file of the skeleton screen is a static HTML file.

In some embodiments, the above CSS may be inserted into the head tag of the HTML file, and DOM elements may be inserted into the body tag of the HTML file, so as to obtain the HTML file of the skeleton screen.

Exemplarily, the above CSS can be inserted into the head tag of the HTML file by means of a style tag.

It can be seen that the embodiment of the present invention can directly obtain the HTML file of the skeleton screen by inserting corresponding information into the head tag and the body tag of the HTML file, which is easy to implement.

Step 103: Generate a skeleton screen according to the HTML file.

In the embodiment of the present invention, after the HTML file of the skeleton screen is acquired, the skeleton screen may be presented in the browser page based on the HTML file of the skeleton screen before the loading in the browser page is completed.

In practical applications, steps 101 to 103 may be implemented based on a processor of an electronic device, and the above-mentioned processor may be an application specific integrated circuit (ASIC), a digital signal processor (DSP), a digital Signal processing device (Digital Signal Processing Device, DSPD), Programmable Logic Device (Programmable Logic Device, PLD), Field Programmable Gate Array (Field Programmable Gate Array, FPGA), Central Processing Unit (Central Processing Unit, CPU), controller, At least one of a microcontroller and a microprocessor.

It can be seen that, in this embodiment of the present invention, when an automated testing tool is used to access a browser page, a script can be used to execute the process of generating the HTML file of the skeleton screen, that is, the execution of the script is conducive to the automatic generation of the skeleton screen, It is beneficial to save the labor cost and time cost for generating the skeleton screen.

The embodiment of the present invention can realize automatic injection to generate a high-quality skeleton screen in combination with automated testing tools such as Puppeteer, which can reduce the time and labor costs brought by the development and later maintenance of the skeleton screen, and can generate an effect comparable to the handwritten skeleton screen; Compared with the above-mentioned first solution in the related art, the development efficiency of the skeleton screen is improved, and some meaningless mechanical labor is reduced. Compared with the solution, about 70% of man-hours can be saved; the skeleton screen generation method of the embodiment of the present invention has almost no post-maintenance cost, and compared with the above-mentioned first solution, the post-maintenance efficiency is improved by nearly 100%.

Further, the embodiment of the present invention can be applied to multi-terminal applications such as h5 (HTML5) and WeChat applet, is not attached to a single front-end framework, improves versatility, can reduce development costs such as manpower and time for users of different frameworks, and is convenient Maintenance and upgrades.

In some embodiments, a static resource server for accessing HTML files can also be monitored; when the startup of the static resource server is monitored, an automated testing tool is used to access the browser page;

Correspondingly, according to the HTML file, an implementation manner of generating the skeleton screen may include: after the static resource server accesses the HTML file, generating the skeleton screen according to the HTML file accessed by the static resource server.

In this embodiment of the present invention, the static resource server may be a server that executes a local node service.

It can be seen that in the embodiment of the present invention, by monitoring the static resource server, when the static resource server is started, an automated test tool is used to realize automatic access to the browser page, and further, when the static resource server is started, the skeleton can be automatically generated by executing a script That is, when the static resource server is started, the skeleton screen can be automatically generated, which improves the automation degree of the method for generating the skeleton screen.

In some embodiments, the implementation manner of monitoring the static resource server for accessing the HTML file may include: after obtaining the plug-in for representing the display parameters of the skeleton screen, monitoring the static resource server for accessing the HTML file.

Here, the display parameters of the skeleton screen may be background colors or other parameters of elements of the skeleton screen; the plug-in used to represent the display parameters of the skeleton screen may be a plugin plug-in.

In some embodiments, after the static resource server is started, the above-mentioned plug-in can be used to transfer the display parameters of the skeleton screen to the static resource server;

Correspondingly, generating the skeleton screen according to the HTML file accessed by the static resource server may include: generating the skeleton screen according to the display parameters of the skeleton screen in the static resource server and the HTML file accessed by the static resource server.

It can be seen that in this embodiment of the present invention, the skeleton screen display parameters can be transferred to the static resource server through a plug-in, so that the skeleton screen can be displayed according to the skeleton screen display parameters. Since the skeleton screen display parameters can be preset according to user requirements, the present invention The embodiment may display the skeleton screen according to user requirements.

In some embodiments, the above plug-in is a custom plug-in packaged in combination with a packaging tool.

Exemplarily, the packaging tool can be Webpack, gulp, rollup and other tools. The core concept of Webpack is a JavaScript static resource bundler. Its main goal is to bundle js files together. The bundled files are used in browsers. It is also capable of converting, packaging and other functions. Gulp is an automated build tool that developers can use to automate common tasks during project development. rollup is a JavaScript module bundler that compiles small blocks of code into large, complex code

The embodiment of the present invention can achieve the engineering and configurability of generating a skeleton screen scheme by combining a packaging tool to customize an extension plug-in, thereby reducing the implementation difficulty and configuration cost; the embodiment of the present invention can form a plug-in through packaging, Compared with the second solution above, the skeleton screen is automatically generated by monitoring the static resource server, which improves the automation degree of the solution for generating the skeleton screen.

The method for generating a skeleton screen according to an embodiment of the present invention will be further described below with reference to the accompanying drawings.

Fig. 2 is another flowchart of a method for generating a skeleton screen according to an embodiment of the present invention. As shown in Fig. 2, the flowchart may include:

Step 201: Start the static resource server.

Exemplarily, in order to better integrate with an actual application development project or a web page development project, in this embodiment of the present invention, webpack can be used to package a custom plugin in the page, and the page packaging event can be monitored. For example, the page packaging event can be monitored. Complete the event compiler.hooks.done.tap to monitor and register; after the page is packaged, start the static resource server; the static resource server here is used to execute the local node service.

In the embodiment of the present invention, the packaged file can be accessed by starting the static resource server, and at this time, the skeleton screen display parameters can be passed into the started node service through the plugin.

Step 202: Use Puppeteer to access the browser page.

Exemplarily, after starting the static resource server, a chrome headless browser can be started through Puppeteer, and the browser page can be accessed by opening a new tab; in one implementation, it is also necessary to configure and adapt The size of the generated skeleton screen. In this way, after acquiring the HTML file of the skeleton screen, the skeleton screen can be presented according to the HTML file and the size of the configured skeleton screen.

Step 203: Inject the script of the skeleton screen into the browser page for easy invocation.

Step 204 : traverse and obtain the elements in the browser page to be replaced by the skeleton, and replace these elements with the skeleton screen elements.

Step 205: Insert the DOM element of the skeleton screen element and the CSS corresponding to the skeleton screen into the HTML file to obtain the HTML file of the skeleton screen.

Here, the DOM element of the skeleton screen element is the DOM element corresponding to the above browser page.

Step 206: Before the loading in the browser page is completed, the skeleton screen is presented in the browser page based on the HTML file of the skeleton screen.

The implementation manners of steps 203 to 206 have been described in the foregoing embodiments, and are not repeated here.

On the basis of the method for generating a skeleton screen proposed in the foregoing embodiments, an embodiment of the present invention further provides a device for generating a skeleton screen.

FIG. 3 is a schematic diagram of the composition structure of a device for generating a skeleton screen according to an embodiment of the present invention. As shown in FIG. 3 , the device may include:

The first processing module 301 is configured to inject a script for generating a skeleton screen into the browser page when an automated testing tool is used to access the browser page;

The second processing module 302 is configured to perform the following steps by invoking the script: obtaining the DOM element corresponding to the browser page and the CSS corresponding to the skeleton screen, and obtaining the skeleton screen according to the DOM element and the CSS. HTML file;

The generating module 303 is configured to generate a skeleton screen according to the HTML file.

In some embodiments, the second processing module 302, configured to obtain the DOM element corresponding to the browser page, includes:

The DOM element used for generating the skeleton screen is acquired by traversing the browser page, and the DOM element used for generating the skeleton screen is used as the DOM element corresponding to the browser page.

In some embodiments, the second processing module 302 is configured to obtain the HTML file of the skeleton screen according to the DOM element and the CSS, including:

Insert the CSS into the head tag of the HTML file, and insert the DOM element into the body tag of the HTML file, so as to obtain the HTML file of the skeleton screen.

In some embodiments, the first processing module 301 is further configured to monitor a static resource server for accessing HTML files; when monitoring the startup of the static resource server, use an automated testing tool to access a browser page;

Correspondingly, the generating module 303, configured to generate the skeleton screen according to the HTML file, includes: after the static resource server accesses the HTML file, generating the skeleton screen according to the HTML file accessed by the static resource server Skeleton screen.

In some embodiments, the first processing module 301, configured to monitor a static resource server for accessing HTML files, includes: after obtaining a plug-in for representing display parameters of the skeleton screen, monitoring static resource servers for accessing HTML files resource server;

Correspondingly, the first processing module 301 is further configured to use the plug-in to transmit the skeleton screen display parameters to the static resource server after the static resource server is started;

The generating module 303 is configured to generate the skeleton screen according to the HTML file accessed by the static resource server, including: according to the display parameters of the skeleton screen in the static resource server and the data obtained by accessing the static resource server. The HTML file generates the skeleton screen.

In some embodiments, the plug-in is a custom plug-in packaged with a packaging tool.

The above-mentioned first processing module 301, the second processing module 302 and the generating module 303 can all be implemented by a processor located in an electronic device, and the above-mentioned processor is an ASIC, DSP, DSPD, PLD, FPGA, CPU, controller, microcontroller, at least one of the microprocessors.

In addition, each functional module in this embodiment may be integrated into one processing unit, or each unit may exist physically alone, or two or more units may be integrated into one unit. The above-mentioned integrated units can be implemented in the form of hardware, or can be implemented in the form of software function modules.

If the integrated unit is implemented in the form of a software functional module and is not sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this embodiment is essentially or The part that contributes to the prior art or the whole or part of the technical solution can be embodied in the form of a software product, the computer software product is stored in a storage medium, and includes several instructions for making a computer device (which can be It is a personal computer, a server, or a network device, etc.) or a processor (processor) that executes all or part of the steps of the method described in this embodiment. The aforementioned storage medium includes: U disk, removable hard disk, Read Only Memory (ROM), Random Access Memory (Random Access Memory, RAM), magnetic disk or optical disk and other media that can store program codes.

Specifically, the computer program instructions corresponding to a method for generating a skeleton screen in this embodiment can be stored on a storage medium such as an optical disk, a hard disk, a U disk, etc. When the computer corresponding to a method for generating a skeleton screen in the storage medium When the program instructions are read or executed by an electronic device, any one of the skeleton screen generation methods in the foregoing embodiments is implemented.

Based on the same technical idea of the foregoing embodiments, see FIG. 4 , which shows an electronic device 40 provided by an embodiment of the present invention, which may include: a memory 401 , a processor 402 , and a memory 401 and a processor 402 A computer program running on; wherein,

memory 401 for storing computer programs and data;

The processor 402 is configured to execute the computer program stored in the memory, so as to implement any one of the methods for generating a skeleton screen in the foregoing embodiments.

In practical applications, the above-mentioned memory 401 may be a volatile memory (volatile memory), such as RAM; or a non-volatile memory (non-volatile memory), such as ROM, flash memory (flash memory), hard disk (Hard Disk memory) Drive, HDD) or solid-state drive (Solid-State Drive, SSD); or a combination of the above types of memory, and provide instructions and data to the processor 402.

The above-mentioned processor 402 may be at least one of ASIC, DSP, DSPD, PLD, FPGA, CPU, controller, microcontroller, and microprocessor.

In some embodiments, the functions or modules included in the apparatus provided in the embodiments of the present invention may be used to execute the methods described in the above method embodiments. For specific implementation, reference may be made to the above method embodiments. For brevity, here No longer.

The above description of the various embodiments tends to emphasize the differences between the various embodiments, and the similarities or similarities can be referred to each other. For the sake of brevity, details are not repeated herein.

The methods disclosed in each method embodiment provided in this application can be combined arbitrarily without conflict to obtain a new method embodiment.

The features disclosed in each product embodiment provided in this application can be combined arbitrarily without conflict to obtain a new product embodiment.

The features disclosed in each method or device embodiment provided in this application can be combined arbitrarily without conflict to obtain a new method embodiment or device embodiment.

From the description of the above embodiments, those skilled in the art can clearly understand that the method of the above embodiment can be implemented by means of software plus a necessary general hardware platform, and of course can also be implemented by hardware, but in many cases the former is better implementation. Based on this understanding, the technical solutions of the present invention can be embodied in the form of software products in essence or the parts that make contributions to the prior art, and the computer software products are stored in a storage medium (such as ROM/RAM, magnetic disk, CD), including several instructions to make a terminal (which may be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) execute the methods described in the various embodiments of the present invention.

The embodiments of the present invention have been described above in conjunction with the accompanying drawings, but the present invention is not limited to the above-mentioned specific embodiments, which are merely illustrative rather than restrictive. Under the inspiration of the present invention, without departing from the scope of protection of the present invention and the claims, many forms can be made, which all belong to the protection of the present invention.

Claims (10)

1. A skeleton screen generation method, comprising:

when an automatic testing tool is used for accessing a browser page, a script for generating a skeleton screen is injected into the browser page;

executing the following steps by calling the script: acquiring a Document Object Model (DOM) element corresponding to the browser page and a Cascading Style Sheet (CSS) corresponding to the skeleton screen, and acquiring a hypertext markup language (HTML) file of the skeleton screen according to the DOM element and the CSS;

and generating a skeleton screen according to the HTML file.

2. The method of claim 1, wherein the obtaining the DOM element corresponding to the browser page comprises:

and acquiring a DOM element used for generating a skeleton screen by traversing the browser page, and taking the DOM element used for generating the skeleton screen as the DOM element corresponding to the browser page.

3. The method according to claim 1 or 2, wherein obtaining an HTML file of a skeleton screen according to the DOM element and the CSS comprises:

and inserting the CSS into a head tag of the HTML file, and inserting the DOM element into a body tag of the HTML file to obtain the HTML file of the skeleton screen.

4. The method of claim 1, further comprising:

monitoring a static resource server for accessing the HTML file; when the static resource server is monitored to be started, an automatic testing tool is used for accessing a browser page;

correspondingly, the generating a skeleton screen according to the HTML file includes: and after the static resource server accesses the HTML file, generating the skeleton screen according to the HTML file obtained by the static resource server.

5. The method of claim 4, wherein listening to a static resource server for accessing HTML files comprises: after a plug-in used for representing a framework screen display parameter is obtained, a static resource server used for accessing an HTML file is monitored;

accordingly, the method further comprises: after the static resource server is started, the framework screen display parameters are transmitted to the static resource server by using the plug-in;

the generating the skeleton screen according to the HTML file accessed by the static resource server comprises: and generating the skeleton screen according to the skeleton screen display parameters in the static resource server and an HTML file accessed by the static resource server.

6. The method of claim 5, wherein the plug-in is a custom plug-in packaged in conjunction with a packaging tool.

7. A skeletal screen generation apparatus, the apparatus comprising:

the system comprises a first processing module, a second processing module and a third processing module, wherein the first processing module is used for injecting a script for generating a skeleton screen into a browser page when the browser page is accessed by an automatic testing tool;

a second processing module for executing the following steps by calling the script: acquiring a Document Object Model (DOM) element corresponding to the browser page and a Cascading Style Sheet (CSS) corresponding to the skeleton screen, and acquiring a hypertext markup language (HTML) file of the skeleton screen according to the DOM element and the CSS;

and the generating module is used for generating a skeleton screen according to the HTML file.

8. The apparatus according to claim 7, wherein the second processing module is configured to obtain a DOM element corresponding to the browser page, and includes:

and acquiring a DOM element used for generating a skeleton screen by traversing the browser page, and taking the DOM element used for generating the skeleton screen as the DOM element corresponding to the browser page.

9. An electronic device comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, wherein the processor implements the skeletal screen generation method of any of claims 1 to 6 when executing the program.

10. A computer storage medium having a computer program stored thereon, wherein the computer program, when executed by a processor, implements the skeletal screen generation method of any of claims 1 to 6.

Images