From d3bb6fb1eb6689774173c6344233411bf8f92a33 Mon Sep 17 00:00:00 2001 From: Justin Halsall Date: Fri, 6 Jan 2023 12:39:21 +0100 Subject: [PATCH 01/12] Upgrade puppeteer to 17.1.3 in rrweb-snapshot --- packages/rrweb-snapshot/package.json | 2 +- .../__snapshots__/integration.test.ts.snap | 16 +-- .../rrweb-snapshot/test/integration.test.ts | 36 ++--- yarn.lock | 134 +++++++----------- 4 files changed, 76 insertions(+), 112 deletions(-) diff --git a/packages/rrweb-snapshot/package.json b/packages/rrweb-snapshot/package.json index e16df04739..44b4d3e544 100644 --- a/packages/rrweb-snapshot/package.json +++ b/packages/rrweb-snapshot/package.json @@ -49,7 +49,7 @@ "jest": "^27.2.4", "jest-snapshot": "^23.6.0", "jsdom": "^16.4.0", - "puppeteer": "^1.15.0", + "puppeteer": "^17.1.3", "rollup": "^2.45.2", "rollup-plugin-terser": "^7.0.2", "rollup-plugin-typescript2": "^0.31.2", diff --git a/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap b/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap index 29acb2b993..fde02310a2 100644 --- a/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap +++ b/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap @@ -189,7 +189,7 @@ exports[`integration tests [html file]: block-element.html 1`] = ` `; exports[`integration tests [html file]: compat-mode.html 1`] = ` -" +" Compat Mode; image resizing @@ -287,12 +287,12 @@ exports[`integration tests [html file]: iframe.html 1`] = ` `; exports[`integration tests [html file]: iframe-inner.html 1`] = ` -" +" " `; exports[`integration tests [html file]: invalid-attribute.html 1`] = ` -" +" " `; @@ -335,7 +335,7 @@ exports[`integration tests [html file]: mask-text.html 1`] = ` `; exports[`integration tests [html file]: picture.html 1`] = ` -" +" @@ -345,20 +345,20 @@ exports[`integration tests [html file]: picture.html 1`] = ` `; exports[`integration tests [html file]: picture-blob.html 1`] = ` -" +" \\"This " `; exports[`integration tests [html file]: picture-blob-in-frame.html 1`] = ` -" +" " `; exports[`integration tests [html file]: picture-in-frame.html 1`] = ` -" +" " `; @@ -750,7 +750,7 @@ exports[`shadow DOM integration tests snapshot shadow DOM 1`] = ` \\"childNodes\\": [ { \\"type\\": 3, - \\"textContent\\": \\":host { display: inline-block; width: 650px; font-family: \\\\\\"Roboto Slab\\\\\\"; contain: content; }:host([background]) { background: var(--background-color, #9E9E9E); border-radius: 10px; padding: 10px; }#panels { box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 2px; background: white; border-radius: 3px; padding: 16px; height: 250px; overflow: auto; }#tabs { display: inline-flex; user-select: none; }#tabs slot { display: inline-flex; }#tabs ::slotted(*) { font: 400 16px/22px Roboto; padding: 16px 8px; margin: 0px; text-align: center; width: 100px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; border-top-left-radius: 3px; border-top-right-radius: 3px; background: linear-gradient(rgb(250, 250, 250), rgb(238, 238, 238)); border: none; }#tabs ::slotted([aria-selected=\\\\\\"true\\\\\\"]) { font-weight: 600; background: white; box-shadow: none; }#tabs ::slotted(:focus) { z-index: 1; }#panels ::slotted([aria-hidden=\\\\\\"true\\\\\\"]) { display: none; }\\", + \\"textContent\\": \\":host { display: inline-block; width: 650px; font-family: \\\\\\"Roboto Slab\\\\\\"; contain: content; }:host([background]) { background: var(--background-color, #9E9E9E); border-radius: 10px; padding: 10px; }#panels { box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 2px; background: white; border-radius: 3px; padding: 16px; height: 250px; overflow: auto; }#tabs { display: inline-flex; user-select: none; }#tabs slot { display: inline-flex; }#tabs ::slotted(*) { font: 400 16px / 22px Roboto; padding: 16px 8px; margin: 0px; text-align: center; width: 100px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; border-top-left-radius: 3px; border-top-right-radius: 3px; background: linear-gradient(rgb(250, 250, 250), rgb(238, 238, 238)); border: none; }#tabs ::slotted([aria-selected=\\\\\\"true\\\\\\"]) { font-weight: 600; background: white; box-shadow: none; }#tabs ::slotted(:focus) { z-index: 1; }#panels ::slotted([aria-hidden=\\\\\\"true\\\\\\"]) { display: none; }\\", \\"isStyle\\": true, \\"id\\": 38 } diff --git a/packages/rrweb-snapshot/test/integration.test.ts b/packages/rrweb-snapshot/test/integration.test.ts index a9e0a34d68..c73b88616a 100644 --- a/packages/rrweb-snapshot/test/integration.test.ts +++ b/packages/rrweb-snapshot/test/integration.test.ts @@ -128,8 +128,7 @@ describe('integration tests', function (this: ISuite) { waitUntil: 'load', }); } - const rebuildHtml = ( - await page.evaluate(`${code} + const rebuildHtml = ((await page.evaluate(`${code} const x = new XMLSerializer(); const snap = rrweb.snapshot(document); let out = x.serializeToString(rrweb.rebuild(snap, { doc: document })); @@ -138,8 +137,7 @@ describe('integration tests', function (this: ISuite) { out = out.replace(' xmlns=\"http://www.w3.org/1999/xhtml\"', ''); } out; // return - `) - ).replace(/\n\n/g, ''); + `)) as string).replace(/\n\n/g, ''); expect(rebuildHtml).toMatchSnapshot(); }); } @@ -158,9 +156,9 @@ describe('integration tests', function (this: ISuite) { compatMode + ' for compat-mode.html should be BackCompat as DOCTYPE is deliberately omitted', ); - const renderedHeight = await page.evaluate( + const renderedHeight = (await page.evaluate( 'document.querySelector("center").clientHeight', - ); + )) as number; // can remove following assertion if dimensions of page change assert( renderedHeight < 400, @@ -203,8 +201,10 @@ iframe.contentDocument.querySelector('center').clientHeight inlineImages: true, inlineStylesheet: false })`); - await page.waitFor(100); - const snapshot = await page.evaluate('JSON.stringify(snapshot, null, 2);'); + await page.waitForTimeout(100); + const snapshot = (await page.evaluate( + 'JSON.stringify(snapshot, null, 2);', + )) as string; assert(snapshot.includes('"rr_dataURL"')); assert(snapshot.includes('data:image/webp;base64,')); }); @@ -221,8 +221,10 @@ iframe.contentDocument.querySelector('center').clientHeight inlineImages: true, inlineStylesheet: false })`); - await page.waitFor(100); - const snapshot = await page.evaluate('JSON.stringify(snapshot, null, 2);'); + await page.waitForTimeout(100); + const snapshot = (await page.evaluate( + 'JSON.stringify(snapshot, null, 2);', + )) as string; assert(snapshot.includes('"rr_dataURL"')); assert(snapshot.includes('data:image/webp;base64,')); }); @@ -244,10 +246,10 @@ iframe.contentDocument.querySelector('center').clientHeight window.snapshot = sn; } })`); - await page.waitFor(100); - const snapshot = await page.evaluate( + await page.waitForTimeout(100); + const snapshot = (await page.evaluate( 'JSON.stringify(window.snapshot, null, 2);', - ); + )) as string; assert(snapshot.includes('"rr_dataURL"')); assert(snapshot.includes('data:image/webp;base64,')); }); @@ -269,10 +271,10 @@ iframe.contentDocument.querySelector('center').clientHeight window.snapshot = sn; } })`); - await page.waitFor(100); - const snapshot = await page.evaluate( + await page.waitForTimeout(100); + const snapshot = (await page.evaluate( 'JSON.stringify(window.snapshot, null, 2);', - ); + )) as string; assert(snapshot.includes('"rr_dataURL"')); assert(snapshot.includes('data:image/webp;base64,')); }); @@ -287,7 +289,7 @@ iframe.contentDocument.querySelector('center').clientHeight window.snapshot = rrweb.snapshot(document, { inlineStylesheet: true, })`); - await page.waitFor(100); + await page.waitForTimeout(100); const snapshot = (await page.evaluate( 'JSON.stringify(window.snapshot, null, 2);', )) as string; diff --git a/yarn.lock b/yarn.lock index 232a43dc6e..6ba3484fa6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2659,13 +2659,6 @@ agent-base@6, agent-base@^6.0.2: dependencies: debug "4" -agent-base@^4.3.0: - version "4.3.0" - resolved "https://registry.npmjs.org/agent-base/-/agent-base-4.3.0.tgz" - integrity sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg== - dependencies: - es6-promisify "^5.0.0" - agentkeepalive@^4.1.3: version "4.1.4" resolved "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.1.4.tgz" @@ -2887,11 +2880,6 @@ ast-metadata-inferer@^0.7.0: dependencies: "@mdn/browser-compat-data" "^3.3.14" -async-limiter@~1.0.0: - version "1.0.1" - resolved "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz" - integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ== - asynckit@^0.4.0: version "0.4.0" resolved "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz" @@ -3686,16 +3674,6 @@ concat-map@0.0.1: resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz" integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s= -concat-stream@^1.6.2: - version "1.6.2" - resolved "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz" - integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw== - dependencies: - buffer-from "^1.0.0" - inherits "^2.0.3" - readable-stream "^2.2.2" - typedarray "^0.0.6" - concat-stream@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz" @@ -3915,6 +3893,13 @@ cross-env@^5.2.0: dependencies: cross-spawn "^6.0.5" +cross-fetch@3.1.5: + version "3.1.5" + resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.5.tgz#e1389f44d9e7ba767907f7af8454787952ab534f" + integrity sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw== + dependencies: + node-fetch "2.6.7" + cross-spawn@^6.0.5: version "6.0.5" resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz" @@ -4152,7 +4137,7 @@ dateformat@^3.0.0: resolved "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz" integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q== -debug@2.6.9, debug@^2.6.9: +debug@2.6.9: version "2.6.9" resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz" integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA== @@ -4166,14 +4151,7 @@ debug@4, debug@4.3.2, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2: dependencies: ms "2.1.2" -debug@^3.1.0: - version "3.2.7" - resolved "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz" - integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ== - dependencies: - ms "^2.1.1" - -debug@^4.3.3, debug@^4.3.4: +debug@4.3.4, debug@^4.3.3, debug@^4.3.4: version "4.3.4" resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz" integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ== @@ -4282,6 +4260,11 @@ detect-newline@^3.0.0: resolved "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz" integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA== +devtools-protocol@0.0.1036444: + version "0.0.1036444" + resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.1036444.tgz#a570d3cdde61527c82f9b03919847b8ac7b1c2b9" + integrity sha512-0y4f/T8H9lsESV9kKP1HDUXgHxCdniFeJh6Erq+FbdOEvp/Ydp9t8kcAAM5gOd17pMrTDlFWntoHtzzeTUWKNw== + devtools-protocol@0.0.869402: version "0.0.869402" resolved "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.869402.tgz" @@ -4587,18 +4570,6 @@ es-to-primitive@^1.2.1: is-date-object "^1.0.1" is-symbol "^1.0.2" -es6-promise@^4.0.3: - version "4.2.8" - resolved "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz" - integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w== - -es6-promisify@^5.0.0: - version "5.0.0" - resolved "https://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz" - integrity sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM= - dependencies: - es6-promise "^4.0.3" - esbuild-android-64@0.14.38: version "0.14.38" resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.38.tgz#5b94a1306df31d55055f64a62ff6b763a47b7f64" @@ -5241,16 +5212,6 @@ extract-zip@2.0.1, extract-zip@^2.0.0: optionalDependencies: "@types/yauzl" "^2.9.1" -extract-zip@^1.6.6: - version "1.7.0" - resolved "https://registry.npmjs.org/extract-zip/-/extract-zip-1.7.0.tgz" - integrity sha512-xoh5G1W/PB0/27lXgMQyIhP5DSY/LhoCsOyZgb+6iMmRtCwVBo55uKaMoEYrDCKQhWvqEip5ZPKAc6eFNyf/MA== - dependencies: - concat-stream "^1.6.2" - debug "^2.6.9" - mkdirp "^0.5.4" - yauzl "^2.10.0" - extsprintf@1.3.0: version "1.3.0" resolved "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz" @@ -6079,13 +6040,13 @@ https-proxy-agent@5.0.0, https-proxy-agent@^5.0.0: agent-base "6" debug "4" -https-proxy-agent@^2.2.1: - version "2.2.4" - resolved "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz" - integrity sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg== +https-proxy-agent@5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6" + integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA== dependencies: - agent-base "^4.3.0" - debug "^3.1.0" + agent-base "6" + debug "4" human-signals@^2.1.0: version "2.1.0" @@ -8351,7 +8312,7 @@ mime@1.6.0: resolved "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz" integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg== -mime@^2.0.3, mime@^2.3.1: +mime@^2.3.1: version "2.5.2" resolved "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz" integrity sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg== @@ -8497,7 +8458,7 @@ mkdirp-infer-owner@^2.0.0: infer-owner "^1.0.4" mkdirp "^1.0.3" -mkdirp@^0.5.1, mkdirp@^0.5.4, mkdirp@^0.5.5, mkdirp@~0.5.1: +mkdirp@^0.5.1, mkdirp@^0.5.5, mkdirp@~0.5.1: version "0.5.5" resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz" integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ== @@ -8534,7 +8495,7 @@ ms@2.1.2: resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz" integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w== -ms@^2.0.0, ms@^2.1.1: +ms@^2.0.0: version "2.1.3" resolved "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz" integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA== @@ -8587,7 +8548,7 @@ node-fetch@2.6.5: dependencies: whatwg-url "^5.0.0" -node-fetch@^2.6.1: +node-fetch@2.6.7, node-fetch@^2.6.1: version "2.6.7" resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz" integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ== @@ -9863,7 +9824,7 @@ proxy-addr@~2.0.5: forwarded "0.2.0" ipaddr.js "1.9.1" -proxy-from-env@1.1.0, proxy-from-env@^1.0.0, proxy-from-env@^1.1.0: +proxy-from-env@1.1.0, proxy-from-env@^1.1.0: version "1.1.0" resolved "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz" integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg== @@ -9886,20 +9847,6 @@ punycode@^2.1.0, punycode@^2.1.1: resolved "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz" integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A== -puppeteer@^1.15.0: - version "1.20.0" - resolved "https://registry.npmjs.org/puppeteer/-/puppeteer-1.20.0.tgz" - integrity sha512-bt48RDBy2eIwZPrkgbcwHtb51mj2nKvHOPMaSH2IsWiv7lOG9k9zhaRzpDZafrk05ajMc3cu+lSQYYOfH2DkVQ== - dependencies: - debug "^4.1.0" - extract-zip "^1.6.6" - https-proxy-agent "^2.2.1" - mime "^2.0.3" - progress "^2.0.1" - proxy-from-env "^1.0.0" - rimraf "^2.6.1" - ws "^6.1.0" - puppeteer@^11.0.0: version "11.0.0" resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-11.0.0.tgz#0808719c38e15315ecc1b1c28911f1c9054d201f" @@ -9918,6 +9865,23 @@ puppeteer@^11.0.0: unbzip2-stream "1.4.3" ws "8.2.3" +puppeteer@^17.0.0: + version "17.1.3" + resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-17.1.3.tgz#2814cf221925e19c681c69aa97401a68b30240c9" + integrity sha512-tVtvNSOOqlq75rUgwLeDAEQoLIiBqmRg0/zedpI6fuqIocIkuxG23A7FIl1oVSkuSMMLgcOP5kVhNETmsmjvPw== + dependencies: + cross-fetch "3.1.5" + debug "4.3.4" + devtools-protocol "0.0.1036444" + extract-zip "2.0.1" + https-proxy-agent "5.0.1" + progress "2.0.3" + proxy-from-env "1.1.0" + rimraf "3.0.2" + tar-fs "2.1.1" + unbzip2-stream "1.4.3" + ws "8.8.1" + puppeteer@^9.1.1: version "9.1.1" resolved "https://registry.npmjs.org/puppeteer/-/puppeteer-9.1.1.tgz" @@ -10115,7 +10079,7 @@ readable-stream@3, readable-stream@^3.0.0, readable-stream@^3.0.2, readable-stre string_decoder "^1.1.1" util-deprecate "^1.0.1" -readable-stream@^2.0.6, readable-stream@^2.2.2, readable-stream@~2.3.6: +readable-stream@^2.0.6, readable-stream@~2.3.6: version "2.3.7" resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz" integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw== @@ -10335,7 +10299,7 @@ rimraf@3.0.2, rimraf@^3.0.0, rimraf@^3.0.2: dependencies: glob "^7.1.3" -rimraf@^2.6.1, rimraf@^2.6.2, rimraf@^2.6.3: +rimraf@^2.6.2, rimraf@^2.6.3: version "2.7.1" resolved "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz" integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w== @@ -12113,12 +12077,10 @@ ws@8.2.3: resolved "https://registry.yarnpkg.com/ws/-/ws-8.2.3.tgz#63a56456db1b04367d0b721a0b80cae6d8becbba" integrity sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA== -ws@^6.1.0: - version "6.2.2" - resolved "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz" - integrity sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw== - dependencies: - async-limiter "~1.0.0" +ws@8.8.1: + version "8.8.1" + resolved "https://registry.yarnpkg.com/ws/-/ws-8.8.1.tgz#5dbad0feb7ade8ecc99b830c1d77c913d4955ff0" + integrity sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA== ws@^7.2.3: version "7.5.7" From 05587c17c73366d27036010a9a097e773df607aa Mon Sep 17 00:00:00 2001 From: Juice10 Date: Fri, 6 Jan 2023 11:40:59 +0000 Subject: [PATCH 02/12] Apply formatting changes --- packages/rrweb/src/index.ts | 4 +--- yarn.lock | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/rrweb/src/index.ts b/packages/rrweb/src/index.ts index c8b0940caa..ecc1695909 100644 --- a/packages/rrweb/src/index.ts +++ b/packages/rrweb/src/index.ts @@ -10,9 +10,7 @@ export { ReplayerEvents, } from '@rrweb/types'; -export type { - recordOptions, -} from './types'; +export type { recordOptions } from './types'; const { addCustomEvent } = record; const { freezePage } = record; diff --git a/yarn.lock b/yarn.lock index 6ba3484fa6..f2756537e0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9865,7 +9865,7 @@ puppeteer@^11.0.0: unbzip2-stream "1.4.3" ws "8.2.3" -puppeteer@^17.0.0: +puppeteer@^17.1.3: version "17.1.3" resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-17.1.3.tgz#2814cf221925e19c681c69aa97401a68b30240c9" integrity sha512-tVtvNSOOqlq75rUgwLeDAEQoLIiBqmRg0/zedpI6fuqIocIkuxG23A7FIl1oVSkuSMMLgcOP5kVhNETmsmjvPw== From 483e0bb0b686bb92e44f78e666ab91845f6c5b48 Mon Sep 17 00:00:00 2001 From: Justin Halsall Date: Fri, 6 Jan 2023 12:49:14 +0100 Subject: [PATCH 03/12] Add ? --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3e6490f17b..90c8c71811 100644 --- a/README.md +++ b/README.md @@ -120,7 +120,7 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE -## Who's using rrweb +## Who's using rrweb? From 2b9842d093af21216a9541bbaf478a4107bd8e0d Mon Sep 17 00:00:00 2001 From: Justin Halsall Date: Fri, 6 Jan 2023 15:46:38 +0100 Subject: [PATCH 04/12] Make tests less flakey --- .../test/__snapshots__/integration.test.ts.snap | 2 +- packages/rrweb-snapshot/test/integration.test.ts | 8 +++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap b/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap index fde02310a2..448823cbce 100644 --- a/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap +++ b/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap @@ -346,7 +346,7 @@ exports[`integration tests [html file]: picture.html 1`] = ` exports[`integration tests [html file]: picture-blob.html 1`] = ` " - \\"This + \\"This " `; diff --git a/packages/rrweb-snapshot/test/integration.test.ts b/packages/rrweb-snapshot/test/integration.test.ts index c73b88616a..26f57642a2 100644 --- a/packages/rrweb-snapshot/test/integration.test.ts +++ b/packages/rrweb-snapshot/test/integration.test.ts @@ -128,6 +128,7 @@ describe('integration tests', function (this: ISuite) { waitUntil: 'load', }); } + await waitForRAF(page); const rebuildHtml = ((await page.evaluate(`${code} const x = new XMLSerializer(); const snap = rrweb.snapshot(document); @@ -137,7 +138,12 @@ describe('integration tests', function (this: ISuite) { out = out.replace(' xmlns=\"http://www.w3.org/1999/xhtml\"', ''); } out; // return - `)) as string).replace(/\n\n/g, ''); + `)) as string) + .replace(/\n\n/g, '') + .replace( + /blob:http:\/\/localhost:\d+\/[0-9a-z\-]+/, + 'blob:http://localhost:xxxx/...', + ); expect(rebuildHtml).toMatchSnapshot(); }); } From 39821aeb5e36676064ab70b7655292ec2de4f907 Mon Sep 17 00:00:00 2001 From: Justin Halsall Date: Fri, 6 Jan 2023 16:32:50 +0100 Subject: [PATCH 05/12] Make attribute-setting more explicit --- packages/rrweb-snapshot/test/html/picture-blob.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rrweb-snapshot/test/html/picture-blob.html b/packages/rrweb-snapshot/test/html/picture-blob.html index d2a32658a1..8e18b0cf2f 100644 --- a/packages/rrweb-snapshot/test/html/picture-blob.html +++ b/packages/rrweb-snapshot/test/html/picture-blob.html @@ -9,7 +9,7 @@ const robotBlobUrl = URL.createObjectURL(robotBlob); const images = document.querySelectorAll('img'); images.forEach((img) => { - img.src = robotBlobUrl; + img.setAttribute('src', robotBlobUrl); }); }, 0); From d6b23747f169d85720bbcfd292c73e25503510b6 Mon Sep 17 00:00:00 2001 From: Justin Halsall Date: Fri, 6 Jan 2023 17:04:25 +0100 Subject: [PATCH 06/12] Make test less flakey --- packages/rrweb/test/replayer.test.ts | 29 +++++++++++++++++++++------- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/packages/rrweb/test/replayer.test.ts b/packages/rrweb/test/replayer.test.ts index 7bc09ae2ca..6d94a47cd1 100644 --- a/packages/rrweb/test/replayer.test.ts +++ b/packages/rrweb/test/replayer.test.ts @@ -798,8 +798,23 @@ describe('replayer', function () { events = ${JSON.stringify(adoptedStyleSheetModification)}; const { Replayer } = rrweb; var replayer = new Replayer(events,{showDebug:true}); - replayer.play(); - `); + replayer.pause(0); + + async function playTill(offsetTime) { + replayer.play(); + return new Promise((resolve) => { + const checkTime = () => { + if (replayer.getCurrentTime() >= offsetTime) { + replayer.pause(); + resolve(undefined); + } else { + requestAnimationFrame(checkTime); + } + }; + checkTime(); + }); + }`); + const iframe = await page.$('iframe'); const contentDocument = await iframe!.contentFrame()!; @@ -916,19 +931,19 @@ describe('replayer', function () { ).toBeTruthy(); }; - await page.waitForTimeout(235); + await page.evaluate(`playTill(250)`); await check250ms(); - await page.waitForTimeout(50); + await page.evaluate(`playTill(300)`); await check300ms(); - await page.waitForTimeout(100); + await page.evaluate(`playTill(400)`); await check400ms(); - await page.waitForTimeout(100); + await page.evaluate(`playTill(500)`); await check500ms(); - await page.waitForTimeout(100); + await page.evaluate(`playTill(600)`); await check600ms(); // To test the correctness of replaying adopted stylesheet mutation events in the fast-forward mode. From de74a194559753ec121f69fb80d459863ec5ea8a Mon Sep 17 00:00:00 2001 From: Justin Halsall Date: Fri, 6 Jan 2023 17:07:58 +0100 Subject: [PATCH 07/12] Make test less flakey --- packages/rrweb/test/html/frame2.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/rrweb/test/html/frame2.html b/packages/rrweb/test/html/frame2.html index 6344438ca2..e058e4591b 100644 --- a/packages/rrweb/test/html/frame2.html +++ b/packages/rrweb/test/html/frame2.html @@ -11,8 +11,8 @@ From c8b2da4f8a808ff2f6947a0f7cf5331dc0bcd291 Mon Sep 17 00:00:00 2001 From: Justin Halsall Date: Fri, 6 Jan 2023 17:13:36 +0100 Subject: [PATCH 08/12] Upgrade puppeteer for rrdom --- packages/rrdom/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rrdom/package.json b/packages/rrdom/package.json index 440358d199..8048c9e072 100644 --- a/packages/rrdom/package.json +++ b/packages/rrdom/package.json @@ -38,7 +38,7 @@ "@typescript-eslint/parser": "^5.23.0", "eslint": "^8.15.0", "jest": "^27.5.1", - "puppeteer": "^9.1.1", + "puppeteer": "^17.1.3", "rollup": "^2.56.3", "rollup-plugin-terser": "^7.0.2", "rollup-plugin-typescript2": "^0.31.2", From 875b3dcb1f7649ee363ab7fd927ecc6eaa8b2d48 Mon Sep 17 00:00:00 2001 From: Justin Halsall Date: Fri, 6 Jan 2023 17:30:52 +0100 Subject: [PATCH 09/12] Use wait for request animation frame instead of timeout --- packages/rrweb-snapshot/test/integration.test.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/rrweb-snapshot/test/integration.test.ts b/packages/rrweb-snapshot/test/integration.test.ts index 26f57642a2..ab31b58c4a 100644 --- a/packages/rrweb-snapshot/test/integration.test.ts +++ b/packages/rrweb-snapshot/test/integration.test.ts @@ -207,7 +207,7 @@ iframe.contentDocument.querySelector('center').clientHeight inlineImages: true, inlineStylesheet: false })`); - await page.waitForTimeout(100); + await waitForRAF(page); const snapshot = (await page.evaluate( 'JSON.stringify(snapshot, null, 2);', )) as string; @@ -227,7 +227,7 @@ iframe.contentDocument.querySelector('center').clientHeight inlineImages: true, inlineStylesheet: false })`); - await page.waitForTimeout(100); + await waitForRAF(page); const snapshot = (await page.evaluate( 'JSON.stringify(snapshot, null, 2);', )) as string; @@ -252,7 +252,7 @@ iframe.contentDocument.querySelector('center').clientHeight window.snapshot = sn; } })`); - await page.waitForTimeout(100); + await waitForRAF(page); const snapshot = (await page.evaluate( 'JSON.stringify(window.snapshot, null, 2);', )) as string; @@ -277,7 +277,7 @@ iframe.contentDocument.querySelector('center').clientHeight window.snapshot = sn; } })`); - await page.waitForTimeout(100); + await waitForRAF(page); const snapshot = (await page.evaluate( 'JSON.stringify(window.snapshot, null, 2);', )) as string; @@ -295,7 +295,7 @@ iframe.contentDocument.querySelector('center').clientHeight window.snapshot = rrweb.snapshot(document, { inlineStylesheet: true, })`); - await page.waitForTimeout(100); + await waitForRAF(page); const snapshot = (await page.evaluate( 'JSON.stringify(window.snapshot, null, 2);', )) as string; From 7ce90b32d80f780755b67098d4874909250f9704 Mon Sep 17 00:00:00 2001 From: Justin Halsall Date: Mon, 9 Jan 2023 11:09:42 +0100 Subject: [PATCH 10/12] Force append to happen in second event --- packages/rrweb/test/html/frame2.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/rrweb/test/html/frame2.html b/packages/rrweb/test/html/frame2.html index e058e4591b..205059a52a 100644 --- a/packages/rrweb/test/html/frame2.html +++ b/packages/rrweb/test/html/frame2.html @@ -11,8 +11,8 @@ From 18fec80254c2b5aa6be388188c7bac8e184e7a19 Mon Sep 17 00:00:00 2001 From: Justin Halsall Date: Mon, 9 Jan 2023 11:20:18 +0100 Subject: [PATCH 11/12] Wait till iframe was loaded (now 100ms) --- packages/rrweb/test/integration.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts index 82ce7d1933..87e4fd2016 100644 --- a/packages/rrweb/test/integration.test.ts +++ b/packages/rrweb/test/integration.test.ts @@ -672,7 +672,7 @@ describe('record integration tests', function (this: ISuite) { await page.goto('about:blank'); await page.setContent(getHtml.call(this, 'frame2.html')); - await page.waitForTimeout(10); // wait till frame was added to dom + await page.waitForSelector('iframe'); // wait for iframe to get added await waitForRAF(page); // wait till browser loaded contents of frame await page.evaluate(() => { From 0ce9db9b7c6e24f8384564bd4bde3af970a8db98 Mon Sep 17 00:00:00 2001 From: Justin Halsall Date: Mon, 9 Jan 2023 12:00:42 +0100 Subject: [PATCH 12/12] Round the currentTime to 1 decimal place --- packages/rrweb/test/utils.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/rrweb/test/utils.ts b/packages/rrweb/test/utils.ts index b1c799498d..d4bd396f63 100644 --- a/packages/rrweb/test/utils.ts +++ b/packages/rrweb/test/utils.ts @@ -185,6 +185,14 @@ function stringifySnapshots(snapshots: eventWithTime[]): string { } } }); + } else if ( + s.type === EventType.IncrementalSnapshot && + s.data.source === IncrementalSource.MediaInteraction + ) { + // round the currentTime to 1 decimal place + if (s.data.currentTime) { + s.data.currentTime = Math.round(s.data.currentTime * 10) / 10; + } } delete (s as Optional).timestamp; return s as event;