CN104731694B - Browser compatibility method for testing and analyzing and browser compatibility detecting and analysing system - Google Patents

Abstract

The invention relates to a browser compatibility test analysis method and a test analysis system. This browser compatibility test analysis method comprises the following steps: the system under test display step, with the same display mode on different browsers, so that the interactive interface of the software system to be tested is displayed and the display of each interactive interface is saved Screenshot; image coding index table establishment step, image preprocessing is performed on the saved screenshot to extract multi-dimensional feature values, and according to the extracted multi-dimensional feature values, a picture coding index table is established for each screenshot, and the image comparison step is based on The image coding index table performs batch comparison on the display results of each interactive interface on different browsers and generates comparison results; and the test report generation step generates a test report according to the comparison results. The invention can improve the efficiency and accuracy of the browser compatibility test.

Description

Browser Compatibility Test Analysis Method and Browser Compatibility Test Analysis System

technical field

The invention relates to the technical field of browser compatibility testing, in particular to a browser compatibility testing method and system for software user interfaces.

Background technique

Current software systems generally need to support multiple browsers. Due to differences in the kernels, rendering engines, JavaScript interpreters, and data storage of different browsers, software systems have compatibility issues among different browsers. At present, the compatibility testing for browsers is generally based on manual testing, which requires manual comparison and analysis of the display results of different browsers.

The user interface design of the same software will be displayed differently among different browsers. How to accurately test the compatibility between different browsers has always been a difficult problem for testers. At present, browser compatibility tests generally rely on manual inspection and visual identification by testers, and there are three common problems:

1. The test interface comparison elements are easy to miss;

2. The efficiency of test comparison is low, and it is overly dependent on the quality of specific testers;

3. The test accuracy is not high, and the comparison benchmark in the test process is not clear.

At the same time, with the continuous development of the Internet economy, the interface design of the software system will often be revised in order to keep up with the pace of the market, which puts forward higher requirements for the testing of the software system interface.

Contents of the invention

In view of the above problems, the present invention aims to provide a browser compatibility test analysis method and a browser compatibility test analysis system capable of improving the efficiency and accuracy of user interface compatibility test.

The browser compatibility test analysis method of the present invention is characterized in that, comprises the following steps:

The display step of the system to be tested is to display the interactive interface of the software system to be tested on different browsers in the same display mode and save the screenshot for the display of each interactive interface;

The step of establishing a picture coding index table is to perform picture preprocessing on the saved screenshots to extract multi-dimensional feature values, and to establish a picture coding index table for each screenshot according to the extracted multi-dimensional feature values;

Picture comparing step, according to described picture encoding index table, carry out batch comparison to the display result of each interactive interface on different browsers and generate comparison result; And

The test report generating step is to generate a test report according to the comparison result.

Preferably, in the step of displaying the system under test, the same display method on different browsers refers to selecting a plurality of displays with the same size and resolution and installing different browsers or displaying them on one display Install different browsers on the Internet, and remove third-party plug-ins from the browser.

Preferably, in the step of establishing the picture coding index table, the stored screenshots are subjected to picture preprocessing to extract color feature values, texture feature values, and spatial relationship feature values, and each screenshot is established according to these three feature values. Image encoding index table.

Preferably, the step of establishing the picture coding index table includes the following sub-steps:

The color feature extraction step is to carry out image preprocessing to the saved screenshot to extract the color moment representing the color distribution;

A texture feature extraction step, performing statistical calculations on multiple pixels contained in the saved screenshot, so as to obtain texture features representing the surface properties of the image; and

The spatial relationship feature extraction step is to calculate the mutual spatial position or relative direction relationship between multiple objects in the saved screenshot to obtain the spatial relationship feature.

Preferably, the color moments include the following features: first-order moments, second-order moments, third-order moments,

The texture features include the following features: texture thickness, directionality,

