Ne craignez pas le chrome sans tête! Apprenez pourquoi et comment l'utiliser pour tester Ember

Dernière mise à jour le 01/09/17, Ember CLI 2.15. Un merci spécial à Scott Newcomer et Ben Demboski de m'aider à déboguer, à Karl Becker pour l'édition et à Tobias Bieniek pour des astuces sur l'interface de ligne de commande!

Après quelques heures à déboguer ma suite de tests EmberJS qui refusait de s'exécuter en ligne de commande, j'ai abandonné PhantomJS et suis passé à Headless Chrome. Décrivons ce que tout cela signifie, comment je l’ai fait et quels en sont les impacts.

Qu'est-ce que Chrome sans tête?

Les développeurs Ember ont des options pour les navigateurs qu’ils utilisent pour exécuter leur suite de tests, et Headless Chrome en fait partie. Mais qu'est-ce que c'est? Le blog de Google dit:

C’est un moyen d’exécuter le navigateur Chrome dans un environnement sans tête. Essentiellement, utiliser Chrome sans chrome!
(Alt: Qu'est-ce que c'est, je ne le pense même pas.)

Droite. Voici une meilleure définition de Wikipedia:

Un navigateur sans tête est un navigateur Web sans interface utilisateur graphique. Les navigateurs sans tête fournissent un contrôle automatisé d'une page Web dans un environnement similaire aux navigateurs Web les plus courants, mais ils sont exécutés via une interface de ligne de commande ou à l'aide de la communication réseau.

Depuis Ember CLI 2.15, Chrome sans tête est la valeur par défaut pour les tests dans EmberJS. Si vous travaillez avec une ancienne application Ember, j'ai de bonnes nouvelles: vous n'avez pas besoin de la mettre à niveau pour essayer Chrome sans tête. En fait, vous pouvez utiliser la dernière version de la CLI avec presque toutes les versions antérieures de l'application Ember.

Pourquoi un environnement «sans tête» est-il nécessaire?

Tout comme un navigateur classique, un navigateur sans tête comprend HTML et CSS. Il peut exécuter JavaScript comme les requêtes AJAX. Pensez aux tests d'acceptation dans Ember. Si un test tente de cliquer sur un bouton masqué, vous ne devez pas cliquer dessus et le test doit échouer. Mais comment est-ce connu? Parce que le navigateur fait le gros du travail de combiner tout le HTML, CSS et JavaScript dans quelque chose d'utile. Et, comme il n'y a pas d'images à afficher, les tests sont plus rapides dans un environnement sans écran. Il existe de nombreux types de navigateurs sans tête. Chrome et PhantomJS ne sont que deux exemples.

Alors, pourquoi ne pas simplement exécuter les tests directement dans un navigateur Chrome normal? Si vous avez une application Ember, exécutez ember serve et visitez http: // localhost: 4200 / tests, vous pouvez réellement regarder vos tests s'exécuter en temps réel, ou les suspendre et consulter l'état de l'application de manière visuelle. Cependant, les navigateurs sans tête brillent vraiment quand ils sont utilisés pour les tests d'intégration continue, communément appelés CI. Dans les applications de production, il est courant d'utiliser un service qui exécute automatiquement votre suite de tests lorsque le code est validé. Et pour la plupart, ces tests sont exécutés sur un serveur et non dans des navigateurs «normaux». Par exemple, consultez les demandes de tirage ouvertes pour une partie du site Web Ember, en particulier pour celles avec un x rouge à côté. Chaque fois qu'une demande d'extraction est ouverte sur GitHub, vous pouvez voir si elle réussit les tests.

Ce n'est pas ma demande de traction. Je le jure. (Alt: image montrant plusieurs échecs de test sur une demande d'extraction GitHub)

Pourquoi ne pas utiliser PhantomJS?

PhantomJS est un autre exemple de navigateur sans tête. Le créer et le maintenir était une tâche herculéenne, et son succès est la raison pour laquelle nous avons de bonnes choses. Construire des applications est difficile… pouvez-vous imaginer construire un navigateur entier ??? Mais il semblerait que cela soit en voie de disparition. Un responsable de maintenance a démissionné en avril 2017 en ces termes:

Chrome sans tête arrive. Je pense que les gens finiront par y passer. Chrome est plus rapide et plus stable que PhantomJS. Et il ne mange pas la mémoire comme un fou. Je ne vois pas d’avenir dans le développement de PhantomJS.

