Microsoft Edge ドライバーを使用した WebView2 の自動化とテスト

11/25/2020

WebView2 は Microsoft Edge \ (Chromium ) web platform を使っているため、WebView2 の開発者 \ (お客様 ) は、デバッグとオートメーション用の標準的な web ツールを利用することができます。 Selenium は、このようなツールの1つです。 W3C Webdriver API を実装します。 Selenium を使って、自動テストを作成し、ユーザーの操作をシミュレートすることができます。

次の手順で作業を開始します。

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

既存の WebView2 プロジェクトがない場合は、最新の WebView2 SDK の包括的なサンプルである WebView2API サンプルアプリをダウンロードしてください。 WebView2API サンプルアプリの前提条件を満たしていることを確認します。

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

手順 2: Microsoft Edge ドライバーをインストールする

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

Microsoft Edge ドライバーのバージョンが、アプリで使用する WebView2 ランタイムのバージョンと一致していることを確認します。 WebView2API サンプルを動作させるには、WebView2 Runtime のバージョンが、最新の WebView2 SDK リリースのサポートされているバージョン以上であることを確認してください。最新の WebView2 SDK リリースを見つけるには、 WebView2 リリースノートに移動します。現在使用している WebView2 ランタイムのバージョンを確認するには、に移動 edge://settings/help します。

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

この時点で、WebView2 Runtime がインストールされていて、WebView2 プロジェクトと Microsoft Edge ドライバーがインストールされている必要があります。それでは、Selenium を使い始めましょう。

注意

Selenium は、C \ #、Java、Python、Javascript、ルビをサポートしています。ただし、次のガイドは C \ # を使って作成されています。

まず、 Visual Studioで新しいC# .net Frameworkプロジェクトを作成します。右下隅にある [ 次へ ] を選んで続行します。

新しいプロジェクトの作成
プロジェクトに名前を付け、希望の場所に保存して、[ 作成] を選びます。

新しいプロジェクトを構成する
新しいプロジェクトが作成されます。このガイドでは、すべてのコードがファイルに書き込まれ Program.cs ます。

新しいプロジェクト
次に、プロジェクトに Selenium を追加します。 Seleniumをインストールするには、Selenium を使用します。

Selenium ドライバーの nuget パッケージをダウンロードするには、 Visual Studioでプロジェクトをポイントして、[ NuGet パッケージの管理] を選びます。次の画面が表示されます。

NuGet パッケージをダウンロードする
Selenium.WebDriver検索バーに入力し、結果から [ Selenium ドライバー ] を選び、[プレリリースを含める] の横にあるチェックボックスをオンにします。右側のウィンドウで、 バージョン が 4.0.0 をインストール するように設定されていることを確認し、[ インストール] を選択します。 NuGet をコンピューターにダウンロード Selenium します。

Selenium ドライバーの NuGet パッケージの詳細については、 Seleniumにアクセスしてください。

NuGet パッケージの管理

OpenQA.Selenium.Edge using OpenQA.Selenium.Edge; ファイルの先頭に次のステートメントを追加して使用し Program.cs ます。

using OpenQA.Selenium.Edge;

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

手順 4: Selenium と Microsoft Edge ドライバーを使用して WebView2 ドライブを使用する

まず、 EdgeOptions 次のコードスニペットをコピーして、オブジェクトを作成します。

static void Main(string[] args)
{
    // EdgeOptions() requires using OpenQA.Selenium.Edge
    // Construct EdgeOptions with is_legacy = false and the string "webview2"
    EdgeOptions edgeOptions = new EdgeOptions(false, "webview2");

このオブジェクトには、 EdgeOptions 次の2つのパラメーターがあります。

パラメーター	詳細
`is_legacy`	Selenium を設定すると `false` 、新しい Chromium ベースの Microsoft Edge ブラウザーを運転していることが通知されます。
`"webview2"`	WebView2 を運転している Selenium を示す文字列。

次に、 edgeOptions.BinaryLocation WebView2 project ランタイムのファイルパスを設定し、 msedgedriverDir microsoft edge ドライバーをインストールした場所へのファイルパスを提供するという名前の文字列を作成して、 msedgedriverExe microsoft edge ドライバーランタイムの名前を格納するための名前の付いた文字列を作成します。既定では、ランタイムにはという名前が付けられ msedgedriver.exe ます。次に示すように、これら2つの文字列を使っ EdgeDriverService てオブジェクトを作成します。最後に、and を使用してオブジェクトを作成し EdgeDriver EdgeDriverService EdgeOptions ます。

以下のコードをコピーして貼り付けることができ edgeOptions ます。コンピューターのプロジェクトランタイムと Microsoft Edge ドライバーランタイムへの適切なファイルパスを指定していることを確認します。
```
//Set the BinaryLocation to the filepath of the WebView2API Sample runtime
edgeOptions.BinaryLocation = @"C:\path\to\your\webview2\project.exe";

//Set msedgedriverDir to the filepath of the directory housing msedgedriver.exe
string msedgedriverDir = @"C:\path\to\your\msededriver.exe's\directory";

//Set msedgedriverExe to the name of the Edge Driver. By default it is:
string msedgedriverExe = @"msedgedriver.exe";

// Construct EdgeDriverService with is_legacy = false  
EdgeDriverService service = EdgeDriverService.CreateDefaultService(msedgedriverDir, msedgedriverExe, false);

EdgeDriver e = new EdgeDriver(service, edgeOptions);
```
これで、 EdgeDriver プロジェクトで WebView2 を実行するように構成されました。たとえば、 WebView2API サンプルを使っている場合は、コマンドを実行して移動することができ https://microsoft.com e.Url = @"https://www.microsoft.com"; ます。行にブレークポイントを設定し、プロジェクトを実行して、Selenium drive WebView2 を確認します。
```
    //The following navigates the WebView2API Sample from bing.com to microsoft.com
    e.Url = @"https://www.microsoft.com";

    //This exits the edge driver
    e.Quit();
}
```
Selenium WebView2

お疲れさまでした。 Selenium および Microsoft Edge ドライバーを使用して、WebView2 プロジェクトとドリブン WebView2 を正常に自動化しました。

Microsoft Edge WebView チームと連絡を取り合う

お客様のフィードバックを共有し、より充実した WebView2 効果を構築します。機能のリクエストやバグを送信したり、既知の問題を検索したりするには、 Microsoft Edge WebView フィードバックリポジトリを参照してください。