From 6b83631f24e598bdc094faeaedb6f72ab3decc15 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Thu, 23 Mar 2023 12:49:53 -0700
Subject: [PATCH] chore: fix trace viewer backwards compat (#21935)

---
 packages/trace-viewer/public/watch.webmanifest |   2 +-
 packages/trace-viewer/src/snapshotRenderer.ts  |   1 +
 packages/trace-viewer/src/sw.ts                |   7 ++++---
 packages/trace-viewer/src/traceModel.ts        |   6 +++---
 tests/assets/trace-1.31.zip                    | Bin 0 -> 3755 bytes
 tests/library/snapshotter.spec.ts              |   2 +-
 tests/library/trace-viewer.spec.ts             |   6 ++++++
 7 files changed, 16 insertions(+), 8 deletions(-)
 create mode 100644 tests/assets/trace-1.31.zip

diff --git a/packages/trace-viewer/public/watch.webmanifest b/packages/trace-viewer/public/watch.webmanifest
index ba5434d67b..60e40280d4 100644
--- a/packages/trace-viewer/public/watch.webmanifest
+++ b/packages/trace-viewer/public/watch.webmanifest
@@ -4,7 +4,7 @@
     "display": "browser",
     "start_url": "watch.html",
     "name": "Playwright Test",
-    "short_name": "Trace Viewer",
+    "short_name": "Playwright Test",
     "icons": [
         {
             "src": "icon-192x192.png",
diff --git a/packages/trace-viewer/src/snapshotRenderer.ts b/packages/trace-viewer/src/snapshotRenderer.ts
index 46a5496632..4868515451 100644
--- a/packages/trace-viewer/src/snapshotRenderer.ts
+++ b/packages/trace-viewer/src/snapshotRenderer.ts
@@ -104,6 +104,7 @@ export class SnapshotRenderer {
     const prefix = snapshot.doctype ? `<!DOCTYPE ${snapshot.doctype}>` : '';
     html = prefix + [
       '<style>*,*::before,*::after { visibility: hidden }</style>',
+      `<style>*[__playwright_target__="${this.snapshotName}"] { outline: 2px solid #006ab1 !important; background-color: #6fa8dc7f !important; }</style>`,
       `<style>*[__playwright_target__="${this._callId}"] { outline: 2px solid #006ab1 !important; background-color: #6fa8dc7f !important; }</style>`,
       `<script>${snapshotScript()}</script>`
     ].join('') + html;
diff --git a/packages/trace-viewer/src/sw.ts b/packages/trace-viewer/src/sw.ts
index 62984d76b9..d5d651c0b4 100644
--- a/packages/trace-viewer/src/sw.ts
+++ b/packages/trace-viewer/src/sw.ts
@@ -44,10 +44,11 @@ async function loadTrace(traceUrl: string, traceFileName: string | null, clientI
   } catch (error: any) {
     if (error?.message?.includes('Cannot find .trace file') && await traceModel.hasEntry('index.html'))
       throw new Error('Could not load trace. Did you upload a Playwright HTML report instead? Make sure to extract the archive first and then double-click the index.html file or put it on a web server.');
-    else if (traceFileName)
+    // eslint-disable-next-line no-console
+    console.error(error);
+    if (traceFileName)
       throw new Error(`Could not load trace from ${traceFileName}. Make sure to upload a valid Playwright trace.`);
-    else
-      throw new Error(`Could not load trace from ${traceUrl}. Make sure a valid Playwright Trace is accessible over this url.`);
+    throw new Error(`Could not load trace from ${traceUrl}. Make sure a valid Playwright Trace is accessible over this url.`);
   }
   const snapshotServer = new SnapshotServer(traceModel.storage(), sha1 => traceModel.resourceForSha1(sha1));
   loadedTraces.set(traceUrl, { traceModel, snapshotServer });
diff --git a/packages/trace-viewer/src/traceModel.ts b/packages/trace-viewer/src/traceModel.ts
index 9fa9524d9d..ada2e0a5a9 100644
--- a/packages/trace-viewer/src/traceModel.ts
+++ b/packages/trace-viewer/src/traceModel.ts
@@ -279,9 +279,9 @@ export class TraceModel {
       params: metadata.params,
       wallTime: metadata.wallTime || Date.now(),
       log: metadata.log,
-      beforeSnapshot: metadata.snapshots.find(s => s.snapshotName === 'before')?.snapshotName,
-      inputSnapshot: metadata.snapshots.find(s => s.snapshotName === 'input')?.snapshotName,
-      afterSnapshot: metadata.snapshots.find(s => s.snapshotName === 'after')?.snapshotName,
+      beforeSnapshot: metadata.snapshots.find(s => s.title === 'before')?.snapshotName,
+      inputSnapshot: metadata.snapshots.find(s => s.title === 'input')?.snapshotName,
+      afterSnapshot: metadata.snapshots.find(s => s.title === 'after')?.snapshotName,
       error: metadata.error?.error,
       result: metadata.result,
       point: metadata.point,
diff --git a/tests/assets/trace-1.31.zip b/tests/assets/trace-1.31.zip
new file mode 100644
index 0000000000000000000000000000000000000000..4c5a4e3f3719beea35cee2d365f69a286245733c
GIT binary patch
literal 3755
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
VQw|ou004;fYykm)%-yR7_z$XGKl1<p

literal 0
HcmV?d00001

diff --git a/tests/library/snapshotter.spec.ts b/tests/library/snapshotter.spec.ts
index cee7eaf94f..a06d8bb612 100644
--- a/tests/library/snapshotter.spec.ts
+++ b/tests/library/snapshotter.spec.ts
@@ -41,7 +41,7 @@ it.describe('snapshots', () => {
     await snapshotter.reset();
     const snapshot2 = await snapshotter.captureSnapshot(toImpl(page), 'call@2', 'snapshot@call@2');
     const html2 = snapshot2.render().html;
-    expect(html2.replace(`"call@2"`, `"call@1"`)).toEqual(html1);
+    expect(html2.replace(/call@2/g, `call@1`)).toEqual(html1);
   });
 
   it('should capture resources', async ({ page, toImpl, server, snapshotter }) => {
diff --git a/tests/library/trace-viewer.spec.ts b/tests/library/trace-viewer.spec.ts
index 2f0f968be9..faa3cb5f4b 100644
--- a/tests/library/trace-viewer.spec.ts
+++ b/tests/library/trace-viewer.spec.ts
@@ -800,3 +800,9 @@ test('should update highlight when typing', async ({ page, runAndTrace, server }
   await traceViewer.page.keyboard.type('button');
   await expect(snapshot.locator('x-pw-glass')).toBeVisible();
 });
+
+test('should open trace-1.31', async ({ showTraceViewer }) => {
+  const traceViewer = await showTraceViewer([path.join(__dirname, '../assets/trace-1.31.zip')]);
+  const snapshot = await traceViewer.snapshotFrame('locator.click');
+  await expect(snapshot.locator('[__playwright_target__]')).toHaveText(['Submit']);
+});