Comme l'a noté le responsable, PhantomJS a quelques problèmes. J'avais un des miens: aucun de mes tests ne se déroulerait. Tout allait bien dans une nouvelle application, mais une partie inconnue de ma vraie application n’était pas compatible après l’introduction de dépendances bien établies. J'ai fait un test de braise, mais avant même que tout test ait commencé, j'ai été accueilli avec ces erreurs:

pas ok 1 PhantomJS 2.1 - Erreur globale: SyntaxError: Jeton inattendu ‘}’ sur http: // localhost: 7357 / assets / vendor.js, ligne 120177
pas ok 2 PhantomJS 2.1 - Erreur globale: Erreur: impossible de trouver le module ember-metal requis par: ember-testing / support à l'adresse http: // localhost: 7357 / assets / test-support.js, ligne 58
pas ok 3 PhantomJS 2.1 - Erreur globale: ReferenceError: impossible de trouver la variable: définissez à http: // localhost: 7357 / assets / ember-bio-bright.js, ligne 5
pas ok 4 PhantomJS 2.1 - Erreur globale: ReferenceError: impossible de trouver la variable: définir à http: // localhost: 7357 / assets / tests.js, ligne 3
pas ok 5 PhantomJS 2.1 - Erreur globale: ReferenceError: impossible de trouver la variable: EmberENV à l’adresse http: // localhost: 7357/4215 / tests / index.html? hidepassed, ligne 38

J'ai tout jeté à cette erreur. Faire exploser les modules de noeuds, supprimer tout le test, sauf le plus simple, réinstaller EmberCLI, installer / désinstaller PhantomJS, creuser dans la liasse des fournisseurs, partager des GIF pour chats en colère, allumer de l'encens… rien.

Après un peu de questions-réponses avec quelques autres développeurs, il m'a été suggéré d'essayer Headless Chrome pour voir si les erreurs devenaient plus faciles à déboguer.

Les erreurs ne sont pas devenues plus faciles à déboguer.

Les erreurs ont tout simplement disparu.

Comment faire le changement

Il existe un fichier dans les applications Ember appelé testem.js, dans lequel vous pouvez configurer les outils de test à utiliser lorsque vous tapez ember test ou ember test - - serveur. Voici un lien vers le contenu de testem.js que j'ai finalement utilisé, copié et collé à partir de l'article de Ryan Toronto. Vous pouvez voir le fichier de test livré avec EmberCLI à ce lien sur le GitHub d’EmberCLI.

Qu'est ce que Testem?

Testem est un programme d’exécution de tests, ce qui signifie qu’il charge et exécute les tests de votre application à l’aide de la configuration que vous avez spécifiée dans testem.js. Vous obtenez également une interface conviviale pour voir les résultats de vos tests à partir de la ligne de commande. J’ai été surpris d’apprendre que Testem n’est pas unique à Ember. Il fonctionne avec de nombreux frameworks JavaScript, outils de test (tels que QUnit, Mocha et Jasmine) et des environnements de navigateur.

Regarde ça? C'est Testem en action, résultant de `ember test - server`. Comme vous pouvez le constater, mon dernier travail sur ember-api-docs se passe à merveille. Tout ira bien et je sais vraiment ce que je fais. Ne pas. (Alt: fenêtre du terminal où le testeur présente 175 échecs de test)

Quels impacts négatifs Headless Chrome pourrait-il avoir?

Eh bien, d’une part, Headless Chrome n’est pas un logiciel open source comme PhantomJS. Les avantages et les inconvénients de cela pourraient être leur propre article.

C’est aussi nouveau. Il était livré avec Chrome 59, mais les développeurs avaient déjà utilisé ce moyen auparavant. La grande question est la suivante: si vous effectuez déjà un test de CI, dans quelle mesure votre fournisseur le prend-il en charge? La plupart des gros joueurs ont été rapides à l’appliquer, mais il est possible que vous rencontriez des problèmes.

Enfin, certains tests peuvent réussir dans PhantomJS et échouer dans Headless Chrome, ce qui signifie qu’il est temps de procéder à un débogage. Bien sûr, j'ai connu l'inverse, où tous mes problèmes sont disparus comme par magie lorsque j'ai changé de navigateur sans tête, mais les problèmes ne sont pas rares. C’est un point douloureux qui ressemble à de belles choses dans Chrome, mais qui explosent dans Firefox. Pour cette raison et pour rendre leurs tests plus robustes, certaines entreprises les utilisent dans plusieurs outils sans tête.

Quand changer

Si vous vous sentez coincé ou si vous voulez simplement savoir ce qu’il ya de mieux pour les tests Ember, essayez-le!

Bon test sans tête!

Illustration de IrenHorrors, partagée sous licence Creative Commons Attribution-Non Commercial-Pas de Modification 3.0