Home

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.