Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

show warning icon

Browse source
This commit is contained in:
Simon Knott 2024-10-17 11:08:49 +02:00
parent bf5f7184c2
commit 23822dc349
No known key found for this signature in database
GPG key ID: 8CEDC00028084AEC
1 changed files with 26 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
packages/trace-viewer/src/sw/snapshotRenderer.ts
View file

@ -303,7 +303,7 @@ function snapshotScript(screenshotURL: string | undefined, ...targetIds: (string
const canvases = root.querySelectorAll('canvas'); const canvases = root.querySelectorAll('canvas');
if (canvases.length > 0 && screenshotURL) { if (canvases.length > 0 && screenshotURL) {
function drawCanvasWarning(canvas: HTMLCanvasElement, partial: boolean) { function drawWarningBackground(context: CanvasRenderingContext2D, canvas: HTMLCanvasElement) {
function createCheckerboardPattern() { function createCheckerboardPattern() {
const pattern = document.createElement('canvas'); const pattern = document.createElement('canvas');
pattern.width = pattern.width / Math.floor(pattern.width / 24); pattern.width = pattern.width / Math.floor(pattern.width / 24);
@ -317,14 +317,15 @@ function snapshotScript(screenshotURL: string | undefined, ...targetIds: (string
return context.createPattern(pattern, 'repeat')!; return context.createPattern(pattern, 'repeat')!;
} }
const ctx = canvas.getContext('2d')!; context.fillStyle = createCheckerboardPattern();
ctx.fillStyle = 'red'; context.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(0, 0, canvas.width, canvas.height); }
ctx.fillStyle = createCheckerboardPattern(); function drawWarningIcon(context: CanvasRenderingContext2D) {
ctx.fillRect(0, 0, canvas.width, canvas.height); context.fillStyle = 'red';
context.font = '24px serif';
canvas.title = `Playwright couldn't capture ${partial ? 'full ' : ''}canvas contents because it's located ${partial ? 'partially ' : ''}outside the viewport.`; context.textBaseline = 'top';
context.fillText('⚠', 0, 0);
} }
const img = new Image(); const img = new Image();
@ -338,19 +339,30 @@ function snapshotScript(screenshotURL: string | undefined, ...targetIds: (string
const xEnd = boundingRect.right / window.innerWidth; const xEnd = boundingRect.right / window.innerWidth;
const yEnd = boundingRect.bottom / window.innerHeight; const yEnd = boundingRect.bottom / window.innerHeight;
if (xStart > 1 || yStart > 1 || xEnd > 1 || yEnd > 1) drawWarningBackground(context, canvas);
drawCanvasWarning(canvas, xStart < 1 && yStart < 1);
context.drawImage(img, xStart * img.width, yStart * img.height, (xEnd - xStart) * img.width, (yEnd - yStart) * img.height, 0, 0, canvas.width, canvas.height); context.drawImage(img, xStart * img.width, yStart * img.height, (xEnd - xStart) * img.width, (yEnd - yStart) * img.height, 0, 0, canvas.width, canvas.height);
drawWarningIcon(context);
if (isUnderTest) if (isUnderTest)
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.log(`canvas drawn:`, JSON.stringify([xStart, yStart, xEnd, yEnd].map(v => Math.floor(v * 100)))); console.log(`canvas drawn:`, JSON.stringify([xStart, yStart, xEnd, yEnd].map(v => Math.floor(v * 100))));
if (xEnd > 1 || yEnd > 1) {
if (xStart > 1 || yStart > 1)
canvas.title = `Playwright couldn't capture full canvas contents because it's located partially outside the viewport.`;
else
canvas.title = `Playwright couldn't capture canvas contents because it's located outside the viewport.`;
} else {
canvas.title = `Canvas contents are displayed on a best-effort basis based on viewport screenshots taken during test execution.`;
}
} }
}; };
img.onerror = () => { img.onerror = () => {
for (const canvas of canvases) for (const canvas of canvases) {
drawCanvasWarning(canvas, false); const context = canvas.getContext('2d')!;
drawWarningBackground(context, canvas);
drawWarningIcon(context);
canvas.title = `Playwright couldn't show canvas contents because the screenshot failed to load.`;
}
}; };
img.src = screenshotURL; img.src = screenshotURL;
} }