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

Статья
04/04/2023

В этой статье объясняется, как автоматизировать и протестировать приложение WebView2 с помощью Microsoft Edge WebDriver с помощью платформы Selenium для автоматизации тестирования браузера.

В этой статье приведены инструкции по использованию платформы Selenium и C#, но вы можете использовать любую библиотеку, платформу и язык программирования, поддерживающие WebDriver. Чтобы выполнить те же задачи с помощью платформы тестирования WebDriver, отличной от Selenium, обратитесь к официальной документации по выбранной платформе.

Чтобы создать автоматические тесты, имитирующие взаимодействие с пользователем для приложения WebView2, можно использовать Microsoft Edge WebDriver. Microsoft Edge WebDriver — это реализация протокола W3C WebDriver корпорации Майкрософт. Протокол W3C WebDriver позволяет программам управлять поведением веб-браузеров.

Авторы тестов пишут тесты, которые используют команды WebDriver, чтобы сообщить браузеру о выполнении определенных действий. Microsoft Edge WebDriver получает эти команды, а затем просит браузер выполнить запрошенное действие. Microsoft Edge WebDriver поддерживает автоматизацию браузеров Microsoft Edge и WebView2.

Связь между протоколом WebDriver, Microsoft Edge WebDriver как реализацией этого протокола и платформой тестирования Selenium см. в статье Обзор WebDriver.

Шаг 1. Скачивание примера WebView2API

Если у вас нет проекта WebView2, клонируйте репозиторий WebView2Samples, чтобы скачать пример приложения WebView2API. Этот конкретный пример в более крупном репозитории является исчерпывающим примером последней версии пакета SDK для WebView2. Убедитесь, что выполнены предварительные требования для примера приложения WebView2API.

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

Пример приложения WebView2API

Шаг 2. Установка Microsoft Edge WebDriver

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

Убедитесь, что версия Microsoft Edge WebDriver соответствует версии среды выполнения WebView2, используемой приложением. Чтобы пример WebView2API работал, убедитесь, что ваша версия среды выполнения WebView2 больше или равна поддерживаемой версии последнего выпуска пакета SDK Для WebView2.

Чтобы найти последнюю версию пакета SDK для WebView2, см. заметки о выпуске пакета SDK для WebView2.
Чтобы узнать, какая версия среды выполнения WebView2 у вас сейчас есть, перейдите на страницу edge://settings/help.

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

К этому моменту вы установили среду выполнения WebView2, создали проект WebView2 и установили Microsoft Edge WebDriver. Далее начните использовать Selenium, как показано ниже.

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

Создается новый проект со всем кодом, помещенным Program.cs в файл.
Затем добавьте Selenium в проект; установите Selenium с помощью пакета NuGet Selenium.WebDriver, как показано ниже. Чтобы скачать пакет NuGet Selenium.WebDriver, в Visual Studio выберите Управление проектами>пакетов NuGet.
Перейдите на вкладку Обзор . Появится следующий экран.
В раскрывающемся списке Источник пакета выберите nuget.org.
Установите флажок Включить предварительную версию .
Введите Selenium.WebDriver на панели Поиск и выберите Selenium.WebDriver в результатах.
В окне сведений справа убедитесь, что для параметра Версия задано значение 4.0.0 или более поздней версии, а затем нажмите кнопку Установить. NuGet скачивает Selenium на компьютер.

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

Используйте 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;

Теперь вы настроили пустой проект Visual Studio, который подходит для тестирования Selenium. Затем настройте Selenium для управления WebView2 с помощью метода запуска или присоединения.

Шаг 4. Выбор запуска приложения Microsoft Edge WebDriver или присоединения к нему

Решите, следует ли настроить Selenium для управления WebView2, используя подход "запуск" или "присоединение".

Подход "запуска". В некоторых сценариях целесообразно разрешить Microsoft Edge WebDriver обрабатывать запуск приложения WebView2. Microsoft Edge WebDriver запускает приложение WebView2 и автоматически подключается к первому доступному экземпляру WebView2, создаваемому приложением.
Подход "присоединить". В других сценариях рекомендуется подключить Microsoft Edge WebDriver к работающему экземпляру WebView2. Вы запускаете приложение за пределами Microsoft Edge WebDriver, а затем присоединяете Microsoft Edge WebDriver к работающему экземпляру WebView2. Этот подход "присоединить" предназначен для приложения WebView2, несовместимого с подходом запуска.

