Visual Regression Testing Using SSR

[ManAnRuck]

Hi everyone,

I’m currently working on a project using the vanilla-extract library and exploring ways to perform visual regression tests on my styled components without having to spin up a full server.

My Plan:

I’m planning to use ReactDOMServer.renderToString to render my components on the server side. Then, instead of launching a server, I’ll load the generated HTML directly into Playwright using await page.setContent(html). This should streamline the testing process and simplify the setup.

A few specific questions:

1. CSS Extraction:
   How can I reliably extract the generated CSS when rendering my components with ReactDOMServer.renderToString? Are there any best practices or pitfalls I should be aware of?
2. Integration with Playwright:
   Has anyone used this approach (using Playwright’s page.setContent(html)) for visual regression testing? Any tips or gotchas when combining it with SSR-rendered content from vanilla-extract?
3. SSR and Testing Workflows:
   Are there recommended patterns or tooling to integrate SSR-based visual regression testing with vanilla-extract, especially in a headless testing environment?

Any advice, sample code, or pointers to documentation would be greatly appreciated. I’m excited to see how others have tackled similar workflows and any recommendations you might have.