Comment résoudre les problèmes d'automatisation des tests Web UI courants à l'aide de l'ensemble d'outils gratuites de Katalon Studio

"Si un utilisateur final perçoit de mauvaises performances de votre site Web, son prochain clic sera probablement sur your-competition.com." - Ian Molyneaux

Les progrès des technologies de développement Web enrichissent les applications Web et rendent plus difficile l'automatisation des tests Web.

Les fonctionnalités de la technologie de site Web, telles que la prise en charge multi-plateforme, la conception adaptative multi-navigateurs, peuvent ajouter plus de complications et d'efforts à vos stratégies d'automatisation de test de l'interface utilisateur Web.

Ainsi, si vous êtes débutant et que vous commencez par automatiser les tests d’interface utilisateur Web, voici quelques exemples sur la façon de gérer les problèmes courants et de rendre vos tests d’automatisation plus efficaces.

Lire la suite: Les cinq principaux défis de l'automatisation des tests

Défis communs de l'automatisation des tests d'interface utilisateur (Web)

  • Problèmes de temps d'attente
  • Problèmes Iframe
  • Problèmes de pop-up en automatisation
  • Problèmes liés à la localisation d'éléments profondément imbriqués

Apprenons à résoudre ces problèmes d’automatisation de l’interface utilisateur à l’aide de Katalon Studio.

Katalon Studio est un ensemble d'outils d'automatisation gratuit et puissant pour les tests d'applications Web et mobiles. Il est facile à installer et les testeurs peuvent rapidement créer, exécuter, consigner et gérer leurs tests automatisés.

Ceci est un projet de démonstration construit avec Katalon Studio. L'objectif est de vous aider à gérer les problèmes d'automatisation des tests de l'interface utilisateur Web mentionnés ci-dessus. Vous pouvez également télécharger Katalon Studio et le projet de démonstration à partir des liens indiqués ci-dessous dans cet article.

# 1) Problèmes de temps d'attente et solution

Qu'est-ce que Wait?

Une attente est une tactique utilisée dans vos scripts d'automatisation de test pour créer une pause entre les étapes de script lorsque vous attendez des éléments à charger ou une application à répondre.

Les problèmes que les attentes intelligentes (les attentes explicites sont des attentes intelligentes qui se limitent à un élément Web particulier) permettent de résoudre le problème des «fausses alarmes» des problèmes analysés par les ingénieurs.

Comme des échecs de script et non des échecs d'application. Lorsqu'un test échoue à cause du script lui-même et non d'une erreur dans l'application / la page Web, cela s'appelle un échec faux.

Voici quelques exemples courants de ce qui peut provoquer une fausse défaillance:

  • False Fail: l'un des plus gros échecs que nous voyons est lorsqu'un script échoue «false fail» en raison de l'attente de l'application. Souvent causée par la latence du réseau, les requêtes de base de données ou un certain nombre d'éléments liés aux fonctionnalités des applications ou des pages Web.
  • Élément ciblé absent de la page: ce type de défaillance se produit lors de l'attente d'affichage des éléments OU lors du rendu dans le navigateur. L'application est peut-être opérationnelle et certains éléments peuvent ne pas être chargés, ce qui fait échouer votre script de test.

Comment aborder ces échecs de script de test dus aux problèmes d'attente décrits ci-dessus?

Au lieu d’ajouter des attentes aléatoires de 5 à 10 secondes à chaque étape, vous pouvez essayer l’une des options mentionnées ci-dessous:

  • Variable globale - Une variable globale est une variable de portée globale, ce qui signifie qu'elle est visible dans tout le programme. Vous pouvez envisager de définir 3 types de variables globales dans votre script de test: délai d’attente, délai moyen et délai d’attente. Utilisez ces variables dans votre script de test en fonction du temps de réponse de votre application Web.
  • Wait for Page Load - Cette logique attend le chargement complet d'une page avant d'exécuter une étape de votre script.
  • Attendre la présence d'un élément - Il arrive parfois que des éléments Web mettent plus de temps à apparaître sur la page lorsque vous parcourez des pages, cliquez sur des boutons ou effectuez autre chose. La commande «WaitForElementPresent» mettra le sélénium en pause jusqu'à ce que l'élément ciblé ne soit pas présent sur la page. Une fois que l'élément apparaîtra sur la page, sélénium exécutera la commande suivante.

Katalon Studio Test Script:

import internal.GlobalVariable;
importcom.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords en tant que WebUiBuiltInKeywords
importer com.kms.katalon.core.model.FailureHandling en tant que FailureHandling
importer com.kms.katalon.core.testcase.TestCaseFactory en tant que TestCaseFactory
importer com.kms.katalon.core.testobject.ObjectRepository en tant que ObjectRepository
importer com.kms.katalon.core.testdata.TestDataFactory en tant que TestDataFactory
importer com.kms.katalon.core.testcase.TestCase en tant que TestCase
importer com.kms.katalon.core.testdata.TestData en tant que TestData
importer com.kms.katalon.core.testobject.TestObject en tant que TestObject
importcom.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords en tant que WebUI
importcom.kms.katalon.core.mobile.keyword.MobileBuiltInKeywords en tant que mobile
importcom.kms.katalon.core.webservice.keyword.WSBuiltInKeywords en tant que WS
importer staticcom.kms.katalon.core.testobject.ObjectRepository.findTestObject
importer staticcom.kms.katalon.core.testdata.TestDataFactory.findTestData
importer staticcom.kms.katalon.core.testcase.TestCaseFactory.findTestCase
'Ouvrez le navigateur et accédez au site Katalon'
WebUI.openBrowser ('https://katalon.com/')
"Attendez que la page Katalon Studio soit chargée avec l'attente utilisée comme variable globale"
WebUI.waitForPageLoad (GlobalVariable.G_Timeout_Small)
'Cliquez sur le bouton \' Connexion \ 'pour accéder à la page de connexion'
WebUI.click (findTestObject ('Page_KatalonHomepage / btn_Login'))
"Nom d'utilisateur"
WebUI.setText (findTestObject ('Page_KatalonLogin / txt_Username'), nom d'utilisateur)
'Saisir mot de passe'
WebUI.setText (findTestObject ('Page_KatalonLogin / txt_Password'), mot de passe)
'Cliquez sur le bouton \' Connexion \ 'pour vous connecter'
WebUI.click (findTestObject ('Page_KatalonLogin / btn_Submit'))
'Attendre que le message de connexion ayant échoué soit présent'
WebUI.waitForElementPresent (findTestObject ('Page_KatalonLogin / div_LoginMessage'), GlobalVariable.G_Timeout_Small)

Le script de test généré ci-dessus illustre l'utilisation de la variable globale et des mots-clés intégrés à Katalon Studio.

# 2) Problèmes Iframe et solution

Qu'est-ce que l'iframe?

Il s’agit d’un cadre intégré d’un document HTML incorporé dans un autre document HTML d’un site Web. L'élément iframe est utilisé pour insérer du contenu provenant d'autres sources dans une page Web.

Pourquoi est-il important de savoir comment tester autour des iframes?

La vérification du texte et des objets dans Iframes peut être un défi. Même si vous (le testeur humain) pouvez voir le texte, les outils d'automatisation ne le captureront pas en identifiant simplement l'objet. Vous devez indiquer à votre script comment parcourir les iframes et sélectionner le bon Iframe où le texte et l'objet sont présents.

Exemples d'Iframe:

# 1) Forum Katalon Studio iframe

Figure 1: Affichage de l'iframe détecté et capturé

Vous pouvez constater que Katalon Studio Object Spy sélectionne l’iframe dans la zone en surbrillance rouge.

Figure 2: Espion d'objets Katalon Studio

L’espion d’objets d’objets Katalon Studio a détecté et capturé l’image de commentaire Iframe (Figure 1) nécessaire pour vérifier les objets de cette iframe.

# 2) Exemple JQueryUI-Drag and Drop:

Figure 3: Affichage de la sélection de zone d'iframe par JQueryUI-Drag and Drop

Vous pouvez faire glisser l’objet ‘Drag me around’ vers d’autres zones de l’iframe.

Figure 4: Espion d'objets Katalon Studio

Katalon Studio Object Spy a détecté et capturé l’iframe comme indiqué ci-dessus à la figure 3.

Une solution typique vous aiderait à identifier les éléments source et cible et dans le contexte de la session de navigateur correcte. Des outils tels que Selenium proposent un glisser-déposer pour résoudre ce problème dans une certaine mesure.

Solution pour tester les Iframes avec Katalon Studio:

Vous trouverez ci-dessous quelques conseils pour interagir avec un objet glisser-déposer dans un Iframe à l'aide de Katalon Studio.

importer com.kms.katalon.core.testobject.ObjectRepository en tant que ObjectRepository
importer com.kms.katalon.core.mobile.keyword.MobileBuiltInKeywords en tant que mobile
importer com.kms.katalon.core.webservice.keyword.WSBuiltInKeywords en tant que WS
importer statique com.kms.katalon.core.testobject.ObjectRepository.findTestObject
importer statique com.kms.katalon.core.testdata.TestDataFactory.findTestData
importer statique com.kms.katalon.core.testcase.TestCaseFactory.findTestCase
importer com.kms.katalon.core.testcase.TestCase en tant que TestCase
importer com.kms.katalon.core.testdata.TestData en tant que TestData
importer com.kms.katalon.core.testobject.TestObject en tant que TestObject
importer com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords en tant que WebUiBuiltInKeywords
importer com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords en tant que WebUI
import internal.GlobalVariable as GlobalVariable
'Ouvrez le navigateur et accédez à la page jQuery UI'
WebUI.openBrowser ('http://jqueryui.com/')
'Maximiser la fenêtre actuelle du navigateur'
WebUI.maximizeWindow ()
'Cliquez sur le lien \' Draggle \ ''
WebUI.click (findTestObject ('Page_jQuery_Homepage / lnk_Draggable'))
'Basculer vers l'iframe du panneau de démonstration'
WebUI.switchToFrame (findTestObject ('Page_jQuery_Drag and Drop Example / ifr_Demo Frame'), GlobalVariable.G_Timeout_Small)
'Glissez et déposez iframe dans une autre position'
WebUI.dragAndDropByOffset (findTestObject ('Page_jQuery_Drag and Drop Example / div_Frame_Draggable'), 200, 38)
WebUI.closeBrowser ()

Le script de test généré ci-dessus est destiné à la fonction glisser-déposer. Katalon Studio vous permet d'éditer vos étapes de vérification entre les scripts pour vérifier un objet particulier dans iframe.

# 3) Questions contextuelles et approche de la solution

Qu'est ce que le pop-up?

Une fenêtre contextuelle est une zone d'affichage de l'interface utilisateur graphique (GUI), généralement une petite fenêtre qui apparaît («fenêtre contextuelle») au premier plan de l'interface visuelle.

Des problèmes avec pop-up?

En tant qu'être humain, vous avez la possibilité de réagir aux actions qui se produisent lors de vos tests, telles qu'une fenêtre contextuelle se produisant de manière inattendue. Mais en tant que code écrit par un codeur, vous ne pouvez faire que ce que votre codeur vous a dit de faire et cela limite votre capacité à réagir aux comportements inattendus, tels que les fenêtres contextuelles.

Vous trouverez ci-dessous quelques exemples pop-up couramment utilisés qui pourraient constituer un obstacle pour votre automatisation Web:

1) Nouvelle fenêtre du navigateur