The spatial relationship features include the following features: connection relationship, adjacency relationship, overlap relationship, overlap relationship, containment relationship, containment relationship.

Preferably, in the picture comparison step, the specified browser is used as the comparison benchmark, and the picture coding index table is searched according to the picture number, and the display results of each interactive interface on different browsers are compared in batches to generate a comparison. to the result.

Preferably, in the step of comparing pictures, it is possible to perform batch comparison and generate a comparison result by omitting prescribed items among the above-mentioned items as required.

Preferably, in the step of comparing pictures, bit matching of feature indexes of pictures is performed.

Preferably, said picture feature index bit matching includes the following sub-steps:

For a characteristic value of the two browsers, read the preset specified value range;

Determine whether the difference between a characteristic value of the two browsers is within the preset specified value range;

If it is within the specified range, it is determined that the characteristic values of the two browsers are the same; otherwise, it is determined that the characteristic values of the two browsers are different.

The browser compatibility test and analysis system of the present invention is characterized in that it includes:

Different browsers with the same display mode are used to display the interactive interface of the software system to be tested and save screenshots of the display of each interactive interface;

The image encoding index table building module is used to perform image preprocessing on the saved screenshots to extract multi-dimensional feature values, and establish an image encoding index table for each screenshot according to the extracted multi-dimensional feature values;

The picture comparison module performs batch comparison on the display results of each interactive interface on different browsers according to the picture coding index table and generates comparison results; and

The test report generation module generates a test report according to the comparison result.

Preferably, the different browsers with the same display mode refer to selecting a plurality of monitors with the same size and resolution and installing different browsers or installing different browsers on one monitor, and removing the browser's first browser at the same time. Three-party plug-ins.

According to the browser compatibility test and analysis method and browser compatibility test and analysis system of the present invention, the display results of the software system to be tested on different browsers can be automatically analyzed and compared in batches, and the comparison can be flexibly controlled through configuration files The information bitmap discards insensitive comparison information, and after the comparison is completed, the comparison results will automatically generate a test report. Therefore, using the present invention, the efficiency and accuracy of browser compatibility testing can be improved.

Description of drawings

FIG. 1 is a schematic flowchart of the browser compatibility testing and analyzing method of the present invention.

Fig. 2 is a specific flow chart showing the steps of establishing an image encoding index table in the browser compatibility testing and analyzing method of the present invention.

Fig. 3 is a flow chart showing the comparison based on the picture coding index table in the browser compatibility testing and analysis method of the present invention.

Detailed ways

Introduced below are some of the various embodiments of the invention, intended to provide a basic understanding of the invention. It is not intended to identify key or critical elements of the invention or to delineate the scope of protection.

The main technical solution of the present invention is to firstly display all existing interfaces in the interactive interface design of the software system to be tested on different browsers, ensure that the resolution and size of the browsers are consistent before displaying, and eliminate browsers. Third-party plug-ins reduce the impact on test results. Then, keep analyzing the screenshots of the pictures displayed by each browser, extract the feature values of the pictures, and build a feature value index table. Then, use the specified browser display results as the comparison benchmark to perform batch comparison of the display results of other browsers and generate a test report. During the comparison process, it is allowed to achieve the threshold control of the difference domain through the configuration file to achieve similarity. degrees compared to expectations.

Firstly, the browser compatibility test and analysis method of the present invention will be described below.

FIG. 1 is a schematic flowchart of the browser compatibility testing and analysis method of the present invention.

As shown in Figure 1, the browser compatibility test analysis method of the present invention mainly comprises the following steps:

Display steps of the system to be tested: select N monitors with the same size and resolution (shown as browser 1, browser 2, browser 3, and browser N in Figure 1) and install different browsers, or A different browser is installed on the monitor. Input the interactive interface of the interface system to be tested, that is, the software system to be tested, into browser 1, browser 1, browser 2, browser 3, browser N and save screenshots for the display of each interactive interface;

