SlideShare une entreprise Scribd logo

RefCard Tests sur tous les fronts

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.

1  sur  17
Télécharger pour lire hors ligne
L’état de l’art des tests front-end
There
is
a
better
way
octo.com
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.
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
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é
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
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.

Recommandé

Octo RefCard test front-end
Octo RefCard test front-endOcto RefCard test front-end
Octo RefCard test front-endClément Dubois
 
Octo Technology - Refcard Tests Web front-end
Octo Technology - Refcard Tests Web front-endOcto Technology - Refcard Tests Web front-end
Octo Technology - Refcard Tests Web front-endFrançois Petitit
 
La gouvernance, ou comment rapprocher les équipes de développement et d'infra...
La gouvernance, ou comment rapprocher les équipes de développement et d'infra...La gouvernance, ou comment rapprocher les équipes de développement et d'infra...
La gouvernance, ou comment rapprocher les équipes de développement et d'infra...PimpMySharePoint
 
20090615 - Ch'ti JUG - Apache Maven
20090615 - Ch'ti JUG - Apache Maven20090615 - Ch'ti JUG - Apache Maven
20090615 - Ch'ti JUG - Apache MavenArnaud Héritier
 
Automatisation des tests - objectifs et concepts - partie 2
Automatisation des tests  - objectifs et concepts - partie 2Automatisation des tests  - objectifs et concepts - partie 2
Automatisation des tests - objectifs et concepts - partie 2Christophe Rochefolle
 
Retour d'expérience TAA - 2011/03/29
Retour d'expérience TAA - 2011/03/29Retour d'expérience TAA - 2011/03/29
Retour d'expérience TAA - 2011/03/29Elapse Technologies
 

Contenu connexe

Similaire à RefCard Tests sur tous les fronts

Scub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libreScub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libreStéphane Traumat
 
Intégration continue transco
Intégration continue transcoIntégration continue transco
Intégration continue transcolaurent_opnworks
 
SharePoint 2010 & Team Foundation Server
SharePoint 2010 & Team Foundation ServerSharePoint 2010 & Team Foundation Server
SharePoint 2010 & Team Foundation ServerPhilippe Sentenac
 
Industrialisez vos projets Php
Industrialisez vos projets Php Industrialisez vos projets Php
Industrialisez vos projets Php ALTER WAY
 
Jasmine : tests unitaires en JavaScript - Human Talks Grenoble 14.05.2013
Jasmine : tests unitaires en JavaScript - Human Talks Grenoble 14.05.2013Jasmine : tests unitaires en JavaScript - Human Talks Grenoble 14.05.2013
Jasmine : tests unitaires en JavaScript - Human Talks Grenoble 14.05.2013Xavier NOPRE
 
Usine logicielle à Orange Labs
Usine logicielle à Orange LabsUsine logicielle à Orange Labs
Usine logicielle à Orange LabsEmmanuel Hugonnet
 
JavaScript Devoxx France 2013
JavaScript Devoxx France 2013JavaScript Devoxx France 2013
JavaScript Devoxx France 2013Romain Linsolas
 
At2008 Grenoble Hugonnet Sanlaville Public
At2008 Grenoble Hugonnet Sanlaville PublicAt2008 Grenoble Hugonnet Sanlaville Public
At2008 Grenoble Hugonnet Sanlaville PublicEmmanuel Hugonnet
 
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebFrédéric Harper
 
Java entreprise edition et industrialisation du génie logiciel par m.youssfi
Java entreprise edition et industrialisation du génie logiciel par m.youssfiJava entreprise edition et industrialisation du génie logiciel par m.youssfi
Java entreprise edition et industrialisation du génie logiciel par m.youssfiENSET, Université Hassan II Casablanca
 
Avis d'expert : Les Tests Logiciels
Avis d'expert : Les Tests LogicielsAvis d'expert : Les Tests Logiciels
Avis d'expert : Les Tests LogicielsCloudNetCare
 
Les tests fonctionnels avec Visual Studio 2010
Les tests fonctionnels avec Visual Studio 2010Les tests fonctionnels avec Visual Studio 2010
Les tests fonctionnels avec Visual Studio 2010Microsoft
 
Être productif avec JHipster - Devoxx France 2017
Être productif avec JHipster - Devoxx France 2017Être productif avec JHipster - Devoxx France 2017
Être productif avec JHipster - Devoxx France 2017Julien Dubois
 
