Test de conception Web adaptative: le guide complet du débutant

responsive web design testing

À l’époque d’aujourd’hui, l’utilisation d’appareils mobiles pour accéder à Internet s’est développée et est devenue très populaire. Presque tous les internautes souhaitent une version mobile du site Web.

Cependant, la plupart des sites Web ne sont pas aussi optimisés qu'ils devraient l'être pour les appareils mobiles. Les testeurs doivent effectuer un test réactif mobile sur les conceptions réactives.

Les produits logiciels traditionnels rendent essentiellement le même sur n'importe quel appareil.

Microsoft Office, par exemple , a la même apparence sur tous les ordinateurs personnels. Imaginez prendre Microsoft Word exactement tel qu'il s'exécute sur votre bureau et le visualiser sur un iPhone4. Soit les menus et les boutons apparaîtront minuscules, soit vous ne verrez qu’un coin de l’écran et vous devrez utiliser des barres de défilement étendues. Dans tous les cas, l'application devient essentiellement inutilisable.

Cette expérience frustrante est exactement ce que chaque concepteur vit lorsqu'il essaie de concevoir pour le Web.

La solution au problème est quelque chose appelé «design réactif», une technique permettant aux pages Web de demander au navigateur quelle est la résolution, puis de reconcevoir gracieusement l'expérience utilisateur en fonction de la surface d'écran disponible. Du coup, il est impossible de savoir exactement à quoi ressemblera votre logiciel en production.

