percy / percy-playwright

Playwright client library for visual testing with Percy
MIT License
16 stars 6 forks source link

Controlling asset discovery for relative URLs on pages that use the History API #175

Open Conduitry opened 1 year ago

Conduitry commented 1 year ago

I'm using Playwright and Percy on an app that uses the HTML5 History API to navigate between pages. It also contains some relative <link href="...">URLs for loading external CSS files. In browsers, these are resolved, once, when the page loads. If I make use of history.pushState() to trigger client-side-only navigations around the app, the browser doesn't try to re-resolve these relative to the new URL. However, if after such a navigation, I try to take a Percy snapshot, during asset discovery, the (original) serialized DOM has its relative CSS URLs resolved against the new URL, because that's what page.url() returns.

I have a hacky workaround for this in my own project right now, but I'm wondering whether this is something that it would be possible for this package to handle in some way. Even being able to pass in url as an option to percySnapshot() would help, but that's impossible right now, because it will get overridden by page.url(). Even better would be to determine (somehow) what URL the asset discovery phase should be resolving its relative URLs against, but I'm not sure that Playwright exposes such an API or how that would work.

samarsault commented 1 year ago

Can you share a reproducible example for this?

Conduitry commented 1 year ago

Sure, I've just pushed one to https://github.com/Conduitry-Repros/percy-playwright-175

github-actions[bot] commented 1 year ago

This issue is stale because it has been open for more than 14 days with no activity. Remove stale label or comment or this will be closed in 14 days.

Conduitry commented 1 year ago

Comment to remove stale label.