Comment construire son laboratoire de tests mobiles avec HP Mobile Center
Comment construire son laboratoire de tests mobiles avec HP Mobile CenterComment construire son laboratoire de tests mobiles avec HP Mobile Center
Comment construire son laboratoire de tests mobiles avec HP Mobile CenterGuillaume Deshayes
 
La gouvernance, ou comment rapprocher les équipes de développement et d'infra...
La gouvernance, ou comment rapprocher les équipes de développement et d'infra...La gouvernance, ou comment rapprocher les équipes de développement et d'infra...
La gouvernance, ou comment rapprocher les équipes de développement et d'infra...PimpMySharePoint
 
20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache Maven20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache MavenArnaud Héritier
 
SYnopsis Open Studio
SYnopsis Open StudioSYnopsis Open Studio
SYnopsis Open StudioGilles Auvray
 
Presentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub FoundationPresentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub FoundationStéphane Traumat
 
Industrialisation des développements logiciels
Industrialisation des développements logicielsIndustrialisation des développements logiciels
Industrialisation des développements logicielsSylvain Leroy
 
2-Cours de Géniel Logiciel
2-Cours de Géniel Logiciel2-Cours de Géniel Logiciel
2-Cours de Géniel Logiciellauraty3204
 

Similaire à RefCard Tests sur tous les fronts (20)

Scub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libreScub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libre
 
Intégration continue transco
Intégration continue transcoIntégration continue transco
Intégration continue transco
 
SharePoint 2010 & Team Foundation Server
SharePoint 2010 & Team Foundation ServerSharePoint 2010 & Team Foundation Server
SharePoint 2010 & Team Foundation Server
 
Industrialisez vos projets Php
Industrialisez vos projets Php Industrialisez vos projets Php
Industrialisez vos projets Php
 
Jasmine : tests unitaires en JavaScript - Human Talks Grenoble 14.05.2013
Jasmine : tests unitaires en JavaScript - Human Talks Grenoble 14.05.2013Jasmine : tests unitaires en JavaScript - Human Talks Grenoble 14.05.2013
Jasmine : tests unitaires en JavaScript - Human Talks Grenoble 14.05.2013
 
Usine logicielle à Orange Labs
Usine logicielle à Orange LabsUsine logicielle à Orange Labs
Usine logicielle à Orange Labs
 
JavaScript Devoxx France 2013
JavaScript Devoxx France 2013JavaScript Devoxx France 2013
JavaScript Devoxx France 2013
 
At2008 Grenoble Hugonnet Sanlaville Public
At2008 Grenoble Hugonnet Sanlaville PublicAt2008 Grenoble Hugonnet Sanlaville Public
At2008 Grenoble Hugonnet Sanlaville Public
 
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
 
Java entreprise edition et industrialisation du génie logiciel par m.youssfi
Java entreprise edition et industrialisation du génie logiciel par m.youssfiJava entreprise edition et industrialisation du génie logiciel par m.youssfi
Java entreprise edition et industrialisation du génie logiciel par m.youssfi
 
Avis d'expert : Les Tests Logiciels
Avis d'expert : Les Tests LogicielsAvis d'expert : Les Tests Logiciels
Avis d'expert : Les Tests Logiciels
 
Les tests fonctionnels avec Visual Studio 2010
Les tests fonctionnels avec Visual Studio 2010Les tests fonctionnels avec Visual Studio 2010
Les tests fonctionnels avec Visual Studio 2010
 
Être productif avec JHipster - Devoxx France 2017
Être productif avec JHipster - Devoxx France 2017Être productif avec JHipster - Devoxx France 2017
Être productif avec JHipster - Devoxx France 2017
 
Comment construire son laboratoire de tests mobiles avec HP Mobile Center
Comment construire son laboratoire de tests mobiles avec HP Mobile CenterComment construire son laboratoire de tests mobiles avec HP Mobile Center
Comment construire son laboratoire de tests mobiles avec HP Mobile Center
 
La gouvernance, ou comment rapprocher les équipes de développement et d'infra...
La gouvernance, ou comment rapprocher les équipes de développement et d'infra...La gouvernance, ou comment rapprocher les équipes de développement et d'infra...
La gouvernance, ou comment rapprocher les équipes de développement et d'infra...
 
20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache Maven20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache Maven
 
SYnopsis Open Studio
SYnopsis Open StudioSYnopsis Open Studio
SYnopsis Open Studio
 
Presentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub FoundationPresentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub Foundation
 
Industrialisation des développements logiciels
Industrialisation des développements logicielsIndustrialisation des développements logiciels
Industrialisation des développements logiciels
 
