Awesome
Useful Puppeteer demos!
Examples for using Puppeteer to do big, bold things.
Output from some of the examples:
code_coverage.js
Test lazy loading strategy by seeing CSS/JS code coverage usage across page load.
<img width="500" alt="screen shot 2018-02-26 at 10 20 41 am" src="https://user-images.githubusercontent.com/238208/36687690-2de2bbaa-1adf-11e8-912b-e21cda0160ce.png">verify_sw_caching.js
Verify all the resources you expect are being cached by a service worker for offline.
<img width="500" alt="screen shot 2018-03-01 at 5 09 32 pm" src="https://user-images.githubusercontent.com/238208/36878494-1b4098d6-1d74-11e8-93d2-492e3b2f1877.png">google_search_features.js
Gut check your page to make sure it renders correctly for Google Search.
<img width="500" alt="screen shot 2018-03-07 at 12 50 32 pm" src="https://user-images.githubusercontent.com/238208/37125450-804ad8c0-2221-11e8-8c96-7c5af582778f.png">lazyimages_without_scroll_events.js
Determine if your lazy loaded images will be seen correctly by Google Search.
<img width="500" alt="screen shot 2018-10-09 at 12 15 10 pm" src="https://user-images.githubusercontent.com/238208/46697053-98aa5e80-cbc8-11e8-91c3-d5cf7937f3f7.png">speech.js
Make your browser talk.
<a href="https://www.youtube.com/watch?v=v5ZXRgzR7Wc" target="_blank"> <img width="500" alt="Speech demo in action" src="http://img.youtube.com/vi/v5ZXRgzR7Wc/0.jpg"> </a>pacman.js
Play the Google Pac-Man Doodle.
<a href="https://youtu.be/5CihR6Z9sX8" target="_blank" title=""> <img width="500" alt="ePlaying Puppeteer Pacman" src="https://user-images.githubusercontent.com/238208/38574488-c45df5a0-3cad-11e8-90fe-001afc2d4625.png"> </a>element-to-pdf.js
Turn a DOM element into a PDF.
<img width="500" alt="elemen-to-pdf output example" src="https://user-images.githubusercontent.com/238208/38771535-bd7b6b44-3fd9-11e8-8b83-80f3131fcb80.png">crawlsite.js
Discover all the URLs on a site and visualize the subpages.
<img width="500" alt="Crawl a site/SPA" src="https://user-images.githubusercontent.com/238208/38901761-5f387902-4252-11e8-9ce4-aab2661143f4.png">side-by-side-pageload.js
Load 2 or more pages side-by-side to visually see the difference in page load. Optional desktop viewport and throttling settings.
<img width="500" alt="Side by side page load" src="https://user-images.githubusercontent.com/238208/39337122-167cc91e-4970-11e8-955c-2e1beeeef6fe.png">License
Apache 2.0 © 2018 Google Inc.