KR101092661B1 - Method and apparatus for testing browser compatibility of web contents - Google Patents

Abstract

In the browser compatibility checking method and apparatus of the web content of the present invention, a virtual or actual reference web environment and a test web environment are constructed. The browser compatibility of the web content is checked by comparing the web content running in the built reference web environment with the web content running in the test web environment in terms of image and operation such as layout. As such, by automatically checking the browser compatibility of the web content in terms of images and operations, the productivity of web content production can be greatly improved.

Web Content, Web Browsers, Formal Specifications

Description

How to check browser compatibility of web content and its device {METHOD AND APPARATUS FOR TESTING BROWSER COMPATIBILITY OF WEB CONTENTS}

The present invention relates to a method and a device for checking browser compatibility of web content. Specifically, the browser compatibility of web content to improve productivity in web development by automatically analyzing results that vary according to various browsers and OS environments when web content is produced. An inspection method and apparatus.

The present invention is derived from a study conducted as part of the IT growth engine core technology development project of the Ministry of Knowledge Economy and the Ministry of Information and Telecommunications Research and Development. [Task management number: 2007-S-015-02, Title: Saas-based mobile personalized office work Environmental provision technology development]

In general, the browser compatibility checking technique of web content is only to detect the functional error that occurs during the web content creation process or to examine only partial characteristics. Or it just checks whether the browser is compliant. In fact, it is a manual process to check whether a certain web content is displayed consistently in various environments.

Web content generally refers to documents, websites, applications, etc. written according to the World Wide Web Consortium (W3C) standard. This web content is created from a combination of markup (HTML, XHTML, etc.), script (Javascript), and server-side modules (CGI, PHP, ASP, Open API, etc.).

In order to use web content, a web browser environment is used. There are many different types and versions of web browsers available today. In addition, even the same kind and version of web browsers exist in different versions depending on the basic operating system (OS) environment in which the web browser is executed.

The web browser's browser compatibility checking technique is to check whether a single web content is represented and operated in various environments, and whether web content is consistently displayed and operated in various environments. The situation is manually checked and corrected for each environment.

As described above, the technique of checking the browser compatibility of the conventional web content, which is being performed by hand, reduces the production productivity of the web content, and requires a large cost and time to develop and maintain one web content.

Accordingly, an object of the present invention is to provide a method and apparatus for checking browser compatibility of web content, which can automatically check browser compatibility of web content, which is currently manually performed, to solve such inconvenience.

Browser inspection apparatus for web content to achieve the object of the present invention as described above, the reference web environment and the test web environment that the web content is executed in accordance with the information of the operating system (OS) and the web browser provided from the outside A web environment building module for constructing a web image and comparing the reference image information of the web content executed in the reference web environment with the test image information of the web content executed in the test web environment, and the reference of the web content executed in the reference web environment. A comparison test for checking the compatibility between the test web environment and the reference web environment for the web content by comparing the operation information with the test operation information of the web content executed in the test web environment. Contains modules

The browser inspection method of the web content to achieve another object of the present invention, the step of receiving the OS information and the web browser information, and building a reference web environment and a test web environment based on the OS information and the web browser information And executing the web content in the reference web environment and the test web environment, respectively, the reference image information and the reference operation information of the web content executed in the reference web environment, and the web content in the test web environment. Extracting test image information and test operation information, and comparing the reference image information and the test image information, and comparing the reference operation information and the test operation information, in the test web environment for the web content. Checking for compatibility.

According to the present invention, virtual or real web environments are automatically established in a browser compatibility check process of existing web content, and web content is compared by comparing images and motion portions of web content respectively executed in automatically constructed web environments. Automatically checks for browser compatibility. As a result, the productivity of web content production can be greatly improved. In particular, the browser compatibility analysis process for the visual presentation of web content that is 100% manual can be minimized using image processing techniques, which can greatly contribute to the actual web development and maintenance work.

