Test sur tous les fronts

12 819 vues

Publié le

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.

Publié dans : Technologie
4 commentaires
29 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
12 819
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3 644
Actions
Partages
0
Téléchargements
310
Commentaires
4
J’aime
29
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Test sur tous les fronts

  1. 1. WWW.OCTO.COM L’état de l’art des tests front-end
  2. 2. 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  TESTSSURTOUSLESFRONTSTRIBUWEBPERFFOCTO
  3. 3. 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 TESTSSURTOUSLESFRONTSTRIBUWEBPERFFOCTO
  4. 4. 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é TESTSSURTOUSLESFRONTSTRIBUWEBPERFFOCTO
  5. 5. 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 TESTSSURTOUSLESFRONTSTRIBUWEBPERFFOCTO
  6. 6. 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 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 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. TESTSSURTOUSLESFRONTSTRIBUWEBPERFFOCTO
  7. 7. 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 TESTSSURTOUSLESFRONTSTRIBUWEBPERFFOCTO
  8. 8. 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 ?What do you like ? Capuccino Expresso Capuccino Expresso TESTSSURTOUSLESFRONTSTRIBUWEBPERFFOCTO
  9. 9. 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/ TESTSSURTOUSLESFRONTSTRIBUWEBPERFFOCTO
  10. 10. 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 ? 1 2 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é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) 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 TESTSSURTOUSLESFRONTSTRIBUWEBPERFFOCTO
  11. 11. 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 TESTSSURTOUSLESFRONTSTRIBUWEBPERFFOCTO
  12. 12. 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 TESTSSURTOUSLESFRONTSTRIBUWEBPERFFOCTO
  13. 13. 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 TESTSSURTOUSLESFRONTSTRIBUWEBPERFFOCTO
  14. 14. 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àmettreenplace,cestestsrépondentessentiellement 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 TESTSSURTOUSLESFRONTSTRIBUWEBPERFFOCTO
  15. 15. 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'informatique TRANSFORME 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 PERMANENCE DE 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 245consultants, architects, experts and methodology coaches Strategic independence and financial strength Qui sommes-nous ? TESTSSURTOUSLESFRONTSTRIBUWEBPERFFOCTO
  16. 16. tribu.webf@octo.com WWW.OCTO.COM NOUS VOUS accompagnons DANS LA MISE EN PLACE de frameworks et architectures RÉPONDANT À VOS BESOINS d’applications Web toujours PLUS RICHES ET MULTIPLA+EFORMES.

×