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

tweak some code for mask input option

Browse Source
This commit is contained in:
Yanzhen Yu
2019-06-15 14:38:03 +08:00
parent 189df87b9d
commit a51313d973
2 changed files with 25 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/record/observer.ts
View File

@@ -379,7 +379,21 @@ function initViewportResizeObserver(
} }
const INPUT_TAGS = ['INPUT', 'TEXTAREA', 'SELECT']; const INPUT_TAGS = ['INPUT', 'TEXTAREA', 'SELECT'];
const MASK_TYPES = ['color', 'date', 'datetime-local', 'email', 'month', 'number', 'range', 'search', 'tel', 'text', 'time', 'url', 'week'] const MASK_TYPES = [
'color',
'date',
'datetime-local',
'email',
'month',
'number',
'range',
'search',
'tel',
'text',
'time',
'url',
'week',
];
const lastInputValueMap: WeakMap<EventTarget, inputValue> = new WeakMap(); const lastInputValueMap: WeakMap<EventTarget, inputValue> = new WeakMap();
function initInputObserver( function initInputObserver(
cb: inputCallback, cb: inputCallback,
@@ -406,10 +420,12 @@ function initInputObserver(
} }
let text = (target as HTMLInputElement).value; let text = (target as HTMLInputElement).value;
let isChecked = false; let isChecked = false;
const hasTextInput =
MASK_TYPES.includes(type) || (target as Element).tagName === 'TEXTAREA';
if (type === 'radio' || type === 'checkbox') { if (type === 'radio' || type === 'checkbox') {
isChecked = (target as HTMLInputElement).checked; isChecked = (target as HTMLInputElement).checked;
} else if ((MASK_TYPES.indexOf(type) >= 0 || (target as Element).tagName == 'TEXTAREA') && maskAllInputs) { } else if (hasTextInput && maskAllInputs) {
text = Array(text.length+1).join('*') text = '*'.repeat(text.length);
} }
cbWithDedup(target, { text, isChecked }); cbWithDedup(target, { text, isChecked });
// if a radio was checked // if a radio was checked

9
test/integration.test.ts
View File

@@ -3,6 +3,7 @@ import * as path from 'path';
import * as puppeteer from 'puppeteer'; import * as puppeteer from 'puppeteer';
import { assertSnapshot } from './utils'; import { assertSnapshot } from './utils';
import { Suite } from 'mocha'; import { Suite } from 'mocha';
import { recordOptions } from '../src/types';
interface ISuite extends Suite { interface ISuite extends Suite {
code: string; code: string;
@@ -10,7 +11,7 @@ interface ISuite extends Suite {
} }
describe('record integration tests', function(this: ISuite) { describe('record integration tests', function(this: ISuite) {
const getHtml = (fileName: string, maskAllInputs: boolean = false): string => { const getHtml = (fileName: string, options: recordOptions = {}): string => {
const filePath = path.resolve(__dirname, `./html/${fileName}`); const filePath = path.resolve(__dirname, `./html/${fileName}`);
const html = fs.readFileSync(filePath, 'utf8'); const html = fs.readFileSync(filePath, 'utf8');
return html.replace( return html.replace(
@@ -25,7 +26,7 @@ describe('record integration tests', function(this: ISuite) {
console.log(event); console.log(event);
window.snapshots.push(event); window.snapshots.push(event);
}, },
maskAllInputs: ${maskAllInputs} maskAllInputs: ${options.maskAllInputs}
}); });
</script> </script>
</body> </body>
@@ -152,7 +153,9 @@ describe('record integration tests', function(this: ISuite) {
it('should not record input values if maskAllInputs is enabled', async () => { it('should not record input values if maskAllInputs is enabled', async () => {
const page: puppeteer.Page = await this.browser.newPage(); const page: puppeteer.Page = await this.browser.newPage();
await page.goto('about:blank'); await page.goto('about:blank');
await page.setContent(getHtml.call(this, 'form.html', true)); await page.setContent(
getHtml.call(this, 'form.html', { maskAllInputs: true }),
);
await page.type('input[type="text"]', 'test'); await page.type('input[type="text"]', 'test');
await page.click('input[type="radio"]'); await page.click('input[type="radio"]');