From e21fe4fb0e1b4f650e8cf12d47e6b757b9c4a8ee Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Fri, 10 Feb 2023 10:26:31 -0500 Subject: [PATCH 1/4] test(integration): Add support for snapshots in integration tests * adds `yarn test:update-snapshots` script to update snapshots easily. This will run tests across all browsers and update the snapshots accordingly. --- package.json | 3 +- packages/integration-tests/package.json | 3 +- .../suites/replay/privacy/test.ts | 252 +----------------- .../test.ts-snapshots/privacy-chromium.json | 251 +++++++++++++++++ .../test.ts-snapshots/privacy-firefox.json | 251 +++++++++++++++++ .../test.ts-snapshots/privacy-webkit.json | 251 +++++++++++++++++ packages/integration-tests/utils/fixtures.ts | 9 + 7 files changed, 767 insertions(+), 253 deletions(-) create mode 100644 packages/integration-tests/suites/replay/privacy/test.ts-snapshots/privacy-chromium.json create mode 100644 packages/integration-tests/suites/replay/privacy/test.ts-snapshots/privacy-firefox.json create mode 100644 packages/integration-tests/suites/replay/privacy/test.ts-snapshots/privacy-webkit.json diff --git a/package.json b/package.json index 40dc91097f47..2d6f2be9f82f 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 --scope=@sentry-internal/browser-integration-test test:update-snapshots" }, "volta": { "node": "16.19.0", diff --git a/packages/integration-tests/package.json b/packages/integration-tests/package.json index e1e550e4b5c6..17c977c49c0f 100644 --- a/packages/integration-tests/package.json +++ b/packages/integration-tests/package.json @@ -25,7 +25,8 @@ "test:bundle:es6:min": "PW_BUNDLE=bundle_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/test.ts b/packages/integration-tests/suites/replay/privacy/test.ts index f728e2ada1aa..53187dc7e9f7 100644 --- a/packages/integration-tests/suites/replay/privacy/test.ts +++ b/packages/integration-tests/suites/replay/privacy/test.ts @@ -28,255 +28,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..9cbcb2073fe4 --- /dev/null +++ b/packages/integration-tests/suites/replay/privacy/test.ts-snapshots/privacy-chromium.json @@ -0,0 +1,251 @@ +{ + "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 + } +} \ 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..9cbcb2073fe4 --- /dev/null +++ b/packages/integration-tests/suites/replay/privacy/test.ts-snapshots/privacy-firefox.json @@ -0,0 +1,251 @@ +{ + "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 + } +} \ 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..9cbcb2073fe4 --- /dev/null +++ b/packages/integration-tests/suites/replay/privacy/test.ts-snapshots/privacy-webkit.json @@ -0,0 +1,251 @@ +{ + "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 + } +} \ 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')}`; From 2ec2598d0e9e6fd49c64ad28345916ee8c0494ee Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Fri, 10 Feb 2023 11:01:18 -0500 Subject: [PATCH 2/4] update script --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2d6f2be9f82f..2d02e39096a6 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "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:update-snapshots": "lerna run --scope=@sentry-internal/browser-integration-test test:update-snapshots" + "test:update-snapshots": "lerna run test:update-snapshots" }, "volta": { "node": "16.19.0", From 62c6025cde5fd8937e3f67fcfa0a055d107fd8ef Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Fri, 10 Feb 2023 14:09:16 -0800 Subject: [PATCH 3/4] test(replay): Add