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).

Обзор

Элемент управления WebView2 можно настроить на прослушивание входящих CDP-соединений, установив переменную окружения WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS со значением --remote-debugging-port=9222 или вызвав EnsureCoreWebView2Async с аргументом --remote-debugging-port=9222. Это запустит процесс WebView2 с включенным протоколом Chrome DevTools, что позволит автоматизацию с помощью 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('http://localhost:9222');
const context = browser.contexts()[0];
const page = context.pages()[0];

Чтобы убедиться, что элемент управления WebView2 готов, вы можете дождаться события CoreWebView2InitializationCompleted:

this.webView.CoreWebView2InitializationCompleted += (_, e) =>
{
    if (e.IsSuccess)
    {
        Console.WriteLine("WebView2 инициализирован");
    }
};

Написание и запуск тестов

По умолчанию элемент управления WebView2 будет использовать одну и ту же директорию пользовательских данных для всех экземпляров. Это означает, что если вы запускаете несколько тестов параллельно, они будут мешать друг другу. Чтобы избежать этого, вы должны установить переменную окружения WEBVIEW2_USER_DATA_FOLDER (или использовать WebView2.EnsureCoreWebView2Async Method) в другую папку для каждого теста. Это гарантирует, что каждый тест будет выполняться в своей собственной директории пользовательских данных.

Используя следующее, 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;
    // Убедитесь, что исполняемый файл существует и доступен для выполнения
    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 инициализирован'))
        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('тест WebView2', async ({ page }) => {
  await page.goto('https://playwright.dev');
  const getStarted = page.getByText('Get Started');
  await expect(getStarted).toBeVisible();
});

Отладка

Внутри вашего элемента управления webview2 вы можете просто щелкнуть правой кнопкой мыши, чтобы открыть контекстное меню и выбрать "Inspect", чтобы открыть DevTools, или нажать F12. Вы также можете использовать метод WebView2.CoreWebView2.OpenDevToolsWindow для программного открытия DevTools.

Для отладки тестов смотрите Руководство по отладке Playwright.