fix(trace-viewer): Preserve urls in snapshot

packages/trace-viewer/src/sw/snapshotRenderer.ts

@@ -129,7 +129,7 @@ export class SnapshotRenderer {
           }
           let attrValue = value;
           if (isAnchor && attr.toLowerCase() === 'href')
-            attrValue = 'link://' + value;
+            result.push(' ', '__pw_link');
           else if (attr.toLowerCase() === 'href' || attr.toLowerCase() === 'src' || attr === kCurrentSrcAttribute)
             attrValue = rewriteURLForCustomProtocol(value);
           result.push(' ', attrName, '="', escapeHTMLAttribute(attrValue), '"');
@@ -371,6 +371,11 @@ function snapshotScript(viewport: ViewportSize, ...targetIds: (string | undefine
         visit(shadowRoot);
       }
 
+      for (const element of root.querySelectorAll('[__pw_link]')) {
+        element.addEventListener('click', event => { event.preventDefault(); });
+        element.removeAttribute('__pw_link');
+      }
+
       if ('adoptedStyleSheets' in (root as any)) {
         const adoptedSheets: CSSStyleSheet[] = [...(root as any).adoptedStyleSheets];
         for (const element of root.querySelectorAll(`template[__playwright_style_sheet_]`)) {

tests/library/snapshotter.spec.ts

@@ -261,10 +261,17 @@ it.describe('snapshots', () => {
     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>');
+  it('should not navigate on anchor clicks', async ({ page, toImpl, snapshotter, browser }) => {
+    const url = 'http://localhost/';
+    await page.setContent(`<a href="${url}">example link</a>`);
     const snapshot = await snapshotter.captureSnapshot(toImpl(page), 'call@1', 'snapshot@call@1');
-    expect(distillSnapshot(snapshot, page.url())).toBe('<A href="link://https://example.com">example.com</A>');
+    expect(distillSnapshot(snapshot, page.url())).toBe(`<A __pw_link href="${url}">example.com</A>`);
+
+    const { html } = snapshot.render();
+    const newPage = await browser.newPage();
+    await newPage.setContent(html);
+    await newPage.getByRole('link').click();
+    await expect(newPage.waitForURL(url, { timeout: 500 })).rejects.toThrow();
   });
 });
 

tests/library/trace-viewer.spec.ts

@@ -1194,6 +1194,20 @@ test('should pick locator', async ({ page, runAndTrace, server }) => {
   await expect(traceViewer.page.locator('.cm-wrapper').last()).toContainText(`- button "Submit"`);
 });
 
+test('should generate aria snapshot with unaltered urls', async ({ page, runAndTrace, server }) => {
+  const traceViewer = await runAndTrace(async () => {
+    await page.goto(server.EMPTY_PAGE);
+    await page.setContent('<a href="https://example.com">Example link</a>');
+  });
+  const snapshot = await traceViewer.snapshotFrame('Set content');
+  await traceViewer.page.getByTitle('Pick locator').click();
+  await snapshot.getByRole('link').click();
+  await expect(traceViewer.page.locator('.cm-wrapper').last()).toContainText(`
+    - link "Example link":
+      - /url: https://example.com
+  `);
+});
+
 test('should update highlight when typing locator', async ({ page, runAndTrace, server }) => {
   const traceViewer = await runAndTrace(async () => {
     await page.goto(server.EMPTY_PAGE);