Method for determining page display state and device, electronic device, and storage medium

Abstract

The application discloses a page display state determination method and device, electronic equipment and a storage medium, and relates to the field of financial technology or other related fields. The method comprises the following steps: obtaining a target page set, collecting label element information of the target page, and obtaining a label element information set, wherein the target page comprises M sampling regions, the label element information comprises a label element quantity and an element color code, M is a positive integer; calculating a feature value of each sampling region based on the label element information set, and obtaining a feature value set of the target page; performing clustering processing on the feature value set based on a preset clustering algorithm, and obtaining a clustering result, wherein the clustering result represents the dispersion degree of the feature value; and determining the display state of the target page based on the clustering result. The application solves the technical problem that the page detection method in the related art cannot accurately detect the display state of some devices, and device display abnormalities are prone to occur.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of financial technology, in particular to a page display state determination method and device, electronic equipment and storage medium. BACKGROUND

[0002] With the large popularity of mobile terminals, especially the popularity of full screens with display functions, the resolution requirements of mobile terminals are also increasing. Currently, due to the large differences in device performance and resolution of various types of mobile terminals, test personnel can usually only test whether some mainstream models can normally display target pages, and cannot cover all types of devices for testing. Therefore, sometimes it is not possible to measure the display abnormalities of target pages under certain specific models or resolutions.

[0003] In related technologies, page detection technologies cannot completely cover all display abnormal states of target pages for detection.

[0004] In view of the above problems, no effective solutions have been proposed so far. SUMMARY

[0005] The embodiments of the present application provide a page display state determination method and device, electronic equipment and storage medium, to at least solve the technical problem that the page detection method in related technologies cannot accurately detect the display state of some devices, and is prone to device display abnormalities.

[0006] According to an aspect of an embodiment of the present application, a page display state determination method is provided, comprising: obtaining a target page set and collecting label element information of each target page to obtain a label element information set, wherein the target page includes M sampling regions, each sampling region corresponds to N label elements, and the label element information at least includes: label element quantity, element color code, M and N are positive integers; calculating a feature value of each sampling region based on the label element information set to obtain a feature value set of the target page; performing clustering processing on the feature value set based on a preset clustering algorithm to obtain a clustering result, wherein the clustering result is used to represent the dispersion degree of all feature values; and determining the display state of the target page based on the clustering result.

[0007] Optionally, the step of obtaining a target page set comprises: obtaining a login information set, wherein the login information set at least includes: a username, a login password and verification information; logging into a target browser based on the login information set; and collecting all user visible regions in the target browser to obtain the target page set.

[0008] Optionally, the step of collecting the label element information of each target page to obtain a label element information set comprises: segmenting each of the target pages in the target page set based on a preset segmentation strategy to obtain M grid units; for each of the grid units, determining a center position of the grid unit as a sampling point, determining the sampling region based on the sampling point and a preset sampling radius to obtain M sampling regions, wherein each of the grid units corresponds to a sampling region; and collecting the label element information of each of the sampling regions to obtain the label element information set.

[0009] Optionally, the step of calculating a feature value of each of the sampling regions based on the label element information set to obtain a feature value set of the target page comprises: obtaining a total number of label elements and a background color code of the target page; calculating a proportion value of the number of label elements of each of the sampling regions to the total number of label elements; calculating a display color similarity between each of the sampling regions and the overall page of the target page based on the element color code and the background color code; for each of the sampling regions, performing weighted calculation on the proportion value and the display color similarity based on a preset weight distribution strategy to obtain the feature value; and integrating all of the feature values to obtain the feature value set of the target page.

[0010] Optionally, the step of performing clustering processing on the feature value set based on a preset clustering algorithm to obtain a clustering result comprises: generating a feature value distribution map based on the feature value set, wherein the feature value distribution map contains M feature value points, and each of the feature value points corresponds to the feature value representing each of the sampling regions; determining an aggregation center point based on a preset clustering algorithm and the feature value distribution map; marking feature discrete points in the feature value distribution map based on the aggregation center point; and querying the marked feature value distribution map to obtain the clustering result.

[0011] Optionally, the step of determining the display state of the target page based on the clustering result comprises: based on the clustering result, counting the number of feature discrete points; comparing the number of feature discrete points with a preset number threshold to obtain a comparison result; in a case where the comparison result indicates that the number of feature discrete points is less than or equal to the preset number threshold, determining that the display state of the target page is normal display; and in a case where the comparison result indicates that the number of feature discrete points is greater than the preset number threshold, determining that the display state of the target page is abnormal display.

[0012] Optionally, after determining the display state of the target page based on the clustering result, further comprising: if the target page is determined to be abnormally displayed, obtaining the number of label elements and the element color code of the sampling area corresponding to each feature discrete point; and based on the number of label elements and the element color code, outputting a reference reason for the abnormal display of the target page.

[0013] According to another aspect of the embodiments of the present application, a page display state determination device is further provided, comprising: an obtaining unit configured to obtain a target page set and collect label element information of each target page to obtain a label element information set, wherein the target page comprises M sampling areas, each sampling area corresponds to N label elements, and the label element information at least comprises a label element number and an element color code, M and N are positive integers; a calculation unit configured to calculate a feature value of each sampling area based on the label element information set to obtain a feature value set of the target page; a clustering unit configured to perform clustering processing on the feature value set based on a preset clustering algorithm to obtain a clustering result, wherein the clustering result is used to represent the discrete degree of all feature values; and a determination unit configured to determine the display state of the target page based on the clustering result.

