Procédures pas à pas : création, édition et gestion d'un test codé de l'interface utilisateur

Article
08/10/2011

Dans cette procédure pas à pas, vous allez créer une simple application WPF (Windows Presentation Foundation) afin de montrer comment créer, modifier et gérer un test codé de l'interface utilisateur. La procédure pas à pas fournit des solutions pour la correction des tests interrompus par différents problèmes de synchronisation et de refactorisation des contrôles.

Composants requis

Pour exécuter cette procédure pas à pas, vous avez besoin de :

Visual Studio 2010 Ultimate ou Visual Studio 2010 Premium.

Créer une application WPF simple

Dans le menu Fichier, pointez sur Nouveau, puis cliquez sur Projet.

La boîte de dialogue Nouveau projet s'affiche.
Dans le volet Modèles installés, développez Visual C#, puis sélectionnez Windows.
Au-dessus du volet central, vérifiez que la liste déroulante de la version cible du .NET Framework a la valeur .NET Framework 4.
Dans le volet central, sélectionnez le modèle Application WPF.
Dans la zone de texte Nom, tapez SimpleWPFApp.
Choisissez un dossier dans lequel enregistrer le projet. Dans la zone de texte Emplacement, tapez le nom du dossier du projet.
Cliquez sur OK.

Le Concepteur WPF pour Visual Studio s'ouvre et affiche le MainWindow du projet.
Si la boîte à outils n'est pas encore ouverte, ouvrez-la. Cliquez dans le menu Affichage, puis sélectionnez Boîte à outils.
Sous la section Tous les contrôles WPF, faites glisser un contrôleButton, CheckBox et ProgressBar sur le MainWindow dans l'aire de conception.
Sélectionnez le contrôle Button. Dans la fenêtre Propriétés, remplacez la valeur Button de la propriété Contenu par Start.
Sélectionnez le contrôle ProgressBar. Dans la fenêtre Propriétés, remplacez la valeur 100 de la propriété Maximum par 1 000.
Sélectionnez le contrôle Checkbox. Dans la fenêtre Propriétés, effacez le contenu de la propriété IsEnabled.
Double-cliquez sur le contrôle Button pour ajouter un événement Click.

MainWindow.xmal.cs s'affiche dans l'Éditeur de code avec le curseur dans le nouvel événement button1_Click.
Au début de la classe MainWindow, ajoutez un délégué. Le délégué sera utilisé pour la barre de progression. Pour ajouter le délégué, ajoutez le code suivant :
```
        private delegate void ProgressBarDelegate(
        System.Windows.DependencyProperty dp, Object value);
```

Dans la méthode button1_Click, ajoutez le code suivant :

            double progress = 0;

            ProgressBarDelegate updatePbDelegate =
        new ProgressBarDelegate(progressBar1.SetValue);

            do
            {
                progress ++;

                Dispatcher.Invoke(updatePbDelegate,
                    System.Windows.Threading.DispatcherPriority.Background,
                    new object[] { ProgressBar.ValueProperty, progress });
                progressBar1.Value = progress;
            }
            while (progressBar1.Value != progressBar1.Maximum);

            checkBox1.IsEnabled = true;

Vérifier l'exécution correcte de l'application WPF

Dans le menu Débogage, sélectionnez Démarrer le débogage ou appuyez sur F5.
Cliquez sur Démarrer.

En quelques secondes, la barre de progression atteint 100 %. Le contrôle CheckBox est maintenant activé.
Fermez SimpleWPFApp.

Créer et exécuter un test codé de l'interface utilisateur pour SimpleWPFApp

Dans l'Explorateur de solutions, cliquez avec le bouton droit sur la solution, cliquez sur Ajouter, puis sélectionnez Nouveau projet.

La boîte de dialogue Ajouter un nouveau projet s'affiche.
Dans le volet Modèles installés, développez Visual C#, puis sélectionnez Test.
Dans le volet central, sélectionnez le modèle Projet de test.
Cliquez sur OK.

Dans l'Explorateur de solutions, le nouveau projet de test nommé TestProject1 est ajouté à votre solution et le fichier UnitTest1.cs s'affiche dans l'Éditeur de code. Étant donné que le fichier UnitTest1.cs n'est pas utilisé dans cette procédure pas à pas, vous pouvez le fermer.
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur TestProject1, cliquez sur Ajouter, puis sélectionnez Test codé de l'interface utilisateur.

