Fermer

août 20, 2018

Mettez vos tests d'interface utilisateur sous tension avec le test API en tant que étape dans Test Studio


Apprenez à améliorer vos tests d'interface utilisateur avec les appels d'API et à simuler des scénarios difficiles avec les seuls tests d'interface, avec API Test comme étape dans Telerik Test Studio.

effectuer un appel API supplémentaire à un service Web pour faciliter les étapes de l'interface utilisateur. Prenons par exemple les scénarios suivants:

  • Gestion de l'état initial d'une application Web ou création de données initiales via un service Web (création d'utilisateurs, éléments de données, téléchargement de fichiers de test, suppression d'anciennes données de test, démarrage ou arrêt de processus, etc. ) comme condition préalable au test de l'interface utilisateur.
  • Simulez des actions utilisateur simultanées et testez la manière dont l'interface utilisateur gère les conflits
  • Générez des messages ou d'autres événements sur le service Web et validez qu'ils sont correctement poussés vers l'interface utilisateur de votre application Web ou de bureau

peut être effectuée via le test de l'interface utilisateur lui-même, mais cela complique le test de l'interface utilisateur avec des étapes supplémentaires qui peuvent être lentes, fragiles ou tout simplement ne pas être au centre du scénario de test particulier. L'externalisation de telles interactions aux appels d'API rendrait le test de l'interface utilisateur plus rapide, plus fiable et nous permet de concentrer le test sur l'exécution des actions particulières qui constituent l'essence du scénario de test.

Telerik Test Studio -in intégration avec Test Studio for API vous permet d'exécuter un test API comme étape d'un test Web ou WPF. Cela ouvre un grand potentiel pour améliorer vos tests d'interface utilisateur. Dans ce billet de blog, je souhaiterais vous présenter ses fonctionnalités.

Référence Rapide

Exemple de scénario

Afin de montrer la nouvelle intégration de l’API dans Test Studio, construisons un scénario de test contre un système très simple. application web de démonstration. L'application de démonstration est une librairie qui permet aux utilisateurs enregistrés de commander des livres. Pour rester simple, les utilisateurs ne peuvent acheter qu’un livre par commande et il n’est pas nécessaire de saisir une adresse ou des détails de paiement. Même les utilisateurs qui ne sont pas connectés peuvent afficher les livres disponibles, mais seuls les utilisateurs connectés peuvent passer une commande. (Voir la fin du blog pour plus d'informations sur la façon de télécharger le test et l'application exemple afin de les essayer vous-même.)

Nous allons créer un scénario de test qui teste le scénario suivant:

  1. nouvel utilisateur via un appel API – celui que nous utiliserions pour passer la commande dans l'interface utilisateur
  2. Ajouter un nouveau livre au magasin via un appel API avec une seule copie disponible
  3. Connexion avec le nouvel utilisateur dans l'interface utilisateur [19659004] Ouvrez la page de détails du livre que nous venons de créer
  4. Utilisez un appel API pour simuler que la dernière copie du livre vient d'être achetée dans le magasin
  5. Tout en ayant les détails du livre ouverts dans le navigateur, essayez de placer un nouvel ordre
  6. Validez qu'un message d'erreur est correctement affiché dans l'interface utilisateur, en notant que le livre n'est plus disponible dans la boutique

 books-list

techniques clés pouvant être utilisées pour une grande variété d'autres scénarios impliquant la configuration de l'environnement , teste la génération de données, la gestion des utilisateurs, teste les actions simultanées des utilisateurs, etc. Nous allons montrer comment créer un projet de test API dans le cadre d'un projet Web / WPF Test Studio, comment ajouter un test API Test de WPF et comment nous pouvons transférer des données (variables) du test de l'interface utilisateur aux étapes de test de l'API et vice-versa.

Projet de test d'installation

Pour commencer, nous allons ouvrir Test Studio et créer un nouveau site Web. Desktop "projet appelé" Librairie. "

 create-new-project

Ensuite, cliquez avec le bouton droit sur le projet, sélectionnez" Ajouter un nouveau test ", créez un nouveau test Web et nommez-le" Commander un livre non disponible. "

 create-new-test

Création de données de test

Pour exécuter notre test, nous avons besoin d'un utilisateur qui effectuera les achats de livres et un livre de test à commander. Pour éviter tout conflit avec d'autres tests que nous pourrions éventuellement exécuter sur la même application, nous créerons un nouvel utilisateur unique et un nouveau livre spécialement pour les besoins du test.

Lors du test d'applications similaires, nous pourrions éventuellement créer notre Tester les utilisateurs et les éléments de test à l'aide des étapes d'interaction de l'interface utilisateur, mais cela prend généralement plus de temps à exécuter et encombre le test. Au lieu de cela, nous allons créer des suites de tests d'interface utilisateur dédiées distinctes qui se concentrent spécifiquement sur les processus "register user" ou "create book". Ces suites de tests nous donneront l'assurance que la fonctionnalité de l'interface utilisateur fonctionne comme prévu et que tous les casiers d'angle sont couverts. Pour tous les autres scénarios de test qui nécessitent un utilisateur enregistré ou des livres créés, nous pouvons les créer rapidement via des appels API et concentrer nos tests sur l'exécution des étapes de test restantes.

Générer un nom d'utilisateur aléatoire

assurez-vous que le nom d'utilisateur que nous utilisons pour notre test n'est pas déjà utilisé par les utilisateurs existants, nous allons générer un nom d'utilisateur unique aléatoire en ajoutant une chaîne guid au nom d'utilisateur. La meilleure façon de le faire dans Test Studio est une étape .

Ouvrez le test "Order Unavailable Book" que nous venons de créer et sélectionnez "Coded Step" dans Step Builder. Vous serez invité à choisir un langage de script pour ce projet. Nous sélectionnerons donc "C #". Cela générera un fichier code-behind pour notre test et créera une méthode de test par défaut. Nous pouvons renommer la méthode "GenerateTestVariables."

 coded-step-generate-variables

Nous pouvons utiliser cette étape pour extraire les principales variables dont nous aurons besoin plus tard au cours du test. De cette façon, nous pouvons conserver toutes nos constantes en un seul endroit et en changer facilement plus tard, au lieu de devoir changer chaque endroit du test où il est utilisé. La méthode de l'étape codée est la suivante:

    [CodedStep(@"Generate Test Variables")]
     public void GenerateTestVariables ()
    {)
        this.SetExtractedValue ("nom d'utilisateur", "Utilisateur-" + Guid.NewGuid ());
        
        this.SetExtractedValue ("password", "Password");
        
        this.SetExtractedValue ("apiBaseUrl", "http: // localhost: 5000");
    }

Chaque variable que nous extrayons à l'aide de la méthode this.SetExtractedValue () peut être transmise ultérieurement à un test API ou utilisée par une étape d'interface utilisateur via la liaison de données.

19659010] Nous pouvons ajouter un test API à notre test Web en important un test existant ou en le créant à partir de rien. Dans notre cas, nous allons créer un nouveau test. Pour ce faire, cliquez avec le bouton droit sur le projet et sélectionnez "Modifier le projet Api incorporé."

 edit-embedded-api-project

Ceci ouvrira une nouvelle instance de Test Studio for API. Le projet chargé est un nouveau projet d'API ("ApiTests") créé automatiquement dans le dossier racine du projet principal Test Studio.

 api-tests-project-folder

Ce projet d'API contiendra tous les cas de test API que nous utilisons dans tout notre projet Test Studio (chaque test API peut être utilisé par plusieurs tests Test Studio).

À partir de l'application Test Studio for API, nous pouvons gérer notre API. teste comme un projet API normal. Plus tard, nous montrerons comment ajouter ces tests comme étapes dans un test Web.

Nous allons créer un scénario de test API "Create User and Get Token" et y ajouter les étapes suivantes: 19659003] Créer un utilisateur
    

 create-user-step "title =" create-user-step "/></p data-recalc-dims=

    

  • Obtenir un jeton d'accès
        

     get-access-token-step

        

  • Extraire le jeton d'accès
        

     extraction-accès-jeton-étape

        

  • Notez les références aux variables {1945] [{19459011]{{baseUrl}}, {{buyerUsername}} et {{buyerPassword}} . Ces variables ne seront pas définies dans le projet API. Au lieu de cela, notre test Web les transmettra au test de l'API en tant que paramètres de ligne de commande lors de l'exécution du test de l'API. Nous verrons comment procéder un peu plus tard.

    Notez également l'étape "Extract Access Token" . Dans l'étape suivante, que nous allons créer dans un instant, nous devons ajouter un nouveau livre à la librairie en utilisant un test API. L'API de l'application Bookstore requiert une authentification. Nous avons donc besoin de ce jeton pour authentifier d'autres appels d'API. C'est pourquoi, après avoir obtenu le jeton d'accès du service avec l'étape "Get Access Token", nous utilisons une étape Set Variable pour "exporter" l'ID de l'utilisateur. Toute variable extraite via une étape Set Variable dans le test de l'API sera disponible dans le contexte du test Web .

    Le corps de réponse de l'étape "Get Access Token" ressemblera à ceci: [19659053] {
        "TokenString": "eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJuYW1laWQiOiIyIiwidW5pcXVlX25hbWUiOiJib2IiLCJuYmYiOjE1MzE4NDEzNTQsImV4cCI6MTUzMTkyNzc1NCwiaWF0IjoxNTMxODQxMzU0fQ.lorfPvrDJCUxfV6MqQkjTtVuILYP58hzc0RM35TFAACpScjbmWqM37NXINDtqvGR_ECsP10F8oQ6sIOfJLZ9LA"
    }

    C'est pourquoi nous utilisons l'expression JSONPath "$ .tokenString" dans l'étape Extraire le jeton d'accès pour extraire la valeur du jeton du corps de la réponse. Vous pouvez en savoir plus à ce sujet dans la section Set Variable Steps de la documentation Test Studio for APIs .

    Nous pouvons également créer le prochain test API dont nous aurons besoin – celui qui crée un nouveau test livre de test. Voici les étapes pour ce test de l'API:

    • Créer un livre
          

       create-book-step

       create-book-headers

          

    • Extraire l'ID du livre
          

       extract-book-id-step

          

    Notez ici l'en-tête Authorization de l'étape Create Book : c'est ici que nous utilisons la variable accessToken extraite dans le test API précédent. Le corps de réponse de cette requête ressemblera à ceci (notez la propriété "id" que le serveur renvoie):

     {
        "id": 5,
        "title": "Escape from Freedom",
        "auteur": "Erich Fromm",
        "prix": 15.0,
        "quantité: 1
    }
    

    Tout comme avec accessToken, nous devons extraire l'ID du livre que nous allons créer, afin que nous puissions l'utiliser dans le test de l'interface utilisateur pour accéder à la page de détails de ce livre. C'est pourquoi nous avons ajouté le Extract Book ID step.

    Ajout du test API au test Web

    Maintenant que nous avons créé les tests API, nous pouvons revenir à Test Studio et les ajouter comme étapes à notre test Web. Pour ce faire, cliquez sur Common> API Test As Step dans Step Builder et sélectionnez d'abord le test "Create User and Get Token", suivi du test "Create Book".

     add-api-test-as-step

    Cela ajoutera les deux tests comme étapes du test Web.

    Passage de variables aux tests de l'API

    Pour passer les variables que nous avons définies dans la première étape codée du test API "Créer un utilisateur et obtenir un jeton", nous devons cliquer sur la liste déroulante "Variables" dans le panneau Propriétés de l'étape API et ajouter une paire clé-valeur pour chacune des variables.

     add-variables-to-create-user-test

    Pour passer une variable au test de l'API, ajoutez le nom de la variable dans le champ "Nom" et vous pourrez pour le référencer par ce nom dans le test API lui-même. Dans le champ "Valeur", vous pouvez soit saisir directement la valeur à utiliser (par exemple: "http: // localhost: 5000" pour la variable "baseUrl") ou vous pouvez référencer une variable existante dans la variable Test Studio. le magasin. Comme nous avons déjà extrait les variables nécessaires à la variable magasin dans la première étape codée, nous utiliserons des accolades pour y ajouter des références.

     variables-transition

    Tous les noms et valeurs de variables nous ajouterons au test Create User et Get Token en procédant comme suit:

    • baseUrl: {{apiBaseUrl}}
    • buyerUsername: {{username}}
    • buyerPassword: {{password} }

    De la même manière, nous ajouterons les variables suivantes au test d'API "Create Book" en tant qu'étapes:

    • baseUrl: {{apiBaseUrl}}
    • accessToken: {{accessToken}}

    que nous avons déjà les tests de l'API comme étapes, ce qui créera notre utilisateur de test et le livre de test, nous pouvons ajouter plusieurs étapes supplémentaires pour effectuer les actions suivantes:

    • Naviguez dans le navigateur jusqu'à l'URL de notre application Web ("http : // localhost: 4200 / home ")
    • Attendez que le lien" Librairie "soit visible pour vous assurer que la page est chargée
    • Si un utilisateur est déjà connecté ed in – Déconnectez-vous
    • Connectez-vous en utilisant les informations d'identification de l'utilisateur de test que nous avons extraites lors de la première étape codée
    • Attendez que le lien "Voir notre liste de livres" soit visible pour vous assurer que l'utilisateur est connecté

     login-steps-overview

    Notez que j'ai extrait les étapes nécessaires à la déconnexion de tout utilisateur actuel et que vous vous connectez à l'utilisateur test pour séparer les tests. Ceci est une bonne pratique pour une meilleure maintenabilité et réutilisation des étapes qui seront nécessaires dans d'autres tests.

     logout-current-user

     utilisateur de connexion

    Pour le test Login User en tant qu'étape, nous pouvons utiliser les mêmes variables «username» et «password» que nous avons extraites lors de la première étape codée et les définir comme une liaison aux étapes qui entrent du texte dans le nom d'utilisateur et champs de mot de passe.

     bind-username-text-entry

    Ensuite, nous devons ouvrir la page des détails du livre de test. Pour ce faire, nous avons besoin de son id que nous avons extrait plus tôt du test API. Nous allons créer une étape "Naviguer vers" dans Test Studio et la transformer en une étape codée pour pouvoir concaténer baseUrl de l'application Web et l'ID ] de l'utilisateur.

     accède à l'étape

     [CodedStep(@"Navigate to book details page")]
        void public NavigateToBookDetailsPage ()
        {)
            var url = "http: // localhost: 4200 / books /" + this.GetExtractedValue ("bookId"). ToString ();
            this.Log.WriteLine ("url:" + url);
            ActiveBrowser.NavigateTo (url);
        } 

     coded-step-navigate-to

    Une fois que nous avons ouvert la page des détails du livre, nous pouvons utiliser une autre étape d'API pour simuler que sa dernière copie vient d'être commandée par un autre utilisateur. Nous avons besoin que le livre contienne initialement au moins une copie disponible lorsque nous avons ouvert sa page de détails, sinon le bouton de commande n'aurait pas été activé.

     api-test-order-book

    que nous utilisons le même accessToken pour authentifier cette demande, ce qui signifie que nous utilisons le même utilisateur pour les demandes d'API et les étapes de l'interface utilisateur. L'application de démonstration est aussi simple que possible – elle ne sauvegarde aucun état pour les achats de l'utilisateur, nous pouvons donc utiliser le même utilisateur pour toutes les opérations. Cependant, dans d'autres scénarios, vous devrez peut-être créer plusieurs utilisateurs pour exécuter leurs actions simultanées.

    Nous pouvons maintenant ajouter ce test en tant que test API en tant qu'étape du test Test Studio. Cliquez sur le générateur d'étape de Test Studio, sélectionnez Test API comme étape et sélectionnez le test Carnet de commandes .

     add-api-test-order-book

     test-book-test-as-step

    Comme pour l'étape précédente de l'API, nous devons passer des variables au test de l'API qui sera exécuté:

    •     baseUrl: {{apiBaseUrl}}
          
    •     accessToken: {{accessToken}}
          
    •     bookId: {{bookId}}
          

     variables de commande

    Validation du résultat final

    Une fois la dernière copie du livre commandée via le test API, le bouton Order apparaît dans l'interface utilisateur, car la page n'est pas encore actualisée.

     book-details-page

    Il ne nous reste plus qu'à ajouter plusieurs étapes pour effectuer les opérations suivantes:

    • Cliquez sur Bouton "Commander"
    • Vérifiez qu'un message d'erreur apparaît, indiquant que le livre n'est plus disponible

     final-steps

     order-failed-message [19659011] Avec cela notre test est terminé. Selon votre cas, vous préférerez peut-être ajouter des étapes API supplémentaires pour supprimer les données de test générées pendant ce test.

    Résumé

    Dans cet article de blog, nous avons expliqué comment utiliser les appels API pour améliorer nos tests d'interface utilisateur. Nous avons vu comment créer des utilisateurs de test et des éléments de test et comment simuler des actions utilisateur simultanées pour réaliser des scénarios qui, autrement, seraient difficiles ou impossibles à automatiser avec les tests de l'interface utilisateur. Nous avons approfondi les détails du test de API à l'étape et montré comment transférer des données entre le test de l'interface utilisateur et les tests de l'API.

    projet de test complet de ici et l'application de démonstration de son dépôt GitHub . Dans le fichier Lisezmoi.md, vous trouverez des instructions sur l'exécution de l'application.

    Si vous découvrez Test Studio, vous pouvez télécharger une version d'évaluation gratuite et commencer dès aujourd'hui avec cet exemple. Cliquez simplement sur le lien ci-dessous. 19659011] Try Test Studio

    Bon test!


    Les commentaires sont désactivés en mode de prévisualisation.




    Source link