From 733c485db3892a9152f3c1c3152b30c35c592020 Mon Sep 17 00:00:00 2001 From: Simon Knott Date: Mon, 14 Oct 2024 14:51:12 +0200 Subject: [PATCH] add warning --- .../trace-viewer/src/sw/snapshotRenderer.ts | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/packages/trace-viewer/src/sw/snapshotRenderer.ts b/packages/trace-viewer/src/sw/snapshotRenderer.ts index 0d2f2af502655..1e24e64573b40 100644 --- a/packages/trace-viewer/src/sw/snapshotRenderer.ts +++ b/packages/trace-viewer/src/sw/snapshotRenderer.ts @@ -247,11 +247,35 @@ function snapshotScript(...targetIds: (string | undefined)[]) { const kPointerWarningTitle = 'Recorded click position in absolute coordinates did not' + ' match the center of the clicked element. This is likely due to a difference between' + ' the test runner and the trace viewer operating systems.'; + const kCanvasWarningTitle = 'Canvas contents aren\'t recorded in Snapshot. Enable "Show screenshot instead of snapshot" in Settings to see contents.'; const scrollTops: Element[] = []; const scrollLefts: Element[] = []; const targetElements: Element[] = []; + const drawCanvasWarning = (canvas: HTMLCanvasElement) => { + const context = canvas.getContext('2d')!; + + context.fillStyle = '#f3f3f3'; + context.fillRect(0, 0, canvas.width, canvas.height); + + context.beginPath(); + context.arc(canvas.width / 2, canvas.height / 2, 40, 0, 2 * Math.PI); + context.fillStyle = '#e51400'; + context.fill(); + + context.lineWidth = 5; + context.strokeStyle = '#e51400'; + context.strokeRect(0, 0, canvas.width, canvas.height); + context.font = '50px serif'; + + context.fillStyle = 'white'; + context.textAlign = 'center'; + context.fillText('⚠', canvas.width / 2, canvas.height / 2 + 20); + + canvas.setAttribute('title', kCanvasWarningTitle); + }; + const visit = (root: Document | ShadowRoot) => { // Collect all scrolled elements for later use. for (const e of root.querySelectorAll(`[__playwright_scroll_top_]`)) @@ -299,6 +323,9 @@ function snapshotScript(...targetIds: (string | undefined)[]) { } } + for (const canvas of root.querySelectorAll('canvas')) + drawCanvasWarning(canvas); + { const body = root.querySelector(`body[__playwright_custom_elements__]`); if (body && window.customElements) {