From b00798099a131b380ad805040046e861a3e8419c Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Wed, 12 Apr 2023 12:10:04 +0100 Subject: [PATCH 1/7] Fixup type errors --- packages/rrweb/src/record/observer.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts index 2e4ab35976..31f77298b4 100644 --- a/packages/rrweb/src/record/observer.ts +++ b/packages/rrweb/src/record/observer.ts @@ -230,7 +230,7 @@ function initMouseInteractionObserver({ : sampling.mouseInteraction; const handlers: listenerHandler[] = []; - let currentPointerType = null; + let currentPointerType: PointerTypes | null = null; const getHandler = (eventKey: keyof typeof MouseInteractions) => { return (event: MouseEvent | TouchEvent | PointerEvent) => { const target = getEventTarget(event) as Node; @@ -241,7 +241,7 @@ function initMouseInteractionObserver({ let e = event; if ('pointerType' in e) { Object.keys(PointerTypes).forEach( - (pointerKey: keyof typeof PointerKeys) => { + (pointerKey: keyof typeof PointerTypes) => { if ((e as PointerEvent).pointerType === pointerKey.toLowerCase()) { pointerType = PointerTypes[pointerKey]; return; From 0228137f51000458038e182a744dbd7b4b0c4880 Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Wed, 12 Apr 2023 12:16:28 +0100 Subject: [PATCH 2/7] The type system was complaining about the remote possibility that `e` ended up as a TouchEvent instead of an individual Touch object I think --- packages/rrweb/src/record/observer.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts index 31f77298b4..6771cf2acb 100644 --- a/packages/rrweb/src/record/observer.ts +++ b/packages/rrweb/src/record/observer.ts @@ -238,11 +238,12 @@ function initMouseInteractionObserver({ return; } let pointerType: PointerTypes | null = null; - let e = event; - if ('pointerType' in e) { + if ('pointerType' in event) { Object.keys(PointerTypes).forEach( (pointerKey: keyof typeof PointerTypes) => { - if ((e as PointerEvent).pointerType === pointerKey.toLowerCase()) { + if ( + (event as PointerEvent).pointerType === pointerKey.toLowerCase() + ) { pointerType = PointerTypes[pointerKey]; return; } @@ -262,7 +263,6 @@ function initMouseInteractionObserver({ // TODO: these will get incorrectly emitted as MouseDown/MouseUp } } else if (legacy_isTouchEvent(event)) { - e = event.changedTouches[0]; pointerType = PointerTypes.Touch; } if (pointerType !== null) { @@ -271,6 +271,7 @@ function initMouseInteractionObserver({ pointerType = currentPointerType; currentPointerType = null; // cleanup as we've used it } + const e = legacy_isTouchEvent(event) ? event.changedTouches[0] : event; if (!e) { return; } From 777ab9a7cd134d0cceb7295bb2089c97c83c17cf Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Wed, 12 Apr 2023 12:53:06 +0100 Subject: [PATCH 3/7] `pointerType` shows up in clicks in these tests on my machine; `0=PointerTypes.Mouse` is expected --- .../__snapshots__/integration.test.ts.snap | 123 ++++++++++++------ .../cross-origin-iframes.test.ts.snap | 18 ++- 2 files changed, 94 insertions(+), 47 deletions(-) diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap index 7c6fdfbfda..9fe06944e8 100644 --- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap +++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap @@ -1847,7 +1847,8 @@ exports[`record integration tests can record form interactions 1`] = ` \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 27 + \\"id\\": 27, + \\"pointerType\\": 0 } }, { @@ -1871,7 +1872,8 @@ exports[`record integration tests can record form interactions 1`] = ` \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 27 + \\"id\\": 27, + \\"pointerType\\": 0 } }, { @@ -1879,7 +1881,8 @@ exports[`record integration tests can record form interactions 1`] = ` \\"data\\": { \\"source\\": 2, \\"type\\": 2, - \\"id\\": 27 + \\"id\\": 27, + \\"pointerType\\": 0 } }, { @@ -1905,7 +1908,8 @@ exports[`record integration tests can record form interactions 1`] = ` \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 37 + \\"id\\": 37, + \\"pointerType\\": 0 } }, { @@ -1929,7 +1933,8 @@ exports[`record integration tests can record form interactions 1`] = ` \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 37 + \\"id\\": 37, + \\"pointerType\\": 0 } }, { @@ -1937,7 +1942,8 @@ exports[`record integration tests can record form interactions 1`] = ` \\"data\\": { \\"source\\": 2, \\"type\\": 2, - \\"id\\": 37 + \\"id\\": 37, + \\"pointerType\\": 0 } }, { @@ -2621,7 +2627,8 @@ exports[`record integration tests can record node mutations 1`] = ` \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 26 + \\"id\\": 26, + \\"pointerType\\": 0 } }, { @@ -3078,7 +3085,8 @@ exports[`record integration tests can record node mutations 1`] = ` \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 70 + \\"id\\": 70, + \\"pointerType\\": 0 } }, { @@ -3625,7 +3633,8 @@ exports[`record integration tests can use maskInputOptions to configure which ty \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 27 + \\"id\\": 27, + \\"pointerType\\": 0 } }, { @@ -3649,7 +3658,8 @@ exports[`record integration tests can use maskInputOptions to configure which ty \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 27 + \\"id\\": 27, + \\"pointerType\\": 0 } }, { @@ -3657,7 +3667,8 @@ exports[`record integration tests can use maskInputOptions to configure which ty \\"data\\": { \\"source\\": 2, \\"type\\": 2, - \\"id\\": 27 + \\"id\\": 27, + \\"pointerType\\": 0 } }, { @@ -3683,7 +3694,8 @@ exports[`record integration tests can use maskInputOptions to configure which ty \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 37 + \\"id\\": 37, + \\"pointerType\\": 0 } }, { @@ -3707,7 +3719,8 @@ exports[`record integration tests can use maskInputOptions to configure which ty \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 37 + \\"id\\": 37, + \\"pointerType\\": 0 } }, { @@ -3715,7 +3728,8 @@ exports[`record integration tests can use maskInputOptions to configure which ty \\"data\\": { \\"source\\": 2, \\"type\\": 2, - \\"id\\": 37 + \\"id\\": 37, + \\"pointerType\\": 0 } }, { @@ -4670,7 +4684,8 @@ exports[`record integration tests mutations should work when blocked class is un \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 42 + \\"id\\": 42, + \\"pointerType\\": 0 } }, { @@ -4686,7 +4701,8 @@ exports[`record integration tests mutations should work when blocked class is un \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 42 + \\"id\\": 42, + \\"pointerType\\": 0 } }, { @@ -4694,7 +4710,8 @@ exports[`record integration tests mutations should work when blocked class is un \\"data\\": { \\"source\\": 2, \\"type\\": 2, - \\"id\\": 42 + \\"id\\": 42, + \\"pointerType\\": 0 } }, { @@ -4793,7 +4810,8 @@ exports[`record integration tests mutations should work when blocked class is un \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 68 + \\"id\\": 68, + \\"pointerType\\": 0 } }, { @@ -4817,7 +4835,8 @@ exports[`record integration tests mutations should work when blocked class is un \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 68 + \\"id\\": 68, + \\"pointerType\\": 0 } }, { @@ -4825,7 +4844,8 @@ exports[`record integration tests mutations should work when blocked class is un \\"data\\": { \\"source\\": 2, \\"type\\": 2, - \\"id\\": 68 + \\"id\\": 68, + \\"pointerType\\": 0 } }, { @@ -5384,7 +5404,8 @@ exports[`record integration tests should mask password value attribute with mask \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 20 + \\"id\\": 20, + \\"pointerType\\": 0 } }, { @@ -5408,7 +5429,8 @@ exports[`record integration tests should mask password value attribute with mask \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 20 + \\"id\\": 20, + \\"pointerType\\": 0 } }, { @@ -5416,7 +5438,8 @@ exports[`record integration tests should mask password value attribute with mask \\"data\\": { \\"source\\": 2, \\"type\\": 2, - \\"id\\": 20 + \\"id\\": 20, + \\"pointerType\\": 0 } }, { @@ -5492,7 +5515,8 @@ exports[`record integration tests should mask password value attribute with mask \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 20 + \\"id\\": 20, + \\"pointerType\\": 0 } }, { @@ -5516,7 +5540,8 @@ exports[`record integration tests should mask password value attribute with mask \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 20 + \\"id\\": 20, + \\"pointerType\\": 0 } }, { @@ -5524,7 +5549,8 @@ exports[`record integration tests should mask password value attribute with mask \\"data\\": { \\"source\\": 2, \\"type\\": 2, - \\"id\\": 20 + \\"id\\": 20, + \\"pointerType\\": 0 } }, { @@ -7991,7 +8017,8 @@ exports[`record integration tests should not record input values if maskAllInput \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 27 + \\"id\\": 27, + \\"pointerType\\": 0 } }, { @@ -8015,7 +8042,8 @@ exports[`record integration tests should not record input values if maskAllInput \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 27 + \\"id\\": 27, + \\"pointerType\\": 0 } }, { @@ -8023,7 +8051,8 @@ exports[`record integration tests should not record input values if maskAllInput \\"data\\": { \\"source\\": 2, \\"type\\": 2, - \\"id\\": 27 + \\"id\\": 27, + \\"pointerType\\": 0 } }, { @@ -8049,7 +8078,8 @@ exports[`record integration tests should not record input values if maskAllInput \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 37 + \\"id\\": 37, + \\"pointerType\\": 0 } }, { @@ -8073,7 +8103,8 @@ exports[`record integration tests should not record input values if maskAllInput \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 37 + \\"id\\": 37, + \\"pointerType\\": 0 } }, { @@ -8081,7 +8112,8 @@ exports[`record integration tests should not record input values if maskAllInput \\"data\\": { \\"source\\": 2, \\"type\\": 2, - \\"id\\": 37 + \\"id\\": 37, + \\"pointerType\\": 0 } }, { @@ -10022,7 +10054,8 @@ exports[`record integration tests should record dynamic CSS changes 1`] = ` \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 26 + \\"id\\": 26, + \\"pointerType\\": 0 } }, { @@ -10030,7 +10063,8 @@ exports[`record integration tests should record dynamic CSS changes 1`] = ` \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 26 + \\"id\\": 26, + \\"pointerType\\": 0 } }, { @@ -10038,7 +10072,8 @@ exports[`record integration tests should record dynamic CSS changes 1`] = ` \\"data\\": { \\"source\\": 2, \\"type\\": 2, - \\"id\\": 26 + \\"id\\": 26, + \\"pointerType\\": 0 } }, { @@ -11700,7 +11735,8 @@ exports[`record integration tests should record input userTriggered values if us \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 27 + \\"id\\": 27, + \\"pointerType\\": 0 } }, { @@ -11724,7 +11760,8 @@ exports[`record integration tests should record input userTriggered values if us \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 27 + \\"id\\": 27, + \\"pointerType\\": 0 } }, { @@ -11732,7 +11769,8 @@ exports[`record integration tests should record input userTriggered values if us \\"data\\": { \\"source\\": 2, \\"type\\": 2, - \\"id\\": 27 + \\"id\\": 27, + \\"pointerType\\": 0 } }, { @@ -11760,7 +11798,8 @@ exports[`record integration tests should record input userTriggered values if us \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 37 + \\"id\\": 37, + \\"pointerType\\": 0 } }, { @@ -11784,7 +11823,8 @@ exports[`record integration tests should record input userTriggered values if us \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 37 + \\"id\\": 37, + \\"pointerType\\": 0 } }, { @@ -11792,7 +11832,8 @@ exports[`record integration tests should record input userTriggered values if us \\"data\\": { \\"source\\": 2, \\"type\\": 2, - \\"id\\": 37 + \\"id\\": 37, + \\"pointerType\\": 0 } }, { 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 30178f6c64..204e2dcf32 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 @@ -1667,7 +1667,8 @@ exports[`cross origin iframes form.html should map input events correctly 1`] = \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 39 + \\"id\\": 39, + \\"pointerType\\": 0 } }, { @@ -1691,7 +1692,8 @@ exports[`cross origin iframes form.html should map input events correctly 1`] = \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 39 + \\"id\\": 39, + \\"pointerType\\": 0 } }, { @@ -1699,7 +1701,8 @@ exports[`cross origin iframes form.html should map input events correctly 1`] = \\"data\\": { \\"source\\": 2, \\"type\\": 2, - \\"id\\": 39 + \\"id\\": 39, + \\"pointerType\\": 0 } }, { @@ -1725,7 +1728,8 @@ exports[`cross origin iframes form.html should map input events correctly 1`] = \\"data\\": { \\"source\\": 2, \\"type\\": 1, - \\"id\\": 49 + \\"id\\": 49, + \\"pointerType\\": 0 } }, { @@ -1749,7 +1753,8 @@ exports[`cross origin iframes form.html should map input events correctly 1`] = \\"data\\": { \\"source\\": 2, \\"type\\": 0, - \\"id\\": 49 + \\"id\\": 49, + \\"pointerType\\": 0 } }, { @@ -1757,7 +1762,8 @@ exports[`cross origin iframes form.html should map input events correctly 1`] = \\"data\\": { \\"source\\": 2, \\"type\\": 2, - \\"id\\": 49 + \\"id\\": 49, + \\"pointerType\\": 0 } }, { From 3ce6903122b039f9fb200c9a6130321772cac117 Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Mon, 9 Aug 2021 12:56:42 +0100 Subject: [PATCH 4/7] Add a baseline test for clicking links --- .../__snapshots__/integration.test.ts.snap | 261 ++++++++++++++++++ packages/rrweb/test/html/link.html | 14 + packages/rrweb/test/integration.test.ts | 11 + 3 files changed, 286 insertions(+) create mode 100644 packages/rrweb/test/html/link.html diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap index 9fe06944e8..eae0bfaf97 100644 --- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap +++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap @@ -1328,6 +1328,267 @@ exports[`record integration tests can record childList mutations 1`] = ` ]" `; +exports[`record integration tests can record clicks 1`] = ` +"[ + { + \\"type\\": 0, + \\"data\\": {} + }, + { + \\"type\\": 1, + \\"data\\": {} + }, + { + \\"type\\": 4, + \\"data\\": { + \\"href\\": \\"about:blank\\", + \\"width\\": 1920, + \\"height\\": 1080 + } + }, + { + \\"type\\": 2, + \\"data\\": { + \\"node\\": { + \\"type\\": 0, + \\"childNodes\\": [ + { + \\"type\\": 1, + \\"name\\": \\"html\\", + \\"publicId\\": \\"\\", + \\"systemId\\": \\"\\", + \\"id\\": 2 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"html\\", + \\"attributes\\": { + \\"lang\\": \\"en\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"head\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 5 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"charset\\": \\"UTF-8\\" + }, + \\"childNodes\\": [], + \\"id\\": 6 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 7 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"name\\": \\"viewport\\", + \\"content\\": \\"width=device-width, initial-scale=1.0\\" + }, + \\"childNodes\\": [], + \\"id\\": 8 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 9 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"http-equiv\\": \\"X-UA-Compatible\\", + \\"content\\": \\"ie=edge\\" + }, + \\"childNodes\\": [], + \\"id\\": 10 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 11 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"title\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"Link click\\", + \\"id\\": 13 + } + ], + \\"id\\": 12 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 14 + } + ], + \\"id\\": 4 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n\\\\n \\", + \\"id\\": 15 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 17 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"span\\", + \\"attributes\\": { + \\"id\\": \\"not-a-link\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"not link\\", + \\"id\\": 19 + } + ], + \\"id\\": 18 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 20 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"a\\", + \\"attributes\\": { + \\"href\\": \\"about:blank#clicked\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"link\\\\n \\\\n \\", + \\"id\\": 22 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", + \\"id\\": 24 + } + ], + \\"id\\": 23 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n \\\\n\\\\n\\", + \\"id\\": 25 + } + ], + \\"id\\": 21 + } + ], + \\"id\\": 16 + } + ], + \\"id\\": 3 + } + ], + \\"id\\": 1 + }, + \\"initialOffset\\": { + \\"left\\": 0, + \\"top\\": 0 + } + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 2, + \\"type\\": 1, + \\"id\\": 18, + \\"pointerType\\": 0 + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 2, + \\"type\\": 0, + \\"id\\": 18, + \\"pointerType\\": 0 + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 2, + \\"type\\": 2, + \\"id\\": 18, + \\"pointerType\\": 0 + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 2, + \\"type\\": 1, + \\"id\\": 21, + \\"pointerType\\": 0 + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 2, + \\"type\\": 5, + \\"id\\": 21 + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 2, + \\"type\\": 0, + \\"id\\": 21, + \\"pointerType\\": 0 + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 2, + \\"type\\": 2, + \\"id\\": 21, + \\"pointerType\\": 0 + } + } +]" +`; + exports[`record integration tests can record form interactions 1`] = ` "[ { diff --git a/packages/rrweb/test/html/link.html b/packages/rrweb/test/html/link.html new file mode 100644 index 0000000000..0d7b13739d --- /dev/null +++ b/packages/rrweb/test/html/link.html @@ -0,0 +1,14 @@ + + + + + + + Link click + + + + not link + link + + diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts index fec8c36902..f12968e254 100644 --- a/packages/rrweb/test/integration.test.ts +++ b/packages/rrweb/test/integration.test.ts @@ -62,6 +62,17 @@ describe('record integration tests', function (this: ISuite) { server.close(); }); + it('can record clicks', async () => { + const page: puppeteer.Page = await browser.newPage(); + await page.goto('about:blank'); + await page.setContent(getHtml.call(this, 'link.html')); + await page.click('span'); + await page.click('a'); + + const snapshots = await page.evaluate('window.snapshots'); + assertSnapshot(snapshots); + }); + it('can record form interactions', async () => { const page: puppeteer.Page = await browser.newPage(); await page.goto('about:blank'); From 961abec782a42ad9ea6156d06e3fd1cd4afa5f23 Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Wed, 12 Apr 2023 14:22:19 +0100 Subject: [PATCH 5/7] Get puppeteer to produce a touch event - this also uncovered an error where a subsequent click would be picked up as a touch (see `thisEventKey` change) --- packages/rrweb/src/record/observer.ts | 7 ++--- .../__snapshots__/integration.test.ts.snap | 27 +++++++++++++++++++ packages/rrweb/test/integration.test.ts | 12 +++++++++ 3 files changed, 43 insertions(+), 3 deletions(-) diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts index 6771cf2acb..810c137f84 100644 --- a/packages/rrweb/src/record/observer.ts +++ b/packages/rrweb/src/record/observer.ts @@ -238,6 +238,7 @@ function initMouseInteractionObserver({ return; } let pointerType: PointerTypes | null = null; + let thisEventKey = eventKey; if ('pointerType' in event) { Object.keys(PointerTypes).forEach( (pointerKey: keyof typeof PointerTypes) => { @@ -252,12 +253,12 @@ function initMouseInteractionObserver({ if (pointerType === PointerTypes.Touch) { if (MouseInteractions[eventKey] === MouseInteractions.MouseDown) { // we are actually listening on 'pointerdown' - eventKey = 'TouchStart'; + thisEventKey = 'TouchStart'; } else if ( MouseInteractions[eventKey] === MouseInteractions.MouseUp ) { // we are actually listening on 'pointerup' - eventKey = 'TouchEnd'; + thisEventKey = 'TouchEnd'; } } else if (pointerType == PointerTypes.Pen) { // TODO: these will get incorrectly emitted as MouseDown/MouseUp @@ -278,7 +279,7 @@ function initMouseInteractionObserver({ const id = mirror.getId(target); const { clientX, clientY } = e; callbackWrapper(mouseInteractionCb)({ - type: MouseInteractions[eventKey], + type: MouseInteractions[thisEventKey], id, x: clientX, y: clientY, diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap index eae0bfaf97..5ae9007102 100644 --- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap +++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap @@ -1551,6 +1551,33 @@ exports[`record integration tests can record clicks 1`] = ` \\"pointerType\\": 0 } }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 2, + \\"type\\": 7, + \\"id\\": 18, + \\"pointerType\\": 2 + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 2, + \\"type\\": 9, + \\"id\\": 18, + \\"pointerType\\": 2 + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 2, + \\"type\\": 2, + \\"id\\": 18, + \\"pointerType\\": 2 + } + }, { \\"type\\": 3, \\"data\\": { diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts index f12968e254..9033761de3 100644 --- a/packages/rrweb/test/integration.test.ts +++ b/packages/rrweb/test/integration.test.ts @@ -67,6 +67,18 @@ describe('record integration tests', function (this: ISuite) { await page.goto('about:blank'); await page.setContent(getHtml.call(this, 'link.html')); await page.click('span'); + + // also tap on the span + const span = await page.waitForSelector('span'); + const center = await page.evaluate((el) => { + const { x, y, width, height } = el.getBoundingClientRect(); + return { + x: Math.round(x + width / 2), + y: Math.round(y + height / 2), + }; + }, span); + await page.touchscreen.tap(center.x, center.y); + await page.click('a'); const snapshots = await page.evaluate('window.snapshots'); From 004d29ba70cef4ce88db7a65181cdcabcb3eaa81 Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Wed, 12 Apr 2023 15:08:13 +0100 Subject: [PATCH 6/7] eslint was giving an error here --- packages/rrweb/src/record/observer.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts index 810c137f84..4753aefb92 100644 --- a/packages/rrweb/src/record/observer.ts +++ b/packages/rrweb/src/record/observer.ts @@ -242,9 +242,7 @@ function initMouseInteractionObserver({ if ('pointerType' in event) { Object.keys(PointerTypes).forEach( (pointerKey: keyof typeof PointerTypes) => { - if ( - (event as PointerEvent).pointerType === pointerKey.toLowerCase() - ) { + if (event.pointerType === pointerKey.toLowerCase()) { pointerType = PointerTypes[pointerKey]; return; } From 4939c0000443fea84612bc8467d8d3870fe10d78 Mon Sep 17 00:00:00 2001 From: Justin Halsall Date: Wed, 12 Apr 2023 23:07:16 +0200 Subject: [PATCH 7/7] Create fair-dragons-greet.md --- .changeset/fair-dragons-greet.md | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 .changeset/fair-dragons-greet.md diff --git a/.changeset/fair-dragons-greet.md b/.changeset/fair-dragons-greet.md new file mode 100644 index 0000000000..a845151cc8 --- /dev/null +++ b/.changeset/fair-dragons-greet.md @@ -0,0 +1,2 @@ +--- +---