cherry-pick(#21935): chore: fix trace viewer backwards compat

microsoft · Mar 23, 2023 · 6b2858f · 6b2858f
1 parent a0b4bd1
commit 6b2858f
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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());
   loadedTraces.set(traceUrl, { traceModel, snapshotServer });

diff --git 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
diff --git 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
@@ -787,3 +787,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']);
+});