什么是瀏覽器自動(dòng)化？

自動(dòng)化是現(xiàn)代科技的重要標(biāo)志，它使得機(jī)器設(shè)備、系統(tǒng)或過(guò)程可以在沒(méi)有人或較少人的直接參與下，按照人的要求，通過(guò)自動(dòng)檢測(cè)、信息處理、分析判斷、操縱控制，實(shí)現(xiàn)預(yù)期的目標(biāo)。在工業(yè)、農(nóng)業(yè)、軍事、科學(xué)研究、交通運(yùn)輸、商業(yè)、醫(yī)療、服務(wù)和家庭等方面廣泛應(yīng)用。

瀏覽器自動(dòng)化就是其中的一種，它使用應(yīng)用程序?yàn)槲覀兺瓿芍貜?fù)性的任務(wù)，以實(shí)現(xiàn)人為干預(yù)無(wú)法實(shí)現(xiàn)的速度和效率水平。

那么，為什么我們需要瀏覽器自動(dòng)化呢？實(shí)際上，瀏覽器自動(dòng)化有很多使用場(chǎng)景：

自動(dòng)點(diǎn)擊網(wǎng)頁(yè)：最常見(jiàn)的瀏覽器自動(dòng)化任務(wù)之一是自動(dòng)單擊網(wǎng)頁(yè)中的按鈕或鏈接。單擊按鈕用于導(dǎo)航網(wǎng)站、確認(rèn)數(shù)據(jù)輸入操作、選擇指向其他頁(yè)面的鏈接或取消導(dǎo)航。

自動(dòng)填寫(xiě)表單：可以自動(dòng)執(zhí)行重復(fù)的數(shù)據(jù)輸入任務(wù)。源數(shù)據(jù)可能來(lái)自數(shù)據(jù)庫(kù)、Excel 或 CSV 文件，甚至從另一個(gè)應(yīng)用程序中讀取數(shù)據(jù)。然后，它可以自動(dòng)輸入到表單中，并通過(guò)單擊按鈕接受信息。

從網(wǎng)頁(yè)中提取數(shù)據(jù)：當(dāng)執(zhí)行數(shù)據(jù)輸入或搜索任務(wù)時(shí)，通常需要從網(wǎng)頁(yè)中提取結(jié)果。結(jié)果可以是 HTML 標(biāo)記、文本或字段值、指向文件的超鏈接，或者在自動(dòng)化后續(xù)過(guò)程中可能需要使用的任何其他特定屬性。

自動(dòng)化測(cè)試：自動(dòng)化測(cè)試包含了很多方面，比如性能測(cè)試。但在瀏覽器自動(dòng)化中，我們一般指的是端到端功能測(cè)試。例如，檢查在登錄頁(yè)面上輸入無(wú)效的登錄名或密碼時(shí)，是否會(huì)顯示一條錯(cuò)誤消息。

自動(dòng)點(diǎn)擊網(wǎng)頁(yè)：最常見(jiàn)的瀏覽器自動(dòng)化任務(wù)之一是自動(dòng)單擊網(wǎng)頁(yè)中的按鈕或鏈接。單擊按鈕用于導(dǎo)航網(wǎng)站、確認(rèn)數(shù)據(jù)輸入操作、選擇指向其他頁(yè)面的鏈接或取消導(dǎo)航。

自動(dòng)填寫(xiě)表單：可以自動(dòng)執(zhí)行重復(fù)的數(shù)據(jù)輸入任務(wù)。源數(shù)據(jù)可能來(lái)自數(shù)據(jù)庫(kù)、Excel 或 CSV 文件，甚至從另一個(gè)應(yīng)用程序中讀取數(shù)據(jù)。然后，它可以自動(dòng)輸入到表單中，并通過(guò)單擊按鈕接受信息。

從網(wǎng)頁(yè)中提取數(shù)據(jù)：當(dāng)執(zhí)行數(shù)據(jù)輸入或搜索任務(wù)時(shí)，通常需要從網(wǎng)頁(yè)中提取結(jié)果。結(jié)果可以是 HTML 標(biāo)記、文本或字段值、指向文件的超鏈接，或者在自動(dòng)化后續(xù)過(guò)程中可能需要使用的任何其他特定屬性。

自動(dòng)化測(cè)試：自動(dòng)化測(cè)試包含了很多方面，比如性能測(cè)試。但在瀏覽器自動(dòng)化中，我們一般指的是端到端功能測(cè)試。例如，檢查在登錄頁(yè)面上輸入無(wú)效的登錄名或密碼時(shí)，是否會(huì)顯示一條錯(cuò)誤消息。