La boîte de dialogue Générer le code pour le test codé de l'interface utilisateur s'affiche.
Sélectionnez l'option Enregistrer les actions, modifier le mappage d'IU ou ajouter des assertions et cliquez sur OK.

La boîte de dialogue UIMap – Générateur de test codé de l'interface utilisateur s'affiche.

Pour plus d'informations sur les options de la boîte de dialogue, consultez Comment : créer un test codé de l'interface utilisateur.
Recherchez et exécutez l'application SimpleWPFApp que vous avez créée précédemment. Par défaut, l'application se trouve dans C:\Users\<username>\Documents\Visual Studio 2010\Projects\SimpleWPFApp\SimpleWPFApp\bin\Debug\SimpleWPFApp.exe
Créez un raccourci sur le bureau à l'application SimpleWPFApp. Cliquez avec le bouton droit sur SimpleWPFApp.exe et choisissez Copier. Sur votre Bureau, cliquez avec le bouton droit et choisissez Coller le raccourci.

Conseil

Un raccourci vers l'application simplifie l'ajout ou la modification des tests codés de l'interface utilisateur de votre application. Il permet en effet de démarrer l'application rapidement. Il n'est pas nécessaire de naviguer pour y accéder. Vous devrez réexécuter l'application dans cette procédure pas à pas.
Cliquez sur Démarrer l'enregistrement dans l'UIMap – Générateur de test codé de l'interface utilisateur. En quelques secondes, le Générateur de test codé de l'interface utilisateur est prêt.
Exécutez SimpleWPFApp.exe à l'aide du raccourci sur le bureau.
Dans SimpleWPFApp, cliquez sur Démarrer.

En quelques secondes, la barre de progression atteint 100 %. Le contrôle CheckBox est maintenant activé.
Sélectionnez la case du contrôle CheckBox.
Fermez l'application SimpleWPFApp.
Dans UIMap – Générateur de test codé de l'interface utilisateur, cliquez sur Générer le code.
Dans la zone Nom de la méthode, tapez SimpleAppTest et cliquez sur Ajouter et générer. En quelques secondes, le test codé de l'interface utilisateur s'affiche et est ajouté à la solution.
Fermez la boîte de dialogue UIMap – Générateur de test codé de l'interface utilisateur.

Le fichier CodedUITest1.cs s'affiche dans l'Éditeur de code.

Exécuter le test codé de l'interface utilisateur

Dans le fichier CodedUITest1.cs, recherchez la méthode CodedUITestMethod, cliquez avec le bouton droit et sélectionnez Exécuter les tests.

Pendant l'exécution du test codé de l'interface utilisateur, SimpleWPFApp est visible. Les étapes que vous avez effectuées dans la procédure précédente sont exécutées. Toutefois, lorsque le test tente d'activer la case à cocher du contrôle CheckBox, la fenêtre Résultats des tests indique que le test a échoué. Cela s'explique par le fait que le test tente d'activer la case à cocher, mais ne sait pas que le contrôle CheckBox est désactivé tant que la barre de progression n'a pas atteint 100 %. Vous pouvez corriger ce problème et d'autres problèmes connexes à l'aide des différentes méthodes UITestControl.WaitForControlXXX() disponibles pour les tests codés de l'interface utilisateur. La procédure suivante montrera l'utilisation de la méthode WaitForControlEnabled() pour corriger le problème à l'origine de l'échec de ce test. Pour plus d'informations, consultez Suspension des tests codés de l'interface utilisateur en attendant des événements spécifiques pendant la lecture.

Modifier et réexécuter le test codé de l'interface utilisateur

Dans la fenêtre Résultats des tests, cliquez avec le bouton droit sur le test qui a échoué et sélectionnez Afficher les détails des résultats des tests.

CodedUITestMethod1[Results] s'affiche.
Dans la section Trace de la pile d'erreur, cliquez sur le premier lien en regard de TestProject1.UIMap.SimpleAppTest().

Le fichier UIMap.Designer.cs s'ouvre avec le point d'erreur mis en surbrillance dans le code :
```
// Select 'CheckBox' check box
uICheckBoxCheckBox.Checked = this.SimpleAppTestParams.UICheckBoxCheckBoxChecked;
```
Pour résoudre ce problème, le test codé de l'interface utilisateur peut attendre que le contrôle CheckBox soit activé avant de continuer sur cette ligne à l'aide de la méthode WaitForControlEnabled().

