Pourquoi Playwright est-il mieux que Cypress ?

Qu'il est loin le temps des tests Selenium avec les fameux webdrivers à installer qui ne marchaient jamais vraiment. C'était la bonne époque où on pouvait même tester son site sur Internet Explorer, pour se rendre compte qu'il ne marchait pas la plupart du temps.

Plus simple, plus robuste, les technologies récentes de tests E2E ont vraiment simplifié notre façon d'écrire ces tests que j'affectionne particulièrement.

Playwright: Un moteur de tests E2E petit mais puissant

Créé par des anciens de Puppeteer, la fameuse librairie permettant de piloter Chrome & Firefox pour aller scrapper des sites (qui vous appartiennent hein, le scraping est illégal), Playwright ressemble à peu de chose près à son grand frère. Sauf que ce dernier s'est doté de toute une couche permettant de faire des tests E2E, et ça c'est quand même bien pratique.

Son interface qui permet d'exécuter les tests n'est pas sans rappeler celle de Cypress, oui mais voilà, là où Playwright fait plus fort, c'est dans ses performances. Pour en avoir le coeur net, il existe un très bon comparatif ici: Cypress vs Selenium vs Playwright vs Puppeteer speed comparison

De plus, Playwright embarque tout un tas de fonctionnalités très cool comme le parallélisme de tests, les tests APIs, du snapshot testing et la cerise sur le gâteau : de la génération de tests : un mode qui te permet de te balader sur ton app tandis que dans une autre fenêtre, il génère tout seul le code associé pour ré-exécuter le même test.

Pour finir, si le moteur de tests de Cypress est open source, certaines fonctionnalités, comme le parallélisme, la détection de flaky tests (tests qui échouent aléatoirement), nécessitent d'utiliser Cypress Cloud, leur app SaaS payante (avec un forfait gratuit limité). Et ça c'est chiant.

Une liberté de mouvement

L'énorme avantage qu'a Playwright est qu'il ne s'exécute pas dans un environnement clos comme Cypress. Le cas assez classique que je rencontrais à l'époque, c'est la lecture des mails, par exemple pour cliquer sur le fameux lien d'activation après avoir fait une inscription sur son app.

J'avais d'ailleurs à ce sujet créé un petit package pour dialoguer plus facilement avec Maildev.

Avec Cypress, si vous souhaitez aller lire les mails dans un serveur SMTP de test, il faut au mieux aller le visiter avec le script de test E2E, au pire, créer une sorte de commande pour te permettre de faire quelques actions en plus. La faute à la notion de Promise qui a été ré-implémentée dans Cypress pour faciliter l'attente entre deux commandes. Tu codes du JavaScript, mais t'es pas complètement dans un moteur NodeJS, certaines choses sont innaccessibles.

Même si je comprends l'intérêt, j'avais quand même trouvé ça limité.

Avec Playwright, la question ne se pose plus, tu es direct dans un environnement NodeJS complètement basique et tu peux tout à fait utiliser Fetch, Axios, ou n'importe quel package NPM de ton choix. Et donc pour récupérer le contenu de ton mail, c'est bien plus simple puisqu'il te suffit de Fetch l'API du serveur SMTP directement. Pas de quoi créer un package "playwright-maildev" en somme.

Alors, on choisit quoi ?

Pour ma part, je ne vais pas migrer pour autant mes projets de Cypress vers Playwright, car un test end-to-end, c'est très long à écrire !

Par contre, sur tous mes nouveaux projets, c'est définitivement Playwright que j'utilise, pour sa simplicité, son efficacité mais aussi le fait que ses fonctionnalités ne sont pas restreinte pas l'utilisation d'un abonnement à une plateforme, il est complètement open-source.