Auteur/autrice : admin@hightest

Vous avez un test fonctionnel automatisé en Java (Selenium ou autre), et vous souhaiteriez enregistrer dans un fichier CSV la durée de chacune de ses étapes. Cela peut être en effet très utile pour surveiller l’évolution des performances de l’applicatif à tester !

Pour comprendre à quoi cela pourrait nous servir, voici un cas d’usage.

Cas d’usage

Lundi, on lance le test automatisé chronométré. Le parcours d’inscription dure environ 40 secondes ; les durées de toutes les étapes sont enregistrées dans un rapport au format CSV. Le lendemain, un refacto du back a lieu. On relance le test, cette fois l’inscription dure 45 secondes. On observe le rapport CSV. On identifie l’étape où ça coince pour se concentrer dessus. On voit que le temps de réponse d’une API a augmenté de 7 secondes (mince !), et qu’un autre temps a diminué de 2 secondes (chouette !) Un correctif est livré, on relance le test. Le parcours dure maintenant 38 secondes. Ces résultats sont communiqués et l’équipe est congratulée. Tout est bien qui finit bien !

Qu’est-ce que ça change par rapport à d’habitude ?

On documente mieux les mauvaises nouvelles

« C’est plus lent qu’avant. » Voilà une phrase que tout le monde souhaite prendre au sérieux. Le problème est qu’elle est fort imprécise. Plus lent comment ? Il faut se baser sur les souvenirs d’une personne. Si elle est du genre à forcer le trait, on peut entrer dans de bien épineuses discussions. Et si on est plusieurs à s’y mettre… « Moi ça a toujours été lent, est-ce que c’est à cause de ma machine ? » Etc. Bref, on cherche à éviter au maximum ce genre d’inutiles échanges. D’autant que tout ça nous rappelle à quel point les exigences non-fonctionnelles ont été mises de côté, comme trop souvent…

Avec ce type de rapport, il va devenir très simple de porter un regard objectif sur la performance des applicatifs.

… mais aussi les bonnes !

Au détour d’une refonte, vous constaterez peut-être que certaines étapes durent moins longtemps qu’avant. Ce sera désormais plus simple de le prouver. Eh oui, en tant que QA, on peut aussi aussi remonter des effets de bord positifs ! Cela permet de donner le sourire à l’équipe et surtout de pouvoir capitaliser dessus.

Objection votre honneur !

« Ah oui certes, mais pourquoi ne pas utiliser un outil dédié à ce type de test, par exemple Gatling ? »

Loin de nous l’envie de réinventer la roue ! La solution que nous allons proposer a pour objectif de :

• S’intégrer à des tests existants en un rien de temps
• Répondre à un besoin d’enregistrement des performances très simplement
• Fournir un rapport frugal mais très clair
• S’intégrer à un parcours utilisateur en passant par le front

Nous vous invitons néanmoins à garder un point à l’esprit. La durée des étapes ne dépend pas seulement des performances de l’applicatif (et autres facteurs tels que son environnement technique, la connexion internet, etc.) ; elle dépend aussi de la vitesse d’exécution du webdriver, qui dépend en bonne partie de votre script lui-même !

Si jamais vous changez votre script de test, toutes vos métriques passées peuvent devenir obsolètes. Il est donc important de stabiliser vos tests, notamment en optimisant les temps d’attente des éléments de la page web, avant de vous lancer dans cette démarche.

Balance le code !

Ok, ok, le voici ! Copiez-collez-le sauvagement si ça vous chante. Et si vous voulez plus d’explications, rendez-vous après ce gros bloc de Java.

Le gros bloc de code que vous attendiez

import org.junit.Test;
import java.io.*;
import java.sql.Timestamp;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;

public class PerfTest {

    ArrayList<BaliseTemporelle> balisesTemporelles = new ArrayList<>();

    @Test
    public void exemplePourMontrer() throws InterruptedException {
        String nomScenario = "Création de compte";
        BaliseTemporelle init = new BaliseTemporelle("Initialisation de la première durée"); // Cette première balise temporelle n'apparaîtra pas dans le fichier.
        balisesTemporelles.add(init);
        Thread.sleep(2000); // Ici, mettre lesdites étapes de test. Pour une meilleure lisibilité, nous ne mettons que des temps de pause, qu'on pourra retrouver dans le fichier de rapport.
        BaliseTemporelle accesSite = new BaliseTemporelle("Ouverture du navigateur et accès à telle URL");
        balisesTemporelles.add(accesSite); // On ajoute l'étape une fois qu'elle est terminée
        Thread.sleep(4000);
        BaliseTemporelle affichageFormulaireInscription = new BaliseTemporelle("Affichage du formulaire d'inscription");
        balisesTemporelles.add(affichageFormulaireInscription);
        Thread.sleep(6000);
        BaliseTemporelle remplissageFormulaireInscription = new BaliseTemporelle("Remplissage");
        balisesTemporelles.add(remplissageFormulaireInscription);
        Thread.sleep(8000);
        BaliseTemporelle validationFormulaireInscription = new BaliseTemporelle("Validation du formulaire d'inscription");
        balisesTemporelles.add(validationFormulaireInscription);
        enregistrerDurees(nomScenario);
    }

    // Ce qui suit est un ensemble de fonctions que vous devrez, de préférence, ranger ailleurs.

    private class BaliseTemporelle {
        String nom;
        Timestamp timestamp;

        public BaliseTemporelle(String nom){
            this.nom = nom;
            timestamp = new Timestamp(System.currentTimeMillis());
        }

        public Timestamp getTimestamp(){
            return timestamp;
        }

        public String getNom(){
            return nom;
        }
    }

    private ArrayList<Long> getDureesEtapes(){
        Timestamp premier = balisesTemporelles.get(0).getTimestamp();
        ArrayList<Long> durees = new ArrayList<>();
        for (BaliseTemporelle baliseTemporelle : balisesTemporelles) {
            Timestamp deuxieme = baliseTemporelle.getTimestamp();
            if (premier != deuxieme) {
                long diffTimeSecondes = (deuxieme.getTime() - premier.getTime()) / 1000;
                durees.add(diffTimeSecondes);
                premier = deuxieme;
            }
        }
        return durees;
    }

