Playwright è una libreria di testing end-to-end sviluppata da Microsoft con cui è possibile creare e automatizzare i test per garantire che le applicazioni Web funzionino nel modo previsto, in diversi Web browser e sistemi operativi.
Supporta diversi linguaggi di programmazione (Typescript, .NET, Java, …) e piattaforme (Windows, Linux, macOS) e può essere integrato nelle pipeline di CI/CD automatizzando il processo di testing.

Playwright, rispetto ad altri framework, ha alcuni vantaggi non trascurabili:

Velocità ed Affidabilità

Permette l’esecuzione di test in parallelo su più browser con una configurazione minimale.
Supporta la modalità headless (senza interfaccia grafica) per esecuzioni più rapide e fluide.

Supporto Multi-Browser

Compatibile con Chromium, Firefox, WebKit e offre funzionalità per il testing in ambiente mobile.

Automazione Avanzata

Simula interazioni complesse come drag-and-drop, gestione di file e manipolazione della rete.
Consente il testing delle API, estendendo il controllo oltre l’interfaccia utente.

Test Resilienti

Implementa un sistema di auto-retry, riducendo i fallimenti causati da caricamenti lenti.
Supporta condizioni di attesa avanzate, evitando l’uso di sleep() e migliorando la stabilità dei test.

Facilità di Debug

Registra screenshot e video dei test, semplificando l’analisi degli errori.
Include una modalità debug interattiva, che permette di fermare l’esecuzione e ispezionare lo stato dell’applicazione in tempo reale.

Integrazione con CI/CD

Compatibile con strumenti di continuous integration come GitHub Actions, Jenkins e GitLab CI, permettendo di automatizzare i test ad ogni rilascio.

In questo articolo utilizzeremo la libreria con Typescript per il testing di un’applicazione web, aiutandoci con il plugin apposito di PlayWright installabile dallo store di VS Code

Funzionalità dello strumento

Registrazione dei passi

È possibile iniziare a registrare un test e i suoi passi selezionando Testing > Record New, dove verrà avviata la registrazione delle azioni mentre si naviga nell’applicazione.

Figura 1: Sezione Testing VS Code

A questo punto, verrà avviato CodeGen di Playwright, supportato dal plugin per VS Code, per semplificare la creazione automatizzata dei test. Questo strumento offre diverse funzionalità, tra cui:

Un browser interattivo che registra automaticamente le azioni eseguite dall’utente.
Un file di test generato in VS Code, contenente le istruzioni corrispondenti alle azioni registrate.
Una barra degli strumenti integrata nel browser, utile per l’analisi degli elementi dell’applicazione web.

Tra le funzionalità più rilevanti della toolbar segnaliamo:

Pick-locator: permette di selezionare un elemento della pagina e generare in VS Code un’istruzione JavaScript per richiamarlo nei test.
Assert (visibility, text, value): consente di creare automaticamente in VS Code un’istruzione JavaScript per verificare proprietà specifiche di un elemento, come la visibilità, il testo o il valore.

Figura 2: Vista con CodeGen in esecuzione

Per terminare la registrazione e chiudere lo strumento CodeGen è possibile utilizzare il tasto di recording disponibile sulla barra degli strumenti

Figura 3: Barra degli strumenti e tasto recording

Esecuzione di un test

Per avviare l’esecuzione di un test, è possibile utilizzare:

L’interfaccia grafica fornita dal plugin di VS Code, che semplifica l’esecuzione e il debug dei test.
La CLI di Playwright, per un maggiore controllo e l’integrazione nei processi di automazione.

All’interno della sezione delle impostazioni di esecuzione, è possibile configurare parametri specifici per personalizzare il comportamento dei test, ottimizzando così l’ambiente di testing in base alle esigenze del progetto.

Figura 4: impostazioni di Playwright su VS Code

Projects: consente di selezionare i browser su cui eseguire i test.
Settings: permette di configurare l’esecuzione scegliendo tra diverse modalità:
- - Headed: visualizza il browser durante l’esecuzione, consentendo di osservare le azioni in tempo reale.
  - Trace Viewer: abilita uno strumento avanzato per analizzare in dettaglio le azioni eseguite.
  - Headless: esegue i test in modalità silenziosa, senza aprire il browser.
Tools: fornisce strumenti aggiuntivi per l’analisi e il debugging dei test.
- - Pick Locator: permette di identificare e selezionare un elemento nell’applicazione web, come visto nella fase di registrazione.
  - Record New: avvia la registrazione di un nuovo test.
  - Record at Cursor: registra le azioni nel file attivo, inserendole a partire dal cursore.
  - Reveal Test Output: apre la pagina contenente i risultati dell’ultima esecuzione dei test.

Quindi per effettuare le esecuzioni:

Figura 5: Test explorer di VS Code

