Playwright testing tool

Playwright testing tool

Nel mondo moderno dello sviluppo web, la necessità di test end-to-end (E2E) affidabili, veloci e cross-browser è più cruciale che mai. Playwright, una libreria Node.js open source di Microsoft, ha rapidamente guadagnato popolarità come potente strumento per i test web. Con la sua semplice API, le sue funzionalità robuste e il supporto per i moderni browser web, Playwright offre un framework altamente produttivo per sviluppatori e ingegneri QA. In questo post del blog, descriverò perché dovresti iniziare a usare Playwright per le tue esigenze di test e fornirò alcuni esempi in TypeScript per aiutarti a iniziare.

Supporto multi-browser – Playwright testing tool
Una delle caratteristiche più importanti di Playwright è il suo supporto cross-browser out-of-the-box . Supporta i browser Chromium (Google Chrome), WebKit (Safari) e Firefox, assicurando che la tua app funzioni come previsto su tutte le principali piattaforme. Invece di impostare ambienti di test separati per ogni browser, Playwright ti consente di scrivere una volta e di eseguire facilmente i tuoi test su più browser.

import { chromium, firefox, webkit } from  'playwright' ; funzione 

asincrona  runTests ( ) { for ( const browserType of [chromium, firefox, webkit]) { const browser = await browserType. launch (); const page = await browser. newPage (); await page. goto ( 'https://example.com' ); console . log ( await page. title ()); await browser. close ();   } } runTests (); 
  
    
    
    
    

In questo esempio TypeScript, un singolo test viene scritto ed eseguito su tre diversi motori di browser (Chromium, Firefox e WebKit), consentendo test fluidi su più browser.

Auto-Wait ed esecuzione affidabile

Il playwright attende automaticamente che gli elementi siano visibili, cliccabili o in uno stato azionabile prima di interagire con essi. Si tratta di un miglioramento importante rispetto agli strumenti di test tradizionali come Selenium, in cui gli sviluppatori spesso devono gestire manualmente le attese esplicite. L’ attesa automatica di Playwright assicura che i test siano più affidabili e meno instabili.

import { chromium } from  'playwright' ; 

( async () => { 
  const browser = await chromium. launch (); 
  const page = await browser. newPage (); 
  await page. goto ( 'https://example.com' ); 

  // Non c'è bisogno di attendere manualmente che il pulsante sia cliccabile 
  await page. click ( 'button#submit' ); 

  await browser. close (); 
})();

In questo caso, il drammaturgo attende automaticamente che il pulsante con ID submit sia cliccabile, eliminando la necessità di istruzioni di attesa esplicite.

Modalità Headless e Headful

Playwright può essere eseguito sia in modalità headless che headful . La modalità headless è ottima per eseguire test in ambienti CI senza richiedere un display, mentre la modalità headful consente di ispezionare visivamente il comportamento del test in tempo reale. Questa flessibilità consente sia flussi di lavoro di sviluppo rapido che di integrazione continua.

import { chromium } from  'playwright' ; 

( async () => { 
  // Modalità headless (predefinita) 
  const browser = await chromium. launch (); 
  
  // Modalità headful 
  const browserWithUI = await chromium. launch ({ headless : false }); 
  
  const page = await browser. newPage (); 
  await page. goto ( 'https://example.com' ); 
  
  await browser. close (); 
  await browserWithUI. close (); 
})();

Eseguire il browser in modalità headful è particolarmente utile durante il debug dei test, poiché è possibile osservare le interazioni del browser mentre si verificano.

Esecuzione parallela e test rapidi

Playwright supporta l’esecuzione parallela dei test, semplificando la scalabilità della tua suite di test per un feedback più rapido. Con il potente test runner di Playwright, puoi distribuire i tuoi test su più processi worker, velocizzando notevolmente il tempo di esecuzione, in particolare per le suite di test di grandi dimensioni.

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

test ( 'test parallelo 1' , async ({ page }) => { 
  await page. goto ( 'https://example.com' ); 
  expect ( await page. title ()). toBe ( 'Dominio di esempio' ); 
}); 

test ( 'test parallelo 2' , async ({ page }) => { 
  await page. goto ( 'https://example.com' ); 
  expect ( await page. title ()). toBe ( 'Dominio di esempio' ); 
});

import { defineConfig } from  '@playwright/test' ; 

export  default  defineConfig ({ 
  testDir : './tests' ,         // Directory in cui sono archiviati i test 
  retries : 0 ,                 // Numero di nuovi tentativi per i test non riusciti 
  workers : 4 ,                 // Numero di worker paralleli (test eseguiti contemporaneamente) 
  use : { 
    headless : true ,           // Esegui i test in modalità headless (puoi impostarlo su false per il debug) 
    browserName : 'chromium' , // Specifica il browser che vuoi usare
   }, 
});

Oppure fornire i dettagli del lavoratore durante l’esecuzione dal terminale:

test drammaturgo npx --workers=3

Intercettazione di rete e test API

Playwright consente agli sviluppatori di intercettare le richieste di rete e simulare le risposte, il che è utile per simulare diversi scenari come richieste non riuscite o comportamento API in isolamento. Puoi anche eseguire test API direttamente con Playwright, il che significa che non devi passare da uno strumento all’altro per i test frontend e backend.

import { chromium } from  'playwright' ; 

( async () => { 
  const browser = await chromium. launch (); 
  const page = await browser. newPage (); 

  // Intercettazione delle richieste di rete 
  await page. route ( '**/api/data' , ( route ) => { 
    route. fulfill ({ 
      status : 200 , 
      body : JSON . stringify ({ data : 'Mocked Data' }), 
    }); 
  }); 

  await page. goto ( 'https://example.com' ); 
  await browser. close ();

In questo esempio TypeScript, la risposta API viene simulata per restituire Mocked Data per qualsiasi richiesta a /api/data. Ciò consente di testare casi limite senza aver bisogno di un backend live.

Facile installazione e forte supporto TypeScript
Iniziare con Playwright è semplice. Si integra perfettamente con TypeScript, offrendo un supporto API fortemente tipizzato che fornisce un ottimo completamento automatico IDE e controllo dei tipi, assicurando che i test siano affidabili e ben documentati.

Per installare Playwright con TypeScript, puoi usare:

npm init drammaturgo@ultimo

Questo comando creerà un progetto Playwright con supporto TypeScript e fornirà una configurazione di base per iniziare.

Conclusione Playwright testing tool
Playwright è uno strumento fantastico per i moderni test E2E, specialmente per i team che lavorano su applicazioni complesse e multi-browser. La sua combinazione di supporto multi-browser, attesa automatica, intercettazione di rete, esecuzione parallela e potente integrazione TypeScript lo rende un forte contendente nello spazio dei test E2E. Sia che tu stia eseguendo test in CI, simulando richieste API o semplicemente assicurandoti che la tua app funzioni su tutti i browser, Playwright offre una soluzione solida e flessibile.

Se utilizzi ancora vecchi framework di test, potrebbe essere il momento di provare Playwright!

(fonte)

Innovaformazione, scuola informatica specialistica promuove la cultura dell’automation testing e dell’aggiornamento continuo per i team di sviluppatori. Nell’offerta formativa per aziende trovate i Corsi Automation Testing.

INFO: info@innovaformazione.net – tel. 3471012275 (Dario Carrassi)