UUV 2024: Arrêtons de (dé)tester nos applications et nos utilisateurs Av. de la République 92120 Montrouge, France, June 11, 2024 |
Conference website | https://www.cftl.fr/JFTL/conferences/ |
Abstract registration deadline | January 21, 2024 |
Submission deadline | January 21, 2024 |
@uuv (User centric Usecases Validator) est un écosystème qui simplifie l'écriture et l'exécution de tests End to End dans une approche BDD et du point de vue d'utilisateur final. Les tests E2E écrits sont donc compréhensibles par tout être humain
La problématique
La mise en place de tests de logiciels automatisés est une pratique de plus en plus répandue. Cela ajoute un meilleur niveau de qualité sur le code d’une application par la vérification de la non-regression ou encore la validation des scénarios d'utilisation.
La typologie de test End to End (de bout en bout) est une technique utilisée pour vérifier si une application (web, mobile...) se comporte comme prévu, du début à la fin. Elle consiste à vérifier que l’utilisateur final puisse achever les principaux scénarios d’utilisation de l’application.
Contrairement au test unitaire qui a pour seul but de verifier le comportement d’une fonction, ou au test d'intégration qui consiste à faire interagir plusieurs modules de l’application entre eux afin de voir leur bonne coopération, Le test End to End permet de vérifier depuis un navigateur (par exemple pour les applications web) le comportement de votre application d'après un ensemble de scénarios d'utilisation.
Lors des test E2E, les validations consistent la plupart du temps à vérifier les éléments restitués à l'utilisateur via le navigateur web (DOM)
Dès lors, plusieurs questions complémentaires se posent :
- Comment exprimer clairement des scénarios d'utilisation ?
- Pour les applications omnicanales, comment faire pour vérifier votre application sur différents navigateurs et terminaux ?
- Comment effectuer des vérifications de DOM pertinents en gardant un point de vue utilisateur ?
- Comment garantir que l'application développée est conforme aux exigences d'accessibilité numérique ?
Notre solution
Pour répondre aux problématiques ci-dessus et bien d'autres, nous avons créer la librairie UUV, une solution basée sur l'accessibilité pour faciliter l'écriture et l'exécution des tests bout en bout dans un langage compréhensible par tout être humain.
UUV est un écosystème cohérent s'appuyant sur des outils qui sont des références dans leur domaine.
Ecosystème
Voir schéma écosystème
-
Accessibilité
- Testing Library : Pour effectuer des vérifications de DOM basées les roles et attributs accessibles
- Axe Core : Pour détecter les anomalies d'accessibilité
- @uuv/a11y : Pour effectuer des vérifications d'accessibilité rgaa (développement en cours)
-
BDD : Behaviour Driven Development
- Cucumber : Pour l'expression des cas d'usages dans un language compréhensible par tout humain
-
Runners : Vous pouvez choisir entre
Mise en place
Installation
Tout d'abord vous devez choisir votre runner parmi les suivants :
Lorsque vos tests sont écrits vous pouvez changer de runner sans avoir à les modifier.
Cypress
Exécuter la commande suivante : npm install --save-dev @uuv/cypress
Playwright
Exécuter la commande suivante : npm install --save-dev @uuv/playwright
Mon premier test
Pour écrire votre premier test, créer à la racine du projet le fichier uuv/e2e/first-test.feature avec le contenu suivant :
Feature: Hello World
Scenario: Search - Successful case
When I visit path "/"
Then I should see an element with role "heading" and name "My app title"
Vous pouvez trouver d'autres exemples de test ici :
- weather-app.feature
- Kata E2E UUV : une serie d'exercices pour apprendre à écrire des scénarios
Exécution des tests
Ouverture du Runner
Depuis un terminal exécuter la commande suivante : npx uuv open
Exécution des tests E2E depuis la console
Depuis un terminal exécuter la commande suivante : npx uuv e2e
Résultats
Comparaison
Le tableau ci-dessous dresse une comparaison des différents outils liés aux tests de bout en bout : |
Criteria | Cypress | Playwright | Testing library | UUV |
---|---|---|---|---|
User centrism | ❌ | ✔️ | ✔️ | ✔️ |
Native accessibility | ❌ | ✔️ | ✔️ | ✔️ |
Easy setup configuration for BDD test | ⚠️ | ⚠️ | ➖ | ✔️ |
Understandable by everyone(included non dev) | ❌ | ❌ | ❌ | ✔️ |
Exemple de syntaxe
Avec cet exemple de dom :
<body> <h1>Result<h1> </body>
On peut constater que la phrase proposée par UUV est la plus compréhensible :
Library | Syntax |
---|---|
Cypress |
cy.get('h1').contains('Result') |
Playwright |
await expect(page.getByTitle('Result')).toHaveCount(1) |
Testing library |
expect(screen.getByTitle(/Result/i)).toBeTruthy() |
UUV |
Alors Je dois voir un titre nommé "Result" |
Améliorer l'accessibilité
Pour améliorer l'accessibilité de vos applications, nous vous recommandons :
- Ecrire vos scénarios en respectant les recommandations
- Utiliser les phrases pour effectuer des vérification d'accessibilité. les outils suivants sont disponibles :
Les avantages
- Si bien utilisé, intègre l’accessibilité dès le développement
- Une documentation vivante est possible car nous proposons un langage unifié pour les développeurs et les non-développeurs avec un dictionnaire riche de phrases prêtes à l'emploi
- @uuv/assistant pour écrire les scénarios rapidement
- Plugin JetBrains qui vous aide à écrire et à exécuter vos tests UUV E2E depuis les IDE JetBrains
- Intègre plusieurs moteurs d'exécution : Cypress / Playwright
- Rapport d’exécution user friendly et uniformisé (exemple)
Quelques chiffres
Depuis la publication des premières version en Juin 2023 :
Librairie | Téléchargement |
@uuv/cypress | 4.6k |
@uuv/playwright | 4.7k |
@uuv/assistant | 4.3k |
@uuv/a11y (ouverture depuis Janvier 2024) | 399 |
@UUV Jetbrain Plugin | 550 |