In the case of the behavior comparison analysis process, the proposed technique is limited to the static properties of the content such as page link relations or the like, or the behavior checking function in a limited environment using the web standard specification and the script language virtual machine instead of the actual browser is provided. The scope of analysis can be widened by considering the presentation area in the analysis process of the operation part of the web content. Therefore, the present invention can efficiently perform a browser compatibility check of a wider range of web content. have.

In the method and apparatus for checking the browser compatibility of the web content of the present invention, the visual expression portion of the web content is inspected according to an image pattern recognition technique, and the portion related to the function and operation of the web content is a formal specification technique of software. technique) and verification techniques.

In addition, to provide various browsers and OS environments, a device is provided that provides an environment for executing web content, which is a combination of four elements: various OS types, versions of each OS, different browser types, and versions of each browser.

Therefore, when the present invention is provided to the browser compatibility checking apparatus proposed by the present invention together with the execution environment information to compare and analyze the web content information written by the developer, the inspection device first analyzes the execution environment information to simulate various environments Or actually build.

Subsequently, under the established environment, the compatibility of the provided web content information is examined through a comparative analysis process from two viewpoints, such as expression and operation, and then a final analysis result is derived.

In summary, in the present invention, various web environments in which web contents are executed through four elements, such as various OS types, versions of each OS, various web browser types, and versions of each web browser, are constructed, and the web in the web environment is built. The layout information of the content is used to determine whether there is an abnormality in the expression form, and to automatically check whether the web content works as intended by the user, not manually.

As a result, the productivity of web content production can be greatly improved. In particular, the process of analyzing browser compatibility for the visual representation of web content, which relies on 100% manual operation, can be minimized by using image processing techniques, which reduces the effort and cost of actual web development and maintenance.

Also, in the case of the behavior comparison analysis process, the proposed technology analyzes only the static properties of the content such as page connection relations, or checks the behavior in a limited environment using a virtual machine of the web standard specification and scripting language rather than the actual browser. In the present invention, the scope of analysis can be widened in consideration of the expression area in the analysis process of the operation part of the web content, so that the browser compatibility check of a wider range of web content can be efficiently performed through the present invention. It can be done with

Hereinafter, exemplary embodiments of the present invention will be described in detail with reference to the accompanying drawings.

1 is a block diagram showing the configuration of an apparatus for checking browser compatibility of web content according to an embodiment of the present invention.

Referring to FIG. 1, the apparatus 100 for checking browser compatibility of web content according to an embodiment of the present invention may be used in various test web environments 30-1, 30-2, 30-3, ..., 30-n. In order to check the browser compatibility of the executed web content 20, the web environment construction module 110, the comparison inspection module 130, and the display module 150 are included.

The web environment building module 110 receives the web content 12, the OS information 14, and the web browser information 16 developed by a developer (or a user) to receive a reference web environment 20 and a plurality of test webs. Build environments 30-1, 30-2, 30-3, ..., 30-n. Here, the web content 12 includes all objects that are implemented on the web up to a web document type such as a homepage or a blog and an application type such as a game, a word processor, a web mail, and the like. The web environment building module 110 uses the OS information 14 and the web browser information 16 to generate a reference web environment 20 on which the web content 12 is executed and a plurality of test web environments 30-1 and 30. -2, 30-3, ..., 30-n). Here, the OS information 14 includes the OS type information and the OS version information, and the web browser information 16 includes the web browser type information and the web browser version information. That is, the web environment building module 110 may be configured to execute a reference web environment in which the web content 12 is executed through four elements including the OS type information, the OS version information, the web browser type information, and the web browser version information. 20) and a plurality of test web environments 30-1, 30-2, 30-3, ..., 30-n. In FIG. 1, an example in which one reference web environment 20 is constructed by the web environment building module 110 is illustrated, but two or more reference web environments may be constructed.

Meanwhile, in FIG. 1, the reference web environment 20 in which the web browser is Firefox 2.0, the OS type is Windows XP, and the first test web environment in which the web browser is Firefox 3.1b, and the OS type are Windows XP ( 30-1), the second test web environment 30-2 in which the web browser is Firefox 3.1b, the OS type is Mac OS X, and the third in which the web browser is Safari and the OS type is Mac OS X. The web environment building module 110 includes a plurality of test web environments including the test web environment 30-3 and the web browser being IE 7.0 and the control type test web environment 30-n whose OS type is Windows XP. An example constructed by is shown.

