Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Octo Technology - Refcard Tests Web front-end

1,326 views

Published on

Carte de référence sur les outils de tests d'application Web front-end.

Published in: Software
  • Be the first to comment

Octo Technology - Refcard Tests Web front-end

  1. 1. tribu.webf@octo.com WWW.OCTO.COM 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 à les mettre en place sur vos projets. 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. L’état de l’art des tests front-end 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 Test unitaire - fonctionnel 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 KARMA + MOCHA Tests fonctionnels SELENIUM + CAPYBARA Qualité du code ESLINT Tests de sécurité OWASP ZED ATTACK PROXY / SKIPFISH Tests multinavigateurs SAUCELABS / BROWSERSTACK SELENIUM / WEBDRIVER Tests applicatifs Tests IHM Tests de non régression visuelle PHANTOMCSS Tests d’accessibilité OPQUAST DESKTOP Tests de référencement WOORANK Tests de charge Tests de performance WEBPAGETEST Stress tests GREMLINSJS Tests de mémoire CHROME DEV TOOLS Performance + RobustesseErgonomie + VisibilitéSécurité + Compatibilité Couverture du code ISTANBUL Métrique qualité Test unitaire - fonctionnel Test unitaire - fonctionnel WWW.OCTO.COM L’étatdel’artdestestsfront-end
  2. 2. 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. 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 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é : 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 application 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 commen- taire’) 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. 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 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/ 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 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 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 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 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 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 ? 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 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. 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 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 HTMLInputElement f b g Detached DOM tree / 1 entr... h 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 65 55 85 53 32 0 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 65 55 54 50 32 29 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 0 0 +31 +3 0 -29 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 2 600 2 200 12 872 2 496 0 0 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

×