Svelte & Visual Regression Test

Samuele
6 min readOct 24, 2021

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

--

--

Samuele

I'm a hobby programmer, experimenting with Svelte, Javascript, Construct 3 and magic tools