SlideShare une entreprise Scribd logo
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
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

Contenu connexe

Tendances

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 2
Christophe Rochefolle
 
Cerberus, un outil pour l'automatisation des tests fonctionnels
Cerberus, un outil pour l'automatisation des tests fonctionnelsCerberus, un outil pour l'automatisation des tests fonctionnels
Cerberus, un outil pour l'automatisation des tests fonctionnels
Aurélien Bourdon
 
Automatisation des tests
Automatisation des testsAutomatisation des tests
Automatisation des tests
Zhu Wei QI
 
Initiation aux tests fonctionnels - Philippe Kernevez - October 2009
Initiation aux tests fonctionnels - Philippe Kernevez - October 2009Initiation aux tests fonctionnels - Philippe Kernevez - October 2009
Initiation aux tests fonctionnels - Philippe Kernevez - October 2009
JUG Lausanne
 
Les outils d’automatisation de tests (scripting) : Adoption et enjeux (comple...
Les outils d’automatisation de tests (scripting) : Adoption et enjeux (comple...Les outils d’automatisation de tests (scripting) : Adoption et enjeux (comple...
Les outils d’automatisation de tests (scripting) : Adoption et enjeux (comple...
AQT-presentations
 
10 bonnes pratiques pour des apps et sites ecommerce sans bug
10 bonnes pratiques pour des apps et sites ecommerce sans bug10 bonnes pratiques pour des apps et sites ecommerce sans bug
10 bonnes pratiques pour des apps et sites ecommerce sans bug
StardustTesting
 
Les nouveautés du Framework .NET 4.5
Les nouveautés du Framework .NET 4.5Les nouveautés du Framework .NET 4.5
Les nouveautés du Framework .NET 4.5
Microsoft
 
Comment bien tester son site RWD ?
Comment bien tester son site RWD ?Comment bien tester son site RWD ?
Comment bien tester son site RWD ?
StardustTesting
 
20091008 Tests Interaces Web Riches Selenium
20091008   Tests Interaces Web Riches Selenium20091008   Tests Interaces Web Riches Selenium
20091008 Tests Interaces Web Riches Selenium
GreenIvory
 
Les nouveautés de Visual Studio 11
Les nouveautés de Visual Studio 11Les nouveautés de Visual Studio 11
Les nouveautés de Visual Studio 11
Microsoft
 
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
Guillaume Deshayes
 
10 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 810 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 8
Microsoft
 
Industrialisation des développements logiciels
Industrialisation des développements logicielsIndustrialisation des développements logiciels
Industrialisation des développements logiciels
Sylvain Leroy
 
JFTL2015 - Tester une application mobile de A à Z
JFTL2015 - Tester une application mobile de A à ZJFTL2015 - Tester une application mobile de A à Z
JFTL2015 - Tester une application mobile de A à Z
Cedric GAUTIER
 
facile les tests utilisateur d'accessibilité
facile les tests utilisateur d'accessibilitéfacile les tests utilisateur d'accessibilité
facile les tests utilisateur d'accessibilité
vincent aniort
 
SharePoint 2010 & Team Foundation Server
SharePoint 2010 & Team Foundation ServerSharePoint 2010 & Team Foundation Server
SharePoint 2010 & Team Foundation ServerPhilippe Sentenac
 
Mémoire - L'automatisation des tests fonctionnels - Emeline Simon
Mémoire - L'automatisation des tests fonctionnels - Emeline SimonMémoire - L'automatisation des tests fonctionnels - Emeline Simon
Mémoire - L'automatisation des tests fonctionnels - Emeline Simon
Emeline Simon
 
JFTL2013 - Retour d'expérience PagesJaunes
JFTL2013 - Retour d'expérience PagesJaunesJFTL2013 - Retour d'expérience PagesJaunes
JFTL2013 - Retour d'expérience PagesJaunesCedric GAUTIER
 
Cerberus Testing
Cerberus TestingCerberus Testing
Cerberus Testing
CIVEL Benoit
 

Tendances (19)

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 2
 
Cerberus, un outil pour l'automatisation des tests fonctionnels
Cerberus, un outil pour l'automatisation des tests fonctionnelsCerberus, un outil pour l'automatisation des tests fonctionnels
Cerberus, un outil pour l'automatisation des tests fonctionnels
 
Automatisation des tests
Automatisation des testsAutomatisation des tests
Automatisation des tests
 
Initiation aux tests fonctionnels - Philippe Kernevez - October 2009
Initiation aux tests fonctionnels - Philippe Kernevez - October 2009Initiation aux tests fonctionnels - Philippe Kernevez - October 2009
Initiation aux tests fonctionnels - Philippe Kernevez - October 2009
 
Les outils d’automatisation de tests (scripting) : Adoption et enjeux (comple...
Les outils d’automatisation de tests (scripting) : Adoption et enjeux (comple...Les outils d’automatisation de tests (scripting) : Adoption et enjeux (comple...
Les outils d’automatisation de tests (scripting) : Adoption et enjeux (comple...
 
10 bonnes pratiques pour des apps et sites ecommerce sans bug
10 bonnes pratiques pour des apps et sites ecommerce sans bug10 bonnes pratiques pour des apps et sites ecommerce sans bug
10 bonnes pratiques pour des apps et sites ecommerce sans bug
 
Les nouveautés du Framework .NET 4.5
Les nouveautés du Framework .NET 4.5Les nouveautés du Framework .NET 4.5
Les nouveautés du Framework .NET 4.5
 
Comment bien tester son site RWD ?
Comment bien tester son site RWD ?Comment bien tester son site RWD ?
Comment bien tester son site RWD ?
 
20091008 Tests Interaces Web Riches Selenium
20091008   Tests Interaces Web Riches Selenium20091008   Tests Interaces Web Riches Selenium
20091008 Tests Interaces Web Riches Selenium
 
Les nouveautés de Visual Studio 11
Les nouveautés de Visual Studio 11Les nouveautés de Visual Studio 11
Les nouveautés de Visual Studio 11
 
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
 
10 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 810 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 8
 
Industrialisation des développements logiciels
Industrialisation des développements logicielsIndustrialisation des développements logiciels
Industrialisation des développements logiciels
 
JFTL2015 - Tester une application mobile de A à Z
JFTL2015 - Tester une application mobile de A à ZJFTL2015 - Tester une application mobile de A à Z
JFTL2015 - Tester une application mobile de A à Z
 
facile les tests utilisateur d'accessibilité
facile les tests utilisateur d'accessibilitéfacile les tests utilisateur d'accessibilité
facile les tests utilisateur d'accessibilité
 
SharePoint 2010 & Team Foundation Server
SharePoint 2010 & Team Foundation ServerSharePoint 2010 & Team Foundation Server
SharePoint 2010 & Team Foundation Server
 
Mémoire - L'automatisation des tests fonctionnels - Emeline Simon
Mémoire - L'automatisation des tests fonctionnels - Emeline SimonMémoire - L'automatisation des tests fonctionnels - Emeline Simon
Mémoire - L'automatisation des tests fonctionnels - Emeline Simon
 
JFTL2013 - Retour d'expérience PagesJaunes
JFTL2013 - Retour d'expérience PagesJaunesJFTL2013 - Retour d'expérience PagesJaunes
JFTL2013 - Retour d'expérience PagesJaunes
 
Cerberus Testing
Cerberus TestingCerberus Testing
Cerberus Testing
 

En vedette

Symphonie pour PHP industrialisé en agilité majeure
Symphonie pour PHP industrialisé en agilité majeureSymphonie pour PHP industrialisé en agilité majeure
Symphonie pour PHP industrialisé en agilité majeure
Jonathan Bonzy
 
Tests utilisateurs mon amour (a11y)
Tests utilisateurs mon amour (a11y)Tests utilisateurs mon amour (a11y)
Tests utilisateurs mon amour (a11y)
vincent aniort
 
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-end
François Petitit
 
Javascript in a continuous integration environment
Javascript in a continuous integration environmentJavascript in a continuous integration environment
Javascript in a continuous integration environmentFrederic Dewinne
 
Xdt Tests Driven Architecture Process V1.0
Xdt Tests Driven Architecture Process V1.0Xdt Tests Driven Architecture Process V1.0
Xdt Tests Driven Architecture Process V1.0
guestee837a
 
La qualité au-delà du code - ConFoo 2012
La qualité au-delà du code - ConFoo 2012La qualité au-delà du code - ConFoo 2012
La qualité au-delà du code - ConFoo 2012
Jean-Marc Fontaine
 
Site web fonctionnel et élastique sur Azure
Site web fonctionnel et élastique sur AzureSite web fonctionnel et élastique sur Azure
Site web fonctionnel et élastique sur Azure
Microsoft Technet France
 
Marathon De L Industrialisation
Marathon De L IndustrialisationMarathon De L Industrialisation
Marathon De L Industrialisation
PHPPRO
 
Auditer son code pour plus de sécurité.
Auditer son code pour plus de sécurité. Auditer son code pour plus de sécurité.
Auditer son code pour plus de sécurité.
Damien Seguy
 
Intégration Continue PHP avec Jenkins CI
Intégration Continue PHP avec Jenkins CIIntégration Continue PHP avec Jenkins CI
Intégration Continue PHP avec Jenkins CI
Hugo Hamon
 
Intégration continue des projets PHP avec Jenkins
Intégration continue des projets PHP avec JenkinsIntégration continue des projets PHP avec Jenkins
Intégration continue des projets PHP avec JenkinsHugo Hamon
 

En vedette (11)

Symphonie pour PHP industrialisé en agilité majeure
Symphonie pour PHP industrialisé en agilité majeureSymphonie pour PHP industrialisé en agilité majeure
Symphonie pour PHP industrialisé en agilité majeure
 
Tests utilisateurs mon amour (a11y)
Tests utilisateurs mon amour (a11y)Tests utilisateurs mon amour (a11y)
Tests utilisateurs mon amour (a11y)
 
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-end
 
Javascript in a continuous integration environment
Javascript in a continuous integration environmentJavascript in a continuous integration environment
Javascript in a continuous integration environment
 
Xdt Tests Driven Architecture Process V1.0
Xdt Tests Driven Architecture Process V1.0Xdt Tests Driven Architecture Process V1.0
Xdt Tests Driven Architecture Process V1.0
 
La qualité au-delà du code - ConFoo 2012
La qualité au-delà du code - ConFoo 2012La qualité au-delà du code - ConFoo 2012
La qualité au-delà du code - ConFoo 2012
 
Site web fonctionnel et élastique sur Azure
Site web fonctionnel et élastique sur AzureSite web fonctionnel et élastique sur Azure
Site web fonctionnel et élastique sur Azure
 
Marathon De L Industrialisation
Marathon De L IndustrialisationMarathon De L Industrialisation
Marathon De L Industrialisation
 
Auditer son code pour plus de sécurité.
Auditer son code pour plus de sécurité. Auditer son code pour plus de sécurité.
Auditer son code pour plus de sécurité.
 
Intégration Continue PHP avec Jenkins CI
Intégration Continue PHP avec Jenkins CIIntégration Continue PHP avec Jenkins CI
Intégration Continue PHP avec Jenkins CI
 
Intégration continue des projets PHP avec Jenkins
Intégration continue des projets PHP avec JenkinsIntégration continue des projets PHP avec Jenkins
Intégration continue des projets PHP avec Jenkins
 

Similaire à Octo RefCard test front-end

RefCard Tests sur tous les fronts
RefCard Tests sur tous les frontsRefCard Tests sur tous les fronts
RefCard Tests sur tous les fronts
OCTO Technology
 
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 Maven
Arnaud Héritier
 
Industrialisez vos projets Php
Industrialisez vos projets Php Industrialisez vos projets Php
Industrialisez vos projets Php ALTER WAY
 
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
Microsoft
 
JavaScript Devoxx France 2013
JavaScript Devoxx France 2013JavaScript Devoxx France 2013
JavaScript Devoxx France 2013Romain Linsolas
 
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
 
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
 
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
Xavier NOPRE
 
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
Frédéric Harper
 
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013Julien Jakubowski
 
Scub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libreScub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libre
Stéphane Traumat
 
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
ENSET, Université Hassan II Casablanca
 
Selenium WebDriver avec Java
Selenium WebDriver avec Java Selenium WebDriver avec Java
Selenium WebDriver avec Java
Ahmed HARRAK
 
Management des vulnérabilités - Greenbone OpenVas
Management des vulnérabilités - Greenbone OpenVasManagement des vulnérabilités - Greenbone OpenVas
Management des vulnérabilités - Greenbone OpenVas
EyesOpen Association
 
Anatomie du test
Anatomie du testAnatomie du test
Anatomie du test
Frederic Hardy
 
Support de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec SpringSupport de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec Spring
ENSET, Université Hassan II Casablanca
 
Azure devops
Azure devopsAzure devops
Azure devops
Maxime Eglem
 
Conformiq
ConformiqConformiq
Conformiq
Soukaina Boujadi
 
Connected Developper Ep2 (20 04-2013)
Connected Developper Ep2 (20 04-2013)Connected Developper Ep2 (20 04-2013)
Connected Developper Ep2 (20 04-2013)Badr Hakkari
 

Similaire à Octo RefCard test front-end (20)

RefCard Tests sur tous les fronts
RefCard Tests sur tous les frontsRefCard Tests sur tous les fronts
RefCard Tests sur tous les fronts
 
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...
 
20090615 - Ch'ti JUG - Apache Maven
20090615 - Ch'ti JUG - Apache Maven20090615 - Ch'ti JUG - Apache Maven
20090615 - Ch'ti JUG - Apache Maven
 
Industrialisez vos projets Php
Industrialisez vos projets Php Industrialisez vos projets Php
Industrialisez vos projets Php
 
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
 
JavaScript Devoxx France 2013
JavaScript Devoxx France 2013JavaScript Devoxx France 2013
JavaScript Devoxx France 2013
 
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...
 
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...
 
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
 
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
 
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
 
Scub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libreScub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libre
 
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
 
Selenium WebDriver avec Java
Selenium WebDriver avec Java Selenium WebDriver avec Java
Selenium WebDriver avec Java
 
Management des vulnérabilités - Greenbone OpenVas
Management des vulnérabilités - Greenbone OpenVasManagement des vulnérabilités - Greenbone OpenVas
Management des vulnérabilités - Greenbone OpenVas
 
Anatomie du test
Anatomie du testAnatomie du test
Anatomie du test
 
Support de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec SpringSupport de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec Spring
 
Azure devops
Azure devopsAzure devops
Azure devops
 
Conformiq
ConformiqConformiq
Conformiq
 
Connected Developper Ep2 (20 04-2013)
Connected Developper Ep2 (20 04-2013)Connected Developper Ep2 (20 04-2013)
Connected Developper Ep2 (20 04-2013)
 

Dernier

Les logiciels libres : une opportunite pour votre entreprise?
Les logiciels libres : une opportunite pour votre entreprise?Les logiciels libres : une opportunite pour votre entreprise?
Les logiciels libres : une opportunite pour votre entreprise?
Asher256
 
Utiliser les outils numériques créatifs pour valoriser sa médiathèque
Utiliser les outils numériques créatifs pour valoriser sa médiathèqueUtiliser les outils numériques créatifs pour valoriser sa médiathèque
Utiliser les outils numériques créatifs pour valoriser sa médiathèque
cspirin
 
Google - les nouvelles regles du jeu.pptx
Google - les nouvelles regles du jeu.pptxGoogle - les nouvelles regles du jeu.pptx
Google - les nouvelles regles du jeu.pptx
Philippe YONNET
 
Netflix, OCS et Disney avec ou sans engagement
Netflix, OCS et Disney avec ou sans engagementNetflix, OCS et Disney avec ou sans engagement
Netflix, OCS et Disney avec ou sans engagement
ABO IPTV PREMIUM
 
Stratégies pour accroître la visibilité et l'engagement de votre blog
Stratégies pour accroître la visibilité et l'engagement de votre blogStratégies pour accroître la visibilité et l'engagement de votre blog
Stratégies pour accroître la visibilité et l'engagement de votre blog
Asher256
 
Requetes ecommerce - les différences US vs Europe.pptx
Requetes ecommerce - les différences US vs Europe.pptxRequetes ecommerce - les différences US vs Europe.pptx
Requetes ecommerce - les différences US vs Europe.pptx
Philippe YONNET
 
Actu du SEO - Matin Népérien Lille - Agence Neper
Actu du SEO - Matin Népérien Lille - Agence NeperActu du SEO - Matin Népérien Lille - Agence Neper
Actu du SEO - Matin Népérien Lille - Agence Neper
Philippe YONNET
 

Dernier (7)

Les logiciels libres : une opportunite pour votre entreprise?
Les logiciels libres : une opportunite pour votre entreprise?Les logiciels libres : une opportunite pour votre entreprise?
Les logiciels libres : une opportunite pour votre entreprise?
 
Utiliser les outils numériques créatifs pour valoriser sa médiathèque
Utiliser les outils numériques créatifs pour valoriser sa médiathèqueUtiliser les outils numériques créatifs pour valoriser sa médiathèque
Utiliser les outils numériques créatifs pour valoriser sa médiathèque
 
Google - les nouvelles regles du jeu.pptx
Google - les nouvelles regles du jeu.pptxGoogle - les nouvelles regles du jeu.pptx
Google - les nouvelles regles du jeu.pptx
 
Netflix, OCS et Disney avec ou sans engagement
Netflix, OCS et Disney avec ou sans engagementNetflix, OCS et Disney avec ou sans engagement
Netflix, OCS et Disney avec ou sans engagement
 
Stratégies pour accroître la visibilité et l'engagement de votre blog
Stratégies pour accroître la visibilité et l'engagement de votre blogStratégies pour accroître la visibilité et l'engagement de votre blog
Stratégies pour accroître la visibilité et l'engagement de votre blog
 
Requetes ecommerce - les différences US vs Europe.pptx
Requetes ecommerce - les différences US vs Europe.pptxRequetes ecommerce - les différences US vs Europe.pptx
Requetes ecommerce - les différences US vs Europe.pptx
 
Actu du SEO - Matin Népérien Lille - Agence Neper
Actu du SEO - Matin Népérien Lille - Agence NeperActu du SEO - Matin Népérien Lille - Agence Neper
Actu du SEO - Matin Népérien Lille - Agence Neper
 

Octo RefCard test front-end

  • 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. 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