From d78bfd3b7f9f5e77c139e4b82e8358f75cdb8c76 Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Thu, 16 Feb 2023 13:11:28 +0100 Subject: [PATCH 1/4] test(replay): Test that blocking elements works as expected --- .../{privacy => default-privacy}/init.js | 0 .../template.html | 5 +- .../{privacy => default-privacy}/test.ts | 0 .../test.ts-snapshots/privacy-chromium.json | 73 ++-- .../test.ts-snapshots/privacy-firefox.json | 73 ++-- .../test.ts-snapshots/privacy-webkit.json | 73 ++-- .../test.ts-snapshots/privacy.json | 277 +++++++++++++++ .../suites/replay/privacy-block/init.js | 20 ++ .../suites/replay/privacy-block/template.html | 22 ++ .../suites/replay/privacy-block/test.ts | 31 ++ .../test.ts-snapshots/privacy-chromium.json | 319 ++++++++++++++++++ .../test.ts-snapshots/privacy-firefox.json | 319 ++++++++++++++++++ .../test.ts-snapshots/privacy-webkit.json | 319 ++++++++++++++++++ 13 files changed, 1437 insertions(+), 94 deletions(-) rename packages/integration-tests/suites/replay/{privacy => default-privacy}/init.js (100%) rename packages/integration-tests/suites/replay/{privacy => default-privacy}/template.html (86%) rename packages/integration-tests/suites/replay/{privacy => default-privacy}/test.ts (100%) rename packages/integration-tests/suites/replay/{privacy => default-privacy}/test.ts-snapshots/privacy-chromium.json (91%) rename packages/integration-tests/suites/replay/{privacy => default-privacy}/test.ts-snapshots/privacy-firefox.json (91%) rename packages/integration-tests/suites/replay/{privacy => default-privacy}/test.ts-snapshots/privacy-webkit.json (91%) create mode 100644 packages/integration-tests/suites/replay/default-privacy/test.ts-snapshots/privacy.json create mode 100644 packages/integration-tests/suites/replay/privacy-block/init.js create mode 100644 packages/integration-tests/suites/replay/privacy-block/template.html create mode 100644 packages/integration-tests/suites/replay/privacy-block/test.ts create mode 100644 packages/integration-tests/suites/replay/privacy-block/test.ts-snapshots/privacy-chromium.json create mode 100644 packages/integration-tests/suites/replay/privacy-block/test.ts-snapshots/privacy-firefox.json create mode 100644 packages/integration-tests/suites/replay/privacy-block/test.ts-snapshots/privacy-webkit.json diff --git a/packages/integration-tests/suites/replay/privacy/init.js b/packages/integration-tests/suites/replay/default-privacy/init.js similarity index 100% rename from packages/integration-tests/suites/replay/privacy/init.js rename to packages/integration-tests/suites/replay/default-privacy/init.js diff --git a/packages/integration-tests/suites/replay/privacy/template.html b/packages/integration-tests/suites/replay/default-privacy/template.html similarity index 86% rename from packages/integration-tests/suites/replay/privacy/template.html rename to packages/integration-tests/suites/replay/default-privacy/template.html index 2eb0f8df7b37..a8279dad4d17 100644 --- a/packages/integration-tests/suites/replay/privacy/template.html +++ b/packages/integration-tests/suites/replay/default-privacy/template.html @@ -1,6 +1,9 @@ - + + + +
This should be masked by default
diff --git a/packages/integration-tests/suites/replay/privacy/test.ts b/packages/integration-tests/suites/replay/default-privacy/test.ts similarity index 100% rename from packages/integration-tests/suites/replay/privacy/test.ts rename to packages/integration-tests/suites/replay/default-privacy/test.ts diff --git a/packages/integration-tests/suites/replay/privacy/test.ts-snapshots/privacy-chromium.json b/packages/integration-tests/suites/replay/default-privacy/test.ts-snapshots/privacy-chromium.json similarity index 91% rename from packages/integration-tests/suites/replay/privacy/test.ts-snapshots/privacy-chromium.json rename to packages/integration-tests/suites/replay/default-privacy/test.ts-snapshots/privacy-chromium.json index d0cb968d61ff..f29f31d2eb75 100644 --- a/packages/integration-tests/suites/replay/privacy/test.ts-snapshots/privacy-chromium.json +++ b/packages/integration-tests/suites/replay/default-privacy/test.ts-snapshots/privacy-chromium.json @@ -27,6 +27,17 @@ }, "childNodes": [], "id": 5 + }, + { + "type": 2, + "tagName": "link", + "attributes": { + "rel": "icon", + "type": "image/png", + "href": "file://assets/icon/favicon.png" + }, + "childNodes": [], + "id": 6 } ], "id": 4 @@ -34,7 +45,7 @@ { "type": 3, "textContent": "\n ", - "id": 6 + "id": 7 }, { "type": 2, @@ -44,7 +55,7 @@ { "type": 3, "textContent": "\n ", - "id": 8 + "id": 9 }, { "type": 2, @@ -57,15 +68,15 @@ { "type": 3, "textContent": "***** **", - "id": 10 + "id": 11 } ], - "id": 9 + "id": 10 }, { "type": 3, "textContent": "\n ", - "id": 11 + "id": 12 }, { "type": 2, @@ -75,15 +86,15 @@ { "type": 3, "textContent": "**** ****** ** ****** ** *******", - "id": 13 + "id": 14 } ], - "id": 12 + "id": 13 }, { "type": 3, "textContent": "\n ", - "id": 14 + "id": 15 }, { "type": 2, @@ -95,15 +106,15 @@ { "type": 3, "textContent": "This should be unmasked due to data attribute", - "id": 16 + "id": 17 } ], - "id": 15 + "id": 16 }, { "type": 3, "textContent": "\n ", - "id": 17 + "id": 18 }, { "type": 2, @@ -112,12 +123,12 @@ "placeholder": "*********** ****** ** ******" }, "childNodes": [], - "id": 18 + "id": 19 }, { "type": 3, "textContent": "\n ", - "id": 19 + "id": 20 }, { "type": 2, @@ -129,15 +140,15 @@ { "type": 3, "textContent": "***** ****** ** ******", - "id": 21 + "id": 22 } ], - "id": 20 + "id": 21 }, { "type": 3, "textContent": "\n ", - "id": 22 + "id": 23 }, { "type": 2, @@ -148,12 +159,12 @@ }, "childNodes": [], "isSVG": true, - "id": 23 + "id": 24 }, { "type": 3, "textContent": "\n ", - "id": 24 + "id": 25 }, { "type": 2, @@ -172,7 +183,7 @@ }, "childNodes": [], "isSVG": true, - "id": 26 + "id": 27 }, { "type": 2, @@ -180,7 +191,7 @@ "attributes": {}, "childNodes": [], "isSVG": true, - "id": 27 + "id": 28 }, { "type": 2, @@ -188,16 +199,16 @@ "attributes": {}, "childNodes": [], "isSVG": true, - "id": 28 + "id": 29 } ], "isSVG": true, - "id": 25 + "id": 26 }, { "type": 3, "textContent": "\n ", - "id": 29 + "id": 30 }, { "type": 2, @@ -207,12 +218,12 @@ "rr_height": "100px" }, "childNodes": [], - "id": 30 + "id": 31 }, { "type": 3, "textContent": "\n ", - "id": 31 + "id": 32 }, { "type": 2, @@ -223,12 +234,12 @@ "src": "file:///none.png" }, "childNodes": [], - "id": 32 + "id": 33 }, { "type": 3, "textContent": "\n ", - "id": 33 + "id": 34 }, { "type": 2, @@ -238,20 +249,20 @@ "rr_height": "30px" }, "childNodes": [], - "id": 34 + "id": 35 }, { "type": 3, "textContent": "\n ", - "id": 35 + "id": 36 }, { "type": 3, "textContent": "\n\n", - "id": 36 + "id": 37 } ], - "id": 7 + "id": 8 } ], "id": 3 diff --git a/packages/integration-tests/suites/replay/privacy/test.ts-snapshots/privacy-firefox.json b/packages/integration-tests/suites/replay/default-privacy/test.ts-snapshots/privacy-firefox.json similarity index 91% rename from packages/integration-tests/suites/replay/privacy/test.ts-snapshots/privacy-firefox.json rename to packages/integration-tests/suites/replay/default-privacy/test.ts-snapshots/privacy-firefox.json index d0cb968d61ff..c75ad0326401 100644 --- a/packages/integration-tests/suites/replay/privacy/test.ts-snapshots/privacy-firefox.json +++ b/packages/integration-tests/suites/replay/default-privacy/test.ts-snapshots/privacy-firefox.json @@ -27,6 +27,17 @@ }, "childNodes": [], "id": 5 + }, + { + "type": 2, + "tagName": "link", + "attributes": { + "rel": "icon", + "type": "image/png", + "href": "file:///icon/favicon.png" + }, + "childNodes": [], + "id": 6 } ], "id": 4 @@ -34,7 +45,7 @@ { "type": 3, "textContent": "\n ", - "id": 6 + "id": 7 }, { "type": 2, @@ -44,7 +55,7 @@ { "type": 3, "textContent": "\n ", - "id": 8 + "id": 9 }, { "type": 2, @@ -57,15 +68,15 @@ { "type": 3, "textContent": "***** **", - "id": 10 + "id": 11 } ], - "id": 9 + "id": 10 }, { "type": 3, "textContent": "\n ", - "id": 11 + "id": 12 }, { "type": 2, @@ -75,15 +86,15 @@ { "type": 3, "textContent": "**** ****** ** ****** ** *******", - "id": 13 + "id": 14 } ], - "id": 12 + "id": 13 }, { "type": 3, "textContent": "\n ", - "id": 14 + "id": 15 }, { "type": 2, @@ -95,15 +106,15 @@ { "type": 3, "textContent": "This should be unmasked due to data attribute", - "id": 16 + "id": 17 } ], - "id": 15 + "id": 16 }, { "type": 3, "textContent": "\n ", - "id": 17 + "id": 18 }, { "type": 2, @@ -112,12 +123,12 @@ "placeholder": "*********** ****** ** ******" }, "childNodes": [], - "id": 18 + "id": 19 }, { "type": 3, "textContent": "\n ", - "id": 19 + "id": 20 }, { "type": 2, @@ -129,15 +140,15 @@ { "type": 3, "textContent": "***** ****** ** ******", - "id": 21 + "id": 22 } ], - "id": 20 + "id": 21 }, { "type": 3, "textContent": "\n ", - "id": 22 + "id": 23 }, { "type": 2, @@ -148,12 +159,12 @@ }, "childNodes": [], "isSVG": true, - "id": 23 + "id": 24 }, { "type": 3, "textContent": "\n ", - "id": 24 + "id": 25 }, { "type": 2, @@ -172,7 +183,7 @@ }, "childNodes": [], "isSVG": true, - "id": 26 + "id": 27 }, { "type": 2, @@ -180,7 +191,7 @@ "attributes": {}, "childNodes": [], "isSVG": true, - "id": 27 + "id": 28 }, { "type": 2, @@ -188,16 +199,16 @@ "attributes": {}, "childNodes": [], "isSVG": true, - "id": 28 + "id": 29 } ], "isSVG": true, - "id": 25 + "id": 26 }, { "type": 3, "textContent": "\n ", - "id": 29 + "id": 30 }, { "type": 2, @@ -207,12 +218,12 @@ "rr_height": "100px" }, "childNodes": [], - "id": 30 + "id": 31 }, { "type": 3, "textContent": "\n ", - "id": 31 + "id": 32 }, { "type": 2, @@ -223,12 +234,12 @@ "src": "file:///none.png" }, "childNodes": [], - "id": 32 + "id": 33 }, { "type": 3, "textContent": "\n ", - "id": 33 + "id": 34 }, { "type": 2, @@ -238,20 +249,20 @@ "rr_height": "30px" }, "childNodes": [], - "id": 34 + "id": 35 }, { "type": 3, "textContent": "\n ", - "id": 35 + "id": 36 }, { "type": 3, "textContent": "\n\n", - "id": 36 + "id": 37 } ], - "id": 7 + "id": 8 } ], "id": 3 diff --git a/packages/integration-tests/suites/replay/privacy/test.ts-snapshots/privacy-webkit.json b/packages/integration-tests/suites/replay/default-privacy/test.ts-snapshots/privacy-webkit.json similarity index 91% rename from packages/integration-tests/suites/replay/privacy/test.ts-snapshots/privacy-webkit.json rename to packages/integration-tests/suites/replay/default-privacy/test.ts-snapshots/privacy-webkit.json index d0cb968d61ff..f29f31d2eb75 100644 --- a/packages/integration-tests/suites/replay/privacy/test.ts-snapshots/privacy-webkit.json +++ b/packages/integration-tests/suites/replay/default-privacy/test.ts-snapshots/privacy-webkit.json @@ -27,6 +27,17 @@ }, "childNodes": [], "id": 5 + }, + { + "type": 2, + "tagName": "link", + "attributes": { + "rel": "icon", + "type": "image/png", + "href": "file://assets/icon/favicon.png" + }, + "childNodes": [], + "id": 6 } ], "id": 4 @@ -34,7 +45,7 @@ { "type": 3, "textContent": "\n ", - "id": 6 + "id": 7 }, { "type": 2, @@ -44,7 +55,7 @@ { "type": 3, "textContent": "\n ", - "id": 8 + "id": 9 }, { "type": 2, @@ -57,15 +68,15 @@ { "type": 3, "textContent": "***** **", - "id": 10 + "id": 11 } ], - "id": 9 + "id": 10 }, { "type": 3, "textContent": "\n ", - "id": 11 + "id": 12 }, { "type": 2, @@ -75,15 +86,15 @@ { "type": 3, "textContent": "**** ****** ** ****** ** *******", - "id": 13 + "id": 14 } ], - "id": 12 + "id": 13 }, { "type": 3, "textContent": "\n ", - "id": 14 + "id": 15 }, { "type": 2, @@ -95,15 +106,15 @@ { "type": 3, "textContent": "This should be unmasked due to data attribute", - "id": 16 + "id": 17 } ], - "id": 15 + "id": 16 }, { "type": 3, "textContent": "\n ", - "id": 17 + "id": 18 }, { "type": 2, @@ -112,12 +123,12 @@ "placeholder": "*********** ****** ** ******" }, "childNodes": [], - "id": 18 + "id": 19 }, { "type": 3, "textContent": "\n ", - "id": 19 + "id": 20 }, { "type": 2, @@ -129,15 +140,15 @@ { "type": 3, "textContent": "***** ****** ** ******", - "id": 21 + "id": 22 } ], - "id": 20 + "id": 21 }, { "type": 3, "textContent": "\n ", - "id": 22 + "id": 23 }, { "type": 2, @@ -148,12 +159,12 @@ }, "childNodes": [], "isSVG": true, - "id": 23 + "id": 24 }, { "type": 3, "textContent": "\n ", - "id": 24 + "id": 25 }, { "type": 2, @@ -172,7 +183,7 @@ }, "childNodes": [], "isSVG": true, - "id": 26 + "id": 27 }, { "type": 2, @@ -180,7 +191,7 @@ "attributes": {}, "childNodes": [], "isSVG": true, - "id": 27 + "id": 28 }, { "type": 2, @@ -188,16 +199,16 @@ "attributes": {}, "childNodes": [], "isSVG": true, - "id": 28 + "id": 29 } ], "isSVG": true, - "id": 25 + "id": 26 }, { "type": 3, "textContent": "\n ", - "id": 29 + "id": 30 }, { "type": 2, @@ -207,12 +218,12 @@ "rr_height": "100px" }, "childNodes": [], - "id": 30 + "id": 31 }, { "type": 3, "textContent": "\n ", - "id": 31 + "id": 32 }, { "type": 2, @@ -223,12 +234,12 @@ "src": "file:///none.png" }, "childNodes": [], - "id": 32 + "id": 33 }, { "type": 3, "textContent": "\n ", - "id": 33 + "id": 34 }, { "type": 2, @@ -238,20 +249,20 @@ "rr_height": "30px" }, "childNodes": [], - "id": 34 + "id": 35 }, { "type": 3, "textContent": "\n ", - "id": 35 + "id": 36 }, { "type": 3, "textContent": "\n\n", - "id": 36 + "id": 37 } ], - "id": 7 + "id": 8 } ], "id": 3 diff --git a/packages/integration-tests/suites/replay/default-privacy/test.ts-snapshots/privacy.json b/packages/integration-tests/suites/replay/default-privacy/test.ts-snapshots/privacy.json new file mode 100644 index 000000000000..7072916d57ed --- /dev/null +++ b/packages/integration-tests/suites/replay/default-privacy/test.ts-snapshots/privacy.json @@ -0,0 +1,277 @@ +{ + "node": { + "type": 0, + "childNodes": [ + { + "type": 1, + "name": "html", + "publicId": "", + "systemId": "", + "id": 2 + }, + { + "type": 2, + "tagName": "html", + "attributes": {}, + "childNodes": [ + { + "type": 2, + "tagName": "head", + "attributes": {}, + "childNodes": [ + { + "type": 2, + "tagName": "meta", + "attributes": { + "charset": "utf-8" + }, + "childNodes": [], + "id": 5 + }, + { + "type": 2, + "tagName": "link", + "attributes": { + "rel": "icon", + "type": "image/png", + "href": "file:///Users/francesco/git/sentry-javascript/packages/integration-tests/suites/replay/default-privacy/dist/assets/icon/favicon.png" + }, + "childNodes": [], + "id": 6 + } + ], + "id": 4 + }, + { + "type": 3, + "textContent": "\n ", + "id": 7 + }, + { + "type": 2, + "tagName": "body", + "attributes": {}, + "childNodes": [ + { + "type": 3, + "textContent": "\n ", + "id": 9 + }, + { + "type": 2, + "tagName": "button", + "attributes": { + "aria-label": "***** **", + "onclick": "console.log('Test log')" + }, + "childNodes": [ + { + "type": 3, + "textContent": "***** **", + "id": 11 + } + ], + "id": 10 + }, + { + "type": 3, + "textContent": "\n ", + "id": 12 + }, + { + "type": 2, + "tagName": "div", + "attributes": {}, + "childNodes": [ + { + "type": 3, + "textContent": "**** ****** ** ****** ** *******", + "id": 14 + } + ], + "id": 13 + }, + { + "type": 3, + "textContent": "\n ", + "id": 15 + }, + { + "type": 2, + "tagName": "div", + "attributes": { + "data-sentry-unmask": "" + }, + "childNodes": [ + { + "type": 3, + "textContent": "This should be unmasked due to data attribute", + "id": 17 + } + ], + "id": 16 + }, + { + "type": 3, + "textContent": "\n ", + "id": 18 + }, + { + "type": 2, + "tagName": "input", + "attributes": { + "placeholder": "*********** ****** ** ******" + }, + "childNodes": [], + "id": 19 + }, + { + "type": 3, + "textContent": "\n ", + "id": 20 + }, + { + "type": 2, + "tagName": "div", + "attributes": { + "title": "***** ****** ** ******" + }, + "childNodes": [ + { + "type": 3, + "textContent": "***** ****** ** ******", + "id": 22 + } + ], + "id": 21 + }, + { + "type": 3, + "textContent": "\n ", + "id": 23 + }, + { + "type": 2, + "tagName": "svg", + "attributes": { + "rr_width": "200px", + "rr_height": "200px" + }, + "childNodes": [], + "isSVG": true, + "id": 24 + }, + { + "type": 3, + "textContent": "\n ", + "id": 25 + }, + { + "type": 2, + "tagName": "svg", + "attributes": { + "style": "width:200px;height:200px", + "viewBox": "0 0 80 80", + "data-sentry-unblock": "" + }, + "childNodes": [ + { + "type": 2, + "tagName": "path", + "attributes": { + "d": "" + }, + "childNodes": [], + "isSVG": true, + "id": 27 + }, + { + "type": 2, + "tagName": "area", + "attributes": {}, + "childNodes": [], + "isSVG": true, + "id": 28 + }, + { + "type": 2, + "tagName": "rect", + "attributes": {}, + "childNodes": [], + "isSVG": true, + "id": 29 + } + ], + "isSVG": true, + "id": 26 + }, + { + "type": 3, + "textContent": "\n ", + "id": 30 + }, + { + "type": 2, + "tagName": "img", + "attributes": { + "rr_width": "100px", + "rr_height": "100px" + }, + "childNodes": [], + "id": 31 + }, + { + "type": 3, + "textContent": "\n ", + "id": 32 + }, + { + "type": 2, + "tagName": "img", + "attributes": { + "data-sentry-unblock": "", + "style": "width:100px;height:100px", + "src": "file:///none.png" + }, + "childNodes": [], + "id": 33 + }, + { + "type": 3, + "textContent": "\n ", + "id": 34 + }, + { + "type": 2, + "tagName": "video", + "attributes": { + "rr_width": "30px", + "rr_height": "30px" + }, + "childNodes": [], + "id": 35 + }, + { + "type": 3, + "textContent": "\n ", + "id": 36 + }, + { + "type": 3, + "textContent": "\n\n", + "id": 37 + } + ], + "id": 8 + } + ], + "id": 3 + } + ], + "id": 1 + }, + "initialOffset": { + "left": 0, + "top": 0 + } +} \ No newline at end of file diff --git a/packages/integration-tests/suites/replay/privacy-block/init.js b/packages/integration-tests/suites/replay/privacy-block/init.js new file mode 100644 index 000000000000..31d8a00ed0fd --- /dev/null +++ b/packages/integration-tests/suites/replay/privacy-block/init.js @@ -0,0 +1,20 @@ +import * as Sentry from '@sentry/browser'; +import { Replay } from '@sentry/replay'; + +window.Sentry = Sentry; +window.Replay = new Replay({ + flushMinDelay: 200, + flushMaxDelay: 200, + useCompression: false, + blockAllMedia: false, + block: ['link[rel="icon"]', 'video', '.nested-hide'], +}); + +Sentry.init({ + dsn: 'https://public@dsn.ingest.sentry.io/1337', + sampleRate: 0, + replaysSessionSampleRate: 1.0, + replaysOnErrorSampleRate: 0.0, + + integrations: [window.Replay], +}); diff --git a/packages/integration-tests/suites/replay/privacy-block/template.html b/packages/integration-tests/suites/replay/privacy-block/template.html new file mode 100644 index 000000000000..ff5aa196951c --- /dev/null +++ b/packages/integration-tests/suites/replay/privacy-block/template.html @@ -0,0 +1,22 @@ + + + + + + + + +
This should be masked by default
+
This should be unmasked due to data attribute
+ +
Title should be masked
+ + + + + +
+
This should be hidden.
+
+ + diff --git a/packages/integration-tests/suites/replay/privacy-block/test.ts b/packages/integration-tests/suites/replay/privacy-block/test.ts new file mode 100644 index 000000000000..68323e70ff0f --- /dev/null +++ b/packages/integration-tests/suites/replay/privacy-block/test.ts @@ -0,0 +1,31 @@ +import { expect } from '@playwright/test'; +import { EventType } from '@sentry-internal/rrweb'; +import type { RecordingEvent } from '@sentry/replay/build/npm/types/types'; + +import { sentryTest } from '../../../utils/fixtures'; +import { envelopeRequestParser } from '../../../utils/helpers'; +import { shouldSkipReplayTest, waitForReplayRequest } from '../../../utils/replayHelpers'; + +sentryTest('should allow to manually block elements', async ({ getLocalTestPath, page }) => { + if (shouldSkipReplayTest()) { + sentryTest.skip(); + } + + const reqPromise0 = waitForReplayRequest(page, 0); + + await page.route('https://dsn.ingest.sentry.io/**/*', route => { + return route.fulfill({ + status: 200, + contentType: 'application/json', + body: JSON.stringify({ id: 'test-id' }), + }); + }); + + const url = await getLocalTestPath({ testDir: __dirname }); + + await page.goto(url); + const replayPayload = envelopeRequestParser(await reqPromise0, 5); + const checkoutEvent = replayPayload.find(({ type }) => type === EventType.FullSnapshot); + + expect(JSON.stringify(checkoutEvent?.data, null, 2)).toMatchSnapshot('privacy.json'); +}); diff --git a/packages/integration-tests/suites/replay/privacy-block/test.ts-snapshots/privacy-chromium.json b/packages/integration-tests/suites/replay/privacy-block/test.ts-snapshots/privacy-chromium.json new file mode 100644 index 000000000000..30fd032c1528 --- /dev/null +++ b/packages/integration-tests/suites/replay/privacy-block/test.ts-snapshots/privacy-chromium.json @@ -0,0 +1,319 @@ +{ + "node": { + "type": 0, + "childNodes": [ + { + "type": 1, + "name": "html", + "publicId": "", + "systemId": "", + "id": 2 + }, + { + "type": 2, + "tagName": "html", + "attributes": {}, + "childNodes": [ + { + "type": 2, + "tagName": "head", + "attributes": {}, + "childNodes": [ + { + "type": 2, + "tagName": "meta", + "attributes": { + "charset": "utf-8" + }, + "childNodes": [], + "id": 5 + }, + { + "type": 2, + "tagName": "link", + "attributes": { + "rr_width": "0px", + "rr_height": "0px" + }, + "childNodes": [], + "id": 6 + } + ], + "id": 4 + }, + { + "type": 3, + "textContent": "\n ", + "id": 7 + }, + { + "type": 2, + "tagName": "body", + "attributes": {}, + "childNodes": [ + { + "type": 3, + "textContent": "\n ", + "id": 9 + }, + { + "type": 2, + "tagName": "button", + "attributes": { + "aria-label": "***** **", + "onclick": "console.log('Test log')" + }, + "childNodes": [ + { + "type": 3, + "textContent": "***** **", + "id": 11 + } + ], + "id": 10 + }, + { + "type": 3, + "textContent": "\n ", + "id": 12 + }, + { + "type": 2, + "tagName": "div", + "attributes": {}, + "childNodes": [ + { + "type": 3, + "textContent": "**** ****** ** ****** ** *******", + "id": 14 + } + ], + "id": 13 + }, + { + "type": 3, + "textContent": "\n ", + "id": 15 + }, + { + "type": 2, + "tagName": "div", + "attributes": { + "data-sentry-unmask": "" + }, + "childNodes": [ + { + "type": 3, + "textContent": "This should be unmasked due to data attribute", + "id": 17 + } + ], + "id": 16 + }, + { + "type": 3, + "textContent": "\n ", + "id": 18 + }, + { + "type": 2, + "tagName": "input", + "attributes": { + "placeholder": "*********** ****** ** ******" + }, + "childNodes": [], + "id": 19 + }, + { + "type": 3, + "textContent": "\n ", + "id": 20 + }, + { + "type": 2, + "tagName": "div", + "attributes": { + "title": "***** ****** ** ******" + }, + "childNodes": [ + { + "type": 3, + "textContent": "***** ****** ** ******", + "id": 22 + } + ], + "id": 21 + }, + { + "type": 3, + "textContent": "\n ", + "id": 23 + }, + { + "type": 2, + "tagName": "svg", + "attributes": { + "style": "width:200px;height:200px", + "viewBox": "0 0 80 80" + }, + "childNodes": [ + { + "type": 2, + "tagName": "path", + "attributes": { + "d": "" + }, + "childNodes": [], + "isSVG": true, + "id": 25 + }, + { + "type": 2, + "tagName": "area", + "attributes": {}, + "childNodes": [], + "isSVG": true, + "id": 26 + }, + { + "type": 2, + "tagName": "rect", + "attributes": {}, + "childNodes": [], + "isSVG": true, + "id": 27 + } + ], + "isSVG": true, + "id": 24 + }, + { + "type": 3, + "textContent": "\n ", + "id": 28 + }, + { + "type": 2, + "tagName": "svg", + "attributes": { + "style": "width:200px;height:200px", + "viewBox": "0 0 80 80", + "data-sentry-unblock": "" + }, + "childNodes": [ + { + "type": 2, + "tagName": "path", + "attributes": { + "d": "" + }, + "childNodes": [], + "isSVG": true, + "id": 30 + }, + { + "type": 2, + "tagName": "area", + "attributes": {}, + "childNodes": [], + "isSVG": true, + "id": 31 + }, + { + "type": 2, + "tagName": "rect", + "attributes": {}, + "childNodes": [], + "isSVG": true, + "id": 32 + } + ], + "isSVG": true, + "id": 29 + }, + { + "type": 3, + "textContent": "\n ", + "id": 33 + }, + { + "type": 2, + "tagName": "img", + "attributes": { + "style": "width:100px;height:100px", + "src": "file:///none.png" + }, + "childNodes": [], + "id": 34 + }, + { + "type": 3, + "textContent": "\n ", + "id": 35 + }, + { + "type": 2, + "tagName": "img", + "attributes": { + "data-sentry-unblock": "", + "style": "width:100px;height:100px", + "src": "file:///none.png" + }, + "childNodes": [], + "id": 36 + }, + { + "type": 3, + "textContent": "\n ", + "id": 37 + }, + { + "type": 2, + "tagName": "video", + "attributes": { + "rr_width": "30px", + "rr_height": "30px" + }, + "childNodes": [], + "id": 38 + }, + { + "type": 3, + "textContent": "\n ", + "id": 39 + }, + { + "type": 2, + "tagName": "div", + "attributes": { + "class": "nested-hide", + "rr_width": "1264px", + "rr_height": "18.5px" + }, + "childNodes": [], + "id": 40 + }, + { + "type": 3, + "textContent": "\n ", + "id": 41 + }, + { + "type": 3, + "textContent": "\n\n", + "id": 42 + } + ], + "id": 8 + } + ], + "id": 3 + } + ], + "id": 1 + }, + "initialOffset": { + "left": 0, + "top": 0 + } +} \ No newline at end of file diff --git a/packages/integration-tests/suites/replay/privacy-block/test.ts-snapshots/privacy-firefox.json b/packages/integration-tests/suites/replay/privacy-block/test.ts-snapshots/privacy-firefox.json new file mode 100644 index 000000000000..a0a94c2c2ebe --- /dev/null +++ b/packages/integration-tests/suites/replay/privacy-block/test.ts-snapshots/privacy-firefox.json @@ -0,0 +1,319 @@ +{ + "node": { + "type": 0, + "childNodes": [ + { + "type": 1, + "name": "html", + "publicId": "", + "systemId": "", + "id": 2 + }, + { + "type": 2, + "tagName": "html", + "attributes": {}, + "childNodes": [ + { + "type": 2, + "tagName": "head", + "attributes": {}, + "childNodes": [ + { + "type": 2, + "tagName": "meta", + "attributes": { + "charset": "utf-8" + }, + "childNodes": [], + "id": 5 + }, + { + "type": 2, + "tagName": "link", + "attributes": { + "rr_width": "0px", + "rr_height": "0px" + }, + "childNodes": [], + "id": 6 + } + ], + "id": 4 + }, + { + "type": 3, + "textContent": "\n ", + "id": 7 + }, + { + "type": 2, + "tagName": "body", + "attributes": {}, + "childNodes": [ + { + "type": 3, + "textContent": "\n ", + "id": 9 + }, + { + "type": 2, + "tagName": "button", + "attributes": { + "aria-label": "***** **", + "onclick": "console.log('Test log')" + }, + "childNodes": [ + { + "type": 3, + "textContent": "***** **", + "id": 11 + } + ], + "id": 10 + }, + { + "type": 3, + "textContent": "\n ", + "id": 12 + }, + { + "type": 2, + "tagName": "div", + "attributes": {}, + "childNodes": [ + { + "type": 3, + "textContent": "**** ****** ** ****** ** *******", + "id": 14 + } + ], + "id": 13 + }, + { + "type": 3, + "textContent": "\n ", + "id": 15 + }, + { + "type": 2, + "tagName": "div", + "attributes": { + "data-sentry-unmask": "" + }, + "childNodes": [ + { + "type": 3, + "textContent": "This should be unmasked due to data attribute", + "id": 17 + } + ], + "id": 16 + }, + { + "type": 3, + "textContent": "\n ", + "id": 18 + }, + { + "type": 2, + "tagName": "input", + "attributes": { + "placeholder": "*********** ****** ** ******" + }, + "childNodes": [], + "id": 19 + }, + { + "type": 3, + "textContent": "\n ", + "id": 20 + }, + { + "type": 2, + "tagName": "div", + "attributes": { + "title": "***** ****** ** ******" + }, + "childNodes": [ + { + "type": 3, + "textContent": "***** ****** ** ******", + "id": 22 + } + ], + "id": 21 + }, + { + "type": 3, + "textContent": "\n ", + "id": 23 + }, + { + "type": 2, + "tagName": "svg", + "attributes": { + "style": "width:200px;height:200px", + "viewBox": "0 0 80 80" + }, + "childNodes": [ + { + "type": 2, + "tagName": "path", + "attributes": { + "d": "" + }, + "childNodes": [], + "isSVG": true, + "id": 25 + }, + { + "type": 2, + "tagName": "area", + "attributes": {}, + "childNodes": [], + "isSVG": true, + "id": 26 + }, + { + "type": 2, + "tagName": "rect", + "attributes": {}, + "childNodes": [], + "isSVG": true, + "id": 27 + } + ], + "isSVG": true, + "id": 24 + }, + { + "type": 3, + "textContent": "\n ", + "id": 28 + }, + { + "type": 2, + "tagName": "svg", + "attributes": { + "style": "width:200px;height:200px", + "viewBox": "0 0 80 80", + "data-sentry-unblock": "" + }, + "childNodes": [ + { + "type": 2, + "tagName": "path", + "attributes": { + "d": "" + }, + "childNodes": [], + "isSVG": true, + "id": 30 + }, + { + "type": 2, + "tagName": "area", + "attributes": {}, + "childNodes": [], + "isSVG": true, + "id": 31 + }, + { + "type": 2, + "tagName": "rect", + "attributes": {}, + "childNodes": [], + "isSVG": true, + "id": 32 + } + ], + "isSVG": true, + "id": 29 + }, + { + "type": 3, + "textContent": "\n ", + "id": 33 + }, + { + "type": 2, + "tagName": "img", + "attributes": { + "style": "width:100px;height:100px", + "src": "file:///none.png" + }, + "childNodes": [], + "id": 34 + }, + { + "type": 3, + "textContent": "\n ", + "id": 35 + }, + { + "type": 2, + "tagName": "img", + "attributes": { + "data-sentry-unblock": "", + "style": "width:100px;height:100px", + "src": "file:///none.png" + }, + "childNodes": [], + "id": 36 + }, + { + "type": 3, + "textContent": "\n ", + "id": 37 + }, + { + "type": 2, + "tagName": "video", + "attributes": { + "rr_width": "30px", + "rr_height": "30px" + }, + "childNodes": [], + "id": 38 + }, + { + "type": 3, + "textContent": "\n ", + "id": 39 + }, + { + "type": 2, + "tagName": "div", + "attributes": { + "class": "nested-hide", + "rr_width": "1264px", + "rr_height": "19.199996948242188px" + }, + "childNodes": [], + "id": 40 + }, + { + "type": 3, + "textContent": "\n ", + "id": 41 + }, + { + "type": 3, + "textContent": "\n\n", + "id": 42 + } + ], + "id": 8 + } + ], + "id": 3 + } + ], + "id": 1 + }, + "initialOffset": { + "left": 0, + "top": 0 + } +} \ No newline at end of file diff --git a/packages/integration-tests/suites/replay/privacy-block/test.ts-snapshots/privacy-webkit.json b/packages/integration-tests/suites/replay/privacy-block/test.ts-snapshots/privacy-webkit.json new file mode 100644 index 000000000000..4b08d64a07b3 --- /dev/null +++ b/packages/integration-tests/suites/replay/privacy-block/test.ts-snapshots/privacy-webkit.json @@ -0,0 +1,319 @@ +{ + "node": { + "type": 0, + "childNodes": [ + { + "type": 1, + "name": "html", + "publicId": "", + "systemId": "", + "id": 2 + }, + { + "type": 2, + "tagName": "html", + "attributes": {}, + "childNodes": [ + { + "type": 2, + "tagName": "head", + "attributes": {}, + "childNodes": [ + { + "type": 2, + "tagName": "meta", + "attributes": { + "charset": "utf-8" + }, + "childNodes": [], + "id": 5 + }, + { + "type": 2, + "tagName": "link", + "attributes": { + "rr_width": "0px", + "rr_height": "0px" + }, + "childNodes": [], + "id": 6 + } + ], + "id": 4 + }, + { + "type": 3, + "textContent": "\n ", + "id": 7 + }, + { + "type": 2, + "tagName": "body", + "attributes": {}, + "childNodes": [ + { + "type": 3, + "textContent": "\n ", + "id": 9 + }, + { + "type": 2, + "tagName": "button", + "attributes": { + "aria-label": "***** **", + "onclick": "console.log('Test log')" + }, + "childNodes": [ + { + "type": 3, + "textContent": "***** **", + "id": 11 + } + ], + "id": 10 + }, + { + "type": 3, + "textContent": "\n ", + "id": 12 + }, + { + "type": 2, + "tagName": "div", + "attributes": {}, + "childNodes": [ + { + "type": 3, + "textContent": "**** ****** ** ****** ** *******", + "id": 14 + } + ], + "id": 13 + }, + { + "type": 3, + "textContent": "\n ", + "id": 15 + }, + { + "type": 2, + "tagName": "div", + "attributes": { + "data-sentry-unmask": "" + }, + "childNodes": [ + { + "type": 3, + "textContent": "This should be unmasked due to data attribute", + "id": 17 + } + ], + "id": 16 + }, + { + "type": 3, + "textContent": "\n ", + "id": 18 + }, + { + "type": 2, + "tagName": "input", + "attributes": { + "placeholder": "*********** ****** ** ******" + }, + "childNodes": [], + "id": 19 + }, + { + "type": 3, + "textContent": "\n ", + "id": 20 + }, + { + "type": 2, + "tagName": "div", + "attributes": { + "title": "***** ****** ** ******" + }, + "childNodes": [ + { + "type": 3, + "textContent": "***** ****** ** ******", + "id": 22 + } + ], + "id": 21 + }, + { + "type": 3, + "textContent": "\n ", + "id": 23 + }, + { + "type": 2, + "tagName": "svg", + "attributes": { + "style": "width:200px;height:200px", + "viewBox": "0 0 80 80" + }, + "childNodes": [ + { + "type": 2, + "tagName": "path", + "attributes": { + "d": "" + }, + "childNodes": [], + "isSVG": true, + "id": 25 + }, + { + "type": 2, + "tagName": "area", + "attributes": {}, + "childNodes": [], + "isSVG": true, + "id": 26 + }, + { + "type": 2, + "tagName": "rect", + "attributes": {}, + "childNodes": [], + "isSVG": true, + "id": 27 + } + ], + "isSVG": true, + "id": 24 + }, + { + "type": 3, + "textContent": "\n ", + "id": 28 + }, + { + "type": 2, + "tagName": "svg", + "attributes": { + "style": "width:200px;height:200px", + "viewBox": "0 0 80 80", + "data-sentry-unblock": "" + }, + "childNodes": [ + { + "type": 2, + "tagName": "path", + "attributes": { + "d": "" + }, + "childNodes": [], + "isSVG": true, + "id": 30 + }, + { + "type": 2, + "tagName": "area", + "attributes": {}, + "childNodes": [], + "isSVG": true, + "id": 31 + }, + { + "type": 2, + "tagName": "rect", + "attributes": {}, + "childNodes": [], + "isSVG": true, + "id": 32 + } + ], + "isSVG": true, + "id": 29 + }, + { + "type": 3, + "textContent": "\n ", + "id": 33 + }, + { + "type": 2, + "tagName": "img", + "attributes": { + "style": "width:100px;height:100px", + "src": "file:///none.png" + }, + "childNodes": [], + "id": 34 + }, + { + "type": 3, + "textContent": "\n ", + "id": 35 + }, + { + "type": 2, + "tagName": "img", + "attributes": { + "data-sentry-unblock": "", + "style": "width:100px;height:100px", + "src": "file:///none.png" + }, + "childNodes": [], + "id": 36 + }, + { + "type": 3, + "textContent": "\n ", + "id": 37 + }, + { + "type": 2, + "tagName": "video", + "attributes": { + "rr_width": "30px", + "rr_height": "30px" + }, + "childNodes": [], + "id": 38 + }, + { + "type": 3, + "textContent": "\n ", + "id": 39 + }, + { + "type": 2, + "tagName": "div", + "attributes": { + "class": "nested-hide", + "rr_width": "1264px", + "rr_height": "18px" + }, + "childNodes": [], + "id": 40 + }, + { + "type": 3, + "textContent": "\n ", + "id": 41 + }, + { + "type": 3, + "textContent": "\n\n", + "id": 42 + } + ], + "id": 8 + } + ], + "id": 3 + } + ], + "id": 1 + }, + "initialOffset": { + "left": 0, + "top": 0 + } +} \ No newline at end of file From 20f3e6238ab6fdb78b7c1944bf0a5248e8fd000c Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Mon, 20 Feb 2023 09:49:30 +0100 Subject: [PATCH 2/4] update snapshots WIP ? WIP? add .gitginore --- packages/integration-tests/.gitignore | 1 + .../{privacy-block => privacyBlock}/init.js | 0 .../template.html | 2 +- .../{privacy-block => privacyBlock}/test.ts | 0 .../test.ts-snapshots/privacy-chromium.json} | 0 .../test.ts-snapshots/privacy-firefox.json | 0 .../test.ts-snapshots/privacy-webkit.json} | 2 +- .../test.ts-snapshots/privacy.json | 125 +++++++++++++----- .../init.js | 0 .../template.html | 0 .../test.ts | 0 .../test.ts-snapshots/privacy-chromium.json | 0 .../test.ts-snapshots/privacy-firefox.json | 0 .../test.ts-snapshots/privacy-webkit.json | 0 .../test.ts-snapshots/privacy.json | 2 +- 15 files changed, 93 insertions(+), 39 deletions(-) create mode 100644 packages/integration-tests/.gitignore rename packages/integration-tests/suites/replay/{privacy-block => privacyBlock}/init.js (100%) rename packages/integration-tests/suites/replay/{privacy-block => privacyBlock}/template.html (92%) rename packages/integration-tests/suites/replay/{privacy-block => privacyBlock}/test.ts (100%) rename packages/integration-tests/suites/replay/{privacy-block/test.ts-snapshots/privacy-webkit.json => privacyBlock/test.ts-snapshots/privacy-chromium.json} (100%) rename packages/integration-tests/suites/replay/{privacy-block => privacyBlock}/test.ts-snapshots/privacy-firefox.json (100%) rename packages/integration-tests/suites/replay/{privacy-block/test.ts-snapshots/privacy-chromium.json => privacyBlock/test.ts-snapshots/privacy-webkit.json} (99%) rename packages/integration-tests/suites/replay/{privacy => privacyBlock}/test.ts-snapshots/privacy.json (75%) rename packages/integration-tests/suites/replay/{default-privacy => privacyDefault}/init.js (100%) rename packages/integration-tests/suites/replay/{default-privacy => privacyDefault}/template.html (100%) rename packages/integration-tests/suites/replay/{default-privacy => privacyDefault}/test.ts (100%) rename packages/integration-tests/suites/replay/{default-privacy => privacyDefault}/test.ts-snapshots/privacy-chromium.json (100%) rename packages/integration-tests/suites/replay/{default-privacy => privacyDefault}/test.ts-snapshots/privacy-firefox.json (100%) rename packages/integration-tests/suites/replay/{default-privacy => privacyDefault}/test.ts-snapshots/privacy-webkit.json (100%) rename packages/integration-tests/suites/replay/{default-privacy => privacyDefault}/test.ts-snapshots/privacy.json (97%) diff --git a/packages/integration-tests/.gitignore b/packages/integration-tests/.gitignore new file mode 100644 index 000000000000..87364a273f79 --- /dev/null +++ b/packages/integration-tests/.gitignore @@ -0,0 +1 @@ +test-results diff --git a/packages/integration-tests/suites/replay/privacy-block/init.js b/packages/integration-tests/suites/replay/privacyBlock/init.js similarity index 100% rename from packages/integration-tests/suites/replay/privacy-block/init.js rename to packages/integration-tests/suites/replay/privacyBlock/init.js diff --git a/packages/integration-tests/suites/replay/privacy-block/template.html b/packages/integration-tests/suites/replay/privacyBlock/template.html similarity index 92% rename from packages/integration-tests/suites/replay/privacy-block/template.html rename to packages/integration-tests/suites/replay/privacyBlock/template.html index ff5aa196951c..1742e26f18f1 100644 --- a/packages/integration-tests/suites/replay/privacy-block/template.html +++ b/packages/integration-tests/suites/replay/privacyBlock/template.html @@ -2,7 +2,7 @@ - + diff --git a/packages/integration-tests/suites/replay/privacy-block/test.ts b/packages/integration-tests/suites/replay/privacyBlock/test.ts similarity index 100% rename from packages/integration-tests/suites/replay/privacy-block/test.ts rename to packages/integration-tests/suites/replay/privacyBlock/test.ts diff --git a/packages/integration-tests/suites/replay/privacy-block/test.ts-snapshots/privacy-webkit.json b/packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-chromium.json similarity index 100% rename from packages/integration-tests/suites/replay/privacy-block/test.ts-snapshots/privacy-webkit.json rename to packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-chromium.json diff --git a/packages/integration-tests/suites/replay/privacy-block/test.ts-snapshots/privacy-firefox.json b/packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-firefox.json similarity index 100% rename from packages/integration-tests/suites/replay/privacy-block/test.ts-snapshots/privacy-firefox.json rename to packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-firefox.json diff --git a/packages/integration-tests/suites/replay/privacy-block/test.ts-snapshots/privacy-chromium.json b/packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-webkit.json similarity index 99% rename from packages/integration-tests/suites/replay/privacy-block/test.ts-snapshots/privacy-chromium.json rename to packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-webkit.json index 30fd032c1528..4b08d64a07b3 100644 --- a/packages/integration-tests/suites/replay/privacy-block/test.ts-snapshots/privacy-chromium.json +++ b/packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-webkit.json @@ -288,7 +288,7 @@ "attributes": { "class": "nested-hide", "rr_width": "1264px", - "rr_height": "18.5px" + "rr_height": "18px" }, "childNodes": [], "id": 40 diff --git a/packages/integration-tests/suites/replay/privacy/test.ts-snapshots/privacy.json b/packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy.json similarity index 75% rename from packages/integration-tests/suites/replay/privacy/test.ts-snapshots/privacy.json rename to packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy.json index d0cb968d61ff..4b08d64a07b3 100644 --- a/packages/integration-tests/suites/replay/privacy/test.ts-snapshots/privacy.json +++ b/packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy.json @@ -27,6 +27,16 @@ }, "childNodes": [], "id": 5 + }, + { + "type": 2, + "tagName": "link", + "attributes": { + "rr_width": "0px", + "rr_height": "0px" + }, + "childNodes": [], + "id": 6 } ], "id": 4 @@ -34,7 +44,7 @@ { "type": 3, "textContent": "\n ", - "id": 6 + "id": 7 }, { "type": 2, @@ -44,7 +54,7 @@ { "type": 3, "textContent": "\n ", - "id": 8 + "id": 9 }, { "type": 2, @@ -57,15 +67,15 @@ { "type": 3, "textContent": "***** **", - "id": 10 + "id": 11 } ], - "id": 9 + "id": 10 }, { "type": 3, "textContent": "\n ", - "id": 11 + "id": 12 }, { "type": 2, @@ -75,15 +85,15 @@ { "type": 3, "textContent": "**** ****** ** ****** ** *******", - "id": 13 + "id": 14 } ], - "id": 12 + "id": 13 }, { "type": 3, "textContent": "\n ", - "id": 14 + "id": 15 }, { "type": 2, @@ -95,15 +105,15 @@ { "type": 3, "textContent": "This should be unmasked due to data attribute", - "id": 16 + "id": 17 } ], - "id": 15 + "id": 16 }, { "type": 3, "textContent": "\n ", - "id": 17 + "id": 18 }, { "type": 2, @@ -112,12 +122,12 @@ "placeholder": "*********** ****** ** ******" }, "childNodes": [], - "id": 18 + "id": 19 }, { "type": 3, "textContent": "\n ", - "id": 19 + "id": 20 }, { "type": 2, @@ -129,31 +139,58 @@ { "type": 3, "textContent": "***** ****** ** ******", - "id": 21 + "id": 22 } ], - "id": 20 + "id": 21 }, { "type": 3, "textContent": "\n ", - "id": 22 + "id": 23 }, { "type": 2, "tagName": "svg", "attributes": { - "rr_width": "200px", - "rr_height": "200px" + "style": "width:200px;height:200px", + "viewBox": "0 0 80 80" }, - "childNodes": [], + "childNodes": [ + { + "type": 2, + "tagName": "path", + "attributes": { + "d": "" + }, + "childNodes": [], + "isSVG": true, + "id": 25 + }, + { + "type": 2, + "tagName": "area", + "attributes": {}, + "childNodes": [], + "isSVG": true, + "id": 26 + }, + { + "type": 2, + "tagName": "rect", + "attributes": {}, + "childNodes": [], + "isSVG": true, + "id": 27 + } + ], "isSVG": true, - "id": 23 + "id": 24 }, { "type": 3, "textContent": "\n ", - "id": 24 + "id": 28 }, { "type": 2, @@ -172,7 +209,7 @@ }, "childNodes": [], "isSVG": true, - "id": 26 + "id": 30 }, { "type": 2, @@ -180,7 +217,7 @@ "attributes": {}, "childNodes": [], "isSVG": true, - "id": 27 + "id": 31 }, { "type": 2, @@ -188,31 +225,31 @@ "attributes": {}, "childNodes": [], "isSVG": true, - "id": 28 + "id": 32 } ], "isSVG": true, - "id": 25 + "id": 29 }, { "type": 3, "textContent": "\n ", - "id": 29 + "id": 33 }, { "type": 2, "tagName": "img", "attributes": { - "rr_width": "100px", - "rr_height": "100px" + "style": "width:100px;height:100px", + "src": "file:///none.png" }, "childNodes": [], - "id": 30 + "id": 34 }, { "type": 3, "textContent": "\n ", - "id": 31 + "id": 35 }, { "type": 2, @@ -223,12 +260,12 @@ "src": "file:///none.png" }, "childNodes": [], - "id": 32 + "id": 36 }, { "type": 3, "textContent": "\n ", - "id": 33 + "id": 37 }, { "type": 2, @@ -238,20 +275,36 @@ "rr_height": "30px" }, "childNodes": [], - "id": 34 + "id": 38 + }, + { + "type": 3, + "textContent": "\n ", + "id": 39 + }, + { + "type": 2, + "tagName": "div", + "attributes": { + "class": "nested-hide", + "rr_width": "1264px", + "rr_height": "18px" + }, + "childNodes": [], + "id": 40 }, { "type": 3, "textContent": "\n ", - "id": 35 + "id": 41 }, { "type": 3, "textContent": "\n\n", - "id": 36 + "id": 42 } ], - "id": 7 + "id": 8 } ], "id": 3 diff --git a/packages/integration-tests/suites/replay/default-privacy/init.js b/packages/integration-tests/suites/replay/privacyDefault/init.js similarity index 100% rename from packages/integration-tests/suites/replay/default-privacy/init.js rename to packages/integration-tests/suites/replay/privacyDefault/init.js diff --git a/packages/integration-tests/suites/replay/default-privacy/template.html b/packages/integration-tests/suites/replay/privacyDefault/template.html similarity index 100% rename from packages/integration-tests/suites/replay/default-privacy/template.html rename to packages/integration-tests/suites/replay/privacyDefault/template.html diff --git a/packages/integration-tests/suites/replay/default-privacy/test.ts b/packages/integration-tests/suites/replay/privacyDefault/test.ts similarity index 100% rename from packages/integration-tests/suites/replay/default-privacy/test.ts rename to packages/integration-tests/suites/replay/privacyDefault/test.ts diff --git a/packages/integration-tests/suites/replay/default-privacy/test.ts-snapshots/privacy-chromium.json b/packages/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-chromium.json similarity index 100% rename from packages/integration-tests/suites/replay/default-privacy/test.ts-snapshots/privacy-chromium.json rename to packages/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-chromium.json diff --git a/packages/integration-tests/suites/replay/default-privacy/test.ts-snapshots/privacy-firefox.json b/packages/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-firefox.json similarity index 100% rename from packages/integration-tests/suites/replay/default-privacy/test.ts-snapshots/privacy-firefox.json rename to packages/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-firefox.json diff --git a/packages/integration-tests/suites/replay/default-privacy/test.ts-snapshots/privacy-webkit.json b/packages/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-webkit.json similarity index 100% rename from packages/integration-tests/suites/replay/default-privacy/test.ts-snapshots/privacy-webkit.json rename to packages/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-webkit.json diff --git a/packages/integration-tests/suites/replay/default-privacy/test.ts-snapshots/privacy.json b/packages/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy.json similarity index 97% rename from packages/integration-tests/suites/replay/default-privacy/test.ts-snapshots/privacy.json rename to packages/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy.json index 7072916d57ed..f29f31d2eb75 100644 --- a/packages/integration-tests/suites/replay/default-privacy/test.ts-snapshots/privacy.json +++ b/packages/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy.json @@ -34,7 +34,7 @@ "attributes": { "rel": "icon", "type": "image/png", - "href": "file:///Users/francesco/git/sentry-javascript/packages/integration-tests/suites/replay/default-privacy/dist/assets/icon/favicon.png" + "href": "file://assets/icon/favicon.png" }, "childNodes": [], "id": 6 From a8c3c1b97ab0bf1289ff33b005346f1c58ebea29 Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Mon, 20 Feb 2023 14:42:46 +0100 Subject: [PATCH 3/4] Fix replay event snapshots Allow to normalize number attributes to make it a bit less flaky --- .../suites/replay/privacyBlock/test.ts | 18 ++++++++----- .../test.ts-snapshots/privacy-firefox.json | 2 +- .../suites/replay/privacyDefault/test.ts | 19 ++++++++----- .../integration-tests/utils/replayHelpers.ts | 27 ++++++++++++++++--- 4 files changed, 47 insertions(+), 19 deletions(-) diff --git a/packages/integration-tests/suites/replay/privacyBlock/test.ts b/packages/integration-tests/suites/replay/privacyBlock/test.ts index 68323e70ff0f..8b000b07e461 100644 --- a/packages/integration-tests/suites/replay/privacyBlock/test.ts +++ b/packages/integration-tests/suites/replay/privacyBlock/test.ts @@ -1,10 +1,12 @@ import { expect } from '@playwright/test'; -import { EventType } from '@sentry-internal/rrweb'; -import type { RecordingEvent } from '@sentry/replay/build/npm/types/types'; import { sentryTest } from '../../../utils/fixtures'; -import { envelopeRequestParser } from '../../../utils/helpers'; -import { shouldSkipReplayTest, waitForReplayRequest } from '../../../utils/replayHelpers'; +import { + getFullRecordingSnapshots, + normalize, + shouldSkipReplayTest, + waitForReplayRequest, +} from '../../../utils/replayHelpers'; sentryTest('should allow to manually block elements', async ({ getLocalTestPath, page }) => { if (shouldSkipReplayTest()) { @@ -24,8 +26,10 @@ sentryTest('should allow to manually block elements', async ({ getLocalTestPath, const url = await getLocalTestPath({ testDir: __dirname }); await page.goto(url); - const replayPayload = envelopeRequestParser(await reqPromise0, 5); - const checkoutEvent = replayPayload.find(({ type }) => type === EventType.FullSnapshot); + const snapshots = getFullRecordingSnapshots(await reqPromise0); + expect(snapshots.length).toEqual(1); - expect(JSON.stringify(checkoutEvent?.data, null, 2)).toMatchSnapshot('privacy.json'); + const stringifiedSnapshot = normalize(snapshots[0], { normalizeNumberAttributes: ['rr_width', 'rr_height'] }); + + expect(stringifiedSnapshot).toMatchSnapshot('privacy.json'); }); diff --git a/packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-firefox.json b/packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-firefox.json index a0a94c2c2ebe..bf3fc8dc58af 100644 --- a/packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-firefox.json +++ b/packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-firefox.json @@ -288,7 +288,7 @@ "attributes": { "class": "nested-hide", "rr_width": "1264px", - "rr_height": "19.199996948242188px" + "rr_height": "19px" }, "childNodes": [], "id": 40 diff --git a/packages/integration-tests/suites/replay/privacyDefault/test.ts b/packages/integration-tests/suites/replay/privacyDefault/test.ts index a6315d5d1e66..713431ca3063 100644 --- a/packages/integration-tests/suites/replay/privacyDefault/test.ts +++ b/packages/integration-tests/suites/replay/privacyDefault/test.ts @@ -1,10 +1,12 @@ import { expect } from '@playwright/test'; -import { EventType } from '@sentry-internal/rrweb'; -import type { RecordingEvent } from '@sentry/replay/build/npm/types/types'; import { sentryTest } from '../../../utils/fixtures'; -import { envelopeRequestParser } from '../../../utils/helpers'; -import { shouldSkipReplayTest, waitForReplayRequest } from '../../../utils/replayHelpers'; +import { + getFullRecordingSnapshots, + normalize, + shouldSkipReplayTest, + waitForReplayRequest, +} from '../../../utils/replayHelpers'; sentryTest('should have the correct default privacy settings', async ({ getLocalTestPath, page }) => { if (shouldSkipReplayTest()) { @@ -24,8 +26,11 @@ sentryTest('should have the correct default privacy settings', async ({ getLocal const url = await getLocalTestPath({ testDir: __dirname }); await page.goto(url); - const replayPayload = envelopeRequestParser(await reqPromise0, 5); - const checkoutEvent = replayPayload.find(({ type }) => type === EventType.FullSnapshot); - expect(JSON.stringify(checkoutEvent?.data, null, 2)).toMatchSnapshot('privacy.json'); + const snapshots = getFullRecordingSnapshots(await reqPromise0); + expect(snapshots.length).toEqual(1); + + const stringifiedSnapshot = normalize(snapshots[0], { normalizeNumberAttributes: ['rr_width', 'rr_height'] }); + + expect(stringifiedSnapshot).toMatchSnapshot('privacy.json'); }); diff --git a/packages/integration-tests/utils/replayHelpers.ts b/packages/integration-tests/utils/replayHelpers.ts index a35520e0a799..397a586f74d3 100644 --- a/packages/integration-tests/utils/replayHelpers.ts +++ b/packages/integration-tests/utils/replayHelpers.ts @@ -133,7 +133,7 @@ export function getFullRecordingSnapshots(replayRequest: Request): RecordingSnap return events.filter(event => event.type === 2).map(event => event.data as RecordingSnapshot); } -function getincrementalRecordingSnapshots(replayRequest: Request): RecordingSnapshot[] { +function getIncrementalRecordingSnapshots(replayRequest: Request): RecordingSnapshot[] { const events = getDecompressedRecordingEvents(replayRequest) as RecordingEvent[]; return events.filter(event => event.type === 3).map(event => event.data as RecordingSnapshot); } @@ -144,7 +144,7 @@ function getDecompressedRecordingEvents(replayRequest: Request): RecordingEvent[ export function getReplayRecordingContent(replayRequest: Request): RecordingContent { const fullSnapshots = getFullRecordingSnapshots(replayRequest); - const incrementalSnapshots = getincrementalRecordingSnapshots(replayRequest); + const incrementalSnapshots = getIncrementalRecordingSnapshots(replayRequest); const customEvents = getCustomRecordingEvents(replayRequest); return { fullSnapshots, incrementalSnapshots, ...customEvents }; @@ -216,10 +216,29 @@ export function shouldSkipReplayTest(): boolean { * files which break the tests on different machines. * Also, we need to normalize any time offsets as they can vary and cause flakes. */ -export function normalize(obj: unknown): string { +export function normalize( + obj: unknown, + { normalizeNumberAttributes }: { normalizeNumberAttributes?: string[] } = {}, +): string { const rawString = JSON.stringify(obj, null, 2); - const normalizedString = rawString + let normalizedString = rawString .replace(/"file:\/\/.+(\/.*\.html)"/gm, '"$1"') .replace(/"timeOffset":\s*-?\d+/gm, '"timeOffset": [timeOffset]'); + + if (normalizeNumberAttributes?.length) { + // We look for: "attr": "123px", "123", "123%", "123em", "123rem" + const regex = new RegExp( + `"(${normalizeNumberAttributes + .map(attr => `(?:${attr})`) + .join('|')})":\\s*"([\\d\\.]+)((?:px)|%|(?:em)(?:rem))?"`, + 'gm', + ); + + normalizedString = normalizedString.replace(regex, (_, attr, num, unit) => { + // Remove floating points here, to ensure this is a bit less flaky + return `"${attr}": "${parseInt(num, 10)}${unit || ''}"`; + }); + } + return normalizedString; } From 8901b8a68c24e330450210e089ee53db92d96448 Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Mon, 20 Feb 2023 15:21:01 +0100 Subject: [PATCH 4/4] use number ranges --- .../test.ts-snapshots/privacy-chromium.json | 12 ++++++------ .../test.ts-snapshots/privacy-firefox.json | 12 ++++++------ .../test.ts-snapshots/privacy-webkit.json | 12 ++++++------ .../test.ts-snapshots/privacy-chromium.json | 12 ++++++------ .../test.ts-snapshots/privacy-firefox.json | 12 ++++++------ .../test.ts-snapshots/privacy-webkit.json | 12 ++++++------ packages/integration-tests/utils/replayHelpers.ts | 15 ++++++++++++++- 7 files changed, 50 insertions(+), 37 deletions(-) diff --git a/packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-chromium.json b/packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-chromium.json index 4b08d64a07b3..a120d5e44a5e 100644 --- a/packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-chromium.json +++ b/packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-chromium.json @@ -32,8 +32,8 @@ "type": 2, "tagName": "link", "attributes": { - "rr_width": "0px", - "rr_height": "0px" + "rr_width": "[0-50]px", + "rr_height": "[0-50]px" }, "childNodes": [], "id": 6 @@ -271,8 +271,8 @@ "type": 2, "tagName": "video", "attributes": { - "rr_width": "30px", - "rr_height": "30px" + "rr_width": "[0-50]px", + "rr_height": "[0-50]px" }, "childNodes": [], "id": 38 @@ -287,8 +287,8 @@ "tagName": "div", "attributes": { "class": "nested-hide", - "rr_width": "1264px", - "rr_height": "18px" + "rr_width": "[1250-1300]px", + "rr_height": "[0-50]px" }, "childNodes": [], "id": 40 diff --git a/packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-firefox.json b/packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-firefox.json index bf3fc8dc58af..a120d5e44a5e 100644 --- a/packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-firefox.json +++ b/packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-firefox.json @@ -32,8 +32,8 @@ "type": 2, "tagName": "link", "attributes": { - "rr_width": "0px", - "rr_height": "0px" + "rr_width": "[0-50]px", + "rr_height": "[0-50]px" }, "childNodes": [], "id": 6 @@ -271,8 +271,8 @@ "type": 2, "tagName": "video", "attributes": { - "rr_width": "30px", - "rr_height": "30px" + "rr_width": "[0-50]px", + "rr_height": "[0-50]px" }, "childNodes": [], "id": 38 @@ -287,8 +287,8 @@ "tagName": "div", "attributes": { "class": "nested-hide", - "rr_width": "1264px", - "rr_height": "19px" + "rr_width": "[1250-1300]px", + "rr_height": "[0-50]px" }, "childNodes": [], "id": 40 diff --git a/packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-webkit.json b/packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-webkit.json index 4b08d64a07b3..a120d5e44a5e 100644 --- a/packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-webkit.json +++ b/packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-webkit.json @@ -32,8 +32,8 @@ "type": 2, "tagName": "link", "attributes": { - "rr_width": "0px", - "rr_height": "0px" + "rr_width": "[0-50]px", + "rr_height": "[0-50]px" }, "childNodes": [], "id": 6 @@ -271,8 +271,8 @@ "type": 2, "tagName": "video", "attributes": { - "rr_width": "30px", - "rr_height": "30px" + "rr_width": "[0-50]px", + "rr_height": "[0-50]px" }, "childNodes": [], "id": 38 @@ -287,8 +287,8 @@ "tagName": "div", "attributes": { "class": "nested-hide", - "rr_width": "1264px", - "rr_height": "18px" + "rr_width": "[1250-1300]px", + "rr_height": "[0-50]px" }, "childNodes": [], "id": 40 diff --git a/packages/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-chromium.json b/packages/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-chromium.json index f29f31d2eb75..f31f8b967d12 100644 --- a/packages/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-chromium.json +++ b/packages/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-chromium.json @@ -154,8 +154,8 @@ "type": 2, "tagName": "svg", "attributes": { - "rr_width": "200px", - "rr_height": "200px" + "rr_width": "[200-250]px", + "rr_height": "[200-250]px" }, "childNodes": [], "isSVG": true, @@ -214,8 +214,8 @@ "type": 2, "tagName": "img", "attributes": { - "rr_width": "100px", - "rr_height": "100px" + "rr_width": "[100-150]px", + "rr_height": "[100-150]px" }, "childNodes": [], "id": 31 @@ -245,8 +245,8 @@ "type": 2, "tagName": "video", "attributes": { - "rr_width": "30px", - "rr_height": "30px" + "rr_width": "[0-50]px", + "rr_height": "[0-50]px" }, "childNodes": [], "id": 35 diff --git a/packages/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-firefox.json b/packages/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-firefox.json index c75ad0326401..d33a2d86b730 100644 --- a/packages/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-firefox.json +++ b/packages/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-firefox.json @@ -154,8 +154,8 @@ "type": 2, "tagName": "svg", "attributes": { - "rr_width": "200px", - "rr_height": "200px" + "rr_width": "[200-250]px", + "rr_height": "[200-250]px" }, "childNodes": [], "isSVG": true, @@ -214,8 +214,8 @@ "type": 2, "tagName": "img", "attributes": { - "rr_width": "100px", - "rr_height": "100px" + "rr_width": "[100-150]px", + "rr_height": "[100-150]px" }, "childNodes": [], "id": 31 @@ -245,8 +245,8 @@ "type": 2, "tagName": "video", "attributes": { - "rr_width": "30px", - "rr_height": "30px" + "rr_width": "[0-50]px", + "rr_height": "[0-50]px" }, "childNodes": [], "id": 35 diff --git a/packages/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-webkit.json b/packages/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-webkit.json index f29f31d2eb75..f31f8b967d12 100644 --- a/packages/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-webkit.json +++ b/packages/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-webkit.json @@ -154,8 +154,8 @@ "type": 2, "tagName": "svg", "attributes": { - "rr_width": "200px", - "rr_height": "200px" + "rr_width": "[200-250]px", + "rr_height": "[200-250]px" }, "childNodes": [], "isSVG": true, @@ -214,8 +214,8 @@ "type": 2, "tagName": "img", "attributes": { - "rr_width": "100px", - "rr_height": "100px" + "rr_width": "[100-150]px", + "rr_height": "[100-150]px" }, "childNodes": [], "id": 31 @@ -245,8 +245,8 @@ "type": 2, "tagName": "video", "attributes": { - "rr_width": "30px", - "rr_height": "30px" + "rr_width": "[0-50]px", + "rr_height": "[0-50]px" }, "childNodes": [], "id": 35 diff --git a/packages/integration-tests/utils/replayHelpers.ts b/packages/integration-tests/utils/replayHelpers.ts index 397a586f74d3..8238e986b0cb 100644 --- a/packages/integration-tests/utils/replayHelpers.ts +++ b/packages/integration-tests/utils/replayHelpers.ts @@ -236,9 +236,22 @@ export function normalize( normalizedString = normalizedString.replace(regex, (_, attr, num, unit) => { // Remove floating points here, to ensure this is a bit less flaky - return `"${attr}": "${parseInt(num, 10)}${unit || ''}"`; + const integer = parseInt(num, 10); + const normalizedNum = normalizeNumberAttribute(integer); + + return `"${attr}": "${normalizedNum}${unit || ''}"`; }); } return normalizedString; } + +/** + * Map e.g. 16 to [0-50] or 123 to [100-150]. + */ +function normalizeNumberAttribute(num: number): string { + const step = 50; + const stepCount = Math.floor(num / step); + + return `[${stepCount * step}-${(stepCount + 1) * step}]`; +}