2-Cours de Géniel Logiciel
2-Cours de Géniel Logiciel2-Cours de Géniel Logiciel
2-Cours de Géniel Logiciel
 

Plus de OCTO Technology

OCTO Talks - Les IA s'invitent au chevet des développeurs
OCTO Talks - Les IA s'invitent au chevet des développeursOCTO Talks - Les IA s'invitent au chevet des développeurs
OCTO Talks - Les IA s'invitent au chevet des développeursOCTO Technology
 
OCTO Talks - Lancement du livre Culture Test
OCTO Talks - Lancement du livre Culture TestOCTO Talks - Lancement du livre Culture Test
OCTO Talks - Lancement du livre Culture TestOCTO Technology
 
Le Comptoir OCTO - Green AI, comment éviter que votre votre potion magique d’...
Le Comptoir OCTO - Green AI, comment éviter que votre votre potion magique d’...Le Comptoir OCTO - Green AI, comment éviter que votre votre potion magique d’...
Le Comptoir OCTO - Green AI, comment éviter que votre votre potion magique d’...OCTO Technology
 
OCTO Talks - State of the art Architecture dans les frontend web
OCTO Talks - State of the art Architecture dans les frontend webOCTO Talks - State of the art Architecture dans les frontend web
OCTO Talks - State of the art Architecture dans les frontend webOCTO Technology
 
Comptoir OCTO ALD Automotive/Leaseplan
Comptoir OCTO ALD Automotive/LeaseplanComptoir OCTO ALD Automotive/Leaseplan
Comptoir OCTO ALD Automotive/LeaseplanOCTO Technology
 
Le Comptoir OCTO - Comment optimiser les stocks en linéaire par la Data ?
Le Comptoir OCTO - Comment optimiser les stocks en linéaire par la Data ? Le Comptoir OCTO - Comment optimiser les stocks en linéaire par la Data ?
Le Comptoir OCTO - Comment optimiser les stocks en linéaire par la Data ? OCTO Technology
 
Le Comptoir OCTO - Retour sur 5 ans de mise en oeuvre : Comment le RGPD a réi...
Le Comptoir OCTO - Retour sur 5 ans de mise en oeuvre : Comment le RGPD a réi...Le Comptoir OCTO - Retour sur 5 ans de mise en oeuvre : Comment le RGPD a réi...
Le Comptoir OCTO - Retour sur 5 ans de mise en oeuvre : Comment le RGPD a réi...OCTO Technology
 
Le Comptoir OCTO - Affinez vos forecasts avec la planification distribuée et...
Le Comptoir OCTO -  Affinez vos forecasts avec la planification distribuée et...Le Comptoir OCTO -  Affinez vos forecasts avec la planification distribuée et...
Le Comptoir OCTO - Affinez vos forecasts avec la planification distribuée et...OCTO Technology
 
Le Comptoir OCTO - La formation au cœur de la stratégie d’éco-conception
Le Comptoir OCTO - La formation au cœur de la stratégie d’éco-conceptionLe Comptoir OCTO - La formation au cœur de la stratégie d’éco-conception
Le Comptoir OCTO - La formation au cœur de la stratégie d’éco-conceptionOCTO Technology
 
Le Comptoir OCTO - Une vision de plateforme sans leadership tech n’est qu’hal...
Le Comptoir OCTO - Une vision de plateforme sans leadership tech n’est qu’hal...Le Comptoir OCTO - Une vision de plateforme sans leadership tech n’est qu’hal...
Le Comptoir OCTO - Une vision de plateforme sans leadership tech n’est qu’hal...OCTO Technology
 
Le Comptoir OCTO - L'avenir de la gestion du bilan carbone : les solutions E...
Le Comptoir OCTO - L'avenir de la gestion du bilan carbone :  les solutions E...Le Comptoir OCTO - L'avenir de la gestion du bilan carbone :  les solutions E...
Le Comptoir OCTO - L'avenir de la gestion du bilan carbone : les solutions E...OCTO Technology
 
Le Comptoir OCTO - Continuous discovery et continuous delivery pour construir...
Le Comptoir OCTO - Continuous discovery et continuous delivery pour construir...Le Comptoir OCTO - Continuous discovery et continuous delivery pour construir...
Le Comptoir OCTO - Continuous discovery et continuous delivery pour construir...OCTO Technology
 
RefCard RESTful API Design
RefCard RESTful API DesignRefCard RESTful API Design
RefCard RESTful API DesignOCTO Technology
 
