test(replay): Add integration test for privacy #7055
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import * as Sentry from '@sentry/browser'; | ||
| import { Replay } from '@sentry/replay'; | ||
|
|
||
| window.Sentry = Sentry; | ||
| window.Replay = new Replay({ | ||
| flushMinDelay: 200, | ||
| flushMaxDelay: 200, | ||
| useCompression: false, | ||
| }); | ||
|
|
||
| Sentry.init({ | ||
| dsn: 'https://[email protected]/1337', | ||
| sampleRate: 0, | ||
| replaysSessionSampleRate: 1.0, | ||
| replaysOnErrorSampleRate: 0.0, | ||
|
|
||
| integrations: [window.Replay], | ||
| }); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head><meta charset="utf-8" /></head> | ||
| <body> | ||
| <button aria-label="Click me" onclick="console.log('Test log')">Click me</button> | ||
| <div>This should be masked by default</div> | ||
| <div data-sentry-unmask>This should be unmasked due to data attribute</div> | ||
| <input placeholder="Placeholder should be masked" /> | ||
| <div title="Title should be masked">Title should be masked</div> | ||
| <svg viewBox="0 0 80 80"><path d="M79 71.91a7.32 7.32 0 0 0 0-7.38L46.4 8A7.22 7.22 0 0 0 40 4.37 7.33 7.33 0 0 0 33.62 8L23.06 26.33l2.66 1.54A51.42 51.42 0 0 1 44.6 46.75a50.41 50.41 0 0 1 6.81 22.72H44a44.34 44.34 0 0 0-5.84-19A43.76 43.76 0 0 0 22.07 34.2l-2.66-1.54-9.83 17.13 2.65 1.54A24.9 24.9 0 0 1 24.3 69.47H7.39a1.2 1.2 0 0 1-1.06-.59 1.21 1.21 0 0 1 0-1.23l4.73-8.14a17.67 17.67 0 0 0-5.38-3.08L1 64.57A7.34 7.34 0 0 0 1 72a7.25 7.25 0 0 0 6.39 3.67h23.24v-3.12a31.32 31.32 0 0 0-4.09-15.38 31.26 31.26 0 0 0-8.67-9.57l3.71-6.39a38 38 0 0 1 11.33 12.28 38.1 38.1 0 0 1 5.1 19v3.08h19.68v-3.02a57.52 57.52 0 0 0-7.76-28.88A57.48 57.48 0 0 0 31.47 24.1l7.51-13a1.18 1.18 0 0 1 1.02-.57 1.16 1.16 0 0 1 1.05.59L73.7 67.61a1.2 1.2 0 0 1 0 1.22 1.13 1.13 0 0 1-1.06.59H65c.1 2.07.1 4.09 0 6.16h7.65A7.1 7.1 0 0 0 79 71.91z"/></svg> | ||
| <svg class="sentry-unblock" viewBox="0 0 80 80" data-sentry-unblock><path d="M79 71.91a7.32 7.32 0 0 0 0-7.38L46.4 8A7.22 7.22 0 0 0 40 4.37 7.33 7.33 0 0 0 33.62 8L23.06 26.33l2.66 1.54A51.42 51.42 0 0 1 44.6 46.75a50.41 50.41 0 0 1 6.81 22.72H44a44.34 44.34 0 0 0-5.84-19A43.76 43.76 0 0 0 22.07 34.2l-2.66-1.54-9.83 17.13 2.65 1.54A24.9 24.9 0 0 1 24.3 69.47H7.39a1.2 1.2 0 0 1-1.06-.59 1.21 1.21 0 0 1 0-1.23l4.73-8.14a17.67 17.67 0 0 0-5.38-3.08L1 64.57A7.34 7.34 0 0 0 1 72a7.25 7.25 0 0 0 6.39 3.67h23.24v-3.12a31.32 31.32 0 0 0-4.09-15.38 31.26 31.26 0 0 0-8.67-9.57l3.71-6.39a38 38 0 0 1 11.33 12.28 38.1 38.1 0 0 1 5.1 19v3.08h19.68v-3.02a57.52 57.52 0 0 0-7.76-28.88A57.48 57.48 0 0 0 31.47 24.1l7.51-13a1.18 1.18 0 0 1 1.02-.57 1.16 1.16 0 0 1 1.05.59L73.7 67.61a1.2 1.2 0 0 1 0 1.22 1.13 1.13 0 0 1-1.06.59H65c.1 2.07.1 4.09 0 6.16h7.65A7.1 7.1 0 0 0 79 71.91z"/></svg> | ||
| <img style="width:100px;height:100px" src="file:///none.png" /> | ||
| <img data-sentry-unblock style="width:100px;height:100px" src="file:///none.png" /> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| 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 { waitForReplayRequest } from '../../../utils/replayHelpers'; | ||
|
|
||
| sentryTest('should have the correct default privacy settings', async ({ getLocalTestPath, page }) => { | ||
| // Replay bundles are es6 only | ||
| if (process.env.PW_BUNDLE && process.env.PW_BUNDLE.startsWith('bundle_es5')) { | ||
| 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<RecordingEvent[]>(await reqPromise0, 5); | ||
| const checkoutEvent = replayPayload.find(({ type }) => type === EventType.FullSnapshot); | ||
|
|
||
| expect(JSON.stringify(checkoutEvent?.data, null, 2)).toMatchSnapshot('privacy.json'); | ||
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,236 @@ | ||
| { | ||
|
There was a problem hiding this comment. WDYT about using snapshots here @Lms24 -- It's cumbersome trying to update these by hand. There was a problem hiding this comment. I initially thought it'd be good to use snapshots in such situations. In #7082, it turned out though, that Playwright needs to have a snapshot for each platform+browser combination, meaning we'd likely end up with 12+ snapshot files per snapshot. The problem here is that this temporarily breaks tests on CI as well as for other folks running them locally and they'd need to contribute their newly made snapshots to the repo. We opted to therefore stay away from snapshots. There was a problem hiding this comment. @Lms24 Yeah I noticed that too, I was able to find a way to disable the platform, so now it's only by browser. This makes it possible to update snapshots locally, you just have to run There was a problem hiding this comment. Removing snapshots for now so I can merge this in now. There was a problem hiding this comment. Oh nice, didn't know this worked. Then sure, snapshots would be okay, too. Actually that's good to know for my tests as well! There was a problem hiding this comment. 👍 I'll make a new PR for it |
||
| "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 | ||
| } | ||
| ], | ||
| "id": 4 | ||
| }, | ||
| { | ||
| "type": 3, | ||
| "textContent": "\n ", | ||
| "id": 6 | ||
| }, | ||
| { | ||
| "type": 2, | ||
| "tagName": "body", | ||
| "attributes": {}, | ||
| "childNodes": [ | ||
| { | ||
| "type": 3, | ||
| "textContent": "\n ", | ||
| "id": 8 | ||
| }, | ||
| { | ||
| "type": 2, | ||
| "tagName": "button", | ||
| "attributes": { | ||
| "aria-label": "Click me", | ||
| "onclick": "console.log('Test log')" | ||
| }, | ||
| "childNodes": [ | ||
| { | ||
| "type": 3, | ||
| "textContent": "***** **", | ||
| "id": 10 | ||
| } | ||
| ], | ||
| "id": 9 | ||
| }, | ||
| { | ||
| "type": 3, | ||
| "textContent": "\n ", | ||
| "id": 11 | ||
| }, | ||
| { | ||
| "type": 2, | ||
| "tagName": "div", | ||
| "attributes": {}, | ||
| "childNodes": [ | ||
| { | ||
| "type": 3, | ||
| "textContent": "**** ****** ** ****** ** *******", | ||
| "id": 13 | ||
| } | ||
| ], | ||
| "id": 12 | ||
| }, | ||
| { | ||
| "type": 3, | ||
| "textContent": "\n ", | ||
| "id": 14 | ||
| }, | ||
| { | ||
| "type": 2, | ||
| "tagName": "div", | ||
| "attributes": { | ||
| "data-sentry-unmask": "" | ||
| }, | ||
| "childNodes": [ | ||
| { | ||
| "type": 3, | ||
| "textContent": "This should be unmasked due to data attribute", | ||
| "id": 16 | ||
| } | ||
| ], | ||
| "id": 15 | ||
| }, | ||
| { | ||
| "type": 3, | ||
| "textContent": "\n ", | ||
| "id": 17 | ||
| }, | ||
| { | ||
| "type": 2, | ||
| "tagName": "input", | ||
| "attributes": { | ||
| "placeholder": "Placeholder should be masked" | ||
| }, | ||
| "childNodes": [], | ||
| "id": 18 | ||
| }, | ||
| { | ||
| "type": 3, | ||
| "textContent": "\n ", | ||
| "id": 19 | ||
| }, | ||
| { | ||
| "type": 2, | ||
| "tagName": "div", | ||
| "attributes": { | ||
| "title": "Title should be masked" | ||
| }, | ||
| "childNodes": [ | ||
| { | ||
| "type": 3, | ||
| "textContent": "***** ****** ** ******", | ||
| "id": 21 | ||
| } | ||
| ], | ||
| "id": 20 | ||
| }, | ||
| { | ||
| "type": 3, | ||
| "textContent": "\n ", | ||
| "id": 22 | ||
| }, | ||
| { | ||
| "type": 2, | ||
| "tagName": "svg", | ||
| "attributes": { | ||
| "rr_width": "1264px", | ||
| "rr_height": "1264px" | ||
| }, | ||
| "childNodes": [], | ||
| "isSVG": true, | ||
| "id": 23 | ||
| }, | ||
| { | ||
| "type": 3, | ||
| "textContent": "\n ", | ||
| "id": 24 | ||
| }, | ||
| { | ||
| "type": 2, | ||
| "tagName": "svg", | ||
| "attributes": { | ||
| "class": "sentry-unblock", | ||
| "viewBox": "0 0 80 80", | ||
| "data-sentry-unblock": "" | ||
| }, | ||
| "childNodes": [ | ||
| { | ||
| "type": 2, | ||
| "tagName": "path", | ||
| "attributes": { | ||
| "rr_width": "1264.1212158203125px", | ||
| "rr_height": "1126.5677490234375px" | ||
| }, | ||
| "childNodes": [], | ||
| "isSVG": true, | ||
| "id": 26 | ||
| } | ||
| ], | ||
| "isSVG": true, | ||
| "id": 25 | ||
| }, | ||
| { | ||
| "type": 3, | ||
| "textContent": "\n ", | ||
| "id": 27 | ||
| }, | ||
| { | ||
| "type": 2, | ||
| "tagName": "img", | ||
| "attributes": { | ||
| "rr_width": "100px", | ||
| "rr_height": "100px" | ||
| }, | ||
| "childNodes": [], | ||
| "id": 28 | ||
| }, | ||
| { | ||
| "type": 3, | ||
| "textContent": "\n ", | ||
| "id": 29 | ||
| }, | ||
| { | ||
| "type": 2, | ||
| "tagName": "img", | ||
| "attributes": { | ||
| "data-sentry-unblock": "", | ||
| "style": "width:100px;height:100px", | ||
| "src": "file:///none.png" | ||
| }, | ||
| "childNodes": [], | ||
| "id": 30 | ||
| }, | ||
| { | ||
| "type": 3, | ||
| "textContent": "\n ", | ||
| "id": 31 | ||
| }, | ||
| { | ||
| "type": 3, | ||
| "textContent": "\n\n", | ||
| "id": 32 | ||
| } | ||
| ], | ||
| "id": 7 | ||
| } | ||
| ], | ||
| "id": 3 | ||
| } | ||
| ], | ||
| "id": 1 | ||
| }, | ||
| "initialOffset": { | ||
| "left": 0, | ||
| "top": 0 | ||
| } | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Huh, so these tests were breaking from es6 bundles when I did not use
Replayfrom@sentry/replay(e.g. I was usinSentry.Replay). Any ideas @Lms24?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yup, this was how we currently still differ between injecting the addon replay CDN bundle in addition to the CDN bundle (w/o replay) vs. testing the NPM @sentry/browser export.
I'm trying to get #7096 merged today which will get rid of relying on imports here. Going forward, we'll drop testing the addon bundle but instead additionally test against the two bundle variants that include Replay directly.