Automatizar y probar aplicaciones webView2 con Microsoft Edge controlador

Artículo
12/02/2021
Tiempo de lectura: 11 minutos

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

En este artículo se proporcionan instrucciones para usar el marco selenio y C#, pero puede usar cualquier biblioteca, marco y lenguaje de programación compatible con WebDriver. Para realizar las mismas tareas con un marco de pruebas de WebDriver distinto de Selenio, consulte la documentación oficial para su marco de elección.

Para crear pruebas automatizadas que simulen las interacciones del usuario para la aplicación WebView2, puedes usar Microsoft Edge driver. Microsoft Edge Driver 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 decirle al explorador que realice acciones específicas. Microsoft Edge driver recibe estos comandos y, a continuación, pide al explorador que realice la acción solicitada. Microsoft Edge Driver admite la automatización de las aplicaciones Microsoft Edge Browser y WebView2.

Para obtener información sobre la relación entre el protocolo WebDriver, Microsoft Edge Driver como implementación de dicho protocolo y el marco de prueba de Selenio, vea WebDriver overview.

Paso 1: Descargar el ejemplo webView2API

Si no tienes un proyecto de WebView2 existente, descarga la aplicación de ejemplo WebView2API, que 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 clonado el repositorio, cree el proyecto en Visual Studio. Debería tener el aspecto de la siguiente figura.

Paso 2: Instalar Microsoft Edge controlador

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

Asegúrate de que la versión de Microsoft Edge driver 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 de WebView2 Runtime sea mayor o igual que la versión compatible de la última versión del SDK de WebView2.

Para buscar la versión más reciente del SDK de WebView2, vea 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 selenio al ejemplo webView2API

En este punto, ha instalado WebView2 Runtime, ha creado un proyecto webView2 e instalado Microsoft Edge driver. A continuación, empieza a usar Selenio, como se muestra a continuación.

Comience creando un nuevo proyecto C# .NET Framework en Visual Studio. Seleccione Siguiente en la esquina inferior derecha para continuar.
Asigne al proyecto un nombre Project, guárdelo en la ubicaciónpreferida y, a continuación, seleccione Crear.

Se crea un nuevo proyecto, con todo el código colocado en el Program.cs archivo.
A continuación, agregue Selenio al proyecto; instalar Selenio mediante el paquete selenio.WebDriver NuGet siguiente. Para descargar el paquete de NuGet Selenium.WebDriver, en **** Visual Studio, seleccione Project > Administrar NuGet paquetes.
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 Selenio en el equipo.

Para obtener más información sobre el paquete de 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 Visual Studio que sea adecuado para las pruebas de Selenio. A continuación, configure Selenium para que drive WebView2 mediante el enfoque de "inicio" o el enfoque de "adjuntar".

Paso 4: Elegir si Microsoft Edge controlador debe iniciar la aplicación o adjuntarla a ella

Decida si desea configurar Selenium para que drive WebView2 mediante el enfoque "iniciar" o "adjuntar".

El enfoque de "inicio": en algunos escenarios, es apropiado permitir que Microsoft Edge controlador controle el inicio de la aplicación WebView2. Microsoft Edge driver inicia la aplicación WebView2 y se adjunta automáticamente a la primera instancia webView2 disponible que crea la aplicación.
El enfoque "attach": en otros escenarios, es apropiado adjuntar Microsoft Edge Driver a una instancia webView2 en ejecución. Inicias la aplicación fuera de Microsoft Edge driver y, a continuación, adjuntas Microsoft Edge driver 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 driver inicie la aplicación WebView2

Si tienes una aplicación sencilla que crea una única instancia webView2 y esa instancia está activa inmediatamente después del inicio, puedes usar el enfoque "launch"; use Step 4a: Letting Microsoft Edge Driver launch your WebView2 app.

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

Enfoque 2: Adjuntar Microsoft Edge controlador a una aplicación webView2 en ejecución

Si tiene alguna situación que no se ajuste al escenario de "inicio" anterior, debe adjuntar un controlador Microsoft Edge a una instancia webView2 en ejecución (en lugar de permitir que el controlador de Microsoft Edge controle el inicio de WebView2); use el paso 4b:Adjuntar un controlador de Microsoft Edge 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 WebView2.
La aplicación crea varias instancias webView2 y quieres adjuntarla a una instancia específica.

