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_ADDITIONAL_BROWSER_ARGUMENTS
环境变量并将其值设置为 --remote-debugging-port=9222
,或调用 EnsureCoreWebView2Async 方法并传入 --remote-debugging-port=9222
参数,来指示 WebView2 控件监听传入的 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("http://localhost: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.net.cn");
var getStarted = Page.GetByText("Get Started");
await Expect(getStarted).ToBeVisibleAsync();
}
}
调试
在您的 webview2 控件内部,只需右键单击即可打开上下文菜单并选择“检查”以打开 DevTools,或按 F12。您还可以使用 WebView2.CoreWebView2.OpenDevToolsWindow 方法以编程方式打开 DevTools。
有关调试测试的信息,请参阅 Playwright 调试指南。