Puppeteer Sharp: 使用C#和Headless Chrome爬網(wǎng)頁

Puppeteer 是谷歌構(gòu)建的流行的Headless Chrome NodeJS API爬蟲庫痊班。Puppeteer Sharp是用C#寫的，由達里奧·孔德拉蒂烏克于2017年發(fā)行，為.NET開發(fā)者提供同樣的功能纱烘。

Puppeteer logo

Puppeteer Sharp使 .NET 開發(fā)人員能夠以編程方式控制開源的谷歌瀏覽器雳灵。Puppeteer API 的便利性是能夠使用瀏覽器的無頭特性，而不需要把瀏覽器顯示出來糊肠，以此提高性能辨宠。

Why use Puppeteer Sharp?

如果您是 .NET 開發(fā)人員，通過 Nuget 包安裝到項目中可以實現(xiàn)：

使用無頭 Web 瀏覽器抓取 Web
使用測試框架自動測試Web 應用程序
檢索 JavaScript 呈現(xiàn)的 HTML

在現(xiàn)代 Web 中货裹，Web 應用程序通常依賴 JavaScript 來加載 UI嗤形。如果您用爬蟲加載必應地圖，您可能會失望地收到：

Bing Maps empty

除了檢索JavaScript呈現(xiàn)的HTML弧圆，Puppeteer Sharp 還能夠通過注入HTML來導航網(wǎng)站;與UI元素交互;截圖或創(chuàng)建PDF赋兵，并且現(xiàn)在有更多的功能包含在流行的谷歌NodeJS API中。

Getting Started

在新或現(xiàn)有的 .NET 項目中使用Puppeteer Sharp 搔预。安裝最新版本的Nuget包"PuppeteeSharp"霹期。

image.png

首先我們需要下載Chrome瀏覽器到本地。這是Puppeteer Sharp將使用與網(wǎng)站交互的瀏覽器斯撮。
幸運的是经伙，我們可以使用 C# 下載默認修訂版或開發(fā)人員指定的修訂版。僅當本地計算機上不存在該修訂版本時，才會下載帕膜。

// Download the Chromium revision if it does not already exist
await new BrowserFetcher().DownloadAsync(BrowserFetcher.DefaultRevision);

如果下載成功枣氧，您將在項目目錄中看到在操作系統(tǒng)上運行所需的瀏覽器版本：

image.png

加載網(wǎng)頁

現(xiàn)在，您已將瀏覽器下載到本地計算機垮刹，您可以開始加載網(wǎng)頁并檢索 JavaScript 呈現(xiàn)的 HTML达吞。
首先，我們將啟動無頭 Web 瀏覽器的實例荒典，加載新選項卡并轉(zhuǎn)到"https://www.bing.com/地圖"：

// Create an instance of the browser and configure launch options
Browser browser = await Puppeteer.LaunchAsync(new LaunchOptions
{
   Headless = true
});

// Create a new page and go to Bing Maps
Page page = await browser.NewPageAsync();
await page.GoToAsync("https://www.bing.com/maps");

image.png

在無頭瀏覽器中成功加載網(wǎng)頁后酪劫，讓我們通過搜索本地旅游景點與網(wǎng)頁進行交互：

// Search for a local tourist attraction on Bing Maps
await page.WaitForSelectorAsync(".searchbox input");
await page.FocusAsync(".searchbox input");
await page.Keyboard.TypeAsync("CN Tower, Toronto, Ontario, Canada");
await page.ClickAsync(".searchIcon");
await page.WaitForNavigationAsync();

我們可以使用Puppeteer Sharp與JavaScript呈現(xiàn)的必應地圖HTML互動，并搜索"CN Tower, Toronto, Ontario, Canada"寺董！
如果要存儲 HTML 以分析地址或描述等信息覆糟，可以輕松地將 HTML 存儲在變量中：

// Store the HTML of the current page
string content = await page.GetContentAsync();

完成后，關(guān)閉瀏覽器以釋放資源：

// Close the browser
await browser.CloseAsync();

屏幕截圖和 PDF 文檔

Puppeteer Sharp的好處之一是能夠生成當前頁面的屏幕截圖和 PDF 文檔遮咖。這對于調(diào)試滩字、自動測試或以特定分辨率捕獲網(wǎng)頁特別有用。
如果您想獲取當前頁面的屏幕截圖：

await page.ScreenshotAsync("C:\\Files\\screenshot.png");

Puppeteer screenshots

或者御吞，要生成當前頁面的 PDF 文檔：

await page.PdfAsync("C:\\Files\\document.pdf");

image.png

更改網(wǎng)頁大小

如果需要測試特定顯示大小的網(wǎng)頁（例如查看頁面在手機上的顯示方式）麦箍，可以使用 Puppeter Sharp 更改當前頁面的網(wǎng)頁的大小：

// Change the size of the view port to simulate the iPhone X
await page.SetViewportAsync(new ViewPortOptions
{
    Width = 1125,
    Height = 2436
});

image.png

跟蹤日志

除了上述功能陶珠，Puppeteer Sharp對于監(jiān)視和檢測與網(wǎng)頁用戶界面相關(guān)的問題很有用挟裂， .NET 開發(fā)人員可以使用 Puppeteer Sharp 來檢查任何網(wǎng)絡(luò)性能問題。

為此揍诽，我們可以啟動和停止跟蹤日志：

await page.Tracing.StartAsync(new TracingOptions { Path = "C:\\Files\\trace.json" });

...

await page.Tracing.StopAsync();

image.png

如果跟蹤日志未捕獲調(diào)試會話中所需的詳細信息诀蓉，則可以啟用 Chrome DevTools 以進一步的分析：

Browser browser = await Puppeteer.LaunchAsync(new LaunchOptions
{
   Devtools = true
});

如果您在Puppeteer Sharp中啟用 Chrome DevTools，則無頭配置將自動禁用寝姿，您將能夠查看瀏覽器交排，而 DevTools 將顯示查看 Web 應用程序的 JavaScript 呈現(xiàn)代碼的選項，以及查看網(wǎng)絡(luò)活動等功能饵筑。

image.png

連接到遠程瀏覽器

Puppeteer Sharp的最后一個功能埃篓，是連接到遠程瀏覽器的能力。如果您的服務(wù)器上無法安裝瀏覽器（比如Linux）根资，則此功能可能很有用架专。

比如老外的這個browserless.io：，不差錢的童鞋可以使用

image.png

var connectOptions = new ConnectOptions()
{
   BrowserWSEndpoint = "$wss://chrome.browserless.io/"
};

using (var browser = await Puppeteer.ConnectAsync(connectOptions))
{
   ...
}

項目捐助

項目官網(wǎng) puppeteersharp.com.