Page anomaly detection method and device, equipment and storage medium

Abstract

The invention belongs to the technical field of front-end pages, and discloses a page anomaly detection method and device, equipment and a storage medium. According to the method, the to-be-detected page is input into the preset target detection model, the first anomaly detection result is obtained, anomaly detection is carried out on the to-be-detected page through the preset detection rule, and the second anomaly detection result is obtained; and determining a target anomaly detection result corresponding to the to-be-detected page according to the first anomaly detection result and the second anomaly detection result. According to the method, the to-be-detected page is input into the preset target detection model for anomaly detection, anomaly detection is performed on the to-be-detected page through the preset detection rule, and then the target anomaly detection result is determined according to the obtained first anomaly detection result and the second anomaly detection result; the front-end page anomaly detection can be accurately and effectively carried out by combining the anomaly detection of the target detection model and the rule anomaly detection.

Description

Technical Field

[0001] This application relates to the field of front-end page technology, and in particular to a method, apparatus, device and storage medium for detecting page anomalies. Background Technology

[0002] Front-end anomalies directly impact user experience. Issues such as page loading failures, style misalignments, or functional malfunctions can reduce user satisfaction and even disrupt business transactions. Therefore, quickly and accurately detecting and fixing front-end anomalies is crucial for maintaining user experience and business success. However, traditional front-end anomaly detection tools often have high false positive rates, increasing the workload for developers and potentially masking the real problems. Summary of the Invention

[0003] The main objective of this application is to provide a method, apparatus, device, and storage medium for detecting page anomalies, aiming to solve the technical problem of how to accurately and effectively detect anomalies in front-end pages.

[0004] To achieve the above objectives, this application provides a page anomaly detection method, which includes the following steps: The page to be detected is input into the preset target detection model to obtain the first anomaly detection result; Anomaly detection is performed on the page to be detected using preset detection rules to obtain a second anomaly detection result. The target anomaly detection result corresponding to the page to be detected is determined based on the first anomaly detection result and the second anomaly detection result.

[0005] Optionally, before inputting the page to be detected into the preset target detection model to obtain the first anomaly detection result, the method further includes: Determine the exception type corresponding to the initial page, and determine the initial detection box information corresponding to the initial page based on the exception type. The initial detection box information includes the exception type number corresponding to the exception type and the coordinate information of the initial detection box. Training samples are constructed based on the initial page and the initial detection box information; The initial target detection model is trained based on the training samples to obtain the preset target detection model.

[0006] Optionally, determining the initial detection box information corresponding to the initial page based on the anomaly type includes: In the case where the anomaly type is text overlap, the initial text box in the initial page is extracted; Randomly select a target text box from the initial text box, and convert the target text box into a transparent text block; The transparent text block is moved so that the moved text block overlaps with the initial text block in the initial page, and the original text block that overlaps with the initial text block is selected from the initial text block; The union of the moved text block and the original text block is used as the initial detection box, and the coordinate information of the initial detection box is obtained.

[0007] Optionally, the step of performing anomaly detection on the page to be detected using preset detection rules to obtain a second anomaly detection result includes: Select text overflow detection rules and image stretching detection rules from the preset detection rules; The text overflow detection rule is used to perform text overflow detection on the page to be detected, and the text overflow detection result is obtained. The image stretching detection rule is used to perform image stretching detection on the page to be detected, and the image stretching detection result is obtained. The second anomaly detection result is determined based on the text overflow detection result and the image stretching detection result.

[0008] Optionally, the step of performing text overflow detection on the page to be detected using the text overflow detection rules to obtain the text overflow detection result includes: Identify the parent and child elements in the page to be detected; If the sum of the total width of the child element plus the sum of the left and right margins of the child element plus the sum of the left and right margins of the parent element is greater than the actual usable width of the parent element, then the text overflow detection result is determined to be text overflow; or, If the sum of the total height of the child element plus the sum of the left and right outer margins of the child element plus the sum of the left and right inner margins of the parent element is greater than the actual usable height of the parent element, then the text overflow detection result is determined to be text overflow.

[0009] Optionally, the step of performing image stretching detection on the page to be detected using the image stretching detection rules to obtain the image stretching detection result includes: Determine the original height and original width of the original image in the page to be detected, and calculate the original aspect ratio based on the original height and original width; Determine the rendering height and rendering width of the rendered image in the page to be detected, and calculate the rendering aspect ratio based on the rendering height and rendering width; Construct a preset inequality based on the deformation threshold; If the original aspect ratio and the rendered aspect ratio satisfy the preset inequality, the image stretching detection result is determined to indicate that image stretching exists.

[0010] Optionally, before constructing the preset inequality based on the deformation threshold, the method further includes: The original image is preprocessed to obtain the processed image; Edge detection is performed on the processed image to obtain edge features; The image type corresponding to the original image is determined based on the edge features; The deformation threshold is determined based on the image type, the original size of the original image, and the rendered size of the rendered image.

