diff --git a/packages/playwright-core/src/web/traceViewer/snapshotRenderer.ts b/packages/playwright-core/src/web/traceViewer/snapshotRenderer.ts index 0803f9a1a9..e64aab763b 100644 --- a/packages/playwright-core/src/web/traceViewer/snapshotRenderer.ts +++ b/packages/playwright-core/src/web/traceViewer/snapshotRenderer.ts @@ -80,9 +80,10 @@ export class SnapshotRenderer { if (!html) return { html: '', pageId: snapshot.pageId, frameId: snapshot.frameId, index: this._index }; - if (snapshot.doctype) - html = `` + html; - html += ` + // 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 + ` `; @@ -240,6 +241,7 @@ function snapshotScript() { pointElement.style.top = pointY + 'px'; document.documentElement.appendChild(pointElement); } + document.styleSheets[0].disabled = true; }; window.addEventListener('load', onLoad); } diff --git a/packages/playwright-core/src/web/traceViewer/snapshotServer.ts b/packages/playwright-core/src/web/traceViewer/snapshotServer.ts index 1aaf00e6fe..5bbe7da3ff 100644 --- a/packages/playwright-core/src/web/traceViewer/snapshotServer.ts +++ b/packages/playwright-core/src/web/traceViewer/snapshotServer.ts @@ -14,7 +14,6 @@ * limitations under the License. */ -import type { ResourceSnapshot } from '../../server/trace/common/snapshotTypes'; import { SnapshotStorage } from './snapshotStorage'; import type { Point } from '../../common/types'; import { URLSearchParams } from 'url'; @@ -44,7 +43,9 @@ export class SnapshotServer { return this._respondWithJson(snapshot ? { viewport: snapshot.viewport(), url: snapshot.snapshot().frameUrl - } : {}); + } : { + error: 'No snapshot found' + }); } private _snapshot(pathname: string, params: URLSearchParams) { @@ -70,15 +71,7 @@ export class SnapshotServer { return new Response(null, { status: 404 }); const sha1 = resource.response.content._sha1; - if (!sha1) - return new Response(null, { status: 404 }); - return this._innerServeResource(sha1, resource); - } - - private async _innerServeResource(sha1: string, resource: ResourceSnapshot): Promise { - const content = await this._snapshotStorage.resourceContent(sha1); - if (!content) - return new Response(null, { status: 404 }); + const content = sha1 ? await this._snapshotStorage.resourceContent(sha1) || new Blob([]) : new Blob([]); let contentType = resource.response.content.mimeType; const isTextEncoding = /^text\/|^application\/(javascript|json)/.test(contentType); @@ -95,7 +88,11 @@ export class SnapshotServer { headers.delete('Content-Length'); headers.set('Content-Length', String(content.size)); headers.set('Cache-Control', 'public, max-age=31536000'); - return new Response(content, { headers }); + return new Response(content, { + headers, + status: resource.response.status, + statusText: resource.response.statusText, + }); } } diff --git a/packages/playwright-core/src/web/traceViewer/ui/callTab.tsx b/packages/playwright-core/src/web/traceViewer/ui/callTab.tsx index caeb4191ac..f2be96bee6 100644 --- a/packages/playwright-core/src/web/traceViewer/ui/callTab.tsx +++ b/packages/playwright-core/src/web/traceViewer/ui/callTab.tsx @@ -42,7 +42,7 @@ export const CallTab: React.FunctionComponent<{
{action.metadata.apiName}
{<>
Time
-
wall time: {wallTime}
+ {action.metadata.wallTime &&
wall time: {wallTime}
}
duration: {duration}
} { !!paramKeys.length &&
Parameters
} diff --git a/packages/playwright-core/src/web/traceViewer/ui/snapshotTab.tsx b/packages/playwright-core/src/web/traceViewer/ui/snapshotTab.tsx index 7aaeed6775..062de81fbe 100644 --- a/packages/playwright-core/src/web/traceViewer/ui/snapshotTab.tsx +++ b/packages/playwright-core/src/web/traceViewer/ui/snapshotTab.tsx @@ -63,7 +63,8 @@ export const SnapshotTab: React.FunctionComponent<{ if (snapshotInfoUrl) { const response = await fetch(snapshotInfoUrl); const info = await response.json(); - setSnapshotInfo(info); + if (!info.error) + setSnapshotInfo(info); } if (!iframeRef.current) return; diff --git a/tests/snapshotter.spec.ts b/tests/snapshotter.spec.ts index 84edbf08f1..0e3ac0b487 100644 --- a/tests/snapshotter.spec.ts +++ b/tests/snapshotter.spec.ts @@ -216,6 +216,7 @@ function distillSnapshot(snapshot, distillTarget = true) { if (distillTarget) html = html.replace(/\s__playwright_target__="[^"]+"/g, ''); return html + .replace(/