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

fix(trace-viewer): Rewrite file URIs in snapshots, like blob URIs. (#31113)

Browse source 
This allows snapshots of file:/// pages with external stylesheets,
images, etc to be rendered correctly in the trace viewer. (Otherwise, it
tries to request the file:/// URIs directly and the requests get blocked
by the browser.)

Fixes #31112.
This commit is contained in:
Carter Sande 2024-06-10 03:44:52 -06:00 committed by GitHub
parent abaddc01c9
commit 701a405bdf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 24 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
packages/trace-viewer/src/snapshotRenderer.ts
View file

@ -401,13 +401,20 @@ export function rewriteURLForCustomProtocol(href: string): string {
// Pass through if possible.
const isBlob = url.protocol === 'blob:';
if (!isBlob && schemas.includes(url.protocol))
const isFile = url.protocol === 'file:';
if (!isBlob && !isFile && schemas.includes(url.protocol))
return href;
// Rewrite blob and custom schemas.
// Rewrite blob, file and custom schemas.
const prefix = 'pw-' + url.protocol.slice(0, url.protocol.length - 1);
if (!isFile)
url.protocol = 'https:';
url.hostname = url.hostname ? `${prefix}--${url.hostname}` : prefix;
if (isFile) {
// File URIs can only have their protocol changed after the hostname
// is set. (For all other URIs, we must set the protocol first.)
url.protocol = 'https:';
}
return url.toString();
} catch {
return href;
@ -423,7 +430,8 @@ const urlInCSSRegex = /url\(['"]?([\w-]+:)\/\//ig;
function rewriteURLsInStyleSheetForCustomProtocol(text: string): string {
return text.replace(urlInCSSRegex, (match: string, protocol: string) => {
const isBlob = protocol === 'blob:';
if (!isBlob && schemas.includes(protocol))
const isFile = protocol === 'file:';
if (!isBlob && !isFile && schemas.includes(protocol))
return match;
return match.replace(protocol + '//', `https://pw-${protocol.slice(0, -1)}--`);
});

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

@ -18,6 +18,7 @@ import type { TraceViewerFixtures } from '../config/traceViewerFixtures';
import { traceViewerFixtures } from '../config/traceViewerFixtures';
import fs from 'fs';
import path from 'path';
import { pathToFileURL } from 'url';
import { expect, playwrightTest } from '../config/browserTest';
import type { FrameLocator } from '@playwright/test';
@ -558,6 +559,17 @@ test('should handle src=blob', async ({ page, server, runAndTrace, browserName }
expect(size).toBe(10);
});
test('should handle file URIs', async ({ page, runAndTrace, browserName }) => {
test.skip(browserName !== 'chromium');
const traceViewer = await runAndTrace(async () => {
await page.goto(pathToFileURL(path.join(__dirname, '..', 'assets', 'one-style.html')).href);
});
const frame = await traceViewer.snapshotFrame('goto');
await expect(frame.locator('body')).toHaveCSS('background-color', 'rgb(255, 192, 203)');
});
test('should preserve currentSrc', async ({ browser, server, showTraceViewer }) => {
const traceFile = test.info().outputPath('trace.zip');
const page = await browser.newPage({ deviceScaleFactor: 3 });