2) Alerte: une boîte d’alerte est souvent utilisée pour s’assurer que les informations parviennent à l’utilisateur

3) Boîte de dialogue modale personnalisée: une boîte de dialogue modale est une boîte de dialogue / fenêtre contextuelle affichée en haut de la page en cours.

4) Pop-up natif

Solution pour gérer Pop-up avec Katalon Studio:

Vous trouverez ci-dessous quelques conseils sur l’interaction avec les problèmes de fenêtres contextuelles à l’aide de Katalon Studio.

importer com.kms.katalon.core.annotation.SetUp en tant que setUp
importer com.kms.katalon.core.annotation.TearDown en tant que TearDown
importer com.kms.katalon.core.model.FailureHandling en tant que FailureHandling
importer com.kms.katalon.core.testobject.ObjectRepository en tant que ObjectRepository
importer com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords en tant que WebUiBuiltInKeywords
importer com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords en tant que WebUI
importer com.kms.katalon.core.mobile.keyword.MobileBuiltInKeywords en tant que mobile
importer com.kms.katalon.core.webservice.keyword.WSBuiltInKeywords en tant que WS
importer statique com.kms.katalon.core.testobject.ObjectRepository.findTestObject
importer statique com.kms.katalon.core.testdata.TestDataFactory.findTestData
importer statique com.kms.katalon.core.testcase.TestCaseFactory.findTestCase
importer com.kms.katalon.core.testcase.TestCase en tant que TestCase
importer com.kms.katalon.core.testdata.TestData en tant que TestData
importer com.kms.katalon.core.testobject.TestObject en tant que TestObject
importer java.util.Formatter.DateTime en tant que DateTime
import internal.GlobalVariable as GlobalVariable
'Ouvrez le navigateur et accédez au site enchanté'
WebUI.openBrowser ('http://www.elated.com/articles/javascript-tabs/')
'Maximiser la fenêtre actuelle du navigateur'
WebUI.maximizeWindow ()
'Cliquez sur le bouton \' Tweet \ 'dans iframe'
WebUI.click (findTestObject ('Page_Elated / lnk_Tweet'))
'Passer à la fenêtre qui a pour titre \' Partager un lien sur Twitter \ ''
WebUI.switchToWindowTitle ('Partager un lien sur Twitter')
'Saisissez votre nom d'utilisateur'
WebUI.setText (findTestObject ('Page_Share un lien sur Twitter / txt_Twitter_Login_Username'), email)
'Entrer le mot de passe'
WebUI.setText (findTestObject ('Page_Share un lien sur Twitter / txt_Twitter_Login_Password'), mot de passe)