[0011] Furthermore, to achieve the above objectives, this application also provides a page anomaly detection device, the page anomaly detection device comprising: The first anomaly detection module is used to input the page to be detected into the preset target detection model and obtain the first anomaly detection result; The second anomaly detection module is used to perform anomaly detection on the page to be detected according to preset detection rules and obtain a second anomaly detection result. The page anomaly detection module is used to determine the target anomaly detection result corresponding to the page to be detected based on the first anomaly detection result and the second anomaly detection result.

[0012] In addition, to achieve the above objectives, this application also proposes a page anomaly detection device, which includes: a memory, a processor, and a computer program stored in the memory and executable on the processor, the computer program being configured to implement the steps of the page anomaly detection method described above.

[0013] In addition, to achieve the above objectives, this application also proposes a storage medium, which is a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by a processor, it implements the steps of the page anomaly detection method described above.

[0014] This application inputs the page to be detected into a preset target detection model to obtain a first anomaly detection result, and then performs anomaly detection on the page to be detected using preset detection rules to obtain a second anomaly detection result. Finally, it determines the target anomaly detection result corresponding to the page to be detected based on the first and second anomaly detection results. This application combines anomaly detection from the target detection model with rule-based anomaly detection, enabling accurate and effective front-end page anomaly detection. Attached Figure Description

[0015] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application.

[0016] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, for those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0017] Figure 1 This is a flowchart illustrating the first embodiment of the page anomaly detection method of this application; Figure 2 This is a flowchart illustrating the second embodiment of the page anomaly detection method of this application; Figure 3 This is a flowchart illustrating the third embodiment of the page anomaly detection method of this application; Figure 4 This is a text overflow CSS box model diagram of an embodiment of the page anomaly detection method of this application; Figure 5 This is a structural block diagram of the first embodiment of the page anomaly detection device of this application; Figure 6 This is a schematic diagram of the structure of a page anomaly detection device in the hardware operating environment involved in the embodiments of this application.

[0018] The realization of the purpose, functional features and advantages of this application will be further explained in conjunction with the embodiments and with reference to the accompanying drawings. Detailed Implementation

[0019] It should be understood that the specific embodiments described herein are merely illustrative of the technical solutions of this application and are not intended to limit this application.

[0020] To better understand the technical solution of this application, a detailed description will be provided below in conjunction with the accompanying drawings and specific implementation methods.

[0021] The main solution of this application embodiment is: inputting the page to be detected into a preset target detection model to obtain a first anomaly detection result; performing anomaly detection on the page to be detected through preset detection rules to obtain a second anomaly detection result; and determining the target anomaly detection result corresponding to the page to be detected based on the first anomaly detection result and the second anomaly detection result.

[0022] Front-end anomalies directly impact user experience. Issues such as page loading failures, style misalignments, or functional malfunctions can reduce user satisfaction and even disrupt business transactions. Therefore, quickly and accurately detecting and fixing front-end anomalies is crucial for maintaining user experience and business success. However, traditional front-end anomaly detection tools often have high false positive rates, increasing the workload for developers and potentially masking the real problems.

[0023] This application inputs the page to be detected into a preset target detection model to obtain a first anomaly detection result, and then performs anomaly detection on the page to be detected using preset detection rules to obtain a second anomaly detection result. Finally, it determines the target anomaly detection result corresponding to the page to be detected based on the first and second anomaly detection results. This application combines anomaly detection from the target detection model with rule-based anomaly detection, enabling accurate and effective front-end page anomaly detection.

[0024] It should be noted that the executing entity of this application can be a computing service device with data processing, network communication and program execution functions, such as a computer.

[0025] Based on this, embodiments of this application provide a method for detecting page anomalies, referring to... Figure 1 , Figure 1 This is a flowchart illustrating the first embodiment of the page anomaly detection method of this application.

[0026] In this embodiment, the page anomaly detection method includes the following steps: Step S10: Input the page to be detected into the preset target detection model to obtain the first anomaly detection result.

[0027] Understandably, the page to be checked refers to the page in the front end that needs to be checked for anomalies, and this page may include text, images, etc.

[0028] It should be understood that a preset object detection model refers to a pre-set model for object detection, such as the YOLO object detection model. Inputting the page to be detected into the preset object detection model yields a first anomaly detection result. This first anomaly detection result may include the object detection box and the corresponding anomaly probability. The object detection box refers to the location of the anomaly on the page to be detected, and the anomaly probability refers to the probability of the anomaly appearing within the object detection box.

[0029] Step S20: Perform anomaly detection on the page to be detected using preset detection rules to obtain a second anomaly detection result.

[0030] Understandably, the preset detection rules can detect two abnormal situations on the page to be detected: text overflow or image stretching, and obtain a second detection result. The second detection result can include whether the page to be detected has text overflow or image stretching.

[0031] Step S30: Determine the target anomaly detection result corresponding to the page to be detected based on the first anomaly detection result and the second anomaly detection result.

