In my last posts I talked about how to test Svelte components and NPM packages. My journey is not over. I have still to figure out how to test Electron applications.
The tools available
The main problem with testing Electron apps is the lack of established and updated frameworks. Virtually all guides recommend using Spectron. However, Spectron only supports Electron versions up to 13: newer versions do not work. And that makes it useless for my purposes.
The best alternative to Spectron is Playwright: a framework created and maintained by Microsoft, and moreover integrated with TypeScript.
Install Playwright
I keep working on my template, MEMENTO - Svelte, TailwindCSS, Electron and TypeScript. First I add Playwright to the project dependencies:
npm i -D playwright @playwright/test
Since I’m only interested in testing Electron I don’t install the other browsers (I don’t use npx playwright install because I don’t need it). But I add a script to package.json:
Create the first test: Electron starts
I start creating the first test. I create a test folder and inside it the base.test.ts file. The first thing I want to check is that the Electron app starts up and shows a window.
Reading the Playwright documentation, I can find two experimental classes: Electron and ElectronApplication.
I also need the Test class, to run the various tests and indicate what I expect to achieve.
The test I have to write is asynchronous: Electron opening is not always immediate so I want to be sure to perform the various operations only when they are actually possible. The first thing to do is to start Electron:
After starting the app, check if there is a visible window. I use electronApplication.evaluate(pageFunction[, arg])
This way I end up with a windowState object containing the state of the Electron window. I expect the window to be visible, the development window to be closed and the app not to crash. Translated into code:
To finish after running the tests I close Electron:
Now I put it all together and this is my first test:
To run it I use the command:
npm run test
Check the contents of the window
Well, the app starts up. The next check is the content. Since I will be running multiple tests in sequence on the same page I use test.describe
I can interact with the various elements of the page and check their HTML code. For example, I can make sure what the page title is:
Or I can check that the version number of the app is actually displayed:
Check the graphics
Beyond the content, a useful thing is the ability to check the look and feel of Electron. To do this I have to take screenshots of the window and compare them with a reference image.
Every time I run the test Playwright compares the screenshot of the window (saved in tests/screenshot/firstWindow.png) with the reference one. The reference image is created at the first start of the test and is immutable unless you explicitly indicate that you want to update it.
I add a script to package.json to change the reference images:
Customize Playwright
I can configure the overall behavior of Playwright by creating a playwright.config.ts file. I’m interested in customizing the sensitivity of toMatchSnapshot, so I write:
Record the tests
Another useful function of Playwright is the ability to record the various tests and play them on the screen. It can be used to check the behavior of the application and above all to understand what is not working. I need the Tracing class. With start and stop I can control the recording:
The recording is saved in a zip file. To be able to open it easily I add a script to package.json:
Useful links
Obviously this is just an overview of Playwright: I have recently started using this tool, full of options and possibilities. I haven’t found much material online, so I recommend starting with the official documentation:
- Getting started with Playwright
- Playwright: Page
- Playwright: Electron
- Playwright: ElectronApplication
- Playwright: Visual Comparisons
I found these repositories useful:
- cawa-93/vite-electron-builder
- microsoft/playwright - tests/electron
- spaceagetv/electron-playwright-example
And then, of course, there’s the repository with my template:
