Comment Utiliser Firebug pour créer des Scripts Sélénium – Tutoriel Sélénium #4
Dans le tutoriel précédent, nous avons appris à créer des scripts de test automatisés à l’aide de l’E Selenium et de sa fonction d’enregistrement. Nous avons également parcouru les fonctionnalités peuplées de Selenium ID. Nous visions à héberger le lecteur avec les fonctionnalités et les commandes les plus vitales de Selenium ID.
Juste un rappel – c’est notre 4ème tutoriel de la série de formation gratuite au sélénium.
Maintenant que vous êtes habitué et capable de créer des scripts automatisés en utilisant le mode d’enregistrement de Selenium ID, avançons avec un autre outil qui joue un rôle très important pour nous aider à créer des scripts de test efficaces connus sous le nom de « Firebug”. Firebug nous aide à inspecter les propriétés des éléments Web et des pages Web.
Ainsi, ce tutoriel est composé de l’installation de Firebug et de sa convivialité.
Notez que le contenu de ce tutoriel n’est pas seulement applicable dans le contexte de l’E Selenium; il peut plutôt être appliqué à chaque outil de Selenium suite. Ainsi, j’utiliserais de préférence le terme Sélénium au lieu de l’E sélénium.
Dans ce tutoriel, apprenons comment utiliser le module complémentaire Firebug pour créer des scripts Selenium. Dans le processus, nous apprendrons également à installer Firebug.
Introduction à Firebug
Firebug est un module complémentaire de Mozilla Firefox. Cet outil nous aide à identifier ou à inspecter plus particulièrement les éléments HTML, CSS et JavaScript d’une page web. Cela nous aide à identifier les éléments de manière unique sur une page Web. Les éléments peuvent être trouvés uniquement en fonction de leurs types de localisateur dont nous discuterons plus loin dans ce tutoriel.
Comment installer Firebug ?
Pour faciliter la compréhension, nous allons bifurquer le processus d’installation dans les étapes suivantes.
Étape -1: Lancez le navigateur Mozilla Firefox et accédez à cette page de téléchargement du module complémentaire Firebug. L’URL nous amène à la section des modules complémentaires Firefox.
Étape -2: Cliquez sur le bouton ”Ajouter à Firefox » présent sur la page web. Reportez-vous à la figure suivante pour la même chose.
Étape 3: Dès que nous cliquons sur le bouton ”Ajouter à Firefox », une boîte d’alerte de sécurité apparaît, cliquez sur le bouton ”Autoriser » maintenant.
Étape 4: Maintenant Firefox télécharge le module complémentaire dans la toile de fond et une barre de progression s’affiche.
Étape 5: Dès que le processus est terminé, la fenêtre d’installation du logiciel apparaît. Cliquez maintenant sur le bouton ”Installer maintenant ».
Étape 6:Dès que l’installation est terminée, une fenêtre contextuelle apparaît indiquant que le firebug a été installé avec succès. Maintenant, choisissez de fermer cette fenêtre contextuelle.
Remarque: Contrairement à l’E Selenium, nous ne sommes pas obligés de redémarrer Firefox pour refléter l’installation de firebug, il vient plutôt facilement.
Étape 7: Maintenant, pour lancer firebug, nous pouvons choisir l’une des manières suivantes:
- Appuyez sur F12
- Cliquez sur l’icône Firebug présente dans le coin supérieur droit extrême de la fenêtre de Firefox.
- Cliquez sur la barre de menu Firefox – >Développeur Web – >firebug ->Ouvrez Firebug.
Étape-8: Maintenant, le firebug peut être vu en bas de la fenêtre de Firefox.
Maintenant que nous avons téléchargé et installé firebug, avançons avec les types de localisateurs que nous créerions en utilisant firebug.
Création d’un script Selenium à l’aide de Firebug
Contrairement à l’E Selenium, Dans Firebug, nous créons manuellement des scripts de test automatisés en ajoutant plusieurs étapes de test pour former un script de test logique et cohérent.
Suivons une approche progressive et comprenons le processus étape par étape.
Scénario:
- Ouvrir « https://accounts.google.com”.
- Affirmer le titre de l’application
- Entrez un nom d’utilisateur et un mot de passe invalides et soumettez les détails à la connexion.
Étape 1 – Lancez Firefox et ouvrez l’E Selenium dans la barre de menus.
Étape 2 – Entrez l’adresse de l’application testée (« https://accounts.google.com”) dans la zone de texte de l’URL de base.
Étape 3 – Par défaut, le bouton d’enregistrement est à l’état ON. N’oubliez pas de l’éteindre afin de désactiver le mode d’enregistrement. Remarque si le mode d’enregistrement est ACTIVÉ, cela peut entraîner l’enregistrement de nos interactions avec le navigateur Web.
Étape 4 – Ouvrez l’application testée (https://accounts.google.com) dans Firefox.
Étape 5 – Lancez Firebug dans le navigateur Web.
Étape 6 – Sélectionnez l’étape de test vide dans l’Éditeur.
Étape 7 – Tapez « ouvrir » dans la zone de texte de commande présente dans le volet de l’éditeur. La commande ”ouvrir » ouvre l’URL spécifiée dans le navigateur Web.
Recommandation: Lors de la saisie de commandes dans la zone de texte de commande, l’utilisateur peut tirer parti de la fonction de sélection automatique. Ainsi, dès que l’utilisateur tape une séquence de caractères, les suggestions correspondantes sont remplies automatiquement.
L’utilisateur peut également cliquer sur la liste déroulante disponible dans la zone de texte de commande pour consulter toutes les commandes fournies par Selenium ID.
Étape 8 – Maintenant, dirigez-vous vers la section Firebug dans le navigateur Web, développez la section « tête” du code HTML. Notez la balise HTML <title >. Ainsi, pour affirmer le titre de la page Web, nous aurions besoin de la valeur de la balise <title>.
Copiez le titre de la page Web qui est « Connexion – Comptes Google” dans notre cas.
Étape 9 – Sélectionnez la deuxième étape de test vide dans l’éditeur.
Étape 10 – Tapez « assertTitle » dans la zone de texte de commande présente dans le volet de l’éditeur. La commande ”assertTitle » renvoie le titre de la page en cours et le compare au titre spécifié.
Étape 11 – Collez le titre copié à l’étape 8 dans le champ Cible de la seconde.
Étape 12 – Sélectionnez maintenant la troisième étape de test vide dans le volet de l’éditeur
Étape 13 – Tapez la commande « type” dans la zone de texte de commande. La commande ”type » entre une valeur dans l’élément Web spécifié dans l’interface graphique.
Étape 14 – Passez maintenant au navigateur Web, amenez le curseur de la souris sur la zone de texte « Email” dans le formulaire de connexion et appuyez sur un clic droit.
Choisissez l’option ”Inspecter l’élément avec Firebug ». Notez que le Firebug met automatiquement en évidence le code HTML correspondant à l’élément Web, c’est-à-dire « Zone de texte de l’e-mail”.
Étape 15 – Le code HTML de l’illustration ci-dessus manifeste les attributs de propriété distincts appartenant à la zone de texte « Email”. Notez qu’il existe quatre propriétés (ID, type, espace réservé et nom) qui identifient de manière unique l’élément Web sur la page Web. C’est donc à l’utilisateur de choisir une ou plusieurs propriétés pour identifier l’élément web.
Ainsi, dans ce cas, nous choisissons ID comme localisateur. Copiez la valeur ID et collez-la dans le champ Cible de la troisième étape de test préfixé par « id=” pour indiquer l’E Selenium pour localiser un élément web ayant l’ID comme « Email”.
(Cliquez pour voir l’image agrandie)
Notez que l’E Selenium est sensible à la casse, tapez donc la valeur de l’attribut avec soin et précision la même que celle affichée dans le code HTML.
Étape 16 – Cliquez sur le bouton Rechercher pour vérifier si le localisateur sélectionné trouve et localise l’élément d’interface utilisateur désigné sur la page Web.
Étape 17 – Maintenant, l’étape suivante consiste à entrer les données de test dans la zone de texte Valeur de la troisième étape de test dans le volet de l’éditeur. Entrez « InvalidEmailID » dans la zone de texte Valeur. L’utilisateur peut modifier les données de test au fur et à mesure qu’il le souhaite.
Étape 18 – Sélectionnez maintenant la quatrième étape de test vide dans le volet de l’éditeur
Étape 19 – Tapez la commande « type” dans la zone de texte de commande.
Étape 20 – Passez maintenant au navigateur Web, amenez le curseur de la souris dans la zone de texte « Mot de passe” du formulaire de connexion et appuyez sur un clic droit.
Choisissez l’option ”Inspecter l’élément avec Firebug ».
Étape 21 – Le code HTML ci-dessous manifeste les attributs de propriété distincts appartenant à la zone de texte « Mot de passe”. Notez qu’il existe quatre propriétés (ID, type, espace réservé et nom) qui identifient de manière unique l’élément Web sur la page Web. C’est donc à l’utilisateur de choisir une ou plusieurs propriétés pour identifier l’élément web.
Ainsi, dans ce cas, nous choisissons ID comme localisateur. Copiez la valeur ID et collez-la dans le champ Cible de la troisième étape de test préfixé par « id=”.
(Cliquez pour voir l’image agrandie)
Étape 22 – Cliquez sur le bouton Rechercher pour vérifier si l’onglet localisateur trouve et localise l’élément d’interface utilisateur désigné sur la page Web.
Étape 23 – Maintenant, l’étape suivante consiste à entrer les données de test dans la zone de texte Valeur de la quatrième étape de test dans le volet de l’éditeur. Entrez « InvalidPassword » dans la zone de texte Valeur. L’utilisateur peut modifier les données de test au fur et à mesure qu’il le souhaite.
Étape 24 – Sélectionnez maintenant la cinquième étape de test vide dans le volet de l’éditeur
Étape 25 – Tapez la commande « click” dans la zone de texte de commande. La commande ”click » clique sur un élément Web spécifié dans la page Web.
Étape 26 – Passez maintenant au navigateur Web, amenez le curseur de la souris sur le bouton ”Se connecter » dans le formulaire de connexion et appuyez sur un clic droit.
Choisissez l’option ”Inspecter l’élément avec Firebug ».
Étape 27 – Le code HTML ci-dessous manifeste les attributs de propriété distincts appartenant au bouton ”Connexion ».
Choisissez ID comme localisateur. Copiez la valeur ID et collez-la dans le champ Cible de la troisième étape de test préfixé par « id=”.
(Cliquez pour agrandir l’image)
Étape 28 – Cliquez sur le bouton Rechercher pour vérifier si le localisateur choisi trouve et localise l’élément d’interface utilisateur désigné sur la page Web.
Le script de test est maintenant terminé. Reportez-vous à l’illustration suivante pour afficher le script de test terminé.
Étape 29 – Lisez le script de test créé et enregistrez-le de la même manière que dans le tutoriel précédent.
Conclusion
Dans ce tutoriel, nous avons introduit un autre outil de création de script ou plutôt un outil qui aide à la création de script.
Firebug a étonnamment un grand potentiel pour localiser des éléments Web sur une page Web. Ainsi, l’utilisateur peut tirer parti des capacités de l’outil pour créer manuellement des scripts de test d’automatisation efficaces et efficients.
Tutoriel suivant #5: Dans le tutoriel suivant, nous examinerons les différents types de localisateurs dans Selenium et leur technique d’accessibilité pour construire des scripts de test. En attendant, reader peut commencer à construire ses scripts de test d’automatisation à l’aide de Firebug.