Une introduction à des essais frontales

Sep 17, 2025

Comment

[dix] [dix] [dix]

[dix]

Page 1 sur 2:

Différents types de tests de frontage (et quand les utiliser)

Différents types de tests de frontage (et quand les utiliser)
Embrasser et appliquer une culture de test

[dix]

Le code avant-gardiste est toujours une pratique déroutante pour de nombreux développeurs. Mais avec le développement frontal qui devient plus complexe et que les développeurs responsables de la stabilité et de la cohérence, tels que jamais auparavant, des tests de frontage doivent être embrassés comme citoyens égaux dans votre codeBase. Nous décomposons vos différentes options de test et expliquons quelles situations sont utilisées pour.

[dix]

Les tests frontaux sont un terme couvert qui couvre une variété de stratégies de test automatisées. Certaines d'entre elles, comme des tests d'unités et d'intégration, ont été acceptées les meilleures pratiques au sein de la communauté de développement du backend depuis des années. D'autres stratégies sont plus récentes et découlent des changements de quel développement et de développement frontales sont utilisés pour l'instant.

À la fin de cet article, vous devriez vous sentir à l'aise d'évaluer les stratégies de test adaptées au mieux avec votre équipe et vos codes. Les exemples de code suivants seront écrits à l'aide du cadre Jasmine, mais les règles et les processus sont similaires dans la plupart des cadres de test.

Meilleures pièces de logiciel de test utilisateur

01. Test de l'unité

Test unitaire, l'un des anciens combattants du test est au niveau le plus bas de tous les types de test. Son objectif est de garantir que les plus petits bits de votre code (appelé unités) fonctionnent de manière indépendante comme prévu.

Imaginez que vous ayez un jeu dego pour une maison. Avant de commencer à construire, vous voulez vous assurer que chaque pièce individuelle est comptabilisée (cinq carrés rouges, trois rectangles jaunes). Le test de l'unité s'assure que des ensembles individuels de code - comme des validations et des calculs d'entrée - fonctionnent comme prévu avant de créer la plus grande fonctionnalité.

[dix]

Il est utile de penser à des tests unitaires en tandem avec le mantra «faire bien». Si vous avez un code avec une seule responsabilité, vous souhaitez probablement écrire un test d'unité pour cela.

Regardons l'extrait de code suivant, dans lequel nous écrivons un test d'unité pour une simple calculatrice:

 Décrire ("Opérations de calculatrice", fonction () {
  il ("devrait ajouter deux nombres", fonction () {
    Calculatrice.init ();
    var résultat = calculatrice.addnumbers (7,3);
    attendre (résultat) .Tobe (10);
  });
});

Dans notre Calculatrice Demande, nous voulons nous assurer que les calculs fonctionnent toujours indépendamment de la manière dont nous prévoyons. Dans l'exemple, nous voulons nous assurer que nous pouvons toujours ajouter avec précision deux chiffres ensemble.

La première chose que nous faisons est de décrire la série de tests que nous allons courir en utilisant Jasmine's décris . Cela crée une suite de tests - un regroupement de tests liés à un domaine particulier de l'application. Pour notre calculatrice, nous allons regrouper chaque test de calcul dans sa propre suite.

Les suites sont excellentes non seulement pour l'organisation du code, mais parce qu'ils vous permettent de lancer des suites. Si vous travaillez sur une nouvelle fonctionnalité pour une application, vous ne voulez pas exécuter tous les tests lors du développement actif, car cela prendrait beaucoup de temps. Les suites de test vous permettent de développer plus rapidement plus rapidement.

Ensuite, nous écrivons nos tests réels. En utilisant le il Fonction, nous écrivons la fonctionnalité ou la fonction de fonctionnalité que nous testons. Notre exemple teste la fonction d'addition, nous allons donc exécuter des scénarios qui confirment que cela fonctionne correctement.

Nous écrivons ensuite notre assertion de test, c'est là que nous testons si notre code fonctionne comme nous nous attendons. Nous initialisons notre calculatrice et courons notre addnumbers fonctionner avec les deux chiffres que nous souhaitons ajouter. Nous stockons le numéro comme le résultat, puis affirmer que cela est égal au numéro que nous prévoyons (dans notre cas, 10).

Si addnumbers omet de renvoyer les chiffres corrects, notre test échouera. Nous écrivions des tests similaires pour nos autres calculs - soustraction, multiplication, etc.

02. Tests d'acceptation

