Master Web Automation with Puppeteer

Learn to automate web tasks, scraping, testing, and more with interactive tutorials and real-world examples

automation.js
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.goto('https://example.com');
  await page.screenshot({ path: 'example.png' });
  
  await browser.close();
})();

Why Learn Puppeteer?

Fast & Reliable

Puppeteer runs headless Chrome, providing fast and reliable automation for modern web applications.

JavaScript Native

Built for JavaScript developers, with Promise-based API and modern async/await syntax.

Powerful Tools

Screenshot generation, PDF creation, performance testing, and comprehensive debugging tools.

Production Ready

Used by Google and thousands of companies for testing, scraping, and automation at scale.

Learning Path

01

Getting Started

Installation, setup, and your first Puppeteer script

Start Tutorial
02

Web Scraping

Extract data from websites with selectors and navigation

Start Tutorial
03

Form Automation

Fill forms, handle interactions, and submit data

Start Tutorial
04

Advanced Techniques

Performance optimization, error handling, and scaling

Start Tutorial

Interactive Examples

Take Screenshot

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  // Set viewport size
  await page.setViewport({ width: 1280, height: 720 });
  
  // Navigate to website
  await page.goto('https://example.com', {
    waitUntil: 'networkidle2'
  });
  
  // Take screenshot
  await page.screenshot({ 
    path: 'screenshot.png',
    fullPage: true
  });
  
  await browser.close();
})();

How it works:

  • Launch browser: Start a headless Chrome instance
  • Set viewport: Define the browser window size
  • Navigate: Go to the target website
  • Screenshot: Capture the entire page
  • Cleanup: Close the browser

Scrape Data

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.goto('https://quotes.toscrape.com/');
  
  // Extract quotes
  const quotes = await page.evaluate(() => {
    return Array.from(document.querySelectorAll('.quote'))
      .map(quote => ({
        text: quote.querySelector('.text').textContent,
        author: quote.querySelector('.author').textContent,
        tags: Array.from(quote.querySelectorAll('.tag'))
          .map(tag => tag.textContent)
      }));
  });
  
  console.log(quotes);
  await browser.close();
})();

Data Extraction:

  • page.evaluate(): Run JavaScript in the page context
  • DOM queries: Use standard DOM methods
  • Data structure: Return structured data
  • Multiple elements: Process arrays of elements

Automate Forms

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  
  await page.goto('https://example.com/login');
  
  // Fill login form
  await page.type('#username', 'user@example.com');
  await page.type('#password', 'secretpassword');
  
  // Click login button
  await page.click('#login-button');
  
  // Wait for navigation
  await page.waitForNavigation();
  
  // Check if login was successful
  const isLoggedIn = await page.$('.dashboard') !== null;
  
  console.log('Login successful:', isLoggedIn);
  await browser.close();
})();

Form Interaction:

  • page.type(): Type text into input fields
  • page.click(): Click buttons and links
  • waitForNavigation: Wait for page changes
  • Element detection: Check for success indicators

E2E Testing

const puppeteer = require('puppeteer');

describe('User Login', () => {
  let browser;
  let page;
  
  beforeEach(async () => {
    browser = await puppeteer.launch();
    page = await browser.newPage();
  });
  
  afterEach(async () => {
    await browser.close();
  });
  
  test('should login successfully', async () => {
    await page.goto('https://example.com/login');
    
    await page.type('#username', 'testuser');
    await page.type('#password', 'testpass');
    await page.click('#login-btn');
    
    await page.waitForSelector('.dashboard');
    
    const welcomeText = await page.$eval('.welcome', 
      el => el.textContent
    );
    
    expect(welcomeText).toContain('Welcome');
  });
});

Testing Features:

  • Test structure: Use Jest or similar testing framework
  • Setup/teardown: Clean browser state for each test
  • Assertions: Verify expected behavior
  • Selectors: Wait for elements to appear

Resources & Tools

Documentation

Official Puppeteer API documentation and guides

Visit Docs

GitHub Repository

Source code, issues, and community contributions

View on GitHub

DevTools

Chrome DevTools integration and debugging

Learn More

Community

Stack Overflow, Discord, and community forums

Join Community