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 sur l’utilisation du framework Selenium et de C#, mais vous pouvez utiliser n’importe quelle bibliothèque, infrastructure et langage de programmation prenant en charge WebDriver. Pour accomplir les mêmes tâches à l’aide d’un framework de test WebDriver autre que Selenium, consultez la documentation officielle du framework de votre choix.

Pour créer des tests automatisés qui simulent les interactions utilisateur pour votre application WebView2, vous pouvez utiliser Microsoft Edge WebDriver. Microsoft Edge WebDriver est l’implémentation par Microsoft du protocole WebDriver du W3C. Le protocole WebDriver du 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 la relation entre le protocole WebDriver, Microsoft Edge WebDriver en tant qu’implémentation de ce protocole et le framework de test Selenium, consultez la vue d’ensemble de WebDriver.

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

Si vous n’avez pas de projet WebView2 existant, clonez le dépôt WebView2Samples afin de télécharger l’application WebView2API Sample. Cet échantillon particulier dans le référentiel plus grand est un échantillon complet du dernier SDK WebView2. Assurez-vous que vous avez satisfait aux conditions préalables pour l’exemple d’application WebView2API.

Une fois que vous avez cloné le dépôt, générez le projet dans Visual Studio. Il doit ressembler à la figure suivante.

Exemple d’application WebView2API

É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.

Assurez-vous 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 SDK WebView2.

É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 nouveau projet C# .NET Framework dans Visual Studio. Sélectionnez Suivant dans le coin inférieur droit pour continuer.

    Création d’un projet

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

    Configurer votre nouveau projet

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

    Nouveau projet

  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 Project>Manage NuGet.

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

    Télécharger le package NuGet

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

  6. Cochez la case Inclure la version préliminaire .

  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, assurez-vous que la version est définie sur 4.0.0 ou version ultérieure, puis sélectionnez Installer. NuGet télécharge Selenium sur votre ordinateur.

    Gérer un package NuGet

    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 adapté au test Selenium. Ensuite, configurez Selenium pour piloter WebView2 en utilisant l’approche « lancement » ou l’approche « attacher ».

Étape 4 : Choisir si Microsoft Edge WebDriver doit lancer votre application ou s’attacher à celle-ci

Décidez s’il faut configurer Selenium pour piloter WebView2 en utilisant l’approche « lancer » ou « attacher ».

  • L’approche de « 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 l’attache automatiquement à la première instance WebView2 disponible créée par votre application.

  • Approche « attacher » : dans d’autres scénarios, il est approprié d’attacher Microsoft Edge WebDriver à une instance WebView2 en cours d’exécution. Vous lancez votre application en dehors de Microsoft Edge WebDriver, puis vous attachez Microsoft Edge WebDriver à une instance WebView2 en cours d’exécution. Cette approche « attacher » est destinée à 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 un seul instance WebView2 et qui instance est active immédiatement au lancement, vous pouvez utiliser l’approche « lancement » ; utilisez l’étape 4a : laisser Microsoft Edge WebDriver lancer votre application WebView2.

Dans ce scénario, il existe une seule instance WebView2, et elle est disponible au lancement, sans avoir besoin de naviguer dans une interface utilisateur native.

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

Si vous rencontrez une situation qui ne correspond pas au scénario de « lancement » ci-dessus, vous devez attacher Microsoft Edge WebDriver à une instance WebView2 en cours d’exécution (au lieu de laisser Microsoft Edge WebDriver gérer le lancement 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 naviguer dans une interface utilisateur native avant la création de l’instance WebView2.
  • Votre application crée plusieurs instances WebView2 et vous souhaitez les attacher à un instance spécifique.

Dans de tels scénarios, nous vous recommandons de l’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 ou non l’approche « lancer » ou « attacher », vous devez télécharger Microsoft Edge WebDriver et vous assurer que la version correspond à la version du runtime WebView2 que votre application utilise. Les étapes initiales de configuration de votre infrastructure WebDriver (telle que Selenium) diffèrent entre l’approche « lancer » et « attacher ».

Une fois que vous avez terminé ces étapes initiales pour lancer une application ou l’attacher à une instance WebView2, vous serez en mesure d’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 disposez d’une application simple qui crée un seul instance WebView2 et qui instance est active immédiatement après le lancement. Dans ce scénario, il existe une seule instance WebView2, et elle est disponible au lancement, sans avoir besoin de naviguer dans une interface utilisateur native.

Pour piloter WebView2 avec Selenium et Microsoft Edge WebDriver :

  1. Créez 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 l’instance EdgeOptions pour qu’elle utilise WebView2, en définissant l’option UseWebView sur true.
    • Définissez eo.BinaryLocation le chemin d’accès de votre binaire d’application WebView2.
    • Créez un objet à l’aide de EdgeDriver l’instance EdgeOptions .

  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 correct de l’exécution de votre projet et de l’environnement d’exécution 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 maintenant être utilisé 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();
}

    Selenium exécutant WebView2

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

