Partager via

Procédure pas à pas : lecture des tests codés de l'interface utilisateur avec Firefox

  • Article

Vous pouvez créer des tests automatisés de l'interface utilisateur. Ces tests sont appelés tests codés de l'interface utilisateur. Ils permettent un test fonctionnel de l'interface utilisateur et une validation des contrôles de l'interface utilisateur. Les tests codés de l'interface utilisateur vous permettent de tester les fonctionnalités de l'interface utilisateur. À l'aide de Microsoft Visual Studio 2010 Feature Pack 2, vous pouvez enregistrer des actions d'interface utilisateur sur un site Web ou une application Web et créer des tests codés de l'interface utilisateur. Vous pouvez utiliser Windows Internet Explorer pour enregistrer les actions, puis lire les tests à l'aide du navigateur Mozilla Firefox.

Pour plus d'informations sur les tests codés de l'interface utilisateur, consultez Test de l'interface utilisateur avec des tests d'interface utilisateur automatisés.

Avertissement

Une fois que vous avez installé Microsoft Visual Studio 2010 Feature Pack 2, si vous souhaitez utiliser le package de test pour Mozilla Firefox, vous devez installer et configurer l'extension d'assistance des tests pour Mozilla Firefox. Pour plus d'informations, consultez Comment : installer l'extension d'assistance des tests pour Mozilla Firefox..

Avertissement

Vous pouvez utiliser uniquement le navigateur Firefox pour lire les tests codés de l'interface utilisateur. L'enregistrement des tests codés de l'interface utilisateur sur des sites Web et des applications Web à l'aide du navigateur Firefox n'est pas pris en charge.

Composants requis

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

  • Visual Studio 2010 Ultimate, Visual Studio 2010 Premium ou Test Professional 2010.

  • Version 3.5 ou 3.6 du navigateur Web Mozilla Firefox.

  • Assurez-vous d'avoir installé Microsoft Visual Studio 2010 Feature Pack 2, ainsi que l'extension d'assistance des tests pour Mozilla Firefox. Les informations relatives à l'installation figurent dans l'introduction.

Création d'une application Web

Pour créer l'application Web

  1. Dans Visual Studio 2010, dans le menu Fichier, cliquez sur Nouveau, puis sur Projet.

    La boîte de dialogue Nouveau projet s'affiche.

  2. Sous Modèles installés, développez le langage de programmation de votre choix, puis cliquez sur Web.

  3. Dans la liste des types de projets Web, sélectionnez Application Web ASP.NET vide.

    Notes

    Dans cette procédure pas à pas, vous n'allez écrire qu'un minimum de code.

  4. Dans la zone Nom, tapez AppWebCouleur.

  5. Dans la zone Emplacement, spécifiez le dossier dans lequel vous voulez créer votre application Web.

  6. Sélectionnez Créer le répertoire pour la solution.

  7. Cliquez sur OK.

  8. Dans l'Explorateur de solutions, vérifiez que le nouveau projet AppWebCouleur est sélectionné.

  9. Dans le menu Projet, choisissez Ajouter un nouvel élément.

    La boîte de dialogue Ajouter un nouvel élément s'affiche alors.

  10. Dans la liste d'éléments, choisissez Web Form.

  11. Dans la zone de texte Nom, tapez Default.aspx, puis cliquez sur Ajouter.

Ajout de contrôles à l'application Web

Pour ajouter des contrôles à l'application Web

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur Default.aspx, puis choisissez Concepteur de vues.

    Une page vierge s'affiche.

  2. Si la boîte à outils n'est pas visible, cliquez sur Affichage, puis sur Boîte à outils.

  3. À partir du groupe Standard, faites glisser un contrôle RadioButtonList sur la page.

    Un contrôle RadioButtonList est ajouté à l'aire de conception.

  4. Dans le volet des balises d'actions Tâches RadioButtonList, cliquez sur le lien Modifier les éléments.

    Un Éditeur de collections ListItem s'affiche.

    Notes

    Vous pouvez également afficher l'Éditeur de collections ListItem en modifiant la collection Éléments dans la fenêtre Propriétés.

  5. Cliquez sur Ajouter pour ajouter un nouvel élément.

  6. Sous Propriétés ListItem :

    1. Affectez la valeur Red à la propriété Text.

    2. Affectez la valeur True à la propriété Selected.

      Éditeur de collections ListItem

  7. Cliquez sur Ajouter pour ajouter un autre élément.

  8. Sous Propriétés ListItem, remplacez la valeur de la propriété Text par Blue.

  9. Cliquez sur OK pour fermer l'Éditeur de collections ListItem.

  10. Faites glisser un Button sur la page. Dans la fenêtre Propriétés, remplacez la valeur de la propriété Text par Submit.

    Design ColorWebApp

  11. Dans le menu Fichier, cliquez sur Enregistrer tout.

Ajout de pages à l'application Web

Pour ajouter des pages à l'application Web

  1. Dans le menu Projet, cliquez sur Ajouter un nouvel élément.

  2. Dans la boîte de dialogue Ajouter un nouvel élément, sélectionnez Web Form dans la liste de modèles. Dans la zone Nom, tapez Red.aspx, puis cliquez sur Ajouter.

  3. En bas de la fenêtre de document, cliquez sur l'onglet Design pour basculer en mode Design.

  4. Faites glisser un Label sur la page. Dans la fenêtre Propriétés, affectez à la propriété Text la valeur Red. Affectez à la propriété ForeColor la valeur Red.

  5. Dans le menu Projet, cliquez sur Ajouter un nouvel élément.

  6. Dans la boîte de dialogue Ajouter un nouvel élément, cliquez sur le modèle Web Form et nommez-le Blue.aspx. Cliquez sur Ajouter.

  7. En bas de la fenêtre de document, cliquez sur l'onglet Design pour basculer en mode Design.

  8. Faites glisser un Label sur la page. Dans la fenêtre Propriétés, affectez à la propriété Text la valeur Blue. Affectez à la propriété ForeColor la valeur Blue.

  9. Dans le menu Fichier, cliquez sur Enregistrer tout.

