fix: have more friendly playwright-report error when opening TV via file:// (#33239)

packages/trace-viewer/index.html

@@ -30,8 +30,25 @@
       <p>For more information, please see the <a href="https://aka.ms/playwright/trace-viewer-file-protocol">docs</a>.</p>
     </dialog>
     <script>
-      if (!/^https?:/.test(window.location.protocol))
-        document.getElementById("fallback-error").show();
+      if (!/^https?:/.test(window.location.protocol)) {
+        const fallbackErrorDialog = document.getElementById('fallback-error');
+        const isTraceViewerInsidePlaywrightReport = window.location.protocol === 'file:' && window.location.pathname.endsWith('/playwright-report/trace/index.html');
+        // Best-effort to show the report path in the dialog.
+        if (isTraceViewerInsidePlaywrightReport) {
+          const reportPath = (() => {
+            const base = 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}`;
+          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));
+        }
+        fallbackErrorDialog.show();
+      }
     </script>
   </body>
 </html>

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

@@ -2510,6 +2510,32 @@ for (const useIntermediateMergeReport of [true, false] as const) {
       await testFilePathLink.click();
       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': `
+          module.exports = {
+            projects: [{
+              name: 'chromium',
+              use: {
+                browserName: 'chromium',
+                trace: 'on',
+              }
+            }]
+          };
+        `,
+        'a.test.js': `
+          import { test } from '@playwright/test';
+          test('passes', ({ page }) => {});
+        `,
+      }, { reporter: 'dot,html' }, { PLAYWRIGHT_HTML_OPEN: 'never' });
+
+      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, '\\\\')}`);
+    });
   });
 }