En estos escenarios, se recomienda adjuntar a una instancia específica de WebView2, ya que tener Microsoft Edge Driver iniciar la aplicación WebView2 es solo para escenarios relativamente sencillos. Cuando Microsoft Edge driver inicia la aplicación, se adjunta automáticamente a la primera instancia webView2 que se crea y producirá un error si no se encuentra ninguna instancia webView2.

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

Una vez que haya completado estos pasos iniciales para iniciar una aplicación o adjuntarla a una instancia webView2, podrá usar los comandos de WebDriver compatibles para interactuar con esa instancia webView2.

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

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

Para conducir WebView2 con Selenium y Microsoft Edge driver:

Cree un EdgeOptions objeto copiando y pegando el siguiente fragmento de código:
```
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, estableciendo la opción en UseWebView true .
- Se eo.BinaryLocation establece en la ruta de acceso de archivo del binario de la aplicación WebView2.
- Cree un EdgeDriver objeto mediante la EdgeOptions instancia.

Copie el código siguiente y péguelo debajo de la eo línea de 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 tiempo de ejecución del proyecto y el Microsoft Edge tiempo de ejecución del controlador en el equipo.

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

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

¡Enhorabuena! Ha automatizado correctamente un proyecto webView2 y ha controlado WebView2 mediante Selenium y Microsoft Edge Driver, según el enfoque de "inicio".

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

Paso 4b: Adjuntar Microsoft Edge controlador a una aplicación webView2 en ejecución

En esta sección se explica cómo adjuntar Microsoft Edge driver a una instancia webView2 que ya se está ejecutando. Si no tiene una sola instancia webView2 o la instancia 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, en ocasiones 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 Driver y, de alguna manera, asegurarse de que la instancia WebView2 se muestre de la siguiente manera.

En este escenario, donde tienes que navegar por alguna interfaz de usuario nativa, inicias la aplicación con un método que no sea un controlador de Microsoft Edge, como un script de línea de comandos o una herramienta independiente como WinAppDriver. Una vez que se haya iniciado el proceso de la aplicación, desencadenará la instancia WebView2 y, a continuación, adjuntará Microsoft Edge Driver a la instancia webView2 en ejecución.

Microsoft Edge Driver no controla la automatización de la interfaz de usuario nativa, pero estos son algunos otros métodos para navegar por la interfaz de usuario nativa y mostrar la instancia WebView2 que va a automatizar:

Windows application driver (WinAppDriver) es un servicio que admite la automatización de pruebas de interfaz de usuario de selenio en Windows aplicaciones. Este servicio admite pruebas de aplicaciones de la Plataforma Windows universal (UWP), formularios de Windows (WinForms), Windows Presentation Foundation (WPF) y aplicaciones clásicas de Windows (Win32) en Windows 10 equipos.
Usar la automatización de la interfaz de usuario nativa de Microsoft directamente. El marco de automatización de la interfaz de usuario de Microsoft permite que los scripts de prueba automatizados interactúen con la interfaz de usuario. Automatización de la interfaz de usuario de Microsoft Windows aplicaciones para proporcionar y consumir información programática acerca de 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.
Usa una marca como un parámetro de línea de comandos o una variable de entorno para que la aplicación se inicie directamente en la instancia WebView2, para evitar la necesidad de navegar por la interfaz de usuario nativa. Según el escenario, esto podría hacer posible usar el enfoque de "inicio" descrito en step 4a: Letting Microsoft Edge Driver launch your WebView2 app.

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

Iniciar la aplicación WebView2 con depuración remota habilitada

El siguiente paso se produce cuando codificas 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 de la siguiente manera.

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

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 driver a la aplicación WebView2 iniciada.

Adjuntar el controlador Microsoft Edge a la aplicación WebView2 iniciada

Use la propiedad para Microsoft Edge Driver para conectarse al puerto de depuración remoto que especificó anteriormente, en lugar EdgeOptions.DebuggerAddress de iniciar una nueva aplicación:

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

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

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

¡Enhorabuena! Has automatizado correctamente un proyecto webView2 y controlado WebView2 mediante Selenio y controlador de Microsoft Edge, adjuntando Microsoft Edge Driver a una aplicación webView2 en ejecución.

Consulte también

Documentación de WebDriver on Selenium: cómo las API de Selenium unidades 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.
Use WebDriver para la automatización de pruebas: automatización de Microsoft Edge.
edge-selenium-tools: un proyecto que el equipo de Microsoft Edge creó para permitir a los usuarios de Selenium 3 impulsar Microsoft Edge (Chromium) y WebView2 con la misma API que se proporciona en Selenium 4.