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

皇上得了花柳病

发布于 2020-05-08 16:46:18

6K0

发布于 2020-05-08 16:46:18

文章被收录于专栏：小辰的技术分享

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))
{
   ...
}