Fixture used by Playwright for transformed and sticky redaction geometry.
+ ++ Check that no sensitive information is visible before sending. Cover sensitive areas before submitting. Redactions are baked into the uploaded image. +
+Capturing screenshot...
+Capturing screenshot...
-Browser viewport capture cannot apply automatic private-field masks. Select Element to preserve automatic masking, or review and cover sensitive areas before sending.
' - : getRedactionCount() > 0 - ? 'This site marked some fields for redaction. Review the screenshot before sending.
' - : ''; - - return new Promise(resolve => { - const complexNote = fullPageDisabled - ? `${nativeViewportAvailable ? 'This page is too complex for full-page or area capture. Capture the visible viewport or select a specific element instead.' : 'This page is too complex for full-page or area capture. Select a specific element instead.'}
` - : ''; - const primaryCaptureButton = fullPageDisabled - ? nativeViewportAvailable - ? '' - : '' - : ''; - - const modal = createModal( - root, - 'Capture Screenshot', - ` -Choose what to capture:
- ${complexNote} - ${redactionNote} -This browser viewport capture could not apply automatic private-field masks. Review and cover any sensitive areas before sending.
` - : redactionCount > 0 - ? `${redactionCount} private ${redactionCount === 1 ? 'item was' : 'items were'} marked for redaction in this screenshot. Review before sending.
` - : ''; - const modal = createModal( - root, - 'Review Screenshot', - ` - ${redactionNote} -- Check that no sensitive information is visible before sending. Cover sensitive areas before submitting. Redactions are baked into the uploaded image. -
-${nativeViewportAvailable ? 'This page is too complex for full-page or area capture. Capture the visible viewport or select a specific element instead.' : 'This page is too complex for full-page or area capture. Select a specific element instead.'}
` + : ''; + + let primaryCaptureButton = ''; + if (!fullPageDisabled) { + primaryCaptureButton = + ''; + } else if (nativeViewportAvailable) { + primaryCaptureButton = + ''; + } + + const modal = createModal( + root, + 'Capture Screenshot', + ` +Choose what to capture:
+ ${complexNote} + ${redactionNote} +${message}
`; +} + export function createModal( container: HTMLElement, title: string, diff --git a/test/captureFlow.test.ts b/test/captureFlow.test.ts new file mode 100644 index 0000000..38a2e31 --- /dev/null +++ b/test/captureFlow.test.ts @@ -0,0 +1,227 @@ +// @vitest-environment jsdom +import { afterEach, describe, expect, it, vi } from 'vitest'; +import type { EmptyCaptureReason } from '../src/widget/capture-flow'; +import type { ScreenshotChoice } from '../src/widget/screenshot-options'; +import type { CaptureWithLoadingResult } from '../src/widget/capture-loading'; + +const baseConfig = { + screenshotMode: 'optional' as const, + theme: 'light' as const, +}; + +async function loadCaptureFlowWithMocks(opts: { + screenshotChoice: ScreenshotChoice; + pickedElement?: Element | null; + captureResult?: CaptureWithLoadingResult; + annotationResult?: string | 'retake' | 'cancel'; +}) { + vi.resetModules(); + vi.doMock('../src/widget/screenshot-options', () => ({ + showScreenshotOptions: vi.fn().mockResolvedValue(opts.screenshotChoice), + })); + vi.doMock('../src/widget/picker', () => ({ + createElementPicker: vi.fn().mockResolvedValue(opts.pickedElement ?? null), + })); + vi.doMock('../src/widget/area-picker', () => ({ + createAreaPicker: vi.fn(), + })); + vi.doMock('../src/widget/capture-loading', () => ({ + captureWithLoading: vi.fn().mockResolvedValue(opts.captureResult ?? { kind: 'skipped' }), + captureAreaWithLoading: vi.fn(), + capturePromiseWithLoading: vi.fn().mockResolvedValue(opts.captureResult ?? { kind: 'skipped' }), + })); + vi.doMock('../src/widget/annotation-flow', () => ({ + showAnnotationStep: vi.fn().mockResolvedValue(opts.annotationResult ?? 'annotated-image'), + })); + vi.doMock('../src/widget/screenshot', () => ({ + beginViewportCapture: vi.fn(), + getRedactionCount: vi.fn().mockReturnValue(0), + isFullPageDisabled: vi.fn().mockReturnValue(false), + })); + + return import('../src/widget/capture-flow'); +} + +afterEach(() => { + vi.doUnmock('../src/widget/screenshot-options'); + vi.doUnmock('../src/widget/picker'); + vi.doUnmock('../src/widget/area-picker'); + vi.doUnmock('../src/widget/capture-loading'); + vi.doUnmock('../src/widget/annotation-flow'); + vi.doUnmock('../src/widget/screenshot'); + vi.resetModules(); +}); + +describe('capture flow state decisions', () => { + it.each([ + ['explicit-skip', true], + ['capture-failure-skip', true], + ['selection-cancelled', false], + ['none', false], + ] satisfies Array<[EmptyCaptureReason, boolean]>)( + 'complex screenshot skip persistence for %s is %s', + async (reason, expected) => { + const { shouldRememberComplexScreenshotSkip } = await import('../src/widget/capture-flow'); + expect(shouldRememberComplexScreenshotSkip(reason)).toBe(expected); + } + ); + + it('remembers complex screenshot skip for an explicit optional skip', async () => { + const { runScreenshotCaptureFlow } = await loadCaptureFlowWithMocks({ + screenshotChoice: { kind: 'skip' }, + }); + const onComplexScreenshotSkipped = vi.fn(); + + const result = await runScreenshotCaptureFlow( + document.createElement('div'), + baseConfig, + true, + onComplexScreenshotSkipped + ); + + expect(result).toEqual({ screenshot: null, elementSelector: null, returnToForm: false }); + expect(onComplexScreenshotSkipped).toHaveBeenCalledTimes(1); + }); + + it('does not remember complex screenshot skip when element selection is cancelled', async () => { + const { runScreenshotCaptureFlow } = await loadCaptureFlowWithMocks({ + screenshotChoice: { kind: 'element' }, + pickedElement: null, + }); + const onComplexScreenshotSkipped = vi.fn(); + + const result = await runScreenshotCaptureFlow( + document.createElement('div'), + baseConfig, + true, + onComplexScreenshotSkipped + ); + + expect(result).toEqual({ screenshot: null, elementSelector: null, returnToForm: false }); + expect(onComplexScreenshotSkipped).not.toHaveBeenCalled(); + }); + + it('keeps selected element metadata when element capture is skipped after failure', async () => { + const element = document.createElement('button'); + element.id = 'target-button'; + document.body.appendChild(element); + const { runScreenshotCaptureFlow } = await loadCaptureFlowWithMocks({ + screenshotChoice: { kind: 'element' }, + pickedElement: element, + captureResult: { kind: 'skipped' }, + }); + const onComplexScreenshotSkipped = vi.fn(); + + const result = await runScreenshotCaptureFlow( + document.createElement('div'), + baseConfig, + true, + onComplexScreenshotSkipped + ); + + expect(result).toEqual({ + screenshot: null, + elementSelector: '#target-button', + returnToForm: false, + }); + expect(onComplexScreenshotSkipped).toHaveBeenCalledTimes(1); + }); + + it('returns to form when the user dismisses the screenshot options modal', async () => { + const { runScreenshotCaptureFlow } = await loadCaptureFlowWithMocks({ + screenshotChoice: { kind: 'cancel' }, + }); + const onComplexScreenshotSkipped = vi.fn(); + + const result = await runScreenshotCaptureFlow( + document.createElement('div'), + baseConfig, + true, + onComplexScreenshotSkipped + ); + + expect(result).toEqual({ screenshot: null, elementSelector: null, returnToForm: true }); + expect(onComplexScreenshotSkipped).not.toHaveBeenCalled(); + }); + + it('returns to form when the capture-failure modal is cancelled mid-capture', async () => { + const { runScreenshotCaptureFlow } = await loadCaptureFlowWithMocks({ + screenshotChoice: { kind: 'capture' }, + captureResult: { kind: 'cancelled' }, + }); + const onComplexScreenshotSkipped = vi.fn(); + + const result = await runScreenshotCaptureFlow( + document.createElement('div'), + baseConfig, + true, + onComplexScreenshotSkipped + ); + + expect(result).toEqual({ screenshot: null, elementSelector: null, returnToForm: true }); + expect(onComplexScreenshotSkipped).not.toHaveBeenCalled(); + }); + + it('returns to form when the annotation step is cancelled', async () => { + const { runScreenshotCaptureFlow } = await loadCaptureFlowWithMocks({ + screenshotChoice: { kind: 'capture' }, + captureResult: { kind: 'ok', dataUrl: 'data:image/png;base64,AAAA' }, + annotationResult: 'cancel', + }); + const onComplexScreenshotSkipped = vi.fn(); + + const result = await runScreenshotCaptureFlow( + document.createElement('div'), + baseConfig, + true, + onComplexScreenshotSkipped + ); + + expect(result).toEqual({ screenshot: null, elementSelector: null, returnToForm: true }); + expect(onComplexScreenshotSkipped).not.toHaveBeenCalled(); + }); + + it('flags redactionUnavailable on the annotation step for native viewport captures', async () => { + const annotationMock = vi.fn().mockResolvedValue('annotated-image'); + vi.resetModules(); + vi.doMock('../src/widget/screenshot-options', () => ({ + showScreenshotOptions: vi.fn().mockResolvedValue({ + kind: 'viewport', + capture: Promise.resolve('data:image/png;base64,VVVV'), + } satisfies ScreenshotChoice), + })); + vi.doMock('../src/widget/picker', () => ({ createElementPicker: vi.fn() })); + vi.doMock('../src/widget/area-picker', () => ({ createAreaPicker: vi.fn() })); + vi.doMock('../src/widget/capture-loading', () => ({ + captureWithLoading: vi.fn(), + captureAreaWithLoading: vi.fn(), + capturePromiseWithLoading: vi + .fn() + .mockResolvedValue({ kind: 'ok', dataUrl: 'data:image/png;base64,VVVV' }), + })); + vi.doMock('../src/widget/annotation-flow', () => ({ showAnnotationStep: annotationMock })); + vi.doMock('../src/widget/screenshot', () => ({ + beginViewportCapture: vi.fn(), + getRedactionCount: vi.fn().mockReturnValue(0), + isFullPageDisabled: vi.fn().mockReturnValue(true), + })); + + const { runScreenshotCaptureFlow } = await import('../src/widget/capture-flow'); + const onComplexScreenshotSkipped = vi.fn(); + + const result = await runScreenshotCaptureFlow( + document.createElement('div'), + baseConfig, + true, + onComplexScreenshotSkipped + ); + + expect(result.screenshot).toBe('annotated-image'); + expect(annotationMock).toHaveBeenCalledWith( + expect.any(HTMLElement), + 'data:image/png;base64,VVVV', + 0, + { redactionUnavailable: true } + ); + }); +}); diff --git a/test/mask.test.ts b/test/mask.test.ts index 9803f5e..242926f 100644 --- a/test/mask.test.ts +++ b/test/mask.test.ts @@ -1,12 +1,22 @@ // @vitest-environment jsdom import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'; -import { collectMaskRects, applyMaskToImage, translateMaskRect } from '../src/widget/mask'; +import { + applyMaskToImage, + collectMaskRects, + createRedactionPlan, + MaskApplicationError, + translateMaskRect, +} from '../src/widget/mask'; describe('mask module exports', () => { it('exports collectMaskRects', () => { expect(typeof collectMaskRects).toBe('function'); }); + it('exports createRedactionPlan', () => { + expect(typeof createRedactionPlan).toBe('function'); + }); + it('exports applyMaskToImage', () => { expect(typeof applyMaskToImage).toBe('function'); }); @@ -47,6 +57,14 @@ describe('collectMaskRects — explicit attribute', () => { document.body.appendChild(div); expect(collectMaskRects(document.body)).toEqual([{ x: 10, y: 20, w: 100, h: 50 }]); + expect(createRedactionPlan(document.body).targets).toMatchObject([ + { + element: div, + rect: { x: 10, y: 20, w: 100, h: 50 }, + reason: 'developer-marked', + strategy: 'canvas-mask', + }, + ]); }); it('returns rects for multiple sibling masked elements', () => { @@ -74,6 +92,14 @@ describe('collectMaskRects — built-in defaults', () => { document.body.appendChild(input); expect(collectMaskRects(document.body)).toEqual([{ x: 0, y: 0, w: 200, h: 30 }]); + expect(createRedactionPlan(document.body).targets).toMatchObject([ + { + element: input, + rect: { x: 0, y: 0, w: 200, h: 30 }, + reason: 'sensitive-input', + strategy: 'canvas-mask', + }, + ]); }); it('masks credit-card autocomplete inputs', () => { @@ -171,6 +197,78 @@ describe('collectMaskRects — nesting and scoping', () => { expect(collectMaskRects(input)).toEqual([{ x: 0, y: 0, w: 200, h: 30 }]); }); + + it('traverses open shadow DOM redaction targets from a host element', () => { + const host = withRect(document.createElement('div'), 0, 0, 200, 100); + const shadow = host.attachShadow({ mode: 'open' }); + const privateField = withRect(document.createElement('div'), 10, 10, 50, 20); + privateField.setAttribute('data-bugdrop-mask', ''); + shadow.appendChild(privateField); + document.body.appendChild(host); + + expect(collectMaskRects(document.body)).toEqual([{ x: 10, y: 10, w: 50, h: 20 }]); + expect(createRedactionPlan(document.body).targets).toMatchObject([ + { + element: privateField, + rect: { x: 10, y: 10, w: 50, h: 20 }, + reason: 'developer-marked', + strategy: 'canvas-mask', + }, + ]); + }); + + it('uses a marked shadow host as the top-most mask', () => { + const host = withRect(document.createElement('div'), 0, 0, 200, 100); + host.setAttribute('data-bugdrop-mask', ''); + const shadow = host.attachShadow({ mode: 'open' }); + const privateField = withRect(document.createElement('div'), 10, 10, 50, 20); + privateField.setAttribute('data-bugdrop-mask', ''); + shadow.appendChild(privateField); + document.body.appendChild(host); + + expect(collectMaskRects(document.body)).toEqual([{ x: 0, y: 0, w: 200, h: 100 }]); + }); + + it('does not traverse iframe document redaction targets', () => { + const iframe = withRect(document.createElement('iframe'), 0, 0, 200, 100); + const iframeBody = document.createElement('body'); + const privateField = withRect(document.createElement('div'), 10, 10, 50, 20); + privateField.setAttribute('data-bugdrop-mask', ''); + iframeBody.appendChild(privateField); + Object.defineProperty(iframe, 'contentDocument', { + value: { body: iframeBody }, + configurable: true, + }); + document.body.appendChild(iframe); + + expect(createRedactionPlan(document.body).targets).toEqual([]); + }); + + it('masks a marked iframe container without inspecting iframe contents', () => { + const iframe = withRect(document.createElement('iframe'), 0, 0, 200, 100); + iframe.setAttribute('data-bugdrop-mask', ''); + document.body.appendChild(iframe); + + expect(collectMaskRects(document.body)).toEqual([{ x: 0, y: 0, w: 200, h: 100 }]); + }); + + it.each(['canvas', 'img', 'video'] as const)('masks a marked %s container', tagName => { + const media = withRect(document.createElement(tagName), 0, 0, 200, 100); + media.setAttribute('data-bugdrop-mask', ''); + document.body.appendChild(media); + + expect(collectMaskRects(document.body)).toEqual([{ x: 0, y: 0, w: 200, h: 100 }]); + }); + + it.each(['canvas', 'img', 'video'] as const)( + 'does not treat unmarked %s pixels as redaction targets', + tagName => { + const media = withRect(document.createElement(tagName), 0, 0, 200, 100); + document.body.appendChild(media); + + expect(collectMaskRects(document.body)).toEqual([]); + } + ); }); describe('collectMaskRects — coordinates and visibility', () => { @@ -357,6 +455,6 @@ describe('applyMaskToImage', () => { }; await expect( applyMaskToImage('data:image/png;base64,bad', [{ x: 0, y: 0, w: 10, h: 10 }], 1) - ).rejects.toThrow('Failed to apply privacy masks'); + ).rejects.toThrow(MaskApplicationError); }); });