Browser compatibility visual regression test method and device and electronic equipment

Abstract

The invention provides a browser compatibility visual regression test method and device and electronic equipment. The method comprises the steps that a prototype graph is obtained, rendering processing is conducted on a page of a target browser according to the prototype graph, a page graph of the target browser is obtained, and the prototype graph is a visual blueprint of the page and used for benchmark reference in the development and test stage; based on the pixel values of the prototype graph and the page graph, the similarity between the prototype graph and the page graph is determined, a test result of the target browser is determined according to the similarity, and the test result is used for determining whether the compatibility visual regression test of the target browser passes or not. The problems that an existing browser compatibility visual regression test is low in test efficiency and test accuracy are solved.

Description

Technical Field

[0001] This application relates to the field of browser compatibility visual regression testing technology, and more specifically, to a browser compatibility visual regression testing method, apparatus, computer-readable storage medium, and electronic device. Background Technology

[0002] In today's digital age, various applications are frequently updated and iterated to meet the ever-changing needs of users, which places new demands on the visual effects of front-end pages.

[0003] However, the rendering of front-end pages often varies across different browsers, making browser compatibility visual regression testing a crucial step in ensuring user experience. Traditional visual regression testing relies primarily on manual methods, requiring testers to open the page in different browsers one by one and visually observe the differences between the page and the design mockup.

[0004] This method is not only inefficient but also susceptible to subjective factors, leading to inaccurate test results. With the increasing frequency of program updates, the workload of testing is growing exponentially, making manual testing insufficient to meet practical needs.

[0005] When faced with a massive number of web pages, manual testing is almost impossible to conduct a comprehensive visual inspection. This often results in discrepancies between the displayed images on different browsers and the original design, leading to a poor user experience and potential damage to the service provider's brand image. Summary of the Invention

[0006] The main objective of this application is to provide a method, apparatus, computer-readable storage medium, and electronic device for visual regression testing of browser compatibility, so as to at least solve the problems of low testing efficiency and low testing accuracy in existing visual regression testing of browser compatibility.

[0007] To achieve the above objectives, according to one aspect of this application, a method for visual regression testing of browser compatibility is provided, comprising: obtaining a prototype image, and rendering a page of a target browser based on the prototype image to obtain a page image of the target browser, wherein the prototype image is a visual blueprint of the page and is used as a benchmark reference during the development and testing phases; determining the similarity between the prototype image and the page image based on the pixel values, and determining the test result of the target browser based on the similarity, wherein the test result is used to determine whether the visual regression test of the target browser compatibility passes.

[0008] Optionally, determining the similarity between the prototype image and the page image based on their pixel values ​​includes: adding anchor points at the same positions to both the prototype image and the page image, and performing geometric alignment on the prototype image and the page image according to their anchor points; performing region marking on the geometrically aligned prototype image and the page image according to a preset marking rule to obtain test regions and non-test regions of the prototype image and the page image; and determining the similarity of the test regions of the prototype image and the page image based on their pixel values.

[0009] Optionally, determining the similarity between the prototype image and the page image based on the pixel values ​​of the prototype image and the page image includes: determining the pixel difference of each pixel point in the prototype image and the page image, and calculating the similarity between the prototype image and the page image based on the pixel difference of each pixel point.

[0010] Optionally, determining the pixel difference between each pixel of the prototype image and the page image includes: using a pixel-by-pixel RGB difference algorithm to determine the pixel difference between each pixel of the prototype image and the page image.

[0011] Optionally, after determining the pixel difference values ​​of each pixel point in the prototype image and the page image, the method further includes: generating a heat map according to a preset heat map table based on the pixel difference values ​​of each pixel point in the prototype image and the page image, wherein the preset heat map table is a mapping relationship table between pixel difference values ​​and colors; and superimposing the heat map with a preset opacity onto the page image to obtain a superimposed difference heat map.

[0012] Optionally, determining the test result of the target browser based on the similarity includes: determining whether the similarity is greater than a similarity threshold; if the similarity is greater than the similarity threshold, determining that the visual regression test of the target browser passes; if the similarity is less than or equal to the similarity threshold, determining that the visual regression test of the target browser fails.

[0013] Optionally, rendering the target browser's page according to the prototype diagram to obtain the target browser's page image includes: determining the viewport resolution and aspect ratio of the target browser according to the prototype diagram; and rendering the target browser's page according to the viewport resolution and aspect ratio and the prototype diagram to obtain the target browser's page image.

[0014] According to another aspect of this application, a browser compatibility visual regression testing apparatus is provided, comprising: an acquisition unit, configured to acquire a prototype image and render a page of a target browser based on the prototype image to obtain a page image of the target browser, wherein the prototype image is a visual blueprint of the page and is used as a benchmark reference during the development and testing phases; and a determination unit, configured to determine the similarity between the prototype image and the page image based on pixel values, and determine the test result of the target browser based on the similarity, wherein the test result is used to determine whether the visual regression test for the compatibility of the target browser has passed.

[0015] According to another aspect of this application, a computer-readable storage medium is provided, the computer-readable storage medium including a stored program, wherein, when the program is executed, it controls the device where the computer-readable storage medium is located to perform any of the browser compatibility visual regression testing methods described above.

[0016] According to another aspect of this application, an electronic device is provided, comprising: one or more processors, a memory, and one or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, the one or more programs including a method for performing a compatibility visual regression test of any of the browsers described above.

[0017] By applying the technical solution of this application, a prototype design drawn by a designer is used as a benchmark. An automated testing tool renders the front-end page in the target browser, obtaining corresponding page screenshots. Then, the system compares the pixel values ​​of the prototype and the page screenshots one by one, calculates their similarity, and automatically determines the test results of the page's visual effect in the target browser based on a preset percentage threshold for pixel conformity. This technical solution overcomes the problems of low efficiency and subjective factors affecting test accuracy in existing technologies, achieving efficient and objective monitoring of browser compatibility visual effects. Through precise pixel-level comparison and automated judgment, the system can quickly identify and locate problems where the page presentation does not match the design, significantly improving testing efficiency and accuracy. This ensures the consistency of page visual effects across different browser environments, enhances user experience, and provides strong technical support for front-end development and testing processes. Thus, it solves the problems of low testing efficiency and low testing accuracy in existing browser compatibility visual regression testing. Attached Figure Description

