From 56950122a6cb5c264dc8491c61d8d4de25906e28 Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Wed, 19 Jul 2023 16:50:34 -0400 Subject: [PATCH 1/4] add blocking test case --- .../suites/replay/privacyBlock/template.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/browser-integration-tests/suites/replay/privacyBlock/template.html b/packages/browser-integration-tests/suites/replay/privacyBlock/template.html index 1742e26f18f1..880fa879e5d6 100644 --- a/packages/browser-integration-tests/suites/replay/privacyBlock/template.html +++ b/packages/browser-integration-tests/suites/replay/privacyBlock/template.html @@ -11,6 +11,9 @@
Title should be masked
+
+
This should be blocked
+
From 47b8c05886ca4c36691e7e10fe1a76d6809aa478 Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Sat, 29 Jul 2023 13:55:59 -0400 Subject: [PATCH 2/4] test(replay): Add additional tests for aria-label Adds additional tests for `aria-label`. Will be needed for rrweb2 upgrade --- .../suites/replay/customEvents/template.html | 2 +- .../suites/replay/customEvents/test.ts | 4 ++-- .../suites/replay/privacyDefault/template.html | 1 + .../suites/replay/privacyInput/template.html | 3 +++ .../suites/replay/privacyInput/test.ts | 9 +++++++-- .../suites/replay/privacyInputMaskAll/template.html | 3 +++ .../suites/replay/privacyInputMaskAll/test.ts | 7 +++++-- 7 files changed, 22 insertions(+), 7 deletions(-) diff --git a/packages/browser-integration-tests/suites/replay/customEvents/template.html b/packages/browser-integration-tests/suites/replay/customEvents/template.html index e988c5ed1666..62f0454d4db4 100644 --- a/packages/browser-integration-tests/suites/replay/customEvents/template.html +++ b/packages/browser-integration-tests/suites/replay/customEvents/template.html @@ -4,7 +4,7 @@ -
An Error
+
An Error
diff --git a/packages/browser-integration-tests/suites/replay/customEvents/test.ts b/packages/browser-integration-tests/suites/replay/customEvents/test.ts index d8d6750f9dcb..690929dc9d3a 100644 --- a/packages/browser-integration-tests/suites/replay/customEvents/test.ts +++ b/packages/browser-integration-tests/suites/replay/customEvents/test.ts @@ -112,12 +112,12 @@ sentryTest( expect.arrayContaining([ { ...expectedClickBreadcrumb, - message: 'body > div#error.btn.btn-error[aria-label="An Error"]', + message: 'body > div#error.btn.btn-error[aria-label="An Error in aria-label"]', data: { nodeId: expect.any(Number), node: { attributes: { - 'aria-label': '** *****', + 'aria-label': '** ***** ** **********', class: 'btn btn-error', id: 'error', role: 'button', diff --git a/packages/browser-integration-tests/suites/replay/privacyDefault/template.html b/packages/browser-integration-tests/suites/replay/privacyDefault/template.html index a8279dad4d17..c83b62bf2e24 100644 --- a/packages/browser-integration-tests/suites/replay/privacyDefault/template.html +++ b/packages/browser-integration-tests/suites/replay/privacyDefault/template.html @@ -9,6 +9,7 @@
This should be masked by default
This should be unmasked due to data attribute
+
Title should be masked
diff --git a/packages/browser-integration-tests/suites/replay/privacyInput/template.html b/packages/browser-integration-tests/suites/replay/privacyInput/template.html index 735abb395522..fea3e1e29047 100644 --- a/packages/browser-integration-tests/suites/replay/privacyInput/template.html +++ b/packages/browser-integration-tests/suites/replay/privacyInput/template.html @@ -11,5 +11,8 @@ + + + diff --git a/packages/browser-integration-tests/suites/replay/privacyInput/test.ts b/packages/browser-integration-tests/suites/replay/privacyInput/test.ts index 71f6bd77ae67..f6f772c2c1b2 100644 --- a/packages/browser-integration-tests/suites/replay/privacyInput/test.ts +++ b/packages/browser-integration-tests/suites/replay/privacyInput/test.ts @@ -4,12 +4,13 @@ import type { inputData } from '@sentry-internal/rrweb/typings/types'; import { sentryTest } from '../../../utils/fixtures'; import type { IncrementalRecordingSnapshot } from '../../../utils/replayHelpers'; -import { +import { getFullRecordingSnapshots , getIncrementalRecordingSnapshots, shouldSkipReplayTest, waitForReplayRequest, } from '../../../utils/replayHelpers'; + function isInputMutation( snap: IncrementalRecordingSnapshot, ): snap is IncrementalRecordingSnapshot & { data: inputData } { @@ -81,6 +82,7 @@ sentryTest( const lastSnapshot2 = snapshots2[snapshots2.length - 1]; expect(lastSnapshot2.data.text).toBe('*'.repeat(text.length)); + // Note this test `ignoreSelector` await page.locator('#input-ignore').fill(text); await forceFlushReplay(); const snapshots3 = getIncrementalRecordingSnapshots(await reqPromise3).filter(isInputMutation); @@ -136,7 +138,10 @@ sentryTest( const url = await getLocalTestPath({ testDir: __dirname }); await page.goto(url); - await reqPromise0; + const fullSnapshot = getFullRecordingSnapshots(await reqPromise0) + const stringifiedSnapshot = JSON.stringify(fullSnapshot); + expect(stringifiedSnapshot.includes('Submit form')).toBe(false); + expect(stringifiedSnapshot.includes('Unmasked button')).toBe(true); const text = 'test'; await page.locator('#textarea').fill(text); diff --git a/packages/browser-integration-tests/suites/replay/privacyInputMaskAll/template.html b/packages/browser-integration-tests/suites/replay/privacyInputMaskAll/template.html index 404bed05a6d0..6a250745553e 100644 --- a/packages/browser-integration-tests/suites/replay/privacyInputMaskAll/template.html +++ b/packages/browser-integration-tests/suites/replay/privacyInputMaskAll/template.html @@ -9,5 +9,8 @@ + + + diff --git a/packages/browser-integration-tests/suites/replay/privacyInputMaskAll/test.ts b/packages/browser-integration-tests/suites/replay/privacyInputMaskAll/test.ts index cbcf29f4ec6f..904df58ebe9b 100644 --- a/packages/browser-integration-tests/suites/replay/privacyInputMaskAll/test.ts +++ b/packages/browser-integration-tests/suites/replay/privacyInputMaskAll/test.ts @@ -3,7 +3,7 @@ import { IncrementalSource } from '@sentry-internal/rrweb'; import type { inputData } from '@sentry-internal/rrweb/typings/types'; import { sentryTest } from '../../../utils/fixtures'; -import type { IncrementalRecordingSnapshot } from '../../../utils/replayHelpers'; +import { getFullRecordingSnapshots, IncrementalRecordingSnapshot } from '../../../utils/replayHelpers'; import { getIncrementalRecordingSnapshots, shouldSkipReplayTest, @@ -56,7 +56,10 @@ sentryTest( const url = await getLocalTestPath({ testDir: __dirname }); await page.goto(url); - await reqPromise0; + const fullSnapshot = getFullRecordingSnapshots(await reqPromise0) + const stringifiedSnapshot = JSON.stringify(fullSnapshot); + expect(stringifiedSnapshot.includes('Submit form')).toBe(false); + expect(stringifiedSnapshot.includes('Unmasked button')).toBe(true); const text = 'test'; From 9e6046165a9c97682bf7c56e52a55263b24fae54 Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Sat, 29 Jul 2023 14:37:39 -0400 Subject: [PATCH 3/4] lint --- .../suites/replay/privacyInput/test.ts | 6 +++--- .../suites/replay/privacyInputMaskAll/test.ts | 5 +++-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/browser-integration-tests/suites/replay/privacyInput/test.ts b/packages/browser-integration-tests/suites/replay/privacyInput/test.ts index f6f772c2c1b2..3ffc628c133d 100644 --- a/packages/browser-integration-tests/suites/replay/privacyInput/test.ts +++ b/packages/browser-integration-tests/suites/replay/privacyInput/test.ts @@ -4,13 +4,13 @@ import type { inputData } from '@sentry-internal/rrweb/typings/types'; import { sentryTest } from '../../../utils/fixtures'; import type { IncrementalRecordingSnapshot } from '../../../utils/replayHelpers'; -import { getFullRecordingSnapshots , +import { + getFullRecordingSnapshots, getIncrementalRecordingSnapshots, shouldSkipReplayTest, waitForReplayRequest, } from '../../../utils/replayHelpers'; - function isInputMutation( snap: IncrementalRecordingSnapshot, ): snap is IncrementalRecordingSnapshot & { data: inputData } { @@ -138,7 +138,7 @@ sentryTest( const url = await getLocalTestPath({ testDir: __dirname }); await page.goto(url); - const fullSnapshot = getFullRecordingSnapshots(await reqPromise0) + const fullSnapshot = getFullRecordingSnapshots(await reqPromise0); const stringifiedSnapshot = JSON.stringify(fullSnapshot); expect(stringifiedSnapshot.includes('Submit form')).toBe(false); expect(stringifiedSnapshot.includes('Unmasked button')).toBe(true); diff --git a/packages/browser-integration-tests/suites/replay/privacyInputMaskAll/test.ts b/packages/browser-integration-tests/suites/replay/privacyInputMaskAll/test.ts index 904df58ebe9b..4ec89c97a2cb 100644 --- a/packages/browser-integration-tests/suites/replay/privacyInputMaskAll/test.ts +++ b/packages/browser-integration-tests/suites/replay/privacyInputMaskAll/test.ts @@ -3,8 +3,9 @@ import { IncrementalSource } from '@sentry-internal/rrweb'; import type { inputData } from '@sentry-internal/rrweb/typings/types'; import { sentryTest } from '../../../utils/fixtures'; -import { getFullRecordingSnapshots, IncrementalRecordingSnapshot } from '../../../utils/replayHelpers'; +import type { IncrementalRecordingSnapshot } from '../../../utils/replayHelpers'; import { + getFullRecordingSnapshots, getIncrementalRecordingSnapshots, shouldSkipReplayTest, waitForReplayRequest, @@ -56,7 +57,7 @@ sentryTest( const url = await getLocalTestPath({ testDir: __dirname }); await page.goto(url); - const fullSnapshot = getFullRecordingSnapshots(await reqPromise0) + const fullSnapshot = getFullRecordingSnapshots(await reqPromise0); const stringifiedSnapshot = JSON.stringify(fullSnapshot); expect(stringifiedSnapshot.includes('Submit form')).toBe(false); expect(stringifiedSnapshot.includes('Unmasked button')).toBe(true); From 6fa94941afd1f417d04d11adfa191a223f4b8ce4 Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Mon, 31 Jul 2023 10:52:22 -0700 Subject: [PATCH 4/4] update snaps --- .../test.ts-snapshots/privacy-chromium.json | 43 ++++++++++------ .../test.ts-snapshots/privacy-webkit.json | 43 ++++++++++------ .../test.ts-snapshots/privacy-chromium.json | 49 ++++++++++++------- .../test.ts-snapshots/privacy-webkit.json | 49 ++++++++++++------- 4 files changed, 122 insertions(+), 62 deletions(-) diff --git a/packages/browser-integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-chromium.json b/packages/browser-integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-chromium.json index 9ca91c2dc5da..4ac06ffeb444 100644 --- a/packages/browser-integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-chromium.json +++ b/packages/browser-integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-chromium.json @@ -194,6 +194,21 @@ "textContent": "\n ", "id": 28 }, + { + "type": 2, + "tagName": "div", + "attributes": { + "rr_width": "[1250-1300]px", + "rr_height": "[0-50]px" + }, + "childNodes": [], + "id": 29 + }, + { + "type": 3, + "textContent": "\n ", + "id": 30 + }, { "type": 2, "tagName": "svg", @@ -211,7 +226,7 @@ }, "childNodes": [], "isSVG": true, - "id": 30 + "id": 32 }, { "type": 2, @@ -219,7 +234,7 @@ "attributes": {}, "childNodes": [], "isSVG": true, - "id": 31 + "id": 33 }, { "type": 2, @@ -227,16 +242,16 @@ "attributes": {}, "childNodes": [], "isSVG": true, - "id": 32 + "id": 34 } ], "isSVG": true, - "id": 29 + "id": 31 }, { "type": 3, "textContent": "\n ", - "id": 33 + "id": 35 }, { "type": 2, @@ -246,12 +261,12 @@ "src": "file:///none.png" }, "childNodes": [], - "id": 34 + "id": 36 }, { "type": 3, "textContent": "\n ", - "id": 35 + "id": 37 }, { "type": 2, @@ -262,12 +277,12 @@ "src": "file:///none.png" }, "childNodes": [], - "id": 36 + "id": 38 }, { "type": 3, "textContent": "\n ", - "id": 37 + "id": 39 }, { "type": 2, @@ -277,12 +292,12 @@ "rr_height": "[0-50]px" }, "childNodes": [], - "id": 38 + "id": 40 }, { "type": 3, "textContent": "\n ", - "id": 39 + "id": 41 }, { "type": 2, @@ -293,17 +308,17 @@ "rr_height": "[0-50]px" }, "childNodes": [], - "id": 40 + "id": 42 }, { "type": 3, "textContent": "\n ", - "id": 41 + "id": 43 }, { "type": 3, "textContent": "\n\n", - "id": 42 + "id": 44 } ], "id": 8 diff --git a/packages/browser-integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-webkit.json b/packages/browser-integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-webkit.json index 9ca91c2dc5da..4ac06ffeb444 100644 --- a/packages/browser-integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-webkit.json +++ b/packages/browser-integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-webkit.json @@ -194,6 +194,21 @@ "textContent": "\n ", "id": 28 }, + { + "type": 2, + "tagName": "div", + "attributes": { + "rr_width": "[1250-1300]px", + "rr_height": "[0-50]px" + }, + "childNodes": [], + "id": 29 + }, + { + "type": 3, + "textContent": "\n ", + "id": 30 + }, { "type": 2, "tagName": "svg", @@ -211,7 +226,7 @@ }, "childNodes": [], "isSVG": true, - "id": 30 + "id": 32 }, { "type": 2, @@ -219,7 +234,7 @@ "attributes": {}, "childNodes": [], "isSVG": true, - "id": 31 + "id": 33 }, { "type": 2, @@ -227,16 +242,16 @@ "attributes": {}, "childNodes": [], "isSVG": true, - "id": 32 + "id": 34 } ], "isSVG": true, - "id": 29 + "id": 31 }, { "type": 3, "textContent": "\n ", - "id": 33 + "id": 35 }, { "type": 2, @@ -246,12 +261,12 @@ "src": "file:///none.png" }, "childNodes": [], - "id": 34 + "id": 36 }, { "type": 3, "textContent": "\n ", - "id": 35 + "id": 37 }, { "type": 2, @@ -262,12 +277,12 @@ "src": "file:///none.png" }, "childNodes": [], - "id": 36 + "id": 38 }, { "type": 3, "textContent": "\n ", - "id": 37 + "id": 39 }, { "type": 2, @@ -277,12 +292,12 @@ "rr_height": "[0-50]px" }, "childNodes": [], - "id": 38 + "id": 40 }, { "type": 3, "textContent": "\n ", - "id": 39 + "id": 41 }, { "type": 2, @@ -293,17 +308,17 @@ "rr_height": "[0-50]px" }, "childNodes": [], - "id": 40 + "id": 42 }, { "type": 3, "textContent": "\n ", - "id": 41 + "id": 43 }, { "type": 3, "textContent": "\n\n", - "id": 42 + "id": 44 } ], "id": 8 diff --git a/packages/browser-integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-chromium.json b/packages/browser-integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-chromium.json index f1b55c0884ef..6bf1ea7659d3 100644 --- a/packages/browser-integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-chromium.json +++ b/packages/browser-integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-chromium.json @@ -131,6 +131,21 @@ "textContent": "\n ", "id": 20 }, + { + "type": 2, + "tagName": "input", + "attributes": { + "data-sentry-unmask": "", + "placeholder": "Placeholder can be unmasked" + }, + "childNodes": [], + "id": 21 + }, + { + "type": 3, + "textContent": "\n ", + "id": 22 + }, { "type": 2, "tagName": "div", @@ -141,15 +156,15 @@ { "type": 3, "textContent": "***** ****** ** ******", - "id": 22 + "id": 24 } ], - "id": 21 + "id": 23 }, { "type": 3, "textContent": "\n ", - "id": 23 + "id": 25 }, { "type": 2, @@ -160,12 +175,12 @@ }, "childNodes": [], "isSVG": true, - "id": 24 + "id": 26 }, { "type": 3, "textContent": "\n ", - "id": 25 + "id": 27 }, { "type": 2, @@ -184,7 +199,7 @@ }, "childNodes": [], "isSVG": true, - "id": 27 + "id": 29 }, { "type": 2, @@ -192,7 +207,7 @@ "attributes": {}, "childNodes": [], "isSVG": true, - "id": 28 + "id": 30 }, { "type": 2, @@ -200,16 +215,16 @@ "attributes": {}, "childNodes": [], "isSVG": true, - "id": 29 + "id": 31 } ], "isSVG": true, - "id": 26 + "id": 28 }, { "type": 3, "textContent": "\n ", - "id": 30 + "id": 32 }, { "type": 2, @@ -219,12 +234,12 @@ "rr_height": "[100-150]px" }, "childNodes": [], - "id": 31 + "id": 33 }, { "type": 3, "textContent": "\n ", - "id": 32 + "id": 34 }, { "type": 2, @@ -235,12 +250,12 @@ "src": "file:///none.png" }, "childNodes": [], - "id": 33 + "id": 35 }, { "type": 3, "textContent": "\n ", - "id": 34 + "id": 36 }, { "type": 2, @@ -250,17 +265,17 @@ "rr_height": "[0-50]px" }, "childNodes": [], - "id": 35 + "id": 37 }, { "type": 3, "textContent": "\n ", - "id": 36 + "id": 38 }, { "type": 3, "textContent": "\n\n", - "id": 37 + "id": 39 } ], "id": 8 diff --git a/packages/browser-integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-webkit.json b/packages/browser-integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-webkit.json index f1b55c0884ef..6bf1ea7659d3 100644 --- a/packages/browser-integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-webkit.json +++ b/packages/browser-integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-webkit.json @@ -131,6 +131,21 @@ "textContent": "\n ", "id": 20 }, + { + "type": 2, + "tagName": "input", + "attributes": { + "data-sentry-unmask": "", + "placeholder": "Placeholder can be unmasked" + }, + "childNodes": [], + "id": 21 + }, + { + "type": 3, + "textContent": "\n ", + "id": 22 + }, { "type": 2, "tagName": "div", @@ -141,15 +156,15 @@ { "type": 3, "textContent": "***** ****** ** ******", - "id": 22 + "id": 24 } ], - "id": 21 + "id": 23 }, { "type": 3, "textContent": "\n ", - "id": 23 + "id": 25 }, { "type": 2, @@ -160,12 +175,12 @@ }, "childNodes": [], "isSVG": true, - "id": 24 + "id": 26 }, { "type": 3, "textContent": "\n ", - "id": 25 + "id": 27 }, { "type": 2, @@ -184,7 +199,7 @@ }, "childNodes": [], "isSVG": true, - "id": 27 + "id": 29 }, { "type": 2, @@ -192,7 +207,7 @@ "attributes": {}, "childNodes": [], "isSVG": true, - "id": 28 + "id": 30 }, { "type": 2, @@ -200,16 +215,16 @@ "attributes": {}, "childNodes": [], "isSVG": true, - "id": 29 + "id": 31 } ], "isSVG": true, - "id": 26 + "id": 28 }, { "type": 3, "textContent": "\n ", - "id": 30 + "id": 32 }, { "type": 2, @@ -219,12 +234,12 @@ "rr_height": "[100-150]px" }, "childNodes": [], - "id": 31 + "id": 33 }, { "type": 3, "textContent": "\n ", - "id": 32 + "id": 34 }, { "type": 2, @@ -235,12 +250,12 @@ "src": "file:///none.png" }, "childNodes": [], - "id": 33 + "id": 35 }, { "type": 3, "textContent": "\n ", - "id": 34 + "id": 36 }, { "type": 2, @@ -250,17 +265,17 @@ "rr_height": "[0-50]px" }, "childNodes": [], - "id": 35 + "id": 37 }, { "type": 3, "textContent": "\n ", - "id": 36 + "id": 38 }, { "type": 3, "textContent": "\n\n", - "id": 37 + "id": 39 } ], "id": 8