Automatiser et tester des applications WebView2 avec Microsoft Edge WebDriver

Cet article explique comment automatiser et tester votre application WebView2 avec Microsoft Edge WebDriver, à l’aide de l’infrastructure Selenium pour l’automatisation des tests de navigateur.

Cet article fournit des instructions pour utiliser l’infrastructure Selenium et C#, mais vous pouvez utiliser n’importe quelle bibliothèque, infrastructure et langage de programmation qui prend en charge WebDriver. Pour effectuer les mêmes tâches à l’aide d’une infrastructure de test WebDriver autre que Selenium, consultez la documentation officielle de l’infrastructure de votre choix.

Pour créer des tests automatisés qui simulent des interactions utilisateur pour votre application WebView2, vous pouvez utiliser Microsoft Edge WebDriver. Microsoft Edge WebDriver est l’implémentation par Microsoft du protocole WebDriver W3C. Le protocole WebDriver W3C permet aux programmes de contrôler le comportement des navigateurs web.

Les auteurs de tests écrivent des tests qui utilisent des commandes WebDriver pour indiquer au navigateur d’effectuer des actions spécifiques. Microsoft Edge WebDriver reçoit ces commandes, puis demande au navigateur d’effectuer l’action demandée. Microsoft Edge WebDriver prend en charge l’automatisation du navigateur Microsoft Edge et des applications WebView2.

Pour connaître la relation entre le protocole WebDriver, Microsoft Edge WebDriver en tant qu’implémentation de ce protocole et l’infrastructure de test Selenium, consultez Vue d’ensemble de WebDriver.

Étape 1 : Télécharger l’exemple WebView2API

Si vous n’avez pas de projet WebView2 existant, clonez le référentiel WebView2Samples afin de télécharger l’exemple d’application WebView2API. Cet exemple particulier dans le référentiel plus grand est un exemple complet du dernier Kit de développement logiciel (SDK) WebView2. Vérifiez que vous avez satisfait aux conditions préalables pour l’exemple d’application WebView2API.

Une fois que vous avez cloné le référentiel, générez le projet dans Visual Studio. Il doit ressembler à la figure suivante.

Étape 2 : Installer Microsoft Edge WebDriver

Suivez les instructions pour installer Microsoft Edge WebDriver. Microsoft Edge WebDriver est le pilote spécifique au navigateur requis par Selenium pour automatiser et tester WebView2.

Vérifiez que la version de Microsoft Edge WebDriver correspond à la version du runtime WebView2 utilisée par votre application. Pour que l’exemple WebView2API fonctionne, assurez-vous que votre version du runtime WebView2 est supérieure ou égale à la version prise en charge de la dernière version du Kit de développement logiciel (SDK) WebView2.

• Pour rechercher la dernière version du Kit de développement logiciel (SDK) WebView2, consultez Notes de publication du Kit de développement logiciel (SDK) WebView2.

• Pour connaître la version du runtime WebView2 dont vous disposez actuellement, accédez à edge://settings/help.

Étape 3 : Ajouter Selenium à l’exemple WebView2API

À ce stade, vous avez installé le runtime WebView2, créé un projet WebView2 et installé Microsoft Edge WebDriver. Ensuite, commencez à utiliser Selenium, comme suit.

1. Commencez par créer un projet .NET Framework C# dans Visual Studio. Sélectionnez Suivant dans le coin inférieur droit pour continuer.

   

2. Donnez un nom de projet à votre projet, enregistrez-le à l’emplacement de votre choix, puis sélectionnez Create.

   

   Un projet est créé, avec tout le code placé dans le Program.cs fichier.

   

3. Ensuite, ajoutez Selenium au projet ; installez Selenium à l’aide du package NuGet Selenium.WebDriver comme suit. Pour télécharger le package NuGet Selenium.WebDriver, dans Visual Studio, sélectionnez Projet>Gérer les packages NuGet.

4. Sélectionnez l’onglet Parcourir . L’écran suivant s’affiche.

   

5. Dans la liste déroulante Source du package , sélectionnez nuget.org.

6. Cochez la case Inclure la préversion .

7. Tapez Selenium.WebDriver dans la barre de Recherche, puis sélectionnez Selenium.WebDriver dans les résultats.

8. Dans la fenêtre de détails à droite, vérifiez que version est définie sur 4.0.0 ou version ultérieure, puis sélectionnez Installer. NuGet télécharge Selenium sur votre ordinateur.

   

   Pour en savoir plus sur le package NuGet Selenium.WebDriver, consultez Selenium.WebDriver.

