Errors when using an SVG

[gregmunt]

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]

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.

[gregmunt]

It looks like nothing to do with using SVG. My web components are using this.getAttribute to get component attributes. However, the test is assigning attributes through properties of the class. I am not using Lit, but native web components.

In production code, in an HTML file, I am using <my-component name="value"></my-component>. In the class defining the component, I get the attribute value via this.getAttribute("name")

In test code, I use await mount(MyComponent, {props: {name: "value"}}). This calls the setter for the name property of a class instance. The attribute is undefined.

Is there something I am doing wrong, or not doing at all?

[Garbee]

It is going to entirely depend on the implementation of your component. Without a reproduction sample, we'd just be stabbing in the dark.

Something is clearly trying to make a network call to get the SVG. So it seems like it isn't imported correctly or bundled together for testing. Thus, you're hitting some side-effect in your component code.

So back to the original question, How are you loading the SVG file?