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

handle iframes

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

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

@ -438,6 +438,16 @@ function snapshotScript(...targetIds: (string | undefined)[]) {
context.fillRect(0, 0, canvas.width, canvas.height); context.fillRect(0, 0, canvas.width, canvas.height);
} }
if (window.parent.parent !== window.parent) {
for (const canvas of canvasElements) {
const context = canvas.getContext('2d')!;
drawWarningBackground(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.`;
}
return;
}
const img = new Image(); const img = new Image();
img.onload = () => { img.onload = () => {
for (const canvas of canvasElements) { for (const canvas of canvasElements) {
@ -451,7 +461,6 @@ function snapshotScript(...targetIds: (string | undefined)[]) {
drawWarningBackground(context, canvas); drawWarningBackground(context, canvas);
// todo: don't show the image if we're in an iframe - we know it's not going to be accurate
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

13
tests/library/trace-viewer.spec.ts
View file

@ -1452,6 +1452,19 @@ test('canvas clipping', async ({ runAndTrace, page, server }) => {
await expect(snapshot.locator('canvas')).toHaveAttribute('title', `Playwright couldn't capture full canvas contents because it's located partially outside the viewport.`); await expect(snapshot.locator('canvas')).toHaveAttribute('title', `Playwright couldn't capture full canvas contents because it's located partially outside the viewport.`);
}); });
test('canvas clipping in iframe', async ({ runAndTrace, page, server }) => {
const traceViewer = await runAndTrace(async () => {
await page.setContent(`
<iframe src="${server.PREFIX}/screenshots/canvas.html#canvas-on-edge"></iframe>
`);
await page.waitForTimeout(1000); // ensure we could take a screenshot
});
const snapshot = await traceViewer.snapshotFrame('page.waitForTimeout');
const canvas = snapshot.locator('iframe').contentFrame().locator('canvas');
await expect(canvas).toHaveAttribute('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.`);
});
test.skip('should handle case where neither snapshots nor screenshots exist', async ({ runAndTrace, page, server }) => { test.skip('should handle case where neither snapshots nor screenshots exist', async ({ runAndTrace, page, server }) => {
const traceViewer = await runAndTrace(async () => { const traceViewer = await runAndTrace(async () => {
await page.goto(server.PREFIX + '/one-style.html'); await page.goto(server.PREFIX + '/one-style.html');