Published on 3 min read
Learning Puppeteer Through Short Videos
A little over a year ago, I published an article overviewing a variety of available capabilities in Puppeteer. Since the feedback was very positive, I decided to remake the content as short, focused videos.
Update (September 2026): These videos reflect Puppeteer as of 2020, and some of its APIs have changed since - check out the updated article for the current usage.
That’s only the beginning - I’m planning to make more videos, so you can save the full playlist on YouTube. Also, if you like this kind of work - subscribe to my YouTube channel today to not miss new content.
Well, here we go. 🍿
Introduction
This video introduces the popular Node.js browser automation library, Puppeteer, focusing on the product package and how to install it.
The Browser
Interacting with the Browser (Chromium & Firefox Nightly)
This video explains how to use Puppeteer in order to interact with the browser, whether it’s Chromium or Firefox Nightly.
Introducing the Browser Context
This video explains what the browser context is in Puppeteer, and how to practically use it.
Headless and Headful Modes
This video explains the idea of running the browser in headless mode, compared to headful mode, and introduces the ways Puppeteer lets us configure these modes.
3 Approaches to Debugging
This video introduces three ways to approach debugging browser issues with Puppeteer.
The Page
Creating and Interacting with a Page
This video explains what a Page is in terms of Puppeteer, and how to create and interact with it - considering its frame.
Navigating a Page to a URL
This video explains how easy it is to navigate a page to a URL.
Emulating Devices
This video explains the ways to emulate devices in order to approximate how the page looks and behaves in different view modes.
Handling Events
This video explains how to handle events that are emitted by the page, including treating custom DOM events.
Operating the Mouse
This video explains how to operate the mouse within the page viewport - featuring move and click.
Operating the Keyboard
This video explains how to operate the keyboard for typing text and dispatching keyboard events.
Taking a Screenshot
This video explains how to capture a screenshot of the page, whether partially or fully.
Generating PDF
This video explains how to generate a PDF file from a website page and format it.
Faking Geolocation
This video explains how to change the geolocation of the page.
Inspecting the Accessibility Tree
This video explains how to inspect the accessibility tree of the page.
Gathering Code Coverage Data
This video explains how to gather information regarding JavaScript and CSS code on the page - calculating how many bytes are actually being used and finding the unused parts of the code.
Measuring Performance
This video introduces techniques to analyze the performance of the page - considering load-time and runtime.
You’re welcome to share:
Join My Newsletter
Get new posts directly to your inbox.
Comments are powered by DisqusDetails
Loading comments activates Disqus, which collects information as a third-party service.
The site owner has no access to or control over the information collected by Disqus.
Related Posts

How to Sync a Design System with Claude Design
18 min read
Syncing React components into Claude Design with /design-sync: what the mirror holds, how it's verified and a step-by-step example with shadcn/ui, Tailwind v4 and Storybook.

ECMAScript - Introducing Deferred Module Evaluation with import defer
8 min read
Introducing the “import defer” proposal, a new ECMAScript import form that loads and links modules eagerly while deferring their evaluation until a namespace property is first accessed - currently at stage 3 in the TC39 process.

ECMAScript - Introducing BigInt Primitive in ES2020 (ES11)
5 min read
BigInt in ES2020 (ES11) - a new primitive for arbitrarily large integers, with its operators, comparisons and limits.