From a22eaf86724ebd88f636c377332ad7eff65651bc Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Fri, 17 Feb 2023 18:13:45 -0800
Subject: [PATCH] chore: disable navigating off trace snapshot on hrefs
 (#21005)

---
 packages/trace-viewer/src/snapshotRenderer.ts | 9 ++++++++-
 tests/library/snapshotter.spec.ts             | 6 ++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/trace-viewer/src/snapshotRenderer.ts b/packages/trace-viewer/src/snapshotRenderer.ts
index 86fd4a0019..041587488e 100644
--- a/packages/trace-viewer/src/snapshotRenderer.ts
+++ b/packages/trace-viewer/src/snapshotRenderer.ts
@@ -67,9 +67,16 @@ export class SnapshotRenderer {
           builder.push('<', n[0]);
           // Never set relative URLs as <iframe src> - they start fetching frames immediately.
           const isFrame = n[0] === 'IFRAME' || n[0] === 'FRAME';
+          const isAnchor = n[0] === 'A';
           for (const [attr, value] of Object.entries(n[1] || {})) {
             const attrName = isFrame && attr.toLowerCase() === 'src' ? '__playwright_src__' : attr;
-            const attrValue = attr.toLowerCase() === 'href' || attr.toLowerCase() === 'src' ? rewriteURLForCustomProtocol(value) : value;
+            let attrValue = value;
+            if (attr.toLowerCase() === 'href' || attr.toLowerCase() === 'src') {
+              if (isAnchor)
+                attrValue = 'link://' + value;
+              else
+                attrValue = rewriteURLForCustomProtocol(value);
+            }
             builder.push(' ', attrName, '="', escapeAttribute(attrValue as string), '"');
           }
           builder.push('>');
diff --git a/tests/library/snapshotter.spec.ts b/tests/library/snapshotter.spec.ts
index 08f0dc3b44..f2be864c4e 100644
--- a/tests/library/snapshotter.spec.ts
+++ b/tests/library/snapshotter.spec.ts
@@ -244,6 +244,12 @@ it.describe('snapshots', () => {
     // Second snapshot should be just a copy of the first one.
     expect(snapshot2.html).toEqual([[1, 13]]);
   });
+
+  it('should not navigate on anchor clicks', async ({ page, toImpl, snapshotter }) => {
+    await page.setContent('<a href="https://example.com">example.com</a>');
+    const snapshot = await snapshotter.captureSnapshot(toImpl(page), 'snapshot');
+    expect(distillSnapshot(snapshot)).toBe('<A href="link://https://example.com">example.com</A>');
+  });
 });
 
 function distillSnapshot(snapshot, distillTarget = true) {