Si des tests d'unité sont comme la vérification de chaque pièce LEGO, les tests d'acceptation vérifient si chaque étape du bâtiment peut être complétée. Ce n'est pas parce que toutes les pièces sont comptabilisées ne signifie pas que les instructions sont correctement exécutables et vous permettront de construire le modèle final.

Les tests d'acceptation traversent votre application en cours d'exécution et assurez-vous que les actions désignées, les entrées utilisateur et les flux d'utilisateurs sont complétables et fonctionnent.

Juste parce que notre application addnumbers La fonction renvoie le bon numéro, ne signifie pas que l'interface de la calculatrice fonctionnera définitivement comme prévu pour donner le bon résultat. Et si nos boutons sont désactivés, ou le résultat de calcul ne s'affiche pas? Les tests d'acceptation nous aident à répondre à ces questions.

 Décrire ("État d'inscription de l'état de défaillance", fonction () {
  il ("ne devrait pas permettre d'inscrire avec des informations non valides", fonction () {
    var page = visite ("/ home");
    page.fill_in ("Entrée [nom = 'Email']", "Pas un email");
    page.click ("bouton [Type = Soumettre]");
    page.click ("bouton [Type = Soumettre]");
    attendre (page.find ("# Signuperror"). hasClass ("caché"))) TOBEFALSY ();
  });
});

La structure ressemble beaucoup à notre test de l'unité: nous définissons une suite avec décris , puis écrivez notre test dans le il fonction, puis exécutez du code et vérifiez son résultat.

