WebView2

はじめに

以下では、PlaywrightをMicrosoft Edge WebView2で使用する方法を説明します。WebView2はWinFormsコントロールであり、内部でMicrosoft Edgeを使用してWebコンテンツをレンダリングします。これはMicrosoft Edgeブラウザの一部であり、Windows 10およびWindows 11で利用可能です。PlaywrightはWebView2アプリケーションを自動化するために使用でき、WebView2内のWebコンテンツをテストするために使用できます。WebView2に接続するために、PlaywrightはChrome DevTools Protocol (CDP) を介して接続するBrowserType.ConnectOverCDPAsync()を使用します。

概要

WebView2コントロールは、`WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS`環境変数に`--remote-debugging-port=9222`を設定するか、`--remote-debugging-port=9222`引数付きでEnsureCoreWebView2Asyncを呼び出すことにより、受信CDP接続をリッスンするように指示できます。これにより、Chrome DevTools Protocolが有効になったWebView2プロセスが開始され、Playwrightによる自動化が可能になります。この場合の9222はポートの例ですが、他の未使用のポートも使用できます。

await this.webView.EnsureCoreWebView2Async(await CoreWebView2Environment.CreateAsync(null, null, new CoreWebView2EnvironmentOptions()
{
  AdditionalBrowserArguments = "--remote-debugging-port=9222",
})).ConfigureAwait(false);

WebView2コントロールを含むアプリケーションが実行されると、Playwrightを介してそれに接続できます。

var browser = await playwright.Chromium.ConnectOverCDPAsync("https://:9222");
var context = browser.Contexts[0];
var page = context.Pages[0];

WebView2コントロールが準備完了であることを確認するには、CoreWebView2InitializationCompletedイベントを待つことができます。

this.webView.CoreWebView2InitializationCompleted += (_, e) =>
{
    if (e.IsSuccess)
    {
        Console.WriteLine("WebView2 initialized");
    }
};

テストの記述と実行

デフォルトでは、WebView2コントロールはすべてのインスタンスで同じユーザーデータディレクトリを使用します。これは、複数のテストを並行して実行すると、互いに干渉することを意味します。これを避けるには、`WEBVIEW2_USER_DATA_FOLDER`環境変数（またはWebView2.EnsureCoreWebView2Async Methodを使用）を各テストで異なるフォルダーに設定する必要があります。これにより、各テストが独自のユーザーデータディレクトリで実行されるようになります。

以下を使用すると、PlaywrightはWebView2アプリケーションをサブプロセスとして実行し、一意のユーザーデータディレクトリを割り当て、Pageインスタンスをテストに提供します。

// WebView2Test.cs
using System.Diagnostics;
using Microsoft.Playwright;
using Microsoft.Playwright.MSTest;

namespace PlaywrightTests;

[TestClass]
public class ExampleTest : PlaywrightTest
{
    public IBrowser Browser { get; internal set; } = null!;
    public IBrowserContext Context { get; internal set; } = null!;
    public IPage Page { get; internal set; } = null!;
    private Process? _webView2Process = null;
    private string _userDataDir = null!;
    private string _executablePath = Path.Join(Directory.GetCurrentDirectory(), @"..\..\..\..\webview2-app\bin\Debug\net8.0-windows\webview2.exe");

    [TestInitialize]
    public async Task BrowserTestInitialize()
    {
        var cdpPort = 10000 + WorkerIndex;
        Assert.IsTrue(File.Exists(_executablePath), "Make sure that the executable exists");
        _userDataDir = Path.Join(Path.GetTempPath(), $"playwright-webview2-tests/user-data-dir-{WorkerIndex}");
        // WebView2 does some lazy cleanups on shutdown so we can't clean it up after each test
        if (Directory.Exists(_userDataDir))
        {
            Directory.Delete(_userDataDir, true);
        }
        _webView2Process = Process.Start(new ProcessStartInfo(_executablePath)
        {
            EnvironmentVariables =
        {
            ["WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS"] = $"--remote-debugging-port={cdpPort}",
            ["WEBVIEW2_USER_DATA_FOLDER"] = _userDataDir,
        },
            RedirectStandardOutput = true,
        });
        while (!_webView2Process!.HasExited)
        {
            var output = await _webView2Process!.StandardOutput.ReadLineAsync();
            if (_webView2Process!.HasExited)
            {
                throw new Exception("WebView2 process exited unexpectedly");
            }
            if (output != null && output.Contains("WebView2 initialized"))
            {
                break;
            }
        }
        var cdpAddress = $"http://127.0.0.1:{cdpPort}";
        Browser = await Playwright.Chromium.ConnectOverCDPAsync(cdpAddress);
        Context = Browser.Contexts[0];
        Page = Context.Pages[0];
    }

    [TestCleanup]
    public async Task BrowserTestCleanup()
    {
        _webView2Process!.Kill(true);
        await Browser.CloseAsync();
    }
}

// UnitTest1.cs
using Microsoft.Playwright;
using Microsoft.Playwright.MSTest;

namespace PlaywrightTests;

[TestClass]
public class ExampleTest : WebView2Test
{
    [TestMethod]
    public async Task HomepageHasPlaywrightInTitleAndGetStartedLinkLinkingtoTheIntroPage()
    {
        await Page.GotoAsync("https://playwright.dokyumento.jp");
        var getStarted = Page.GetByText("Get Started");
        await Expect(getStarted).ToBeVisibleAsync();
    }
}

デバッグ

WebView2コントロール内で、右クリックしてコンテキストメニューを開き、「Inspect」を選択してDevToolsを開くか、F12を押すことができます。また、WebView2.CoreWebView2.OpenDevToolsWindowメソッドを使用して、プログラムでDevToolsを開くこともできます。

テストのデバッグについては、Playwrightのデバッグガイドを参照してください。

はじめに​

概要​

テストの記述と実行​

デバッグ​

はじめに

概要

テストの記述と実行

デバッグ