Introduzione a Playwright – Tutorial script per test E2E

/ Guida Playwright

Come abbiamo già visto nel nostro articolo di Introduzione ai Test Automatici, nel mondo dello sviluppo software la qualità del prodotto è fondamentale. Con l'aumento della complessità delle applicazioni web, è diventato essenziale avere strumenti di testing che siano sia potenti che facili da usare. In questo scenario, Playwright è emerso come uno dei migliori framework per l'implementazione di test End to End (E2E) sulle applicazioni web.

In questo articolo, esploreremo cos’è Playwright, le sue caratteristiche principali e come può migliorare il tuo flusso di lavoro di testing. Vedremo inoltre un semplice esempio pratico su come implementare uno script, eseguirlo ed analizzarne i risultati.

Cos’è Playwright?

Playwright è un framework open-source sviluppato da Microsoft che consente di automatizzare i test per le applicazioni web. Supporta vari browser, tra cui Chrome, Firefox e Safari, e permette di scrivere test in linguaggi come JavaScript o TypeScript, Python, Java e .NET. La sua capacità di interagire con le pagine web in modo simile a un utente reale rende Playwright uno strumento potente per garantire che le tue applicazioni funzionino come previsto.

Con Playwright è possibile simulare qualsiasi azione utente come clic, digitazione, e navigazione. E’ anche possibile gestire interazioni complesse (come l’upload di file) o eseguire test in parallelo riducendo significativamente il tempo necessario per l’esecuzione dei test.

Come installare Playwright?

Iniziare a lavorare con Playwright è semplice. E’ possibile installarlo tramite i classici gestori di pacchetti come ad esempio npm:

npm init playwright@latest

Dopo aver lanciato il comando in console, verranno richieste alcune informazioni preliminari come il linguaggio preferito o il nome della cartella in cui salvare i test. Di seguito le valorizzazioni che ho usato per il tutorial:

Per usare Playwright con linguaggi diversi da TypeScript o JavaScript, è necessario scaricare le relative versioni: Python; Jav; .NET.

Al termine del setup, all’interno del workspace troveremo i seguenti file:

• package.json: file di configurazione di Node che contenente i metadati del progetto e l’elenco delle dipendenze.
• package-lock.json: completa le funzionalità del package.json e serve per per bloccare le versioni esatte delle dipendenze installate.
• playwright.config.ts: file di configurazione principale di Playwright che viene utilizzato per personalizzare le impostazioni dei test, come i browser da usare, le opzioni di timeout, i percorsi delle cartelle di output e altro ancora.
• tests-examples/demo-todo-app.spec.ts: contiene alcuni esempi completi di test (può essere cancellato).
• tests/example.spec.ts: file con struttura di partenza per un generico test (può essere cancellato o usato come base per iniziare).

Come implementare il primo test?

Per il nostro primo test proveremo ad implementare una navigazione automatica su Wikipedia. Partiamo quindi creando un file wikitest.spec.ts nella cartella tests. All’avvio Playwright esegue di default tutti i test presenti sotto questa directory. E’ comunque possibile ridefinire la cartella mediante il file di configurazione playwright.config.ts.

import { test, expect } from '@playwright/test';

test('check title', async ({ page }) => {
  await page.goto('https://en.wikipedia.org/wiki/Main_Page');
  await page.waitForSelector('#searchInput', {state:'visible'});
  await page.fill('#searchInput', 'This is a test');
  await page.click('#searchform button')
  await page.waitForURL('**\/This_is_a_test')
  expect(await page.title()).toContain('This is a test');
});

Di seguito la spiegazione degli step eseguiti dal test:

• Apre l’URL relativo alla home page di Wikipedia;
• Attende che la pagina sia caricata e che la barra di ricerca sia visibile: la barra viene identificata mediante un selettore CSS che fa riferimento all’id searchInput;
• Digita “This is a test” nella barra di ricerca;
• Clicca sul tasto “Search” che viene identificato sempre mediante selettore CSS;
• Attende che venga caricata la pagina con il risultato della ricerca che dovrebbe essere https://en.wikipedia.org/wiki/This_is_a_test (i due * nell’URL indicano che può essere ignorata la prima parte);
• Una volta atterrato nella pagina viene verificato che il titolo sia “This is a test”.

Con questo semplice esempio abbiamo già imparato ad usare alcuni delle funzioni principali di Playwright:

• test: utilizzata per definire un caso di test mediante un nome descrittivo e una funzione che specifica cosa deve essere testato.
• goto: naviga un URL aprendolo nel browser.
• waitForSelector: attende che un elemento sia attivo in pagina identificandolo mediante selettore CSS. E’ inoltre possibile specificare una lista di opzioni di stato da verificare come ad esempio il fatto che l’elemento sia visibile.
• fill: scrive all’interno di un input identificato mediante selettore CSS.
• click: simula il click del mouse su un elemento della pagina identificato mediante selettore CSS.
• waitForURL: attende che una URL venga caricata.
• expect: indica quale dovrebbe essere il risultato atteso del test.
• title: restituisce il contenuto del tag title nella pagina html.
• toContain: indica che ci si aspetta che il risultato di quanto valutato dall’expect contenga un certo valore.

Esecuzione del test e analisi dei risultati

Il test può essere eseguito lanciando nel terminale il comando:

npx playwright test

Al termine dell’esecuzione troveremo un nuovo file test-results/.last-run.json contenente il risultato (passed o failed). Verrà inoltre generato un report dettagliato dell’esecuzione: playwright-report/index.html. Questo report può essere analizzato lanciando il comando:

npx playwright show-report

Come si nota dall’immagine, il test viene eseguito più volte verificandone l’esito con più versioni del browser. E’ possibile aggiungere o rimuovere i browser dal file di configurazione.

Web-UI

Di default Playwright esegue i test simulando il funzionamento del browser ma senza fornire evidenza della navigazione. Per poter debuggare è invece molto utile avere una registrazione grafica dell’esecuzione in modo da capire facilmente dove si blocca.

Per tale scopo, Playwright prevede la possibilità di attivare una Web-UI aggiungendo --ui al comando per l’esecuzione del test:

npx playwright test --ui

Eseguendo il test mediante il tasto “play” nella barra di sinistra, è possibile analizzare la sequenza temporale delle operazioni (timeline) visualizzando l’immagine corrispondente allo step e il punto del codice dove si è arrivati con l’esecuzione.

Playwright è uno strumento potente e versatile per il testing delle applicazioni web. Con il suo supporto per più browser, la possibilità di eseguire test in parallelo e le sue capacità di automazione completa, rappresenta una scelta eccellente per gli sviluppatori che desiderano garantire la qualità delle loro applicazioni.