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 может быть настроен на прослушивание входящих 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:

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 инициализирован");
    }
};

Написание и выполнение тестов

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

Используя следующее, 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), "Убедитесь, что исполняемый файл существует");
        _userDataDir = Path.Join(Path.GetTempPath(), $"playwright-webview2-tests/user-data-dir-{WorkerIndex}");
        // WebView2 выполняет некоторые ленивые очистки при завершении работы, поэтому мы не можем очищать его после каждого теста
        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 завершился неожиданно");
            }
            if (output != null && output.Contains("WebView2 инициализирован"))
            {
                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.dev");
        var getStarted = Page.GetByText("Get Started");
        await Expect(getStarted).ToBeVisibleAsync();
    }
}

Отладка

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

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