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

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

Este artículo proporciona instrucciones para usar Selenium Framework y C#, pero puede usar cualquier biblioteca, marco y lenguaje de programación que admita WebDriver. Para realizar las mismas tareas utilizando un marco de prueba de WebDriver que no sea Selenium, consulte la documentación oficial del marco de su elección.

Para crear pruebas automatizadas que simulen las interacciones del usuario con la aplicación WebView2, puede usar WebDriver de Microsoft Edge. 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. WebDriver de Microsoft Edge recibe estos comandos y, a continuación, pide al explorador que realice la acción solicitada. WebDriver de Microsoft Edge admite la automatización del explorador Microsoft Edge y las aplicaciones WebView2.

Para conocer la relación entre el protocolo WebDriver, Microsoft Edge WebDriver como una implementación de ese protocolo y el marco de pruebas de Selenium, consulte Información general sobre WebDriver.

Paso 1: Descargar el ejemplo de WebView2API

Si no tienes un proyecto WebView2 existente, clona el repositorio de WebView2Samples para descargar la aplicación de ejemplo WebView2API. Esa muestra concreta dentro del repositorio más grande es una muestra completa del SDK de WebView2 más reciente. Asegúrese de que cumple los requisitos previos para la aplicación de ejemplo de WebView2API.

Una vez que haya clonado el repositorio, compile el proyecto en Visual Studio. Debería tener un aspecto similar al de la siguiente figura.

Aplicación de ejemplo de WebView2API

Paso 2: Instalar WebDriver de Microsoft Edge

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

Asegúrate de que la versión de WebDriver de Microsoft Edge coincida con la versión del tiempo de ejecución de WebView2 que usa la aplicación. Para que el ejemplo de WebView2API funcione, asegúrate de que la versión del tiempo de ejecución de WebView2 sea mayor o igual que la versión compatible de la última versión del SDK de WebView2.

Paso 3: Agregar Selenium a la muestra de WebView2API

Llegados a este punto, ya has instalado el tiempo de ejecución de WebView2, has creado un proyecto de WebView2 e instalado Microsoft Edge WebDriver. A continuación, empiece a usar Selenium, como se indica a continuación.

  1. Comience por crear un nuevo proyecto de C# .NET Framework en Visual Studio. Selecciona Siguiente en la esquina inferior derecha para continuar.

    Crear un proyecto

  2. Asigne un nombre a su proyecto, guárdelo en la ubicación que prefiera y, a continuación, seleccione Crear.

    Configuración del nuevo proyecto

    Se crea un nuevo proyecto, con todo el código colocado en el Program.cs archivo.

    Nuevo proyecto

  3. A continuación, agregue Selenium al proyecto; instale Selenium mediante el paquete NuGet de Selenium.WebDriver como se indica a continuación. Para descargar el paquete NuGet de Selenium.WebDriver, en Visual Studio, seleccione Project>Manage NuGet Packages.

  4. Seleccione la pestaña Examinar . Aparecerá la siguiente pantalla.

    Descargar paquete NuGet

  5. En la lista desplegable Origen del paquete , seleccione nuget.org.

  6. Active la casilla Incluir versión preliminar .

  7. Escriba Selenium.WebDriver en la barra de búsqueda y, a continuación, seleccione Selenium.WebDriver en los resultados.

  8. En la ventana de detalles de la derecha, asegúrate de que la versión esté establecida en 4.0.0 o posterior y, a continuación, selecciona Instalar. NuGet descarga Selenium en su máquina.

    Administrar el paquete NuGet

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

  9. Para utilizarlo OpenQA.Selenium.Edge , agregue 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 de Visual Studio vacío que es adecuado para las pruebas de Selenium. A continuación, configura Selenium para controlar WebView2 mediante el enfoque de "inicio" o el enfoque de "adjuntar".

Paso 4: Elegir si WebDriver de Microsoft Edge debe iniciar la aplicación o adjuntarse a ella

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

  • El enfoque de "inicio": en algunos escenarios, es adecuado dejar que WebDriver de Microsoft Edge controle el inicio de la aplicación WebView2. WebDriver de Microsoft Edge inicia la aplicación WebView2 y se adjunta automáticamente a la primera instancia de WebView2 disponible que crea la aplicación.

  • El enfoque de "adjuntar": en otros escenarios, es adecuado adjuntar WebDriver de Microsoft Edge a una instancia de WebView2 en ejecución. Inicia la aplicación fuera de Microsoft Edge WebDriver y, a continuación, conecta 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".

Método 1: Dejar que WebDriver de Microsoft Edge inicie la aplicación WebView2

Si tienes una aplicación sencilla que crea una única instancia de WebView2 y esa instancia se activa inmediatamente después del inicio, puedes usar el enfoque de "inicio"; Paso 4a: Permitir que WebDriver de Microsoft Edge 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.

Método 2: Conectar WebDriver de Microsoft Edge a una aplicación WebView2 en ejecución

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

Algunos ejemplos de escenarios que no se ajustan al escenario de "lanzamiento" 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 quieres adjuntarlas a una instancia específica.

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

Independientemente de si usa el enfoque de "iniciar" o "adjuntar", debe descargar el controlador web de Microsoft Edge y asegurarse de que la versión coincide 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 Selenium) diferirán entre el enfoque de "iniciar" y "adjuntar".

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

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

