Gli ultimi miei articoli hanno parlato di come testare componenti e pacchetti npm. Ma il mio viaggio non è ancora concluso: mi manca da capire come testare applicazioni Electron. Il problema è nato dal mio tentativo di mantenere aggiornato il mio template MEMENTO - Svelte, TailwindCSS, Electron and TypeScript. E sopratutto dalla mia volontà di aggiungere alcuni dettagli: dopo un aggiornamento ha smesso di funzionare e ho fatta molta fatica a capire dove fosse il problema. Aggiungere vari test ai componenti mi è stato utile. Come si sta rivelando utile aggiungere dei test automatici ad Electron.
Gli strumenti disponibili
Il problema principale di testare app Electron è legato alla mancanza di framework consolidati e, sopratutto, aggiornati. Praticamente tutte le guide che si trovano in rete consigliano di usare Spectron. Il problema è che Spectron supporta solamente le versioni di Electron fino alla 13. E questo lo rende sostanzialmente inutile per i miei interessi.
L’alternativa migliore a Spectron è Playwright: un framework creato e mantenuto da Microsoft, e per di più integrato con TypeScript.
Installo Playwright
Continuo a lavorare sul mio template, non mi interessa partire da zero. Per prima cosa aggiungo Playwright alle dipendenze del progetto:
npm i -D playwright @playwright/test
Poiché mi interessa testare solamente Electron non installo gli altri browser (non uso npx playwright install perché non mi serve). Però aggiungo uno script a package.json:
Creo il primo test: Electron si avvia
Fatto questo posso cominciare a creare il primo test. Creo una cartella test e al suo interno il file base.test.ts. La prima cosa che voglio verificare è che l’app Electron si avvii e mostri una finestra.
Spulciando nella documentazione di Playwright saltano fuori due classi sperimentali: Electron ed ElectronApplication. Mi serviranno entrambe ma per il primo test è sufficiente la prima.
Mi serve inoltre la classe Test, per eseguire i vari test e indicare cosa mi aspetto di ottenere.
Il test che devo scrivere è asincrono: l’apertura di Electron non è sempre immediata quindi devo assicurarmi di eseguire le varie operazioni solo quando sono effettivamente possibili. La prima cosa da fare è avviare Electron:
Dopo aver avviato l’app intercetto se esiste una finestra visibile. Per farlo uso electronApplication.evaluate(pageFunction[, arg])
In questo modo mi ritrovo con un oggetto windowState contenente lo stato della finestra di Electron. Quello che mi aspetto è che la finestra si visibile, la finestra di sviluppo sia chiusa e che l’app non sia in crash. Tradotto in codice:
Per finire dopo aver eseguito i test chiudo Electron:
Adesso metto tutto assieme e questo è il mio primo test:
Per eseguirlo uso il comando:
npm run test
Controllo il contenuto della finestra
Bene, l’app si avvia. Il controllo successivo è verificare il contenuto. Poiché eseguirò più test in sequenza sulla stessa pagina uso test.describe
Posso interagire con i vari elementi della pagina e verificare il loro contento. Per esempio, posso assicurarmi che il titolo della pagina sia quello che voglio io:
Oppure controllare che il numero di versione dell’app sia effettivamente visualizzato:
Verifico la grafica dell’applicazione
Al di là del contenuto, una cosa che mi è utile è la possibilità di verificare l’aspetto grafico di Electron. Per farlo devo scattare degli screenshot della finestra e confrontarli con un’immagine di riferimento.
Ogni volta che eseguo il test Playwright confronta lo screenshot della finestra (salvato in tests/screenshot/firstWindow.png) con quello di riferimento. L’immagine di riferimento viene creata al primo avvio del test ed è immutabile a meno di non indicare esplicitamente di volerla aggiornare.
Per cambiare le immagini di riferimento aggiungo uno script a package.json:
Personalizzo Playwright
Posso configurare il comportamento complessivo di Playwright creando un file playwright.config.ts. A me interessa personalizzare la sensibilità di toMatchSnapshot, quindi scrivo:
Registro i test
Un’altra funzione utile di Playwright è la possibilità di registra i vari test e di riprodurli a video. Può servire per verificare il comportamento dell’applicazione e sopratutto capire cosa non sta funzionando. Mi serve la classe Tracing. Con start avvio la registrazione, con stop la blocco:
La registrazione viene salvata in un file zip. Per poterlo aprire con semplicità aggiungo uno script a package.json:
Link utili
Ovviamente questa è solo una panoramica di Playwright: ho cominciato da poco ad approfondire questo strumento, ricco di opzioni e di possibilità. In rete non ho trovato molto materiale, consiglio quindi di partire dalla documentazione ufficiale:
- Getting started with Playwright
- Playwright: Page
- Playwright: Electron
- Playwright: ElectronApplication
- Playwright: Visual Comparisons
Ho trovato inoltre utili questi repository:
- cawa-93/vite-electron-builder
- microsoft/playwright - tests/electron
- spaceagetv/electron-playwright-example
E poi, ovviamente, c’è il repository con il mio template:
