詳解Nodejs中自動化瀏覽器操作神器Puppeteer的使用

更新時間：2024年01月09日 08:52:44 作者：慕仲卿

Puppeteer是一個JavaScript庫,它提供了一種方式來通過DevTools協(xié)議控制無頭瀏覽器,本文主要為大家介紹了Puppeteer的主要特性和使用方法,感興趣的可以了解下

引言

在現代Web開發(fā)中，自動化測試、網頁抓取或頁面渲染優(yōu)化等需求日益增加。Puppeteer，一個由Google Chrome團隊開發(fā)的Node庫，提供了一套高級API來控制無頭Chrome或Chromium。在本文中，我們將詳細探討Puppeteer的主要特性和使用方法，讓自動化瀏覽器操作變得觸手可及。

Puppeteer簡介

Puppeteer是一個JavaScript庫，它提供了一種方式來通過DevTools協(xié)議控制無頭瀏覽器。無頭瀏覽器是沒有圖形界面的瀏覽器，適合自動化腳本運行環(huán)境。Puppeteer常用于頁面自動化測試、截屏、PDF生成、網絡性能監(jiān)測等。

安裝

Puppeteer可通過npm輕松安裝到你的Node.js項目中。

npm install puppeteer

創(chuàng)建第一個腳本

使用Puppeteer打開一個網頁并截圖是非常簡單的。

const puppeteer = require('puppeteer');

async function run() {
  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();
}

run();

主要特性

頁面截圖和PDF生成： Puppeteer允許你捕獲網頁的截圖，或將其保存為PDF文件，非常適合生成報告或存檔頁面。
表單自動提交和UI測試：自動化填寫表單并提交，模擬用戶行為進行UI測試。
網絡請求監(jiān)控：監(jiān)控和修改網絡請求，檢查應用性能或進行安全測試。
無頭模式和非無頭模式：可以在無頭模式（沒有界面）或非無頭模式（有界面）下運行，靈活適應不同場景。

實際案例

自動化表單提交：使用Puppeteer模擬用戶登錄行為。

const puppeteer = require('puppeteer');

async function login() {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('https://example.com/login');

  await page.type('#username', 'yourUsername');
  await page.type('#password', 'yourPassword');
  await page.click('#submit');

  await page.waitForNavigation();
  console.log('Logged in!');
  await browser.close();
}

login();

網絡請求攔截：攔截網絡請求，模擬網絡條件或審查請求。

const puppeteer = require('puppeteer');

async function interceptNetwork() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setRequestInterception(true);
  page.on('request', request => {
    if (request.url().endsWith('.png') || request.url().endsWith('.jpg'))
      request.abort();
    else
      request.continue();
  });

  await page.goto('https://example.com');
  await browser.close();
}

interceptNetwork();