CN105468779B - A kind of client Web application capture and playback system and method towards browser compatibility detection - Google Patents
A kind of client Web application capture and playback system and method towards browser compatibility detection Download PDFInfo
- Publication number
- CN105468779B CN105468779B CN201510944681.1A CN201510944681A CN105468779B CN 105468779 B CN105468779 B CN 105468779B CN 201510944681 A CN201510944681 A CN 201510944681A CN 105468779 B CN105468779 B CN 105468779B
- Authority
- CN
- China
- Prior art keywords
- event
- browser
- module
- playback
- page
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000001514 detection method Methods 0.000 title claims abstract description 63
- 238000000034 method Methods 0.000 title claims abstract description 44
- 238000012360 testing method Methods 0.000 claims abstract description 14
- 230000006870 function Effects 0.000 claims description 108
- 230000004044 response Effects 0.000 claims description 49
- 239000003795 chemical substances by application Substances 0.000 claims description 26
- 230000006399 behavior Effects 0.000 claims description 25
- 238000003780 insertion Methods 0.000 claims description 18
- 230000037431 insertion Effects 0.000 claims description 18
- 238000009434 installation Methods 0.000 claims description 10
- 230000008569 process Effects 0.000 claims description 10
- 238000013480 data collection Methods 0.000 claims description 9
- 239000000284 extract Substances 0.000 claims description 7
- 238000004321 preservation Methods 0.000 claims description 5
- 230000009329 sexual behaviour Effects 0.000 claims description 5
- 230000008093 supporting effect Effects 0.000 claims description 5
- 230000001960 triggered effect Effects 0.000 claims description 4
- 241000208340 Araliaceae Species 0.000 claims description 3
- 235000005035 Panax pseudoginseng ssp. pseudoginseng Nutrition 0.000 claims description 3
- 235000003140 Panax quinquefolius Nutrition 0.000 claims description 3
- 235000008434 ginseng Nutrition 0.000 claims description 3
- 238000002347 injection Methods 0.000 claims description 3
- 239000007924 injection Substances 0.000 claims description 3
- 230000000007 visual effect Effects 0.000 claims description 3
- 230000000977 initiatory effect Effects 0.000 claims description 2
- 230000003993 interaction Effects 0.000 claims description 2
- 235000013399 edible fruits Nutrition 0.000 claims 1
- 238000005086 pumping Methods 0.000 claims 1
- 238000005516 engineering process Methods 0.000 description 6
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 4
- BUGBHKTXTAQXES-UHFFFAOYSA-N Selenium Chemical compound [Se] BUGBHKTXTAQXES-UHFFFAOYSA-N 0.000 description 3
- 230000008859 change Effects 0.000 description 3
- 238000012545 processing Methods 0.000 description 3
- 229910052711 selenium Inorganic materials 0.000 description 3
- 239000011669 selenium Substances 0.000 description 3
- 238000004458 analytical method Methods 0.000 description 2
- 230000007812 deficiency Effects 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 238000005538 encapsulation Methods 0.000 description 2
- 238000000605 extraction Methods 0.000 description 2
- 230000000737 periodic effect Effects 0.000 description 2
- 238000012546 transfer Methods 0.000 description 2
- 241001269238 Data Species 0.000 description 1
- 230000002159 abnormal effect Effects 0.000 description 1
- 230000003321 amplification Effects 0.000 description 1
- 230000005587 bubbling Effects 0.000 description 1
- 230000009193 crawling Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 230000001976 improved effect Effects 0.000 description 1
- 238000007689 inspection Methods 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 239000000203 mixture Substances 0.000 description 1
- 238000003199 nucleic acid amplification method Methods 0.000 description 1
- 230000008092 positive effect Effects 0.000 description 1
- 230000008439 repair process Effects 0.000 description 1
- 239000000243 solution Substances 0.000 description 1
- 238000012800 visualization Methods 0.000 description 1
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
- Computer And Data Communications (AREA)
- Debugging And Monitoring (AREA)
Abstract
The invention discloses a kind of client Web application capture and playback system and method towards browser compatibility detection.The various non-deterministic events generated when event capturing stage record Web is applied in the operation of reference browser platform, including external user's alternative events and browser internal event (such as function call of timer event, Ajax message and uncertainty), and save the causality between external event and internal event;The remote playback of browser-cross is carried out in test browser platform in playback phase, and acquires page info in playback procedure;It is compared by information collected to different browsers to detect various compatibility issues.The present invention can effectively improve the accuracy of testing result.
Description
Technical field
The present invention relates to a kind of client Web application capture towards browser compatibility detection and playback system and sides
Method belongs to internet and Web technical field.
Background technique
With the fast development of internet and Web technology, Web application is becoming important acquisition of information and is putting down with exchanging
Platform.Application developer wishes consistent using that can show in the browser platform of various mainstreams, but since browser realizes technology
Difference and difference to standard degree of support, cause Web to apply and be likely to occur when being run in different browser platforms
It is inconsistent in terms of behavior and webpage representation, the referred to as incompatibility problem (XBIs) of browser-cross.Usual browser-cross is incompatible
Property problem (XBI) is divided into three classes: behavior is inconsistent, layout is inconsistent and content is inconsistent.Behavior is inconsistent: this kind of inconsistent logical
The disabler for often referring to element in the page is clicked button pages and is not reacted if the clickthrough page can not jump;It is laid out different
It causes: referring to mistake of the element in terms of layout in the page.Such as: two buttons are horizontally-arranged in Chrome browser and consistency from top to bottom,
But vertical setting of types is then shown as in IE browser;Content is inconsistent: be further divided into that content of text is inconsistent and content viewable not
Unanimously.The text that text is inconsistent to be referred to inside element is different, content viewable is inconsistent refer to element in terms of visualization, such as
The difference of image content, element pattern etc..
To detect browser-cross incompatibility problem automatically, many methods are had been proposed in industry and academia at present
And tool.Existing method (referring to: S.R.Choudhary, M.R.Prasad, and A.Orso.Crosscheck:
Combining crawling and differencing to better detect cross-browser
Incompatibilities in web applications, ICST ' 2012), (referring to S.R.Choudhary,
H.Versee,and A.Orso.Webdiff:Automated identification of cross-browser issues
In web applications.In ICSM ' 2010), (referring to A.Mesbah and M.R.Prasad.Automated
cross-browser compatibility testing.In Proceedings of the 33rd International
Conference on Software Engineering, pages 561-570.ACM, 2011), (referring to: S.Roy
Choudhary,M.R.Prasad,and A.Orso.X-pert:Accurate identification of cross-
browser issues in web applications.In Proceedings of the 2013International
Conference on Software Engineering, pages 702-711.IEEE Press, 2013) it can be generally divided into
Two stages: the page grabs compared with the page.In page stage of gripping, Web application is carried out on different browsers automatic
Detection, and page related data is extracted, including dom tree information, layout information and page screenshot information;Compare rank in the page
Section, by being compared to the page data of collection, to find the inconsistence problems of various browser-cross.Browserbite (ginseng
See http://app.browserbite.com/), MogoTest (referring to http://mogotest.com/) and Browsera
(referring to http://www.browsera.com/) provides Web application browser-cross compatibility detection service.But deficiency is
User's alternative events are only accounted for, and have ignored browser internal event, such as random number, date, timer and XHR, it can not
Guarantee there is identical execution on different browsers, testing result generation is caused largely to report by mistake or fail to report.
Also there are the much capture about client Web application/playbacks to study (referring to S.Andrica and at present
G.Candea.Warr:A tool for high-fidelity web application record and replay.In
DSN ' 2011, pages 403-410.), (referring to B.Burg, R.Bailey, A.J.Ko, and
M.D.Ernst.Interactive record/replay for web application debugging.In
Proceedings of the 26th Annual ACM Symposium on User Interface Software and
Technology, UIST ' 13, pages 473-484), (referring to J.Mickens, J.Elson, and
J.Howell.Mugshot:Deterministic capture and replay for javascript
Applications.NSDI ' 10, pages 11-11), (referring to: K.Sen, S.Kalasapur, T.Brutch, and
S.Gibbs.Jalangi:A selective record-replay and dynamic analysis framework for
javascript.In Proceedings of the 20139th Joint Meeting on Foundations of
Software Engineering,ESEC/FSE 2013,pages 488–498).But its main target is to support to apply Web
Error analysis and positioning.Two classes: the unrelated capture/reproducing process of browser platform are broadly divided into according to the difference of realization mechanism
With capture/reproducing process of particular browser.Unrelated capture/the reproducing process of browser platform is due to using JavaScript language
It says the various non-deterministic events of capture/playback, be applicable to cross-platform browser capture and reset.But existing browser platform
Unrelated capture/reproducing process deficiency is: to reappear a JavaScript mistake, the sequence of events of capture is usually in phase
It is reset in same browser platform, without considering in the case where browser-cross platform, is captured on a browser
Sequence of events carry out playback time in addition different browser, may be called due to incompatible JavaScript interface wrong
It misleads and causes to reset the failure even playback of mistake, eventually lead to testing result and occur reporting by mistake and fail to report.Such as consider shown in FIG. 1
JavaScript code, when running in Chrome, the sequence of events that may be captured is as shown in Figure 2.When sequence of events is in IE
Playback time in 6 is executing the corresponding event handling function of first event due to not supporting firstElementChild interface
When, el will be null.As call statement el.innerHTML, browser throw exception causes timer not register fn0.
When resetting second event, fn1 is registered.When third event is played out, since fn0 is not registered, fn1 is by mistake
Scheduling, and having read for mistake should be by the random number of fn0 reading.When the 4th event is scheduled, due to can not find registration
Call back function, cause to reset and fail, and influence the correct playback of successor.
Summary of the invention
To solve the above problems, the invention proposes a kind of client Web applications towards browser compatibility detection to catch
Obtain with playback system and method, for the capture and playback for supporting browser-cross, in sequence of events collection phase, in addition to capturing Web
Various customer incidents and browser internal event when running in browser platform are applied, the cause and effect also between record event is closed
System;In playback phase, event replay is carried out in browser platform to be measured, and detecting event handles function before replay event
It is whether consistent with the event capturing stage, and it is collected simultaneously page info, it is carried out based on the page info collected in playback phase
Detection, improves the accuracy of testing result.
A kind of the technology of the present invention solution: client Web application capture and playback towards browser compatibility detection
System, comprising: web proxy module, event capturing module, service for playback device, replay agent module, event replay module, the page
Data collection module and compatible detection module;Wherein:
Web proxy module, be responsible for coordinate client and Web application service end interaction, at runtime intercept client and
The request of server end and response message, and request and response contents are checked.In the event capturing stage, when reference browses
When device request page, by web proxy module in the page of return insertion event trapping module;In the event replay stage, when weight
When putting proxy module starting with reference to browser and browser to be measured, by web proxy module in the message of return insertion event weight
Amplification module;
Event capturing module, be responsible for capturing and record client and Web apply generated when interacting it is various non-determined
Sexual behavior part simultaneously forms sequence of events, saves to service for playback device, the non-deterministic event includes DOM (DOM Document Object Model) thing
Part, browser internal event and non-deterministic function call;DOM event include various customer incidents (such as: click event, keyboard
Incoming event);Browser internal event includes timer event, Ajax message;Non-determined function call includes generating random number
And date function call;
Service for playback device is responsible for initiating playback request to Terminal Server Client according to the sequence of events being collected into;Service for playback
Device receives the registration request of Terminal Server Client first, and the reference browser platform information specified according to user and browser to be measured
Platform information is matched with chartered remote client's client information, after successful match, is sent to specified Terminal Server Client
Playback instructions, the content of instruction include: the URL, the ID for the sequence of events for needing to reset of Web application to be measured;Terminal Server Client
After replay agent module receives reproduction command, browser (including reference browser and browsing to be measured that starting is needed to detect
Device) start to be reset;
Replay agent module is responsible for sending registration request to service for playback device, and registration content includes place Terminal Server Client
The browser platform information of upper installation, and the playback request from service for playback device is received, before resetting specified sequence of events;
Configuration browser first specifies the address URL of web proxy module, then opens the specified Web application of browser access, by Web generation
Manage module insertion event playback module in back page;
Event replay module is responsible for the various non-deterministic events for capturing event capturing module respectively with reference to clear
It lookes in device and browser to be measured and is reset;Event replay module receives the sequence of events ID that replay agent module forwards come,
Sequence of events to be reset is requested to service for playback device according to the ID and is reset;It is every to have reset an event, the module tune
Page data acquisition is carried out with page data collection module;
Page data collection module receives the notice from event replay module, is responsible for carrying out the page in playback procedure
The collection of data, and the page data of collection is sent to compatible detection module;The page data of collection includes: each DOM section
Attribute information, the layout information of node and the shot image information of full page of point;
Compatible detection module, according to the page data that page collection module is collected, progress behavior is inconsistent respectively, is laid out
The inconsistent and inconsistent detection of content, and provide examining report.
The web proxy module is accomplished by
(1) in the event capturing stage, the request of self-reference browser is received and comes to the forwarding of Web application service end, if
The type of response message in request is " html ", then cache request and response contents first, then in the response message of return
The position of middle positioning<head>, and the insertion event trapping module after<head>label, response message returns after finally inserting
To referring to browser;
(2) in the event replay stage, Web application service end is sent to browser (with reference to browser and browser to be measured)
Request detected, if request it is identical as cache contents, directly take out corresponding response message, and in response message
Head insertion event playback module, returns to client;For the request that other are not cached, then Web application service is transmitted to
End is directly returned to client after receiving response.
The event capturing module is accomplished by
(1) it for DOM event, is caught in the capture function of Window object registration DOM event when DOM event is triggered
Obtain the called XPath information to save event type, object element of function;For the causality between acquisition event, save
The return value of timer event, Ajax request and the non-determined function call registered in DOM event implementation procedure;
(2) for timer event, the timer of the setTimeout/setInterval function being rewritten and rewriting is returned
The capture of letter of transfer number, timer callback function are registered by setTimeout/setInterval function;When the event is corresponding
Timer callback function execute when, the timer callback function of rewriting will save event type, corresponding source event Id
And local ID;For the causality between acquisition event, while saving in timer event implementation procedure may registration
The return value of timer event, Ajax request and non-determined function call;
(3) it for Ajax event, is caught by the event capturing function exclusively for onreadystatechange event registration
It obtains, when the corresponding response message of the event returns, saves event type, corresponding source event id, local ID and sound
Answer message content;For the causality between acquisition event, at the same save in Ajax event implementation procedure may registration timing
The return value of device event, Ajax request and non-determined function call;
(4) for uncertainty function, including date and generating random number, when by calling new Date () to obtain current
Between, call Math.random () to generate random number;In order to capture the calling of the two uncertainty functions, event capturing module
The constructed fuction of Date and Random are encapsulated, to record the return value of prototectonics function;
(5) in addition, in order to distinguish the event of the different pages, event capturing module is also that the page of current accessed generates one
Sequence id (is initialized as 0), when page jump, triggers beforeunload event, first the capture of upload current page
Non-deterministic event, then the sequence value saved in session is added 1, is captured in the new page with starting to be stored in
Non-deterministic event.
The service for playback device is implemented as follows:
(1) registration request from Terminal Server Client is received;
(2) registration request is parsed, extracts information<IP of Terminal Server Client, BR, OS>, in which: IP is long-range visitor
The address ip at family end, BR indicate that the browser type and version information installed on Terminal Server Client, OS indicate on Terminal Server Client
The OS Type and version information of installation;
(3) according to the information of the Terminal Server Client of registration, match reference browser platform<BR that user specifies, OS>and to
Survey browser platform<BR, OS>;
(4) if successful match, reproduction command replay (logID) is sent to Terminal Server Client, it is various by what is be collected into
Non-deterministic event is reset in specified Terminal Server Client, and wherein logID represents specified sequence of events;
(5) if matching is unsuccessful, no matched browser platform to be measured is reported.
The replay agent module is implemented as follows: being assembled with replay agent in each Terminal Server Client, is reset
Agency is embodied as a finger daemon, after its starting:
(1) first to service for playback device carry out registration Terminal Server Client configuration information<IP, BR, OS>, wherein IP indicate
The address ip of the machine, BR indicate that the browser type and version of installation, OS indicate the OS Type and version of installation;
(2) reproduction command from service for playback device is received;
(3) reproduction command is parsed, sequence of events ID to be reset, the type and version of browser, Web application to be measured are extracted
The address URL;
(4) web proxy address is configured, opens the browser of specified type and version, and pass through web proxy module accesses
Web application service end.
The event replay module is accomplished by
To support to carry out event capturing in a variety of different browsers, is realized, laid equal stress on using the JavaScript of standard
Timer registration function setTimeout/setInterval is write, Ajax requests object XHR and random function to call
Random () and date function Date (), specific playback flow are as follows:
(1) sequence of events to be reset is requested to service for playback device according to sequence of events ID, and be saved in queue Q;
(2) when queue is not sky, event is taken out from queue head;
(3) it according to the different type of event, is reset respectively;
(4) if event type is timer event, event capturing mould is obtained according to event id and local ID first
The event handling function H that block saves obtains the event handling letter of event replay module caching further according to event id and local ID
Number H ' checks whether H and H ' is identical, if the same calls directly event handling function H ' and is reset;If do not found
It then marks the event to exist and executes exception;
(5) if event type is Ajax event, event capturing module is obtained according to event id and local ID first
The request message M saved obtains the request message M ' of event replay module caching further according to event id and local ID, than
Compared with M and M ' it is whether identical, the response message that event capturing module saves if the same is returned to, and reset the event;If not yet
With the presence of finding, the event is marked to execute exception;
(6) if event type is DOM event, the XPath Information locating mesh saved first according to event replay module
Element is marked, if object element exists, resets the event, otherwise marks the event to exist and executes exception;
(7) during event replay, if encountering non-determined function call, the ID according to current playback event is direct
The return value from Random the and Date list of preservation, while the value is deleted in lists.If list is empty, call primary
Random and Date function returns, while marking the event there are behaviors and is inconsistent.
(8) after event replay, Notifications page information acquisition module extracts page info;
(9) be the playback for supporting multi-page Web application, playback module to beforeunload event registration call back function,
To increase sequence id, one new page of every arrival in page jump, the playback module of injection can please look for novelty to server
The recording log of the page.
The page data collection module is implemented as follows:
(1) notice from event replay module is received, the collection of page data is carried out;
(2) dom tree is traversed, saves the attribute information of each DOM node, be denoted as<Dr1 ... Drn>;
(3) coordinate information for calculating each DOM node, is denoted as<Cr1 ..., and Crn>;
(4) screenshotss Pr is carried out to the page;
(5) Id of current playback event is obtained from playback module;
(6) save Id,<Dr1 ..., Drn>,<Cr1 ..., Crn>, Pr } to database.
The compatibility detection module is implemented as follows:
(1) for the page data being collected into from different browsers to be measured, the non-determined sexual behavior of each playback is successively accessed
The event is added in behavior disagreement set by part if event, which is identified existing, executes exception;If event is not carried out
Abnormal, then the dom tree further generated to event matches, and if there is unmatched node, is then equally classified as event
Behavior is inconsistent, and unmatched node is added in behavior disagreement set simultaneously;
(2) for the node in matched dom tree, further detection layout is inconsistent.It is inconsistent for detection layout, first
The dom tree of extraction is matched, further according to the node coordinate structure arrangement figure (Alignment Graph) in dom tree, for
Two nodes to be detected, first determine whether two node to be detected has identical father node, secondly judge two nodes and brother
Whether younger brother's node has identical alignment relation;It is inconsistent that detection layout is identified as if not;
(3) for the matched node of not location problem, further detection content is inconsistent;It is inconsistent for content of text
Comparison be based on character string comparison of equalization, and inconsistent for visual content more then compared by picture to detect two
Whether picture is identical.
A kind of client Web application capture and playback method towards browser compatibility detection, realizes that steps are as follows:
(1) sequence of events is collected: configuration accesses Web application by web proxy with reference to browser first.Web proxy module
Request and the response message for intercepting browser and server-side cache corresponding request for the response message of html type first
And message content, then insertion event trapping module (record.js) returns to browsing after<head>label of the html page
Device;When Web, which is applied, to be run in reference browser platform, the various non-deterministic events that event capturing module record generates,
Including DOM event (such as: clicking event, key-press event), timer event, Ajax event and non-deterministic function call (such as:
Random number calling, date function call), and the causality between record event simultaneously.The non-deterministic event of capture is formed
Sequence of events is simultaneously uploaded to service for playback device;
(2) sequence of events is reset: whether service for playback device first checks for the Terminal Server Client currently registered selected with user
Reference browser and test browser platform match;For matched Terminal Server Client, service for playback device is to remote client
The replay agent module installed on end sends playback instructions, and command content includes the class of sequence of events ID to be reset, browser
Type and version information;After replay agent receives instruction, the URL of configuration setting web proxy is carried out to specified browser first
Then address is opened browser and is applied by web proxy module accesses Web, at this stage, for browser to server-side
Html request, web proxy directly returns to corresponding response message from caching, and is inserted into after<head>label of response message
Event replay module returns;The sequence of events ID that event replay module is forwarded according to replay agent requests specific to service for playback device
To replay event sequence and reset, before resetting timer event and Ajax event, which first checks for the thing
Whether the call back function of part registration is identical with event capturing stage record;Meanwhile during replay event, current page is collected
The data in face, including DOM node information, node layout's information and page screenshot information;
(3) compatibility detection: based on the page info being collected into, compatible detection module carry out respectively behavior it is inconsistent,
It is laid out the inconsistent and inconsistent detection of content, and generates compatibility issue report.
The positive effect of the present invention is can be simultaneous to the automatic browser-cross of the application progress of the Web after deployment using the present invention
Capacitive detection, by collecting user and Web using various non-deterministic events when interacting, and it is flat in different browsers
Remote playback is carried out in platform, by collecting various page datas in playback procedure, improves the accuracy of testing result.Due to
The present invention can guarantee there is identical execution in different browser platforms, and find that behavior is different in time in playback procedure
It causes mistake and avoids the correct playback of erroneous effects successor, therefore the accuracy of testing result can be improved, and reduce simultaneous
Capacitive mistake is failed to report.
Detailed description of the invention
Fig. 1 is JavaScript code segment;
Fig. 2 is the sequence of events generated when the code snippet of corresponding diagram 1 executes;
Fig. 3 is the composition block diagram of present system;
Fig. 4 is implementation flow chart of the Web Proxy module in the event capturing stage;
Fig. 5 is implementation flow chart of the Web Proxy module in the event replay stage;
Fig. 6 is the implementation flow chart that sequence of events is collected;
Fig. 7 is the causality example between the event saved;
Fig. 8 is the implementation flow chart for resetting server module;
Fig. 9 is the implementation flow chart for resetting proxy module;
Figure 10 is the implementation flow chart that sequence of events is reset;
Figure 11 is the implementation flow chart of page data collection module;
Figure 12 is the implementation flow chart of compatible detection module.
Specific embodiment
In order to before describing the present invention, once be illustrated to relevant term etc. to that can understand the present invention.
SetTimeout: the function is predefined function in Javascript language, can by setTimeout function
Registration timeout timer;
SetInterval: the function is predefined function in Javascript language, passes through setInterval function
The timer of registrable periodic triggers;
Ajax (Asynchronous JavaScript and XML): being that a kind of Web applications client and server-side are asynchronous
A kind of technology for exchanging data, can be updated certain part of the page in the case where not reloading full page;
XHR (XMLHttpRequest): the request object in Ajax;
Onreadystatechange:XHR object provides onreadystatechange event, can be the event registration
Event handling function is to handle response message;
Beforeunload: the event is predefined event in browser, and the event is before current page unloading by clear
Device of looking at triggering.
The present invention is described in detail with reference to the accompanying drawing.
As shown in figure 3, a kind of client Web application capture and playback system towards browser compatibility detection of the present invention
It include: web proxy module, event capturing module (record.js), service for playback device, replay agent module, event replay module
(replay.js), page data collection module and compatible detection module.
The major function of each module is described in detail below:
As shown in Figure 4, Figure 5, web proxy module of the present invention is implemented as follows:
Web proxy, which is mainly responsible for, coordinates the access that browser applies Web, at runtime the block intercepts client and clothes
The request at business device end and response message, and request and response contents are checked:
1) as shown in figure 4, in the event capturing stage, web proxy receives and forwards the request from browser to server-side,
If the type of response message is " html ", first cache request and response contents, then determine in the response message of return
The position of position<head>, and the insertion event trapping module (record.js) after<head>label finally disappear response after inserting
Breath returns to browser.
2) as shown in figure 5, in the event replay stage, the request for being sent to server-side to browser is detected, if asked
It asks identical as cache contents, then directly takes out corresponding response message, and in the head insertion event playback module of response message
(replay.js) after, client is returned to.For the request that other are not cached, web proxy is then transmitted to server-side, is receiving
Client is directly returned to after to response.
As shown in fig. 6, event capturing module is implemented as follows:
To support to carry out event capturing in a variety of different browsers, the module is real using the JavaScript of standard
It is existing.Event capturing module supports following a few class non-deterministic events: DOM (DOM Document Object Model) event, browser internal event
And non-deterministic function call.DOM event includes various customer incidents (such as: clicking event, keypad input event);In browser
Portion's event includes timer event, Ajax message;Non-determined function call includes generating random number and date function call
At this stage, the present invention also saves the causality between the non-deterministic event of capture.In addition, it is contemplated that at present
The Web application of mainstream is made of multi-page, which also supports to be associated to capturing event from multiple pages.
To capture various DOM events, using DOM level 2 (referring to http://www.w3.org/TR/DOM-Level-
2/) model captures user's alternative events (current most of major browsers all support the model).The model defines one
Triphasic event handling model: capture-target-bubbling.In acquisition phase, browser by event transfer to window object and
After document object handles, transmitted to child node always along dom tree root node, until destination node.In destination node processing
Finish after part, is successively handled into bubbling phase, then reversely by the ancestor node of destination node.Event capturing module by
An event capturing processing routine is registered on window object, guarantees to record the event before the event is by other node processings
Correlation attribute information, such as: event type, the routing information of destination node, key information.
Timer event is registered using setTimeout/setInterval function, and the event is in setTimeout
It is triggered primary, is triggered at regular intervals in setInterval, until the timer is cancelled.Event capturing module
Timer event is captured by encapsulation setTimeout and setInterval function.Function after encapsulation can first save the event
Relevant information, recall the primary function registration event.
Ajax technology can realize the local updating of the page in the case where not submitting full page to server.Capture
The method of Ajax event is similar with timer event, and event capturing module encapsulates the structure of XMLHttpRequest (XHR) object
Function is made, by for onreadystatechange event registration event capturing function, to record the state letter of each XHR event
Breath.The send/open method of XHR is encapsulated, simultaneously to record the return value of request content and send/open function.For caching
Response message has rewritten setter the and getter method of attribute responseXML/responseText to obtain response message
Content.
Uncertainty function includes being called by calling Date () to obtain current time on date and generating random number
Math.random () generates random number.In order to capture the calling of the two uncertainty functions, event capturing module is encapsulated
The constructed fuction of Date and Random, to record the return value of prototectonics function.
The present invention is by the causality between event is defined as: in the process that the corresponding event handling function of event E executes
In have registered event E ', then E is referred to as source event, and E ' is target event.For the causality between record event, event
Trapping module is that the event of each capture is provided with a unique ID, the correlation after event is captured, in addition to saving event
Information is also the browser internal event registered in the event handling function implementation procedure, as timer event, Ajax request,
Non-determined function safeguards the list of a part, and the content saved in list is as follows: for timer event to be registered, first
A local ID (since 0) is distributed for it, and event id and the local id of source event are passed to as parameter
The callback function of timer;Ajax is requested, similar timer event, is similarly it and distributes a local ID (from 0
Start), and callback is entered and left using the Event Id of source event and local ID as parameter, and save the interior of request
Hold;For random number calling and date function, then the result that local functions call directly is saved.Fig. 7 give for event id0,
The event causality example that id1 is saved.
The present invention also supports to carry out event capturing/playback to multi-page Web application, to support catching for multi-page Web application
Obtain and reset, when user access Web application homepage when, event capturing module can automatically generate a unique session id, with
Same session id will be all used in the page afterwards.In addition, the module is also current accessed in order to distinguish the event of the different pages
The page generates a sequence id (being initialized as 0), when page jump, using beforeunload event, saves current
The sequence of events of page capture, and increase the value of sequence id, to save the non-deterministic event that next page occurs.
Specific event capturing process is as follows:
1) it for DOM event, is captured in Window object registration DOM event capture function, and saves event type, mesh
Mark the information such as the XPath of element.For the causality between acquisition event, the timing registered in DOM event implementation procedure is saved
The return value of device event, Ajax request and non-determined function call;
2) for timer event, the setTimeout/setInterval being rewritten (passes through in Javascript language
SetTimeout function registration overtime timer, passes through the timer of setInterval function registration periodic triggers) function catches
The timer callback function capture for obtaining and rewriteeing.When the corresponding call back function of the event executes, event type is saved, it is corresponding
Source event Id and local ID.For the causality between acquisition event, saves and registered in call back function implementation procedure
Timer event, Ajax request and non-determined function call return value;
3) for Ajax event, by the event capturing function capture exclusively for onreadystatechange event registration.
When the corresponding response message of the event returns, saves event type, corresponding source event id, local ID and response and disappear
Cease content.For the causality between acquisition event, save in call back function implementation procedure may registration timer event,
The return value of Ajax request and non-determined function call;
4) when page jump, triggering beforeunload event (touched before current page unloading by browser by the event
Hair), which will upload the sequence of events of current page capture first, then the sequence value saved in session is added 1,
To start to be stored in the non-deterministic event captured in the new page.
As shown in figure 8, service for playback device is implemented as follows:
1) registration request from Terminal Server Client is received;
2) registration request is parsed, extracts information<IP of Terminal Server Client, BR, OS>, in which: IP is remote client
The address ip at end, BR indicate the browser type (such as: IE/Chrome/Firefox) installed on Terminal Server Client and version letter
Breath, OS indicate the OS Type (such as: Windows/Ubuntu/Mac) and version information installed on Terminal Server Client;
3) according to the information of the Terminal Server Client of registration, match reference browser platform<BR that user specifies, OS>and to
Survey browser platform<BR, OS>.
If 4) successful match, reproduction command replay (logID) is sent to Terminal Server Client, the event sequence that will be collected into
It is listed in specified Terminal Server Client and is reset, wherein logID represents specified sequence of events;
If 5) matching is unsuccessful, no matched browser platform to be measured is reported;
As shown in figure 9, replay agent is implemented as follows:
Replay agent is assembled in each Terminal Server Client, replay agent is embodied as a finger daemon, when its starting
Afterwards:
1) first to service for playback device carry out registration Terminal Server Client configuration information<IP, BR, OS>, wherein IP indicate
The address ip of the machine, BR indicate that the browser type and version of installation, OS indicate the OS Type and version of installation;
2) reproduction command from service for playback device is received;
3) reproduction command is parsed, sequence of events ID to be reset, the type and version of browser, Web application to be measured are extracted
The address URL;
4) web proxy address is configured, the browser access Web application of specified type and version, web proxy module meeting are opened
Before the page returns to browser resolves, insertion event playback module;
As shown in Figure 10, event replay module is accomplished by
To support to carry out event capturing in a variety of different browsers, the module is real using the JavaScript of standard
It is existing, and timer registration function setTimeout/setInterval has been rewritten, Ajax requests object XHR and random function
Call Random () and date function Date (), specific playback flow as follows:
1) sequence of events to be reset is requested to service for playback device according to sequence of events ID, and be saved in queue Q;
2) when queue is not sky, event is taken out from queue head;
3) it according to the different type of event, is reset respectively;
4) if event type is timer event, event capturing module is obtained according to event id and local ID first
The event handling function H of preservation obtains the event handling function of event replay module caching further according to event id and local ID
H ' checks whether H and H ' is identical, if the same calls directly event handling function H ' and is reset;If not finding
It marks the event to exist and executes exception;
5) if event type is Ajax event, event capturing module is obtained according to event id and local ID first and is obtained
To the request message M of preservation, the request message M ' of event replay module caching is obtained further according to event id and local ID, is compared
Whether M and M ' is identical, if the same returns to the response message that event capturing module saves, and reset the event;If no
It finds, marks the event to exist and execute exception;
6) if event type is DOM event, the XPath Information locating target saved first according to event replay module
Element resets the event if object element exists, and otherwise marks the event to exist and executes exception;
7) during event replay, if encountering non-determined function call, the ID according to current playback event is direct
The return value from Random the and Date list of preservation, while the value is deleted in lists.If list is empty, call primary
Random and Date function returns, while marking the event there are behaviors and is inconsistent.
8) after event replay, Notifications page information acquisition module extracts page info;
9) be the playback for supporting multi-page Web application, playback module to beforeunload event registration call back function, with
Increase sequence id in page jump.The playback module of one new page of every arrival, injection can request new page to server
The recording log in face.
As shown in figure 11, what page data was collected is implemented as follows:
1) notice from event replay module is received, the collection of page info is carried out;
2) dom tree is traversed, saves the attribute information of each DOM node, be denoted as<Dr1 ... Drn>;
3) coordinate information for calculating each DOM node, is denoted as<Cr1 ..., and Crn>;
4) screenshotss Pr is carried out to the page;
5) Id of current playback event is obtained from playback module;
6) save Id,<Dr1 ..., Drn>,<Cr1 ..., Crn>, Pr } to database;
As shown in figure 12, compatible detection module is implemented as follows:
It is based upon the page info that each replay event is collected, devises corresponding compatible detection method.
1) for the page data being collected into from different browsers, compatible detector successively accesses each replay event,
If event, which is identified existing, executes exception, which is added in behavior disagreement set;If event is not carried out different
Often, then the dom tree further generated to event matches, and if there is unmatched node, then equally is classified as going by event
To be inconsistent, and unmatched node is added in behavior disagreement set simultaneously;
2) for matched DOM node, further detection layout is inconsistent.It is inconsistent for detection layout, first to extraction
Dom tree matched, further according to the coordinate structure arrangement figure of DOM node, by checking matched node with the presence or absence of identical
Set membership and brotherhood are inconsistent to find to be laid out.
3) for the matched node of not location problem, further detection content is inconsistent.It is inconsistent for content of text
Comparison be based on character string comparison of equalization, and inconsistent for visual content more then compared by picture to detect two
Whether picture is identical.
The present invention realizes Web application browser-cross compatibility detection instrument-X-Check.
For the compatibility issue of detection Web application, it is necessary first to which user submits the address URL of Web application to be measured, and reference is clear
It lookes at the type and version and the OS Type and version information of operation of device, tests the type and version and fortune of browser
Capable OS Type and version information.
After receiving above-mentioned request, invention is collected by sequence of events, sequence of events is reset and collected with page data, and
The various inconsistence problems detected are reported after compatibility three steps of detection.Specific step is as follows for implementation method:
1. sequence of events is collected
To support automatic sequence of events to collect, invention uses Web application state space exploration tool Crawljax
(http://crawljax.com/) starting refers to browser, detects to the page of Web application, and catch in detection process
Obtain various non-deterministic events.Detailed process is as follows:
1) before starting browser, Crawljax configures the address URL with reference to browser filling web proxy first, so that
Browser is applied by proxy access Web.
2) agency is responsible for intercepting request and the response message of all browsers and server-side.If the type of message returned is
Html, web proxy also cache request and response message guarantee to access identical content in playback time.
3) for html response message, web proxy positions the position of<head>label before returning to browser first,
And the insertion event trapping module (record.js) after<head>label.
4) for the page after the completion of browser loads, Crawljax detects Web application, in detection process, event
The various non-deterministic events that trapping module record Web application generates at runtime, including DOM event is (such as: clicking event, key
Disk incoming event), timer event, (such as: random number calls, date function tune for Ajax event and non-deterministic function call
With), and the causality between record event simultaneously.
It is collected 2. sequence of events is reset with page data
It 1) is support remote playback, it is necessary first to which replay agent is installed in Terminal Server Client.Replay agent is embodied as visitor
One finger daemon at family end.After replay agent operation, is registered first at service for playback device end, Terminal Server Client is provided
The operating system and browser information of middle installation, and wait the instruction of service for playback device to be received;
2) reference browser platform information and browser platform information to be measured that service for playback device is provided according to user, and
Chartered remote client's client information matches.After successful match, service for playback device sends weight to specified Terminal Server Client
Instruction is put, the content of instruction includes: the URL, the sequence of events ID for needing to reset of Web application to be measured;
3) after the replay agent of Terminal Server Client receives reproduction command, starting needs the browser detected, and configures clear
Device of looking at is accessed by web proxy to be applied, and the playback of insertion event playback module is specified in the html message of return by web proxy
Sequence of events;
4) in playback procedure, the node data of variation is not only collected, the node including changes in coordinates will also be each
Screenshot is carried out to the page when page changes.To carry out page screenshot during playback, selection uses Selenium
(www.seleniumhq.org) screenshot function is realized.Selenium supports the browser of nearly all mainstream, as IE,
Firefox, Chrome and Safari.X-Check, which is based on selenium, realizes playback client, calls weight by playback client
The method put in library carries out event replay, and determines whether replay event causes the change of the page according to the page data of collection
Change, getScreenshotAs () is called to obtain page screenshot if the page changes.
Since the acquisition of frequent page info can reduce playback speed, following measure is taken to optimize: for continuous
User's incoming event, replay component after having reset an event without page info collect, replay next use
Family incoming event.When the event wait reset is not user's incoming event, concentration one acquisition is carried out to page info;For even
Continuous timer event, replay component is acquired page info using fixed interval of events, between the event being currently set
It is divided into 5.
3. compatibility detection
Based on the page info being collected into, the detection of invention further progress compatibility.
1) detector successively traverses the replay event sequence collected in test browser, detector inconsistent for behavior
Inspection event mistake whether occurs in playback procedure and whether corresponding dom tree matches;
2) inconsistent for detection layout, X-Check has used the method used in X-PERT (referring to S.Roy
Choudhary,M.R.Prasad,and A.Orso.X-PERT:Accurate identification of cross-
browser issues in web applications.In Proceedings of the 2013International
Conference on Software Engineering, pages 702-711.IEEE Press, 2013), sat according to node
The layout (Alignment Graph) of the mark building page first determines whether two section to be detected for two nodes to be detected
Whether point has identical father node, secondly judges whether two nodes and the brotgher of node have identical alignment relation;
3) inconsistent for detection image content, X-Check compares two using OpenCV (http://opencv.org/)
The similitude of a element picture, obtains local picture according to element coordinate first from page screenshot, is then converted into histogram,
Finally compare the picture similitude of two elements using the method for related coefficient, and the comparison inconsistent for content of text is based on
Character string comparison of equalization.After detection, X-Check will return to testing result, and identify compatibility on page screenshot and ask
Topic, visually to show testing result.
Above embodiments are provided just for the sake of the description purpose of the present invention, and are not intended to limit the scope of the invention.This
The range of invention is defined by the following claims.It does not depart from spirit and principles of the present invention and the various equivalent replacements made and repairs
Change, should all cover within the scope of the present invention.
Claims (10)
1. a kind of client Web application capture and playback system towards browser compatibility detection, characterized by comprising:
Web proxy module, event capturing module, service for playback device, replay agent module, event replay module, page data collect mould
Block and compatible detection module;Wherein:
Web proxy module is responsible for coordinating the interaction of client and Web application service end, intercepts client and service at runtime
The request at device end and response message, and request and response contents are checked;In the event capturing stage, when reference browser is asked
When seeking the page, by web proxy module in the page of return insertion event trapping module;In the event replay stage, when playback generation
When managing module starting with reference to browser and browser to be measured, by web proxy module, insertion event resets mould in the message of return
Block;
Event capturing module is responsible for capturing and recording client and Web using the various non-determined sexual behaviors generated when interacting
Part simultaneously forms sequence of events, save to service for playback device, the non-deterministic event include DOM (DOM Document Object Model) event,
Browser internal event and non-deterministic function call;DOM event includes various customer incidents;Browser internal event includes fixed
When device event, Ajax message;Non-determined function call includes generating random number and date function call;And event is recorded simultaneously
Causality;
Service for playback device is responsible for initiating playback request to Terminal Server Client according to the sequence of events that event capturing module collection arrives;
Service for playback device receives the registration request of Terminal Server Client first, and the reference browser platform information specified according to user and to
Browser platform information is surveyed, is matched with chartered remote client's client information, after successful match, to specified long-range visitor
Family end sends playback instructions, and the content of instruction includes: the URL, the ID for the sequence of events for needing to reset of Web application to be measured;Remotely
After the replay agent module of client receives reproduction command, starting is needed into the browser that detects, including reference browser and
Browser to be measured starts to be reset;
Replay agent module is responsible for sending registration request to service for playback device, and registration content includes pacifying on the Terminal Server Client of place
The browser platform information of dress, and the playback request from service for playback device is received, before resetting specified sequence of events, first
It configures browser and specifies the address URL of web proxy module, then open the specified Web application of browser access, by web proxy mould
Block insertion event playback module in back page;
Event replay module, the various non-deterministic events for being responsible for capturing event capturing module are respectively in reference browser
It is reset in browser to be measured;Event replay module receives the sequence of events ID that replay agent module forwards come, according to
The ID requests sequence of events to be reset to service for playback device and is reset;Every to have reset an event, which calls page
Face data collection module carries out page data acquisition;
Page data collection module receives the notice from event replay module, is responsible for carrying out page data in playback procedure
Collection, and the page data of collection is sent to compatible detection module;The page data of collection includes: each DOM node
The shot image information of attribute information, the layout information of node and full page;
Compatible detection module, according to the page data that page collection module is collected, progress behavior is inconsistent respectively, layout is different
Cause and the inconsistent detection of content, and provide examining report.
2. the client Web application capture and playback system according to claim 1 towards browser compatibility detection,
Be characterized in that: the web proxy module is accomplished by
(1) in the event capturing stage, the request of self-reference browser is received and comes to the forwarding of Web application service end, if request
In the type of response message be " html ", then cache request and response contents first, then fixed in the response message of return
The position of position<head>, and the insertion event trapping module after<head>label, finally return to ginseng for response message after inserting
Examine browser;
(2) in the event replay stage, Web application service end is sent to browser, including reference browser and browser to be measured
Request detected, if request it is identical as cache contents, directly take out corresponding response message, and in response message
Head insertion event playback module, returns to client;For the request that other are not cached, then Web application service is transmitted to
End is directly returned to client after receiving response.
3. the client Web application capture and playback system according to claim 1 towards browser compatibility detection,
Be characterized in that: the event capturing module is accomplished by
(1) for DOM event, in the capture function of Window object registration DOM event, when DOM event is triggered, letter is captured
The called XPath information to save event type, object element of number;For the causality between acquisition event, DOM thing is saved
The return value of timer event, Ajax request and the non-determined function call registered in part implementation procedure;
(2) for timer event, the timer callback letter of the setTimeout/setInterval function being rewritten and rewriting
Number capture, timer callback function are registered by setTimeout/setInterval function;When the event is corresponding fixed
When device call back function when executing, the timer callback function of rewriting will save event type, corresponding source event Id and
local ID;For the causality between acquisition event, at the same save in timer event implementation procedure may registration timing
The return value of device event, Ajax request and non-determined function call;
(3) it for Ajax event, is captured by the event capturing function exclusively for onreadystatechange event registration,
When the corresponding response message of the event returns, saves event type, corresponding source event id, local ID and response and disappear
Cease content;For the causality between acquisition event, at the same save in Ajax event implementation procedure may registration timer thing
The return value of part, Ajax request and non-determined function call;
(4) for uncertainty function, including date and generating random number, by calling new Date () to obtain current time,
Math.random () is called to generate random number;In order to capture the calling of the two uncertainty functions, event capturing module envelope
The constructed fuction of Date and Random are filled, to record the return value of prototectonics function;
(5) in addition, in order to distinguish the event of the different pages, event capturing module is also that the page of current accessed generates one
Sequence id triggers beforeunload event, the first uncertainty of upload current page capture when page jump
Event, then the sequence value saved in session is added 1, to start to be stored in the non-determined sexual behavior captured in the new page
Part.
4. the client Web application capture and playback system according to claim 1 towards browser compatibility detection,
Be characterized in that: the service for playback device is implemented as follows:
(1) registration request from Terminal Server Client is received;
(2) registration request is parsed, extracts information<IP of Terminal Server Client, BR, OS>, in which: IP is Terminal Server Client
The address ip, BR indicates that the browser type and version information installed on Terminal Server Client, OS indicate to install on Terminal Server Client
OS Type and version information;
(3) according to the information of the Terminal Server Client of registration, match reference browser platform<BR that user specifies, OS>with it is to be measured clear
Look at device platform<BR, OS>;
(4) if successful match, reproduction command replay (logID) is sent to Terminal Server Client, it is various non-true by what is be collected into
Qualitative event is reset in specified Terminal Server Client, and wherein logID represents specified sequence of events;
(5) if matching is unsuccessful, no matched browser platform to be measured is reported.
5. the client Web application capture and playback system according to claim 1 towards browser compatibility detection,
Be characterized in that: the replay agent module is implemented as follows: being assembled with replay agent in each Terminal Server Client, is reset
Agency is embodied as a finger daemon, after finger daemon starting:
(1) first to service for playback device carry out registration Terminal Server Client configuration information<IP, BR, OS>, wherein IP indicates the machine
The address ip, BR indicate installation browser type and version, OS indicate installation OS Type and version;
(2) reproduction command from service for playback device is received;
(3) reproduction command is parsed, extracts sequence of events ID to be reset, the type and version of browser, Web application to be measured
The address URL;
(4) web proxy address is configured, the browser of specified type and version is opened, and is answered by web proxy module accesses Web
Use server-side.
6. the client Web application capture and playback system according to claim 1 towards browser compatibility detection,
Be characterized in that: the event replay module is accomplished by
To support to carry out event capturing in a variety of different browsers, realized using the JavaScript of standard, and rewrite
Timer registration function setTimeout/setInterval, Ajax request object XHR and random function to call Random
() and date function Date (), specific playback flow are as follows:
(1) sequence of events to be reset is requested to service for playback device according to sequence of events ID, and be saved in queue Q;
(2) when queue is not sky, event is taken out from queue head;
(3) it according to the different type of event, is reset respectively;
(4) if event type is timer event, event capturing module is obtained according to event id and local ID first and is protected
The event handling function H deposited obtains the event handling function H ' of event replay module caching further according to event id and local ID,
Check whether H and H ' is identical, if the same calls directly event handling function H ' and is reset;It is marked if not finding
The event, which exists, executes exception;
(5) if event type is Ajax event, event capturing module is obtained according to event id and local ID first and is obtained
The request message M of preservation obtains the request message M ' of event replay module caching further according to event id and local ID, compares M
And whether M ' is identical, if the same returns to the response message that event capturing module saves, and reset the event;If do not looked for
Exception is executed to then marking the event to exist;
(6) if event type is DOM event, the XPath Information locating target element saved first according to event replay module
Element resets the event if object element exists, and otherwise marks the event to exist and executes exception;
(7) during event replay, if encountering non-determined function call, according to the ID of current playback event directly from guarantor
Return value in Random the and Date list deposited, while the value is deleted in lists;If list is empty, call primary
Random and Date function returns, while marking the event there are behaviors and is inconsistent;
(8) after event replay, Notifications page information acquisition module extracts page info;
(9) be the playback for supporting multi-page Web application, playback module to beforeunload event registration call back function, with
Increase sequence id when page jump, the playback module of one new page of every arrival, injection can request new page to server
Recording log.
7. the client Web application capture and playback system according to claim 1 towards browser compatibility detection,
Be characterized in that: the page data collection module is implemented as follows:
(1) notice from event replay module is received, the collection of page data is carried out;
(2) dom tree is traversed, saves the attribute information of each DOM node, be denoted as<Dr1 ... Drn>;
(3) coordinate information for calculating each DOM node, is denoted as<Cr1 ..., and Crn>;
(4) screenshotss Pr is carried out to the page;
(5) Id of current playback event is obtained from playback module;
(6) save Id,<Dr1 ..., Drn>,<Cr1 ..., Crn>, Pr } to database.
8. the client Web application capture and playback system according to claim 1 towards browser compatibility detection,
Be characterized in that: the compatibility detection module is implemented as follows:
(1) for the page data being collected into from different browsers to be measured, the non-deterministic event of each playback is successively accessed, such as
Fruit event, which is identified existing, executes exception, then the event is added in behavior disagreement set;If event is not carried out exception,
The dom tree then further generated to event matches, and if there is unmatched node, then event is equally classified as behavior not
Unanimously, and simultaneously unmatched node is added in behavior disagreement set;
(2) for the node in matched dom tree, further detection layout is inconsistent;It is inconsistent for detection layout, first to pumping
The dom tree taken is matched, further according to the coordinate structure arrangement figure of the node in dom tree, by checking whether matched node deposits
It is inconsistent to find to be laid out in identical set membership and brotherhood;
(3) for the matched node of not location problem, further detection content is inconsistent;The ratio inconsistent for content of text
It is relatively based on character string comparison of equalization, and inconsistent for visual content is more then compared by picture to detect two pictures
It is whether identical.
9. the client Web application capture and playback system according to claim 8 towards browser compatibility detection,
It is characterized in that: the inconsistent process of detection behavior are as follows: the non-deterministic event of each playback is successively accessed, if event quilt
Mark, which exists, executes exception, then that there are behaviors is inconsistent for the event, adds it in behavior disagreement set;If event is not
In the presence of exception is executed, then further the dom tree after the event replay is matched, if there is unmatched node, also will
It is inconsistent that the event is classified as behavior, and unmatched node is added in behavior disagreement set simultaneously.
10. a kind of client Web application capture and playback method towards browser compatibility detection, it is characterised in that realize step
It is rapid as follows:
(1) sequence of events is collected: configuration accesses Web application, web proxy block intercepts by web proxy with reference to browser first
The request of browser and server-side and response message cache corresponding request first and disappear for the response message of html type
Content is ceased, then insertion event trapping module returns to browser after<head>label of the html page;Joining when Web is applied
It examines when being run in browser platform, the various non-deterministic events that event capturing module record generates, including DOM event, timing
Device event, Ajax event and non-deterministic function call, and the causality between record event simultaneously, capture it is non-determined
Sexual behavior part forms sequence of events and is uploaded to service for playback device;
(2) sequence of events is reset: service for playback device first checks for the ginseng whether Terminal Server Client currently registered is selected with user
It examines browser and test browser platform matches;For matched Terminal Server Client, service for playback device is on Terminal Server Client
The replay agent module of installation sends playback instructions, command content include sequence of events ID to be reset, browser type and
Version information;After replay agent receives instruction, the address URL of configuration setting web proxy is carried out to specified browser first,
Then it opens browser to apply by web proxy module accesses Web, html of the browser to server-side be requested, web proxy
Corresponding response message is directly returned to from caching, and insertion event playback module is returned after<head>label of response message
It returns;The sequence of events ID that event replay module is forwarded according to replay agent is requested to service for playback device specifically to replay event sequence
It arranges and is reset, before resetting timer event and Ajax event, which first checks for the readjustment letter of the event registration
Whether number is identical with event capturing stage record;Meanwhile during replay event, the data of current page are collected, including
DOM node information, node layout's information and page screenshot information;
(3) compatibility detection: based on the page info being collected into, compatible detection module carry out respectively behavior it is inconsistent, layout
The inconsistent and inconsistent detection of content, and generate compatibility issue report.
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201510944681.1A CN105468779B (en) | 2015-12-16 | 2015-12-16 | A kind of client Web application capture and playback system and method towards browser compatibility detection |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201510944681.1A CN105468779B (en) | 2015-12-16 | 2015-12-16 | A kind of client Web application capture and playback system and method towards browser compatibility detection |
Publications (2)
Publication Number | Publication Date |
---|---|
CN105468779A CN105468779A (en) | 2016-04-06 |
CN105468779B true CN105468779B (en) | 2018-12-28 |
Family
ID=55606479
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201510944681.1A Active CN105468779B (en) | 2015-12-16 | 2015-12-16 | A kind of client Web application capture and playback system and method towards browser compatibility detection |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN105468779B (en) |
Families Citing this family (21)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN106095886B (en) * | 2016-06-03 | 2020-10-09 | 腾讯科技(深圳)有限公司 | Data processing method and device |
US10430212B1 (en) * | 2016-07-13 | 2019-10-01 | Screenshare Technology Ltd. | Method for recording, editing and reproduction of computer session |
CN106603974A (en) * | 2016-11-25 | 2017-04-26 | 济南中维世纪科技有限公司 | Monitoring device user operation data acquisition method |
CN106649805B (en) * | 2016-12-29 | 2020-02-11 | 中国科学院软件研究所 | Efficient detection system and method for cross-browser layout compatibility of Web application |
CN108306918B (en) * | 2017-01-13 | 2021-08-31 | 南京邮电大学盐城大数据研究院有限公司 | A method for automatic acquisition of website access information based on program dynamic analysis |
CN106919506B (en) * | 2017-02-21 | 2020-01-07 | 上海斐讯数据通信技术有限公司 | Method and system for analyzing compatibility defects |
CN107315682A (en) * | 2017-06-22 | 2017-11-03 | 北京凤凰理理它信息技术有限公司 | Test browser-safe method, device, storage medium and electronic equipment |
CN107741903A (en) * | 2017-09-11 | 2018-02-27 | 平安科技(深圳)有限公司 | Application compatibility method of testing, device, computer equipment and storage medium |
CN109656643A (en) * | 2017-10-10 | 2019-04-19 | 武汉斗鱼网络科技有限公司 | More browser compatibility test methods, storage medium, electronic equipment and system |
CN108021494A (en) * | 2017-12-27 | 2018-05-11 | 广州优视网络科技有限公司 | A kind of method for recording of application operating, back method and related device |
CN109474665B (en) * | 2018-09-30 | 2021-08-06 | 咪咕文化科技有限公司 | An information processing method, device and computer storage medium |
CN111159607B (en) * | 2018-11-07 | 2023-09-19 | 中国移动通信集团重庆有限公司 | Website compatibility setting method, device, equipment and media |
CN109684220A (en) * | 2018-12-26 | 2019-04-26 | 苏州博纳讯动软件有限公司 | A kind of browser compatibility analysis method based on event replay |
CA3134395A1 (en) * | 2019-04-01 | 2020-10-08 | Citrix Systems, Inc. | Web page duplication |
CN111913869B (en) * | 2019-05-08 | 2024-02-13 | 立端科技股份有限公司 | Test method and test system for automatically testing host operating system |
TWI697772B (en) * | 2019-05-08 | 2020-07-01 | 立端科技股份有限公司 | Automatic test host operating system test method and test system thereof |
CN110245050A (en) * | 2019-06-11 | 2019-09-17 | 四川长虹电器股份有限公司 | A method of it realizing script error monitoring and reports |
CN110351259A (en) * | 2019-06-28 | 2019-10-18 | 深圳数位传媒科技有限公司 | A kind of method and device obtaining APP authentication information based on network packet capturing |
CN110502437B (en) * | 2019-07-31 | 2023-07-28 | 惠州市德赛西威汽车电子股份有限公司 | Test system and method for vehicle-mounted Bluetooth application program |
CN111857932A (en) * | 2020-07-27 | 2020-10-30 | 成都安恒信息技术有限公司 | A web filling method for operation and maintenance audit system based on puppeteer |
CN113495841B (en) * | 2021-06-28 | 2023-11-17 | 北京百度网讯科技有限公司 | Compatibility detection method, device, equipment, storage medium and program product |
Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102033803A (en) * | 2009-09-29 | 2011-04-27 | 国际商业机器公司 | Method and device for testing web application across browsers |
CN102142016A (en) * | 2010-01-29 | 2011-08-03 | 微软公司 | Cross-browser interactivity recording, playback and editing |
CN103927253A (en) * | 2013-01-11 | 2014-07-16 | 阿里巴巴集团控股有限公司 | Multiple browser compatibility testing method and system |
-
2015
- 2015-12-16 CN CN201510944681.1A patent/CN105468779B/en active Active
Patent Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102033803A (en) * | 2009-09-29 | 2011-04-27 | 国际商业机器公司 | Method and device for testing web application across browsers |
CN102142016A (en) * | 2010-01-29 | 2011-08-03 | 微软公司 | Cross-browser interactivity recording, playback and editing |
CN103927253A (en) * | 2013-01-11 | 2014-07-16 | 阿里巴巴集团控股有限公司 | Multiple browser compatibility testing method and system |
Non-Patent Citations (5)
Title |
---|
A selective record-replay and dynamic analysis framework for JavaScript;Sen K等;《ACM》;20131231;第488-498页 * |
Accurate identification of cross-browser issues in web applications;S.Roy Choudhary等;《IEEE》;20131231;第702-711页 * |
Interactive record/replay for web application debugging;B.Burg等;《ACM》;20131231;第473-484页 * |
Web应用界面跨浏览器兼容性的自动检测方法;屈建勤等;《计算机系统应用》;20131231;第196-198页 * |
Web应用界面跨浏览器兼容性的自动检测方法;王欢欢等;《计算机科学》;20151130;第444-449页 * |
Also Published As
Publication number | Publication date |
---|---|
CN105468779A (en) | 2016-04-06 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN105468779B (en) | A kind of client Web application capture and playback system and method towards browser compatibility detection | |
US11720379B2 (en) | Acquisition process of GUI elements using user input | |
US10853218B1 (en) | Recording and playback of a web browser session | |
US20160139914A1 (en) | Contextual-based localization based on manual testing | |
US9846636B1 (en) | Client-side event logging for heterogeneous client environments | |
US11436133B2 (en) | Comparable user interface object identifications | |
CN104834588B (en) | The method and apparatus for detecting resident formula cross site scripting loophole | |
US10509719B2 (en) | Automatic regression identification | |
US9317398B1 (en) | Vendor and version independent browser driver | |
CN111159014B (en) | Response method and device for exploratory test, computer equipment and storage medium | |
CN113987393A (en) | A web page operation recorder, system, device and method | |
CN103177115A (en) | Method and device of extracting page link of webpage | |
JP5942009B1 (en) | Software test apparatus, software test method, and software test program | |
US20160034378A1 (en) | Method and system for testing page link addresses | |
Wu et al. | Appcheck: a crowdsourced testing service for android applications | |
JP5998239B1 (en) | Software test apparatus, software test method, and software test program | |
Wu et al. | Detect cross-browser issues for JavaScript-based Web applications based on record/replay | |
US20220244975A1 (en) | Method and system for generating natural language content from recordings of actions performed to execute workflows in an application | |
CN118760581A (en) | Link detection method, link detection device, equipment and medium | |
CN109684220A (en) | A kind of browser compatibility analysis method based on event replay | |
KR101589914B1 (en) | Method for Measuring Real Time Website Performance and the System thereof | |
CN118672887A (en) | Automated testing method, device, electronic device and medium | |
Li et al. | Modeling web application for cross-browser compatibility testing | |
He et al. | A crowdsourcing framework for detecting cross-browser issues in web application | |
Panum et al. | Kraaler: A user-perspective web crawler |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
C06 | Publication | ||
PB01 | Publication | ||
C10 | Entry into substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |