diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 00000000..741509c2
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,10 @@
+language: node_js
+
+node_js:
+  - 10
+
+install:
+  - npm install
+
+script:
+  - xvfb-run --server-args="-screen 0 1920x1080x24" npm test
diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap
index 4efacbda..227b54f2 100644
--- a/test/__snapshots__/integration.ts.snap
+++ b/test/__snapshots__/integration.ts.snap
@@ -16,8 +16,8 @@ exports[`attributes 1`] = `
     \\"type\\": 4,
     \\"data\\": {
       \\"href\\": \\"about:blank\\",
-      \\"width\\": 800,
-      \\"height\\": 600
+      \\"width\\": 1920,
+      \\"height\\": 1080
     },
     \\"timestamp\\": 1542268800000
   },
@@ -173,8 +173,8 @@ exports[`character-data 1`] = `
     \\"type\\": 4,
     \\"data\\": {
       \\"href\\": \\"about:blank\\",
-      \\"width\\": 800,
-      \\"height\\": 600
+      \\"width\\": 1920,
+      \\"height\\": 1080
     },
     \\"timestamp\\": 1542268800000
   },
@@ -328,8 +328,8 @@ exports[`child-list 1`] = `
     \\"type\\": 4,
     \\"data\\": {
       \\"href\\": \\"about:blank\\",
-      \\"width\\": 800,
-      \\"height\\": 600
+      \\"width\\": 1920,
+      \\"height\\": 1080
     },
     \\"timestamp\\": 1542268800000
   },
@@ -491,8 +491,8 @@ exports[`form 1`] = `
     \\"type\\": 4,
     \\"data\\": {
       \\"href\\": \\"about:blank\\",
-      \\"width\\": 800,
-      \\"height\\": 600
+      \\"width\\": 1920,
+      \\"height\\": 1080
     },
     \\"timestamp\\": 1542268800000
   },
@@ -936,7 +936,7 @@ exports[`form 1`] = `
       \\"type\\": 1,
       \\"id\\": 27,
       \\"x\\": 204,
-      \\"y\\": 117
+      \\"y\\": 157
     },
     \\"timestamp\\": 1542268800000
   },
@@ -965,7 +965,7 @@ exports[`form 1`] = `
       \\"type\\": 0,
       \\"id\\": 27,
       \\"x\\": 204,
-      \\"y\\": 117
+      \\"y\\": 157
     },
     \\"timestamp\\": 1542268800000
   },
@@ -976,7 +976,7 @@ exports[`form 1`] = `
       \\"type\\": 2,
       \\"id\\": 27,
       \\"x\\": 204,
-      \\"y\\": 117
+      \\"y\\": 157
     },
     \\"timestamp\\": 1542268800000
   },
@@ -997,7 +997,7 @@ exports[`form 1`] = `
       \\"type\\": 1,
       \\"id\\": 32,
       \\"x\\": 228,
-      \\"y\\": 117
+      \\"y\\": 157
     },
     \\"timestamp\\": 1542268800000
   },
@@ -1026,7 +1026,7 @@ exports[`form 1`] = `
       \\"type\\": 0,
       \\"id\\": 32,
       \\"x\\": 228,
-      \\"y\\": 117
+      \\"y\\": 157
     },
     \\"timestamp\\": 1542268800000
   },
@@ -1037,7 +1037,7 @@ exports[`form 1`] = `
       \\"type\\": 2,
       \\"id\\": 32,
       \\"x\\": 228,
-      \\"y\\": 117
+      \\"y\\": 157
     },
     \\"timestamp\\": 1542268800000
   },
