CN117093798A

CN117093798A - Rendering abnormality detection method and device, electronic equipment and storage medium

Info

Publication number: CN117093798A
Application number: CN202311040545.0A
Authority: CN
Inventors: 王永红; 赵英超
Original assignee: Tencent Technology Beijing Co Ltd
Current assignee: Tencent Technology Beijing Co Ltd
Priority date: 2023-08-17
Filing date: 2023-08-17
Publication date: 2023-11-21

Abstract

The application relates to the technical field of data processing, and provides a rendering abnormality detection method, a rendering abnormality detection device, electronic equipment and a storage medium, which are used for realizing high-precision detection of page rendering abnormality. In the method, a client generates a virtual view tree of a target page based on source codes of the target page, renders the virtual view tree to obtain a real view tree, and uploads the real view tree to a server. The server generates a reference view tree from the source code of the target page. The real tree graph tree contains first attribute information of at least one first view element presented in the target page, and the reference view tree contains second attribute information of at least one second view element set in source code of the target page. The server obtains tree similarity according to at least one first attribute information contained in the real view tree and at least one second attribute information contained in the reference view tree, and then obtains a rendering abnormality identification result of the target page with higher detection precision according to the tree similarity.

Description

Rendering abnormality detection method and device, electronic equipment and storage medium

Technical Field

The application relates to the technical field of data processing, and particularly discloses a rendering anomaly detection method, a rendering anomaly detection device, electronic equipment and a storage medium.

Background

When using the object to browse each page by using the application program, the application program constructs a virtual View Tree (Virtual View Tree) according to the source code of the target page in the page rendering stage, converts the virtual View Tree into a Real View Tree (Real View Tree) by a rendering engine, and finally generates the target page based on the Real View Tree and presents the target page to the using object.

During the rendering of the virtual view tree, there may be a data rendering error, resulting in that attribute information (e.g., color, size, position, etc.) of view elements (e.g., text boxes, buttons, status bars, etc.) set in the source code is inconsistent with attribute information of view elements stored in the real view tree obtained by rendering. This causes the view elements presented to the user object by the target page to deviate from the setting of the source code.

For example, the source code of the login interface sets the account input box in a centered position on the page, and rendering errors may result in the account input box in the target page not being presented centrally, or in the account input box not being presented.

However, in the related art, there is no effective method for solving the above problem, which causes that the problem in the process of rendering the target page by the application program through the rendering engine cannot be found in time, and once the error occurs in the core view element, the function of the application program may not be used.

For example, account input boxes are lost during rendering, resulting in the inability to log in using objects. As another example, the color of the function button is erroneously rendered to a background color, resulting in difficulty in detection of the use object.

In view of this, it is important how to determine that the actual display effect after page rendering deviates from the setting of the source code.

Disclosure of Invention

The embodiment of the application provides a rendering anomaly detection method, a rendering anomaly detection device, electronic equipment and a storage medium, which are used for improving the development efficiency of services and supporting various development languages.

In a first aspect, an embodiment of the present application provides a rendering exception detection method, applied to a server, including:

receiving a real view tree uploaded by a client; the real view tree is obtained by the client responding to page browsing operation triggered by an object aiming at a target application, generating a virtual view tree based on source codes of target pages, and rendering the virtual view tree; the real view tree comprises first attribute information of at least one first view element, wherein the first view element is: view elements presented in a target page generated based on the real view tree;

Generating a reference view tree based on the source code of the target page; wherein the reference view tree contains second attribute information of at least one second view element; the second view element is: view elements set in source codes of the target pages;

and obtaining the tree similarity of the real view tree and the reference view tree based on the obtained at least one first attribute information and at least one second attribute information, and obtaining a rendering abnormality identification result of the target page according to the tree similarity.

In a second aspect, an embodiment of the present application provides a rendering anomaly detection method, applied to a client, including:

responding to page browsing operation, generating a virtual view tree based on source codes of target pages, and rendering the virtual view tree to obtain a real view tree; the real view tree comprises first attribute information of at least one first view element, and the first view element is: view elements presented in a target page generated based on the real view tree;

uploading the real view tree to a server, so that the server generates a reference view tree according to the source code of the target page, and obtaining a rendering abnormality identification result of the target page according to the tree similarity of the real view tree and the reference view tree.

In a third aspect, an embodiment of the present application provides a rendering anomaly detection apparatus, including:

a receiving module configured to execute a real view tree uploaded by a receiving client; the real view tree is obtained by the client responding to page browsing operation triggered by an object aiming at a target application, generating a virtual view tree based on source codes of target pages, and rendering the virtual view tree; the real view tree comprises first attribute information of at least one first view element, wherein the first view element is: view elements presented in a target page generated based on the real view tree;

a generation module configured to perform generation of a reference view tree based on source code of the target page; wherein the reference view tree contains second attribute information of at least one second view element; the second view element is: view elements set in source codes of the target pages;

and the identification module is configured to execute the steps of obtaining the tree similarity of the real view tree and the reference view tree based on the obtained at least one first attribute information and at least one second attribute information, and obtaining the rendering abnormality identification result of the target page according to the tree similarity.

In a fourth aspect, an embodiment of the present application provides a rendering anomaly detection apparatus, including:

the rendering module is configured to execute a source code which responds to page browsing operation, generate a virtual view tree based on a target page, and render the virtual view tree to obtain a real view tree; the real view tree comprises first attribute information of at least one first view element, and the first view element is: view elements presented in a target page generated based on the real view tree;

and the transmission module is configured to upload the real view tree to a server so that the server generates a reference view tree according to the source code of the target page, and obtains a rendering abnormality identification result of the target page according to the tree similarity of the real view tree and the reference view tree.

In a fifth aspect, an embodiment of the present application provides an electronic device, including a processor, a memory, and a display, where the display provides a command line interface for receiving a triggered operation, and the memory stores a computer program, and when the computer program is executed by the processor, causes the processor to execute the steps of any one of the rendering anomaly detection methods described above.

