Generare in automatico gli script per Puppeteer? Con un'estensione di Chrome!

Attraverso un'estensione di Google Chrome, è possibile registrare gli eventi del browser e convertirli in uno script per Puppeteer. Scopri come!

Generare in automatico gli script per Puppeteer? Con un'estensione di Chrome!

L'utilizzo di Puppeteer implica la conoscenza delle basi di sviluppo in Node.JS. Tuttavia, esiste un'estensione di Google Chrome che offre un supporto molto interessante.

L'estensione in questione è Headless Recorder, la quale permette di registrare gli eventi del browser convertendoli automaticamente in uno script utilizzabile su Puppeteer.

Nel video che segue faccio vedere un esempio in cui apro la homepage di Amazon, clicco su "Accetta i cookie" ed utilizzo lo script generato dall'estensione direttamente nella console attraverso Puppeteer.

Un esempio di utilizzo di Headless Recorder e di Puppeteer con lo script generato

Come vedi, aggiungo l'esecuzione di due screenshot (uno della pagina completa e l'altro dell'area Above The Fold) nello script per generare un output visualizzabile.
La seguente riga di codice produce uno screenshot della pagina completa all'interno di una directory specifica.

await page.screenshot({ path: 'ss/ss-2.png', fullPage: true });

L'estensione permette, comunque, di generare anche il codice relativo allo screenshot della pagina completa o di un'area, aggiungendo due voci al menù contestuale di Chrome (con relativi shortcut):

  • Take a Screenshot
  • Take a Screenshot Clipped

Conclusioni

Headless Recorder non ti permetterà di utilizzare Puppeteer in tutte le sue funzionalità senza saper sviluppare (fortunatamente), ma facilita la generazione della struttura di base e il tracciamento dei selettori.

Oltre allo script per la browser automation con Puppeteer, l'estensione fa lo stesso anche per Playwright, un'altra libreria (sempre in Node.JS) utile ad automatizzare Chromium, Firefox e WebKit via API.


Per approfondire

Headless Recorder
A Chrome extension for recording browser interaction and generating Puppeteer & Playwright scripts
Puppeteer: come usare Chrome attraverso le API per fare browser automation
In questo post scopriamo e impariamo ad usare Puppeteer, uno strumento che permette di creare delle automazioni per Chrome utili per analisi SEO e UX.
Fast and reliable end-to-end testing for modern web apps | Playwright
Cross-browser end-to-end testing for modern web apps