Automation is the key. I’ve developed a lot of tool using NodeJS and Puppeteer as stack in order to automate a process, a test, a human task. In this talk I’m gonna show you two real examples: – automate a video to audio conversion from YouTube to Anchor.fm – automate a lighthouse test on your website (with auth support).

1. Automate everything via
NodeJS and Puppeteer

2. Table of Contents
01
OVERVIEW
What is puppeteer
& Tech stack
02
USE CASE
What you can do
with these power
03
REAL USAGE
Professional/Personal
real examples
04
CONCLUSIONS
Sums it up and
Q&A session

3. Who am I?
Hi👋👋, I’m Miki Lombardi
from Florence, Italy!
I’m a Full Stack Engineer @
Growens - BU MailUp and
Co-Founder @ Schrodinger
Hat
On the web you can find me
anywhere as @thejoin95 or
on mikilombardi.com

4. It is an italian community, an open source organization, a podcast, a
series of in-person event and live streaming with the goals of sharing
love, knowledge and help other devs.
You can learn more about on schrodinger-hat.it and
github.com/schrodinger-hat
Links available on the website
What is Schrodinger Hat

5. OVERVIEW
A small introduction before we dive into it
1

6. What is
Puppeteer?

7. “
”
Puppeteer is a Node library which
provides a high-level API to control
Chrome or Chromium over the
DevTools Protocol. Puppeteer runs
headless by default, but can be
configured to run full (non-headless)
Chrome or Chromium

8. It’s kind of

9. What it looks
like in a
schematic way
Ref: https://devdocs.io/puppeteer/

10. A brief history
Selenium is the old
one, still in the lead
thanks to its
ecosystem and cross
language framework
22K Github stars
114 KB min
Selenium
PhantomJS is now
archived and
deprecated. It was
the first headless
webkit with JS API
PhantomJS
Puppeteer is the
new sheriff in
town made by
Google, Chrome
team
74K Github stars
98KB min
Puppeteer

11. Thanks to the DevTools
protocol we can have access
to all the low-level
Chromium API using a high
level interface
The code it is very readable
and easy to write
spoiler: you need to be very modular
on the coding side
How is working

12. What we can do with
Puppeteer & Node?
Well, so...

13. Everything!

14. Get the best of it
Crawling any kind of
App (SPA, SSR
on/off..)
Testing out your
environment and App
Generating PDF /
Screenshot
Any kind of
automation
Performance Test in
the latest Chrome
Generating and
checking code coverage
A B C
D E F

15. Are there valid
alternatives to
Puppeteer?

16. The goal of this project (Microsoft, released in mid 2020) is to give a
really good tool for e2e testing in Node, Python, Java and .NET. It
works with all the major browser (Chromium, Firefox, Webkit) and it
can run contemporary test on every instance of the specified
navigators. Very powerful, it comes with some good feature over
Selenium too.
Fun fact: some ex core members of Puppeteer are working in Playwright projects,
that’s why it’s pretty the same (also the API and syntax)
Just one:
Playwright *not “The Mask”

17. Which one is better?
90% of the times the answer is:
it depends.
It depends on what are you needs and
what your goals are. If you need a e2e
testing lib, maybe Playwright is the choice.
You need also to consider other libraries
such as Cypress, with a great community.
Puppeteer is a general purpose lib in this
context, it’s very flexible with official
Google support

18. USE CASE
Let’s see how we can use Puppeteer
2

19. Scraping is very useful on PWA, SPA, SSR and can find out
vulnerabilities, performance leak, incorrect user journey, etc.
A lot of company (e.g. CodeSandbox) started to use
Puppeteer internally for testing purpose against their own
application.
Scraping

20. Apart from libraries such as Cypress, you can use Puppeteer in your
pipeline as e2e testing, automated UI testing, visual testing,
regression testing, integrate Jest, Mocha or other test frameworks.
All in one.
Testing

21. Assert that a product is show
on the search result page of
the Alibaba.com website after
typing in the search bar a
query name
Example

22. Using the DevTools protocol comes with advangetes such as
verifying the code coverage for our JS and CSS, testing out some
UI/UX feature such as a lazy loading feature or just speed up a
keyboard input process
Development utility

23. REAL
USAGE
Where the explosions begins
3

24. Scraping

25. The reason: I needed a vacation
Code available github.com/theJoin95/skyscanner-flights-scraping
Project goals:
- Create a private API layer to search flights
- Create a cron script to scrape and check the flights
- Create a CLI to check flights manually
- Get the cheapest flight to Oporto (Portugal) from Italy and enjoy
SkyScanner Scraper

26. This was me

27. Process
Automation

28. Code available on: github.com/schrodinger-Hat/youtube-to-
anchorfm/
As a podcaster, via Schrodinger Hat, we were streaming on YouTube
and Twitch our podcast episodes. Then, we were manually uploading
the audio file on Anchor.fm and published it on any podcast platform
Manually.
YouTube to Anchor.fm

29. We made a Github Action that take in input the latest video on our
YouTube channel and automatically convert it in an audio file, sign in
on Anchor.fm, upload the audio file and publish it.
Automatically.
GitHub Action + NodeJS

30. CONCLUSION
4

31. The end
My goal was to inspire you to try to
automate a process or activity with these
technology (or their alternatives)
In my opinion automation, in e2e testing
and UI testing, is the key in the
development of the modern applications
Puppeteer is an open source library on
Github. Feel free to contribute!

32. CREDITS: This presentation template was
created by Slidesgo, including icons by
Flaticon, and infographics & images by
Freepik
Do you have any questions?
miki.lombi@gmail.com
mikilombardi.com
Thanks!

33. CREDITS: This presentation template was
created by Slidesgo, including icons by
Flaticon, and infographics & images by
Freepik
QA?!
Please keep this slide for
attribution