diff --git a/src/record/observer.ts b/src/record/observer.ts index 9933979d..c33ccc19 100644 --- a/src/record/observer.ts +++ b/src/record/observer.ts @@ -379,7 +379,21 @@ function initViewportResizeObserver( } 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 = new WeakMap(); function initInputObserver( cb: inputCallback, @@ -406,10 +420,12 @@ function initInputObserver( } let text = (target as HTMLInputElement).value; let isChecked = false; + const hasTextInput = + MASK_TYPES.includes(type) || (target as Element).tagName === 'TEXTAREA'; if (type === 'radio' || type === 'checkbox') { isChecked = (target as HTMLInputElement).checked; - } else if ((MASK_TYPES.indexOf(type) >= 0 || (target as Element).tagName == 'TEXTAREA') && maskAllInputs) { - text = Array(text.length+1).join('*') + } else if (hasTextInput && maskAllInputs) { + text = '*'.repeat(text.length); } cbWithDedup(target, { text, isChecked }); // if a radio was checked diff --git a/test/integration.test.ts b/test/integration.test.ts index 937e0490..b308a2e7 100644 --- a/test/integration.test.ts +++ b/test/integration.test.ts @@ -3,6 +3,7 @@ import * as path from 'path'; import * as puppeteer from 'puppeteer'; import { assertSnapshot } from './utils'; import { Suite } from 'mocha'; +import { recordOptions } from '../src/types'; interface ISuite extends Suite { code: string; @@ -10,7 +11,7 @@ interface ISuite extends Suite { } 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 html = fs.readFileSync(filePath, 'utf8'); return html.replace( @@ -25,7 +26,7 @@ describe('record integration tests', function(this: ISuite) { console.log(event); window.snapshots.push(event); }, - maskAllInputs: ${maskAllInputs} + maskAllInputs: ${options.maskAllInputs} }); @@ -152,7 +153,9 @@ describe('record integration tests', function(this: ISuite) { 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', true)); + await page.setContent( + getHtml.call(this, 'form.html', { maskAllInputs: true }), + ); await page.type('input[type="text"]', 'test'); await page.click('input[type="radio"]');