[0018] The accompanying drawings, which form part of this application, are used to provide a further understanding of this application. The illustrative embodiments and descriptions of this application are used to explain this application and do not constitute an undue limitation of this application. In the drawings:

[0019] Figure 1 A hardware structure block diagram of a mobile terminal for performing a browser compatibility visual regression test method is shown in an embodiment of this application.

[0020] Figure 2 A flowchart illustrating a browser compatibility visual regression testing method according to an embodiment of this application is shown.

[0021] Figure 3 An overall structural diagram of a browser compatibility visual regression testing system provided according to an embodiment of this application is shown;

[0022] Figure 4 A logic diagram of the core module provided according to an embodiment of this application is shown;

[0023] Figure 5 A structural block diagram of a browser compatibility visual regression testing apparatus provided according to an embodiment of this application is shown. Detailed Implementation

[0024] It should be noted that, unless otherwise specified, the embodiments and features described in this application can be combined with each other. This application will now be described in detail with reference to the accompanying drawings and embodiments.

[0025] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present application, and not all embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative effort should fall within the scope of protection of the present application.

[0026] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate for the embodiments of this application described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0027] For ease of description, the following explains some of the nouns or terms used in the embodiments of this application:

[0028] Browser compatibility testing: A type of test that verifies the consistency of webpage rendering across different browsers, ensuring that functionality and visual performance meet expectations.

[0029] Visual regression testing: By comparing page screenshots before and after code changes, we can detect any unexpected visual changes (such as element misalignment or color deviation) to ensure UI stability.

[0030] Prototype design: A visual blueprint of the interface created by the designer using tools, serving as a benchmark reference during the development and testing phases.

[0031] Positioning and comparison identification markers (single-pixel markers): This solution embeds transparent or low-contrast pixel-level markers at the four corners of the page. Automated tools can accurately identify these markers to locate comparison areas, ensuring coordinate alignment. They are virtually imperceptible to the human eye and do not affect the page's appearance.

[0032] Non-test content marking (selection matrix): Dynamically delineate variable areas such as ad slots and personalized content on the page using tools to eliminate interference during comparison and improve test accuracy.

[0033] Pixel-level comparison: The algorithm compares the RGB values ​​of the actual screenshot with the design drawing pixel by pixel, quantifies visual deviations, and detects subtle rendering problems.

[0034] Display scaling standardization (100% mode): unifies the browser viewport scaling to the original size, eliminating the impact of image distortion caused by scaling on test results.

[0035] Pixel compliance percentage threshold: A preset acceptable matching ratio (e.g., 98%) used to determine whether the test result passes, allowing for a reasonable range of rendering errors (e.g., differences in font anti-aliasing).

[0036] Marking tool: A tool used by testers in the system. Its function is to accurately mark non-test content on the page, such as changing fonts and advertising positions, using a matrix-like selection pattern. The marked content items do not require consistency comparison.

[0037] Difference Heatmap: Visualizes image differences as a color gradient, with red areas indicating high deviations, making it easier for testers to quickly locate problem areas.

[0038] Overlay Heatmap: This solution incorporates a heatmap of differences overlaid with the original design and page renderings, processed with a certain degree of transparency. This allows testers to quickly locate problem areas.

[0039] Test Sandbox Environment: An isolated, repeatable browser runtime environment that ensures each test is executed under consistent conditions and avoids interference from external factors.

[0040] Page anchor point: A special combination of pixels designed in this solution within the program page, used as a marker for image alignment and comparison.

[0041] Prototype Anchor Point: A special combination of pixels designed in this scheme for use as a marker in the prototype image for image alignment and comparison.

[0042] Single-pixel positioning marker: In this solution, this is a specific implementation of page anchor points. Transparent or low-contrast pixels (usually RGBA(1,1,1,1)) are embedded in the four corners of the page for coordinate alignment before image comparison, ensuring that the screenshot and the design are precisely aligned at the pixel level.

[0043] As described in the background section, existing browser compatibility visual regression testing suffers from low testing efficiency and low testing accuracy. To address these issues, embodiments of this application provide a browser compatibility visual regression testing method, apparatus, computer-readable storage medium, and electronic device.

[0044] The technical solutions of the present invention will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present invention.