9. Utilisez OpenQA.Selenium.Edge en ajoutant l’instruction using OpenQA.Selenium.Edge; au début du fichier Program.cs:

   using OpenQA.Selenium.Edge;
   
   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Text;
   using System.Threading.Tasks;
   

Vous avez maintenant configuré un projet Visual Studio vide qui convient aux tests Selenium. Ensuite, configurez Selenium pour piloter WebView2 à l’aide de l’approche « lancement » ou de l’approche « attachement ».

Étape 4 : Choisir si Microsoft Edge WebDriver doit lancer votre application ou s’y attacher

Décidez s’il faut configurer Selenium pour piloter WebView2 à l’aide de l’approche « lancement » ou « attachement ».

• Approche « lancement » : dans certains scénarios, il est approprié de laisser Microsoft Edge WebDriver gérer le lancement de votre application WebView2. Microsoft Edge WebDriver lance votre application WebView2 et s’attache automatiquement à la première instance WebView2 disponible que votre application crée.

• Approche « attachement » : dans d’autres scénarios, il est approprié d’attacher Microsoft Edge WebDriver à un instance WebView2 en cours d’exécution. Vous lancez votre application en dehors de Microsoft Edge WebDriver, puis attachez Microsoft Edge WebDriver à un instance WebView2 en cours d’exécution. Cette approche « attachement » concerne une application WebView2 qui n’est pas compatible avec l’approche de « lancement ».

Approche 1 : Laisser Microsoft Edge WebDriver lancer votre application WebView2

Si vous disposez d’une application simple qui crée une seule instance WebView2 et que instance est actif immédiatement au lancement, vous pouvez utiliser l’approche de « lancement » ; utilisez l’Étape 4a : Laisser Microsoft Edge WebDriver lancer votre application WebView2.

Dans ce scénario, il existe une instance WebView2, disponible au lancement, sans avoir à naviguer dans une interface utilisateur native.

Approche 2 : Attachement de Microsoft Edge WebDriver à une application WebView2 en cours d’exécution

Si vous avez une situation qui ne correspond pas au scénario de « lancement » ci-dessus, vous devez attacher Microsoft Edge WebDriver à un instance WebView2 en cours d’exécution (au lieu de laisser Microsoft Edge WebDriver gérer le lancement de WebView2). Utilisez l’Étape 4b : Attacher Microsoft Edge WebDriver à une application WebView2 en cours d’exécution.

Voici quelques exemples de scénarios qui ne correspondent pas au scénario de « lancement » :

• Vous devez parcourir une interface utilisateur native avant de créer l’instance WebView2.
• Votre application crée plusieurs instances WebView2 et vous souhaitez l’attacher à un instance spécifique.

Dans de tels scénarios, nous vous recommandons d’attacher à un instance spécifique de WebView2, car le lancement de votre application WebView2 par Microsoft Edge WebDriver est réservé aux scénarios relativement simples. Lorsque Microsoft Edge WebDriver lance votre application, elle s’attache automatiquement à la première instance WebView2 créée et échoue si aucune instance WebView2 n’est trouvée.

Que vous utilisiez l’approche « lancement » ou « attachement », vous devez télécharger Microsoft Edge WebDriver et vérifier que la version correspond à la version du runtime WebView2 utilisée par votre application. Les étapes initiales de configuration de votre infrastructure WebDriver (par exemple, Selenium) diffèrent entre les approches « lancement » et « attachement ».

Une fois que vous avez effectué ces étapes initiales pour lancer une application ou l’attacher à un instance WebView2, vous pouvez utiliser toutes les commandes WebDriver prises en charge pour interagir avec cette instance WebView2.

Étape 4a : Laisser Microsoft Edge WebDriver lancer votre application WebView2

Utilisez cette approche de « lancement » si vous avez une application simple qui crée une seule instance WebView2 et que instance est actif immédiatement au lancement. Dans ce scénario, il existe une instance WebView2, disponible au lancement, sans avoir à naviguer dans une interface utilisateur native.

Pour piloter WebView2 avec Selenium et Microsoft Edge WebDriver :

1. Create un EdgeOptions objet, en copiant et collant le code suivant :

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

   Ensuite, nous allons ajouter du code qui effectue les opérations suivantes :

   • Configurez le EdgeOptions instance pour utiliser WebView2, en définissant l’option sur UseWebViewtrue.
   • Définissez eo.BinaryLocation sur le chemin d’accès au fichier binaire de votre application WebView2.
   • Create un EdgeDriver objet à l’aide de la EdgeOptions instance.