Подход 1. Предоставление Microsoft Edge WebDriver возможности запуска приложения WebView2

Если у вас есть простое приложение, которое создает один экземпляр WebView2 и этот экземпляр активен сразу после запуска, можно использовать подход запуска. используйте шаг 4a. Разрешение Microsoft Edge WebDriver запускать приложение WebView2.

В этом сценарии существует один экземпляр WebView2, который доступен при запуске без необходимости перемещаться по собственному пользовательскому интерфейсу.

Подход 2. Подключение Microsoft Edge WebDriver к работающему приложению WebView2

Если у вас есть ситуация, которая не соответствует приведенному выше сценарию запуска, следует подключить Microsoft Edge WebDriver к работающему экземпляру WebView2 (вместо того, чтобы разрешить Microsoft Edge WebDriver обрабатывать запуск WebView2); используйте шаг 4b. Присоединение Microsoft Edge WebDriver к работающему приложению WebView2.

Ниже приведены некоторые примеры сценариев, которые не соответствуют сценарию запуска.

Перед созданием экземпляра WebView2 необходимо перейти по собственному пользовательскому интерфейсу.
Приложение создает несколько экземпляров WebView2, и вы хотите присоединиться к определенному экземпляру.

В таких сценариях рекомендуется подключиться к определенному экземпляру WebView2, так как запуск приложения WebView2 в Microsoft Edge предназначен только для относительно простых сценариев. Когда Microsoft Edge WebDriver запускает приложение, оно автоматически подключается к первому созданному экземпляру WebView2 и завершается ошибкой, если экземпляр WebView2 не найден.

Независимо от того, используете ли вы подход "запуск" или "присоединение", необходимо скачать Microsoft Edge WebDriver и убедиться, что версия соответствует версии среды выполнения WebView2, используемой приложением. Начальные шаги по настройке платформы WebDriver (например, Selenium) будут отличаться между подходами "запуск" и "присоединение".

Выполнив эти начальные шаги для запуска приложения или присоединения к экземпляру WebView2, вы сможете использовать любые поддерживаемые команды WebDriver для взаимодействия с этим экземпляром WebView2.

Шаг 4a. Разрешение Microsoft Edge WebDriver запустить приложение WebView2

Используйте этот подход запуска, если у вас есть простое приложение, которое создает один экземпляр WebView2 и этот экземпляр активен сразу после запуска. В этом сценарии существует один экземпляр WebView2, который доступен при запуске без необходимости перемещаться по собственному пользовательскому интерфейсу.

Чтобы управлять WebView2 с помощью Selenium и Microsoft Edge WebDriver, выполните приведенные ниже действия.

EdgeOptions Create объект путем копирования и вставки следующего кода:
```
static void Main(string[] args)
{
   EdgeOptions eo = new EdgeOptions();
```
Далее мы добавим код, который выполняет следующие действия:
- EdgeOptions Настройте экземпляр для использования WebView2, задав UseWebView для параметра значение true.
- Задайте eo.BinaryLocation путь к файлу двоичного файла приложения WebView2.
- Create объект с EdgeDriver помощью экземпляра EdgeOptions .

Скопируйте следующий код и вставьте его под eo строку объявления:

//Set the EdgeOptions instance to use WebView2
eo.UseWebView = true;

//Set the BinaryLocation to the filepath of the WebView2API Sample runtime
eo.BinaryLocation = @"C:\path\to\your\webview2\project.exe";
EdgeDriver e = new EdgeDriver(eo);

В приведенном выше коде укажите правильный путь к файлу среды выполнения проекта и среды выполнения Microsoft Edge WebDriver на компьютере.

