WebView2

簡介

以下說明如何將 Playwright 與Microsoft Edge WebView2搭配使用。WebView2 是一個 WinForms 控制項，它會在底層使用 Microsoft Edge 來呈現網頁內容。它是 Microsoft Edge 瀏覽器的一部分，適用於 Windows 10 和 Windows 11。Playwright 可用於自動化 WebView2 應用程式，並可用於測試 WebView2 中的網頁內容。為了連線到 WebView2，Playwright 使用BrowserType.ConnectOverCDPAsync()，它會透過 Chrome DevTools Protocol (CDP) 連線到 WebView2。

概觀

可以指示 WebView2 控制項監聽傳入的 CDP 連線，方法是設定 WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS 環境變數，並設定 --remote-debugging-port=9222，或是呼叫 EnsureCoreWebView2Async 並帶有 --remote-debugging-port=9222 引數。這將會啟動啟用 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://127.0.0.1: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 方法) 為每個測試設定不同的資料夾。這將確保每個測試都在其自己的使用者資料目錄中執行。

使用以下方法，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.dev.org.tw");
        var getStarted = Page.GetByText("Get Started");
        await Expect(getStarted).ToBeVisibleAsync();
    }
}

偵錯

在您的 webview2 控制項內，您可以直接按一下滑鼠右鍵開啟內容選單，然後選取「檢查」以開啟 DevTools，或按下 F12。您也可以使用 WebView2.CoreWebView2.OpenDevToolsWindow 方法以程式設計方式開啟 DevTools。

若要偵錯測試，請參閱 Playwright 偵錯指南。