Puppeteer is a Node library that provides a high-level API to control Chrome or Chromium using the DevTools Protocol. It allows users to take screenshots, generate PDFs, automate form submissions, and test Chrome extensions through programmatic control of the browser. Some key features include taking screenshots, generating PDFs, automating UI interactions and testing across different devices. The documentation provides code samples for taking screenshots of pages, generating PDFs, automating form submission, and testing a page across different emulated devices.

2. What is
“ Puppeteer is a Node
library which provides a
high-level API to control
Chrome or Chromium over
the DevTools Protocol.
Puppeteer runs headless
by default”

4. Features
❏ Screenshots
❏ PDF prints
❏ Pre-render content and crawl SPA to SEO engines
❏ Automate form submission, UI testing, keyboard input, etc.
❏ Create an up-to-date, automated testing environment.
❏ Capture a timeline trace of your site to help diagnose
performance issues.
❏ Test Chrome Extensions.

5. Install
# Chromium + puppeteer
npm i puppeteer
# Puppeteer without Chromium
npm i puppeteer-core

6. Snapshot
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setViewport({ width: 767, height: 1024 });
await page.goto('https://getbootstrap.com/');
await page.screenshot({ path: 'bootstrap.png',
fullPage: true });
browser.close();
})();

7. PDF
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://github.com/');
await page.pdf({ path: 'github.pdf', format:
'A4' });
browser.close();
})();

8. Automating Interactions
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.npmjs.com');
await page.focus('#site-search');
await page.type('react');
await page.click('#npm-search > button');
await page.waitForNavigation();
await page.screenshot({ path: 'npmjs.png' });
browser.close(); })();

9. Testing Devices
const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const iphone6 = devices['iPhone 6'];
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.emulate(iphone6);
await page.goto('https://www.facebook.com/');
await page.screenshot({ path: 'facebook.png' });
const host = await page.evaluate(() => location.host);
console.log(host); // www.facebook.com'
browser.close(); })();

10. Demo