In a sixth aspect, an embodiment of the present application provides a computer-readable storage medium having stored thereon computer-executable instructions that, when executed by a computer device, implement the steps of any of the above-described rendering anomaly detection methods.

In a seventh aspect, an embodiment of the present application provides a computer program product, including a computer program, which when executed by a computer device implements the steps of any of the above-mentioned rendering anomaly detection methods.

The beneficial effects of the application are as follows:

the embodiment of the application provides a rendering anomaly detection method, a rendering anomaly detection device, electronic equipment and a storage medium. Stored within the real view tree is first attribute information for a first view element that the target page presents when presented at the front end.

After receiving the real view tree, the server generates a reference view tree according to the source code of the target page, wherein the reference view tree can be regarded as the real view tree obtained in an ideal state (i.e. no abnormality exists in rendering). Stored within the reference view tree is second attribute information for a second view element configured in the target page source code. The attribute information of the view element can specifically reflect the rendering effect of the view element, so that the tree similarity between the real view tree and the reference view tree can be obtained by performing similarity calculation on the first attribute information of the first view element stored in the real view tree and the second attribute information of the second view element stored in the reference view tree. The tree similarity obtained through the process can reflect the difference between the source code configuration of the target page displayed at the front end and the target page from the angle of the whole page, so that the rendering anomaly identification result of the target page with higher detection precision can be obtained according to the tree similarity.

Additional features and advantages of the application will be set forth in the description which follows, and in part will be obvious from the description, or may be learned by practice of the application. The objectives and other advantages of the application will be realized and attained by the structure particularly pointed out in the written description and claims thereof as well as the appended drawings.

Drawings

In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings that are needed in the description of the embodiments will be briefly described below, it will be apparent that the drawings in the following description are only some embodiments of the present application, and that other drawings can be obtained according to these drawings without inventive effort for a person skilled in the art.

FIG. 1 is a schematic diagram of rendering anomalies of a landing page according to an embodiment of the present application;

fig. 2 is a schematic diagram of a product display page according to an embodiment of the present application;

fig. 3 is a schematic diagram of abnormal rendering of a product display page according to an embodiment of the present application;

FIG. 4 is another schematic diagram of abnormal rendering of a product display page according to an embodiment of the present application;

FIG. 5 is an application scene graph for rendering anomaly detection provided by an embodiment of the present application;

FIG. 6 is a timing diagram of a rendering anomaly detection process according to an embodiment of the present application;

FIG. 7 is a schematic diagram of a virtual view tree according to an embodiment of the present application;

FIG. 8 is a schematic diagram of a real view tree provided by an embodiment of the present application;

FIG. 9 is a schematic diagram of JSON format expression of a real tree node provided by an embodiment of the present application;

FIG. 10 is a schematic diagram of a reference tree structure according to an embodiment of the present application;

FIG. 11 is a diagram of a reference view tree provided by an embodiment of the present application;

fig. 12 is a schematic diagram of comparing attribute information of tree nodes according to an embodiment of the present application;

FIG. 13 is a schematic diagram of adding component names to a second view element according to an embodiment of the present application;

fig. 14 is a block diagram of a rendering anomaly detection apparatus according to an embodiment of the present application;

FIG. 15 is a block diagram of another rendering anomaly detection apparatus according to an embodiment of the present application;

fig. 16 is a block diagram of an electronic device according to an embodiment of the present application.

Detailed Description

For the purpose of making the objects, technical solutions and advantages of the embodiments of the present application more apparent, the technical solutions of the present application will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present application, and it is apparent that the described embodiments are some embodiments of the technical solutions of the present application, but not all embodiments. All other embodiments, based on the embodiments described in the present document, which can be obtained by a person skilled in the art without any creative effort, are within the scope of protection of the technical solutions of the present application.

Some of the concepts involved in the embodiments of the present application are described below.

VVT (Virtual View Tree) virtual view tree: a virtual view tree is an intermediate representation of the application program for each view element in the page. In many development frameworks (e.g., exact Native, etc.), virtual view trees use Virtual DOM (or Virtual DOM) technology to represent pages in memory, which can reduce the performance overhead in the actual rendering process and shorten the page re-rendering time.

RVT (Real View Tree) true view tree: the real view tree is an organization of view elements presented in the front-end presented page, as compared to the virtual view tree. In a browser environment, the real view tree corresponds to the DOM tree that is actually rendered. Whereas in a native application, the real view tree corresponds to a native component tree. The rendering engine is responsible for converting the virtual view tree into a real view tree and performing front-end display on the page by taking the real view tree as a reference.

