Автоматизация и тестирование WebView2 с помощью драйвера Microsoft Edge

Так как WebView2 использует веб-платформу Chromium, WebView2 разработчики могут воспользоваться стандартными веб-средствами для отладки и автоматизации. Одним из таких средств является Selenium, реализующий API - интерфейс консорциума W3C, который можно использовать для создания автоматических тестов, имитирующих взаимодействия с пользователем.

Порядок начала работы:

Шаг 1: Загрузка образца WebView2API

Если у вас нет проекта WebView2, скачайте наш пример приложения WebView2API, который является исчерпывающим примером НОВЕЙШего комплекта SDK для WebView2. Убедитесь в том, что вы удовлетворены необходимыми условиями.

Создав точную копию репозитория, создайте проект в Visual Studio. Он должен выглядеть следующим образом:

замещающий текст

Шаг 2: Установка драйвера Microsoft Edge

Следуйте инструкциям, чтобы установить драйвер Microsoft Edge , необходимый для автоматизации и тестирования WebView2, который требуется драйверу Selenium для веб-браузера.

Важно убедиться, что версия драйвера Microsoft EDGE соответствует версии Microsoft EDGE, используемой в приложении. Чтобы образец WebView2API работал, убедитесь в том, что ваша версия Microsoft Edge больше или равна поддерживаемой версии последней версии SDK, которую можно найти в заметках о выпуске. Чтобы узнать, какая у вас версия Microsoft EDGE уже есть, загрузите ее edge://settings/help в браузере.

Шаг 3: Добавление Selenium в пример WebView2API

На этом этапе у вас должен быть установлен Microsoft EDGE, создан проект WebView2 и установлен драйвер Microsoft Edge. Теперь приступим к работе с Selenium.

Примечание

Selenium поддерживает C#, Java, Python, JavaScript и Ruby. Однако это руководство будет отображаться на C#.

  1. Начните с создания нового проекта C# .NET Framework в Visual Studio. Чтобы продолжить, нажмите кнопку Далее в правом нижнем углу.

замещающий текст

  1. Введите имяпроекта, сохраните его в нужном местеи нажмите кнопку создать.

замещающий текст

  1. Будет создан новый проект. В этом руководстве весь код будет написан в файле Program.CS .

замещающий текст

  1. Теперь добавим Selenium в проект. Вы можете установить Selenium с помощью пакета NuGet для Selenium.

Чтобы скачать пакет NuGet Selenium... в Visual Studio, наведите указатель мыши на элемент Project и выберите пункт Управление пакетом NuGet. Появится следующий экран:

замещающий текст

  1. Введите Selenium. Selenium на панели поиска, щелкните . стример из результатов, а затем установите флажок включить предварительную версию. В правой части окна убедитесь, что для версии установлено значение 4.0.0-alpha04 или более поздней, и нажмите кнопку установить. NuGet загрузит Selenium на ваш компьютер.

Дополнительные сведения о пакете NuGet для Selenium.

замещающий текст

  1. Используйте OpenQA. Selenium. Edge , добавив следующий оператор: using OpenQA.Selenium.Edge; в начале Program.CS
using OpenQA.Selenium.Edge;

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

Шаг 4: WebView2 диска с Selenium и Microsoft EdgeDriver

  1. Сначала создайте EdgeOptions объект, скопировав приведенный ниже код.
static void Main(string[] args)
{
    // EdgeOptions() requires using OpenQA.Selenium.Edge
    // Construct EdgeOptions with is_legacy = false and the string "webview2"
    EdgeOptions edgeOptions = new EdgeOptions(false, "webview2");

EdgeOptionsОбъект принимает два параметра:
Параметры 1. is_legacy: значение false , указывающее Selenium, что вы управляете новым браузером Microsoft EDGE на основе Chromium. 2. "webview2": строка, которая указывает Selenium, что вы управляете WebView2

  1. Затем укажите edgeOptions.BinaryLocation путь к файлу исполняемого файла проекта WebView2, создайте строку с именем msedgedriverDir , которая содержит путь к файлу, на который установлен драйвер Microsoft Edge, и создайте строку, которая вызывается msedgedriverExe для хранения имени исполняемого файла драйвера Microsoft Edge. По умолчанию вызывается исполняемый файл "msedgedriver.exe" . Используйте эти две строки для создания EdgeDriverService объекта, как показано ниже. Наконец, создайте EdgeDriver объект с помощью EdgeDriverService и EdgeOptions .

Вы можете скопировать и вставить следующий код под ним edgeOptions . Убедитесь, что указаны правильные пути к исполняемому файлу проекта и исполняемому файлу драйвера Microsoft EDGE на вашем компьютере.

    //Set the BinaryLocation to the filepath of the WebView2API Sample's executable
    edgeOptions.BinaryLocation = @"C:\path\to\your\webview2\project.exe";

    //Set msedgedriverDir to the filepath of the directory housing msedgedriver.exe
    string msedgedriverDir = @"C:\path\to\your\msededriver.exe's\directory";

    //Set msedgedriverExe to the name of the Edge Driver. By default it is:
    string msedgedriverExe = @"msedgedriver.exe";

    // Construct EdgeDriverService with is_legacy = false  
    EdgeDriverService service = EdgeDriverService.CreateDefaultService(msedgedriverDir, msedgedriverExe, false);

    EdgeDriver e = new EdgeDriver(service, edgeOptions);
  1. Теперь EdgeDriver настроен для настройки WebView2 в проекте. Например, если вы используете образец WebView2API, вы можете Перейти https://microsoft.com по вызову e.Url = @"https://www.microsoft.com"; . Вы можете просматривать Selenium диск WebView2 , настроив точку останова в этой строке и запуская проект.
    //The following will Navigate the WebView2API Sample from bing.com to microsoft.com
    e.Url = @"https://www.microsoft.com";

    //This exits the edge driver
    e.Quit();
}

замещающий текст

Поздравляем! Вы успешно автоматизируи проект WebView2 и управляемый WebView2 с помощью драйвера Selenium и Microsoft Edge.

Дальнейшие действия

Дополнительные сведения:

  • Ознакомьтесь с документацией по Selenium и ознакомьтесь с подробным обзором API-интерфейсов Selenium, которые можно использовать для работы с WebView2 или Microsoft EDGE (Chromium).
  • Дополнительные сведения об элементе управления WebView2 и его использовании при внедрении веб-содержимого в собственное приложение
  • Дополнительные сведения об автоматизации Microsoft EDGE (Chromium) можно найти в документации по Microsoft Edge Driver .

Знакомство с командой Microsoft Edge WebView

Поделитесь своим мнением, чтобы помочь вам в создании более WebView2ных возможностей. Чтобы отправить запросы функций или ошибки или найти известные проблемы, ознакомьтесь с репозиторием отзывов и предложений Microsoft Edge WebView .