Cela signifie une stratégie de test (et une stratégie d'automatisation) qui doit être capable d'expérimenter et d'apprendre ce qui «semble juste» et ce qui ne l'est pas, à différentes résolutions.

Ce que vous apprendrez:

• Guide du débutant pour tester les conceptions de sites Web réactifs
  • Qu'est-ce que le Responsive Web Design?
  • Avantages de la conception réactive:
  • Principaux composants de la conception de site Web réactif:
  • Exemples de conception Web réactive
  • Comment tester un site Web réactif
  • Exemples de scénarios de test pour les tests de sites Web réactifs:
  • Outils pour tester un site Web réactif
  • Défis liés aux tests de conception réactive et solutions possibles
  • Conseils pour les tests Web réactifs
• Conclusion
  • lecture recommandée

Guide du débutant pour tester les conceptions de sites Web réactifs

Lorsque nous essayons d'ouvrir un site Web, le serveur lit ' m.sous-domaines ”Pour identifier le type d'appareil mobile à partir duquel la demande est issue. Sur cette base, il redirige l'utilisateur vers la version mobile correspondante.

Pour rendre cela efficace à 100%, chaque appareil doit avoir sa propre conception du site Web spécialement conçu pour lui; Fou exemple,un design spécifique différent pour Blackberry, iPhone, iPad, etc. en tenant compte de leur taille d'écran et de leurs résolutions.

Cependant, une version Web différente pour chaque résolution et appareil n'est pas pratique. Le Ethan Marcotte a proposé une nouvelle approche - Responsive Web Design ( RWD ) - qui résout ce problème.

Notre recommandation

# 1) Navigateur LT

Navigateur LT aide les utilisateurs à tester et déboguer leur site Web sur plus de 45 fenêtres d'appareils. Testez votre site Web sur différents ports d'affichage d'appareils mobiles et de bureau préinstallés avec LT Browser, un navigateur convivial pour le développement de la vue mobile.

Entrez simplement l'URL de votre site Web, sélectionnez l'appareil sur lequel tester votre site Web. Vous pouvez choisir simultanément deux appareils pour une comparaison des vues côte à côte.

Non seulement les tests, mais les utilisateurs peuvent également déboguer leur site Web en déplacement à l'aide des DevTools intégrés offerts par LT Browser.

La meilleure partie est que les utilisateurs peuvent créer un appareil personnalisé en fonction de leurs besoins, ce qui fait de LT Browser notre premier choix pour les tests réactifs.

Qu'est-ce que le Responsive Web Design?

RWDcibles pour que les sites Web réagissent à leur appareil, à leur résolution et soient capables de rendre et de s'adapter correctement. Par exemple, si l'utilisateur passe du bureau / ordinateur portable à l'iPad, le site Web doit automatiquement adapter les changements de résolution tels que la taille de l'image, etc. en fonction des capacités respectives de l'appareil.

En bref,Conception réactiveest 'Un site Web pour chaque écran' .

L'écran ci-dessous est unExemplede RWD:

Remarque: Temps réelExempled'un site Web réactif est www.fpl.com

Dans RWD, un site Web est conçu pour offrir une expérience utilisateur supérieure grâce à une navigation facile, une interface utilisateur claire et simple, etc. Les sites Web réactifs s'adaptent facilement et fonctionnent dans toutes les résolutions, navigateurs, tailles d'écran, matériels et systèmes d'exploitation.

• Les sites Web réactifs sont codés en PHP, .Net, Java, CQ5 (Adobe Experience Manager - AEM) et de nombreux nouveaux frameworks très pratiques pour développer des conceptions réactives.
• Les fonctionnalités CSS et HTML sont utilisées pour que les résolutions d'écran et les images soient redimensionnées automatiquement.
• La conception RW utilise des points d'arrêt pour identifier la disposition d'un site. Chaque conception est utilisée à différents points d'arrêt. Une conception est appliquée sur un point d'arrêt tandis qu'une autre conception est utilisée sous le point d'arrêt. Ces points d'arrêt sont généralement basés sur la largeur des navigateurs.
• Lors de la conception d'un site Web réactif, les développeurs tiennent compte du contenu, de la conception et des performances du site sur tous les appareils pour assurer la convivialité .

Le diagramme est une comparaison précise de la façon dont le contenu s'adapte à l'environnement et au comportement de l'appareil.

Noter : Outre RWD, il existe une autre approche appelée Conception Web adaptative ( AWD ) . Dans l'approche AWD, il y aura une conception spécifique pour chaque appareil. Cependant, la traction intégrale peut ne pas convenir tout le temps. En outre, la conception de sites AWD prend plus de temps et d'argent par rapport aux sites RWD.

Avantages de la conception réactive:

#1) Expérience utilisateur: Basé sur l'appareil à partir duquel nous accédons à un RW, il cache les éléments inhabituels et aide les utilisateurs à atteindre leurs objectifs plus rapidement.Par exemple:si nous ouvrons un RW à partir d'un mobile, cela masque les éléments sans importance et accélère le chargement des pages Web.

#deux) Partage ou liaison: Pour un RW, une seule URL est utilisée pour différents périphériques. Comme une seule URL accumule toutes les données et informations de divers appareils, cela donne une meilleure expérience utilisateur aux utilisateurs.

# 3) Peu ou minimum d'entretien requis pour un RW.

# 4) Les mises en page RW sont fluides.

Différences entre la conception Web réactive et la conception Web adaptative:

RWD et AWD sont étroitement liés les uns aux autres.

• RWD réagit rapidement et positivement aux changements tandis que la traction intégrale peut être modifiée facilement pour un nouvel objectif.
• RWD a plusieurs dispositions de grille fluide et AWD a plusieurs dispositions de largeur fixe.
• Les images dans RWD sont appelées sensibles au contexte.

Principaux composants de la conception de site Web réactif:

La conception Web réactive comprend trois composants principaux:

#1) Dispositions flexibles: Création d'un site Web avec une grille flexible qui peut être facilement redimensionnée à n'importe quelle largeur de manière dynamique.

#deux) Requêtes médias: Fournissez différents styles pour les navigateurs et les appareils en fonction du contexte, tels que l'orientation de l'appareil, la fenêtre d'affichage, etc.

# 3)Milieu flexible: À mesure que la taille des fenêtres change, les médias (images, vidéos, etc.) doivent également changer leur taille ou leur résolution en fonction des besoins.

Noter : «Viewport» est la zone du navigateur où le contenu réel du site Web est affiché. La fenêtre ne comprend pas les barres d'outils, les onglets, etc.

Exemples de conception Web réactive

Exemple 1)

Ouvrez le lien www.fpl.com à partir de divers appareils et observez l'URL. L'URL d'un site Web réactif reste la même pour tous les appareils.

à) Vue du RW depuis un ordinateur de bureau ou un ordinateur portable (grand écran)

b) Vue du RW depuis une tablette (écran de taille moyenne)

c) Vue du RW depuis un mobile (petit écran)

