Dark mode anomaly detection method and device, equipment and storage medium
By performing grayscale processing and contour extraction on page screenshots, the dark mode abnormality is automatically detected, which solves the problem of low detection efficiency and reliability of dark mode in the prior art, and realizes efficient mode difference detection.
Patent Information
- Application Number
- CN202310748998.2
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2023-06-21
- Publication Date
- 2024-12-24
AI Technical Summary
In the prior art, the efficiency and reliability of the abnormality detection of dark mode are low, making it difficult to effectively detect the differences in the page content in daytime mode and dark mode.
By taking screenshots in daytime mode and dark mode of the page to be tested, performing grayscale processing and outline extraction, comparing the outline image differences in the two modes, to automatically detect whether the dark mode is abnormal.
It improves the efficiency and reliability of abnormal detection of dark mode, can automatically identify the differences in page content in different modes, and reduces the errors and time-consuming of manual detection.
Smart Images

Figure CN119179634A_ABST
Abstract
Description
Technical Field
[0001] The embodiments of the present application relate to the field of testing technology, and in particular to a dark mode anomaly detection method, device, equipment and storage medium. Background Art
[0002] Currently, many applications (APPs), Hypertext Markup Language 5 (H5) pages, mini-program pages, etc. have day mode and dark mode. Under normal circumstances, for the same page, the colors of the user interface (UI) elements in day mode and dark mode are different, but the content of the UI elements should be consistent. On the contrary, for the same page, if the page content in day mode and dark mode is inconsistent, it is usually considered that the dark mode is abnormal.
[0003] In the related art, the test machine of Android or IOS operating system can classify the test pages according to business scenarios such as page level, component level, interaction scenario, etc., to execute the full functional use cases in each business scenario, and execute the switching between day mode and dark mode in each business scenario, and generate logs at the same time. Then the R&D personnel can obtain the log screenshot file and detect whether the dark mode is abnormal by analyzing the log screenshot file. However, this dark mode anomaly detection method has the problem of low efficiency and reliability. Summary of the invention
[0004] The embodiments of the present application provide a dark mode anomaly detection method, apparatus, device and storage medium, thereby improving the efficiency and reliability of dark mode anomaly detection.
[0005] In a first aspect, an embodiment of the present application provides a dark mode anomaly detection method, the method comprising: obtaining a first screenshot of the page to be tested in day mode and a second screenshot in dark mode; performing grayscale processing on the first screenshot and the second screenshot respectively to obtain a first grayscale image and a second grayscale image; processing the first grayscale image and the second grayscale image respectively to obtain a first contour image and a second contour image; detecting whether the dark mode is abnormal based on the first contour image and the second contour image.
[0006] In the second aspect, an embodiment of the present application provides a dark mode anomaly detection device, including: an acquisition module, a processing module and a detection module, wherein the acquisition module is used to obtain a first screenshot of the page to be tested in the daytime mode and a second screenshot in the dark mode; the processing module is used to perform grayscale processing on the first screenshot and the second screenshot, respectively, to obtain a first grayscale image and a second grayscale image; and process the first grayscale image and the second grayscale image, respectively, to obtain a first contour image and a second contour image; the detection module is used to detect whether the dark mode is abnormal based on the first contour image and the second contour image.
[0007] In a third aspect, an embodiment of the present application provides a computer-readable storage medium for storing a computer program, wherein the computer program enables a computer to execute a method as in the first aspect or its various implementations.
[0008] In a fourth aspect, an embodiment of the present application provides a computer program product, comprising computer program instructions, which enable a computer to execute the method in the first aspect or its various implementations.
[0009] In a fifth aspect, an embodiment of the present application provides a computer program, which enables a computer to execute the method in the first aspect or its various implementations.
[0010] Through the technical solution provided in the embodiments of the present application, since the dark mode anomaly detection method complies with the dark mode anomaly detection principle and the dark mode anomaly detection method is an automated dark mode anomaly detection method, therefore, compared with the manual detection method, this automated dark mode anomaly detection method can improve the efficiency and reliability of dark mode anomaly detection. BRIEF DESCRIPTION OF THE DRAWINGS
[0011] In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the following briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.
[0012] Figure 1 An application scenario diagram provided for an embodiment of the present application;
[0013] Figure 2-1 to Figure 2-2 A schematic diagram of screenshots in day mode and dark mode provided in an embodiment of the present application;
[0014] Figure 3-1 to Figure 3-2 A schematic diagram of screenshots in day mode and dark mode provided by another embodiment of the present application;
[0015] Figure 4-1 to Figure 4-2A schematic diagram of a profile diagram provided for an embodiment of the present application;
[0016] Figure 5-1 to Figure 5-2 A schematic diagram of a profile diagram provided for another embodiment of the present application;
[0017] Figure 6 A flowchart of a dark mode anomaly detection method provided in an embodiment of the present application;
[0018] Figure 7-1 to Figure 7-2 A schematic diagram of screenshots in day mode and dark mode provided in an embodiment of the present application;
[0019] Figure 8-1 to Figure 8-2 A schematic diagram of a profile diagram provided for an embodiment of the present application;
[0020] Figure 9-1 to Figure 9-2 A schematic diagram of a profile diagram provided for another embodiment of the present application;
[0021] Figure 10-1 to Figure 10-2 A schematic diagram of a profile diagram provided for another embodiment of the present application;
[0022] Figure 11-1 to Figure 11-2 A schematic diagram of screenshots in day mode and dark mode provided by another embodiment of the present application;
[0023] Figure 12-1 to Figure 12-2 A schematic diagram of a profile diagram provided for an embodiment of the present application;
[0024] Figure 13-1 to Figure 13-2 A schematic diagram of a profile diagram provided for another embodiment of the present application;
[0025] Figure 14-1 to Figure 14-2 A schematic diagram of screenshots in day mode and dark mode provided for yet another embodiment of the present application;
[0026] Figure 15-1 to Figure 15-2 A schematic diagram of a profile diagram provided for an embodiment of the present application;
[0027] Figure 16-1 to Figure 16-2 A schematic diagram of screenshots in day mode and dark mode provided for another embodiment of the present application;
[0028] Figure 17-1 to Figure 17-2 A schematic diagram of a profile diagram provided for an embodiment of the present application;
[0029] Fig.18 The effect diagram of the PSNR algorithm provided in the embodiment of the present application;
[0030] Figure 19-1 and Figure 19-2 A schematic diagram of screenshots in day mode and dark mode provided in an embodiment of the present application;
[0031] Figure 20-1 and Figure 20-2 A schematic diagram of screenshots in day mode and dark mode provided by another embodiment of the present application;
[0032] Figure 21-1 and Figure 21-2 A schematic diagram of screenshots in dark mode and day mode provided in another embodiment of the present application;
[0033] Fig. 22 A schematic diagram showing an alarm message provided in an embodiment of the present application;
[0034] Fig.23 A schematic diagram of a dark mode anomaly detection device 2300 provided in an embodiment of the present application;
[0035] Fig.24 It is a schematic block diagram of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION
[0036] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present invention.
[0037] It should be noted that the terms "first", "second", etc. in the specification and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments of the present invention described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions, for example, a process, method, system, product, or server that includes a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products, or devices.
[0038] Before introducing the technical solution of this application, the relevant knowledge of the technical solution of this application will be explained below:
[0039] 1. H5 page refers to an HTML web page written using the HTML5 standard, among which HTML is the mainstream markup language currently used in web development.
[0040] 2. Mini Programs are applications that can be used without downloading and installing.
[0041] 3. Dark mode, also known as dark mode or night mode, is a high-contrast mode that is conducive to viewing electronic products in a dark environment. Contrary to the traditional white background with black text, the page in dark mode often appears as white text on a black background.
[0042] 4. Gray Scale Image (Gray Scale Image or Grey Scale Image), also known as grayscale image, divides white and black into several levels according to the logarithmic relationship, called grayscale, and grayscale is divided into 256 levels. An image represented by grayscale is called a grayscale image.
[0043] 5. Edge detection is a research field in image processing and computer vision, especially in feature extraction. Image edge detection greatly reduces the amount of data, removes irrelevant information, and retains important structural properties of the image. Edge detection is to find the place where the picture in the original image jumps. The jump here can be understood as a large change in the pixel values of adjacent pixels, and the gradient direction is the direction of the maximum grayscale change rate.
[0044] Edge detection operators can be divided into the following categories, but are not limited to these:
[0045] First-order differential operators: Roberts cross-gradient operator, Prewitt operator, Sobel operator, Scharr operator.
[0046] Second-order differential operators: Laplace operator, Laplacian of Gaussian (LoG) operator.
[0047] Non-differential edge detection operator: canny operator.
[0048] 7. Inverting color processing actually means reversing the red (Red, R), green (Green, G), and blue (Blue, B) values. If the color quantization level is 256, the R, G, and B values of the image after inverting color processing are 255 minus the R, G, and B values of the original image. This applies to all images, including true color images, color images with palettes (also called pseudo color images), and grayscale images.
[0049] 8. Static data refers to the data that remains unchanged on the page before and after the page is refreshed.
[0050] The following is an explanation of the technical problems, inventive concepts and application scenarios to be solved by the technical solution of this application:
[0051] As mentioned above, in the related art, the test machine of operating systems such as Android or IOS can classify the test pages according to business scenarios such as page level, component level, and interaction scenario to execute the full functional use cases in each business scenario, and perform the switching between day mode and dark mode in each business scenario, and generate logs at the same time. Then the R&D personnel can obtain the log screenshot file and detect whether the dark mode is abnormal by analyzing the log screenshot file. However, this dark mode anomaly detection method has the problem of low efficiency and reliability.
[0052] In order to solve this technical problem, an embodiment of the present application proposes an automated dark mode anomaly detection method, thereby improving the efficiency and reliability of dark mode anomaly detection.
[0053] For example, Figure 1 An application scenario diagram provided for an embodiment of the present application, such as Figure 1 As shown, the electronic device 110 has two modes, namely, day mode and dark mode, and a target APP may be installed on the electronic device 110. The electronic device 110 may execute the dark mode anomaly detection method provided in the embodiment of the present application for the target APP's page, H5 page or mini program page, but is not limited to this.
[0054] In some implementations, the electronic device 110 may be a smart phone, a tablet computer, a laptop computer, a desktop computer, a smart speaker, a smart watch, an augmented reality (AR) device, a virtual reality (VR) device, etc., but is not limited thereto.
[0055] The implementation principle of the technical solution of the present application is as follows: for the same page to be tested, screenshots of the page to be tested in day mode and dark mode can be used as a group of comparison objects. Under normal circumstances, the outlines of the two screenshots are completely consistent, wherein the outline of each screenshot includes the outlines of all UI elements, and the two screenshots only differ in color, such as Figure 2-1 and Figure 2-2 As shown in the figure, they are screenshots of a page to be tested in day mode and dark mode. Under normal circumstances, except for the color difference, the outlines of all UI elements included in the page to be tested are exactly the same. However, if there is an abnormality in the dark mode, for the same page to be tested, the screenshots in dark mode will have problems such as abnormal shape, missing, and redundancy of local UI elements compared to the screenshots in day mode. For example, Figure 3-1 and Figure 3-2As shown in the figure, they are screenshots of a page to be tested in day mode and dark mode. In abnormal cases, the outlines of local UI elements in the screenshots in dark mode are inconsistent with those in day mode. For example, Figure 3-2 The UI elements in the search box shown are relative to Figure 3-1 The UI elements in the search box are inconsistent, where: Figure 3-2 The search box shown does not include the words "recommended", "elite", etc.
[0056] Assuming that under normal circumstances, two screenshots of the same page to be tested in day mode and dark mode are called a normal image group, and under abnormal circumstances, two screenshots of the same page to be tested in day mode and dark mode are called an abnormal image group, for the sake of clarity, the similarities and differences between the normal image group and the abnormal image group are compared through Table 1 below:
[0057] Table 1
[0058] Normal image group Abnormal Image Group Similarities UI element outlines UI element outline (normal part) Differences UI element color UI element color, UI element outline (abnormal part)
[0059] As can be seen from Table 1, the corresponding normal image group and abnormal image group have the same set of variables, namely the color of the UI element. In contrast, the abnormal image group has an additional set of variables, namely the outline of the UI element. Based on this, if grayscale processing is performed on the normal image group and the abnormal image group, and contour extraction is performed, the influence of the common variables (namely the color of the UI element) in the normal image group and the abnormal image group can be eliminated as much as possible, and the normal image group and the abnormal image group can be distinguished by the remaining set of variables (namely the outline of the UI element). For example, Figure 4-1 and Figure 4-2 As shown, they are Figure 2-1 and Figure 2-2 The corresponding contour map is Figure 5-1 and Figure 5-2 As shown, they are Figure 3-1 and Figure 3-2 The corresponding contour plots are compared Figure 4-1 and Figure 4-2 The outline of Figure 5-1 and Figure 5-2 From the outline of Figure 2-1 and Figure 2-2 The image group) and the abnormal image group (i.e. Figure 3-1 and Figure 3-2 The difference between the image groups formed by the above-mentioned two images is that the outlines of the local UI elements are different.
[0060] Based on the above principles, the embodiment of the present application adopts the following scheme: obtain a first screenshot of the page to be tested in daytime mode and a second screenshot in dark mode; perform grayscale processing on the first screenshot and the second screenshot respectively to obtain a first grayscale image and a second grayscale image; process the first grayscale image and the second grayscale image respectively to obtain a first contour image and a second contour image; detect whether the dark mode is abnormal based on the first contour image and the second contour image.
[0061] The technical solution of this application will be described in detail below in combination with the implementation principle of the technical solution of this application:
[0062] Figure 6 A flowchart of a dark mode anomaly detection method provided in an embodiment of the present application, which can be executed by an electronic device, and the electronic device can be a smart phone, a tablet computer, a laptop computer, a desktop computer, a smart speaker, a smart watch, an AR device, a VR device, etc., but is not limited to this. The target APP can be installed on the electronic device, and the electronic device can execute the dark mode anomaly detection method provided in the embodiment of the present application for the page, H5 page or mini program page of the target APP, but is not limited to this. Figure 6 As shown, the method may include:
[0063] S610: Obtain a first screenshot of the page to be tested in the day mode and a second screenshot in the dark mode;
[0064] In some possible implementations, the page to be tested may be a page of an APP, an H5 page, or a mini-program page, etc., and this embodiment of the present application does not limit this.
[0065] In some possible implementations, the electronic device may use a screenshot function to respectively capture the first screenshot and the second screenshot, but is not limited thereto. The screenshot function may be a screen_shot function, but is not limited thereto.
[0066] It should be understood that when the electronic device obtains the first screenshot of the page to be tested in the day mode and the second screenshot in the dark mode, it needs to switch the mode, wherein the following mode switching manner may be adopted, but is not limited thereto:
[0067] In some implementations, if the electronic device is an electronic device running an Android operating system, the electronic device can set the target APP's mode to follow the system mode by calling a system interface. In other words, the target APP's mode switching follows the changes in the system mode of the electronic device. For example, when the electronic device's system mode switches from day mode to dark mode, the target APP's mode also switches from day mode to dark mode. When the electronic device's system mode switches from dark mode to day mode, the target APP's mode also switches from dark mode to day mode.
[0068] In some implementations, the electronic device may switch the system mode through a mode switching command. For example, the mode switching command may be “adb shell cmd uimode night yes / no”.
[0069] It should be understood that for an electronic device running an Android operating system, when switching between day mode and dark mode, it is necessary to reset the XWeb kernel side parameters and refresh the page, which will cause some pages containing recommended content, such as posts / group information streams (feeds streams), to change their contents. As a result, even if the dark mode is normal, for the same page to be tested, the electronic device cannot obtain two identical screenshots in day mode and dark mode. In order to eliminate the interference of this situation with the dark mode anomaly detection method, the present application embodiment proposes the following implementable methods, but is not limited thereto:
[0070] In some possible implementations, for an electronic device running an Android operating system, the electronic device may make the recommended contents in the page to be tested static, that is, convert the data corresponding to the recommended contents into static data, so that the content of the recommended contents does not change after the mode is switched.
[0071] In some possible implementations, for an electronic device with a normally used Android operating system, if one wants to enter a test environment, one can push the hosts file of the electronic device into a customized machine to replace the proxy, and then modify the environment parameters to the test environment parameters, so that one can enter the test environment.
[0072] In some possible implementations, if the electronic device is an electronic device running an IOS operating system, since the system interface does not provide a function to set the target APP's mode to follow the system mode, the developer can add a one-key switch dark interface in the UI automation framework of the target APP. The one-key switch dark interface is also called a one-key switch dark function, which is used to set the target APP's mode to follow the system mode. For example, the interface can be: "self.ui.deep_color_mode('light / dark')".
[0073] It should be understood that for electronic devices with an IOS operating system, the mode switching of the target APP may also change with the system mode of the electronic device. For example, when the system mode of the electronic device switches from day mode to dark mode, the mode of the target APP also switches from day mode to dark mode, and when the system mode of the electronic device switches from dark mode to day mode, the mode of the target APP also switches from dark mode to day mode.
[0074] In some possible implementations, for an electronic device with a normally used IOS operating system, if you want to enter a test environment, you can push the hosts file of the electronic device into a customized machine to replace the agent, and then modify the environment parameters to test environment parameters, so that you can enter the test environment.
[0075] S620: performing grayscale processing on the first screenshot and the second screenshot respectively to obtain a first grayscale image and a second grayscale image;
[0076] It should be understood that usually the first screenshot and the second screenshot are both color images, i.e., RGB images, and the so-called grayscale processing of the first screenshot and the second screenshot refers to the process of converting the RGB image into a grayscale image. Converting the RGB image into a grayscale image is essentially converting the RGB three-channel image into a single-channel image.
[0077] In the embodiment of the present application, the electronic device may convert the first screenshot and the second screenshot into the first grayscale image and the second grayscale image respectively in the following achievable manner, but is not limited thereto:
[0078] The first implementation method is the averaging method, which is to average the pixel values of the three channels RGB at the same pixel position.
[0079] For example, for a pixel (x, y), assuming that its pixel values in the three RGB channels are I_R(x, y), I_G(x, y), and I_B(x, y), and assuming that after conversion to a grayscale image, its pixel value in a single channel is I(x, y), then I(x, y) can be calculated using the following formula (1):
[0080]
[0081] The second implementation method is the maximum and minimum average method, which is to take the average of the maximum and minimum pixel values in the RGB at the same pixel position.
[0082] For example, for a pixel (x, y), assuming that its pixel values in the three RGB channels are I_R(x, y), I_G(x, y), and I_B(x, y), and assuming that after conversion to a grayscale image, its pixel value in a single channel is I(x, y), then I(x, y) can be calculated using the following formula (2):
[0083] I(x,y)=0.5*max(I_R(x,y),I_G(x,y),I_B(x,y))+0.5*min(I_R(x,y),I_G(x,y),I_B(x,y))(2)
[0084] The third implementation method is the weighted average method, in which the pixel values of the three RGB channels are parameters adjusted according to the brightness perception system of the object. Usually, the weights corresponding to the pixel values of these three channels are 0.3, 0.59 and 0.11, respectively. These three weights are widely used standardized weights.
[0085] For example, for a pixel (x, y), assuming that its pixel values in the three RGB channels are I_R(x, y), I_G(x, y), and I_B(x, y), and assuming that after conversion to a grayscale image, its pixel value in a single channel is I(x, y), then I(x, y) can be calculated using the following formula (3):
[0086] I(x,y)=0.3*I_R(x,y)+0.59*I_G(x,y)+0.11*I_B(x,y)(3)
[0087] The fourth implementation method is to use a single channel method.
[0088] In some implementations, the electronic device may select a pixel value of one channel from the pixel values of the three channels of RGB as the pixel value of the grayscale image.
[0089] For example, for a pixel (x, y), assuming that its pixel values in the three RGB channels are I_R(x, y), I_G(x, y), and I_B(x, y), and assuming that after conversion to a grayscale image, its pixel value in a single channel is I(x, y), then I(x, y) can be calculated using the following formula (4):
[0090] I(x,y)=I_G(x,y) (4)
[0091] For example, for a pixel point (x, y), assuming that its pixel values in the three RGB channels are I_R(x, y), I_G(x, y), and I_B(x, y), and assuming that after conversion to a grayscale image, its pixel value in a single channel is I(x, y), then I(x, y) can be calculated using the following formula (5):
[0092] I(x,y)=I_R(x,y) (5)
[0093] For example, for a pixel (x, y), assuming that its pixel values in the three RGB channels are I_R(x, y), I_G(x, y), and I_B(x, y), and assuming that after conversion to a grayscale image, its pixel value in a single channel is I(x, y), then I(x, y) can be calculated using the following formula (6):
[0094] I(x,y)=I_B(x,y) (6)
[0095] In some implementations, for the first screenshot and the second screenshot, the electronic device may use the same method of converting a color image into a grayscale image to convert the two screenshots into a first grayscale image and a second grayscale image.
[0096] S630: Process the first grayscale image and the second grayscale image respectively to obtain a first contour image and a second contour image;
[0097] In the embodiment of the present application, the electronic device may process the first grayscale image and the second grayscale image in any of the following achievable ways, but is not limited thereto:
[0098] In some implementations, S630 may include:
[0099] S630-1: applying an object edge detection operator to the first grayscale image and the second grayscale image respectively to obtain a third contour image and a fourth contour image;
[0100] It should be understood that the principle of using edge detection operators for contour extraction is to detect contours using the sudden change in grayscale at the edge of an image. The specific method is to perform convolution operations on the image along the x-axis and y-axis respectively with the convolution kernel of the edge detection operator to obtain the image gradient values Gx and Gy of each pixel in the horizontal and vertical edge detection, and then for each pixel, perform weighted summation of the image gradient values Gx and Gy of the pixel to obtain the gradient value G of the pixel. If the gradient value G of the pixel is greater than a preset threshold, the pixel is determined as an image edge point.
[0101] For example, suppose that the electronic device uses the target edge detection operator on the first grayscale image to obtain the image gradient values of a certain pixel point in the horizontal and vertical edge detection, which are Gx=2 and Gy=4 respectively. Further, the electronic device can calculate the average value of Gx and Gy, that is, G=(2+4) / 2=3. If the preset threshold is 2, and G=3 is greater than the preset threshold, then it can be determined that the pixel point is the edge point of the first grayscale image.
[0102] In some implementations, the target edge detection operator may be a first-order differential operator, but is not limited thereto. For example, the target edge detection operator may be a Roberts cross gradient operator, a Prewitt operator, a Sobel operator, a Scharr operator, and the like.
[0103] In some other implementations, the target edge detection operator may be a second-order differential operator, but is not limited thereto. For example, the target edge detection operator may be a Laplacian operator or a LoG operator.
[0104] In some further implementations, the target edge detection operator may be a non-differential edge detection operator, but is not limited thereto. For example, the target edge detection operator may be a canny operator.
[0105] It should be understood that image clarity, i.e., resolution, will have a certain impact on the dark mode anomaly detection results. Figure 7-1 to Figure 7-2 This is a schematic diagram of screenshots in day mode and dark mode provided by an embodiment of the present application, wherein for the same page to be tested, Figure 7-1 The first screenshot of the page to be tested in day mode is shown. Figure 7-2 The second screenshot of the tested page in dark mode is shown. For a model with a resolution of 1125*2436, the first screenshot in day mode is processed by grayscale, contour extraction and inversion to obtain the first contour image as shown below: Figure 8-1 As shown, the second screenshot in the dark mode is processed by grayscale, contour extraction and inversion to obtain a second contour image as shown in Figure 8-2 For a model with a resolution of 1080*2340, the first screenshot in the day mode is processed by grayscale, contour extraction and inversion to obtain the first contour image as shown below: Figure 9-1 As shown, the second screenshot in the dark mode is processed by grayscale, contour extraction and inversion to obtain a second contour image as shown in Figure 9-2 For a model with a resolution of 720*1544, the first screenshot in the day mode is processed by grayscale, contour extraction and inversion to obtain the first contour image as shown below: Figure 10-1 As shown, the second screenshot in the dark mode is processed by grayscale, contour extraction and inversion to obtain a second contour image as shown in Figure 10-2 shown.
[0106] Among them, after experiments, when electronic equipment is based on Figure 8-1 The first outline diagram shown and Figure 8-2 When the second contour image shown in FIG. 1 is used to detect dark mode anomalies, the detection result obtained is consistent with the actual situation. In other words, assuming that the electronic device is based on Figure 8-1 The first outline diagram shown and Figure 8-2 The result of the dark mode abnormality detection performed on the second contour image shown is that the dark mode is normal, and the actual situation is also that the dark mode is normal. Figure 9-1 The first outline diagram shown and Figure 9-2 When the second contour image shown in FIG. 1 is used to detect dark mode anomalies, the detection result obtained is consistent with the actual situation. In other words, assuming that the electronic device is based on Figure 9-1 The first outline diagram shown and Figure 9-2 The result of the dark mode abnormality detection performed on the second contour image shown is that the dark mode is normal, and the actual situation is also that the dark mode is normal. Figure 10-1 The first outline diagram shown and Figure 10-2 When the second contour image shown in FIG. 1 is used to detect dark mode anomalies, the detection result obtained does not match the actual situation. In other words, assuming that the electronic device is based on Figure 10-1 The first outline diagram shown and Figure 10-2 The detection result of the dark mode anomaly detection on the second contour image shown is that the dark mode is abnormal, while the actual situation is that the dark mode is normal.
[0107] Based on this, in some implementable methods, the electronic device can select an edge detection operator that has a positive impact on image clarity from multiple edge detection operators before using the target edge detection operator on the first grayscale image and the second grayscale image respectively to obtain the third contour image and the fourth contour image; and use the selected edge detection operator as the target edge detection operator.
[0108] In some implementations, the plurality of edge detection operators may include at least one of the following edge detection operators, but are not limited thereto: a first-order differential operator, a second-order differential operator, and a non-differential edge detection operator. For example, the plurality of edge detection operators include: a first-order differential operator Scharr operator, a first-order differential operator Sobel operator, and a second-order differential operator Laplacian operator.
[0109] For example, Figure 11-1 to Figure 11-2 This is a schematic diagram of screenshots in day mode and dark mode provided by another embodiment of the present application, wherein for the same page to be tested, Figure 11-1 The first screenshot of the page to be tested in day mode is shown. Figure 11-2 The second screenshot of the page to be tested in dark mode is shown. Assuming that the above multiple edge detection operators include: a first-order Sobel operator and a first-order Scharr operator, the electronic device performs grayscale processing, contour extraction and inversion processing on the first screenshot through the Sobel operator, and obtains a first contour map as shown in FIG. Figure 12-1 As shown, after the second screenshot is subjected to grayscale processing, contour extraction and color inversion processing by the Sobel operator, the second contour image is obtained as shown in Figure 12-2 After the electronic device performs grayscale processing, contour extraction and color inversion processing on the first screenshot through the Scharr operator, the first contour image obtained is as shown in Figure 13-1 As shown, after the second screenshot is subjected to grayscale processing, contour extraction and color inversion processing by the Scharr operator, the second contour image is obtained as shown in Figure 13-2 By comparison Figure 12-1 and Figure 13-1 , and contrast Figure 12-2 and Figure 13-2 ,It can be seen that the Scharr operator has a positive impact on image clarity. Based on this, the Scharr operator can be used as a target edge detection operator.
[0110] It should be understood that by selecting a target edge detection operator that has a positive impact on image clarity and performing contour extraction based on the target edge detection operator, the reliability of dark mode anomaly detection can be improved.
[0111] It should be understood that the contour extraction method involved in the embodiments of the present application is not limited to the use of edge detection operators for contour extraction, and contour extraction methods, boundary detection methods, region growing methods, region splitting and merging methods, etc. can also be used to extract contours from the first grayscale image and the second grayscale image.
[0112] It should be understood that the contour extraction method is for contour extraction of binary images, wherein the contour extraction method is specifically: if there is a black pixel in the original image, and the 8 adjacent pixels of the pixel are all black pixels, then the pixel is deleted, and finally all the remaining pixels will constitute the contour map of the image.
[0113] It should be understood that, for any grayscale image, the electronic device may convert the grayscale image into a binary image in the following achievable manner, but is not limited thereto:
[0114] In some possible implementations, for any pixel in the grayscale image, if the pixel value of the pixel is greater than a preset threshold, the pixel value of the pixel is updated to 255; if the pixel value of the pixel is less than or equal to the preset threshold, the pixel value of the pixel is updated to 0. Based on this, a binary image corresponding to the grayscale image can be obtained.
[0115] The following is an example to illustrate the contour extraction method:
[0116] For example, after the electronic device performs grayscale processing on the first screenshot, a first grayscale image is obtained. Further, the first grayscale image can be converted into a first binary image. For any pixel in the first binary image, if the pixel is a black pixel (i.e., the pixel value is 255) and the eight adjacent pixels of the pixel are all black pixels, the pixel is deleted, and finally all the remaining pixels will constitute a third contour image. Similarly, after the electronic device performs grayscale processing on the second screenshot, a second grayscale image is obtained. Further, the second grayscale image can be converted into a second binary image. For any pixel in the second binary image, if the pixel is a black pixel and the eight adjacent pixels of the pixel are all black pixels, the pixel is deleted, and finally all the remaining pixels will constitute a fourth contour image.
[0117] It should be understood that the boundary detection method starts from a boundary point of the image, and then searches for the next boundary point according to a certain strategy until the search point coincides with the initial point, and the contour can be found. In the embodiment of the present application, the image can be a first grayscale image or a second grayscale image.
[0118] It should be understood that the region growing method refers to subtracting the grayscale value of each pixel of the image from the seed point in turn, and judging whether the result is less than the standard deviation. If it is, the point and the seed point are merged, otherwise, the grayscale value of the pixel point is kept unchanged, so that the processed image is the outline of the image. In the embodiment of the present application, the image can be a first grayscale image or a second grayscale image.
[0119] The three key points of the region growing method are: (1) selecting appropriate seed points; (2) determining similarity conditions; and (3) determining the conditions for stopping growth.
[0120] It should be understood that the region splitting and merging method refers to using the hierarchical concept of the pyramid or quadtree data structure to divide the image into a set of arbitrary non-intersecting initial regions, that is, starting from any middle layer of the pyramid or quadtree structure, splitting and merging these regions according to a given uniformity detection criterion. The region division performance is gradually improved until the image is finally divided into the smallest number of uniform regions, so that the processed image is the outline of the image.
[0121] S630 - 2 : Obtain a first outline map and a second outline map based on the third outline map and the fourth outline map respectively.
[0122] In the embodiment of the present application, the electronic device may obtain the first contour map and the second contour map in any of the following achievable methods, but is not limited thereto:
[0123] In some implementations, the electronic device may use the third outline map as the first outline map, and use the fourth outline map as the second outline map.
[0124] In some other possible implementations, the electronic device may perform color inversion processing on the third outline image and the fourth outline image respectively to obtain the first outline image and the second outline image.
[0125] It should be understood that since the third contour image and the fourth contour image are grayscale images, the electronic device's inversion processing of the third contour image and the fourth contour image is specifically: for any pixel point in the third contour image and the fourth contour image, the difference between 255 and the pixel value is calculated to obtain a new pixel value of the pixel point, and all the pixel points of the third contour image and the corresponding pixel values constitute the first contour image, and all the pixel points of the fourth contour image and the corresponding pixel values constitute the second contour image.
[0126] For example, assuming that the pixel value of a certain pixel point in the third contour image is 65, then the pixel value of the pixel point in the first contour image is 255-65=190.
[0127] For example, assuming that the pixel value of a certain pixel point in the fourth contour image is 5, then the pixel value of the pixel point in the second contour image is 255-5=250.
[0128] It should be understood that after the third contour image and the fourth contour image are inverted, the obtained first contour image and the second contour image have better clarity, which is beneficial to the subsequent dark mode anomaly detection.
[0129] In some implementations, after the electronic device performs the inversion processing on the third contour image and the fourth contour image, it may further perform the sharpening processing on the third contour image and the fourth contour image to obtain the first contour image and the second contour image.
[0130] It should be understood that after the third contour image and the fourth contour image are subjected to inversion processing and sharpening processing, the obtained first contour image and the second contour image have better clarity, which is beneficial to the subsequent dark mode anomaly detection.
[0131] The following is an explanation of the grayscale processing, contour extraction and color inversion processing effects with the help of the attached figures:
[0132] Figure 14-1 to Figure 14-2 A schematic diagram of screenshots in day mode and dark mode provided in another embodiment of the present application, wherein for the same page to be tested, Figure 14-1 The first screenshot of the page to be tested in day mode is shown. Figure 14-2 The second screenshot of the page to be tested in dark mode is shown in FIG. After the electronic device performs grayscale processing, contour extraction and inversion processing on the first screenshot through the target edge detection operator, the first contour image obtained is as shown in FIG. Figure 15-1As shown, after the second screenshot is subjected to grayscale processing, contour extraction and color inversion processing by the target edge detection operator, the second contour image is obtained as shown in Figure 15-2 shown.
[0133] Figure 16-1 to Figure 16-2 A schematic diagram of screenshots in day mode and dark mode provided in another embodiment of the present application, wherein for the same page to be tested, Figure 16-1 The first screenshot of the page to be tested in day mode is shown. Figure 16-2 The second screenshot of the page to be tested in dark mode is shown in FIG. After the electronic device performs grayscale processing, contour extraction and inversion processing on the first screenshot through the target edge detection operator, the first contour image obtained is as shown in FIG. Figure 17-1 As shown, after the second screenshot is subjected to grayscale processing, contour extraction and color inversion processing by the target edge detection operator, the second contour image is obtained as shown in Figure 17-2 shown.
[0134] It should be understood that after the electronic device executes S630 , it can execute 640 .
[0135] S640: Detect whether the dark mode is abnormal based on the first outline image and the second outline image.
[0136] In the embodiment of the present application, the electronic device may detect whether the dark mode is abnormal in the following achievable manner, but is not limited thereto:
[0137] In some implementations, S640 may include:
[0138] S640-1A: Determine a first similarity between the first contour image and the second contour image;
[0139] In the embodiment of the present application, the electronic device may determine the first similarity between the first contour image and the second contour image in any of the following achievable ways, but is not limited thereto:
[0140] In a first implementation mode, the electronic device uses a Peak Signal to Noise Ratio (PSNR) algorithm on the first contour image and the second contour image to obtain a first similarity.
[0141] It should be understood that the principle of the peak signal-to-noise ratio algorithm is to measure the similarity between images based on the error between corresponding pixels, where the larger the calculation result, the greater the similarity between the two images, and conversely, the smaller the calculation result, the smaller the similarity between the two images. The specific calculation process is: first calculate the mean square error (MSE) of the two monochrome images, take the logarithm of the ratio of the maximum color value of the image to the MSE, and obtain the PSNR value. The calculation formula is as follows:
[0142]
[0143]
[0144] Where X represents the first contour image, Y represents the second contour image, (i, j) represents the pixel point of the image, H and W are the height and width of the image respectively, and n is the number of bits per pixel, which is generally 8 or 2. n Represents the number of pixel grayscales. If n is 8, the number of pixel grayscales is 256.
[0145] It should be understood that when the peak signal-to-noise ratio algorithm is used to calculate the first similarity, the PSNR value is the first similarity.
[0146] Fig.18 The effect diagram of the PSNR algorithm provided in the embodiment of the present application, here 106 groups of images are selected as test data for testing the PSNR algorithm, each group of images can be a screenshot of a representative page of a certain instant messaging game center in day mode and screenshots in dark mode, for each group of images in the 106 groups of images, the group of images is processed to obtain a corresponding group of contour maps, and then the PSNR algorithm is used on the group of contour maps to calculate the similarity of the group of contour maps, if the similarity of the contour maps is greater than the first preset threshold, then the dark mode is detected to be normal, if the similarity of the contour maps is less than or equal to the first preset threshold, then the dark mode is detected to be abnormal. Fig.18 As shown, the horizontal axis represents the index of the image group, for example, 1 represents the first image group, the vertical axis represents the PSNR value of the image group, and the value of the first preset threshold is 30, wherein, Fig.18 The black dots in the figure represent the image group that the dark mode is judged to be normal, and the black squares represent the image group that the dark mode is judged to be abnormal. Assuming that the image group that the dark mode is judged to be normal is called the normal image, and the image group that the dark mode is judged to be abnormal is called the abnormal image, then Fig.18 As shown, 89 of the 106 groups of images are normal images and 17 are abnormal images.
[0147] The effect of the PSNR algorithm is evaluated based on four indicators: accuracy, precision, recall, and comprehensive evaluation index F-measure.
[0148] Accuracy (ACC) = (TP+TN) / (TP+TN+FP+FN)
[0149] Precision (P) = TP / (TP+FP), TN / (TN+FN)
[0150] Recall (R) = TP / (TP+FN), TN / (TN+FP)
[0151] F value = (2*P*R) / (P+R)
[0152] TP represents the number of samples predicted to be normal and actually normal;
[0153] TN represents the number of samples that are predicted to be abnormal and are actually abnormal;
[0154] FP represents the number of samples predicted to be normal but actually abnormal;
[0155] FN represents the number of samples that are predicted to be abnormal but are actually normal.
[0156] Table 2 shows the calculation results of the accuracy, precision, recall rate, and F value of the PSNR algorithm.
[0157] Table 2
[0158] algorithm Accuracy Precision (positive) Recall rate (positive) Precision (negative) Recall (negative) F-number psnr 94.3% 94.6% 98.9% 92.3% 70.6% 96.7
[0159] Through testing, it can be seen that the accuracy of the PSNR algorithm can reach 94.3%, indicating that the algorithm is suitable for the dark mode detection method provided in the embodiment of the present application.
[0160] In a second implementation manner, the electronic device calculates the ratio of actual pixel pairs to theoretical pixel pairs of the first contour image and the second contour image to obtain a first similarity.
[0161] It should be understood that if the dark mode is normal, each pixel in the first contour map has a corresponding pixel in the second contour map, wherein every two corresponding pixels constitute a pixel pair, and the pixel pair has the same pixel coordinates. For example, the pixel (1,1) in the first contour map corresponds to the pixel (1,1) in the second contour map, and these two pixels constitute a pixel pair. On the contrary, if the dark mode is abnormal, some pixels in the first contour map do not have corresponding pixels in the second contour map. Based on this principle, an embodiment of the present application proposes to calculate the ratio of the actual pixel pairs of the first contour map and the second contour map to the theoretical pixel pairs to obtain a first similarity.
[0162] For example, assuming that the theoretical number of pixel pairs between the first contour map and the second contour map is 100, and the actual number of pixel pairs between the first contour map and the second contour map is 70, then the ratio of the actual pixel pairs to the theoretical pixel pairs is 70%, and this ratio is used as the first similarity between the first contour map and the second contour map.
[0163] S640-2A: Detect whether the dark mode is abnormal based on the first similarity.
[0164] In the embodiment of the present application, the electronic device may detect whether the dark mode is abnormal based on the first similarity in the following achievable manner, but is not limited thereto:
[0165] In some implementations, if the first similarity is greater than a first preset threshold, the electronic device determines that the dark mode is normal; if the first similarity is less than or equal to the first preset threshold, the electronic device determines that the dark mode is abnormal.
[0166] In some other possible implementations, if the first similarity is greater than or equal to a first preset threshold, the electronic device determines that the dark mode is normal; if the first similarity is less than the first preset threshold, the electronic device determines that the dark mode is abnormal.
[0167] In some possible implementations, the value of the first preset threshold may be 20, 30, 40, etc., which is not limited in the embodiments of the present application.
[0168] For example, assuming that the first similarity between the first contour image and the second contour image is 40, and the value of the first preset threshold is 30, since the first similarity is greater than the first preset threshold, it can be determined that the dark mode is normal.
[0169] Another possible implementation method of S640 is described below:
[0170] In some implementations, S640 may include:
[0171] S640-1B: Input the first contour image and the second contour image into the first target model to obtain a detection result of whether the dark mode is abnormal.
[0172] It should be understood that the input of the first target model can be two contour images, and the output is the detection result of whether the dark mode is abnormal.
[0173] In some implementations, the first target model may be a neural network model, but is not limited thereto.
[0174] In one possible implementation, the electronic device may obtain training samples and labels of the training samples, and train the first target model based on the training samples and labels of the training samples. Each training sample may include two contour images, and the corresponding labels may be the result of whether the dark mode is abnormal.
[0175] In the training phase of the first target model, the electronic device can determine the loss based on the training samples and the labels of the training samples. Further, the electronic device can minimize the loss to adjust the parameters of the first target model until the loss converges or the number of training times reaches a preset number.
[0176] Optionally, the loss may be a cross entropy loss, a one-norm (L1) loss, an MSE function, etc., but is not limited thereto.
[0177] In an embodiment of the present application, the electronic device can obtain a first screenshot of the page to be tested in the day mode and a second screenshot in the dark mode; grayscale the first screenshot and the second screenshot respectively to obtain a first grayscale image and a second grayscale image; process the first grayscale image and the second grayscale image respectively to obtain a first contour image and a second contour image; and detect whether the dark mode is abnormal based on the first contour image and the second contour image. Since the dark mode abnormality detection method conforms to the dark mode abnormality detection principle and the dark mode abnormality detection method is an automated dark mode abnormality detection method, compared with the manual detection method, the automated dark mode abnormality detection method can improve the efficiency and reliability of dark mode abnormality detection.
[0178] In some implementations, after S640, the dark mode anomaly detection method may further include:
[0179] S650: If it is determined that the dark mode is abnormal, the electronic device determines and displays the cause of the dark mode abnormality.
[0180] It should be understood that the usual causes of dark mode anomalies include the following two situations:
[0181] The first reason can be called a subjective design problem, which generally refers to the subjective omissions in the processing of some half-screen pop-ups, text, and graphics when adapting to the dark mode, resulting in problems such as white background, no text display, and missing graphics in some parts of the page.
[0182] For example, Figure 19-1 and Figure 19-2 This is a schematic diagram of screenshots in day mode and dark mode provided by an embodiment of the present application, wherein for the same page to be tested, Figure 19-1 The first screenshot of the page to be tested in day mode is shown. Figure 19-2 The second screenshot of the page to be tested in dark mode is shown. Figure 19-1 and Figure 19-2 As shown, due to subjective design reasons, the first screenshot has the words "Delete Picture" and "Cancel", while the second screenshot does not have these two words.
[0183] For another example, Figure 20-1 and Figure 20-2 This is a schematic diagram of screenshots in day mode and dark mode provided by another embodiment of the present application, wherein for the same page to be tested, Figure 20-1 The first screenshot of the page to be tested in day mode is shown. Figure 20-2The second screenshot of the page to be tested in dark mode is shown. Figure 20-1 and Figure 20-2 As shown, due to subjective design reasons, the first screenshot has the symbol “>”, while the second screenshot does not have this symbol.
[0184] The second reason can be called an objective design problem, which may be a problem with the settings of the page detection mechanism. For example, under the IOS operating system, most of the UI modules on the page of a target APP maintain a continuous focus on the system mode, so that when the system mode switches, the modes of these UI modules also switch. However, the page detection mechanism of some UI modules only changes with the system mode when the page is initialized or refreshed, so that these UI modules cannot switch modes in time with the system mode. For example, when the system mode has switched from day mode to dark mode, and a certain UI module is still in day mode, then all modules except this UI module in the page have switched to dark mode, and only this UI module is still in day mode. The display of this UI module is incompatible with the display of other UI modules.
[0185] For example, Figure 3-1 and Figure 3-2 As shown, Figure 3-1 This is a screenshot taken in day mode, i.e. the first screenshot. Figure 3-2 This is a screenshot taken in dark mode, that is, the second screenshot. Figure 3-2 As shown in the figure, all the text in the search bar corresponds to a UI module, including the search box with the text "Search" corresponds to a UI module, and the part of the search bar other than these two parts, that is, the remaining background part corresponds to a UI module. Since the UI module corresponding to the text has been switched to dark mode, for example, "Friends" is converted to blue, and the texts such as "Recommendation" and "Elite" are converted to white, while the UI module corresponding to the background part is still in daytime mode, that is, the background is still white, resulting in the inability to display white text on a white background. Based on this, Figure 3-2 Words such as "recommended" and "elite" cannot be displayed.
[0186] For example, Figure 21-1 and Figure 21-2 As shown, Figure 21-1 This is a screenshot taken in dark mode. Figure 21-2 This is a screenshot taken in day mode. Figure 21-1All the text included in the search bar corresponds to one UI module, and the background part corresponds to one UI module. Since the UI module corresponding to the text has been switched to day mode, such as "Friends", "Recommendation", "Search" and other texts are converted to black text, while the UI module corresponding to the background part is still in dark mode, that is, the background is still black, resulting in the black background and black text cannot be displayed. Based on this, Figure 21-2 The words "Friends", "Recommend", "Search" etc. cannot be displayed.
[0187] Considering the above two reasons for abnormal dark mode, the embodiment of the present application proposes the following implementation methods:
[0188] In some implementations, S650 may include:
[0189] S650-1: If it is determined that the dark mode is abnormal, refresh the page to be tested or close and then reopen the page to be tested;
[0190] It should be understood that the reason for refreshing the page to be tested or closing and reopening the page to be tested is that under the IOS operating system, the page detection mechanism of some abnormal UI modules changes with the system mode only when the page is initialized or refreshed.
[0191] S650-2: Obtain a third screenshot of the page to be tested in the dark mode; process the third screenshot to obtain a fifth outline image;
[0192] It should be understood that the third screenshot is a screenshot obtained by the electronic device taking a screenshot of the page to be tested after refreshing the page to be tested or closing and reopening the page to be tested.
[0193] In the embodiment of the present application, the electronic device may process the third screenshot in the following achievable manner to obtain the fifth outline image, but is not limited thereto:
[0194] In some possible implementations, the electronic device performs grayscale processing on the third screenshot to obtain a third grayscale image, and processes the third grayscale image to obtain a fifth contour image.
[0195] It should be understood that the grayscale processing process of the electronic device on the third screenshot is similar to the grayscale processing process of the first screenshot and the second screenshot, and the embodiment of the present application will not be repeated here.
[0196] In the embodiment of the present application, the electronic device may process the third grayscale image in the following manner, but is not limited thereto:
[0197] In some possible implementations, the electronic device applies a target edge detection operator to the third grayscale image to obtain a sixth contour image; and obtains a fifth contour image based on the sixth contour image.
[0198] In other possible implementations, the electronic device may extract the contour of the third grayscale image using a contour extraction method, a boundary detection method, a region growing method, a region splitting and merging method, or the like.
[0199] It should be understood that the process of performing contour extraction on the third grayscale image using target edge detection operators, contour extraction methods, boundary detection methods, region growing methods, region splitting and merging methods, etc. can be referred to above, and the embodiments of the present application will not go into details.
[0200] In the embodiment of the present application, the electronic device may obtain the fifth contour map in any of the following achievable ways, but is not limited thereto:
[0201] In some implementations, the electronic device may use the sixth outline map as the fifth outline map.
[0202] In some other possible implementations, the electronic device may perform color inversion processing on the sixth contour image to obtain the fifth contour image. The color inversion processing process may be referred to above, and will not be described in detail in the embodiment of the present application.
[0203] In some further implementations, the electronic device may perform color inversion and sharpening processing on the sixth contour image to obtain a fifth contour image.
[0204] In some implementable embodiments, before the electronic device uses the target edge detection operator on the third grayscale image to obtain the fifth contour image, it can select an edge detection operator that has a positive impact on image clarity from multiple edge detection operators; and use the selected edge detection operator as the target edge detection operator.
[0205] S650-3: Determine the cause of the dark mode abnormality based on the first profile map, the second profile map, and the fifth profile map.
[0206] In the embodiment of the present application, S650-3 may be implemented in any of the following implementable ways, but is not limited thereto:
[0207] Implementation method 1: S650-3 may include:
[0208] S650-3-1A: Determine a first similarity between the first contour image and the second contour image, and determine a second similarity between the first contour image and the fifth contour image;
[0209] It should be understood that the calculation method of the first similarity and the second similarity can be referred to above, and the embodiments of the present application will not be described in detail.
[0210] S650-3-2A: Determine the dark mode abnormality cause based on the first similarity and the second similarity.
[0211] In some possible implementations, if the first similarity is less than or equal to the second preset threshold, and the second similarity is greater than the second preset threshold, the electronic device determines that the abnormal cause of the dark mode is that there is a setting problem of the page detection mechanism in some UI modules in the page to be tested; if the first similarity and the second similarity are both less than or equal to the second preset threshold, the electronic device determines that the abnormal cause of the dark mode is that there is a subjective omission problem in at least one UI element in the page to be tested when adapting the dark mode.
[0212] In other possible implementations, if the first similarity is less than the second preset threshold, and the second similarity is greater than or equal to the second preset threshold, the electronic device determines that the abnormal cause of the dark mode is that there is a problem with the setting of the page detection mechanism in some UI modules in the page to be tested; if both the first similarity and the second similarity are less than the second preset threshold, the electronic device determines that the abnormal cause of the dark mode is that there is a subjective omission problem in at least one UI element in the page to be tested when adapting to the dark mode.
[0213] In some implementations, a UI module in a page may include at least one UI element.
[0214] In some possible implementations, the value of the second preset threshold may be 20, 30, 40, etc., which is not limited in the embodiments of the present application.
[0215] In some possible implementations, the second preset threshold may be the same as or different from the first preset threshold, and the embodiments of the present application do not limit this.
[0216] The following is an example to illustrate the first possible implementation method:
[0217] For example, for the IOS operating system, the page of an instant messaging APP includes multiple UI modules, each UI module includes at least one UI element, some UI modules can switch modes in real time following the system mode, while some UI modules can only switch modes following the system mode when the page is initialized or refreshed. Based on this, the electronic device can obtain screenshot a in day mode and screenshot b in dark mode, and then obtain screenshot c in dark mode after refreshing the page. If the similarity between screenshot a and screenshot b is less than the second preset threshold, and the similarity between screenshot a and screenshot c is greater than the second preset threshold, it means that the abnormal reason for the dark mode is that some UI modules in the page have a setting problem of the page detection mechanism. If the similarity between screenshot a and screenshot b is less than the second preset threshold, and the similarity between screenshot a and screenshot c is less than the second preset threshold, it means that the abnormal reason for the dark mode is that at least one UI element in the page to be tested has a subjective omission problem when adapting to the dark mode.
[0218] Implementation method 2: S650-3 may include:
[0219] S650-3-1B: Input the first contour map, the second contour map and the fifth contour map into the second target model to obtain the cause of the dark mode anomaly.
[0220] It should be understood that the input of the second target model can be three contour images, namely, a screenshot of the same page in day mode, a screenshot in dark mode before page refresh, and a screenshot in dark mode after page refresh, and the output is the cause of the dark mode abnormality.
[0221] In some implementations, the second target model may be a neural network model, but is not limited thereto.
[0222] In one achievable manner, the electronic device may obtain training samples and labels of the training samples; and train the second target model based on the training samples and labels of the training samples. Each training sample may include three profile images, which are screenshots of the same page in day mode, screenshots in dark mode before page refresh, and screenshots in dark mode after page refresh. The output is the dark mode abnormality reason, and the corresponding label may be the dark mode abnormality reason.
[0223] In the training phase of the second target model, the electronic device can determine the loss based on the training samples and the labels of the training samples. Further, the electronic device can minimize the loss to adjust the parameters of the second target model until the loss converges or the number of training times reaches a preset number.
[0224] Optionally, the loss may be a cross entropy loss, a one-norm (L1) loss, an MSE function, etc., but is not limited thereto.
[0225] It should be understood that for some pages containing recommended content, if the page is refreshed or closed and reopened, the content of some pages containing recommended content, such as posts / group information streams (feeds streams), will change. In this case, the screenshots of the same page in day mode and in dark mode after the page is refreshed are usually different, or the similarity is low, resulting in the inability to normally determine the cause of the dark mode abnormality. In order to eliminate the interference of this situation in determining the cause of the dark mode abnormality, the embodiment of the present application proposes the following implementable methods, but is not limited to this:
[0226] In some possible implementations, before refreshing the page to be tested or closing and reopening the page to be tested, if it is detected that the page to be tested is a page containing recommended content, the electronic device converts data corresponding to the recommended content into static data.
[0227] In an embodiment of the present application, if it is determined that the dark mode is abnormal, the electronic device can determine and display the abnormal cause of the dark mode, so that R&D personnel can repair the abnormal problem existing in the dark mode as soon as possible.
[0228] In some implementations, after S640, the dark mode anomaly detection method may further include:
[0229] S660: If it is determined that the dark mode is abnormal, generate and display a warning message;
[0230] Among them, the warning message is used to inform R&D personnel of dark mode anomalies.
[0231] For example, Fig. 22 A schematic diagram showing an alarm message provided in an embodiment of the present application is shown in FIG. Fig. 22 As shown, the test result displayed on this interface is failure, which is used to prompt R&D personnel that the dark mode is abnormal.
[0232] It should be understood that the electronic device may only execute S650 but not S660, or only execute S660 but not S650, or may execute both S650 and S660, and the embodiments of the present application are not limited to this.
[0233] In an embodiment of the present application, if it is determined that the dark mode is abnormal, the electronic device can generate and display an alarm message so that R&D personnel can locate and repair the abnormal problem existing in the dark mode as soon as possible.
[0234] The preferred embodiments of the present application are described in detail above in conjunction with the accompanying drawings. However, the present application is not limited to the specific details in the above embodiments. Within the technical concept of the present application, the technical solution of the present application can be subjected to a variety of simple modifications, and these simple modifications all belong to the protection scope of the present application. For example, the various specific technical features described in the above specific embodiments can be combined in any suitable manner without contradiction. In order to avoid unnecessary repetition, the present application will not further explain various possible combinations. For another example, the various different embodiments of the present application can also be arbitrarily combined, as long as they do not violate the ideas of the present application, they should also be regarded as the contents disclosed in the present application.
[0235] It should also be understood that in the various method embodiments of the present application, the size of the serial numbers of the above-mentioned processes does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present application.
[0236] The method provided in the embodiment of the present application is described above, and the device provided in the embodiment of the present application is described below.
[0237] Fig.23 A schematic diagram of a dark mode anomaly detection device 2300 provided in an embodiment of the present application is shown as follows: Fig.23 As shown, the device 2300 may include: an acquisition module 2310, a processing module 2320 and a detection module 2330, wherein the acquisition module 2310 is used to acquire a first screenshot of the page to be tested in the day mode and a second screenshot in the dark mode; the processing module 2320 is used to perform grayscale processing on the first screenshot and the second screenshot, respectively, to obtain a first grayscale image and a second grayscale image; and to process the first grayscale image and the second grayscale image, respectively, to obtain a first contour image and a second contour image; the detection module 2330 is used to detect whether the dark mode is abnormal based on the first contour image and the second contour image.
[0238] In some possible implementations, the processing module 2320 is specifically used to: apply a target edge detection operator to the first grayscale image and the second grayscale image respectively to obtain a third contour image and a fourth contour image; and obtain a first contour image and a second contour image based on the third contour image and the fourth contour image respectively.
[0239] In some implementations, the processing module 2320 is specifically used to: perform color inversion processing on the third contour image and the fourth contour image respectively to obtain the first contour image and the second contour image.
[0240] In some implementations, the processing module 2320 is further used to: after respectively performing color inversion processing on the third contour image and the fourth contour image, perform sharpening processing on the third contour image and the fourth contour image to obtain the first contour image and the second contour image.
[0241] In some possible implementations, the device 2300 may further include: a selection module 2340, which is used to select an edge detection operator that has a positive impact on image clarity from multiple edge detection operators before the processing module 2320 applies a target edge detection operator to the first grayscale image and the second grayscale image respectively to obtain a third contour image and a fourth contour image; and use the selected edge detection operator as the target edge detection operator.
[0242] In some implementations, the detection module 2330 is specifically used to: determine a first similarity between the first contour image and the second contour image; and detect whether the dark mode is abnormal based on the first similarity.
[0243] In some implementations, the detection module 2330 is specifically used to: apply a peak signal-to-noise ratio algorithm to the first contour image and the second contour image to obtain a first similarity.
[0244] In some possible implementations, the detection module 2330 is specifically used to: if the first similarity is greater than a first preset threshold, determine that the dark mode is normal; if the first similarity is less than or equal to the first preset threshold, determine that the dark mode is abnormal.
[0245] In some implementations, the device 2300 may further include: a determination module 2350 for determining and displaying the abnormal cause of the dark mode if it is determined that the dark mode is abnormal, after the detection module 2330 detects whether the dark mode is abnormal based on the first contour map and the second contour map.
[0246] In some possible implementations, the determination module 2350 is specifically used to: refresh the page to be tested or close and then reopen the page to be tested, and obtain a third screenshot of the page to be tested in the dark mode; process the third screenshot to obtain a fifth outline image; and determine the cause of the dark mode abnormality based on the first outline image, the second outline image, and the fifth outline image.
[0247] In some implementations, the determination module 2350 is specifically used to: determine a first similarity between the first contour map and the second contour map, and determine a second similarity between the first contour map and the fifth contour map; and determine the cause of the dark mode abnormality based on the first similarity and the second similarity.
[0248] In some possible implementations, the determination module 2350 is specifically used to: if the first similarity is less than or equal to a second preset threshold, and the second similarity is greater than the second preset threshold, then determine that the abnormal cause of the dark mode is that there is a setting problem of the page detection mechanism in some user interface UI modules in the page to be tested; if the first similarity and the second similarity are both less than or equal to the second preset threshold, then determine that the abnormal cause of the dark mode is that there is a subjective omission problem in at least one UI element in the page to be tested when adapting to the dark mode.
[0249] In some implementations, the device 2300 may further include: a conversion module 2360, which is used to convert data corresponding to the recommended content into static data if it is detected that the page to be tested is a page containing recommended content before the determination module 2350 refreshes the page to be tested or closes and reopens the page to be tested.
[0250] In some possible implementations, the device 2300 may further include: a generation and display module 2370, which is used to generate and display an alarm message if the dark mode is determined to be abnormal after the detection module 2330 detects whether the dark mode is abnormal based on the first contour map and the second contour map; wherein the alarm message is used to prompt R&D personnel that the dark mode is abnormal.
[0251] It should be understood that the device embodiment and the method embodiment may correspond to each other, and similar descriptions may refer to the method embodiment. To avoid repetition, they will not be described here. Specifically, Fig.23 The device 2300 shown can perform Figure 6 The corresponding method embodiments, and the aforementioned and other operations and / or functions of each module in the device 2300 are respectively to implement Figure 6 For the sake of brevity, the corresponding processes in each method are not repeated here.
[0252] The above describes the device 2300 of the embodiment of the present application from the perspective of the functional module in conjunction with the accompanying drawings. It should be understood that the functional module can be implemented in hardware form, can be implemented by instructions in software form, and can also be implemented by a combination of hardware and software modules. Specifically, the steps of the method embodiment in the embodiment of the present application can be completed by the hardware integrated logic circuit and / or software form instructions in the processor, and the steps of the method disclosed in the embodiment of the present application can be directly embodied as a hardware decoding processor to perform, or a combination of hardware and software modules in the decoding processor to perform. Optionally, the software module can be located in a mature storage medium in the field such as a random access memory, a flash memory, a read-only memory, a programmable read-only memory, an electrically erasable programmable memory, a register, etc. The storage medium is located in a memory, and the processor reads the information in the memory, and completes the steps in the above method embodiment in conjunction with its hardware.
[0253] Fig.24 It is a schematic block diagram of an electronic device provided in an embodiment of the present application.
[0254] like Fig.24 As shown, the electronic device may include:
[0255] The memory 2410 and the processor 2420, the memory 2410 is used to store the computer program and transmit the program code to the processor 2420. In other words, the processor 2420 can call and run the computer program from the memory 2410 to implement the method in the embodiment of the present application.
[0256] For example, the processor 2420 may be configured to execute the above method embodiments according to instructions in the computer program.
[0257] In some embodiments of the present application, the processor 2420 may include but is not limited to:
[0258] General-purpose processor, digital signal processor (DSP), application-specific integrated circuit (ASIC), field programmable gate array (FPGA) or other programmable logic device, discrete gate or transistor logic device, discrete hardware components, etc.
[0259] In some embodiments of the present application, the memory 2410 includes but is not limited to:
[0260] Volatile memory and / or non-volatile memory. Among them, the non-volatile memory can be read-only memory (ROM), programmable ROM (PROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM) or flash memory. The volatile memory can be random access memory (RAM), which is used as an external cache. By way of example and not limitation, many forms of RAM are available, such as static random access memory (SRAM), dynamic random access memory (DRAM), synchronous dynamic random access memory (SDRAM), double data rate synchronous dynamic random access memory (DDR SDRAM), enhanced synchronous dynamic random access memory (ESDRAM), synchronous link DRAM (SLDRAM), and direct RAM bus random access memory (DR RAM).
[0261] In some embodiments of the present application, the computer program may be divided into one or more modules, which are stored in the memory 2410 and executed by the processor 2420 to complete the method provided by the present application. The one or more modules may be a series of computer program instruction segments capable of completing specific functions, and the instruction segments are used to describe the execution process of the computer program in the electronic device.
[0262] like Fig.24 As shown, the electronic device may also include:
[0263] The transceiver 2430 may be connected to the processor 2420 or the memory 2410 .
[0264] The processor 2420 may control the transceiver 2430 to communicate with other devices, specifically, to send information or data to other devices, or to receive information or data sent by other devices. The transceiver 2430 may include a transmitter and a receiver. The transceiver 2430 may further include an antenna, and the number of antennas may be one or more.
[0265] It should be understood that the various components in the electronic device are connected via a bus system, wherein the bus system includes not only a data bus but also a power bus, a control bus and a status signal bus.
[0266] The present application also provides a computer storage medium on which a computer program is stored, and when the computer program is executed by a computer, the computer can perform the method of the above method embodiment. In other words, the present application embodiment also provides a computer program product containing instructions, and when the instructions are executed by a computer, the computer can perform the method of the above method embodiment.
[0267] When software is used for implementation, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the process or function provided in accordance with the embodiment of the present application is generated in whole or in part. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions may be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium. For example, the computer instructions may be transmitted from a website site, a computer, a server, or a data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line (digital subscriber line, DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) mode to another website site, computer, server, or data center. The computer-readable storage medium may be any available medium that a computer can access or a data storage device such as a server or a data center that includes one or more available media integrated. The available medium may be a magnetic medium (e.g., a floppy disk, a hard disk, a tape), an optical medium (e.g., a digital video disc (digital video disc, DVD)), or a semiconductor medium (e.g., a solid state disk (solid state disk, SSD)), etc.
[0268] Those of ordinary skill in the art will appreciate that the modules and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.
[0269] In the several embodiments provided in the present application, it should be understood that the disclosed systems, devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of the module is only a logical function division. There may be other division methods in actual implementation, such as multiple modules or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or modules, which can be electrical, mechanical or other forms.
[0270] The modules described as separate components may or may not be physically separated, and the components displayed as modules may or may not be physical modules, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the scheme of this embodiment. For example, each functional module in each embodiment of the present application may be integrated into a processing module, or each module may exist physically separately, or two or more modules may be integrated into one module.
[0271] The above contents are only specific implementation methods of the present application, but the protection scope of the present application is not limited thereto. Any technician familiar with the technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.
Claims
1. A dark mode anomaly detection method, characterized in that: include: Get the first screenshot of the page to be tested in day mode and the second screenshot in dark mode; Performing grayscale processing on the first screenshot and the second screenshot respectively to obtain a first grayscale image and a second grayscale image; Processing the first grayscale image and the second grayscale image respectively to obtain a first contour image and a second contour image; Whether the dark mode is abnormal is detected based on the first contour map and the second contour map.
2. The method according to claim 1, characterized in that The step of processing the first grayscale image and the second grayscale image respectively to obtain a first contour image and a second contour image comprises: Applying an object edge detection operator to the first grayscale image and the second grayscale image respectively to obtain a third contour image and a fourth contour image; The first contour map and the second contour map are obtained based on the third contour map and the fourth contour map respectively.
3. The method according to claim 2, characterized in that The obtaining of the first contour map and the second contour map based on the third contour map and the fourth contour map respectively comprises: The third contour map and the fourth contour map are respectively subjected to color inversion processing to obtain the first contour map and the second contour map.
4. The method according to claim 2, characterized in that: The obtaining of the first contour map and the second contour map based on the third contour map and the fourth contour map respectively comprises: The third contour image is subjected to inversion processing and sharpening processing to obtain the first contour image; and the fourth contour image is subjected to inversion processing and sharpening processing to obtain the second contour image.
5. The method according to any one of claims 2 to 4, characterized in that: Before respectively applying the target edge detection operator to the first grayscale image and the second grayscale image to obtain the third contour image and the fourth contour image, the method further includes: Selecting an edge detection operator having a positive impact on image clarity from among multiple edge detection operators; The selected edge detection operator is used as the target edge detection operator.
6. The method according to any one of claims 1 to 4, characterized in that The detecting whether the dark mode is abnormal based on the first contour map and the second contour map includes: determining a first similarity between the first contour map and the second contour map; Whether the dark mode is abnormal is detected based on the first similarity.
7. The method according to claim 6, characterized in that The detecting whether the dark mode is abnormal based on the first similarity includes: If the first similarity is greater than a first preset threshold, determining that the dark mode is normal; If the first similarity is less than or equal to the first preset threshold, it is determined that the dark mode is abnormal.
8. The method according to any one of claims 1 to 4, characterized in that After detecting whether the dark mode is abnormal based on the first contour map and the second contour map, the method further includes: If it is determined that the dark mode is abnormal, the abnormal reason of the dark mode is determined and displayed.
9. The method according to claim 8, characterized in that Determine the cause of the dark mode abnormality, including: Refresh the page to be tested or close and reopen the page to be tested, and obtain a third screenshot of the page to be tested in the dark mode; Processing the third screenshot to obtain a fifth contour image; The dark mode abnormality cause is determined based on the first profile map, the second profile map, and the fifth profile map.
10. The method according to claim 9, characterized in that The determining the abnormal cause of the dark mode based on the first contour map, the second contour map, and the fifth contour map includes: determining a first similarity between the first contour map and the second contour map, and determining a second similarity between the first contour map and the fifth contour map; The dark mode abnormality cause is determined based on the first similarity and the second similarity.
11. The method according to claim 10, characterized in that The determining the abnormal cause of the dark mode based on the first similarity and the second similarity includes: If the first similarity is less than or equal to a second preset threshold, and the second similarity is greater than the second preset threshold, it is determined that the abnormal cause of the dark mode is that there is a setting problem of the page detection mechanism in some user interface UI modules in the page to be tested; If both the first similarity and the second similarity are less than or equal to the second preset threshold, it is determined that the abnormal reason for the dark mode is that at least one UI element in the page to be tested has a subjective omission problem when adapting to the dark mode.
12. The method according to any one of claims 9 to 11, characterized in that: Before refreshing the page to be tested or closing and reopening the page to be tested, the method further includes: If it is detected that the page to be tested is a page containing recommended content, the data corresponding to the recommended content is converted into static data.
13. A dark mode anomaly detection device, characterized in that: include: An acquisition module, used to acquire a first screenshot of the page to be tested in day mode and a second screenshot in dark mode; A processing module, used for performing grayscale processing on the first screenshot and the second screenshot respectively to obtain a first grayscale image and a second grayscale image; and respectively processing the first grayscale image and the second grayscale image to obtain a first contour image and a second contour image; A detection module is used to detect whether the dark mode is abnormal based on the first contour map and the second contour map.
14. An electronic device, characterized in that: include: A processor and a memory, the memory being used to store a computer program, and the processor being used to call and run the computer program stored in the memory to execute the method according to any one of claims 1 to 12.
15. A computer-readable storage medium, characterized in that: Used to store a computer program, the computer program causing a computer to execute the method according to any one of claims 1 to 12.
