puppeteer

Google Chrome Puppeteer

Transcript

1. Control your browser programmatically
2. @JecelynYeen From Kuala Lumpur, Malaysia - Google Developer Expert - Web technologies, Angular - Software Architect @ Randstad - Organizer - Women Who Code KL
3. – Boss “Hey, send me a screenshot of www.competitor.com everyday.”
4. – Someone “If you perform a same task 10 times repetitively, consider to automate it.”
5. Puppeteer - a node library which provide a high level API to control headless Chrome or Chromium over the DevTools Protocol.
6. What can you do with Puppeteer? Most of the things you do manually in the browser.
7. Use cases - Take screenshot - Generate PDF - Scrap content - Automate UI testing - Timeline tracing - And more! Can - DDos Attack - Fake page loads - Credential stuffing - *Some page with audio & video Can’t
8. npm install puppeteer —save
9. Take screenshot
10. Generate PDF
11. Scrap content
12. Automate UI Testing
13. Time tracing
14. – Boss “Hey, send me a screenshot of www.competitor.com everyday.”
15. – Boss “Hey, send me screenshots of mobile, table and desktop views of www.competitor.com everyday.”
16. Our use case @ Randstad PDF printing as a service
17. Dynamic form builder
18. Work Flow 1. Consultant select a form 2. Send the form to candidate (email with url) 3. Candidate fill in the form & submit 4. Queue to process the form A. Generate PDF B. Attach PDF to email and send to candidate
19. PDF Printing as a service - Express + Puppeteer + Cloud Storage - API - POST /pdf/print
20. Lighthouse - an automated tool for improving the quality of web pages. *It uses Puppeteer! https://developers.google.com/web/tools/lighthouse/
21. How about running Puppeteer serverless-ly? https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md AWS Lambda
22. Gotchas - Wait for certain page element loaded - Deployment - chromium version - Performance overhead
23. Additional Examples
26. Questions? Thank you. https://speakerdeck.com/chybie/puppeteer https://github.com/chybie/puppeteer-demo