JavaScript >> Javascript 文檔 >  >> Node.js

使用 Node.js 自動化 Google Chrome

您知道 Chrome 現在附帶了在無頭模式下運行的選項嗎?該功能稱為 Headless Chrome,它使開發人員可以非常輕鬆地配置無頭瀏覽器環境並運行強大的自動化測試。

在本教程中,我們將討論它的各種功能並運行幾個很酷的示例。開始吧!

什麼是無頭 Chrome

Headless Chrome 允許我們從命令行運行瀏覽器,而無需實際打開 Chrome 窗口。模擬瀏覽器環境具有與常規 Chrome 相同的功能,可以加載我們告訴它的任何網站或應用程序。

最重要的是,我們有大量用於與頁面交互的控件。我們可以點擊元素、模擬鍵盤輸入、調整瀏覽器大小等等。使用這些控件,我們可以編寫各種有用的腳本。

以下是一些通常在無頭環境中完成的任務示例:

  • 生成屏幕截圖和 PDF。
  • 在鏈接和應用狀態之間導航。
  • 自動化用戶輸入和表單驗證測試。
  • 從網站和 SPA 中抓取數據。
  • 監控性能。

因為 Headless Chrome 有一個相當低級的 API,所以最好通過庫來訪問它。在本教程中,我們將使用 Puppeteer。該項目由 Chrome DevTools 團隊維護,並擁有一個非常易於使用的優秀 API。

安裝

要使用 Puppeteer,您需要安裝 Node.js。您可以在此處了解如何操作。請注意,本教程中的所有示例都嚴重依賴於 async/away 語法。它僅在較新的 Node.js 版本中可用,因此請確保您運行的版本高於 v7.6.0。

node --version
v8.3.0

進入你的項目目錄,初始化 npm 並安裝 Puppeteer。您可能需要 sudo 訪問權限。

npm init
npm i puppeteer

安裝可能需要幾分鐘。這是因為與大多數其他無頭測試框架不同,Puppeteer 會自動為您下載一個 Chromium 版本(大約 100mb)。這實際上是一個非常好的功能,因為您不必手動設置和維護本地 Chrome 實例。

創建一個 index.js 要處理的文件,我們準備好了!

屏幕截圖

使用 puppeteer 截取屏幕截圖非常容易,並且有很多選項可用於獲得我們需要的確切結果。我們將從一個基本示例開始,並以此為基礎。

下面我們簡單地啟動一個無頭瀏覽器,打開一個頁面,並對其所有內容進行截圖。

const puppeteer = require('puppeteer');

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

  await page.goto('https://tutorialzine.com');
  await page.screenshot({
    path: 'landing-page.png',
    fullPage: true
  });

  browser.close();
})();

要運行我們的 Puppeteer 應用程序,我們只需調用 index.js 帶有節點的文件。在實際項目中,您可能需要一些 npm 腳本來進一步自動化該過程。

node index.js

如果沒有任何錯誤,我們應該有一個 langing-page.png 我們的工作目錄中的文件。默認情況下,屏幕截圖的尺寸為 800 像素 x 600 像素,但由於我們設置了 fullPage 標記為 true,我們的圖像寬度為 800 像素,高度適合頁面上的所有內容。

截屏時,Puppeteer 將模擬具有所需寬度的瀏覽器窗口。如果我們正在測試的頁面是響應式的,我們將獲得它在該視口中的外觀快照。我們可以通過 setViewport 方法改變它的尺寸。

await page.setViewport({
  width: 1600, 
  height: 1000
});

使用這種方法,我們可以修改我們的腳本以獲取不同設備尺寸的多個屏幕截圖。這將使我們能夠快速查看頁面的響應是否按預期工作。

const puppeteer = require('puppeteer');

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

  // Ann array of viewport sizes for different devices.
  const viewports = [1600, 1000, 800, 600, 500];

  await page.goto('https://tutorialzine.com');

  for(let i=0; i < viewports.length; i++) {
    let vw = viewports[i];

    // The height doesn't matter since we are screenshotting the full page.
    await page.setViewport({
      width: vw,
      height: 1000
    });

    await page.screenshot({
      path: `screen-${vw}.png`,
      fullPage: true
    });
  }

  browser.close();
})();

運行此腳本將生成 5 張圖像,為我們定義的每個視口生成一張。

您可以使用 screenshot() 執行許多其他操作 方法。您可以捕捉頁面的孤立部分、更改圖像的質量和格式等。在此處查看文檔。

與 UI 交互

使用 Puppeteer,我們可以訪問頁面上的所有元素。這包括文本和圖像等所有靜態內容,以及鏈接、輸入字段、按鈕等交互式元素。使用自動化控件,我們可以抓取網站、測試鏈接和驗證表單。

例如,這是一個腳本,它加載我們的登錄頁面、打開搜索表單並蒐索術語“JavaScript”。我們將在關閉無頭模式的情況下運行此示例,以便查看發生了什麼。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false
  });
  const page = await browser.newPage();

  // Open page.
  await page.goto('https://tutorialzine.com');

  // Show search form.
  await page.click('.search-trigger');

  // Focus input field.
  await page.focus('#search-form-top input');

  // Type in query.
  await page.type('JavaScript', {delay: 200});

  // Submit the form.
  const searchForm = await page.$('#search-form-top');
  await searchForm.evaluate(searchForm => searchForm.submit());

  // Keep the browser open.
  // browser.close();
})();

由於我們使用的是 async/await 語法,因此所有步驟都將按照正確的順序執行並相互等待完成。

結論

如果您正在尋找一種自動化瀏覽器測試的方法,Puppeteer 可能是目前最用戶友好的工具。它有一個結構良好的 API 和一個清晰的、只包含基本要素的文檔,非常容易理解。

由於 Puppeteer 基於 Headless Chrome,您將無法測試除 Chrome 之外的任何瀏覽器。對於自動化其他平台,您可能需要嘗試 Selenium 框架。


Tutorial JavaScript 教程
  1. 使用 p5 庫時面向鼠標的旋轉不正確

  2. 使用 Create React App、EsLint、Flow、Jest 和 Enzyme 設置您的 React 工作流程

  3. 如何檢測在線/離線事件跨瀏覽器?

  4. 使用 React 提高 Angular 性能

  5. 如何:使用 LinguiJS 和 Localazy 本地化您的 React 應用程序

  6. 學習 React 的完整路線圖

  7. 未定義的範圍值

  1. JavaScript 中未定義和未定義的區別 |代碼

  2. 從零開始的 HTML 畫布遊戲 #1

  3. 為正在運行的物體創建一個“尾巴”

  4. 按鈕或鏈接 - 選擇哪個?

  5. 5個強大的前端開發技能,讓你找到第一份工作

  6. Node.js 7.7.2 發布簡介

  7. 在 Angular 10 中設置 TailwindCss

  1. 我如何在 Node.js 中製作 Instagram 內容獲取 API

  2. 使用全棧 React 和 AWS 構建 SaaS 應用程序

  3. 創建我的十一網站

  4. 使用 Tailwind 和 Framer Motion 創建深色主題切換