Learning Puppeteer In-Stride Through Short Videos

A little over a year ago, I published an <a href="{{< ref "2019-03-16-getting-to-know-puppeteer-using-practical-examples.md" >}}" target="_blank" rel="noopener">article overviewing a variety of available capabilities in Puppeteer. Since there were many positive feedbacks, I decided to remake the content as highly focused videos considering up-to-date practices.

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 Consider at Debugging

This video introduces three possible ways to approach when 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 Page to Specific URL

This video explains how easy it to navigate the Page to 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.

{{< adsense >}}

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.