@@ -1227,9 +1227,9 @@ exports[`select2 1`] = `
   {
     \\"type\\": 4,
     \\"data\\": {
-      \\"href\\": \\"data:text/html,<!DOCTYPE html>%0A<html lang=\\\\\\"en\\\\\\">%0A<head>%0A  <meta charset=\\\\\\"UTF-8\\\\\\">%0A  <meta name=\\\\\\"viewport\\\\\\" content=\\\\\\"width=device-width, initial-scale=1.0\\\\\\">%0A  <meta http-equiv=\\\\\\"X-UA-Compatible\\\\\\" content=\\\\\\"ie=edge\\\\\\">%0A  <title>Select2 3.5</title>%0A  <link rel=\\\\\\"stylesheet\\\\\\" href=\\\\\\"https://cdn.jsdelivr.net/npm/select2@3.5.1/select2.css\\\\\\">%0A</head>%0A<body>%0A  <blockquote>%0A    Select2 is a jQuery replacement for select boxes.%0A    <br>%0A    In the 3.5 version it use a quite complicated DOM generation strategy which is a good battle-test for rrweb's recorder.%0A  </blockquote>%0A  <select id=\\\\\\"el\\\\\\">%0A    <option value=\\\\\\"a\\\\\\">A</option>%0A    <option value=\\\\\\"b\\\\\\">B</option>%0A  </select>%0A  <script src=\\\\\\"https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js\\\\\\"></script>%0A  <script src=\\\\\\"https://cdn.jsdelivr.net/npm/select2@3.5.2-browserify/select2.min.js\\\\\\"></script>%0A  <script>%0A    $('#el').select2();%0A  </script>%0A%0A    <script>%0A      var record = (function () {%0A    'use strict';%0A%0A    /*! *****************************************************************************%0D%0A    Copyright (c) Microsoft Corporation. All rights reserved.%0D%0A    Licensed under the Apache License, Version 2.0 (the \\\\\\"License\\\\\\"); you may not use%0D%0A    this file except in compliance with the License. You may obtain a copy of the%0D%0A    License at http://www.apache.org/licenses/LICENSE-2.0%0D%0A%0D%0A    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY%0D%0A    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED%0D%0A    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,%0D%0A    MERCHANTABLITY OR NON-INFRINGEMENT.%0D%0A%0D%0A    See the Apache Version 2.0 License for specific language governing permissions%0D%0A    and limitations under the License.%0D%0A    ***************************************************************************** */%0D%0A%0D%0A    var __assign = function() {%0D%0A        __assign = Object.assign || function __assign(t) {%0D%0A            for (var s, i = 1, n = arguments.length; i < n; i++) {%0D%0A                s = arguments[i];%0D%0A                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];%0D%0A            }%0D%0A            return t;%0D%0A        };%0D%0A        return __assign.apply(this, arguments);%0D%0A    };%0A%0A    var NodeType;%0A    (function (NodeType) {%0A        NodeType[NodeType[\\\\\\"Document\\\\\\"] = 0] = \\\\\\"Document\\\\\\";%0A        NodeType[NodeType[\\\\\\"DocumentType\\\\\\"] = 1] = \\\\\\"DocumentType\\\\\\";%0A        NodeType[NodeType[\\\\\\"Element\\\\\\"] = 2] = \\\\\\"Element\\\\\\";%0A        NodeType[NodeType[\\\\\\"Text\\\\\\"] = 3] = \\\\\\"Text\\\\\\";%0A        NodeType[NodeType[\\\\\\"CDATA\\\\\\"] = 4] = \\\\\\"CDATA\\\\\\";%0A        NodeType[NodeType[\\\\\\"Comment\\\\\\"] = 5] = \\\\\\"Comment\\\\\\";%0A    })(NodeType || (NodeType = {}));%0A%0A    var _id = 1;%0A    function genId() {%0A        return _id++;%0A    }%0A    function resetId() {%0A        _id = 1;%0A    }%0A    function getCssRulesString(s) {%0A        try {%0A            var rules = s.rules || s.cssRules;%0A            return rules%0A                ? Array.from(rules).reduce(function (prev, cur) { return (prev += cur.cssText); }, '')%0A                : null;%0A        }%0A        catch (error) {%0A            return null;%0A        }%0A    }%0A    function extractOrigin(url) {%0A        var origin;%0A        if (url.indexOf('//') > -1) {%0A            origin = url%0A                .split('/')%0A                .slice(0, 3)%0A                .join('/');%0A        }%0A        else {%0A            origin = url.split('/')[0];%0A        }%0A        origin = origin.split('?')[0];%0A        return origin;%0A    }%0A    var URL_IN_CSS_REF = /url\\\\\\\\((['\\\\\\"])([^'\\\\\\"]*)\\\\\\\\1\\\\\\\\)/gm;%0A    function absoluteToStylesheet(cssText, href) {%0A        return cssText.replace(URL_IN_CSS_REF, function (_1, _2, filePath) {%0A            if (!/^[./]/.test(filePath)) {%0A                return \\\\\\"url('\\\\\\" + filePath + \\\\\\"')\\\\\\";%0A            }%0A            if (filePath[0] === '/') {%0A                return \\\\\\"url('\\\\\\" + (extractOrigin(href) + filePath) + \\\\\\"')\\\\\\";%0A            }%0A            var stack = href.split('/');%0A            var parts = filePath.split('/');%0A            stack.pop();%0A            for (var _i = 0, parts_1 = parts; _i < parts_1.length; _i++) {%0A                var part = parts_1[_i];%0A                if (part === '.') {%0A                    continue;%0A                }%0A                else if (part === '..') {%0A                    stack.pop();%0A                }%0A                else {%0A                    stack.push(part);%0A                }%0A            }%0A            return \\\\\\"url('\\\\\\" + stack.join('/') + \\\\\\"')\\\\\\";%0A        });%0A    }%0A    var RELATIVE_PATH = /^(\\\\\\\\.\\\\\\\\.|\\\\\\\\.|)\\\\\\\\//;%0A    function absoluteToDoc(doc, attributeValue) {%0A        if (!RELATIVE_PATH.test(attributeValue)) {%0A            return attributeValue;%0A        }%0A        var a = doc.createElement('a');%0A        a.href = attributeValue;%0A        return a.href;%0A    }%0A    function serializeNode(n, doc) {%0A        switch (n.nodeType) {%0A            case n.DOCUMENT_NODE:%0A                return {%0A                    type: NodeType.Document,%0A                    childNodes: []%0A                };%0A            case n.DOCUMENT_TYPE_NODE:%0A                return {%0A                    type: NodeType.DocumentType,%0A                    name: n.name,%0A                    publicId: n.publicId,%0A                    systemId: n.systemId%0A                };%0A            case n.ELEMENT_NODE:%0A                var tagName = n.tagName.toLowerCase();%0A                var attributes_1 = {};%0A                for (var _i = 0, _a = Array.from(n.attributes); _i < _a.length; _i++) {%0A                    var _b = _a[_i], name = _b.name, value = _b.value;%0A                    if (name === 'src' || name === 'href') {%0A                        attributes_1[name] = absoluteToDoc(doc, value);%0A                    }%0A                    else {%0A                        attributes_1[name] = value;%0A                    }%0A                }%0A                if (tagName === 'link') {%0A                    var stylesheet = Array.from(doc.styleSheets).find(function (s) {%0A                        return s.href === n.href;%0A                    });%0A                    var cssText = getCssRulesString(stylesheet);%0A                    if (cssText) {%0A                        attributes_1 = {%0A                            _cssText: absoluteToStylesheet(cssText, stylesheet.href)%0A                        };%0A                    }%0A                }%0A                if (tagName === 'input' ||%0A                    tagName === 'textarea' ||%0A                    tagName === 'select') {%0A                    var value = n.value;%0A                    if (attributes_1.type !== 'radio' &&%0A                        attributes_1.type !== 'checkbox' &&%0A                        value) {%0A                        attributes_1.value = value;%0A                    }%0A                    else if (n.checked) {%0A                        attributes_1.checked = n.checked;%0A                    }%0A                }%0A                if (tagName === 'option') {%0A                    var selectValue = n.parentElement;%0A                    if (attributes_1.value === selectValue.value) {%0A                        attributes_1.selected = n.selected;%0A                    }%0A                }%0A                return {%0A                    type: NodeType.Element,%0A                    tagName: tagName,%0A                    attributes: attributes_1,%0A                    childNodes: []%0A                };%0A            case n.TEXT_NODE:%0A                var parentTagName = n.parentNode && n.parentNode.tagName;%0A                var textContent = n.textContent;%0A                if (parentTagName === 'SCRIPT') {%0A                    textContent = 'SCRIPT_PLACEHOLDER';%0A                }%0A                return {%0A                    type: NodeType.Text,%0A                    textContent: textContent || ''%0A                };%0A            case n.CDATA_SECTION_NODE:%0A                return {%0A                    type: NodeType.CDATA,%0A                    textContent: ''%0A                };%0A            case n.COMMENT_NODE:%0A                return {%0A                    type: NodeType.Comment,%0A                    textContent: n.textContent || ''%0A                };%0A            default:%0A                return false;%0A        }%0A    }%0A    function serializeNodeWithId(n, doc, map, skipChild) {%0A        if (skipChild === void 0) { skipChild = false; }%0A        var _serializedNode = serializeNode(n, doc);%0A        if (!_serializedNode) {%0A            console.warn(n, 'not serialized');%0A            return null;%0A        }%0A        var serializedNode = Object.assign(_serializedNode, {%0A            id: genId()%0A        });%0A        n.__sn = serializedNode;%0A        map[serializedNode.id] = n;%0A        if ((serializedNode.type === NodeType.Document ||%0A            serializedNode.type === NodeType.Element) &&%0A            !skipChild) {%0A            for (var _i = 0, _a = Array.from(n.childNodes); _i < _a.length; _i++) {%0A                var childN = _a[_i];%0A                var serializedChildNode = serializeNodeWithId(childN, doc, map);%0A                if (serializedChildNode) {%0A                    serializedNode.childNodes.push(serializedChildNode);%0A                }%0A            }%0A        }%0A        return serializedNode;%0A    }%0A    function snapshot(n) {%0A        resetId();%0A        var idNodeMap = {};%0A        return [serializeNodeWithId(n, n, idNodeMap), idNodeMap];%0A    }%0A%0A    function on(type, fn, target) {%0A        if (target === void 0) { target = document; }%0A        target.addEventListener(type, fn, { capture: true, passive: true });%0A        return function () { return target.removeEventListener(type, fn); };%0A    }%0A    var mirror = {%0A        map: {},%0A        getId: function (n) {%0A            return n.__sn && n.__sn.id;%0A        },%0A        getNode: function (id) {%0A            return mirror.map[id] || null;%0A        },%0A        removeNodeFromMap: function (n) {%0A            var id = n.__sn && n.__sn.id;%0A            delete mirror.map[id];%0A            if (n.childNodes) {%0A                n.childNodes.forEach(function (child) {%0A                    return mirror.removeNodeFromMap(child);%0A                });%0A            }%0A        },%0A        has: function (id) {%0A            return mirror.map.hasOwnProperty(id);%0A        }%0A    };%0A    function throttle(func, wait, options) {%0A        if (options === void 0) { options = {}; }%0A        var timeout = null;%0A        var previous = 0;%0A        return function () {%0A            var now = Date.now();%0A            if (!previous && options.leading === false) {%0A                previous = now;%0A            }%0A            var remaining = wait - (now - previous);%0A            var context = this;%0A            var args = arguments;%0A            if (remaining <= 0 || remaining > wait) {%0A                if (timeout) {%0A                    window.clearTimeout(timeout);%0A                    timeout = null;%0A                }%0A                previous = now;%0A                func.apply(context, args);%0A            }%0A            else if (!timeout && options.trailing !== false) {%0A                timeout = window.setTimeout(function () {%0A                    previous = options.leading === false ? 0 : Date.now();%0A                    timeout = null;%0A                    func.apply(context, args);%0A                }, remaining);%0A            }%0A        };%0A    }%0A    function hookSetter(target, key, d) {%0A        var original = Object.getOwnPropertyDescriptor(target, key);%0A        Object.defineProperty(target, key, {%0A            set: function (value) {%0A                var _this = this;%0A                setTimeout(function () {%0A                    d.set.call(_this, value);%0A                }, 0);%0A                if (original && original.set) {%0A                    original.set.call(this, value);%0A                }%0A            }%0A        });%0A        return function () { return hookSetter(target, key, original || {}); };%0A    }%0A    function getWindowHeight() {%0A        return (window.innerHeight ||%0A            (document.documentElement && document.documentElement.clientHeight) ||%0A            (document.body && document.body.clientHeight));%0A    }%0A    function getWindowWidth() {%0A        return (window.innerWidth ||%0A            (document.documentElement && document.documentElement.clientWidth) ||%0A            (document.body && document.body.clientWidth));%0A    }%0A%0A    var EventType;%0A    (function (EventType) {%0A        EventType[EventType[\\\\\\"DomContentLoaded\\\\\\"] = 0] = \\\\\\"DomContentLoaded\\\\\\";%0A        EventType[EventType[\\\\\\"Load\\\\\\"] = 1] = \\\\\\"Load\\\\\\";%0A        EventType[EventType[\\\\\\"FullSnapshot\\\\\\"] = 2] = \\\\\\"FullSnapshot\\\\\\";%0A        EventType[EventType[\\\\\\"IncrementalSnapshot\\\\\\"] = 3] = \\\\\\"IncrementalSnapshot\\\\\\";%0A        EventType[EventType[\\\\\\"Meta\\\\\\"] = 4] = \\\\\\"Meta\\\\\\";%0A    })(EventType || (EventType = {}));%0A    var IncrementalSource;%0A    (function (IncrementalSource) {%0A        IncrementalSource[IncrementalSource[\\\\\\"Mutation\\\\\\"] = 0] = \\\\\\"Mutation\\\\\\";%0A        IncrementalSource[IncrementalSource[\\\\\\"MouseMove\\\\\\"] = 1] = \\\\\\"MouseMove\\\\\\";%0A        IncrementalSource[IncrementalSource[\\\\\\"MouseInteraction\\\\\\"] = 2] = \\\\\\"MouseInteraction\\\\\\";%0A        IncrementalSource[IncrementalSource[\\\\\\"Scroll\\\\\\"] = 3] = \\\\\\"Scroll\\\\\\";%0A        IncrementalSource[IncrementalSource[\\\\\\"ViewportResize\\\\\\"] = 4] = \\\\\\"ViewportResize\\\\\\";%0A        IncrementalSource[IncrementalSource[\\\\\\"Input\\\\\\"] = 5] = \\\\\\"Input\\\\\\";%0A    })(IncrementalSource || (IncrementalSource = {}));%0A    var MouseInteractions;%0A    (function (MouseInteractions) {%0A        MouseInteractions[MouseInteractions[\\\\\\"MouseUp\\\\\\"] = 0] = \\\\\\"MouseUp\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"MouseDown\\\\\\"] = 1] = \\\\\\"MouseDown\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"Click\\\\\\"] = 2] = \\\\\\"Click\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"ContextMenu\\\\\\"] = 3] = \\\\\\"ContextMenu\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"DblClick\\\\\\"] = 4] = \\\\\\"DblClick\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"Focus\\\\\\"] = 5] = \\\\\\"Focus\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"Blur\\\\\\"] = 6] = \\\\\\"Blur\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"TouchStart\\\\\\"] = 7] = \\\\\\"TouchStart\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"TouchMove\\\\\\"] = 8] = \\\\\\"TouchMove\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"TouchEnd\\\\\\"] = 9] = \\\\\\"TouchEnd\\\\\\";%0A    })(MouseInteractions || (MouseInteractions = {}));%0A%0A    function initMutationObserver(cb) {%0A        var observer = new MutationObserver(function (mutations) {%0A            var texts = [];%0A            var attributes = [];%0A            var removes = [];%0A            var adds = [];%0A            var dropped = [];%0A            var addsSet = new Set();%0A            var genAdds = function (n) {%0A                addsSet.add(n);%0A                n.childNodes.forEach(function (childN) { return genAdds(childN); });%0A            };%0A            mutations.forEach(function (mutation) {%0A                var type = mutation.type, target = mutation.target, oldValue = mutation.oldValue, addedNodes = mutation.addedNodes, removedNodes = mutation.removedNodes, attributeName = mutation.attributeName;%0A                switch (type) {%0A                    case 'characterData': {%0A                        var value = target.textContent;%0A                        if (value !== oldValue) {%0A                            texts.push({%0A                                value: value,%0A                                node: target%0A                            });%0A                        }%0A                        break;%0A                    }%0A                    case 'attributes': {%0A                        var value = target.getAttribute(attributeName);%0A                        if (value === oldValue) {%0A                            return;%0A                        }%0A                        var item = attributes.find(function (a) { return a.node === target; });%0A                        if (!item) {%0A                            item = {%0A                                node: target,%0A                                attributes: {}%0A                            };%0A                            attributes.push(item);%0A                        }%0A                        item.attributes[attributeName] = value;%0A                    }%0A                    case 'childList': {%0A                        addedNodes.forEach(function (n) { return genAdds(n); });%0A                        removedNodes.forEach(function (n) {%0A                            if (addsSet.has(n)) {%0A                                addsSet[\\\\\\"delete\\\\\\"](n);%0A                                dropped.push(n);%0A                            }%0A                            else if (addsSet.has(target) && !mirror.getId(n)) ;%0A                            else {%0A                                removes.push({%0A                                    parentId: mirror.getId(target),%0A                                    id: mirror.getId(n)%0A                                });%0A                            }%0A                            mirror.removeNodeFromMap(n);%0A                        });%0A                        break;%0A                    }%0A                    default:%0A                        break;%0A                }%0A            });%0A            removes = removes.map(function (remove) {%0A                if (remove.parentNode) {%0A                    remove.parentId = mirror.getId(remove.parentNode);%0A                    delete remove.parentNode;%0A                }%0A                return remove;%0A            });%0A            Array.from(addsSet).forEach(function (n) {%0A                var parentId = mirror.getId(n.parentNode);%0A                if (parentId &&%0A                    !dropped.some(function (d) { return d === n.parentNode; }) &&%0A                    !removes.some(function (r) { return r.id === parentId; })) {%0A                    adds.push({%0A                        parentId: mirror.getId(n.parentNode),%0A                        previousId: !n.previousSibling%0A                            ? n.previousSibling%0A                            : mirror.getId(n.previousSibling),%0A                        nextId: !n.nextSibling%0A                            ? n.nextSibling%0A                            : mirror.getId(n.nextSibling),%0A                        node: serializeNodeWithId(n, document, mirror.map, true)%0A                    });%0A                }%0A                else {%0A                    dropped.push(n);%0A                }%0A            });%0A            cb({%0A                texts: texts%0A                    .map(function (text) { return ({%0A                    id: mirror.getId(text.node),%0A                    value: text.value%0A                }); })%0A                    .filter(function (text) { return mirror.has(text.id); }),%0A                attributes: attributes%0A                    .map(function (attribute) { return ({%0A                    id: mirror.getId(attribute.node),%0A                    attributes: attribute.attributes%0A                }); })%0A                    .filter(function (attribute) { return mirror.has(attribute.id); }),%0A                removes: removes,%0A                adds: adds%0A            });%0A        });%0A        observer.observe(document, {%0A            attributes: true,%0A            attributeOldValue: true,%0A            characterData: true,%0A            characterDataOldValue: true,%0A            childList: true,%0A            subtree: true%0A        });%0A        return observer;%0A    }%0A    function initMousemoveObserver(cb) {%0A        var positions = [];%0A        var timeBaseline;%0A        var wrappedCb = throttle(function () {%0A            var totalOffset = Date.now() - timeBaseline;%0A            cb(positions.map(function (p) {%0A                p.timeOffset -= totalOffset;%0A                return p;%0A            }));%0A            positions = [];%0A            timeBaseline = null;%0A        }, 500);%0A        var updatePosition = throttle(function (evt) {%0A            var clientX = evt.clientX, clientY = evt.clientY;%0A            if (!timeBaseline) {%0A                timeBaseline = Date.now();%0A            }%0A            positions.push({%0A                x: clientX,%0A                y: clientY,%0A                timeOffset: Date.now() - timeBaseline%0A            });%0A            wrappedCb();%0A        }, 20, {%0A            trailing: false%0A        });%0A        return on('mousemove', updatePosition);%0A    }%0A    function initMouseInteractionObserver(cb) {%0A        var handlers = [];%0A        var getHandler = function (eventKey) {%0A            return function (event) {%0A                var id = mirror.getId(event.target);%0A                var clientX = event.clientX, clientY = event.clientY;%0A                cb({%0A                    type: MouseInteractions[eventKey],%0A                    id: id,%0A                    x: clientX,%0A                    y: clientY%0A                });%0A            };%0A        };%0A        Object.keys(MouseInteractions)%0A            .filter(function (key) { return Number.isNaN(Number(key)); })%0A            .forEach(function (eventKey) {%0A            var eventName = eventKey.toLowerCase();%0A            var handler = getHandler(eventKey);%0A            handlers.push(on(eventName, handler));%0A        });%0A        return function () {%0A            handlers.forEach(function (h) { return h(); });%0A        };%0A    }%0A    function initScrollObserver(cb) {%0A        var updatePosition = throttle(function (evt) {%0A            if (!evt.target) {%0A                return;%0A            }%0A            var id = mirror.getId(evt.target);%0A            if (evt.target === document) {%0A                cb({%0A                    id: id,%0A                    x: document.documentElement.scrollLeft,%0A                    y: document.documentElement.scrollTop%0A                });%0A            }%0A            else {%0A                cb({%0A                    id: id,%0A                    x: evt.target.scrollLeft,%0A                    y: evt.target.scrollTop%0A                });%0A            }%0A        }, 100);%0A        return on('scroll', updatePosition);%0A    }%0A    function initViewportResizeObserver(cb) {%0A        var updateDimension = throttle(function () {%0A            var height = getWindowHeight();%0A            var width = getWindowWidth();%0A            cb({%0A                width: Number(width),%0A                height: Number(height)%0A            });%0A        }, 200);%0A        return on('resize', updateDimension, window);%0A    }%0A    var INPUT_TAGS = ['INPUT', 'TEXTAREA', 'SELECT'];%0A    var HOOK_PROPERTIES = [%0A        [HTMLInputElement.prototype, 'value'],%0A        [HTMLInputElement.prototype, 'checked'],%0A        [HTMLSelectElement.prototype, 'value'],%0A        [HTMLTextAreaElement.prototype, 'value'],%0A    ];%0A    var lastInputValueMap = new WeakMap();%0A    function initInputObserver(cb) {%0A        function eventHandler(event) {%0A            var target = event.target;%0A            if (!target ||%0A                !target.tagName ||%0A                INPUT_TAGS.indexOf(target.tagName) < 0) {%0A                return;%0A            }%0A            var type = target.type;%0A            var text = target.value;%0A            var isChecked = false;%0A            if (type === 'radio' || type === 'checkbox') {%0A                isChecked = target.checked;%0A            }%0A            cbWithDedup(target, { text: text, isChecked: isChecked });%0A            var name = target.name;%0A            if (type === 'radio' && name && isChecked) {%0A                document%0A                    .querySelectorAll(\\\\\\"input[type=\\\\\\\\\\\\\\"radio\\\\\\\\\\\\\\"][name=\\\\\\\\\\\\\\"\\\\\\" + name + \\\\\\"\\\\\\\\\\\\\\"]\\\\\\")%0A                    .forEach(function (el) {%0A                    if (el !== target) {%0A                        cbWithDedup(el, {%0A                            text: el.value,%0A                            isChecked: !isChecked%0A                        });%0A                    }%0A                });%0A            }%0A        }%0A        function cbWithDedup(target, v) {%0A            var lastInputValue = lastInputValueMap.get(target);%0A            if (!lastInputValue ||%0A                lastInputValue.text !== v.text ||%0A                lastInputValue.isChecked !== v.isChecked) {%0A                lastInputValueMap.set(target, v);%0A                var id = mirror.getId(target);%0A                cb(__assign({}, v, { id: id }));%0A            }%0A        }%0A        var handlers = [%0A            'input',%0A            'change',%0A        ].map(function (eventName) { return on(eventName, eventHandler); });%0A        var propertyDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');%0A        if (propertyDescriptor && propertyDescriptor.set) {%0A            handlers.push.apply(handlers, HOOK_PROPERTIES.map(function (p) {%0A                return hookSetter(p[0], p[1], {%0A                    set: function () {%0A                        eventHandler({ target: this });%0A                    }%0A                });%0A            }));%0A        }%0A        return function () {%0A            handlers.forEach(function (h) { return h(); });%0A        };%0A    }%0A    function initObservers(o) {%0A        var mutationObserver = initMutationObserver(o.mutationCb);%0A        var mousemoveHandler = initMousemoveObserver(o.mousemoveCb);%0A        var mouseInteractionHandler = initMouseInteractionObserver(o.mouseInteractionCb);%0A        var scrollHandler = initScrollObserver(o.scrollCb);%0A        var viewportResizeHandler = initViewportResizeObserver(o.viewportResizeCb);%0A        var inputHandler = initInputObserver(o.inputCb);%0A        return {%0A            mutationObserver: mutationObserver,%0A            mousemoveHandler: mousemoveHandler,%0A            mouseInteractionHandler: mouseInteractionHandler,%0A            scrollHandler: scrollHandler,%0A            viewportResizeHandler: viewportResizeHandler,%0A            inputHandler: inputHandler%0A        };%0A    }%0A%0A    function wrapEvent(e) {%0A        return __assign({}, e, { timestamp: Date.now() });%0A    }%0A    function record(options) {%0A        if (options === void 0) { options = {}; }%0A        var emit = options.emit;%0A        if (!emit) {%0A            throw new Error('emit function is required');%0A        }%0A        try {%0A            on('DOMContentLoaded', function () {%0A                emit(wrapEvent({%0A                    type: EventType.DomContentLoaded,%0A                    data: {}%0A                }));%0A            });%0A            var init_1 = function () {%0A                emit(wrapEvent({%0A                    type: EventType.Meta,%0A                    data: {%0A                        href: window.location.href,%0A                        width: getWindowWidth(),%0A                        height: getWindowHeight()%0A                    }%0A                }));%0A                var _a = snapshot(document), node = _a[0], idNodeMap = _a[1];%0A                if (!node) {%0A                    return console.warn('Failed to snapshot the document');%0A                }%0A                mirror.map = idNodeMap;%0A                emit(wrapEvent({%0A                    type: EventType.FullSnapshot,%0A                    data: {%0A                        node: node,%0A                        initialOffset: {%0A                            left: document.documentElement.scrollLeft,%0A                            top: document.documentElement.scrollTop%0A                        }%0A                    }%0A                }));%0A                initObservers({%0A                    mutationCb: function (m) {%0A                        return emit(wrapEvent({%0A                            type: EventType.IncrementalSnapshot,%0A                            data: __assign({ source: IncrementalSource.Mutation }, m)%0A                        }));%0A                    },%0A                    mousemoveCb: function (positions) {%0A                        return emit(wrapEvent({%0A                            type: EventType.IncrementalSnapshot,%0A                            data: {%0A                                source: IncrementalSource.MouseMove,%0A                                positions: positions%0A                            }%0A                        }));%0A                    },%0A                    mouseInteractionCb: function (d) {%0A                        return emit(wrapEvent({%0A                            type: EventType.IncrementalSnapshot,%0A                            data: __assign({ source: IncrementalSource.MouseInteraction }, d)%0A                        }));%0A                    },%0A                    scrollCb: function (p) {%0A                        return emit(wrapEvent({%0A                            type: EventType.IncrementalSnapshot,%0A                            data: __assign({ source: IncrementalSource.Scroll }, p)%0A                        }));%0A                    },%0A                    viewportResizeCb: function (d) {%0A                        return emit(wrapEvent({%0A                            type: EventType.IncrementalSnapshot,%0A                            data: __assign({ source: IncrementalSource.ViewportResize }, d)%0A                        }));%0A                    },%0A                    inputCb: function (v) {%0A                        return emit(wrapEvent({%0A                            type: EventType.IncrementalSnapshot,%0A                            data: __assign({ source: IncrementalSource.Input }, v)%0A                        }));%0A                    }%0A                });%0A            };%0A            if (document.readyState === 'interactive' ||%0A                document.readyState === 'complete') {%0A                init_1();%0A            }%0A            else {%0A                on('load', function () {%0A                    emit(wrapEvent({%0A                        type: EventType.Load,%0A                        data: {}%0A                    }));%0A                    init_1();%0A                }, window);%0A            }%0A        }%0A        catch (error) {%0A            console.warn(error);%0A        }%0A    }%0A%0A    return record;%0A%0A}());%0A%0A      window.Date.now = () => new Date(Date.UTC(2018, 10, 15, 8)).valueOf();%0A      window.snapshots = [];%0A      record({%0A        emit: event => {%0A          console.log(event);%0A          window.snapshots.push(event);%0A        }%0A      });%0A    </script>%0A    </body>%0A    %0A</html>\\",
-      \\"width\\": 800,
-      \\"height\\": 600
+      \\"href\\": \\"data:text/html,<!DOCTYPE html>%0A<html lang=\\\\\\"en\\\\\\">%0A<head>%0A  <meta charset=\\\\\\"UTF-8\\\\\\">%0A  <meta name=\\\\\\"viewport\\\\\\" content=\\\\\\"width=device-width, initial-scale=1.0\\\\\\">%0A  <meta http-equiv=\\\\\\"X-UA-Compatible\\\\\\" content=\\\\\\"ie=edge\\\\\\">%0A  <title>Select2 3.5</title>%0A  <link rel=\\\\\\"stylesheet\\\\\\" href=\\\\\\"https://cdn.jsdelivr.net/npm/select2@3.5.1/select2.css\\\\\\">%0A</head>%0A<body>%0A  <blockquote>%0A    Select2 is a jQuery replacement for select boxes.%0A    <br>%0A    In the 3.5 version it use a quite complicated DOM generation strategy which is a good battle-test for rrweb's recorder.%0A  </blockquote>%0A  <select id=\\\\\\"el\\\\\\">%0A    <option value=\\\\\\"a\\\\\\">A</option>%0A    <option value=\\\\\\"b\\\\\\">B</option>%0A  </select>%0A  <script src=\\\\\\"https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js\\\\\\"></script>%0A  <script src=\\\\\\"https://cdn.jsdelivr.net/npm/select2@3.5.2-browserify/select2.min.js\\\\\\"></script>%0A  <script>%0A    $('#el').select2();%0A  </script>%0A%0A    <script>%0A      var record = (function () {%0A    'use strict';%0A%0A    /*! *****************************************************************************%0D%0A    Copyright (c) Microsoft Corporation. All rights reserved.%0D%0A    Licensed under the Apache License, Version 2.0 (the \\\\\\"License\\\\\\"); you may not use%0D%0A    this file except in compliance with the License. You may obtain a copy of the%0D%0A    License at http://www.apache.org/licenses/LICENSE-2.0%0D%0A%0D%0A    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY%0D%0A    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED%0D%0A    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,%0D%0A    MERCHANTABLITY OR NON-INFRINGEMENT.%0D%0A%0D%0A    See the Apache Version 2.0 License for specific language governing permissions%0D%0A    and limitations under the License.%0D%0A    ***************************************************************************** */%0D%0A%0D%0A    var __assign = function() {%0D%0A        __assign = Object.assign || function __assign(t) {%0D%0A            for (var s, i = 1, n = arguments.length; i < n; i++) {%0D%0A                s = arguments[i];%0D%0A                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];%0D%0A            }%0D%0A            return t;%0D%0A        };%0D%0A        return __assign.apply(this, arguments);%0D%0A    };%0A%0A    var NodeType;%0A    (function (NodeType) {%0A        NodeType[NodeType[\\\\\\"Document\\\\\\"] = 0] = \\\\\\"Document\\\\\\";%0A        NodeType[NodeType[\\\\\\"DocumentType\\\\\\"] = 1] = \\\\\\"DocumentType\\\\\\";%0A        NodeType[NodeType[\\\\\\"Element\\\\\\"] = 2] = \\\\\\"Element\\\\\\";%0A        NodeType[NodeType[\\\\\\"Text\\\\\\"] = 3] = \\\\\\"Text\\\\\\";%0A        NodeType[NodeType[\\\\\\"CDATA\\\\\\"] = 4] = \\\\\\"CDATA\\\\\\";%0A        NodeType[NodeType[\\\\\\"Comment\\\\\\"] = 5] = \\\\\\"Comment\\\\\\";%0A    })(NodeType || (NodeType = {}));%0A%0A    var _id = 1;%0A    function genId() {%0A        return _id++;%0A    }%0A    function resetId() {%0A        _id = 1;%0A    }%0A    function getCssRulesString(s) {%0A        try {%0A            var rules = s.rules || s.cssRules;%0A            return rules%0A                ? Array.from(rules).reduce(function (prev, cur) { return (prev += cur.cssText); }, '')%0A                : null;%0A        }%0A        catch (error) {%0A            return null;%0A        }%0A    }%0A    function extractOrigin(url) {%0A        var origin;%0A        if (url.indexOf('//') > -1) {%0A            origin = url%0A                .split('/')%0A                .slice(0, 3)%0A                .join('/');%0A        }%0A        else {%0A            origin = url.split('/')[0];%0A        }%0A        origin = origin.split('?')[0];%0A        return origin;%0A    }%0A    var URL_IN_CSS_REF = /url\\\\\\\\((['\\\\\\"])([^'\\\\\\"]*)\\\\\\\\1\\\\\\\\)/gm;%0A    function absoluteToStylesheet(cssText, href) {%0A        return cssText.replace(URL_IN_CSS_REF, function (_1, _2, filePath) {%0A            if (!/^[./]/.test(filePath)) {%0A                return \\\\\\"url('\\\\\\" + filePath + \\\\\\"')\\\\\\";%0A            }%0A            if (filePath[0] === '/') {%0A                return \\\\\\"url('\\\\\\" + (extractOrigin(href) + filePath) + \\\\\\"')\\\\\\";%0A            }%0A            var stack = href.split('/');%0A            var parts = filePath.split('/');%0A            stack.pop();%0A            for (var _i = 0, parts_1 = parts; _i < parts_1.length; _i++) {%0A                var part = parts_1[_i];%0A                if (part === '.') {%0A                    continue;%0A                }%0A                else if (part === '..') {%0A                    stack.pop();%0A                }%0A                else {%0A                    stack.push(part);%0A                }%0A            }%0A            return \\\\\\"url('\\\\\\" + stack.join('/') + \\\\\\"')\\\\\\";%0A        });%0A    }%0A    var RELATIVE_PATH = /^(\\\\\\\\.\\\\\\\\.|\\\\\\\\.|)\\\\\\\\//;%0A    function absoluteToDoc(doc, attributeValue) {%0A        if (!RELATIVE_PATH.test(attributeValue)) {%0A            return attributeValue;%0A        }%0A        var a = doc.createElement('a');%0A        a.href = attributeValue;%0A        return a.href;%0A    }%0A    function serializeNode(n, doc) {%0A        switch (n.nodeType) {%0A            case n.DOCUMENT_NODE:%0A                return {%0A                    type: NodeType.Document,%0A                    childNodes: []%0A                };%0A            case n.DOCUMENT_TYPE_NODE:%0A                return {%0A                    type: NodeType.DocumentType,%0A                    name: n.name,%0A                    publicId: n.publicId,%0A                    systemId: n.systemId%0A                };%0A            case n.ELEMENT_NODE:%0A                var tagName = n.tagName.toLowerCase();%0A                var attributes_1 = {};%0A                for (var _i = 0, _a = Array.from(n.attributes); _i < _a.length; _i++) {%0A                    var _b = _a[_i], name = _b.name, value = _b.value;%0A                    if (name === 'src' || name === 'href') {%0A                        attributes_1[name] = absoluteToDoc(doc, value);%0A                    }%0A                    else {%0A                        attributes_1[name] = value;%0A                    }%0A                }%0A                if (tagName === 'link') {%0A                    var stylesheet = Array.from(doc.styleSheets).find(function (s) {%0A                        return s.href === n.href;%0A                    });%0A                    var cssText = getCssRulesString(stylesheet);%0A                    if (cssText) {%0A                        attributes_1 = {%0A                            _cssText: absoluteToStylesheet(cssText, stylesheet.href)%0A                        };%0A                    }%0A                }%0A                if (tagName === 'input' ||%0A                    tagName === 'textarea' ||%0A                    tagName === 'select') {%0A                    var value = n.value;%0A                    if (attributes_1.type !== 'radio' &&%0A                        attributes_1.type !== 'checkbox' &&%0A                        value) {%0A                        attributes_1.value = value;%0A                    }%0A                    else if (n.checked) {%0A                        attributes_1.checked = n.checked;%0A                    }%0A                }%0A                if (tagName === 'option') {%0A                    var selectValue = n.parentElement;%0A                    if (attributes_1.value === selectValue.value) {%0A                        attributes_1.selected = n.selected;%0A                    }%0A                }%0A                return {%0A                    type: NodeType.Element,%0A                    tagName: tagName,%0A                    attributes: attributes_1,%0A                    childNodes: []%0A                };%0A            case n.TEXT_NODE:%0A                var parentTagName = n.parentNode && n.parentNode.tagName;%0A                var textContent = n.textContent;%0A                if (parentTagName === 'SCRIPT') {%0A                    textContent = 'SCRIPT_PLACEHOLDER';%0A                }%0A                return {%0A                    type: NodeType.Text,%0A                    textContent: textContent || '',%0A                    isStyle: parentTagName === 'STYLE' ? true : undefined%0A                };%0A            case n.CDATA_SECTION_NODE:%0A                return {%0A                    type: NodeType.CDATA,%0A                    textContent: ''%0A                };%0A            case n.COMMENT_NODE:%0A                return {%0A                    type: NodeType.Comment,%0A                    textContent: n.textContent || ''%0A                };%0A            default:%0A                return false;%0A        }%0A    }%0A    function serializeNodeWithId(n, doc, map, skipChild) {%0A        if (skipChild === void 0) { skipChild = false; }%0A        var _serializedNode = serializeNode(n, doc);%0A        if (!_serializedNode) {%0A            console.warn(n, 'not serialized');%0A            return null;%0A        }%0A        var serializedNode = Object.assign(_serializedNode, {%0A            id: genId()%0A        });%0A        n.__sn = serializedNode;%0A        map[serializedNode.id] = n;%0A        if ((serializedNode.type === NodeType.Document ||%0A            serializedNode.type === NodeType.Element) &&%0A            !skipChild) {%0A            for (var _i = 0, _a = Array.from(n.childNodes); _i < _a.length; _i++) {%0A                var childN = _a[_i];%0A                var serializedChildNode = serializeNodeWithId(childN, doc, map);%0A                if (serializedChildNode) {%0A                    serializedNode.childNodes.push(serializedChildNode);%0A                }%0A            }%0A        }%0A        return serializedNode;%0A    }%0A    function snapshot(n) {%0A        resetId();%0A        var idNodeMap = {};%0A        return [serializeNodeWithId(n, n, idNodeMap), idNodeMap];%0A    }%0A%0A    function on(type, fn, target) {%0A        if (target === void 0) { target = document; }%0A        target.addEventListener(type, fn, { capture: true, passive: true });%0A        return function () { return target.removeEventListener(type, fn); };%0A    }%0A    var mirror = {%0A        map: {},%0A        getId: function (n) {%0A            return n.__sn && n.__sn.id;%0A        },%0A        getNode: function (id) {%0A            return mirror.map[id] || null;%0A        },%0A        removeNodeFromMap: function (n) {%0A            var id = n.__sn && n.__sn.id;%0A            delete mirror.map[id];%0A            if (n.childNodes) {%0A                n.childNodes.forEach(function (child) {%0A                    return mirror.removeNodeFromMap(child);%0A                });%0A            }%0A        },%0A        has: function (id) {%0A            return mirror.map.hasOwnProperty(id);%0A        }%0A    };%0A    function throttle(func, wait, options) {%0A        if (options === void 0) { options = {}; }%0A        var timeout = null;%0A        var previous = 0;%0A        return function () {%0A            var now = Date.now();%0A            if (!previous && options.leading === false) {%0A                previous = now;%0A            }%0A            var remaining = wait - (now - previous);%0A            var context = this;%0A            var args = arguments;%0A            if (remaining <= 0 || remaining > wait) {%0A                if (timeout) {%0A                    window.clearTimeout(timeout);%0A                    timeout = null;%0A                }%0A                previous = now;%0A                func.apply(context, args);%0A            }%0A            else if (!timeout && options.trailing !== false) {%0A                timeout = window.setTimeout(function () {%0A                    previous = options.leading === false ? 0 : Date.now();%0A                    timeout = null;%0A                    func.apply(context, args);%0A                }, remaining);%0A            }%0A        };%0A    }%0A    function hookSetter(target, key, d) {%0A        var original = Object.getOwnPropertyDescriptor(target, key);%0A        Object.defineProperty(target, key, {%0A            set: function (value) {%0A                var _this = this;%0A                setTimeout(function () {%0A                    d.set.call(_this, value);%0A                }, 0);%0A                if (original && original.set) {%0A                    original.set.call(this, value);%0A                }%0A            }%0A        });%0A        return function () { return hookSetter(target, key, original || {}); };%0A    }%0A    function getWindowHeight() {%0A        return (window.innerHeight ||%0A            (document.documentElement && document.documentElement.clientHeight) ||%0A            (document.body && document.body.clientHeight));%0A    }%0A    function getWindowWidth() {%0A        return (window.innerWidth ||%0A            (document.documentElement && document.documentElement.clientWidth) ||%0A            (document.body && document.body.clientWidth));%0A    }%0A%0A    var EventType;%0A    (function (EventType) {%0A        EventType[EventType[\\\\\\"DomContentLoaded\\\\\\"] = 0] = \\\\\\"DomContentLoaded\\\\\\";%0A        EventType[EventType[\\\\\\"Load\\\\\\"] = 1] = \\\\\\"Load\\\\\\";%0A        EventType[EventType[\\\\\\"FullSnapshot\\\\\\"] = 2] = \\\\\\"FullSnapshot\\\\\\";%0A        EventType[EventType[\\\\\\"IncrementalSnapshot\\\\\\"] = 3] = \\\\\\"IncrementalSnapshot\\\\\\";%0A        EventType[EventType[\\\\\\"Meta\\\\\\"] = 4] = \\\\\\"Meta\\\\\\";%0A    })(EventType || (EventType = {}));%0A    var IncrementalSource;%0A    (function (IncrementalSource) {%0A        IncrementalSource[IncrementalSource[\\\\\\"Mutation\\\\\\"] = 0] = \\\\\\"Mutation\\\\\\";%0A        IncrementalSource[IncrementalSource[\\\\\\"MouseMove\\\\\\"] = 1] = \\\\\\"MouseMove\\\\\\";%0A        IncrementalSource[IncrementalSource[\\\\\\"MouseInteraction\\\\\\"] = 2] = \\\\\\"MouseInteraction\\\\\\";%0A        IncrementalSource[IncrementalSource[\\\\\\"Scroll\\\\\\"] = 3] = \\\\\\"Scroll\\\\\\";%0A        IncrementalSource[IncrementalSource[\\\\\\"ViewportResize\\\\\\"] = 4] = \\\\\\"ViewportResize\\\\\\";%0A        IncrementalSource[IncrementalSource[\\\\\\"Input\\\\\\"] = 5] = \\\\\\"Input\\\\\\";%0A    })(IncrementalSource || (IncrementalSource = {}));%0A    var MouseInteractions;%0A    (function (MouseInteractions) {%0A        MouseInteractions[MouseInteractions[\\\\\\"MouseUp\\\\\\"] = 0] = \\\\\\"MouseUp\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"MouseDown\\\\\\"] = 1] = \\\\\\"MouseDown\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"Click\\\\\\"] = 2] = \\\\\\"Click\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"ContextMenu\\\\\\"] = 3] = \\\\\\"ContextMenu\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"DblClick\\\\\\"] = 4] = \\\\\\"DblClick\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"Focus\\\\\\"] = 5] = \\\\\\"Focus\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"Blur\\\\\\"] = 6] = \\\\\\"Blur\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"TouchStart\\\\\\"] = 7] = \\\\\\"TouchStart\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"TouchMove\\\\\\"] = 8] = \\\\\\"TouchMove\\\\\\";%0A        MouseInteractions[MouseInteractions[\\\\\\"TouchEnd\\\\\\"] = 9] = \\\\\\"TouchEnd\\\\\\";%0A    })(MouseInteractions || (MouseInteractions = {}));%0A%0A    function initMutationObserver(cb) {%0A        var observer = new MutationObserver(function (mutations) {%0A            var texts = [];%0A            var attributes = [];%0A            var removes = [];%0A            var adds = [];%0A            var dropped = [];%0A            var addsSet = new Set();%0A            var genAdds = function (n) {%0A                addsSet.add(n);%0A                n.childNodes.forEach(function (childN) { return genAdds(childN); });%0A            };%0A            mutations.forEach(function (mutation) {%0A                var type = mutation.type, target = mutation.target, oldValue = mutation.oldValue, addedNodes = mutation.addedNodes, removedNodes = mutation.removedNodes, attributeName = mutation.attributeName;%0A                switch (type) {%0A                    case 'characterData': {%0A                        var value = target.textContent;%0A                        if (value !== oldValue) {%0A                            texts.push({%0A                                value: value,%0A                                node: target%0A                            });%0A                        }%0A                        break;%0A                    }%0A                    case 'attributes': {%0A                        var value = target.getAttribute(attributeName);%0A                        if (value === oldValue) {%0A                            return;%0A                        }%0A                        var item = attributes.find(function (a) { return a.node === target; });%0A                        if (!item) {%0A                            item = {%0A                                node: target,%0A                                attributes: {}%0A                            };%0A                            attributes.push(item);%0A                        }%0A                        item.attributes[attributeName] = value;%0A                    }%0A                    case 'childList': {%0A                        addedNodes.forEach(function (n) { return genAdds(n); });%0A                        removedNodes.forEach(function (n) {%0A                            if (addsSet.has(n)) {%0A                                addsSet[\\\\\\"delete\\\\\\"](n);%0A                                dropped.push(n);%0A                            }%0A                            else if (addsSet.has(target) && !mirror.getId(n)) ;%0A                            else {%0A                                removes.push({%0A                                    parentId: mirror.getId(target),%0A                                    id: mirror.getId(n)%0A                                });%0A                            }%0A                            mirror.removeNodeFromMap(n);%0A                        });%0A                        break;%0A                    }%0A                    default:%0A                        break;%0A                }%0A            });%0A            removes = removes.map(function (remove) {%0A                if (remove.parentNode) {%0A                    remove.parentId = mirror.getId(remove.parentNode);%0A                    delete remove.parentNode;%0A                }%0A                return remove;%0A            });%0A            Array.from(addsSet).forEach(function (n) {%0A                var parentId = mirror.getId(n.parentNode);%0A                if (parentId &&%0A                    !dropped.some(function (d) { return d === n.parentNode; }) &&%0A                    !removes.some(function (r) { return r.id === parentId; })) {%0A                    adds.push({%0A                        parentId: mirror.getId(n.parentNode),%0A                        previousId: !n.previousSibling%0A                            ? n.previousSibling%0A                            : mirror.getId(n.previousSibling),%0A                        nextId: !n.nextSibling%0A                            ? n.nextSibling%0A                            : mirror.getId(n.nextSibling),%0A                        node: serializeNodeWithId(n, document, mirror.map, true)%0A                    });%0A                }%0A                else {%0A                    dropped.push(n);%0A                }%0A            });%0A            cb({%0A                texts: texts%0A                    .map(function (text) { return ({%0A                    id: mirror.getId(text.node),%0A                    value: text.value%0A                }); })%0A                    .filter(function (text) { return mirror.has(text.id); }),%0A                attributes: attributes%0A                    .map(function (attribute) { return ({%0A                    id: mirror.getId(attribute.node),%0A                    attributes: attribute.attributes%0A                }); })%0A                    .filter(function (attribute) { return mirror.has(attribute.id); }),%0A                removes: removes,%0A                adds: adds%0A            });%0A        });%0A        observer.observe(document, {%0A            attributes: true,%0A            attributeOldValue: true,%0A            characterData: true,%0A            characterDataOldValue: true,%0A            childList: true,%0A            subtree: true%0A        });%0A        return observer;%0A    }%0A    function initMousemoveObserver(cb) {%0A        var positions = [];%0A        var timeBaseline;%0A        var wrappedCb = throttle(function () {%0A            var totalOffset = Date.now() - timeBaseline;%0A            cb(positions.map(function (p) {%0A                p.timeOffset -= totalOffset;%0A                return p;%0A            }));%0A            positions = [];%0A            timeBaseline = null;%0A        }, 500);%0A        var updatePosition = throttle(function (evt) {%0A            var clientX = evt.clientX, clientY = evt.clientY, target = evt.target;%0A            if (!timeBaseline) {%0A                timeBaseline = Date.now();%0A            }%0A            positions.push({%0A                x: clientX,%0A                y: clientY,%0A                id: mirror.getId(target),%0A                timeOffset: Date.now() - timeBaseline%0A            });%0A            wrappedCb();%0A        }, 20, {%0A            trailing: false%0A        });%0A        return on('mousemove', updatePosition);%0A    }%0A    function initMouseInteractionObserver(cb) {%0A        var handlers = [];%0A        var getHandler = function (eventKey) {%0A            return function (event) {%0A                var id = mirror.getId(event.target);%0A                var clientX = event.clientX, clientY = event.clientY;%0A                cb({%0A                    type: MouseInteractions[eventKey],%0A                    id: id,%0A                    x: clientX,%0A                    y: clientY%0A                });%0A            };%0A        };%0A        Object.keys(MouseInteractions)%0A            .filter(function (key) { return Number.isNaN(Number(key)); })%0A            .forEach(function (eventKey) {%0A            var eventName = eventKey.toLowerCase();%0A            var handler = getHandler(eventKey);%0A            handlers.push(on(eventName, handler));%0A        });%0A        return function () {%0A            handlers.forEach(function (h) { return h(); });%0A        };%0A    }%0A    function initScrollObserver(cb) {%0A        var updatePosition = throttle(function (evt) {%0A            if (!evt.target) {%0A                return;%0A            }%0A            var id = mirror.getId(evt.target);%0A            if (evt.target === document) {%0A                cb({%0A                    id: id,%0A                    x: document.documentElement.scrollLeft,%0A                    y: document.documentElement.scrollTop%0A                });%0A            }%0A            else {%0A                cb({%0A                    id: id,%0A                    x: evt.target.scrollLeft,%0A                    y: evt.target.scrollTop%0A                });%0A            }%0A        }, 100);%0A        return on('scroll', updatePosition);%0A    }%0A    function initViewportResizeObserver(cb) {%0A        var updateDimension = throttle(function () {%0A            var height = getWindowHeight();%0A            var width = getWindowWidth();%0A            cb({%0A                width: Number(width),%0A                height: Number(height)%0A            });%0A        }, 200);%0A        return on('resize', updateDimension, window);%0A    }%0A    var INPUT_TAGS = ['INPUT', 'TEXTAREA', 'SELECT'];%0A    var HOOK_PROPERTIES = [%0A        [HTMLInputElement.prototype, 'value'],%0A        [HTMLInputElement.prototype, 'checked'],%0A        [HTMLSelectElement.prototype, 'value'],%0A        [HTMLTextAreaElement.prototype, 'value'],%0A    ];%0A    var lastInputValueMap = new WeakMap();%0A    function initInputObserver(cb) {%0A        function eventHandler(event) {%0A            var target = event.target;%0A            if (!target ||%0A                !target.tagName ||%0A                INPUT_TAGS.indexOf(target.tagName) < 0) {%0A                return;%0A            }%0A            var type = target.type;%0A            var text = target.value;%0A            var isChecked = false;%0A            if (type === 'radio' || type === 'checkbox') {%0A                isChecked = target.checked;%0A            }%0A            cbWithDedup(target, { text: text, isChecked: isChecked });%0A            var name = target.name;%0A            if (type === 'radio' && name && isChecked) {%0A                document%0A                    .querySelectorAll(\\\\\\"input[type=\\\\\\\\\\\\\\"radio\\\\\\\\\\\\\\"][name=\\\\\\\\\\\\\\"\\\\\\" + name + \\\\\\"\\\\\\\\\\\\\\"]\\\\\\")%0A                    .forEach(function (el) {%0A                    if (el !== target) {%0A                        cbWithDedup(el, {%0A                            text: el.value,%0A                            isChecked: !isChecked%0A                        });%0A                    }%0A                });%0A            }%0A        }%0A        function cbWithDedup(target, v) {%0A            var lastInputValue = lastInputValueMap.get(target);%0A            if (!lastInputValue ||%0A                lastInputValue.text !== v.text ||%0A                lastInputValue.isChecked !== v.isChecked) {%0A                lastInputValueMap.set(target, v);%0A                var id = mirror.getId(target);%0A                cb(__assign({}, v, { id: id }));%0A            }%0A        }%0A        var handlers = [%0A            'input',%0A            'change',%0A        ].map(function (eventName) { return on(eventName, eventHandler); });%0A        var propertyDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');%0A        if (propertyDescriptor && propertyDescriptor.set) {%0A            handlers.push.apply(handlers, HOOK_PROPERTIES.map(function (p) {%0A                return hookSetter(p[0], p[1], {%0A                    set: function () {%0A                        eventHandler({ target: this });%0A                    }%0A                });%0A            }));%0A        }%0A        return function () {%0A            handlers.forEach(function (h) { return h(); });%0A        };%0A    }%0A    function initObservers(o) {%0A        var mutationObserver = initMutationObserver(o.mutationCb);%0A        var mousemoveHandler = initMousemoveObserver(o.mousemoveCb);%0A        var mouseInteractionHandler = initMouseInteractionObserver(o.mouseInteractionCb);%0A        var scrollHandler = initScrollObserver(o.scrollCb);%0A        var viewportResizeHandler = initViewportResizeObserver(o.viewportResizeCb);%0A        var inputHandler = initInputObserver(o.inputCb);%0A        return {%0A            mutationObserver: mutationObserver,%0A            mousemoveHandler: mousemoveHandler,%0A            mouseInteractionHandler: mouseInteractionHandler,%0A            scrollHandler: scrollHandler,%0A            viewportResizeHandler: viewportResizeHandler,%0A            inputHandler: inputHandler%0A        };%0A    }%0A%0A    function wrapEvent(e) {%0A        return __assign({}, e, { timestamp: Date.now() });%0A    }%0A    function record(options) {%0A        if (options === void 0) { options = {}; }%0A        var emit = options.emit;%0A        if (!emit) {%0A            throw new Error('emit function is required');%0A        }%0A        try {%0A            on('DOMContentLoaded', function () {%0A                emit(wrapEvent({%0A                    type: EventType.DomContentLoaded,%0A                    data: {}%0A                }));%0A            });%0A            var init_1 = function () {%0A                emit(wrapEvent({%0A                    type: EventType.Meta,%0A                    data: {%0A                        href: window.location.href,%0A                        width: getWindowWidth(),%0A                        height: getWindowHeight()%0A                    }%0A                }));%0A                var _a = snapshot(document), node = _a[0], idNodeMap = _a[1];%0A                if (!node) {%0A                    return console.warn('Failed to snapshot the document');%0A                }%0A                mirror.map = idNodeMap;%0A                emit(wrapEvent({%0A                    type: EventType.FullSnapshot,%0A                    data: {%0A                        node: node,%0A                        initialOffset: {%0A                            left: document.documentElement.scrollLeft,%0A                            top: document.documentElement.scrollTop%0A                        }%0A                    }%0A                }));%0A                initObservers({%0A                    mutationCb: function (m) {%0A                        return emit(wrapEvent({%0A                            type: EventType.IncrementalSnapshot,%0A                            data: __assign({ source: IncrementalSource.Mutation }, m)%0A                        }));%0A                    },%0A                    mousemoveCb: function (positions) {%0A                        return emit(wrapEvent({%0A                            type: EventType.IncrementalSnapshot,%0A                            data: {%0A                                source: IncrementalSource.MouseMove,%0A                                positions: positions%0A                            }%0A                        }));%0A                    },%0A                    mouseInteractionCb: function (d) {%0A                        return emit(wrapEvent({%0A                            type: EventType.IncrementalSnapshot,%0A                            data: __assign({ source: IncrementalSource.MouseInteraction }, d)%0A                        }));%0A                    },%0A                    scrollCb: function (p) {%0A                        return emit(wrapEvent({%0A                            type: EventType.IncrementalSnapshot,%0A                            data: __assign({ source: IncrementalSource.Scroll }, p)%0A                        }));%0A                    },%0A                    viewportResizeCb: function (d) {%0A                        return emit(wrapEvent({%0A                            type: EventType.IncrementalSnapshot,%0A                            data: __assign({ source: IncrementalSource.ViewportResize }, d)%0A                        }));%0A                    },%0A                    inputCb: function (v) {%0A                        return emit(wrapEvent({%0A                            type: EventType.IncrementalSnapshot,%0A                            data: __assign({ source: IncrementalSource.Input }, v)%0A                        }));%0A                    }%0A                });%0A            };%0A            if (document.readyState === 'interactive' ||%0A                document.readyState === 'complete') {%0A                init_1();%0A            }%0A            else {%0A                on('load', function () {%0A                    emit(wrapEvent({%0A                        type: EventType.Load,%0A                        data: {}%0A                    }));%0A                    init_1();%0A                }, window);%0A            }%0A        }%0A        catch (error) {%0A            console.warn(error);%0A        }%0A    }%0A%0A    return record;%0A%0A}());%0A%0A      window.Date.now = () => new Date(Date.UTC(2018, 10, 15, 8)).valueOf();%0A      window.snapshots = [];%0A      record({%0A        emit: event => {%0A          console.log(event);%0A          window.snapshots.push(event);%0A        }%0A      });%0A    </script>%0A    </body>%0A    %0A</html>\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
     },
     \\"timestamp\\": 1542268800000
   },
@@ -1745,7 +1745,7 @@ exports[`select2 1`] = `
       \\"type\\": 1,
       \\"id\\": 26,
       \\"x\\": 31,