Avertissement

Ne modifiez pas le fichier UIMap.Designer.cs. Toutes les modifications de code que vous effectuées dans le fichier UIMapDesigner.cs seront remplacées chaque fois que vous générez du code dans UIMap - Générateur de test codé de l'interface utilisateur. Si vous devez modifier une méthode enregistrée, vous devez la copier dans le fichier UIMap.cs et la renommer. Le fichier UIMap.cs peut être utilisé pour remplacer les méthodes et les propriétés dans le fichier UIMapDesigner.cs. Vous devez supprimer la référence à la méthode d'origine dans le fichier Coded UITest.cs et la remplacer par le nom de la méthode renommée.
Dans le fichier UIMapDesinger.cs, sélectionnez tout le code de la méthode SimpleAppTest entière et copiez-le.
Dans l'Explorateur de solutions, ouvrez le fichier UIMap.cs.
Collez le code de la méthode SimpleAppTest dans la classe partielle UIMap.
Renommez la méthode SimpleAppTest() en ModifiedSimpleAppTest().
Ajoutez au fichier la méthode suivante à l'aide de l'instruction :
```
using Microsoft.VisualStudio.TestTools.UITesting.WpfControls;
```

Ajoutez la méthode WaitForControlEnabled() suivante avant la ligne de code incriminée qui a été identifiée précédemment :

uICheckBoxCheckBox.WaitForControlEnabled();

// Select 'CheckBox' check box
uICheckBoxCheckBox.Checked = this.SimpleAppTestParams.UICheckBoxCheckBoxChecked;

Dans le fichier CodedUITest1.cs, recherchez la méthode CodedUITestMethod et supprimez le commentaire de la référence à la méthode SimpleAppTest() d'origine ou renommez la référence, puis remplacez-la par la nouvelle méthode ModifiedSimpleAppTest() :

[TestMethod]
        public void CodedUITestMethod1()
        {
            // To generate code for this test, select "Generate Code for Coded UI Test" from the shortcut menu and select one of the menu items.
            // For more information on generated code, see https://go.microsoft.com/fwlink/?LinkId=179463
            //this.UIMap.SimpleAppTest();
            this.UIMap.ModifiedSimpleAppTest();
        }

Dans le menu Générer, cliquez sur Générer la solution.
Cliquez avec le bouton droit sur la méthode CodedUITestMethod et sélectionnez Exécuter les tests.
Cette fois-ci, le test codé de l'interface utilisateur exécute avec succès toutes les étapes du test et la mention Réussite s'affiche dans la fenêtre Résultats des tests.

Refactoriser un contrôle dans SimpleWPFApp

Dans le fichier MainWindow.xaml, dans le Concepteur, sélectionnez le contrôle Button.
En haut de la fenêtre Propriétés, sélectionnez la valeur button1 en regard de Button et remplacez par la valeur buttonA.
Dans le menu Générer, cliquez sur Générer la solution.
Dans le menu Test, sélectionnez Fenêtres, puis cliquez sur Affichage des tests.
Dans la fenêtre Affichage des tests, sélectionnez CodedUITestMethod1 sous la colonne Nom du test, puis cliquez sur Exécuter la sélection dans la barre d'outils.

Le test échoue parce que le test codé de l'interface utilisateur ne trouve pas le contrôle Button mappé à l'origine dans UIMap comme button1. La refactorisation peut avoir un impact sur les tests codés de l'interface utilisateur de cette manière.
Dans la fenêtre Résultats des tests, cliquez avec le bouton droit sur le test qui a échoué et sélectionnez Afficher les détails des résultats des tests.

CodedUITestMethod1[Results] s'affiche.
Dans la section Trace de la pile d'erreur, cliquez sur le premier lien en regard de TestProject1.UIMpa.SimpleAppTest().

Le fichier UIMap.Designer.cs s'ouvre. Le point d'erreur est mis en surbrillance dans le code :
```
// Click 'Start' button
Mouse.Click(uIStartButton, new Point(27, 10));
```
Notez que la ligne de code présentée précédemment dans cette procédure utilise UiStartButton qui est le nom UIMap avant sa refactorisation.

Pour corriger le problème, vous pouvez ajouter le contrôle refactorisé à UIMap à l'aide du Générateur de test codé de l'interface utilisateur. Vous pouvez mettre à jour le code du test pour utiliser le code, comme l'illustre la procédure suivante.

