For front-end engineers, cross-browser compatibility has always been the biggest headache. To test a small thing, we need to open N browsers and compare and record the data of each browser, it is quite difficult to compare. as a standard lazy person, I want to use a testing tool to display the test results of all browsers in a browser window and list the results in a clear table, easy to compare.
This will certainly be a cute tool that saves time and can clearly record and compare data. let's talk about my ideas. (I will use this tool to test a js compatibility issue later. Please stay tuned)
This tool has been created, but it is not universal and needs to be used together with the background. It needs to interact with the database, and the background Interaction performance is not good, ordinary computers cannot afford it (my 3 GHz cpu and 2 GB memory cannot open multiple browser windows directly, maybe my database operations are too frequent ). although it is acceptable to put it on a public server, it cannot be used for testing, because many people run it, and even the best server can't stand it.
The tool is made in js + php + mysql. It is not as good as some people think to integrate multiple browser engines into one software.
When using this function, you only need to write test data and test methods in js, upload them to a test instance, and open this window in all browsers. js will collect statistics, store the data in the background. Then, js obtains all the data through ajax and analyzes the data into a table that is displayed on the webpage. the final result is that if your computer is strong enough, all the web pages in the browser will display a list with test data from all browsers, as shown below:
Then we can compare the results. Is it very convenient?
Principle:
First, this function is abstracted into a component. The component accepts three parameters, one is the input object group, the other is the test method, and the other is the component configuration parameters.
In the subsequent component initialization phase, the component will traverse all objects in the input object group and pass the objects to the test method. The test method returns a test data, and the component will record the test results in an object.
The Code is as follows:
/**
* This is a property object of the test object in different browsers. It can be tested in any browser at the same time and needs to interact with the background script.
* After setting the input and output data, open the page in the browser to be tested and the result will be appended to the list.
*
* @ Param {array} testObject list of objects to be tested. Each object must have a unique primary key and a description,
* TestObject format: {"in1": {obj: **, des: "dd"}, "in2": {obj: **, des: "dd "}}
* @ Param {function} testMethod: The program will pass in two parameters to this method. One is the object index and the other is the object. at the same time, this method can be used to reference the test instance. this method must return a string to indicate the execution result.
* @ Param {json} config configuration parameters
*/
(Function (){
Var CrossBrowserTest = function (testObjects, testMethod, config ){
This component strictly specifies the format of the object parameter format, the data storage format in the component, and the format of the string sent to the background. The format of the returned data in the background is as follows:
The format of testObject is {"in1": {obj: **, des: "dd"}, "in2": {obj: **, des: "dd "}}
The data storage format in the component is as follows (this. data): {"in1": {des: "Description", data {"ie6": {outDes: "output result in ie6"}, "ie7": {outDes: "output result in ie7" }}, "in2 ":...}
When sending data, use a function to convert json to string format. This function is as follows:
The Code is as follows:
Function obj2str (o ){
Var r = [];
If (typeof o = "string") return "\" "+ o + "\"";
If (typeof o = "object "){
If (! O. sort ){
R [0] = "{"
For (var I in o ){
R [r. length] = "\" "+ I + "\"";
R [r. length] = ":";
R [r. length] = obj2str (o [I]);
R [r. length] = ",";
}
R [r. length-1] = "}"
} Else {
R [0] = "["
For (var I = 0; I R [r. length] = obj2str (o [I]);
R [r. length] = ",";
}
R [r. length-1] = "]"
}
Return r. join ("");
}
Return o. toString ();
}
In the background, php converts the json string into a php array through the json_decode function and stores it in the database.
When retrieving data from the database, php extracts data from the database, converts the data to an array format, converts the data to a json string using the json_encode function, and uploads the data to the foreground. The foreground uses eval to execute the data.
In the background, json data is decomposed into several pieces of data and stored in the database, where the database reads frequently, resulting in performance degradation.
The database has six fields: primary key, object primary key (to distinguish different objects), browser type (the same object contains the test results of different browsers), and object description, test result, time.
The following methods are used to test the browser type:
The Code is as follows:
M. getBrowser = function (){
Return {
// This function determines the browser type. For convenience, a digital representation is returned,
// 1. ie6; 2. ie7; 3. ie8; 4, Firefox; 5. chrome; 6. Opera; 7. Safari; 0. browsers that cannot be detected
// Other browsers can add
WhichOS: function (){
Var useragent = navigator. userAgent. toLowerCase ();
Return (/MSIE 6/I. test (useragent) = true & 1) |
(/MSIE 7/I. test (useragent) = true & 2) | (/MSIE 8/I. test (useragent) = true & 3) |
(/Firefox/I. test (useragent) = true & 4) |
(/Chrome/I. test (useragent) = true & 5) |
(/Opera/I. test (useragent) = true & 6) |
(/Safari/I. test (useragent) = true & 7) | 0
},
NowOsString: function (){
Var useragent = navigator. userAgent. toLowerCase ();
Return (/MSIE 6/I. test (useragent) = true & "ie6") |
(/MSIE 7/I. test (useragent) = true & "ie7") | (/MSIE 8/I. test (useragent) = true & "ie8") |
(/Firefox/I. test (useragent) = true & "Firefox") |
(/Chrome/I. test (useragent) = true & "Chrome") |
(/Opera/I. test (useragent) = true & "Opera") |
(/Safari/I. test (useragent) = true & "Safari") | "sorry, I don't know your browser! "
}
}
}()
Data is distinguished by the object primary key and browser type (unique data can be obtained)
After the object initialization is complete, it starts to process the data. First, perform a test in the browser, put the test data into a temporary object, and then send the temporary object to the background through ajax, store this data in the database in the background (if it already exists, it will not be stored)
Then, set a timer to regularly fetch data from the background. The obtained data is stored in the background database and may contain data from multiple browsers. After obtaining the data, start the dom build function and the rendering function to update the content of the webpage.
This is the basic principle. This is very abstract, but I am sorry, it is difficult to share it with you. however, if you are interested, you can download the source code, import the SQL statements in the source code to a mysql table, configure the PHP file, and modify it. This encapsulation is not very good, this is because the reusability of this item is not too good. no time for anything else.
Package and download test code
