Puppeteer101: Automation made awesome

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.

Transcript

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 slow Tests 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