Ajout de fonctionnalités à l'application Web

Pour ajouter des fonctionnalités à l'application Web

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur Default.aspx, puis cliquez sur Concepteur de vues.

  2. Double-cliquez sur le Button Envoyer. Visual Studio bascule vers le code de la page et crée un gestionnaire d'événements squelette pour l'événement Click du contrôle Button.

  3. Ajoutez le code suivant au gestionnaire d'événements :

    if (this.RadioButtonList1.SelectedValue == "Blue")
{
    Response.Redirect("Blue.aspx");
}
else
{
    Response.Redirect("Red.aspx");
}

    If RadioButtonList1.SelectedValue = "Blue" Then
    Response.Redirect("Blue.aspx")
Else
    Response.Redirect("Red.aspx")
End If

  4. Dans le menu Fichier, cliquez sur Enregistrer tout.

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

Avertissement

Cette procédure suppose que vous avez défini Microsoft Internet Explorer en tant que navigateur Web par défaut.

Pour exécuter l'application Web

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur Default.aspx, puis cliquez sur Définir comme page de démarrage.

  2. Appuyez sur CTRL+F5 pour exécuter l'application Web dans le navigateur. Vous allez voir la première page.

  3. Cliquez sur Red, puis sur Envoyer. Si l'application fonctionne correctement, vous allez passer à la page qui contient le Label indiquant Red.

  4. Revenez à la première page.

  5. Cliquez sur Blue, puis sur Envoyer. Si l'application fonctionne correctement, vous allez passer à la page qui contient le Label indiquant Blue.

  6. Copiez l'adresse de votre application Web dans le Presse-papiers ou dans un fichier Bloc-notes. Par exemple, l'adresse peut se présenter comme suit : https://localhost:<NuméroPort>/ Default.aspx

  7. Fermez le navigateur.

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

Pour créer et exécuter un test codé de l'interface utilisateur

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

  2. Dans le volet Modèles installés, développez Visual C# ou Visual Basic, puis sélectionnez Test.

  3. Dans le volet central, sélectionnez le modèle Projet de test.

  4. Cliquez sur OK.

    Dans l'Explorateur de solutions, le nouveau projet de test nommé TestProject1 est ajouté à votre solution et le fichier UnitTest1.cs ou UnitTest1.vb s'affiche dans l'Éditeur de code. Étant donné que le fichier UnitTest1 n'est pas utilisé dans cette procédure pas à pas, vous pouvez le fermer.

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

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

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

    Démarrer l'enregistrement d'IU

  8. Lancez Internet Explorer.

  9. Dans la barre d'adresses d'Internet Explorer, entrez l'adresse de l'application Web que vous avez copiée lors d'une procédure précédente. Par exemple :

    https://localhost:<NuméroPort>/ Default.aspx

    (Facultatif) Naviguez dans l'application Web en appuyant sur Red, Blue et sur le bouton Précédent du navigateur.

  10. Fermez Internet Explorer.

  11. Dans UIMap – Générateur de test codé de l'interface utilisateur, cliquez sur Générer le code.

  12. Dans la zone Nom de la méthode, tapez SimpleWebAppTest 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.

    Générer le code

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

Assurez-vous que le test codé de l'interface utilisateur est lu correctement dans Internet Explorer

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

    Pendant l'exécution du test codé de l'interface utilisateur, ColorWebApp est visible. Les étapes que vous avez effectuées dans la procédure précédente sont exécutées.

Ajouter une propriété pour la lecture à l'aide de Firefox et réexécuter le test codé de l'interface utilisateur

  1. Dans le fichier CodedUITest1.cs, localisez la méthode MyTestInitialize() qui utilise l'attribut TestInitializeAttribute, supprimez les marques de commentaire du code et ajoutez la propriété CurrentBrowser avec pour valeur « FireFox », comme l'indique le code suivant :

    Conseil

    Éventuellement, au lieu d'ajouter la propriété BrowserWindow, vous pouvez créer une variable d'environnement nommée CodedUITestCurrentBrowser ayant pour valeur « Firefox », puis redémarrer Visual Studio.

    ////Use TestInitialize to run code before running each test 
        [TestInitialize()]
        public void MyTestInitialize()
        {        
        //    // 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
            BrowserWindow.CurrentBrowser = "Firefox";
        }

    ' Use TestInitialize to run code before running each test
    <TestInitialize()> Public Sub MyTestInitialize()
        '
        ' 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
        '
        BrowserWindow.CurrentBrowser = "Firefox"


    End Sub

    Pour plus d'informations sur l'utilisation de l'attribut TestInitialze(), consultez Comment : générer un test codé de l'interface utilisateur en enregistrant l'application testée.

  2. 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 codé de l'interface utilisateur doit s'exécuter à l'aide de Mozilla Firefox.

Voir aussi

Concepts

Test de l'interface utilisateur avec des tests d'interface utilisateur automatisés

Autres ressources

Enregistrement des tests avec Windows Internet Explorer et lecture avec Mozilla Firefox

Procédure pas à pas : lecture des tests manuels avec Firefox

Comment : lire un test codé de l'interface utilisateur Web avec Firefox