Exemple # 2)

Ouvrez le site www.yepme.com depuis un ordinateur portable et aussi depuis un mobile et comparez les URL. Ce yepme.com le lien n'est pas un lien réactif.

à) Affichage d'un site Web non réactif depuis un ordinateur de bureau ou un ordinateur portable

implémenter la file d'attente prioritaire c ++

b) Vue d'un site Web non réactif depuis un mobile

Comment tester un site Web réactif

Le test de conception réactive signifie tester le site Web ou URL de différents appareils. En pratique, il n'est pas possible de tester complètement le site Web réactif car pour ce faire, nous devons mettre en place différents systèmes pour différentes tailles d'écran.

Un moyen possible pour le test réactif consiste à redimensionner la taille de la fenêtre du navigateur conformément au scénario de test.

Certains navigateurs, tels que IE et Safari, fourniront des plug-ins ou des extensions de navigateur qui vous aideront à afficher la zone de la fenêtre en pixels. Cela facilite les tests en obtenant la taille d'écran souhaitée en modifiant les pixels.

D'autres navigateurs comme Chrome fournissent un logiciel ou un programme appelé «Émulateur» ce qui aidera à changer les fonctionnalités de l'écran et l'environnement selon le périphérique souhaité nécessaire aux tests.

Remarque: «Émulateur» est un logiciel ou un programme fourni dans le navigateur qui fait que le système hôte (navigateur actuel) se comporte comme le système invité (navigateur de l'appareil souhaité qui doit être testé pour la taille d'écran souhaitée).

Même si les émulateurs ne peuvent pas vous donner l'environnement exact nécessaire pour les tests, ils constituent une solution rentable pour tester un RW à un niveau élevé.

Exemples de scénarios de test pour les tests de sites Web réactifs:

Le testeur de conception Web adaptative doit s'assurer que la conception réactive satisfait à tous les éléments mentionnés ci-dessous. scénarios de test pour vous assurer qu'il s'agit d'un design réactif sans bogue.

#1) Le lien ou l'URL du site Web réactif doit être le même pour tous les navigateurs de chaque appareil, quelle que soit la résolution de l'écran.

Supposer www.abc.com est un site Web réactif. Si nous l'ouvrons sur un ordinateur portable et sur un téléphone mobile, l'URL doit être la même sur les deux appareils. Le site Web ouvert dans le navigateur mobile ne doit pas commencer par www.m.abc.com ou www.mobile.abc.com

Exemple: Ouvrez le site Web www.kotak.com à partir d'un ordinateur portable et ouvrez-le également à partir d'un mobile et observez l'URL dans les deux appareils. L'URL n'est pas la même pour les deux appareils.

Ci-dessous un instantané montre comment l'URL change pour un site Web non réactif sur différents appareils comme un ordinateur portable et un mobile.

Ouvrez le site Web www.w3schools.com depuis un ordinateur portable et depuis un mobile et vérifiez les URL. Il devrait en être de même pour les deux appareils.

Ci-dessous, l'instantané montre que l'URL reste la même pour un site Web réactif sur différents appareils:

#deux) L'emplacement d'affichage du contenu (images, sous-liens, menus, etc.) d'un site Web réactif doit changer dynamiquement en fonction du changement de résolution de l'écran. Autrement dit, si nous modifions la résolution de l'écran de la taille de l'ordinateur portable à celle d'un mobile, l'affichage des options de menu devrait changer de manière dynamique.

Exemple: Ouvrez le lien www.fpl.com à partir d'un ordinateur portable et cliquez sur le menu dans le coin supérieur droit de la fenêtre. Les options du menu sont affichées comme indiqué ci-dessous:

questions entretien java services web reposants

Ouvert www.fpl.com depuis le mobile et cliquez sur le menu dans le coin supérieur droit de la fenêtre. Les options du menu sont les suivantes:

Remarque: Ce scénario peut également être testé à l'aide d'émulateurs de navigateur (Ancien:chrome).

Ouvrez le site Web www.fpl.com via un bureau et observez comment les options de menu sont affichées. Voir ci-dessous un aperçu:

Redimensionnez maintenant la fenêtre du navigateur à celle de la taille de l'écran mobile, puis vérifiez l'affichage des options de menu. Voir ci-dessous un aperçu:

# 3) Les URL d'un site Web réactif doivent également être spécifiques à la résolution.

Pré-requis pour tester ce scénario: Demandez au développeur d'insérer n'importe quel sous-lien dans le site Web de test réactif où le sous-lien ne répond pas.

Par exemple, le développeur peut insérer un lien www.snapdeal.com sur notre site Web de test.

Maintenant, ouvrez le site Web de test réactif depuis un mobile et cliquez sur le sous-lien mentionné dans le pré-requis. Ensuite, l'URL du sous-lien doit devenir https://m.snapdeal.com .

# 4) Le même scénario peut également être testé à partir d'un ordinateur portable. Ouvrez le RW depuis un ordinateur de bureau ou un ordinateur portable et cliquez sur le sous-lien (mentionné dans le pré-requis du scénario de test 3) qui ne répond pas. L'URL du sous-lien ne doit pas changer (comme nous testons ce scénario à partir de l'ordinateur portable, l'URL doit rester la même).

# 5) Pré-requis pour tester ce scénario: Demandez au développeur d'insérer un sous-lien,par exemple, www.paytm.com dans le site de test. L'appareil mobile sur lequel vous allez exécuter ce scénario doit avoir l'application respective de Paytm installée dans le mobile.

Ouvrez maintenant notre site Web réactif de test à partir d'un mobile et cliquez sur le sous-lien «paytm». Ensuite, l'application Paytm qui est installée dans le mobile doit être ouverte. (L'utilisateur ne doit pas être redirigé vers le site Web dans le navigateur ou une autre fenêtre; seule l'application doit être ouverte.)

# 6) Les images du site Web réactif sont spécifiques à la résolution. Cela signifie que la résolution de l'image insérée dans le code du site Web réactif conçu pour la compatibilité mobile est différente de celle d'un ordinateur de bureau ou d'une tablette. Chaque taille d'écran doit avoir son image spécifique dans la conception.

Pré-requis pour tester ce scénario: Tester et vérifier la résolution des images peut être une tâche difficile. Demandez au développeur d'insérer trois images différentes dans le site Web réactif séparément pour mobile, tablette et ordinateur de bureau.

Ouvrez le site Web de test de conception réactive à partir d'un ordinateur de bureau, d'une tablette et d'un mobile. Les images de la page Web réactive doivent être différentes pour les trois appareils.

(OU)

Ouvrez le RW de test à partir d'un bureau et vérifiez l'image sur la page Web. Redimensionnez maintenant la fenêtre à celle d'une tablette et vérifiez l'image. Cela doit être différent de celui de l'image affichée pour la taille de l'écran du bureau. Vous pouvez maintenant redimensionner la fenêtre à la taille de l'écran mobile et vérifier l'image. Cette image doit également être différente des deux images ci-dessus.