[0014] Optionally, the obtaining unit comprises: a first obtaining module configured to obtain a login information set, wherein the login information set at least comprises a username, a login password, and verification information; a login module configured to log in to a target browser based on the login information set; and a first collecting module configured to collect all user viewable areas in the target browser to obtain the target page set.

[0015] Optionally, the obtaining unit further comprises: a segmentation module configured to segment each target page in the target page set based on a preset segmentation strategy to obtain M grid units; a first determination module configured to determine the center position of each grid unit as a sampling point, determine the sampling area based on the sampling point and a preset sampling radius to obtain M sampling areas, wherein each grid unit corresponds to a sampling area; and a second collecting module configured to collect the label element information of each sampling area to obtain the label element information set.

[0016] Optionally, the computing unit comprises: a second obtaining module, configured to obtain a total number of label elements and a background color code of the target page; a first calculating module, configured to calculate a proportion value of the number of label elements of each sampling region to the total number of label elements; a second calculating module, configured to calculate a display color similarity between each sampling region and the whole page of the target page based on the element color code and the background color code; a third calculating module, configured to, for each sampling region, perform weighted calculation on the proportion value and the display color similarity based on a preset weight distribution strategy to obtain the feature value; and an integrating module, configured to integrate all the feature values to obtain the feature value set of the target page.

[0017] Optionally, the clustering unit comprises: a generating module, configured to generate a feature value distribution diagram based on the feature value set, wherein the feature value distribution diagram comprises M feature value points, and each feature value point corresponds to the feature value of each sampling region; a second determining module, configured to determine an aggregation center point based on a preset clustering algorithm and the feature value distribution diagram; a marking module, configured to mark feature discrete points in the feature value distribution diagram based on the aggregation center point; and a querying module, configured to query the marked feature value distribution diagram to obtain the clustering result.

[0018] Optionally, the determining unit comprises: a counting module, configured to count the number of feature discrete points based on the clustering result; a comparing module, configured to compare the number of feature discrete points with a preset number threshold to obtain a comparison result; a first determining module, configured to determine that the display state of the target page is normal display in a case where the comparison result indicates that the number of feature discrete points is less than or equal to the preset number threshold; and a second determining module, configured to determine that the display state of the target page is abnormal display in a case where the comparison result indicates that the number of feature discrete points is greater than the preset number threshold.

[0019] Optionally, the page display state determining apparatus further comprises: a third obtaining module, configured to, if the target page is determined to be abnormally displayed, obtain the number of label elements and the element color code of the sampling region corresponding to each feature discrete point; and an output module, configured to output a reference reason for the abnormal display of the target page based on the number of label elements and the element color code.

[0020] According to another aspect of the embodiment of the present application, a computer readable storage medium is further provided, which comprises a stored computer program, wherein the computer program controls a device where the computer readable storage medium is located to perform the page display state determining method as described above when the computer program is running.

[0021] According to another aspect of the embodiments of the present application, an electronic device is also provided, which includes one or more processors and a memory for storing one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors implement the method for determining the display state of a page according to any one of the above embodiments.

[0022] In the present disclosure, a method for determining the display state of a page is provided, which includes the following steps: obtaining a target page set, collecting label element information of each target page to obtain a label element information set, wherein the target page includes M sampling regions, each sampling region corresponds to N label elements, and the label element information at least includes the number of label elements and element color codes; calculating a feature value of each sampling region based on the label element information set to obtain a feature value set of the target page; performing clustering processing on the feature value set based on a preset clustering algorithm to obtain a clustering result, wherein the clustering result is used to represent the dispersion degree of all feature values; and determining the display state of the target page based on the clustering result.

[0023] In the present disclosure, the number of label elements and element color codes are obtained by automatically collecting label element information in each target page, the page feature values of the target page are calculated by using the collected label element information to obtain a page feature value set, the page feature distribution is obtained by performing clustering processing on the page feature value set by using a clustering algorithm, the clustering result is generated, the clustering result is used to represent the dispersion degree of the page feature values, the target page with too dispersed feature values is more likely to have display abnormalities, and thus the display state of the page can be determined by the page clustering result. The technical solution provided by the present disclosure can directly calculate the feature values and determine the display state of the target page, can adapt to all types of devices (all mainstream devices and non-mainstream devices), and can significantly improve the detection accuracy of the display state of the device, thereby solving the technical problem that the page detection method in the related art cannot accurately detect the display state of some devices and is prone to display abnormalities of the device. BRIEF DESCRIPTION OF DRAWINGS

[0024] The accompanying drawings, which are included to provide a further understanding of the application and are incorporated in and constitute a part of this application, illustrate embodiments of the application and serve to explain the principles of the application. In the drawings:

[0025] Figure 1 is a flowchart of an optional method for determining the display state of a page according to an embodiment of the present application;

[0026] Figure 2 is a flowchart of an optional method for determining the display state of a page according to an embodiment of the present application;

[0027] Figure 3is a flow chart of an optional page automatic determination method based on feature collection according to an embodiment of the present application;

[0028] Figure 4 is an optional page feature value scatter plot according to an embodiment of the present application;

[0029] Figure 5 is a schematic diagram of an optional page display state determination device according to an embodiment of the present application;

[0030] Figure 6 is a hardware structure block diagram of an electronic device (or mobile device) for a page display state determination method according to an embodiment of the present application. DETAILED DESCRIPTION

[0031] In order to make the personnel in the art better understand the present application scheme, the technical solutions in the embodiments of the present application will be described clearly and completely below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only a part of the embodiments of the present application, not all. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative labor should belong to the scope of protection of the present application.