[0032] Understandably, the target anomaly detection result corresponding to the page to be detected can be determined based on the first anomaly detection result and the second anomaly detection result. The target anomaly detection result may include the anomaly type, anomaly location, etc., corresponding to the page to be detected.

[0033] It should be understood that this embodiment can also perform HTML static code inspection on the page to be inspected. Specifically, the html-validate library can be integrated into the Python project to inspect the HTML code according to W3C standards, ensuring the correctness and standardization of the code. Common anomaly detections include: element closing order verification, empty element checking, attribute value verification, deprecated element and attribute identification, DOCTYPE declaration checking, character encoding verification, and semantic tag usage standardization checking, etc.

[0034] In a specific implementation, this embodiment can also perform JavaScript runtime exception listening on the page to be tested. Specifically, Pyppeteer can be used to simulate a device to test the webpage, and a listener can be configured to capture errors and exceptions (general errors, page state-related exceptions, and errors when network requests fail) to enhance the comprehensiveness and accuracy of the test.

[0035] In addition, this embodiment can also detect abnormal keywords on the page to be tested. Specifically, a list of abnormal keywords can be set for the page to be tested. The keyword list includes, but is not limited to: "500 Internal Server Error", "404 Not Found", "Page is not working", "Server is having problems", "Activity is offline", "This function is not online", "vConsole", "Baidu account", "Short URL does not exist", "External login page", etc. By using web crawling technology, the content of the page to be tested is scanned and matched with these keywords in order to quickly identify problems and notify the relevant page administrators for repair.

[0036] This embodiment inputs the page to be detected into a preset target detection model to obtain a first anomaly detection result, and then performs anomaly detection on the page to be detected using preset detection rules to obtain a second anomaly detection result. Finally, it determines the target anomaly detection result corresponding to the page to be detected based on the first and second anomaly detection results. This embodiment combines anomaly detection from the target detection model with rule-based anomaly detection for accurate and effective front-end page anomaly detection.

[0037] refer to Figure 2 , Figure 2 This is a flowchart illustrating the second embodiment of the page anomaly detection method of this application.

[0038] Based on the first embodiment described above, in this embodiment, before step S10, the method further includes: Step S01: Determine the exception type corresponding to the initial page, and determine the initial detection box information corresponding to the initial page based on the exception type. The initial detection box information includes the exception type number corresponding to the exception type and the coordinate information of the initial detection box.

[0039] Understandably, the initial page can be a pre-acquired page used for model training, and can include normal pages and abnormal pages. The abnormal types corresponding to the initial page can include text overlap, text truncation, skeleton screen, and blank page. Text overlap refers to two unrelated texts overlapping each other; text truncation refers to only displaying a portion of a complete text, such as the top or bottom half; skeleton screen refers to a portion of the page that has not yet loaded; and blank page refers to empty portions of the page.

[0040] In the implementation, the initial detection box information corresponding to the initial page can be determined based on the exception type. The initial detection box information can include the exception type number and the coordinate information of the initial detection box. Each exception type can be pre-numbered; for example, text overlap is numbered 1, text truncation exception is numbered 2, and skeleton screens and page blanks are similar and can all be numbered 3. The initial detection box can be a detection box for the exception portion of the initial page. The initial detection box can be a rectangle, and the coordinate information can be the coordinates of the top-left and bottom-right corners of the initial detection box.

[0041] Furthermore, in order to effectively obtain the initial detection box when the anomaly type is text overlap, in this embodiment, determining the initial detection box information corresponding to the initial page based on the anomaly type includes: extracting the initial text box in the initial page when the anomaly type is text overlap; randomly selecting a target text box from the initial text box and converting the target text box into a transparent text block; moving the transparent text block so that the moved text block overlaps with the initial text block in the initial page, and selecting the original text block that overlaps from the initial text block; taking the union of the moved text block and the original text block as the initial detection box, and obtaining the coordinate information of the initial detection box.

[0042] It should be understood that text overlap may occur when text is not excessively long and overflows, or when element positions are incorrectly set. In cases where the anomaly is text overlap, the initial text in the initial page can be extracted first using OCR (Optical Character Recognition). Each initial text box contains one initial text, and one text box is randomly selected as the target text box. The target text box is then converted into a transparent text block. Specifically, the target text box can be converted to grayscale first, then binarized to obtain a mask, and then the mask can be used to set a transparent background color, thereby making the background of the target text box transparent and obtaining a transparent text block.

[0043] Understandably, the transparent text block can be moved in any direction (up, down, left, or right) to overlap with any initial text block on the initial page, and this original text block is used as the original text block that caused the overlap. The union of the moved text block and the original text block is then used as the initial detection box, and the coordinates of the top-left and bottom-right corners of the initial detection box are used as its coordinate information.

