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

nested record iframe (#63)

Browse Source 
* pick nested branch

* iframe snapshot

* temp: add bundle file to git

* revert ignore file

* refactor iframe impl
1. do callback one iframe is loaded, let rrweb handle the rest
2. handle iframe as normal element in rebuild

* rename hook function
This commit is contained in:
yz-yu
2021-02-07 14:00:22 +08:00
committed by GitHub
parent a3ff5e5ea8
commit 98aa732d17
11 changed files with 343 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
test/__snapshots__/integration.ts.snap
View File

@@ -277,3 +277,135 @@ exports[`[html file]: with-style-sheet-with-import.html 1`] = `
</head><body>
</body></html>"
`;
exports[`iframe integration tests 1`] = `
"{
\\"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\\": \\"title\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"Main\\",
\\"id\\": 11
}
],
\\"id\\": 10
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 12
}
],
\\"id\\": 4
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 13
},
{
\\"type\\": 2,
\\"tagName\\": \\"body\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 15
},
{
\\"type\\": 2,
\\"tagName\\": \\"iframe\\",
\\"attributes\\": {
\\"id\\": \\"one\\"
},
\\"childNodes\\": [],
\\"id\\": 16
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 17
},
{
\\"type\\": 2,
\\"tagName\\": \\"iframe\\",
\\"attributes\\": {
\\"id\\": \\"two\\"
},
\\"childNodes\\": [],
\\"id\\": 18
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n\\\\n\\",
\\"id\\": 19
}
],
\\"id\\": 14
}
],
\\"id\\": 3
}
],
\\"id\\": 1
}"
`;

13
test/iframe-html/frame1.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Frame 1</title>
</head>
<body>
frame 1
<iframe id="three" frameborder="0"></iframe>
<iframe id="four" src="./frame2.html" frameborder="0"></iframe>
</body>
</html>

11
test/iframe-html/frame2.html Normal file
View File

@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Frame 2</title>
</head>
<body>
frame 2
</body>
</html>

12
test/iframe-html/main.html Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Main</title>
</head>
<body>
<iframe id="one"></iframe>
<iframe id="two" src="./frame1.html"></iframe>
</body>
</html>

47
test/integration.ts
View File

@@ -119,3 +119,50 @@ describe('integration tests', function (this: ISuite) {
}).timeout(5000);
}
});
describe('iframe integration tests', function (this: ISuite) {
const iframeHtml = path.join(__dirname, 'iframe-html/main.html');
const raw = fs.readFileSync(iframeHtml, 'utf-8');
before(async () => {
this.server = await server();
this.browser = await puppeteer.launch({
// headless: false,
});
const bundle = await rollup.rollup({
input: path.resolve(__dirname, '../src/index.ts'),
plugins: [typescript()],
});
const { code } = await bundle.generate({
name: 'rrweb',
format: 'iife',
});
this.code = code;
});
after(async () => {
await this.browser.close();
await this.server.close();
});
it('snapshot async iframes', async () => {
const page: puppeteer.Page = await this.browser.newPage();
// console for debug
// tslint:disable-next-line: no-console
page.on('console', (msg) => console.log(msg.text()));
await page.goto(`http://localhost:3030/html`);
await page.setContent(raw, {
waitUntil: 'load',
});
const snapshotResult = JSON.stringify(
await page.evaluate(`${this.code};
rrweb.snapshot(document)[0];
`),
null,
2,
);
const result = matchSnapshot(snapshotResult, __filename, this.title);
assert(result.pass, result.pass ? '' : result.report());
}).timeout(5000);
});