Exemple: Ouvrez le site réactif www.fpl.com à partir d'un bureau; faites un clic droit sur l'image sur le page d'accueil -> sélectionnez «Inspecter» du menu. Vérifiez la résolution de l'image (vérifiez l'extension du nom du fichier image .jpg) à partir du code. Voir la capture d'écran ci-dessous:

Redimensionnez maintenant la même fenêtre à celle d'une taille d'écran de tablette et vérifiez la résolution de l'image. (L'extension du nom de l'image est medium.jpg)

Enfin, redimensionnez la taille de la fenêtre à celle d'une taille d'écran mobile et vérifiez l'image. (L'extension du nom de l'image est small.jpg)

# 7) Cliquez au hasard n'importe où sur la page Web et vérifiez si des données ou du texte qui ne sont pas liés par un lien hypertexte sont initiés et redirigés vers une autre page ou contenu. Cela teste si un mot ou un texte est marqué comme lien hypertexte dans le back end .

Noter : Dans quelques projets, les exigences concernent la taille des pixels et la résolution de l'écran pour des appareils particuliers. (Par exemple, une vue de la tablette pour leur RW doit être à 15:15 pixel et pour un mobile, elle doit être à 10:10 etc.)

Le scénario principal consiste à tester les changements dynamiques qui devraient se produire pour l'affichage RW lorsque nous modifions la taille des pixels.

# 8) Ouvrez notre RW de test dans un navigateur et visualisez le contenu et l'affichage des images principales. Redimensionnez maintenant la fenêtre jusqu'au point d'arrêt de la taille de la tablette et vérifiez les changements qui devraient se produire dans la résolution de l'image et tout autre contenu. Aux points d'arrêt, les modifications doivent se produire de manière dynamique (parfois, les modifications ne se produiront pas aux points d'arrêt et peuvent changer à une autre taille de pixel, ce qui est un défaut).

Outils pour tester un site Web réactif

Il existe quelques outils (sites Web) qui vous permettront de prévisualiser les pages Web de notre site Web réactif.

Par exemple,nous pouvons tester notre site responsive à différentes résolutions d'écran prédéfinies (smartphones, tablettes, etc.) et également personnaliser à n'importe quelle résolution souhaitée. Ces outils facilitent et accélèrent les activités de test. Ces outils intégrés au navigateur peuvent être appelés Responsable .

Certains outils offrent également une fonctionnalité importante de capture de la capture d'écran réactive qui pourrait nous aider à tester les conceptions de site Web, HTML, mises en page, CSS, etc. du site Web réactif.

Ces outils sont d'excellentes alternatives lorsque les appareils réels ne sont pas disponibles ou prêts.

Voici une liste d'outils rapide:

#1) Vérificateur de conception réactif

Entrez l'URL du site Web réactif qui doit être testé dans le champ 'Entrez votre URL ici' ci-dessus et cliquez sur 'OK'. Vous pouvez même sélectionner l'appareil et la résolution auxquels vous souhaitez afficher le site réactif.

Entrez maintenant www.fpl.com dans le champ, sélectionnez la disposition «Nexus 7 PORTRAIT» et cliquez sur GO. Le site s'affiche dans la résolution du format sélectionné.

#deux) Screenfly

Entrez sur le site de test www.fpl.com et cliquez sur GO.

Changez la mise en page sur bureau, tablette, mobile, etc. et testez le site. Avec cet outil, vous pouvez même personnaliser la résolution.

Par exemple, réglez la résolution de l'écran sur 512 x 256 et testez le site.

Noter : Avec cet outil, vous pouvez même tester scénario 6 facilement en changeant les résolutions et en vérifiant la dénomination de l'image.

# 3) Designmodo

Entrez n'importe quelle URL, www.makemytrip.com et cliquez sur Entrée.

Dans la partie supérieure droite du navigateur, vous avez la possibilité de modifier la mise en page du site Web en celle de tout modèle ou appareil mobile spécifique, etc.

Noter : Cet outil a une autre fonctionnalité comme faire glisser l'écran et modifier la résolution à la résolution souhaitée.

# 4) isResponsive

Entrez l'URL de test, www.fpl.com dans le champ et cliquez sur le bouton «Test».

Remarque: Cet outil ne dispose que de quelques options de mise en page fixes sur lesquelles notre site peut être testé.

# 5) Mattkersley

Si vous souhaitez avoir une vue de votre RW sur plusieurs tailles d'écran à la fois, cet outil Mattkersley est ce dont vous avez besoin.

Entrez maintenant votre URL de test dans la barre d'adresse et cliquez sur Entrée. Vous pouvez afficher le RW sur plusieurs tailles d'écran à la fois.

# 6) Par défaut, chrome a peu d'outils de développement grâce auquel nous pouvons simuler le mode de l'appareil et ses capacités.

Pour utiliser cette fonctionnalité de chrome, ouvrez un site Web de test de conception réactive comme www.fpl.com dans chrome et faites un clic droit sur la page Web et sélectionnez l'option «Inspecter» dans le menu ou appuyez sur Ctrl + Maj + I. La fenêtre ci-dessous s'ouvre au bas de la page Web.

Cliquez maintenant sur l'icône comme indiqué dans la capture d'écran ci-dessous.

Le mode mobile de la page Web s'ouvre. À partir de là, vous pouvez changer la résolution en n'importe quel pixel spécifique et également en n'importe quel modèle mobile prédéfini qui est affiché dans le menu déroulant. Regardez l'instantané ci-dessous pour avoir une idée claire:

Remarque: Nous pouvons également changer la page Web en mode portrait ou paysage.

Autres bons outils pour tester le responsive design:

7) Conception réactive
8) BrowserStack
9) Troie
dix) AmIResponsiveDesign
Onze) Responsable
12) Studiopress
13) Test réactif
14) Pour les machines MAC, nous avons une application distincte appelée « AJUSTER ”Pour tester un RW. Cette application vous permet de configurer divers points d'arrêt sur divers appareils pour les tests. APTUS n'est pas une application gratuite et nous devons l'acheter sur le Mac App Store.