[0044] In practical implementation, abnormal truncation occurs when text is collapsed by other opaque elements (e.g., insufficient spacing height). In cases of abnormal text truncation, the coordinates of the initial detection box can be obtained using the method described above. In one feasible embodiment, the initial text in the initial page can be extracted first using OCR (Optical Character Recognition). Each initial text box contains one initial text, and one is randomly selected from these initial text boxes as the target text box. The target text box is then converted into a transparent text block. Specifically, the target text box can be converted to grayscale first, then binarized to obtain a mask. A morphological operation—dilation—is then performed on the mask, and the background color is used for filling and repair, thereby making the background of the target text box transparent, resulting in a transparent text block. Then, a portion of the transparent text block is randomly truncated to create a truncation effect, and the truncated text block is used as the initial detection box.

[0045] In this embodiment, if some modules of the page cannot be displayed due to network issues or other unpredictable circumstances, a skeleton screen or a blank page will be displayed. The construction process for these two abnormal samples is similar: a skeleton screen module is automatically generated, highly randomized grayscale blank image blocks are created, and these blocks are stitched together to form the abnormal page. The grayscale blank image blocks form the initial detection box.

[0046] Step S02: Construct training samples based on the initial page and the initial detection box information.

[0047] Understandably, the format of the initial detection box information can be: abnormal_type, x start y start x end y end abnormal_type represents the exception type number, x start y start This represents the coordinates of the top-left corner of the initial detection box, x. end y end This represents the coordinates of the bottom right corner of the initial detection box. Training samples may include the initial page and the corresponding initial detection box information.

[0048] Step S03: Train the initial target detection model based on the training samples to obtain a preset target detection model.

[0049] It should be understood that this embodiment can construct 800 training samples using both standard and foldable screen versions of the page, such as mobile banking pages, search pages, news pages, e-commerce pages, etc., and divide the training set, validation set, and test set in a 18:1:1 ratio. Using the official YOLOv5 code, the configuration file for the page UI anomaly detection task was customized, and the number of categories in the yolov5m.yaml configuration file was modified to 3 (merging skeleton screens and blank areas into one category). The image input size was increased to 1024*1024 to adapt to foldable screens, and the data augmentation reduced the scaling rate from ±50% to ±20% to prevent distortion caused by excessive image reduction.

[0050] Understandably, an initial object detection model can be trained using training samples. The model's evaluation metrics include precision, recall, mAP50, and mAP50-95. The hyperparameters (number of iterations, learning rate, etc.) of the model training can be adjusted according to actual accuracy requirements to ensure that the model meets the aforementioned evaluation metrics, thereby obtaining the pre-trained object detection model.

[0051] In practical implementation, YOLOv5's advantage lies in its ability to deploy lightweight models for rapid detection under resource constraints, while YOLOv7's advantage lies in its ability to improve anomaly detection accuracy for small targets (such as tiny text and icons). YOLOv7 is suitable for pages with a large number of tiny elements; YOLOv5 is more suitable for deploying models under resource constraints.

[0052] This embodiment determines the anomaly type corresponding to the initial page and determines the initial detection box information corresponding to the initial page based on the anomaly type. The initial detection box information includes the anomaly type number corresponding to the anomaly type and the coordinate information of the initial detection box. Then, training samples are constructed based on the initial page and the initial detection box information, and the initial target detection model is trained based on the training samples to obtain the preset target detection model.

[0053] refer to Figure 3 , Figure 3 This is a flowchart illustrating the third embodiment of the page anomaly detection method of this application.

[0054] Based on the above embodiments, in this embodiment, step S20 includes: Step S201: Select the text overflow detection rule and the image stretching detection rule from the preset detection rules.

[0055] Understandably, preset detection rules can be used to detect text overflow or image stretching deformation on the page to be detected. Therefore, preset detection rules can include text overflow detection rules and image stretching detection rules.

[0056] Step S202: Perform text overflow detection on the page to be detected using the text overflow detection rules to obtain the text overflow detection result.

[0057] Furthermore, in order to accurately and effectively detect text overflow on the page to be detected, in this embodiment, step S202 includes: determining the parent element and child element in the page to be detected; if the sum of the total width of the child element plus the sum of the left and right outer margins of the child element plus the sum of the left and right inner margins of the parent element is greater than the actual usable width of the parent element, determining that the text overflow detection result is that text overflow exists; or, if the sum of the total height of the child element plus the sum of the left and right outer margins of the child element plus the sum of the left and right inner margins of the parent element is greater than the actual usable height of the parent element, determining that the text overflow detection result is that text overflow exists.

[0058] It should be understood that, referring to Figure 4 , Figure 4 This is a text overflow CSS box model diagram of an embodiment of the page anomaly detection method of this application, as shown below. Figure 4 As shown, the text overflow anomaly can be represented more intuitively using the CSS box model. Let its parent element DOM object be parent. Then it must have: (1) parent.scrollWidth > parent.clientWidth. parent.scrollWidth is the total width of the parent element's content area, including the part that is not visible due to overflow and needs to be scrolled to see. It can be understood as the actual total width of all the content inside the parent element after it is expanded. parent.clientWidth is the actual usable width of the parent element. If the child element is child, then parent.scrollWidth and child have the following relationship: (2) parent.scrollWidth = child.offsetWidth + child.marginLeft + child.marginRight + parent.paddingLeft + parent.paddingRight. child.offsetWidth is the full width of the child element itself, which includes the width of the child element, the width of the vertical scrollbar and the width of the left and right borders. child.marginLeft + child.marginRight is the sum of the left and right margins of the child element. The margin is the transparent interval between the child element and other surrounding elements. parent.paddingLeft + parent.paddingRight is the sum of the left and right inner margins of the parent element. The inner margin is the interval between the border of the parent element and its actual content.