    public void enregistrerDurees(String nomScenario) {
        ArrayList<Long> durees = getDureesEtapes();
        StringBuilder sbDurees = new StringBuilder();
        Long total = new Long(0);
        for (Long duree : durees) {
            total += duree;
            sbDurees.append(duree);
            sbDurees.append(";");
        }

        try {
            File file = new File("src\test\java\utils\" + nomScenario  + ".csv"); // A remplacer par le chemin de votre choix...
            boolean creerFichier = file.createNewFile();
            BufferedReader br = new BufferedReader(new FileReader(file));
            FileWriter fw = new FileWriter(file.getAbsolutePath(), true);
            BufferedWriter bw = new BufferedWriter(fw);
            if(creerFichier){
                StringBuilder sbNomEtapes = new StringBuilder();
                balisesTemporelles.remove(0); // On n'a pas besoin d'afficher le nom de la première étape vu que ce sont les durées qu'on affiche (diff entre étape n et étape n-1.
                for (BaliseTemporelle etape : balisesTemporelles) {
                    sbNomEtapes.append(etape.getNom());
                    sbNomEtapes.append(";");
                }
                bw.write("Date;" + sbNomEtapes.toString() + "Totaln");
            }
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd-hh-mm-ss");
            String date = sdf.format(new Date());
            bw.write(date + ";" + sbDurees.toString() + total + "n");
            br.close();
            bw.close();
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

}

Hé bien, c’était un gros bloc ! Mais rassurez-vous, c’est tout ce dont vous aurez besoin !

Quelques explications

Ce petit « cas de test » (vous l’aurez compris en lisant le code, il ne teste rien) va alimenter, à chaque exécution, un fichier nommé « Création de compte.csv ». Le nom de ce fichier dépend de la variable nomScenario.

Le contenu de ce fichier, ouvert dans Excel, ressemble à ça après deux lancements du test :

Date	Ouverture du navigateur et accès à telle URL	Affichage du formulaire d’inscription	Remplissage	Validation du formulaire d’inscription	Total
2020-07-30-01-37-15	2	4	6	8	20
2020-10-22-03-05-40	2	4	6	8	20

La durée qui s’affiche dans chacune des cellules est calculée en soustrayant l’horodatage d’une balise temporelle de la balise suivante (dans la fonction « enregistrerDurees »). Le nom de la première balise temporelle (voir la classe BaliseTemporelle) n’apparaît pas dans le tableau, car elle correspond au temps 0 du test.

Pas besoin de créer le fichier Excel à l’avance, le script gère tout seul la création et la modification. Assurez-vous simplement de supprimer le fichier Excel dès que vous souhaitez changer votre script, car les durées ne seront plus bonnes, et les noms des balises temporelles ne correspondront peut-être plus à celles d’avant. Vérifiez bien aussi que le chemin indiqué lors de l’initialisation de la variable « File » est valide, ou changez-le carrément.

C’est tout ce qu’il vous faut ! Bon chronométrage et n’hésitez pas à poser vos questions si vous en avez !

Développé depuis 2011 par Henix, une ESN française spécialisée dans la qualité logicielle, Squash TM est un outil de gestion des tests, ou test management, gratuit et open source. Très pratique, il permet à la fois de concevoir les tests, de les exécuter et de communiquer leurs résultats. Si vous souhaitez structurer ces activités et jeter à la poubelle vos antiques fichiers Excel, Squash TM est une solution intéressante à envisager !

Squash TM s’intègre dans une suite de logiciels conçus pour interagir ensemble, et qui constitue une véritable boîte à outils pour aider les testeurs dans leurs activités. Cette suite peut s’adapter à tout contexte métier ou technique, et peut accompagner la pratique de tests tant fonctionnels que non-fonctionnels. Dans cette suite, on compte également Squash TA (pour Test Automation) ou encore Squash CLI (pour Command Line Interface).

Nous utilisons Squash TM au quotidien auprès d’un grand nombre d’organisations qui l’ont intégré dans leur système d’information.

Cependant, même si cet outil est plutôt user-friendly, nous avons constaté qu’il n’était pas toujours utilisé à la hauteur de son potentiel. Voici donc aujourd’hui quelques astuces que nous avons adoptées au fil du temps et qui nous permettent d’augmenter drastiquement la performance des tests !

EDIT du 09/03/2022 : les captures d’écran visibles dans cet article ne reflètent pas la nouvelle interface de Squash TM. Toutefois, les astuces restent d’actualité ! Bonne lecture !

Astuce #1 : Les copier-coller, tu éviteras

Ça, c’est une méta-règle, à retenir avant toute chose. 

En programmation, le principe DRY (“Don’t Repeat Yourself”, en français “Ne vous répétez pas”) est un principe de développement logiciel qui consiste à éviter tout doublon dans un projet et ainsi améliorer le code, la lisibilité, la maintenance et le changement de celui-ci.

Eh bien, il est important aussi de l’appliquer aussi en gestion des tests afin de faciliter la maintenance du patrimoine de tests ! 

Les bonnes pratiques qui suivent vous aideront à respecter ce principe.

Astuce #2 : Des jeux de données, tu utiliseras

Pour éviter les redites, le moyen le plus efficace est d’utiliser la fonctionnalité des jeux de données de Squash TM. Trop de personnes passent à côté de cette jolie fonctionnalité qui pourtant est tellement efficace !

Des cas de test sans jeux de données

Imaginons une entreprise qui classe ses clients dans des segments aux noms poétiques. En fonction de son segment, chaque client a une page d’accueil personnalisée. Voici à quoi ressembleraient des tests rédigés sans utiliser la fonctionnalité des jeux de données :

On répète le nom de chaque segment 3 fois : dans le titre, dans l’action et dans le résultat attendu. Et les textes de l’action et du résultat attendu sont répété 6 fois, car il y a 6 segments. Super redondant ! Et maintenant, regroupons tout cela en un petit paquet bien rangé.

Un cas de test, plusieurs jeux de données

Vous voyez la syntaxe dollar/accolades ? Quand vous l’utilisez, l’onglet « Paramètres » du cas de test ajoute automatiquement le paramètre renseigné (ici, « segment »). Voyons à quoi ça ressemble, une fois qu’on a renseigné quelques valeurs possibles pour le paramètre « segment » :

Quand on ajoute dans une campagne ce cas de test comprenant 6 jeux de données, 6 « lignes » sont alors créées.

Attention à une chose toutefois : logiquement, vos 6 jeux de données auront tous la même importance (la métadonnée associée au cas de test lui-même). Si vous avez des degrés d’importance différents, il vaut mieux avoir autant de cas de test. Par exemple, si « Grenat » est un segment qui n’est plus utilisé que par une poignée de clients, qui représentent ceux qui sont en retard de paiement depuis plus de deux ans… on peut certainement considérer que l’importance du test est moindre.

Astuce #3 : Tes jeux de données, clairement tu nommeras

Quand vous créez un jeu de données, vous devez lui ajouter un titre, qui s’affichera dans la colonne « Jeux de données » (voir copie d’écran ci-dessus). Ne négligez pas cette étape. Au fil du temps en effet, vous n’aurez sans doute plus besoin d’exécuter vos cas de test en ouvrant la popup d’exécution et en lisant attentivement chacune des étapes. Il vous suffira de lire le nom de vos cas de test et celui de vos jeux de données. C’est pour cas que vous devez bannir les titres cryptiques tels que « JDD1 » et nommer vos jeux de données le plus précisément possible.

Astuce #4 : Tes cas de test, clairement tu nommeras aussi

Le nom d’un cas de test doit être descriptif et transmettre les informations nécessaires pour savoir ce qui est réellement testé. Il doit également être concis, afin d’être facile à comprendre. L’écriture d’un mauvais nom de scénario de test peut vous nuire de plusieurs façons :

• Il peut réduire la qualité de l’exécution des tests, car les testeurs ne comprennent pas correctement l’enjeu et testent finalement autre chose
• Il peut ralentir l’exécution des tests, car les testeurs ont besoin de se concentrer davantage pour comprendre la finalité du test
• Il peut rendre plus difficile la maintenance du référentiel de tests, pour les mêmes raisons

Voici quelques exemples de mauvais noms de cas de test :

• Page de connexion
• Mail de relance
• Liste des utilisateurs
• Graphique de suivi

Pourquoi ce sont de « mauvais noms » ? Parce qu’ils parlent de fonctionnalités, mais pas de comportements attendus. Un cas de test est un scénario que l’on exécute en attendant un résultat, et le nom du cas de test doit donner une idée de ce résultat attendu… Ce faisant, cela permet de comprendre rapidement l’importance et l’enjeu de ce cas de test.

En effet, un test nommé « Page de connexion » peut recouvrir des enjeux très importants ou tout à fait mineurs. Voici, pour la liste précédente, quelques exemples de reformulation pour des cas de test d’importance très haute !

• Affichage de la page de connexion par défaut lorsque l’utilisateur n’est pas connecté
• Réception du mail de relance suite à une relance en masse
• Affichage de tous les utilisateurs au sein d’une liste
• Cohérence du graphique de suivi dans le temps

Et maintenant, voici quelques exemples de cas de test d’importance faible :

• Présence d’un tooltip au survol du champ « Enregistrer le mot de passe » sur la page de connexion
• Changement de couleur au survol du bouton de connexion présent dans le mail de relance
• Possibilité de saisir manuellement le nombre d’éléments affichés par page dans la liste des utilisateurs
• Conformité du code couleur du graphique de suivi

Le nom de certains cas de test vous semble un peu longuet ? C’est possible ! Mais c’est toujours plus pratique que d’avoir à ouvrir le cas de test et de fouiner dans ses étapes. Un exemple ci-dessous !

Astuce #5 : Tes cas de test, brièvement tu écriras

À l’inverse du nom du cas de test…

La meilleure façon d’écrire vos scénarios de test est d’avoir des étapes fort brièvement décrites, et d’aller à l’essentiel. Restez concis.

Cela vous aidera à aller droit au but, ce qui vous permettra de détecter plus facilement les anomalies.

Bousillons calmement une idée reçue

Vous l’avez sûrement déjà lu des milliers de fois : les cas de test sont une forme de documentation. Pour autant, ils ne visent pas :

• à décrire de manière exhaustive tout ce qui est attendu de l’application
• à se substituer à une formation !

« Il faut que les cas de test puissent être exécutés par n’importe qui. » Quand vous entendez cette phrase, vous êtes donc en droit de frémir.

Vous utilisez Squash TM dans une organisation fermée ; ses collaborateurs ne sont pas « n’importe qui ». Une nouvelle recrue n’est pas non plus n’importe qui. Si elle est amenée à tester un applicatif, il est essentiel de lui expliquer la raison d’être de cet applicatif, comment il fonctionne, ce qu’il est important de tester, ce qu’on aimerait savoir à la fin d’une campagne de test. L’étape d’acclimatation fonctionnelle passe à la trappe ? Dans ce cas, ce n’est pas un profil de testeur que l’on intègre dans l’équipe, c’est un profil d’automate, et on se prive d’un précieux cerveau.

Quand on passe une heure à écrire un cas de test en entrant dans les moindres détails, c’est une heure entière que l’on passe à ne pas tester l’application. Et par la suite les testeurs nécessiteront… combien ? Cinq minutes de lecture ? Dix ? Autant de temps qui ne sera pas utilement consacré, et qui sera multiplié d’itération en itération.

Pire peut-être, si le cas de test est trop long, les testeurs fatigueront plus vite, les liront en diagonale, et passeront peut-être à côté de vérifications essentielles.

À vous donc de trouver l’équilibre parfait entre clarté et concision.

Astuce #6 : Des appels de cas de test, intelligemment tu feras

Combinée à l’utilisation des jeux de données, cette fonctionnalité vous fera faire des merveilles. Pour appeler un cas de test dans un autre, c’est-à-dire de l’ajouter comme une étape, il suffit de faire un glisser-déposer du cas de test depuis l’arborescence.

Pour reprendre l’exemple précédent : dès lors qu’un cas de test nécessitera une connexion, nous pourrons appeler le cas de test « Connexion client en fonction de son segment ». Dans l’exemple ci-dessous, nous reprenons un jeu de données renseigné précédemment, mais nous aurions pu aussi le configurer directement dans le cas de test (option « paramètres délégués »).

Un cas de test peut en appeler un autre qui en appelle un autre qui en appelle un autre… aucune contrainte à signaler à ce sujet. Il est également possible d’appeler plusieurs cas de test au sein d’un seul.

Désormais, il y a beaucoup moins de raisons de se répéter !

Cas pratique : une gestion mutualisée des jeux de données

Avez-vous remarqué que sur la page « Informations » d’un cas de test Squash TM, il est possible de renseigner un champ dédié aux prérequis ? Malheureusement, il n’est pas possible de mutualiser ces informations entre plusieurs cas de test ayant besoin des mêmes prérequis.

Nous avons donc parfois recours à un mode de fonctionnement qui nous a permis d’économiser pas mal de temps : au lieu de remplir ce champ de prérequis (avec le risque d’avoir à maintenir X fois ce champ en cas de changement), nous créons un dossier de cas de test « utilitaires » à appeler à volonté en première étape des cas de test en guise de prérequis.

Il arrive que les jeux de données de certains cas de test soient le résultat d’une requête SQL à lancer au préalable ; c’est donc bien plus pratique de n’avoir à modifier ce script SQL qu’à un seul endroit.

C’est là que la zone « Cas de test appelé par » s’avère très utile ! Dès qu’il faudra changer la requête, il sera possible d’effectuer une revue des impacts possibles, et de s’assurer que la nouvelle requête convient bien à tous les cas de test concernés.

Astuce #7 : Tes cas de test, tu qualifieras

Quand on crée un cas de test sur Squash TM, son champ « Importance » est par défaut alimenté avec la valeur « Faible ».

Si vous ne savez pas quels cas de test sont cruciaux, vous risquez de vous retrouver en difficulté au moment de la conception de votre campagne de test.

Avec Squash TM, il est facile de garder la trace des cas de test les plus importants et de ceux que vous pouvez déprioriser. Faites en sorte que vos cas de test reflètent ce qui est vraiment vital – et ce qui ne l’est pas.

Cela doit devenir un réflexe : ajustez l’importance du cas de test dès sa création !

Astuce #8 : Des périphrases, tu utiliseras

Un dernier coup de pouce pour la rédaction. Si votre interface contient du texte et que ce texte n’est pas l’objet du test, il est inutile de l’indiquer directement dans les étapes du cas de test, sous peine d’occasionner des rapports d’anomalie à faible valeur ajoutée.

Le bouton de validation d’une pop-in peut être amené à changer au fil du temps : il peut en particulier changer d’intitulé (« Ok », « Valider », « Je comprends », « Oui », « D’accord », « Certes », « Pourquoi pas » ou « Tout me va »). Si cela se produit, vous n’avez pas envie d’avoir à mettre à jour une longue liste de tests. Il est donc plus pratique de désigner ce bouton comme « le bouton de validation » (donc, en utilisant une périphrase), plutôt que « le bouton ’Ok’ » ou « le bouton ‘Valider’ ».

Idem pour les messages d’erreur ! « Le message d’erreur indiquant à l’utilisateur que son mot de passe est erroné » est plus robuste que « le message ‘Mot de passe erroné’ », qui pourrait devenir « le message ‘Votre mot de passe est incorrect, merci de le saisir de nouveau’ ».

Conclusion

Quelle que soit votre utilisation de Squash TM, n’oubliez pas que l’objectif est de refléter vos objectifs qualité de la meilleure façon, pour obtenir des référentiels de test pertinents et efficaces. Concentrez-vous donc sur l’optimisation à chaque étape du processus et ce que vous construirez offrira à vos clients ou équipes la meilleure valeur ajoutée possible.

Ces bonnes pratiques ont pour but de vous aider à être plus efficace en travaillant avec ; n’hésitez pas à compléter avec vos propres astuces !

« Selenium c’est terminé, maintenant c’est Cypress ! »

Voilà une terrifiante affirmation quand on utilise Selenium au quotidien et qu’on adore ça ! Mais rien ne sert de se recroqueviller dans ses douillettes habitudes, retroussons nos manches et partons à l’assaut de cette étoile montante, dont on entend si souvent parler.

Cet article s’appuie sur :

• Des questions que nous nous sommes posées avant et pendant notre exploration de cet outil
• Le tutoriel Cypress de l’excellente Test Automation University
• L’hypothèse que si on peut faire une chose avec Selenium, on aura envie de faire la même chose avec Cypress
• L’espoir inavouable de mettre Cypress en défaut… mais à la loyale !

Mais pour commencer, posons les grosses questions qui fâchent !

Cypress est-il payant ?

Etudions cette question en premier car c’est un point crucial pour certaines équipes !

Pour répondre à cette question, il va falloir faire la différence entre 2 produits : l’exécuteur de tests (Test Runner) et le service de reporting associé (Dashboard service). Le premier est totalement gratuit et open-source. Le second est facultatif, et payant à partir de 500 exécutions de tests par mois. En plus des tableaux de bord, il permet de gérer la parallélisation des tests, facilite la mise en place de l’intégration continue (qui reste possible même sans), s’intègre avec Slack, injecte du feedback dans Github… Bref, un super assistant, mais dont on peut se passer s’il le faut.

Quels langages supporte Cypress ?

Le JavaScript, et c’est tout. Vous avez l’habitude de tel ou tel autre langage avec Selenium ? Tant pis, vous apprendrez, ce serait dommage que ce détail vous empêche d’aller plus loin ! D’autant que Cypress offre un DSL (Domain Specific Language) particulièrement fourni. On y reviendra.

Quels navigateurs supporte Cypress ?

Au départ, seul Google Chrome était pris en charge, mais cela a bien changé. A partir de Cypress 4.0, il est possible désormais d’interagir avec Firefox et Edge, et de manière générale cette problématique est inscrite dans la roadmap de Cypress. Restez en veille !

Quid de la documentation et de la communauté Cypress ?

Côté documentation, le site de Cypress est plutôt généreux. Et sa communauté StackOverflow n’est pas en reste, avec plus de 6700 questions sur le sujet. Ce n’est rien comparé à Selenium (bientôt 78 000 questions), mais c’est tout de même un bon signe, surtout si on tient compte de la relative nouveauté de l’outil.

La communauté Cypress est par ailleurs assez active sur Github, et il existe par exemple des initiatives open-source de nature et d’ampleurs assez diverses visant à combler les manques de Cypress. Un exemple ? Cet utilitaire qui permet d’interagir avec la touche de tabulation !

La liste des plugins Cypress (développés ou non par Cypress) est visible ici.

Poursuivons maintenant avec des questions sur le fonctionnement de l’outil.

Cypress, c’est encore une surcouche de Selenium ?

Hé non ! Selenium communique avec le navigateur, alors que Cypress tourne directement dans le navigateur. Voyez le script Cypress confortablement assis dans le code HTML de la page d’accueil de Testeum !

Cela peut d’ailleurs occasionner des comportements inattendus, par exemple des protestations de votre antivirus qui s’emmêle les pinceaux dans les certificats (Kaspersky par exemple ; avec Avast nous n’avons pas rencontré de problème).

Sur quel framework s’appuie Cypress ?

Cypress s’appuie sur le framework de test Mocha (prononcer « moka »), d’où il tire notamment la syntaxe « describe » / « it ». Vous avez peut-être déjà croisé ce framework en JavaScript au détour d’un projet Protractor !

L’identification des objets est-elle similaire à celle à l’œuvre dans Selenium ?

Par défaut, seuls les sélecteurs CSS sont gérés. Heureusement, il existe une librairie permettant d’utiliser les xPaths, qui sont tout de même bien pratiques dans certains cas.

Comment configure-t-on l’environnement de test et ses paramètres ?

Ça se passe dans le fichier qui permet d’indiquer tous les paramètres, à savoir le fichier cypress.json. Là, on indique par exemple la taille souhaitée de la fenêtre de navigateur, les différents time-out, éventuellement une URL de base qui servira de préfixe à chaque appel de page web. Tous ces paramètres sont listés ici.

Peut-on mettre en œuvre le design pattern du Page Object Model avec Cypress ?

Le bon vieux Page Object Model, qu’on retrouve si souvent dans les (bons ?) projets de tests Selenium, permet entre autres de ne déclarer qu’une seule fois tous les éléments d’une page, et d’ainsi réduire son temps de maintenance. Qu’en est-il avec Cypress ?

C’est possible

Le tutoriel de la Test Automation University, tout comme cet article, expliquent comment mettre en œuvre ce design pattern. Si vous venez du monde de Selenium, le dépaysement sera donc minimal si vous souhaitez poursuivre avec cette pratique.

Cypress propose autre chose

Au sujet du Page Object Model, le blog Cypress met en revanche les pieds dans le plat et conseille d’abandonner cette pratique, considérée trop risquée et coûteuse en maintenance (on peut être d’accord ou non !). Ce qui est proposé, c’est de passer directement par les actions de l’application pour la mettre dans l’état qu’on souhaite avant d’opérer la vérification.

Mettons par exemple que l’on souhaite valider la réponse d’un formulaire. Un script de test classique effectuerait d’abord les actions permettant de remplir le formulaire, en « mimant » les actions de l’utilisateur.

Comme Cypress injecte du code JavaScript directement dans le navigateur, une autre possibilité serait de modifier directement le DOM pour que le formulaire soit déjà pré-rempli. L’article donne un exemple intéressant, qui démontre la robustesse et la rapidité de cette méthode. Celle-ci suppose cependant un niveau plus élevé en développement JavaScript. N’oublions pas que Cypress a été développé originellement par des devs front-end pour des devs front-end !

Mais au fait, pourquoi ça s’appelle Cypress ?

Les feuilles du cyprès sont vertes toute l’année et ne tombent jamais. C’est ce que souhaitent à nos tests les créateurs de Cypress !

Maintenant que nous avons fait le tour des questions de base autour de Cypress, pesons maintenant les pours et les contres !

Qu’est-ce qui est indiscutablement mieux que Selenium ?

Son interface de lancement interactif

Cette fonctionnalité est plutôt sympathique, on se croirait dans un cockpit (avec moins de boutons). Il est possible de générer le code de capture d’un objet en cliquant simplement dessus.

 

Au lancement des tests, toutes les requêtes effectuées sont affichées dans un panneau à gauche de l’écran. Un code couleur permet d’identifier d’un coup d’œil les différents statuts des requêtes. Une fois les tests terminés, ce panneau permet de « remonter le temps » ; on clique sur une des étapes, et l’écran affiché au milieu revient dans l’état spécifié.

Il est bien sûr possible de lancer les tests sans ouvrir cette fenêtre interactive, avec la commande « npx cypress run ». Les tests se jouent alors en mode headless.

En fait, c’est comme si Cypress avait voulu prendre le meilleur de Selenium Webdriver et Selenium IDE (oui, car Selenium IDE a des atouts, et si vous pensez que non c’est que vous n’avez peut-être pas appris ce qui lui est arrivé ces dernières années !).

Sa gestion du temps

Vitesse d’exécution

Cypress est réputé notamment pour sa rapidité, et d’après nos quelques essais, cela semble mérité !

Attente des éléments

Le fait que l’outil gère tout seul l’attente des différents éléments de l’interface est extrêmement confortable.

Voyage dans le passé

Le fait de pouvoir « rembobiner » le test dans l’interface de lancement interactif est aussi très pratique. On peut ainsi savoir exactement à quel moment a eu lieu l’erreur, et se rejouer ce moment à volonté, en ayant en plus accès à l’inspecteur du navigateur !

Ses captures vidéo

Certes, avec Selenium il est possible de se débrouiller pour prendre des screenshots et des captures vidéo, de les stocker où on veut, etc. Ce que Cypress apporte nativement, c’est des enregistrements de vidéos de tous les tests joués, qui sont enregistrés dans un dossier dédié (avec la commande « npx cypress run »). Les vidéos sont nommées à partir du titre des scripts de test, bien clairement. Le dossier des vidéos est par défaut purgé à chaque lancement, mais il est possible de paramétrer cela (toutes les infos ici).

Et ce qui est vraiment sympa, c’est que les vidéos montrent le même panneau d’exécution que dans la fenêtre interactive. On reste dans le cockpit en toutes situations !

Cypress offre quelques possibilités de configuration de cette fonctionnalité.

Ses screenshots

En cas d’échec, un screenshot est aussi automatiquement pris (toujours avec la commande « npx cypress run ») et stocké dans un dossier dédié. Les paramètres de configuration sont listés ici.

De même que pour les vidéos, on voit à la fois l’écran du système à tester et l’interface de lancement, ce qui permet de visualiser quelle erreur a été détectée.

Sur l’exemple ci-dessous, le jeu de données du test génère un faux positif : on attend une page d’accueil avec un H1, mais on reste sur la page de connexion.

Son DSL

Le DSL de Cypress s’appuie sur Chai, qui est particulièrement bien fourni. Nul besoin de créer ses propres fonctions pour vérifier le texte d’un élément, la valeur d’un de ses attributs, la longueur d’une liste d’éléments, et bien d’autres choses encore. Dépendamment de l’IDE utilisé, l’autocomplétion rend la tâche particulièrement réjouissante. Ceci étant dit, n’oublions pas qu’il est aussi possible d’intégrer Chai à Selenium (au parfum JavaScript) et de profiter de ses fonctionnalités.

Cypress ajoute cependant certaines commodités : la syntaxe {enter} (qui permet de simuler un appui sur la touche « Entrée »), {pageup}, {selectall}… Tout est listé ici. Par exemple, on pourrait valider un formulaire aussi simplement que ça : cy.get(‘#input-password).type(« un password incorrect{enter} »);

A l’inverse, quels sont les défauts de Cypress ?

« Il n’y a ni défauts ni qualités, seulement des caractéristiques. » -Un vieux sage

Cypress a une page dédiée à ses limitations, qui sont plutôt présentées comme des choix fonctionnels assumés (on ne peut pas tout faire !) Les voici donc en bon français.

Son périmètre réduit

Ce n’est pas forcément un défaut mais c’est bien d’avoir ça en tête. Cypress n’est pas un outil d’automatisation généraliste. Il se distingue en cela de Selenium, dont la phrase d’introduction est « Selenium automate browsers. That’s it! What you do with that power is entirely up to you. »

Celle de Cypress est plus ciblée : « Cypress can test anything that runs in a browser. »

Sa dépendance au navigateur

Les commandes Cypress tournent dans le navigateur. Cela implique que les contraintes liées au navigateurs doivent être prises en compte en plus des contraintes liées à Cypress même. Notamment, cela complique (un peu) les interactions avec le back-end et les bases de données, mais cela reste tout de même possible.

Sa politique « 1 test = 1 navigateur, 1 onglet, 1 domaine et 1 port »

Cypress ne prévoit pas de gérer plusieurs onglets de navigateurs au sein d’un test, ni de permettre d’utiliser plusieurs navigateurs au sein d’un même test, ni d’interagir avec plus d’un domaine au sein d’un même test, ni plus d’un port de cette adresse. Cela peut être problématique pour jouer certains tests de bout en bout. Noter toutefois qu’il est possible d’interagir avec des sous-domaines différents d’un même nom de domaine.

Sa gestion des iframes

A l’heure actuelle, la gestion des iframes n’est pas simple. Ça peut être un peu embêtant (dans le cas d’un champ de texte riche, comme CKEditor), ou carrément critique (si l’interface de l’application se présente comme une série d’iframes en poupées russes).

C’est donc un point à bien avoir en tête avant de se lancer. En revanche, ne baissons pas les bras, d’autres se sont penchés sur le problème avant nous et ont trouvé des moyens de contournement.

Alors, verdict ?

L’envie était grande de crier à l’effet de mode et d’écrire une nouvelle ode à notre très cher Selenium. Mais face à tant de belles fonctionnalités, il est drôlement tentant de vouloir aller plus loin. Certes, cet article témoigne d’un début d’exploration, il y a sans doute de vilaines embûches que nous n’avons pas encore rencontrées. Quoi qu’il en soit, longue vie à Cypress et bon courage à tous les automaticien.ne.s qui nous lisent, que vous soyez gaga de Selenium, de Cypress, ou des deux !

Bonus : un mot des diplômés de la Wild Code School

Cypress est un outil enseigné à la Wild Code School au sein de la formation des QA. Comme l’indique Mimoun Kissi, responsable pédagogique de cette formation, « Cypress occupera une grande place dans le monde de l’automatisation. Sa facilité d’installation est un élément essentiel pour être utilisé par des profils juniors ou avec des compétences de bases en programmation. » Nous avons rencontré 3 diplômés de la promotion 2020 afin qu’ils nous donnent leur point de vue sur cet outil : Devillers Poaty-Meaty, Soufiane Hannane et Boussad Ouaked.

Selenium VS Cypress

A choisir entre Selenium et Cypress, les trois testeurs interrogés sont unanimes ; Cypress les a séduits par sa simplicité d’installation et de configuration. Devillers Poaty-Meaty explique : « Avec quelques lignes de commandes, je peux lancer mon projet et je peux en plus effectuer des tests d’API et charger les données de test à partir d’une source. »

S’il fallait changer quelque chose à Cypress

Soufiane Hannane rappelle que Cypress supporte simplement le JavaScript, et que cela pourrait pénaliser une personne plutôt habituée à d’autres langages. Il souligne également le fait que Cypress ne soit pas encore compatible avec Internet Explorer et Safari.

Les challenges liés à Cypress

Les trois testeurs mentionnent des challenges liés à la nature même de Cypress, qui n’est pas un outil codeless. Bien qu’il soit simple d’installation et de configuration, et qu’il permette nativement d’éviter un certain nombre de faux positifs, il nécessite un temps de prise en main, en particulier pour concevoir un projet maintenable et scalable (et c’est important…).

Ce temps d’apprentissage est indispensable aussi bien pour des profils débutant en JavaScript, que par exemple pour Boussad Ouaked, qui avait déjà réalisé des projets de développement en utilisant ce langage.

Merci à eux pour ces témoignages !

_____________________________________________

L’automatisation des tests vous intéresse, vous intrigue ou vous passionne ? Ce récap est là pour vous fournir une vue d’ensemble sur ce sujet.

La semaine dernière, nous présentions Promyze (anciennement Themis), une plateforme collaborative agile et ludique permettant d’améliorer en équipe la qualité de code. Nous nous sommes penchés en particulier sur les Ateliers Craft, qui permettent aux équipes de développement d’échanger efficacement sur les bonnes et les mauvaises pratiques au sein de leurs applicatifs. Cette semaine, Promyze répond à quelques-unes de nos questions au sujet des Ateliers Craft.

Les Ateliers Craft au quotidien : quelle temporalité ?

H : Que conseillez-vous pour intégrer la routine des Ateliers Craft dans le quotidien des développeurs ? En Scrum par exemple, quels moments du sprint privilégier ?

P : La temporalité des ateliers va dépendre des cas d’utilisation. Le scénario qui revient régulièrement est celui d’une équipe qui organise des ateliers à chaque sprint, donc soit 1 fois par semaine ou toutes les 2 semaines. Les fins de sprint sont un bon moment pour organiser une rétrospective collective, prendre du recul sur les développements réalisés et échanger sur les pratiques. Ainsi, cela laisse plusieurs jours aux équipes avant la rétrospective pour trouver 10 minutes afin de déposer des tags et suggérer des bonnes pratiques. Les ateliers s’intègrent très bien dans une démarche agile, puisqu’on retrouve l’idée d’interactions collectives et fréquentes et d’amélioration continue. Surtout, cela ritualise un temps d’échange sur le sujet de la qualité de code.

Qui inviter aux Ateliers Craft ?

H : Une entreprise a 3 applications : A, B et C. Son équipe X travaille sur A et B, et son équipe Y travaille sur B et C. Conseillez-vous de laisser chaque équipe se mêler de la qualité de code de ses propres applicatifs seulement ? Ou au contraire conseillez-vous de laisser les ateliers ouverts à tous ?

P : Difficile de généraliser une réponse pour chaque contexte, mais pour les premiers ateliers je préconiserais que chaque équipe travaille sur son propre code, afin de s’approprier le fonctionnement des ateliers et expérimente quelques rétrospectives. Dans un second temps, inviter des personnes externes est une piste intéressante car la richesse des ateliers provient des interactions et des échanges que vont avoir les personnes qui y participent. L’objectif n’est pas de dire “Faites comme ça !”, mais plutôt “Que pensez-vous d’utiliser plutôt cette façon de faire ?”.

Si ces « invités » travaillent sur les mêmes langages et technologies, avoir un regard extérieur est selon moi toujours bénéfique, car non engageant. En effet, l’équipe d’un projet aura toujours le dernier mot, donc il ne s’agit pas d’imposer, mais de suggérer. Le contexte du projet est vraiment primordial, il est donc important que parmi les participants il y ait des membres du projet.

En revanche, nous ne conseillerons pas que l’équipe X organise seule un atelier sur le code du projet C, car elle ne connaît probablement pas le contexte. Par contre, avoir un atelier commun sur le code du projet B avec les équipes X et Y peut être intéressant !

Même si chaque contexte a ses propres règles et bonnes pratiques, c’est important selon nous qu’une organisation définisse un socle commun de bonnes pratiques, que chaque projet viendra enrichir. De plus en plus d’entreprises structurent des “communautés de pratiques” qui vont dans ce sens. Même dans une structure à taille humaine comme chez Promyze, nous nous efforçons d’uniformiser les pratiques sur nos différents projets. Quand une personne change d’équipe, elle a déjà ainsi des repères pour facilement rentrer dans le code !

De la revue à la correction

H : Corriger une mauvaise pratique immédiatement pendant la revue de code est le meilleur moyen de ne pas la laisser tomber aux oubliettes. C’est facile quand la revue se déroule en présentiel, au poste du développeur, mais là ce n’est pas le cas. Comment conseillez-vous de procéder à la correction des mauvaises pratiques identifiées pendant les Ateliers Craft ?

P : Très bonne question qui revient souvent ! Sur ce point, nous sommes d’ailleurs en train de finaliser une fonctionnalité dans Themis qui permettra, lorsqu’on identifie qu’une bonne pratique n’a pas été suivie, de proposer une correction (ex : un refactoring). Cela permettra d’enrichir la documentation de la bonne pratique, et d’échanger avec l’équipe pour savoir si on valide ou non la suggestion de correction. Pour en revenir à la question, nous prônons une démarche d’amélioration continue du code, donc si nous avons identifié des mauvaises pratiques dans l’atelier, le premier objectif sera d’essayer de ne plus l’appliquer sur les prochains développements. Par la suite, si l’on travaille sur du code existant, et qu’on identifie une mauvaise pratique, alors à ce moment-là il peut s’avérer judicieux de le retravailler pour qu’il respecte la bonne pratique définie dans l’atelier. Il faudra évidemment veiller aux risques de régressions, donc coupler les tests et les développements est fondamental. Enfin, la correction à apporter va dépendre du niveau de criticité : s’il y a potentiellement un bug derrière une mauvaise pratique, on sera forcément plus réactif dans le passage à l’action !

Comment organiser les ateliers ?

H : Il est possible de créer des ateliers à volonté. Comment les organiser ? Est-il conseillé par exemple de tenir des ateliers thématiques ? Comment savoir quand un atelier est terminé ?

P : Nous préconisons d’organiser des ateliers thématiques (ex : HTML/CSS, NodeJS, Spring, …), au sein desquels plusieurs sessions pourront être organisées. Il n’y a qu’une seule session en cours par atelier, donc cela facilite l’organisation. Plusieurs ateliers peuvent être créés en parallèle, mais généralement un seul sera actif chaque semaine par équipe. Pour chaque session, une personne dans l’équipe est désignée comme animateur, et aura pour mission de définir le code source sur lequel travailler, d’envoyer des rappels aux participants et enfin d’organiser la rétrospective. Nous préconisons qu’à chaque démarrage de session, la rétrospective soit notée dans l’agenda de l’équipe, cela permet à chacun et chacune de s’organiser ! Enfin, avoir une rotation dans les thématiques permet de rythmer les échanges et d’apporter de la diversité, mais aussi de revenir quelques semaines plus tard sur une thématique avec un regard qui aura peut être évolué.

Enfin, nous préconisons aussi de préparer le prochain atelier dès la fin de la rétrospective, en désignant qui sera la personne en charge de l’organisation et à quelle date on peut planifier la future rétrospective.

Les guégerres de bonnes pratiques

H : Il y a parfois des querelles autour des bonnes pratiques. Typiquement, il n’est pas rarissime de voir deux devs seniors, tous deux excellents, se crêper le chignon sur telle pratique, que X qualifiera de bonne et Y d’antipattern. Comment les Ateliers Craft permettent-ils de sortir de ces impasses ?

P : Effectivement cela peut arriver que, sur le moment, des personnes ne soient pas d’accord sur une bonne pratique. C’est déjà quelque chose de positif, ça montre qu’il y a de la matière pour échanger des arguments et arriver à un consensus ! Mais pour rebondir sur la question précédente, il est important d’avoir une personne qui soit “facilitateur” lors d’une rétrospective, anime les échanges, invite les participants à s’exprimer, … Cette personne doit être en mesure de sentir si un consensus va rapidement être trouvé lors de la rétrospective ou non, et si ce n’est pas le cas, la pratique qui fait débat est temporairement mise de côté, pour laisser le temps à l’équipe d’y réfléchir et d’exposer des arguments. Ce n’est pas évident de trancher à chaud sur des sujets pointus ! Themis proposera d’ailleurs très bientôt une fonctionnalité dans ce sens, un mode “battle” avec un système de vote qui offrira la possibilité d’apporter des arguments “pour” ou “contre”.

Themis vu de l’intérieur

H : Ca va être énorme ! Et chez Promyze, comment utilisez-vous les Ateliers Craft ?

P : Nous utilisons les ateliers une fois par semaine en organisant la rétrospective le vendredi après-midi. C’est une bonne opportunité pour tous et toutes de se retrouver pour parler de qualité de code et terminer la semaine ensemble. Notre objectif est de ne pas dépasser 1 heure, c’est important de borner les échanges. En pratique, nous conseillons à nos utilisateurs de viser 30 à 45 minutes.

Au début, nous avons forcément été les premiers testeurs de cette fonctionnalité, donc plusieurs formats ont été expérimentés (notamment sur le nombre de fichiers, de tags que l’on pouvait poser, …). Cela nous a aidés à optimiser l’utilisation des ateliers et d’en faire profiter nos clients.

Nous définissons la thématique de chaque session d’atelier, et désignons une personne pour animer la future rétrospective de cette session. Nous mettons en place une rotation dans la thématique des ateliers (HTML/CSS, NodeJS, Tests unitaires, …). C’est très positif jusqu’à présent, en plus nous avons dans notre équipe des profils avec des parcours différents, cela amène de la richesse dans nos échanges !

Merci à Promyze d’avoir répondu à nos questions sur Themis. Longue vie à cet outil qui apporte énormément au processus d’amélioration continue !

Si les logiciels étaient des personnages de la mythologie grecque, SonarQube serait sans doute Cassandre. De même que cette princesse troyenne ne trouvait jamais d’oreille attentive à ses prophéties, il existe des instances SonarQube qui besognent vaillamment sur des serveurs oubliés, sans que les innombrables défauts qu’ils identifient ne soient jamais étudiés.

Bonne nouvelle, des solutions existent ! Et Promyze (anciennement Themis), outil phare de la société du même nom, offre bon nombre de fonctionnalités permettant d’animer de manière agile et collaborative ce sujet glissant qu’est la qualité de code. Dans cet article, nous parlerons en particulier du tout nouveau module de l’applicatif, les Ateliers Craft. Un module qui a été testé par Testeum, mais c’est une autre histoire !

Les Ateliers Craft, comment ça marche ?

Les Ateliers Craft se présentent un peu comme des salles de travail numériques dans lesquelles on peut entrer et sortir à sa guise. La collaboration s’y déroule de manière asynchrone, selon une fréquence déterminée (mensuelle ou hebdomadaire).

Que se passe-t-il dans ces ateliers ? Quelques fichiers, par défaut les 5 ayant été les plus modifiés récemment, sont posés sur la table. Chaque participant effectue une revue de ces fichiers, et met en exergue les passages qu’il trouve les plus exemplaires, ou au contraire les plus risqués. Pour ce faire, par un système de drag’n’drop, on associe les bouts de code à des étiquettes correspondant à des bonnes pratiques.

A la fin de la session, un bilan de l’atelier est dressé. Les extraits sélectionnés par les participants peuvent être conservés afin d’illustrer les bonnes pratiques de manière pérenne.

Comment sont déterminées les bonnes pratiques ?

Quelques bonnes pratiques généralistes et consensuelles sont proposées par défaut par Promyze. Il est possible de les supprimer, et surtout d’en ajouter de nouvelles : celles propres à notre organisation.

A vous de formaliser par exemple si l’anglais, le français voire le franglais sont à privilégier dans le nommage, et de créer une bonne pratique intitulée, disons, “Respect de la langue”. Au sein d’un atelier craft, vous aurez ensuite la possibilité de placer l’étiquette de bonne pratique “Respect de la langue” juste au-dessus de la méthode getSizeListeElements() présente dans un fichier, pour indiquer si c’est un bon nommage ou non.

Facteurs de réussite

Votre équipe est déjà sensibilisée à l’esprit de Software Craftmanship ? Vous devriez vous régaler. Dans le cas contraire, il est important de garder à l’esprit que le but de Promyze est de construire collectivement, et dans un esprit de confiance et d’humilité, la qualité de code de son organisation. Sa vocation n’est pas de permettre de pointer du doigt les fauteurs de bugs. Ce sont des Ateliers Craft, pas Cafte… Chaque personne contribue via son expérience personnelle, son parcours, ses connaissances techniques, et tout le monde interagit ensemble. Les Ateliers sont des sessions à ritualiser dans les équipes, il est donc important, surtout au démarrage, que des personnes soient identifiées comme des leaders sur le sujet pour créer et animer les premiers ateliers.

Conclusion

Nous avons beaucoup aimé découvrir Promyze. La convivialité de l’expérience et la possibilité de personnaliser les bonnes pratiques sont des atouts très intéressants. Ca donne envie de s’y mettre, en complément des autres fonctionnalités de Promyze, comme les plans d’actions automatiques et les suggestions personnalisées qui facilitent la mise en oeuvre d’une stratégie d’amélioration continue.

La gamification de la gestion de la dette technique identifiée par SonarQube (entre autres) est également une partie qui nous intéresse beaucoup (nous avons écrit une série d’articles sur le sujet !).

Aaaaah on les veut toutes !!!!!!

Au fait, pour finir, saviez-vous pourquoi personne ne croyait Cassandre ? Apollon, qui lui avait donné son précieux don de prophétie, espérait de sa part quelque remerciement grivois. Comme elle refusa, vengeur, il lui cracha dans la bouche (beurk). Un crachat qui lui ôta toute capacité de persuasion. Si Themis, déesse de la justice, avait été dans le coin, elle aurait peut-être rappelé les rudiments du consentement au capricieux Apollon… et rendu la parole à Cassandre. La boucle est bouclée !

La semaine prochaine, nous resterons avec Promyze, qui répondra à quelques question sur les Ateliers Craft. N’hésitez pas à en poser en commentaire d’ici-là !

Crédit images

Lego computer, Matt Brown

Cassandre, peinture d’Evelyn de Morgan, 1898

Promyze