JSON (JavaScript Object Notation) lightweight data exchange formats: JSON has good readability and is convenient for fast writing. Data exchange may be performed between different platforms. The method adopts a text format which has high compatibility and is completely independent of language, and simultaneously has the behavior similar to the habit (such as C, C++, C#, java, javaScript, perl, python and the like) system of a C language. These characteristics make JSON an ideal data exchange language.

XML (Extensible Markup Languag) extensible markup language format: XML is a markup language used to tag electronic files to make them structured, can be used to tag data, define data types, and supports a larger data volume than JSON. Therefore, the capability of XML to describe data is better than JSON from the point of view of data description, but the transmission speed of XML is slower than that of JSON from the point of view of data transmission.

View element: the view elements are various page components that make up a graphical browsing page (GUI). It contains a simple browse page (UI) component: such as buttons, text boxes, pictures, sliders, etc., and complex UI components: drop down menus, scroll views, dialog boxes, etc.

View hierarchy: a tree structure, also referred to as a view tree, is used to reveal parent-child relationships and sibling relationships between nodes within the view tree. The view hierarchy can be used to identify the positional relationship of view elements in the viewed page.

The following briefly describes the design concept of the embodiment of the present application:

when the application program responds to the click operation of the using object to start browsing the page, an intermediate state representation, namely a virtual view tree, of the page in the rendering process is generated according to the source code of the browsing page. And the rendering engine converts the virtual view tree into a real view tree based on preset rendering logic, and finally generates and presents the browsing page browsed by the object according to the attribute information of each view element recorded in the real view tree.

In the rendering process of converting the virtual view tree into the real view tree, the problem of partial data rendering errors may occur. The occurrence of such a problem may cause the attribute information of the view element set in the source code of the page to be inconsistent with the attribute information of the view element presented in the browsed page generated based on the real view tree.

For example, three view elements of an account input box, a password input box and a login button are arranged in the source code of a login page of an application program. When no abnormality occurs in rendering, the login page 1 displayed at the front end should be shown in the left side of fig. 1, that is, the aforementioned view elements are presented in the login page with attribute information (such as a preset size, a preset position, a preset color, etc.) configured in the source code of the login page. However, when the rendering is abnormal, deviation of part of attribute information and source code may occur, and even part of view elements are not successfully rendered. For example, in the login page 2 shown on the right side of fig. 1, which is shown at the front end when rendering is abnormal, the account input box is not shown centrally in the configuration in the source code, and the login button is not successfully rendered into the page. It follows that the occurrence of rendering anomalies can greatly impact the user's use experience.

At present, the solution to the rendering exception mainly relies on manual auditing, specifically, after programming is finished, related personnel start each functional page of an application program to detect the front-end display result of the page. When the style of page presentation does not conform to the programming requirements (i.e., configuration in source code), it is determined that there is an exception to the rendering logic of the page.

In practical applications, however, the application program contains a large number of pages, and some pages, such as detailed descriptions and product displays, contain a large number of view elements.

For example, FIG. 2 shows a product display page for a product class application. A number of product display columns are included in the product display page shown in fig. 2, and each product display column is also associated with a corresponding purchase button, display button for product details, collection button, and the like.

In the face of such a large number of view elements, when rendering anomalies exist for only a small portion of the view elements, it is difficult to find only by way of human auditing. For example, in the product display page shown in fig. 3, rendering anomalies occur only in the size of a certain product display column. Or for example only a text picture of a certain product display column in the product display page shown in fig. 4 is not successfully rendered.

In view of the above, the embodiments of the present application provide a rendering anomaly detection method, a rendering anomaly detection device, an electronic device, and a storage medium. In the method, when a target page is started by a target application on a client (such as a mobile phone, a tablet computer, a desktop computer and other intelligent equipment) through a use object, the client generates a virtual view tree of the target page based on a source code of the target page, renders the virtual view tree to obtain a corresponding real view tree, and then uploads the real view tree to a server. After receiving the real view tree, the server generates a reference view tree from the source code of the target page. The real view tree includes first attribute information of at least one first view element, where the first view element is: view elements presented in a target page generated based on a real view tree. The reference view tree contains second attribute information of at least one second view element; the second view element is: view elements set in the source code of the target page.

Further, according to the first attribute information of the first view element stored in the real view tree and the second attribute information of the second view element stored in the reference view tree, the tree similarity between the real view tree and the reference view tree is obtained. The reference view tree can be regarded as a real view tree with no rendering abnormality, so that the rendering abnormality recognition result of the target page can be accurately obtained according to the similarity between the two trees.

The preferred embodiments of the present application will be described below with reference to the accompanying drawings of the specification, it being understood that the preferred embodiments described herein are for illustration and explanation only, and not for limitation of the present application, and that the embodiments of the present application and the features of the embodiments may be combined with each other without conflict.

Fig. 5 is a schematic diagram of an application scenario according to an embodiment of the present application. Included in the application scenario diagram are a usage object 501, a client 502, and a server 503.

In some possible embodiments, communication between the client 502 and the server 503 may be via a wired network or a wireless network.

In an embodiment of the present application, the client 502 includes, but is not limited to, a personal computer, a notebook computer, a mobile phone, a tablet, an intelligent voice interaction device, an intelligent home appliance, a vehicle-mounted terminal, and the like. The server 503 is a background server of a target application installed on the client 502, specifically, the server 503 may be a distributed system formed by a plurality of physical servers, or may be a cloud server that provides cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN (Content Delivery Network ), and basic cloud computing services such as big data and an artificial intelligence platform.

In the application scenario shown in fig. 5, when the application program stored on the client 502 is used by the use object 501, if the application program used is a target application that needs to perform abnormal rendering detection, after determining that the use object triggers a functional component for enabling a target page of the target application, the client 502 generates a virtual view tree of the target page according to a source code of the target page, and uploads a real view tree obtained by rendering the virtual view to the server 503. After receiving the real view tree, the server 503 constructs a reference view tree obtained when the rendering of the target page is free of anomalies according to the source code of the target page, and then the server 503 determines a rendering anomaly identification result of the target page according to the tree similarity between the real view tree and the reference view tree, so that the rendering anomaly detection for the target page is realized.

It should be noted that, fig. 5 is only an example of an application scenario for facilitating understanding of the technical solution of the present application, and the number of the clients 502 and the servers 503 in practical application is not limited, and is not particularly limited in the embodiment of the present application.

In the following, a rendering abnormality detection method provided in an exemplary embodiment of the present application will be described with reference to the accompanying drawings in conjunction with the application scenario described above, and it should be noted that the application scenario is only shown for the convenience of understanding the spirit and principle of the present application, and the embodiment of the present application is not limited in any way in this respect.

As shown in fig. 6, fig. 6 shows a timing sequence flow chart of a rendering anomaly detection method according to an embodiment of the present application, specifically including a client 601 and a server 602, where the flow mainly includes the following steps:

s601: the client 601 receives a page browsing operation triggered by using an object;

in implementation, the use object may use an application stored in the client 601. When the target page is enabled by the target application in the client 601 using the object, that is, the page browsing operation in step S601 is triggered.

The target application is a preset application program for performing rendering anomaly detection, and the target application is enabled by the client 601 in a suspicious manner by using the object.

The target page is set according to actual requirements, for example, in a development or test environment of the target application, all the browsing pages contained in the target application can be used as the target page. In this way, the most detailed rendering anomaly detection result of the target application can be obtained by performing rendering anomaly detection on each enabled browsing page when the target application enables the enabled browsing page.

For another example, in an online usage environment of a target application, a browsing page (e.g., a login page, a product display page, etc.) with a relatively core function may be used as a target page. In this way, by performing rendering anomaly detection only on the core browsing page, and discarding rendering anomaly detection on the browsing page with weaker functionality (such as a jump waiting page, a product description page, etc.), memory consumption can be greatly reduced, and computational resources can be saved. Therefore, the detection of the core browsing page can be completed, and the influence of calculation force caused by the occupation of resources required by detection can be greatly reduced, so that the abnormal rendering detection of the target page can be completed in a state that the use object is not perceived as much as possible.

As another example, in an online use environment of a target application, a browsing page with a low link occupancy (i.e., a smaller real-time browsing amount of such browsing pages using objects) may be taken as a target page. The reason is that in the process of performing rendering exception processing on the browsing page with higher link occupancy rate, a real view tree obtained by page rendering needs to be acquired and uploaded to a server, so that a certain computing power resource is occupied, and then the using object may be subjected to blocking perception, so that the using experience is affected. And, rendering logic, once abnormal, typically affects all pages within an application. Therefore, the overall situation of rendering logic can be reflected according to the number of pages with rendering anomalies by only detecting rendering anomalies on the browsing pages with lower link occupancy rate. When the situation that the rendering abnormal page occupies a relatively large area occurs, the problem that the rendering logic of the target application aiming at each browsing page needs to be subjected to abnormal investigation is described.

S602: the client 601 responds to the page browsing operation, generates a virtual view tree based on the source code of the target page, and renders the virtual view tree to obtain a real view tree;

Taking the login page 1 shown on the left side of fig. 1 as a target page for example, three view elements of an account input box, a password input box and a login button are configured in the source code of the login page 1, and corresponding attribute information is configured for each view element in the source code of the login page. In the process of rendering the target page of the target application, the client 601 firstly converts the UI description in the source code into a virtual view tree, where the virtual view tree may specifically include three nodes as shown in fig. 7, each node corresponds to one view element set in the source code of the login page, and each node stores attribute information set in the source code by the corresponding view element.

It should be noted that, the virtual view tree accurately represents each view element configured in the source code of the target page, and does not deviate from the configuration of the source code. However, the virtual view tree is only an intermediate representation in the page rendering process, and the browsing page cannot be directly generated according to the data format of the virtual view tree, so that after the client 601 extracts the virtual view tree from the source code of the target page through the above process, the virtual view tree needs to be rendered through preset rendering logic (i.e. a rendering engine) to obtain the real view tree corresponding to the target page.

The process of rendering a virtual view tree to obtain a real view tree is understood as mapping the tree structure of each virtual tree node in the virtual view tree. When the rendering logic is abnormal, data loss of part of virtual tree nodes in the mapping process may be caused, which may cause situations such as that part of view elements are not rendered, or attribute information of part of view elements deviate from the configuration of source codes after rendering.

Assuming that in the process of rendering the virtual view tree shown in fig. 7 to obtain the real view tree, only the attribute information (size) of the account input box is changed, the rendered real view tree may be specifically shown in fig. 8, where the real view tree shown in the drawing includes real tree nodes 1-3, the 3 real tree nodes are respectively associated with one first view element, and each real tree node stores the first attribute information of the associated first view element. Each first view element is a view element set in the source code of the target page, that is, a view element represented by a tree node in the virtual view tree shown in fig. 7.

Because the real view tree is directly used for generating the target page, the first view element can be understood as each view element presented in the target page displayed at the front end. The first attribute information is the attribute information of the first view element. As can be intuitively seen from fig. 8, in the virtual view tree node representing the view attribute of the account input box in the virtual view tree, attribute information representing the size is stored as a ₁ . Whereas in the real tree node representing the account input box, which is the first view element in the real view tree, the value of the stored first attribute information representing the size is A ₂ . This illustrates that in the process of rendering the virtual view tree to obtain the real view tree, the rendering logic is abnormal to causeThe size of the account input box in the target page displayed at the front end deviates from the configuration in the source code.

It should be noted that, the process of rendering the virtual view tree to obtain the real view tree is generated at the view layer, so that the rendering process of the target page can be intercepted when the real view tree is wanted to be obtained. And intercepting and exporting the real view tree generated in the view layer at the generation moment of the real view tree, and uploading the exported real view tree to a server.

In particular, lightweight interception techniques may be employed, such as interception may be implemented using Proxy objects in a JavaScript environment, while in native applications interception may be implemented using tangential plane programming (AOP) techniques (e.g., aspectJ, etc.). This ensures that the impact of the data acquisition phase on the computational effort is minimized. In the export stage of the real view tree, the data export task can be executed in an asynchronous manner, so that the blocking of the main thread can be avoided as much as possible in the process of exporting the real view tree.

In the export phase, the real tree structure (i.e., view hierarchy) in the real view tree generated in the view layer and the specified description information stored in each real tree node (i.e., the first attribute information of the first view element associated with the aforementioned real tree node) may be exported in a manner of extracting the specified field, thereby obtaining the real view tree as shown in fig. 8.

Specifically, the real view tree generated in the view layer may include a large amount of description information of each first view element, for example, attribute values, state values, view types of view elements, etc., and the embodiment of the present application derives only the specified description information, and uses the derived specified description information as the first attribute information of the first view element.

The above specified description information may specifically include the following items:

view types of view elements, for describing what UI components the view elements are specifically as, e.g., the aforementioned UI components of the various view types: buttons, text boxes, pictures, etc.

Attribute values of view elements are used to describe specific configuration details of view elements in a page, such as size (width and height), location (coordinates), color, text information (font, content, size, etc.), and other rendering-related attributes (e.g., visibility and transparency, etc.). In addition, the attribute values may also contain special attribute values (e.g., binding events for view elements, etc.).

State value of view element: for describing the current set state of the view element, e.g. selected state, disabled state, etc.

The method comprises the steps of exporting a real tree structure of a real view tree in a view layer, and extracting the description information of each first view element stored in the real view tree to serve as first attribute information of the first view element. And finally, associating the first attribute information of each exported first view element into each real tree node in the exported real tree structure, thus obtaining the exported real view tree.

The above-specified description information can be understood as main information for judging whether or not there is a rendering abnormality. The above process is equivalent to discarding the data with little relevance to the rendering abnormality judgment in the real view tree generated in the view layer, so as to reduce the data processing amount.

In some possible embodiments, the interception and derivation frequency of the real view tree can be reduced by a data processing mode of throttling (sampling) or sampling (sampling), so as to further reduce the data processing amount. In practice, the client 601 may be restricted to trigger export of the real view tree at most once per minute, or set to export a specified number of real view trees at most within a fixed time period. This arrangement ensures that the derivation of the real view tree does not place excessive performance burden on the target application as much as possible.

S603: the client 601 performs serialization processing on the real view tree;

the purpose of serializing the real view tree is to facilitate the comparison of the real view tree and the reference view tree, and ensure that the real view tree and the reference view tree generated by the subsequent server 602 have the same data structure.

In practice, the real view tree may be converted into JSON format or XML format by serializing it. XML supports a larger data volume than JSON. Therefore, the capability of XML to describe data is better than JSON from the point of view of data description, but the transmission speed of XML is slower than that of JSON from the point of view of data transmission.

Considering that in practical applications, the attribute information of the view element generally contains a small amount of data, so in the embodiment of the present application, when executing step S603, the real view tree is serialized into JSON format, so as to represent the real view tree by using data types such as class, object, dictionary or nested array.

Next, as shown in fig. 9, fig. 9 shows a JSON format expression corresponding to a real tree node after serialization processing. The Type field shown in the figure indicates the view Type in the attribute information of the real tree node associated with the first view element. Properties fields represent attribute values, such as size, position, color, etc., in the attribute information of the first view element. The Status field indicates a Status value in attribute information of the first view element.

S604: the client 601 uploads the serialized real view tree to the server 602;

after the true view tree is exported through the above procedure, an intelligent data reporting policy may be set in order to mitigate the impact of the uploading process on the performance of the client 601.

For example, the uploading of the real view tree is only performed if the client 601 is in an idle state, or if the network condition is good.

For another example, a fixed time period (e.g., 3 minutes) may be set, and the exporting of the real view tree of each target page enabled by the target application may be performed during the current time period, but only the exported real view tree is cached and not uploaded. When the next time period is reached, or the number of caches reaches a preset number threshold, batch uploading is performed on the currently cached real view tree, so that the performance consumption of the client 601 can be more intelligently reduced.

S605: the client 601 uploads the source code of the target page to the server 602;

the purpose of the server 602 knowing the source code of the target page is that the server 602 is able to generate a reference view tree, i.e. a true view tree in an ideal state (rendering without anomalies), from the source code of the target page.

In implementation, in the process of faxing the real view tree on the client 601, the source codes of the target pages corresponding to the real view tree can be uploaded to the server 602.

Alternatively, an asynchronous transmission manner may be adopted, when the client 601 receives the object to trigger the page browsing operation for the target page, that is, the source code of the target page is traversed from the application code set of the target application, and the source code of the target page is uploaded to the server 602 when the client 601 is in an idle state or the network condition is good.

In addition, a set of application codes for the target application may be stored in server 602, and the source code for the target page may be obtained by server 602 from the locally stored set of application codes. Thus, the step of uploading the source code of the target page to the server 602 by the client 601 in S605 can be omitted, so as to reduce the data transmission amount and further increase the data transmission speed.

In some possible embodiments, the uploading data may be encrypted by a preset encryption method such as asymmetric encryption, hash function encryption, etc. when executing the foregoing step S604 or S605, so as to improve the security of data transmission.

S606: the server 602 receives the real view tree uploaded by the client 601 and generates a reference view tree based on the source code of the target page;

Wherein the reference view tree contains second attribute information of at least one second view element; the second view element is: view elements set in the source code of the target page.

In practice, the server 602 first determines a preset layout of each second view element based on the source code of the target page. And then constructing a reference tree structure based on a preset layout mode. And then mapping the second attribute information of each second view element into the corresponding reference tree node to obtain a reference view tree. The reference tree structure comprises at least one reference tree node, each reference tree node is associated with a second view element, and the connection relation between the at least one reference tree node is determined based on a preset layout mode.

The preset layout mode can be understood as a father-son relationship and a brother relationship configured for each second view element in the source code of the target page. The second view elements of the parent-child relationships are embodied in the reference tree structure in the form of parent-child nodes, while the second view elements of the sibling relationships are embodied in the reference tree structure in the form of sibling nodes.

Assume that an account input box, a password input box, a login button, a password reset button, and a confirmation bar are configured in the source code of the login page for a total of 5 second view elements. The account input box, the password input box, the login button and the password reset button are in brother relation, and the confirmation column is triggered after clicking the password reset button, namely the password reset button and the confirmation column are in father-son relation. The reference tree structure generated according to the preset layout manner of each second view element can be shown in fig. 10, and the structure starts from the root node, and connects 4 reference tree nodes 1-4 which are brothers nodes, and connects its child nodes (i.e. reference tree node 5) under the reference tree node 4.

The second view element can be understood as a view element configured in the source code of the target page, and the attribute information of the second view element is the attribute information configured for the view element in the source code of the target page. After the reference tree structure is generated according to the threshold layout mode of each second view element, mapping the second attribute information of each second view element into a corresponding reference tree node to obtain a reference view tree as shown in fig. 11, thereby obtaining that the second attribute information of each second view element is stored in the reference view tree.

S607: the server 602 performs serialization processing on the reference view tree in the data structure of the real view tree, so that the data structure of the reference view tree is identical to the data structure of the real view tree;

in step S603, the client 601 will process the real view tree serialization into JSON format before uploading the real view tree to the server 602.

To facilitate the comparison of the reference view tree with the real view tree, the server 602 reads the type of the data structure of the real view tree (i.e., JSON format), and then performs serialization processing on the reference view tree generated in the foregoing step to make it identical to the data structure of the real view tree.

S608: the server 602 obtains a tree similarity of the real view tree and the reference view tree based on the obtained at least one first attribute information and at least one second attribute information;

when in implementation. And analyzing the real view tree to obtain a real tree structure. The meaning of the real tree structure is similar to the reference tree structure described above. The real tree structure comprises at least one real tree node, each real tree node is associated with one first view element, and the connection relation between the at least one real tree node is determined based on the rendering layout mode of the at least one first view element configured in the source code of the target page.

It has been mentioned above that the second view element contained in the reference tree structure is a view element configured in the source code of the target page, and the preset layout manner of the second view element is that a parent-child relationship and a sibling relationship configured in the source code of the second view element. That is, the reference view tree is used to represent the configuration of view elements in the source code, while the real view tree is used to represent the configuration of view elements presented at the front end of the target page. Therefore, the first view element contained in the real view tree is the view element contained in the target page displayed at the front end, and the rendering layout mode of the first view element is the father-son relationship and the brother relationship of the first view element displayed in the target page displayed at the front end.

Next, for at least one reference tree node, the following operations are performed, respectively: acquiring the position of a reference tree node in the reference tree structure, and acquiring a real tree node in the real tree structure at the position; acquiring second attribute information of a second view element associated with a reference tree node, and attribute similarity between the second attribute information of a first view element associated with a real tree node;

as shown in fig. 12 in particular, a reference view tree and a real view tree of a landing page of a certain target application are shown in fig. 12. The above flow is described by taking the reference tree node 1 of the reference view tree shown in the figure as an example. In practice, the position of the reference tree node 1 within the reference tree structure is obtained, and then the real tree node 1 located at that position in the real view tree is found.

The foregoing steps have illustrated that before comparing the reference view tree with the real view tree, the reference view tree and the real view tree are respectively serialized into JSON format. The reference tree node 1 and the real view tree node 1 of the reference view tree may include, as shown in fig. 12, a Type field characterizing a view Type, a Property1 field characterizing a size (attribute value 1), a Property2 field characterizing coordinates (attribute value 2), a Status1 field characterizing a disabled state (state value 1), and a Status2 field characterizing a selected turret (state value 2). And calculating the text similarity through the data representation in the JSON format, so as to obtain the attribute similarity between the reference tree node 1 and the real tree node 1.

By traversing each reference tree node in the above manner, the attribute similarity corresponding to each reference tree node can be obtained. Next, a tree similarity of the real view tree and the reference view tree is determined from the obtained attribute similarities.

In implementation, the average value of the attribute similarity corresponding to each reference tree node can be used as the tree similarity. In addition, according to actual requirements, the importance of the view types stored in the reference tree nodes in the target page is used as a standard, and a threshold value is set for each reference tree node.

For example, in a landing page, the reference tree nodes whose view types are input boxes may be configured with 1.2 weights that are more important to characterize, while the remaining reference tree nodes are configured with 1.0 weights. After the attribute similarity of each reference tree node is obtained, weighting the reference tree node according to the view type stored by the reference tree node, and taking the average value of the attribute similarity corresponding to each reference tree node after weighting as the tree similarity.

S609: the server 602 obtains a rendering anomaly identification result of the target page according to the tree similarity;

considering that the workload of checking and repairing the page rendering abnormality is large in practical application, the recognition result representing that the rendering logic of the target page has abnormality can be output only under the condition that the tree similarity is low (namely, the configuration deviation between the rendering result and the source code is large). In specific implementation, when the tree similarity is smaller than a second similarity threshold (70%), a rendering abnormality identification result indicating that the rendering logic of the target page is abnormal can be output. And when the tree similarity is not less than 70%, an anomaly identification result indicating that the rendering logic is not anomalous can be output.

In some possible embodiments, a component name that characterizes the UI component functionality thereof may be set for each second view element stored within the reference view tree. Taking the reference tree node 1 shown in fig. 12 as an example, fig. 13 is specifically shown. In implementation, a custom viewRole field may be added in the second attribute information stored in the reference tree node, where the field is used to directly record the component name of the second view element corresponding to the reference tree node: an account entry box. Configuration information may be added to the custom field to indicate that the custom field does not participate in the calculation of attribute similarity.

Thus, in the foregoing attribute similarity calculation flow shown in fig. 12, when the attribute similarity of any reference tree node is less than the first similarity threshold (60%), the component name is based on: the account input box generates prompt information representing that the rendering logic of the account input box component of the target page is abnormal, so that related personnel are prompted to conduct abnormality investigation on the rendering logic of the account input column in the target page.

In the implementation, when the tree similarity is smaller than the second similarity threshold value or not, prompt information for carrying out abnormality investigation on the component rendering logic can be generated according to the reference tree node with the attribute similarity smaller than the first similarity threshold value. The method may further include outputting prompt information for abnormality investigation of the component rendering logic only when the tree similarity is smaller than a second similarity threshold. Therefore, the components in the prompt message can be subjected to key investigation in the stage of rendering logic abnormality investigation by related personnel.

Based on the same inventive concept, an embodiment of the present application provides a rendering anomaly detection apparatus 140 applied to a server side, specifically as shown in fig. 14, the apparatus includes:

a receiving module 141 configured to execute receiving the real view tree uploaded by the client; the real view tree is obtained by the client responding to page browsing operation triggered by an object aiming at a target application, generating a virtual view tree based on source codes of target pages, and rendering the virtual view tree; the real view tree comprises first attribute information of at least one first view element, wherein the first view element is: view elements presented in a target page generated based on the real view tree;

a generation module 142 configured to perform generation of a reference view tree based on source code of the target page; wherein the reference view tree contains second attribute information of at least one second view element; the second view element is: view elements set in source codes of the target pages;

and a recognition module 143 configured to perform obtaining a tree similarity of the real view tree and the reference view tree based on the obtained at least one first attribute information and at least one second attribute information, and obtain a rendering abnormality recognition result of the target page according to the tree similarity.

In some possible embodiments, executing the generation of the reference view tree based on the source code of the target page, the generation module 142 is configured to:

determining a preset layout mode of the at least one second view element based on the source code of the target page;

constructing a reference tree structure based on the preset layout mode; the reference tree structure comprises at least one reference tree node, each reference tree node is associated with a second view element, and the connection relation between the at least one reference tree node is determined based on the preset layout mode;

and mapping the second view attribute information of each second view element into corresponding reference tree nodes to obtain the reference view tree.

In some possible embodiments, performing obtaining a tree similarity of the real view tree to the reference view tree based on the obtained at least one first attribute information and the at least one second attribute information, the identification module 143 is configured to:

analyzing the real view tree to obtain the real tree structure; the real tree structure comprises at least one real tree node, each real tree node is associated with one first view element, and the connection relation between the at least one real tree node is determined based on the rendering layout mode of the at least one first view element configured in the source code of the target page;

For the at least one reference tree node, performing the following operations respectively: acquiring a position of a reference tree node in the reference tree structure, and acquiring a real tree node in the real tree structure at the position; acquiring second attribute information of a second view element associated with the reference tree node, and attribute similarity between the second attribute information of a first view element associated with the real tree node;

and determining the tree similarity of the real view tree and the reference view tree according to the obtained attribute similarity.

In some possible embodiments, within the reference view tree, a respective component name is provided for each second view element; the identification module 143 is further configured to:

screening at least one second view element with attribute similarity smaller than a set first similarity threshold value;

generating abnormal prompt information based on the component name of the at least one second view element; wherein, the abnormal prompt message is used for prompting: abnormality troubleshooting is performed on rendering logic of the associated component.

In some possible embodiments, before obtaining the tree similarity of the real view tree to the reference view tree based on the obtained at least one first attribute information and the at least one second attribute information, the identification module 143 is further configured to:

Comparing the real tree structure with the reference tree structure to obtain a comparison result;

and determining that the real tree structure is the same as the basic tree structure based on the comparison result.

In some possible embodiments, the identification module 143 is further configured to:

if the real tree structure is determined to be different from the basic tree structure based on the comparison result, stopping the detection flow, and outputting a rendering abnormality identification result representing that the rendering logic of the target page is abnormal.

In some possible embodiments, performing the comparison of the real tree structure with the reference tree structure, the identification module 143 is configured to:

comparing the node number of the basic tree nodes with the node number of the real tree nodes;

for the at least one reference tree node, performing the following operations respectively: acquiring a position of a reference tree node in the reference tree structure, and acquiring a real tree node in the real tree structure at the position; comparing the view type of the reference tree node with the view type of the real tree node;

executing the comparison results, determining that the real tree structure is identical to the base tree structure, the identification module 143 is configured to:

And when the number of nodes of the basic tree nodes is the same as that of the real view tree nodes, and the view type of each basic tree node is the same as that of the real tree nodes subjected to comparison, determining that the real tree structure is the same as the basic tree structure.

In some possible embodiments, the receiving module 141 is further configured to:

receiving source codes of the target pages uploaded by the client; or,

and acquiring the source code of the target page from a prestored application code set of the target application.

In some possible embodiments, the data structure of the real view tree is lightweight data interaction format JSON or extensible markup language format XML obtained through serialization processing; after executing the generation of the reference view tree based on the source code of the target page, the generation module 142 is further configured to:

and carrying out serialization processing on the reference view tree by using the data structure of the real view tree, so that the data structure of the reference view tree is identical to the data structure of the real view tree.

In some possible embodiments, performing the rendering exception recognition result for the target page according to the tree similarity, the recognition module 143 is configured to:

And if the tree similarity is smaller than a preset second similarity threshold, outputting a rendering abnormality identification result indicating that the rendering logic of the target page is abnormal.

Based on the same inventive concept, the embodiment of the present application further provides a rendering anomaly detection apparatus 150 applied to a client, specifically as shown in fig. 15, the apparatus includes:

a rendering module 151 configured to perform a source code generation of a virtual view tree based on a target page in response to a page browsing operation, and render the virtual view tree to obtain a real view tree; the real view tree comprises first attribute information of at least one first view element, and the first view element is: view elements presented in a target page generated based on the real view tree;

and the transmission module 152 is configured to upload the real view tree to a server, so that the server generates a reference view tree according to the source code of the target page, and obtains a rendering abnormality identification result of the target page according to the tree similarity of the real view tree and the reference view tree.

In some possible embodiments, the transmission module 152 is further configured to:

And uploading the source code of the target page to the server in the process of uploading the real view tree to the server.

In some possible embodiments, before performing the uploading of the real view tree to the server, the transmission module 152 is further configured to:

and carrying out serialization processing on the real view tree to enable the data structure of the real view tree to be in a lightweight data interaction format JSON or an extensible markup language format XML.

The embodiment of the application also provides electronic equipment based on the same conception as the embodiment of the method. In one embodiment, the electronic device may be a single server, a distributed cluster including a plurality of servers, or a terminal device. In this embodiment, the electronic device may be configured as shown in fig. 16, including a memory 161, a communication module 163, and one or more processors 162.

A memory 161 for storing computer programs for execution by the processor 162. The memory 161 may mainly include a storage program area and a storage data area, wherein the storage program area may store an operating system, an operating instruction set, and the like.

The memory 161 may be a volatile memory (RAM) such as a random-access memory (RAM); the memory 161 may also be a nonvolatile memory (non-volatile memory), such as a read-only memory (rom), a flash memory (flash memory), a hard disk (HDD) or a Solid State Drive (SSD); or memory 161, is any other medium that can be used to carry or store a desired computer program in the form of instructions or data structures and that can be accessed by a computer, but is not limited to such. The memory 161 may be a combination of the above memories.

The processor 162 may include one or more central processing units (central processing unit, CPU) or digital processing units, etc. A processor 162 for implementing the above-described rendering abnormality detection method when calling the computer program stored in the memory 161.

The communication module 163 is used for communication with terminal devices and other servers.

The specific connection medium between the memory 161, the communication module 163 and the processor 162 is not limited in the embodiment of the present application. The embodiment of the present application is shown in fig. 16, where the memory 161 and the processor 162 are connected by a bus 164, where the bus 164 is depicted in fig. 16 with a bold line, and the connection between other components is merely illustrative, and not limiting. The bus 164 may be classified as an address bus, a data bus, a control bus, or the like. For ease of description, only one thick line is depicted in fig. 16, but only one bus or one type of bus is not depicted.

The memory 161 stores therein a computer storage medium in which computer executable instructions for implementing the rendering abnormality detection method of the embodiment of the present application are stored. The processor 162 is configured to perform the steps of the rendering anomaly detection method described above.

In some possible embodiments, aspects of the data classification method provided by the present application may also be implemented in the form of a program product comprising a computer program for causing an electronic device to perform the steps of the rendering anomaly detection method according to the various exemplary embodiments of the present application described above when the program product is run on the electronic device.

The program product may employ any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. The readable storage medium can be, for example, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples of the readable storage medium include: an electrical connection having one or more wires, a portable disk, a hard disk, a random access memory, a read-only memory, an erasable programmable read-only memory, an optical fiber, a portable compact disk read-only memory, an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

The program product of embodiments of the present application may employ a portable compact disc read-only memory and comprise a computer program and may run on an electronic device. However, the program product of the present application is not limited thereto, and in this document, a readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with a command execution system, apparatus, or device.

The readable signal medium may comprise a data signal propagated in baseband or as part of a carrier wave in which a readable computer program is embodied. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination of the foregoing. A readable signal medium may also be any readable medium that is not a readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with a command execution system, apparatus, or device.

A computer program embodied on a readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.

Computer programs for performing the operations of the present application may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, C++ or the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The computer program may execute entirely on the user's computing device, partly on the user's computing device, as a stand-alone software package, partly on the user's computing device and partly on a remote computing device or entirely on the remote computing device or server. In the case of remote computing devices, the remote computing device may be connected to the user computing device through any kind of network, including a local area network or a wide area network, or may be connected to an external computing device.

It will be appreciated by those skilled in the art that embodiments of the present application may be provided as a method, system, or computer program product. Accordingly, the present application may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present application may take the form of a computer program product on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) having a computer-usable computer program embodied therein.

