L’état de l’art des tests front-end
Maîtriser et fiabiliser son code sont aujourd’hui devenus incontournables pour tout développeur devant faire face à des architectures Web de plus en plus riches et complexes.
Il existe des outils pour réaliser des tests front-end d’applications Web et répondre aux besoins d’un développement de qualité.
Nous vous invitons ici à parcourir l’écosystème de ces tests front-end d’applications Web. Que vous soyez déjà convaincus par les tests ou tout simplement curieux, ce document vous guidera pour les mettre en place sur vos projets.
LA DUCK CONF 2023 - Parce que nos plateformes le valent bien
RefCard Tests sur tous les fronts
1. L’état de l’art des tests front-end
There
is
a
better
way
octo.com
2. octo.com
T
ESTS
S
U
R
TO
US
L
ES
F
RO
N
TS
Maîtriser et fiabiliser son code sont aujourd’hui
devenus incontournables pour tout développeur
devant faire face à des architectures Web de plus en
plus riches et complexes.
Il existe des outils pour réaliser des tests front-end
d’applications Web et répondre aux besoins d’un
développement de qualité.
Nous vous invitons ici à parcourir l’écosystème de ces
tests front-end d’applications Web. Que vous soyez déjà
convaincus par les tests ou tout simplement curieux, ce
document vous guidera pour les mettre en place sur vos
projets.
L’état de l’art
des tests front-end.
3. octo.com
T
ESTS
S
U
R
TO
US
L
ES
F
RO
N
TS
L’intégration
des tests en agile.
Agile
développement
02
03
04
05 06
07
08
09
P
RO
CHAINE ITÉRATIO
N
10
01
USER STORY 1
USER STORY 2
Tests unitaires - fonctionnels
USER STORY N
DEMO
Retour du client
Prise en compte
des retours
Exécution et mise à jour
des tests (applicatifs, IHM
et de charge)
BACKLOG
DE PRODUIT
ITÉRATION
BACKLOG
PRODUIT
Tests unitaires - fonctionnels
Tests unitaires - fonctionnels
4. octo.com
T
ESTS
S
U
R
TO
US
L
ES
F
RO
N
TS
Tests unitaires
KARMA + MOCHA
Tests
fonctionnels
SELENIUM + CAPYBARA
Qualité du code
ESLINT
Tests
de charge
Tests
de performance
WEBPAGETEST
Stress tests
GREMLINSJS
Tests de mémoire
CHROME DEV TOOLS
Performance + Robustesse
Tests
IHM
Tests de non
régression visuelle
PHANTOMCSS
Tests d’accessibilité
OPQUAST DESKTOP
Tests
de référencement
WOORANK
Ergonomie + Visibilité
Tests
de sécurité
OWASPZEDATTACKPROXY
/ SKIPFISH
Tests
multinavigateurs
SAUCELABS /
BROWSERSTACK
SELENIUM /
WEBDRIVER
Tests
applicatifs
Sécurité + Compatibilité
Couverture du code
ISTANBUL
Métrique qualité
5. octo.com
T
ESTS
S
U
R
TO
US
L
ES
F
RO
N
TS
Tests unitaires.
Ils assurent la stabilité du code en testant chaque portion (fonction) individuellement. Les régressions seront ainsi
remontées très rapidement ce qui permettra de manipuler la base de code avec confiance.
EXEMPLE
var should = require(‘chai’).should;
var sinon = require(‘sinon’);
suite(‘get_my_friends’, function() {
test(‘should return 2 friends of mine’,function() {
var user = {
facebook_id : ‘my_facebook-id’, name : ‘my_name’
};
var friends = [
{ name : ‘friend 1’},
{ name : ‘friend 2’} ];
var stub = sinon.stub(fb, ‘getFriends’).returns(friends);
var result = get_my_friends(user);
stub.should.be.calledWith(user.facebook_id); });
});
AVEC SINON.JS ET CHAI.JS
get_my_friends
✔ should return 2 friends of mine (50ms)
✔ 1 test complete (50ms)
Tester la récupération des amis Facebook
d’un utilisateur pour les rendre à la vue :
Résultat affiché :
La mise en place de tests unitaires ne coûte pas cher en
termes de developpement (écriture et outils à mettre en place)
et temps d’exécution (de l’ordre de la seconde).
COÛTS
Sur des projets existants, sans test, il est plus complexe de
mettre en place des tests unitaires. Il y a une étape de rétro-
ingénierie et de séparation du code avant de pouvoir tester.
RISQUES
OUTILS
Structurer son code : Mocha (notre préféré) ou Jasmine
(supporte IE)
Écrire des assertions lisibles : Chai.js
Construire des mocks, des stubs et des spy : Sinon.js
Exécuter des tests Karma et PhantomJS
6. octo.com
T
ESTS
S
U
R
TO
US
L
ES
F
RO
N
TS
Tests fonctionnels.
Ils assurent la stabilité de l’application en reproduisant le parcours d’un utilisateur sur le navigateur. Ils testent le
bon fonctionnement de l’application et remontent les régressions fonctionnelles.
D’expérience les tests fonctionnels ne sont pas toujours
stables, cela génère des faux négatifs. Il est donc
important de lancer les tests périodiquement pour être
certain que l’erreur se reproduise.
Framework de test pour Angular : Protractor
Framework de test pour applications Web : Capybara
Outil d’automatisation de tests d’interface Web :
Selenium
EXEMPLE
form name=»inscription»
textarea name=»comment»/textarea
button type=»submit»Valider/button
form
div class=»list-comments»/div
AVEC CAPYBARA
describe ‘Comment’’ do
it ‘should add comment’ do
visit(inscription_page)
fill_in comment, :with = “j’ajoute un commentaire’”
click_on ‘Valider’
expect(find(:css, ‘.list-comments).text).to eql(‘j’ajoute un commentaire’)
end
end
Testerlafonctionnalitéd’ajoutd’uncommentaire :
1. Implémenter le fonctionnement à tester
COÛTS
Leur mise en place peut coûter cher en termes de
développement (les différents outils à mettre en place), de
temps d’exécution (plusieurs minutes) et surtout de
maintenance (sensible aux changements HTML/JS/CSS).
2.
Écrire un test fonctionnel qui vérifie la création d’un commentaire
3. Résultat des tests en sortie s’il n’y a aucune erreur
Running E2E tests using environment settig for environment dev
...............................................
OUTILS
RISQUES
FONCTIONNEMENT
Démarrage du serveur Selenium exécution des tests
(Protractor ou Capybara) communication avec Selenium
via un WebDriverJS exécution des tests sur le navigateur.
7. octo.com
T
ESTS
S
U
R
TO
US
L
ES
F
RO
N
TS
Rejouer les tests fonctionnels sur les différents navigateurs et plateformes, permet de
fiabiliser la compatibilité de votre application.
Tests
multinavigateurs.
Les coûts peuvent être importants tant sur la mise en place
de l’infrastructure, pour exécuter les tests (navigateurs/OS),
que sur la maintenance et plus particulièrement sur mobile.
Il existe des solutions en SaaS qui répondent à ce besoin.
COÛTS ET RISQUES OUTILS
Solution SAAS : SauceLabs, BrowserStack
Infrastructure : Selenium, WebDriverJS
Navigateurs : Chrome, Internet Explorer
Plateformes : Windows
8. octo.com
T
ESTS
S
U
R
TO
US
L
ES
F
RO
N
TS
Tests de non régression visuelle.
Ces tests permettent de garder une interface stable et évitent les régressions visuelles. Ils sont destinés aux sites
avec une interface complexe ou avec un grand nombre de visiteurs.
Ils sont plutôt simples à mettre en place car peu d’outils
sont nécessaires. L’écriture des tests est simple si on teste
uniquement des pages entières ou partielles.
COÛTS
Le résultat des tests retourne parfois des faux négatifs
causés par une intolérance aux changements de design.
Pour minimiser les risques, évitez les parcours utilisateurs
et favorisez l’accès aux pages directement par l’URL.
RISQUES
Framework de tests visuels : PhantomCSS
Parcours des écrans : CasperJS
Rendu des écrans : PhantomJS
Capture d’écran : CasperJS
Comparaison des écrans : Resemble.js
EXEMPLE
AVEC PHANTOMCSS
OUTILS
ET PROCESSUS Ces tests
ne doivent être
mis en place qu’une
fois tous les autres
développements
effectués.
What do you like ?
Capuccino Expresso
Capuccino Expresso
What do you like ?
9. octo.com
T
ESTS
S
U
R
TO
US
L
ES
F
RO
N
TS
Tests
de sécurité.
Le navigateur est le principal vecteur des failles de sécurité sur le Web, il est
important de connaître les risques et de s’en prémunir, à la fois pour protéger vos
utilisateurs et votre application.
Il faut connaître les failles les plus critiques et comprendre
leurs concepts. Vous pouvez retrouver les 10 principaux
risques de sécurité sur le Web sur le site de l’OWASP.
COÛTS OUTILS
Outils automatisation de test :
OWASP Zed Attack Proxy / Skipfish
HTML5 Security Cheatsheet : http://html5sec.org/
10. octo.com
T
ESTS
S
U
R
TO
US
L
ES
F
RO
N
TS
Tests d’endurance/
mémoire.
Les applications Web (SPA, RIA), peuvent bloquer le navigateur à cause de «fuites mémoires». Elles sont
caractérisées par une augmentation permanente de la mémoire et sont difficiles à détecter.
OUTILS
Profilage de l’usage de la mémoire :
Chrome Dev Tools
DÉTECTER LES FUITES
Le principe consiste à lancer le profileur de
mémoire, à faire fonctionner l’application, et à
vérifier qu’il n’y ait pas une hausse anormale de
la quantité de mémoire utilisée.
COMMENT FONCTIONNE
UN TEST DE MÉMOIRE ?
INVESTIGUER
On commence par trouver un scénario utilisateur
qui permette de reproduire la fuite de manière
systématique. Une fois cela fait, une technique
consiste à prendre des snapshots de la pile
mémoireendébutetfindescénario,etcomparer
leur contenu : on doit normalement voir
apparaître les objets qui ne sont jamais
supprimés.
5500 ms 6000 ms 6500 ms 7000 ms 7500 ms 8000 ms 8500 ms 9000 ms
5000 ms 5500 ms 6000 ms 6500 ms 7000 ms 7500 ms 8000 ms
Elements Network Sources Timeline Profiles Resources Audits Console
Comparison Snapshot 1
Class filter
Alloc. Size
#Deleted
#New
(array)
(closure)
Object
(system)
Array
system / Context
(string)
ua
HTMLOptionElement
NodeList
(compiled code)
ga
NamedNodeMap
Comment
Text
HTMLDivElement
DocumentFragment
(concatenated string)
(sliced string)
Detached DOM tree / 3 entr...
HTMLParagraphElement
HTMLLabelElement
14 886
7 732
4 643
7 604
3 224
2 810
2 135
1 921
1 194
730
3 318
483
403
278
250
181
140
209
112
98
113
80
10 399
7 510
4 408
3 195
3 027
2 631
1 860
1 859
1 194
699
689
483
403
247
219
181
140
139
111
98
82
80
Constructor #Delta
+4 487
+222
+235
+4 409
+197
+179
+275
+62
0
+31
+2629
0
0
+31
+31
0
0
+70
+1
0
+31
0
1 878 616
556 704
249 528
258 024
103 168
263 552
85 120
61 472
47 760
29 200
1 391 472
27 048
16 120
11 120
10 000
7 240
5 600
8 360
4 480
0
4 520
3 200
11. octo.com
T
ESTS
S
U
R
TO
US
L
ES
F
RO
N
TS
Tests
d’accessibilité.
Les tests vérifient que les spécifications (RGAA, AccessiWeb, WCAG) sont
correctement appliquées ou que le parcours utilisateur n’est pas bloqué par une
navigation réduite.
Audit de code : Accessibility Developer Tools / Opquast
Desktop
Validation en ligne : http://validator.w3.org
Plugin de test automatisé : capybaraaccessible
(Capybara), accessibility plugin (Protractor)
Outil en SaaS de tests de scénarios automatisés: Tanaguru
OUTILS
AMÉLIORER
L’ACCESSIBILITÉ
D’UN NAVIGATEUR
Simulateur de lecteur navigateur :
Fangs Screen Reader Simulator
Contraster les couleurs :
high contraste
Lecteur audio pour vidéo :
HTML5 Audio Description
12. octo.com
T
ESTS
S
U
R
TO
US
L
ES
F
RO
N
TS
Tests
de référencement
Un bon référencement repose sur le contenu et la structure du site, c’est la clé
pour être plus visible sur internet.
Des outils assez perfomants existent pour
améliorer son référencement.
Les solutions suggérées peuvent être difficiles à
mettre en place.
COÛTS
ETRISQUES OUTILS
Audit de code : Google tools for webmasters
Évolution du classement : https://www.woorank.com/fr
Extension Chrome : SEOquake
Référenciel pour les données structurées : schema.org
13. octo.com
T
ESTS
S
U
R
TO
US
L
ES
F
RO
N
TS
Les performances d’une application Web ne reposent plus uniquement sur la partie serveur. Un travail
d’optimisation doit aussi être réalisé côté navigateur.
Tests
de performance.
OUTILS
Solution SaaS : Google Page Speed Insight, WebPageTest,AgileLoad
EXEMPLE
AVEC WEBPAGETEST
https://google.fr
1. google.fr - /
2. www.google.fr - /
3. www.google.fr...color_272x92dp.png
4. www.google.fr...nav_logo231.png
5. ssl.gstatic.com - i1_1967ca6a.png
6. www.google.fr...vvDKunayNbav0cnV1w
7. www.gstatic.com...j_B28_if02IKAozw
8. www.google.fr...bf56be55ea651do.js
9. www.google.fr...-Kq-S4bYgd16V7K41g
10. www.google.com - gen_204
11. www.google.com - tia.png
12. apis.google.com - cb=gapi.loaded_0
13. www.google.fr - gen_204
14. www.google.fr - google_lodp.ico
CPU Utilization
BandwidthIn (0 - 5,000 Kbps)
0.2 0.4 0.6 0.8 1.0 1.2 1.4 1.6 1.8 2.0 2.2 2.4
456 ms
246 ms
163 ms
203ms
420 ms
278 ms (301)
330 ms
204 ms
236 ms
185 ms
355 ms
283 ms
48 ms
49 ms
0.2 0.4 0.6 0.8 1.0 1.2 1.4 1.6 1.8 2.0 2.2 2.4
14. octo.com
T
ESTS
S
U
R
TO
US
L
ES
F
RO
N
TS
Tester la robustesse de l’application Web en exécutant une multitude d’interactions sur
l’interface, de façon aléatoire, afin de permettre la détection des points critiques, de problème
de mémoire ou de performance.
Stress tests.
Simples à mettre en place, ces tests répondent essentiellement
aux besoins d’applications Web de type SPA. En revanche il
peut être complexe de détecter la source du problème.
COÛTS ET RISQUES OUTILS
Il n’existe qu’un seul outil :
Gremlins.js
EXEMPLE
AVEC GREMLINS.JS
✔
✔
✔
u0vkzi
wash the dishesdl
Call Marnie
1 item left All Active Completed Clear completed (2)
Change calendarz32ra
Double-click to edit a todo
todos
16. octo.com
T
ESTS
S
U
R
TO
US
L
ES
F
RO
N
TS
OCTO Technology
“ Dans un monde complexe aux ressources finies, nous recherchons ensemble de meilleures
façons d'agir. Nous œuvrons à concevoir et à réaliser les produits numériques essentiels au
progrès de nos clients et à l'émergence d'écosystèmes vertueux”
– Manifeste OCTO Technology -
CABINET DE CONSEIL ET DE RÉALISATION IT
Paris
Toulouse
Hauts-de-France
IMPLANTATIONS
1OOO
OCTOS
OCTO EN TÊTE
DU PALMARÈS
3 CONFÉRENCES
FORMATION
La conférence tech par OCTO
3
6x