Microsoft Edge WebDriver を使用した WebView2 アプリの自動化とテスト

この記事では、ブラウザーテストの自動化に 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 プロジェクトがない場合は、WebView2Samples リポジトリを複製して、 WebView2API サンプルアプリをダウンロードします。大きなリポジトリ内の特定のサンプルは、最新の 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: WebView2API サンプルに Selenium を追加する

これで、WebView2 ランタイムをインストールし、WebView2 プロジェクトを構築し、Microsoft Edge WebDriver をインストールしました。次に、次のように Selenium の使用を開始します。

まず、Visual Studio で新しい C# .NET Framework プロジェクトを作成します。右下隅にある [ 次へ ] を選択して続行します。
プロジェクトに プロジェクト名を付け、希望の 場所に保存して、[ 作成] を選択します。

新しいプロジェクトが作成され、すべてのコードが Program.cs ファイルに配置されます。
次に、Selenium をプロジェクトに追加します。次のように、Selenium.WebDriver NuGet パッケージを使用して Selenium をインストールします。 Selenium.WebDriver NuGet パッケージをダウンロードするには、Visual Studio で [Project>Manage NuGet Packages] を選択します。
[ 参照 ] タブを選択します。次の画面が表示されます。
[ パッケージソース] ドロップダウンリストで、[ 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 プロジェクトがセットアップされました。次に、"起動" アプローチまたは "アタッチ" アプローチのいずれかを使用して 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 アプリを起動できるようにする

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

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

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

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

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

WebView2 インスタンスを作成する前に、一部のネイティブ UI を移動する必要があります。
アプリで複数の WebView2 インスタンスが作成され、特定のインスタンスにアタッチする必要があります。

このようなシナリオでは、Microsoft Edge WebDriver で WebView2 アプリを起動することは比較的単純なシナリオ専用であるため、WebView2 の特定のインスタンスにアタッチすることをお勧めします。 Microsoft Edge WebDriver がアプリを起動すると、アプリは最初に作成された WebView2 インスタンスに自動的にアタッチされ、WebView2 インスタンスが見つからない場合は失敗します。

"起動" または "アタッチ" のどちらの方法を使用する場合でも、Microsoft Edge WebDriver をダウンロードし、バージョンがアプリで使用する WebView2 ランタイムのバージョンと一致していることを確認する必要があります。 WebDriver フレームワーク (Selenium など) を構成する最初の手順は、"起動" アプローチと "アタッチ" アプローチによって異なります。

アプリを起動するか WebView2 インスタンスにアタッチするためのこれらの初期手順を完了すると、サポートされている WebDriver コマンドを使用してその WebView2 インスタンスを操作できるようになります。

手順 4a: Microsoft Edge WebDriver で WebView2 アプリを起動できるようにする

1 つの WebView2 インスタンスを作成する単純なアプリがあり、そのインスタンスが起動直後にアクティブになる場合は、この "起動" アプローチを使用します。このシナリオでは、WebView2 インスタンスが 1 つあり、ネイティブ UI を移動することなく起動時に使用できます。

Selenium と Microsoft Edge WebDriver で WebView2 を駆動するには:

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

次のコードをコピーして、 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 をアタッチする

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

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

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

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

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

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

起動された 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_RELEASE_CHANNEL_PREFERENCE=1 を設定して、WebView2 のバージョンが Canary であることを確認します。詳細については、「プレビューチャネルに切り替えて今後の API と機能をテストする」で環境変数を設定する方法に関するページを参照してください。
UWP WebView2 アプリを起動したら、 http://<Device Portal URL>/msedgeに移動します。たとえば、次のスクリーンショットは localhost:50080/msedgeを示しています。
Microsoft Edge WebDriver をアタッチする WebView2 プロセスの browserProcessId をメモします。たとえば、上のスクリーンショットは、47860としてbrowserProcessIdを示しています。

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

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

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

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

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

フィードバック

このページはお役に立ちましたか?

Last updated on 2023-04-04