實(shí)現(xiàn)瀏覽器自動(dòng)化需要考慮如何實(shí)現(xiàn)應(yīng)用程序與瀏覽器進(jìn)行交互，這聽(tīng)起來(lái)很具有挑戰(zhàn)性。但幸運(yùn)的是，市面上已經(jīng)有了一些很棒的工具，幫助我們實(shí)現(xiàn)瀏覽器自動(dòng)化。其中，Playwright 是一款強(qiáng)大的瀏覽器自動(dòng)化工具，可以讓你輕松地完成上述任務(wù)。

什么是 Playwright？

Playwright是一款由Microsoft開(kāi)發(fā)和維護(hù)的開(kāi)源跨瀏覽器自動(dòng)化庫(kù)，它專為Web應(yīng)用程序而設(shè)計(jì)。Playwright的特點(diǎn)非常豐富，包括跨瀏覽器、跨平臺(tái)、跨語(yǔ)言、自動(dòng)等待、支持多標(biāo)簽頁(yè)/瀏覽器窗口、調(diào)試工具支持等等。其中最值得一提的是自動(dòng)等待功能，它可以在執(zhí)行動(dòng)作之前等待元素是可操作的，消除了人為超時(shí)的需要，這是導(dǎo)致測(cè)試不可靠的主要原因。此外，它還支持多標(biāo)簽頁(yè)/瀏覽器窗口，可以像一個(gè)真正的用戶一樣與多頁(yè)面、多網(wǎng)站交互，并輕松處理frames和瀏覽器事件。另外，它提供了許多不同的調(diào)試選項(xiàng)，使其對(duì)開(kāi)發(fā)人員友好。

展開(kāi)全文

與老牌的自動(dòng)化測(cè)試框架Selenium相比，Playwright更加現(xiàn)代化。Selenium的實(shí)現(xiàn)是非常臃腫的3層架構(gòu)，因?yàn)樗枰粋€(gè)特有瀏覽器的WebDriver中間層實(shí)現(xiàn)來(lái)與瀏覽器進(jìn)行交互。而現(xiàn)代瀏覽器已經(jīng)支持了一些原生的功能，比如Chrome DevTools Protocol，它允許開(kāi)發(fā)者通過(guò)一個(gè)簡(jiǎn)單的WebSocket連接與瀏覽器進(jìn)行交互，這些功能都是基于標(biāo)準(zhǔn)的，而不是特定瀏覽器的。因此，Playwright無(wú)需瀏覽器幫它實(shí)現(xiàn)任何功能，而是利用這些原生功能直接與瀏覽器進(jìn)行交互，來(lái)實(shí)現(xiàn)瀏覽器自動(dòng)化。這使得Playwright的架構(gòu)更加簡(jiǎn)單，更加現(xiàn)代。

總之，Playwright是一款功能強(qiáng)大、現(xiàn)代化的瀏覽器自動(dòng)化工具，它可以更快、更可靠地完成瀏覽器自動(dòng)化操作。

Hello Playwright

Playwright是一種跨平臺(tái)的開(kāi)源瀏覽器自動(dòng)化工具，支持多種編程語(yǔ)言，包括Java、Type、Python、Java和C#。在這里，我們將使用C#編寫(xiě)示例代碼。接下來(lái)，我們將從設(shè)置C#開(kāi)發(fā)環(huán)境開(kāi)始，讓你快速掌握Playwright的使用方法。

設(shè)置開(kāi)發(fā)環(huán)境

雖然可以使用不同的方式開(kāi)發(fā)C#代碼，但是大多數(shù)C#程序員還是使用Microsoft Visual Studio。因此，我們選擇Visual Studio作為本書(shū)的集成開(kāi)發(fā)環(huán)境(IDE)。

首先，用瀏覽器訪問(wèn) https://visualstudio.microsoft.com/zh-hans/downloads，下載所需的Visual Studio版本，保存到“下載”文件夾。 運(yùn)行剛才下載的引導(dǎo)程序文件以安裝Visual Studio Installer。安裝完Visual Studio Installer后，可以使用它通過(guò)選擇所需的功能集或工作負(fù)載來(lái)自定義安裝。在這里，我們選中“ASP.NET 和 Web 開(kāi)發(fā)”和“.NET 桌面開(kāi)發(fā)”，點(diǎn)擊“安裝”按鈕，等待安裝完成。

創(chuàng)建C#項(xiàng)目

運(yùn)行安裝好的Visual Studio，在“開(kāi)始”窗口中，選擇“創(chuàng)建新項(xiàng)目”。在“創(chuàng)建新項(xiàng)目”窗口中，選擇“控制臺(tái)應(yīng)用”作為要?jiǎng)?chuàng)建的應(yīng)用類型，點(diǎn)擊“下一步”按鈕。在“配置新項(xiàng)目”窗口中，輸入“項(xiàng)目名稱”和“位置”，點(diǎn)擊“下一步”按鈕。在“其他信息”窗口中，選擇“.NET 6.0”作為目標(biāo)框架。點(diǎn)擊“創(chuàng)建”按鈕，完成項(xiàng)目的創(chuàng)建。