-      \\"y\\": 94
+      \\"y\\": 78
     },
     \\"timestamp\\": 1542268800000
   },
@@ -1774,7 +1774,7 @@ exports[`select2 1`] = `
           \\"id\\": 75,
           \\"attributes\\": {
             \\"id\\": \\"select2-drop\\",
-            \\"style\\": \\"left: 8px; width: 47.5625px; top: 108px; bottom: auto; display: block;\\",
+            \\"style\\": \\"left: 8px; width: 47.5625px; top: 92px; bottom: auto; display: block;\\",
             \\"class\\": \\"select2-drop select2-display-none select2-with-searchbox select2-drop-active\\"
           }
         },
@@ -1932,7 +1932,7 @@ exports[`select2 1`] = `
             \\"attributes\\": {
               \\"class\\": \\"select2-drop select2-display-none select2-with-searchbox select2-drop-active\\",
               \\"id\\": \\"select2-drop\\",
-              \\"style\\": \\"left: 8px; width: 47.5625px; top: 108px; bottom: auto; display: block;\\"
+              \\"style\\": \\"left: 8px; width: 47.5625px; top: 92px; bottom: auto; display: block;\\"
             },
             \\"childNodes\\": [],
             \\"id\\": 75
@@ -2203,7 +2203,7 @@ exports[`select2 1`] = `
       \\"type\\": 0,
       \\"id\\": 93,
       \\"x\\": 31,
-      \\"y\\": 94
+      \\"y\\": 78
     },
     \\"timestamp\\": 1542268800000
   },
@@ -2234,7 +2234,7 @@ exports[`select2 1`] = `
       \\"type\\": 1,
       \\"id\\": 93,
       \\"x\\": 31,
