Microsoft Edge WebDriver を使用して WebView2 アプリを自動化してテストする

[アーティクル]
04/04/2023

この記事では、ブラウザーテストの自動化に Selenium フレームワークを使用して、Microsoft Edge WebDriver で WebView2 アプリを自動化およびテストする方法について説明します。

この記事では、Selenium フレームワークと C# を使用する手順について説明しますが、WebDriver をサポートする任意のライブラリ、フレームワーク、プログラミング言語を使用できます。 Selenium 以外の WebDriver テストフレームワークを使用して同じタスクを実行するには、選択したフレームワークの公式ドキュメントを参照してください。

WebView2 アプリのユーザー操作をシミュレートする自動テストを作成するには、Microsoft Edge WebDriver を使用できます。 Microsoft Edge WebDriver は、W3C WebDriver プロトコルの Microsoft の実装です。 W3C WebDriver プロトコルを使用すると、プログラムは Web ブラウザーの動作を制御できます。

テスト作成者は、WebDriver コマンドを使用して特定のアクションを実行するようにブラウザーに指示するテストを記述します。 Microsoft Edge WebDriver は、これらのコマンドを受け取り、要求されたアクションの実行をブラウザーに求めます。 Microsoft Edge WebDriver では、Microsoft Edge ブラウザーと WebView2 アプリの両方の自動化がサポートされています。

WebDriver プロトコル、そのプロトコルの実装としての Microsoft Edge WebDriver、および Selenium テストフレームワークの間の関係については、「 WebDriver の概要」を参照してください。

手順 1: WebView2API サンプルをダウンロードする

既存の WebView2 プロジェクトがない場合は、WebView2API サンプルアプリをダウンロードするために WebView2Samples リポジトリを複製します。大規模なリポジトリ内のその特定のサンプルは、最新の WebView2 SDK の包括的なサンプルです。 WebView2API サンプルアプリの前提条件が満たされていることを確認します。

リポジトリを複製したら、Visual Studio でプロジェクトをビルドします。次の図のようになります。

WebView2API サンプルアプリ

手順 2: Microsoft Edge WebDriver をインストールする

指示に従って Microsoft Edge WebDriver をインストールします。 Microsoft Edge WebDriver は、WebView2 を自動化およびテストするために Selenium に必要なブラウザー固有のドライバーです。

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 プロジェクトを作成します。続行するには、右下隅の [ 次へ ] を選択します。
プロジェクトに プロジェクト名を付け、目的の場所に保存し、[ 作成] を選択します。

新しいプロジェクトが作成され、すべてのコードがファイルに Program.cs 配置されます。
次に、Selenium をプロジェクトに追加します。Selenium.WebDriver NuGet パッケージを使用して Selenium をインストールします。 Selenium.WebDriver NuGet パッケージをダウンロードするには、Visual Studio で [ProjectManage NuGet Packages]\(NuGet パッケージの管理\>) を選択します。
[ 参照 ] タブを選択します。次の画面が表示されます。
[ パッケージソース ] ドロップダウンリストで、[ nuget.org] を選択します。
[ プレリリースを含める ] チェックボックスをオンにします。
Search バーに「」と入力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 プロジェクトを設定しました。次に、"起動" アプローチまたは "アタッチ" アプローチを使用して、WebView2 を駆動するように Selenium を構成します。

手順 4: Microsoft Edge WebDriver でアプリを起動するか、アプリにアタッチするかを選択する

"起動" または "アタッチ" アプローチを使用して、WebView2 を駆動するように Selenium を構成するかどうかを決定します。

"起動" アプローチ: 一部のシナリオでは、Microsoft Edge WebDriver が WebView2 アプリの起動を処理できるようにすることが適切です。 Microsoft Edge WebDriver は、WebView2 アプリを起動し、アプリが作成した最初の使用可能な WebView2 インスタンスに自動的にアタッチします。
"アタッチ" アプローチ: 他のシナリオでは、実行中の WebView2 インスタンスに Microsoft Edge WebDriver をアタッチすることをお勧めします。 Microsoft Edge WebDriver の外部でアプリを起動し、実行中の WebView2 インスタンスに Microsoft Edge WebDriver をアタッチします。この "アタッチ" アプローチは、"起動" アプローチと互換性のない WebView2 アプリ用です。

方法 1: Microsoft Edge WebDriver で WebView2 アプリを起動させる

単一の WebView2 インスタンスを作成し、そのインスタンスが起動時にすぐにアクティブになる単純なアプリがある場合は、"起動" アプローチを使用できます。手順 4a: Microsoft Edge WebDriver で WebView2 アプリを起動させる方法を使用します。

このシナリオでは、1 つの WebView2 インスタンスがあり、起動時に使用でき、ネイティブ UI 内を移動する必要はありません。

アプローチ 2: 実行中の WebView2 アプリに Microsoft Edge WebDriver をアタッチする