The comparison inspection module 130 compares the web content executed in the reference web environment with the plurality of web contents executed in the plurality of test web environments in terms of expression (or image) and operation, respectively, and analyzes the comparison result. Examine the browser compatibility of the web content for a plurality of test web environments. To this end, the comparison inspection module 130 includes an image comparison inspection module 132 and an operation comparison inspection module 134. The image comparison inspection module 132 may include a presentation area of the web content 12 executed in the reference web environment 20 and a plurality of test web environments 30-1, 30-2, 30-3, ..., 30 -n) compare the presentation areas of the web content 12 executed in each. That is, the image comparison inspection module 132 may display the web content 12 in the plurality of test web environments 30 based on the expression region expressed when the web content 12 is executed in the reference web environment 20. -1, 30-2, 30-3, ..., 30-n) to analyze the differences in the representation of the web content 12 that is expressed when executed respectively. The motion comparison inspection module 134 may perform operations provided by the web content 12 executed in the reference web environment 20 and a plurality of test web environments 30-1, 30-2, 30-3, ..., The operations provided by the web content 12 executed in 30-n) are respectively compared. That is, the motion comparison inspection module 134 may perform the plurality of test web environments 30-1 on the web content 12 based on an operation of the web content 12 displayed when the reference web environment 20 is executed. , 30-2, 30-3, ..., 30-n) to analyze the difference in operation of the web content that is implemented when executed respectively.

The display module 150 collects the results of the comparison analysis derived through the image comparison inspection module 132 and the operation comparison inspection module 134 and notify the developer again.

As described above, the apparatus 100 for checking browser compatibility of web content according to an embodiment of the present invention may be implemented through four elements such as various OS types, versions of each OS, various web browser types, and versions of each web browser. A virtual or real web environment is executed in which 12) is executed.

In the constructed web environment, the web content 12 automatically checks whether the web content 12 such as layout information of the web content 12 is normally operated as the developer intended.

As a result, the productivity of web content production can be greatly improved. In particular, the process of analyzing browser compatibility for the visual representation of web content, which relies on 100% manual operation, can be minimized by using image processing techniques, which reduces the effort and cost of actual web development and maintenance.

Hereinafter, a process of building a virtual or real web environment through the web environment building module 110 shown in FIG. 1 will be described in detail.

When the web environment construction module 110 receives the inspection request message, the execution environment conditions included in the inspection request message are analyzed to construct an execution environment, that is, a web environment. Execution environment conditions are classified into execution environment conditions which are the basis of comparison and execution environment conditions to be compared. Each condition consists of a combination of four elements: browser type, browser version, OS type, and OS version. For example, there are a total of six types of web browsers, each expressed as a, b, c, d, e, and f. The types of browser versions are five for a, ten for each of b, c, and d, and e, f. A [i], b [j], c [j], d [j], e [k], f [k], (0 <i <6, 0 <j <11, 0 <k <2, i, j, k are integers). In addition, assuming that there are three types of OS, and that each is x, y, and z, and that the OS version has two types of x, three types of y, and ten types of z, x [l] and y [m ], z [n], (0 <l <3, 0 <m <4, 0 <n <11, l, m, n are integers). Thus, the total combination is (a [i] + b [j] + c [j] + d [j] + e [k] + f [k]) × (x [l] + y [m] + z [ n]), and (5 + 10 + 10 + 10 + 1 + 1) × (2 + 3 + 10) = 555 branches. At this time, among the execution environment conditions transmitted by the developer, the reference environment condition basically consists of one browser version and one OS version, and is expressed as (a [1], x [1]), and the comparison target environment is ( (a [1-4], b [4], c [1-10]), (x [1-2], y [1], z [1])). Here, only one reference environment may be designated, but additionally delivered when the inspection request is confirmed by the developer to reduce the load of the web environment construction module 110. Other conditions can also be added to the check request message.

