NodePuppeteer：讓你的自動化測試和網頁抓取更加輕鬆

NodePuppeteer是一個基於Chromium的Node.js庫，它提供了一個高級API來控制無頭Chrome或Chromium，使其通過DevTools協議執行自動化測試、截圖、生成PDFs，以及執行爬取任務等一系列任務。在這篇文章中，我們將深入了解NodePuppeteer，並為你演示如何使用它來控制無頭瀏覽器。

一、快速開始

在開始使用NodePuppeteer之前，你必須安裝Node.js及npm包管理器，然後通過以下命令安裝NodePuppeteer依賴：

npm install puppeteer

在安裝完依賴後，就可以在你的Node.js代碼中引入puppeteer庫：

const puppeteer = require('puppeteer');

現在，我們可以使用以下代碼來打開一個無頭瀏覽器實例：

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.google.com');
  await browser.close();
})();

以上代碼將會啟動一個無頭瀏覽器，打開Google的首頁，然後關閉瀏覽器。注意，在創建page實例時，我們可以通過options參數來修改默認的瀏覽器行為（例如，禁用JavaScript或緩存等）。

二、使用場景

1.自動化測試

puppeteer提供了一套完整的API來模擬用戶在瀏覽器中的交互行為。這使得我們可以在自動化測試中使用它，例如：模擬鼠標和鍵盤交互、檢查元素是否存在、截取頁面快照、模擬拖放等等。

下面是一個簡單的例子，演示如何使用puppeteer來進行自動化測試：

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.example.com');
  await page.type('#username', 'username');
  await page.type('#password', 'password');
  await page.click('#submit');
  await page.waitForNavigation();
  await page.screenshot({ path: 'example.png' });
  await browser.close();
})();

以上代碼將會打開一個無頭瀏覽器，打開指定頁面，輸入用戶名和密碼，點擊登錄，等待加載完成後，截取頁面快照，並關閉瀏覽器。

2.網頁抓取

puppeteer還可以用於編寫爬蟲，因為它提供了一個可以執行JavaScript代碼的瀏覽器環境。這意味着我們可以訪問頁面上的DOM元素，甚至可以模擬Ajax請求並解析響應。此外，我們還可以使用puppeteer的截圖和PDF生成功能來生成頁面快照。

下面是一個簡單的例子，演示如何使用puppeteer從網頁中爬取數據：

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://github.com/trending');
  const data = await page.evaluate(() => {
    const items = Array.from(document.querySelectorAll('.repo-list li'));
    return items.map(item => ({
      title: item.querySelector('h3 a').textContent.trim(),
      url: item.querySelector('h3 a').href,
      description: item.querySelector('.py-1 p').textContent.trim(),
    }));
  });
  console.log(data);
  await browser.close();
})();

以上代碼將會打開一個無頭瀏覽器，訪問GitHub趨勢頁面，然後抓取每個項目的標題、URL和描述，並將結果打印到控制台。

三、使用技巧

1.性能優化

當我們使用puppeteer進行自動化測試或網頁抓取時，我們應該注意性能問題。以下是一些有用的技巧，可以幫助我們提高代碼的效率：

避免使用page.evaluate()：該方法會將JavaScript代碼序列化並注入到頁面中，然後運行它，並將結果序列化和發送回Node.js環境。這個過程非常耗時，如果可以避免，我們應該使用DOM API來操作頁面。
避免串行執行代碼：在puppeteer中，任何與瀏覽器的交互都是異步的。這意味着我們可以並行執行多個操作，而不是等待一個操作完成後再執行下一個操作。
使用waitFor()方法：在頁面等待加載或渲染時，我們應該使用waitFor()方法來阻止代碼的執行。這可以避免我們在頁面還沒有準備好時執行額外的代碼。

2.使用插件

我們可以使用puppeteer提供的插件來擴展它的功能。以下是一些有用的插件：

puppeteer-extra：提供了一些有用的功能，例如：瀏覽器指紋保護、屏蔽廣告器、翻譯網頁等。
puppeteer-cluster：可以幫助我們在多個瀏覽器實例中並行執行任務，以加快速度。
puppeteer-recorder：可以將用戶在瀏覽器中的交互行為記錄為代碼，以便於後續自動化測試。

四、總結

NodePuppeteer為我們提供了一套現代化的API，使得我們可以輕鬆地控制無頭瀏覽器執行自動化測試、網頁抓取等任務。與其他自動化測試框架相比，NodePuppeteer與Chrome或Chromium瀏覽器緊密集成，因此它能夠幫助我們發現更多的問題並提供更好的報告。希望通過本文，你能夠學會使用NodePuppeteer並在你的項目中發揮其作用。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/246095.html