上記の "起動" シナリオに適合しない状況がある場合は、実行中の WebView2 インスタンスに Microsoft Edge WebDriver を接続する必要があります (Microsoft Edge WebDriver が WebView2 起動を処理するのではなく)。手順 4b: 実行中の WebView2 アプリに Microsoft Edge WebDriver をアタッチするを使用します。

"起動" シナリオに適合しないシナリオの例を次に示します。

WebView2 インスタンスを作成する前に、ネイティブ UI 内を移動する必要があります。
アプリによって複数の 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 インスタンスを作成し、そのインスタンスが起動時にすぐにアクティブになる単純なアプリがある場合は、この "起動" アプローチを使用します。このシナリオでは、1 つの WebView2 インスタンスがあり、起動時に使用でき、ネイティブ UI 内を移動する必要はありません。

Selenium と Microsoft Edge WebDriver を使用して WebView2 を駆動するには:

次のコードを EdgeOptions コピーして貼り付けて、オブジェクトを作成します。
```
static void Main(string[] args)
{
   EdgeOptions eo = new EdgeOptions();
```
次に、次のコードを追加します。
- オプションを EdgeOptions に設定して、WebView2 を使用するようにインスタンスをtrueUseWebView構成します。
- WebView2 アプリバイナリのファイルパスに設定 eo.BinaryLocation します。
- インスタンスを 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();
}
```

おめでとうございます! "起動" アプローチに従って、Selenium と Microsoft Edge WebDriver を使用して、WebView2 プロジェクトとドリブン WebView2 を正常に自動化しました。

「起動」アプローチを使用している場合は、この記事の最後です。

手順 4b: 実行中の WebView2 アプリに Microsoft Edge WebDriver をアタッチする

このセクションでは、既に実行されている WebView2 インスタンスに Microsoft Edge WebDriver をアタッチする方法について説明します。 WebView2 インスタンスが 1 つだけない場合、または WebView2 インスタンスでネイティブ UI 内を移動する必要がある場合は、このセクションと方法を使用します。

問題は、WebView2 ベースのアプリを自動化するために、WebView2 コントロールを起動するためにネイティブ GUI でアクションを実行する必要がある場合があります。ソリューションとして、Microsoft Edge WebDriver の外部でネイティブ UI を移動し、次のように WebView2 インスタンスが表示されるようにする必要があります。

移動するネイティブ UI があるこのシナリオでは、コマンドラインスクリプトなどの Microsoft Edge WebDriver 以外のメソッド、または WinAppDriver などの別のツールを使用してアプリを起動します。アプリプロセスが起動されたら、WebView2 インスタンス化をトリガーし、実行中の WebView2 インスタンスに Microsoft Edge WebDriver をアタッチします。

Microsoft Edge WebDriver ではネイティブ UI オートメーションは処理されませんが、ネイティブ UI を移動し、自動化している WebView2 インスタンスを表示するためのその他の方法を次に示します。

Windows Application Driver (WinAppDriver) は、Windows アプリケーションで Selenium のような UI テストオートメーションをサポートするサービスです。このサービスでは、Windows 10 PC でのユニバーサル Windows プラットフォーム (UWP)、Windows フォーム (WinForms)、Windows Presentation Foundation (WPF)、クラシック Windows (Win32) アプリのテストがサポートされています。
Microsoft ネイティブ UI オートメーションを直接使用する。 Microsoft UI オートメーションフレームワークを使用すると、自動テストスクリプトで UI を操作できます。 Microsoft UI オートメーションを使用すると、Windows アプリケーションでユーザーインターフェイス (UI) に関するプログラム情報を提供および使用できます。デスクトップ上のほとんどの UI 要素へのプログラムによるアクセスを提供します。スクリーンリーダーなどの支援技術製品を使用すると、UI に関する情報をエンドユーザーに提供したり、標準入力や標準入力以外の手段で UI を操作したりできます。
ネイティブ UI を移動する必要がないように、コマンドラインパラメーターや環境変数などのフラグを使用して、WebView2 インスタンスに直接起動するようにアプリに指示します。シナリオによっては、「手順 4a: Microsoft Edge WebDriver に WebView2 アプリを起動させる」で説明されている "起動" アプローチを使用できる場合があります。

WebView2 インスタンスがアクティブ化されていることを確認するだけでなく、そのコマンドラインパラメーターを設定 --remote-debugging-port する必要があります。次の手順でこれを行います。 Microsoft Edge WebDriver では、このリモートデバッグポートを使用して WebView2 インスタンスに接続します。

リモートデバッグを有効にして WebView2 アプリを起動する

次の手順は、アプリをコーディングするときに実行されます。 WebView2 コントロールをインスタンス化するときは、この追加のコマンドラインパラメーターを指定する必要があります。次のように、リモートデバッグを有効にします。

WebView2 Win32 C++ リファレンスの Globals で推奨される方法のいずれかを使用して、追加のコマンドラインパラメーターを使用して WebView2 インスタンス--remote-debugging-port=<port>を構成します。このパラメーターで使用可能なポート番号を選択します。
アプリを起動します。アプリを起動する方法は、使用している他のネイティブ UI テストツールによって異なります。

この時点で、アプリが実行されており、その --remote-debugging-port コマンドラインパラメーターが設定されています。次に、Microsoft Edge WebDriver を起動した WebView2 アプリにアタッチします。

起動した WebView2 アプリへの Microsoft Edge WebDriver のアタッチ

プロパティを 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 バージョンが Canary であることを確認するには、enviroment 変数 WEBVIEW2_RELEASE_CHANNEL_PREFERENCE=1を設定します。詳細については、「今後の API と機能のテスト」の「環境変数の使用」を参照してください。
UWP WebView2 アプリを起動したら、に移動します http://<Device Portal URL>/msedge。たとえば、次のスクリーンショットはを示しています localhost:50080/msedge。
browserProcessId Microsoft Edge WebDriver をアタッチする WebView2 プロセスのに注意してください。たとえば、上のスクリーンショットはとして 47860をbrowserProcessId示しています。

コードで、プロパティと wdpProcessId プロパティを使用してwdpAddress、Microsoft Edge 用リモートツールと特定の WebView2 プロセスに接続するように Microsoft Edge WebDriver に指示します。

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 アプリを起動する方法の詳細については、「リモートツール for Microsoft Edge を使用した UWP アプリのリモートデバッグ」を参照してください。

おめでとうございます! 実行中の WebView2 アプリに Microsoft Edge WebDriver が正常にアタッチされました。

UWP プロジェクトとデバッグ

起動時にデバッグ設定を構成するには、レジストリを使用して、起動時にすべての WebView2 プロセスのデバッグを有効にする必要があります。 UWP プロジェクトを起動する方法のため、WebDriver2 コントロールは起動時にデバッグ設定を自動的に構成できません。このレジストリキーを設定すると、この環境変数が構成されている間に起動されたすべての WebView2 プロセスのデバッグサポートが有効になります。

パラメーターは、WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS レジストリキーで指定された値によってオーバーライドできます。 WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS レジストリキー (および同等の環境変数) の詳細については、「Globals の CreateCoreWebView2EnvironmentWithOptions」を参照してください。 WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS レジストリキー (環境変数の名前でもあります) を使用すると、起動時に WebView2 ランタイムブラウザープロセスに渡されるコマンドライン引数に追加できます。

Microsoft Edge WebDriver を使用して WebView2 アプリを自動化してテストする

手順 1: WebView2API サンプルをダウンロードする

手順 2: Microsoft Edge WebDriver をインストールする

手順 3: Selenium を WebView2API サンプルに追加する

手順 4: Microsoft Edge WebDriver でアプリを起動するか、アプリにアタッチするかを選択する

方法 1: Microsoft Edge WebDriver で WebView2 アプリを起動させる

アプローチ 2: 実行中の WebView2 アプリに Microsoft Edge WebDriver をアタッチする

手順 4a: Microsoft Edge WebDriver で WebView2 アプリを起動させる

手順 4b: 実行中の WebView2 アプリに Microsoft Edge WebDriver をアタッチする

リモートデバッグを有効にして WebView2 アプリを起動する

起動した WebView2 アプリへの Microsoft Edge WebDriver のアタッチ

UWP アプリの場合は、リモートツールを使用して Microsoft Edge WebDriver を WebView2 にアタッチします

UWP プロジェクトとデバッグ

関連項目

その他のリソース

Microsoft Edge WebDriver を使用して WebView2 アプリを自動化してテストする

手順 1: WebView2API サンプルをダウンロードする

手順 2: Microsoft Edge WebDriver をインストールする

手順 3: Selenium を WebView2API サンプルに追加する

手順 4: Microsoft Edge WebDriver でアプリを起動するか、アプリにアタッチするかを選択する

方法 1: Microsoft Edge WebDriver で WebView2 アプリを起動させる

アプローチ 2: 実行中の WebView2 アプリに Microsoft Edge WebDriver をアタッチする

手順 4a: Microsoft Edge WebDriver で WebView2 アプリを起動させる

手順 4b: 実行中の WebView2 アプリに Microsoft Edge WebDriver をアタッチする

リモート デバッグを有効にして WebView2 アプリを起動する

起動した WebView2 アプリへの Microsoft Edge WebDriver のアタッチ

UWP アプリの場合は、リモート ツールを使用して Microsoft Edge WebDriver を WebView2 にアタッチします

UWP プロジェクトとデバッグ

関連項目

その他のリソース

リモートデバッグを有効にして WebView2 アプリを起動する

UWP アプリの場合は、リモートツールを使用して Microsoft Edge WebDriver を WebView2 にアタッチします