diff --git a/package.json b/package.json index 40dc91097f47..2d02e39096a6 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,8 @@ "postpublish": "lerna run --stream --concurrency 1 postpublish", "test": "lerna run --ignore @sentry-internal/* test", "test-ci-browser": "lerna run test --ignore \"@sentry/{node,opentelemetry-node,serverless,nextjs,remix,gatsby}\" --ignore @sentry-internal/*", - "test-ci-node": "ts-node ./scripts/node-unit-tests.ts" + "test-ci-node": "ts-node ./scripts/node-unit-tests.ts", + "test:update-snapshots": "lerna run test:update-snapshots" }, "volta": { "node": "16.19.0", diff --git a/packages/integration-tests/package.json b/packages/integration-tests/package.json index 9978b0559cbb..c0470e4abb9d 100644 --- a/packages/integration-tests/package.json +++ b/packages/integration-tests/package.json @@ -27,7 +27,8 @@ "test:bundle:replay:es6:min": "PW_BUNDLE=bundle_replay_es6_min yarn test", "test:cjs": "PW_BUNDLE=cjs yarn test", "test:esm": "PW_BUNDLE=esm yarn test", - "test:ci": "playwright test ./suites --browser='all' --reporter='line'" + "test:ci": "playwright test ./suites --browser='all' --reporter='line'", + "test:update-snapshots": "yarn test --update-snapshots --browser='all'" }, "dependencies": { "@babel/preset-typescript": "^7.16.7", diff --git a/packages/integration-tests/suites/replay/privacy/template.html b/packages/integration-tests/suites/replay/privacy/template.html index a61532e6ae68..2eb0f8df7b37 100644 --- a/packages/integration-tests/suites/replay/privacy/template.html +++ b/packages/integration-tests/suites/replay/privacy/template.html @@ -11,5 +11,6 @@ + diff --git a/packages/integration-tests/suites/replay/privacy/test.ts b/packages/integration-tests/suites/replay/privacy/test.ts index 2c2b1f9b8070..a6315d5d1e66 100644 --- a/packages/integration-tests/suites/replay/privacy/test.ts +++ b/packages/integration-tests/suites/replay/privacy/test.ts @@ -27,255 +27,5 @@ sentryTest('should have the correct default privacy settings', async ({ getLocal const replayPayload = envelopeRequestParser(await reqPromise0, 5); const checkoutEvent = replayPayload.find(({ type }) => type === EventType.FullSnapshot); - expect(checkoutEvent?.data).toEqual({ - 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': '***** **', - 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: '*********** ****** ** ******', - }, - childNodes: [], - id: 18, - }, - { - type: 3, - textContent: '\n ', - id: 19, - }, - { - type: 2, - tagName: 'div', - attributes: { - title: '***** ****** ** ******', - }, - childNodes: [ - { - type: 3, - textContent: '***** ****** ** ******', - id: 21, - }, - ], - id: 20, - }, - { - type: 3, - textContent: '\n ', - id: 22, - }, - { - type: 2, - tagName: 'svg', - attributes: { - rr_width: '200px', - rr_height: '200px', - }, - childNodes: [], - isSVG: true, - id: 23, - }, - { - type: 3, - textContent: '\n ', - id: 24, - }, - { - 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: 26, - }, - { - type: 2, - tagName: 'area', - attributes: {}, - childNodes: [], - isSVG: true, - id: 27, - }, - { - type: 2, - tagName: 'rect', - attributes: {}, - childNodes: [], - isSVG: true, - id: 28, - }, - ], - isSVG: true, - id: 25, - }, - { - type: 3, - textContent: '\n ', - id: 29, - }, - { - type: 2, - tagName: 'img', - attributes: { - rr_width: '100px', - rr_height: '100px', - }, - childNodes: [], - id: 30, - }, - { - type: 3, - textContent: '\n ', - id: 31, - }, - { - type: 2, - tagName: 'img', - attributes: { - 'data-sentry-unblock': '', - style: 'width:100px;height:100px', - src: 'file:///none.png', - }, - childNodes: [], - id: 32, - }, - { - type: 3, - textContent: '\n ', - id: 33, - }, - { - type: 3, - textContent: '\n\n', - id: 34, - }, - ], - id: 7, - }, - ], - id: 3, - }, - ], - id: 1, - }, - initialOffset: { - left: 0, - top: 0, - }, - }); + expect(JSON.stringify(checkoutEvent?.data, null, 2)).toMatchSnapshot('privacy.json'); }); diff --git a/packages/integration-tests/suites/replay/privacy/test.ts-snapshots/privacy-chromium.json b/packages/integration-tests/suites/replay/privacy/test.ts-snapshots/privacy-chromium.json new file mode 100644 index 000000000000..d0cb968d61ff --- /dev/null +++ b/packages/integration-tests/suites/replay/privacy/test.ts-snapshots/privacy-chromium.json @@ -0,0 +1,266 @@ +{ + "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": "***** **", + "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": "*********** ****** ** ******" + }, + "childNodes": [], + "id": 18 + }, + { + "type": 3, + "textContent": "\n ", + "id": 19 + }, + { + "type": 2, + "tagName": "div", + "attributes": { + "title": "***** ****** ** ******" + }, + "childNodes": [ + { + "type": 3, + "textContent": "***** ****** ** ******", + "id": 21 + } + ], + "id": 20 + }, + { + "type": 3, + "textContent": "\n ", + "id": 22 + }, + { + "type": 2, + "tagName": "svg", + "attributes": { + "rr_width": "200px", + "rr_height": "200px" + }, + "childNodes": [], + "isSVG": true, + "id": 23 + }, + { + "type": 3, + "textContent": "\n ", + "id": 24 + }, + { + "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": 26 + }, + { + "type": 2, + "tagName": "area", + "attributes": {}, + "childNodes": [], + "isSVG": true, + "id": 27 + }, + { + "type": 2, + "tagName": "rect", + "attributes": {}, + "childNodes": [], + "isSVG": true, + "id": 28 + } + ], + "isSVG": true, + "id": 25 + }, + { + "type": 3, + "textContent": "\n ", + "id": 29 + }, + { + "type": 2, + "tagName": "img", + "attributes": { + "rr_width": "100px", + "rr_height": "100px" + }, + "childNodes": [], + "id": 30 + }, + { + "type": 3, + "textContent": "\n ", + "id": 31 + }, + { + "type": 2, + "tagName": "img", + "attributes": { + "data-sentry-unblock": "", + "style": "width:100px;height:100px", + "src": "file:///none.png" + }, + "childNodes": [], + "id": 32 + }, + { + "type": 3, + "textContent": "\n ", + "id": 33 + }, + { + "type": 2, + "tagName": "video", + "attributes": { + "rr_width": "30px", + "rr_height": "30px" + }, + "childNodes": [], + "id": 34 + }, + { + "type": 3, + "textContent": "\n ", + "id": 35 + }, + { + "type": 3, + "textContent": "\n\n", + "id": 36 + } + ], + "id": 7 + } + ], + "id": 3 + } + ], + "id": 1 + }, + "initialOffset": { + "left": 0, + "top": 0 + } +} \ No newline at end of file diff --git a/packages/integration-tests/suites/replay/privacy/test.ts-snapshots/privacy-firefox.json b/packages/integration-tests/suites/replay/privacy/test.ts-snapshots/privacy-firefox.json new file mode 100644 index 000000000000..d0cb968d61ff --- /dev/null +++ b/packages/integration-tests/suites/replay/privacy/test.ts-snapshots/privacy-firefox.json @@ -0,0 +1,266 @@ +{ + "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": "***** **", + "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": "*********** ****** ** ******" + }, + "childNodes": [], + "id": 18 + }, + { + "type": 3, + "textContent": "\n ", + "id": 19 + }, + { + "type": 2, + "tagName": "div", + "attributes": { + "title": "***** ****** ** ******" + }, + "childNodes": [ + { + "type": 3, + "textContent": "***** ****** ** ******", + "id": 21 + } + ], + "id": 20 + }, + { + "type": 3, + "textContent": "\n ", + "id": 22 + }, + { + "type": 2, + "tagName": "svg", + "attributes": { + "rr_width": "200px", + "rr_height": "200px" + }, + "childNodes": [], + "isSVG": true, + "id": 23 + }, + { + "type": 3, + "textContent": "\n ", + "id": 24 + }, + { + "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": 26 + }, + { + "type": 2, + "tagName": "area", + "attributes": {}, + "childNodes": [], + "isSVG": true, + "id": 27 + }, + { + "type": 2, + "tagName": "rect", + "attributes": {}, + "childNodes": [], + "isSVG": true, + "id": 28 + } + ], + "isSVG": true, + "id": 25 + }, + { + "type": 3, + "textContent": "\n ", + "id": 29 + }, + { + "type": 2, + "tagName": "img", + "attributes": { + "rr_width": "100px", + "rr_height": "100px" + }, + "childNodes": [], + "id": 30 + }, + { + "type": 3, + "textContent": "\n ", + "id": 31 + }, + { + "type": 2, + "tagName": "img", + "attributes": { + "data-sentry-unblock": "", + "style": "width:100px;height:100px", + "src": "file:///none.png" + }, + "childNodes": [], + "id": 32 + }, + { + "type": 3, + "textContent": "\n ", + "id": 33 + }, + { + "type": 2, + "tagName": "video", + "attributes": { + "rr_width": "30px", + "rr_height": "30px" + }, + "childNodes": [], + "id": 34 + }, + { + "type": 3, + "textContent": "\n ", + "id": 35 + }, + { + "type": 3, + "textContent": "\n\n", + "id": 36 + } + ], + "id": 7 + } + ], + "id": 3 + } + ], + "id": 1 + }, + "initialOffset": { + "left": 0, + "top": 0 + } +} \ No newline at end of file diff --git a/packages/integration-tests/suites/replay/privacy/test.ts-snapshots/privacy-webkit.json b/packages/integration-tests/suites/replay/privacy/test.ts-snapshots/privacy-webkit.json new file mode 100644 index 000000000000..d0cb968d61ff --- /dev/null +++ b/packages/integration-tests/suites/replay/privacy/test.ts-snapshots/privacy-webkit.json @@ -0,0 +1,266 @@ +{ + "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": "***** **", + "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": "*********** ****** ** ******" + }, + "childNodes": [], + "id": 18 + }, + { + "type": 3, + "textContent": "\n ", + "id": 19 + }, + { + "type": 2, + "tagName": "div", + "attributes": { + "title": "***** ****** ** ******" + }, + "childNodes": [ + { + "type": 3, + "textContent": "***** ****** ** ******", + "id": 21 + } + ], + "id": 20 + }, + { + "type": 3, + "textContent": "\n ", + "id": 22 + }, + { + "type": 2, + "tagName": "svg", + "attributes": { + "rr_width": "200px", + "rr_height": "200px" + }, + "childNodes": [], + "isSVG": true, + "id": 23 + }, + { + "type": 3, + "textContent": "\n ", + "id": 24 + }, + { + "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": 26 + }, + { + "type": 2, + "tagName": "area", + "attributes": {}, + "childNodes": [], + "isSVG": true, + "id": 27 + }, + { + "type": 2, + "tagName": "rect", + "attributes": {}, + "childNodes": [], + "isSVG": true, + "id": 28 + } + ], + "isSVG": true, + "id": 25 + }, + { + "type": 3, + "textContent": "\n ", + "id": 29 + }, + { + "type": 2, + "tagName": "img", + "attributes": { + "rr_width": "100px", + "rr_height": "100px" + }, + "childNodes": [], + "id": 30 + }, + { + "type": 3, + "textContent": "\n ", + "id": 31 + }, + { + "type": 2, + "tagName": "img", + "attributes": { + "data-sentry-unblock": "", + "style": "width:100px;height:100px", + "src": "file:///none.png" + }, + "childNodes": [], + "id": 32 + }, + { + "type": 3, + "textContent": "\n ", + "id": 33 + }, + { + "type": 2, + "tagName": "video", + "attributes": { + "rr_width": "30px", + "rr_height": "30px" + }, + "childNodes": [], + "id": 34 + }, + { + "type": 3, + "textContent": "\n ", + "id": 35 + }, + { + "type": 3, + "textContent": "\n\n", + "id": 36 + } + ], + "id": 7 + } + ], + "id": 3 + } + ], + "id": 1 + }, + "initialOffset": { + "left": 0, + "top": 0 + } +} \ No newline at end of file diff --git a/packages/integration-tests/utils/fixtures.ts b/packages/integration-tests/utils/fixtures.ts index 3926bf1f9d74..15c41ab10c14 100644 --- a/packages/integration-tests/utils/fixtures.ts +++ b/packages/integration-tests/utils/fixtures.ts @@ -22,6 +22,7 @@ const getAsset = (assetDir: string, asset: string): string => { }; export type TestFixtures = { + _autoSnapshotSuffix: void; testDir: string; getLocalTestPath: (options: { testDir: string }) => Promise; runInChromium: (fn: (...args: unknown[]) => unknown, args?: unknown[]) => unknown; @@ -35,6 +36,14 @@ export type TestFixtures = { }; const sentryTest = base.extend({ + _autoSnapshotSuffix: [ + async ({}, use, testInfo) => { + testInfo.snapshotSuffix = ''; + await use(); + }, + { auto: true }, + ], + getLocalTestPath: ({}, use, testInfo) => { return use(async ({ testDir }) => { const pagePath = `file:///${path.resolve(testDir, './dist/index.html')}`;