feat(html): render warning message when served off file:// (#9908)

packages/playwright-core/src/cli/cli.ts

@@ -248,13 +248,25 @@ if (!process.env.PW_CLI_TARGET_LANG) {
     require(playwrightTestPackagePath).addTestCommand(program);
     require(playwrightTestPackagePath).addShowReportCommand(program);
   } else {
-    const command = program.command('test').allowUnknownOption(true);
-    command.description('Run tests with Playwright Test. Available in @playwright/test package.');
-    command.action(async () => {
-      console.error('Please install @playwright/test package to use Playwright Test.');
-      console.error('  npm install -D @playwright/test');
-      process.exit(1);
-    });
+    {
+      const command = program.command('test').allowUnknownOption(true);
+      command.description('Run tests with Playwright Test. Available in @playwright/test package.');
+      command.action(async () => {
+        console.error('Please install @playwright/test package to use Playwright Test.');
+        console.error('  npm install -D @playwright/test');
+        process.exit(1);
+      });
+    }
+
+    {
+      const command = program.command('show-report').allowUnknownOption(true);
+      command.description('Show Playwright Test HTML report. Available in @playwright/test package.');
+      command.action(async () => {
+        console.error('Please install @playwright/test package to use Playwright Test.');
+        console.error('  npm install -D @playwright/test');
+        process.exit(1);
+      });
+    }
   }
 }
 

packages/playwright-core/src/web/htmlReport/htmlReport.css

@@ -446,6 +446,24 @@ a.no-decorations {
   }
 }
 
+.needs-server-message {
+  max-width: 500px;
+  margin: auto;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.bash-snippet {
+  margin-top: 10px;
+  font-family: monospace;
+  background: var(--color-fg-default);
+  color: var(--color-canvas-default);
+  border-radius: 6px;
+  padding: 20px;
+}
+
 .d-flex {
   display: flex !important;
 }

packages/playwright-core/src/web/htmlReport/htmlReport.tsx

@@ -49,6 +49,14 @@ export const Report: React.FC = () => {
 
   const filter = React.useMemo(() => Filter.parse(filterText), [filterText]);
 
+  if (window.location.protocol === 'file:') {
+    return <div className='needs-server-message'>
+      Playwright report needs to be served as a web page. Consider the following options to view it locally:
+      <div className='bash-snippet'>npx node-static playwright-report</div>
+      <div className='bash-snippet'>cd playwright-report &amp;&amp; python -m SimpleHTTPServer</div>
+    </div>;
+  }
+
   return <div className='vbox columns'>
     {!fetchError && <div className='flow-container'>
       <Route params=''>