[0032] It should be noted that the terms "first", "second" and the like in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and do not necessarily describe a specific order or sequence. It should be understood that the data thus used can be interchanged in appropriate states, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "include" and "have" and any variations thereof are intended to cover non-exclusive inclusion, for example, a process, method, system, product or device including a series of steps or units does not necessarily limit to those steps or units clearly listed, but can include other steps or units not clearly listed or inherent to these processes, methods, products or devices.

[0033] In order to facilitate those skilled in the art to understand the present application, the following explains some terms or names involved in each embodiment of the present application:

[0034] HTML, Hypertext Markup Language, a markup language, used to describe the structure and content of a web page, composed of a series of HTML tags, including the structure, text content, image, link, multimedia and other elements of a web page.

[0035] DOM element, each tag element in the HTML document in the present disclosure, represented as a tree structure through DOM (Document Object Model).

[0036] It should be noted that the page display state determination method and device in the present disclosure can be used in the financial technology field to determine the display state of a target page, and can also be used in any field other than the financial technology field to determine the display state of a target page. The application field of the page display state determination method and device in the present disclosure is not limited.

[0037] It should be noted that the related information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data for analysis, stored data, displayed data, collected data, etc.) involved in the present disclosure are all information and data authorized by the user or authorized by all parties, and the collection, use and processing of related data need to comply with relevant laws, regulations and standards of relevant countries and regions, and provide corresponding operation portal for user to choose authorization or refusal. For example, an interface is provided between the system and the related user or institution, and before obtaining the related information, the interface needs to send an acquisition request to the aforementioned user or institution, and after receiving the consent information fed back by the aforementioned user or institution, the related information is acquired.

[0038] The following embodiments of the present application can be applied to various systems / applications / devices that need to determine the display state of a target page, and can realize collecting tag element information to calculate a feature value set of the target page, processing the feature value set based on a clustering algorithm to obtain a clustering result, and then determining whether the target page can be normally displayed.

[0039] The present application will be described in detail below in conjunction with various embodiments.

[0040] Embodiment one

[0041] According to an embodiment of the present application, an embodiment of a page display state determination method is provided. It should be noted that the steps shown in the flowchart of the accompanying drawings can be executed in a computer system such as a set of computer executable instructions, and although a logical order is shown in the flowchart, in some states, the steps shown or described can be executed in an order different from that shown here.

[0042] Figure 1 is a flowchart of an optional page display state determination method according to an embodiment of the present application, as shown in Figure 1 The determination method comprises the following steps:

[0043] Step S101, a target page set is obtained, and tag element information of each target page is collected to obtain a tag element information set, wherein the target page includes M sampling regions, and M is a positive integer.

[0044] Step S102, calculating a feature value of each sampling region based on the label element information set to obtain a feature value set of the target page.

[0045] Step S103, performing clustering processing on the feature value set based on a preset clustering algorithm to obtain a clustering result, wherein the clustering result is used to represent the discrete degree of all feature values.

[0046] Step S104, determining the display state of the target page based on the clustering result.

[0047] Through the above steps, the target page set can be obtained first, and the label element information of each target page is collected to obtain a label element information set, wherein the target page includes M sampling regions, each sampling region corresponds to N label elements, and the label element information at least includes: label element quantity, element color code, M and N are positive integers. Then, the feature value of each sampling region is calculated based on the label element information set to obtain a feature value set of the target page. Then, the feature value set is clustered based on a preset clustering algorithm to obtain a clustering result, wherein the clustering result is used to represent the discrete degree of all feature values. Finally, the display state of the target page is determined based on the clustering result.

[0048] In the embodiment of the application, the label element quantity and element color code are obtained by automatically collecting the label element information in each target page, the page feature value of the target page is calculated using the collected label element information to obtain a page feature value set, the page feature value set is clustered by a clustering algorithm to obtain the page feature distribution, and a clustering result is generated. The clustering result is used to represent the discrete degree of the page feature value. The target page with too dispersed feature values is more likely to have display abnormalities. The display state of the target page can be determined through the clustering result, the feature value calculation and display state determination are directly performed on the display page in the mobile terminal, which is suitable for all types of terminal devices (all mainstream devices and non-mainstream devices), and can significantly improve the accuracy of display state determination, thereby solving the technical problem that the page detection method in the related art cannot accurately detect the display state of some devices and is prone to device display abnormalities.

[0049] The embodiment of the application will be described in detail below in combination with the above steps.

[0050] The implementation subject of the embodiment of the application is a page display state determination system, which uses JavaScript technology, CSS tools and machine learning technology to collect label element information of a target page, calculate target page features and determine the page display state.

[0051] Step S101, obtaining a target page set and collecting label element information of each target page to obtain a label element information set.

[0052] It should be noted that the target page includes M sampling regions, each sampling region corresponds to N label elements, and the label element information at least includes: the number of label elements, element color code, M and N are positive integers.

[0053] It should be noted that each target page has a corresponding HTML document to record and display page content, wherein the HTML document uses markup language to divide the page content into different elements and structures, such as title, paragraph, list, table, etc., and the structured way makes the page content clearer, each content element is associated with a corresponding label element, which is used to quickly find the target content.

[0054] Optionally, the step of obtaining the target page set comprises: obtaining a login information set, wherein the login information set at least includes: a username, a login password, and verification information; logging into the target browser based on the login information set; collecting all user visible areas in the target browser to obtain the target page set.

