Test di applicazioni web con Node.js e Playwright

Lo sviluppo di applicazioni moderne dipende da test automatizzati, che utilizzano framework di test per garantire che il codice sia pronto per essere inserito nei pacchetti dell'applicazione e per gli utenti finali. Per ottenere il massimo dai test, i test vengono scritti prima del codice e possono essere integrati nel controllo del codice sorgente e nelle pipeline CI / CD (integrazione continua / distribuzione continua). I test dovrebbero essere ovunque nel tuo processo di sviluppo. Hai bisogno di unire una richiesta pull? Testare il codice. Hai bisogno di impegnarti in un ramo? Testare il codice.

Ma c'è un'area in cui il test è difficile, soprattutto quando deve essere automatizzato. Sto parlando della necessità di interagire e testare interfacce utente dinamiche. Il test delle applicazioni Web è un processo complesso. Strumenti come Selenium e webdriver sono elementi chiave per automatizzare il contenuto della pagina e per assicurarti di testare sia gli elementi della pagina che l'applicazione nel suo insieme. Sono importanti se utilizzi browser headless in un'applicazione; Ho utilizzato una serie di script Python in un'applicazione Twitter costruita attorno al supporto di Selenium e webdriver di Chromium per automatizzare l'acquisizione di schermate da un'applicazione di monitoraggio degli aerei.

Presentazione di Playwright, il framework di test Web di Microsoft

Il selenio e il webdriver non sono gli unici strumenti per la creazione di test end-to-end per applicazioni web e browser moderni. Un'alternativa popolare è Puppeteer di Google, che gestisce sia l'invio di clic ai browser utilizzando le stesse tecniche degli strumenti di webdriver di Chrome sia l'accesso alle informazioni di debug tramite le API degli strumenti di sviluppo familiari. Un nuovo concorrente nella lega di test dei browser, Playwright è stato sviluppato da Microsoft come progetto open source ospitato su GitHub.

Playwright prende l'architettura di base di Puppeteer e la sposta più nella direzione di Selenium, aggiungendo un framework di automazione web e migliorando il modo in cui Puppeteer interagisce con il contenuto della pagina. È progettato per essere installato rapidamente e facilmente utilizzando la familiare sintassi npm, utilizzando JavaScript per creare automazione e test delle applicazioni Web. Funziona con più browser, con supporto per browser basati su Chromium come Edge, nonché Firefox e WebKit di Apple.

C'è un messaggio importante nell'elenco dei browser supportati da Playwright: non puoi usarlo con browser basati su Trident o EdgeHTML. Non è sorprendente. Microsoft ha preso un fermo impegno per la sua filiale Chromium nel suo nuovo Edge, e sia il vecchio Edge che Internet Explorer sono prossimi alla fine del ciclo di vita. Se utilizzerai Playwright per i test, stai prendendo la decisione di supportare solo i browser moderni tradizionali, quindi dovrai informare gli utenti cosa c'è in serbo per le versioni future di qualsiasi applicazione web che stai creando e supportando.

Testare il Web con Playwright

La capacità di eseguire test multipiattaforma su tutti i principali browser con lo stesso set di script è importante, così come il supporto per le versioni mobili dei siti (poiché le due principali piattaforme mobili utilizzano varianti dei loro browser desktop Playwright attualmente emula le visualizzazioni mobili nei browser desktop ). Altrettanto importante è il supporto per i test headless, in cui non si esegue il rendering di un'interfaccia utente del browser, ma si lavora invece con il modello di oggetti del documento generato (e un DOM ombra se si utilizzano funzionalità e tecnologie del browser moderne come i componenti Web).

Puoi utilizzare Playwright per automatizzare un browser in esecuzione sui desktop di sviluppo per ispezionare gli errori come parte del debug dell'applicazione, assicurandoti di eseguire costantemente tutti i percorsi di test durante la registrazione di ulteriori informazioni sulle prestazioni e l'osservazione di difetti dell'interfaccia utente non tracciati. In alternativa, può essere impostato come parte di un'azione GitHub per testare il nuovo codice come parte di un commit o di un'unione, automatizzando quello che altrimenti potrebbe essere un test manuale complesso.

Creazione e esecuzione di test di drammaturgo

Iniziare con Playwright è facile come configurare un nuovo progetto Node.js. Innanzitutto, installa Node.js sui tuoi dispositivi di prova. Poiché Playwright utilizza Node, è possibile eseguirlo sui PC di sviluppo o sui server nella pipeline CI / CD, rendendolo parte di un'azione GitHub che può essere utilizzata durante il processo di sviluppo del software. Tutto ciò di cui hai bisogno è un singolo comando npm, che installa il pacchetto Playwright così come i binari per tutti i browser supportati. Al termine dell'installazione, è possibile creare script di automazione utilizzando JavaScript o TypeScript per chiamare le API di Playwright. Queste sono tutte chiamate asincrone, quindi usa le dichiarazioni wait per gestire le loro promesse.