Such execution environment conditions may be expressed in meta-language based on extensible markup language (XML) and Java Script Object Notation (JSON) or may be coded for each condition and transferred to the web environment construction module 110.

The web environment building module 110 according to an embodiment of the present invention may be implemented as a plurality of physical computers on which various OSs and various web browser environments are respectively constructed.

In addition, a virtual machine can be installed on one computer to build an image for each environment, and a web environment can be built by calling only the image when a test is requested.

In addition, the process of expressing and operating arbitrary web contents in each environment can be expressed as intermediate code that can be used for comparative analysis, and inspection can be performed without building a physical execution environment.

Hereinafter, the image comparison inspection module 132 illustrated in FIG. 1 will be described in detail with reference to FIG. 2.

FIG. 2 is a diagram illustrating an image comparison process performed by the image comparison inspection module shown in FIG. 1. Here, the image shown on the left side of FIG. 2 is a reference image shown by the web content 12 (refer to FIG. 1) executed in the reference web environment, and the image shown on the right side shows the first test web environment shown in FIG. It is a test image 32 shown by the web content 12 executed in 30-1).

1 and 2, the image comparison inspection module 132 is a module that analyzes a visually expressed portion of the browser compatibility of the web content 12. That is, the image comparison inspection module 132 may execute the reference image of the web content 12 executed in the reference web environment 20 and the plurality of test web environments 30-1 and 30-2 through the web environment construction module 110. , 30-3, ..., 30-n) generate a test image of the web content 12 executed, and extract layout information from the generated reference image and the test image, respectively, and compare and analyze the same. Here, the process of extracting layout information uses an image pattern recognition and feature information extraction algorithm or an algorithm optimized for the web content 12.

The image comparison analysis process by the image comparison inspection module 132 first corresponds to the layout information corresponding to the reference image of the web content 12 executed in the reference web environment and the test image of the web content executed in the corresponding test web environment. Compare layout information. Thereafter, the contents (eg, text information) in the layout are additionally compared.

For example, as shown in FIG. 2, the reference image 22 of the web content 12 executed in the reference web environment 20 and the web content 12 executed in the first test web environment 30-1. The test image 32 shows the layout difference in the remaining display areas except for the region 1 and the region 4. Accordingly, the image comparison inspection module 132 may display regions 2, 3, and 5 of the image of the web content 12 executed in the reference web environment 20 differently in the first test web environment 30-1. By deriving the result, the developer is informed via the display module 150 that the browser compatibility of the web content 12 is not achieved in the first test web environment 30-1. For example, in the process of extracting layout information, the actual code may maintain the connection relationship between the detailed area and the element of the extracted image, and the display module 150 may express the inconsistency area as the actual code to inform the developer of the result. .

Hereinafter, the operation comparison inspection module 134 provided in the comparison inspection module 130 of FIG. 1 will be described in detail with reference to FIG. 3.

3 is a block diagram illustrating an internal configuration of an operation comparison inspection module illustrated in FIG. 1.

1 and 3, the operation comparison checking module 134 may include a reference web environment 20 and a plurality of test web environments 30-1, 30-2, 30-3,..., 30-n. Only extracts the motion elements of the web content 12 executed in each, and converts the extracted motion elements into an intermediate language. To this end, the operation comparison inspection module 134 includes an operation code converter 134A and a code comparison analyzer 134B.

The action code converter 134A receives the code of the web content 12 requested by the developer to input the code of the web content 12 including functions such as JavaScript, a Document Object Model (DOM), an external API, a server request and a response, and the like. Only motion elements are extracted and converted into intermediate languages 24, 34-1, ..., 34-n. Here, the intermediate language is a kind of program code, and may be any formal specification language that expresses the operation of the program and can check whether the operation is satisfied for the same condition and a given condition therebetween.

The code comparison analyzer 134B compares the program code of the web content executed in the reference web environment with the program code of the web content executed in the test web environment.