Le script de test généré ci-dessus illustre l'utilisation des mots-clés intégrés à Katalon Studio.

Par exemple, le mot-clé intégré switchToWindowTitle vous aide à gérer le problème des fenêtres contextuelles.

Problèmes de nidification XPath et approche de la solution

Qu'est-ce que XPATH?

Une expression XPath est un mécanisme permettant de parcourir et de sélectionner des nœuds dans le document XML. Elle peut également être utilisée pour localiser des éléments HTML.

Voici un exemple d'élément imbriqué:

1 
2

# 4) Problèmes d'identification des éléments profondément imbriqués

Il est difficile d’identifier l’élément auquel vous voulez accéder, surtout quand ils sont profondément imbriqués, comme le montre l’élément «a» dans le script ci-dessus.

Vous aurez peut-être du mal à écrire manuellement XPath si vous ne possédez pas une connaissance solide de XPath pour pouvoir accéder à cet élément «a» avec l’outil de test d’automatisation.

Comment identifier facilement les éléments imbriqués?

  • Utiliser XPath: XPath est un moyen efficace de rechercher des éléments s’ils ne peuvent pas être identifiés par un ID, un nom ou un autre attribut ET s’ils sont imbriqués. Cependant, identifier manuellement le chemin est difficile sans l'outil approprié OU l'entrée des ingénieurs qui ont construit les fonctions.
  • Utiliser Katalon Studio: Katalon Studio peut générer un XPath intelligent et optimisé. Il identifie un élément par son nœud parent le plus proche identifié, vous évitant ainsi de rechercher dans l’arborescence DOM.
Figure 7: Espion d'objet Katalon Studio

Katalon Studio a généré automatiquement le XPath optimisé lorsque vous espionnez l'objet «Inscrivez-vous maintenant».

Il s'agit d'un projet de démonstration construit à l'aide de Katalon Studio. L'objectif est de vous aider à gérer les problèmes d'automatisation des tests de l'interface utilisateur Web mentionnés ci-dessus. Vous pouvez télécharger Katalon Studio et le projet de démonstration à partir du lien ci-dessous.

  • Lien de téléchargement gratuit - Katalon Studio
  • Téléchargez aussi - Demo Project

Conclusion:

Bien que l'automatisation de vos tests Web puisse s'avérer difficile, nous espérons que les solutions suggérées dans cet article pourront vous aider à gérer les problèmes d'automatisation des tests Web courants et à valoriser votre automatisation de tests.

Regardez cette vidéo pratique sur la façon d'éviter les risques courants liés à Web UI Automation.

= >> Cliquez ici pour regarder la vidéo

À propos de l'auteur: Ceci est un article d'invité de Abhishek Kumar. Il est le chef de produit chez KMS Technology. Il combine une expertise en gestion stratégique et tactique avec de fortes qualifications en développement logiciel, test logiciel, automatisation de test, gestion de produit, lancement de nouvelle entreprise, développement commercial, gestion de projet et opérations générales.

Vous pouvez essayer cet outil gratuit pour vos tests d’automatisation d’applications Web ou mobiles et nous faire savoir si vous rencontrez des problèmes ou des questions lors de votre utilisation.

Lire la suite: Les cinq principaux défis de l'automatisation des tests

Source: Comment résoudre les problèmes d'automatisation des tests Web UI courants à l'aide de l'ensemble d'outils gratuites de Katalon Studio