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

Article
06/07/2013

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 Premium ou Visual Studio Ultimate est requis.

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.5.
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.
Choisissez 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 solution, cliquez avec le bouton droit, choisissez Ajouter, puis selectionnez ensuite 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 codé d'interface utilisateur.
Cliquez sur OK.

Dans l'explorateur de solutions, le nouveau projet de test codé de l'interface utilisateur CodedUITestProject1 nommé est ajouté à votre solution.

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.

UIMap – générateur de test codé de l'interface utilisateur s'affiche, et la fenêtre de Visual Studio est réduite.

Pour plus d'informations sur les options de la boîte de dialogue, consultez Créer des tests codés 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 2012\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().

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

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 l'Explorateur de solutions, recherchez UIMap.uitest dans votre projet de test.
Ouvrez le menu contextuel pour UIMap.uitest et choisissez Ouvrir.

Le test codé de l'interface utilisateur s'affiche dans l'éditeur de test codé de l'interface utilisateur.Vous pouvez à présent afficher et modifier le test codé de l'interface utilisateur.
Dans le volet Action d'interface utilisateur, sélectionnez la méthode de test que vous souhaitez déplacer dans le fichier UIMap.cs ou UIMap.vb afin de faciliter la fonctionnalité de code personnalisé et permettre que celui-ci ne soit pas remplacé lorsque le code de test est recompilé.
Cliquez sur le bouton Déplacer le code dans la barre d'outils de l'éditeur de test codé de l'interface utilisateur.
Une boîte de dialogue Microsoft Visual Studio s'affiche.Elle vous informe que la méthode sera déplacée du fichier UIMap.uitest dans le fichier UIMap.cs ou UIMap.vb et que vous ne pourrez plus la modifier à l'aide de l'éditeur de test codé de l'interface utilisateur.Cliquez sur Oui.

La méthode de test est supprimée du fichier UIMap.uitest et n'apparaît plus dans le volet Actions d'interface utilisateur.Pour pouvoir modifier le fichier de test déplacé, ouvrez le fichier UIMap.cs ou UIMap.vb dans l'Explorateur de solutions.

Dans la barre d'outils Visual Studio, choisissez Enregistrer.

Les mises à jour apportées à la méthode de test sont enregistrées dans le fichier UIMap.Designer.

Attention
Une fois que vous avez déplacé la méthode, vous ne pouvez plus la modifier à l'aide de l'éditeur de test codé de l'interface utilisateur.Vous devez ajouter le code personnalisé et le gérer à l'aide de l'éditeur de code.

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, choisissez 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, choisissez 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 :
```
// Choose '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.
Choisissez 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, choisissez 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.