From 5314122ab37f2e066b62a3af4d6fe183333f2390 Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Wed, 15 May 2024 16:47:11 +0100 Subject: [PATCH] Demonstrate that #1374 caused stylesheet contents to be captured twice after a mutation to rel="stylesheet" from rel="preload" --- .../test/__snapshots__/record.test.ts.snap | 217 ++++++++++++++++++ packages/rrweb/test/record.test.ts | 25 ++ 2 files changed, 242 insertions(+) diff --git a/packages/rrweb/test/__snapshots__/record.test.ts.snap b/packages/rrweb/test/__snapshots__/record.test.ts.snap index 0ea3e7a0d0..7585301c7d 100644 --- a/packages/rrweb/test/__snapshots__/record.test.ts.snap +++ b/packages/rrweb/test/__snapshots__/record.test.ts.snap @@ -3254,6 +3254,223 @@ exports[`record loading stylesheets captures stylesheets in iframes that are sti ]" `; +exports[`record loading stylesheets captures stylesheets that are preloaded 1`] = ` +"[ + { + \\"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\\": { + \\"http-equiv\\": \\"X-UA-Compatible\\", + \\"content\\": \\"IE=edge\\" + }, + \\"childNodes\\": [], + \\"id\\": 8 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 9 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"name\\": \\"viewport\\", + \\"content\\": \\"width=device-width, initial-scale=1.0\\" + }, + \\"childNodes\\": [], + \\"id\\": 10 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 11 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"title\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"Hello World!\\", + \\"id\\": 13 + } + ], + \\"id\\": 12 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 14 + } + ], + \\"id\\": 4 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 15 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n Hello world!\\\\n \\\\n\\\\n\\", + \\"id\\": 17 + } + ], + \\"id\\": 16 + } + ], + \\"id\\": 3 + } + ], + \\"id\\": 1 + }, + \\"initialOffset\\": { + \\"left\\": 0, + \\"top\\": 0 + } + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [], + \\"removes\\": [], + \\"adds\\": [ + { + \\"parentId\\": 4, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"link\\", + \\"attributes\\": { + \\"rel\\": \\"preload\\", + \\"as\\": \\"style\\", + \\"href\\": \\"http://localhost:3030/html/assets/style.css\\" + }, + \\"childNodes\\": [], + \\"id\\": 18 + } + } + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [ + { + \\"id\\": 18, + \\"attributes\\": { + \\"rel\\": \\"stylesheet\\" + } + } + ], + \\"removes\\": [], + \\"adds\\": [] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"adds\\": [], + \\"removes\\": [], + \\"texts\\": [], + \\"attributes\\": [ + { + \\"id\\": 18, + \\"attributes\\": { + \\"as\\": \\"style\\", + \\"_cssText\\": \\"body { color: pink; }\\" + } + } + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"adds\\": [], + \\"removes\\": [], + \\"texts\\": [], + \\"attributes\\": [ + { + \\"id\\": 18, + \\"attributes\\": { + \\"as\\": \\"style\\", + \\"_cssText\\": \\"body { color: pink; }\\" + } + } + ] + } + } +]" +`; + exports[`record loading stylesheets captures stylesheets that are still loading 1`] = ` "[ { diff --git a/packages/rrweb/test/record.test.ts b/packages/rrweb/test/record.test.ts index 51e7ad2342..c9c0cd15f6 100644 --- a/packages/rrweb/test/record.test.ts +++ b/packages/rrweb/test/record.test.ts @@ -769,6 +769,31 @@ describe('record', function (this: ISuite) { await server.close(); }); + it('captures stylesheets that are preloaded', async () => { + ctx.page.evaluate((serverURL) => { + const { record } = (window as unknown as IWindow).rrweb; + + record({ + inlineStylesheet: true, + emit: (window as unknown as IWindow).emit, + }); + + const link1 = document.createElement('link'); + link1.setAttribute('rel', 'preload'); + link1.setAttribute('as', 'style'); + link1.setAttribute('href', `${serverURL}/html/assets/style.css`); + link1.addEventListener('load', () => { + link1.setAttribute('rel', 'stylesheet'); + }); + document.head.appendChild(link1); + }, serverURL); + + await ctx.page.waitForResponse(`${serverURL}/html/assets/style.css`); + await waitForRAF(ctx.page); + + assertSnapshot(ctx.events); + }); + it('captures stylesheets that are still loading', async () => { ctx.page.evaluate((serverURL) => { const { record } = (window as unknown as IWindow).rrweb;