Défis liés aux tests de conception réactive et solutions possibles

Stratégie de test dynamique

Passer de 320 × 480 (la résolution de l'iPhone4) à 2048 × 2048 (un grand moniteur) laisse plus de 4 millions de tailles de navigateur possibles. La plupart des groupes de test réduiront la liste des périphériques de test à une poignée. Même dans ce cas, le problème des tests manuels est difficile voire impossible à aborder.

Les développeurs ne peuvent pas anticiper tous les problèmes de la plate-forme et les testeurs ne peuvent pas les détecter avant la sortie. Pour cette raison, nous trouvons le problème d'interface utilisateur occasionnel en production.

Peut-être que quelqu'un a réduit la taille de son navigateur et que des champs de texte importants sont couverts par une étiquette de page. Peut-être qu'un code conçu pour gérer le redimensionnement dynamique de la page interrompt les sélecteurs de dates modaux et ne se fait jamais remarquer par un test normal construit sur WebDriver. Il y a trop d'options d'affichage pour lesquelles créer des tests et trop peu de temps.

Jetons un œil à unexemple réalistepour illustrer le problème.

Les pages dynamiques, des éléments tels que les curseurs publicitaires et le contenu diffusé par des utilisateurs de différentes tailles de page sont un élément essentiel de nombreux logiciels. Ajoutez à cela le fait que nous ne pouvons pas prédire comment la page sera affichée et que de nombreux efforts d'automatisation commencent par un échec.

Je vois deux solutions populaires à ce problème: utiliser un ensemble de données standardisé ou de base et actualiser chaque fois que la suite de tests est exécutée, et prendre les choses un environnement ou une plate-forme à la fois.

Les données standard garantissent que le contenu de la page aura le même aspect à chaque fois que nous chargeons l'environnement de test. Cette stratégie combinée à quelque chose comme Sauce Labs qui donne aux gens accès à de nombreuses plates-formes et vous allez assez loin.

Cette approche prend du temps et des ressources. Vous aurez besoin de temps de la part d'une personne ayant accès à la base de données, généralement un DBA, pour créer et mettre à jour les exportations de bases de données. Et, quelqu'un doit créer des scripts de configuration et de démontage de scripts pour maintenir l'environnement de test. Après tous ces efforts, vous pourriez vous retrouver avec le type de bogues d'environnement désinfecté qui adorent se cacher.

Vous pouvez également utiliser la technologie de test visuel pour aider à automatiser les tests sur des pages Web dont la présentation et le contenu varient. À l'aide de cet outil, vous pouvez créer des tests sans aucune modification de votre environnement de test et sans nécessiter de compétences de la part de personnes extérieures à votre groupe de test.

Prenons un exemple.

Considérez l'application mobile Twitter.

Ce produit est une combinaison de contenu utilisateur et de publicité en constante évolution. Il y a également quelques parties principales de l'interface utilisateur, telles que le fil d'actualité et les notifications, dans l'en-tête.

À l'aide d'un outil de test visuel, vous pouvez commencer par effectuer une capture d'écran de la totalité de la page à défilement, pas seulement de la zone visible. Vous pouvez choisir une option de comparaison qui ignore le contenu textuel mais se concentre sur les éléments sur la page.

Par exemple, vous pouvez voir que les champs pour les tweets existent, que chaque tweet a un élément de nom et un élément de date / heure, sans vous soucier de ce qu'il y a dans les éléments.

La recherche d'éléments sur des pages entières soulage également le fardeau de maintenance et de complexité que nous constatons dans de nombreux tests automatisés. Plutôt que de manipuler les données sur une page, d'enregistrer, de faire défiler puis de vérifier, vous obtenez tout en un seul coup. Cela signifie moins de code à écrire, moins de code à maintenir et moins de faux positifs lors des tests nocturnes.

Tests réactifs pour une conception réactive:

La conception réactive a ajouté le problème combinatoire à chaque plate-forme disponible. La question est; parmi toutes ces plates-formes et tailles d'écran possibles, que nous sélectionnons pour la meilleure couverture de test.

Réduire le nombre d'environnements que nous couvrons aux seuls environnements les plus populaires facilite la tâche technique tout en ignorant le problème de couverture.

L'augmentation du nombre d'environnements avec un seul cadre d'automatisation crée un cauchemar de maintenance et ajoute potentiellement un problème de test insoluble.

La combinaison de bons outils de test visuel avec un cadre d'automatisation d'interface utilisateur flexible, tel qu'un pilote Web, peut rendre les aspects techniques de ce problème non seulement plus faciles à traiter, mais aussi résolubles.

L'objectif est une bonne couverture de l'interface utilisateur avec une charge de maintenance raisonnable. Le test visuel est votre seule option robuste et évolutive.

Conseils pour les tests Web réactifs

#1) Lors du test d'un RW, vous devez garder à l'esprit la cohérence de la conception telle que l'alignement des images, des textes, du rembourrage sur les bords, etc. sur tous les navigateurs et systèmes d'exploitation.

#deux) Pendant le test d'un RW, le testeur doit savoir ce qu'il faut tester et comment tester sur plusieurs appareils à différents points d'arrêt. Sinon, cela pourrait être assez exhaustif et déroutant.

# 3) Pour tester en profondeur un site Web réactif, la coordination des testeurs et des développeurs est indispensable. Le développeur doit aider les testeurs à créer les conditions mentionnées dans les prérequis des cas de test.

# 4) Vérifiez si les pages Web sont lisibles à toutes les résolutions, c'est-à-dire que le contenu doit être lisible même si nous redimensionnons le navigateur à la taille de l'écran mobile.

# 5) Le contenu important du RW doit être visible pour tous les points d'arrêt, c'est-à-dire que si nous changeons la taille du navigateur de l'écran du bureau à l'écran mobile, les images principales, le texte principal, le menu, etc. doivent rester les mêmes.

# 6) Si le navigateur est redimensionné pour le test, toute zone de clic (comme les boutons, les menus, les sous-liens, etc.) du RW devrait être adaptée au clic.

# 7) Le redimensionnement du navigateur et le test du site Web réactif ne peuvent identifier que quelques problèmes majeurs, alors qu'il peut y avoir quelques autres problèmes liés aux glissements de doigt, au tapotement, etc. sur les appareils mobiles. Tester ces caractéristiques particulières sur les appareils réels peut conduire à une meilleure détection et suppression des défauts.

Conclusion

Lorsque nous testons la conception réactive, de nombreux défis se posent. Vous devez penser de manière efficace pour surmonter les défis.

Tester un site Web réactif est très important pour le succès de plusieurs Applications mobiles. Les utilisateurs mobiles ne feront qu'augmenter et leurs attentes sont très différentes de celles des utilisateurs de bureau. La mise en œuvre et les tests approfondis de RWD sont un excellent moyen de configurer votre site pour répondre aux attentes.

La mise en œuvre et les tests approfondis de RWD sont un excellent moyen de configurer votre site pour répondre aux attentes.

Nous espérons que les informations, astuces et scénarios de test abordés dans cet article vous aideront sûrement à répondre à vos besoins en matière de test de site Web.

A propos de l'auteur: Ceci est un message d'invité de Laxmi. Elle a plus de 7 ans d'expérience en test de logiciels et travaille actuellement en tant qu'ingénieur principal de test de logiciels.

comment ouvrir un .torrent

Essayez tous les exemples fournis dans cet article et faites-nous savoir si vous avez des questions / commentaires sur le même sujet.

lecture recommandée

• Test alpha et test bêta (un guide complet)
• Build Verification Testing (BVT Testing) Guide complet
• Test fonctionnel vs test non fonctionnel
• Types de tests logiciels: différents types de tests avec des détails
• Meilleurs outils de test de logiciels 2021 (Outils d'automatisation des tests QA)
• Didacticiel de test de l'entrepôt de données de test ETL (un guide complet)
• Guide de test de sécurité des applications Web
• Meilleurs services de test de logiciels d'assurance qualité de SoftwareTestingHelp