diff --git a/packages/rrweb-snapshot/test/snapshot.test.ts b/packages/rrweb-snapshot/test/snapshot.test.ts index ec76962062..f103baa6e2 100644 --- a/packages/rrweb-snapshot/test/snapshot.test.ts +++ b/packages/rrweb-snapshot/test/snapshot.test.ts @@ -158,7 +158,12 @@ describe('transformAttribute()', () => { describe('isBlockedElement()', () => { const subject = (html: string, opt: any = {}) => - _isBlockedElement(render(html), 'rr-block', opt.blockSelector, opt.unblockSelector); + _isBlockedElement( + render(html), + 'rr-block', + opt.blockSelector, + opt.unblockSelector, + ); const render = (html: string): HTMLElement => JSDOM.fragment(html).querySelector('div')!; diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap index eded8744cd..106e9f66f4 100644 --- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap +++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap @@ -2789,7 +2789,7 @@ exports[`record integration tests can record form interactions 1`] = ` \\"type\\": 3, \\"data\\": { \\"source\\": 5, - \\"text\\": \\"\\", + \\"text\\": \\"AA\\", \\"isChecked\\": false, \\"id\\": 62 } @@ -5335,7 +5335,7 @@ exports[`record integration tests can use maskInputOptions to configure which ty \\"type\\": 3, \\"data\\": { \\"source\\": 5, - \\"text\\": \\"\\", + \\"text\\": \\"AA\\", \\"isChecked\\": false, \\"id\\": 62 } @@ -6105,7 +6105,7 @@ exports[`record integration tests can use maskTextSelector to configure which in \\"type\\": 3, \\"data\\": { \\"source\\": 5, - \\"text\\": \\"\\", + \\"text\\": \\"AA\\", \\"isChecked\\": false, \\"id\\": 62 } @@ -12235,17 +12235,17 @@ exports[`record integration tests should not record input values if dynamically { \\"type\\": 3, \\"data\\": { - \\"source\\": 5, - \\"text\\": \\"************************\\", - \\"isChecked\\": false, - \\"id\\": 21 + \\"source\\": 3, + \\"id\\": 21, + \\"x\\": 12.5, + \\"y\\": 0 } }, { \\"type\\": 3, \\"data\\": { \\"source\\": 5, - \\"text\\": \\"*************************\\", + \\"text\\": \\"************************\\", \\"isChecked\\": false, \\"id\\": 21 } @@ -12253,10 +12253,10 @@ exports[`record integration tests should not record input values if dynamically { \\"type\\": 3, \\"data\\": { - \\"source\\": 3, - \\"id\\": 21, - \\"x\\": 27.5, - \\"y\\": 0 + \\"source\\": 5, + \\"text\\": \\"*************************\\", + \\"isChecked\\": false, + \\"id\\": 21 } } ]" @@ -12474,6 +12474,15 @@ exports[`record integration tests should not record input values if dynamically \\"id\\": 21 } }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 3, + \\"id\\": 21, + \\"x\\": 12.5, + \\"y\\": 0 + } + }, { \\"type\\": 3, \\"data\\": { @@ -13454,7 +13463,7 @@ exports[`record integration tests should not record input values if maskAllInput \\"type\\": 3, \\"data\\": { \\"source\\": 5, - \\"text\\": \\"\\", + \\"text\\": \\"**\\", \\"isChecked\\": false, \\"id\\": 62 } @@ -16084,14 +16093,6 @@ exports[`record integration tests should record images inside iframe with blob u \\"isAttachIframe\\": true } }, - { - \\"type\\": 3, - \\"data\\": { - \\"source\\": 4, - \\"width\\": 1920, - \\"height\\": 1080 - } - }, { \\"type\\": 3, \\"data\\": { @@ -17554,7 +17555,7 @@ exports[`record integration tests should record input userTriggered values if us \\"type\\": 3, \\"data\\": { \\"source\\": 5, - \\"text\\": \\"\\", + \\"text\\": \\"AA\\", \\"isChecked\\": false, \\"userTriggered\\": false, \\"id\\": 62 @@ -17757,6 +17758,15 @@ exports[`record integration tests should record input values if dynamically adde \\"id\\": 21 } }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 3, + \\"id\\": 21, + \\"x\\": 24, + \\"y\\": 0 + } + }, { \\"type\\": 3, \\"data\\": { @@ -18007,6 +18017,15 @@ exports[`record integration tests should record input values if dynamically adde \\"id\\": 21 } }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 3, + \\"id\\": 21, + \\"x\\": 27.5, + \\"y\\": 0 + } + }, { \\"type\\": 3, \\"data\\": { @@ -18380,7 +18399,7 @@ exports[`record integration tests should record moved shadow DOM 2 1`] = ` ]" `; -exports[`record integration tests should record mutations in iframes accross pages 1`] = ` +exports[`record integration tests should record mutations in iframes across pages 1`] = ` "[ { \\"type\\": 0, @@ -18616,14 +18635,6 @@ exports[`record integration tests should record mutations in iframes accross pag \\"isAttachIframe\\": true } }, - { - \\"type\\": 3, - \\"data\\": { - \\"source\\": 4, - \\"width\\": 1920, - \\"height\\": 1080 - } - }, { \\"type\\": 3, \\"data\\": { @@ -19025,14 +19036,6 @@ exports[`record integration tests should record nested iframes and shadow doms 1 \\"isAttachIframe\\": true } }, - { - \\"type\\": 3, - \\"data\\": { - \\"source\\": 4, - \\"width\\": 1920, - \\"height\\": 1080 - } - }, { \\"type\\": 3, \\"data\\": { diff --git a/packages/rrweb/test/e2e/__image_snapshots__/webgl-test-ts-e-2-e-webgl-will-record-and-replay-a-webgl-square-1-snap.png b/packages/rrweb/test/e2e/__image_snapshots__/webgl-test-ts-e-2-e-webgl-will-record-and-replay-a-webgl-square-1-snap.png index f3d21580ad..7c9c7951db 100644 Binary files a/packages/rrweb/test/e2e/__image_snapshots__/webgl-test-ts-e-2-e-webgl-will-record-and-replay-a-webgl-square-1-snap.png and b/packages/rrweb/test/e2e/__image_snapshots__/webgl-test-ts-e-2-e-webgl-will-record-and-replay-a-webgl-square-1-snap.png differ diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts index 97118012d1..9cbae20a0c 100644 --- a/packages/rrweb/test/integration.test.ts +++ b/packages/rrweb/test/integration.test.ts @@ -21,16 +21,6 @@ import { } from '@sentry-internal/rrweb-types'; import { visitSnapshot, NodeType } from '@sentry-internal/rrweb-snapshot'; -/** - * Used to filter scroll events out of snapshots as they are flakey - */ -function isNotScroll(snapshot: eventWithTime) { - return !( - snapshot.type === EventType.IncrementalSnapshot && - snapshot.data.source === IncrementalSource.Scroll - ); -} - describe('record integration tests', function (this: ISuite) { jest.setTimeout(10_000); @@ -256,7 +246,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots.filter(isNotScroll)); + assertSnapshot(snapshots); }); it('can record style changes compactly and preserve css var() functions', async () => { @@ -331,8 +321,7 @@ describe('record integration tests', function (this: ISuite) { } }); - const snapshots = await page.evaluate('window.snapshots'); - assertSnapshot(snapshots); + await assertSnapshot(page); const lastMutationsLength = await page.evaluate( 'window.lastMutationsLength', @@ -573,7 +562,6 @@ describe('record integration tests', function (this: ISuite) { it('should record unblocked elements that are also blocked more generically', async () => { const page: puppeteer.Page = await browser.newPage(); - page.on('console', (msg) => console.log(msg.text())); await page.goto('about:blank'); const html = getHtml.call(this, 'unblock.html', { blockSelector: 'div', @@ -610,7 +598,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots.filter(isNotScroll)); + assertSnapshot(snapshots); }); it('mutations should work when blocked class is unblocked', async () => { @@ -689,7 +677,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots.filter(isNotScroll)); + assertSnapshot(snapshots); }); it('should record canvas mutations', async () => { @@ -738,7 +726,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots.filter(isNotScroll)); + assertSnapshot(snapshots); }); it('should record textarea values if dynamically added and maskAllInputs is false', async () => { @@ -763,7 +751,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots.filter(isNotScroll)); + assertSnapshot(snapshots); }); it('should not record input values if dynamically added, maskAllInputs is false, and mask selector is used', async () => { @@ -791,7 +779,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots.filter(isNotScroll)); + assertSnapshot(snapshots); }); it('should not record input values if dynamically added and maskAllInputs is true', async () => { @@ -837,7 +825,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots.filter(isNotScroll)); + assertSnapshot(snapshots); }); it('should record input values if dynamically added, maskAllInputs is true, and unmask selector is used', async () => { @@ -865,7 +853,7 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots.filter(isNotScroll)); + assertSnapshot(snapshots); }); it('should record webgl canvas mutations', async () => { @@ -1050,7 +1038,6 @@ describe('record integration tests', function (this: ISuite) { it('should record images with blob url', async () => { const page: puppeteer.Page = await browser.newPage(); - page.on('console', (msg) => console.log(msg.text())); await page.goto(`${serverURL}/html`); page.setContent( getHtml.call(this, 'image-blob-url.html', { inlineImages: true }), @@ -1067,7 +1054,6 @@ describe('record integration tests', function (this: ISuite) { it('should record images inside iframe with blob url', async () => { const page: puppeteer.Page = await browser.newPage(); - page.on('console', (msg) => console.log(msg.text())); await page.goto(`${serverURL}/html`); await page.setContent( getHtml.call(this, 'frame-image-blob-url.html', { inlineImages: true }), @@ -1084,7 +1070,6 @@ describe('record integration tests', function (this: ISuite) { it('should record images inside iframe with blob url after iframe was reloaded', async () => { const page: puppeteer.Page = await browser.newPage(); - page.on('console', (msg) => console.log(msg.text())); await page.goto(`${serverURL}/html`); await page.setContent( getHtml.call(this, 'frame2.html', { inlineImages: true }), @@ -1310,13 +1295,12 @@ describe('record integration tests', function (this: ISuite) { const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; - assertSnapshot(snapshots.filter(isNotScroll)); + assertSnapshot(snapshots); }); - it('should record mutations in iframes accross pages', async () => { + it('should record mutations in iframes across pages', async () => { const page: puppeteer.Page = await browser.newPage(); await page.goto(`${serverURL}/html`); - page.on('console', (msg) => console.log(msg.text())); await page.setContent(getHtml.call(this, 'frame2.html')); await page.waitForSelector('iframe'); // wait for iframe to get added @@ -1475,7 +1459,9 @@ describe('record integration tests', function (this: ISuite) { }), ); - const snapshots = await page.evaluate('window.snapshots'); + const snapshots = (await page.evaluate( + 'window.snapshots', + )) as eventWithTime[]; assertSnapshot(snapshots); }); diff --git a/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap b/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap index e351ef5171..0f3fb48133 100644 --- a/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap +++ b/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap @@ -2123,7 +2123,7 @@ exports[`cross origin iframes form.html should map input events correctly 1`] = \\"type\\": 3, \\"data\\": { \\"source\\": 5, - \\"text\\": \\"\\", + \\"text\\": \\"AA\\", \\"isChecked\\": false, \\"id\\": 74 } diff --git a/yarn.lock b/yarn.lock index c26d4e9233..f579e11c04 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5503,15 +5503,10 @@ csso@^4.0.2: dependencies: css-tree "^1.1.2" -cssom@^0.4.4, "cssom@https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz": +cssom@^0.4.4, cssom@^0.5.0, "cssom@https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz": version "0.6.0" resolved "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz#ed298055b97cbddcdeb278f904857629dec5e0e1" -cssom@^0.5.0: - version "0.5.0" - resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.5.0.tgz#d254fa92cd8b6fbd83811b9fbaed34663cc17c36" - integrity sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw== - cssom@~0.3.6: version "0.3.8" resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"