[0059] Understandably, from the above inequalities (1) and (2), we can obtain inequality (3): child.offsetWidth + child.marginLeft + child.marginRight + parent.paddingLeft + parent.paddingRight > parent.clientWidth. Traversing each DOM element from the root node of the page, when an element satisfying inequality (1) is found, its internal child elements may have text overflow. Traversing its child element DOM objects, if the child element is a leaf node and its innerHTML is not empty, its width is further judged. When inequality (3) is satisfied, it means that a child element that has caused text overflow has been found. The same formula can be derived for both the standard box model and the quirks box model, which will not be repeated in this embodiment.

[0060] In the specific implementation, similarly, in the height direction, there are: Inequality (4) parent.scrollHeight > parent.clientHeight, where parent.scrollHeight is the total height of the parent element's content area, and parent.clientHeight is the actual usable height of the parent element. Inequality (5) child.offsetHeight + child.marginTop + child.marginBottom + parent.paddingTop + parent.paddingBottom > parent.clientHeight, where child.offsetHeight is the complete height of the child element itself, which includes the height of the child element, the height of the vertical scrollbar, and the height of the top and bottom borders; child.marginLeft + child.marginRight is the sum of the top and bottom margins of the child element, where the margin is the transparent spacing between the child element and other surrounding elements; parent.paddingLeft + parent.paddingRight is the sum of the top and bottom inner margins of the parent element, where the inner margin is the spacing between the parent element's border and its actual content. Traverse each DOM element from the root node of the page. When an element that satisfies inequality (4) is found, its internal child elements may have text overflow. Traverse its child element DOM objects. If the child element is a leaf node and its innerHTML is not empty, then its height is further judged. When (5) is satisfied, it means that the child element that has text overflow has been found. The standard box model and the quirky box model have the same inequality relationship.

[0061] Step S203: Perform image stretching detection on the page to be detected using the image stretching detection rules to obtain the image stretching detection result.

[0062] Furthermore, in order to accurately and effectively perform image stretching detection on the page to be detected, in this embodiment, step S203 includes: determining the original height and original width corresponding to the original image in the page to be detected, and calculating the original aspect ratio based on the original height and original width; determining the rendered height and rendered width corresponding to the rendered image in the page to be detected, and calculating the rendered aspect ratio based on the rendered height and rendered width; constructing a preset inequality based on a deformation threshold; and determining that the image stretching detection result is that image stretching exists when the original aspect ratio and the rendered aspect ratio satisfy the preset inequality.

[0063] Understandably, in order to determine whether the page to be inspected exhibits an anomaly of image stretching or distortion, this embodiment can first determine the original image in the page to be inspected and the rendered image corresponding to that original image, and obtain the original height corresponding to the original image. and original width The rendered height of the image and rendering width Original aspect ratio Render aspect ratio .

[0064] It should be understood that the presupposed inequalities can be: The tolerance threshold represents the deformation threshold. If the rendered aspect ratio of the page to be detected satisfies the aforementioned preset inequality with respect to the original aspect ratio, then the page to be detected is determined to have image stretching deformation.

[0065] Furthermore, in order to accurately obtain the deformation threshold, in this embodiment, before constructing the preset inequality based on the deformation threshold, the method further includes: preprocessing the original image to obtain a processed image; performing edge detection on the processed image to obtain edge features; determining the image type corresponding to the original image based on the edge features; and determining the deformation threshold based on the image type, the original size corresponding to the original image, and the rendering size corresponding to the rendered image.

[0066] Understandably, the original image can be preprocessed, such as by standardizing its size and converting it to grayscale to reduce interference. Then, the classic Canny algorithm can be used to extract edges, and features such as the number and proportion of edge pixels can be statistically analyzed to obtain edge features. Images with edge features below a threshold are classified as simple textures, i.e., background images. This threshold can be set to 0.08. For such images, no deformation threshold can be set, and the deformation threshold tolerance is set to ∞, allowing the image to be stretched arbitrarily.

[0067] It should be understood that, for and For extremely small elements, all less than 5 pixels, almost invisible to the naked eye, no deformation threshold is set, meaning the deformation threshold tolerance is ∞, allowing the image to be stretched arbitrarily. and For elements smaller than 100 pixels with relatively large original dimensions (more than 5 times the rendered dimensions), the rendered content may be a thumbnail. Therefore, the tolerance deformation threshold is relaxed to 0.16, allowing for slight stretching deformation. For other normal-sized images, the tolerance deformation threshold is more strictly limited to 0.08, with no obvious stretching deformation visible to the naked eye. A stricter or more lenient deformation threshold can be set according to requirements.