[0055] In the embodiment of the application, the target page can be obtained by collecting the user visible area of the target browser, which is essentially the webpage of the target browser, and the HTML document recording the target page content generates a document object model (DOM) after being parsed in the target browser. The label elements in the HTML document correspond to the generation of DOM element nodes.

[0056] The DOM element is used to represent and operate the API interface of the HTML document, and each DOM element node at least includes: a label name, a label attribute, a content attribute, and an access method.

[0057] In the embodiment of the application, in addition to directly collecting the label element information of the target page, for the target page obtained by collecting the webpage of the target browser, the DOM element information of each sampling region in the target page can be obtained for subsequent calculation.

[0058] It should be noted that the DOM element information to be obtained at least includes the number of DOM elements and the element color code, wherein if the ratio of the number of DOM elements of the sampling region to the total number of DOM elements of the target page is high, it represents that the structure of the page is relatively complex, and there are a large number of nested relationships and interactive elements, which will cause the page loading speed to be slow and the rendering time to be prolonged, thereby affecting the normal display of the page. At the same time, too many DOM elements of the sampling region also increase the possibility of page errors, and the complex page structure increases the difficulty of code writing and maintenance, and errors are easy to occur, which causes the page to be unable to display normally.

[0059] The DOM element supports setting its display color, background color, border color and the like by CSS style, so as to change the display effect of the local page where the DOM element is located. The DOM (Document Object Model) is composed of DOM element nodes in a tree structure, and changing the attributes of a plurality of element nodes in the DOM can change the overall display effect of the target page.

[0060] The label name, class name, ID and the like of the element can be accessed by using JavaScript to access or directly access the element, and various operations can be performed on the DOM element. It should be noted that the DOM element corresponds to attributes and methods for accessing and modifying the content of the element. For example, the attributes are used to obtain or set the attribute values of the element, and the methods are used to modify the style and content of the element, so as to facilitate dynamic updating and operation of the content and structure of the HTML document.

[0061] Optionally, the step of collecting the label element information of each target page to obtain the label element information set comprises: segmenting each target page in the target page set based on a preset segmentation strategy to obtain M grid units; for each grid unit, determining the center position of the grid unit as a sampling point, determining a sampling region based on the sampling point and a preset sampling radius to obtain M sampling regions, wherein each grid unit corresponds to a sampling region; and collecting the label element information of each sampling region to obtain the label element information set.

[0062] It should be noted that, in order to reduce the calculation amount, the features in the target page are sampled and calculated. In the embodiment of the application, a uniform sampling strategy is used to determine the sampling points and the sampling regions, and the features of the sampling regions are used to represent the features of the target page. The uniform sampling strategy can better cover the entire target page, reduce the deviation in the sampling process, and improve the reliability of the sampling.

[0063] In the embodiment of the application, a random sampling strategy can also be used to determine the sampling points and the sampling regions, and the features of the sampling regions are calculated to represent the features of the target page. The random sampling strategy can make the probability of sampling the features of each coordinate position in the target page equal, and the completely random sampling process can better capture the page features and improve the generalization ability of the sampling result.

[0064] It should be noted that, when the random sampling strategy is used to collect the label element information of each target page to obtain the label element information set, M sampling points are randomly selected in the target page based on a preset number of sampling points; M sampling regions are obtained by determining the sampling region based on the sampling radius with each sampling point as the sampling center; and the label element information of each sampling region is collected to obtain the label element information set.

[0065] Step S102, calculating the feature value of each sampling region based on the label element information set, and obtaining the feature value set of the target page.

[0066] Optionally, step S102 comprises: obtaining the total number of label elements and the background color code of the target page; calculating the proportion value of the number of label elements in each sampling region to the total number of label elements; calculating the display color similarity between each sampling region and the overall page of the target page based on the element color code and the background color code; for each sampling region, weighting the proportion value and the display color similarity based on a preset weight distribution strategy to obtain the feature value; and integrating all the feature values to obtain the feature value set of the target page.

[0067] It should be noted that the color code system can be selected from any of the following: RGB code (red, green and blue), HEX code (hexadecimal), HSL code (hue, saturation and lightness), wherein,

[0068] The RGB code (red, green and blue) is composed of the brightness values of red (Red), green (Green) and blue (Blue), and the value range of each color is 0-255. For example, the RGB code of pure red is (255, 0, 0), the RGB code of pure green is (0, 255, 0), and the RGB code of pure blue is (0, 0, 255).

[0069] The HEX code (hexadecimal) is composed of 6 hexadecimal digits, and each two digits represent the brightness value of a color: the first pair of digits represents the red brightness value, the second pair of digits represents the green brightness value, and the third pair of digits represents the blue brightness value. For example, the HEX code of pure red is #FF0000, the HEX code of pure green is #00FF00, and the HEX code of pure blue is #0000FF.

[0070] The HSL code (hue, saturation and lightness) is composed of three parameters: hue, saturation and lightness. Hue represents the type of color, with a value range of 0-360; saturation represents the purity of color, with a value range of 0-100; and lightness represents the brightness of color, with a value range of 0-100. For example, the HSL code of pure red is hsl(0, 100%, 50%), the HSL code of pure green is hsl(120, 100%, 50%), and the HSL code of pure blue is hsl(240, 100%, 50%).

[0071] The method of representing color similarity by calculating Euclidean distance is described below using RGB code as an example:

[0072] 1, obtaining the RGB values of two colors to be calculated; 2, calculating the difference of the two colors on each color channel based on the RGB values; 3, calculating the sum of squares of all the differences; 4, taking the square root of the sum of squares calculated in step 3 to obtain the Euclidean distance between the two colors, and the smaller the Euclidean distance value, the more similar the two colors.

