diff --git a/packages/rrdom/src/diff.ts b/packages/rrdom/src/diff.ts index f0896088..8456dd33 100644 --- a/packages/rrdom/src/diff.ts +++ b/packages/rrdom/src/diff.ts @@ -272,37 +272,57 @@ function diffChildren( let oldIdToIndex: Record | undefined = undefined, indexInOld; while (oldStartIndex <= oldEndIndex && newStartIndex <= newEndIndex) { + const oldStartId = replayer.mirror.getId(oldStartNode); + const oldEndId = replayer.mirror.getId(oldEndNode); + const newStartId = rrnodeMirror.getId(newStartNode); + const newEndId = rrnodeMirror.getId(newEndNode); + + // rrdom contains elements with negative ids, we don't want to accidentally match those to a mirror mismatch (-1) id. + // Negative oldStartId happen when nodes are not in the mirror, but are in the DOM. + // eg.iframes come with a document, html, head and body nodes. + // thats why below we always check if an id is negative. + if (oldStartNode === undefined) { oldStartNode = oldChildren[++oldStartIndex]; } else if (oldEndNode === undefined) { oldEndNode = oldChildren[--oldEndIndex]; } else if ( - replayer.mirror.getId(oldStartNode) === rrnodeMirror.getId(newStartNode) + oldStartId !== -1 && + // same first element? + oldStartId === newStartId ) { diff(oldStartNode, newStartNode, replayer, rrnodeMirror); oldStartNode = oldChildren[++oldStartIndex]; newStartNode = newChildren[++newStartIndex]; } else if ( - replayer.mirror.getId(oldEndNode) === rrnodeMirror.getId(newEndNode) + oldEndId !== -1 && + // same last element? + oldEndId === newEndId ) { diff(oldEndNode, newEndNode, replayer, rrnodeMirror); oldEndNode = oldChildren[--oldEndIndex]; newEndNode = newChildren[--newEndIndex]; } else if ( - replayer.mirror.getId(oldStartNode) === rrnodeMirror.getId(newEndNode) + oldStartId !== -1 && + // is the first old element the same as the last new element? + oldStartId === newEndId ) { parentNode.insertBefore(oldStartNode, oldEndNode.nextSibling); diff(oldStartNode, newEndNode, replayer, rrnodeMirror); oldStartNode = oldChildren[++oldStartIndex]; newEndNode = newChildren[--newEndIndex]; } else if ( - replayer.mirror.getId(oldEndNode) === rrnodeMirror.getId(newStartNode) + oldEndId !== -1 && + // is the last old element the same as the first new element? + oldEndId === newStartId ) { parentNode.insertBefore(oldEndNode, oldStartNode); diff(oldEndNode, newStartNode, replayer, rrnodeMirror); oldEndNode = oldChildren[--oldEndIndex]; newStartNode = newChildren[++newStartIndex]; } else { + // none of the elements matched + if (!oldIdToIndex) { oldIdToIndex = {}; for (let i = oldStartIndex; i <= oldEndIndex; i++) { @@ -378,8 +398,11 @@ export function createOrGetNode( domMirror: NodeMirror, rrnodeMirror: Mirror, ): Node { - let node = domMirror.getNode(rrnodeMirror.getId(rrNode)); + const nodeId = rrnodeMirror.getId(rrNode); const sn = rrnodeMirror.getMeta(rrNode); + let node: Node | null = null; + // negative ids shouldn't be compared accross mirrors + if (nodeId > -1) node = domMirror.getNode(nodeId); if (node !== null) return node; switch (rrNode.RRNodeType) { case RRNodeType.Document: diff --git a/packages/rrdom/src/index.ts b/packages/rrdom/src/index.ts index 16da3ed8..0caefa8d 100644 --- a/packages/rrdom/src/index.ts +++ b/packages/rrdom/src/index.ts @@ -33,10 +33,11 @@ import { } from './document'; export class RRDocument extends BaseRRDocumentImpl(RRNode) { + private UNSERIALIZED_STARTING_ID = -2; // In the rrweb replayer, there are some unserialized nodes like the element that stores the injected style rules. // These unserialized nodes may interfere the execution of the diff algorithm. // The id of serialized node is larger than 0. So this value less than 0 is used as id for these unserialized nodes. - private _unserializedId = -1; + private _unserializedId = this.UNSERIALIZED_STARTING_ID; /** * Every time the id is used, it will minus 1 automatically to avoid collisions. @@ -135,7 +136,7 @@ export class RRDocument extends BaseRRDocumentImpl(RRNode) { open() { super.open(); - this._unserializedId = -1; + this._unserializedId = this.UNSERIALIZED_STARTING_ID; } } diff --git a/packages/rrdom/test/__snapshots__/virtual-dom.test.ts.snap b/packages/rrdom/test/__snapshots__/virtual-dom.test.ts.snap index c1dc0024..2286457a 100644 --- a/packages/rrdom/test/__snapshots__/virtual-dom.test.ts.snap +++ b/packages/rrdom/test/__snapshots__/virtual-dom.test.ts.snap @@ -1,118 +1,118 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`RRDocument for browser environment create a RRDocument from a html document can build from a common html 1`] = ` -"-1 RRDocument - -2 RRDocumentType - -3 HTML lang=\\"en\\" - -4 HEAD - -5 RRText text=\\"\\\\n \\" - -6 META charset=\\"UTF-8\\" - -7 RRText text=\\"\\\\n \\" - -8 META name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" - -9 RRText text=\\"\\\\n \\" - -10 TITLE - -11 RRText text=\\"Main\\" - -12 RRText text=\\"\\\\n \\" - -13 LINK rel=\\"stylesheet\\" href=\\"somelink\\" - -14 RRText text=\\"\\\\n \\" - -15 STYLE - -16 RRText text=\\"\\\\n h1 {\\\\n color: 'black';\\\\n }\\\\n .blocks {\\\\n padding: 0;\\\\n }\\\\n .blocks1 {\\\\n margin: 0;\\\\n }\\\\n #block1 {\\\\n width: 100px;\\\\n height: 200px;\\\\n }\\\\n @import url('main.css');\\\\n \\" - -17 RRText text=\\"\\\\n \\" - -18 RRText text=\\"\\\\n \\" - -19 BODY - -20 RRText text=\\"\\\\n \\" - -21 H1 - -22 RRText text=\\"This is a h1 heading\\" - -23 RRText text=\\"\\\\n \\" - -24 H1 style=\\"font-size: 16px\\" - -25 RRText text=\\"This is a h1 heading with styles\\" - -26 RRText text=\\"\\\\n \\" - -27 DIV id=\\"block1\\" class=\\"blocks blocks1\\" - -28 RRText text=\\"\\\\n \\" - -29 DIV id=\\"block2\\" class=\\"blocks blocks1 :hover\\" - -30 RRText text=\\"\\\\n Text 1\\\\n \\" - -31 DIV id=\\"block3\\" - -32 RRText text=\\"\\\\n \\" - -33 P - -34 RRText text=\\"This is a paragraph\\" - -35 RRText text=\\"\\\\n \\" - -36 BUTTON - -37 RRText text=\\"button1\\" - -38 RRText text=\\"\\\\n \\" - -39 RRText text=\\"\\\\n Text 2\\\\n \\" - -40 RRText text=\\"\\\\n \\" - -41 IMG src=\\"somelink\\" alt=\\"This is an image\\" - -42 RRText text=\\"\\\\n \\" - -43 RRComment text=\\" This is a line of comment \\" - -44 RRText text=\\"\\\\n \\" - -45 FORM - -46 RRText text=\\"\\\\n \\" - -47 INPUT type=\\"text\\" id=\\"input1\\" - -48 RRText text=\\"\\\\n \\" - -49 RRText text=\\"\\\\n \\" - -50 RRText text=\\"\\\\n \\\\n\\\\n\\" +"-2 RRDocument + -3 RRDocumentType + -4 HTML lang=\\"en\\" + -5 HEAD + -6 RRText text=\\"\\\\n \\" + -7 META charset=\\"UTF-8\\" + -8 RRText text=\\"\\\\n \\" + -9 META name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" + -10 RRText text=\\"\\\\n \\" + -11 TITLE + -12 RRText text=\\"Main\\" + -13 RRText text=\\"\\\\n \\" + -14 LINK rel=\\"stylesheet\\" href=\\"somelink\\" + -15 RRText text=\\"\\\\n \\" + -16 STYLE + -17 RRText text=\\"\\\\n h1 {\\\\n color: 'black';\\\\n }\\\\n .blocks {\\\\n padding: 0;\\\\n }\\\\n .blocks1 {\\\\n margin: 0;\\\\n }\\\\n #block1 {\\\\n width: 100px;\\\\n height: 200px;\\\\n }\\\\n @import url('main.css');\\\\n \\" + -18 RRText text=\\"\\\\n \\" + -19 RRText text=\\"\\\\n \\" + -20 BODY + -21 RRText text=\\"\\\\n \\" + -22 H1 + -23 RRText text=\\"This is a h1 heading\\" + -24 RRText text=\\"\\\\n \\" + -25 H1 style=\\"font-size: 16px\\" + -26 RRText text=\\"This is a h1 heading with styles\\" + -27 RRText text=\\"\\\\n \\" + -28 DIV id=\\"block1\\" class=\\"blocks blocks1\\" + -29 RRText text=\\"\\\\n \\" + -30 DIV id=\\"block2\\" class=\\"blocks blocks1 :hover\\" + -31 RRText text=\\"\\\\n Text 1\\\\n \\" + -32 DIV id=\\"block3\\" + -33 RRText text=\\"\\\\n \\" + -34 P + -35 RRText text=\\"This is a paragraph\\" + -36 RRText text=\\"\\\\n \\" + -37 BUTTON + -38 RRText text=\\"button1\\" + -39 RRText text=\\"\\\\n \\" + -40 RRText text=\\"\\\\n Text 2\\\\n \\" + -41 RRText text=\\"\\\\n \\" + -42 IMG src=\\"somelink\\" alt=\\"This is an image\\" + -43 RRText text=\\"\\\\n \\" + -44 RRComment text=\\" This is a line of comment \\" + -45 RRText text=\\"\\\\n \\" + -46 FORM + -47 RRText text=\\"\\\\n \\" + -48 INPUT type=\\"text\\" id=\\"input1\\" + -49 RRText text=\\"\\\\n \\" + -50 RRText text=\\"\\\\n \\" + -51 RRText text=\\"\\\\n \\\\n\\\\n\\" " `; exports[`RRDocument for browser environment create a RRDocument from a html document can build from a html containing nested shadow doms 1`] = ` -"-1 RRDocument - -2 RRDocumentType - -3 HTML lang=\\"en\\" - -4 HEAD - -5 RRText text=\\"\\\\n \\" - -6 META charset=\\"UTF-8\\" - -7 RRText text=\\"\\\\n \\" - -8 META name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" - -9 RRText text=\\"\\\\n \\" - -10 TITLE - -11 RRText text=\\"shadow dom\\" - -12 RRText text=\\"\\\\n \\" - -13 RRText text=\\"\\\\n \\" - -14 BODY - -15 RRText text=\\"\\\\n \\" - -16 DIV - -17 SHADOWROOT - -18 RRText text=\\"\\\\n \\" - -19 SPAN - -20 RRText text=\\" shadow dom one \\" - -21 RRText text=\\"\\\\n \\" - -22 DIV - -23 SHADOWROOT - -24 RRText text=\\"\\\\n \\" - -25 SPAN - -26 RRText text=\\" shadow dom two \\" - -27 RRText text=\\"\\\\n \\" - -28 RRText text=\\"\\\\n \\\\n \\" - -29 RRText text=\\"\\\\n \\" - -30 RRText text=\\"\\\\n \\\\n \\" - -31 RRText text=\\"\\\\n \\\\n\\\\n\\" +"-2 RRDocument + -3 RRDocumentType + -4 HTML lang=\\"en\\" + -5 HEAD + -6 RRText text=\\"\\\\n \\" + -7 META charset=\\"UTF-8\\" + -8 RRText text=\\"\\\\n \\" + -9 META name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" + -10 RRText text=\\"\\\\n \\" + -11 TITLE + -12 RRText text=\\"shadow dom\\" + -13 RRText text=\\"\\\\n \\" + -14 RRText text=\\"\\\\n \\" + -15 BODY + -16 RRText text=\\"\\\\n \\" + -17 DIV + -18 SHADOWROOT + -19 RRText text=\\"\\\\n \\" + -20 SPAN + -21 RRText text=\\" shadow dom one \\" + -22 RRText text=\\"\\\\n \\" + -23 DIV + -24 SHADOWROOT + -25 RRText text=\\"\\\\n \\" + -26 SPAN + -27 RRText text=\\" shadow dom two \\" + -28 RRText text=\\"\\\\n \\" + -29 RRText text=\\"\\\\n \\\\n \\" + -30 RRText text=\\"\\\\n \\" + -31 RRText text=\\"\\\\n \\\\n \\" + -32 RRText text=\\"\\\\n \\\\n\\\\n\\" " `; exports[`RRDocument for browser environment create a RRDocument from a html document can build from a xml page 1`] = ` -"-1 RRDocument - -2 XML - -3 RRCDATASection data=\\"Some data & then some\\" +"-2 RRDocument + -3 XML + -4 RRCDATASection data=\\"Some data & then some\\" " `; exports[`RRDocument for browser environment create a RRDocument from a html document can build from an iframe html 1`] = ` -"-1 RRDocument - -2 RRDocumentType - -3 HTML lang=\\"en\\" - -4 HEAD - -5 RRText text=\\"\\\\n \\" - -6 META charset=\\"UTF-8\\" - -7 RRText text=\\"\\\\n \\" - -8 META name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" - -9 RRText text=\\"\\\\n \\" - -10 TITLE - -11 RRText text=\\"Iframe\\" - -12 RRText text=\\"\\\\n \\" - -13 RRText text=\\"\\\\n \\" - -14 BODY - -15 RRText text=\\"\\\\n \\" - -16 IFRAME id=\\"iframe1\\" srcdoc=\\" +"-2 RRDocument + -3 RRDocumentType + -4 HTML lang=\\"en\\" + -5 HEAD + -6 RRText text=\\"\\\\n \\" + -7 META charset=\\"UTF-8\\" + -8 RRText text=\\"\\\\n \\" + -9 META name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" + -10 RRText text=\\"\\\\n \\" + -11 TITLE + -12 RRText text=\\"Iframe\\" + -13 RRText text=\\"\\\\n \\" + -14 RRText text=\\"\\\\n \\" + -15 BODY + -16 RRText text=\\"\\\\n \\" + -17 IFRAME id=\\"iframe1\\" srcdoc=\\" @@ -126,35 +126,35 @@ exports[`RRDocument for browser environment create a RRDocument from a html docu '); + + const iframe = document.querySelector('iframe')!; + // Remove everthing from the iframe but the root html element + // `buildNodeWithSn` injects docType elements to trigger compatMode in iframes + iframe.contentDocument!.write( + '', + ); + + replayer.mirror.add(iframe.contentDocument!, { + id: 1, + type: 0, + childNodes: [ + { + id: 2, + rootId: 1, + type: 2, + tagName: 'html', + childNodes: [], + attributes: {}, + }, + ], + } as serializedNodeWithId); + replayer.mirror.add(iframe.contentDocument!.childNodes[0], { + id: 2, + rootId: 1, + type: 2, + tagName: 'html', + childNodes: [], + attributes: {}, + } as serializedNodeWithId); + + const rrDocument = new RRDocument(); + rrDocument.mirror.add(rrDocument, getDefaultSN(rrDocument, 1)); + const docType = rrDocument.createDocumentType('html', '', ''); + rrDocument.mirror.add(docType, getDefaultSN(docType, 2)); + rrDocument.appendChild(docType); + const htmlEl = rrDocument.createElement('html'); + rrDocument.mirror.add(htmlEl, getDefaultSN(htmlEl, 3)); + rrDocument.appendChild(htmlEl); + const styleEl = rrDocument.createElement('style'); + rrDocument.mirror.add(styleEl, getDefaultSN(styleEl, 4)); + htmlEl.appendChild(styleEl); + const headEl = rrDocument.createElement('head'); + rrDocument.mirror.add(headEl, getDefaultSN(headEl, 5)); + htmlEl.appendChild(headEl); + const bodyEl = rrDocument.createElement('body'); + rrDocument.mirror.add(bodyEl, getDefaultSN(bodyEl, 6)); + htmlEl.appendChild(bodyEl); + + diff(iframe.contentDocument!, rrDocument, replayer); + expect(iframe.contentDocument!.childNodes.length).toBe(2); + const element = iframe.contentDocument!.childNodes[0] as HTMLElement; + expect(element.nodeType).toBe(element.DOCUMENT_TYPE_NODE); + expect(mirror.getId(element)).toEqual(2); + }); + + it('should remove children from document before adding new nodes 3', () => { + document.write(''); + + const iframeInDom = document.querySelector('iframe')!; + + replayer.mirror.add(iframeInDom, { + id: 3, + type: 2, + rootId: 1, + tagName: 'iframe', + childNodes: [], + attributes: {}, + } as serializedNodeWithId); + replayer.mirror.add(iframeInDom.contentDocument!, { + id: 4, + type: 0, + childNodes: [], + } as serializedNodeWithId); + + const rrDocument = new RRDocument(); + + const rrIframeEl = rrDocument.createElement('iframe'); + rrDocument.mirror.add(rrIframeEl, getDefaultSN(rrIframeEl, 3)); + rrDocument.appendChild(rrIframeEl); + rrDocument.mirror.add( + rrIframeEl.contentDocument!, + getDefaultSN(rrIframeEl.contentDocument!, 4), + ); + + const rrDocType = rrDocument.createDocumentType('html', '', ''); + rrIframeEl.contentDocument.appendChild(rrDocType); + const rrHtmlEl = rrDocument.createElement('html'); + rrDocument.mirror.add(rrHtmlEl, getDefaultSN(rrHtmlEl, 6)); + rrIframeEl.contentDocument.appendChild(rrHtmlEl); + const rrHeadEl = rrDocument.createElement('head'); + rrDocument.mirror.add(rrHeadEl, getDefaultSN(rrHeadEl, 8)); + rrHtmlEl.appendChild(rrHeadEl); + const bodyEl = rrDocument.createElement('body'); + rrDocument.mirror.add(bodyEl, getDefaultSN(bodyEl, 9)); + rrHtmlEl.appendChild(bodyEl); + + diff(iframeInDom, rrIframeEl, replayer); + expect(iframeInDom.contentDocument!.childNodes.length).toBe(2); + const element = iframeInDom.contentDocument!.childNodes[0] as HTMLElement; + expect(element.nodeType).toBe(element.DOCUMENT_TYPE_NODE); + expect(mirror.getId(element)).toEqual(-1); + }); }); describe('create or get a Node', () => { diff --git a/packages/rrdom/test/virtual-dom.test.ts b/packages/rrdom/test/virtual-dom.test.ts index b99a3432..57aed3e7 100644 --- a/packages/rrdom/test/virtual-dom.test.ts +++ b/packages/rrdom/test/virtual-dom.test.ts @@ -78,24 +78,24 @@ describe('RRDocument for browser environment', () => { const rrdom = new RRDocument(); let rrNode = buildFromNode(document, rrdom, mirror)!; expect(mirror.getMeta(document)).toBeDefined(); - expect(mirror.getId(document)).toEqual(-1); + expect(mirror.getId(document)).toEqual(-2); expect(rrNode).not.toBeNull(); expect(rrdom.mirror.getMeta(rrNode)).toBeDefined(); expect(rrdom.mirror.getMeta(rrNode)!.type).toEqual(RRNodeType.Document); - expect(rrdom.mirror.getId(rrNode)).toEqual(-1); + expect(rrdom.mirror.getId(rrNode)).toEqual(-2); expect(rrNode).toBe(rrdom); // build from document type expect(mirror.getMeta(document.doctype!)).toBeNull(); rrNode = buildFromNode(document.doctype!, rrdom, mirror)!; expect(mirror.getMeta(document.doctype!)).toBeDefined(); - expect(mirror.getId(document.doctype)).toEqual(-2); + expect(mirror.getId(document.doctype)).toEqual(-3); expect(rrNode).not.toBeNull(); expect(rrdom.mirror.getMeta(rrNode)).toBeDefined(); expect(rrdom.mirror.getMeta(rrNode)!.type).toEqual( RRNodeType.DocumentType, ); - expect(rrdom.mirror.getId(rrNode)).toEqual(-2); + expect(rrdom.mirror.getId(rrNode)).toEqual(-3); // build from element expect(mirror.getMeta(document.documentElement)).toBeNull(); @@ -105,33 +105,33 @@ describe('RRDocument for browser environment', () => { mirror, )!; expect(mirror.getMeta(document.documentElement)).toBeDefined(); - expect(mirror.getId(document.documentElement)).toEqual(-3); + expect(mirror.getId(document.documentElement)).toEqual(-4); expect(rrNode).not.toBeNull(); expect(rrdom.mirror.getMeta(rrNode)).toBeDefined(); expect(rrdom.mirror.getMeta(rrNode)!.type).toEqual(RRNodeType.Element); - expect(rrdom.mirror.getId(rrNode)).toEqual(-3); + expect(rrdom.mirror.getId(rrNode)).toEqual(-4); // build from text const text = document.createTextNode('text'); expect(mirror.getMeta(text)).toBeNull(); rrNode = buildFromNode(text, rrdom, mirror)!; expect(mirror.getMeta(text)).toBeDefined(); - expect(mirror.getId(text)).toEqual(-4); + expect(mirror.getId(text)).toEqual(-5); expect(rrNode).not.toBeNull(); expect(rrdom.mirror.getMeta(rrNode)).toBeDefined(); expect(rrdom.mirror.getMeta(rrNode)!.type).toEqual(RRNodeType.Text); - expect(rrdom.mirror.getId(rrNode)).toEqual(-4); + expect(rrdom.mirror.getId(rrNode)).toEqual(-5); // build from comment const comment = document.createComment('comment'); expect(mirror.getMeta(comment)).toBeNull(); rrNode = buildFromNode(comment, rrdom, mirror)!; expect(mirror.getMeta(comment)).toBeDefined(); - expect(mirror.getId(comment)).toEqual(-5); + expect(mirror.getId(comment)).toEqual(-6); expect(rrNode).not.toBeNull(); expect(rrdom.mirror.getMeta(rrNode)).toBeDefined(); expect(rrdom.mirror.getMeta(rrNode)!.type).toEqual(RRNodeType.Comment); - expect(rrdom.mirror.getId(rrNode)).toEqual(-5); + expect(rrdom.mirror.getId(rrNode)).toEqual(-6); // build from CDATASection const xmlDoc = new DOMParser().parseFromString( @@ -144,11 +144,11 @@ describe('RRDocument for browser environment', () => { expect(mirror.getMeta(cdataSection)).toBeNull(); rrNode = buildFromNode(cdataSection, rrdom, mirror)!; expect(mirror.getMeta(cdataSection)).toBeDefined(); - expect(mirror.getId(cdataSection)).toEqual(-6); + expect(mirror.getId(cdataSection)).toEqual(-7); expect(rrNode).not.toBeNull(); expect(rrdom.mirror.getMeta(rrNode)).toBeDefined(); expect(rrdom.mirror.getMeta(rrNode)!.type).toEqual(RRNodeType.CDATA); - expect(rrdom.mirror.getId(rrNode)).toEqual(-6); + expect(rrdom.mirror.getId(rrNode)).toEqual(-7); expect(rrNode.textContent).toEqual(cdata); }); @@ -184,8 +184,8 @@ describe('RRDocument for browser environment', () => { expect(rrNode).not.toBeNull(); expect(rrdom.mirror.getMeta(rrNode)).toBeDefined(); expect(rrdom.mirror.getMeta(rrNode)!.type).toEqual(RRNodeType.Document); - expect(rrdom.mirror.getId(rrNode)).toEqual(-1); - expect(mirror.getId(iframe.contentDocument)).toEqual(-1); + expect(rrdom.mirror.getId(rrNode)).toEqual(-2); + expect(mirror.getId(iframe.contentDocument)).toEqual(-2); expect(rrNode).toBe(RRIFrame.contentDocument); }); @@ -203,8 +203,8 @@ describe('RRDocument for browser environment', () => { )!; expect(rrNode).not.toBeNull(); expect(rrdom.mirror.getMeta(rrNode)).toBeDefined(); - expect(rrdom.mirror.getId(rrNode)).toEqual(-1); - expect(mirror.getId(div.shadowRoot)).toEqual(-1); + expect(rrdom.mirror.getId(rrNode)).toEqual(-2); + expect(mirror.getId(div.shadowRoot)).toEqual(-2); expect(rrNode.RRNodeType).toEqual(RRNodeType.Element); expect((rrNode as RRElement).tagName).toEqual('SHADOWROOT'); expect(rrNode).toBe(parentRRNode.shadowRoot); @@ -296,7 +296,7 @@ describe('RRDocument for browser environment', () => { describe('RRDocument build for virtual dom', () => { it('can access a unique, decremented unserializedId every time', () => { const node = new RRDocument(); - for (let i = 1; i <= 100; i++) expect(node.unserializedId).toBe(-i); + for (let i = 2; i <= 100; i++) expect(node.unserializedId).toBe(-i); }); it('can create a new RRDocument', () => { @@ -357,12 +357,12 @@ describe('RRDocument for browser environment', () => { const documentType = dom.createDocumentType('html', '', ''); dom.appendChild(documentType); expect(dom.childNodes[0]).toBe(documentType); - expect(dom.unserializedId).toBe(-1); expect(dom.unserializedId).toBe(-2); + expect(dom.unserializedId).toBe(-3); expect(dom.close()); expect(dom.open()); expect(dom.childNodes.length).toEqual(0); - expect(dom.unserializedId).toBe(-1); + expect(dom.unserializedId).toBe(-2); }); it('can execute a dummy getContext function in RRCanvasElement', () => { diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts index a61f650a..38df3b69 100644 --- a/packages/rrweb-snapshot/src/snapshot.ts +++ b/packages/rrweb-snapshot/src/snapshot.ts @@ -388,7 +388,8 @@ function onceIframeLoaded( // iframe was already loaded, make sure we wait to trigger the listener // till _after_ the mutation that found this iframe has had time to process setTimeout(listener, 0); - return; + + return iframeEl.addEventListener('load', listener); // keep listing for future loads } // use default listener iframeEl.addEventListener('load', listener); diff --git a/packages/rrweb-snapshot/test/html/picture-blob-in-frame.html b/packages/rrweb-snapshot/test/html/picture-blob-in-frame.html new file mode 100644 index 00000000..f6237f22 --- /dev/null +++ b/packages/rrweb-snapshot/test/html/picture-blob-in-frame.html @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/rrweb-snapshot/test/html/picture-blob.html b/packages/rrweb-snapshot/test/html/picture-blob.html new file mode 100644 index 00000000..d2a32658 --- /dev/null +++ b/packages/rrweb-snapshot/test/html/picture-blob.html @@ -0,0 +1,16 @@ + + + This is a robot + + + diff --git a/packages/rrweb-snapshot/test/html/picture-in-frame.html b/packages/rrweb-snapshot/test/html/picture-in-frame.html new file mode 100644 index 00000000..31684d2c --- /dev/null +++ b/packages/rrweb-snapshot/test/html/picture-in-frame.html @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/rrweb-snapshot/test/integration.test.ts b/packages/rrweb-snapshot/test/integration.test.ts index cba669c1..6ee32f94 100644 --- a/packages/rrweb-snapshot/test/integration.test.ts +++ b/packages/rrweb-snapshot/test/integration.test.ts @@ -6,6 +6,7 @@ import * as puppeteer from 'puppeteer'; import * as rollup from 'rollup'; import * as typescript from 'rollup-plugin-typescript2'; import * as assert from 'assert'; +import { waitForRAF } from './utils'; const _typescript = (typescript as unknown) as () => rollup.Plugin; @@ -207,6 +208,74 @@ iframe.contentDocument.querySelector('center').clientHeight assert(snapshot.includes('"rr_dataURL"')); assert(snapshot.includes('data:image/webp;base64,')); }); + + it('correctly saves blob:images offline', async () => { + const page: puppeteer.Page = await browser.newPage(); + + await page.goto('http://localhost:3030/html/picture-blob.html', { + waitUntil: 'load', + }); + await page.waitForSelector('img', { timeout: 1000 }); + await page.evaluate(`${code}var snapshot = rrweb.snapshot(document, { + dataURLOptions: { type: "image/webp", quality: 0.8 }, + inlineImages: true, + inlineStylesheet: false + })`); + await page.waitFor(100); + const snapshot = await page.evaluate('JSON.stringify(snapshot, null, 2);'); + assert(snapshot.includes('"rr_dataURL"')); + assert(snapshot.includes('data:image/webp;base64,')); + }); + + it('correctly saves images in iframes offline', async () => { + const page: puppeteer.Page = await browser.newPage(); + + await page.goto('http://localhost:3030/html/picture-in-frame.html', { + waitUntil: 'load', + }); + await page.waitForSelector('iframe', { timeout: 1000 }); + await waitForRAF(page); // wait for page to render + await page.evaluate(`${code} + rrweb.snapshot(document, { + dataURLOptions: { type: "image/webp", quality: 0.8 }, + inlineImages: true, + inlineStylesheet: false, + onIframeLoad: function(iframe, sn) { + window.snapshot = sn; + } + })`); + await page.waitFor(100); + const snapshot = await page.evaluate( + 'JSON.stringify(window.snapshot, null, 2);', + ); + assert(snapshot.includes('"rr_dataURL"')); + assert(snapshot.includes('data:image/webp;base64,')); + }); + + it('correctly saves blob:images in iframes offline', async () => { + const page: puppeteer.Page = await browser.newPage(); + + await page.goto('http://localhost:3030/html/picture-blob-in-frame.html', { + waitUntil: 'load', + }); + await page.waitForSelector('iframe', { timeout: 1000 }); + await waitForRAF(page); // wait for page to render + await page.evaluate(`${code} + rrweb.snapshot(document, { + dataURLOptions: { type: "image/webp", quality: 0.8 }, + inlineImages: true, + inlineStylesheet: false, + onIframeLoad: function(iframe, sn) { + window.snapshot = sn; + } + })`); + await page.waitFor(100); + const snapshot = await page.evaluate( + 'JSON.stringify(window.snapshot, null, 2);', + ); + assert(snapshot.includes('"rr_dataURL"')); + assert(snapshot.includes('data:image/webp;base64,')); + }); }); describe('iframe integration tests', function (this: ISuite) { diff --git a/packages/rrweb-snapshot/test/utils.ts b/packages/rrweb-snapshot/test/utils.ts new file mode 100644 index 00000000..43d4484b --- /dev/null +++ b/packages/rrweb-snapshot/test/utils.ts @@ -0,0 +1,11 @@ +import * as puppeteer from 'puppeteer'; + +export async function waitForRAF(page: puppeteer.Page) { + return await page.evaluate(() => { + return new Promise((resolve) => { + requestAnimationFrame(() => { + requestAnimationFrame(resolve); + }); + }); + }); +} diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts index a7b513c2..756c21c5 100644 --- a/packages/rrweb/src/record/index.ts +++ b/packages/rrweb/src/record/index.ts @@ -249,6 +249,7 @@ function record( iframeManager, stylesheetManager, canvasManager, + keepIframeSrcFn, }, mirror, }); @@ -455,6 +456,7 @@ function record( doc, maskInputFn, maskTextFn, + keepIframeSrcFn, blockSelector, slimDOMOptions, mirror, diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts index 425445cd..df3b3017 100644 --- a/packages/rrweb/src/record/mutation.ts +++ b/packages/rrweb/src/record/mutation.ts @@ -165,6 +165,7 @@ export default class MutationBuffer { private maskInputOptions: observerParam['maskInputOptions']; private maskTextFn: observerParam['maskTextFn']; private maskInputFn: observerParam['maskInputFn']; + private keepIframeSrcFn: observerParam['keepIframeSrcFn']; private recordCanvas: observerParam['recordCanvas']; private inlineImages: observerParam['inlineImages']; private slimDOMOptions: observerParam['slimDOMOptions']; @@ -186,6 +187,7 @@ export default class MutationBuffer { 'maskInputOptions', 'maskTextFn', 'maskInputFn', + 'keepIframeSrcFn', 'recordCanvas', 'inlineImages', 'slimDOMOptions', @@ -485,6 +487,19 @@ export default class MutationBuffer { let item: attributeCursor | undefined = this.attributes.find( (a) => a.node === m.target, ); + if ( + target.tagName === 'IFRAME' && + m.attributeName === 'src' && + !this.keepIframeSrcFn(value as string) + ) { + if (!(target as HTMLIFrameElement).contentDocument) { + // we can't record it directly as we can't see into it + // preserve the src attribute so a decision can be taken at replay time + m.attributeName = 'rr_src'; + } else { + return; + } + } if (!item) { item = { node: m.target, @@ -528,7 +543,7 @@ export default class MutationBuffer { // overwrite attribute if the mutations was triggered in same time item.attributes[m.attributeName!] = transformAttribute( this.doc, - (m.target as HTMLElement).tagName, + target.tagName, m.attributeName!, value!, ); diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts index 79ae5296..d9a14817 100644 --- a/packages/rrweb/src/types.ts +++ b/packages/rrweb/src/types.ts @@ -276,6 +276,7 @@ export type observerParam = { maskInputOptions: MaskInputOptions; maskInputFn?: MaskInputFn; maskTextFn?: MaskTextFn; + keepIframeSrcFn: KeepIframeSrcFn; inlineStylesheet: boolean; styleSheetRuleCb: styleSheetRuleCallback; styleDeclarationCb: styleDeclarationCallback; @@ -315,6 +316,7 @@ export type MutationBufferParam = Pick< | 'maskInputOptions' | 'maskTextFn' | 'maskInputFn' + | 'keepIframeSrcFn' | 'recordCanvas' | 'inlineImages' | 'slimDOMOptions' diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap index 53b82060..b25764af 100644 --- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap +++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap @@ -9096,6 +9096,1108 @@ exports[`record integration tests should record dynamic CSS changes 1`] = ` ]" `; +exports[`record integration tests should record images inside iframe with blob url 1`] = ` +"[ + { + \\"type\\": 0, + \\"data\\": {} + }, + { + \\"type\\": 1, + \\"data\\": {} + }, + { + \\"type\\": 4, + \\"data\\": { + \\"href\\": \\"about:blank\\", + \\"width\\": 1920, + \\"height\\": 1080 + } + }, + { + \\"type\\": 2, + \\"data\\": { + \\"node\\": { + \\"type\\": 0, + \\"childNodes\\": [ + { + \\"type\\": 1, + \\"name\\": \\"html\\", + \\"publicId\\": \\"\\", + \\"systemId\\": \\"\\", + \\"id\\": 2 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"html\\", + \\"attributes\\": { + \\"lang\\": \\"en\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"head\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 5 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"charset\\": \\"UTF-8\\" + }, + \\"childNodes\\": [], + \\"id\\": 6 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 7 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"name\\": \\"viewport\\", + \\"content\\": \\"width=device-width, initial-scale=1.0\\" + }, + \\"childNodes\\": [], + \\"id\\": 8 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 9 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"title\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"Frame with image\\", + \\"id\\": 11 + } + ], + \\"id\\": 10 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 12 + } + ], + \\"id\\": 4 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 13 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 15 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"iframe\\", + \\"attributes\\": { + \\"id\\": \\"four\\", + \\"frameborder\\": \\"0\\" + }, + \\"childNodes\\": [], + \\"id\\": 16 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n \\", + \\"id\\": 17 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", + \\"id\\": 19 + } + ], + \\"id\\": 18 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n \\\\n\\\\n\\", + \\"id\\": 20 + } + ], + \\"id\\": 14 + } + ], + \\"id\\": 3 + } + ], + \\"id\\": 1 + }, + \\"initialOffset\\": { + \\"left\\": 0, + \\"top\\": 0 + } + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"adds\\": [ + { + \\"parentId\\": 16, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 0, + \\"childNodes\\": [ + { + \\"type\\": 1, + \\"name\\": \\"html\\", + \\"publicId\\": \\"\\", + \\"systemId\\": \\"\\", + \\"rootId\\": 21, + \\"id\\": 22 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"html\\", + \\"attributes\\": { + \\"lang\\": \\"en\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"head\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"rootId\\": 21, + \\"id\\": 25 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"charset\\": \\"UTF-8\\" + }, + \\"childNodes\\": [], + \\"rootId\\": 21, + \\"id\\": 26 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"rootId\\": 21, + \\"id\\": 27 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"http-equiv\\": \\"X-UA-Compatible\\", + \\"content\\": \\"IE=edge\\" + }, + \\"childNodes\\": [], + \\"rootId\\": 21, + \\"id\\": 28 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"rootId\\": 21, + \\"id\\": 29 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"name\\": \\"viewport\\", + \\"content\\": \\"width=device-width, initial-scale=1.0\\" + }, + \\"childNodes\\": [], + \\"rootId\\": 21, + \\"id\\": 30 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"rootId\\": 21, + \\"id\\": 31 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"title\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"Image with blob:url\\", + \\"rootId\\": 21, + \\"id\\": 33 + } + ], + \\"rootId\\": 21, + \\"id\\": 32 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"rootId\\": 21, + \\"id\\": 34 + } + ], + \\"rootId\\": 21, + \\"id\\": 24 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"rootId\\": 21, + \\"id\\": 35 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"rootId\\": 21, + \\"id\\": 37 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", + \\"rootId\\": 21, + \\"id\\": 39 + } + ], + \\"rootId\\": 21, + \\"id\\": 38 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n\\\\n\\", + \\"rootId\\": 21, + \\"id\\": 40 + } + ], + \\"rootId\\": 21, + \\"id\\": 36 + } + ], + \\"rootId\\": 21, + \\"id\\": 23 + } + ], + \\"id\\": 21 + } + } + ], + \\"removes\\": [], + \\"texts\\": [], + \\"attributes\\": [], + \\"isAttachIframe\\": true + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [], + \\"removes\\": [], + \\"adds\\": [ + { + \\"parentId\\": 36, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"img\\", + \\"attributes\\": { + \\"src\\": \\"blob:http://localhost:3030/...\\", + \\"rr_dataURL\\": \\"data:image/png;base64,...\\" + }, + \\"childNodes\\": [], + \\"rootId\\": 21, + \\"id\\": 41 + } + } + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [ + { + \\"id\\": 41, + \\"attributes\\": { + \\"crossorigin\\": \\"anonymous\\" + } + } + ], + \\"removes\\": [], + \\"adds\\": [] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [ + { + \\"id\\": 41, + \\"attributes\\": { + \\"crossorigin\\": null + } + } + ], + \\"removes\\": [], + \\"adds\\": [] + } + } +]" +`; + +exports[`record integration tests should record images inside iframe with blob url after iframe was reloaded 1`] = ` +"[ + { + \\"type\\": 0, + \\"data\\": {} + }, + { + \\"type\\": 1, + \\"data\\": {} + }, + { + \\"type\\": 4, + \\"data\\": { + \\"href\\": \\"about:blank\\", + \\"width\\": 1920, + \\"height\\": 1080 + } + }, + { + \\"type\\": 2, + \\"data\\": { + \\"node\\": { + \\"type\\": 0, + \\"childNodes\\": [ + { + \\"type\\": 1, + \\"name\\": \\"html\\", + \\"publicId\\": \\"\\", + \\"systemId\\": \\"\\", + \\"id\\": 2 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"html\\", + \\"attributes\\": { + \\"lang\\": \\"en\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"head\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 5 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"charset\\": \\"UTF-8\\" + }, + \\"childNodes\\": [], + \\"id\\": 6 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 7 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"name\\": \\"viewport\\", + \\"content\\": \\"width=device-width, initial-scale=1.0\\" + }, + \\"childNodes\\": [], + \\"id\\": 8 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 9 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"title\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"Frame 2\\", + \\"id\\": 11 + } + ], + \\"id\\": 10 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 12 + } + ], + \\"id\\": 4 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 13 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n frame 2\\\\n \\\\n \\", + \\"id\\": 15 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", + \\"id\\": 17 + } + ], + \\"id\\": 16 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n \\\\n \\", + \\"id\\": 18 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", + \\"id\\": 20 + } + ], + \\"id\\": 19 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n\\\\n\\", + \\"id\\": 21 + } + ], + \\"id\\": 14 + } + ], + \\"id\\": 3 + } + ], + \\"id\\": 1 + }, + \\"initialOffset\\": { + \\"left\\": 0, + \\"top\\": 0 + } + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [], + \\"removes\\": [], + \\"adds\\": [ + { + \\"parentId\\": 14, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"iframe\\", + \\"attributes\\": { + \\"id\\": \\"five\\" + }, + \\"childNodes\\": [], + \\"id\\": 22 + } + } + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"adds\\": [ + { + \\"parentId\\": 22, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 0, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"html\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"head\\", + \\"attributes\\": {}, + \\"childNodes\\": [], + \\"rootId\\": 23, + \\"id\\": 25 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, + \\"childNodes\\": [], + \\"rootId\\": 23, + \\"id\\": 26 + } + ], + \\"rootId\\": 23, + \\"id\\": 24 + } + ], + \\"compatMode\\": \\"BackCompat\\", + \\"id\\": 23 + } + } + ], + \\"removes\\": [], + \\"texts\\": [], + \\"attributes\\": [], + \\"isAttachIframe\\": true + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"adds\\": [ + { + \\"parentId\\": 22, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 0, + \\"childNodes\\": [ + { + \\"type\\": 1, + \\"name\\": \\"html\\", + \\"publicId\\": \\"\\", + \\"systemId\\": \\"\\", + \\"rootId\\": 27, + \\"id\\": 28 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"html\\", + \\"attributes\\": { + \\"lang\\": \\"en\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"head\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"rootId\\": 27, + \\"id\\": 31 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"charset\\": \\"UTF-8\\" + }, + \\"childNodes\\": [], + \\"rootId\\": 27, + \\"id\\": 32 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"rootId\\": 27, + \\"id\\": 33 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"http-equiv\\": \\"X-UA-Compatible\\", + \\"content\\": \\"IE=edge\\" + }, + \\"childNodes\\": [], + \\"rootId\\": 27, + \\"id\\": 34 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"rootId\\": 27, + \\"id\\": 35 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"name\\": \\"viewport\\", + \\"content\\": \\"width=device-width, initial-scale=1.0\\" + }, + \\"childNodes\\": [], + \\"rootId\\": 27, + \\"id\\": 36 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"rootId\\": 27, + \\"id\\": 37 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"title\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"Image with blob:url\\", + \\"rootId\\": 27, + \\"id\\": 39 + } + ], + \\"rootId\\": 27, + \\"id\\": 38 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"rootId\\": 27, + \\"id\\": 40 + } + ], + \\"rootId\\": 27, + \\"id\\": 30 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"rootId\\": 27, + \\"id\\": 41 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"rootId\\": 27, + \\"id\\": 43 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", + \\"rootId\\": 27, + \\"id\\": 45 + } + ], + \\"rootId\\": 27, + \\"id\\": 44 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n\\\\n\\", + \\"rootId\\": 27, + \\"id\\": 46 + } + ], + \\"rootId\\": 27, + \\"id\\": 42 + } + ], + \\"rootId\\": 27, + \\"id\\": 29 + } + ], + \\"id\\": 27 + } + } + ], + \\"removes\\": [], + \\"texts\\": [], + \\"attributes\\": [], + \\"isAttachIframe\\": true + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [], + \\"removes\\": [], + \\"adds\\": [ + { + \\"parentId\\": 42, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"img\\", + \\"attributes\\": { + \\"src\\": \\"blob:http://localhost:3030/...\\", + \\"rr_dataURL\\": \\"data:image/png;base64,...\\" + }, + \\"childNodes\\": [], + \\"rootId\\": 27, + \\"id\\": 47 + } + } + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [ + { + \\"id\\": 47, + \\"attributes\\": { + \\"crossorigin\\": \\"anonymous\\" + } + } + ], + \\"removes\\": [], + \\"adds\\": [] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [ + { + \\"id\\": 47, + \\"attributes\\": { + \\"crossorigin\\": null + } + } + ], + \\"removes\\": [], + \\"adds\\": [] + } + } +]" +`; + +exports[`record integration tests should record images with blob url 1`] = ` +"[ + { + \\"type\\": 0, + \\"data\\": {} + }, + { + \\"type\\": 1, + \\"data\\": {} + }, + { + \\"type\\": 4, + \\"data\\": { + \\"href\\": \\"about:blank\\", + \\"width\\": 1920, + \\"height\\": 1080 + } + }, + { + \\"type\\": 2, + \\"data\\": { + \\"node\\": { + \\"type\\": 0, + \\"childNodes\\": [ + { + \\"type\\": 1, + \\"name\\": \\"html\\", + \\"publicId\\": \\"\\", + \\"systemId\\": \\"\\", + \\"id\\": 2 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"html\\", + \\"attributes\\": { + \\"lang\\": \\"en\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"head\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 5 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"charset\\": \\"UTF-8\\" + }, + \\"childNodes\\": [], + \\"id\\": 6 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 7 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"http-equiv\\": \\"X-UA-Compatible\\", + \\"content\\": \\"IE=edge\\" + }, + \\"childNodes\\": [], + \\"id\\": 8 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 9 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"name\\": \\"viewport\\", + \\"content\\": \\"width=device-width, initial-scale=1.0\\" + }, + \\"childNodes\\": [], + \\"id\\": 10 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 11 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"title\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"Image with blob:url\\", + \\"id\\": 13 + } + ], + \\"id\\": 12 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 14 + } + ], + \\"id\\": 4 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 15 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 17 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", + \\"id\\": 19 + } + ], + \\"id\\": 18 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n \\", + \\"id\\": 20 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", + \\"id\\": 22 + } + ], + \\"id\\": 21 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n \\\\n\\\\n\\", + \\"id\\": 23 + } + ], + \\"id\\": 16 + } + ], + \\"id\\": 3 + } + ], + \\"id\\": 1 + }, + \\"initialOffset\\": { + \\"left\\": 0, + \\"top\\": 0 + } + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [], + \\"removes\\": [], + \\"adds\\": [ + { + \\"parentId\\": 16, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"img\\", + \\"attributes\\": { + \\"src\\": \\"blob:http://localhost:3030/...\\", + \\"rr_dataURL\\": \\"data:image/png;base64,...\\" + }, + \\"childNodes\\": [], + \\"id\\": 24 + } + } + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [ + { + \\"id\\": 24, + \\"attributes\\": { + \\"crossorigin\\": \\"anonymous\\" + } + } + ], + \\"removes\\": [], + \\"adds\\": [] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [ + { + \\"id\\": 24, + \\"attributes\\": { + \\"crossorigin\\": null + } + } + ], + \\"removes\\": [], + \\"adds\\": [] + } + } +]" +`; + exports[`record integration tests should record input userTriggered values if userTriggeredOnInput is enabled 1`] = ` "[ { @@ -9979,6 +11081,315 @@ exports[`record integration tests should record input userTriggered values if us ]" `; +exports[`record integration tests should record mutations in iframes accross pages 1`] = ` +"[ + { + \\"type\\": 0, + \\"data\\": {} + }, + { + \\"type\\": 1, + \\"data\\": {} + }, + { + \\"type\\": 4, + \\"data\\": { + \\"href\\": \\"about:blank\\", + \\"width\\": 1920, + \\"height\\": 1080 + } + }, + { + \\"type\\": 2, + \\"data\\": { + \\"node\\": { + \\"type\\": 0, + \\"childNodes\\": [ + { + \\"type\\": 1, + \\"name\\": \\"html\\", + \\"publicId\\": \\"\\", + \\"systemId\\": \\"\\", + \\"id\\": 2 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"html\\", + \\"attributes\\": { + \\"lang\\": \\"en\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"head\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 5 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"charset\\": \\"UTF-8\\" + }, + \\"childNodes\\": [], + \\"id\\": 6 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 7 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"name\\": \\"viewport\\", + \\"content\\": \\"width=device-width, initial-scale=1.0\\" + }, + \\"childNodes\\": [], + \\"id\\": 8 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 9 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"title\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"Frame 2\\", + \\"id\\": 11 + } + ], + \\"id\\": 10 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 12 + } + ], + \\"id\\": 4 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 13 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n frame 2\\\\n \\\\n \\", + \\"id\\": 15 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", + \\"id\\": 17 + } + ], + \\"id\\": 16 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n \\\\n \\", + \\"id\\": 18 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", + \\"id\\": 20 + } + ], + \\"id\\": 19 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n\\\\n\\", + \\"id\\": 21 + } + ], + \\"id\\": 14 + } + ], + \\"id\\": 3 + } + ], + \\"id\\": 1 + }, + \\"initialOffset\\": { + \\"left\\": 0, + \\"top\\": 0 + } + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [], + \\"removes\\": [], + \\"adds\\": [ + { + \\"parentId\\": 14, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"iframe\\", + \\"attributes\\": { + \\"id\\": \\"five\\" + }, + \\"childNodes\\": [], + \\"id\\": 22 + } + } + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"adds\\": [ + { + \\"parentId\\": 22, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 0, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"html\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"head\\", + \\"attributes\\": {}, + \\"childNodes\\": [], + \\"rootId\\": 23, + \\"id\\": 25 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, + \\"childNodes\\": [], + \\"rootId\\": 23, + \\"id\\": 26 + } + ], + \\"rootId\\": 23, + \\"id\\": 24 + } + ], + \\"compatMode\\": \\"BackCompat\\", + \\"id\\": 23 + } + } + ], + \\"removes\\": [], + \\"texts\\": [], + \\"attributes\\": [], + \\"isAttachIframe\\": true + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"adds\\": [ + { + \\"parentId\\": 22, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 0, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"html\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"head\\", + \\"attributes\\": {}, + \\"childNodes\\": [], + \\"rootId\\": 27, + \\"id\\": 29 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, + \\"childNodes\\": [], + \\"rootId\\": 27, + \\"id\\": 30 + } + ], + \\"rootId\\": 27, + \\"id\\": 28 + } + ], + \\"id\\": 27 + } + } + ], + \\"removes\\": [], + \\"texts\\": [], + \\"attributes\\": [], + \\"isAttachIframe\\": true + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [], + \\"removes\\": [], + \\"adds\\": [ + { + \\"parentId\\": 30, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"div\\", + \\"attributes\\": {}, + \\"childNodes\\": [], + \\"rootId\\": 27, + \\"id\\": 31 + } + } + ] + } + } +]" +`; + exports[`record integration tests should record nested iframes and shadow doms 1`] = ` "[ { diff --git a/packages/rrweb/test/__snapshots__/replayer.test.ts.snap b/packages/rrweb/test/__snapshots__/replayer.test.ts.snap index 45f9b9e3..66234059 100644 --- a/packages/rrweb/test/__snapshots__/replayer.test.ts.snap +++ b/packages/rrweb/test/__snapshots__/replayer.test.ts.snap @@ -81,13 +81,80 @@ file-cid-3 `; exports[`replayer can fast forward past StyleSheetRule deletion on virtual elements 1`] = ` -"file-frame-0 +"file-frame-4 - + +
+
+ +
+ + + +file-frame-5 + + + + + + + + + + + string + + + + +file-cid-0 +@charset \\"utf-8\\"; + +.rr-block { background: currentcolor; } + +noscript { display: none !important; } + +html.rrweb-paused *, html.rrweb-paused ::before, html.rrweb-paused ::after { animation-play-state: paused !important; } + + +file-cid-1 +@charset \\"utf-8\\"; + +.css-added-at-400 { padding: 1.3125rem; flex: 0 0 auto; width: 100%; } + + +file-cid-2 +@charset \\"utf-8\\"; + +.css-added-at-200-overwritten-at-3000 { opacity: 1; transform: translateX(0px); } + +.css-added-at-500-overwritten-at-3000 { border: 1px solid blue; } + + +file-cid-3 +@charset \\"utf-8\\"; + +.css-added-at-200 { position: fixed; top: 0px; right: 0px; left: 4rem; z-index: 15; flex-shrink: 0; height: 0.25rem; overflow: hidden; background-color: rgb(17, 171, 209); } + +.css-added-at-200.alt { height: 0.25rem; background-color: rgb(190, 232, 242); opacity: 0; transition: opacity 0.5s ease 0s; } + +.css-added-at-200.alt2 { padding-left: 4rem; } " `; diff --git a/packages/rrweb/test/html/assets/robot.png b/packages/rrweb/test/html/assets/robot.png new file mode 100644 index 00000000..cc486cc8 Binary files /dev/null and b/packages/rrweb/test/html/assets/robot.png differ diff --git a/packages/rrweb/test/html/frame-image-blob-url.html b/packages/rrweb/test/html/frame-image-blob-url.html new file mode 100644 index 00000000..038ced16 --- /dev/null +++ b/packages/rrweb/test/html/frame-image-blob-url.html @@ -0,0 +1,11 @@ + + + + + + Frame with image + + + + + diff --git a/packages/rrweb/test/html/image-blob-url.html b/packages/rrweb/test/html/image-blob-url.html new file mode 100644 index 00000000..4dd3f608 --- /dev/null +++ b/packages/rrweb/test/html/image-blob-url.html @@ -0,0 +1,21 @@ + + + + + + + Image with blob:url + + + + + diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts index 3aec801c..0da1ebdb 100644 --- a/packages/rrweb/test/integration.test.ts +++ b/packages/rrweb/test/integration.test.ts @@ -499,6 +499,57 @@ describe('record integration tests', function (this: ISuite) { assertSnapshot(snapshots); }); + it('should record images with blob url', async () => { + const page: puppeteer.Page = await browser.newPage(); + page.on('console', (msg) => console.log(msg.text())); + await page.goto(`${serverURL}/html`); + page.setContent( + getHtml.call(this, 'image-blob-url.html', { inlineImages: true }), + ); + await page.waitForResponse(`${serverURL}/html/assets/robot.png`); + await page.waitForSelector('img'); // wait for image to get added + await waitForRAF(page); // wait for image to be captured + + const snapshots = await page.evaluate('window.snapshots'); + assertSnapshot(snapshots); + }); + + it('should record images inside iframe with blob url', async () => { + const page: puppeteer.Page = await browser.newPage(); + page.on('console', (msg) => console.log(msg.text())); + await page.goto(`${serverURL}/html`); + await page.setContent( + getHtml.call(this, 'frame-image-blob-url.html', { inlineImages: true }), + ); + await page.waitForResponse(`${serverURL}/html/assets/robot.png`); + await page.waitForTimeout(50); // wait for image to get added + await waitForRAF(page); // wait for image to be captured + + const snapshots = await page.evaluate('window.snapshots'); + assertSnapshot(snapshots); + }); + + it('should record images inside iframe with blob url after iframe was reloaded', async () => { + const page: puppeteer.Page = await browser.newPage(); + page.on('console', (msg) => console.log(msg.text())); + await page.goto(`${serverURL}/html`); + await page.setContent( + getHtml.call(this, 'frame2.html', { inlineImages: true }), + ); + await page.waitForSelector('iframe'); // wait for iframe to get added + await waitForRAF(page); // wait for iframe to load + page.evaluate(() => { + const iframe = document.querySelector('iframe')!; + iframe.setAttribute('src', '/html/image-blob-url.html'); + }); + await page.waitForResponse(`${serverURL}/html/assets/robot.png`); // wait for image to get loaded + await page.waitForTimeout(50); // wait for image to get added + await waitForRAF(page); // wait for image to be captured + + const snapshots = await page.evaluate('window.snapshots'); + assertSnapshot(snapshots); + }); + it('should record shadow DOM', async () => { const page: puppeteer.Page = await browser.newPage(); await page.goto('about:blank'); @@ -589,6 +640,34 @@ describe('record integration tests', function (this: ISuite) { assertSnapshot(snapshots); }); + it('should record mutations in iframes accross pages', async () => { + const page: puppeteer.Page = await browser.newPage(); + await page.goto(`${serverURL}/html`); + page.on('console', (msg) => console.log(msg.text())); + await page.setContent(getHtml.call(this, 'frame2.html')); + + await page.waitForSelector('iframe'); // wait for iframe to get added + await waitForRAF(page); // wait for iframe to load + + page.evaluate((serverURL) => { + const iframe = document.querySelector('iframe')!; + iframe.setAttribute('src', `${serverURL}/html`); // load new page + }, serverURL); + + await page.waitForResponse(`${serverURL}/html`); // wait for iframe to load pt1 + await waitForRAF(page); // wait for iframe to load pt2 + + await page.evaluate(() => { + const iframeDocument = document.querySelector('iframe')!.contentDocument!; + const div = iframeDocument.createElement('div'); + iframeDocument.body.appendChild(div); + }); + + await waitForRAF(page); // wait for snapshot to be updated + const snapshots = await page.evaluate('window.snapshots'); + assertSnapshot(snapshots); + }); + // https://github.com/webcomponents/polyfills/tree/master/packages/shadydom it('should record shadow doms polyfilled by shadydom', async () => { const page: puppeteer.Page = await browser.newPage(); diff --git a/packages/rrweb/test/replayer.test.ts b/packages/rrweb/test/replayer.test.ts index c0c8a078..e011c532 100644 --- a/packages/rrweb/test/replayer.test.ts +++ b/packages/rrweb/test/replayer.test.ts @@ -160,11 +160,7 @@ describe('replayer', function () { ).length, ); - await assertDomSnapshot( - page, - __filename, - 'style-sheet-rule-events-play-at-1500', - ); + await assertDomSnapshot(page); }); it('should apply fast forwarded StyleSheetRules that where added', async () => { @@ -196,11 +192,7 @@ describe('replayer', function () { ).length, ); - await assertDomSnapshot( - page, - __filename, - 'style-sheet-remove-events-play-at-2500', - ); + await assertDomSnapshot(page); }); it('can restore selection', async () => { @@ -221,11 +213,14 @@ describe('replayer', function () { it('can fast forward past StyleSheetRule deletion on virtual elements', async () => { await page.evaluate(`events = ${JSON.stringify(styleSheetRuleEvents)}`); - await assertDomSnapshot( - page, - __filename, - 'style-sheet-rule-events-play-at-2500', - ); + const actionLength = await page.evaluate(` + const { Replayer } = rrweb; + const replayer = new Replayer(events); + replayer.pause(2600); + replayer['timer']['actions'].length; + `); + + await assertDomSnapshot(page); }); it('should delete fast forwarded StyleSheetRules that where removed', async () => { @@ -676,7 +671,7 @@ describe('replayer', function () { `); await page.waitForTimeout(50); - await assertDomSnapshot(page, __filename, 'ordering-events'); + await assertDomSnapshot(page); }); it('replays same timestamp events in correct order (with addAction)', async () => { @@ -690,6 +685,6 @@ describe('replayer', function () { `); await page.waitForTimeout(50); - await assertDomSnapshot(page, __filename, 'ordering-events'); + await assertDomSnapshot(page); }); }); diff --git a/packages/rrweb/test/utils.ts b/packages/rrweb/test/utils.ts index eb271598..5fd249b5 100644 --- a/packages/rrweb/test/utils.ts +++ b/packages/rrweb/test/utils.ts @@ -152,20 +152,54 @@ function stringifySnapshots(snapshots: eventWithTime[]): string { coordinatesReg.lastIndex = 0; // wow, a real wart in ECMAScript } } + + // strip blob:urls as they are different every time + console.log( + a.attributes.src, + 'src' in a.attributes && + a.attributes.src && + typeof a.attributes.src === 'string', + ); }); s.data.adds.forEach((add) => { - if ( - add.node.type === NodeType.Element && - 'style' in add.node.attributes && - typeof add.node.attributes.style === 'string' && - coordinatesReg.test(add.node.attributes.style) - ) { - add.node.attributes.style = add.node.attributes.style.replace( - coordinatesReg, - '$1: Npx', - ); + if (add.node.type === NodeType.Element) { + if ( + 'style' in add.node.attributes && + typeof add.node.attributes.style === 'string' && + coordinatesReg.test(add.node.attributes.style) + ) { + add.node.attributes.style = add.node.attributes.style.replace( + coordinatesReg, + '$1: Npx', + ); + } + coordinatesReg.lastIndex = 0; // wow, a real wart in ECMAScript + + // strip blob:urls as they are different every time + if ( + 'src' in add.node.attributes && + add.node.attributes.src && + typeof add.node.attributes.src === 'string' && + add.node.attributes.src.startsWith('blob:') + ) { + add.node.attributes.src = add.node.attributes.src.replace( + /[\w-]+$/, + '...', + ); + } + + // strip rr_dataURL as they are not consistent + if ( + 'rr_dataURL' in add.node.attributes && + add.node.attributes.rr_dataURL && + typeof add.node.attributes.rr_dataURL === 'string' + ) { + add.node.attributes.rr_dataURL = add.node.attributes.rr_dataURL.replace( + /,.+$/, + ',...', + ); + } } - coordinatesReg.lastIndex = 0; // wow, a real wart in ECMAScript }); } delete (s as Optional).timestamp; @@ -223,11 +257,7 @@ export function replaceLast(str: string, find: string, replace: string) { return str.substring(0, index) + replace + str.substring(index + find.length); } -export async function assertDomSnapshot( - page: puppeteer.Page, - filename: string, - name: string, -) { +export async function assertDomSnapshot(page: puppeteer.Page) { const cdp = await page.target().createCDPSession(); const { data } = await cdp.send('Page.captureSnapshot', { format: 'mhtml', @@ -555,6 +585,7 @@ export function generateRecordSnippet(options: recordOptions) { userTriggeredOnInput: ${options.userTriggeredOnInput}, maskTextFn: ${options.maskTextFn}, recordCanvas: ${options.recordCanvas}, + inlineImages: ${options.inlineImages}, plugins: ${options.plugins} }); `;