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

Article
06/08/2015

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

Créer une application WPF simple

Dans le menu FICHIER, pointez sur Nouveau, puis sélectionnez Projet.

La boîte de dialogue Nouveau projet s'affiche.
Dans le volet Installé, développez Visual C#, puis sélectionnez Bureau 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.Choisissez le menu AFFICHAGE, puis 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 <Sans nom> de la propriété Nom par button1.Ensuite, 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 <Sans nom> de la propriété Nom par progressBar1.Ensuite, remplacez la valeur 100 de la propriété Maximum par 10000.
Sélectionnez le contrôle Checkbox.Dans la fenêtre Propriétés, remplacez la valeur <Sans nom> de la propriété Nom par checkBox1 et effacez la propriété IsEnabled.
Double-cliquez sur le contrôle bouton pour ajouter un gestionnaire d'événements Click.

MainWindow.xmal.cs s'affiche dans l'Éditeur de code avec le curseur dans la nouvelle méthode 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 :

public partial class MainWindow : Window
{
        private delegate void ProgressBarDelegate(System.Windows.DependencyProperty dp, Object value);        

    public MainWindow()
    {

        InitializeComponent();
    }

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

private void button1_Click(object sender, RoutedEventArgs e)
{
    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;
}

Enregistrez le fichier.

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.
Notez que le contrôle CheckBox est désactivé.Choisissez Démarrer.

En quelques secondes, la barre de progression atteint 100 %.
Vous pouvez maintenant sélectionner le contrôle CheckBox.
Fermez SimpleWPFApp.

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

Recherchez l'application SimpleWPFApp que vous avez créée précédemment.Par défaut, l'application se trouve dans C:\Users\<nom_utilisateur>\Documents\Visual Studio 2013\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.

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

La boîte de dialogue Ajouter un nouveau projet apparaît.
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é de l'interface utilisateur.
Cliquez sur OK.

Dans l'Explorateur de solutions, le nouveau projet de test codé de l'interface utilisateur nommé CodedUITestProject1 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 choisissez OK.

L'UIMap – Générateur de test codé de l'interface utilisateur apparaît et la fenêtre Visual Studio est réduite.

Pour plus d'informations sur les options de la boîte de dialogue, consultez Création de tests codés de l'interface utilisateur.

Choisissez Démarrer l'enregistrement dans l'UIMap – Générateur de test codé de l'interface utilisateur.

Démarrer l'enregistrement

Vous pouvez mettre l'enregistrement en pause si nécessaire, par exemple si vous recevez du courrier électronique et que vous souhaitez y répondre.

Suspendre l'enregistrement

Attention
Toutes les actions effectuées sur le Bureau sont enregistrées.Mettez l'enregistrement en pause si vous effectuez des actions susceptibles d'inclure des données confidentielles dans l'enregistrement.

Démarrez SimpleWPFApp à l'aide du raccourci sur le Bureau.

Comme précédemment, notez que le contrôle CheckBox est désactivé.
Dans SimpleWPFApp, choisissez Démarrer.

En quelques secondes, la barre de progression atteint 100 %.
Sélectionnez le contrôle CheckBox qui est maintenant activé.
Fermez l'application SimpleWPFApp.
Dans UIMap – Générateur de test codé de l'interface utilisateur, choisissez Générer le code.
Dans la zone Nom de la méthode, tapez SimpleAppTest et choisissez 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.
Enregistrez votre projet.

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

Dans le menu TEST, choisissez Fenêtres, puis Explorateur de tests.
Dans le menu GÉNÉRER, cliquez sur Générer la solution.
Dans le fichier CodedUITest1.cs, recherchez la méthode CodedUITestMethod, cliquez avec le bouton droit et sélectionnez Exécuter les tests ou exécutez le test à partir de l'Explorateur de 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, quand le test tente de cocher la case 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 de cocher la case, 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 de l'Explorateur de tests, sélectionnez le test qui a échoué et, dans la section StackTrace, choisissez le premier lien vers 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 codé de l'interface utilisateur.
Ouvrez le menu contextuel de 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 (SimpleAppTest) que vous souhaitez déplacer dans le fichier UIMap.cs ou UIMap.vb pour faciliter la fonctionnalité de code personnalisé et faire en sorte que celui-ci ne soit pas remplacé lors de la recompilation du code.
Choisissez 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 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 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, sélectionnez 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 Explorateur de 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, remplacez la valeur button1 de la propriété Nom par buttonA.
Dans le menu GÉNÉRER, sélectionnez Générer la solution.
Dans l'Explorateur de tests, exécutez CodedUITestMethod1.

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 de l'Explorateur de tests, dans la section StackTrace, choisissez le premier lien en regard de UIMpa.ModifiedSimpleAppTest().

Le fichier UIMap.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 choisissez 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 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, choisissez 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, choisissez 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, choisissez 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, recherchez la propriété UIStartButton1.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, sélectionnez Générer la solution.
Dans l'Explorateur de tests, exécutez CodedUITestMethod1.

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.