Mapper le contrôle refactorisé et modifier et réexécuter le test codé de l'interface utilisateur

Dans le fichier CodedUITest1.cs, dans la méthode CodedUITestMethod1(), cliquez avec le bouton droit, sélectionnez Générer le code pour le test codé de l'interface utilisateur, puis cliquez sur Utiliser le générateur de test codé de l'interface utilisateur.

La boîte de dialogue UIMap – Générateur de test codé de l'interface utilisateur s'affiche.
À l'aide du raccourci sur le bureau que vous avez créé précédemment, exécutez l'application SimpleWPFApp que vous avez créée précédemment.
Dans la boîte de dialogue UIMap – Générateur de test codé de l'interface utilisateur, faites glisser l'outil de croix sur le bouton Start de SimpleWPFApp.

Le bouton Start est encadré dans une zone bleue et le Générateur de test codé de l'interface utilisateur prend quelques secondes pour traiter les données du contrôle sélectionné et affiche les propriétés des contrôles. Notez que AutomationUId est nommé buttonA.
Dans les propriétés du contrôle, cliquez sur la flèche dans l'angle supérieur gauche pour développer le mappage de contrôle d'interface utilisateur. Notez que UIStartButton1 est sélectionné.
Dans la barre d'outils, cliquez sur Ajouter le contrôle au mappage de contrôle d'interface utilisateur.

L'état situé en bas de la fenêtre vérifie l'action en affichant Le contrôle sélectionné a été ajouté au mappage de contrôle d'interface utilisateur.
Dans UIMap – Générateur de test codé de l'interface utilisateur, cliquez sur Générer le code.

Le Générateur de test codé de l'interface utilisateur - Générer le code s'affiche avec une note qui indique qu'aucune nouvelle méthode n'est obligatoire et ce code ne sera généré que pour les modifications apportées au mappage de contrôle d'interface utilisateur.
Cliquez sur Générer.
Fermez SimpleWPFApp.exe.
Fermez la boîte de dialogue UIMap – Générateur de test codé de l'interface utilisateur.

La boîte de dialogue UIMap – Générateur de test codé de l'interface utilisateur prend quelques secondes pour traiter les modifications du mappage de contrôle d'interface utilisateur.
Dans l'Explorateur de solutions, ouvrez le fichier UIMap.Designer.cs.
Dans le fichier UIMap.Designer.cs, sous le constructeur dans la classe du code généré UIMainWindow, développez la région Propriétés. Notez que la propriété public WpfButton UIStartButton1 a été ajoutée.

Dans la propriété UIStartButton1, développez la région Critères de recherche. Notez que SearchProperties a pour valeur "buttonA" :

public WpfButton UIStartButton1
        {
            get
            {
                if ((this.mUIStartButton1 == null))
                {
                    this.mUIStartButton1 = new WpfButton(this);
                    #region Search Criteria
                    this.mUIStartButton1.SearchProperties[WpfButton.PropertyNames.AutomationId] = "buttonA";
                    this.mUIStartButton1.WindowTitles.Add("MainWindow");
                    #endregion
                }
                return this.mUIStartButton1;
            }
        }

Vous pouvez maintenant modifier le test codé de l'interface utilisateur pour utiliser le nouveau contrôle mappé. Comme signalé dans la procédure précédente, si vous souhaitez remplacer les méthodes ou les propriétés dans le test codé de l'interface utilisateur, vous devez le faire dans le fichier UIMap.cs.

Dans le fichier UIMap.cs, ajoutez un constructeur et spécifiez la propriété SearchProperties de la propriété UIStartButton pour utiliser la propriété AutomationID avec la valeur "buttonA":
```
public UIMap()
        {
            this.UIMainWindowWindow.UIStartButton.SearchProperties[WpfButton.PropertyNames.AutomationId] = "buttonA";
        }
```
Dans le menu Générer, cliquez sur Générer la solution.
Dans la fenêtre Affichage des tests, sélectionnez CodedUITestMethod1 sous la colonne Nom du test. Dans la barre d'outils, cliquez sur Exécuter la sélection.

Cette fois-ci, le test codé de l'interface utilisateur exécute avec succès toutes les étapes du test. Dans la fenêtre Résultats des tests, l'état Réussite s'affiche.

Voir aussi

Partager via