[0073] It should be noted that in addition to calculating the RGB Euclidean distance, the following methods can also be selected: HSL Euclidean distance, CIE76 color difference, CIEDE2000 color difference.

[0074] For each sampling area, the smaller the display color similarity between the element color code of the area and the page background color code, the more similar the content color and the background color of the area, and the more likely to cause unclear display.

[0075] In the embodiment of the application, the proportional value and the display color similarity are weighted and calculated by using a unified weighting coefficient to obtain feature values for representing the display features of each sampling area, and the feature value set stores the feature values of all sampling areas in the target page, and the more concentrated the feature values, the more similar the display features between the sampling areas, so that the page loading speed in the actual display process is faster, the code writing and maintenance difficulty is smaller, the rendering time is shorter, and the target page is easier to display normally.

[0076] Step S103, clustering processing the feature value set based on a preset clustering algorithm to obtain a clustering result, wherein the clustering result is used to represent the dispersion degree of all feature values.

[0077] Figure 2 is a flowchart of an optional page feature value clustering analysis according to an embodiment of the application, as shown in Figure 2 The clustering process includes the following steps:

[0078] S201, generating a feature value distribution graph based on the feature value set, wherein the feature value distribution graph contains M feature value points, and each feature value point corresponds to a feature value representing each sampling area;

[0079] S202, determining an aggregation center point based on the preset clustering algorithm and the feature value distribution graph;

[0080] S203, marking feature dispersion points in the feature value distribution graph based on the aggregation center point;

[0081] S204, querying the marked feature value distribution graph to obtain a clustering result.

[0082] It should be noted that the optional clustering algorithm includes: k-means, hierarchical clustering, DBSCAN, etc. The feature value set is input to the selected clustering algorithm, and the clustering result corresponding to the visual feature value distribution graph is directly output. In the embodiment of the application, the Seaborn scatter plot is selected to represent the feature value distribution of the target page, and the aggregation center, aggregation area and discrete points are automatically labeled. In addition, Matplotlib library, column chart and other forms can also be selected as the representation form of the feature value distribution graph.

[0083] Step S104, determining the display state of the target page based on the clustering result.

[0084] Optionally, step S104 includes: based on the clustering result, counting the number of feature discrete points; comparing the number of feature discrete points with a preset number threshold to obtain a comparison result; in the case that the comparison result indicates that the number of feature discrete points is less than or equal to the preset number threshold, determining that the display state of the target page is normal display; in the case that the comparison result indicates that the number of feature discrete points is greater than the preset number threshold, determining that the display state of the target page is abnormal display.

[0085] Optionally, after determining the display state of the target page based on the clustering result, it further includes: if the target page is determined to be abnormally displayed, obtaining the label element number and element color code of the sampling area corresponding to all feature discrete points; based on the label element number and element color code, outputting the reference reason for the abnormal display of the target page.

[0086] It should be noted that when outputting the reference reason for abnormal display, multiple categories can be included, for example, if the target page is determined to be abnormally displayed, the sampling area corresponding to the discrete point (i.e. the area of the target page that is abnormally displayed) is located, and the label element number and element color code thereof are obtained. If the label element number is too large, the output abnormal display reference reason is that the layout is too complex; if the label element number is too small, the output abnormal display reference reason is that the layout is misaligned; if the element color code is too similar to the background color code, the output abnormal display reference reason is that the display is white screen.

[0087] In the embodiment of the application, whether the target page is displayed normally is automatically determined according to the distribution of the page features and the feature values, without the need for human judgment and without the need for making a control group, saving the cost of manpower; the pages that are determined to be displayed abnormally are analyzed for abnormal problems and the abnormal reference reasons are automatically output, improving the page analysis efficiency; the extreme cases that cannot be distinguished by the naked eye of the test personnel (for example, DOM layout misalignment) are captured, and the page analysis is more refined.

[0088] The method provided by the embodiment of the present application is directly aimed at target pages for feature value calculation and display state determination, without considering specific device models or display attributes, and is applicable to all mainstream devices and non-mainstream devices.

[0089] The present application will be described in detail below in combination with another specific embodiment.

[0090] The embodiment of the present application proposes a page automatic determination method based on feature collection, obtains page feature distribution by collecting and calculating page features, identifies display abnormal conditions according to a clustering algorithm, and further infers reference reasons for page display abnormalities.

[0091] Figure 3 is a flowchart of an optional page automatic determination method based on feature collection according to the embodiment of the present application, as shown in the figure, the flow of the automatic determination method comprises the following steps. Figure 3

[0092] Step 1, calculating sampling points.

[0093] Obtaining a user visual area of a target browser, obtaining a target page, dividing the page into A*B grid areas (for example, 20*20, a total of 400 grid areas) according to the visual area, and taking the center position of each grid area as a sampling point.

[0094] Step 2, information collection.

[0095] Collecting information at each sampling point position marked in step 1, collecting DOM element conditions of the sampling points, obtaining DOM element quantity and display color information of the current sampling point position, and additionally, collecting DOM total quantity and background color of the page.

[0096] It should be noted that the display color and background color information can be represented by any one of the following color code systems: RGB code (red, green and blue), HEX code (hexadecimal), and HSL code (hue, saturation and lightness).

[0097] Step 3, calculating page features.

[0098] Calculating the proportion value of the DOM quantity of each sampling point position to the total DOM quantity of the page, and calculating the difference value between the display color of each sampling point position and the background color of the page, performing normalization processing on the proportion value and the difference value, and then performing weighted calculation according to a pre-configured weight to obtain the feature value of the current sampling point, and integrating to obtain a feature value set of the entire page visual area.