EdgeDriver теперь настроен для управления WebView2 в проекте. Например, если вы используете пример WebView2API, код теперь может перейти к https://microsoft.com , выполнив e.Url = @"https://www.microsoft.com"; команду , как показано в следующем листинге кода.
Убедитесь, что Selenium может управлять WebView2. Для этого задайте точку останова в строке e.Url = @"https://www.microsoft.com";и запустите проект.
```
   //Navigate the WebView2API Sample from bing.com to microsoft.com
   e.Url = @"https://www.microsoft.com";

   //Exit Microsoft Edge WebDriver
   e.Quit();
}
```

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

Это конец статьи, если вы используете подход "запуск".

Шаг 4b. Присоединение Microsoft Edge WebDriver к работающему приложению WebView2

В этом разделе объясняется, как подключить Microsoft Edge WebDriver к уже работающему экземпляру WebView2. Если у вас нет одного экземпляра WebView2 или экземпляру WebView2 требуется переход по собственному пользовательскому интерфейсу, воспользуйтесь этим разделом и подходом.

Проблема заключается в том, что для автоматизации приложения на основе WebView2 иногда сначала необходимо выполнить некоторые действия в собственном графическом интерфейсе, чтобы запустить элемент управления WebView2. В качестве решения необходимо перейти в собственный пользовательский интерфейс за пределами Microsoft Edge WebDriver и каким-то образом убедиться, что экземпляр WebView2 отображается следующим образом.

В этом сценарии, где у вас есть собственный пользовательский интерфейс для навигации, вы запускаете приложение с помощью метода, отличного от Microsoft Edge WebDriver, например скрипта командной строки или отдельного средства, например WinAppDriver. После запуска процесса приложения активируйте экземпляр WebView2, а затем подключите Microsoft Edge WebDriver к работающему экземпляру WebView2.

Microsoft Edge WebDriver не обрабатывает автоматизацию собственного пользовательского интерфейса, но вот некоторые другие подходы для навигации по собственному пользовательскому интерфейсу и отображения экземпляра WebView2, который вы автоматируете:

Драйвер приложений Windows (WinAppDriver) — это служба для поддержки автоматизации тестов пользовательского интерфейса, подобной Selenium, в приложениях Windows. Эта служба поддерживает тестирование приложений универсальная платформа Windows (UWP), Windows Forms (WinForms), Windows Presentation Foundation (WPF) и классических приложений windows (Win32) на Windows 10 компьютерах.
Использование автоматизации собственного пользовательского интерфейса Майкрософт напрямую. Платформа Microsoft модель автоматизации пользовательского интерфейса позволяет скриптам автоматического тестирования взаимодействовать с пользовательским интерфейсом. Microsoft модель автоматизации пользовательского интерфейса позволяет приложениям Windows предоставлять и использовать программную информацию о пользовательских интерфейсах. Он предоставляет программный доступ к большинству элементов пользовательского интерфейса на рабочем столе. Она позволяет продуктам со специальными возможностями, таким как средства чтения с экрана, предоставлять сведения об пользовательском интерфейсе конечным пользователям и управлять пользовательским интерфейсом с помощью стандартных входных данных и средств, отличных от стандартных входных данных.
Используйте флаг, например параметр командной строки или переменную среды, чтобы сообщить приложению о запуске непосредственно в экземпляр WebView2, чтобы избежать необходимости перехода по собственному пользовательскому интерфейсу. В зависимости от сценария это может позволить использовать подход запуска, описанный в разделе Шаг 4a. Разрешение Microsoft Edge WebDriver запускать приложение WebView2.

Помимо активации экземпляра WebView2 необходимо задать его --remote-debugging-port параметр командной строки. Мы сделаем это на следующих шагах. Microsoft Edge WebDriver будет использовать этот порт удаленной отладки для подключения к экземпляру WebView2.

Запуск приложения WebView2 с включенной удаленной отладкой

Следующий шаг происходит при написании кода приложения. Этот дополнительный параметр командной строки необходимо указать при создании экземпляра элемента управления WebView2. Включите удаленную отладку, как показано ниже.

Настройте экземпляр WebView2 с дополнительным --remote-debugging-port=<port> параметром командной строки, используя один из рекомендуемых подходов в Globals в Справочнике по C++ для Win32 WebView2. Выберите доступный номер порта для этого параметра.
Запустите приложение. Способ запуска приложения зависит от того, какие другие собственные средства тестирования пользовательского интерфейса вы используете.