C’est la fin de l’article, si vous utilisez l’approche « lancement ».

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

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

Un problème est que pour automatiser une application basée sur WebView2, vous devez parfois d’abord effectuer certaines actions dans l’interface graphique native afin de lancer le contrôle WebView2. Comme solution, vous devez naviguer dans l’interface utilisateur native en dehors de Microsoft Edge WebDriver et vous assurer d’une manière ou d’une autre que l’instance WebView2 s’affiche, comme suit.

Dans ce scénario, où vous disposez d’une interface utilisateur native pour naviguer, 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 le processus de votre application lancé, vous déclenchez l’instanciation WebView2, puis vous 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 l’instance WebView2 que vous automatisez :

  • Le pilote d’application Windows (WinAppDriver) est un service permettant d’automatiser les tests d’interface utilisateur de type Selenium sur les applications Windows. Ce service prend en charge le test des applications de la plateforme Windows universelle (UWP), Windows Forms (WinForms), Windows Presentation Foundation (WPF) et Windows classique (Win32) sur les PC Windows 10.

  • Utilisation directe de l’automatisation de l’interface utilisateur native de Microsoft. 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 par programme sur les interfaces utilisateur (UI). Il fournit un accès par programme à la plupart des éléments de l’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 des moyens autres 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 se lancer directement sur l’instance WebView2, afin d’éviter de devoir naviguer dans l’interface utilisateur native. Selon votre scénario, cela peut permettre d’utiliser l’approche de « lancement » décrite à l’étape 4a : Laisser Microsoft Edge WebDriver lancer votre application WebView2.

En plus de vous assurer que l’instance WebView2 est activée, vous devez définir son --remote-debugging-port paramètre de ligne de commande. Nous allons le faire dans les étapes ci-dessous. Microsoft Edge WebDriver utilisera ce port de débogage à distance 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 la référence WebView2 Win32 C++. 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 d’interface utilisateur natifs 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);

Au niveau 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 configuration ci-dessus --remote-debugging-port .

Pour plus d’informations sur la propriété de l’objet DebuggerAddressEdgeOptions , voir objet EdgeOptions.

Pour les applications UWP, attachez Microsoft Edge WebDriver à WebView2 avec les outils de contrôle à distance

  1. Suivez les étapes de Débogage à distance d’applications UWP avec les Outils de contrôle à distance pour Microsoft Edge.

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

    Paramètres de l’application UWP

  2. Après avoir lancé l’application UWP WebView2, accédez à http://<Device Portal URL>/msedge. Par exemple, la capture d’écran suivante montre localhost:50080/msedge:

    ID de processus d’une application UWP en cours d’exécution

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

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

    • wdpAddress est défini comme l’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 de contrôle à distance, consultez Débogage à distance d’applications UWP avec les outils de contrôle à distance pour Microsoft Edge.

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

Projets UWP et débogage

Pour configurer les paramètres de débogage au lancement, vous devez utiliser le registre pour activer le débogage pour 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 la prise en charge du débogage de tous les processus WebView2 lancés pendant que cette variable d’environnement est configurée.

Vous pouvez remplacer des 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 une variable d’environnement équivalente), consultez CreateCoreWebView2EnvironmentWithOptions dans les valeurs globales. 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 du navigateur WebView2 Runtime lors de son démarrage.

Voir aussi

  • Last updated on