feat(trace): support loading trace from zip (#6551)

Author: pavelfeldman

src/cli/cli.ts

@@ -18,12 +18,14 @@
 
 /* eslint-disable no-console */
 
+import extract from 'extract-zip';
+import fs from 'fs';
+import os from 'os';
 import path from 'path';
+import rimraf from 'rimraf';
 import program from 'commander';
-import os from 'os';
-import fs from 'fs';
 import { runDriver, runServer, printApiJson, launchBrowserServer, installBrowsers } from './driver';
-import { showTraceViewer } from '../server/trace/viewer/traceViewer';
+import { TraceViewer } from '../server/trace/viewer/traceViewer';
 import * as playwright from '../..';
 import { BrowserContext } from '../client/browserContext';
 import { Browser } from '../client/browser';
@@ -475,3 +477,31 @@ function commandWithOpenOptions(command: string, description: string, options: a
       .option('--user-agent <ua string>', 'specify user agent string')
       .option('--viewport-size <size>', 'specify browser viewport size in pixels, for example "1280, 720"');
 }
+
+export async function showTraceViewer(tracePath: string, browserName: string) {
+  let stat;
+  try {
+    stat = fs.statSync(tracePath);
+  } catch (e) {
+    console.log(`No such file or directory: ${tracePath}`);
+    return;
+  }
+
+  if (stat.isDirectory()) {
+    const traceViewer = new TraceViewer(tracePath, browserName);
+    await traceViewer.show();
+    return;
+  }
+
+  const zipFile = tracePath;
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), `playwright-trace`));
+  process.on('exit', () => rimraf.sync(dir));
+  try {
+    await extract(zipFile, { dir: dir });
+  } catch (e) {
+    console.log(`Invalid trace file: ${zipFile}`);
+    return;
+  }
+  const traceViewer = new TraceViewer(dir, browserName);
+  await traceViewer.show();
+}

src/server/trace/viewer/traceViewer.ts

@@ -29,7 +29,7 @@ import { ProgressController } from '../../progress';
 
 const fsReadFileAsync = util.promisify(fs.readFile.bind(fs));
 
-class TraceViewer {
+export class TraceViewer {
   private _server: HttpServer;
   private _browserName: string;
 
@@ -144,8 +144,3 @@ class TraceViewer {
     await page.mainFrame().goto(internalCallMetadata(), urlPrefix + '/traceviewer/traceViewer/index.html');
   }
 }
-
-export async function showTraceViewer(traceDir: string, browserName: string) {
-  const traceViewer = new TraceViewer(traceDir, browserName);
-  await traceViewer.show();
-}