[0045] The methods and embodiments provided in this application can be executed on a mobile terminal, computer terminal, or similar computing device. Taking running on a mobile terminal as an example, Figure 1 This is a hardware structure block diagram of a mobile terminal for a browser compatibility visual regression testing method according to an embodiment of the present invention. Figure 1 As shown, a mobile terminal may include one or more ( Figure 1 Only one is shown in the diagram. A processor 102 (which may include, but is not limited to, a microprocessor MCU or a programmable logic device FPGA, etc.) and a memory 104 for storing data are also shown. The mobile terminal may further include a transmission device 106 for communication functions and an input / output device 108. Those skilled in the art will understand that... Figure 1 The structure shown is for illustrative purposes only and does not limit the structure of the mobile terminal described above. For example, the mobile terminal may also include components that are more... Figure 1 The more or fewer components shown, or having the same Figure 1 The different configurations shown.

[0046] The memory 104 can be used to store computer programs, such as application software programs and modules, like the computer program corresponding to the browser compatibility visual regression testing method in this embodiment of the invention. The processor 102 executes various functional applications and data processing by running the computer programs stored in the memory 104, thereby implementing the above-described method. The memory 104 may include high-speed random access memory and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory 104 may further include memory remotely located relative to the processor 102, and these remote memories can be connected to the mobile terminal via a network. Examples of the aforementioned networks include, but are not limited to, the Internet, corporate intranets, local area networks, mobile communication networks, and combinations thereof. The transmission device 106 is used to receive or send data via a network. Specific examples of the aforementioned networks may include wireless networks provided by the mobile terminal's communication provider. In one example, the transmission device 106 includes a network interface controller (NIC), which can be connected to other network devices via a base station to communicate with the Internet. In one example, the transmission device 106 may be a radio frequency (RF) module, which is used to communicate with the Internet wirelessly.

[0047] This embodiment provides a method for visual regression testing of browser compatibility running on a mobile terminal, computer terminal or similar computing device. It should be noted that the steps shown in the flowchart in the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions. Although a logical order is shown in the flowchart, in some cases, the steps shown or described may be executed in a different order than that shown here.

[0048] Figure 2 This is a flowchart of a browser compatibility visual regression testing method according to an embodiment of this application. Figure 2 As shown, the method includes the following steps:

[0049] Step S201: Obtain the prototype diagram and render the page of the target browser according to the prototype diagram to obtain the page diagram of the target browser. The prototype diagram is a visual blueprint of the page and is used as a benchmark reference in the development and testing phases.

[0050] Step S202: Based on the pixel values ​​of the prototype image and the page image, determine the similarity between the prototype image and the page image, and determine the test result of the target browser according to the similarity. The test result is used to determine whether the visual regression test of the target browser passes.

[0051] In this embodiment, by applying steps S201 and S202, the prototype design drawn by the designer is used as a benchmark. An automated testing tool renders the front-end page in the target browser, obtaining a corresponding page screenshot. Then, the system compares the pixel values ​​of the prototype and the page screenshot one by one, calculates their similarity, and automatically determines the test result of the page's visual effect in the target browser based on a preset percentage threshold for pixel conformity. This technical solution overcomes the problems of low efficiency and subjective factors affecting test accuracy in existing technologies, achieving efficient and objective monitoring of browser compatibility visual effects. Through precise pixel-level comparison and automated judgment, the system can quickly identify and locate discrepancies between the page presentation and the design, significantly improving testing efficiency and accuracy. This ensures consistency in the page's visual effect across different browser environments, enhances user experience, and provides strong technical support for front-end development and testing processes. This solves the problems of low testing efficiency and low testing accuracy in existing browser compatibility visual regression testing.

[0052] In the specific implementation process, the similarity between the prototype image and the page image is determined based on their pixel values. This includes: adding anchor points at the same positions to both the prototype image and the page image, and performing geometric alignment on both images based on their respective anchor points; performing region marking on the geometrically aligned prototype image and page image according to a preset marking rule to obtain test and non-test regions; and determining the similarity between the test regions of the prototype image and the page image based on their pixel values.

[0053] In this embodiment, anchor points are added to both the prototype and page images at the same location. These almost invisible single-pixel markers allow the system to automatically align the two images, eliminating comparison errors caused by coordinate offsets. Subsequently, according to preset marking rules, the aligned images are divided into regions, clearly distinguishing between test and non-test areas. Non-test areas, such as dynamic fonts and advertising spaces, are selected using a marking tool to avoid being included in subsequent comparisons. This effectively eliminates interference from non-core visual elements, improving the accuracy of the comparison. Based on the calculation of pixel-by-pixel RGB value differences within the test area, the system can determine the similarity between the prototype and page images within that area. By generating a difference heatmap, pixel-level differences are visualized, facilitating rapid identification of problems. Furthermore, the system also calculates the overall pixel conformity rate and judges whether the test results meet the standards based on preset thresholds. This series of automated processes significantly saves time and effort in manual testing, improves testing efficiency and accuracy, and ensures a high degree of consistency between the visual effects and design intent of the front-end page across multiple browsers, thereby enhancing user experience and brand image.

[0054] Specifically, determining the similarity between the prototype image and the page image based on the pixel values ​​of the prototype image and the page image includes: determining the pixel difference of each pixel in the prototype image and the page image, and calculating the similarity between the prototype image and the page image based on the pixel difference of each pixel.

[0055] In this embodiment, by identifying anchor points in the page and the design drawing, the system achieves precise alignment between the two in geometric space. Then, it calculates the pixel-by-pixel RGB difference to generate a difference heatmap. Using a preset pixel conformance percentage threshold, the system can automatically determine whether the browser compatibility regression test has passed. During multi-browser parallel testing, the system can efficiently process and aggregate test results, generating intuitive visual reports to help testers quickly locate problem areas. Furthermore, the system records test configurations and historical results, facilitating version management and issue backtracking. Overall, the method and system in this embodiment not only significantly reduce the workload of manual testing but also ensure a high degree of consistency between the front-end page's visual effect and the design drawing across various browser environments, guaranteeing a good visual experience for users on different devices, thereby improving the overall application quality and user satisfaction.

[0056] More specifically, determining the pixel difference between each pixel of the prototype image and the page image includes: using a pixel-by-pixel RGB difference algorithm to determine the pixel difference between each pixel of the prototype image and the page image.

[0057] This embodiment calculates the color deviation (ΔR, ΔG, ΔB) of each pixel in the prototype image and the page image by comparing RGB values ​​pixel by pixel, and further synthesizes the difference intensity value to quantify the visual difference.

[0058] Furthermore, after determining the pixel difference values ​​of each pixel point in the prototype image and the page image, the method further includes: generating a heat map according to a preset heat map table based on the pixel difference values ​​of each pixel point in the prototype image and the page image, wherein the preset heat map table is a mapping relationship table between pixel difference values ​​and colors; and superimposing the heat map with a preset opacity onto the page image to obtain a superimposed difference heat map.

[0059] The preset opacity can be set to 20%. By overlaying the difference heatmap with the original page screenshot, a superimposed difference heatmap is formed. Displaying the superimposed difference heatmap at 20% opacity provides a clear visual comparison, helping testers understand the differences more clearly and accelerating problem resolution. Overall, the combination of the pixel-by-pixel RGB difference algorithm and the difference visualization strategy in this embodiment significantly improves the efficiency and accuracy of browser compatibility visual regression testing, providing high-quality visual effects for the application system's front-end pages.

[0060] This embodiment, after determining the pixel differences between each pixel in the prototype image and the page image, generates a heatmap based on these differences according to a preset heatmap table. The heatmap table defines the mapping relationship between pixel differences and colors, making the intensity of the differences visible and facilitating rapid identification. Subsequently, a heatmap with preset opacity is overlaid on the page image to generate an overlaid difference heatmap. This overlay process, by adjusting the opacity of the heatmap, makes the comparison between the heatmap and the page image more intuitive, preserving the original visual information of the page while highlighting the areas of difference. Through this series of processes, testers can quickly locate areas on the page that significantly differ from the prototype design, improving testing efficiency and accuracy, and ensuring visual consistency of the front-end page across different browsers.

[0061] Furthermore, determining the test result of the target browser based on the aforementioned similarity includes: determining whether the aforementioned similarity is greater than a similarity threshold; if the aforementioned similarity is greater than the aforementioned similarity threshold, determining that the aforementioned compatibility visual regression test of the target browser has passed; if the aforementioned similarity is less than or equal to the aforementioned similarity threshold, determining that the aforementioned compatibility visual regression test of the target browser has failed.

[0062] This solution employs a "perceptual tolerance" mechanism. For minor visual differences, such as variations in anti-aliasing effects, an acceptable color difference threshold (similarity threshold) is set, allowing for a certain degree of deviation. Finally, the pixel conformance rate of the test area is statistically analyzed. If this rate exceeds a preset pixel conformance percentage threshold, such as 98%, the page compatibility test is considered passed for that browser; otherwise, it is marked as a failure, and a difference report is generated. Through this automated and standardized testing process, the system effectively improves testing efficiency, ensuring that the visual effect of the page on various browsers is highly consistent with the design draft, thus guaranteeing the stable operation of the application system and a good user experience.

[0063] Specifically, based on the aforementioned prototype diagram, the page of the target browser is rendered to obtain the page diagram of the target browser, including: determining the viewport resolution and aspect ratio of the target browser based on the aforementioned prototype diagram; and rendering the page of the target browser according to the aforementioned viewport resolution and aspect ratio and the aforementioned prototype diagram to obtain the aforementioned page diagram of the target browser.

[0064] This solution employs standardized viewport resolution and scaling settings to ensure consistency between the target browser's page image and the prototype design. Specifically, based on the prototype's dimensions, the system determines the target browser's viewport resolution to be specific, such as the common 1920×1080, while fixing the browser's view scaling to 100%. This eliminates visual discrepancies under different display ratios, achieving accurate comparison between the page and the design. Furthermore, before rendering the page, the system clears cache and cookies to prevent loading status from affecting visual effects. It then waits for page resources and asynchronous requests to fully load to obtain the final page presentation. During rendering, the system adopts a unified font smoothing strategy and smoothing level scaling to address font rendering differences across different operating systems, ensuring consistent font display across platforms and avoiding visual discrepancies caused by differences in system font rendering algorithms. Through this standardized rendering process, the system can accurately capture the page's visual effects in multiple browser environments, laying a solid foundation for subsequent automated comparison. Once the page is fully loaded and rendered in the target browser, the system immediately takes a screenshot. This screenshot serves as the baseline image for subsequent testing, and is compared pixel-by-pixel with the prototype design to evaluate whether the page's visual effect on that browser meets the expected standards. This process not only improves the accuracy of the testing but also ensures high-precision visual consistency across different browsers, regardless of the page's complexity.

[0065] To enable those skilled in the art to better understand the technical solution of this application, the implementation process of the browser compatibility visual regression testing method of this application will be described in detail below with reference to specific embodiments.

[0066] This embodiment relates to a browser compatibility visual regression testing system, aiming to overcome the challenge of accurately and efficiently performing automatic regression testing on various browsers to determine the degree of visual consistency between the final page display and the design drafts, given the continuous updates to application systems. The initial step of the system is to import the designer's prototype design drafts into the system, using them as a key reference in subsequent comparison stages.

[0067] During the front-end development process, single-pixel, almost invisible markers were added to the four corners of the page at the same locations as the prototype design to accurately mark the page's comparison positions. Simultaneously, testers used a marking tool within the system, employing a matrix-like selection method, to precisely mark non-test content such as changing fonts and advertising spaces.

[0068] Once the page development is complete and deployed to the test environment, the system uses automated testing tools to sequentially call various browsers and set the page to a specified display ratio (such as 100%). The system then captures page screenshots and performs a pixel-level comparison with the designer's prototype design based on previously added page identifiers, and quickly returns the comparison results.

[0069] Ultimately, the system determines whether the browser compatibility regression test passes based on the pre-configured percentage of pixel comparison differences exceeding a set value across the entire page, according to a threshold. This system significantly alleviates the heavy burden of browser compatibility visual effect testing caused by frequent program modifications, upgrading the page restoration work, which previously relied on human visual recognition, to an automated recognition mode, greatly improving testing efficiency. Especially when dealing with massive amounts of pages, it effectively avoids discrepancies between the displayed effects on different browsers and the original design, ensuring high-precision restoration of the visual effects of the application system's front-end pages.

[0070] This system is as follows Figure 3 As shown, it includes: a prototype upload module, a front-end page file module, a core module, and a testing and marking module. The core module is further divided into a front-end display module, an automated testing module, and a logging module.

[0071] 1. Front-end page file module:

[0072] This module serves as the system's data entry point, responsible for centrally managing the front-end page resources to be tested. It contains static resource files, and can perform version control, path resolution, and dynamic injection on these resources. The module is responsible for uniformly integrating the web pages to be tested (including but not limited to static packages compiled from common frameworks such as Vue, React, JSP, and ASP.NET) into this system. Its operation is consistent with the conventional front-end continuous integration process.

[0073] The basic functions of this module are consistent with the current front-end development and version management modules in general application system development. The new feature is that the module can simultaneously save lossless PNG image versions exported from the prototype software. By default, they are in the same package, and the current page version and the prototype version in the current package are matched, thereby ensuring the consistency of the test benchmark.

[0074] In actual operation, the module deploys page files to a dedicated test sandbox environment to avoid conflicts with production or development environments. Simultaneously, the module supports injecting single-pixel markers into the displayed page using scripts to mark dynamic areas, providing identifiable visual anchors for subsequent modules. The injection process is as follows:

[0075] 1) Calculate the coordinates of the four core anchor points. Using the top-left corner of the page as the coordinate (0, 0), increment the coordinates to the right and downwards. Each of the four coordinates is 5 pixels inwards from one of the four corners of the page (or other fixed pixel values ​​can be used; this can be standardized). For example, if the page resolution is 1920x1080 and the scaling is 100%, the four anchor point coordinates would be (5,5), (1915,5), (5,1075), and (1915,1075).