È possibile utilizzare la sezione Explorer di VS Code per eseguire i test, con la possibilità di attivare la modalità debug e impostare breakpoint. Questo consente di eseguire il codice passo dopo passo, monitorando l’esecuzione e analizzando le variabili in tempo reale.

Figura 6: tasti di esecuzione sul test

Cliccando con il tasto destro sui tasti, vengono visualizzate opzioni aggiuntive, come la possibilità di avviare la modalità debug.

Figura 7: esempio di esecuzione in VS Code

Automazione del testing con Gitlab CI/CD

I test possono essere integrati all’interno della repository di una web app. In combinazione con il deploy su un ambiente designato, è possibile creare un job che esegua automaticamente i test disponibili sull’endpoint.

  # Variables  
  variables:  
    BASE_URL: $BASE_URL # variable defined in GitLab Project CI/CD Settings  
  # Define the stages for your pipeline  
  stages:  
    - test  
  
  # Define the job for running Playwright tests  
  run_playwright_tests:  
    stage: test  
    image: mcr.microsoft.com/playwright:v1.39.0-jammy  

    script:  
      - npm ci # Install project dependencies  
      - npx playwright test # Run your Playwright tests   
      - echo "https://$CI_PROJECT_NAMESPACE.gitlab.io/-/$CI_PROJECT_NAME/-/jobs/$CI_JOB_ID/artifacts/playwright-report/index.html" # print the URL to view the results  

    allow_failure: true   

# Publish Playwright test results as artifacts and keep for 2 days  

  artifacts:  
    when: always  
    paths:  
      - playwright-report  
    expire_in: 2 days

Reporting custom dei risultati con la funzionalità Reporter

Playwright offre la possibilità di implementare un Reporter personalizzato, diverso da quello di default, per la gestione avanzata dei risultati degli step del test. Il Reporter è un componente della libreria che riceve tutti i dati relativi all’esecuzione del test, consentendo un’analisi e un reporting su misura.

  import { FullConfig, FullResult, Reporter, Suite, TestCase, TestError, TestResult, TestStep } from "playwright/types/testReporter";

  class TestResultReporter implements Reporter {
    onBegin(config: FullConfig, suite: Suite): void {
    }
    onEnd(result: FullResult): Promise<{ status?: FullResult["status"]; } | undefined | void> | void {
    }
    onError(error: TestError): void {
    }
    onExit(): Promise<void> {
      return new Promise(() => {});
    }
    onStdErr(chunk: string | Buffer, test: void | TestCase, result: void | TestResult): void {
    }
    onStdOut(chunk: string | Buffer, test: void | TestCase, result: void | TestResult): void {
    }
    onStepBegin(test: TestCase, result: TestResult, step: TestStep): void {
    }
    onStepEnd(test: TestCase, result: TestResult, step: TestStep): void {
    }
    onTestBegin(test: TestCase, result: TestResult): void {
    }
    onTestEnd(test: TestCase, result: TestResult): void {
    }

    printsToStdio(): boolean {
      return true;
    }
  }

Il Reporter può poi essere utilizzato specificandolo nel file di configurazione playwright.config.ts, dove è possibile configurare il tipo di reporting desiderato e integrarlo con altre funzionalità personalizzate.

import { defineConfig } from '@playwright/test';
export default defineConfig(
{  
   reporter: './my-awesome-reporter.ts',
 }
);

Ad esempio, all’interno delle diverse callback, è possibile inviare i risultati direttamente a un database tramite query, consentendo una gestione centralizzata e una facile consultazione dei dati di test.

  onTestEnd(test: TestCase, result: TestResult): void {
    const connection = await mysql.createConnection(dbConfig);  // Crea una connessione al database
      const testCaseResult = await connection.execute(
  `INSERT INTO test_cases (test_case_id, test_description, test_results, browser_name, execution_time, execution_error, execution_date, created_at, updated_at) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`,

      [
          test.id || null,
          test.title || null,
          test.results,
          test.browserName || null,
          result.duration,
          result.error || null,
          new Date(),
          new Date(),
          new Date()
        ]
      );
    ...
  }

Conclusione

Lo strumento è stato impiegato con successo in diversi casi d’uso di testing, tra cui:

Garantire la non regressione delle funzionalità esistenti durante l’introduzione di nuove caratteristiche.
Eseguire test di affidabilità nel tempo tramite l’utilizzo di test ciclici.
Supportare lo sviluppo di nuove funzionalità seguendo un approccio test-driven.

Questi utilizzi ci hanno permesso di migliorare l’affidabilità dei test, ridurre i tempi di verifica e simulare scenari reali d’uso in modo efficace. Lo strumento si è rivelato particolarmente utile per garantire la qualità delle applicazioni web complesse, caratterizzate da interazioni utente articolate.

Introduzione a Playwright