-      \\"y\\": 94
+      \\"y\\": 78
     },
     \\"timestamp\\": 1542268800000
   },
@@ -2272,7 +2272,7 @@ exports[`select2 1`] = `
           \\"id\\": 75,
           \\"attributes\\": {
             \\"id\\": null,
-            \\"style\\": \\"left: 8px; width: 47.5625px; top: 108px; bottom: auto; display: none;\\"
+            \\"style\\": \\"left: 8px; width: 47.5625px; top: 92px; bottom: auto; display: none;\\"
           }
         },
         {
@@ -2336,7 +2336,7 @@ exports[`select2 1`] = `
       \\"type\\": 0,
       \\"id\\": 67,
       \\"x\\": 31,
-      \\"y\\": 94
+      \\"y\\": 78
     },
     \\"timestamp\\": 1542268800000
   }
diff --git a/test/integration.ts b/test/integration.ts
index e6421513..ffaebad0 100644
--- a/test/integration.ts
+++ b/test/integration.ts
@@ -65,8 +65,12 @@ describe('record integration tests', () => {
 
   before(async () => {
     this.browser = await puppeteer.launch({
-      // headless: false,
-      executablePath: '/home/yanzhen/Desktop/chrome-linux/chrome',
+      defaultViewport: {
+        width: 1920,
+        height: 1080,
+      },
+      headless: false,
+      args: ['--no-sandbox'],
     });
 
     const bundle = await rollup.rollup({
@@ -192,5 +196,5 @@ describe('record integration tests', () => {
       'select2',
     );
     assert(result.pass, result.pass ? '' : result.report());
-  }).timeout(5000);
+  }).timeout(10000);
 });