While preferred embodiments of the present application have been described, additional variations and modifications in those embodiments may occur to those skilled in the art once they learn of the basic inventive concepts. It is therefore intended that the following claims be interpreted as including the preferred embodiments and all such alterations and modifications as fall within the scope of the application.

Claims

1. A rendering anomaly detection method, characterized by being applied to a server, the method comprising:

2. The method of claim 1, wherein the generating a reference view tree based on the source code of the target page comprises:

3. The method according to claim 2, wherein the obtaining the tree similarity of the real view tree to the reference view tree based on the obtained at least one first attribute information and at least one second attribute information comprises:

4. A method according to claim 3, wherein within the reference view tree, a respective component name is provided for each second view element;

the method further comprises:

5. The method according to claim 2, wherein before obtaining the tree similarity of the real view tree to the reference view tree based on the obtained at least one first attribute information and at least one second attribute information, the method further comprises:

6. The method of claim 5, wherein the method further comprises:

7. The method of claim 5, wherein said comparing said real tree structure to said reference tree structure comprises:

determining that the real tree structure is identical to the base tree structure based on the comparison result comprises:

8. The method of any of claims 1-7, wherein prior to generating a reference view tree based on source code of the target page, the method further comprises:

Receiving source codes of the target pages uploaded by the client; or,

9. The method according to any one of claims 1-7, wherein the data structure of the real view tree is lightweight data interaction format JSON or extensible markup language format XML obtained through serialization processing;

after the generating the reference view tree based on the source code of the target page, the method further includes:

10. The method according to any one of claims 1-7, wherein the obtaining a rendering anomaly identification result of the target page according to the tree similarity includes:

11. A rendering anomaly detection method, applied to a client, the method comprising:

12. The method of claim 11, wherein the method further comprises:

13. The method according to claim 11 or 12, wherein before uploading the real view tree to a server, the method further comprises:

14. A rendering anomaly detection apparatus, characterized in that the apparatus comprises:

15. A rendering anomaly detection apparatus, characterized in that the apparatus comprises:

16. An electronic device comprising a processor and a memory, wherein the memory stores a computer program that, when executed by the processor, causes the processor to perform the steps of the method of any of claims 1-13.

17. A computer readable storage medium, characterized in that it comprises a computer program for causing an electronic device to perform the steps of the method of any one of claims 1-13 when said computer program is run on the electronic device.