Il risultato è un modo molto chiaro di creare script, iniziando con l'apertura di un'istanza del browser headless, quindi navigando in una pagina prima di interagire con le istanze della pagina. È una buona idea creare inizialmente test con browser completi in modo da poter seguire come Playwright interagisce con la tua applicazione. Un'utile opzione slow-motion esegue le interazioni a una velocità più umana, semplificando la visualizzazione e la gestione dei test in esecuzione nei browser desktop. Una volta che un test è stato sottoposto a debug e funziona correttamente, è possibile spostarlo in modalità headless e quindi eseguirlo come parte di un'implementazione CI / CD.

Playwright include uno strumento CLI in grado di registrare le interazioni con i siti, generando automaticamente il JavaScript necessario per eseguire i test. L'opzione codegen è uno strumento utile per iniziare rapidamente con Playwright, mostrandoti il ​​codice che interagisce con gli elementi della pagina che puoi quindi utilizzare come modello per i tuoi test, copiando e modificando il codice generato se necessario. Il supporto TypeScript può aiutare a scrivere test più complessi, utilizzando una tipizzazione forte per gestire le variabili.

Lavorare con le applicazioni web in Playwright

Una delle funzionalità più utili di Playwright è il supporto per i contesti del browser. Questi ti consentono di eseguire azioni isolate in una singola istanza del browser, in modo da poter configurare diversi contesti per testare più interazioni contemporaneamente. All'interno di ogni contesto crei pagine, che sono meglio pensate come schede in un browser desktop. Le pagine supportano le proprie interazioni di clic e possono essere monitorate in parallelo. Una volta entrati in una pagina, puoi utilizzare diversi modi per trovare contenuti con cui interagire, utilizzando selettori CSS o XPath, attributi HTML o testo. Se hai familiarità con Selenium, dovresti trovare familiare la navigazione tra le pagine, con la possibilità aggiuntiva di attendere il caricamento completo di una pagina o il rendering del contenuto dinamico in un'applicazione web a pagina singola.

È possibile utilizzare le funzioni di valutazione per inviare parametri da e verso le pagine Web al codice JavaScript in esecuzione nel contesto della pagina. I risultati vengono restituiti a un runner di script di test in Node.js per l'analisi, fornendo gli strumenti necessari per superare o fallire i test. Playwright funziona con i devtools del browser F12, quindi può fare molto di più che interagire semplicemente con il contenuto della pagina. Può monitorare il traffico di rete, quindi puoi usarlo per testare sia l'autenticazione che il download di file, tra le altre cose. Può accedere alla console del browser e registrare errori che potrebbero non essere immediatamente visibili in una pagina sottoposta a rendering: ad esempio, il monitoraggio di problemi CSS o librerie JavaScript che non vengono caricate.

C'è molto in Playwright e rappresenta un'alternativa convincente a Selenium per testare le applicazioni del browser. Con Microsoft che aggiunge continuamente agli strumenti di sviluppo F12 in Edge, sarà interessante vedere Playwright aggiungere nuove funzionalità che espandono le opzioni per testare le applicazioni ospitate dal browser e le app Web progressive insieme alle applicazioni Web tradizionali.

Oltre JavaScript: test in Python e C #

Microsoft ha recentemente rilasciato una nuova versione di Playwright per gli sviluppatori che preferiscono creare test in Python piuttosto che JavaScript. È un'opzione utile, poiché molti framework di test Selenium esistenti sono basati su Python e ti consente di collegare il tuo codice di test a pacchetti analitici per un'analisi dei risultati più dettagliata utilizzando il ricco ecosistema di applicazioni e strumenti statistici di Python.

Playwright include associazioni di linguaggio per C #, quindi puoi portare Playwright in framework di test esistenti per ASP.NET o altri strumenti .NET. Non dovresti cambiare il modo in cui lavori per introdurre nuovi strumenti e Microsoft promette associazioni di lingue aggiuntive per Java e Ruby. C'è la prospettiva di altro in futuro, poiché la documentazione di Playwright afferma che è progettato per supportare le associazioni per qualsiasi lingua. Con tutto il codice su GitHub, c'è la possibilità di creare le proprie associazioni per la lingua di prova prescelta e inviarle come richiesta pull al progetto.