[0099] Step 4, clustering identification.

[0100] ​The characteristic value set obtained is summarized, a clustering algorithm is used to obtain the display effect distribution of the target page in all devices, and the part with similar characteristics and high proportion in the characteristic value distribution graph is determined as the normal condition, and the characteristics deviating from the part are determined as the abnormal condition.

[0101] Figure 4 is a scatter plot of page characteristic values according to an embodiment of the application, as shown in Figure 4 The right dense point area is the normal characteristic distribution area, and the left several discrete points are abnormal conditions.

[0102] Step 5, abnormal reason inference.

[0103] According to the page characteristics obtained from the characteristic value distribution graph, the reference reasons for the abnormal display of the target page are identified. For example, if the total number of DOM elements of the target page is 0, or the display color of the sampling point position is the same as the background color, the abnormal reference reason can be output as white screen; if the DOM proportion of each sampling area in the target page is obviously different, the abnormal reference reason can be output as layout misplacement.

[0104] In the embodiment of the application, whether the target page is displayed normally is automatically determined according to the page characteristics and the distribution of the characteristic values, without the need for manual determination and the need for making a control group, thereby saving the labor cost; the abnormal problem analysis is performed on the page with abnormal display, and the abnormal reference reason is automatically output, thereby improving the page analysis efficiency; the extreme condition (for example, DOM layout misplacement) that cannot be distinguished by the naked eye of the tester is captured, and the page analysis is more refined.

[0105] The method provided by the embodiment of the application is directly used for calculating the characteristic values of the target page and determining the display state, without considering the specific device model or display attribute, and is suitable for all mainstream devices and non-mainstream devices.

[0106] The application will be described below in combination with another optional embodiment.

[0107] Embodiment two

[0108] The page display state determination device provided in the embodiment includes a plurality of implementation units, and each implementation unit corresponds to each implementation step in the above embodiment one.

[0109] Figure 5 is a schematic diagram of a page display state determination device according to an embodiment of the application, as shown in Figure 5 The determination device can include an acquisition unit 51, a calculation unit 52, a clustering unit 53, and a determination unit 54, wherein,

[0110] The acquisition unit 51 is configured to acquire a target page set and collect label element information of each target page to obtain a label element information set, wherein the target page comprises M sampling regions, each sampling region corresponds to N label elements, and the label element information at least comprises a label element quantity, an element color code, and M and N are positive integers.

[0111] The calculation unit 52 is configured to calculate a feature value of each sampling region based on the label element information set to obtain a feature value set of the target page.

[0112] The clustering unit 53 is configured to perform clustering processing on the feature value set based on a preset clustering algorithm to obtain a clustering result, wherein the clustering result is used to represent a discrete degree of all feature values.

[0113] The determination unit 54 is configured to determine a display state of the target page based on the clustering result.

[0114] The above determination device can first acquire the target page set through the acquisition unit 51 and collect the label element information of each target page to obtain the label element information set, wherein the target page comprises M sampling regions, each sampling region corresponds to N label elements, and the label element information at least comprises a label element quantity, an element color code, and M and N are positive integers, then calculate the feature value of each sampling region based on the label element information set through the calculation unit 52 to obtain the feature value set of the target page, then perform clustering processing on the feature value set based on the preset clustering algorithm through the clustering unit 53 to obtain the clustering result, wherein the clustering result is used to represent the discrete degree of all feature values, and finally determine the display state of the target page based on the clustering result through the determination unit 54.

[0115] In the embodiment of the application, the label element quantity and the element color code are obtained by collecting the label element information in each target page, the page feature value of the target page is calculated by using the collected label element information to obtain the page feature value set, the page feature distribution is obtained by performing clustering processing on the page feature value set through the clustering algorithm, the clustering result is generated, the clustering result is used to represent the discrete degree of the page feature value, the target page with too dispersed feature values is more likely to have display abnormalities, and thus the display state of the target page can be determined through the clustering result, the feature value calculation and the display state determination are directly performed on the display page in the mobile terminal, the method is applicable to all types of terminal devices (all mainstream devices and non-mainstream devices), and the accuracy of the display state determination can be significantly improved, and thus the technical problem that the display state of part of the devices cannot be accurately detected by the page detection method in the related art and the device display abnormalities are prone to occur is solved.

[0116] Optionally, the obtaining unit comprises: a first obtaining module, configured to obtain a login information set, wherein the login information set comprises at least a username, a login password, and verification information; a login module, configured to log in to the target browser based on the login information set; and a first collecting module, configured to collect all user viewable areas in the target browser to obtain a target page set.

[0117] Optionally, the obtaining unit further comprises: a segmentation module, configured to segment each target page in the target page set based on a preset segmentation strategy to obtain M grid units; a first determination module, configured to, for each grid unit, determine a center position of the grid unit as a sampling point, determine a sampling area based on the sampling point and a preset sampling radius, and obtain M sampling areas, wherein each grid unit corresponds to one sampling area; and a second collecting module, configured to collect label element information of each sampling area to obtain a label element information set.

[0118] Optionally, the calculating unit comprises: a second obtaining module, configured to obtain a total number of label elements and a background color code of the target page; a first calculating module, configured to calculate a proportion value of the number of label elements in each sampling area to the total number of label elements; a second calculating module, configured to calculate a display color similarity between each sampling area and the overall page of the target page based on the element color code and the background color code; a third calculating module, configured to, for each sampling area, perform weighted calculation on the proportion value and the display color similarity based on a preset weight distribution strategy to obtain a feature value; and an integrating module, configured to integrate all feature values to obtain a feature value set of the target page.

