Puppeteer 支持的瀏覽器版本映射：從 v20.0.0 到 v23.6.0

自 Puppeteer v20.0.0 起，這個強大的自動化庫開始支持與 Chrome 瀏覽器的無頭模式和有頭模式共享相同代碼路徑，為自動化測試帶來了更多便利。從 v23.0.0 開始，Puppeteer 進一步擴展了其支持范圍，包括了 Firefox 瀏覽器的穩(wěn)定版本。在本文中，我們將詳細探討 Puppeteer 支持的瀏覽器版本，以及如何確保你的自動化測試環(huán)境與這些瀏覽器兼容。

Puppeteer 的瀏覽器支持歷史

Puppeteer 的發(fā)展歷程中，對不同瀏覽器的支持情況如下：

• v20.0.0 之前：Puppeteer 主要與 Chromium 瀏覽器一起使用。
• v20.0.0 起：開始支持 Chrome 瀏覽器的無頭模式和有頭模式。
• v23.0.0 起：增加了對 Firefox 瀏覽器穩(wěn)定版本的支持。

支持的瀏覽器版本映射

以下是 Puppeteer 版本與對應的支持瀏覽器版本映射表，幫助你選擇合適的 Puppeteer 版本以適配特定的瀏覽器：

Puppeteer 版本	Chrome 版本	Firefox 版本
v23.6.0	130.0.6723.58	131.0.3
v23.5.3	129.0.6668.100	131.0.2
v23.5.2	129.0.6668.91	131.0
v23.5.0	129.0.6668.89	131.0
v23.4.1	129.0.6668.70	130.0.1
v23.4.0	129.0.6668.58	130.0.1
…	…	…
v20.0.0	112.0.5615.121	Firefox Nightly

CLI命令和配置信息

你提供的CLI命令和配置信息是為了管理和配置Puppeteer在項目中的行為。下面是解釋和如何執(zhí)行這些步驟的詳細說明：

1. 運行CLI以下載新配置：

如果你想要為你的項目下載和管理瀏覽器配置，可以使用以下命令：

• 對于紗（Yarn）項目：

  yarn add puppeteer
  

• 對于PNPM項目：

  pnpm add puppeteer
  

• 使用npx來安裝并運行Puppeteer的瀏覽器安裝腳本：

  npx puppeteer browsers install
  

這個命令會下載并安裝Puppeteer依賴的瀏覽器（例如Chromium）。

2. 更改默認緩存位置：

從Puppeteer版本19.0.0開始，默認情況下，Puppeteer會將下載的瀏覽器存儲在全局緩存目錄~/.cache/puppeteer中。如果你需要更改這個默認行為，可以在你的項目目錄下創(chuàng)建一個.puppeteerrc.cjs配置文件。
下面是如何創(chuàng)建和配置.puppeteerrc.cjs文件：

• 在你的項目根目錄下創(chuàng)建一個名為.puppeteerrc.cjs的文件。
• 將以下內(nèi)容復制并粘貼到該文件中：

const { join } = require('path');
/*** @type {import("puppeteer").Configuration}*/
module.exports = {// Changes the cache location for Puppeteer.cacheDirectory: join(__dirname, '.cache', 'puppeteer'),
};

這個配置文件將Puppeteer的緩存目錄更改為你項目目錄下的.cache/puppeteer。

• 確保你的項目使用的是CommonJS模塊系統(tǒng)，因此文件擴展名是.cjs。
• 如果你使用的是ES模塊，那么文件名應該是.puppeteerrc.js，并且你需要使用export關鍵字而不是module.exports。
  完成這些步驟后，當你再次安裝Puppeteer或者運行相關的腳本時，它將使用你指定的緩存目錄。這有助于避免在不同構建環(huán)境中可能出現(xiàn)的緩存問題。

確保 Puppeteer 與瀏覽器版本的兼容性

確保 Puppeteer 與瀏覽器版本的兼容性是進行自動化測試時的一個重要考慮因素。以下是一些步驟和建議，幫助你確保 Puppeteer 腳本能夠在不同版本的瀏覽器上正常運行：

1. 檢查瀏覽器兼容性：
   定期查看 Puppeteer 的官方文檔，了解其支持的瀏覽器版本。Puppeteer 通常會支持最新的穩(wěn)定版本的 Chromium 和 Firefox。

2. 使用最新版本的 Puppeteer：
   保持 Puppeteer 更新到最新版本，這樣可以確保你使用的是與最新瀏覽器版本兼容的 Puppeteer。

3. 測試前的瀏覽器檢查：
   在腳本開始時，檢查瀏覽器的版本信息，確保它在 Puppeteer 支持的范圍內(nèi)。如果版本不兼容，可以提醒用戶更新瀏覽器或使用其他支持的版本。

   const puppeteer = require('puppeteer');(async () => {const browser = await puppeteer.launch();const browserVersion = await browser.version();console.log(`Browser version: ${browserVersion}`);// 可以添加邏輯來檢查版本并做出相應的處理await browser.close();
   })();
   

4. 使用特性檢測：
   在你的 Puppeteer 腳本中，使用特性檢測來確定當前瀏覽器是否支持某個特定的 API 或功能。這可以避免在不支持的瀏覽器上運行時出現(xiàn)錯誤。

5. 使用無頭模式的兼容性選項：
   當使用無頭模式時，可以通過設置 args 參數(shù)來指定一些兼容性選項，例如模擬不同的用戶代理或其他啟動參數(shù)。

6. 跨瀏覽器測試：
   使用跨瀏覽器測試服務，如 BrowserStack 或 Sauce Labs，這些服務提供了不同瀏覽器和操作系統(tǒng)的測試環(huán)境。

7. 監(jiān)聽和處理錯誤：
   在你的 Puppeteer 腳本中添加錯誤處理邏輯，以便在出現(xiàn)兼容性問題時能夠優(yōu)雅地處理。

8. 保持代碼的靈活性：
   編寫靈活的代碼，以便在不同的瀏覽器版本之間進行切換時，可以快速適應。

9. 使用功能標志：
   對于某些實驗性或版本特定的功能，使用功能標志來控制這些功能的啟用和禁用。

10. 編寫可維護的代碼：
    編寫清晰、模塊化的代碼，這樣在瀏覽器更新后，你可以更容易地更新和維護你的 Puppeteer 腳本。

11. 監(jiān)控社區(qū)動態(tài)：
    關注 Puppeteer 和瀏覽器開發(fā)者社區(qū)的動態(tài)，了解即將到來的更改和潛在的兼容性問題。

12. 自動化測試：
    設置自動化測試管道，定期運行你的 Puppeteer 腳本，確保在瀏覽器更新后腳本仍然能夠正常工作。

通過遵循上述步驟，你可以最大限度地確保你的 Puppeteer 腳本與不同版本的瀏覽器兼容，從而提高測試的穩(wěn)定性和可靠性。

注意事項

• 如果未列出完全匹配的 Puppeteer 版本，則支持的瀏覽器版本為前一個版本。
• 在進行自動化測試時，確保測試環(huán)境的瀏覽器版本與 Puppeteer 版本兼容。
• 對于生產(chǎn)環(huán)境，如果涉及到實際的貨幣交易，需要特別注意支付流程的測試，以避免潛在的風險。

結語

隨著 Puppeteer 的不斷更新，它在瀏覽器自動化領域的應用越來越廣泛。了解并選擇合適的 Puppeteer 版本，以確保你的自動化測試能夠順利運行在支持的瀏覽器上，對于提高測試效率和準確性至關重要。通過上述版本映射表，你可以輕松地為你的自動化測試選擇合適的 Puppeteer 和瀏覽器版本。