2. Copiez le code suivant et collez-le sous la ligne de eo déclaration :

   //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. Dans le code ci-dessus, spécifiez le chemin d’accès de fichier correct de votre runtime de projet et le runtime Microsoft Edge WebDriver sur votre ordinateur.

   EdgeDriver a maintenant été configuré pour piloter webView2 dans votre projet. Par exemple, si vous utilisez l’exemple WebView2API, votre code peut désormais accéder à https://microsoft.com en exécutant la e.Url = @"https://www.microsoft.com"; commande , comme indiqué dans la liste de code suivante.

4. Vérifiez que Selenium peut piloter WebView2. Pour ce faire, définissez un point d’arrêt sur la ligne e.Url = @"https://www.microsoft.com";, puis exécutez le projet.

      //Navigate the WebView2API Sample from bing.com to microsoft.com
      e.Url = @"https://www.microsoft.com";
   
      //Exit Microsoft Edge WebDriver
      e.Quit();
   }
   

   

Félicitations ! Vous avez correctement automatisé un projet WebView2 et piloté WebView2 à l’aide de Selenium et de Microsoft Edge WebDriver, selon l’approche de « lancement ».

Il s’agit de la fin de l’article, si vous utilisez l’approche de « lancement ».

Étape 4b : Attachement de Microsoft Edge WebDriver à une application WebView2 en cours d’exécution

Cette section explique comment attacher Microsoft Edge WebDriver à un instance WebView2 déjà en cours d’exécution. Si vous n’avez pas une seule instance WebView2 ou si votre instance WebView2 nécessite de naviguer dans une interface utilisateur native, utilisez cette section et cette approche.

Le problème est que pour automatiser une application WebView2, vous devez parfois d’abord effectuer certaines actions dans l’interface graphique graphique native afin de lancer le contrôle WebView2. En guise de solution, vous devez naviguer dans l’interface utilisateur native en dehors de Microsoft Edge WebDriver et vous assurer que le instance WebView2 est affiché, comme suit.

Dans ce scénario, où vous avez une interface utilisateur native à parcourir, vous lancez votre application à l’aide d’une méthode autre que Microsoft Edge WebDriver, telle qu’un script de ligne de commande, ou un outil distinct tel que WinAppDriver. Une fois que votre processus d’application a été lancé, vous déclenchez l’instanciation WebView2, puis attachez Microsoft Edge WebDriver à l’instance WebView2 en cours d’exécution.

Microsoft Edge WebDriver ne gère pas l’automatisation de l’interface utilisateur native, mais voici d’autres approches pour naviguer dans l’interface utilisateur native et afficher les instance WebView2 que vous automatisez :

• Windows Application Driver (WinAppDriver) est un service qui prend en charge l’automatisation des tests d’interface utilisateur de type Selenium sur les applications Windows. Ce service prend en charge les applications de test plateforme Windows universelle (UWP), Windows Forms (WinForms), Windows Presentation Foundation (WPF) et Windows classique (Win32) sur les PC Windows 10.

• Utilisation directe de Microsoft Native UI Automation. L’infrastructure Microsoft UI Automation permet aux scripts de test automatisés d’interagir avec l’interface utilisateur. Microsoft UI Automation permet aux applications Windows de fournir et de consommer des informations programmatiques sur les interfaces utilisateur (UI). Il fournit un accès par programmation à la plupart des éléments d’interface utilisateur sur le bureau. Il permet aux produits de technologie d’assistance, tels que les lecteurs d’écran, de fournir des informations sur l’interface utilisateur aux utilisateurs finaux et de manipuler l’interface utilisateur par entrée standard et par d’autres moyens que l’entrée standard.

• Utilisez un indicateur tel qu’un paramètre de ligne de commande ou une variable d’environnement pour indiquer à votre application de lancer directement sur l’instance WebView2, afin d’éviter d’avoir à naviguer dans l’interface utilisateur native. Selon votre scénario, cela peut permettre d’utiliser l’approche de « lancement » décrite dans Étape 4a : Laisser Microsoft Edge WebDriver lancer votre application WebView2.

En plus de vous assurer que l’instance WebView2 est activé, vous devez définir son --remote-debugging-port paramètre de ligne de commande. Nous le ferons dans les étapes ci-dessous. Microsoft Edge WebDriver utilise ce port de débogage distant pour se connecter à votre instance WebView2.

Lancement de l’application WebView2 avec le débogage à distance activé

