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

Add options to mask texts (#540)

Browse Source 
* feat: add options to mask texts

* feat: add the default mask function

* refactor: rename options to identify the difference between  mask text and mask input

* test: add tests about masking

* doc: add options about masking

* chore: bump up rrweb-snapshot version
This commit is contained in:
re-fort
2026-04-01 12:00:00 +08:00
committed by GitHub
parent 861fac54ea
commit b1b25447ff
12 changed files with 895 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
test/integration.test.ts
View File

@@ -72,8 +72,10 @@ describe('record integration tests', function (this: ISuite) {
emit: event => {
window.snapshots.push(event);
},
maskTextSelector: ${JSON.stringify(options.maskTextSelector)},
maskAllInputs: ${options.maskAllInputs},
maskInputOptions: ${JSON.stringify(options.maskAllInputs)},
maskTextFn: ${options.maskTextFn},
recordCanvas: ${options.recordCanvas},
recordLog: ${options.recordLog},
});
@@ -456,4 +458,52 @@ describe('record integration tests', function (this: ISuite) {
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'shadow-dom');
});
it('should mask texts', async () => {
const page: puppeteer.Page = await this.browser.newPage();
await page.goto('about:blank');
await page.setContent(
getHtml.call(this, 'mask-text.html', {
maskTextSelector: '[data-masking="true"]',
}),
);
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'mask-text');
});
it('should mask texts using maskTextFn', async () => {
const page: puppeteer.Page = await this.browser.newPage();
await page.goto('about:blank');
await page.setContent(
getHtml.call(this, 'mask-text.html', {
maskTextSelector: '[data-masking="true"]',
maskTextFn: (t: string) => t.replace(/[a-z]/g, '*'),
}),
);
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'mask-text-fn');
});
it('can mask character data 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;
const p = document.querySelector('p') as HTMLParagraphElement;
[li, p].forEach((element) => {
element.className = 'rr-mask';
});
ul.appendChild(li);
li.innerText = 'new list item';
p.innerText = 'mutated';
});
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots, __filename, 'mask-character-data');
});
});