Repository: microsoft/playwright
File: tests/library/snapshotter.spec.ts (TypeScript)

Code before:
        root.adoptedStyleSheets = [sheet2];
        document.body.appendChild(element);
      }
    });

    const renderer1 = await snapshotter.captureSnapshot(toImpl(page), 'call@1', 'snapshot@call@1');
    // Expect some adopted style sheets.
    expect(distillSnapshot(renderer1, page.url())).toContain('__playwright_style_sheet_');

    const renderer2 = await snapshotter.captureSnapshot(toImpl(page), 'call@2', 'snapshot@call@2');
    const snapshot2 = renderer2.snapshot();
    // 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, 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 __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();
  });
});

function distillSnapshot(snapshot, url: string, options: { distillTarget: boolean, distillBoundingRect: boolean } = { distillTarget: true, distillBoundingRect: true }) {
  let { html } = snapshot.render();
  if (options.distillTarget)
    html = html.replace(/\s__playwright_target__="[^"]+"/g, '');
  if (options.distillBoundingRect)
    html = html.replace(/\s__playwright_bounding_rect__="[^"]+"/g, '');
  return html
      .replace(/<style>\*,\*::before,\*::after { visibility: hidden }<\/style>/, '')
      .replace(/<script>[.\s\S]+<\/script>/, '')
      .replace(/<style>.*__playwright_target__.*?<\/style>/, '')
      .replace(/<BASE href="about:blank">/, '')
      .replace(new RegExp(`<BASE href="${url}">`), '')
      .replace(/<HTML>/, '')
      .replace(/<\/HTML>/, '')
      .replace(/<HEAD>/, '')
      .replace(/<\/HEAD>/, '')
      .replace(/<BODY>/, '')
      .replace(/<\/BODY>/, '').trim();
}


Review comment (suggestion):
this should do the same, but more idiomatic:

```suggestion
    await expect(newPage).not.toHaveURL(url, { timeout: 500 });
```

Code after:
        root.adoptedStyleSheets = [sheet2];
        document.body.appendChild(element);
      }
    });

    const renderer1 = await snapshotter.captureSnapshot(toImpl(page), 'call@1', 'snapshot@call@1');
    // Expect some adopted style sheets.
    expect(distillSnapshot(renderer1, page.url())).toContain('__playwright_style_sheet_');

    const renderer2 = await snapshotter.captureSnapshot(toImpl(page), 'call@2', 'snapshot@call@2');
    const snapshot2 = renderer2.snapshot();
    // 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, 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 __pw_link href="${url}">example link</A>`);

    const { html } = snapshot.render();
    const newPage = await browser.newPage();
    await newPage.setContent(html);
    await newPage.getByRole('link').click();
    await expect(newPage).not.toHaveURL(url, { timeout: 500 });
  });
});

function distillSnapshot(snapshot, url: string, options: { distillTarget: boolean, distillBoundingRect: boolean } = { distillTarget: true, distillBoundingRect: true }) {
  let { html } = snapshot.render();
  if (options.distillTarget)
    html = html.replace(/\s__playwright_target__="[^"]+"/g, '');
  if (options.distillBoundingRect)
    html = html.replace(/\s__playwright_bounding_rect__="[^"]+"/g, '');
  return html
      .replace(/<style>\*,\*::before,\*::after { visibility: hidden }<\/style>/, '')
      .replace(/<script>[.\s\S]+<\/script>/, '')
      .replace(/<style>.*__playwright_target__.*?<\/style>/, '')
      .replace(/<BASE href="about:blank">/, '')
      .replace(new RegExp(`<BASE href="${url}">`), '')
      .replace(/<HTML>/, '')
      .replace(/<\/HTML>/, '')
      .replace(/<HEAD>/, '')
      .replace(/<\/HEAD>/, '')
      .replace(/<BODY>/, '')
      .replace(/<\/BODY>/, '').trim();
}