In addition to the web content 12 that is the object to be inspected, the operation of the web environment in which the web content 12 is executed is expressed in an intermediate language. When the inspection request is made, a combination of an intermediate language expression corresponding to the web content 12 to be inspected and an intermediate language expression for the execution environment is compared. In FIG. 3, an example expressed in Process Algegra language is illustrated.

The motion checking process consists of intermediate language action code 24 that executes web content 12 in the reference web environment 20 and test web environments 30-1, 30-2, 30-3, ..., 30 -n) consists of a total of n equality checking processes, each comparing the same between the operation codes 34-1, ..., 34-n of the intermediate language that executes the web content 12.

In some cases, the system can be fully automated, but due to the nature of the web content, it should be carried out with partial attributes and functions depending on the external conditions consisting of the developer's actions and external events. These external conditions are also expressed in the same intermediate language as the intermediate language used when expressing the web content 12 and the web environment.

Even in the comparative analysis of the operation of the web content 12, an image comparison and analysis process may also be required to confirm an exact match. Accordingly, the motion comparison inspection module 134 may request the result value from the image comparison inspection module 132 shown in FIG. 2, and the result value may be utilized in the motion comparison analysis process.

The web environment in which the web content 12 is executed is not only in the form of the representation of the intermediate language, but also in the intermediate language of the web content 12 executed in the web environment that is actually or virtually built in the web environment building module 110 (see FIG. 1). The operation check as described above may be performed while executing in real time. In this case, an intermediate connection module may be required to connect between the intermediate language and the actual web environment.

An intermediate connection module is a module that holds the connection between the intermediate language representation code and the behavior of the actual execution environment. The web content 12 to be inspected can be used to represent the error points found in the intermediate language in the display module 150 in actual code while maintaining the connection information between the intermediate language and the actual code in the reference web environment 20. have.

Meanwhile, after the image comparison analysis process and the operation comparison analysis process as described above are performed, the display module 150 checks the image comparison inspection module and the motion comparison inspection module for the error and difference occurrence region found in the intermediate language. Based on the linkage information with the actual code maintained in, translate it to the representation in the actual code and report the result. This allows the developer to view the analysis results in the language expression they were working on without having to know the intermediate language used for comparative analysis.

FIG. 4 is a flowchart illustrating a method for checking browser compatibility of web content performed by the browser compatibility checking apparatus for web content shown in FIG. 1.

1 and 4, OS information and web browser information are provided to the web environment building module 110 shown in FIG. 1 from outside (S410). Here, the OS information includes OS type information and OS version information, and the web browser information includes web browser type information and web browser version information.

Subsequently, the reference web environment 20 and the test web environment are respectively constructed according to the OS information and the web browser information provided by the web environment building module 110 (S420). In this case, the plurality of test web environments 30-1, 30-2, 30-3,..., According to a combination of four elements including OS type information, OS version information, web browser type information, and web browser version information. 309-n) is constructed.

Subsequently, web contents developed by a developer are executed in the constructed reference web environment 20 and the test web environments 30-1, 30-2, 30-3, ..., 309-n, respectively (S430). ).

Subsequently, the image comparison inspection module 132 having reference image information and reference operation information of the web content 12 executed in the reference web environment 20 provided inside the comparison inspection module 130 shown in FIG. 1. Each is extracted by (S440). In addition, test image information and test operation information of the web content 20 are extracted in the test web environment by the image comparison inspection module 132 provided in the comparison inspection module 130 shown in FIG. 1. (S440).

