Les outils d’automatisation de l’assurance qualité sont une partie essentielle du processus de développement logiciel car ils permettent aux développeurs de tester les fonctionnalités et les performances de leurs applications avant de les mettre à la disposition du public. Il existe de nombreux outils d’automatisation de l’assurance qualité, parmi lesquels Cypress et Playwright. Ce dernier a gagné en popularité, alors aujourd’hui, je voudrais comparer ces outils utiles.
Lorsque Cypress est arrivé sur le marché, il a enfreint les règles que Selenium suivait depuis longtemps. En conséquence, Cypress a une architecture de travail différente ; il utilise le protocole Chrome Dev, n’utilise pas vraiment le protocole JSON Wire (comme Selenium) et offre également une grande flexibilité. Jusqu’à présent, Playwright semble proposer la même idée pour faciliter la vie du côté des tests pour les ingénieurs et développeurs QA.
Sélecteurs
Commençons à parler des sélecteurs.
Dans Playwright, il est important de noter une distinction. Il y a une différence entre le sélecteur, le localisateur et l’interaction effectuée sur les éléments. Un sélecteur est essentiellement une requête qui sera utilisée pour pointer vers quelque chose sur une page. Par exemple, ci-dessous, cela affiche un sélecteur de texte, ce qui signifie qu’il recherche quelque chose entièrement basé sur le texte visible. Un localisateur est un objet qui utilise un sélecteur pour récupérer un élément d’une page.
await page.locator('text=Apium').click()
Sélecteur = 'text=Apium'
Localisateur = locator('text=Apium')
Interaction = click()
En dehors de la boîte, Playwright prend en charge différents types de sélecteurs et également des combinaisons de ceux-ci. Par exemple, la prise en charge de texte, CSS, XPath, React et Vue.
await page.locator ('text=Blog').click();
await page.locator ((#nav-bar .contact-us').click();
await page.locator ("_react-ListItem(text *= "bmw" i]').click();
Cypress dispose d’une bonne documentation sur l’utilisation des sélecteurs et des meilleures pratiques. Le bon conseil de la communauté est d’ajouter des attributs personnalisés qui, par conséquent, rendent l’application plus testable.
Cypress a deux commandes principales pour trouver des sélecteurs :
cy.get() – où vous pouvez placer n’importe quel sélecteur de requête (id, className, etc.).
cy.contains() – pour trouver par texte.
cy.contains('Submit').click()
cy.get('[data-cy="submit"]').click()
De plus, cette commande est livrée avec de nombreuses sous-commandes pour aider à interagir avec les éléments. Comme:
.eq() – Get Un élément DOM à un index spécifique dans un tableau d’éléments.
.première() – Obtenir le premier élément DOM dans un ensemble d’éléments DOM.
.filtre() – Récupère les éléments DOM qui correspondent à un sélecteur spécifique.
.enfants() – Obtenir les enfants de chaque élément DOM dans un ensemble d’éléments DOM.
…etc.
Modèles de test
La personnalisation et la flexibilité sont essentielles avec Cypress.
Le modèle PageObject peut être facilement utilisé avec Cypress

Et le test ressemblera à ceci:

Les modèles BDD peuvent être utilisés avec Cypress simplement en important la dépendance de nœud

Et le test ressemblera à ceci:

Utilisation de la commande personnalisée dans Cypress

Et le test ressemblera à ceci:

Objet de page dans Playwright C’est un peu un style différent de celui de Cypress

Et le test ressemblera à ceci:

Playwright soutient également l’approche BDD. Dans le cas de Playwright, comme il prend en charge différentes langues, n’hésitez pas à utiliser différents frameworks BDD pour s’adapter (ex cucumber.js pour js). Et n’importe quel modèle de test peut également être appliqué avec Playwright.
Conclusion
Permettez-moi de résumer ces deux outils selon mon opinion personnelle :
Avantages du dramaturge
- Prise en charge des langages (JS, Python, Java, C#)
- Tester l’exécution en parallèle (peut également tester plusieurs navigateurs en parallèle)
- Prise en charge de plusieurs onglets
- Prise en charge inter-domaines
- Prise en charge des cadres Iframe
- Kit Web Safari
Avantages de Cyprès :
- Documentation
- Support communautaire (également beaucoup de plugins)
- Attentes statiques
- Contrôle du réseau et tests d’API
- Prend en charge le nuage de périphériques réels et les serveurs distants.
- La syntaxe est plus fluide.
En fin de compte, le meilleur outil pour votre organisation dépendra de vos besoins et exigences spécifiques en matière de test. Cependant, Cypress et Playwright valent la peine d’être pris en compte si vous avez besoin d’automatiser les tests de navigateur pour vos applications Web.