Playwright – Registrare test di navigazione con Visual Studio Code

/ Guida Playwright

Come abbiamo già visto in precedenza, Playwright è un ottimo strumento per l'implementazione di test automatici E2E. Il tool dispone di numerose funzionalità che permettono di scrivere i test in maniera semplice e con poche righe di codice. Ad aumentarne notevolmente la versatilità e la facilità di utilizzo è la sua integrazione nativa con l'ambiente di sviluppo Visual Studio Code.

In questo articolo analizzeremo nel dettaglio le potenzialità del plugin Playwright Test for VSCode vedendo come registrare automaticamente le navigazioni e come debuggare i test.

Installazione di Playwright Test for VSCode

Prima di tutto, è necessario installare il plugin all’interno del proprio ambiente di sviluppo seguendo i seguenti passaggi:

1. Aprire VSCode.
2. Andare su Extensions (icona presente nel menù di sinistra).
3. Nella barra di ricerca delle estensioni, digitare “Playwright Test”.
4. Selezionare l’estensione “Playwright Test for VSCode” sviluppata da Microsoft.
5. Cliccare su Install per aggiungere il plugin.

Una volta installata l’estensione, l’ambiente sarà pronto iniziare a scrivere, registrare e debuggare i test.

Registrare navigazioni di test

Per usare la funzionalità di registrazione è sufficiente aprire il tab relativo al plugin nel menù di sinistra (icona della provetta) e cliccare sul tasto “Record New”:

Avviando la registrazione, verrà aperta in automatico una finestra del browser dove sarà visibile in alto una barra degli strumenti con cinque icone:

• Record: permette di stoppare la registrazione;
• Pick locator: serve per selezionare elementi della pagina e visualizzare il relativo selettore (vedremo in seguito come usarlo);
• Assert visibility: aggiunge uno step al test per verificare che un elemento della pagina sia visibile;
• Assert text: aggiunge uno step al test per verificare la presenza di un testo;
• Assert value: aggiunge uno step al test per verificare la presenza di un determinato valore in un input;

Per registrare il nostro primo test, faremo una navigazione molto simile a quella che abbiamo implementato manualmente nell’articolo precedente:

• Apriamo l’home page di Wikipedia (https://en.wikipedia.org/wiki/Main_Page);
• Clicchiamo sulla barra di ricerca e digitiamo “This is a test”;
• Clicchiamo sul tasto “Search”;
• Una volta arrivati sulla pagina con il risultato della ricerca, utilizziamo il tool di “Assert test” per selezionare il titolo della pagina come nell’immagine seguente. Si aprirà un popup che chiederà di confermare il contenuto del test da testare.

Al termine della procedura, cliccando sul testo con l’icona della registrazione il test verrà salvato e si tornerà alla schermata di Visual Studio Code dove sarà possibile visualizzare il risultato.

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

test('test', async ({ page }) => {
  await page.goto('https://en.wikipedia.org/wiki/Main_Page\'');
  await page.getByPlaceholder('Search Wikipedia').click();
  await page.getByPlaceholder('Search Wikipedia').fill('This is a test');
  await page.getByRole('button', { name: 'Search' }).click();
  await expect(page.locator('#firstHeading')).toContainText('This is a test');
});

Modificare le navigazioni registrate

Per modificare una navigazione registrata in precedenza è sufficiente posizionarsi nel punto del codice in cui si vuole fare la modifica e premere il testo “Invio” per creare una nuova riga. A questo punto, cliccando sulla funzionalità “Record at the cursor” sarà possibile spostarsi nuovamente nel browser per registrare ulteriori step.

Se si preferisce modificare lo script manualmente è comunque possibile usare la funzionalità di “Pick locator” per recuperare i selettori dalla pagina web. Una volta selezionato l’elemento in pagina sarà possibile tornare su VS Code per visualizzare e copiare l’ID:

Eseguire e debuggare i test

Dal menù “Test Explorer” è possibile selezionare i test implementati ed eseguirli o debuggarli mediante gli appositi pulsanti:

La funzionalità di debugging risulta molto utile per identificare eventuali problemi nell’esecuzione dei test in quanto permette di inserire dei breakpoint nel codice ed eseguire le istruzioni una alla volta.

L’integrazione di Playwright con Visual Studio Code tramite l’estensione “Playwright Test for VSCode” rende l’esecuzione, la registrazione e il debug dei test un processo semplice e intuitivo. Grazie a queste funzionalità, gli sviluppatori possono risparmiare tempo nella scrittura manuale dei test e velocizzare il ciclo di sviluppo grazie agli strumenti di debug avanzati.