WebView2

简介

以下内容将解释如何将 Playwright 与Microsoft Edge WebView2一起使用。WebView2 是一种 WinForms 控件，它将在后台使用 Microsoft Edge 呈现网页内容。它是 Microsoft Edge 浏览器的一部分，可在 Windows 10 和 Windows 11 上使用。Playwright 可用于自动化 WebView2 应用程序，也可用于测试 WebView2 中的网页内容。为了连接到 WebView2，Playwright 使用browserType.connectOverCDP()，它通过 Chrome DevTools 协议 (CDP) 连接到它。

概述

可以通过设置带有--remote-debugging-port=9222 的WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS 环境变量或使用带有--remote-debugging-port=9222 参数调用EnsureCoreWebView2Async 来指示 WebView2 控件侦听传入的 CDP 连接。这将启动启用 Chrome DevTools 协议的 WebView2 进程，从而允许 Playwright 进行自动化。在本例中，9222 是示例端口，但也可以使用任何其他未使用的端口。

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

您的应用程序运行 WebView2 控件后，您可以通过 Playwright 连接到它。

const browser = await playwright.chromium.connectOverCDP('https://127.0.0.1:9222');
const context = browser.contexts()[0];
const 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.ts

import { test as base } from '@playwright/test';
import fs from 'fs';
import os from 'os';
import path from 'path';
import childProcess from 'child_process';

const EXECUTABLE_PATH = path.join(
    __dirname,
    '../../webview2-app/bin/Debug/net8.0-windows/webview2.exe',
);

export const test = base.extend({
  browser: async ({ playwright }, use, testInfo) => {
    const cdpPort = 10000 + testInfo.workerIndex;
    // Make sure that the executable exists and is executable
    fs.accessSync(EXECUTABLE_PATH, fs.constants.X_OK);
    const userDataDir = path.join(
        fs.realpathSync.native(os.tmpdir()),
        `playwright-webview2-tests/user-data-dir-${testInfo.workerIndex}`,
    );
    const webView2Process = childProcess.spawn(EXECUTABLE_PATH, [], {
      shell: true,
      env: {
        ...process.env,
        WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS: `--remote-debugging-port=${cdpPort}`,
        WEBVIEW2_USER_DATA_FOLDER: userDataDir,
      }
    });
    await new Promise<void>(resolve => webView2Process.stdout.on('data', data => {
      if (data.toString().includes('WebView2 initialized'))
        resolve();
    }));
    const browser = await playwright.chromium.connectOverCDP(`http://127.0.0.1:${cdpPort}`);
    await use(browser);
    await browser.close();
    childProcess.execSync(`taskkill /pid ${webView2Process.pid} /T /F`);
    fs.rmdirSync(userDataDir, { recursive: true });
  },
  context: async ({ browser }, use) => {
    const context = browser.contexts()[0];
    await use(context);
  },
  page: async ({ context }, use) => {
    const page = context.pages()[0];
    await use(page);
  },
});

export { expect } from '@playwright/test';

example.spec.ts

import { test, expect } from './webView2Test';

test('test WebView2', async ({ page }) => {
  await page.goto('https://playwright.net.cn');
  const getStarted = page.getByText('Get Started');
  await expect(getStarted).toBeVisible();
});

调试

在您的 webview2 控件中，您只需右键单击以打开上下文菜单并选择“检查”以打开 DevTools，或按F12。您还可以使用WebView2.CoreWebView2.OpenDevToolsWindow 方法以编程方式打开 DevTools。

有关调试测试的信息，请参阅 Playwright 的调试指南。