WebView2
简介
以下将解释如何在 Microsoft Edge WebView2 中使用 Playwright。WebView2 是一个 WinForms 控件,它将在底层使用 Microsoft Edge 来渲染网页内容。它是 Microsoft Edge 浏览器的一部分,可在 Windows 10 和 Windows 11 上使用。Playwright 可用于自动化 WebView2 应用程序,也可用于测试 WebView2 中的网页内容。为了连接到 WebView2,Playwright 使用 browser_type.connect_over_cdp(),它通过 Chrome DevTools Protocol (CDP) 连接到 WebView2。
概述
可以通过设置环境变量 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 连接到它
- 同步
- 异步
browser = playwright.chromium.connect_over_cdp("http://localhost:9222")
context = browser.contexts[0]
page = context.pages[0]
browser = await playwright.chromium.connect_over_cdp("http://localhost:9222")
context = browser.contexts[0]
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 实例提供给你的测试
import os
import socket
import tempfile
import pytest
from pathlib import Path
from playwright.sync_api import Playwright, Browser, BrowserContext
import subprocess
EXECUTABLE_PATH = (
Path(__file__).parent
/ ".."
/ "webview2-app"
/ "bin"
/ "Debug"
/ "net8.0-windows"
/ "webview2.exe"
)
@pytest.fixture(scope="session")
def data_dir():
with tempfile.TemporaryDirectory(
prefix="playwright-webview2-tests", ignore_cleanup_errors=True
) as tmpdirname:
yield tmpdirname
@pytest.fixture(scope="session")
def webview2_process_cdp_port(data_dir: str):
cdp_port = _find_free_port()
process = subprocess.Popen(
[EXECUTABLE_PATH],
env={
**dict(os.environ),
"WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS": f"--remote-debugging-port={cdp_port}",
"WEBVIEW2_USER_DATA_FOLDER": data_dir,
},
stdout=subprocess.PIPE,
stderr=subprocess.STDOUT,
universal_newlines=True,
)
while True:
line = process.stdout.readline()
if "WebView2 initialized" in line:
break
yield cdp_port
process.terminate()
@pytest.fixture(scope="session")
def browser(playwright: Playwright, webview2_process_cdp_port: int):
browser = playwright.chromium.connect_over_cdp(
f"http://127.0.0.1:{webview2_process_cdp_port}"
)
yield browser
@pytest.fixture(scope="function")
def context(browser: Browser):
context = browser.contexts[0]
yield context
@pytest.fixture(scope="function")
def page(context: BrowserContext):
page = context.pages[0]
yield page
def _find_free_port(port=9000, max_port=65535):
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
while port <= max_port:
try:
sock.bind(("", port))
sock.close()
return port
except OSError:
port += 1
raise IOError("no free ports")
from playwright.sync_api import Page, expect
def test_webview2(page: Page):
page.goto("https://playwright.net.cn")
get_started = page.get_by_text("Get Started")
expect(get_started).to_be_visible()
调试
在你的 webview2 控件内部,你可以右键单击打开上下文菜单并选择“Inspect”来打开开发者工具,或者按 F12。你还可以使用 WebView2.CoreWebView2.OpenDevToolsWindow 方法以编程方式打开开发者工具。
有关调试测试,请参阅 Playwright 调试指南。