跳到主要內容

WebView2

簡介​

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

概述​

可以指示 WebView2 控制項監聽傳入的 CDP 連線，方法是將 WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS 環境變數設定為 --remote-debugging-port=9222，或使用 --remote-debugging-port=9222 引數呼叫 EnsureCoreWebView2Async。這將啟動啟用 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 連接到它

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.dev.org.tw');
  const getStarted = page.getByText('Get Started');
  await expect(getStarted).toBeVisible();
});

偵錯​

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

有關偵錯測試，請參閱 Playwright 偵錯指南。