Use este enfoque de "inicio" si tiene una aplicación simple que crea una sola 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:

  1. Cree un EdgeOptions objeto copiando y pegando el siguiente código:

    static void Main(string[] args)
{
   EdgeOptions eo = new EdgeOptions();

    A continuación, agregaremos código que hace lo siguiente:

    • Configure la EdgeOptions instancia para usar WebView2, estableciendo la UseWebView opción en true.
    • Establezca eo.BinaryLocation en la ruta de acceso del archivo del archivo binario de la aplicación WebView2.
    • Cree un EdgeDriver objeto con la EdgeOptions instancia.

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

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

    EdgeDriver ahora se ha configurado para controlar WebView2 en el proyecto. Por ejemplo, si usas el ejemplo de WebView2API, ahora puedes ir al https://microsoft.com código ejecutando el e.Url = @"https://www.microsoft.com"; comando, como se muestra en la siguiente lista de código.

  4. 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();
}

    Selenium ejecutando WebView2

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

Este es el final del artículo, si está utilizando el enfoque de "lanzamiento".

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

En esta sección se explica cómo asociar WebDriver de Microsoft Edge 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 a través de 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 necesita 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 WebDriver de Microsoft Edge y, de alguna manera, asegurarse de que se muestra la instancia de WebView2, de la siguiente manera.

En este escenario, en el que tienes alguna interfaz de usuario nativa para navegar, inicias la aplicación con un método distinto de Microsoft Edge WebDriver, como un script de línea de comandos, o una herramienta independiente como WinAppDriver. Una vez iniciado el proceso de la aplicación, desencadena la creación de instancias de WebView2 y, a continuación, conecta Microsoft Edge WebDriver a la instancia de WebView2 que se está ejecutando.

WebDriver de Microsoft Edge no controla la automatización nativa de la interfaz de usuario, pero estos son otros métodos 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 interfaz de usuario similar a Selenium en aplicaciones de Windows. Este servicio admite pruebas de aplicaciones de la Plataforma universal de Windows (UWP), Windows Forms (WinForms), Windows Presentation Foundation (WPF) y Windows clásico (Win32) en equipos con Windows 10.

  • Uso directo de la automatización de la interfaz de usuario nativa de Microsoft. El marco de trabajo de Automatización de la interfaz de usuario de Microsoft permite que los scripts de prueba automatizados interactúen con la interfaz de usuario. La Automatización de la interfaz de usuario de Microsoft permite que las aplicaciones de Windows proporcionen y consuman 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 acerca de la interfaz de usuario a los usuarios finales y manipulen la interfaz de usuario mediante entradas 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 indicar a tu aplicación que se inicie directamente en la instancia de WebView2, para evitar la necesidad de navegar por la interfaz de usuario nativa. Dependiendo de su escenario, esto podría hacer posible usar el enfoque de "inicio" descrito en el Paso 4a: Permitir que el controlador WebDriver de Microsoft Edge 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. WebDriver de Microsoft Edge usará este puerto de depuración remoto para conectarse a la instancia de WebView2.

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

El siguiente paso ocurre cuando está codificando 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.

  1. 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 globales, en la Referencia de C++ de Win32 de WebView2. Elija un número de puerto disponible para este parámetro.

  2. Inicie la aplicación. La forma de iniciar la aplicación depende de qué otras herramientas nativas de prueba de interfaz de usuario 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 WebDriver a la aplicación WebView2 iniciada.

Adjuntar Microsoft Edge WebDriver a la aplicación WebView2 iniciada

  1. Use la EdgeOptions.DebuggerAddress propiedad para indicar a Microsoft Edge WebDriver que se conecte al puerto de depuración remoto 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 la parte superior, el número de puerto proporcionado en esta línea debe coincidir con el número de puerto que seleccionó al realizar la configuración --remote-debugging-port anterior.

Para obtener más información sobre la DebuggerAddressEdgeOptions propiedad del objeto, consulta el objeto EdgeOptions.

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

  1. Siga los pasos de Depuración remota de aplicaciones para UWP con Herramientas remotas para Microsoft Edge.

    Actualmente, esta característica WebView2 solo se admite 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, consulte Cómo establecer una variable de entorno en Cambiar a un canal de versión preliminar para probar las próximas API y características.

    Configuración de la aplicación para UWP

  2. Después de iniciar la aplicación WebView2 para UWP, ve a http://<Device Portal URL>/msedge. Por ejemplo, la captura de pantalla siguiente muestra localhost:50080/msedge:

    Id. de proceso de una aplicación para UWP en ejecución

  3. Tenga en cuenta el browserProcessId proceso de WebView2 al que desea adjuntar Microsoft Edge WebDriver. Por ejemplo, la captura de pantalla anterior muestra el browserProcessId como 47860.

  4. En el código, use las wdpAddress propiedades and wdpProcessId para indicar a Microsoft Edge WebDriver que se conecte a las 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 para UWP WebView2 con herramientas remotas, consulta Depuración remota de aplicaciones para UWP con herramientas remotas para Microsoft Edge.

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

Proyectos y depuración de UWP

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

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

Vea también

  • Last updated on