This is the presentation I used in my talk during the Chrome Dev Summit Extended Cebu 2019 in Cebu City, Philippines. It contains a brief intro on how you can use puppeteer as an automation and testing tool. You can also check the demo files I used in my github repo: https://github.com/mdrobin95/puppeteer-demo Disclaimer: This is the second presentation I gave to a conference, so please be gentle. :) PS. Special thanks to Jecelyn Yeen for guiding me with this talk and letting me use her resources.

1. Puppeteer 101
Mark Robin
Full-Stack Software Engineer
cds extended 19
#cebu

2. Mark Robin
From Cebu City, Philippines
- Full-stack Software Engineer, Chromedia Far East Inc.
- Part-time freelancer
- Core team member & Technical Lead, GDG Cebu
- A huge sucker for tech stickers
- Single...
cds extended 19
#cebu

3. “Hey, send me a screenshot of
www.example.com.”
- Boss
cds extended 19
#cebu

4. “Hey, send me a screenshot of
www.example.com everyday.”
- Boss
Hmm...
cds extended 19
#cebu

5. “Anything that you do more than twice has
to be automated.”
- Adam Stone, CEO, D-Tools
can
cds extended 19
#cebu

6. Puppeteer
- a Node library which provides a high-level API to control Chrome or
Chromium over the DevTools Protocol
- runs headless by default, but can be configured to run full
(non-headless) Chrome or Chromium.
cds extended 19
#cebu

7. “So what can we do with Puppeteer?”
Most of the things we can do
manually in the browser.
cds extended 19
#cebu

8. What can we do with Puppeteer?
● Generate screenshots and PDFs of pages.
● Crawl a SPA (Single-Page Application) and generate pre-rendered content
(i.e. "SSR" (Server-Side Rendering)).
● Automate form submission, UI testing, keyboard input, etc.
● Create an up-to-date, automated testing environment. Run your tests
directly in the latest version of Chrome using the latest JavaScript and
browser features.
● Capture a timeline trace of your site to help diagnose performance issues.
● Test Chrome Extensions.
● And many more!
cds extended 19
#cebu

9. npm install puppeteer
# or "yarn add puppeteer"
npm install puppeteer-core
# or "yarn add puppeteer-core"
cds extended 19
#cebu

10. Take a screenshot
cds extended 19
#cebu

11. Generate PDF
cds extended 19
#cebu

12. Scrap content
cds extended 19
#cebu

13. Time tracing
cds extended 19
#cebu

14. Automate UI testing
cds extended 19
#cebu

15. cds extended 19
#cebu

16. Debugging Puppeteer
cds extended 19
#cebu

17. My use case is with
Automation UI testing
cds extended 19
#cebu

18. “End-to-end testing is a methodology used to test
whether the flow of an application is performing
as designed from start to finish. The purpose of
carrying out end-to-end tests is to identify system
dependencies and to ensure that the right
information is passed between various system
components and systems.” - Techopedia
Sources:
https://www.techopedia.com/definition/7035/end-to-end-test cds extended 19
#cebu

19. “Hey, send me a screenshot of
www.example.com everyday.”
- Boss
Pfft...EZ
cds extended 19
#cebu

20. “Hey, send me screenshots of
mobile, table and desktop views
of www.example.com everyday.”
- Boss
cds extended 19
#cebu

21. SAY WHAT
cds extended 19
#cebu

22. Device Emulation
● User Agent
● Device Pixel Ratio
● Viewport Size
● Touch Support
cds extended 19
#cebu

23. 100+ Devices
cds extended 19
#cebu

24. Tests are slowTests are slow
fast
cds extended 19
#cebu

25. Tests are slow
● Browser context
fast
cds extended 19
#cebu

26. 100x faster!
cds extended 19
#cebu

27. Lighthouse - an open-source, automated tool for improving
the quality of web pages.
It uses Puppeteer!
https://developers.google.com/web/tools/lighthouse
cds extended 19
#cebu

28. Additional Examples
https://developers.google.com/web/tools/puppeteer/examples
cds extended 19
#cebu

29. Rendering and web scraping
● Puppetron - Demo site that shows how to use Puppeteer and Headless Chrome to render pages.
Inspired by GoogleChrome/rendertron.
● Thal - Getting started with Puppeteer and Chrome Headless for Web Scraping.
● pupperender - Express middleware that checks the User-Agent header of incoming requests, and if it
matches one of a configurable set of bots, render the page using Puppeteer. Useful for PWA
rendering.
● headless-chrome-crawler - Crawler that provides simple APIs to manipulate Headless Chrome and
allows you to crawl dynamic websites.
● puppeteer-examples - Puppeteer Headless Chrome examples for real life use cases such as getting
useful info from the web pages or common login scenarios.
● browserless - Headless Chrome as a service letting you execute Puppeteer scripts remotely.
Provides a docker image with configuration for concurrency, launch arguments and more.
● Puppeteer Sandbox - Puppeteer sandbox environment as a service. Runs Puppeteer scripts and
allows saving and embedding them in external sites and markdown files.
cds extended 19
#cebu

30. Testing
● angular-puppeteer-demo - Demo repository explaining how to use Puppeteer in Karma.
● mocha-headless-chrome - Tool which runs client-side mocha tests in the command line through
headless Chrome.
● puppeteer-to-istanbul-example - Demo repository demonstrating how to output Puppeteer coverage
in Istanbul format.
● jest-puppeteer - (almost) Zero configuration tool for setting up and running Jest and Puppeteer
easily. Also includes an assertion library for Puppeteer.
● puppeteer-har - Generate HAR file with puppeteer.
● puppetry - A desktop app to build Puppeteer/Jest driven tests without coding.
Services
● Checkly - Monitoring SaaS that uses Puppeteer to check availability and correctness of web pages
and apps. cds extended 19
#cebu

31. https://www.linkedin.com/in/markdrobin/
https://github.com/mdrobin95/puppeteer-demo

32. Credits and Resources
● meme.at
● streaks.arnelle.me/
● www.techopedia.com/definition/7035/end-to-end-test
● developers.google.com/web/tools/puppeteer
● flood.io/blog/selenium-vs-puppeteer-for-test-automation-is-a-new-leader-emerging/
cds extended 19
#cebu