Plutôt que de tester des fonctions et des valeurs spécifiques, nous essons toutefois de voir si un flux de travail particulier (un flux d'inscription) se comporte comme prévu lorsque nous remplissons de mauvaises informations. Il existe des actions plus mineures qui se produisent ici, telles que les validations de formes pouvant être testées unitaires, ainsi que toute manipulation de ce qui indique notre état d'erreur, démontré par un élément avec l'ID. SIGNUERROR .

Les tests d'acceptation sont un excellent moyen de s'assurer que les flux d'expérience clés fonctionnent toujours correctement. Il est également facile d'ajouter des tests autour des cas de bord et d'aider vos équipes d'assurance qualité à suivre dans votre application.

Lorsque vous envisagez de savoir quoi écrire des tests d'acceptation, vos histoires d'utilisateurs sont un endroit idéal pour commencer. Comment votre utilisateur interagit-il avec votre site Web et quel est le résultat attendu de cette interaction? Il est différent des tests unitaires, ce qui est mieux adapté à quelque chose comme des exigences de fonction, telles que les exigences autour d'un champ validé.

[dix]

03. Test de régression visuelle

Comme mentionné dans l'introduction, certains types de tests sont uniques au monde avant. Les premiers sont des tests de régression visuelle. Cela ne teste pas votre code, mais plutôt compare le résultat rendu de votre code - votre interface - avec la version rendue de votre application dans la production, la mise en scène ou un environnement local pré-modifié.

Ceci est typiquement fait en comparant les captures d'écran extraites dans un navigateur sans tête (un navigateur exécutant sur le serveur). Les outils de comparaison d'images détectent ensuite toutes les différences entre les deux coups.

À l'aide d'un outil tel que PhanMCSS, vos tests spécifient lorsque le coureur de test doit naviguer vers, prendre une capture d'écran et que le cadre vous indique des différences qui sont venues dans ces points de vue.

 Casper.Start ("/ home"). Ensuite (fonction () {

  // état initial de forme
  fantomcss.screenshot ("# signéform", "formulaire d'inscription");

  // appuyez sur la touche d'inscription (doit déclencher une erreur)
  casper.click ("bouton # inscription");

  // Prenez une capture d'écran du composant UI
  fantomcss.creenshot ("# signéform", "erreur de formulaire d'inscription");

  // remplir le formulaire par nom d'attributs et amplis; nous faire parvenir
  Casper.fill ("# Signupform", {
    Nom: "Alicia Sedlock",
    Email: "[email protected]"
  }, vrai);

  // Prenez une deuxième capture d'écran d'état de réussite
 Phantomcss.screenshot ("# Signupform", "Success formulaire réussit");
});

This visual regression framework illustrates decision trees in your application, exposing complexity to those outside of development — Ce cadre de régression visuelle illustre les arbres de décision de votre demande, exposant la complexité à celles en dehors du développement

Contrairement à l'acceptation et aux essais unitaires, les tests de régression visuelle sont difficiles à bénéficier de si vous construisez quelque chose de nouveau. Lorsque votre interface utilisateur verra des changements rapides et drastiques tout au long du développement actif, vous économiserez probablement ces tests lorsque des pièces de l'interface sont remplies visuellement. Par conséquent, les tests de régression visuelle sont les derniers tests que vous devriez écrire.

Actuellement, de nombreux outils de régression visuelle nécessitent un peu d'effort manuel. Vous devrez peut-être exécuter votre capture de capture d'écran avant de commencer le développement de votre succursale ou de mettre à jour manuellement des captures d'écran de base lorsque vous apportez des modifications à l'interface.

Ceci est simplement en raison de la nature du développement - changements à la Ui Peut être intentionnel, mais les tests ne savent que «oui, c'est le même» ou «non, c'est différent». Toutefois, si les régressions visuelles sont un point de douleur dans votre application, cette approche peut enregistrer votre temps et vos efforts d'équipe dans l'ensemble, comparé aux régressions constamment fixées.

04. Tests d'accessibilité et de performance

Au fur et à mesure que la culture et la sensibilisation aux tests frontaux poussent, notre capacité à tester divers aspects de l'écosystème. Compte tenu de la mise au point accrue sur accessibilité et la performance dans notre culture technique, l'intégrant dans votre suite de test permet de garantir que ces concepts restent une priorité.

Si vous avez des problèmes d'application des budgets de performance ou des normes d'accessibilité, il s'agit d'un moyen de conserver ces exigences à la pointe des esprits des gens.

Ces deux vérifications peuvent être intégrées à votre flux de travail avec des outils de construction tels que GRUNT et GUNP, ou semi-manuellement au sein de votre terminal. Pour les budgets de performance, un outil tel que GRUNT-PERFBUDGET vous offre la possibilité d'exécuter votre site via WebPageTest automatiquement dans une tâche spécifiée.

Cependant, si vous n'utilisez pas de coureur de tâche, vous pouvez également saisir Perfbudget comme module NPM autonome et exécuter les tests manuellement.

Voici ce à quoi on dirait de courir à travers le terminal:

 Perfbudget --URL http://www.aliciabilité.com - Touche API WebPageTest] --Speedindex 2000 --Render 400

Et de même, la mise en place de grunt:

perfbudget: {
  défaut: {
    Options: {
      URL: 'http://aliciabilité.com',
      Touche: "clé API WebPageTest",
      budget: {
        Speedindex: '2000',
        Render: '400'
      }
    }
  }
}

[...]

grunt.registerttask ('défaut', ['JSHINT', 'PERFBUDGET']);

Les mêmes options sont disponibles pour les tests d'accessibilité. Donc pour PA11Y, vous pouvez soit exécuter le PA11Y commande dans votre navigateur pour la sortie ou configurez une tâche pour automatiser cette étape. Dans le terminal:

 pa11y aliciabilité.com

// en tant que commande JavaScript après l'installation de NPM

var pa11Y = nécessite ("PA11Y"); // nécessite PA11Y
var test = pa11Y (); // obtenir PA111Y prêt à définir

test.run ('aliciabilité.com', fonction (erreur, résultats) {
  // enregistre notre analyse vos résultats
});

La plupart des outils de ces catégories sont assez plug-and-play, mais vous donnent également la possibilité de personnaliser la manière dont les tests sont exécutés - par exemple, vous pouvez les définir pour ignorer certaines normes de WCAG.

Resemble.js is a popular image comparison library, and gives you a lot of control over what triggers a visual differentiation — Resemble.js est une bibliothèque de comparaison d'images populaire et vous donne beaucoup de contrôle sur ce qui déclenche une différenciation visuelle

Page suivante: Comment introduire des tests dans votre flux de travail

[dix] [dix]

Page actuelle: Différents types de tests de frontage (et quand les utiliser)

Page suivante Embrasser et appliquer une culture de test [dix]

[dix]

Une introduction à des essais frontales

01. Test de l'unité

02. Tests d'acceptation

03. Test de régression visuelle

04. Tests d'accessibilité et de performance

Comment - Most Popular Articles

Affinity Designer: Comment utiliser des effets et des styles

Explorez la visualisation des données avec P5.JS

Comment mettre en œuvre des modes lumineux ou sombres dans CSS

Affinity Designer: Comment utiliser l'exportation Persona

Apprenez à animer pour les enfants

Tout ce que vous devez savoir sur le nouveau nœud.js 8

Simulez une transformation de coureur de fantôme

Top astuces pour la peinture des mains expressives

Catégories