[0076] 2) Generate special marker divs based on anchor point coordinates. Any unique combination of pixels with few repetitions can become a special marker; it is not a patented exclusive marker. Here's a simple example: Using the anchor point coordinates as the center, expand by one pixel in each direction (top, bottom, left, and right) to form a cross. Set these 5 pixels to 0xffffff (single-pixel black) with 100% transparency. Set the top left, top right, bottom left, and bottom right pixels to 0x000000 (single-pixel white). Then set 4 such special markers for the entire image.

[0077] 3) Inject elements into the page. Based on the four generated special tags, generate four 3x3px divs, and then use JavaScript to insert these four divs at the end, with the layout style `position:fixed` and `z-index:99999`. Simultaneously, use `pointer-events:none` to ensure that the events of the inserted tag layer do not participate in the page's own events.

[0078] Because the injected special marker pixels are extremely small, they can be visually ignored.

[0079] 2) Marking Test Module:

[0080] This module provides testers with a visual, interactive interface for defining "test areas" and "non-test areas." Its primary function is area selection and categorization. This feature allows testers to select areas on the page design using a separate tool window, marking dynamic content such as ad carousels, user avatars, and timestamps. The system also supports various selection methods, including polygons, rectangles, and paths, and allows adding semantic tags such as "dynamic content," "third-party embedded," and "ignoreable animation" to each area for subsequent logical judgment.