[0119] Optionally, the clustering unit comprises: a generating module, configured to generate a feature value distribution map based on the feature value set, wherein the feature value distribution map comprises M feature value points, and each feature value point corresponds to a feature value representing each sampling area; a second determination module, configured to determine an aggregation center point based on a preset clustering algorithm and the feature value distribution map; a marking module, configured to mark feature discrete points in the feature value distribution map based on the aggregation center point; and a querying module, configured to query the marked feature value distribution map to obtain a clustering result.

[0120] Optionally, the determining unit comprises: a statistical module, configured to count the number of feature discrete points based on the clustering result; a comparison module, configured to compare the number of feature discrete points with a preset number threshold to obtain a comparison result; a first determination module, configured to determine that the display state of the target page is normal display in a case where the comparison result indicates that the number of feature discrete points is less than or equal to the preset number threshold; and a second determination module, configured to determine that the display state of the target page is abnormal display in a case where the comparison result indicates that the number of feature discrete points is greater than the preset number threshold.

[0121] Optionally, the page display state determining apparatus further comprises: a third acquisition module, configured to acquire the number of label elements and the element color code of the sampling region corresponding to each feature discrete point if the target page is determined to be abnormally displayed; and an output module, configured to output a reference cause of the abnormal display of the target page based on the number of label elements and the element color code.

[0122] The page display state determining apparatus described above can further comprise a processor and a memory, and the acquisition unit 51, the calculation unit 52, the clustering unit 53, and the determination unit 54 are all stored in the memory as program units, and the corresponding functions are realized by the processor executing the program units stored in the memory.

[0123] The processor described above comprises a kernel, and the kernel is used to call the corresponding program units from the memory. The kernel can be one or more, and the kernel parameters are adjusted to cluster the feature value set based on a preset clustering algorithm to obtain a clustering result, and the display state of the target page is determined based on the clustering result.

[0124] The memory described above can comprise a non-permanent memory in a computer readable medium, a random access memory (RAM), and / or a non-volatile memory such as a read-only memory (ROM) or a flash memory (flash RAM), and the memory comprises at least one memory chip.

[0125] The application further provides a computer program product adapted to execute the program of the following method steps when executed on a data processing device: acquiring a target page set, and collecting label element information of each target page to obtain a label element information set, wherein the target page comprises M sampling regions, each sampling region corresponds to N label elements, and the label element information at least comprises a label element number and an element color code, M and N are both positive integers; calculating a feature value of each sampling region based on the label element information set to obtain a feature value set of the target page; clustering the feature value set based on a preset clustering algorithm to obtain a clustering result, wherein the clustering result is used to represent the discrete degree of all feature values; and determining the display state of the target page based on the clustering result.

[0126] According to another aspect of the embodiment of the application, a computer readable storage medium is further provided, and the computer readable storage medium comprises a stored computer program, wherein the computer program controls the device where the computer readable storage medium is located to execute the page display state determining method of any one of the above when the computer program is running.

[0127] According to another aspect of the embodiments of the present application, an electronic device is also provided, which includes one or more processors and a memory storing one or more programs, wherein the one or more programs, when executed by the one or more processors, cause the one or more processors to implement any of the above-mentioned page display state determination methods.

[0128] Figure 6 is a hardware structure block diagram of an electronic device (or a mobile device) for a page display state determination method according to an embodiment of the present application. As shown in Figure 6 , the electronic device can include one or more (as shown in Figure 6 , 602a, 602b, …, 602n) processors 602 (the processor 602 can include, but is not limited to, a processing device such as a microprocessor MCU or a programmable logic device FPGA) and a memory 604 for storing data. In addition, it can also include a display, an input / output interface (I / O interface), a universal serial bus (USB) port (which can be included as one of the ports of the I / O interface), a network interface, a keyboard, a power supply and / or a camera. Those skilled in the art can understand that Figure 6 , the structure shown is only schematic, and does not limit the structure of the above-mentioned electronic device. For example, the electronic device can include more or fewer components than those shown in Figure 6 , or have a different configuration from that shown in Figure 6 .

[0129] The above-mentioned serial numbers of the embodiments of the present application are only for description, and do not represent the advantages or disadvantages of the embodiments.

[0130] In the above-mentioned embodiments of the present application, the description of each embodiment has its own emphasis, and the parts not described in detail in a certain embodiment can be referred to the related description of other embodiments.

[0131] In the several embodiments provided in the present application, it should be understood that the disclosed technology can be implemented in other ways. Of course, the device embodiment described above is only schematic. For example, the division of the units can be a logical function division, and there can be another division manner in actual implementation, for example, a plurality of units or components can be combined or integrated into another system, or some features can be ignored or not executed. In addition, the coupling or direct coupling or communication connection between the units shown or discussed can be indirect coupling or communication connection through some interface, unit or module, and can be electrical or other forms.

[0132] The units described as separate components may or may not be physically separate, and the components displayed as units may or may not be physical units, that is, may be located in one place, or may be distributed to multiple units. Part or all of the units can be selected according to actual needs to achieve the purpose of the embodiment scheme.

[0133] In addition, each functional unit in each embodiment of the present application can be integrated in one processing unit, or each unit can exist physically, or two or more units can be integrated in one unit. The integrated unit can be realized in the form of hardware or in the form of a software functional unit.