[0068] Step S204: Determine the second anomaly detection result based on the text overflow detection result and the image stretching detection result.

[0069] Understandably, the second anomaly detection result may include whether the image to be detected has text overflow or image stretching.

[0070] This embodiment selects text overflow detection rules and image stretching detection rules from preset detection rules. Then, it performs text overflow detection on the page to be tested using the text overflow detection rules to obtain a text overflow detection result. Next, it performs image stretching detection on the page to be tested using the image stretching detection rules to obtain an image stretching detection result. Finally, it determines a second anomaly detection result based on the text overflow detection result and the image stretching detection result. This embodiment accurately and effectively performs text overflow detection and image stretching detection on the page to be tested, thereby obtaining an accurate second anomaly detection result.

[0071] Reference Figure 5 , Figure 5 This is a structural block diagram of the first embodiment of the page anomaly detection device of this application.

[0072] like Figure 5 As shown, the page anomaly detection device proposed in this application includes: The first anomaly detection module 10 is used to input the page to be detected into the preset target detection model and obtain the first anomaly detection result; The second anomaly detection module 20 is used to perform anomaly detection on the page to be detected according to preset detection rules and obtain a second anomaly detection result. The page anomaly detection module 30 is used to determine the target anomaly detection result corresponding to the page to be detected based on the first anomaly detection result and the second anomaly detection result.

[0073] This embodiment inputs the page to be detected into a preset target detection model to obtain a first anomaly detection result, and then performs anomaly detection on the page to be detected using preset detection rules to obtain a second anomaly detection result. Finally, it determines the target anomaly detection result corresponding to the page to be detected based on the first and second anomaly detection results. This embodiment combines anomaly detection from the target detection model with rule-based anomaly detection for accurate and effective front-end page anomaly detection.

[0074] It should be noted that the workflow described above is merely illustrative and does not limit the scope of protection of this application. In practical applications, those skilled in the art can select some or all of it to achieve the purpose of this embodiment according to actual needs, and no restrictions are imposed here.

[0075] In addition, for technical details not described in detail in this embodiment, please refer to the page anomaly detection method provided in any embodiment of this application, which will not be repeated here.

[0076] Based on the first embodiment of the page anomaly detection device described in this application, a second embodiment of the page anomaly detection device of this application is proposed.

[0077] In this embodiment, the first anomaly detection module 10 is further configured to determine the anomaly type corresponding to the initial page, and determine the initial detection box information corresponding to the initial page based on the anomaly type. The initial detection box information includes the anomaly type number corresponding to the anomaly type and the coordinate information of the initial detection box. Training samples are constructed based on the initial page and the initial detection box information. The initial target detection model is trained based on the training samples to obtain a preset target detection model.

[0078] Furthermore, the first anomaly detection module 10 is also configured to: extract an initial text box from the initial page when the anomaly type is text overlap; randomly select a target text box from the initial text box and convert the target text box into a transparent text block; move the transparent text block so that the moved text block overlaps with the initial text block in the initial page, and select the original text block that overlaps from the initial text block; take the union of the moved text block and the original text block as the initial detection box, and obtain the coordinate information of the initial detection box.

[0079] Furthermore, the second anomaly detection module 20 is also used to select text overflow detection rules and image stretching detection rules from preset detection rules; perform text overflow detection on the page to be detected using the text overflow detection rules to obtain text overflow detection results; perform image stretching detection on the page to be detected using the image stretching detection rules to obtain image stretching detection results; and determine a second anomaly detection result based on the text overflow detection results and the image stretching detection results.

[0080] Furthermore, the second anomaly detection module 20 is also used to determine the parent element and child element in the page to be detected; if the sum of the total width of the child element plus the sum of the left and right margins of the child element plus the sum of the left and right margins of the parent element is greater than the actual usable width of the parent element, the text overflow detection result is determined to be text overflow; or, if the sum of the total height of the child element plus the sum of the left and right margins of the child element plus the sum of the left and right margins of the parent element is greater than the actual usable height of the parent element, the text overflow detection result is determined to be text overflow.

[0081] Furthermore, the second anomaly detection module 20 is also used to determine the original height and original width corresponding to the original image in the page to be detected, and calculate the original aspect ratio based on the original height and original width; determine the rendered height and rendered width corresponding to the rendered image in the page to be detected, and calculate the rendered aspect ratio based on the rendered height and rendered width; construct a preset inequality based on a deformation threshold; and determine that the image stretching detection result is that image stretching exists when the original aspect ratio and the rendered aspect ratio satisfy the preset inequality.

[0082] Furthermore, the second anomaly detection module 20 is also used to preprocess the original image to obtain a processed image; perform edge detection on the processed image to obtain edge features; determine the image type corresponding to the original image based on the edge features; and determine a deformation threshold based on the image type, the original size corresponding to the original image, and the rendering size corresponding to the rendered image.

