# Puppeteer can automate that!

## Description

Puppeteer is a node library that provides a high-level API to control Chrome over the DevTools Protocol. It is mostly used and considered for scraping content, UI testing and automated form submissions. This talk aims to change this mindset by inspiring you on observing your daily routines and common patterns on your development and testing workflows. It will help you automate them in a creative way!

We'll explore capabilities of Puppeteer with the combination of DevTools protocol and cloud functions (FaaS) across a showcase of real life use cases demonstrated over more than a dozen demos on stage. Finally, we’ll go through existing Puppeteer based SaaS solutions to inspire everyone in the room to build the next SaaS solution or open source project with Puppeteer.

## Technologies

My talk will touch on the grounds of web standards, graphics / css filters, performance and server side JS, cloud functions (FaaS) topics.

Following tags summarizes the tech referenced in the talk:
**chromium** **devtools** **chrome-devtools-protocol** **javascript** **nodejs** **puppeteer** **css** **test-tooling** **jest** **performance**

## Purpose of the talk

Puppeteer is most of the times used and considered by developers for scraping content or automated form submission. This is what people think about when the idea of browser automation is pitched. My goal is to change this mindset and to inspire people for the things that can be automated with a powerful browser & tooling pair. Especially, when Chrome DevTools Protocol and protocol monitor on Chrome is introduced to the audience, there's no limit on the automation possibilities.

## Target audience

Any software or QA engineer who uses Chrome / DevTools.

## Audience takeaway

I expect people to be inspired and excited by the capabilities of Puppeteer and the automation possibilities out there when I demonstrate 21 examples on stage.