[0081] As an optimization method, fixed tags are added during page development as page anchors for subsequent alignment with prototype anchors. The tool module also supports structured output of tag data. All user-marked information will be converted into a specific data format, such as JSON. This allows the coordinates, size, type, tags, annotations, and other information of each area to be recorded to be systematically recorded and written to the recording module, which is beneficial for later area capture and verification. This data will serve as a "mask layer" or "key inspection" basis for image comparison during the automated testing phase, ensuring that ignored areas are not included in pixel-level comparison, thereby avoiding false alarms.

[0082] 3) Prototype upload module:

[0083] This module serves as the system's design baseline entry point, responsible for receiving, verifying, and locking the prototype images submitted by designers. When designers submit prototype images (lossless compressed PNG format), they set the prototype image anchor points and manually confirm the positions of the four anchor points to ensure alignment with page anchor points. Simultaneously, they confirm the correspondence with the page (the tool provides an onion-head view with the original page at the bottom and the prototype image on top for anchor point inspection; if inconsistencies exist, the prototype image can be manually moved to match the anchor point positions; once finalized, the system automatically calculates the anchor point positions for the uploaded PNG). The module automatically saves a file-aligned version with the front-end page file module, generates a unique page ID and a comparable prototype image, and writes it to the records module to ensure that the entire testing chain uses the same high-precision design baseline and reference.

[0084] 4) Core Modules:

[0085] This module includes a front-end display unit, an automated testing unit, and a recording module unit, and is the core of this embodiment. The module logic diagram of the core module is as follows: Figure 4 As shown, it specifically includes the following:

[0086] 1) Front-end display unit:

[0087] This unit is responsible for reproducing the visual effect of a page in a real browser environment based on the page file content provided by the front-end page file module. It serves as the observation window for visual regression testing.

[0088] This module calls the browser driver interface to sequentially launch the compatible browsers to be tested in the sandbox environment, and strictly standardizes the rendering conditions required by the page system.

[0089] First, fix the browser viewport resolution and aspect ratio, such as 1920×1080, and set the browser view zoom to 100%, then disable user style injection and extension plugins. Next, clear the cache and cookies to ensure the page loads as if it were the first visit. Afterward, wait for the page to fully load its resource files and for asynchronous API responses to return before taking a screenshot.

[0090] Meanwhile, to address font rendering differences across different operating systems, a standard implementation approach is to configure font smoothing strategies and font display precision (DPI) scaling to ensure consistent font display across platforms. Regarding font smoothing strategies, "subpixel anti-aliasing" and "grayscale anti-aliasing" are disabled on all systems, retaining only the simplest grayscale rendering to avoid color shifts at character edges caused by differences in algorithms such as ClearType / Quartz.

[0091] The specific implementation process for configuring consistent font display precision scaling is as follows:

[0092] (1) Fix browser parameters: In the browser startup settings, use the --force-device-scale-factor=1 directive to disable the browser's built-in font scaling.

[0093] (2) Unify operating system DPI: In Windows, call SetProcessDPIAware() to make the process ignore system-level DPI scaling and keep 96 DPI; in macOS, set NSHighResolutionCapable=False in the startup script to force rendering at 1× resolution; in Linux, add -dpi 96 to the xvfb startup parameters and disable lcdfilter and hintstyle fine-tuning in fontconfig.

[0094] Finally, the screenshots are seamlessly stitched together to generate a lossless image, preserving complete color information and transparency channels. For dynamic pages, small-scale dynamic content is generally marked as "ignore check" during initial annotation. For large-scale dynamic content, screenshots are triggered at intervals based on pre-annotated JavaScript injection. Multiple screenshots are marked as multiple images, and comparisons will be made against the annotated images (the annotated images will also have corresponding multi-image annotations to indicate the presence of multiple content). Each screenshot is appended with metadata (browser type, version, system environment, timestamp) for later traceability and discrepancy attribution. Finally, the relevant data is sent to the recording unit for documentation.

