Automatización y prueba de aplicaciones WebView2 con Microsoft Edge WebDriver

Artículo
06/03/2023

En este artículo se explica cómo automatizar y probar la aplicación WebView2 con Microsoft Edge WebDriver mediante el marco Selenium para la automatización de pruebas del explorador.

En este artículo se proporcionan instrucciones para usar el marco selenium y C#, pero puede usar cualquier lenguaje de programación, marco y biblioteca que admita WebDriver. Para realizar las mismas tareas mediante un marco de pruebas de WebDriver distinto de Selenium, consulte la documentación oficial del marco que prefiera.

Para crear pruebas automatizadas que simulan interacciones de usuario para la aplicación WebView2, puede usar Microsoft Edge WebDriver. Microsoft Edge WebDriver es la implementación de Microsoft del protocolo W3C WebDriver . El protocolo W3C WebDriver permite a los programas controlar el comportamiento de los exploradores web.

Los autores de pruebas escriben pruebas que usan comandos de WebDriver para indicar al explorador que realice acciones específicas. Microsoft Edge WebDriver recibe estos comandos y, a continuación, pide al explorador que realice la acción solicitada. Microsoft Edge WebDriver admite la automatización de las aplicaciones Microsoft Edge Browser y WebView2.

Para conocer la relación entre el protocolo WebDriver, Microsoft Edge WebDriver como implementación de ese protocolo y el marco de pruebas de Selenium, consulte Introducción a WebDriver.

Paso 1: Descargar el ejemplo WebView2API

Si no tiene un proyecto WebView2 existente, clone el repositorio WebView2Samples para descargar la aplicación de ejemplo WebView2API. Ese ejemplo concreto en el repositorio más grande es un ejemplo completo del SDK de WebView2 más reciente. Asegúrese de que ha cumplido los requisitos previos para la aplicación de ejemplo WebView2API.

Una vez que haya clonado el repositorio, compile el proyecto en Visual Studio. Debería ser similar a la siguiente ilustración.

Aplicación de ejemplo WebView2API

Paso 2: Instalar Microsoft Edge WebDriver

Siga las instrucciones para instalar Microsoft Edge WebDriver. Microsoft Edge WebDriver es el controlador específico del explorador requerido por Selenium para automatizar y probar WebView2.

Asegúrese de que la versión de Microsoft Edge WebDriver coincide con la versión de WebView2 Runtime que usa la aplicación. Para que el ejemplo WebView2API funcione, asegúrese de que la versión del entorno de ejecución de WebView2 sea mayor o igual que la versión admitida de la versión más reciente del SDK de WebView2.

Para buscar la versión más reciente del SDK de WebView2, consulte notas de la versión del SDK de WebView2.
Para averiguar qué versión de WebView2 Runtime tiene actualmente, vaya a edge://settings/help.

Paso 3: Agregar Selenium al ejemplo WebView2API

En este punto, ha instalado WebView2 Runtime, ha creado un proyecto WebView2 e instalado Microsoft Edge WebDriver. A continuación, empiece a usar Selenium, como se indica a continuación.

Empiece por crear un nuevo proyecto de .NET Framework de C# en Visual Studio. Seleccione Siguiente en la esquina inferior derecha para continuar.
Asigne un nombre de proyecto al proyecto, guárdelo en la ubicación que prefiera y, a continuación, seleccione Create.

Se crea un nuevo proyecto, con todo el código colocado en el Program.cs archivo.
A continuación, agregue Selenium al proyecto; instale Selenium mediante el paquete NuGet Selenium.WebDriver como se indica a continuación. Para descargar el paquete NuGet Selenium.WebDriver, en Visual Studio, seleccione Administrar>proyectos paquetes NuGet.
Seleccione la pestaña Examinar . Aparece la siguiente pantalla.
En la lista desplegable Origen del paquete , seleccione nuget.org.
Active la casilla Incluir versión preliminar .
Escriba Selenium.WebDriver en la barra de Búsqueda y, a continuación, seleccione Selenium.WebDriver en los resultados.
En la ventana de detalles de la derecha, asegúrese de que la versión está establecida en 4.0.0 o posterior y, a continuación, seleccione Instalar. NuGet descarga Selenium en el equipo.

Para obtener más información sobre el paquete NuGet Selenium.WebDriver, vea Selenium.WebDriver.

Use OpenQA.Selenium.Edge agregando la instrucción using OpenQA.Selenium.Edge; al principio del archivo Program.cs:

using OpenQA.Selenium.Edge;

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

Ahora ha configurado un proyecto vacío de Visual Studio adecuado para las pruebas de Selenium. A continuación, configure Selenium para impulsar WebView2 mediante el enfoque "launch" o el enfoque "attach".

Paso 4: Elegir si Microsoft Edge WebDriver debe iniciar la aplicación o adjuntarla

Decida si desea configurar Selenium para impulsar WebView2 mediante el enfoque "launch" o "attach".

El enfoque de "inicio": en algunos escenarios, es adecuado permitir que Microsoft Edge WebDriver controle el inicio de la aplicación WebView2. Microsoft Edge WebDriver inicia la aplicación WebView2 y se asocia automáticamente a la primera instancia de WebView2 disponible que crea la aplicación.
Enfoque de "adjuntar": en otros escenarios, es adecuado adjuntar Microsoft Edge WebDriver a una instancia de WebView2 en ejecución. Inicie la aplicación fuera de Microsoft Edge WebDriver y, a continuación, asocie Microsoft Edge WebDriver a una instancia de WebView2 en ejecución. Este enfoque de "adjuntar" es para una aplicación WebView2 que no es compatible con el enfoque de "inicio".

Enfoque 1: Permitir que Microsoft Edge WebDriver inicie la aplicación WebView2

Si tiene una aplicación sencilla que crea una única instancia de WebView2 y esa instancia está activa inmediatamente después del inicio, puede usar el enfoque "launch"; use el paso 4a: Permitir que Microsoft Edge WebDriver inicie la aplicación WebView2.

En este escenario, hay una instancia de WebView2 y está disponible al iniciarse, sin necesidad de navegar por ninguna interfaz de usuario nativa.

Enfoque 2: Asociación de Microsoft Edge WebDriver a una aplicación WebView2 en ejecución

Si tiene alguna situación que no se ajuste al escenario de "inicio" anterior, debe adjuntar Microsoft Edge WebDriver a una instancia webView2 en ejecución (en lugar de permitir que Microsoft Edge WebDriver controle el inicio de WebView2); use el paso 4b: Adjuntar Microsoft Edge WebDriver a una aplicación WebView2 en ejecución.

Algunos ejemplos de escenarios que no se ajustan al escenario de "inicio" son:

Debe navegar por alguna interfaz de usuario nativa antes de crear la instancia de WebView2.
La aplicación crea varias instancias de WebView2 y quiere asociarlas a una instancia específica.

En estos escenarios, se recomienda asociar a una instancia específica de WebView2, ya que hacer que Microsoft Edge WebDriver inicie la aplicación WebView2 es solo para escenarios relativamente sencillos. Cuando Microsoft Edge WebDriver inicia la aplicación, se asocia automáticamente a la primera instancia de WebView2 que se crea y producirá un error si no se encuentra ninguna instancia de WebView2.

Independientemente de si usa el enfoque "launch" o "attach", debe descargar Microsoft Edge WebDriver y asegurarse de que la versión coincida con la versión del entorno de ejecución de WebView2 que usa la aplicación. Los pasos iniciales para configurar el marco de WebDriver (como Selenium) variarán entre los enfoques "launch" y "attach".

Una vez completados estos pasos iniciales para iniciar una aplicación o asociarse a una instancia de WebView2, podrá usar los comandos de WebDriver admitidos para interactuar con esa instancia de WebView2.

Paso 4a: Permitir que Microsoft Edge WebDriver inicie la aplicación WebView2

Use este enfoque de "inicio" si tiene una aplicación sencilla que crea una única instancia de WebView2 y esa instancia está activa inmediatamente después del inicio. En este escenario, hay una instancia de WebView2 y está disponible al iniciarse, sin necesidad de navegar por ninguna interfaz de usuario nativa.

Para controlar WebView2 con Selenium y Microsoft Edge WebDriver:

Create un EdgeOptions objeto, copiando y pegando el código siguiente:
```
static void Main(string[] args)
{
   EdgeOptions eo = new EdgeOptions();
```
A continuación, agregaremos código que haga lo siguiente:
- Configure la EdgeOptions instancia para que use WebView2; para ello, establezca la UseWebView opción en true.
- Establezca eo.BinaryLocation en la ruta de acceso del archivo del archivo binario de la aplicación WebView2.
- Create un EdgeDriver objeto mediante la EdgeOptions instancia de .

