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

address feedback

Browse source
This commit is contained in:
Simon Knott 2024-10-18 11:10:45 +02:00
parent 309bea0ea9
commit 5aae14e759
No known key found for this signature in database
GPG key ID: 8CEDC00028084AEC
1 changed files with 14 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -420,7 +420,7 @@ function snapshotScript(...targetIds: (string | undefined)[]) {
} }
if (canvasElements.length > 0) { if (canvasElements.length > 0) {
function drawWarningBackground(context: CanvasRenderingContext2D, canvas: HTMLCanvasElement) { function drawCheckerboard(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);
@ -442,7 +442,7 @@ function snapshotScript(...targetIds: (string | undefined)[]) {
if (window.parent.parent !== window.parent) { if (window.parent.parent !== window.parent) {
for (const canvas of canvasElements) { for (const canvas of canvasElements) {
const context = canvas.getContext('2d')!; const context = canvas.getContext('2d')!;
drawWarningBackground(context, canvas); drawCheckerboard(context, canvas);
canvas.title = `Playwright displays canvas contents on a best-effort basis. It doesn't support canvas elements inside an iframe yet. If this impacts your workflow, please open an issue so we can prioritize.`; canvas.title = `Playwright displays canvas contents on a best-effort basis. It doesn't support canvas elements inside an iframe yet. If this impacts your workflow, please open an issue so we can prioritize.`;
} }
return; return;
@ -459,27 +459,30 @@ function snapshotScript(...targetIds: (string | undefined)[]) {
const xEnd = boundingRect.right / window.innerWidth; const xEnd = boundingRect.right / window.innerWidth;
const yEnd = boundingRect.bottom / window.innerHeight; const yEnd = boundingRect.bottom / window.innerHeight;
drawWarningBackground(context, canvas); drawCheckerboard(context, canvas);
const fullyUncaptured = xStart > 1 || yStart > 1;
if (fullyUncaptured) {
canvas.title = `Playwright couldn't capture canvas contents because it's located outside the viewport.`;
continue;
}
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);
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) { const partiallyUncaptured = xEnd > 1 || yEnd > 1;
if (xStart > 1 || yStart > 1) if (partiallyUncaptured)
canvas.title = `Playwright couldn't capture canvas contents because it's located outside the viewport.`;
else
canvas.title = `Playwright couldn't capture full canvas contents because it's located partially outside the viewport.`; canvas.title = `Playwright couldn't capture full canvas contents because it's located partially outside the viewport.`;
} else { else
canvas.title = `Canvas contents are displayed on a best-effort basis based on viewport screenshots taken during test execution.`; 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 canvasElements) { for (const canvas of canvasElements) {
const context = canvas.getContext('2d')!; const context = canvas.getContext('2d')!;
drawWarningBackground(context, canvas); drawCheckerboard(context, canvas);
canvas.title = `Playwright couldn't show canvas contents because the screenshot failed to load.`; canvas.title = `Playwright couldn't show canvas contents because the screenshot failed to load.`;
} }
}; };