L’étape suivante se produit lorsque vous codez votre application. Vous devez fournir ce paramètre de ligne de commande supplémentaire lorsque vous instanciez votre contrôle WebView2. Activez le débogage à distance, comme suit.

1. Configurez votre instance WebView2 avec le --remote-debugging-port=<port> paramètre de ligne de commande supplémentaire à l’aide de l’une des approches recommandées dans Globals, dans Référence C++ WebView2 Win32. Choisissez un numéro de port disponible pour ce paramètre.

2. Lancez votre application. La façon dont vous lancez votre application dépend des autres outils de test natifs de l’interface utilisateur que vous utilisez.

À ce stade, votre application est en cours d’exécution et son --remote-debugging-port paramètre de ligne de commande a été défini. Ensuite, nous allons attacher Microsoft Edge WebDriver à l’application WebView2 lancée.

Attachement de Microsoft Edge WebDriver à l’application WebView2 lancée

1. Utilisez la EdgeOptions.DebuggerAddress propriété pour indiquer à Microsoft Edge WebDriver de se connecter au port de débogage distant que vous avez spécifié précédemment, au lieu de lancer une nouvelle application :

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

Ci-dessus localhost:9222 , le numéro de port indiqué sur cette ligne doit correspondre au numéro de port que vous avez choisi lors de la définition --remote-debugging-port ci-dessus.

Pour plus d’informations sur la DebuggerAddress propriété de l’objet EdgeOptions , consultez Objet EdgeOptions.

Pour les applications UWP, attachez Microsoft Edge WebDriver à WebView2 avec les outils à distance

1. Effectuez les étapes décrites dans Débogage à distance d’applications UWP avec les Outils à distance pour Microsoft Edge.

   Cette fonctionnalité WebView2 est actuellement prise en charge uniquement dans le canal d’évaluation Canary de Microsoft Edge. Définissez la variable WEBVIEW2_RELEASE_CHANNEL_PREFERENCE=1d’environnement pour vous assurer que la version de WebView2 est Canary. Pour plus d’informations, consultez Comment définir une variable d’environnement dans Tester les API et fonctionnalités à venir.

   

2. Une fois que vous avez lancé l’application UWP WebView2, accédez à http://<Device Portal URL>/msedge. Par exemple, la capture d’écran suivante montre localhost:50080/msedge:

   

3. Notez le browserProcessId pour le processus WebView2 auquel vous souhaitez attacher Microsoft Edge WebDriver. Par exemple, la capture d’écran ci-dessus montre comme browserProcessId47860.

4. Dans votre code, utilisez les wdpAddress propriétés et wdpProcessId pour indiquer à Microsoft Edge WebDriver de se connecter aux Outils à distance pour Microsoft Edge et au processus WebView2 spécifique.

   • wdpAddress est défini en tant qu’URL du portail d’appareil.
   • wdpProcessId est défini comme la browserProcessId valeur que vous avez notée à l’étape précédente :

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

Pour plus d’informations sur le lancement d’une application UWP WebView2 avec les outils à distance, consultez Débogage à distance d’applications UWP avec les outils à distance pour Microsoft Edge.

Félicitations ! Vous avez correctement attaché Microsoft Edge WebDriver à une application WebView2 en cours d’exécution.

Projets et débogage UWP

Pour configurer les paramètres de débogage au lancement, vous devez utiliser le Registre pour activer le débogage de tous les processus WebView2 au démarrage. En raison de la façon dont les projets UWP sont lancés, le contrôle WebDriver2 ne peut pas configurer automatiquement les paramètres de débogage au lancement. Notez que la définition de cette clé de Registre permet de prendre en charge le débogage pour tous les processus WebView2 lancés pendant la configuration de cette variable d’environnement.

Vous pouvez remplacer les paramètres par des valeurs spécifiées dans la clé de Registre WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS. Pour plus d’informations sur la clé de Registre WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS (et la variable d’environnement équivalente), consultez CreateCoreWebView2EnvironmentWithOptions dans Globals. La clé de Registre WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS (qui est également un nom de variable d’environnement) vous permet d’ajouter aux arguments de ligne de commande qui seront transmis au processus de navigateur WebView2 Runtime au démarrage.

Voir aussi

• Documentation sur WebDriver sur Selenium : comment les API Selenium pilotent WebView2 ou Microsoft Edge.
• Présentation de Microsoft Edge WebView2 - Comment utiliser le contrôle WebView2 pour incorporer du contenu web dans votre application native.
• Utilisez WebDriver pour l’automatisation des tests - Automatisation de Microsoft Edge.