[0095] 2) Automated testing unit:

[0096] This unit is responsible for executing image comparison logic and generating test results. The work consists of the following steps.

[0097] The first step is image preprocessing. In this step, the module performs geometric alignment between the page screenshot and the design prototype by aligning the page anchor points with the prototype anchor points. The system first identifies the single-pixel positioning markers embedded in the four corners to ensure that the two images completely overlap in the pixel coordinate system.

[0098] The second step is partition comparison. This unit divides the image into "test areas" and "ignore areas" based on the labeled data in the recording unit. The labeled data in the recording unit comes from the testers manually marking the ignore areas. The system records the vertex coordinates of the ignore areas on the marked pages. The final data is stored in the recording unit in JSON format.

[0099] Within the test area, the boundaries of the ignore area are first calculated based on the ignored area marked on the page, and the area within the ignore area is directly marked as 0 difference. Outside the ignore area, a common pixel-by-pixel RGB difference algorithm is used to calculate the color deviation (ΔR, ΔG, ΔB) of each pixel, and the difference intensity value is obtained by combining them. Specifically, a difference image with the same resolution as the original image is generated. The difference image performs pixel-by-pixel RGB difference calculation between the screenshot and the design image, and maps the difference to color values. Usually, the difference is the sum of the squares of the three RGB differences and then the square root. Note that the ignore area is not calculated and is filled with pure black. For minor differences that are allowed for text rendering, anti-aliasing, etc., the system introduces a "perceptual tolerance" mechanism: when the color difference is less than a set threshold, it is considered acceptable.

[0100] The third step is difference visualization and quantification. After image comparison is completed, the module will generate an intuitive and visual difference heatmap based on the difference image regions, transforming abstract pixel-level differences into intuitive and analyzable graphical and data indicators. This mainly includes the following sub-steps:

[0101] (1) The difference image generated in the second step is transformed into a heatmap by visually displaying the intensity of the difference through color gradient. In specific implementation, the system can preset the correspondence between color and intensity (such as blue → yellow → red). For example, the blue area represents the difference is very small or no difference; the yellow area represents the difference is moderate; and the red area represents the difference is significant and needs to be focused on. Each area corresponds to a certain range of difference values.

[0102] (2) Overlay the heatmap with 20% opacity and the original page screenshot with 100% opacity to form the final overlay difference heatmap.

[0103] The module calculates the overall pixel compliance rate (i.e., the number of matched pixels / the total number of tested pixels). If the compliance rate is higher than a preset threshold (e.g., ≥98%), the page visual regression test under this browser is deemed to have passed; otherwise, it is marked as "abnormal" and a difference report is generated.

[0104] The above three steps demonstrate how the module performs parallel processing across multiple browsers, running different instances in parallel across various browsers to achieve batch testing. Test results are aggregated by page-browser dimension, forming visual dashboards, reports, and other information to help testers quickly locate problems.

[0105] 3) Recording unit:

[0106] This module contains records of various data and configuration information, and provides and receives data from the automated testing module.

[0107] Regarding the recording of various data and configuration information, this module persistently stores test configuration data. It can save the prototype path, marked area data, comparison thresholds, browser list, and other test strategies for each page, supporting version management. When a page or design is updated, the system can prompt "Marker expired" or "Baseline changed," guiding testers to review the configuration. The module also includes user operation logs, recording all manual marking, threshold modifications, test triggers, etc., along with the operator, time, and changes, meeting internal audit and compliance requirements.

[0108] Regarding the provision and receipt of data for the automated unit modules, the test mask and corresponding design diagram data are read before each automated test. After the test, the results are archived and retrospectively analyzed. Each test result (including but not limited to screenshots, difference diagrams, reports, and logs) is uploaded to a designated storage path and archived in a "project-version-time" structure. It supports retrospective viewing of the test status of any historical version, facilitating regression testing or assessment of the impact of design changes.

[0109] In today's digital age, application iterations and updates are becoming increasingly frequent. Every code optimization, feature expansion, and interface adjustment can impact compatibility with different browsers, making browser compatibility visual testing a crucial step in ensuring user experience. However, traditional manual testing methods face numerous challenges. This system, with its innovative solution, effectively alleviates the heavy burden of browser compatibility visual testing. It cleverly upgrades the previously entirely human-reliant page reconstruction work to a highly efficient and accurate automated recognition mode. This transformation not only significantly increases testing speed but also injects unprecedented efficiency and accuracy into the testing process. The system's superiority is particularly evident when dealing with massive amounts of pages. When different browsers display discrepancies between the rendering and the original design, these discrepancies are often difficult to detect and correct manually. However, this system can capture these subtle differences with extremely high sensitivity and respond quickly. It can ensure that the front-end page is perfectly reproduced with high precision in various browsers at all times, avoiding the confusion and discomfort caused to users by inconsistent visual effects. It effectively ensures that the visual effect of the system's front-end page is always in the best state, providing users with a good visual experience, and at the same time providing solid technical support for the stable development of the open platform.

[0110] This application also provides a browser compatibility visual regression testing device. It should be noted that the browser compatibility visual regression testing device of this application can be used to execute the browser compatibility visual regression testing method provided in this application. This device is used to implement the above embodiments and preferred embodiments; details already described will not be repeated. As used below, the term "module" can refer to a combination of software and / or hardware that performs a predetermined function. Although the device described in the following embodiments is preferably implemented in software, hardware implementation, or a combination of software and hardware, is also possible and contemplated.

[0111] The following describes the browser compatibility visual regression testing device provided in the embodiments of this application.

[0112] Figure 5 This is a schematic diagram of a browser compatibility visual regression testing apparatus according to an embodiment of this application. Figure 5 As shown, the device includes:

[0113] The acquisition unit 51 is used to acquire the prototype diagram and render the page of the target browser according to the prototype diagram to obtain the page diagram of the target browser. The prototype diagram is a visual blueprint of the page and is used as a benchmark reference in the development and testing phases.

[0114] The determining unit 52 is used to determine the similarity between the prototype image and the page image based on the pixel values ​​of the prototype image and the page image, and to determine the test result of the target browser based on the similarity, wherein the test result is used to determine whether the visual regression test of the target browser passes.

[0115] In this embodiment, the acquisition unit is used to acquire a prototype image and render the page of the target browser based on the prototype image to obtain the page image of the target browser. The prototype image serves as a visual blueprint for the page and is used as a benchmark reference during development and testing. The determination unit is used to determine the similarity between the prototype image and the page image based on their pixel values, and to determine the test result of the target browser based on the similarity. The test result is used to determine whether the visual compatibility regression test of the target browser passes. By using the prototype design drawn by the designer as a benchmark, an automated testing tool renders the front-end page in the target browser and obtains a corresponding page screenshot. Then, the system compares the pixel values ​​of the prototype image and the page screenshot one by one to calculate their similarity, and then automatically determines the test result of the page visual effect under the target browser based on a preset pixel conformance percentage threshold. This technical solution overcomes the problems of low efficiency in manual testing and the influence of subjective factors on test accuracy in existing technologies, achieving efficient and objective monitoring of browser compatibility visual effects. Through precise pixel-level comparison and automated judgment, the system can quickly identify and locate discrepancies between the page presentation and the design, significantly improving testing efficiency and accuracy. This ensures consistent visual effects across different browser environments, enhances user experience, and provides strong technical support for front-end development and testing processes. It thus solves the problems of low testing efficiency and low accuracy in existing browser compatibility visual regression testing.

[0116] As an optional solution, the determining unit includes an alignment processing module, a marking processing module, and a first determining module. The alignment processing module is used to add anchor points at the same position to the prototype image and the page image respectively, and to perform geometric alignment processing on the prototype image and the page image based on the anchor points of the prototype image and the page image. The marking processing module is used to perform region marking processing on the geometrically aligned prototype image and the page image according to a preset marking rule to obtain the test region and non-test region of the prototype image and the page image. The first determining module is used to determine the similarity of the test region of the prototype image and the page image based on the pixel values ​​of the prototype image and the page image.

[0117] In one optional embodiment, the determining unit further includes a second determining module, used to determine the pixel difference of each pixel point of the prototype image and the page image, and to calculate the similarity between the prototype image and the page image based on the pixel difference of each pixel point.

[0118] In one optional scheme, the second determining module includes a determining submodule, used to determine the pixel difference between each pixel of the prototype image and the page image by employing a pixel-by-pixel RGB difference algorithm.

[0119] In one optional scheme, the determining unit further includes a generation module and an overlay module; the generation module is used to generate a heat map according to a preset heat map table based on the pixel differences of each pixel in the prototype image and the page image after determining the pixel differences of each pixel in the prototype image and the page image, wherein the preset heat map table is a mapping relationship table between pixel differences and colors; the overlay module is used to overlay the heat map with a preset opacity onto the page image to obtain an overlay difference heat map.

[0120] In one optional scheme, the determining unit includes a third determining module, a fourth determining module, and a fifth determining module. The third determining module is used to determine whether the similarity is greater than a similarity threshold. The fourth determining module is used to determine that the visual regression test of the target browser passes if the similarity is greater than the similarity threshold. The fifth determining module is used to determine that the visual regression test of the target browser fails if the similarity is less than or equal to the similarity threshold.

[0121] In one optional scheme, the acquisition unit includes a sixth determining module and a rendering processing module; the sixth determining module is used to determine the viewport resolution and aspect ratio of the target browser based on the above prototype diagram; the rendering processing module is used to render the page of the target browser according to the above viewport resolution and aspect ratio and the above prototype diagram to obtain the above page diagram of the target browser.

[0122] The aforementioned browser compatibility visual regression testing device includes a processor and a memory. The acquisition unit, determination unit, etc., are all stored as program units in the memory, and the processor executes these program units to achieve the corresponding functions. All of the above modules reside in the same processor; alternatively, the modules may be located in different processors in any combination.

[0123] The processor contains a kernel, which retrieves the corresponding program units from memory. One or more kernels can be configured; adjusting kernel parameters can address the issues of low testing efficiency and accuracy in visual regression testing for browser compatibility.

[0124] The memory may include non-permanent memory in computer-readable media, such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM, and the memory includes at least one memory chip.

[0125] This invention provides a computer-readable storage medium including a stored program, wherein, when the program is executed, it controls the device where the computer-readable storage medium is located to perform the browser compatibility visual regression test method.

[0126] Specifically, browser compatibility visual regression testing methods include:

[0127] Step S201: Obtain the prototype diagram and render the page of the target browser according to the prototype diagram to obtain the page diagram of the target browser. The prototype diagram is a visual blueprint of the page and is used as a benchmark reference in the development and testing phases.

[0128] Step S202: Based on the pixel values ​​of the prototype image and the page image, determine the similarity between the prototype image and the page image, and determine the test result of the target browser according to the similarity. The test result is used to determine whether the visual regression test of the target browser passes.

[0129] This invention provides a processor for running a program, wherein the program executes the browser compatibility visual regression test method during runtime.

[0130] Specifically, browser compatibility visual regression testing methods include:

[0131] Step S201: Obtain the prototype diagram and render the page of the target browser according to the prototype diagram to obtain the page diagram of the target browser. The prototype diagram is a visual blueprint of the page and is used as a benchmark reference in the development and testing phases.

[0132] Step S202: Based on the pixel values ​​of the prototype image and the page image, determine the similarity between the prototype image and the page image, and determine the test result of the target browser according to the similarity. The test result is used to determine whether the visual regression test of the target browser passes.

[0133] This invention provides an electronic device, which includes a processor, a memory, and a program stored in the memory and executable on the processor. When the processor executes the program, it performs at least the following steps:

