前言

如何將網(wǎng)頁生成預(yù)覽圖？

要實(shí)現(xiàn)這個(gè)功能，可以用WebBrowser組件模擬瀏覽器，或者使用系統(tǒng)瀏覽器訪問網(wǎng)頁，再進(jìn)行截圖操作。

但是，這樣需要編寫大量的控制代碼。

工欲善其事，必先利其器！

利用Playwright提供的強(qiáng)大API，可以輕松實(shí)現(xiàn)將網(wǎng)頁生成預(yù)覽圖。

Screenshot

實(shí)現(xiàn)起來非常簡單，直接上代碼：

static?async?Task?Main(string[]?args) {var?playwright?=?await?Playwright.CreateAsync();await?using?var?browser?=?await?playwright.Chromium.LaunchAsync();var?page?=?await?browser.NewPageAsync();await?page.GotoAsync("https://cn.bing.com/search?q=intext%3A%22%E8%AF%B7%E5%85%B3%E6%B3%A8%E6%88%91%E7%9A%84%E4%B8%AA%E4%BA%BA%E5%85%AC%E4%BC%97%E5%8F%B7%E2%80%9DMy+IO%E2%80%9C%22");await?page.ScreenshotAsync(new?PageScreenshotOptions?{?Path?=?"screenshot.png",?FullPage?=?true}); }

訪問網(wǎng)頁，截取成長圖，并保存到指定路徑。

API詳細(xì)說明，請參看：https://playwright.dev/dotnet/docs/api/class-page#page-screenshot

Tracing

這個(gè)功能可以記錄Playwright執(zhí)行的所有操作流程并截圖，對于獲取演示素材非常有用。

下面的示例代碼，記錄了打開bing首頁，并且執(zhí)行搜索操作的全過程：

static?async?Task?Main(string[]?args) {var?playwright?=?await?Playwright.CreateAsync();var?browser?=?await?playwright.Chromium.LaunchAsync();var?context?=?await?browser.NewContextAsync();await?context.Tracing.StartAsync(new?TracingStartOptions()?{?Screenshots?=true?,?Snapshots?=true??});var?page?=?await?context.NewPageAsync();await?page.GotoAsync("https://cn.bing.com/");//?輸入搜索關(guān)鍵字await?page.TypeAsync("input[name='q']",?"intext:\"請關(guān)注我的個(gè)人公眾號”My?IO“\"");var?page1?=?await?page.RunAndWaitForNavigationAsync(async?()?=>{//?點(diǎn)擊搜索await?page.ClickAsync("#search_icon");});await?context.Tracing.StopAsync(new?TracingStopOptions()?{?Path?=?"trace.zip"?}); }

可以使用Playwright自帶的view工具查看整個(gè)流程：

playwright?show-trace?bin\Debug\net5.0\trace.zip

也可以解壓trace.zip，拿到所有的截屏圖片：

結(jié)論

有了Playwright，再也不怕要求實(shí)現(xiàn)網(wǎng)頁加載后將頁面截取成長圖片功能了。

如果你覺得這篇文章對你有所啟發(fā)，請關(guān)注我的個(gè)人公眾號”My IO“

總結(jié)

以上是生活随笔為你收集整理的C#实现网页加载后将页面截取成长图片 | Playwright版的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。