From 7d39d345c269eab242906cbf374dfe1af357b4f0 Mon Sep 17 00:00:00 2001 From: musou1500 Date: Sat, 18 Dec 2021 03:43:19 +0900 Subject: [PATCH] fix(tracing): trace frame (#10846) --- .../trace/recorder/snapshotterInjected.ts | 2 ++ .../src/web/traceViewer/snapshotRenderer.ts | 19 ++++++----- tests/snapshotter.spec.ts | 34 ++++++++++++++++--- 3 files changed, 42 insertions(+), 13 deletions(-) diff --git a/packages/playwright-core/src/server/trace/recorder/snapshotterInjected.ts b/packages/playwright-core/src/server/trace/recorder/snapshotterInjected.ts index e3eeb64dfe..f3a69ea450 100644 --- a/packages/playwright-core/src/server/trace/recorder/snapshotterInjected.ts +++ b/packages/playwright-core/src/server/trace/recorder/snapshotterInjected.ts @@ -437,6 +437,8 @@ export function frameSnapshotStreamer(snapshotStreamer: string) { continue; if (nodeName === 'IFRAME' && (name === 'src' || name === 'sandbox')) continue; + if (nodeName === 'FRAME' && name === 'src') + continue; let value = element.attributes[i].value; if (nodeName === 'META') value = this.__sanitizeMetaAttribute(name, value, (node as HTMLMetaElement).httpEquiv); diff --git a/packages/playwright-core/src/web/traceViewer/snapshotRenderer.ts b/packages/playwright-core/src/web/traceViewer/snapshotRenderer.ts index 17661e27bc..3d3f1bf64d 100644 --- a/packages/playwright-core/src/web/traceViewer/snapshotRenderer.ts +++ b/packages/playwright-core/src/web/traceViewer/snapshotRenderer.ts @@ -85,12 +85,12 @@ export class SnapshotRenderer { return { html: '', pageId: snapshot.pageId, frameId: snapshot.frameId, index: this._index }; // Hide the document in order to prevent flickering. We will unhide once script has processed shadow. - const hideAllStyle = ''; - const prefix = snapshot.doctype ? `` + hideAllStyle : hideAllStyle; - html = prefix + html + ` - - - `; + const prefix = snapshot.doctype ? `` : ''; + html = prefix + [ + '', + ``, + `` + ].join('') + html; return { html, pageId: snapshot.pageId, frameId: snapshot.frameId, index: this._index }; } @@ -184,7 +184,7 @@ function snapshotScript() { for (const e of root.querySelectorAll(`[${scrollLeftAttribute}]`)) scrollLefts.push(e); - for (const iframe of root.querySelectorAll('iframe')) { + for (const iframe of root.querySelectorAll('iframe, frame')) { const src = iframe.getAttribute('__playwright_src__'); if (!src) { iframe.setAttribute('src', 'data:text/html,'); @@ -221,7 +221,6 @@ function snapshotScript() { (root as any).adoptedStyleSheets = adoptedSheets; } }; - visit(document); const onLoad = () => { window.removeEventListener('load', onLoad); @@ -252,7 +251,11 @@ function snapshotScript() { } document.styleSheets[0].disabled = true; }; + + const onDOMContentLoaded = () => visit(document); + window.addEventListener('load', onLoad); + window.addEventListener('DOMContentLoaded', onDOMContentLoaded); } const kShadowAttribute = '__playwright_shadow_root_'; diff --git a/tests/snapshotter.spec.ts b/tests/snapshotter.spec.ts index 9b8a16e0b7..555d286526 100644 --- a/tests/snapshotter.spec.ts +++ b/tests/snapshotter.spec.ts @@ -133,6 +133,32 @@ it.describe('snapshots', () => { expect((await snapshotter.resourceContentForTest(resource.response.content._sha1)).toString()).toBe('button { color: blue; }'); }); + it('should capture frame', async ({ page, server, toImpl, browserName, snapshotter }) => { + it.skip(browserName === 'firefox'); + + await page.route('**/empty.html', route => { + route.fulfill({ + body: '', + contentType: 'text/html' + }).catch(() => {}); + }); + await page.route('**/frame.html', route => { + route.fulfill({ + body: '', + contentType: 'text/html' + }).catch(() => {}); + }); + await page.goto(server.EMPTY_PAGE); + + for (let counter = 0; ; ++counter) { + const snapshot = await snapshotter.captureSnapshot(toImpl(page), 'snapshot' + counter); + const text = distillSnapshot(snapshot).replace(/frame@[^"]+["]/, '"'); + if (text === '\">') + break; + await page.waitForTimeout(250); + } + }); + it('should capture iframe', async ({ page, server, toImpl, browserName, snapshotter }) => { it.skip(browserName === 'firefox'); @@ -151,10 +177,8 @@ it.describe('snapshots', () => { await page.goto(server.EMPTY_PAGE); // Marking iframe hierarchy is racy, do not expect snapshot, wait for it. - let counter = 0; - let snapshot: any; - for (; ; ++counter) { - snapshot = await snapshotter.captureSnapshot(toImpl(page), 'snapshot' + counter); + for (let counter = 0; ; ++counter) { + const snapshot = await snapshotter.captureSnapshot(toImpl(page), 'snapshot' + counter); const text = distillSnapshot(snapshot).replace(/frame@[^"]+["]/, '"'); if (text === '') break; @@ -232,7 +256,7 @@ function distillSnapshot(snapshot, distillTarget = true) { return html .replace(/