Some of the demos can be seen on Twitter: [https://twitter.com/onderceylan/status/1197083395769208832](https://twitter.com/onderceylan/status/1197083395769208832)
[https://twitter.com/onderceylan/status/1202203801203232768](https://twitter.com/onderceylan/status/1202203801203232768)
[https://twitter.com/onderceylan/status/1190657108003282945](https://twitter.com/onderceylan/status/1190657108003282945)

I believe this talk will inspire everyone in the room to build the next SaaS solution or open source project with Puppeteer to automate their daily routines and to solve common problems.

## Remarks from the community

It got great feedback so far. I heard so many good things about it on offline and online channels. Some online feedbacks are like;

* [Thanks for your amazing talk Önder! You inspire us to build perf tools to our own needs.](https://twitter.com/devoorhoede/status/1197461713580363776)
* [Definitely one of the best talks !! It really inspired me to give puppeteer a try!](https://twitter.com/piyukore06/status/1197465015575547904)
* [Mind being absolutely blown at @onderceylan's talk about Puppeteer. Getting a few ideas on how I want to use it. #frontmania](https://twitter.com/rvdleun/status/1195319313265246208)
* [@onderceylan‘s talk on Puppeteer is like an easy-to-digest documentation on all the things Puppeteer can do. Will be my go to talk for anything Puppeteer for a while. @FrontMania #frontmania](https://twitter.com/PrashantPalikhe/status/1195315874921623552)
* [Inspired to automate a common development workflow after @onderceylan’s top talk on puppeteer last night!](https://twitter.com/melaniebrgr/status/1205396049139027968)
* [Awesome talk from @onderceylan on Puppeteer. Comprehensive and pragmatic. Time to replace selenium.](https://twitter.com/Root3d/status/1205213949785968641?s=20)

## Videos

* Frontmania Conf Recording: https://www.youtube.com/watch?v=d2WSO3w5E94
* GDG Istanbul Online Stream [TURKISH]: https://www.youtube.com/watch?v=1HdrUJk3yQc

## Source

Source of the demos and references mentioned on slides: [https://github.com/onderceylan/puppeteer-demos](https://github.com/onderceylan/puppeteer-demos)

## Previous versions of the talk

* [Codemotion Online Tech Conf Italian Edition](https://events.codemotion.com/conferences/online/2020/online-tech-conference-italian-edition/agenda)
* [JSVidCon 2020](https://jsvidcon.com/)
* [Node.js Global Summit](https://geekle.us/)
* [Codemotion Webinar 2020](https://extra.codemotion.com/onder-ceylan-webinar-front-end/)
* [HolyJS Piter 2020](https://holyjs-piter.ru/2020/spb/talks/5vbzfizyixwu1i6nrsjd0y/)
* [Codemotion Rome 2020](https://events.codemotion.com/conferences/rome/2020/)
* [Codemotion Amsterdam 2020](https://events.codemotion.com/conferences/amsterdam/2020/)
* [Puppeteer can automate that! @Frontmania](https://www.slideshare.net/nderCeylan/puppeteer-can-automate-that)
* [Puppeteer can automate that! @AmsterdamJS](https://www.slideshare.net/nderCeylan/puppeteer-can-automate-that-amsterdamjs)
* [Intrducing perf budgets on CI with Puppeteer @perf.now()](https://www.slideshare.net/nderCeylan/introducing-perf-budgets-on-ci-with-puppeteer)
* [Puppeteer can automate that! @c't webdev](https://www.slideshare.net/nderCeylan/puppeteer-can-automate-that)

## Upcoming conferences that I will have this talk at

## Talk outline

* Introduction to headless Chrome
* Introduction to Puppeteer
* Getting started with Puppeteer
* First set of demos to show some of the interesting capabilities of Puppeteer
* Introduction to Protocol Monitor and explaining how browser is being instrumented
* Introduction to Chrome DevTools Protocol
* Using CDP with Puppeteer
* Explaining how Puppeteer launches a browser instance and how one can connect to a remote instance over WS debuggable interface
* Introduction to the idea of Puppeteer Light => chrome launcher + puppeteer-core to avoid installation of a chromium bundle of over ~100mb
* More demos on utilizing CDP with Puppeteer
* Using puppeteer on cloud functions
* SaaS solutions based on Puppeteer
* Main takeaways

## Slides

* Introduction to Chrome revisions
* Introduction to headless Chrome
* Introduction to Puppeteer
* Getting started with Puppeteer
* Trying puppeteer for the first time
* Awesome puppeteer, projects built using puppeteer
* Puppeteer recorder for easy UI automation scripting
* First set of demos to show some of the interesting capabilities of Puppeteer
* Demo: Text to speech using Speech Synthesis API
* Demo: Whatsapp messages every day
* Demo: Emulating color scheme / dark mode
* Demo: Side by side page load
* Demo: Accessibility test with third party JS injection - AXE
* Demo: Code coverage reports using DevTools coverage results and visualising using istanbul test coverage outline
* Introduction to Chrome DevTools
* Inspecting the DevTools inspector
* Introduction to Protocol Monitor and explaining how browser is being instrumented
* Introduction to Chrome DevTools Protocol
* Debugging and profiling a remote Chrome instance over using remote debugger and CDP
* Executing CDP commands on your DevTools using `Main.sendOverProtocol()`
* Libraries and adapters using CDP
* Comparison of a raw protocol and puppeteer implementation of taking screenshots
* Using CDP with Puppeteer
* Introduction to Puppeteer core
* Explaining how Puppeteer launches a browser instance and how one can connect to a remote instance over WS debuggable interface
* Introduction to Chrome launcher
* Using Chrome launcher to launch a local Chrome instance
* Introduction to the idea of Puppeteer Light => chrome launcher + puppeteer-core to avoid installation of a chromium bundle of over ~100mb and use system first approach rather than download first
* More demos on utilizing CDP with Puppeteer
* Demo: PWA asset generator - batch image generation using web tech
* Demo: PptrGram - using css filters and web tech to apply instagram effects and a watermark to photos
* Demo: PptrFlow - object detection over an image using tensorflow js sdk injection
* Monitoring demos
* Demo: DIY visual regression testing
* Demo: DOM snapshot testing via jest snapshots
* Demo: Custom budgets on perf metrics - using `Performance.getMetrics()`
* Demo: FPS monitoring via fps meter monitoring
* Demo: Monitor memory leak using Heap
* Demo: Monitor memory leak using Prototype
* Demo: Monitor change on security state of the app
* Demo: Monitor SSL certificate expiration
* Using puppeteer on cloud functions
* An example cloud function using AWS lambda and serverless
* SaaS solutions based on Puppeteer - PaaS (Puppeteer as a Service)
* Main takeaways

## Technical requirements

One of the demos I have requires sound output.

## Why me talking about Puppeteer?

I try to be the voice of developers to developers. Unlike dev rels or advocates of tech giants, I don't have to advocate for a specific product or a design decision. On the contrary, I argue the decisions taken and I introduce alternative ideas on the usage of puppeteer.

In addition, I've spent a fair amount of time on the subject on my journey of developing and maintaining my open source project: [pwa-asset-generator](https://github.com/onderceylan/pwa-asset-generator). I presented this topic in front of various communities like Frontmania, AmsterdamJS, perf.now(), c't webdev and more to come.