how use firebug creating selenium scripts selenium tutorial 4
Dans le tutoriel précédent , nous avons appris à créer des scripts de test automatisés à l'aide de Selenium IDE et de sa fonction d'enregistrement. Nous avons également feuilleté populeux fonctionnalités de Selenium IDE . Nous visions à donner au lecteur les fonctionnalités et commandes les plus vitales de Selenium IDE.
Juste un rappel - ceci est notre 4ème tutoriel gratuit Série de formation sur le 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 IDE, passons à un autre outil qui joue un rôle très important en nous aidant à créer des scripts de test efficaces appelés «Firebug». Firebug nous aide à inspecter les propriétés des éléments Web et des pages Web.
Ainsi, ce tutoriel comprend l'installation de Firebug et son utilisation.
Notez que le contenu de ce didacticiel n'est pas seulement applicable dans le contexte de Selenium IDE; il peut plutôt être appliqué à chaque outil de la suite Selenium. Ainsi, j'utiliserais de préférence le terme Selenium au lieu de Selenium IDE.
Dans ce didacticiel, apprenons à utiliser le module complémentaire Firebug pour créer des scripts Selenium. Dans le processus, nous apprendrons également comment installer Firebug.
Ce que vous apprendrez:
- Introduction à Firebug
- Comment installer Firebug?
- Création d'un script Selenium à l'aide de Firebug
- Conclusion
- lecture recommandée
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 sur 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 localisateurs, dont nous parlerons plus tard dans ce didacticiel.
Comment installer Firebug?
Pour faciliter la compréhension, nous diviserons le processus d'installation en étapes suivantes.
Étape 1: Lancez le navigateur Mozilla Firefox et accédez à ceci Page de téléchargement du module complémentaire Firebug . L'URL nous amène à la section des modules complémentaires de 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îtra, cliquez sur le bouton «Autoriser» maintenant.
Étape 4: Maintenant, Firefox télécharge le module complémentaire dans l'arrière-plan 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.
Noter : Contrairement à Selenium IDE, nous ne sommes pas obligés de redémarrer Firefox pour refléter l'installation de Firebug, mais cela vient facilement.
Étape 7: Maintenant, pour lancer Firebug, nous pouvons choisir l'une des méthodes suivantes:
- Appuyez sur F12
- Cliquez sur l'icône Firebug présente dans le coin supérieur droit de la fenêtre Firefox.
- Cliquez sur la barre de menu de Firefox -> Web Developer -> firebug -> Open Firebug.
Étape 8 : Maintenant, le firebug est visible en bas de la fenêtre de Firefox.
Maintenant que nous avons téléchargé et installé Firebug, allons de l'avant avec les types de localisateurs que nous créerions avec Firebug.
Création d'un script Selenium à l'aide de Firebug
Contrairement à Selenium IDE, 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:
- Ouvrez «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 pour vous connecter.
Étape 1 - Lancez Firefox et ouvrez Selenium IDE à partir de la barre de menus.
Étape 2 - Saisissez l'adresse de l'application testée ('https://accounts.google.com') dans la zone de texte URL de base.
Étape 3 - Par défaut, le bouton Enregistrer est à l'état ON. N'oubliez pas de régler l'état OFF afin de désactiver le mode d'enregistrement. Notez que si le mode d'enregistrement est à l'état ON, cela peut entraîner l'enregistrement de nos interactions avec le navigateur Web.
Étape 4 - Ouvrez l'application en cours de test (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 automatiquement remplies.
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 IDE.
Étape 8 - Maintenant, dirigez-vous vers la section Firebug dans le navigateur Web, développez la section «head» du code HTML. Notez la balise HTML. Ainsi, pour affirmer le titre de la page Web, nous aurions besoin de la valeur de la balise.
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é.
logiciel espion de téléphone portable pour android
Étape 11 - Collez le titre copié à l'étape 8 dans le champ Cible du second.
É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 la commande. La commande «type» entre une valeur dans l'élément Web spécifié sur l'interface graphique.
Étape 14 - Passez maintenant au navigateur Web, amenez le curseur de la souris sur la zone de texte «E-mail» dans le formulaire de connexion et appuyez sur un clic droit.
Choisissez l'option «Inspecter l'élément avec Firebug». Notez que Firebug met automatiquement en surbrillance le code HTML correspondant pour l'élément Web, c'est-à-dire «Email Textbox».
É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. Il appartient 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 de l'ID et collez-la dans le champ Cible de la troisième étape de test avec le préfixe «id =» pour indiquer à Selenium IDE de localiser un élément Web ayant l'ID comme «E-mail».
(Cliquez pour voir l'image agrandie)
Notez que Selenium IDE est sensible à la casse, saisissez donc soigneusement la valeur de l'attribut et exactement 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 Editeur. Saisissez '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 la commande.
Étape 20 - Passez maintenant au navigateur Web, amenez le curseur de la souris sur la zone de texte «Mot de passe» dans le 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. Il appartient 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 de l'ID et collez-la dans le champ Cible de la troisième étape de test précédée de «id =».
(Cliquez pour voir l'image agrandie)
Étape 22 - Cliquez sur le bouton Rechercher pour vérifier si l'onglet du 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 Editeur. 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 «clic» dans la zone de texte de la commande. La commande «clic» 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 «Connexion» 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 de l'ID et collez-la dans le champ Cible de la troisième étape de test précédée de «id =».
(Cliquez pour voir l'image agrandie)
Étape 28 - 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.
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 nous l'avons fait dans le didacticiel précédent.
Conclusion
Dans ce didacticiel, nous avons présenté 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 : En allant de l'avant dans le prochain didacticiel, nous examinerions le divers types de localisateurs dans Selenium et leur technique d'accessibilité pour créer des scripts de test . En attendant, le lecteur peut commencer à créer ses scripts de test d'automatisation à l'aide de Firebug.
Avez-vous utilisé Firebug pour inspecter des éléments HTML ou pour créer des scripts? Le trouvez-vous utile? Veuillez partager votre expérience dans les commentaires
lecture recommandée
- Comment utiliser le framework TestNG pour créer des scripts Selenium - Tutoriel TestNG Selenium # 12
- Tutoriel Cucumber Selenium: Intégration Cucumber Java Selenium WebDriver
- Comment localiser des éléments dans les navigateurs Chrome et IE pour créer des scripts Selenium - Tutoriel Selenium # 7
- Création de génériques et de suites de tests - Tutoriel Selenium # 22
- Introduction à Selenium WebDriver - Tutoriel Selenium # 8
- Intégration de Jenkins avec Selenium WebDriver: tutoriel pas à pas
- Tutoriels Eclipse détaillés pour les débutants
- Script Selenium efficace et scénarios de dépannage - Tutoriel Selenium # 27