[0134] Step S201: Obtain the prototype diagram and render the page of the target browser according to the prototype diagram to obtain the page diagram of the target browser. The prototype diagram is a visual blueprint of the page and is used as a benchmark reference in the development and testing phases.

[0135] Step S202: Based on the pixel values ​​of the prototype image and the page image, determine the similarity between the prototype image and the page image, and determine the test result of the target browser according to the similarity. The test result is used to determine whether the visual regression test of the target browser passes.

[0136] The devices mentioned in this article can be servers, PCs, tablets, mobile phones, etc.

[0137] This application also provides a computer program product, which, when executed on a data processing device, is suitable for executing an initialization program having at least the following method steps:

[0138] Step S201: Obtain the prototype diagram and render the page of the target browser according to the prototype diagram to obtain the page diagram of the target browser. The prototype diagram is a visual blueprint of the page and is used as a benchmark reference in the development and testing phases.

[0139] Step S202: Based on the pixel values ​​of the prototype image and the page image, determine the similarity between the prototype image and the page image, and determine the test result of the target browser according to the similarity. The test result is used to determine whether the visual regression test of the target browser passes.

[0140] It is obvious to those skilled in the art that the modules or steps of the present invention described above can be implemented using general-purpose computing devices. They can be centralized on a single computing device or distributed across a network of multiple computing devices. They can be implemented using computer-executable program code, and thus can be stored in a storage device for execution by a computing device. In some cases, the steps shown or described can be performed in a different order than those described herein, or they can be fabricated as separate integrated circuit modules, or multiple modules or steps can be fabricated as a single integrated circuit module. Thus, the present invention is not limited to any particular combination of hardware and software.

[0141] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0142] This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this application. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart... Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0143] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0144] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0145] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0146] Memory may include non-persistent memory in computer-readable media, such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM. Memory is an example of computer-readable media.

[0147] Computer-readable media includes both permanent and non-permanent, removable and non-removable media that can store information using any method or technology. Information can be computer-readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase-change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other non-transferable medium that can be used to store information accessible by a computing device. As defined herein, computer-readable media does not include transient computer-readable media, such as modulated data signals and carrier waves.

[0148] The technical features of the above embodiments can be combined in any way. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0149] It should also be noted that the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such process, method, article, or apparatus. Unless otherwise specified, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes that element.

[0150] The above description is merely a preferred embodiment of this application and is not intended to limit this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the protection scope of this application.

Claims

1. A visual regression testing method for browser compatibility, characterized in that, include: Obtain the prototype image, and render the page of the target browser according to the prototype image to obtain the page image of the target browser. The prototype image is a visual blueprint of the page and is used as a benchmark reference during the development and testing phases. Based on the pixel values ​​of the prototype image and the page image, the similarity between the prototype image and the page image is determined, and the test result of the target browser is determined according to the similarity. The test result is used to determine whether the visual regression test for compatibility of the target browser passes.

2. The method according to claim 1, characterized in that, Determining the similarity between the prototype image and the page image based on their pixel values ​​includes: Add anchor points at the same position to the prototype diagram and the page diagram respectively, and perform geometric alignment processing on the prototype diagram and the page diagram according to the anchor points of the prototype diagram and the page diagram; According to the preset marking rules, the geometrically aligned prototype image and the page image are subjected to region marking processing to obtain the test area and non-test area of ​​the prototype image and the page image; Based on the pixel values ​​of the prototype image and the page image, the similarity of the test area between the prototype image and the page image is determined.

3. The method according to claim 1, characterized in that, Determining the similarity between the prototype image and the page image based on their pixel values ​​includes: The pixel difference between each pixel in the prototype image and the page image is determined, and the similarity between the prototype image and the page image is calculated based on the pixel difference between each pixel.

4. The method according to claim 3, characterized in that, Determining the pixel difference between each pixel in the prototype image and the page image includes: The pixel difference between each pixel in the prototype image and the page image is determined by using a pixel-by-pixel RGB difference algorithm.

5. The method according to claim 3, characterized in that, After determining the pixel differences between each pixel in the prototype image and the page image, the method further includes: According to a preset heatmap table, a heatmap is generated based on the pixel difference between each pixel in the prototype image and the page image. The preset heatmap table is a mapping table between pixel difference and color. The heatmap with preset opacity is superimposed on the page image to obtain a superimposed difference heatmap.

6. The method according to claim 1, characterized in that, Determining the test result of the target browser based on the similarity includes: Determine whether the similarity is greater than a similarity threshold; If the similarity is greater than the similarity threshold, the visual regression test for compatibility of the target browser is deemed to have passed. If the similarity is less than or equal to the similarity threshold, the visual regression test for compatibility of the target browser is determined to be unsuccessful.

7. The method according to claim 1, characterized in that, Based on the prototype diagram, the page of the target browser is rendered to obtain the page diagram of the target browser, including: Based on the prototype diagram, determine the viewport resolution and aspect ratio of the target browser; The target browser's page is rendered according to the viewport resolution and scale, and the prototype image, to obtain the page image of the target browser.

8. A browser compatibility visual regression testing device, characterized in that, include: The acquisition unit is used to acquire the prototype image and render the page of the target browser according to the prototype image to obtain the page image of the target browser. The prototype image is a visual blueprint of the page and is used as a benchmark reference in the development and testing phases. A determining unit is configured to determine the similarity between the prototype image and the page image based on the pixel values ​​of the prototype image and the page image, and to determine the test result of the target browser based on the similarity, wherein the test result is used to determine whether the visual regression test for compatibility of the target browser passes.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium includes a stored program, wherein, when the program is executed, it controls the device on which the computer-readable storage medium is located to perform the browser compatibility visual regression test method according to any one of claims 1 to 7.

10. An electronic device, characterized in that, include: One or more processors, a memory, and one or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, the one or more programs including a method for performing a browser compatibility visual regression test as described in any one of claims 1 to 7.

Images