本文說明如何使用 Selenium 架構進行瀏覽器測試自動化,透過 Microsoft Edge WebDriver 自動化和測試您的 WebView2 應用程式。
本文提供使用 Selenium 架構和 C# 的指示,但您可以使用任何支援 WebDriver 的程式庫、架構和程式設計語言。 要使用 Selenium 以外的 WebDriver 測試框架完成相同的任務,請查閱您選擇的框架的官方文檔。
若要建立模擬 WebView2 應用程式使用者互動的自動化測試,您可以使用 Microsoft Edge WebDriver。 Microsoft Edge WebDriver 是 Microsoft 實作的 W3C WebDriver 通訊協定。 W3C WebDriver 通訊協定可讓程式控制網頁瀏覽器的行為。
測試作者撰寫的測試使用 WebDriver 命令來告訴瀏覽器執行特定動作。 Microsoft Edge WebDriver 會收到這些命令,然後要求瀏覽器執行要求的動作。 Microsoft Edge WebDriver 支援將 Microsoft Edge 瀏覽器和 WebView2 應用程式自動化。
如需 WebDriver 通訊協定、做為該通訊協定實作的 Microsoft Edge WebDriver 與 Selenium 測試架構之間的關係,請參閱 WebDriver 概觀。
步驟 1:下載 WebView2API 範例
如果您沒有現有的 WebView2 專案,請複製 WebView2Samples 存放庫,以下載 WebView2API 範例應用程式。 較大存放庫中的特定範例是最新 WebView2 SDK 的完整範例。 請確認您已符合 WebView2API 範例應用程式的必要條件。
複製存放庫之後,請在 Visual Studio 中建置專案。 它看起來應該如下圖所示。
步驟 2:安裝 Microsoft Edge WebDriver
請遵循指示來安裝 Microsoft Edge WebDriver。 Microsoft Edge WebDriver 是 Selenium 自動化及測試 WebView2 所需的瀏覽器特定驅動程式。
請確定 Microsoft Edge WebDriver 的版本符合您的應用程式使用的 WebView2 執行階段版本。 若要讓 WebView2API 範例能夠運作,請確定您的 WebView2 執行階段版本大於或等於支援的最新 WebView2 SDK 版本版本。
若要找出最新的 WebView2 SDK 版本,請參閱 WebView2 SDK 版本資訊。
若要找出您目前擁有的 WebView2 Runtime 版本,請前往
edge://settings/help。
步驟 3:將 Selenium 新增至 WebView2API 範例
此時,您已安裝 WebView2 執行階段、建置 WebView2 專案,並安裝 Microsoft Edge WebDriver。 接下來,開始使用 Selenium,如下所示。
首先在 Visual Studio 中建立新的 C# .NET Framework 專案。 選取右下角的 [下一步 ] 以繼續。
為您的專案 命名、儲存到 您偏好的位置,然後選取 [建立]。
隨即會建立新專案,並將所有程式碼放置在檔案中
Program.cs。
接下來,將 Selenium 添加到項目中;使用 Selenium.WebDriver NuGet 套件安裝 Selenium,如下所示。 若要下載 Selenium.WebDriver NuGet 套件,請在 Visual Studio 中選取 [專案>管理 NuGet 套件]。
選取 [ 瀏覽 ] 索引標籤。下列畫面隨即出現。
在 [ 套件來源] 下拉式清單中,選取 [ nuget.org]。
選取 [ 包含發行前版本 ] 核取方塊。
在搜尋列中輸入
Selenium.WebDriver,然後從結果中選取 Selenium.WebDriver。在右側的詳細資料視窗中,確定 [ 版本] 已設定為 4.0.0 或更新版本,然後選取 [ 安裝]。 NuGet 會下載 Selenium 至您的電腦。
若要深入瞭解 Selenium.WebDriver NuGet 套件,請參閱 Selenium.WebDriver。
請在檔案
Program.cs開頭新增語句using OpenQA.Selenium.Edge;來使用OpenQA.Selenium.Edge:using OpenQA.Selenium.Edge; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;
您現在已設定適合 Selenium 測試的空白 Visual Studio 專案。 接下來,設定 Selenium 以使用「啟動」方法或「附加」方法驅動 WebView2。
步驟 4:選擇 Microsoft Edge WebDriver 應該啟動您的應用程式或附加至該應用程式
決定是否要使用「啟動」或「附加」方法設定 Selenium 以驅動 WebView2。
「啟動」方法: 在某些情況下,讓 Microsoft Edge WebDriver 處理啟動 WebView2 應用程式是適當的。 Microsoft Edge WebDriver 會啟動您的 WebView2 應用程式,並自動附加至您的應用程式建立的第一個可用 WebView2 執行個體。
「附加」方法: 在其他案例中,將 Microsoft Edge WebDriver 附加至執行中的 WebView2 執行個體是適當的。 您可以在 Microsoft Edge WebDriver 外部啟動應用程式,然後將 Microsoft Edge WebDriver 附加至執行中的 WebView2 執行個體。 此「附加」方法適用於與「啟動」方法不相容的 WebView2 應用程式。
方法 1:讓 Microsoft Edge WebDriver 啟動您的 WebView2 應用程式
如果您有一個簡單的應用程式,可以建立單一 WebView2 執行個體,且該執行個體在啟動時立即為作用中,則您可以使用「啟動」方法;使用 步驟 4a:讓 Microsoft Edge WebDriver 啟動您的 WebView2 應用程式。
在此案例中,有一個 WebView2 實例,可在啟動時使用,而不需要瀏覽任何原生 UI。
方法 2:將 Microsoft Edge WebDriver 附加至執行中的 WebView2 應用程式
如果您有任何不符合上述「啟動」案例的情況,您應該Microsoft Edge WebDriver 附加至執行中的 WebView2 執行個體 (,而不是讓 Microsoft Edge WebDriver 處理 WebView2 啟動) ;使用 步驟 4b:將 Microsoft Edge WebDriver 附加至執行中的 WebView2 應用程式。
不符合「啟動」案例的案例範例如下:
- 您必須先瀏覽某些原生 UI,才能建立 WebView2 執行個體。
- 您的應用程式會建立多個 WebView2 執行個體,而您想要附加至特定執行個體。
在這種情況下,我們建議附加至 WebView2 的特定執行個體,因為讓 Microsoft Edge WebDriver 啟動您的 WebView2 應用程式僅適用於相對簡單的案例。 當 Microsoft Edge WebDriver 啟動您的應用程式時,它會自動附加至建立的第一個 WebView2 實例,如果找不到 WebView2 實例,將會失敗。
無論您使用「啟動」或「附加」方法,您都必須下載 Microsoft Edge WebDriver,並確定該版本符合應用程式使用的 WebView2 執行階段版本。 設定 WebDriver 架構 (例如 Selenium) 的初始步驟在「啟動」與「附加」方法之間會有所不同。
完成這些啟動應用程式或附加至 WebView2 實例的初始步驟後,您將可以使用任何支援的 WebDriver 命令來與該 WebView2 實例互動。
步驟 4a:讓 Microsoft Edge WebDriver 啟動您的 WebView2 應用程式
如果您擁有建立單一 WebView2 執行個體的簡單應用程式,且該執行個體在啟動時立即為作用中,請使用此「啟動」方法。 在此案例中,有一個 WebView2 實例,可在啟動時使用,而不需要瀏覽任何原生 UI。
使用 Selenium 和 Microsoft Edge WebDriver 驅動 WebView2:
複製並貼上下列程式碼來建立
EdgeOptions物件:static void Main(string[] args) { EdgeOptions eo = new EdgeOptions();接下來,我們將新增執行下列操作的程式碼:
- 將選項設定
UseWebView為true,將執行個體設定EdgeOptions為使用 WebView2。 - 設定
eo.BinaryLocation為 WebView2 應用程式二進位檔案的檔案路徑。 -
EdgeDriver使用執行個體建立EdgeOptions物件。
- 將選項設定
複製下列程式碼,並將其貼到宣告行下方
eo://Set the EdgeOptions instance to use WebView2 eo.UseWebView = true; //Set the BinaryLocation to the filepath of the WebView2API Sample runtime eo.BinaryLocation = @"C:\path\to\your\webview2\project.exe"; EdgeDriver e = new EdgeDriver(eo);在上述程式碼中,指定專案執行階段的正確檔案路徑和電腦上的 Microsoft Edge WebDriver 執行階段。
EdgeDriver現已配置為驅動專案中的 WebView2。 例如,如果您使用 WebView2API 範例,現在您可以執行e.Url = @"https://www.microsoft.com";命令來前往https://microsoft.com您的程式碼,如下一個程式碼清單所示。驗證 Selenium 可以驅動 WebView2。 若要這麼做,請在行
e.Url = @"https://www.microsoft.com";上設定中斷點 ,然後執行專案。//Navigate the WebView2API Sample from bing.com to microsoft.com e.Url = @"https://www.microsoft.com"; //Exit Microsoft Edge WebDriver e.Quit(); }
恭喜您! 您已成功地自動化 WebView2 專案,並按照「啟動」方法使用 Selenium 和 Microsoft Edge WebDriver 驅動 WebView2。
如果您使用的是「啟動」方法,本文到此結束。
步驟 4b:將 Microsoft Edge WebDriver 附加至執行中的 WebView2 應用程式
本節說明如何將 Microsoft Edge WebDriver 附加至已執行的 WebView2 執行個體。 如果您沒有單一 WebView2 執行個體,或您的 WebView2 執行個體需要瀏覽某些原生 UI,請使用本節和方法。
問題是,若要自動化 WebView2 應用程式,有時您需先在原生 GUI 中執行某些動作,才能啟動 WebView2 控制項。 作為解決方案,您需要瀏覽 Microsoft Edge WebDriver 以外的原生 UI,並以某種方式確保顯示 WebView2 實例,如下所示。
在此案例中,若您有一些原生 UI 可供瀏覽,您可以使用 Microsoft Edge WebDriver 以外的方法(例如命令列指令碼)或個別工具(例如 WinAppDriver)來啟動應用程式。 啟動應用程式程序之後,您會觸發 WebView2 具現化,然後將 Microsoft Edge WebDriver 附加至執行中的 WebView2 執行個體。
Microsoft Edge WebDriver 不會處理原生 UI 自動化,但以下是一些其他方法,可瀏覽原生 UI 並顯示您正在自動化的 WebView2 實例:
Windows 應用程式驅動程式 (WinAppDriver) 是一項服務,可支援 Windows 應用程式上類 Selenium UI 測試自動化。 此服務支援在Windows 10電腦上測試 通用 Windows 平台 (UWP) 、Windows Forms (WinForms) 、Windows Presentation Foundation (WPF) 和傳統 Windows (Win32) 應用程式。
直接使用 Microsoft 原生 UI 自動化。 Microsoft UI 使用者介面自動化架構可讓自動化測試指令碼與 UI 互動。 Microsoft 使用者介面自動化 可讓 Windows 應用程式提供和取用使用者介面 (UI) 的程式設計資訊。 它提供對桌面上大多數 UI 元素的程式設計存取。 它可讓輔助技術產品 (例如螢幕助讀程式) 提供使用者 UI 的相關資訊,並透過標準輸入及標準輸入以外的方式來操作 UI。
使用命令列參數或環境變數等旗標,告訴您的應用程式直接在 WebView2 執行個體啟動,以避免瀏覽本機 UI。 視您的案例而定,這可能可以使用 步驟 4a:讓 Microsoft Edge WebDriver 啟動您的 WebView2 應用程式中所述的「啟動」方法。
除了確保已啟動 WebView2 執行個體之外,您還需要設定其 --remote-debugging-port 命令列參數。 我們將在下列步驟中執行此動作。 Microsoft Edge WebDriver 會使用此遠端偵錯連接埠連線到 WebView2 執行個體。
啟動具有遠端偵錯功能的 WebView2 應用程式
當您編寫應用程式程式碼時,就會進入下一個步驟。 當您要具現化 WebView2 控制項時,必須提供這個額外的命令列參數。 啟用遠端偵錯,如下所示。
使用全域中建議的方法之一,使用額外的命令列參數設定
--remote-debugging-port=<port>WebView2 執行個體,在 WebView2 Win32 C++ 參考。 選擇此參數的可用連接埠號碼。啟動您的應用程式。 啟動應用程式的方式取決於您使用哪些其他原生 UI 測試工具。
此時,您的應用程式正在執行,並已設定其 --remote-debugging-port 命令列參數。 接下來,我們會將 Microsoft Edge WebDriver 附加至啟動的 WebView2 應用程式。
將 Microsoft Edge WebDriver 附加至已啟動的 WebView2 應用程式
- 使用此
EdgeOptions.DebuggerAddress屬性來告訴 Microsoft Edge WebDriver 連線到您先前指定的遠端偵錯埠,而不是啟動新的應用程式:
EdgeOptions eo = new EdgeOptions();
eo.UseWebView = true;
eo.DebuggerAddress = "localhost:9222";
EdgeDriver e = new EdgeDriver(eo);
如上所述 localhost:9222 ,此行中給出的連接埠號碼應與您在上述設定 --remote-debugging-port 時選擇的連接埠號碼相符。
如需物件屬性EdgeOptions的DebuggerAddress詳細資訊,請參閱 EdgeOptions 物件。
針對 UWP 應用程式,請使用遠端工具將 Microsoft Edge WebDriver 附加至 WebView2
執行使用 適用於 Microsoft Edge 的遠端工具遠端偵錯 UWP 應用程式中的步驟。
目前只有 Microsoft Edge 的 Canary 預覽通道支援 WebView2 功能。 設定環境變數
WEBVIEW2_RELEASE_CHANNEL_PREFERENCE=1,以確保 WebView2 版本為 Canary。 如需詳細資訊,請參閱切換到預覽通道中的如何 設定環境變數 , 以測試即將推出的 API 和功能。
啟動 UWP WebView2 應用程式之後,請移至
http://<Device Portal URL>/msedge。 例如,下列螢幕擷取畫面會顯示localhost:50080/msedge:
請注意您要
browserProcessId附加 Microsoft Edge WebDriver 的 WebView2 處理程序。 例如,上面的螢幕擷取畫面顯示browserProcessId為47860。在您的程式碼中,使用
wdpAddress和wdpProcessId屬性來告訴 Microsoft Edge WebDriver 連線到 Microsoft Edge 的遠端工具和 特定 WebView2 程式。-
wdpAddress定義為裝置入口網站 URL。 -
wdpProcessId定義為browserProcessId您在上一個步驟中記下的值:
EdgeOptions eo = new EdgeOptions(); eo.AddAdditionalEdgeOption("wdpAddress", "localhost:50080"); eo.AddAdditionalEdgeOption("wdpProcessId", 47860); // Optional user name and password to use when connecting to a Windows Device Portal // server. Required if the server has authentication enabled. // eo.AddAdditionalEdgeOption("wdpUsername", "username"); // eo.AddAdditionalEdgeOption("wdpPassword", "password"); EdgeDriver e = new EdgeDriver(eo);-
如需使用遠端工具啟動 WebView2 UWP 應用程式的詳細資訊,請參閱 使用適用於 Microsoft Edge 的遠端工具遠端偵錯 UWP 應用程式。
恭喜您! 您已成功將 Microsoft Edge WebDriver 附加至執行中的 WebView2 應用程式。
UWP 專案和偵錯
若要在啟動時設定偵錯設定,您必須使用登錄在啟動時啟用所有 WebView2 處理序的偵錯。 由於 UWP 專案的啟動方式,WebDriver2 控制項無法在啟動時自動設定偵錯設定。 請注意,設定此登錄機碼會在設定此環境變數時,為所有啟動的 WebView2 處理序啟用偵錯支援。
您可以使用 WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS 登錄機碼中指定的值來覆寫參數。 如需 WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS 登錄機碼 (與對等環境變數) 的相關資訊,請參閱全域中的CreateCoreWebView2EnvironmentWithOptions。 WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS登錄機碼 (也是環境變數名稱) 可讓您新增到命令列引數,以便在 WebView2 執行階段瀏覽器處理程序啟動時傳遞給該處理程序。
另請參閱
- Selenium 文件上的 WebDriver - API Selenium 如何驅動 WebView2 或 Microsoft Edge。
- Microsoft Edge 簡介 WebView2 - 如何使用 WebView2 控制項在原生應用程式中內嵌網頁內容。
- 使用 WebDriver 進行測試自動化 - 自動化 Microsoft Edge。