RefCard API Architecture Strategy
RefCard API Architecture StrategyRefCard API Architecture Strategy
RefCard API Architecture StrategyOCTO Technology
 
LA DUCK CONF 2023 - Journal de bord d’un archi dans l’océan du green
LA DUCK CONF 2023 - Journal de bord d’un archi dans l’océan du greenLA DUCK CONF 2023 - Journal de bord d’un archi dans l’océan du green
LA DUCK CONF 2023 - Journal de bord d’un archi dans l’océan du greenOCTO Technology
 
LA DUCK CONF 2023 - Sous le capot du cloud souverain
LA DUCK CONF 2023 - Sous le capot du cloud souverainLA DUCK CONF 2023 - Sous le capot du cloud souverain
LA DUCK CONF 2023 - Sous le capot du cloud souverainOCTO Technology
 
LA DUCK CONF 2023 - Ré-urbanisation d'un SI à travers une archi évolutive
LA DUCK CONF 2023 - Ré-urbanisation d'un SI à travers une archi évolutiveLA DUCK CONF 2023 - Ré-urbanisation d'un SI à travers une archi évolutive
LA DUCK CONF 2023 - Ré-urbanisation d'un SI à travers une archi évolutiveOCTO Technology
 
LA DUCK CONF 2023 - Parce que nos plateformes le valent bien
LA DUCK CONF 2023 - Parce que nos plateformes le valent bienLA DUCK CONF 2023 - Parce que nos plateformes le valent bien
LA DUCK CONF 2023 - Parce que nos plateformes le valent bienOCTO Technology
 
LA DUCK CONF 2023 - Guider, faire, faire faire ? Une solitude partagée entre ...
LA DUCK CONF 2023 - Guider, faire, faire faire ? Une solitude partagée entre ...LA DUCK CONF 2023 - Guider, faire, faire faire ? Une solitude partagée entre ...
LA DUCK CONF 2023 - Guider, faire, faire faire ? Une solitude partagée entre ...OCTO Technology
 

Plus de OCTO Technology (20)

OCTO Talks - Les IA s'invitent au chevet des développeurs
OCTO Talks - Les IA s'invitent au chevet des développeursOCTO Talks - Les IA s'invitent au chevet des développeurs
OCTO Talks - Les IA s'invitent au chevet des développeurs
 
OCTO Talks - Lancement du livre Culture Test
OCTO Talks - Lancement du livre Culture TestOCTO Talks - Lancement du livre Culture Test
OCTO Talks - Lancement du livre Culture Test
 
Le Comptoir OCTO - Green AI, comment éviter que votre votre potion magique d’...
Le Comptoir OCTO - Green AI, comment éviter que votre votre potion magique d’...Le Comptoir OCTO - Green AI, comment éviter que votre votre potion magique d’...
Le Comptoir OCTO - Green AI, comment éviter que votre votre potion magique d’...
 
OCTO Talks - State of the art Architecture dans les frontend web
OCTO Talks - State of the art Architecture dans les frontend webOCTO Talks - State of the art Architecture dans les frontend web
OCTO Talks - State of the art Architecture dans les frontend web
 
Refcard GraphQL
Refcard GraphQLRefcard GraphQL
Refcard GraphQL
 
Comptoir OCTO ALD Automotive/Leaseplan
Comptoir OCTO ALD Automotive/LeaseplanComptoir OCTO ALD Automotive/Leaseplan
Comptoir OCTO ALD Automotive/Leaseplan
 
Le Comptoir OCTO - Comment optimiser les stocks en linéaire par la Data ?
Le Comptoir OCTO - Comment optimiser les stocks en linéaire par la Data ? Le Comptoir OCTO - Comment optimiser les stocks en linéaire par la Data ?
Le Comptoir OCTO - Comment optimiser les stocks en linéaire par la Data ?
 
Le Comptoir OCTO - Retour sur 5 ans de mise en oeuvre : Comment le RGPD a réi...
Le Comptoir OCTO - Retour sur 5 ans de mise en oeuvre : Comment le RGPD a réi...Le Comptoir OCTO - Retour sur 5 ans de mise en oeuvre : Comment le RGPD a réi...
Le Comptoir OCTO - Retour sur 5 ans de mise en oeuvre : Comment le RGPD a réi...
 
