nodejs抓取动态网页(Web浏览器呈现的HTML，您可以开始网页并JavaScript吗？)

　　nodejs抓取动态网页(Web浏览器呈现的HTML，您可以开始网页并JavaScript吗？)

　　Puppeteer 是一个流行的 Headless Chrome NodeJS API 爬虫库，由 Google 构建。 Puppeteer Sharp 是用 C# 编写的，由 Dario Kondratiuque 于 2017 年发布，为 .NET 开发人员提供相同的功能。

　　

　　傀儡师标志

　　Puppeteer Sharp 使 .NET 开发人员能够以编程方式控制开源 Google Chrome。 Puppeteer API 的便利之处在于能够使用浏览器的 headless 特性而无需显示浏览器来提高性能。

　　为什么要使用 Puppeteer Sharp？

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

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

　　

　　Bing 地图为空

　　Puppeteer Sharp 除了检索 JavaScript 渲染的 HTML 之外，还可以注入 HTML 进行导航网站；与 UI 元素交互；截取屏幕截图或创建 PDF，现在流行的 Google NodeJS API 中收录更*敏*感*词*。

　　入门

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

　　

　　图像.png

　　首先我们需要将Chrome浏览器下载到本地。这是 Puppeteer Sharp 将用于与 网站 交互的浏览器。

　　幸运的是，我们可以使用 C# 下载默认修订版或开发者指定的修订版。仅当本地计算机上不存在修订版时才会下载。

　　// Download the Chromium revision if it does not already exist

await new BrowserFetcher().DownloadAsync(BrowserFetcher.DefaultRevision);

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

　　

　　图像.png

　　加载网页

　　现在您已将浏览器下载到本地计算机，您可以开始加载网页并检索 JavaScript 呈现的 HTML。

　　首先，我们将启动一个无头 Web 浏览器的实例，加载一个新选项卡并转到“地图”：

　　// 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");

　　

　　图像.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渲染的Bing地图HTML进行交互，搜索“加拿大安大略省多伦多CN塔”！

　　如果您想存储 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");

　　

　　人偶截图

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

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

　　

　　图像.png

　　更改页面大小

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

　　// Change the size of the view port to simulate the iPhone X

await page.SetViewportAsync(new ViewPortOptions

{

Width = 1125,

Height = 2436

});

　　

　　图像.png

　　跟踪日志

　　除了上述功能外，Puppeteer Sharp 还可用于监控和检测与网络用户界面相关的问题。 .NET 开发人员可以使用 Puppeteer Sharp 检查任何网络性能问题。

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

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

...

await page.Tracing.StopAsync();

　　

　　图像.png

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

　　Browser browser = await Puppeteer.LaunchAsync(new LaunchOptions

{

Devtools = true

});

　　如果在 Puppeteer Sharp 中启用 Chrome DevTools，headless 配置将自动禁用，您将可以查看浏览器，并且 DevTools 将显示查看 Web 应用程序的 JavaScript 渲染代码的选项，以及诸如查看网络活动。

　　

　　图像.png

　　连接到远程浏览器

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

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

　　

　　图像.png

　　var connectOptions = new ConnectOptions()

{

BrowserWSEndpoint = "$wss://chrome.browserless.io/"

};

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

{

...

}

　　项目捐赠

　　项目官网。