使用 Microsoft Edge WebDriver 自動化和測試 WebView2 應用程式

發行項
03/26/2024

本文說明如何使用 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中建置專案。看起來應該如下圖所示。

WebView2API 範例應用程式

步驟 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 執行時間版本，請移至 edge://settings/help。

步驟 3：將 Selenium 新增至 WebView2API 範例

至此，您已安裝 WebView2 運行時間、建置 WebView2 專案，以及安裝 Microsoft Edge WebDriver。接下來，開始使用 Selenium，如下所示。

從在Visual Studio中建立新的 C# .NET Framework 項目開始。選取右下角的 [ 下一步 ] 繼續。
為您的專案命名專案，將它儲存到您慣用的位置，然後選取 [Create]。

隨即會建立新的專案，並將所有程序代碼放在檔案中 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。

使用 OpenQA.Selenium.Edge 方法是在檔案Program.cs的開頭新增語句using 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：

Create 物件，方法是EdgeOptions複製並貼上下列程序代碼：
```
static void Main(string[] args)
{
   EdgeOptions eo = new EdgeOptions();
```
接下來，我們將新增執行下列動作的程序代碼：
- EdgeOptions將選項設定為，將實例設定UseWebView為true使用 WebView2。
- 設定 eo.BinaryLocation 為 WebView2 應用程式二進位檔的檔案路徑。
- EdgeDriver使用 EdgeOptions 實例 Create 物件。

複製下列程序代碼，並將它貼到 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 範例，您的程式代碼現在可以執行命令來移至 https://microsoft.come.Url = @"https://www.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

恭喜您！您已依照「啟動」方法，使用 Selenium 和 Microsoft Edge WebDriver，成功將 WebView2 專案和驅動 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 互動。 Microsoft 使用者介面自動化可讓 Windows 應用程式提供及取用使用者介面 (UI) 的程式設計資訊。它可讓您以程式設計方式存取桌面上的大部分 UI 元素。它可讓螢幕助讀程式等輔助技術產品將UI的相關信息提供給使用者，並透過標準輸入和標準輸入以外的方式操作UI。
使用命令行參數或環境變數等旗標來指示您的應用程式直接啟動至 WebView2 實例，以避免需要流覽原生 UI。視您的案例而定，這可讓您使用步驟 4a：讓 Microsoft Edge WebDriver 啟動 WebView2 應用程式中所述的「啟動」方法。

除了確保 WebView2 實例已啟用之外，您還需要設定其 --remote-debugging-port 命令行參數。我們將在下列步驟中執行此動作。 Microsoft Edge WebDriver 將使用此遠端偵錯埠來連線到您的 WebView2 實例。

啟動已啟用遠端偵錯的 WebView2 應用程式

下一個步驟會在您撰寫應用程式程式代碼時發生。當您具現化 WebView2 控制項時，您必須提供這個額外的命令行參數。啟用遠端偵錯，如下所示。

在 WebView2 Win32--remote-debugging-port=<port> C++ 參考中，使用全域中其中一個建議的方法，使用額外的命令行參數來設定 WebView2 實例。為此參數選擇可用的埠號碼。
啟動您的應用程式。啟動應用程式的方式取決於您所使用的其他原生 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 應用程式中的步驟。

此 WebView2 功能目前僅在 Microsoft Edge 的 Canary 預覽通道中受到支援。設定環境變數 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登錄機碼 (和對等環境變數) 的相關信息，請參閱 Globals 中的 CreateCoreWebView2EnvironmentWithOptions。 WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS登錄機碼 (也是環境變數名稱，) 可讓您新增至命令行自變數，該自變數會在啟動時傳遞至 WebView2 運行時間瀏覽器進程。

另請參閱

Selenium 上的 WebDriver 檔 - API Selenium 如何驅動 WebView2 或 Microsoft Edge。
Microsoft Edge WebView2 簡介 - 如何使用 WebView2 控件在原生應用程式中內嵌 Web 內容。
使用 WebDriver 進行測試自動化 - 自動化 Microsoft Edge。

共用方式為