xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Chore: Make tests less flakey & upgrade puppeteer to rrweb-snapshot test suite to run (#1084)

Browse Source 
* Upgrade puppeteer to 17.1.3 in rrweb-snapshot

* Apply formatting changes

* Add ?

* Make tests less flakey

* Make attribute-setting more explicit

* Make test less flakey

* Make test less flakey

* Upgrade puppeteer for rrdom

* Use wait for request animation frame instead of timeout

* Force append to happen in second event

* Wait till iframe was loaded (now 100ms)

* Round the currentTime to 1 decimal place
This commit is contained in:
Justin Halsall
2026-04-01 12:00:00 +08:00
committed by GitHub
parent c62f888ec5
commit 6e06fd2536
11 changed files with 118 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
View File

@@ -189,7 +189,7 @@ exports[`integration tests [html file]: block-element.html 1`] = `
`;
exports[`integration tests [html file]: compat-mode.html 1`] = `
"<!DOCTYPE html PUBLIC \\"-//W3C//DTD HTML 4.0 Transitional//EN\\"><!-- no doctype! --><html><head>
"<!-- no doctype! --><html><head>
<title>Compat Mode; image resizing</title>
</head>
<body>
@@ -287,12 +287,12 @@ exports[`integration tests [html file]: iframe.html 1`] = `
`;
exports[`integration tests [html file]: iframe-inner.html 1`] = `
"<!DOCTYPE html PUBLIC \\"-//W3C//DTD HTML 4.0 Transitional//EN\\"><html><head></head><body><button>inner iframe button</button>
"<html><head></head><body><button>inner iframe button</button>
</body></html>"
`;
exports[`integration tests [html file]: invalid-attribute.html 1`] = `
"<!DOCTYPE html PUBLIC \\"-//W3C//DTD HTML 4.0 Transitional//EN\\"><html foo=\\"bar\\"><head></head><body>
"<html foo=\\"bar\\"><head></head><body>
</body></html>"
`;
@@ -335,7 +335,7 @@ exports[`integration tests [html file]: mask-text.html 1`] = `
`;
exports[`integration tests [html file]: picture.html 1`] = `
"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\"><html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
"<html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
<picture>
<source type=\\"image/webp\\" srcset=\\"http://localhost:3030/assets/img/characters/robot.webp\\" />
<img src=\\"http://localhost:3030/assets/img/characters/robot.png\\" />
@@ -345,20 +345,20 @@ exports[`integration tests [html file]: picture.html 1`] = `
`;
exports[`integration tests [html file]: picture-blob.html 1`] = `
"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\"><html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
<img src=\\"\\" alt=\\"This is a robot\\" />
"<html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
<img src=\\"blob:http://localhost:xxxx/...\\" alt=\\"This is a robot\\" />
<noscript>SCRIPT_PLACEHOLDER</noscript></body></html>"
`;
exports[`integration tests [html file]: picture-blob-in-frame.html 1`] = `
"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\"><html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
"<html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
<iframe></iframe>
</body></html>"
`;
exports[`integration tests [html file]: picture-in-frame.html 1`] = `
"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\"><html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
"<html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
<iframe></iframe>
</body></html>"
`;
@@ -750,7 +750,7 @@ exports[`shadow DOM integration tests snapshot shadow DOM 1`] = `
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\":host { display: inline-block; width: 650px; font-family: \\\\\\"Roboto Slab\\\\\\"; contain: content; }:host([background]) { background: var(--background-color, #9E9E9E); border-radius: 10px; padding: 10px; }#panels { box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 2px; background: white; border-radius: 3px; padding: 16px; height: 250px; overflow: auto; }#tabs { display: inline-flex; user-select: none; }#tabs slot { display: inline-flex; }#tabs ::slotted(*) { font: 400 16px/22px Roboto; padding: 16px 8px; margin: 0px; text-align: center; width: 100px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; border-top-left-radius: 3px; border-top-right-radius: 3px; background: linear-gradient(rgb(250, 250, 250), rgb(238, 238, 238)); border: none; }#tabs ::slotted([aria-selected=\\\\\\"true\\\\\\"]) { font-weight: 600; background: white; box-shadow: none; }#tabs ::slotted(:focus) { z-index: 1; }#panels ::slotted([aria-hidden=\\\\\\"true\\\\\\"]) { display: none; }\\",
\\"textContent\\": \\":host { display: inline-block; width: 650px; font-family: \\\\\\"Roboto Slab\\\\\\"; contain: content; }:host([background]) { background: var(--background-color, #9E9E9E); border-radius: 10px; padding: 10px; }#panels { box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 2px; background: white; border-radius: 3px; padding: 16px; height: 250px; overflow: auto; }#tabs { display: inline-flex; user-select: none; }#tabs slot { display: inline-flex; }#tabs ::slotted(*) { font: 400 16px / 22px Roboto; padding: 16px 8px; margin: 0px; text-align: center; width: 100px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; border-top-left-radius: 3px; border-top-right-radius: 3px; background: linear-gradient(rgb(250, 250, 250), rgb(238, 238, 238)); border: none; }#tabs ::slotted([aria-selected=\\\\\\"true\\\\\\"]) { font-weight: 600; background: white; box-shadow: none; }#tabs ::slotted(:focus) { z-index: 1; }#panels ::slotted([aria-hidden=\\\\\\"true\\\\\\"]) { display: none; }\\",
\\"isStyle\\": true,
\\"id\\": 38
}

2
packages/rrweb-snapshot/test/html/picture-blob.html
View File

@@ -9,7 +9,7 @@
const robotBlobUrl = URL.createObjectURL(robotBlob);
const images = document.querySelectorAll('img');
images.forEach((img) => {
img.src = robotBlobUrl;
img.setAttribute('src', robotBlobUrl);
});
}, 0);
</script>

42
packages/rrweb-snapshot/test/integration.test.ts
View File

@@ -128,8 +128,8 @@ describe('integration tests', function (this: ISuite) {
waitUntil: 'load',
});
}
const rebuildHtml = (
await page.evaluate(`${code}
await waitForRAF(page);
const rebuildHtml = ((await page.evaluate(`${code}
const x = new XMLSerializer();
const snap = rrweb.snapshot(document);
let out = x.serializeToString(rrweb.rebuild(snap, { doc: document }));
@@ -138,8 +138,12 @@ describe('integration tests', function (this: ISuite) {
out = out.replace(' xmlns=\"http://www.w3.org/1999/xhtml\"', '');
}
out; // return
`)
).replace(/\n\n/g, '');
`)) as string)
.replace(/\n\n/g, '')
.replace(
/blob:http:\/\/localhost:\d+\/[0-9a-z\-]+/,
'blob:http://localhost:xxxx/...',
);
expect(rebuildHtml).toMatchSnapshot();
});
}
@@ -158,9 +162,9 @@ describe('integration tests', function (this: ISuite) {
compatMode +
' for compat-mode.html should be BackCompat as DOCTYPE is deliberately omitted',
);
const renderedHeight = await page.evaluate(
const renderedHeight = (await page.evaluate(
'document.querySelector("center").clientHeight',
);
)) as number;
// can remove following assertion if dimensions of page change
assert(
renderedHeight < 400,
@@ -203,8 +207,10 @@ iframe.contentDocument.querySelector('center').clientHeight
inlineImages: true,
inlineStylesheet: false
})`);
await page.waitFor(100);
const snapshot = await page.evaluate('JSON.stringify(snapshot, null, 2);');
await waitForRAF(page);
const snapshot = (await page.evaluate(
'JSON.stringify(snapshot, null, 2);',
)) as string;
assert(snapshot.includes('"rr_dataURL"'));
assert(snapshot.includes('data:image/webp;base64,'));
});
@@ -221,8 +227,10 @@ iframe.contentDocument.querySelector('center').clientHeight
inlineImages: true,
inlineStylesheet: false
})`);
await page.waitFor(100);
const snapshot = await page.evaluate('JSON.stringify(snapshot, null, 2);');
await waitForRAF(page);
const snapshot = (await page.evaluate(
'JSON.stringify(snapshot, null, 2);',
)) as string;
assert(snapshot.includes('"rr_dataURL"'));
assert(snapshot.includes('data:image/webp;base64,'));
});
@@ -244,10 +252,10 @@ iframe.contentDocument.querySelector('center').clientHeight
window.snapshot = sn;
}
})`);
await page.waitFor(100);
const snapshot = await page.evaluate(
await waitForRAF(page);
const snapshot = (await page.evaluate(
'JSON.stringify(window.snapshot, null, 2);',
);
)) as string;
assert(snapshot.includes('"rr_dataURL"'));
assert(snapshot.includes('data:image/webp;base64,'));
});
@@ -269,10 +277,10 @@ iframe.contentDocument.querySelector('center').clientHeight
window.snapshot = sn;
}
})`);
await page.waitFor(100);
const snapshot = await page.evaluate(
await waitForRAF(page);
const snapshot = (await page.evaluate(
'JSON.stringify(window.snapshot, null, 2);',
);
)) as string;
assert(snapshot.includes('"rr_dataURL"'));
assert(snapshot.includes('data:image/webp;base64,'));
});
@@ -287,7 +295,7 @@ iframe.contentDocument.querySelector('center').clientHeight
window.snapshot = rrweb.snapshot(document, {
inlineStylesheet: true,
})`);
await page.waitFor(100);
await waitForRAF(page);
const snapshot = (await page.evaluate(
'JSON.stringify(window.snapshot, null, 2);',
)) as string;