Le Comptoir OCTO - Affinez vos forecasts avec la planification distribuée et...
Le Comptoir OCTO -  Affinez vos forecasts avec la planification distribuée et...Le Comptoir OCTO -  Affinez vos forecasts avec la planification distribuée et...
Le Comptoir OCTO - Affinez vos forecasts avec la planification distribuée et...
 
Le Comptoir OCTO - La formation au cœur de la stratégie d’éco-conception
Le Comptoir OCTO - La formation au cœur de la stratégie d’éco-conceptionLe Comptoir OCTO - La formation au cœur de la stratégie d’éco-conception
Le Comptoir OCTO - La formation au cœur de la stratégie d’éco-conception
 
Le Comptoir OCTO - Une vision de plateforme sans leadership tech n’est qu’hal...
Le Comptoir OCTO - Une vision de plateforme sans leadership tech n’est qu’hal...Le Comptoir OCTO - Une vision de plateforme sans leadership tech n’est qu’hal...
Le Comptoir OCTO - Une vision de plateforme sans leadership tech n’est qu’hal...
 
Le Comptoir OCTO - L'avenir de la gestion du bilan carbone : les solutions E...
Le Comptoir OCTO - L'avenir de la gestion du bilan carbone :  les solutions E...Le Comptoir OCTO - L'avenir de la gestion du bilan carbone :  les solutions E...
Le Comptoir OCTO - L'avenir de la gestion du bilan carbone : les solutions E...
 
Le Comptoir OCTO - Continuous discovery et continuous delivery pour construir...
Le Comptoir OCTO - Continuous discovery et continuous delivery pour construir...Le Comptoir OCTO - Continuous discovery et continuous delivery pour construir...
Le Comptoir OCTO - Continuous discovery et continuous delivery pour construir...
 
RefCard RESTful API Design
RefCard RESTful API DesignRefCard RESTful API Design
RefCard RESTful API Design
 
RefCard API Architecture Strategy
RefCard API Architecture StrategyRefCard API Architecture Strategy
RefCard API Architecture Strategy
 
LA DUCK CONF 2023 - Journal de bord d’un archi dans l’océan du green
LA DUCK CONF 2023 - Journal de bord d’un archi dans l’océan du greenLA DUCK CONF 2023 - Journal de bord d’un archi dans l’océan du green
LA DUCK CONF 2023 - Journal de bord d’un archi dans l’océan du green
 
LA DUCK CONF 2023 - Sous le capot du cloud souverain
LA DUCK CONF 2023 - Sous le capot du cloud souverainLA DUCK CONF 2023 - Sous le capot du cloud souverain
LA DUCK CONF 2023 - Sous le capot du cloud souverain
 
LA DUCK CONF 2023 - Ré-urbanisation d'un SI à travers une archi évolutive
LA DUCK CONF 2023 - Ré-urbanisation d'un SI à travers une archi évolutiveLA DUCK CONF 2023 - Ré-urbanisation d'un SI à travers une archi évolutive
LA DUCK CONF 2023 - Ré-urbanisation d'un SI à travers une archi évolutive
 
LA DUCK CONF 2023 - Parce que nos plateformes le valent bien
LA DUCK CONF 2023 - Parce que nos plateformes le valent bienLA DUCK CONF 2023 - Parce que nos plateformes le valent bien
LA DUCK CONF 2023 - Parce que nos plateformes le valent bien
 
LA DUCK CONF 2023 - Guider, faire, faire faire ? Une solitude partagée entre ...
LA DUCK CONF 2023 - Guider, faire, faire faire ? Une solitude partagée entre ...LA DUCK CONF 2023 - Guider, faire, faire faire ? Une solitude partagée entre ...
LA DUCK CONF 2023 - Guider, faire, faire faire ? Une solitude partagée entre ...
 

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
  • 15. octo.com  T ESTS S U R TO US L ES F RO N TS  NOUS VOUS accompagnons DANS LA MISE EN PLACE DE frameworks et architectures RÉPONDANTÀ VOS BESOINS d’applications Web toujoursPLUS RICHES ET MULTIPLA+EFORMES.
  • 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
  • 17. octo.com  T ESTS S U R TO US L ES F RO N TS  © OCTO Technology 2015 Les informations contenues dans ce document présentent le point de vue actuel d'OCTO Technology sur les sujets évoqués, à la date de publication. Tout extrait ou diffusion partielle est interdit sans l'autorisation préalable d'OCTO Technology. Les noms de produits ou de sociétés cités dans ce document peuvent être les marques déposées par leurs propriétaires respectifs. Conçu, réalisé et édité par OCTO Technology.