sand4rt / playwright-ct-web

Playwright Web component testing.
https://www.npmjs.com/package/@sand4rt/experimental-ct-web
MIT License
31 stars 2 forks source link

Errors when using an SVG #45

Open gregmunt opened 1 week ago

gregmunt commented 1 week ago

The software I am testing loads an SVG file containing symbols, then uses the SVG element to access them inside a web component.

When I take a snapshot of the component, no SVG appears. (The snapshot is just a white rectangle.)

If I run playwright with --ui, then open the snapshot (via the panel with Action/Before/After tabs) in an external window, then open the Dev Console in that window, I see the following:

SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at sw.bundle.js:4:68081
    at async ca.entryNames (sw.bundle.js:4:68251)
    at async Yr.load (sw.bundle.js:2:4184)
    at async ua (sw.bundle.js:4:69298)
    at async da (sw.bundle.js:4:70392)

Unsafe attempt to load URL 
http://localhost:3100/assets/svg/icons.svg from frame with URL http://[::1]:49847/trace/snapshot.html?r=http%3A%2F%2F%5B%3A%3A1%5D%3A49847%2Ftrace%2Fsnapshot%2Fpage%40e5046a2151760fa7e15a525f1b73b6c3%3Ftrace%3DC%253A%255Cgit%255Cgregmunt.com%255Ctest-results%255Ctest-component-button-bypa-709bd-ton-matches-stored-snapshot-chromium%255Ctrace.zip%26name%3Dafter%2540call%254025&trace=C%3A%5Cgit%5Cgregmunt.com%5Ctest-results%5Ctest-component-button-bypa-709bd-ton-matches-stored-snapshot-chromium%5Ctrace.zip. Domains, protocols and ports must match.

I don't know if this is specific to playwright-ct-web or if it applies to general playwright - so reporting here first.

Garbee commented 1 week ago

How exactly are you "loading the SVG file"? Looks like a fetch request is going out, which is expecting JSON to get returned and not other content. So it is failing for that reason.

Without seeing the way the load is occurring though makes it hard to know for sure. Which then makes it hard to help fix the issue.