How to record screen actions as a puppeteer script (#blogPost)

Puppeteer is headless Chrome with a programmatic API and it’s a useful tool to automate user behaviour and end-to-end testing.
You can run and automate Chrome with a few lines of JavaScript (Node.js). Include puppeteer in your proje…

Puppeteer is headless Chrome with a programmatic API and it’s a useful tool to automate user behaviour and end-to-end testing.

You can run and automate Chrome with a few lines of JavaScript (Node.js). Include puppeteer in your project’s dependencies and use it as follows.

// index.js
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.stefanjudis.com');
  await page.screenshot({path: 'screenshot.png'});
  await browser.close();
})();

These few lines spin up a headless Chrome, go to my site, and take a screenshot of it. Some people might remember how painful it used to be to automate a headless browser. I’m amazed how far we’ve come!

You can record Puppeteer scripts coming with Chrome 89! ?



Section titled You can record Puppeteer scripts coming with Chrome 89! ?

Writing scripts is excellent already, but I don’t necessarily want to sit down and write a custom script all the time. The DevTools Changelog for Chrome 89 included an exciting new addition that will make writing Puppeteer script more manageable. The Chrome developer tools (starting in v89) will include an experiment that enables a Puppeteer script recording button! You can enable it by going to your DevTools settings under Experiments.



Chrome DevTools settings highlighting the "Recorder" experiments options

Once enabled, you can find the new recording functionality under Sources in the left section of the panel.

See an example showing how to record a Puppeteer script in Chrome Canary below. ?

I’m very excited about this new feature because it enables smooth quality assurance processes. People finding bugs can now send you a video and script to reproduce a bug. Wonderful!



Reply to Stefan


Print Share Comment Cite Upload Translate
APA
Stefan Judis | Sciencx (2024-03-28T16:36:59+00:00) » How to record screen actions as a puppeteer script (#blogPost). Retrieved from https://www.scien.cx/2021/01/23/how-to-record-screen-actions-as-a-puppeteer-script-blogpost/.
MLA
" » How to record screen actions as a puppeteer script (#blogPost)." Stefan Judis | Sciencx - Saturday January 23, 2021, https://www.scien.cx/2021/01/23/how-to-record-screen-actions-as-a-puppeteer-script-blogpost/
HARVARD
Stefan Judis | Sciencx Saturday January 23, 2021 » How to record screen actions as a puppeteer script (#blogPost)., viewed 2024-03-28T16:36:59+00:00,<https://www.scien.cx/2021/01/23/how-to-record-screen-actions-as-a-puppeteer-script-blogpost/>
VANCOUVER
Stefan Judis | Sciencx - » How to record screen actions as a puppeteer script (#blogPost). [Internet]. [Accessed 2024-03-28T16:36:59+00:00]. Available from: https://www.scien.cx/2021/01/23/how-to-record-screen-actions-as-a-puppeteer-script-blogpost/
CHICAGO
" » How to record screen actions as a puppeteer script (#blogPost)." Stefan Judis | Sciencx - Accessed 2024-03-28T16:36:59+00:00. https://www.scien.cx/2021/01/23/how-to-record-screen-actions-as-a-puppeteer-script-blogpost/
IEEE
" » How to record screen actions as a puppeteer script (#blogPost)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2021/01/23/how-to-record-screen-actions-as-a-puppeteer-script-blogpost/. [Accessed: 2024-03-28T16:36:59+00:00]
rf:citation
» How to record screen actions as a puppeteer script (#blogPost) | Stefan Judis | Sciencx | https://www.scien.cx/2021/01/23/how-to-record-screen-actions-as-a-puppeteer-script-blogpost/ | 2024-03-28T16:36:59+00:00
https://github.com/addpipe/simple-recorderjs-demo