43be602816
There are some long-term issues in rrweb's mutation observer. A scenario cause problem: A list of DOM node: n1, n2, n3, n4, n5 Steps of modifying the nodes: 1. remove n1, n2, n3, n4 sequentially 2. append n4, n3, n2, n1 after n5 sequentially Then we got the added node data like this: (id: n4, prev: null, next: n3 ) (id: n3, prev: n4, next: n2 ) (id: n2, prev: n3, next: n1 ) (id: n1, prev: n2, next: null) The problem comes when we try to replay the first add node datum. Since its prev node is null, we rely on its next sibling n3. But n3 was not present at this moment, and in previous code, we fallback to append n4 to the last of its parent node. The solution is to defer the append of elements that missing siblings. But it is also hard to tell which node is the first one that needs to be appended. Take a step back and rethink the design of the mutation observer, we've found there are two implementations make things complicated. 1. We set the id to -1 when we seeing some nodes are not serialized yet. 2. We record both previous sibling and next sibling to determine the position of the node. But we can do better! First, we can put nodes with un-serialized siblings to a queue, and try to add it again later. Then we can just record the next sibling as 'the single truth' so we can be sure which node is the last one of its parent. This patch has implemented the new observer strategy. Data recorded with the new observer should no longer have any node with id -1. But for compatibility consideration, we still keep some replayer code that helps solve legacy data.
265 lines
9.0 KiB
TypeScript
265 lines
9.0 KiB
TypeScript
import * as fs from 'fs';
|
|
import * as path from 'path';
|
|
import * as puppeteer from 'puppeteer';
|
|
import { assertSnapshot, launchPuppeteer } from './utils';
|
|
import { Suite } from 'mocha';
|
|
import { expect } from 'chai';
|
|
import { recordOptions, eventWithTime } from '../src/types';
|
|
|
|
interface ISuite extends Suite {
|
|
code: string;
|
|
browser: puppeteer.Browser;
|
|
}
|
|
|
|
describe('record integration tests', function (this: ISuite) {
|
|
this.timeout(10_000);
|
|
|
|
const getHtml = (
|
|
fileName: string,
|
|
options: recordOptions<eventWithTime> = {},
|
|
): string => {
|
|
const filePath = path.resolve(__dirname, `./html/${fileName}`);
|
|
const html = fs.readFileSync(filePath, 'utf8');
|
|
return html.replace(
|
|
'</body>',
|
|
`
|
|
<script>
|
|
${this.code}
|
|
window.Date.now = () => new Date(Date.UTC(2018, 10, 15, 8)).valueOf();
|
|
window.snapshots = [];
|
|
rrweb.record({
|
|
emit: event => {
|
|
console.log(event);
|
|
window.snapshots.push(event);
|
|
},
|
|
maskAllInputs: ${options.maskAllInputs}
|
|
});
|
|
</script>
|
|
</body>
|
|
`,
|
|
);
|
|
};
|
|
|
|
before(async () => {
|
|
this.browser = await launchPuppeteer();
|
|
|
|
const bundlePath = path.resolve(__dirname, '../dist/rrweb.min.js');
|
|
this.code = fs.readFileSync(bundlePath, 'utf8');
|
|
});
|
|
|
|
after(async () => {
|
|
await this.browser.close();
|
|
});
|
|
|
|
it('can record form interactions', async () => {
|
|
const page: puppeteer.Page = await this.browser.newPage();
|
|
await page.goto('about:blank');
|
|
await page.setContent(getHtml.call(this, 'form.html'));
|
|
|
|
await page.type('input[type="text"]', 'test');
|
|
await page.click('input[type="radio"]');
|
|
await page.click('input[type="checkbox"]');
|
|
await page.type('textarea', 'textarea test');
|
|
await page.select('select', '1');
|
|
|
|
const snapshots = await page.evaluate('window.snapshots');
|
|
assertSnapshot(snapshots, __filename, 'form');
|
|
});
|
|
|
|
it('can record childList mutations', async () => {
|
|
const page: puppeteer.Page = await this.browser.newPage();
|
|
await page.goto('about:blank');
|
|
await page.setContent(getHtml.call(this, 'mutation-observer.html'));
|
|
|
|
await page.evaluate(() => {
|
|
const li = document.createElement('li');
|
|
const ul = document.querySelector('ul') as HTMLUListElement;
|
|
ul.appendChild(li);
|
|
document.body.removeChild(ul);
|
|
const p = document.querySelector('p') as HTMLParagraphElement;
|
|
p.appendChild(document.createElement('span'));
|
|
});
|
|
|
|
const snapshots = await page.evaluate('window.snapshots');
|
|
assertSnapshot(snapshots, __filename, 'child-list');
|
|
});
|
|
|
|
it('can record character data muatations', async () => {
|
|
const page: puppeteer.Page = await this.browser.newPage();
|
|
await page.goto('about:blank');
|
|
await page.setContent(getHtml.call(this, 'mutation-observer.html'));
|
|
|
|
await page.evaluate(() => {
|
|
const li = document.createElement('li');
|
|
const ul = document.querySelector('ul') as HTMLUListElement;
|
|
ul.appendChild(li);
|
|
li.innerText = 'new list item';
|
|
li.innerText = 'new list item edit';
|
|
document.body.removeChild(ul);
|
|
const p = document.querySelector('p') as HTMLParagraphElement;
|
|
p.innerText = 'mutated';
|
|
});
|
|
|
|
const snapshots = await page.evaluate('window.snapshots');
|
|
assertSnapshot(snapshots, __filename, 'character-data');
|
|
});
|
|
|
|
it('can record attribute mutation', async () => {
|
|
const page: puppeteer.Page = await this.browser.newPage();
|
|
await page.goto('about:blank');
|
|
await page.setContent(getHtml.call(this, 'mutation-observer.html'));
|
|
|
|
await page.evaluate(() => {
|
|
const li = document.createElement('li');
|
|
const ul = document.querySelector('ul') as HTMLUListElement;
|
|
ul.appendChild(li);
|
|
li.setAttribute('foo', 'bar');
|
|
document.body.removeChild(ul);
|
|
document.body.setAttribute('test', 'true');
|
|
});
|
|
|
|
const snapshots = await page.evaluate('window.snapshots');
|
|
assertSnapshot(snapshots, __filename, 'attributes');
|
|
});
|
|
|
|
it('can record node mutations', async () => {
|
|
const page: puppeteer.Page = await this.browser.newPage();
|
|
await page.goto('about:blank');
|
|
await page.setContent(getHtml.call(this, 'select2.html'), {
|
|
waitUntil: 'networkidle0',
|
|
});
|
|
|
|
// toggle the select box
|
|
await page.click('.select2-container');
|
|
await page.click('.select2-container');
|
|
|
|
const snapshots = await page.evaluate('window.snapshots');
|
|
assertSnapshot(snapshots, __filename, 'select2');
|
|
});
|
|
|
|
it('should not record input events on ignored elements', async () => {
|
|
const page: puppeteer.Page = await this.browser.newPage();
|
|
await page.goto('about:blank');
|
|
await page.setContent(getHtml.call(this, 'ignore.html'));
|
|
|
|
await page.type('input[type="password"]', 'password');
|
|
await page.type('.rr-ignore', 'secret');
|
|
|
|
const snapshots = await page.evaluate('window.snapshots');
|
|
assertSnapshot(snapshots, __filename, 'ignore');
|
|
});
|
|
|
|
it('should not record input values if maskAllInputs is enabled', async () => {
|
|
const page: puppeteer.Page = await this.browser.newPage();
|
|
await page.goto('about:blank');
|
|
await page.setContent(
|
|
getHtml.call(this, 'form.html', { maskAllInputs: true }),
|
|
);
|
|
|
|
await page.type('input[type="text"]', 'test');
|
|
await page.click('input[type="radio"]');
|
|
await page.click('input[type="checkbox"]');
|
|
await page.type('textarea', 'textarea test');
|
|
await page.select('select', '1');
|
|
|
|
const snapshots = await page.evaluate('window.snapshots');
|
|
assertSnapshot(snapshots, __filename, 'mask');
|
|
});
|
|
|
|
it('should not record blocked elements and its child nodes', async () => {
|
|
const page: puppeteer.Page = await this.browser.newPage();
|
|
await page.goto('about:blank');
|
|
await page.setContent(getHtml.call(this, 'block.html'));
|
|
|
|
await page.type('input', 'should not be record');
|
|
await page.evaluate(`document.getElementById('text').innerText = '1'`);
|
|
await page.click('#text');
|
|
|
|
const snapshots = await page.evaluate('window.snapshots');
|
|
assertSnapshot(snapshots, __filename, 'block');
|
|
});
|
|
|
|
it('should record DOM node movement 1', async () => {
|
|
const page: puppeteer.Page = await this.browser.newPage();
|
|
await page.goto('about:blank');
|
|
await page.setContent(getHtml.call(this, 'move-node.html'));
|
|
|
|
await page.evaluate(() => {
|
|
const div = document.querySelector('div')!;
|
|
const p = document.querySelector('p')!;
|
|
const span = document.querySelector('span')!;
|
|
document.body.removeChild(span);
|
|
p.appendChild(span);
|
|
p.removeChild(span);
|
|
div.appendChild(span);
|
|
});
|
|
const snapshots = await page.evaluate('window.snapshots');
|
|
assertSnapshot(snapshots, __filename, 'move-node-1');
|
|
});
|
|
|
|
it('should record DOM node movement 2', async () => {
|
|
const page: puppeteer.Page = await this.browser.newPage();
|
|
await page.goto('about:blank');
|
|
await page.setContent(getHtml.call(this, 'move-node.html'));
|
|
|
|
await page.evaluate(() => {
|
|
const div = document.createElement('div');
|
|
const span = document.querySelector('span')!;
|
|
document.body.appendChild(div);
|
|
div.appendChild(span);
|
|
});
|
|
const snapshots = await page.evaluate('window.snapshots');
|
|
assertSnapshot(snapshots, __filename, 'move-node-2');
|
|
});
|
|
|
|
it('should record dynamic CSS changes', async () => {
|
|
const page: puppeteer.Page = await this.browser.newPage();
|
|
await page.goto('about:blank');
|
|
await page.setContent(getHtml.call(this, 'react-styled-components.html'));
|
|
await page.click('.toggle');
|
|
const snapshots = await page.evaluate('window.snapshots');
|
|
assertSnapshot(snapshots, __filename, 'react-styled-components');
|
|
});
|
|
|
|
it('will serialize node before record', async () => {
|
|
const page: puppeteer.Page = await this.browser.newPage();
|
|
await page.goto('about:blank');
|
|
await page.setContent(getHtml.call(this, 'mutation-observer.html'));
|
|
|
|
await page.evaluate(() => {
|
|
const ul = document.querySelector('ul') as HTMLUListElement;
|
|
let count = 3;
|
|
while (count > 0) {
|
|
count--;
|
|
const li = document.createElement('li');
|
|
ul.appendChild(li);
|
|
}
|
|
});
|
|
|
|
const snapshots = await page.evaluate('window.snapshots');
|
|
assertSnapshot(snapshots, __filename, 'serialize-before-record');
|
|
});
|
|
|
|
it('will defer missing next node mutation', async () => {
|
|
const page: puppeteer.Page = await this.browser.newPage();
|
|
await page.goto('about:blank');
|
|
await page.setContent(getHtml.call(this, 'shuffle.html'));
|
|
|
|
const text = await page.evaluate(() => {
|
|
const els = Array.prototype.slice.call(document.querySelectorAll('li'));
|
|
const parent = document.querySelector('ul')!;
|
|
parent.removeChild(els[3]);
|
|
parent.removeChild(els[2]);
|
|
parent.removeChild(els[1]);
|
|
parent.removeChild(els[0]);
|
|
parent.insertBefore(els[3], els[4]);
|
|
parent.insertBefore(els[2], els[4]);
|
|
parent.insertBefore(els[1], els[4]);
|
|
parent.insertBefore(els[0], els[4]);
|
|
return parent.innerText;
|
|
});
|
|
|
|
expect(text).to.equal('4\n3\n2\n1\n5');
|
|
});
|
|
});
|