fix(trace-viewer): file path contains encoded characters (#23893)

This fixes:

```
npx playwright show-trace %20I%20Love%20Node.zip
```

Extracted from https://github.com/microsoft/playwright/pull/23414.
This commit is contained in:
Max Schmitt 2023-06-26 18:13:40 +02:00 committed by GitHub
parent 6f67f6b52b
commit e1c220a37b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 9 additions and 7 deletions

View File

@ -93,7 +93,7 @@ async function startTraceViewerServer(traceUrls: string[], options?: Options): P
return server.serveFile(request, response, absolutePath);
});
const params = traceUrls.map(t => `trace=${t}`);
const params = traceUrls.map(t => `trace=${encodeURIComponent(t)}`);
const transport = options?.transport || (options?.isServer ? new StdinServer() : undefined);
if (transport) {

View File

@ -47,6 +47,8 @@ async function loadTrace(traceUrl: string, traceFileName: string | null, clientI
const backend = traceUrl.endsWith('json') ? new FetchTraceModelBackend(traceUrl) : new ZipTraceModelBackend(traceUrl, fetchProgress);
await traceModel.load(backend, unzipProgress);
} catch (error: any) {
// eslint-disable-next-line no-console
console.error(error);
if (error?.message?.includes('Cannot find .trace file') && await traceModel.hasEntry('index.html'))
throw new Error('Could not load trace. Did you upload a Playwright HTML report instead? Make sure to extract the archive first and then double-click the index.html file or put it on a web server.');
if (traceFileName)

View File

@ -86,7 +86,7 @@ export class FetchTraceModelBackend implements TraceModelBackend {
constructor(traceURL: string) {
this._traceURL = traceURL;
this._entriesPromise = fetch('/trace/file?path=' + encodeURI(traceURL)).then(async response => {
this._entriesPromise = fetch('/trace/file?path=' + encodeURIComponent(traceURL)).then(async response => {
const json = JSON.parse(await response.text());
const entries = new Map<string, string>();
for (const entry of json.entries)
@ -128,12 +128,12 @@ export class FetchTraceModelBackend implements TraceModelBackend {
const fileName = entries.get(entryName);
if (!fileName)
return;
return fetch('/trace/file?path=' + encodeURI(fileName));
return fetch('/trace/file?path=' + encodeURIComponent(fileName));
}
}
function formatUrl(trace: string) {
let url = trace.startsWith('http') || trace.startsWith('blob') ? trace : `file?path=${trace}`;
let url = trace.startsWith('http') || trace.startsWith('blob') ? trace : `file?path=${encodeURIComponent(trace)}`;
// Dropbox does not support cors.
if (url.startsWith('https://www.dropbox.com/'))
url = 'https://dl.dropboxusercontent.com/' + url.substring('https://www.dropbox.com/'.length);

View File

@ -66,6 +66,6 @@ function attachmentURL(traceUrl: string, attachment: {
body?: string;
}) {
if (attachment.sha1)
return 'sha1/' + attachment.sha1 + '?trace=' + traceUrl;
return 'file?path=' + attachment.path;
return 'sha1/' + attachment.sha1 + '?trace=' + encodeURIComponent(traceUrl);
return 'file?path=' + encodeURIComponent(attachment.path!);
}

View File

@ -66,7 +66,7 @@ export const SourceTab: React.FunctionComponent<{
try {
let response = await fetch(`sha1/src@${sha1}.txt`);
if (response.status === 404)
response = await fetch(`file?path=${file}`);
response = await fetch(`file?path=${encodeURIComponent(file)}`);
source.content = await response.text();
} catch {
source.content = `<Unable to read "${file}">`;