[0134] The integrated unit, if realized in the form of a software functional unit and sold or used as an independent product, can be stored in a computer readable storage medium. Based on such understanding, the technical scheme of the present application or the part of the present application which contributes to the prior art or the whole or part of the technical scheme can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes a plurality of instructions for causing a computer device (which can be a personal computer, a server or a network device, etc.) to execute all or part of the steps of the method described in each embodiment of the present application. The foregoing storage medium includes various media that can store program codes, such as a U disk, a read-only memory (ROM), a random access memory (RAM), a mobile hard disk, a magnetic disk or an optical disk.

[0135] The above is only the preferred embodiment of the present application. It should be noted that for those skilled in the art, without departing from the principles of the present application, a number of improvements and refinements can be made, and these improvements and refinements should be considered as the protection scope of the present application.

Claims

1. A method for determining the display status of a page, characterized in that, include: Obtain a set of target pages and collect the tag element information of each target page to obtain a set of tag element information. The target page includes M sampling areas, and each sampling area corresponds to N tag elements. The tag element information includes at least: the number of tag elements and the element color code. M and N are both positive integers. The feature value of each sampling region is calculated based on the tag element information set to obtain the feature value set of the target page, including: obtaining the total number of tag elements and background color code of the target page; calculating the ratio of the number of tag elements in each sampling region to the total number of tag elements; calculating the display color similarity between each sampling region and the overall page of the target page based on the element color code and the background color code; for each sampling region, the ratio and the display color similarity are weighted according to a preset weight allocation strategy to obtain the feature value; and integrating all the feature values ​​to obtain the feature value set of the target page. The feature value set is clustered based on a preset clustering algorithm to obtain a clustering result, wherein the clustering result is used to characterize the degree of dispersion of all the feature values; The display status of the target page is determined based on the clustering results.

2. The determination method according to claim 1, characterized in that, The steps to obtain the target page collection include: Obtain a set of login information, wherein the set of login information includes at least: username, login password, and verification information; Log in to the target browser based on the aforementioned login information set; Collect all user-visible areas in the target browser to obtain the target page set.

3. The determination method according to claim 1, characterized in that, The steps for collecting tag element information from each target page to obtain a tag element information set include: Each target page in the target page set is segmented based on a preset segmentation strategy to obtain M grid units; For each grid cell, the center position of the grid cell is determined as a sampling point, and the sampling area is determined based on the sampling point and a preset sampling radius to obtain M sampling areas, wherein each grid cell corresponds to one sampling area; Collect the tag element information of each of the sampling areas to obtain the tag element information set.

4. The determination method according to claim 1, characterized in that, The steps of clustering the feature value set based on a preset clustering algorithm to obtain the clustering results include: A feature value distribution map is generated based on the feature value set, wherein the feature value distribution map contains M feature value points, and each feature value point corresponds to a feature value representing each of the sampling regions; Based on the preset clustering algorithm and the feature value distribution map, the aggregation center point is determined; Based on the aggregation center point, mark the feature discrete points in the feature value distribution map; The clustering result is obtained by querying the feature value distribution map after the tagging.

5. The determination method according to claim 4, characterized in that, The step of determining the display status of the target page based on the clustering results includes: Based on the clustering results, the number of the feature discrete points is counted; The number of the feature discrete points is compared with a preset quantity threshold to obtain the comparison result; If the comparison result indicates that the number of the feature discrete points is less than or equal to the preset quantity threshold, the display status of the target page is determined to be normal display; If the comparison result indicates that the number of discrete feature points is greater than the preset quantity threshold, the display status of the target page is determined to be abnormal.

6. The determination method according to claim 5, characterized in that, After determining the display status of the target page based on the clustering results, the process further includes: If the target page is determined to be displayed abnormally, obtain the number of label elements and the color code of the elements in the sampling region corresponding to all the feature discrete points; Based on the number of the tag elements and the color code of the elements, output a reference reason for the abnormal display of the target page.

7. A device for determining the display state of a page, characterized in that, include: The acquisition unit is used to acquire a set of target pages and collect the tag element information of each target page to obtain a set of tag element information. The target page includes M sampling areas, each sampling area corresponds to N tag elements, and the tag element information includes at least: the number of tag elements and the element color code, where M and N are both positive integers. The calculation unit is used to calculate the feature value of each of the sampling regions based on the tag element information set, so as to obtain the feature value set of the target page; The calculation unit includes: a second acquisition module, used to acquire the total number of tag elements and background color code of the target page; a first calculation module, used to calculate the ratio of the number of tag elements in each sampling area to the total number of tag elements; a second calculation module, used to calculate the display color similarity between each sampling area and the overall page of the target page based on the element color code and the background color code; a third calculation module, used to perform a weighted calculation on the ratio and the display color similarity for each sampling area based on a preset weight allocation strategy to obtain the feature value; and an integration module, used to integrate all the feature values ​​to obtain the feature value set of the target page. A clustering unit is used to perform clustering processing on the feature value set based on a preset clustering algorithm to obtain a clustering result, wherein the clustering result is used to characterize the degree of dispersion of all the feature values; The determination unit is used to determine the display status of the target page based on the clustering results.

8. A computer-readable storage medium, characterized in that, The computer-readable storage medium includes a stored computer program, wherein, when the computer program is executed, it controls the device on which the computer-readable storage medium is located to execute the page display state determination method according to any one of claims 1 to 6.

9. An electronic device, characterized in that, It includes one or more processors and a memory, the memory being used to store one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors cause the one or more processors to implement the page display state determination method according to any one of claims 1 to 6.

Images