Skip to content

Commit cf330d5

Browse files
eoghanmurrayeoghanmurray
committed
Add test as I realize that serializeNode was doing more work in terms of looking at config
1 parent 5bc7c98 commit cf330d5

File tree

4 files changed

+191
-3
lines changed

4 files changed

+191
-3
lines changed

‎packages/rrweb/src/record/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -386,7 +386,7 @@ function record<T = eventWithTime>(
386386
if (isSerializedIframe(n, mirror)) {
387387
iframeManager.addIframe(n as HTMLIFrameElement);
388388
}
389-
if (isSerializedStylesheet(n, mirror)) {
389+
if (inlineStylesheet && isSerializedStylesheet(n, mirror)) {
390390
stylesheetManager.trackLinkElement(n as HTMLLinkElement);
391391
}
392392
if (hasShadowRoot(n)) {

‎packages/rrweb/src/record/mutation.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -320,7 +320,10 @@ export default class MutationBuffer {
320320
if (isSerializedIframe(currentN, this.mirror)) {
321321
this.iframeManager.addIframe(currentN as HTMLIFrameElement);
322322
}
323-
if (isSerializedStylesheet(currentN, this.mirror)) {
323+
if (
324+
this.inlineStylesheet &&
325+
isSerializedStylesheet(currentN, this.mirror)
326+
) {
324327
this.stylesheetManager.trackLinkElement(
325328
currentN as HTMLLinkElement,
326329
);
@@ -661,8 +664,9 @@ export default class MutationBuffer {
661664
}
662665
}
663666
} else if (
667+
this.inlineStylesheet &&
664668
attributeName === 'rel' &&
665-
value === 'stylesheet' &&
669+
value.toLowerCase() === 'stylesheet' &&
666670
m.target.tagName === 'LINK'
667671
) {
668672
this.stylesheetManager.trackLinkElement(

‎packages/rrweb/test/__snapshots__/record.test.ts.snap

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3632,6 +3632,169 @@ exports[`record loading stylesheets captures stylesheets that are still loading
36323632
]"
36333633
`;
36343634

3635+
exports[`record loading stylesheets respects inlineStylesheet=false for late loading stylesheets 1`] = `
3636+
"[
3637+
{
3638+
\\"type\\": 4,
3639+
\\"data\\": {
3640+
\\"href\\": \\"about:blank\\",
3641+
\\"width\\": 1920,
3642+
\\"height\\": 1080
3643+
}
3644+
},
3645+
{
3646+
\\"type\\": 2,
3647+
\\"data\\": {
3648+
\\"node\\": {
3649+
\\"type\\": 0,
3650+
\\"childNodes\\": [
3651+
{
3652+
\\"type\\": 1,
3653+
\\"name\\": \\"html\\",
3654+
\\"publicId\\": \\"\\",
3655+
\\"systemId\\": \\"\\",
3656+
\\"id\\": 2
3657+
},
3658+
{
3659+
\\"type\\": 2,
3660+
\\"tagName\\": \\"html\\",
3661+
\\"attributes\\": {
3662+
\\"lang\\": \\"en\\"
3663+
},
3664+
\\"childNodes\\": [
3665+
{
3666+
\\"type\\": 2,
3667+
\\"tagName\\": \\"head\\",
3668+
\\"attributes\\": {},
3669+
\\"childNodes\\": [
3670+
{
3671+
\\"type\\": 3,
3672+
\\"textContent\\": \\"\\\\n \\",
3673+
\\"id\\": 5
3674+
},
3675+
{
3676+
\\"type\\": 2,
3677+
\\"tagName\\": \\"meta\\",
3678+
\\"attributes\\": {
3679+
\\"charset\\": \\"UTF-8\\"
3680+
},
3681+
\\"childNodes\\": [],
3682+
\\"id\\": 6
3683+
},
3684+
{
3685+
\\"type\\": 3,
3686+
\\"textContent\\": \\"\\\\n \\",
3687+
\\"id\\": 7
3688+
},
3689+
{
3690+
\\"type\\": 2,
3691+
\\"tagName\\": \\"meta\\",
3692+
\\"attributes\\": {
3693+
\\"http-equiv\\": \\"X-UA-Compatible\\",
3694+
\\"content\\": \\"IE=edge\\"
3695+
},
3696+
\\"childNodes\\": [],
3697+
\\"id\\": 8
3698+
},
3699+
{
3700+
\\"type\\": 3,
3701+
\\"textContent\\": \\"\\\\n \\",
3702+
\\"id\\": 9
3703+
},
3704+
{
3705+
\\"type\\": 2,
3706+
\\"tagName\\": \\"meta\\",
3707+
\\"attributes\\": {
3708+
\\"name\\": \\"viewport\\",
3709+
\\"content\\": \\"width=device-width, initial-scale=1.0\\"
3710+
},
3711+
\\"childNodes\\": [],
3712+
\\"id\\": 10
3713+
},
3714+
{
3715+
\\"type\\": 3,
3716+
\\"textContent\\": \\"\\\\n \\",
3717+
\\"id\\": 11
3718+
},
3719+
{
3720+
\\"type\\": 2,
3721+
\\"tagName\\": \\"title\\",
3722+
\\"attributes\\": {},
3723+
\\"childNodes\\": [
3724+
{
3725+
\\"type\\": 3,
3726+
\\"textContent\\": \\"Hello World!\\",
3727+
\\"id\\": 13
3728+
}
3729+
],
3730+
\\"id\\": 12
3731+
},
3732+
{
3733+
\\"type\\": 3,
3734+
\\"textContent\\": \\"\\\\n \\",
3735+
\\"id\\": 14
3736+
}
3737+
],
3738+
\\"id\\": 4
3739+
},
3740+
{
3741+
\\"type\\": 3,
3742+
\\"textContent\\": \\"\\\\n \\",
3743+
\\"id\\": 15
3744+
},
3745+
{
3746+
\\"type\\": 2,
3747+
\\"tagName\\": \\"body\\",
3748+
\\"attributes\\": {},
3749+
\\"childNodes\\": [
3750+
{
3751+
\\"type\\": 3,
3752+
\\"textContent\\": \\"\\\\n Hello world!\\\\n \\\\n\\\\n\\",
3753+
\\"id\\": 17
3754+
}
3755+
],
3756+
\\"id\\": 16
3757+
}
3758+
],
3759+
\\"id\\": 3
3760+
}
3761+
],
3762+
\\"id\\": 1
3763+
},
3764+
\\"initialOffset\\": {
3765+
\\"left\\": 0,
3766+
\\"top\\": 0
3767+
}
3768+
}
3769+
},
3770+
{
3771+
\\"type\\": 3,
3772+
\\"data\\": {
3773+
\\"source\\": 0,
3774+
\\"texts\\": [],
3775+
\\"attributes\\": [],
3776+
\\"removes\\": [],
3777+
\\"adds\\": [
3778+
{
3779+
\\"parentId\\": 4,
3780+
\\"nextId\\": null,
3781+
\\"node\\": {
3782+
\\"type\\": 2,
3783+
\\"tagName\\": \\"link\\",
3784+
\\"attributes\\": {
3785+
\\"rel\\": \\"stylesheet\\",
3786+
\\"href\\": \\"http://localhost:3030/html/assets/style.css\\"
3787+
},
3788+
\\"childNodes\\": [],
3789+
\\"id\\": 18
3790+
}
3791+
}
3792+
]
3793+
}
3794+
}
3795+
]"
3796+
`;
3797+
36353798
exports[`record no need for attribute mutations on adds 1`] = `
36363799
"[
36373800
{

‎packages/rrweb/test/record.test.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -815,6 +815,27 @@ describe('record', function (this: ISuite) {
815815
assertSnapshot(ctx.events);
816816
});
817817

818+
it('respects inlineStylesheet=false for late loading stylesheets', async () => {
819+
ctx.page.evaluate((serverURL) => {
820+
const { record } = (window as unknown as IWindow).rrweb;
821+
822+
record({
823+
inlineStylesheet: false,
824+
emit: (window as unknown as IWindow).emit,
825+
});
826+
827+
const link1 = document.createElement('link');
828+
link1.setAttribute('rel', 'stylesheet');
829+
link1.setAttribute('href', `${serverURL}/html/assets/style.css`);
830+
document.head.appendChild(link1);
831+
}, serverURL);
832+
833+
await ctx.page.waitForResponse(`${serverURL}/html/assets/style.css`);
834+
await waitForRAF(ctx.page);
835+
836+
assertSnapshot(ctx.events);
837+
});
838+
818839
it('captures stylesheets in iframes that are still loading', async () => {
819840
ctx.page.evaluate(() => {
820841
const iframe = document.createElement('iframe');

0 commit comments

Comments
 (0)