На этом этапе приложение запущено и задан его --remote-debugging-port параметр командной строки. Затем мы подключим Microsoft Edge WebDriver к запущенной версии приложения WebView2.

Присоединение Microsoft Edge WebDriver к запущенном приложению WebView2

EdgeOptions.DebuggerAddress Используйте свойство , чтобы сообщить Microsoft Edge WebDriver о подключении к удаленному порту отладки, указанному ранее, вместо запуска нового приложения:

EdgeOptions eo = new EdgeOptions();
eo.UseWebView = true;
eo.DebuggerAddress = "localhost:9222";
EdgeDriver e = new EdgeDriver(eo);

Выше localhost:9222 номер порта, указанный в этой строке, должен соответствовать номеру порта, выбранному при настройке --remote-debugging-port выше.

Дополнительные сведения о свойстве DebuggerAddress объекта см. в EdgeOptions разделе Объект EdgeOptions.

Для приложений UWP подключите Microsoft Edge WebDriver к WebView2 с помощью средств удаленной работы.

Выполните действия, описанные в статье Удаленная отладка приложений UWP с помощью средств удаленной работы для Microsoft Edge.

Эта функция WebView2 в настоящее время поддерживается только в канале предварительной версии Canary Microsoft Edge. Задайте переменную WEBVIEW2_RELEASE_CHANNEL_PREFERENCE=1среды , чтобы убедиться, что версия WebView2 является Canary. Дополнительные сведения см. в статье Настройка переменной среды в статье Тестирование предстоящих API и функций.
После запуска приложения UWP WebView2 перейдите на страницу http://<Device Portal URL>/msedge. Например, на следующем снимку экрана показано localhost:50080/msedge:
browserProcessId Обратите внимание на для процесса WebView2, к которому требуется подключить Microsoft Edge WebDriver. Например, на приведенном выше снимку экрана отображается browserProcessId как 47860.
В коде wdpAddress и используйте свойства и wdpProcessId , чтобы сообщить Microsoft Edge WebDriver о подключении к средствам удаленной работы для Microsoft Edge и конкретному процессу WebView2.
- wdpAddress определяется как URL-адрес портала устройств.
- wdpProcessId определяется как browserProcessId значение, указанное на предыдущем шаге:
```
EdgeOptions eo = new EdgeOptions();
eo.AddAdditionalEdgeOption("wdpAddress", "localhost:50080");
eo.AddAdditionalEdgeOption("wdpProcessId", 47860);
// Optional user name and password to use when connecting to a Windows Device Portal
// server.  Required if the server has authentication enabled.
// eo.AddAdditionalEdgeOption("wdpUsername", "username");
// eo.AddAdditionalEdgeOption("wdpPassword", "password");
EdgeDriver e = new EdgeDriver(eo);
```

Дополнительные сведения о запуске приложения UWP WebView2 с помощью средств удаленной отладки см. в статье Удаленная отладка приложений UWP с помощью средств удаленной отладки для Microsoft Edge.

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

Проекты И отладка UWP

Чтобы настроить параметры отладки при запуске, необходимо использовать реестр для включения отладки для всех процессов WebView2 при запуске. Из-за способа запуска проектов UWP элементу управления WebDriver2 не удается автоматически настроить параметры отладки при запуске. Обратите внимание, что установка этого раздела реестра обеспечивает поддержку отладки для всех запущенных процессов WebView2 при настройке этой переменной среды.

Параметры можно переопределить значениями, указанными в разделе реестра WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS. Сведения о разделе реестра WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS (и эквивалентной переменной среды) см. в статье CreateCoreWebView2EnvironmentWithOptions in Globals. Раздел реестра WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS (который также является именем переменной среды) позволяет добавлять в аргументы командной строки, которые будут переданы в процесс браузера WebView2 Runtime при его запуске.

См. также

Документация по WebDriver на Selenium . Как API Selenium управляет WebView2 или Microsoft Edge.
Общие сведения о Microsoft Edge WebView2 . Использование элемента управления WebView2 для внедрения веб-содержимого в собственное приложение.
Использование WebDriver для автоматизации тестирования — автоматизация Microsoft Edge.