Svelte & Visual Regression Test

I am more and more comfortable with test-driven development (TDD). Editing your code is easier by knowing right away when something is wrong. Of course I don’t know everything yet. A problem I had to face is related to unwanted changes in the graphic aspect of a web page. To solve this problem I had to learn how to perform Visual Regression Tests.

Choose the tools

For a general overview I recommend reading this article by Leonardo Giroto, it is from some time ago but it is well written. For what concerns my problem, however, I have evaluated 3 options. In summary, I have considered cypress, Puppeteer and Playwright. They are all valid tools but only Playwright allows you to easily interface with Electron. I know, I know, this is my need: the project I have in mind includes a part built with Electron so this feature is fundamental for me.

It’s time to get started with the code. So I pick up my Svelte Component Package Starter template and start by adding Playwright:

npm i -D playwright @playwright/test

And then I install the browsers to use for testing

npx playwright install

For a basic use I don’t need anything else but I prefer to continue using Jest. I need an additional package: Jest Image Snapshot:

npm i --save-dev jest-image-snapshot @types/jest-image-snapshot

Put the old tests in order

It is a good practice to keep e2e (End to End) tests separate from unit tests. So I slightly modify the structure of my template and create the two directories src/__tests__/unit and src src/__tests__/e2e:

src
├── __tests__
│   ├── unit
│   │   ├── ChromaColors.test.ts
│   │   ├── GridColors.test.ts
│   │   └── Slider.test.ts
│   └── e2e
├── lib
├── routes
├── app.css
├── app.html
└── global.d.ts

I copy the previous tests into unit.

The first problem is that by running npm run test I am running both unit tests and e2e tests. I then modify package.json to keep the two tests separate:

{
  // ...
  "scripts": {
    // ...
    "test": "cross-env TAILWIND_MODE=build jest --runInBand ./src/__tests__/unit",
    "test:e2e": "jest…