search

kiesraad / abacus

Abacus, software voor verkiezingsuitslagen en zetelverdeling
https://kiesraad-abacus.pages.dev
European Union Public License 1.2
8 stars 2 forks source link

Visual comparison tests using screenshots #61

Open praseodym opened 3 months ago

praseodym commented 3 months ago

To test how our frontend components render in the browser, we want to use visual comparisons using screenshots in Playwright.

One challenge is that browser rendering can be slightly different depending on the underlying platform (Windows, Linux, macOS) which will complicate the development experience for us (how do we create Linux screenshots from macOS?). A solution could be to create a GitHub Actions workflow to update the screenshots on demand (example).

jschuurk-kr commented 3 months ago

Ladle docs about snapshots with Playwright:

praseodym commented 3 months ago

We can also use the Playwright Docker images. Those images are Linux-based, even when running on macOS or Windows (Docker uses a Linux VM on those platforms). This way we can create Linux-based browser screenshots on all developer platforms, avoiding differences in browser rendering between different platforms.

praseodym commented 3 months ago

GitHub Actions also has Windows and macOS runners so if we're not using Docker, we could test all platforms in CI. Of course this would require three workflow runs and updating screenshots would be a bit more complicated, but it's feasible.