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

fix(snapshot): render sandboxed iframes and svg iframes (#10835)

Browse source
This commit is contained in:
Dmitry Gozman 2021-12-09 17:10:31 -08:00 committed by GitHub
parent c5c960e76f
commit 1d50db809d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/playwright-core/src/server/trace/recorder/snapshotterInjected.ts
View file

@ -417,7 +417,7 @@ export function frameSnapshotStreamer(snapshotStreamer: string) {
continue;
if (nodeName === 'LINK' && name === 'integrity')
continue;
if (nodeName === 'IFRAME' && name === 'src')
if (nodeName === 'IFRAME' && (name === 'src' || name === 'sandbox'))
continue;
let value = element.attributes[i].value;
if (name === 'src' && (nodeName === 'IMG'))

28
tests/trace-viewer/trace-viewer.spec.ts
View file

@ -288,10 +288,10 @@ test('should show snapshot URL', async ({ page, runAndTrace, server }) => {
await expect(traceViewer.page.locator('.snapshot-url')).toHaveText(server.EMPTY_PAGE);
});
test('should capture iframe', async ({ page, server, runAndTrace }) => {
test('should capture iframe with sandbox attribute', async ({ page, server, runAndTrace }) => {
await page.route('**/empty.html', route => {
route.fulfill({
body: '<iframe src="iframe.html"></iframe>',
body: '<iframe src="iframe.html" sandBOX="allow-scripts"></iframe>',
contentType: 'text/html'
}).catch(() => {});
});
@ -317,6 +317,30 @@ test('should capture iframe', async ({ page, server, runAndTrace }) => {
expect(await button.textContent()).toBe('Hello iframe');
});
test('should capture data-url svg iframe', async ({ page, server, runAndTrace }) => {
await page.route('**/empty.html', route => {
route.fulfill({
body: `<iframe src="data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3e%3cpath d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z'/%3e%3c/svg%3e"></iframe>`,
contentType: 'text/html'
}).catch(() => {});
});
const traceViewer = await runAndTrace(async () => {
await page.goto(server.EMPTY_PAGE);
if (page.frames().length < 2)
await page.waitForEvent('frameattached');
await page.frames()[1].waitForSelector('svg');
// Force snapshot.
await page.evaluate('2+2');
});
// Render snapshot, check expectations.
const snapshotFrame = await traceViewer.snapshotFrame('page.evaluate', 0, true);
await expect(snapshotFrame.childFrames()[0].locator('svg')).toBeVisible();
const content = await snapshotFrame.childFrames()[0].content();
expect(content).toContain(`d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"`);
});
test('should contain adopted style sheets', async ({ page, runAndTrace, browserName }) => {
test.skip(browserName !== 'chromium', 'Constructed stylesheets are only in Chromium.');