Puppeteer Sharp: 使用C#和Headless Chrome爬网页

Puppeteer 是谷歌构建的流行的Headless Chrome NodeJS API爬虫库。Puppeteer Sharp是用C#写的，由达里奥·孔德拉蒂乌克于2017年发行，为.NET开发者提供同样的功能。

Puppeteer logo

Puppeteer Sharp使 .NET 开发人员能够以编程方式控制开源的谷歌浏览器。Puppeteer API 的便利性是能够使用浏览器的无头特性，而不需要把浏览器显示出来，以此提高性能。

Why use Puppeteer Sharp?

如果您是 .NET 开发人员，通过 Nuget 包安装到项目中可以实现：

• 使用无头 Web 浏览器抓取 Web
• 使用测试框架自动测试Web 应用程序
• 检索 JavaScript 呈现的 HTML

在现代 Web 中，Web 应用程序通常依赖 JavaScript 来加载 UI。如果您用爬虫加载必应地图，您可能会失望地收到：

Bing Maps empty

除了检索JavaScript呈现的HTML，Puppeteer Sharp 还能够通过注入HTML来导航网站;与UI元素交互;截图或创建PDF，并且现在有更多的功能包含在流行的谷歌NodeJS API中。

Getting Started

在新或现有的 .NET 项目中使用Puppeteer Sharp 。安装最新版本的Nuget包"PuppeteeSharp"。

image.png

首先我们需要下载Chrome浏览器到本地。这是Puppeteer Sharp将使用与网站交互的浏览器。 幸运的是，我们可以使用 C# 下载默认修订版或开发人员指定的修订版。仅当本地计算机上不存在该修订版本时，才会下载。

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

如果下载成功，您将在项目目录中看到在操作系统上运行所需的浏览器版本：

image.png

加载网页

现在，您已将浏览器下载到本地计算机，您可以开始加载网页并检索 JavaScript 呈现的 HTML。 首先，我们将启动无头 Web 浏览器的实例，加载新选项卡并转到"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

在无头浏览器中成功加载网页后，让我们通过搜索本地旅游景点与网页进行交互：

// 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呈现的必应地图HTML互动，并搜索"CN Tower, Toronto, Ontario, Canada"！ 如果要存储 HTML 以分析地址或描述等信息，可以轻松地将 HTML 存储在变量中：

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

完成后，关闭浏览器以释放资源：

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

屏幕截图和 PDF 文档

Puppeteer Sharp的好处之一是能够生成当前页面的屏幕截图和 PDF 文档。这对于调试、自动测试或以特定分辨率捕获网页特别有用。 如果您想获取当前页面的屏幕截图：

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

Puppeteer screenshots

或者，要生成当前页面的 PDF 文档：

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

image.png

更改网页大小

如果需要测试特定显示大小的网页（例如查看页面在手机上的显示方式），可以使用 Puppeter Sharp 更改当前页面的网页的大小：

// 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对于监视和检测与网页用户界面相关的问题很有用， .NET 开发人员可以使用 Puppeteer Sharp 来检查任何网络性能问题。

为此，我们可以启动和停止跟踪日志：

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

...

await page.Tracing.StopAsync();

image.png

如果跟踪日志未捕获调试会话中所需的详细信息，则可以启用 Chrome DevTools 以进一步的分析：

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

如果您在Puppeteer Sharp中启用 Chrome DevTools，则无头配置将自动禁用，您将能够查看浏览器，而 DevTools 将显示查看 Web 应用程序的 JavaScript 呈现代码的选项，以及查看网络活动等功能。

image.png

连接到远程浏览器

Puppeteer Sharp的最后一个功能，是连接到远程浏览器的能力。如果您的服务器上无法安装浏览器（比如Linux），则此功能可能很有用。

比如老外的这个browserless.io：，不差钱的童鞋可以使用

image.png

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

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

项目捐助

项目官网 puppeteersharp.com.