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/testAnd then I install the browsers to use for testing
npx playwright installFor a basic use I don’t need anything else but I prefer to continue using Jest. I need an additional package: Jest Image Snapshot:
