MCP Puppeteer Advanced

🚀 Puppeteer Project

Puppeteer is a toolset for controlling and capturing browser screens. It offers a rich set of APIs to manage browser behavior, perform DOM operations, handle network requests, etc. With Puppeteer, developers can easily conduct automated testing, page scraping, generate screenshots and PDFs, and more.

🚀 Quick Start

Puppeteer simplifies browser automation tasks. With just a few lines of code, you can control the browser, navigate pages, and perform various operations.

✨ Features

• Browser and Page Objects: Correspond to the browser instance and the currently used page respectively.
• Navigation and Page Load State Monitoring: Supports basic navigation operations and provides an interface to monitor page load completion.
• DOM Operations: Allows developers to directly manipulate the DOM, including element querying and attribute modification.
• Network Request Management: Can monitor and intercept all network requests, suitable for debugging and data scraping.
• Screenshot and PDF Generation: Supports page screenshots of any viewport size and can convert the entire page into a PDF file.
• Simulating User Behavior: Provides a series of methods to simulate user interaction operations, such as clicking, inputting, and swiping.
• Multithreading: Puppeteer's Browser object runs in an independent process, and each Page object corresponds to a Web worker thread.

📦 Installation

npm install puppeteer --save-dev

💻 Usage Examples

Basic Usage

const puppeteer = require('puppeteer');

// Launch the browser instance
async function main() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Navigate to the specified page
  await page.goto('http://example.com');
  
  // Take a screenshot and save it as an image
  await page.screenshot({ path: 'example.png', format: 'png' });

  // Close the browser instance
  await browser.close();
}

main().catch(console.error);

Advanced Usage

Multithreading Control

const puppeteer = require('puppeteer');

// Launch the browser instance
async function main() {
  const browser = await puppeteer.launch();
  const tabs = [];

  // Open multiple tabs
  for (let i = 0; i < 3; i++) {
    tabs.push(await browser.newPage());
  }

  // Execute different tasks in different threads
  const promiseArray = [];
  for (const tab of tabs) {
    promiseArray.push(
      tab.goto(`http://example.com/page${i}`)
        .then(() => tab.title())
    );
  }
  
  // Wait for all Promises to complete
  const results = await Promise.all(promiseArray);
  console.log(results);

  // Close all tabs and the browser instance
  await tabs.forEach(tab => tab.close());
  await browser.close();
}

main().catch(console.error);

Simulating User Behavior

const puppeteer = require('puppeteer');

// Launch the browser instance and open a page
async function main() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Simulate user input and click operations
  await page.type('#username', 'user');
  await page.type('#password', 'pass');
  await page.click('button[type="submit"]');
  
  // Wait for the page to load
  await page.waitForNavigation();
  
  // Take a screenshot of the submitted page
  await page.screenshot({ path: 'submitscreenshot.png', format: 'png' });

  // Close the browser instance
  await browser.close();
}

main().catch(console.error);

📚 Documentation

Quick Start Guide

1. Install Puppeteer:

   npm install puppeteer --save-dev
   

2. Write Your First Script:

   const puppeteer = require('puppeteer');
   
   async function main() {
     const browser = await puppeteer.launch();
     const page = await browser.newPage();
   
     // Navigate to the specified page
     await page.goto('http://example.com');
     
     // Take a screenshot and save it as an image
     await page.screenshot({ path: 'example.png', format: 'png' });
   
     // Close the browser instance
     await browser.close();
   }
   
   main().catch(console.error);
   

3. Run the Script:

   node yourscript.js
   

Step-by-Step Tutorial

Step 1: Install Puppeteer

Ensure you have Node.js and npm installed. Then run the following command to install Puppeteer:

npm install puppeteer --save-dev

Step 2: Launch the Browser Instance

Import Puppeteer in your JavaScript file and initialize the browser instance:

const puppeteer = require('puppeteer');

async function main() {
  const browser = await puppeteer.launch();
}
main().catch(console.error);

Step 3: Create a New Page Tab

Use the browser instance to create a new page tab:

async function main() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
}
main().catch(console.error);