> ## Content Index
> Fetch the complete content index at: https://www.alessiopomaro.it/llms.txt
> Use this file to discover other available public pages before exploring further.

# Generare in automatico gli script per Puppeteer? Con un'estensione di Chrome!
- URL: https://www.alessiopomaro.it/generare-in-automatico-gli-script-per-puppeteer-con-unestensione-di-chrome/
- Published: 2021-05-28T06:00:00.000Z
- Updated: 2021-06-01T23:19:04.000Z
- Description: Attraverso un'estensione di Google Chrome, è possibile registrare gli eventi del browser e convertirli in uno script per Puppeteer. Scopri come!
- Author: Alessio Pomaro
- Tags: SEO

L'utilizzo di [Puppeteer](https://www.alessiopomaro.it/puppeteer-chrome-api-browser-automation/) 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](https://chrome.google.com/webstore/detail/headless-recorder/djeegiggegleadkkbgopoonhjimgehda?ref=alessiopomaro.it)**, 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 RecorderA Chrome extension for recording browser interaction and generating Puppeteer & Playwright scripts![](https://ssl.gstatic.com/chrome/webstore/images/icon_144px.png)Chrome Web Store![](https://lh3.googleusercontent.com/zuxp6zCZpdSLqMHyr79oL39-phEVSVOYq2mtyBTkyJBc7A8PsWMTkWfofACaPIP-Vm59hutWx2YSFvfDPir9pCozg8g=w128-h128-e365-rj-sc0x00ffffff)](https://chrome.google.com/webstore/detail/headless-recorder/djeegiggegleadkkbgopoonhjimgehda?ref=alessiopomaro.it)

[Puppeteer: come usare Chrome attraverso le API per fare browser automationIn questo post scopriamo e impariamo ad usare Puppeteer, uno strumento che permette di creare delle automazioni per Chrome utili per analisi SEO e UX.![](https://www.alessiopomaro.it/favicon.png)Alessio PomaroAlessio Pomaro![](https://storage.ghost.io/c/d7/3a/d73a3886-5e95-4e08-9255-a08eb51bb37b/content/images/2021/05/puppeteer-chrome-api-browser-automation-1.jpg)](https://www.alessiopomaro.it/puppeteer-chrome-api-browser-automation/)

[Fast and reliable end-to-end testing for modern web apps | PlaywrightCross-browser end-to-end testing for modern web apps![](https://playwright.dev/img/playwright-logo.svg)PlaywrightPlaywright![](https://playwright.dev/img/playwright-logo.svg)](https://playwright.dev/?ref=alessiopomaro.it)