The step of establishing the picture coding index table: preprocessing the saved screenshots to extract multi-dimensional feature values, and building a picture coding index table for each screenshot according to the extracted multi-dimensional feature values (not shown in Figure 1);

Image comparison step: specify a browser among browsers 1 to N (such as mainstream browsers) as a benchmark, and perform batch comparison and generation of the display results of each interactive interface on different browsers according to the image encoding index table comparison results; and

Test report generation step: generate a test report according to the comparison results.

Fig. 2 is a specific flow chart showing the steps of establishing an image encoding index table in the browser compatibility testing and analyzing method of the present invention.

As shown in Figure 2, in the step of establishing the picture coding index table, firstly carry out picture preprocessing to the saved screenshot, then respectively match the three latitudes of the color feature, texture feature and spatial relationship feature of the interface picture, and finally Summarize the feature values of the pictures to establish a picture coding index table.

Among them, the color feature describes the nature of the image based on pixels. Any color distribution in an image can be represented by its moments. The color distribution information is mainly concentrated in the low-order moment, and the first-order moment (mean), second-order moment (variance) and third-order moment (skewness) of the color are used to express the color distribution of the image. Obtain the color moment of the picture and perform color coding to obtain the information of the background, foreground color and shadow color level of the software interface system.

Texture feature is a global feature that describes the surface properties of an image. Statistical calculations are performed on an area containing multiple pixels to obtain information on characteristic parameters such as the thickness and directionality of the image texture.

Spatial relationship refers to the mutual spatial position or relative direction relationship between multiple objects segmented in the image. These relationships can also be divided into connection, adjacency, overlap, overlap, containment, containment and other relationships. By analyzing the spatial relationship in the picture, the layout information among the entry box, information display, drop-down box, etc. in the software interface can be obtained.

Next, the feature value index tables established respectively for the three latitudes of color features, texture features, and spatial relationship features will be described.

Table 1 is an index table representing color features.

Table 1

color characteristics first moment second moment third moment browser 1 A1 A2 A3 browser 2 B1 B2 B3 ... X1 X2 X3 browserN N1 N2 N3

A1, A2, A3 represent the feature value of a picture displayed on browser 1, B1, B2, B3 represent the feature value of a picture displayed on browser 2, N1, N2, N3 represent the feature value of a picture displayed on browser 1 The eigenvalues shown on N.

Compare the values of the color features of browsers 1~N as follows:

Compare the eigenvalues of the first moments: compare A1, B1, X1...N1;

Compare the eigenvalues of the second moments: compare A2, B2, X2...N2;

Compare the eigenvalues of the third moments: compare A3, B3, X3...N3.

Table 2 is an index table representing texture features. In Table 2, texture thickness and directionality are only exemplified as texture features, and other features may also be included, which are not listed here one by one.

Table 2

texture features texture thickness directionality other features browser 1 Aa1 Aa2  … browser 2 Bb1 Bb2  … ... Xx1 Xx2  … browserN Nn1 N2 ...

Compare the values of the texture features of browsers 1~N as follows:

Compare the eigenvalues of texture thickness: Aa1, Bb1, Xx1, Nn1 are compared;

Comparing eigenvalues of directionality: Aa2, Bb2, Xx2, Nn2 are compared.

Table 3 is an index table representing spatial relationship features. In Table 3, as spatial relationship features, connection relationships, adjacency relationships, overlapping relationships, containment relationships, and containment relationships are only exemplified, and other features may also be included, which are not listed here.

table 3

Spatial relationship features connection relationship Adjacency Overlapping relationship Overlapping relationship containment relationship Inclusive relationship rest of the relationship browser 1 Aaa1 Aaa2 Aaa3 Aaa4 Aaa5 Aaa6 .... browser 2 Bbb1 Bbb2 Bbb3 Bbb4 Bbb5 Bbb6 … ... Xxx1 Xxx2 Xxx3 Xxx4 Xxx5 Bbb6 … browserN Nnn1 Nnn2 Nnn3 Nnn4 Nnn5 Nnn6 …