Then, the extracted reference image information and the test image information are compared by the image comparison inspection module 132, respectively, and the reference operation information and the test operation information are compared by the operation comparison inspection module 134, respectively ( In operation S450, it is determined whether or not the compatibility of the web content 20 is compatible with the test web environment according to the comparison result, that is, equality or not (S460).

As mentioned above, although the technical idea of the present invention has been described in detail according to the above-mentioned preferred embodiment, it should be noted that the above embodiment is for the purpose of description and not for the limitation.

In addition, those skilled in the art will understand that various embodiments are possible within the scope of the technical idea of the present invention. Therefore, the protection scope of the present invention will be defined by the description of the claims below.

1 is a block diagram showing the configuration of an apparatus for checking browser compatibility of web content according to an embodiment of the present invention.

FIG. 2 is a diagram illustrating an image comparison process performed by the image comparison inspection module shown in FIG. 1.

3 is a block diagram illustrating an internal configuration of an operation comparison inspection module illustrated in FIG. 1.

FIG. 4 is a flowchart illustrating a method for checking browser compatibility of web content performed by the browser compatibility checking apparatus for web content shown in FIG. 1.

Claims (10)

A web environment building module for constructing a reference web environment and a test web environment in which web content is executed according to information of an operating system (OS) and a web browser provided from the outside; And Compare the reference image information of the web content executed in the reference web environment with the test image information of the web content executed in the test web environment, and the reference operation information of the web content executed in the reference web environment and the test web environment. A comparison test for comparing the test operation information of the executed web content to check the compatibility between the test web environment and the reference web environment for the web content. Include modules, The comparison inspection module, Compatibility between the web environment by comparing a layout corresponding to the reference image information of the web content executed in the reference web environment with a layout corresponding to the test image information of the web content executed in the test web environment An image comparison inspection module for inspecting; And Compatibility between the web environment by comparing the program code corresponding to the reference action information to execute the web content in the reference web environment with the program code corresponding to the test action information to execute the web content in the test web environment. Includes a motion comparison check module to check the, The operation comparison inspection module, An action code converter which receives the code of the web content and converts the code into the program code corresponding to an action element of the web content including a JavaScript, a Document Object Model (DOM), an external API, a server request, and a response function; And Checking compatibility between the program code of the web content executed in the reference web environment and the program code of the web content executed in the test web environment, thereby checking the compatibility in the test web environment for the web content. Browser compatibility checking device for the web content, characterized in that it comprises a code comparison analyzer. The method of claim 1, wherein the information of the OS includes a type of the OS and a version of the OS, And the web browser information includes a type of the web browser and a version of the web browser. The web environment construction module according to claim 2, wherein the web environment construction module constructs a plurality of test web environments according to a combination of four elements consisting of the type of the OS, the version of the OS, the type of the web browser, and the version of the web browser. Apparatus for checking the browser compatibility of the web content, characterized in that. delete delete The apparatus of claim 1, wherein the program code is a formal specification language. Receiving OS information and web browser information; Establishing a reference web environment and a test web environment based on the OS information and the web browser information; Executing web content in the reference web environment and the test web environment, respectively; Extracting reference image information corresponding to the layout information of the web content expressed in the reference web environment and test image information corresponding to the layout information of the web content expressed in the test web environment; And Extracting reference operation information corresponding to program code for executing the web content in the reference web environment and test operation information corresponding to program code for executing the web content in the test web environment; Comparing the layout corresponding to the reference image information of the web content executed in the reference web environment with the layout corresponding to the test image information of the web content executed in the test web environment, Checking compatibility between web environments; And Comparing the program code corresponding to the reference operation information for executing the web content in the reference web environment with the program code corresponding to the test operation information for executing the web content in the test web environment, Include checking for compatibility between web environments, The program code is, Checking the browser compatibility of the web content, characterized in that the code corresponding to the operation element of the web content including the JavaScript code, DOM (Document Object Model), external API, server request and response function Way. The method of claim 7, wherein the step of receiving OS information and web browser information comprises: Receiving the OS information including a type of OS and a version of the OS; And Receiving the web browser information including the type of web browser and the version of the web browser; Browser compatibility check method of the web content comprising a. The method of claim 8, wherein the establishing of the test web environment comprises: Calculating a combination number of four elements consisting of the type of the OS, the version of the OS, the type of web browser, and the version of the web browser; And Establishing a plurality of test web environments corresponding to the calculated combination number; Browser compatibility check method of the web content comprising a. delete

Images