Copie el código siguiente y péguelo debajo de la línea de eo declaración:

//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);

En el código anterior, especifique la ruta de acceso de archivo correcta del entorno de ejecución del proyecto y el tiempo de ejecución de Microsoft Edge WebDriver en el equipo.

EdgeDriver ahora se ha configurado para controlar WebView2 en el proyecto. Por ejemplo, si usa el ejemplo WebView2API, el código ahora puede ir a https://microsoft.com mediante la ejecución del e.Url = @"https://www.microsoft.com"; comando , como se muestra en la lista de código siguiente.
Compruebe que Selenium puede controlar WebView2. Para ello, establezca un punto de interrupción en la línea e.Url = @"https://www.microsoft.com";y, a continuación, ejecute el proyecto.
```
   //Navigate the WebView2API Sample from bing.com to microsoft.com
   e.Url = @"https://www.microsoft.com";

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

Enhorabuena. Ha automatizado correctamente un proyecto WebView2 y controlado WebView2 mediante Selenium y Microsoft Edge WebDriver, según el enfoque de "inicio".

Este es el final del artículo, si usa el enfoque de "inicio".

Paso 4b: Adjuntar Microsoft Edge WebDriver a una aplicación WebView2 en ejecución

En esta sección se explica cómo adjuntar Microsoft Edge WebDriver a una instancia de WebView2 que ya se está ejecutando. Si no tiene una sola instancia de WebView2 o la instancia de WebView2 requiere navegar por alguna interfaz de usuario nativa, use esta sección y enfoque.

Un problema es que, para automatizar una aplicación basada en WebView2, a veces primero debe realizar algunas acciones en la GUI nativa para iniciar el control WebView2. Como solución, debe navegar por la interfaz de usuario nativa fuera de Microsoft Edge WebDriver y, de alguna manera, asegurarse de que se muestra la instancia de WebView2, como se indica a continuación.

En este escenario, donde tiene alguna interfaz de usuario nativa para navegar, inicia la aplicación mediante un método distinto de Microsoft Edge WebDriver, como un script de línea de comandos o una herramienta independiente como WinAppDriver. Una vez que se haya iniciado el proceso de aplicación, desencadenará la instancia de WebView2 y, a continuación, asociará Microsoft Edge WebDriver a la instancia de WebView2 en ejecución.

Microsoft Edge WebDriver no controla la automatización nativa de la interfaz de usuario, pero estos son algunos otros enfoques para navegar por la interfaz de usuario nativa y mostrar la instancia de WebView2 que está automatizando:

Windows Application Driver (WinAppDriver) es un servicio para admitir la automatización de pruebas de IU similar a Selenium en aplicaciones windows. Este servicio admite la prueba de aplicaciones de Plataforma universal de Windows (UWP), Windows Forms (WinForms), Windows Presentation Foundation (WPF) y Windows clásico (Win32) en equipos Windows 10.
Usar la automatización de la interfaz de usuario nativa de Microsoft directamente. El marco de Trabajo de Microsoft Automatización de la interfaz de usuario permite que los scripts de prueba automatizados interactúen con la interfaz de usuario. Microsoft Automatización de la interfaz de usuario permite a las aplicaciones de Windows proporcionar y consumir información mediante programación sobre las interfaces de usuario (UI). Proporciona acceso mediante programación a la mayoría de los elementos de la interfaz de usuario en el escritorio. Permite que los productos de tecnología de asistencia, como los lectores de pantalla, proporcionen información sobre la interfaz de usuario a los usuarios finales y manipulen la interfaz de usuario por entrada estándar y por medios distintos de la entrada estándar.
Use una marca como un parámetro de línea de comandos o una variable de entorno para indicar a la aplicación que se inicie directamente en la instancia webView2, para evitar la necesidad de navegar por la interfaz de usuario nativa. En función de su escenario, esto podría hacer posible usar el enfoque de "inicio" descrito en El paso 4a: Permitir que Microsoft Edge WebDriver inicie la aplicación WebView2.

Además de asegurarse de que la instancia de WebView2 está activada, debe establecer su --remote-debugging-port parámetro de línea de comandos. Lo haremos en los pasos siguientes. Microsoft Edge WebDriver usará este puerto de depuración remota para conectarse a la instancia de WebView2.

Inicio de la aplicación WebView2 con la depuración remota habilitada

El siguiente paso se produce al codificar la aplicación. Debe proporcionar este parámetro de línea de comandos adicional al crear una instancia del control WebView2. Habilite la depuración remota, como se indica a continuación.

Configure la instancia de WebView2 con el --remote-debugging-port=<port> parámetro de línea de comandos adicional mediante uno de los enfoques recomendados en Globals, en WebView2 Win32 C++ Reference. Elija un número de puerto disponible para este parámetro.
Inicie la aplicación. La forma de iniciar la aplicación depende de las otras herramientas nativas de prueba de la interfaz de usuario que use.

En este momento, la aplicación se está ejecutando y se ha establecido su --remote-debugging-port parámetro de línea de comandos. A continuación, adjuntaremos Microsoft Edge WebDriver a la aplicación WebView2 iniciada.

Conexión de Microsoft Edge WebDriver a la aplicación WebView2 iniciada

Use la EdgeOptions.DebuggerAddress propiedad para indicar a Microsoft Edge WebDriver que se conecte al puerto de depuración remota que especificó anteriormente, en lugar de iniciar una nueva aplicación:

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

En localhost:9222 el caso anterior, el número de puerto especificado en esta línea debe coincidir con el número de puerto que eligió al establecer --remote-debugging-port anteriormente.

Para obtener más información sobre la DebuggerAddress propiedad del EdgeOptions objeto , vea EdgeOptions (objeto).

Para aplicaciones para UWP, adjunte Microsoft Edge WebDriver a WebView2 con Herramientas remotas

Realice los pasos descritos en Depuración remota de aplicaciones para UWP con Herramientas remotas para Microsoft Edge.

Esta característica WebView2 solo se admite actualmente en el canal de versión preliminar canary de Microsoft Edge. Establezca la variable WEBVIEW2_RELEASE_CHANNEL_PREFERENCE=1de entorno , para asegurarse de que la versión de WebView2 es Canary. Para obtener más información, vea Cómo establecer una variable de entorno en Probar las próximas API y características.
Después de iniciar la aplicación WebView2 para UWP, vaya a http://<Device Portal URL>/msedge. Por ejemplo, en la captura de pantalla siguiente se muestra localhost:50080/msedge:
Tenga en cuenta el browserProcessId para el proceso WebView2 al que desea asociar Microsoft Edge WebDriver. Por ejemplo, en la captura de pantalla anterior se muestra como browserProcessId47860.

En el código, use las wdpAddress propiedades y wdpProcessId para indicar a Microsoft Edge WebDriver que se conecte a herramientas remotas para Microsoft Edge y al proceso webView2 específico.

wdpAddress se define como la dirección URL del portal de dispositivos.
wdpProcessId se define como el browserProcessId valor que anotó en el paso anterior:

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

Para obtener más información sobre cómo iniciar una aplicación WebView2 para UWP con Herramientas remotas, consulta Depuración remota de aplicaciones para UWP con Herramientas remotas para Microsoft Edge.

Enhorabuena. Ha conectado correctamente Microsoft Edge WebDriver a una aplicación WebView2 en ejecución.

Depuración y proyectos para UWP

Para configurar los valores de depuración al iniciar, debe usar el Registro para habilitar la depuración de todos los procesos de WebView2 durante el inicio. Debido a la forma en que se inician los proyectos de UWP, el control WebDriver2 no puede configurar automáticamente las opciones de depuración al iniciarse. Tenga en cuenta que al establecer esta clave del Registro se habilita la compatibilidad con la depuración para todos los procesos WebView2 iniciados mientras se configura esta variable de entorno.

Puede invalidar los parámetros por valores especificados en la clave del Registro de WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS. Para obtener información sobre la clave del Registro de WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS (y la variable de entorno equivalente), vea CreateCoreWebView2EnvironmentWithOptions in Globals. La clave del Registro WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS (que también es un nombre de variable de entorno) le permite agregar a los argumentos de la línea de comandos que se pasarán al proceso del explorador WebView2 Runtime cuando se inicie.

Consulte también

Documentación de WebDriver en Selenium : cómo las API Selenium controla WebView2 o Microsoft Edge.
Introducción a Microsoft Edge WebView2 : cómo usar el control WebView2 para insertar contenido web en la aplicación nativa.
Uso de WebDriver para la automatización de pruebas : automatización de Microsoft Edge.