C# 整合 Headless Chrome 的好工具 - Puppeteer Sharp

在我的工具箱，Headless Chrome 已取代 PhatomJS 成為擷取網頁內容、自動測試及網頁擷圖/轉 PDF 的首選。 之前我都是自己寫程式呼叫 chrome.exe 傳參數執行各項任務，最近發現更方便的選擇。

Puppeteer Sharp 是 Github 上的開源專案，作者 Darío Kondratiuk 寫了一組 C# API，方便 .NET 開發人員透過 Puppeteer 協定與 Headless Chrome 溝通，操作 Chrome 完成各種任務，省去管理 Process、組裝命令列參數、寫 Socekt 搞通訊協定等苦差事。

PuppeteerSharp 已放上 NuGet，透過 puppeteersharp 關鍵字就能快速找到它：(它是 .NET Standard 2.0 程式庫，專案至少要 .NET 4.6.1+ 或 .NET Core 2.0+ 才能使用)

先說 Puppeteer Sharp 的一項貼心設計：不需在伺服器安裝 Chrome，它會自行下載 Chromium。一來省去部署手續，二來程式用自己專屬的 Chromium 版本，就不會像我一樣，跟使用者共用 Chrome，結果 因自動升級功能遭遇問題。

故使用 Puppeteer Sharp 的起手式為：

await new BrowserFetcher().DownloadAsync(BrowserFetcher.DefaultRevision);
Browser browser = await Puppeteer.LaunchAsync(new LaunchOptions
{
   Headless = true
});

BrowserFetcher 負責確認 Chromium 是否已存在，若無則自動從 Internet 下載，檔案預設放在執行檔同目錄下的 .load-chromium 資料夾， 容量約 320MB，故第一次執行時要多等幾秒鐘，之後就不用了。(伺服器不一定能連 Internet，部署時記得將 .load-chromium 資料夾一起複製過去)

接著透過 Puppeteer.LaunchAsync() 傳入參數，即可建立一個 Headless Chrome 進行操作。

官方網站已提供許多實用範例，像是擷取網頁畫面、轉存 PDF、在網頁加入 HTML、執行 JavaScript 函式比對結果，足夠大家發揮巧思，組裝出各樣花式應用，這裡不再贅述。

Puppeteer Sharp 是 Puppeteer note.js API 的移植版，若要進階活用需深入了解 Puppeteer 指令，以下是一些資源：

• Puppeteer 官方網站
• Puppeteer API 參考文件
• Puppeteer API 參考文件(簡體中文版)
• Puppeteer 範例集

最後，來個簡單練習，我用高速公路 1968 即時路況網站當題材，寫一支排程抓取查詢北中南區的即時路況地圖畫面：

查過原始碼，左上區塊的「全部/北/中/南」按鈕，北中南分別是呼叫 region('N')、region('C') 及 region('P')，故我跳過 await page.ClickAsync("#region_a") 這種直接操作 HTML 元素的做法，改用 await page.EvaluteExpressionAsync("region('N')") 跑 JavaScript 指令操作網頁。

完整範例程式碼如下，補充說明我直接寫成註解，大家直接看 Code 吧。

using PuppeteerSharp;
using System;
using System.Threading;
using System.Threading.Tasks;

namespace PuppetTest
{
    class Program
    {
        static void Main(string[] args)
        {
            Test().Wait();
        }

        static async Task Test()
        {
            try
            {
                await new BrowserFetcher().DownloadAsync(BrowserFetcher.DefaultRevision);
                using (var browser = await Puppeteer.LaunchAsync(new LaunchOptions()
                {
                    Headless = true //偵測時可設定false觀察網頁顯示結果(註：非Headless時不能匯出PDF)
                }))
                {
                    using (var page = await browser.NewPageAsync())
                    {
                        await page.GoToAsync("https://1968.freeway.gov.tw/");
                        //透過SetViewport控制視窗大小決定抓圖尺寸
                        await page.SetViewportAsync(new ViewPortOptions
                        {
                            Width = 1024,
                            Height = 768
                        });

                        foreach (var region in "N,C,P".Split(','))
                        {
                            //呼叫網頁程式方法切換區域
                            await page.EvaluateExpressionAsync($"region('{region}')");
                            //要等待網頁切換顯示完成再抓圖
                            //最精準做法是依程式邏輯檢查AJAX動作是否完成，此處偷懶用萬用招：「等一下」
                            Thread.Sleep(1000); 
                            //抓網頁畫面存檔
                            await page.ScreenshotAsync($"D:\\FreewayTraffic\\Snapshot{region}.png");
                        }
                    }
                }
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.ToString());
                throw;
            }
        }
    }
}

這樣，每次執行可取得北中南三張路況網頁擷圖：

工具箱再添好用兵器一件。

Introduce of the handy Headless Chrome integration library - Puppeteer Sharp.