[0083] Other embodiments or specific implementations of the page anomaly detection device of this application can be found in the above-described method embodiments, and will not be repeated here.

[0084] This application provides a page anomaly detection device, which includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the page anomaly detection method in Embodiment 1 above.

[0085] The following is for reference. Figure 6 The diagram illustrates a structural schematic suitable for implementing the page anomaly detection device in the embodiments of this application. The page anomaly detection device in the embodiments of this application may include, but is not limited to, mobile terminals such as mobile phones, laptops, digital broadcast receivers, PDAs (Personal Digital Assistants), PADs (Portable Application Description), PMPs (Portable Media Players), in-vehicle terminals (e.g., in-vehicle navigation terminals), and fixed terminals such as digital TVs and desktop computers. Figure 6 The page anomaly detection device shown is merely an example and should not impose any limitations on the functionality and scope of use of the embodiments of this application.

[0086] like Figure 6 As shown, the page fault detection device may include a processing unit 1001 (e.g., a central processing unit, a graphics processing unit, etc.), which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 1002 or a program loaded from a storage device 1003 into a random access memory (RAM) 1004. The RAM 1004 also stores various programs and data required for the operation of the page fault detection device. The processing unit 1001, ROM 1002, and RAM 1004 are interconnected via a bus 1005. An input / output (I / O) interface 1006 is also connected to the bus. Typically, the following systems can be connected to the I / O interface 1006: input devices 1007 including, for example, a touchscreen, touchpad, keyboard, mouse, image sensor, microphone, accelerometer, gyroscope, etc.; output devices 1008 including, for example, a liquid crystal display (LCD), speaker, vibrator, etc.; storage devices 1003 including, for example, magnetic tape, hard disk, etc.; and communication devices 1009. The communication device 1009 allows the page anomaly detection device to communicate wirelessly or wiredly with other devices to exchange data. Although the figure shows page anomaly detection devices with various systems, it should be understood that it is not required to implement or possess all of the systems shown. More or fewer systems may be implemented alternatively.

[0087] Specifically, according to the embodiments disclosed in this application, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments disclosed in this application include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via a communication device, or installed from storage device 1003, or installed from ROM 1002. When the computer program is executed by processing device 1001, it performs the functions defined in the methods of the embodiments disclosed in this application.

[0088] The page anomaly detection device provided in this application, employing the page anomaly detection method in the above embodiments, can solve the technical problem of how to accurately and effectively detect anomalies in front-end pages. Compared with the prior art, the beneficial effects of the page anomaly detection device provided in this application are the same as those of the page anomaly detection method provided in the above embodiments, and other technical features in this page anomaly detection device are the same as those disclosed in the method of the previous embodiment, and will not be repeated here.

[0089] It should be understood that the various parts disclosed in this application can be implemented using hardware, software, firmware, or a combination thereof. In the description of the above embodiments, specific features, structures, materials, or characteristics can be combined in any suitable manner in one or more embodiments or examples.

[0090] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the technical scope disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

[0091] This application provides a computer-readable storage medium having computer-readable program instructions (i.e., a computer program) stored thereon, the computer-readable program instructions being used to execute the page anomaly detection method in the above embodiments.

[0092] The computer-readable storage medium provided in this application may be, for example, a USB flash drive, but is not limited to, electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, devices, or any combination thereof. More specific examples of computer-readable storage media may include, but are not limited to: electrical connections having one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof. In this embodiment, the computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, system, or device. The program code contained on the computer-readable storage medium may be transmitted using any suitable medium, including but not limited to: wires, optical cables, RF (Radio Frequency), etc., or any suitable combination thereof.

[0093] The aforementioned computer-readable storage medium may be included in the page anomaly detection device; or it may exist independently and not be assembled into the page anomaly detection device.

[0094] The aforementioned computer-readable storage medium carries one or more programs. When the aforementioned one or more programs are executed by the page anomaly detection device, the page anomaly detection device causes the following: inputting the page to be detected into a preset target detection model to obtain a first anomaly detection result; performing anomaly detection on the page to be detected according to preset detection rules to obtain a second anomaly detection result; and determining the target anomaly detection result corresponding to the page to be detected based on the first anomaly detection result and the second anomaly detection result.

[0095] Computer program code for performing the operations of this application can be written in one or more programming languages ​​or a combination thereof. These programming languages ​​include object-oriented programming languages—such as Python, Java, Smalltalk, and C++—and conventional procedural programming languages—such as the "C" language or similar programming languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network—including a Local Area Network (LAN) or a Wide Area Network (WAN)—or can be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0096] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this application. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, can be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0097] The modules described in the embodiments of this application can be implemented in software or hardware. The names of the modules do not necessarily limit the functionality of the unit itself.

