fix(trace-viewer): decode + quote report path in fallback “Copy Command” (file://) (#37710)

Author: nilgaar

packages/trace-viewer/index.html

@@ -36,13 +36,13 @@
         // Best-effort to show the report path in the dialog.
         if (isTraceViewerInsidePlaywrightReport) {
           const reportPath = (() => {
-            const base = window.location.pathname.replace(/\/trace\/index\.html$/, '');
+            const base = decodeURIComponent(window.location.pathname).replace(/\/trace\/index\.html$/, '');
             if (navigator.platform === 'Win32')
               return base.replace(/^\//, '').replace(/\//g, '\\\\');
             return base;
           })();
           const reportLink = document.createElement('div');
-          const command = `npx playwright show-report ${reportPath}`;
+          const command = `npx playwright show-report "${reportPath}"`;
           reportLink.innerHTML = `You can open the report via <code>${command}</code> from your Playwright project. <button type="button">Copy Command</button>`;
           fallbackErrorDialog.insertBefore(reportLink, fallbackErrorDialog.children[1]);
           reportLink.querySelector('button').addEventListener('click', () => navigator.clipboard.writeText(command));

tests/playwright-test/reporter-html.spec.ts

@@ -2943,6 +2943,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
       await expect(page.locator('.test-case-path')).toHaveText('Root describe');
     });
 
+
     test('should print a user-friendly warning when opening a trace via file:// protocol', async ({ runInlineTest, showReport, page }) => {
       await runInlineTest({
         'playwright.config.ts': `
@@ -2965,10 +2966,16 @@ for (const useIntermediateMergeReport of [true, false] as const) {
       const reportPath = path.join(test.info().outputPath(), 'playwright-report');
       await page.goto(url.pathToFileURL(path.join(reportPath, 'index.html')).toString());
       await page.getByRole('link', { name: 'View trace' }).click();
-      await expect(page.locator('#fallback-error')).toContainText('The Playwright Trace Viewer must be loaded over the http:// or https:// protocols.');
-      await expect(page.locator('#fallback-error')).toContainText(`npx playwright show-report ${reportPath.replace(/\\/g, '\\\\')}`);
+      await expect(page.locator('#fallback-error')).toContainText(
+          'The Playwright Trace Viewer must be loaded over the http:// or https:// protocols.'
+      );
+      const expectedReportPath = reportPath.replace(/\\/g, '\\\\');
+      await expect(page.locator('#fallback-error')).toContainText(
+          `npx playwright show-report "${expectedReportPath}"`
+      );
     });
 
+
     test('should not collate identical file names in different project directories', async ({ runInlineTest, page }) => {
       await runInlineTest({
         'playwright.config.ts': `