From c6360e754c4fc8b937886165004ae4e764d750f6 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Sun, 31 Oct 2021 16:36:05 -0800
Subject: [PATCH] cherry-pick(#9908): feat(html): render warning message when
 served off file://

---
 packages/playwright-core/src/cli/cli.ts       | 26 ++++++++++++++-----
 .../src/web/htmlReport/htmlReport.css         | 18 +++++++++++++
 .../src/web/htmlReport/htmlReport.tsx         |  8 ++++++
 3 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/packages/playwright-core/src/cli/cli.ts b/packages/playwright-core/src/cli/cli.ts
index c1c99ade79..da48be4c7f 100755
--- a/packages/playwright-core/src/cli/cli.ts
+++ b/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);
+      });
+    }
   }
 }
 
diff --git a/packages/playwright-core/src/web/htmlReport/htmlReport.css b/packages/playwright-core/src/web/htmlReport/htmlReport.css
index 9e7631a0fc..5c289d1f31 100644
--- a/packages/playwright-core/src/web/htmlReport/htmlReport.css
+++ b/packages/playwright-core/src/web/htmlReport/htmlReport.css
@@ -466,6 +466,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;
+}
+
 @media only screen and (max-width: 600px) {
   .chip-header {
     border-radius: 0 !important;
diff --git a/packages/playwright-core/src/web/htmlReport/htmlReport.tsx b/packages/playwright-core/src/web/htmlReport/htmlReport.tsx
index 42d773ee41..282520bf0d 100644
--- a/packages/playwright-core/src/web/htmlReport/htmlReport.tsx
+++ b/packages/playwright-core/src/web/htmlReport/htmlReport.tsx
@@ -42,6 +42,14 @@ export const Report: React.FC = () => {
     })();
   }, [report, expandedFiles]);
 
+  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=''>