Compare the values of the spatial relationship features of browsers 1~N as follows:

For the eigenvalues of the connection relationship: compare Aaa1, Bbb1, Xxx1, and Nnn1;

For the eigenvalues of the adjacent relationship: compare Aaa2, Bbb2, Xxx2, Nnn2;

...

For the eigenvalues of the containment relationship: Aaa6, Bbb6, Xxx6, Nnn6 are compared.

According to the eigenvalue processing of the three dimensions in Table 1 to Table 3 above, the main display elements of a software interface can be obtained. After the characteristic information is obtained, the characteristic value of each picture is summarized, and a picture coding index table is established according to all interactive pictures designed on the interface of the software system.

Fig. 3 is a flow chart showing the comparison based on the picture coding index table in the browser compatibility testing and analysis method of the present invention.

In the picture coding index table, each included interactive interface is represented by number i, and j represents the number of all existing interactive interfaces. Designate a supported mainstream browser as the comparison benchmark, and perform batch comparison analysis on the display results of all interactive interfaces on different browsers. The specific comparison process is shown in Figure 3.

Wherein, the specific process of "reading and comparing configuration files and performing index bitmap matching" in FIG. 3 is performed as follows.

Assume that the comparison is made for the first moments in the color features. A floating acceptance interval is set for the first-order moment in the comparison configuration file. For example, the floating value of the first-order moment is set to 10 in the comparison configuration file, which means that if the value difference is within 10, the picture is in two First moment equality between browsers:

For example, in Table 1, A1=100 B1=110, A1=B1 after comparison;

For example, in Table 1, A1= 80 B1=120, then A1 is not equal to B1 after comparison.

In addition, during the comparison process, according to the test requirements, similar matching can be performed on information that is not very sensitive on the system display interface, that is, the matching of individual information in the segment bitmap is discarded during the comparison process.

For example, the connection relationship of a certain picture is listed as non-important information during the test, and the comparison of Aaa1, Bbb1, Xxx1, and Nnn1 in Table 3 may not be performed, that is, the matching of individual information in the segment bitmap is discarded.

Above, the browser compatibility test and analysis method of the present invention has been described. The browser compatibility test and analysis system of the present invention will be briefly described below.

The browser compatibility test analysis system of the present invention includes: different browsers with the same display mode, used to display the interactive interface of the software system to be tested and save screenshots for the display of each interactive interface; a picture coding index table building module, Perform image preprocessing on the saved screenshots to extract multi-dimensional feature values, and build a picture coding index table for each screenshot according to the extracted multi-dimensional feature values; the picture comparison module compares each interaction according to the picture coding index table. The display results of the interface on different browsers are compared in batches and the comparison results are generated; and the test report generation module generates a test report according to the comparison results.

Wherein, the different browsers with the same display mode refers to selecting multiple monitors with the same size and resolution and installing different browsers or installing different browsers on one monitor, and removing third-party plug-ins of browsers at the same time .

According to the browser compatibility test and analysis method and browser compatibility test and analysis system of the present invention, the display results of the software system to be tested on different browsers can be automatically analyzed and compared in batches, and the comparison can be flexibly controlled through configuration files The information bitmap discards insensitive comparison information, and after the comparison is completed, the comparison results will automatically generate a test report. Therefore, using the present invention, the efficiency and accuracy of browser compatibility testing can be improved.

The above examples mainly illustrate the browser compatibility test analysis method and browser compatibility test analysis system of the present invention. Although only some specific embodiments of the present invention have been described, those skilled in the art should understand that the present invention can be implemented in many other forms without departing from the spirit and scope thereof. The examples and embodiments shown are therefore to be regarded as illustrative and not restrictive, and the invention may cover various modifications without departing from the spirit and scope of the invention as defined in the appended claims with replace.

