16
WWW.OCTO.COM L’état de l’art des tests front-end

Test sur tous les fronts

Embed Size (px)

Citation preview

Page 1: Test sur tous les fronts

WWW.OCTO.COM

L’état de l’art des tests front-end

Page 2: Test sur tous les fronts

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

TE

STS

SUR

TO

US

LES

FRO

NTS

TR

IBU

WE

BP

ER

FF

OC

TO

Page 3: Test sur tous les fronts

L’intégration des tests en agile

Agile développement

02

03

0405 06

07

08

09

PROCHAINE ITÉRATIO

N

10

01USER 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

TE

STS

SUR

TO

US

LES

FRO

NTS

TR

IBU

WE

BP

ER

FF

OC

TO

Page 4: Test sur tous les fronts

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é

OWASP ZED ATTACK PROXY / SKIPFISH

Tests multinavigateurs

SAUCELABS / BROWSERSTACK

SELENIUM / WEBDRIVER

Tests applicatifs

Sécurité + Compatibilité

Couverture du code

ISTANBUL

Métrique qualité

TE

STS

SUR

TO

US

LES

FRO

NTS

TR

IBU

WE

BP

ER

FF

OC

TO

Page 5: Test sur tous les fronts

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

TE

STS

SUR

TO

US

LES

FRO

NTS

TR

IBU

WE

BP

ER

FF

OC

TO

Page 6: Test sur tous les fronts

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’’ doit ‘should add comment’ dovisit(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’)endend

Tester la fonctionnalité d’ajout d’un commentaire :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 erreurRunning 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.

TE

STS

SUR

TO

US

LES

FRO

NTS

TR

IBU

WE

BP

ER

FF

OC

TO

Page 7: Test sur tous les fronts

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

TE

STS

SUR

TO

US

LES

FRO

NTS

TR

IBU

WE

BP

ER

FF

OC

TO

Page 8: Test sur tous les fronts

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

EXEMPLEAVEC PHANTOMCSS

OUTILS ET PROCESSUS Ces tests

ne doivent être mis en place qu’une fois tous les autresdéveloppements effectués.

What do you like ?What do you like ?

Capuccino ExpressoCapuccino Expresso

TE

STS

SUR

TO

US

LES

FRO

NTS

TR

IBU

WE

BP

ER

FF

OC

TO

Page 9: Test sur tous les fronts

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/

TE

STS

SUR

TO

US

LES

FRO

NTS

TR

IBU

WE

BP

ER

FF

OC

TO

Page 10: Test sur tous les fronts

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 FONCTIONNEUN TEST DE MÉMOIRE ?

1

2

INVESTIGUEROn 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émoire en début et fin de scénario, et comparer 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 1Class filter

Alloc. Size#Deleted#New

(array)(closure)Object(system)Arraysystem / Context(string)uaHTMLOptionElementNodeList(compiled code)gaNamedNodeMapCommentTextHTMLDivElementDocumentFragment(concatenated string)(sliced string)Detached DOM tree / 3 entr...HTMLParagraphElementHTMLLabelElementHTMLInputElementfbgDetached DOM tree / 1 entr...h

14 8867 7324 6437 6043 2242 8102 1351 9211 194

7303 318

483403278250181140209112

98113

806555855332

0

10 3997 5104 4083 1953 0272 6311 8601 8591 194

699689483403247219181140139111

988280655554503229

Constructor #Delta

+4 487+222+235

+4 409+197+179+275

+620

+31+2629

00

+31+31

00

+70+1

0+31

000

+31+3

0-29

1 878 616556 704249 528258 024103 168263 552

85 12061 47247 76029 200

1 391 47227 04816 12011 12010 000

7 2405 6008 3604 480

04 5203 2002 6002 200

12 8722 496

00

TE

STS

SUR

TO

US

LES

FRO

NTS

TR

IBU

WE

BP

ER

FF

OC

TO

Page 11: Test sur tous les fronts

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

OUTILSAMÉLIORERL’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

TE

STS

SUR

TO

US

LES

FRO

NTS

TR

IBU

WE

BP

ER

FF

OC

TO

Page 12: Test sur tous les fronts

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 ET RISQUES 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

TE

STS

SUR

TO

US

LES

FRO

NTS

TR

IBU

WE

BP

ER

FF

OC

TO

Page 13: Test sur tous les fronts

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

EXEMPLEAVEC 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 ms203ms

420 ms

278 ms (301)330 ms

204 ms

236 ms185 ms

355 ms

283 ms48 ms

49 ms0.2 0.4 0.6 0.8 1.0 1.2 1.4 1.6 1.8 2.0 2.2 2.4

TE

STS

SUR

TO

US

LES

FRO

NTS

TR

IBU

WE

BP

ER

FF

OC

TO

Page 14: Test sur tous les fronts

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 OUTILSIl n’existe qu’un seul outil : Gremlins.js

EXEMPLEAVEC 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

todosTE

STS

SUR

TO

US

LES

FRO

NTS

TR

IBU

WE

BP

ER

FF

OC

TO

Page 15: Test sur tous les fronts

Cabinet de conseil IT There is a better way

OCTO ACCOMPAGNE SES CLIEN+S DANS LEUR PROJET DE transformation numérique. NOUS SOMMES CONVAINCUS QUE LA +ECHNOLOGIE EST au coeur DE CETTE MUTATION.

NOUS CROYONS QUE l'informatiqueTRANSFORME NOS SOCIÉTÉS

NOUS SAVONS QUE LES réalisations marquantes

SONT LE FRUIT DU partage DES SAVOIRS

ET DU PLAISIR À +RAVAILLER ENSEMBLE

NOUS recherchons EN PERMANENCEDE MEILLEURES façons DE FAIRE

KEY FIGURES

17 years of profitable, continuous growth

Listed on the Paris Stock Exchange since 2006

38 M€ in Sales

245 consultants, architects, experts and methodology coaches Strategic independence and financial strength

Qui sommes-nous ?

TE

STS

SUR

TO

US

LES

FRO

NTS

TR

IBU

WE

BP

ER

FF

OC

TO

Page 16: Test sur tous les fronts

[email protected]

WWW.OCTO.COM

NOUS VOUS accompagnonsDANS LA MISE EN PLACE

de frameworks

et architecturesRÉPONDANT À VOS BESOINS

d’applications Web

toujours PLUS RICHES

ET MULTIPLA+EFORMES.