[0098] The readable storage medium provided in this application is a computer-readable storage medium that stores computer-readable program instructions (i.e., a computer program) for executing the above-described page anomaly detection method, thereby solving the technical problem of how to accurately and effectively perform anomaly detection on front-end pages. Compared with the prior art, the beneficial effects of the computer-readable storage medium provided in this application are the same as those of the page anomaly detection method provided in the above embodiments, and will not be repeated here.

[0099] The above description is only a part of the embodiments of this application and does not limit the scope of protection of this application. All equivalent structural transformations made under the technical concept of this application and using the content of this application specification and drawings, or direct / indirect applications in other related technical fields, are included in the scope of protection of this application.

Claims

1. A method for detecting page anomalies, characterized in that, The page anomaly detection method includes the following steps: The page to be detected is input into the preset target detection model to obtain the first anomaly detection result; Anomaly detection is performed on the page to be detected using preset detection rules to obtain a second anomaly detection result. The target anomaly detection result corresponding to the page to be detected is determined based on the first anomaly detection result and the second anomaly detection result.

2. The page anomaly detection method as described in claim 1, characterized in that, Before inputting the page to be detected into the preset target detection model to obtain the first anomaly detection result, the method further includes: Determine the exception type corresponding to the initial page, and determine the initial detection box information corresponding to the initial page based on the exception type. The initial detection box information includes the exception type number corresponding to the exception type and the coordinate information of the initial detection box. Training samples are constructed based on the initial page and the initial detection box information; The initial target detection model is trained based on the training samples to obtain the preset target detection model.

3. The page anomaly detection method as described in claim 2, characterized in that, The step of determining the initial detection box information corresponding to the initial page based on the anomaly type includes: In the case where the anomaly type is text overlap, the initial text box in the initial page is extracted; Randomly select a target text box from the initial text box, and convert the target text box into a transparent text block; The transparent text block is moved so that the moved text block overlaps with the initial text block in the initial page, and the original text block that overlaps with the initial text block is selected from the initial text block; The union of the moved text block and the original text block is used as the initial detection box, and the coordinate information of the initial detection box is obtained.

4. The page anomaly detection method according to any one of claims 1 to 3, characterized in that, The step of performing anomaly detection on the page to be detected using preset detection rules to obtain a second anomaly detection result includes: Select text overflow detection rules and image stretching detection rules from the preset detection rules; The text overflow detection rule is used to perform text overflow detection on the page to be detected, and the text overflow detection result is obtained. The image stretching detection rule is used to perform image stretching detection on the page to be detected, and the image stretching detection result is obtained. The second anomaly detection result is determined based on the text overflow detection result and the image stretching detection result.

5. The page anomaly detection method as described in claim 4, characterized in that, The step of performing text overflow detection on the page to be detected according to the text overflow detection rules and obtaining the text overflow detection result includes: Identify the parent and child elements in the page to be detected; If the sum of the total width of the child element plus the sum of the left and right margins of the child element plus the sum of the left and right margins of the parent element is greater than the actual usable width of the parent element, then the text overflow detection result is determined to be text overflow; or, If the sum of the total height of the child element plus the sum of the left and right outer margins of the child element plus the sum of the left and right inner margins of the parent element is greater than the actual usable height of the parent element, then the text overflow detection result is determined to be text overflow.

6. The page anomaly detection method as described in claim 4, characterized in that, The step of performing image stretching detection on the page to be detected according to the image stretching detection rules to obtain the image stretching detection result includes: Determine the original height and original width of the original image in the page to be detected, and calculate the original aspect ratio based on the original height and original width; Determine the rendering height and rendering width of the rendered image in the page to be detected, and calculate the rendering aspect ratio based on the rendering height and rendering width; Construct a preset inequality based on the deformation threshold; If the original aspect ratio and the rendered aspect ratio satisfy the preset inequality, the image stretching detection result is determined to indicate that image stretching exists.

7. The page anomaly detection method as described in claim 6, characterized in that, Before constructing the preset inequality based on the deformation threshold, the method further includes: The original image is preprocessed to obtain the processed image; Edge detection is performed on the processed image to obtain edge features; The image type corresponding to the original image is determined based on the edge features; The deformation threshold is determined based on the image type, the original size of the original image, and the rendered size of the rendered image.

8. A page anomaly detection device, characterized in that, The page anomaly detection device includes: The first anomaly detection module is used to input the page to be detected into the preset target detection model and obtain the first anomaly detection result; The second anomaly detection module is used to perform anomaly detection on the page to be detected according to preset detection rules and obtain a second anomaly detection result. The page anomaly detection module is used to determine the target anomaly detection result corresponding to the page to be detected based on the first anomaly detection result and the second anomaly detection result.

9. A page anomaly detection device, characterized in that, The device includes: a memory, a processor, and a computer program stored in the memory and executable on the processor, the computer program being configured to implement the steps of the page anomaly detection method as described in any one of claims 1 to 7.

10. A storage medium, characterized in that, The storage medium is a computer-readable storage medium, and a computer program is stored on the storage medium. When the computer program is executed by a processor, it implements the steps of the page anomaly detection method as described in any one of claims 1 to 7.

Images