添加Playwright依賴

在Visual Studio的右側(cè)“解決方案資源管理器”的項(xiàng)目名稱上點(diǎn)右鍵，選擇“在終端中打開(kāi)”，進(jìn)入開(kāi)發(fā)者PowerShell窗口。 在開(kāi)發(fā)者PowerShell窗口中運(yùn)行以下命令，安裝Playwright依賴：

dotnet add package Microsoft.Playwright

然后在頂部菜單欄中，依次選擇“生成”“生成解決方案”，等待項(xiàng)目生成成功。

安裝瀏覽器

需要注意的是，Playwright自己?jiǎn)?dòng)的瀏覽器，并不是我們?cè)诒緳C(jī)已安裝的普通瀏覽器程序，而是使用它自帶的瀏覽器二進(jìn)制文件。這樣就避免了當(dāng)機(jī)器上沒(méi)有安裝指定類型的瀏覽器而無(wú)法運(yùn)行應(yīng)用程序的問(wèn)題。因此，我們需要在開(kāi)發(fā)者PowerShell窗口中運(yùn)行以下命令，安裝Playwright所有受支持的瀏覽器二進(jìn)制文件：

.\bin\Debug\net6.0\playwright.ps1 install

需要注意的是，瀏覽器二進(jìn)制文件只需要安裝一次，以后就不需要再安裝了。

編寫(xiě)代碼

在代碼編輯器中，全部刪除Program.cs原有的默認(rèn)代碼，替換成下列代碼：

using Microsoft.Playwright;

var playwright = await Playwright.CreateAsync;

await using var browser = await playwright.Chromium.LaunchAsync;

var page = await browser.NewPageAsync;

await page.GotoAsync( "https://www.baidu.com");

var title = await page.InnerTextAsync( "title");

Console.WriteLine(title);

這段代碼實(shí)現(xiàn)的功能是：使用Playwright啟動(dòng)Chromium瀏覽器，打開(kāi)百度首頁(yè)，獲取頁(yè)面標(biāo)題，并輸出到控制臺(tái)。

在頂部菜單欄中，依次選擇“調(diào)試”“開(kāi)始調(diào)試”，如果代碼運(yùn)行成功，控制臺(tái)會(huì)輸出百度首頁(yè)的頁(yè)面標(biāo)題：百度一下，你就知道。

代碼解讀

在代碼編輯器中，打開(kāi)Program.cs文件，將鼠標(biāo)懸停在對(duì)應(yīng)的代碼行上，可以查看相關(guān)的詳細(xì)說(shuō)明。

讓我們來(lái)逐一解讀每行代碼的作用：

第1行：引入Playwright命名空間。

第3行：創(chuàng)建Playwright實(shí)例。

第1行：引入Playwright命名空間。

第3行：創(chuàng)建Playwright實(shí)例。

需要注意的是，Playwright的API是異步的。因此，需要使用async/await關(guān)鍵字。在C#中，await關(guān)鍵字的作用是：等待異步操作完成后繼續(xù)執(zhí)行后續(xù)代碼。

第5行：使用Playwright實(shí)例，啟動(dòng)Chromium瀏覽器。

第7行：使用Chromium瀏覽器實(shí)例，創(chuàng)建一個(gè)新的頁(yè)面。

第9行：使用頁(yè)面實(shí)例，打開(kāi)百度首頁(yè)。

第11行: 使用頁(yè)面實(shí)例，獲取頁(yè)面標(biāo)題。

第13行：輸出頁(yè)面標(biāo)題到控制臺(tái)。

第5行：使用Playwright實(shí)例，啟動(dòng)Chromium瀏覽器。

第7行：使用Chromium瀏覽器實(shí)例，創(chuàng)建一個(gè)新的頁(yè)面。

第9行：使用頁(yè)面實(shí)例，打開(kāi)百度首頁(yè)。

第11行: 使用頁(yè)面實(shí)例，獲取頁(yè)面標(biāo)題。

第13行：輸出頁(yè)面標(biāo)題到控制臺(tái)。

在本章中，我們了解了瀏覽器自動(dòng)化以及Playwright的特點(diǎn)。然后我們學(xué)習(xí)了如何使用Visual Studio創(chuàng)建一個(gè)C#項(xiàng)目，以及如何使用Playwright啟動(dòng)Chromium瀏覽器，打開(kāi)百度首頁(yè)，并獲取頁(yè)面標(biāo)題。

在下一章中，我們將學(xué)習(xí)Playwright的基本概念。

添加微信號(hào)【MyIO666】，邀你加入技術(shù)交流群