Claims (7)

1. A browser compatibility test analysis method, characterized in that, comprises the following steps: The display step of the system to be tested is to display the interactive interface of the software system to be tested on different browsers in the same display mode and save the screenshot for the display of each interactive interface; The step of establishing a picture coding index table is to perform picture preprocessing on the saved screenshots to extract multi-dimensional feature values, and to establish a picture coding index table for each screenshot according to the extracted multi-dimensional feature values; In the picture comparison step, according to the picture coding index table, the display results of each interactive interface on different browsers are compared in batches and the comparison results are generated, wherein, the information bitmap of the comparison is flexibly controlled through the configuration file, and different information bits are discarded. Sensitive comparison information, wherein, using the specified browser as the comparison benchmark, look up the picture coding index table according to the picture number, perform batch comparison of the display results of each interactive interface on different browsers, and generate a comparison result; and A test report generating step, generating a test report according to the comparison results, In the step of displaying the system under test, using the same display method on different browsers refers to selecting multiple monitors with the same size and resolution and installing different browsers or installing different browsers on one monitor. browsers, while removing third-party plug-ins from browsers. 2. browser compatibility test analysis method as claimed in claim 1, is characterized in that, In the step of establishing the picture encoding index table, perform image preprocessing on the saved screenshots to extract color feature values, texture feature values, and spatial relationship feature values, and establish a picture encoding index for each screenshot according to these three feature values surface. 3. browser compatibility test analysis method as claimed in claim 2, is characterized in that, The step of establishing the picture coding index table includes the following sub-steps: The color feature extraction step is to carry out image preprocessing to the saved screenshot to extract the color moment representing the color distribution; A texture feature extraction step, performing statistical calculations on multiple pixels contained in the saved screenshot, so as to obtain texture features representing the surface properties of the image; and The spatial relationship feature extraction step is to calculate the mutual spatial position or relative direction relationship between multiple objects in the saved screenshot to obtain the spatial relationship feature. 4. browser compatibility test analysis method as claimed in claim 3, is characterized in that, The color moments include the following features: first-order moments, second-order moments, third-order moments, The texture features include the following features: texture thickness, directionality, The spatial relationship features include the following features: connection relationship, adjacency relationship, overlap relationship, overlap relationship, containment relationship, containment relationship. 5. browser compatibility test analysis method as claimed in claim 1, is characterized in that, In the picture comparing step, picture feature index bits are matched. 6. browser compatibility test analysis method as claimed in claim 5, is characterized in that, The picture feature index bit matching includes the following sub-steps: For a characteristic value of the two browsers, read the preset specified value range; Determine whether the difference between a characteristic value of the two browsers is within the preset specified value range; If it is within the specified range, it is determined that the characteristic values of the two browsers are the same; otherwise, it is determined that the characteristic values of the two browsers are different. 7. A browser compatibility test and analysis system, characterized in that it comprises: Different browsers with the same display mode are used to display the interactive interface of the software system to be tested and save screenshots of the display of each interactive interface; The image encoding index table building module is used to perform image preprocessing on the saved screenshots to extract multi-dimensional feature values, and establish an image encoding index table for each screenshot according to the extracted multi-dimensional feature values; The picture comparison module performs batch comparison on the display results of each interactive interface on different browsers according to the picture coding index table and generates the comparison results, wherein, the information bitmap of the comparison is flexibly controlled through the configuration file, and the different information bitmaps are discarded. Sensitive comparison information, wherein, using the specified browser as the comparison benchmark, look up the picture coding index table according to the picture number, perform batch comparison of the display results of each interactive interface on different browsers, and generate a comparison result; and The test report generation module generates a test report according to the comparison results, The different browsers with the same display mode refer to selecting multiple monitors with the same size and resolution and installing different browsers or installing different browsers on one monitor, while removing third-party plug-ins of the browsers.