Puppeteer
Download as PPTX, PDF2 likes1,118 views
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.
![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(); })();](https://image.slidesharecdn.com/puppeteer-200116154132/85/Puppeteer-9-320.jpg)
Puppeteer
- 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
Editor's Notes
- #4: Headless software is software capable of working on a device without a graphical user interface. Such software receives inputs and provides output through ...