Embed Size (px)
Citation preview
THEgraveSE
PREacuteSENTEacuteE Agrave
LrsquoUNIVERSITEacute DU QUEacuteBEC Agrave CHICOUTIMI
COMME EXIGENCE PARTIELLE
DU DOCTORAT EN INFORMATIQUE
PAR
OUSSAMA BEROUAL
DETECTION ET CORRECTION AUTOMATIQUE DES BUGS DrsquoINTERFACE
DANS LES APPLICATIONS WEB
AOUcircT 2018
REacuteSUMEacute
Les problegravemes de mise en page dans les interfaces des applications web appeleacutes laquo bugsdrsquointerface raquo croissent de jour en jour avec la populariteacute grandissante de ces applications etdonnent lieu agrave des ennuis drsquoaffichage embarrassants et des difficulteacutes allant jusqursquoagrave lrsquoentrave defonctionnaliteacute de lrsquointerface utilisateur Le nombre consideacuterable drsquoutilisateurs des applicationsweb incapables de pallier agrave ces contraintes rend lrsquoenjeu tregraves grand Malheureusement lessolutions efficaces apporteacutees agrave ce sujet sont tregraves rares
Nous proposons dans ce travail de thegravese une nouvelle approche permettant la speacutecification ducontenu attendu drsquoune interface la veacuterification automatique du respect de la speacutecification etplus particuliegraverement lrsquooctroi drsquoun verdict deacutetailleacute et utile lors drsquoune violation
Lrsquoapproche proposeacutee est une technique geacuteneacuterique de localisation de deacutefauts baseacutee sur leconcept de laquo reacuteparation raquo ou laquo correction raquo et applicable avec diffeacuterents langages de speacutecifi-cation y compris la logique propositionnelle Nous portons une attention particuliegravere agrave sonutilisation dans la deacutetection des deacutefauts de mise en page dans les applications Web
TABLE DES MATIEgraveRES
Reacutesumeacute ii
Table des matiegraveres iii
Table des figures v
Liste des tableaux viii
Introduction 1
1 Notions geacuteneacuterales sur le web 711 Le fonctionnement du web 712 Le langage HTML 1013 Les Cascading StyleSheets (CSS) 1514 JavaScript 1815 Le fonctionnement interne des navigateurs web 23
2 Les bugs drsquointerface dans les applications web 3521 Types drsquoapplications web 3522 Types de bugs drsquointerface 37
3 Eacutetat de lrsquoart 6331 Outils de test 6332 Approche visuelle 7133 Approche deacuteclarative 7934 Outils RWD 8835 Discussion sur les approches exisantes 92
4 Deacutetection de bugs drsquointerface 9641 Un interpreacuteteur pour les proprieacuteteacutes Cornipickle 9742 Le langage Cornipickle 10343 Exprimer des proprieacuteteacutes avec Cornipickle 114
5 Deacutetection avanceacutee bugs comportementaux et RWD 11951 Bugs comportementaux dans le Beep Store 120
iv
52 Solutions actuelles 12253 Solution proposeacutee 12554 Expeacuteriences et reacutesultats 127
6 Vers un meilleur feedback pour lrsquoutilisateur 13761 Geacuteneacuteration de contre-exemple les teacutemoins 13862 Localisation des erreurs dans les applications web 14363 Calcul de la reacuteparation 15464 Exemples 159
7 Conclusion geacuteneacuterale 162
Bibliographie 166
TABLE DES FIGURES
11 Exemple drsquoune requecircte HTTP 912 Exemple drsquoune reacuteponse HTTP 1013 Un exemple simple de page HTML contenant un grand titre et un paragraphe 1214 Le flux entre les composants du navigateur pour la reacutecupeacuteration et le traitement
drsquoune page web dans le navigateur 2615 Un exemple simple de page web illustrant le rendu dans un navigateur 2716 Les processus de traitement de HTML et CSS au niveau du moteur de rendu
du navigateur 2817 Un arbre du modegravele drsquoobjet DOM 2918 Un exemple de fichier CSS simple 2919 Arbre du modegravele drsquoobjet CSSOM 30110 Arbre de rendu 31111 Les eacutetapes et processus de la construction des arbres DOM CSSOM et de
lrsquoarbre de rendu 32112 Un second exemple simple illustrant le processus de mise en page par le
navigateur 33113 Vue globale du flux de reacutecupeacuteration de traitement et drsquoaffichage drsquoune page web 34
21 Exemple drsquoeacuteleacutements mal aligneacutes le cadre blanc est horizontalement malaligneacute (LiveShout) le menu Interests est deacutecaleacute drsquoun pixel par apport auxautres menus (LinkedIn) 39
22 Exemple drsquoeacuteleacutements qui se chevauchent 4123 Le contenu de la page est dissimuleacute de lrsquointerface en raison de son prolonge-
ment au-delagrave des dimensions du conteneur parent 4224 Le bug Facebook La zone de texte permettant au utilisateur de taper un
message instantaneacute (agrave gauche) disparaicirct soudainement (agrave droite) 4325 Le bug laquo ton sur ton raquo Les eacuteleacutements de menu sont pousseacutes en dehors de leurs
conteneur et disparaissent (a) le texte du lien est de la mecircme couleur que lefond reacuteveacuteleacute en le seacutelectionnant avec la souris (b) 44
26 Un eacuteleacutement est placeacute incorrectement sur un autre 4527 Un exemple drsquointerface briseacutee en raison de lrsquoeacutechec du chargement de certaines
ressources 4628 Exemple drsquointerface briseacute dans le site Digital Ocean 4729 Exemple drsquoHTML mal formeacute 47
vi
211 Incoheacuterence dans le champ de formulaire du site CallingCards 48210 Exemple drsquoeacuteleacutements inaccessibles 57212 Exemple de mojibake (a) donneacutees UTF-8 afficheacutees comme Cp1252 (b)
donneacutees Cp1252 afficheacutees comme UTF-8 58213 Exemples de Mojibake dans Doodle 59214 Des donneacutees extraites de la base de donneacutees sont incorrectement eacutechappeacutees
dans IEEE PDF eXpress on constate la preacutesence de plusieurs apostrophes 60215 Sur cette page YouTube du code JavaScript est afficheacute au lieu drsquoecirctre interpreacuteteacute 60216 Eacuteleacutements mobiles la position et la bordure de la zone du texte changent lors
de la saisie du texte (NSERC) 60217 Confusion connexiondeacuteconnexion dans une page web le contenu pour un
utilisateur connecteacute (en haut de la page a droite) coexiste avec le formulairede connexion reacuteserveacute aux utilisateurs qui ne sont pas en principe connecteacutes 61
218 Incoheacuterences dans le reacutesultat de la recherche 61219 Code CSS avec des conditions sur la largeur de lrsquoappareil Il srsquoagit drsquoun
exemple de media queries 61220 Le bug de deacutepassement drsquoeacuteleacutements sur le site httpswwwthelilycom 62221 Le bug de deacutepassement du viewport sur le site httpswwwslaveryfootprint
org 62222 Le bug de couverture drsquoeacuteleacutements sur le site httpswwwanthedesignfr 62
31 Exemple de code pour Selenium WebDriver 6432 Commandes de base de Capybara [30] 6633 Exemple drsquoutilisation de Watij [71] 6734 Page de connexion (login) de Yahoo [71] 6735 Exemple simple drsquoun test JUnit Watij WebSpec [7] 6836 Exemple de Sahi script [18] 7037 Architecture de Sahi (figure tireacutee de [21]) 7038 Le fonctionnement geacuteneacuteral de lrsquooutil drsquoanalyse WebSee 7439 Outputs de WebSee eacuteleacutements HTML deacutefectueux 74310 Exemple de traitement drsquoimage avec FLB (figure tireacutee de [63]) 76311 Exemple drsquoutilisation de Sikuli (figure tireacutee de [39]) 78312 Exemple avec Auckland (figure tireacutee de [1]) 81313 Une simple speacutecification avec Auckland [1] 81314 Exemple drsquoune boicircte de dialogue pour enregistrer un fichier image 83315 Une simple speacutecification deacuteclarative dans le langage Adam du modegravele de
proprieacuteteacute pour le dialogue dans Figure314 [56] 84316 Une simple speacutecification avec Eve [56] 85317 Exemple drsquoune speacutecification Galen [9] 89318 Exemple drsquoun script Automotion [70] 90319 Exemple de faux positif avec PhantomCSS 94
41 Architecture et interactions de Cornipickle 100
vii
42 Une page simple seacuterialiseacutee en JSON 10143 Une capture drsquoeacutecran de Cornipickle en action 10244 Un document DOM simple (a) Structure HTML (b) Repreacutesentation en arbre
DOM Seuls les noms des eacuteleacutements sont afficheacutes les attributs et valeursrestants sont omis pour plus de clarteacute 111
45 Exemple de code jQuery veacuterifiant que deux eacuteleacutements ont le mecircme texte 116
51 Le bug de connexions multiples Un utilisateur deacutejagrave connecteacute se voit proposerlrsquooption de se reconnecter 121
52 Le bug des paniers multiples Des boutons pour creacuteer un panier et ajouter desarticles au panier coexistent sur la mecircme page 121
53 Le bug de la suppression drsquoun panier inexistant Des boutons pour retirer dupanier et creacuteer un panier coexistent sur la mecircme page 122
54 Flux drsquointeraction et de seacuterialisation (Crawljax-Cornipickle) 12655 Le code neacutecessaire pour attraper le bug des connexions multiples en utilisant
Crawljax sans Cornipickle 12956 Temps de calcul de lrsquointerpreacuteteur en fonction du nombre drsquoeacuteleacutements dans la
page 13557 Temps de calcul incluant la seacuterialisation de la page par la sonde JavaScript et
lrsquointerpreacutetation de la proprieacuteteacute en fonction du nombre drsquoeacuteleacutements dans la page136
61 Exemple drsquoune erreur de mise en page Web simple (a) lrsquoun des eacuteleacutementsde la liste est incorrectement aligneacute avec les autres (b) un teacutemoin (witness)produit par lrsquooutil Cornipickle 143
62 Illustration du concept de reacuteparation principale 14663 Quelques reacuteparations possibles pour un coloriage de graphe deacutefectueux 14964 Trois reacuteparations pour lrsquoexemple web 15365 Eacuteleacutements mal aligneacutes capture et suggestion de correction 15966 Eacuteleacutements qui se chevauchent capture et suggestion de correction 16067 Eacuteleacutement qui deacuteborde de son conteneur capture et suggestion de correction 161
LISTE DES TABLEAUX
11 Statistiques des parts drsquoutilisation des navigateurs dans le monde entre mars2015 et mars 2016 24
21 Sites et applications web pour lesquelles au moins un bug de mise en page aeacuteteacute trouveacute 38
31 Limites et diffeacuterences entre trois outils majeurs des approches existantes 95
41 La grammaire BNF pour Cornipickle (Partie I) 10442 La grammaire BNF pour Cornipickle (Partie II) 10643 Extensions de la grammaire BNF pour Cornipickle 10844 La seacutemantique formelle de Cornipickle aaprime isin A sont les noms drsquoattributs
DOM v isin V est une valeur drsquoattribut c isin C est un seacutelecteur CSS ξ et ξ prime
sont des noms de variables ν ν prime isin N sont les nœuds DOM et ϕ et ψ sont deseacutenonceacutes Cornipickle quelconques Lorsque t est vide Always srsquoeacutevalue agrave V raiet Eventually et Next srsquoevaluent agrave Faux 113
61 La deacutefinition reacutecursive de la fonction de calcul du verdict ω 140
INTRODUCTION
Le mot bug qui signifie en anglais laquo insecte raquo et qui a eacuteteacute franciseacute pour devenir laquo bogue raquo
a vu le jour dans les anneacutees quarante agrave la suite de la panne qursquoa connu le dernier cri des
ordinateurs de lrsquoeacutepoque le Mark II Comme son nom lrsquoindique la cause eacutetait un insecte qui
srsquoeacutetait introduit dans un relais eacutelectromeacutecanique de celui-ci La panne fut deacutecouverte par la
brillante matheacutematicienne et pionniegravere de la programmation Grace Hopper Il srsquoagit du tout
premier vrai bug informatique car on utilisait deacutejagrave le mot pour deacutesigner des problegravemes dans les
appareils eacutelectriques [17] Depuis le mot bug est devenu synonyme de tout dysfonctionnement
ou anomalie drsquoun programme
Le monde drsquoaujourdrsquohui est piloteacute par des ordinateurs dans tous les domaines eacutenergeacutetique
judiciaire sanitaire militaire etc De ce fait la manifestation drsquoun bug peut entraicircner des
deacutesordres des perturbations voire des catastrophes Les trois derniegraveres deacutecennies ont connu
une multitude de bugs de grande envergure
Parmi les plus importants mentionnons une interruption en 2003 de plusieurs jours dans
lrsquoalimentation en eacutelectriciteacute drsquoune cinquantaine de millions drsquoameacutericains Lors de cet incident
une douzaine de personnes ont mecircme trouveacute la mort empoisonneacutees au monoxyde de carbone
en tentant de remeacutedier agrave ce problegraveme par des geacuteneacuterateurs au diesel On a compteacute plus de
2
six milliards de dollars de deacutegacircts mateacuteriels A lrsquoorigine de cette panne une paralysie totale
provoqueacutee par deux logiciels chargeacutes du controcircle de la production qui essayaient de modifier
le mecircme fichier simultaneacutement [25 3 16 29]
Mentionnons eacutegalement des centaines drsquoaccidents de la route meurtriers survenus entre 2009
et 2011 et dont les victimes eacutetaient les proprieacutetaires de la Lexus ES350 du constructeur Toyota
Les conducteurs perdaient la maicirctrise du veacutehicule une fois qursquoil atteignait la vitesse de 150
kmh puisque ce seuil entraicircnait la deacutesactivation de la peacutedale de frein Durant deux anneacutees les
chauffeurs sont accuseacutes par Toyota de confondre les peacutedales de frein et drsquoacceacuteleacuteration alors
qursquoune expertise finit par reacuteveacuteler une deacutefaillance dans lrsquoordinateur de bord Les pertes sont
estimeacutees dans ce cas agrave 24 milliards de dollars [32 28]
Parmi les bugs informatiques les plus meurtriers on compte eacutegalement un dysfonctionnement
en 1987 de la machine de radiotheacuterapie Therac 25 chargeacutee drsquoadministrer aux patients la
quantiteacute de radioactiviteacute qui leur est prescrite Agrave certaines occasions la machine leur donne
vingt fois la dose mortelle occasionnant de ce fait la blessure drsquoun patient et la mort de
cinq autres Le logiciel destineacute agrave veiller au bon positionnement et agrave la preacutesence de la plaque
meacutetallique censeacutee recevoir le rayon pour le filtrer et le concentrer a malheureusement failli agrave
son rocircle [14]
Tous ces exemples sont des bugs aux conseacutequences catastrophiques Heureusement tous les
bugs ne sont pas aussi deacutevastateurs mais ils peuvent neacuteanmoins srsquoaveacuterer nuisibles et reacutepandus
Crsquoest le cas drsquoun type de bug auquel les informaticiens font face agrave chaque instant agrave savoir les
bugs de mise en page dans les interfaces des applications web qui se trouvent agrave lrsquoorigine des
problegravemes drsquoaffichage rencontreacutes quotidiennement dans les interfaces web Agrave cet eacutegard des
chiffres datant de 2015 lieacutes agrave Internet donnent matiegravere agrave reacuteflexion Le reacuteseau compte plus de
trois milliards drsquointernautes dont deux milliards sont inscrits sur les reacuteseaux sociaux Plus de
3
huit cent mille nouveaux sites Internet sont mis en ligne chaque jour [15] [4] Par conseacutequent
le nombre drsquoutilisateurs des applications web est consideacuterable et le nombre de personnes
toucheacutees par les bugs drsquointerfaces reacutesultant de ces applications est eacutenorme Lrsquoenjeu de ce fait
est tregraves grand sur tous les plans
La bonne conduite drsquoune application web exige une bonne apparence visuelle des pages web
sans aucune deacutefaillance drsquoaffichage facilitant ainsi lrsquoutilisation de lrsquoapplication et offrant un
meilleur service agrave lrsquoutilisateur Trois types de problegravemes drsquoaffichage sont releveacutes un premier
type qualifieacute de non gecircnant tel qursquoun deacutebordement drsquoun paragraphe de sa bordure ou un
problegraveme drsquoalignement ou mecircme une sorte de caractegravere speacutecial mal afficheacute (mojibake) Un
deuxiegraveme type qualifieacute de gecircnant telle qursquoune image deacuteplaceacutee qui couvre un paragraphe ou
une autre partie de la page
Par contre le troisiegraveme type est plus grave et peut conduire agrave un blocage de lrsquoapplication dont
les effets risquent drsquoecirctre seacuterieux compromettant la fonctionnaliteacute de lrsquointerface utilisateur Un
4
exemple de bug qui affecte la fonctionnaliteacute de lrsquoapplication Le mauvais fonctionnement des
boutons de nombreuses applications montrent des eacuteleacutements superposeacutes qui se comportent
comme des laquo pop-ups raquo dans la fenecirctre Cependant dans un certain nombre de cas les
boutons de ces fenecirctres sont inopeacuterants cliquer dessus plusieurs fois ne produit aucun effet
Ce problegraveme a eacuteteacute observeacute dans des sites aussi varieacutes qursquoAmerican Airlines Dropbox et
BitBucket Dans certains cas lrsquoutilisateur est effectivement bloqueacute dans la fenecirctre contextuelle
ou la page qui contient le bouton et ne peut pas continuer sans forcer un rechargement complet
du document
Cependant les travaux visant agrave reacutesoudre les problegravemes drsquointerface se font tregraves rares Halleacute et al
[51] sont parmi les premiers agrave srsquointeacuteresser agrave ce genre de problegraveme Mahajan et Halfond [58]
ont abordeacute la probleacutematique en proposant une approche baseacutee sur la vision par ordinateur et
le traitement drsquoimages Walsh et al [74 72] ont eacutegalement traiteacute ce genre de bugs dans les
applications dites responsives (responsive web design)
Deux cateacutegories drsquoutilisateurs sont confronteacutees agrave ces types de problegravemes lrsquoune repreacutesente
les speacutecialistes du domaine (les informaticiens) chez lesquels ces types de problegravemes peuvent
trouver leurs solutions apregraves un travail laborieux Lrsquoautre repreacutesente le grand public pour lequel
le deuxiegraveme et le troisiegraveme type de problegraveme constituent des contraintes pour lrsquoexploitation de
la page car la solution dans ce cas exige certaines connaissances (lrsquooutil le langage etc) qui
eacutechappent geacuteneacuteralement au grand public Ce dernier forme la majoriteacute des utilisateurs De ce
fait il est neacutecessaire de lui trouver une solution lui permettant drsquoutiliser les sites web dans
les meilleures conditions possibles Il doit avoir tout simplement sur son eacutecran une interface
correcte sans aucun bug pour qursquoil ne soit pas obliger agrave recourir agrave une technique de correction
qui le deacutepasse Drsquoautant plus que les applications web connaissent une eacutevolution rapide et
commencent agrave conqueacuterir plusieurs domaines (commerce eacutelectronique eacuteducation loisir etc)
et mecircme agrave ecirctre utiliseacutees dans des opeacuterations sensibles telles que les transactions moneacutetaires
5
via internet Ce qui fait drsquoeux des programmes tregraves complexes dynamiques et interactifs En
plus de la rareteacute des meacutethodes de deacutetection de ces bugs pire encore presque rien nrsquoa eacuteteacute
fait pour donner un feedback agrave lrsquoutilisateur Lorsqursquoun bug est trouveacute les solutions actuelles
ne font que retourner laquo vraifaux raquo Dans ce travail nous proposons une nouvelle approche
permettant dans une premiegravere eacutetape de deacutetecter automatiquement les diffeacuterents types de bugs
drsquointerfaces et de les corriger automatiquement dans une deuxiegraveme eacutetape Il srsquoagit drsquoune
approche geacuteneacuterique de localisation de deacutefauts baseacutee sur le concept de reacuteparation
Les objectifs et contributions de cette thegravese sont
1 Proposer un langage pour speacutecifier le contenu attendu drsquoune interface web
2 Deacutecrire un algorithme permettant de veacuterifier automatiquement qursquoune speacutecification est
respecteacutee
3 Deacutecrire une meacutethode permettant de fournir un verdict deacutetailleacute et utile lors drsquoune violation
Cette thegravese comporte six chapitres Le chapitre 1 est deacutedieacute agrave une vue globale sur les notions de
base relatives au web Les diffeacuterents types de bugs ainsi que des exemples reacuteels de chacun de
ces types sont preacutesenteacutes au chapitre 2 Le chapitre 3 est consacreacute aux travaux connexes sur la
deacutetection des bugs drsquointerfaces dans les applications web agrave quelques exemples drsquoapproches et
drsquooutils de deacutetection pour lesquels certains points faibles sont identifieacutes
Dans le chapitre 4 on retrouve lrsquoensemble des informations speacutecifiques agrave lrsquooutil Cornipickle
conccedilu et utiliseacute dans la deacutetection des bugs Ceci inclut la syntaxe du langage et son utili-
sation pour exprimer des proprieacuteteacutes ainsi que les deacutetails de son impleacutementation (objectifs
de conception architecture et sceacutenario typique) Le chapitre 5 est reacuteserveacute agrave lrsquoutilisation de
Cornipickle en combinaison avec un robot drsquoexploration dynamique (crawler) pour deacutetecter
efficacement les bugs comportementaux dans les RIA (Rich Internet Applications) Le dernier
6
chapitre quant agrave lui preacutesente deux meacutecanismes par lesquels un verdict vraifaux peut ecirctre
enrichi drsquoinformation suppleacutementaire pour le deacuteveloppeur Une conclusion geacuteneacuterale mettant
en eacutevidence lrsquointeacuterecirct du travail reacutealiseacute et lrsquoimportance des reacutesultats obtenus clocircture la thegravese
Il est agrave signaler que les contributions preacutesenteacutees dans cette thegravese ont fait lrsquoobjet de publications
dont je suis coauteur
Un premier article dont la contribution consiste en la formalisation de la seacutemantique de
lrsquointerpreacuteteur Cornipickle (section 33 de lrsquoarticle) et la preacutesentation du concept des teacutemoins
(section 43) Cette contribution correspond au chapitre 4 de la thegravese
1 Sylvain Halleacute Nicolas Bergeron Francis Gueacuterin Gabriel Le Breton Oussama Be-
roual Declarative layout constraints for testing web applications J Log Algebr Meth
Program Elsevier 85 (5) 737-758 (2016) [51]
Un deuxiegraveme article preacutesentant le meacutecanisme de transformations (feedback enrichi pour
lrsquoutilisateur) ce qui correspond au chapitre 6
1 Sylvain Halleacute Oussama Beroual Fault Localization in Web Applications via Model
Finding CRESTETAPS 2016 55-67 Elsevier Electronic Notes in Computer Science
(2016) [52]
Un troisiegraveme article sur lrsquoautomatisation des tests avec inteacutegration agrave un crawler ce qui
correspond au chapitre 5
1 Oussama Beroual Francis Gueacuterin Sylvain Halleacute Searching for Behavioural Bugs with
Stateful Test Oracles in Web Crawlers SBSTICSE 2017 ACM 7-13(2017) [38]
CHAPITRE 1
NOTIONS GEacuteNEacuteRALES SUR LE WEB
Deux termes sont drsquousage confondus par le public non averti le terme laquo web raquo et le terme
laquo Internet raquo Ce chapitre est destineacute agrave lever cette confusion puis agrave mettre lrsquoaccent sur la
majoriteacute des aspects drsquoune application web piegravece maicirctresse de notre recherche
11 LE FONCTIONNEMENT DU WEB
Une diffeacuterence de taille entre laquo Internet raquo et laquo web raquo est agrave noter Internet est un reacuteseau composeacute
drsquoune multitude de reacuteseaux connecteacutes entre eux Chacun de ces reacuteseaux est composeacute drsquoun
ensemble drsquoeacutequipements (fibres optiques etc) constituant un support physique drsquoinformation
Le web quant agrave lui est un systegraveme de fichiers veacutehiculeacutes par des serveurs Il repreacutesente le
contenu principal drsquoInternet agrave cocircteacute drsquoautres contenus tels que le courrier eacutelectronique la
messagerie etc Il nrsquoest donc qursquoune des applications drsquoInternet
Un site web est un contenu sur Internet Ce contenu nrsquoest rien drsquoautre qursquoun ensemble de
fichiers (HTML CSS JavaScript etc) heacutebergeacutes sur un serveur Selon leur meacutecanisme de
fonctionnement deux types de site sont distingueacutes les sites statiques dont le contenu est inva-
riable et les sites dynamiques dont le contenu est variable Les premiers ne sont modifiables
8
que par leurs proprieacutetaires alors que les seconds sont modifiables par des utilisateurs autres
que leurs proprieacutetaires La reacutealisation de chacun de ces sites fait appel agrave des technologies bien
deacutetermineacutees telles que HTML CSS et JavaScript
Les acteurs principaux dans le fonctionnement du web sont les clients repreacutesenteacutes par des
navigateurs tels que Firefox Internet Explorer Chrome et Safari et les serveurs repreacutesenteacutes
par les machines abritant les sites web ougrave les fichiers sont stockeacutes Chaque serveur est
identifieacute sur un reacuteseau par son adresse IP (Internet Protocol) et chaque page web est associeacutee
agrave une adresse URL (Uniform Resource Locator ou laquo localisateur uniforme de ressource raquo)
caracteacuteriseacutee par un contenu Une demande drsquoune page web agrave un serveur correspond donc agrave
une demande drsquoun contenu La communication entre les clients et les serveurs est assureacutee
par un protocole appeleacute laquo HTTP raquo (HyperText Transfer Protocol ou laquo protocole de transfert
hypertexte raquo) via lequel les requecirctes sont formuleacutees par les navigateurs aux serveurs [37]
HTTP est donc la langue de conversation entre le navigateur et le serveur La conversation
se fait selon le principe de laquo requecircte-reacuteponse raquo La formulation drsquoune requecircte HTTP par le
navigateur est suivie par une reacuteponse HTTP du serveur apregraves lrsquoavoir deacutecodeacutee et eacutetudieacutee En plus
de la ligne de requecircte deacutefinissant le document demandeacute la meacutethode appliqueacutee et le protocole
utiliseacute une requecircte est composeacutee de deux ensembles de lignes des lignes facultatives et des
lignes optionnelles Les premiegraveres sont les champs drsquoen-tecircte de la requecircte et sont chargeacutees
de fournir des informations suppleacutementaires sur la requecircte ou le client (type de navigateur
systegraveme drsquoexploitation etc) Les secondes forment le corps de la requecircte et sont chargeacutees lors
de lrsquoenvoi de donneacutees au serveur de permettre un envoi de donneacutees par une meacutethode speacutecifique
(lrsquoenvoi de donneacutees au serveur par un formulaire par une meacutethode POST par exemple)
Une requecircte de type GET nomme lrsquoURL agrave reacutecupeacuterer httpuqacca par exemple dans la
figure 11 Le navigateur srsquoidentifie dans lrsquoen-tecircte User-Agent et indique les types de reacuteponses
9
GET HTTP11Host wwwuqaccaConnection keep-aliveUser-Agent Mozilla50 (Windows NT 61 Win64 x64)
AppleWebKit53736 (KHTML like Gecko) Chrome6103163100Safari53736
Upgrade-Insecure-Requests 1Accept texthtmlapplicationxmlq=09Accept-Encoding gzip deflateAccept-Language fr-FRfrq=08en-USq=06enq=04Cookie PHPSESSID=tphmk53fee883355e4eq24dmb5
Upgrade-Insecure-Requests 1Connection keep-aliveHost wwwuqacca
Figure 11 ndash Exemple drsquoune requecircte HTTP
qursquoil accepte dans lrsquoen-tecircte Accept et Accept-Encoding Lrsquoen-tecircte Connection demande
au serveur de garder la connexion TCP ouverte pour drsquoautres requecirctes La requecircte contient
eacutegalement les cookies que le navigateur conserve pour ce domaine Les cookies sont des paires
cleacute-valeur qui suivent lrsquoeacutetat drsquoun site web entre diffeacuterentes demandes de pages Ainsi les
cookies stockent le nom de lrsquoutilisateur connecteacute un numeacutero secret attribueacute agrave lrsquoutilisateur par
le serveur certains paramegravetres de lrsquoutilisateur etc Les cookies sont stockeacutes dans un fichier
texte sur le client et envoyeacutes au serveur agrave chaque demande
La reacuteponse du serveur sur la requecircte de la figure 11 geacuteneacutereacutee et renvoyeacutee est montreacutee dans
figure 12
Lrsquoen-tecircte qui deacutefinit Content-Type en texthtml indique au navigateur de rendre le contenu
de la reacuteponse [13] au format HTML au lieu de le teacuteleacutecharger en tant que fichier Le navigateur
utilise lrsquoen-tecircte pour deacutecider comment interpreacuteter la reacuteponse mais tient eacutegalement compte
drsquoautres facteurs tels que lrsquoextension de lrsquoURL
10
HTTP10 200 OKDate Sat 11 Nov 2017 190323 GMTServer Apache2222 (Unix) mod_ssl2222 OpenSSL101e-fipsX-Powered-By PHP5217Access-Control-Allow-Origin httpswprodluqaccaExpires Thu 19 Nov 1981 085200 GMTCache-Control no-store no-cache must-revalidatePragma no-cacheContent-Type texthtmlX-Cache MISS from w3repuqaccaX-Cache-Lookup MISS from w3repuqacca80Via 10 w3repuqacca (squid3123)Connection close
Figure 12 ndash Exemple drsquoune reacuteponse HTTP
12 LE LANGAGE HTML
Nous allons nous limiter dans ce qui suit agrave la preacutesentation de lrsquoessentiel des eacuteleacutements de base
relatifs agrave ces trois langages agrave savoir les balises pour le HTML les seacutelecteurs pour le CSS et
quelques notions de base sur JavaScript
Le langage HTML laquo HyperText Markup Language raquo en anglais ou laquo langage de balisage
hypertexte raquo en franccedilais ou encore laquo langage de marquage hypertexte raquo dont la creacuteation revient
agrave 1991 est un langage de description de document pouvant ecirctre eacutecrit avec un simple eacutediteur
de texte sans une application speacutecifique et servant agrave produire (sur Internet) des pages Web
drsquoune grande varieacuteteacute de contenus de mise en forme ou drsquoanimations et agrave inseacuterer diffeacuterents
types drsquoeacuteleacutements(texte des liens des images etc) Il permet aussi de deacutesigner au navigateur
certaines speacutecificiteacutes telle que la consideacuteration drsquoun texte comme un paragraphe ou un titre
11
121 STRUCTURE DrsquoUN DOCUMENT
La structure drsquoun document HTML doit satisfaire un scheacutema preacutecis et comprendre un ensemble
de balises speacuteciales essentielles pour tout document HTML Les eacuteleacutements composants la
structure drsquoun document HTML sont les suivants
Doctype Un document HTML deacutebute toujours par le soulignement de la nature du document
crsquoest agrave dire le langage utiliseacute (HTML) en faisant appel agrave la balise lt DOCTYPE htmlgt
Lrsquoeacuteleacutement lthtmlgt Lrsquoeacuteleacutement html comprend deux balises lthtmlgt et lthtmlgt Il deacutefinit
lrsquounique racine du document HTML Tous les autres eacuteleacutements doivent y ecirctre placeacutes
Lrsquoeacuteleacutement ltheadgt Cet eacuteleacutement repreacutesente lrsquoen-tecircte du document et renferme exclusivement
des meacuteta-donneacutees (titre de la page type drsquoencodage utiliseacute etc) exploiteacutees par les navigateurs
pour ameacuteliorer lrsquoergonomie de la page
Lrsquoeacuteleacutement ltbodygt Lrsquoeacuteleacutement body repreacutesente le corps du document Il est toujours placeacute
apregraves lrsquoen-tecircte et contient tout le contenu laquo visible raquo de la page les textes images liens
videacuteos etc
Lrsquoeacuteleacutement lttitlegt La structure srsquoachegraveve par une des meacuteta-donneacutees utiliseacutees par le navigateur
qui constitue le seul eacuteleacutement HTML obligatoire le titre du document placeacute agrave lrsquointeacuterieur de
lrsquoeacuteleacutement head
Voici le document HTML formel le plus simple qursquoon puisse eacutecrire
12
ltDOCTYPE htmlgtlthtmlgt
ltheadgtlttitlegtTitre de la pagelttitlegt
ltheadgtltbodygt
lth1gtUn grand titrelth1gtltpgtUn paragraphltpgt
ltbodygtlthtmlgt
Figure 13 ndash Un exemple simple de page HTML contenant un grand titre et un paragraphe
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtUn document HTMLlttitlegtltheadgtltbodygtlt-- Du contenu pour lrsquoutilisateur ici --gtltbodygtlthtmlgt
Le code HTML dans la figure 13 par exemple indique que lrsquoon souhaite creacuteer un grand titre
(gracircce agrave lrsquoeacuteleacutement h1) et un paragraphe (gracircce agrave lrsquoeacuteleacutement p)
122 VERSIONS DU HTML
Le Web a connu ces deux derniegraveres deacutecennies une eacutevolution extraordinaire En effet lrsquoavanceacutee
technologique a donneacute lieu agrave une ameacutelioration des performances des composants physiques
et une augmentation de la vitesse de connexion entraicircnant par conseacutequent une eacutevolution
13
remarquable des sites Web A leur tour les langages tels que le HTML et le CSS ont eacutegalement
connu une eacutevolution consideacuterable (modifications enrichissements etc) drsquoougrave lrsquoapparition de
nouvelles versions de ces langages bien que lrsquoeacutevolution nrsquoa pas eacuteteacute lineacuteaire ni continue pour
lrsquoutilisateur final Les nouvelles versions sont doteacutees chacune de nouvelles fonctionnaliteacutes et
change parfois totalement la syntaxe du langage La premiegravere version de HTML lrsquoHTML1
a vu le jour en 1991 De nombreuses ameacuteliorations apporteacutees par la suite par le creacuteateur du
HTML jugeacutees inteacuteressantes et importantes lrsquoont conduit en 1994 agrave partager publiquement la
nouvelle version de son langage le HTML2 Drsquoautres versions se sont succeacutedeacutees HTML2
(1995) HTML32 (janvier 1997) HTML4 modifieacutee agrave plusieurs reprises (1997 1998 1999
2000) HTML5 (2014) HTML51 (2016) Parmi toutes ces versions la plus stable celle qui
offre de nouvelles fonctionnaliteacutes et ouvre de nouvelles possibiliteacutes inteacuteressantes est la plus
reacutecente agrave savoir HTML51
123 EacuteLEacuteMENTS DE BASE EN HTML
Le fonctionnement du HTML srsquoappuie sur la notion drsquoeacuteleacutements Ces derniers ont pour rocircle
de structurer du contenu pour donner du sens aux diffeacuterents objets de ce contenu Ils sont
constitueacutes de balises renfermant des attributs et du contenu entre elles
Les balises en HTML Le nombre de balises constituant le HTML est environ 140 Elles
servent agrave fournir au navigateur des indications sur le sens drsquoun eacuteleacutement son interpreacutetation ou
son affichage en plus drsquoautres indications telles que la gestion des formulaires en ligne lrsquoajout
des fichiers multimeacutedias etc On distingue plusieurs types de balises chargeacutee chacune drsquoune
fonction bien deacutetermineacutee bien que certaines nrsquoont de fonction que de seacuteparer des sections drsquoun
document Parmi ces fonctions deacutefinir des titres creacuteer des paragraphes creacuteer des liens vers des
ressources externes inteacutegrer une image dans un document HTML creacuteer des listes Les balises
14
suivantes sont donneacutees agrave titre drsquoexemple ltpgt lth1gt ltimggt ltligt ltagt Les eacuteleacutements
sont constitueacutes geacuteneacuteralement drsquoune paire de balises (ouvrante et fermante) et drsquoun contenu
entre les balises et exceptionnellement drsquoune balise unique dite dans ce cas laquo orpheline raquo
Une balise fermante doit avoir le mecircme nom que la balise ouvrante correspondante (notez la
preacutesence du slash (barre oblique))
Les balises laquo auto fermantes raquo (ou balises vides) Certaines balises sont deacutepourvues de texte
du fait qursquoelles sont ouvrantes et fermantes en mecircme temps les balises AUTO FERMANTES
sont soit des balises de type BLOC (exemple lthr gt) des balises EN LIGNE (exemple
ltimg gt)
Les attributs en HTML Les attributs se placent dans la balise ouvrante drsquoun eacuteleacutement et
possegravedent toujours une valeur (parfois implicite) Ils viennent apporter plus de deacutetails sur les
eacuteleacutements Par exemple lrsquoattribut href (hypertexte reacutefeacuterence) va offrir lrsquoadresse (la valeur) de
la page du lien agrave lrsquoeacuteleacutement ltagt (pour anchor) chargeacute de la creacuteation des liens vers drsquoautres sites
ou drsquoautres pages
Lrsquoeacuteleacutement ltimggt constitueacute drsquoune seule balise orpheline chargeacute drsquoinseacuterer une image dans
une page HTML a besoin de deux attributs src et alt Le premier src assure le nom et
lrsquoemplacement de lrsquoimage (la valeur) alors que lrsquoattribut alt se charge de lrsquoaffichage drsquoun texte
alternatif agrave une indisponibiliteacute de lrsquoimage
Notez bien que les balises et les attributs ne seront jamais afficheacutes par le navigateur il va srsquoen
servir drsquoindication pour justement savoir ce qursquoil doit afficher (un paragraphe un titre un lien
une image etc)
15
13 LES CASCADING STYLESHEETS (CSS)
Le CSS laquo Cascading StyleSheets raquo en anglais ou laquo feuilles de styles en cascade raquo en franccedilais est
un langage informatique apparu en 1996 voueacute agrave la mise en forme du contenu des documents
HTML et XML moyennant des styles pour deacutefinir la taille la couleur ou lrsquoalignement du texte
afin drsquoagreacutementer le reacutesultat visuel final de ce contenu Il est utiliseacute dans la conception de
sites web Le code ci-dessous par exemple indique que les titres h1 eacutecrits en HTML doivent
avoir une couleur verte et une taille de 20px tandis que les paragraphes doivent ecirctre noir et
souligneacutes
h1 color greenfont-size 20px
p color blacktext-decoration underline
Le CSS est donc un autre langage du web venant compleacuteter le HTML Il permet la mise en
page drsquoun contenu et le changement de son apparence en lui appliquant des styles (choisir
la couleur du texte seacutelectionner la police utiliseacutee deacutefinir la taille du texte les bordures le
fond) Lrsquoapparition du HTML a devanceacute lrsquoapparition du CSS de cinq anneacutees peacuteriode dans
laquelle la mise en page eacutetait effectueacutee par le HTML qui consacrait des balises agrave cette fin
telle que la balise ltfont color=aab1c3gt deacutefinissant la couleur du texte par exemple
Le langage CSS est venu reacutepondre agrave la complexiteacute qursquoont connu les pages HTML avec une
augmentation remarquable des balises entre autres conduisant agrave une mise agrave jour des pages
web de plus en plus complexe Agrave lrsquoinstar du HTML le CSS est passeacute par plusieurs versions
16
les plus importantes sont CSS1 CSS20 CSS21 et CSS3
Eacutecriture du code CSS Le code CSS peut ecirctre eacutecrit agrave trois endroits distincts
1 Dans un Lrsquoeacuteleacutement HTML ltstylegt
2 Dans la balise ouvrante des eacuteleacutements HTML(meacutethode la moins recommandeacutee)
3 Dans un fichier CSS seacutepareacute (meacutethode la plus recommandeacutee)
131 PROPRIEacuteTEacuteS ET SEacuteLECTEURS CSS
Les proprieacuteteacutes CSS permettent de choisir quel(s) aspect(s) (ou laquo styles raquo) drsquoun eacuteleacutement HTML
que lrsquoon souhaite modifier
Lrsquoapplication drsquoun style agrave un ou plusieurs eacuteleacutements HTML signifie leurs seacutelections au preacutealable
pour les soumettre agrave un style particulier Lrsquointervention drsquoun seacutelecteur est donc neacutecessaire Le
CSS est fondeacute sur un ensemble de regravegles les seacutelecteurs sont la premiegravere partie drsquoune regravegle CSS
Crsquoest une syntaxe chargeacutee drsquoidentifier les eacuteleacutements du document auxquels la regravegle est deacutedieacutee
(appliqueacutee) Depuis son arriveacutee (1996) le CSS a speacutecifieacute un certain nombre de seacutelecteurs tregraves
accepteacutes de nos jours par les diffeacuterents navigateurs les plus freacutequemment utiliseacutes sont
Les seacutelecteurs de type Ce seacutelecteur cible lrsquoeacuteleacutement du document agrave styler en se basant sur
le nom de lrsquoeacuteleacutement Il doit correspondre dans ce cas au nom de lrsquoeacuteleacutement Exemple pour
mettre en bleu le texte des titres de niveau 1 le seacutelecteur sera h1
h1 color blue
17
Les seacutelecteurs de classe Ce seacutelecteur permet de cibler les eacuteleacutements en fonction de la valeur
de leur attribut class Il permet donc de seacutelectionner tous les eacuteleacutements ayant une certaine classe
Preacuteceacuteder le nom de la classe par un point () suffit pour obtenir le seacutelecteur correspondant
agrave cette classe Exemple la classe ltimportantgt est attribueacutee agrave tous les eacuteleacutements jugeacutes
importants Il suffit de deacutefinir dans le fichier CSS une regravegle stipulant que le texte de tous les
eacuteleacutements posseacutedant la classe Important soit eacutecrit en rouge
ltp class=ImportantgtCoucoultpgt
Important
color red
Les seacutelecteurs drsquoidentifiant Ce seacutelecteur permet de cibler un eacuteleacutement drsquoun document en
fonction de la valeur de son attribut ltidgt Dans un document il ne doit y avoir qursquoun seul
identifiant donneacute agrave lrsquoeacuteleacutement Preacuteceacutedeacute le nom de lrsquoidentifiant par un diegravese () suffit pour
obtenir le seacutelecteur correspondant agrave cet identifiant Exemple Un identifiant Menu est utiliseacute
pour repeacuterer notre menu dans le document Il suffit de deacutefinir dans le fichier CSS une regravegle
indiquant que notre menu ne soit pas afficheacute
ltdiv id=Menugtltdivgt
Menu
display none
18
Le seacutelecteur universel laquo raquo Ce seacutelecteur permet de cibler tous les eacuteleacutements drsquoun document
drsquoougrave lrsquoappellation de seacutelecteur universel Il existe eacutegalement une variante pour ne cibler qursquoun
seul eacuteleacutement
Regroupements des seacutelecteurs Une autre maniegravere de proceacuteder consiste en la reacuteduction de
taille du fichier CSS en appliquant une mecircme regravegle agrave plusieurs seacutelecteurs Ces derniers sont
dans ce cas seacutepareacutes par une virgule () Exemple les eacuteleacutements posseacutedant la classe Important
et les titres lth2gt sont eacutecrits en rouge
Important h2
color red
14 JAVASCRIPT
JavaScript est un langage de programmation de scripts utiliseacute surtout dans les pages web
interactives ainsi que pour les serveurs Il a eacuteteacute creacutee par Brendan Eich en 1995 en lrsquoespace de
dix jours suite agrave une demande formuleacutee par la Netscape Communications Corporation Les
bases du langage et ses principales interfaces sont fournies par des objets ce qui fait de lui un
langage orienteacute objet agrave prototype Les objets en question ne sont pas des instances de classes
Ils sont eacutequipeacutes chacun de constructeurs permettant de creacuteer leurs proprieacuteteacutes et notamment le
prototypage qui sert agrave creacuteer des objets heacuteritiers personnaliseacutes JavaScript dont les fonctions
sont des objets de premiegravere classe supporte le paradigme objet impeacuteratif et fonctionnel
Depuis sa creacuteation JavaScript a connu drsquoinnombrables modifications Il a eacuteteacute standardiseacute
en 1997 par laquo Ecma International raquo donnant naissance agrave la premiegravere eacutedition du standard
19
laquo ECMA-262 raquo la deuxiegraveme eacutedition du standard laquo ECMA-262 raquo a vu le jour en 1998 suite
agrave des changements reacutedactionnels apporteacutes au standard laquo ECMA-262 raquo pour le conformer au
standard international laquo ISOCEI 16262 raquo Des ameacuteliorations(dans la manipulation des chaicircnes
de caractegraveres dans les instructions de controcircle etc) introduites dans la deuxiegraveme eacutedition ont
donneacute lieu en 1999 agrave la publication de la troisiegraveme eacutedition du standard ECMA-262 Depuis la
troisiegraveme eacutedition les eacuteditions se sont succeacutedeacutees pour arriver actuellement agrave la huitiegraveme eacutedition
Les diffeacuterentes eacuteditions apparues ont chacune participeacute avec un plus dans le deacuteveloppement
des performances du langage
La plupart des langages de programmation ont des fonctionnaliteacutes de base communes Lrsquouti-
lisation de JavaScript neacutecessite la connaissance de ces bases pour mieux comprendre son
fonctionnement
Variables Les variables sont des conteneurs servant agrave stocker temporairement des informa-
tions Une variable a le pouvoir de varier autrement dit de pouvoir stocker diffeacuterentes valeurs
dans le temps en laquo eacutecrasant raquo sa valeur preacuteceacutedente Une variable est deacuteclareacutee au commencement
avec le mot-cleacute let suivi du nom qursquoon souhaite utiliser pour la variable
Un certain nombre de regravegles sont agrave consideacuterer en JavaScript
1 les lignes de code doivent terminer par un point-virgule pour indiquer que crsquoest la
fin de la ligne Lrsquoomission de ces points-virgules peut conduire agrave des comportements
inattendus voire des erreurs
2 Nrsquoimporte quel nom peut ecirctre (quasiment) utiliseacute pour nommer une variable Il y a
cependant quelques restrictions sur ces noms
3 Eacuteviter la casse JavaScript y est sensible cela veut dire que maVariable sera consideacutereacute
comme un nom diffeacuterent de mavariable Lrsquoapparition des problegravemes sur les noms de
20
variables dans le code implique la veacuterification de la casse utiliseacutee
4 Avec les versions reacutecentes de JavaScript il est conseilleacute drsquoutiliser le mot-cleacute let Cepen-
dant des variables deacuteclareacutees avec le mot-cleacute var sont parfois rencontreacutees Ce dernier est
utiliseacute lorsque notre code doit supporter des navigateurs anciens (IE lt 11) let nrsquoeacutetant
pas supporteacute dans ce cas Une fois une variable est deacuteclareacutee on lui donne une valeur
maVariable = rsquooussrsquo
Pour utiliser la valeur plus loin dans le code il suffit de faire appel agrave la variable en utilisant
son nom maVariable Lorsque on creacutee une variable et qursquoon lui donne une valeur cela
peut se faire sur une seule ligne let maVariable = rsquooussrsquo Une fois qursquoon a donneacute une
valeur agrave une variable on peut la changer plus loin
let maVariable = rsquooussrsquomaVariable = rsquoSylvainrsquo
Les variables sont reacuteparties en diffeacuterents types de donneacutees et ont chacune une fonction Parmi
ces variables on a la chaicircne de caractegraveres le nombre le Booleacuteen le tableau lrsquoobjetetc Les
variables sont indispensables agrave la programmation Si les valeurs sont statiques rien ne pourrait
se faire Par exemple on ne pourrait pas personnaliser un message de bienvenue ou changer
lrsquoimage afficheacutee dans une galerie
Les opeacuterateurs Un opeacuterateur est un symbole matheacutematique qui produit un reacutesultat en
fonction de plusieurs valeurs (la plupart du temps on utilise deux valeurs et un opeacuterateur)
Parmi les opeacuterateurs les plus simples on a lrsquoopeacuterateur drsquoaffectation lrsquoopeacuterateur drsquoidentiteacute
lrsquoopeacuterateur de neacutegation lrsquoopeacuterateur drsquoineacutegaliteacute
Il y a plein drsquoautres opeacuterateurs mais on srsquoen tiendra agrave ceux-lagrave
Il est agrave noter que lrsquoutilisation de diffeacuterents types de donneacutees avec un mecircme opeacuterateur faussera
21
le reacutesultat obtenu le reacutesultat obtenu par70 + 12 nrsquoest pas le mecircme que celui obtenu par
70 + 12 le deuxiegraveme reacutesultat est le bon car les nombres entoureacutes de guillemets sont donc
consideacutereacutes comme des chaicircnes de caractegraveres
Les structures conditionnelles Les structures conditionnelles sont des eacuteleacutements du code qui
permettent de tester si une expression est vraie ou non et drsquoexeacutecuter des instructions diffeacuterentes
selon le reacutesultat La structure conditionnelle utiliseacutee la plus freacutequemment est if else
Par exemple
let parfumGlace = rsquosorbet de fraisersquoif (parfumGlace === rsquosorbet de fraisersquo)
alert(Jrsquoadore le sorbet de fraise ) else
alert(Jrsquoaurai preacutefeacutereacute un sorbet de fraise)
Le test agrave reacutealiseacute est contenue dans if ( ) Il consiste en une comparaison de la variable
parfumGlace avec la chaicircne de caractegraveres laquo sorbet de fraise raquo via lrsquoopeacuterateur drsquoidentiteacute pour
veacuterifier leur eacutegaliteacute Si cette comparaison renvoie true le premier bloc de code sera exeacutecuteacute
Sinon crsquoest le code du second bloc celui preacutesent apregraves else qui sera exeacutecuteacute
Les fonctions Les fonctions sont chargeacutees drsquoorganiser les fonctionnaliteacutes agrave reacuteutiliser Par
exemple au lieu drsquoexeacutecuter deux fois la mecircme action plutocirct que de recopier le code la
fonction est eacutecrite une fois puis utiliser aux deux endroits souhaiteacutes
let maVariable = documentquerySelector(rsquoh1rsquo)alert(rsquoSalut rsquo)
Ces fonctions (querySelector et alert) sont disponibles dans le navigateur Elles ressemblent
agrave un nom de variable suivi de parenthegraveses et utilisent des arguments dans leurs calculs Les
22
arguments sont placeacutes entre les parenthegraveses seacutepareacutes par des virgules srsquoil y en a plusieurs Par
exemple la fonction alert() fait apparaicirctre une fenecirctre de pop-up dans la fenecirctre du navigateur
Un argument est utiliseacute pour indiquer agrave la fonction le contenu qursquoon deacutesire eacutecrire dans cette
fenecirctre En plus des fonctions deacutejagrave existantes drsquoautres fonctions peuvent ecirctre deacutefinies par
nous-mecircmes Par exemple fonction toute simple qui considegravere deux arguments et renvoie le
reacutesultat de la multiplication
function multiplier(num1num2) let reacutesultat = num1 num2return reacutesultat
Avant une utilisation reacutepeacuteteacutee de cette fonction elle doit ecirctre deacuteclareacutee dans la console
multiplier(47)multiplier(2020)multiplier(053)
Lrsquoinstruction return indique au navigateur qursquoil faut renvoyer la variable reacutesultat en dehors de
la fonction afin qursquoelle puisse ecirctre reacuteutiliseacutee par ailleurs Cette instruction est neacutecessaire car
les variables deacutefinies agrave lrsquointeacuterieur des fonctions sont uniquement disponibles agrave lrsquointeacuterieur de
ces fonctions Crsquoest ce qursquoon appelle une porteacutee
Les eacuteveacutenements Un site web vraiment interactif est caracteacuteriseacute par des eacuteveacutenements Les
eacuteveacutenements sont des structures de code agrave lrsquoeacutecoute du navigateur permettant de deacuteclencher des
actions au moindre problegraveme Lrsquoexemple concret est lrsquoeacuteveacutenement de clic qui est deacuteclencheacute
une fois lrsquoutilisateur clique sur quelque chose dans le navigateur Lrsquoexemple ci-dessous peut
donner une ideacutee sur ce que ccedila donne en pratique il suffit de saisir ces quelques lignes dans la
console puis cliquez sur la page
23
documentquerySelector(rsquohtmlrsquo)onclick = function() alert(rsquoarrecirctez de cliquerrsquo)
Les meacutethodes pour laquo attacher raquo un eacuteveacutenement agrave un eacuteleacutement sont multiples Dans cet exemple
deux paramegravetres sont deacutefinis lrsquoeacuteleacutement HTML concerneacute et un gestionnaire onclick qui
est une proprieacuteteacute eacutegale agrave une fonction anonyme (elle nrsquoa pas de nom) qui contient le code agrave
exeacutecuter quand lrsquoutilisateur clique
On pourra noter que documentquerySelector(rsquohtmlrsquo)onclick = function()
est eacutequivalent agrave
let maHTML = documentquerySelector(rsquohtmlrsquo)maHTMLonclick = function()
La premiegravere syntaxe est simplement plus courte Drsquoautres fonctionnaliteacutes peuvent srsquoajouter
aux bases en JavaScript exposeacutees
15 LE FONCTIONNEMENT INTERNE DES NAVIGATEURS WEB
Pour la peacuteriode allant de mars 2015 agrave mars 2016 la part de marcheacute des navigateurs drsquoapregraves les
statistiques de StatCounter [19] est de pregraves de 96 entre Internet Explorer Firefox Chrome
et Opera Le tableau 11 montre en pourcentage la part de chaque navigateur
24
Navigateur Part drsquoutilisation en
Chrome 5232
Internet Explorer 162
Firefox 1558
Safari 978
Opera 181
Autres 431
Tableau 11 ndash Statistiques des parts drsquoutilisation des navigateurs dans le monde entre mars 2015et mars 2016
Une ressource web eacutetant seacutelectionneacutee en faisant appel au serveur est ensuite afficheacutee par le
navigateur Celle-ci peut ecirctre un document HTML (qui est le cas geacuteneacuteral) comme elle peut
ecirctre un autre type de fichier Une URL est mobiliseacutee par lrsquoutilisateur pour la reacutecupeacuteration
de la ressource Les speacutecifications HTML et CSS qui preacutecisent au navigateur la maniegravere
drsquointerpreacuteter et drsquoafficher les fichiers HTML sont maintenues par lrsquoorganisation W3C (World
Wide Web Consortium) [12]
La structure drsquoun navigateur comprend plusieurs composants tels qursquoune interface utilisateur
le moteur du navigateur un composant reacuteseau une interface drsquoarriegravere-plan (backend UI)
un interpreacuteteur JavaScript un analyseur XML (XML parser) un composant de stockage de
donneacutees et finalement le moteur de rendu qui est la piegravece la plus importante dans cet ensemble
[49] [48] La figure 14 montre le flux entre les composants du navigateur
Avant son affichage agrave lrsquoutilisateur une page web parcourt le chemin suivant
1 La requecircte est envoyeacutee vers le serveur en utilisant lrsquointerface utilisateur qui enferme
une barre drsquoadresse des boutons preacuteceacutedent et suivant un menu de marque-page
25
des boutons drsquoactualisation et drsquoarrecirct etc La requecircte est transporteacutee via le composant
reacuteseau qui assure les appels reacuteseau telles que les requecirctes HTTP Il est doteacute drsquoune
interface indeacutependante de la plateforme et en dessous des impleacutementations pour chaque
plateforme
2 La reacuteponse est renvoyeacutee par le serveur apregraves plusieurs traitements au niveau du serveur
drsquoapplication afin de geacuteneacuterer la page demandeacutee en HTML (les deacutetails sur ces deux
eacutetapes ont eacuteteacute exposeacutes dans la section 11)
3 Le composant reacuteseau passe les donneacutees brutes reacutecupeacutereacutees agrave un autre composant qui
a comme rocircle drsquoenregistrer toutes sortes de donneacutees sur le disque dur par exemple
des cookies Il srsquoagit drsquoune couche de persistance La nouvelle speacutecification HTML
(HTML5) deacutefinit le terme laquo base de donneacutees Web raquo qui est un systegraveme complet (bien
que leacuteger) de base de donneacutees dans le navigateur
4 Les octets bruts sont transporteacutes au moteur de rendu qui est responsable de lrsquoaffichage du
contenu demandeacute agrave lrsquoeacutecran en suivant plusieurs processus drsquoanalyse sur le code HTML
et CSS Les deacutetails de ces processus drsquoanalyse sont abordeacutes dans le reste du chapitre
5 Un interpreacuteteur JavaScript est appeleacute par le moteur de rendu pour lrsquoanalyse et lrsquoexeacutecution
du code JavaScript Pareillement pour lrsquoanalyseur XML (XML parser) qui est utiliseacute
pour lrsquoanalyse des documents XML dans lrsquoarbre du DOM (Document Object Model)
Crsquoest lrsquoun des sous systegravemes les plus reacuteutilisables dans lrsquoarchitecture En fait presque
toutes les impleacutementations des navigateurs exploitent un analyseur XML existant plutocirct
que de creacuteer leur propre analyseur agrave partir de zeacutero
6ndash7 Lrsquointerface drsquoarriegravere-plan (backend UI) est destineacute agrave dessiner des widgets de base
du genre listes deacuteroulantes et fenecirctres Une interface geacuteneacuterique non speacutecifique agrave la
plateforme est preacutesenteacutee par le navigateur qui utilise drsquoautre part en dessous lrsquointerface
utilisateur du systegraveme drsquoexploitation
26
Figure 14 ndash Le flux entre les composants du navigateur pour la reacutecupeacuteration et le traitementdrsquoune page web dans le navigateur
8ndash9 Ce dernier composant est relieacute au moteur de rendu qui envoie le rendu final agrave lrsquoutilisateur
dans la derniegravere eacutetape de la figure
Lrsquoaffichage drsquoune page web par le navigateur moyennant le code HTML CSS et JavaScript
nrsquoest pas aussi simple Pour ce faire le navigateur fait particuliegraverement appel agrave lrsquoun de ses
composants le moteur de rendu
Les opeacuterations qui se manifestent agrave lrsquointeacuterieur du navigateur et en particulier le fonctionnement
des moteurs de rendu des navigateurs les plus utiliseacutes ont eacuteteacute expliqueacutes par Garsiel et Irish
[11] Lrsquoaffichage drsquoune page web comporte de fait plusieurs phases La premiegravere consiste en
la construction des arborescences DOM (modegravele drsquoobjet de document) et CSSOM (modegravele
drsquoobjet CSS) Cette derniegravere phase est suivie par la transformation des balisages HTML et CSS
en DOM et CSSOM respectivement dont la combinaison forme une arborescence drsquoaffichage
(arbre de rendu) Cette arborescence agrave son tour est chargeacutee de la mise en page de chaque
eacuteleacutement visible et de lrsquointroduction des donneacutees exigeacutees pour lrsquoaffichage des pixels agrave lrsquoeacutecran
[5]
27
lthtmlgtltheadgt
ltmeta name=viewport content=width=device-widthinitial-scale=1gtltlink href=designcss rel=stylesheetgtlttitlegtExemplelttitlegt
ltheadgtltbodygt
ltpgtSalut ltspangtOussamaltspangt Beroual ltpgtltdivgtltimg src=ma-photojpggtltdivgt
ltbodygtlthtmlgt
Figure 15 ndash Un exemple simple de page web illustrant le rendu dans un navigateur
Construction du modegravele drsquoobjet DOM
Le processus de construction du modegravele drsquoobjet DOM est exposeacute ci-dessous agrave travers lrsquoexemple
drsquoune page web simple en HTML brut avec du texte et une seule image Le code HTML de la
page agrave eacutetudier est donneacute agrave la figure 15
Le traitement de cette page impose au moteur de rendu du navigateur drsquoexeacutecuter quatre
processus de transformation tel qursquoillustreacute dans la figure 16
1 Le premier processus est la conversion le moteur de rendu lit les octets bruts du
HTML sur le disque ou le reacuteseau et les traduit en caractegraveres individuels en fonction de
lrsquoencodage speacutecifique du fichier (UTF-8 par exemple)
2 Le deuxiegraveme processus est la creacuteation de jetons le moteur de rendu convertit les
chaicircnes de caractegraveres en diffeacuterents jetons speacutecifieacutes par la norme HTML5 du W3C
telles que lthtmlgt et ltbodygt Chaque jeton possegravede une signification particuliegravere et un
ensemble de regravegles
3 Le troisiegraveme processus est lrsquoanalyse lexicale les jetons eacutemis sont convertis en objets
qui deacutefinissent leurs proprieacuteteacutes et leurs regravegles
28
Figure 16 ndash Les processus de traitement de HTML et CSS au niveau du moteur de rendu dunavigateur
4 Le quatriegraveme processus est la construction du DOM puisque le balisage HTML
deacutefinit les relations entre les diffeacuterentes balises (certaines balises sont contenues dans
drsquoautres) les objets creacuteeacutes sont associeacutes selon une arborescence qui capture eacutegalement
la relation parent-enfant deacutefinie dans le balisage drsquoorigine (lrsquoobjet HTML est un parent
de lrsquoobjet body body est un parent de lrsquoobjet p etc)
Le reacutesultat final de lrsquoensemble de ce processus est le modegravele drsquoobjet de document (ou DOM)
de notre page simple que le navigateur utilise pour tout traitement suppleacutementaire de la page
Lrsquoarbre DOM reacutesultant est illustreacute dans la figure 17
Modegravele drsquoobjet CSS (CSSOM)
Lrsquoinformation sur lrsquoapparence drsquoun eacuteleacutement lors de son affichage est offerte par une autre
construction le CSSOM Durant la construction du DOM de notre page il srsquoest aveacutereacute que
le navigateur a deacuteceleacute une balise de lien link dans la section head du document signalant
une feuille de style CSS externe stylecss Du fait qursquoil a besoin de cette ressource pour
29
Figure 17 ndash Un arbre du modegravele drsquoobjet DOM
body font-size 24px p font-weight bold span color blue p span display none img float right
Figure 18 ndash Un exemple de fichier CSS simple
lrsquoaffichage de la page le navigateur anticipe lrsquoenvoi immeacutediat drsquoune demande pour cette
ressource et reacutepond avec le contenu du fichier illustreacute agrave la figure 18 Ces styles auraient pu
ecirctre deacuteclareacutes directement dans le balisage HTML (inteacutegreacute) cependant il est recommandeacute
de seacuteparer les codes CSS et HTML puisque les graphistes travaillent sur le code CSS les
deacuteveloppeurs sur le code HTML etc
Les regravegles CSS reccedilues sont converties en un contenu que le navigateur peut comprendre et
traiter de mecircme que pour le code HTML Le processus HTML est reacutepeacuteteacute mais dans ce cas
pour le code CSS (voir figure 16) Les octets CSS sont convertis en caractegraveres puis en jetons
et en nœuds pour finalement se relier au sein drsquoune arborescence appeleacutee CSS Object Model
(CSSOM) ou laquo modegravele drsquoobjet CSS raquo
Le calcul de lrsquoensemble final de styles drsquoun objet de la page tel qursquoeffectueacute par le navigateur
30
Figure 19 ndash Arbre du modegravele drsquoobjet CSSOM
comprend deux eacutetapes Dans une premiegravere eacutetape la regravegle la plus geacuteneacuterale pour ce nœud
est appliqueacutee (par exemple srsquoil srsquoagit drsquoun eacuteleacutement enfant du corps tous les styles du corps
srsquoappliquent) Dans une deuxiegraveme eacutetape des regravegles plus speacutecifiques crsquoest-agrave-dire en descendant
la cascade sont appliqueacutees afin drsquoaffiner de maniegravere reacutecursive les styles calculeacutes
La concreacutetisation de cette deacutemarche est faite agrave partir de lrsquoobservation de lrsquoarborescence
CSSOM dans la figure 19 On peut y lire que tout texte est eacutecrit en bleu et que sa taille de
police est de 24 pixels Il est placeacute dans la balise span contenue dans lrsquoeacuteleacutement body Ce
dernier est chargeacute de transmettre la taille de police agrave lrsquoeacuteleacutement span Toutefois si une balise
span est un enfant drsquoune balise paragraphe (p) le contenu de cette balise nrsquoest pas afficheacute
Il faut se rappeler que lrsquoarborescence CSSOM ci-dessus nrsquoest pas complegravete Elle ne montre
que les styles qui remplacent ceux de la feuille de style Dans lrsquoabsence de styles proposeacutes
tout navigateur fournit un ensemble de styles par deacutefaut eacutegalement appeleacutes styles user-agent
Construction de lrsquoarbre de rendu la mise en page et le dessin
Les donneacutees HTML et CSS ont servi jusqursquoici agrave la creacuteation des arborescences des modegraveles
DOM et CSSOM qui sont des objets indeacutependants chargeacutes chacun de capturer un aspect
du document lrsquoun deacutecrit le contenu et lrsquoautre les regravegles de style appliqueacutees au document
31
Figure 110 ndash Arbre de rendu
Les arborescences des deux modegraveles DOM et CSSOM sont combineacutees pour former une
arborescence drsquoaffichage responsable de lrsquoaffichage de la page et ne contenant que des nœuds
neacutecessaires agrave lrsquoaffichage de la page (voir figure 110)
Une arborescence drsquoaffichage comporte plusieurs types de nœuds des nœuds Visibles des
nœuds invisibles tels que les balises de script les balises Meta etc et des nœuds masqueacutes
par le code CSS Seul le premier type est consideacutereacute dans lrsquoarborescence drsquoaffichage Les
deux autres sont omis Le proceacutedeacute drsquoomission est effectueacute en mobilisant deux proprieacuteteacutes la
proprieacuteteacute visibility hidden rendant lrsquoeacuteleacutement invisible tout en occupant de lrsquoespace dans la
mise en page et la proprieacuteteacute display none supprimant totalement lrsquoeacuteleacutement de lrsquoarborescence
drsquoaffichage La figure 111 donne une vue globale des eacutetapes et processus de la construction
des arbres abordeacutees ci-dessous
Tous les nœuds visibles sont soumis aux regravegles CSSOM et eacutemis avec leurs contenus et leurs
styles calculeacutes Neacuteanmoins leurs positions et leurs geacuteomeacutetries (tailles) restent indeacutefinies La
deacutetermination ou le calcul de ces deux paramegravetres constitue la phase de mise en page appeleacutee
parfois ajustement de la mise en page Cette derniegravere est traduite par lrsquoexemple simple donneacute agrave
la figure 112 Le corps de la page ci-dessus contient deux eacuteleacutements div imbriqueacutes le premier
eacuteleacutement div (parent) deacutefinit la taille drsquoaffichage du nœud agrave 50 de la largeur de la fenecirctre et
le second eacuteleacutement div contenu par le parent deacutefinit sa largeur agrave 50 de celui du parent soit
32
Figure 111 ndash Les eacutetapes et processus de la construction des arbres DOM CSSOM et de lrsquoarbrede rendu
33
lthtmlgtltheadgt
ltmeta name=viewport content=width=device-widthinitial-scale=1gtlttitlegtExemple de mise en pagelttitlegt
ltheadgtltbodygt
ltdiv style=width 50gtltdiv style=width 50gtHello worldltdivgt
ltdivgtltbodygt
lthtmlgt
Figure 112 ndash Un second exemple simple illustrant le processus de mise en page par le navigateur
25 de la largeur de la fenecirctre
Maintenant que toutes les informations relatives aux nœuds sont reacuteunies ceux-ci sont peints
convertis en pixels reacuteels et afficheacutes agrave lrsquoeacutecran agrave partir de lrsquoarborescence drsquoaffichage finale La
construction est acheveacutee et la page est enfin visible dans la fenecirctre La figure 113 reacutesume
toutes les eacutetapes preacuteceacutedemment deacutecrites dans cette section
34
Figure 113 ndash Vue globale du flux de reacutecupeacuteration de traitement et drsquoaffichage drsquoune page web
CHAPITRE 2
LES BUGS DrsquoINTERFACE DANS LES APPLICATIONS WEB
Les utilisateurs du web sont souvent confronteacutes lors drsquoune application web sur internet agrave
des problegravemes tregraves ennuyeux appeleacutes laquo bugs drsquointerfaces raquo Dans ce chapitre nous exposons
les diffeacuterents types drsquoapplication web et les bugs qui les affectent en montrant que les bugs
drsquointerface sont largement preacutesents dans un grand nombre de sites et applications web du
monde reacuteel et comment des bugs de ce genre ne sont pas limiteacutes agrave des problegravemes de preacutesentation
simples statiques et qursquoils reacutevegravelent dans de nombreux cas des deacutefauts dans le comportement
de lrsquoapplication
21 TYPES DrsquoAPPLICATIONS WEB
Le web est maintenant peupleacute par un nombre consideacuterable drsquoapplications par conseacutequent le
nombre de personnes affecteacutees par les bugs qursquoelles peuvent contenir est eacutenorme
211 APPLICATIONS STATIQUES
Les sites web traditionnels qursquoon appelle eacutegalement applications laquo Web 10 raquo sont statiques
le contenu drsquoune page ne change pas apregraves le chargement et chaque page de lrsquoapplication peut
36
ecirctre chargeacutee indeacutependamment de toute interaction preacutealable avec le site Le test automatique
drsquoune telle application peut ecirctre effectueacute agrave lrsquoaide drsquoun robot drsquoindexation en chargeant une page
de deacutemarrage puis en explorant automatiquement les diffeacuterentes interactions possibles sur la
page pour obtenir de nouvelles pages agrave visiter Comme chaque page de ces applications est
indeacutependante les bugs ne peuvent se produire que sur une seule page drsquoougrave vient la possibiliteacute
drsquoeacutecrire des oracles de test simples qui analyseraient le contenu de ces pages prises isoleacutement
Le Responsive Web Design est un moyen de concevoir un site web de sorte que son contenu
srsquoadapte automatiquement agrave la reacutesolution drsquoeacutecran du terminal utiliseacute pour le visualiser Une
application RWD est donc un site web adaptatif La notion de web adaptatif repense la
conception ergonomique des sites web puisqursquoil ne srsquoagit plus de concevoir autant de sites que
de terminaux mais de concevoir une seule interface auto-adaptative Ainsi les informations et
les structures techniques ne sont pas dupliqueacutees ce qui geacutenegravere des eacuteconomies drsquoeacutechelle dans
la conception et la maintenance des sites web beacuteneacuteficiant de ce mode de conception
Un site web conccedilu avec un design responsive est donc optimiseacute pour tous les appareils
disponibles sur le marcheacute ordinateurs tablettes smartphones Cette faccedilon de concevoir des
applications web est recommandeacutee en raison de quelques avantages majeurs le deacuteveloppement
et la maintenance seront plus rapides et plus simples (un seul fichier geacuterant tous les affichages)
Un reacutefeacuterencement naturel optimal est utiliseacute (pas de sous-domaines ou de redirections vers des
annuaires mobiles) puisqursquoil nrsquoy a qursquoun seul site regroupant toutes les versions et uniquement
une adresse Web (URL) Plus de deacutetails sur le concept de RWD sont preacutesenteacutes dans la section
223
37
212 APPLICATIONS WEB 20
Les applications web reacutecentes eacutegalement appeleacutees RIA (Rich Internet Applications) utilisent
des scripts cocircteacute client des eacutetats cocircteacute serveur et drsquoautres fonctionnaliteacutes pour offrir une expeacute-
rience utilisateur ameacutelioreacutee Les modifications apporteacutees agrave lrsquoeacutetat de la page peuvent venir agrave la
suite de requecirctes HTTP asynchrones chargeant un nouveau contenu Par conseacutequent ces appli-
cations sont maintenant stateful la mecircme action ou la mecircme requecircte HTTP peut renvoyer des
reacutesultats diffeacuterents en fonction des interactions passeacutees de lrsquoutilisateur Ces applications avec
eacutetat viennent avec de nouveaux types de bugs appeleacutes bugs comportementaux Contrairement
agrave un bug statique qui srsquoeacutevalue en analysant le contenu drsquoune seule page indeacutependamment des
autres un bug comportemental relie les donneacutees et lrsquoordre de consultation de plusieurs pages
de lrsquoapplication
22 TYPES DE BUGS DrsquoINTERFACE
Un bug drsquointerface est un deacutefaut dans un systegraveme web qui a des effets visibles sur le contenu
des pages servi agrave lrsquoutilisateur Nous avons effectueacute une eacutetude sur de plus de 35 applications
web [51] en tous genres Un releveacute des bugs ayant un impact sur la preacutesentation ou le contenu
de lrsquointerface utilisateur a eacuteteacute fait Le tableau 21 donne la liste des sites web et des applications
pour lesquelles au moins un bug de mise en page a eacuteteacute trouveacute Dans ce qui suit nous preacutesentons
briegravevement les bugs deacutecouverts dans cette eacutetude Nous soulignons qursquoaucun des bugs deacutecrits
ici repreacutesente un problegraveme de compatibiliteacute entre les navigateurs Les bugs sont preacutesents
peu importe le navigateur utiliseacute pour afficher la page et ils ne sont pas causeacutes par une
interpreacutetation divergente des normes par deux navigateurs diffeacuterents
38
mdash Academiaedumdash Acermdash Adagio Hotelsmdash Air Canadamdash Air Francemdash AllMusicmdash American Airlinesmdash Boingomdash Canadian
Mathematical Societymdash Customizeorgmdash Digital Ocean
mdash Dropboxmdash EasyChairmdash Elseviermdash Evous Francemdash Facebookmdash IEEEmdash Just for Laughsmdash LinkedInmdash Liveshoutmdash Microsoft TechNetmdash Monoprixmdash Moodle
mdash Naymzmdash NSERCmdash OngerNeigemdash ProQuestmdash Rail Europemdash ResearchGatemdash St-Hubertmdash SpringerOpenmdash TD Canada Trustmdash Time Magazinemdash Uniform Servermdash YouTube
Tableau 21 ndash Sites et applications web pour lesquelles au moins un bug de mise en page a eacuteteacutetrouveacute
221 BUGS STATIQUES
Un premier type de bugs appeleacutes bugs statiques collecteacutes par une eacutetude empirique dans des
sites web et applications reacuteelles On y retrouve des problegravemes tels que le chevauchement des
eacuteleacutements les eacuteleacutements qui srsquoeacutetendent en dehors de leur conteneur ou le bug drsquoeacuteleacutements mal
empileacutes Ce genre de bugs peut ecirctre diviseacute en deux cateacutegories des bugs lieacutes agrave la mise en page
et drsquoautres non lieacutes agrave la mise en page
Bugs de mise en page
Une premiegravere cateacutegorie de bug correspond agrave des perturbations dans la mise en page ou la
preacutesentation de la page elle-mecircme crsquoest-agrave-dire tout reacutesultat inattendu du concepteur de cette
page en termes de contenu ou de proprieacuteteacutes (position taille nombre drsquoeacuteleacutements)
Eacuteleacutements mal aligneacutes Un problegraveme de mise en page banal mais freacutequent est le deacutesaligne-
ment ou le deacutecalage drsquoeacuteleacutements qui doivent ecirctre aligneacutes La figure 21a montre un exemple de
39
(a) LiveShout
(b) LinkedIn
Figure 21 ndash Exemple drsquoeacuteleacutements mal aligneacutes le cadre blanc est horizontalement mal aligneacute(LiveShout) le menu Interests est deacutecaleacute drsquoun pixel par apport aux autres menus (LinkedIn)
ce bug courant mais parfois le deacutesalignement est subtil un eacuteleacutement peut ecirctre deacutecaleacute par un
seul pixel (figure 21b)
Eacuteleacutements qui se chevauchent Le problegraveme de chevauchement des eacuteleacutements qui devraient
ecirctre disjoints dans la preacutesentation drsquoune page est aussi lrsquoun des bugs les plus reacutepandus dans
cette eacutetude les problegravemes de cette nature ont eacuteteacute trouveacutes dans des sites aussi varieacutes que le
Time Magazine Air Canada Moodle et Rail Europe La figure 22 montre un exemple de ce
problegraveme
Dans certains cas le chevauchement se produit par une interruption de la mise en page causeacutee
par le redimensionnement du document principal en dessous des dimensions minimales
comme dans lrsquoexemple de la figure 22a Les conteneurs qui doivent ecirctre cocircte agrave cocircte sont
afficheacutes les uns sur les autres par le moteur de rendu du navigateur Cependant nous avons
eacutegalement constateacute que dans de nombreux cas ce chevauchement est causeacute par le fait que les
40
eacuteleacutements sont absolument positionneacutes dans une page par rapport agrave leurs dimensions lorsqursquoils
contiennent du texte en anglais et lors de lrsquoaffichage du site web dans une autre langue (comme
le franccedilais) il peut arriver que le texte correspondant soit plus long que la version anglaise ce
qui cause le chevauchement de deux eacuteleacutements qui devraient ecirctre disjoints Cela a eacuteteacute observeacute
par exemple sur la figure 22b pour le site web RailEurope
Eacuteleacutements qui srsquoeacutetendent agrave lrsquoexteacuterieur de leurs conteneurs Un autre problegraveme reacutepandu
est la preacutesence drsquoeacuteleacutements qui deacutepassent les limites de leurs conteneurs parent ce qui pro-
voque le chevauchement indeacutesirable avec des eacuteleacutements environnants Ce bug est lrsquoinverse du
preacuteceacutedent plutocirct que drsquoeacutetendre leur conteneur en dehors de ses dimensions nominales cette
fois les eacuteleacutements qui srsquoeacutelargissent agrave lrsquoexteacuterieur de leur conteneur sont simplement coupeacutes de
lrsquoaffichage
La figure 23 montre un exemple de ce dernier type dans la plateforme drsquoenseignement
en ligne Moodle (la figure 23a) des eacuteleacutements de la table sont coupeacutes de leur cocircteacute droit
Lors de lrsquoanalyse du code source de la page il se trouve que quatre autres colonnes doivent
effectivement ecirctre visibles et sont tout simplement inaccessibles puisque ils ont eacuteteacute coupeacute
Cela rend la page plus ou moins inutilisable
Un cas particulier survient lorsque le conteneur soit la fenecirctre du navigateur entiegravere et la fenecirctre
est redimensionneacutee en dessous drsquoun certain seuil Cela peut ecirctre montreacute dans la Figure 23b
le contenu du menu en haut disparaicirct lorsque la fenecirctre est redimensionneacutee Le navigateur
fournit une barre de deacutefilement horizontale mais cela ne fait deacutefiler que la partie infeacuterieure de
la page et pas le menu du haut En conseacutequence certains boutons du menu principal du site ne
peuvent plus ecirctre cliqueacutes
Nous placcedilons aussi dans cette cateacutegorie un bug rencontreacute en utilisant la fenecirctre de messagerie
41
(a) Air Canada
(b) Rail Europe
Figure 22 ndash Exemple drsquoeacuteleacutements qui se chevauchent
42
(a) Moodle
(b) LinkedIn
Figure 23 ndash Le contenu de la page est dissimuleacute de lrsquointerface en raison de son prolongementau-delagrave des dimensions du conteneur parent
43
Figure 24 ndash Le bug Facebook La zone de texte permettant au utilisateur de taper un messageinstantaneacute (agrave gauche) disparaicirct soudainement (agrave droite)
instantaneacutee de Facebook Lorsque la fenecirctre de parent est redimensionneacutee au-dessous drsquoune
largeur speacutecifique la zone de texte permettant agrave un utilisateur drsquoentrer un nouveau message
disparaicirct soudainement de lrsquointerface comme le montre la figure 24 Tous les autres eacuteleacutements
de la fenecirctre restent identiques mais il devient impossible de taper un message
Ton sur ton Ce bug est causeacute par un problegraveme de mise en page ougrave le texte drsquoun eacuteleacutement est
de la mecircme couleur que le fond de la page agrave cet endroit ce qui rend le texte invisible dans
lrsquoaffichage Bien que ce type de comportement peut ecirctre fait expregraves afin de dissimuler un
eacuteleacutement nous croyons qursquoil est tregraves peu probable que cela soit lrsquointention du deacuteveloppeur
puisqursquoil existe des moyens beaucoup plus eacuteleacutegants drsquoatteindre le mecircme reacutesultat en utilisant
les proprieacuteteacutes CSS (en deacutefinissant la proprieacuteteacute drsquoaffichage agrave none ou la proprieacuteteacute opacity agrave
0)
La figure 25 montre un exemple drsquoun tel problegraveme de mise en page sur Academiaedu (figure
25b) Dans la figure 25a le redimensionnement de la fenecirctre du navigateur en dessous drsquoune
largeur speacutecifique a pour effet impreacutevu de pousser les eacuteleacutements du menu supeacuterieur en dehors
de leur conteneur preacutevu (celui qui a un fond bleu) Par conseacutequent ces eacuteleacutements qui ont du
44
(a) ProQuest
(b) Academia
Figure 25 ndash Le bug laquo ton sur ton raquo Les eacuteleacutements de menu sont pousseacutes en dehors de leursconteneur et disparaissent (a) le texte du lien est de la mecircme couleur que le fond reacuteveacuteleacute en leseacutelectionnant avec la souris (b)
texte blanc se placent dans une zone blanche et deviennent invisibles (agrave lrsquoexception drsquoun seul
eacuteleacutement du menu qui a un fond bleu pour une raison inconnue)
Eacuteleacutements mal empileacutes Ce problegraveme se produit quand un eacuteleacutement qui devrait ecirctre rendu
au-dessus drsquoun autre est placeacute en dessous de ce dernier comme le montre la figure 26 Dans
cet exemple le bouton orange en haut de lrsquoimage est censeacute apporter un menu (liste deacuteroulante)
Toutefois le contenu de ce menu apparaissent sous le reste du contenu de la page plutocirct que
sur eux ce qui rend certains de ses eacuteleacutements inutilisables
Lrsquoordre du processus du dessin est deacutefini dans le standard de CSS crsquoest en fait lrsquoordre dans
lequel les eacuteleacutements sont empileacutes dans la pile des contextes Cet ordre affecte le dessin puisque
les piles sont dessineacutees de lrsquoarriegravere vers lrsquoavant Lrsquoordre drsquoempilement drsquoun bloc de rendu est
1 Couleur drsquoarriegravere-plan
2 Image drsquoarriegravere-plan
3 Bordures
45
Figure 26 ndash Un eacuteleacutement est placeacute incorrectement sur un autre
4 Enfants
5 Contour
Ainsi une violation de cet ordre pour une raison inconnue peut causer ce genre de problegraveme
La plupart des problegravemes de cette nature peuvent ecirctre corrigeacutees en attribuant correctement la
proprieacuteteacute z-index de lrsquoeacuteleacutement deacutefectueux
Disposition briseacutee Une rupture majeure dans la structure attendue drsquoune page se produit
quand un certain nombre de ressources importantes telles que les fichiers CSS le code
JavaScript ou les images ne parvient pas agrave ecirctre reacutecupeacutereacute par le navigateur En conseacutequence
de nombreux eacuteleacutements de la page nrsquoont pas leurs deacuteclarations de style et sont positionneacutes et
dimensionneacutes en fonction du style par deacutefaut fourni par le moteur de rendu
La figure 27 montre un cas assez grave drsquoun tel problegraveme ougrave essentiellement toutes les
46
Figure 27 ndash Un exemple drsquointerface briseacutee en raison de lrsquoeacutechec du chargement de certainesressources
deacuteclarations CSS sont manquantes Ceci est causeacute par le fait que le fichier aparthotelcss
nrsquoa pas reacuteussi agrave ecirctre chargeacute pour une raison inconnue Le mecircme problegraveme a eacuteteacute observeacute
momentaneacutement sur le portail web Digital Ocean 28
Sur le site web de Digital Ocean la page de connexion (login) est briseacutee et toutes les autres
pages aussi comme le montre la figure 28a Cela est ducirc au fait que le navigateur a abandonneacute
le chargement de nombreuses ressources dans la page (y compris toutes les images) Il est agrave
noter que malgreacute ces problegravemes le site Web reste fonctionnel La figure 28b repreacutesente une
capture drsquoeacutecran de ce agrave quoi la page devrait ressembler
HTML malformeacute Dans la figure 29 lrsquoHTML malformeacute rend impossible de voir le fond
drsquoeacutecran
47
(a) Digital Ocean sans CSS (b) Digital Ocean avec CSS
Figure 28 ndash Exemple drsquointerface briseacute dans le site Digital Ocean
Figure 29 ndash Exemple drsquoHTML mal formeacute
48
Eacuteleacutements inaccessibles Dans la figure 210a la page affiche correctement une mise en page
laquoeacutecran largeraquo lorsque la fenecirctre du client est assez large Par contre si la largeur de la fenecirctre
est moyenne comme le montre la figure 210b on observe que le bouton de connexion (sign in)
en haut agrave droite srsquoest deacuteplaceacute agrave lrsquoexteacuterieur de la bande supeacuterieure
Incoheacuterence dans les valeurs possibles drsquoun champ de formulaire Dans une page du site
CallingCards le champ du code postal dans le formulaire est preacute-rempli avec 6 caractegraveres de
donneacutees anteacuterieures mais en essayant de modifier le code postal il nrsquoest pas possible de taper
plus de 5 caractegraveres dans ce champ (figure 211)
Figure 211 ndash Incoheacuterence dans le champ de formulaire du site CallingCards
Bugs non lieacutes agrave la mise en page
Plusieurs autres bugs peuvent ecirctre deacutetecteacutes en analysant le contenu et la preacutesentation drsquoune page
Nous verrons dans la suite que certains drsquoentre eux se rapportent mecircme aux comportements
attendu ou aux fonctionnaliteacutes de lrsquoapplication mais peuvent quand mecircme ecirctre deacutetecteacutes par
des regravegles exprimeacutees sur un seul instantaneacute statique de la fenecirctre de lrsquoapplication
49
Mojibake et problegravemes drsquoencodage Plusieurs sites et applications gegraverent mal les donneacutees
de chaicircne en dehors de lrsquoASCII 7-bits Divers encodages de caractegraveres tels que Cp1252 ou
UTF-8 peuvent ecirctre utiliseacutes pour repreacutesenter les caractegraveres laquo accentueacutes raquo ou laquo eacutetrangers raquo
Cependant le mecircme caractegravere peut ecirctre repreacutesenteacute par une valeur binaire diffeacuterente selon le
scheacutema de codage utiliseacute pire certains codages comme UTF-8 peuvent utiliser plusieurs
octets pour repreacutesenter un seul caractegravere
Les problegravemes surgissent quand un systegraveme nrsquointerpregravete pas correctement le contenu drsquoune
chaicircne de caractegraveres croyant qursquoun document est dans un certain encodage alors qursquoil en
utilise reacuteellement un autre Il en reacutesulte souvent un caractegravere incorrect superflu ou pas afficheacute
du tout ce pheacutenomegravene est appeleacute mojibake 1 Par exemple lrsquoencodage UTF-8 du caractegravere
laquo eacute raquo lorsqursquoil est interpreacuteteacute comme une chaicircne Cp1252 produit laquo Atilde ccopy raquo comme le montre la
figure 212a Agrave lrsquoinverse le rendu Cp1252 du caractegravere laquo eacute raquo donne laquo raquo quand il est interpreacuteteacute
comme du UTF-8 (figure 212b)
Bien que ces caractegraveres puissent ecirctre des donneacutees leacutegitimes leur preacutesence dans le contenu drsquoun
eacuteleacutement indique tregraves probablement une manipulation incorrecte de lrsquoencodage des chaicircnes par
lrsquoapplication eacutetudieacutee
Un autre exemple de ce genre de bug est montreacute dans la figure 213
213a donne lrsquoexemple lors de lrsquoinvitation de quelqursquoun de votre carnet drsquoadresses dont le nom
contient un accent Doodle affiche son nom incorrectement et cela donne une adresse invalide
213b montre qursquoen cliquant sur la suggestion on observe que lrsquoajout est fait mais que le nom
est coupeacute en deux parties agrave lrsquoendroit mecircme du caractegravere eacutechappeacute
1 Terme japonais signifiant laquo transformation de caractegravere raquo
50
Problegravemes drsquoeacutechappement Les problegravemes drsquoeacutechappement surviennent lorsque les chaicircnes
avec des caractegraveres speacuteciaux ne parviennent pas agrave ecirctre correctement codeacutees ou deacutecodeacutees entre
deux applications La manifestation la plus freacutequente de ce problegraveme est lors de la lecture et
de lrsquoeacutecriture des chaicircnes de caractegraveres dans une base de donneacutees Certains caractegraveres comme
lrsquoapostrophe neacutecessitent drsquoecirctre doubleacutes afin de ne pas ecirctre confondus avec un seacuteparateur
de chaicircne Les problegravemes surviennent quand un systegraveme ne parvient pas agrave remplacer les
apostrophes doubles par des apostrophes simples lors de lrsquoaffichage des donneacutees dans un
formulaire
Lors de lrsquoenregistrement du contenu du formulaire au retour agrave la base de donneacutees chaque
apostrophe sera de nouveau doubleacutee entraicircnant un quadruplet drsquoapostrophes lors du char-
gement de la page la prochaine fois et ainsi de suite ceci est illustreacute dans la figure 214
Ainsi la recherche de plusieurs apostrophes dans un formulaire peut ecirctre utiliseacutee pour deacutetecter
lrsquoeacutechappement incorrect agrave lrsquointeacuterieur du code source
Un problegraveme de nature similaire se produit lorsque des caractegraveres speacuteciaux dans le code source
de la page (tels que HTML ou JavaScript) sont eacutechappeacutes incorrectement Par exemple une
seacutequence comme ltpgt peut ecirctre transformeacutee en ampltpampgt reacutesultant en la chaicircne litteacuterale ltpgt
afficheacutee comme du texte plutocirct que drsquoecirctre interpreacuteteacutee comme une balise de paragraphe
Nous avons deacutecouvert des exemples de ce problegraveme sur EasyChair qui affiche du code HTML
brut ou sur YouTube qui affiche du code JavaScript comme on peut le voir agrave la figure 215
222 BUGS COMPORTEMENTAUX
Drsquoautres bugs peuvent ecirctre appeleacutes laquo comportementaux raquo ils reacutevegravelent un problegraveme dans la
fonctionnaliteacute du site ou alors ils peuvent ecirctre exprimeacutes uniquement en termes drsquoune seacutequence
51
de plusieurs pages dans lrsquoordre
Contrairement agrave une application web traditionnelle une application Internet riche (RIA) utilise
les technologies Web modernes eacutemergentes telles que AJAX [47] Flash et Silverlight Par
conseacutequent de nouveaux problegravemes de tests web sont ajouteacutes aux problegravemes existants Une
caracteacuteristique importante de ces applications est qursquoelles sont stateful leur code peut stocker
des donneacutees persistantes sur le client (en utilisant WebStorage les proprieacuteteacutes CSS les variables
JavaScript et les objets) et sur le serveur (agrave lrsquoaide de cookies de stockage de session et de bases
de donneacutees) De plus lrsquoeacutetat de lrsquoapplication est disperseacute sur un certain nombre drsquoeacuteleacutements
et ne peut pas simplement ecirctre assimileacute agrave lrsquoURL de la page en cours (afficheacutee dans la barre
drsquoadresse du navigateur) Des fonctionnaliteacutes telles que la communication asynchrone la
manipulation DOM cocircteacute client et les gestionnaires drsquoeacuteveacutenements permettent de changer lrsquoeacutetat
de lrsquoapplication sans un rechargement complet de la page et sans modifier son URL [35]
Une conseacutequence positive de ces fonctionnaliteacutes est qursquoune telle application peut fournir
une expeacuterience utilisateur plus riche (drsquoougrave son nom) sans les cookies et JavaScript les
opeacuterations simples telles que les manipulations de panier les sessions utilisateur (connexion
deacuteconnexion) et autres fonctionnaliteacutes ne seraient pas possibles Cependant la preacutesence drsquoun
eacutetat dans lrsquoapplication introduit eacutegalement la possibiliteacute drsquoincoheacuterences dans lrsquoeacutetat afficheacute
drsquoune page agrave une autre Ces problegravemes sont appeleacutes bugs comportementaux car ils sont la
conseacutequence de lrsquointeraction de plusieurs pages entre elles et dans un certain ordre
Eacuteleacutements mobiles Certains eacuteleacutements peuvent changer leur position involontairement lors
de lrsquointeraction avec un utilisateur La figure 216 montre un exemple drsquoun tel problegraveme sur
le site web du CRSNG ougrave eacutecrire un texte dans une zone de texte vide auparavant reacuteduit sa
largeur de 4 pixels et deacutecale leacutegegraverement les zones de texte restantes vers la gauche
52
Ce problegraveme srsquoest aveacutereacute plus reacutepandu que nous nous attendions les variations comprennent
certains styles drsquoeacuteleacutements (la bordure ou la taille) qui ont eacuteteacute changeacutes sans aucune raison
apparente
Le dysfonctionnement des boutons Beaucoup drsquoapplications montrent agrave lrsquoutilisateur des
eacuteleacutements qui se comportent comme une fenecirctre pop-up (une fenecirctre secondaire qui srsquoaffiche
sans avoir eacuteteacute solliciteacutee par lrsquoutilisateur devant la fenecirctre de navigation principale lorsqursquoon
navigue sur Internet) Ce moyen est communeacutement utiliseacute pour afficher des messages publici-
taires ou un avertissement comme la reacuteponse agrave un message priveacute dans un forum
Toutefois dans un certain nombre de cas les boutons dans ces fenecirctres sont inopeacuterants cliquer
sur eux un certain nombre de fois ne produit aucun effet Ce problegraveme a eacuteteacute teacutemoin dans des
sites aussi varieacutes qursquoAmerican Airlines Dropbox et BitBucket Dans certains cas lrsquoutilisateur
est effectivement coinceacute dans le pop-up ou la page qui contient le bouton et ne peut pas sortir
sans forcer un rechargement complet du document
Confusion dans le statut de connexion Deux sites web dans notre eacutetude preacutesentent des
incoheacuterences dans lrsquoeacutetat drsquoune page meacutelangeant des eacuteleacutements de la fenecirctre drsquoune page
normalement reacuteserveacutes aux utilisateurs enregistreacutes (tels que les menus personnaliseacutes) ainsi
que des eacuteleacutements reacuteserveacutes aux utilisateurs qui sont deacuteconnecteacutes (comme un formulaire de
connexion)
Nous avons assisteacute agrave un tel comportement dans le site web de lrsquoIEEE pour le formulaire de
demande de membre Senior Apregraves lrsquoexpiration drsquoun certain deacutelai lrsquoutilisateur doit neacutecessaire-
ment se connecter agrave nouveau toutefois la page preacutesenteacutee agrave lrsquoutilisateur est celle repreacutesenteacutee
sur la figure 217 On remarque que le nom de lrsquoutilisateur est toujours preacutesent en haut agrave droite
de la page mecircme srsquoil est censeacute ecirctre deacuteconnecteacute (les identifiants de connexion sont demandeacutes)
53
Cliquer sur ce nom apporte le menu deacuteroulant qui est normalement accessible uniquement
lorsque lrsquoutilisateur est connecteacute Le mecircme problegraveme a eacuteteacute trouveacute sur le site de reacuteservation
drsquoAir Canada
Incoheacuterences dans le reacutesultat de la recherche Un autre problegraveme de comportement est
celui de lrsquoincompatibiliteacute entre une requecircte faite par un utilisateur et les reacutesultats afficheacutes par
lrsquoapplication en reacuteponse agrave cette requecircte
La figure 218 montre un exemple de ce problegraveme sur le site web des eacutepiceries Monoprix
Lors de la recherche des magasins agrave proximiteacute un utilisateur peut taper un code postal dans
un champ de formulaire puis cliquer sur laquo Valider raquo Cependant les reacutesultats de recherche
afficheacutes dans la page suivante ne montrent presque jamais les magasins avec le code postal
souhaiteacute
Comme avec tous les bugs dans la preacutesente cateacutegorie cela peut ecirctre observeacute seulement par
la correacutelation de plusieurs eacuteleacutements dans deux eacutetats diffeacuterents de la page le texte dans la
zone de texte un clic sur un bouton speacutecifique suivi par le texte dans la liste des eacuteleacutements qui
apparaissent dans la page reacutesultante
223 BUGS DE RESPONSIVE WEB DESIGN
Il y a quelques anneacutees les deacuteveloppeurs Web pouvaient faire des hypothegraveses sur la taille de
lrsquoeacutecran des appareils des utilisateurs Les ordinateurs de bureau ont eacuteteacute conccedilus pour acceacuteder
aux sites web en assumant une taille de fenecirctre minimale il eacutetait donc laquo normal raquo que pour
une largeur de fenecirctre plus petite le site semble briseacute Il srsquoagissait drsquoune approche valide
dans une eacutepoque ougrave les tablettes et les smartphones eacutetaient inouiumls (pas agrave la porteacutee de tout le
monde peu utiliseacutes) Aujourdrsquohui une autre approche est neacutecessaire pour srsquoassurer que les
54
sites fonctionnent correctement dans une gamme de diffeacuterents appareils et tailles de viewport
(le viewport deacutesigne la partie drsquoune page web qui est visible dans la fenecirctre du navigateur
drsquoun ordinateur smartphone tablette ou drsquoun autre dispositif Le viewport est variable et
mouvant en fonction de la taille de la fenecirctre du navigateur et en fonction de lrsquoutilisation des
fonctions de deacutefilement ou scrolling (souris ou ascenseur))[6]
Par conseacutequent la conception des sites doit deacutesormais tenir compte de plusieurs cateacutegories
drsquoappareil selon la taille de lrsquoeacutecran Cependant le changement rapide des proprieacuteteacutes de
lrsquoappareil nrsquoa pas pu ecirctre suivi par les deacuteveloppeurs web Pour remeacutedier agrave ce problegraveme ces
derniers ont eu recours aux mecircmes hypothegraveses en fonction de la demande du serveur La
demande drsquoune ressource par un navigateur est suivie par une chaicircne drsquoagent utilisateur (user
agent string) geacuteneacuteralement envoyeacutee avec la demande pour identifier le type de navigateur
utiliseacute La lecture de cette derniegravere du cocircteacute du serveur entraicircne la diffusion de deux versions
une version mobile conccedilue pour une largeur maximale si lrsquoutilisateur envoyait des chaicircnes
drsquoagents drsquoutilisateurs mobiles et une version bureau conccedilue pour une largeur minimale
Les deacuteveloppeurs ont pu suite agrave lrsquointroduction des media queries de CSS eacutecrire des deacutecla-
rations de style conditionnelles par des proprieacuteteacutes multimeacutedia telle que la taille de la fenecirctre
(voir figure 219) Lrsquoadaptation drsquoun site pour un support speacutecifique ou une taille de fenecirctre au
moment de lrsquoexeacutecution est donc devenue donc possible Ce concept qui sert agrave faire en sorte
qursquoun seul site reacuteponde agrave diffeacuterentes proprieacuteteacutes multimeacutedias (principalement la taille de la
fenecirctre) au moment de lrsquoexeacutecution afin drsquoameacuteliorer lrsquoexpeacuterience de lrsquoutilisateur est appeleacute
Responsive Web Design [59]
Une eacutetude reacutecente meneacutee par Walsh et al identifie cinq types de bugs survenant plus
particuliegraverement dans les sites web RWD [73] Pour la plupart il srsquoagit de bugs deacutejagrave observeacutes
dans drsquoautres sites au cours de notre propre eacutetude
55
Collision drsquoeacuteleacutements Crsquoest un bug dans lequel les eacuteleacutements se chevauchent en raison de la
modification de la fenecirctre (viewport) Ce bug peut eacutegalement influencer le bon fonctionnement
des sites web dans le cas ougrave certains eacuteleacutements fonctionnels dans les pages sont masqueacutes
Deacutepassement drsquoeacuteleacutements Les eacuteleacutements ont besoin de se redimensionner ils manquent
drsquoespace mais ils doivent aussi ecirctre assez grands pour contenir tous leurs enfants Cela arrive
dans le cas ougrave un eacuteleacutement deacutepasse agrave lrsquoexteacuterieur de son parent en raison drsquoun manque drsquoespace
Lrsquoeacuteleacutement peut alors ecirctre inaccessible masqueacute par un autre eacuteleacutement ou par-dessus drsquoautres
eacuteleacutements
Ce bug sur le site httpswwwthelilycom On peut le voir dans la figure 220 ougrave le div
avec les boutons du menu se termine en dehors de la barre de menu et hors de vue
Deacutepassement du viewport Ce bug se produit lorsque les eacuteleacutements sont pousseacutes hors de
la fenecirctre (viewport) et deviennent inaccessibles ou cacheacutes Sur le site web httpswww
slaveryfootprintorg ce bug a eacuteteacute trouveacute La figure 221 montre comment les bugs non
observables peuvent creacuteer des problegravemes agrave des largeurs infeacuterieures Ici le div du milieu est un
peu en dehors de la fenecirctre mais il ne montre aucun problegraveme observable Cependant crsquoest agrave
440px que nous pouvons voir clairement le contenu deacuteborder de la fenecirctre
Disposition agrave petite eacutechelle En fonction de lrsquoimpleacutementation certaines mises en page
peuvent ecirctre afficheacutees correctement que dans un petit intervalle de largeur Par exemple un
affichage pourrait ecirctre seulement correct entre 320 et 325 pixels de largeur
Couverture drsquoeacuteleacutements Ce bug survient lorsqursquoun conteneur nrsquoest pas assez large pour
contenir tous les eacuteleacutements et qursquoun ou plusieurs eacuteleacutements sont pousseacutes sur une ligne suppleacute-
56
mentaire
Un exemple drsquoeacuteleacutement enveloppeacute peut ecirctre vu dans la figure 222 On pourrait faire valoir que
ce nrsquoest pas un bug cependant agrave des largeurs infeacuterieures la liste est de nouveau aligneacutee en
haut Cela montre qursquoayant cette liste aligneacutee en haut est la disposition deacutesireacutee
Nous donnerons des exemples sur la deacutetection de ce genre de bugs dans la section 542
57
(a) Fenecirctre large
(b) Fenecirctre moyenne
Figure 210 ndash Exemple drsquoeacuteleacutements inaccessibles
58
(a) SpringerOpen
(b) Naymz
Figure 212 ndash Exemple de mojibake (a) donneacutees UTF-8 afficheacutees comme Cp1252 (b) donneacuteesCp1252 afficheacutees comme UTF-8
59
(a) Mojibake adresse invalide
(b) Mojibake nom coupeacute en deux partie
Figure 213 ndash Exemples de Mojibake dans Doodle
60
Figure 214 ndash Des donneacutees extraites de la base de donneacutees sont incorrectement eacutechappeacutees dansIEEE PDF eXpress on constate la preacutesence de plusieurs apostrophes
Figure 215 ndash Sur cette page YouTube du code JavaScript est afficheacute au lieu drsquoecirctre interpreacuteteacute
Figure 216 ndash Eacuteleacutements mobiles la position et la bordure de la zone du texte changent lors de lasaisie du texte (NSERC)
61
Figure 217 ndash Confusion connexiondeacuteconnexion dans une page web le contenu pour un utilisa-teur connecteacute (en haut de la page a droite) coexiste avec le formulaire de connexion reacuteserveacute auxutilisateurs qui ne sont pas en principe connecteacutes
Figure 218 ndash Incoheacuterences dans le reacutesultat de la recherche
media (max-width 420px) body
background-color white
media (min-width 421px)
body background-color blue
Figure 219 ndash Code CSS avec des conditions sur la largeur de lrsquoappareil Il srsquoagit drsquoun exemplede media queries
62
(a) Tous les boutons sont correcte-ment dans la barre de menu
(b) Le bouton laquo About raquo en sur-brillance fait saillie en dehors dela barre de menu son parent
Figure 220 ndash Le bug de deacutepassement drsquoeacuteleacutements sur le site httpswwwthelilycom
(a) Le div est en surbrillance mais il nrsquoy a pas debug observable
(b) En 440px nous voyons lemecircme div avec un bug obser-vable ougrave le texte deacuteborde en de-hors de la fenecirctre
Figure 221 ndash Le bug de deacutepassement du viewport sur le site httpswwwslaveryfootprintorg
(a) La liste est en haut (top-aligned) (b) Agrave une largeur infeacuterieure lrsquoeacuteleacutementlaquo CGV raquo est pousseacute sur une ligne suppleacutemen-taire
Figure 222 ndash Le bug de couverture drsquoeacuteleacutements sur le site httpswwwanthedesignfr
CHAPITRE 3
EacuteTAT DE LrsquoART
Il existe un certain nombre drsquooutils servant agrave tester les applications web Dans ce chapitre nous
classons les approches existantes en quatre grandes familles qursquoon nomme successivement
outils de tests approches visuelles approches deacuteclaratives et outils RWD Nous allons les
exposer en donnant un peu plus de deacutetails sur quelques outils relatifs agrave chaque famille
drsquoapproches Enfin nous citons leurs points faibles en montrant leurs limites dans certains cas
31 OUTILS DE TEST
La deacutetection de bugs drsquointerface peut drsquoabord ecirctre abordeacutee comme un problegraveme de test logiciel
classique Sous cet angle il se veut une geacuteneacuteralisation des fonctionnaliteacutes offertes par des
logiciels drsquoanalyse de sites web comme Google Analytics 1 ou Piwik 2 Ces outils suivent les
requecirctes HTTP et fournissent un tableau de bord pour analyser des donneacutees de base pays
drsquoorigine dureacutee drsquoune session etc Cependant ces outils ne gegraverent geacuteneacuteralement pas Ajax ne
peuvent pas ecirctre utiliseacutes comme outils de test (ils nrsquoeacutevaluent pas les conditions sur le contenu
de la page par exemple) et ne signalent rien sur le contenu de la page sur les actions de
1 httpwwwgooglecomanalytics2 httpwwwpiwikorg
64
WebDriver driver = new FirefoxDriver()driverget(http)ListltWebElementgt items = driverfindElements(BycssSelector(li))int left = -1for (WebElement item items) if (left == -1) left = itemgetLocation()getX()continue
assert(left = itemgetLocation()getX())
Figure 31 ndash Exemple de code pour Selenium WebDriver
lrsquoutilisateur ou les requecirctes Ajax
Les logiciels de test en ligne tels que Capybara Selenium WebDriver Watij ou Sahi sont plus
proches de nos objectifs Ces outils fournissent diffeacuterents langages pour deacutecrire les tests et
eacutecrire des assertions sur lrsquoapplication Les scripts WebDriver sont eacutecrits en Java Capybara
a sa propre API 3 dans le langage Ruby Watij utilise WebSpec 4 qui est une API deacutefinie
par-dessus Java (35 donne un exemple de test webspec-watij) et Sahi utilise SahiScript
une extension de JavaScript 5 Tous ces langages sont impeacuteratifs (crsquoest-agrave-dire proceacuteduraux) et
visent agrave piloter une application en effectuant des actions La partie test se reacuteduit agrave lrsquoinsertion
drsquoinstructions similaires agrave assert dans le code du script A titre drsquoexemple la figure 31
donne un extrait de code Java pour Selenium WebDriver pour veacuterifier que tous les eacuteleacutements
satisfaisant un seacutelecteur CSS sont agrave gauche
3 httpmakandracardscommakandra1422-capybara-the-missing-api4 httpwatijcomwebspec-api5 httpsahicoin
65
311 CAPYBARA
Capybara est un framework drsquoautomatisation Web utiliseacute pour creacuteer des tests fonctionnels qui
simulent lrsquointeraction des utilisateurs agrave une application Il constitue une bibliothegraveque conccedilue
pour ecirctre utiliseacutee sur un pilote Web sous-jacent (underlying web driver) tels que selenium-web
driver rack test driver ou capybara-webkit Il fournit un DSL (Domain Specific Language)
servant agrave deacutecrire les actions exeacutecuteacutees par ces pilotes Web [30] Une fois la page est chargeacutee
via le DSL et le pilote Web sous-jacent Capybara essayera de localiser lrsquoeacuteleacutement pertinent
dans le DOM (Document Object Model) et exeacutecutera une action du genre clics de boutons
de liens etc Son DSL deacuteployeacute pour exprimer les actions agrave exeacutecuter est tregraves intuitif la figure
32 montre quelques unes de ses commandes de base Dans le but de trouver un eacuteleacutement[30]
Capybara par lrsquointermeacutediaire du DSL cherchera dans le DOM les attributs suivants
mdash Champ de texte (fill_in) id name eacuteleacutement drsquoeacutetiquette associeacute (label)
mdash Cliquez sur un lienbouton (click_link click_button) id titre texte dans la
balise valeur
mdash Case agrave cocherbouton radioliste deacuteroulante (check uncheck choose select) id nom
eacuteleacutement drsquoeacutetiquette associeacute (label)
mdash Teacuteleacutecharger le fichier (attach_file) id nom
312 WATIJ
Watij ou Web Application Testing en Java est un projet de test impleacutementeacute en Java destineacute agrave
automatiser les tests fonctionnels des applications Web au-dessus de IE (Internet Explorer) Il
est baseacute sur la conception de Watir [33] et possegravede une capaciteacute de recherche drsquoeacuteleacutements lui
permettant de trouver drsquoacceacuteder et de controcircler facilement nrsquoimporte quel eacuteleacutement HTML agrave
66
visit(rsquopage_urlrsquo) navigate to pageclick_link(rsquoid_of_linkrsquo) click link by idclick_link(rsquolink_textrsquo) click link by link textclick_button(rsquobutton_namersquo) fill text fieldfill_in(rsquoFirst Namersquo with =gt rsquoJohnrsquo) choose radio buttonchoose(rsquoradio_buttonrsquo) choose radio buttoncheck(rsquocheckboxrsquo) check in checkboxuncheck(rsquocheckboxrsquo) uncheck in checkboxselect(rsquooptionrsquo from=gtrsquoselect_boxrsquo) select from dropdownattach_file(rsquoimagersquo rsquopath_to_imagersquo) upload file
Figure 32 ndash Commandes de base de Capybara [30]
travers le DOM en mobilisant lrsquointerface COM Il prend en charge drsquoautre part les expressions
XPath pour trouver les eacuteleacutements HTML sur une page et gegravere les pop-up (fenecirctres contextuel
du navigateur) en les interceptant et les rendant disponibles pour lrsquointeraction Watij peut
deacutetecter la fin du chargement drsquoune page en cours de chargement Watij dispose drsquoun ensemble
relativement riche drsquoAPI pour lrsquoeacutecriture de scripts de simulation La connexion agrave un site Web
exige agrave chaque fois des informations tel que le nom de lrsquoutilisateur et le mot de passe (page
de connexion (login) de Yahoo figure 34) Les tacircches manuelles demandeacutees dans ce cas agrave
lrsquoutilisateur sont les suivantes
1 Afficher une fenecirctre de navigateur
2 Mettre lrsquoURL correcte pour ouvrir cette page
3 Attendre que la page se charge et se stabilise
4 Taper le nom drsquoutilisateur dans le champ ID
5 Taper le mot de passe
6 Cliquer sur le bouton Connexion
Le code approprieacute pour automatiser les tests fonctionnels de ces eacutetapes en utilisant Watij est
donneacute dans la figure 33
67
IE ie = new IE()iestart(wwwmailyahoocom)ietextField(SymbolFactoryidusername)set(ouss)ietextField(SymbolFactoryidpasswd)set(ber2017)iebutton(SymbolFactoryidsave)click()
Figure 33 ndash Exemple drsquoutilisation de Watij [71]
Figure 34 ndash Page de connexion (login) de Yahoo [71]
68
public class WebspecDemoTest
WebSpec spec
Beforepublic void setup()spec = new WebSpec()safari()
Afterpublic void tearDown()specbrowser()close()
Testpublic void testSearchWikipedia() throws Exception specopen(httpdewikipediaorgwikiWikipediaHauptseite)
specfindinput()withid(searchInput)setvalue(Softwaretest)specfindbutton()withid(searchButton)click()assertEquals(Softwaretest specfindh1()withid(firstHeading)getinnerText())
specfinda()withinnerText(Quality)click()assertEquals(Softwarequalitat specfindh1()withid(firstHeading)getinnerText())
Testpublic void testOpenGoogle() throws Exception specopen(httpwwwgooglede)specjquery(input[name=rsquoqrsquo])setvalue(Testing)specfindinput()withname(btnG)click()assertTrue(specfinddiv()withid(res)finda()getinnerText()
startsWith(Softwaretesting))
Figure 35 ndash Exemple simple drsquoun test JUnit Watij WebSpec [7]
69
313 SAHI
Sahi est un outil open source drsquoautomatisation et de test drsquoapplications web En tant qursquooutil
drsquoautomatisation Sahi offre la possibiliteacute drsquoenregistrer et de lire des scripts Il prend en charge
Java et JavaScript Mecircme si SahiScript ressemble agrave JavaScript il nrsquoest pas exeacutecuteacute comme le
JavaScript normal dans le navigateur Lrsquoideacutee de base du fonctionnement de Sahi est deacutecrite
ci-dessous
les parties centrales de Sahi montreacutes dans la figure 37 incluent le serveur proxy Sahi et
le moteur JavaScript Les reacuteponses HTML qui transitent par le proxy sont modifieacutees de
telle sorte que JavaScript soit injecteacute au deacutebut et agrave la fin de la reacuteponse Cela permettra au
navigateur drsquoenregistrer et de lire les scripts et de communiquer avec le proxy en cas de
besoin En plus de la gestion des demandes de pages du navigateur Sahi gegravere eacutegalement les
commandes personnaliseacutees lieacutees agrave lrsquoenregistrement agrave la lecture etc envoyeacutees par celui-ci
Les fonctionnaliteacutes propres de Sahi font de lui un bon support des fichiers de base de donneacutees
supportant JavaScript AJAX ainsi que les API simples Outre ses fonctionnaliteacutes normales
agrave lrsquoeacutegard de la prise en charge de laquo ant raquo(lrsquooutil logiciel) Du fait que ses API ne deacutependent
pas beaucoup de la structure HTML le controcircleur Sahi (IDE) peut ecirctre utiliseacute dans diffeacuterents
navigateurs Sahi qui nrsquoutilise pas XPath renferme des API tels que _ near _in etc
lrsquoaidant agrave trouver un eacuteleacutement par rapport agrave un autre laquo SahiScript raquo est fondeacute sur JavaScript
Il est analyseacute par Sahi et exeacutecuteacute par le moteur JavaScript rhino La figure 36 illustre un
exemple de constructions (exemple drsquoeacutecriture de conditions) dans Sahi Elles sont identiques agrave
JavaScript hormis le $ obligatoire utiliseacute dans les variables
De plus tous les outils mentionneacutes ci-dessus (agrave lrsquoexception de Sahi) neacutecessitent un plugin
speacutecifique au navigateur pour fonctionner et ne supportent donc qursquoune poigneacutee de navigateurs
en geacuteneacuteral les laquo Big Five raquo (Firefox Safari IE Opera et Chrome) Cependant la part de marcheacute
70
Comparer des valeurs normalesif ($username == PartnerUser)
_click(_link(Partner Login))
Comparer avec les attributs du navigateur exposeacutes par Sahiif (_getText(_div(page_type)) == Partner Page)
_click(_link(Partner Login))
Comparaison avec les attributs du navigateur NON exposeacutes par les fonctions inteacutegreacutees de Sahi en utilisant _fetchif (_fetch(_link(0)href) == httpsahicoin)
_click(_link(Partner Login))
Comparaison avec les attributs du navigateur NON exposeacutes par les fonctions inteacutegreacutees de Sahi en utilisant _conditionif (_condition(_link(0)href == httpsahicoin))
_click(_link(Partner Login))
Figure 36 ndash Exemple de Sahi script [18]
Figure 37 ndash Architecture de Sahi (figure tireacutee de [21])
71
des navigateurs autres que ceux-ci eacutequivaut agrave 20 et srsquoeacutelegraveve agrave 63 pour les appareils autres
que les ordinateurs de bureau (tablettes consoles et mobiles) 6 En dehors de Sahi ces outils
de test nrsquoatteignent pas plus des trois quarts du marcheacute et pour certains seulement 25 pour
les appareils autres que les ordinateurs de bureau Par conseacutequent lrsquoaffirmation selon laquelle
laquo la plupart des utilisateurs raquo sont pris en charge par eux est agrave peu pregraves non fondeacutee
32 APPROCHE VISUELLE
Pour deacuteceler les deacutefauts dans la mise en page lrsquooutil principal deacuteployeacute par ce genre de
techniques est geacuteneacuteralement la vision par ordinateur Ces derniegraveres consistent entre autres en
la deacutelimitation des bordures des eacuteleacutements par la deacutetection des contours et en la deacutecouverte des
changements par le calcul de la diffeacuterence entre deux captures drsquoeacutecran dont les couleurs du
texte des arriegravere-plans seront compareacutees pour repeacuterer le texte illisible Au lieu drsquoagir sur des
informations speacutecifiques agrave la mise en page telles que la taille et la position des eacuteleacutements ces
techniques sont baseacutees sur la comparaison des captures drsquoeacutecran pixel par pixel Dans ce cas
les erreurs sous la forme drsquoune capture drsquoeacutecran sont signaleacutees et clairement marqueacutees
321 WEBSEE
Certains travaux ont eacutegalement eacuteteacute reacutealiseacutes sur lrsquoutilisation des techniques drsquoanalyse drsquoimage
pour identifier les problegravemes de mise en page [69] WebSee [58] est en particulier un outil
impleacutementeacute en Java qui utilise plusieurs bibliothegraveques tierces pour impleacutementer certains des
algorithmes speacutecialiseacutes Il applique des techniques du domaine de la vision par ordinateur pour
analyser la repreacutesentation visuelle des pages Web pour deacutetecter automatiquement et localiser
les eacutechecs de preacutesentation WebSee identifie les eacutechecs de preacutesentation puis deacutetermine les
6 En date de feacutevrier 2014 tel que reacutecupeacutereacute sur StatCounter httpgsstatcountercom
72
eacuteleacutements dans la source HTML de la page qui pourraient ecirctre responsables des eacutechecs observeacutes
en comparant la repreacutesentation visuelle de la page Web rendue sous test et son apparence
drsquoorigine (oracle)
A cette fin WebSee prend en entreacutee le code HTMLCSS de la page agrave analyser et un oracle
(une image) du rendu attendu de la page Un ensemble de diffeacuterences entre la page rendue
et lrsquoimage de reacutefeacuterence est calculeacute et ces diffeacuterences sont ensuite regroupeacutees en groupes
susceptibles de repreacutesenter diffeacuterents deacutefauts sous-jacents dans la page Une deuxiegraveme phase
de traitement tente drsquoidentifier les eacuteleacutements HTML correspondant aux pixels de diffeacuterence
qui sont ensuite ordonneacutes par une meacutetrique de prioriteacute et envoyeacutes agrave lrsquoutilisateur La figure
38 montre les diffeacuterentes phases de lrsquoapproche La premiegravere entreacutee est la page web (P) qui
devrait ecirctre analyseacute pour deacuteterminer les deacutefaillances de preacutesentation La forme de P est une
URL qui pointe vers soit un emplacement sur le reacuteseau ou drsquoun systegraveme de fichiers ougrave tous les
fichiers HTML CSS JavaScript et les fichiers meacutedias de P sont accessibles
La deuxiegraveme entreacutee est lrsquooracle (O) qui speacutecifie les proprieacuteteacutes drsquoexactitude visuels de P La
forme de O est une image qui peut ecirctre soit une maquette ou une capture drsquoeacutecran drsquoune version
correcte de P
La troisiegraveme entreacutee est un ensemble de reacutegions speacuteciales (SR) deacutefinissant des zones de O qui
contiendront du texte dynamique des annonces etc qui deacutefinissent les reacutegions dynamiques
communes dans les applications web modernes Les reacutegions speacuteciales fournissent un meacuteca-
nisme pour permettre aux deacuteveloppeurs de speacutecifier de telles reacutegions qui devraient ecirctre traiteacutees
speacutecialement
Lrsquoapproche comporte trois phases La premiegravere phase est la phase de la deacutetection elle compare
les repreacutesentations visuelles de P et O pour deacutetecter un ensemble de diffeacuterences soit dans
les reacutegions speacuteciales ou dans les autres parties de la page web Lrsquoensemble des diffeacuterences
73
identifieacute est regroupeacutees ensuite en groupes qui sont susceptibles de repreacutesenter des deacutefauts
sous-jacents dans P Pour ce faire WebSee exploite Selenium WebDriver pour prendre des
captures drsquoeacutecran et il exploite la bibliothegraveque laquo pdiff raquo qui est une bibliothegraveque perceptuelle
de diffeacuterenciation drsquoimage pour comparer les images et calculer les diffeacuterences Lrsquoalgorithme
de regroupement (clustering) DBSCAN (Density Based Spatial Clustering of Applications
with Noise) est utiliseacute pour regrouper les pixels de diffeacuterences (dbscan est un algorithme
impleacutementeacute dans la bibliothegraveque Apache Commons Math3)
La deuxiegraveme phase est la phase de localisation elle analyse une carte de rendu de P pour
identifier lrsquoensemble des eacuteleacutements HTML qui deacutefinissent les pixels de chaque ensemble
de diffeacuterences en cluster Pour cette eacutetape WebSee tire parti de la mise en œuvre de la
bibliothegraveque R-tree [50] et Selenium WebDriver pour extraire des informations de deacutelimitation
de rectangles
Enfin la troisiegraveme phase est la phase du traitement de lrsquoensemble du reacutesultat elle priorise
lrsquoensemble des eacuteleacutements identifieacutes pour chaque grappe et fournit cela comme une sortie pour
le deacuteveloppeur 39 La capaciteacute de recherche de sous-image pour lrsquoheuristique en cascade est
fournie par OpenCV
322 FLB (FIGHTING LAYOUT BUGS)
Une combinaison de lrsquoinjection CSS avec des techniques de diffeacuterentiation drsquoimage est
preacutesenteacutee par Tamm dans une preacutesentation Tech Talk de Google [69] en tant que moyen pour
deacutetecter quelle partie drsquoun site web est du texte et si elle chevauche drsquoautres eacuteleacutements frontiegraveres
Lrsquoapproche colore tout le texte sur une page Web en noir puis en blanc tout en prenant des
captures drsquoeacutecran entre les deux comme le montre la figure 310 Les parties de lrsquoimage qui sont
du texte sont localiseacutees en diffeacuterant les deux images Les lignes verticales et horizontales des
74
Figure 38 ndash Le fonctionnement geacuteneacuteral de lrsquooutil drsquoanalyse WebSee
Figure 39 ndash Outputs de WebSee eacuteleacutements HTML deacutefectueux
75
eacuteleacutements dans lrsquoimage reacutesultante sont deacutecouvertes via des techniques baseacutees sur le traitement
drsquoimage Une comparaison de ces lignes avec les eacuteleacutements de texte deacutecouverts agrave lrsquoeacutetape
preacuteceacutedente permet de deacuteterminer les cas ougrave le texte chevauche les bordures des eacuteleacutements La
mecircme technique permet aussi de deacuteterminer si les eacuteleacutements de texte ont le contraste approprieacute
agrave leur arriegravere-plan
Cependant cette technique ne fonctionne que pour le texte et drsquoautres eacuteleacutements qui peuvent
facilement ecirctre identifieacutes en utilisant des techniques baseacutees sur le traitement drsquoimage pour la
reconnaissance drsquoobjets Le champ drsquoapplication est petit car il se concentre exclusivement
sur le texte pour le chevauchement des eacuteleacutements
323 PHANTOMCSS
PhantomCSS [20] est un framework de test drsquointerface graphique open source qui possegravede la
capaciteacute de situer les changements drsquoune iteacuteration agrave une autre par des algorithmes diffeacuterant sur
deux images Drsquoautre part il permet drsquoexclure certaines parties de lrsquointerface graphique du
test Les pages Web susceptibles drsquoafficher des donneacutees non controcircleacutees par le deacuteveloppeur et
des eacuteleacutements tels que des annonces Web des donneacutees utilisateur des banniegraveres animeacutees des
images et du texte trouvent dans ces caracteacuteristiques un instrument beacuteneacutefique Le deacuteveloppeur
dans ce cas est obligeacute de speacutecifier manuellement les parties de lrsquointerface graphique non
concerneacutees par les tests en nommant lrsquoeacuteleacutement en question ou le speacutecifiant ses coordonneacutees x
et y
76
Figure 310 ndash Exemple de traitement drsquoimage avec FLB (figure tireacutee de [63])
77
324 SIKULI
Un autre framework drsquoautomatisation est Sikuli [39] qui identifie et manipule les controcircles
de lrsquointerface graphique dans une page web en utilisant la recherche par image (sub-image
searching) Les captures drsquoeacutecran constituent la base de cette approche visuelle pour la recherche
et lrsquoautomatisation des interfaces utilisateurs Elle permet aux utilisateurs
mdash de prendre une capture drsquoeacutecran drsquoun eacuteleacutement de lrsquointerface graphique (comme un bouton
de la barre drsquooutils une icocircne ou une boicircte de dialogue)
mdash drsquointerroger un systegraveme drsquoaide en faisant appel agrave la capture drsquoeacutecran au lieu du nom de
lrsquoeacuteleacutement
mdash de fournir eacutegalement une API de script visuel pour automatiser les interactions de
lrsquointerface graphique par lrsquointermeacutediaire des modegraveles de capture drsquoeacutecran pour diriger
les eacuteveacutenements de la souris et du clavier
Dans lrsquoexemple montreacute dans la figure 311 le bouton de fermeture doit effacer le contenu de la
zone de texte ainsi que lui-mecircme Supposons que lrsquointerface graphique soit deacutejagrave dans un eacutetat
qui contient un laquo 5 raquo au deacutebut nous trouvons la zone de texte bleue sur lrsquoeacutecran et stockons la
reacutegion correspondante qui a la plus grande similariteacute dans la zone bleue Ensuite apregraves avoir
cliqueacute sur le bouton de fermeture deux assertNotExist sont utiliseacutes pour veacuterifier la disparition
dans la zone bleue [39]
325 APPLITOOLS
La segmentation pure de lrsquoimage des pages Web et la comparaison visuelle pixel par pixel
sont agrave lrsquoorigine de lrsquooutil commercialiseacute AppliTools Eyes [2] qui offre une interaction des
scripts de test creacutees par lrsquoutilisateur et son application Dans cet outil le serveur Web est
78
Figure 311 ndash Exemple drsquoutilisation de Sikuli (figure tireacutee de [39])
chargeacute de teacuteleacutecharger les captures drsquoeacutecran en appliquant un algorithme de diffeacuterence drsquoimage
entre lui et une capture drsquoeacutecran preacuteceacutedente La diffeacuterence entre les deux images est traduite par
AppliTools par une deacutetection des reacutegressions dans une mise en page GUI Ces changements
dans une interface Web sont exploiteacutes par le deacuteveloppeur pour actualiser lrsquoimage de base dans
le cas ougrave le changement eacutetait intentionnel
Cependant cette approche est orienteacutee vers la deacutetection de bugs de type statique de chevau-
chement ou de deacutebordement des eacuteleacutements dans un document et actuellement ne supporte pas
la veacuterification de modegraveles temporels agrave travers plusieurs instantaneacutes de la mecircme page De plus
lrsquoapproche geacutenegravere beaucoup de faux positifs si la page rendue contient du texte leacutegegraverement
diffeacuterent de lrsquoimage de reacutefeacuterence Crsquoest le cas lorsque par exemple la fenecirctre du navigateur a
des dimensions diffeacuterentes et que le texte srsquoeacutecoule diffeacuteremment (mais pas neacutecessairement
incorrectement) par rapport agrave lrsquoimage Pour reacutesoudre ce problegraveme lrsquoutilisateur doit deacutefinir
manuellement pour chaque oracle ce que lrsquoon appelle des reacutegions dynamiques qui devraient
ecirctre ignoreacutees par le systegraveme lors de lrsquoanalyse de la page
79
33 APPROCHE DEacuteCLARATIVE
Les techniques dans cette derniegravere famille fonctionnent directement sur des informations sur
la mise en page Elles peuvent obtenir des informations sur les eacuteleacutements (position largeur
et hauteur) impliqueacutes dans lrsquointerface graphique que ce soit par analyse drsquoimage ou par
laquo siphonnage raquo (scraping) de lrsquointerface graphique Crsquoest drsquoailleurs ce que ces techniques ont
en commun La maniegravere de relier les diffeacuterents eacuteleacutements de mise en page les uns aux autres
ainsi que les valeurs de leurs paramegravetres de mise en page sont indiqueacutes par les entreacutees de ces
approches qui ne sont pas tant un script que des documents deacuteclaratifs
Les assertions opeacutereacutees sur lrsquointerface graphique peuvent par exemple ecirctre de la forme laquo lrsquoeacuteleacute-
ment 1 est-il situeacute agrave gauche de lrsquoeacuteleacutement 2 raquo ou laquo lrsquoeacuteleacutement 1 a-t-il une largeur infeacuterieure
agrave lrsquoeacuteleacutement 2 raquo Certaines de ces techniques ont des langages speacutecialiseacutes deacutecrivant des
assertions comme celles-ci
Les speacutecifications deacuteclaratives des interfaces utilisateurs ont fait lrsquoobjet de beaucoup de
recherches dans le passeacute Les premiegraveres tentatives incluent le systegraveme MASTERMIND qui
utilise un langage de modeacutelisation baseacute sur CORBA [67] drsquoautres approches incluent le
modegravele de mise en page drsquoAuckland [57] Adobe Adam et Eve [66] et les modegraveles de proprieacuteteacutes
[57]
331 MASTERMIND
Dans MASTERMIND le deacuteveloppeur de lrsquointerface utilisateur doit creacuteer des modegraveles de tacircche
(task model) drsquoapplication (domaine) et de preacutesentation Le modegravele drsquoapplication est speacutecifieacute
agrave lrsquoaide du langage de deacutefinition drsquointerface CORBA (IDL) Le modegravele de tacircche preacutesente les
tacircches de lrsquoutilisateur final dans une structure hieacuterarchique et comporte les informations de
80
commande neacutecessaires pour controcircler lrsquointerface utilisateur lors de lrsquoexeacutecution Le modegravele de
preacutesentation deacutecrit la disposition de lrsquointerface utilisateur y compris les affichages statiques
et dynamiques Il permet la speacutecification des mises agrave jour automatiques de preacutesentation
lorsque les donneacutees drsquoapplication ou le contexte de preacutesentation changent En outre il integravegre
des principes de conception graphique afin de donner un soutien complet au concepteur de
dialogue
332 AUCKLAND LAYOUT MODEL (ALM)
Le modegravele de mise en page drsquoAuckland (ALM) est une technique impleacutementeacute pour laquo NET raquo
Java et Haiku permettant de speacutecifier une mise en page 2D Elle est utiliseacutee pour organiser les
controcircles dans une interface graphique Le modegravele permet la speacutecification de contraintes baseacutees
sur lrsquoalgegravebre lineacuteaire Il calcule une disposition optimale en utilisant la programmation lineacuteaire
Les eacutegaliteacutes et les ineacutegaliteacutes lineacuteaires peuvent ecirctre speacutecifieacutees sur les tabulations horizontales et
verticales qui sont des lignes virtuelles formant une grille dans laquelle tous les eacuteleacutements de
lrsquointerface graphique sont aligneacutes [57]
Lrsquoexemple dans la figure 312 montre la maniegravere de disposer trois boutons en mobilisant
trois zones Les boutons ont deacutejagrave eacuteteacute ajouteacutes agrave la fenecirctre mais ils nrsquoont pas eacuteteacute arrangeacutes Leur
emplacement et leur taille sont deacutetermineacutes par la speacutecification ALM (figure 313) Quelque
soit le redimensionnement de la fenecirctre les deux colonnes auront toujours la mecircme largeur et
les deux lignes la mecircme hauteur en raison de la lineacuteariteacute des deux contraintes
81
Figure 312 ndash Exemple avec Auckland (figure tireacutee de [1])
LayoutSpec ls = new LayoutSpec ()XTab x1 = lsAddXTab ()YTab y1 = lsAddYTab ()
lsAddArea (lsLeft lsTop x1 y1 bouton1)lsAddArea (x1 lsTop lRight y1 bouton2)lsAddArea (lsLeft y1 lsRight lsBottom bouton3)
donne la mecircme largeur aux deux colonnes et la mecircme hauteur aux deux rangeacuteeslsAddConstraint (nouveau double [] 2 -1 nouvelle variable [] x1 lsRight
OperatorTypeEQ 0)lsAddConstraint (nouveau double [] 2 -1 nouvelle variable [] y1 lsBottom
OperatorTypeEQ 0)
Figure 313 ndash Une simple speacutecification avec Auckland [1]
82
333 ADOBE ADAM ET EVE
ASL (Adobe Source Libraries) est un projet au sein du Adobe Software Technology Lab
(STLab) Crsquoest un ensemble de bibliothegraveques de composants logiciels rendu disponible sous
licence Open Source par Adobe Systems permettant de deacutefinir des algorithmes sous forme
deacuteclarative Les deux premiegraveres bibliothegraveques significatives dans ASL sont la bibliothegraveque
de modegravele de proprieacuteteacutes (Adam) et la bibliothegraveque de modegravele de mise en page (Eve) dont
les composants permettent de modeacuteliser lrsquoapparence et le comportement drsquoune interface
dans une application logicielle Adam consiste en un solveur et un langage deacuteclaratif pour
deacutecrire les contraintes et les relations sur une collection de valeurs qui sont geacuteneacuteralement
les paramegravetres drsquoune commande drsquoapplication (une fonction) Adam fournit la logique qui
controcircle le comportement drsquoune interface Humaine (IH) Il est similaire dans son concept agrave une
feuille de calcul ou agrave un gestionnaire de formulaires Les valeurs sont deacutefinies et les valeurs
deacutependantes sont recalculeacutees Adam procure des fonctionnaliteacutes pour reacutesoudre les valeurs
interdeacutependantes mais il ne constitue pas un systegraveme de contrainte geacuteneacuteral Eve consiste
en un solveur et un langage deacuteclaratif pour la construction drsquoune IH Le solveur de mise en
page prend en compte une description riche des eacuteleacutements de 14 interfaces pour obtenir une
disposition de haute qualiteacute rivalisant avec ce qui peut ecirctre reacutealiseacute avec le placement manuel
Une seule description suffit pour plusieurs plateformes et langages OS Eve a eacuteteacute deacuteveloppeacutee
pour fonctionner avec Adam il peut cependant aussi ecirctre utiliseacutee seule Adam et Eve peuvent
ecirctre inteacutegreacutees dans un certain nombre drsquoenvironnements Ils ont la faculteacute de fonctionner
ensemble ou indeacutependamment mais ils doivent ecirctre combineacutes avec drsquoautres installations
pour construire une application Parmi les exemples typiques drsquointerfaces utilisateur effectuant
la synthegravese de paramegravetres de commande la boicircte de dialogue laquo Enregistrer sous raquo dans le cas
drsquoenregistrement drsquoun fichier image (figure 314) Elle se compose drsquoun champ de texte pour
entrer le nom du fichier un menu de types de fichiers et des curseurs offrant deux possibiliteacutes
83
Figure 314 ndash Exemple drsquoune boicircte de dialogue pour enregistrer un fichier image
pour configurer la compression lors de lrsquoenregistrement dans un format qui le prend en charge
Les valeurs des curseurs sont lieacutees par une relation exprimant le compromis entre le taux de
compression et la qualiteacute de lrsquoimage
La boicircte de dialogue aide lrsquoutilisateur agrave syntheacutetiser les paramegravetres drsquoune commande drsquoenre-
gistrement de fichier La figure 315 montre une speacutecification pour cette tacircche de synthegravese de
paramegravetres de commande eacutecrite dans le langage deacuteclaratif speacutecifique de laquo Adam raquo Dans 315
les sections laquo interface raquo laquo output raquo et laquo invariant raquo deacuteclarent les variables ou les proprieacuteteacutes
du modegravele de proprieacuteteacutes Les variables drsquointerface peuvent ecirctre mises agrave jour par un client du
modegravele de proprieacuteteacute par exemple agrave la suite de lrsquointeraction drsquoun utilisateur avec un widget
drsquointerface utilisateur Les valeurs des variables de sortie (output) constituent le reacutesultat de la
synthegravese des paramegravetres de commande La valeur (booleacuteenne) des variables invariantes indique
si un ensemble de variables satisfait une condition donneacutee La section laquo logique raquo dans 315
deacutefinit toujours les deacutependances et les regravegles de calcul entre les variables Le langage pour
ces calculs est le langage drsquoexpression ASL qui peut faire des appels aux fonctions externes
84
sheet save image file interface
file name file type rdquobmprdquocompression ratio 100image quality 100
logicrelate compression ratio lt== 100 - 4 x (100 - image quality)image quality lt== 100 - (100 - compression ratio) 4
outputresult lt== (file type == rdquojpegrdquo) type file type name file name ratio compression ratio type file type name file name
invariant check name lt== file name 6= rdquo rdquo
Figure 315 ndash Une simple speacutecification deacuteclarative dans le langage Adam du modegravele de proprieacuteteacutepour le dialogue dans Figure314 [56]
enregistreacutees (C ++) et peut ainsi effectuer des actions arbitraires La tacircche du programmeur de
lrsquoapplication est de deacutefinir ces calculs appeleacutes meacutethodes et qui sont exeacutecuteacutees est controcircleacutees
par le modegravele de proprieacuteteacutes
Le langage laquo Eve raquo peut ecirctre utiliseacute pour speacutecifier la disposition et la qualiteacute de preacutesentation
des eacuteleacutements drsquointerface ainsi que les liaisons entre les widgets dans lrsquointerface utilisateur et
les valeurs dans le modegravele de proprieacuteteacute La speacutecification de disposition pour le dialogue de la
figure 314 apparaicirct dans la figure 316
Nous allons cependant les rejeter ainsi que beaucoup drsquoautres langages de balisage GUI
(QML XAML) car ils visent agrave geacuteneacuterer des interfaces baseacutees sur des contraintes et ne peuvent
pas ecirctre utiliseacutes comme des assertions agrave tester de plus ils se concentrent principalement sur
la reacutesolution de contraintes lineacuteaires relatives agrave la taille et au placement des eacuteleacutements dans un
formulaire
85
layout save image file view dialog(name rdquoSave Image Asrdquoplacement place columnspacing 6child horizontal align fill) edit text(bind file name name rdquoFile namerdquo)popup(bind file type name rdquoSave as typerdquo items [
name rdquoWindows bitmap (bmp)rdquo value rdquobmprdquo name rdquoJPEG (jpeg)rdquo value rdquojpegrdquo
])row()
column(child horizontal align right) label(name rdquoCompression ratiordquo)label(name rdquoImage qualityrdquo)
column(horizontal align fill child horizontal align fill)
slider(bind compression ratioformat first 1 last 100 interval 1 )
slider(bind image qualityformat first 1 last 100 interval 1 )
row(horizontal align right) button(name rdquoSaverdquo action ok bind result
default true)button(name rdquoCancelrdquo action cancel)
Figure 316 ndash Une simple speacutecification avec Eve [56]
86
Pour montrer pourquoi les langages de geacuteneacuteration de GUI ne sont pas approprieacutes consideacute-
rons lrsquoexemple simple de CSS Comme nous lrsquoavons vu plus haut CSS exprime agrave quoi les
eacuteleacutements devraient ressembler (suggestions) mais pas comment ils vont lrsquoecirctre Consideacuterez les
deacuteclarations de style suivantes dans le cas ougrave un eacuteleacutement div2 est imbriqueacute dans div1
div1 width 200px div2 width 300px
Il nrsquoest pas possible avec CSS drsquoaffirmer que le contenu de div1 ne devrait jamais ecirctre plus
large que sa propre largeur deacuteclareacutee Si tel est le cas le navigateur peut soit deacutevelopper la boicircte
de lrsquoeacuteleacutement (sans tenir compte de sa deacuteclaration) soit afficher les eacuteleacutements en dehors de son
conteneur (un problegraveme dont nous avons beaucoup parleacute dans la section 22) La seule solution
consiste pour le concepteur du document CSS agrave srsquoassurer que la largeur deacuteclareacutee de tous les
eacuteleacutements qui seront contenus dans div1 est infeacuterieure agrave 200 pixels En revanche une proprieacuteteacute
deacuteclarative pourrait facilement imposer agrave lrsquoexeacutecution que la largeur de div1 est toujours de
200 pixels
On pourrait argumenter que cela peut aussi ecirctre veacuterifieacute en analysant statiquement le document
HTML avec le fichier CSS (bien qursquoaucun travail apparenteacute ne semble reacutepondre agrave cette
question) Il y a cependant des cas ougrave ce nrsquoest mecircme pas possible Si nous supprimons la
deacuteclaration de div2 dans lrsquoexemple ci-dessus mais que div2 contient une image de 300 pixels
de large il est impossible de deacutecouvrir que la proprieacuteteacute deacutesireacutee nrsquoest pas satisfaite en regardant
simplement le CSS
En guise drsquoexemple final consideacuterons le code suivant qui stipule que les eacuteleacutements de certains
menus doivent ecirctre placeacutes verticalement et que leur taille est fixe
menu li float left
87
width 200pxheight 50px
Rien ne permet au concepteur de speacutecifier que tous les eacuteleacutements doivent toujours ecirctre sur la
mecircme ligne (c-agrave-d Avoir la mecircme position top) (mecircme si la valeur de top est deacutefinie) Ce
ne sera pas le cas si la fenecirctre contenant est redimensionneacutee suffisamment petite pour que les
eacuteleacutements puissent flotter en dessous Dans un tel cas il faut effectivement rendre la page dans
un navigateur avec ses dimensions reacuteelles pour deacutecouvrir la preacutesence du problegraveme
334 GALEN FRAMEWORK
Galen Framework [10] est une bibliothegraveque de tests drsquointerfaces graphiques pour tester les
mises en page drsquoapplications web Le comportement mutuel entre les diffeacuterents eacuteleacutements
drsquoune interface graphique et le type de paramegravetres de mise en page valides sont deacutecrits
par des descriptions de mise en page creacutees par lrsquoutilisateur La veacuterification de la validiteacute
de lrsquoemplacement et la taille des eacuteleacutements est reacutealiseacutee par un test oracle en utilisant ces
descriptions
Pour deacuteclarer divers aspects de la position et de la taille drsquoun eacuteleacutement par rapport agrave drsquoautres
eacuteleacutements ou en valeurs absolues le deacuteveloppeur de test utilise un langage de description de
test personnaliseacute fourni par le framework Galen Galen est baseacute sur un outil drsquoautomatisation
de navigateur web appeleacute Selenium qui permet de creacuteer des scripts automatiseacutes simulant les
entreacutees de lrsquoutilisateur Il permet eacutegalement de speacutecifier des plages de valeurs acceptables La
figure 317 montre un exemple de ce agrave quoi ressemble une speacutecification Galen [9]
Le test de reacutegression des mises en page drsquoapplications web est entiegraverement automatiser par
le framework Galen en combinant ces deux technologies Des informations preacutecises sur les
88
valeurs valides pour les eacuteleacutements de lrsquointerface eacutetant neacutecessaires au fichier de speacutecification
requis par le framework Galen cette opeacuteration peut ecirctre coucircteuse et rendre la modification
drsquoune interface graphique plus difficile
Un regard sur le langage de speacutecification de Galen indique que le travail requis par le deacute-
veloppeur de test est similaire agrave la speacutecification de lrsquointerface graphique elle-mecircme Les
speacutecifications de Galen et la conception GUI elle-mecircme sont effectueacutees avec agrave peu pregraves la
mecircme freacutequence Lrsquoinconveacutenient est la flexibiliteacute reacuteduite et lrsquoaugmentation des coucircts Cepen-
dant lrsquoapproche permet une grande preacutecision lors de la reacutealisation des tests de reacutegression et la
veacuterification de la fonctionnaliteacute de la conception sur diffeacuterentes tailles drsquoeacutecran
335 ITARRAY AUTOMOTION
Le framework Automotion drsquoITArray [70] est similaire au framework Galen La diffeacuterence
par rapport agrave beaucoup drsquoautres frameworks est que la bibliothegraveque drsquoassertions permet
reacuteellement drsquoaffirmer si la position et lrsquoalignement des eacuteleacutements sont lieacutes les uns aux autres
avec des appels tels que is ElementInside (otherElement) ou areElementsAligned
(List) La faccedilon dont ces tests sont speacutecifieacutes est encore tregraves verbeuse Un exemple de script
Automotion est illustreacute agrave la Figure 318
34 OUTILS RWD
Il est toujours judicieux de tester la conception drsquoun site web sur divers appareils Mais
cette meacutethode classique prend beaucoup de temps et en raison de la varieacuteteacute des dispositifs
disponibles aujourdrsquohui le deacuteveloppeur peut ne pas avoir accegraves agrave tous ces dispositifs Plusieurs
outils ont eacuteteacute deacuteveloppeacutes pour fournir le service permettant drsquoafficher une page dans une
89
Declaring objects with css and xpath locatorsobjects
header css divfusion-secondary-headersw-logo css fusion-logo-link
navigation-links- xpath ul[id=rsquomenu-mainrsquo]li[not((contains(idrsquomobile-menu-itemrsquo)))]nav-menu css divfusion-secondary-main-menufollow-us-box xpath div[contains(classrsquofusion-alertrsquo)][1]
Home Page Tag= Home Page =
This is for Desktopon desktop
Header propertiesheader
inside screen 0px topinside screen 0px leftinside screen 0px right
Logo propertiessw-logo
31 px below the headerbelow header 31pxImage comparison with 2 precision ratioimage file sw-logopng error 5
Each navigation links must be alligned horizontally to each otheritemName -gt Current item and nextItem -gt Next itemforEach [navigation-links-] as itemName next as nextItem
$itemNamealigned horizontally all $nextItem
Navigation menu must be 20px above to the follow us allert boxnav-menu
above follow-us-box 20px
Figure 317 ndash Exemple drsquoune speacutecification Galen [9]
90
boolean result = uiValidatorinit(Scenario name)findElement(rootElement Name of eacuteleacutement we validate)sameOffsetLeftAs(eacuteleacutement Panel 1)sameOffsetLeftAs(eacuteleacutement Button 1)sameOffsetRightAs(eacuteleacutement Button 2)sameOffsetRightAs(eacuteleacutement Button 3)withCssValue(border 2px solid FBDCDC)withCssValue(border-radius 4px)withoutCssValue(color FFFFFF)sameSizeAs(list_eacuteleacutements)insideOf(eacuteleacutement Container)notOverlapWith(eacuteleacutement Other eacuteleacutement)withTopElement(eacuteleacutement 10 15)changeMetricsUnitsTo(ResponsiveUIValidatorUnitsPERCENT)widthBetween(50 55)heightBetween(90 95)drawMap()validate()
Figure 318 ndash Exemple drsquoun script Automotion [70]
fenecirctre personnaliseacutee de tailles variables agrave lrsquoaide drsquoun navigateur Web Cependant ces outils
ne fournissent aucune information autre que le rendu des pages sur diffeacuterentes tailles ce
qui oblige le deacuteveloppeur agrave eacutevaluer la reacuteactiviteacute (responsiveness) du site web manuellement
Mentionnons ici quelques outils speacutecifiques agrave la deacutetection de problegravemes lieacutes au RWD
Avec des fonctionnaliteacutes de recherche intelligente et de reacutevision rapide WebSiteResponsi-
veTest [34] prend en charge tous les principaux navigateurs pour fournir lrsquoaperccedilu exact du
site web sur un peacuteripheacuterique speacutecifique Il faut entrer lrsquoURL drsquoune page Web pour eacutevaluer
rapidement la reacuteactiviteacute En fournissant des reacutesultats preacutecis en quelques secondes lrsquooutil
eacuteconomise beaucoup de temps La convivialiteacute et la compatibiliteacute avec les navigateurs sont
drsquoautres fonctionnaliteacutes qui le rendent attractif par rapport aux autres outils disponibles
Respondr [22] permet de veacuterifier la reacuteactiviteacute en entrant lrsquoURL drsquoun site web En outre
lrsquoappareil pour lequel le site web ou la page Web est testeacute peut eacutegalement ecirctre choisi dans la
91
liste donneacutee Une fois les seacutelections effectueacutees un simple clic sur laquo Go raquo est neacutecessaire pour
recevoir une analyse complegravete du site ou de la page web en donnant lrsquoaffichage sur lrsquoappareil
seacutelectionneacute La page peut ecirctre facilement preacutevisualiseacutee agrave une largeur approprieacutee
Screenfly [27] est un outil de test de compatibiliteacute multi-peacuteripheacuterique qui permet de preacutevisua-
liser les pages Web telles qursquoelles apparaissent sur diffeacuterents appareils Les plus populaires
comprennent les tablettes et autres appareils intelligents tels que Galaxy Tab Apple iPad
Motorola Xoom En outre il prend en charge diffeacuterentes tailles drsquoeacutecran et reacutesolutions Le site
deacutetecte automatiquement si lrsquoURL saisie comporte un site mobile et vous redirige vers celui-ci
Pour basculer entre les reacutesolutions drsquoeacutecran tout ce qursquoil faut faire est de cliquer sur lrsquoicocircne du
type drsquoappareil ou choisir lrsquoappareil qui a la reacutesolution drsquoeacutecran la plus proche
Responsive Web Design Bookmarklet [26] affiche nrsquoimporte quelle page Web dans plusieurs
tailles drsquoeacutecran pour la preacutevisualisation simulant la fenecirctre drsquoaffichage de diffeacuterents peacuteripheacute-
riques Il srsquoagit drsquoun outil de conception Web rapide qui peut ecirctre consulteacute agrave partir drsquoun
ordinateur de bureau pour tester la reacuteactiviteacute de tout site web Il suffit de faire glisser le
bookmarklet au-dessus de la barre des signets (bookmarks) pour obtenir une barre drsquooutils
en haut avec des boutons pour diffeacuterentes reacutesolutions drsquoeacutecran Il ne reste plus qursquoagrave choisir
lrsquoaperccedilu de la page en cours sur diffeacuterentes largeurs drsquoeacutecran de tablettes et de smartphones
ViewPortResizer [31] est eacutegalement un bookmarklet de navigateur qui peut ecirctre utiliseacute avec
nrsquoimporte quel navigateur Web moderne Un outil de navigation convivial ViewPortResizer
est entiegraverement configurable Il permet la seacutelection drsquoune plage initiale de tailles de reacutesolution
drsquoeacutecran et la construction drsquoun bookmarklet personnaliseacute
Responsinator [23] aide les proprieacutetaires de sites agrave avoir une ideacutee de la faccedilon dont leur
site fonctionnera sur les appareils les plus populaires Juste en tapant lrsquoURL du site le site
srsquoaffichera rapidement sur des eacutecrans de diffeacuterent(e)s tailles
92
Le processus de ResponsivePX [24] consiste agrave entrer lrsquoURL du site et utiliser des boutons
pour ajuster la largeur et la hauteur de la fenecirctre drsquoaffichage afin de trouver la largeur exacte
du point drsquoarrecirct en pixels Extrecircmement simple agrave utiliser et agrave ameacuteliorer les fonctionnaliteacutes cet
outil de conception Web aide les concepteurs agrave creacuteer des sites utilisables et reacuteactifs
Froont [8] rend les tests de conception Web reacuteactifs accessibles sans neacutecessiteacutes de compeacutetences
de codage Les conceptions peuvent ecirctre creacutees dans le navigateur avec cet outil En testant
chaque URL speacutecifiquement il teste les conceptions sur de vrais appareils tout de suite
De son cocircteacute ReDeCheck [74] [73] est un outil de test de conception web reacuteactif Il est inspireacute
du graphe drsquoalignement utiliseacute dans X-PERT un concept proposeacute et deacuteveloppeacute par Choudhary
et al [42] ReDeCheck se concentre speacutecifiquement sur les bugs de mise en page causeacutes par
des conceptions reacuteactives il utilise un graphique de mise en page adaptable (RLG) qui tient
compte de lrsquoalignement des eacuteleacutements de la page Web des changements de visibiliteacute et drsquoautres
aspects de la page lorsque la largeur de la fenecirctre varie En tant que tel ReDeCheck peut
seulement veacuterifier un ensemble fixe de problegravemes de mise en page preacutedeacutefinis et ne fournit pas
un langage agrave usage geacuteneacuteral pour exprimer des assertions
35 DISCUSSION SUR LES APPROCHES EXISANTES
Nous allons maintenant discuter quelques limites des approches preacuteceacutedemment preacutesenteacutees
351 INCONVEacuteNIENTS DE LrsquoAPPROCHE DEacuteCLARATIVE
Le deacuteveloppeur de test doit se soumettre aux exigences des descriptionsscripts de test assez
verbeux en deacutecrivant les regravegles de son interface graphique (comment les eacuteleacutements sont-ils
placeacutes les uns par rapport aux autres comment ils devraient se comporter quand la taille de
93
la fenecirctre change etc) de faccedilon plus deacutetailleacutee au point ougrave le script de test devient presque
aussi descriptif que le code de lrsquointerface graphique qursquoil teste A lrsquoinstar des scripts de test
ce problegraveme neacutecessitera des mises agrave jour agrave peu pregraves au mecircme rythme que les modifications
apporteacutees agrave la conception de lrsquointerface graphique
352 LIMITES DES TECHNIQUES VISUELLES
Impossible de comparer des images de diffeacuterentes tailles drsquoeacutecran Le fait drsquoassurer lrsquoeacutega-
liteacute et la validiteacute entre une image de reacutefeacuterence (oracle) et lrsquoimage agrave tester par la diffeacuterence de
couleur de pixel implique que celles-ci ne peuvent pas ecirctre des captures drsquoeacutecran de tailles
drsquoeacutecran diffeacuterentes ce qui exclut lrsquoutilisation de lrsquoimage de reacutefeacuterence agrave partir drsquoune taille
drsquoeacutecran pour veacuterifier la validiteacute de la mise en page sur une taille drsquoeacutecran diffeacuterente La validiteacute
de la mise en page drsquoune application censeacutee fonctionner sur de nombreuses tailles drsquoeacutecran
diffeacuterentes par ces techniques exige drsquoeacutetablir des reacutefeacuterences pour toutes les tailles drsquoeacutecran
Ne fonctionne pas bien avec les donneacutees dynamiques Ces techniques baseacutees sur lrsquoimage
et travaillant sur lrsquoinformation de pixel au lieu du contenu ne donnent des reacutesultats satisfaisants
qursquoavec des donneacutees statiques (parce qursquoon utilise une image de reacutefeacuterence pour faire la
comparaison) Par conseacutequent elles posent un problegraveme majeur Chaque exeacutecution drsquoune
application correspond souvent agrave un affichage du contenu diffeacuterent puisque ces donneacutees sont
geacuteneacuteralement reacutecupeacutereacutees sur un serveur Web ou creacutees par lrsquoutilisateur mdashce qui diminue
fortement lrsquoutiliteacute de ces techniques
Signalent beaucoup de faux positifs Une diffeacuterence dans les valeurs de pixels de deux
captures drsquoeacutecran conseacutecutives peut entre constateacutee notamment si ces captures sont prises
sur des machines diffeacuterentes avec des configurations diffeacuterentes drsquoougrave lrsquoinconveacutenient des
94
Figure 319 ndash Exemple de faux positif avec PhantomCSS
techniques baseacutees sur les diffeacuterences drsquoimages qui sont sujettes agrave la deacuteclaration de faux positifs
comme indiqueacute sur le site web du reacutefeacuterentiel PhantomCSS [20] Ces petites diffeacuterences de
pixels sont parfois faussement signaleacutees par lrsquoalgorithme de test comme des erreurs de mise
en page cependant elles ne le sont pas reacuteellement La figure 319 montre un exemple de ce
cas ougrave nous pouvons observer de petites zones de pixels violets (nous avons marqueacutees ces
petites zones avec des rectangles rouges) ces images ressemblent aux images de base qui
sont entoureacutees de rectangles jaunes En reacutealiteacute ce sont pas des erreurs mais des faux neacutegatifs
rapporteacutes en raison de petites diffeacuterences de pixels dans des rendus diffeacuterents (cela pourrait
ecirctre ducirc agrave lrsquoutilisation de diffeacuterents navigateurs)
En conclusion le tableau 31 donne les grandes lignes de diffeacuterences entre trois outils majeurs
des approches existantes
95
Sahi Selinium Websee
Pas de plugin (so-lution proxy web) Plugin speacutecifique pour chaque navigateur
Configurationspeacutecifique etbibliothegravequestierces pourimpleacutementercertains desalgorithmesspeacutecialiseacutes
Tests fonctionelsdes eacuteleacutements de lapage baseacute sur letrafique HTTP en-registreacute au niveaudu proxy (play-back)
Tests fontionels
Tests de mise enpage en se ba-sant sur une ver-sion de reference(juste pour despages statiques)
Tableau 31 ndash Limites et diffeacuterences entre trois outils majeurs des approches existantes
CHAPITRE 4
DEacuteTECTION DE BUGS DrsquoINTERFACE
Comme nous avons pu le voir une analyse statique du contenu HTML et des deacuteclarations
CSS drsquoune page web nrsquoest pas suffisante pour deacutetecter les bugs drsquointerface citeacutes dans le
deuxiegraveme chapitre de cette thegravese car CSS nrsquoest pas un langage qui peut exprimer des proprieacuteteacutes
normatives pour la mise en page drsquoun document Les deacuteclarations CSS sont juste un ensemble
drsquoinstructions traiteacutees par un moteur de rendu Donner agrave CSS une expressiviteacute prescriptive
impliquerait la possibiliteacute de speacutecifier agrave quoi un eacuteleacutement ne doit pas ressembler ou qursquoune
deacuteclaration de style particulier ne peut pas ecirctre remplaceacutee par drsquoautres constructions ndashce
que le CSS ne fournit pas En outre certains des bugs deacutecrits preacuteceacutedemment impliquent la
comparaison du contenu drsquoun document agrave plusieurs moments dans le temps une chose que
CSS nrsquoest pas eacutevidemment conccedilu pour faire
Par conseacutequent afin drsquoexprimer des proprieacuteteacutes normatives pour le contenu et la mise en page
drsquoune page web un langage compleacutementaire agrave CSS est neacutecessaire Ce langage doit permettre
aux utilisateurs drsquoeacutecrire des proprieacuteteacutes deacuteclaratives sur les styles des eacuteleacutements et de traiter
des eacuteveacutenements quelles que soient les deacuteclarations CSS ou le code cocircteacute client qui ont pu ecirctre
deacuteclareacutees
Pour combler cette neacutecessiteacute dans ce chapitre nous preacutesentons Cornipickle un langage
97
deacuteclaratif permettant drsquoexprimer des proprieacuteteacutes agrave propos du document et des proprieacuteteacutes CSS
drsquoune page On discutera eacutegalement drsquoune impleacutementation drsquoun algorithme permettant de
veacuterifier automatiquement si des eacutenonceacutes du langage sont vrais pour un site web particulier
41 UN INTERPREacuteTEUR POUR LES PROPRIEacuteTEacuteS CORNIPICKLE
Nous deacutecrivons maintenant la mise en œuvre de lrsquointerpreacuteteur pour lrsquoeacutevaluation automatiseacutee
des speacutecifications Cornipickle sur les applications web Cette impleacutementation est composeacutee
drsquoenviron 7 000 lignes de code Java et JavaScript et est disponible sous licence publique
geacuteneacuterale GNU 1 Une videacuteo de lrsquooutil en action sur des exemples simples peut eacutegalement ecirctre
consulteacutee en ligne 2
411 OBJECTIFS DE CONCEPTION
Outre la fonctionnaliteacute principale agrave mettre en œuvre le deacuteveloppement de lrsquooutil a eacuteteacute motiveacute
par un certain nombre drsquoobjectifs de conception importants
Pas de plugins speacutecifiques au navigateur
Tout drsquoabord la solution doit fonctionner sur autant de combinaisons de navigateurs et de
systegravemes drsquoexploitation que possible Ceci exclut explicitement les plugins speacutecifiques au
navigateur (ou limiteacutes par le navigateur) tels que les plugins Chrome les plugins Firefox
ou lrsquoutilisation drsquooutils tels que Selenium WebDriver Pour la mecircme raison la solution ne
doit pas reposer sur la preacutesence de frameworks JavaScript (jQuery Prototype etc) et ecirctre
1 httpsgithubcomliflabcornipickle2 httpyoutube90YitGRRx2w
98
autonome Cela implique que notre outil peut fonctionner dans des combinaisons inhabituelles
(navigateurssystegravemes drsquoexploitation) comme BoatBrowser sur un teacuteleacutephone Android ou
Qupzilla sous Haiku OS
Collecte drsquoinformations cocircteacute client
Deuxiegravemement lrsquoeacutevaluation des speacutecifications doit ecirctre faite en fonction des informations
recueillies sur le client cela eacutecarte la possibiliteacute drsquoeffectuer une eacutevaluation statique de HTML
et CSS du cocircteacute serveur Ceci est obligatoire pour plusieurs raisons Il faut tenir compte du
fait que le standard CSS nrsquoest pas interpreacuteteacute de la mecircme maniegravere par tous les navigateurs Par
exemple CSS stipule que la largeur drsquoun eacuteleacutement nrsquoinclut pas le remplissage mais certaines
versions drsquoInternet Explorer incluent le remplissage dans la largeur et rendent le mecircme eacuteleacutement
avec des dimensions diffeacuterentes
Dans une large mesure la veacuterification des contraintes en examinant uniquement le code
HTML + CSS impliquerait drsquoeacutemuler le moteur de rendu de chaque navigateur compleacuteteacute par
ses laquo bizarreries raquo speacutecifiques pour parvenir agrave un verdict fidegravele
En plus des problegravemes susmentionneacutes toutes les applications que nous avons eacutetudieacutees
contiennent du code cocircteacute client qui peut modifier la disposition drsquoune page apregraves que le
moteur de mise en page a traiteacute les deacuteclarations statiques trouveacutees dans le document HTML
initial et les fichiers CSS traiteacutes au moment du chargement Ce code programmeacute pour ecirctre
exeacutecuteacute lors du chargement de la page remplace complegravetement les deacuteclarations de style que
les fichiers CSS drsquoorigine peuvent initialement deacutefinir Par conseacutequent dans tous les cas il ne
suffit pas drsquoanalyser lrsquoensemble des fichiers HTML et CSS deacutefinis par lrsquoapplication car tout
ce contenu peut ecirctre modifieacute agrave la voleacutee gracircce agrave des interactions avec lrsquoutilisateur une fois la
page chargeacutee
99
Pas drsquointerpreacutetation cocircteacute client
Troisiegravemement lrsquointerpreacutetation des speacutecifications de Cornipickle ne devrait pas ecirctre faite du
cocircteacute des clients Ceci est fait de maniegravere agrave ne pas imposer une charge de calcul excessive
dans le navigateur et permet lrsquoutilisation drsquoun autre langage que JavaScript pour lrsquoimpleacute-
mentation de cette fonctionnaliteacute Plus important encore il permet de geacuterer les proprieacuteteacutes
comportementales impliquant plus drsquoun instantaneacute de page par lrsquooutil En utilisant du code
strictement client un problegraveme survient lorsqursquoun rechargement de page complet se produit
car cela reacuteinitialise lrsquoeacutetat de tout objet JavaScript associeacute agrave cette page Eacutetant donneacute que les
speacutecifications comportementales requiegraverent la sauvegarde des informations du passeacute certains
moyens de preacuteserver ces informations dans le client agrave travers les rechargements de pages
doivent ecirctre conccedilus HTML5 fournit des fonctionnaliteacutes de stockage mais leur utilisation
limiterait la prise en charge des navigateurs (par exemple uniquement pour Opera 115 Safari
4 et IE 9 et plus reacutecents 3)
Interpreacutetation de lrsquoexeacutecution
Enfin il devrait ecirctre possible pour un utilisateur drsquoajouter de supprimer ou de modifier les
speacutecifications eacutevalueacutees par lrsquooutil Cela pose un deacutefi en raison de la construction speacuteciale We
say that qui permet drsquoajouter de nouvelles constructions grammaticales dans le langage de
base Ceci est diffeacuterent des deacutefinitions de fonction ou de preacutedicat habituelles disponibles dans
la plupart des langages ougrave la syntaxe des appels de fonctions est fixe et seuls de nouveaux
identificateurs de fonctions peuvent ecirctre ajouteacutes au moment de lrsquoanalyse Cela a neacutecessiteacute le
deacuteveloppement drsquoun analyseur BNF appeleacute Bullwinkle 4 qui peut accepter de nouvelles regravegles
3 httpwwwhtml5rockscomenfeaturesstorage4 httpsgithubcomsylvainhalleBullwinkle
100
Figure 41 ndash Architecture et interactions de Cornipickle
drsquoanalyse agrave lrsquoexeacutecution mdashcontrairement agrave la plupart des autres analyseurs qui neacutecessitent une
eacutetape de compilation chaque fois que la grammaire change
412 ARCHITECTURE ET SCEacuteNARIO DrsquoUTILISATION TYPIQUE
La combinaison de toutes les exigences dans [51] impose plus ou moins une architecture pour
lrsquooutil Cornipickle ougrave le code cocircteacute serveur prend en charge la collecte et lrsquoeacutevaluation des
speacutecifications (caracteacuteristiques) tandis que le code cocircteacute client agit uniquement comme une
laquo sonde raquo Lrsquointerrogation des informations pertinentes sur lrsquoeacutetat actuel de la page est relayeacutee
vers le serveur pour un traitement ulteacuterieur Cette interaction client-serveur a un avantage
cependant le code cocircteacute client peut ecirctre relativement leacuteger et sans eacutetat (ecirctre remis agrave zeacutero agrave
chaque fois que la page se recharge) comme tout traitement agrave eacutetat qui peut ecirctre fait par le
serveur
La figure 41 montre les interactions avec lrsquooutil Cornipickle Un deacuteveloppeur eacutecrit drsquoabord un
jeu drsquoeacutetats deacuteclaratifs (1) qui sont stockeacutes dans la meacutemoire de Cornipickle (2) En donnant
101
tagname windowwidth 956height 165 children [
tagname pid gowidth 90 children [
tagname CDATA text Hello World
]
]
Figure 42 ndash Une page simple seacuterialiseacutee en JSON
un identifiant unique agrave ce jeu drsquoeacutetats qui peut ecirctre appeleacute dans le code JavaScript agrave ecirctre
inseacutereacute dans lrsquoapplication afin que la sonde peut ecirctre chargeacutee dans chaque page (3-4) cette
addition est geacuteneacuterique et ne diffegravere que dans la chaicircne drsquoidentification Quand une page
de lrsquoapplication doit ecirctre chargeacutee (5) Cornipickle creacutee dynamiquement la sonde JavaScript
correspondant agrave lrsquoensemble drsquoassertions pour les eacutevaluer et les envoyer au client (6-8) Cette
sonde est conccedilue pour signaler un instantaneacute des donneacutees DOM et CSS pertinents sur chaque
eacuteveacutenement deacuteclencheacute par lrsquoutilisateur Quand un tel eacuteveacutenement se produit la sonde recueille
toutes les informations pertinentes sur le contenu de la page (figure 42) et les relaie au serveur
Cornipickle (9) qui les enregistre dans un journal (10-11)
En option des informations sur lrsquoeacutetat actuel des assertions en cours drsquoeacutevaluation (vrai
faux) peuvent ecirctre relayeacutees agrave la sonde (12) Un tableau de bord drsquoanalyse peut reacutecupeacuterer le
journal enregistreacute qui peut ecirctre consulteacute par le deacuteveloppeur pour interroger lrsquoeacutetat de toutes les
102
Figure 43 ndash Une capture drsquoeacutecran de Cornipickle en action
proprieacuteteacutes drsquoentreacutee au deacutebut du processus (13-16)
La figure 43 montre un exemple de Cornipickle en action Dans ce cas la sonde injecteacutee a
inseacutereacute une petite icocircne dans le coin infeacuterieur droit de la fenecirctre qui devient rouge chaque fois
qursquoune proprieacuteteacute est violeacutee Pour contourner le fait que de nombreux navigateurs deacutesactivent
les requecirctes HTTP inter-site Ajax nrsquoest pas utiliseacute pour la communication entre le client et le
serveur La sonde envoie plutocirct ses donneacutees en modifiant lrsquoattribut src drsquoune image de zeacutero
pixel injecteacutee dans la page et en passant les donneacutees collecteacutees en tant que paramegravetres GET de
cette requecircte En sens inverse le serveur relaie les informations via un cookie speacutecialement
encodeacute que la sonde peut interroger peacuteriodiquement De cette faccedilon le serveur Cornipickle
peut reacutesider sur un serveur diffeacuterent de celui de lrsquoapplication testeacutee et avoir toujours une
communication bidirectionnelle ponctuelle avec sa sonde
103
42 LE LANGAGE CORNIPICKLE
Le langage Cornipickle comporte des constructions issues de la logique du premier ordre et de
la logique temporelle lineacuteaire tels que les quantificateurs et les opeacuterateurs temporels et qui
permettent agrave un utilisateur de speacutecifier des relations complexes sur les diffeacuterents eacuteleacutements du
document agrave plusieurs moments dans le temps caracteacuteristique qui est absente dans beaucoup
de langages de script
Cornipickle nrsquoest pas un convertisseur baseacute sur des expressions reacuteguliegraveres entre des fichiers
texte et des commandes de script mais sa grammaire lutte pour le mecircme genre de lisibiliteacute En
particulier pour ameacuteliorer la lisibiliteacute la grammaire de Cornipickle permet drsquoinseacuterer diffeacuterents
mots agrave lrsquointeacuterieur des diffeacuterentes constructions Ces mots nrsquoont aucun effet sur lrsquoanalyse et
lrsquointerpreacutetation des expressions
421 SYNTAXE DU LANGAGE
Dans Cornipickle les proprieacuteteacutes sont exprimeacutees sous forme drsquoassertions sur le contenu et les
attributs drsquoune capture (snapshot) drsquoune page prise agrave un instant donneacute La maniegravere preacutecise par
laquelle ces captures sont prises agrave partir drsquoune application web donneacutee sera deacutetailleacutee plus loin
Nous commenccedilons par une illustration des diffeacuterentes constructions de la grammaire dans le
tableau 41
Seacutelection drsquoeacuteleacutements Les eacuteleacutements de la page sont lrsquouniteacute principale dans Cornipickle ils
sont seacutelectionneacutes afin drsquoexprimer quelques-unes de leurs proprieacuteteacutes Ces proprieacuteteacutes peuvent
ecirctre appliqueacutees agrave tous les eacuteleacutements seacutelectionneacutes ou au moins agrave un
104
〈S〉 = 〈predicate〉 | 〈def-set〉 | 〈statement〉
Eacutenonceacutes Cornipickle
〈statement〉 = 〈foreach〉 | 〈exists〉 | 〈binary-stmt〉 | 〈negation〉| 〈temporal-stmt〉 | 〈userdef-stmt〉 | 〈let〉 | 〈when〉〈binary-stmt〉 = 〈equality〉 | 〈gt〉 | 〈lt〉 | 〈regex-match〉 | 〈and〉 | 〈or〉 | 〈implies〉〈temporal-stmt〉 = 〈globally〉 | 〈eventually〉 | 〈never〉 | 〈next〉 | 〈next-time〉
Logique du premier ordre
〈foreach〉 = For each 〈var-name〉 in 〈set-name〉 ( 〈statement〉 )〈exists〉 = There exists 〈var-name〉 in 〈set-name〉 such that ( 〈statement〉 )〈when〉 = When 〈var-name〉 is now 〈var-name〉 ( 〈statement〉 )〈let〉 = Let 〈var-name〉 be 〈property-or-const〉 ( 〈statement〉 )〈and〉 = ( 〈statement〉 ) And ( 〈statement〉 )〈or〉 = ( 〈statement〉 ) Or ( 〈statement〉 )〈implies〉 = If ( 〈statement〉 ) Then ( 〈statement〉 )〈negation〉 = Not ( 〈statement〉 )
Expressions temporelles
〈globally〉 = Always ( 〈statement〉 )〈never〉 = Never ( 〈statement〉 )〈next〉 = Next ( 〈statement〉 )〈eventually〉 = Eventually ( 〈statement〉 )〈next-time〉 = The next time ( 〈statement〉 ) Then ( 〈statement〉 )
Tableau 41 ndash La grammaire BNF pour Cornipickle (Partie I)
105
Par conseacutequent la seacutelection de lrsquoeacuteleacutement se fait par le biais de la quantification du pre-
mier ordre classique en utilisant lrsquoanglais pour la syntaxe comme For each $x in S
ou There exists $x in S(pour dire chaque $x dans S ou Il existe $x dans S) Dans ces
expressions S deacutesigne soit un seacutelecteur CSS 5 ou un autre ensemble preacuteceacutedemment deacutefini par
lrsquoutilisateur Les seacutelecteurs CSS sont exprimeacutes en utilisant la syntaxe de jQuery $( ) Un
seacutelecteur speacutecial appeleacute CDATA peut ecirctre utiliseacute pour deacutesigner le contenu du texte des nœuds
feuilles dans un arbre DOM (les parties qui composent la page en texte clair) Si $x est une
variable quantifieacutee en utilisant le meacutecanisme deacutecrit ci-dessus on peut acceacuteder au DOM ou aux
attributs CSS de cet eacuteleacutement en utilisant $xrsquos property (ougrave property est lrsquoattribut CSS
rechercheacute) Par exemple la largeur de lrsquoeacuteleacutement srsquoeacutecrirait $xrsquos width
Les attributs de lrsquoeacuteleacutement (qui sont soit des chaicircnes de caractegraveres ou de chiffres) peuvent alors
ecirctre compareacutes en utilisant des connectifs tels que is greater than ou equals le matching
drsquoexpressions reacuteguliegraveres est fait agrave travers le preacutedicat match et lrsquoinclusion de chaicircne est affirmeacutee
par lrsquoassertion contains Des assertions de base sur les eacuteleacutements peuvent eacutegalement ecirctre
combineacutees en utilisant des connecteurs booleacuteens classiques and or if then not
Eacuteveacutenements et opeacuterateurs temporels Dans Cornipickle les eacuteveacutenements deacuteclencheacutes par
lrsquoutilisateur tels que les touches et les clics de souris sont repreacutesenteacutes comme des attributs
sur lrsquoeacuteleacutement qui est la cible de lrsquoeacuteveacutenement Par exemple un eacuteleacutement qui a eacuteteacute cliqueacute
par lrsquoutilisateur posseacutedera momentaneacutement un attribut event avec une valeur click Par
conseacutequent affirmer qursquoun eacuteleacutement $x a eacuteteacute cliqueacute peut ecirctre eacutecrit $xrsquos event is lsquoclickrsquo
Lrsquoinclusion drsquoeacuteveacutenements dans le langage conduit naturellement agrave la notion de seacutequences
de documents de captures instantaneacutees Par conseacutequent Cornipickle fournit des opeacuterateurs
5 Un seacutelecteur CSS est une expression de chemin (path expression) qui deacutefinit les eacuteleacutements drsquoun documentqui font lrsquoobjet drsquoun ensemble donneacute de regravegles Ces expressions sont deacutefinies par une grammaire reacuteguliegraverecomme stipuleacute dans la norme CSS
106
Opeacuterateurs
〈equality〉 = 〈property-or-const〉 equals 〈property-or-const〉| 〈property-or-const〉 is 〈property-or-const〉〈gt〉 = 〈property-or-const〉 is greater than 〈property-or-const〉〈lt〉 = 〈property-or-const〉 is less than 〈property-or-const〉〈regex-match〉 = 〈property-or-const〉 matches 〈property-or-const〉〈constant〉 = 〈number〉 | 〈string〉〈property-or-const〉 = 〈elem-property〉 | 〈constant〉〈number〉 = ˆd+〈string〉 = ˆ[ˆ]
Constructions auxiliaires
〈el-or-not〉 = eacuteleacutement | ε
〈set-name〉 = 〈css-selector〉 | 〈userdef-set〉 | 〈regex-capture〉〈userdef-set〉 = 〈string〉〈var-name〉 = ˆ$[wd]+
Seacutelecteur CSS
〈css-selector〉 = $( 〈css-sel-contents〉 )〈css-sel-contents〉 = 〈css-sel-part〉 〈css-sel-contents〉 | 〈css-sel-part〉〈css-sel-part〉 = ˆ[wdu0023]+
Attributs CSS
〈css-attribute〉 = value | height | width | top | left | right| bottom | color | id | text | border | event
Proprieacuteteacutes des eacuteleacutements
〈elem-property〉 = 〈elem-property-pos〉 | 〈elem-property-com〉〈elem-property-pos〉 = 〈var-name〉 rsquos 〈css-attribute〉〈elem-property-com〉 = the 〈css-attribute〉 of 〈var-name〉
Expressions reacuteguliegraveres
〈regex-capture〉 = match 〈elem-property〉 with 〈string〉
Tableau 42 ndash La grammaire BNF pour Cornipickle (Partie II)
107
emprunteacutes agrave la logique temporelle Lineacuteaire (LTL) pour exprimer des assertions sur lrsquoeacutevolution
du contenu drsquoun document au fil du temps
La construction Always ϕ nous permet de faire lrsquoassertion suivante quelle que soit lrsquoex-
pression de ϕ elle doit ecirctre vraie (True) dans tous les snapshots du document De mecircme on
utilise Eventually ϕ pour dire que ϕ sera vraie dans certains futurs snapshots du document
et Next ϕ est utiliseacute pour dire que ϕ est vrai dans la capture suivante
Une construction speacuteciale appeleacutee The next time ϕ then ψ affirme que ψ doit ecirctre vraie
mais seulement une fois que ϕ est Vraie Par exemple on peut utiliser cette construction pour
exprimer que quelque chose doit ecirctre observeacute apregraves qursquoun eacuteleacutement ait eacuteteacute cliqueacute lrsquoassertion
ne lie pas jusqursquoagrave ce moment Ceci est une leacutegegravere reacuteeacutecriture de lrsquoopeacuterateur until de LTL
Un but particulier des opeacuterateurs temporels est de comparer lrsquoeacutetat du mecircme eacuteleacutement sur plu-
sieurs snapshots Cela peut ecirctre fait dans Cornipickle avec la construction When $x is now $y ϕ
Si $x se reacutefegravere agrave lrsquoeacutetat drsquoun eacuteleacutement captureacute dans un snapshot anteacuterieur alors $y contiendra
lrsquoeacutetat du mecircme eacuteleacutement dans la capture (snapshot) actuelle
Toutes ces constructions peuvent ecirctre librement combineacutees Par exemple la proprieacuteteacute suivante
affirme que chaque eacuteleacutement de la liste se deacuteplacera vers le bas de la page agrave un certain moment
For each $x in $(li) (Eventually (
When $x is now $y ($yrsquos top is greater than $xrsquos top )))
Extension de la grammaire Une caracteacuteristique tregraves importante et exceptionnelle qui contri-
bue agrave la lisibiliteacute des speacutecifications Cornipickle est la possibiliteacute drsquoeacutetendre le vocabulaire de
base du langage Ce dernier donne aux utilisateurs cette possibiliteacute en utilisant leurs propres
deacutefinitions Ces nouvelles deacutefinitions seront lues par lrsquointerpreacuteteur et pourront ensuite ecirctre
108
Ensemble deacutefini en extension
〈def-set〉 = A 〈def-set-name〉 is any of 〈def-set-eacuteleacutements〉〈def-set-name〉 = ˆ ( =is)〈def-set-eacuteleacutements〉 = 〈def-set-eacuteleacutement〉 〈def-set-eacuteleacutements〉 | 〈def-set-eacuteleacutement〉〈def-set-eacuteleacutement〉 = 〈constant〉
Preacutedicats deacutefinis par lrsquoutilisateur
〈predicate〉 = We say that 〈pred-pattern〉 when ( 〈statement〉 )〈pred-pattern〉 = ˆ ( =when)
Eacutenonceacutes deacutefinis par lrsquoutilisateur
〈userdef-stmt〉 = empty
Tableau 43 ndash Extensions de la grammaire BNF pour Cornipickle
utiliseacutees librement comme tout eacuteleacutement de base du langage
Les preacutedicats peuvent ecirctre deacutefinis avec la construction We say that when Le texte entre
that et when est interpreacuteteacute comme une chaicircne de caractegraveres qui peut contenir des variables
Puis le texte apregraves when deacutecrit comment cette expression doit ecirctre eacutevalueacutee en termes du
vocabulaire existant Par exemple on peut deacutefinir lrsquoexpression laquo left-aligned raquo comme suit
We say that $x and $y are left-aligned when ($xrsquos left equals $yrsquos left )
La construction $x and $y are left-aligned ($x et $y sont aligneacutes agrave gauche) peut en-
suite ecirctre reacuteutiliseacutee (eacuteventuellement avec diffeacuterents noms de variables) dans des assertions
ulteacuterieures Les utilisateurs peuvent eacutegalement deacutefinir des ensembles soient des ensembles
de chaicircnes de caractegraveres des chiffres ou des ensembles drsquoeacuteleacutements agrave partir drsquoune page en les
eacutenumeacuterant en utilisant la construction A is any of
A Mojibake is any of Atilde ccopy Atildersquo Atildeuml
109
Notez que le nom de lrsquoensemble ne doit pas neacutecessairement ecirctre un seul mot lrsquoanalyseur
interpregravete tout ce qui est entre A et is any of comme un nom
La quantiteacute de donneacutees pouvant ecirctre relayeacutee de cette maniegravere eacutetant limiteacutee Cornipickle se
charge drsquoenvoyer une sonde qui ne reacutecupegravere que les informations neacutecessaires agrave lrsquoeacutevaluation
des speacutecifications fournies par lrsquoutilisateur Par conseacutequent la sonde reccediloit des instructions sur
les eacuteleacutements de la page qui sont inteacuteressants et sur les attributs DOM et CSS neacutecessaires pour
ces eacuteleacutements Ceci est fait en reacutecupeacuterant lrsquoensemble de tous les noms drsquoattributs apparaissant
dans une expression et lrsquoensemble de tous les seacutelecteurs CSS utiliseacutes dans les quantificateurs
La sonde parcourt la structure DOM drsquoune maniegravere en profondeur et produit un nœud de sortie
pour chaque nœud DOM visiteacute Par deacutefaut le nœud de sortie est vide il agit uniquement
comme un espace reacuteserveacute vide afin de preacuteserver la relation parent-enfant entre les nœuds de
sortie Ce nrsquoest que si lrsquoemplacement du nœud actuel correspond agrave lrsquoun des seacutelecteurs CSS
que les attributs et les valeurs seront ajouteacutees au nœud et seulement pour les attributs preacutesents
dans lrsquoexpression agrave eacutevaluer Des reacuteductions suppleacutementaires peuvent ecirctre reacutealiseacutees en reacuteduisant
tous les sous-arbres qui contiennent uniquement des nœuds vides Ainsi la structure DOM
produite par la sonde peut ecirctre vue comme une version laquo eacutevideacutee raquo du document original ne
contenant que des nœuds et des attributs importants pour lrsquoeacutevaluation drsquoune proprieacuteteacute
Incidemment il faut noter que ce filtrage est relativement grossier Consideacuterons par exemple
lrsquoexpression suivante
For each $x in $(p)If $xrsquos height equals 400 Then
For each $y in $(h1)$xrsquos width is greater than $yrsquos width
Cornipickle sera chargeacute drsquoaller chercher la largeur et la hauteur de tous les paragraphes et
rubriques pourtant on ne peut voir que les paragraphes de 400 pixels de hauteur qui sont
110
reacuteellement neacutecessaires pour deacutecider de la vrai valeur de la proprieacuteteacute De plus les informations
sur les titres nrsquoont drsquoimportance que si de tels paragraphes existent dans le document sinon
la proprieacuteteacute est vide Par conseacutequent les conditions de filtrage pourraient ecirctre affineacutees un
compromis doit ecirctre atteint entre les eacuteconomies de bande passante drsquoun tel filtrage et la
puissance de calcul neacutecessaire du cocircteacute client pour eacutevaluer les conditions
422 SEacuteMANTIQUE FORMELLE
Nous allons maintenant preacutesenter la seacutemantique formelle de Cornipickle La premiegravere eacutetape
consiste agrave formaliser la structure le contenu et les proprieacuteteacutes de style drsquoune page afficheacutee
Nous deacutefinissons drsquoabord un ensemble A de noms drsquoattributs Cet ensemble comprend tous les
attributs du DOM (Document Object Model Level 2) [55] et toutes les proprieacuteteacutes de feuilles de
style (CSS) qui peuvent ecirctre associeacutees agrave un eacuteleacutement Un nœud DOM est une fonction ν ArarrV
qui associe agrave chaque nom drsquoattribut une valeur prise agrave partir drsquoun ensemble V Nous utilisons
la valeur speacuteciale laquo raquo pour indiquer qursquoun attribut est indeacutefini pour un nœud donneacute Nous
distinguons un sous-ensemble E subV qui deacutesigne les noms drsquoeacuteleacutements correspondants au nom
de la balise HTML reacuteelle qui repreacutesente lrsquoeacuteleacutement (par exemple a h1 img etc)
Nous indiquerons par N lrsquoensemble de tous les nœuds DOM Lrsquoensemble T de documents
DOM comprend tous les arbres dont les nœuds sont des nœuds DOM Conformeacutement agrave la
convention adopteacutee par la plupart des navigateurs Web les eacuteleacutements de texte ne peuvent
apparaicirctre que comme feuilles et reccediloivent le nom drsquoeacuteleacutement speacutecial TEXT La figure 44
repreacutesente un tel document Si nous laissons ν se reacutefeacuterer au deuxiegraveme paragraphe du document
body nous avons par exemple ν(elementName) = ldquoprdquo ν(stylecolor) = ldquoredrdquo etc Nous
eacutetendons ν aux valeurs en deacutefinissant ν(v) = v pour tout v isinV
111
lthtmlgtltheadgtlttitlegtMy titlelttitlegt
ltheadgtltbodygtlth1gtThe first pagelth1gtltp style=colorredwidth400pxgtHello worldltpgt
ltp style=font-size14ptwidth200pxgtAnother ltbgtparagraphltbgtltpgt
ltp style=width400pxgtltpgtltbodygt
lthtmlgt
html
head body
title
CDATA
h1 p p p
CDATA CDATA CDATA b
CDATA
Figure 44 ndash Un document DOM simple (a) Structure HTML (b) Repreacutesentation en arbre DOM Seuls les noms des eacuteleacutements sont afficheacutes les attributs et valeurs restants sont omis pour plusde clarteacute
112
Soit κ T timesNrarr 2N la fonction qui eacutetant donneacute un document t isin T et un nœud ν isinN produit
lrsquoensemble κ(tν) de tous les enfants de ν dans T Soit C lrsquoensemble de tous les seacutelecteurs
CSS La fonction χ T times Srarr 2N renverra lrsquoensemble des nœuds en t correspondant agrave un
seacutelecteur CSS c isin C Les eacuteveacutenements deacuteclencheacutes par lrsquoutilisateur sont pris en compte en
supposant que certains eacuteleacutements portent un attribut avec le nom speacutecial laquo event raquo dont la
valeur deacutecrit lrsquoeacuteveacutenement auquel cet eacuteleacutement est lieacute Par exemple un utilisateur qui clique sur
un bouton ferait en sorte que lrsquoattribut laquo event raquo de ce bouton porterait laquo click raquo comme valeur
De cette faccedilon il est possible qursquoun instantaneacute drsquoun document contienne des informations sur
les eacuteveacutenements dynamiques survenant dans lrsquoapplication
La seacutemantique de Cornipickle est deacutefinie sur des traces des documents DOM une trace est
une seacutequence finie drsquoeacuteleacutements de T que nous deacutesignerons par t = t0 t1 tk Eacutetant donneacute
que toutes les expressions impliquant des constructions deacutefinies avec We say that peuvent
facilement ecirctre converties en expressions qui utilisent uniquement des constructions agrave partir
du langage de base il suffit de deacutefinir la seacutemantique pour ce langage de base On dira qursquoune
trace t satisfait une expression Cornipickle ϕ noteacutee t |= ϕ lorsque son eacutevaluation renvoie la
valeur Vrai (gt) La notation t i indique le suffixe de t agrave partir de son i-egraveme eacuteveacutenement
La seacutemantique complegravete est deacutefinie reacutecursivement dans le tableau 44 En termes formels
lrsquoexpressiviteacute du langage Cornipickle correspond agrave une extension du premier ordre de la
logique temporelle lineacuteaire ougrave les eacuteveacutenements sont des structures arborescentes des paires
nom-valeur semblables agrave celles utiliseacutees par le moniteur drsquoexeacutecution BeepBeep [53] ce-
pendant BeepBeep nrsquoa pas la possibiliteacute de creacuteer des constructions grammaticales deacutefinies
par lrsquoutilisateur En outre le langage a eacuteteacute eacutetendu agrave des constructions qui mecircme si elles
nrsquoaccroissent pas lrsquoexpressiviteacute ameacuteliorent la lisibiliteacute des speacutecifications tel que The next
time 6
6 Formellement t |= The next time ϕ then ψ si et seulement si t |= Notϕ Until (ϕ And ψ)
113
t |= νrsquos a equals νprimersquos aprime hArr ν(a) = ν
prime(aprime)t |= νrsquos a equals v hArr ν(a) = v
t |= Notϕ hArr t 6|= ϕ
t |= ϕ And ψ hArr t |= ϕ and t |= ψ
t |= ϕ Ou ψ hArr t |= ϕ or t |= ψ
t |= If ϕ Then ψ hArr t 6|= ϕ ou t |= ψ
t |= There exists ξ in $(c) such that ϕ hArr t |= ϕ[ξν ] pour certains ν isin χ(t0c)t |= For each ξ in $(c) ϕ hArr t |= ϕ[ξν ] pour tout ν isin χ(t0c)
t |= Alwaysϕ hArr t |= ϕ et t1 |= Alwaysϕ
t |= Eventuallyϕ hArr t |= ϕ ou t1 |= Eventuallyϕ
t |= Nextϕ hArr t1 |= ϕ
t |= ϕ Until ψ hArr Il existe ige 0 tel quet i |= ψ and t j |= ϕ for j lt i
When ξ is now ξ prime ϕ hArr Il existe ν prime isin t0 tel queν(id) = ν prime(id) and t |= ϕ[ξν prime]
Tableau 44 ndash La seacutemantique formelle de Cornipickle aaprime isin A sont les noms drsquoattributs DOMv isin V est une valeur drsquoattribut c isin C est un seacutelecteur CSS ξ et ξ prime sont des noms de variablesν ν prime isin N sont les nœuds DOM et ϕ et ψ sont des eacutenonceacutes Cornipickle quelconques Lorsque test vide Always srsquoeacutevalue agrave V rai et Eventually et Next srsquoevaluent agrave Faux
114
Le cas de lrsquoexpression When $x is now $y justifie une explication cependant Cette construc-
tion est utiliseacutee pour deacutesigner le mecircme eacuteleacutement drsquoun document agrave deux moments diffeacuterents dans
le temps En raison de la nature dynamique des applications web il ne suffit pas drsquoutiliser sim-
plement For each $x in $(s) suivi par For each $y in $(s) avec le mecircme seacutelecteur
CSS s Les eacuteleacutements drsquoune page peuvent ecirctre deacuteplaceacutes arbitrairement vers nrsquoimporte quelle
partie drsquoun document et par conseacutequent la reacutecupeacuteration drsquoeacuteleacutements avec le mecircme seacutelecteur
ne garantit pas qursquoils seront reacutepartis sur le mecircme domaine deux fois Cornipickle reacutesout ce
problegraveme en donnant agrave chaque eacuteleacutement un attribut unique appeleacute cornipickleid (raccourci
agrave id dans le tableau) Cet identifiant ne change jamais quelles que soient les manipulations de
lrsquoapplication sur un eacuteleacutement Lrsquoexpression When $x is now $y eacutevalue la variable $y avec
lrsquoeacuteleacutement ayant la mecircme cornipickleid comme cela a eacuteteacute donneacute agrave lrsquoeacutevaluation de la variable
$x permettant de comparer les attributs du mecircme eacuteleacutement dans deux instantaneacutes distincts de
la page
43 EXPRIMER DES PROPRIEacuteTEacuteS AVEC CORNIPICKLE
Au moyen drsquoune tel langage il est possible de donner des exemples de proprieacuteteacutes correspondant
agrave certains des bugs citeacutes preacuteceacutedemment Par exemple en prenant pour Mojibake lrsquoensemble
deacutefini preacuteceacutedemment la preacutesence de problegravemes de codage de caractegraveres dans une page peut
ecirctre deacutetecteacutee avec
We say that $x doesnrsquot contain $y when (Not ($xrsquos text matches $yrsquos value ))
For each $text in $(CDATA) (For each $mojibake in Mojibake ($text doesnrsquot contain $mojibake ))
Nous ajoutons la construction doesnrsquot contain agrave la grammaire simplement pour ameacuteliorer
115
la lisibiliteacute de la deacuteclaration qui suit
Similairement pour preacuteciser qursquoune classe speacutecifique drsquoeacuteleacutements ne devrait jamais se deacuteplacer
on peut eacutecrire ce qui suit
We say that $x is immobile when (Always (
When $x is now $y (($xrsquos left equals $yrsquos left)
And($xrsquos top equals $yrsquos top ))))
For each $item in $(li) ( $item is immobile )
Lrsquointuitiviteacute de speacutecifications peut encore ecirctre mise en eacutevidence dans ce dernier exemple qui
stipule qursquoau moins un eacuteleacutement de la liste a la valeur drsquoun autre eacuteleacutement de liste la derniegravere
fois que lrsquoutilisateur a cliqueacute sur un bouton appeleacute laquo Go raquo
We say that I click on Go when (There exists $b in $(button) such that (
($brsquos text is Go)And($brsquos event is mouseup)))
Always (If (I click on Go) Then (
There exists $x in $(value) such that (The next time (I click on Go)
Then (There exists $y in $(value) such that (
$xrsquos text equals $yrsquos text )))))
La lisibiliteacute de cette speacutecification devrait ecirctre mise en contraste avec le code proceacutedural qursquoon
aurait besoin drsquoeacutecrire pour deacutetecter le mecircme problegraveme qui est objectivement plus long et
beaucoup moins clair Par exemple dans jQuery on obtiendrait lrsquoeacutequivalent de la figure 45
Il est maintenant possible de reprendre certains exemples de bugs mentionneacutes en deacutebut de
thegravese et de montrer comment ceux-ci peuvent ecirctre deacutetecteacutes par des expressions Cornipickle
116
$(document)mouseUp(function(event) var e = argumentscalleeif ($(eventtarget)text() === Go) var current_values = []$(value)each(current_valuespush($(this)text())
)if (elastValues == undefined)
var found = falsefor (var v in current_values)
if ($inArray(v elastValues)) found = truebreak
If (found)
consolelog(Error)elastValues = current_values
)
Figure 45 ndash Exemple de code jQuery veacuterifiant que deux eacuteleacutements ont le mecircme texte
117
approprieacutees Prenons drsquoabord le cas drsquoun eacuteleacutement qui se deacuteplace dans une page cliquer sur
un eacuteleacutement change sa classe CSS cela entraicircne la modification de la zone de deacutelimitation de
lrsquoeacuteleacutement eacuteventuellement le deacuteplacement drsquoautres eacuteleacutements qui ne doivent pas bouger
On doit drsquoabord deacutefinir ce que signifie ecirctre immobile La construction When $x is now $y
nous permet de comparer les proprieacuteteacutes drsquoun mecircme eacuteleacutement dans deux snapshots diffeacuterents de
la page mecircme si le positionnement relatif de lrsquoeacuteleacutement dans le DOM a changeacute
We say that $x is immobile when (Always (
When $x is now $y (($xrsquos left equals $yrsquos left)And($xrsquos top equals $yrsquos top)
))
)
Avec cette expression il devient facile de speacutecifier par exemple que chaque eacuteleacutement drsquoune
liste doit demeurer agrave sa position
name Immobile itemsdescription List items should never change positionseverity Error
For each $item in $(li) (
$item is immobile)
De la mecircme maniegravere on peut speacutecifier que des eacuteleacutements doivent toujours ecirctre aligneacutes les uns
par rapport aux autres
Nous deacutefinissons drsquoabord quelques preacutedicats en utilisant la construction We say that
118
We say that $x and $y are left-aligned when ($xrsquos left equals $yrsquos left
)We say that $x and $y are top-aligned when (
$xrsquos top equals $yrsquos top)
We say that the page is big when (The media query (min-width 200px) applies
)The following rules apply when (
the page is big)
Ces preacutedicats nous permettent de simplifier lrsquoexpression rechercheacutee qui devient une double
quantification sur les eacuteleacutements drsquoune mecircme liste
name Menus aligneddescription All list items should either be left- or top-alignedseverity Warning
For each $z in $(menu li) (
For each $t in $(menu li) (($z and $t are left-aligned)Or($z and $t are top-aligned)
))
Nous ne faisons aucune reacuteclamation formelle concernant lrsquoexhaustiviteacute du langage ou son
expressiviteacute Cependant des preuves anecdotiques reacutevegravelent que tous les bogues de mise en
page dans notre enquecircte peuvent ecirctre exprimeacutes par une expression approprieacutee suggeacuterant qursquoil
est bien adapteacute agrave la tacircche agrave accomplir
CHAPITRE 5
DEacuteTECTION AVANCEacuteE BUGS COMPORTEMENTAUX ET RWD
Nous avons preacutesenteacute au chapitre preacuteceacutedent Cornipickle et la faccedilon drsquoeacutevaluer des bugs de
preacutesentation en analysant le contenu drsquoune seule page relativement indeacutependamment des
autres Dans ce chapitre nous nous inteacuteressons davantage aux bugs dits comportementaux
Dans ces bugs ce nrsquoest pas la preacutesentation graphique des pages qui est deacutefectueuse mais bien
la fonctionnaliteacute mecircme de lrsquoapplication Malgreacute tout nous pouvons exprimer et deacutetecter ces
bugs agrave partir de proprieacuteteacutes drsquoeacuteleacutements de lrsquointerface
Nous donnerons drsquoabord des exemples de bugs comportementaux illustreacutes dans une application
appeleacutee Beep Store Nous citons en suite les solutions actuelles et deacutecrivons ensuite notre
approche qui constitue une technique automatiseacutee fournissant des oracles de test dans le
but de deacutetecter les bugs comportementaux qui lient les donneacutees agrave lrsquoordre des consultations
de plusieurs pages de lrsquoapplication cela est fait en combinant Cornipickle avec un robot
drsquoexploration (RIA Crawler) Cette technique est aussi capables de veacuterifier la coheacuterence drsquoune
mise en page reacuteactive (responsive) sur une large gamme de largeurs de la fenecirctre Pour cela
nous avons inteacutegreacute une petite application dans le but de changer simultaneacutement la taille de la
fenecirctre du navigateur afin de deacutetecter des bugs RWD
120
51 BUGS COMPORTEMENTAUX DANS LE BEEP STORE
Afin drsquoeacutetudier les problegravemes de bugs comportementaux dans les applications RIA (Web 20)
deacutefinis dans 212 nous montrons quelques exemples de bugs illustreacutes sur une application
appeleacutee le Beep Store [53]
Le Beep Store est une application web client-serveur autonome impleacutementeacutee en PHP et
JavaScript qui permet aux utilisateurs enregistreacutes de parcourir une collection fictive de livres
et de musique et de geacuterer un panier virtuel composeacute de ces eacuteleacutements Cette application dont
les caracteacuteristiques ont eacuteteacute extraites drsquoune eacutetude exhaustive des applications web du monde
reacuteel est une RIA au sens propre du terme les interactions utilisateurs sont complegravetement
asynchrones ne neacutecessitent jamais le rechargement de la page deacutependent des actions passeacutees
des utilisateurs et consistent en un seul document dont les diffeacuterentes parties sont montreacutees
ou cacheacutees en fonction de lrsquoeacutetat actuel de lrsquoapplication
Connexions multiples Un des bugs qui peuvent ecirctre basculeacutes dans le Beep Store permet agrave
lrsquoutilisateur drsquoacceacuteder agrave la page de connexion tout en eacutetant deacutejagrave connecteacute Ceci est deacutetecteacute par
le fait que le lien laquo Srsquoidentifier raquo (Login) apparaicirct dans la barre drsquoaction supeacuterieure mecircme apregraves
que lrsquoutilisateur srsquoest connecteacute avec succegraves comme le montre la figure 51 1 Eacutevidemment une
application bien construite ne fournirait pas un bouton de connexion apregraves qursquoun utilisateur se
soit deacutejagrave connecteacute cette proprieacuteteacute est agrave eacutetat dans le sens ougrave lrsquoeacutetat valide drsquoune page deacutepend de
la seacutequence des actions passeacutees qui sont effectueacutees par lrsquoutilisateur (dans ce cas le fait qursquoune
connexion reacuteussie ait eu lieu)
1 On a vu au chapitre 2 comment des sites web reacuteels preacutesentent exactement ce problegraveme
121
Figure 51 ndash Le bug de connexions multiples Un utilisateur deacutejagrave connecteacute se voit proposer lrsquoop-tion de se reconnecter
Figure 52 ndash Le bug des paniers multiples Des boutons pour creacuteer un panier et ajouter desarticles au panier coexistent sur la mecircme page
Paniers multiples Un autre bug permet agrave lrsquoutilisateur de creacuteer plusieurs paniers drsquoachat
mecircme apregraves en avoir creacuteeacute un premier La figure 52 montre un exemple de ce bug un panier a
deacutejagrave eacuteteacute creacuteeacute puisque lrsquointerface affiche des boutons permettant agrave lrsquoutilisateur drsquoajouter des
articles au panier Pourtant les boutons pour creacuteer un nouveau panier sont eacutegalement afficheacutes
Supprimer drsquoun panier inexistant Ce bug est lrsquoinverse du preacuteceacutedent parfois le Beep
Store permet agrave lrsquoutilisateur de retirer un objet de son panier avant mecircme de le creacuteer Nous
pouvons voir dans la figure 53 que les boutons pour creacuteer un panier sont preacutesents avec les
boutons pour en retirer les eacuteleacutements
122
Figure 53 ndash Le bug de la suppression drsquoun panier inexistant Des boutons pour retirer du panieret creacuteer un panier coexistent sur la mecircme page
Ces bugs sont clairement comportementaux car ils sont causeacutes par des actions anteacuterieures
de lrsquoutilisateur ou des actions qui nrsquoont jamais eu lieu Il convient eacutegalement de noter que
selon lrsquoimpleacutementation du serveur ces bugs ne deacuteclenchent pas neacutecessairement des messages
drsquoerreur dans les logs Nous pouvons facilement imaginer un cas ougrave une action est rejeteacutee et ne
creacutee pas drsquoautres problegravemes mais le client ne devrait jamais avoir eacuteteacute preacutesenteacute avec lrsquooption
52 SOLUTIONS ACTUELLES
Les travaux connexes sur le test drsquoapplications web pour de tels types de bugs se concentrent
sur les moyens de trouver des erreurs dans les applications en effectuant une recherche
exhaustive de leur espace drsquoeacutetat
Les robots drsquoexploration (laquo crawlers raquo) font partie inteacutegrante des moteurs de recherche web et
sont deacutedieacutes agrave la collecte et agrave lrsquoindexation de documents web Ils ont eacuteteacute deacuteveloppeacutes agrave lrsquoorigine
pour lrsquoarchivage la reacutecupeacuteration drsquoinformations (trouver des adresses e-mail ou des pages
de produits par exemple) Cependant on a rapidement deacutecouvert que les crawlers pouvaient
ecirctre utiliseacutes agrave drsquoautres fins en particulier un crawler peut ecirctre consideacutereacute comme un outil
drsquoexploration drsquoespace drsquoeacutetat et agrave ce titre ecirctre utiliseacute pour effectuer des tests automatiseacutes
123
Un processus drsquoexploration traditionnel commence agrave partir des URL de deacutemarrage Les pages
web correspondant agrave ces URL sont teacuteleacutechargeacutees et les hyperliens preacutesents sur celles-ci sont
extraits et ajouteacutes agrave un ensemble drsquoURL agrave visiter eacutegalement appeleacute le crawl frontier Comme
le nombre drsquoURL qui peuplent la frontiegravere drsquoexploration augmente tregraves rapidement un critegravere
de priorisation du teacuteleacutechargement de certaines pages est geacuteneacuteralement appliqueacute Agrave leur tour
les URL les mieux classeacutees dans la limite de lrsquoexploration sont teacuteleacutechargeacutees et de nouveaux
liens sont extraits Cette opeacuteration est reacutepeacuteteacutee jusqursquoagrave ce que tous les liens accessibles soient
visiteacutes [62 65]
Certaines fonctionnaliteacutes de base des applications web traditionnelles sont modifieacutees dans
les RIA ce qui rend lrsquoexploration des RIA plus difficile que celle des applications web
traditionnelles Dans lrsquoanalyse RIA lrsquoordre drsquoanalyse respecte la seacutequence de pages possible
comme si un internaute lrsquoutilisait Comme nous lrsquoavons vu contrairement aux applications
web traditionnelles une URL nrsquoidentifie pas de faccedilon unique lrsquoeacutetat de lrsquoapplication et ne peut
donc pas ecirctre simplement demandeacutee au serveur agrave tout moment
Dans une application avec une gestion du panier comme le Beep Store il serait possible
pour un robot drsquoexploration traditionnel de trouver des bugs comportementaux lagrave ougrave il nrsquoy
en a pas lrsquoordre de visite est crucial Par exemple dans un sceacutenario ougrave lrsquoutilisateur peut
creacuteer un panier supprimer un panier ajouter un article agrave un panier et modifier un panier pour
modifier la quantiteacute un bug qui permet agrave lrsquoutilisateur drsquoeacutediter un article dans son panier sans
avoir de panier pourrait ecirctre deacutecouvert Apregraves la creacuteation drsquoun panier lrsquoajout drsquoun eacuteleacutement
et la suppression du panier lrsquoensemble drsquoURL du crawler traditionnel contient lrsquoURL agrave
modifier Ensuite lorsque vous essayez drsquoatteindre cette URL un bug survient car le panier a
eacuteteacute supprimeacute Cependant il peut srsquoagir drsquoun faux positif car cette seacutequence drsquoactions nrsquoest
probablement pas possible pour un utilisateur Un robot drsquoexploration traditionnel nrsquoest donc
pas adapteacute agrave la recherche de bugs comportementaux
124
Dans un crawler web pour RIA la page associeacutee agrave une seed URL (un crawler commence
par une liste drsquoURL agrave visiter appeleacutee les seeds) est extraite et chargeacutee dans un navigateur
virtuel Un module est requis pour veacuterifier si crsquoest la premiegravere fois que la page construite
est rencontreacutee Un extracteur drsquoeacuteveacutenements reacutecupegravere les eacuteveacutenements JavaScript de la page
un de ces eacuteveacutenements est seacutelectionneacute et exeacutecuteacute sur la page La page reacutesultante est ensuite
collecteacutee et le processus se poursuit jusqursquoagrave eacutepuisement de toutes les actions deacutecouvertes
[41] Sur la base de ce modegravele diffeacuterentes strateacutegies drsquoexploration (telles que la recherche en
profondeur (depth-first search) Greedy Model-Based et Component-Based) ont eacuteteacute suggeacutereacutees
[61 36 45 40 46 44]
Certains outils ont deacutejagrave eacuteteacute conccedilus pour tester les RIA Par exemple WebMate [43] peut
extraire lrsquoarborescence drsquoeacutetat drsquoune application web Cet arbre est ensuite compareacute aux arbres
drsquoeacutetat drsquoautres navigateurs pour trouver les diffeacuterences de mise en page Cependant il se
concentre sur la compatibiliteacute inter-navigateurs (cross-browser compatibility) et ne semble pas
prendre en charge les tests externes deacutefinis par lrsquoutilisateur
WebMole est un autre crawler automatiseacute qui geacuteneacuteralise les approches existantes Il eacutelimine
tout backtracking arbitraire en interceptant les requecirctes HTTP et fait des sauts de page [54]
Cependant lrsquoobjectif de WebMole est simplement drsquoextraire les graphes de navigation drsquoune
application il ne permet pas agrave un utilisateur drsquoeacutecrire des oracles de test agrave eacutevaluer pendant
lrsquoexploration de lrsquoapplication
De son cocircteacute Crawljax [60] utilise une strateacutegie en profondeur (depth-first strategy) pour
explorer et produire une machine agrave eacutetats finis du comportement de lrsquoapplication Il est possible
gracircce agrave son architecture de plugin de tester chaque eacutetat pendant qursquoils sont visiteacutes Cependant
les tests en question doivent ecirctre eacutecrits par lrsquoutilisateur en code Java pur cela rend lrsquoeacutecriture
des oracles de test dynamiques difficile pour des raisons mentionneacutees plus haut
125
53 SOLUTION PROPOSEacuteE
Pour remeacutedier agrave ces problegravemes nous proposons dans cette section une architecture qui
combine un robot drsquoindexation RIA (dans ce cas Crawljax) avec notre interpreacuteteur de langage
de haut niveau pour les oracles de test web Cornipickle Crawljax est responsable de
lrsquoexploration drsquoune application web en tenant compte de son eacutetat tandis que nous utilisons les
opeacuterateurs emprunteacutes de la logique temporelle lineacuteaire fournie par Cornipickle pour exprimer
des assertions sur lrsquoeacutevolution du contenu drsquoun document au fil du temps Cette architecture a
eacuteteacute codeacutee dans un plugin open source pour Crawljax 2
531 INTERACTION AVEC CRAWLJAX
Crawljax est un outil pour explorer automatiquement lrsquoeacutetat dynamique des applications web
modernes Via des interfaces de programmation il a la capaciteacute drsquointeragir avec le code cocircteacute
client de lrsquoapplication Nous lrsquoutilisons pour explorer le comportement de lrsquoapplication web agrave
tester Pour deacutetecter les clics Crawljax analyse une page Web et lrsquoutilise systeacutematiquement
pour explorer le comportement dynamique de lrsquoapplication [60 70]
Les modifications deacutetecteacutees dans lrsquoarbre DOM dynamique sont valideacutees en tant que nouveaux
eacutetats du comportement De nombreuses options sont disponibles avec Crawljax pour configurer
le comportement drsquoanalyse Nous pouvons par exemple speacutecifier les liens ou les widgets agrave
cliquer ou non au cours de lrsquoexploration Dans une variante Crawljax effectue une recherche
en profondeur en premier (depth-first search) stocke lrsquohistorique des exeacutecutions drsquoeacuteveacutenements
et nrsquoexeacutecute un eacuteveacutenement que si lrsquoeacuteveacutenement nrsquoa pas eacuteteacute exeacutecuteacute auparavant quel que soit
lrsquoeacutetat de lrsquoapplication [68]
2 http githubcomliflabcrawljax-cornipickle-plugin
126
Figure 54 ndash Flux drsquointeraction et de seacuterialisation (Crawljax-Cornipickle)
La figure 54 montre le workflow du systegraveme combineacute pour deacutetecter les bugs comportemen-
taux de lrsquoapplication testeacutee Crawljax explore le comportement de lrsquoapplication web sous
test (Exploration) Il interagit avec Cornipickle agrave travers son architecture de plugin (Plugin
Cornipickle (capture)) (1) Chaque fois qursquoun eacutetat est creacuteeacute (OnNewState) ou visiteacute (OnRevisit)
Crawljax seacuterialise la page (seacuterialisation JSON) et lrsquoenvoie agrave lrsquointerpreacuteteur (2) pour lrsquoeacutevaluer
de la mecircme maniegravere que la sonde envoie la page au serveur Cornipickle dans lrsquoarchitecture
traditionnelle (Cornipickle eacutevaluation) Apregraves que la page ait eacuteteacute eacutevalueacutee par Cornipickle le
verdict (3) est retourneacute et le plugin affiche le reacutesultat (Outputs)(4)
Il est important de se rappeler que chaque eacutetat de lrsquoapplication est visiteacute par Crawljax dans la
mecircme seacutequence qursquoun utilisateur Mecircme quand il revient agrave un eacutetat anteacuterieur il recommence au
deacutebut de lrsquoexploration et prend le mecircme chemin jusqursquoagrave ce que lrsquoeacutetat deacutesireacute soit atteint
532 REDIMENSIONNMENT DU NAVIGATEUR
Ce mecircme principe peut ecirctre facilement modifieacute pour eacutegalement deacutetecter des bugs RWD Pour
ce faire nous avons creacuteeacute un autre plugin qui cette fois redimensionne le navigateur drsquoune
127
largeur donneacutee agrave une autre largeur
Eacutetant donneacute que lrsquoutilisation drsquoune barre de deacutefilement verticale nrsquoest pas un problegraveme dans le
responsive design seul le redimensionnement horizontal est lrsquoapproche correcte pour deacutetecter
les bugs RWD Puisque nous voulons explicitement trouver des bugs lieacutes au RWD le plugin
diminue lentement la largeur du navigateur ces bugs apparaissent sur des largeurs infeacuterieures
ougrave lrsquoespace disponible devient de plus en plus rare en reacutefeacuterence agrave des largeurs plus grandes Il
est possible de fournir au plugin la borne supeacuterieure la borne infeacuterieure et la quantiteacute de pixels
pour la deacutecreacutementation Le plugin met eacutegalement en eacutevidence les bugs qursquoil trouve et prend
une capture drsquoeacutecran de la page Nous obtenons ensuite des captures drsquoeacutecran ougrave les eacuteleacutements
responsables du bug ont des bordures rouges
54 EXPEacuteRIENCES ET REacuteSULTATS
Comme on peut le voir la deacutetection de bugs comportementaux et de bugs RWD dans les
deux cas peut se reacutesumer agrave la veacuterification de proprieacuteteacutes exprimeacutees sur des seacutequences de pages
Dans le premier cas elles sont fournies par un robot drsquoexploration et dans le second cas par
le redimensionnement reacutepeacutetitif de la fenecirctre du navigateur sur une mecircme page
Nous deacutetaillons maintenant quelques exemples de proprieacuteteacutes Cornipickle permettant de deacutetecter
des bugs comportementaux et des bugs RWD
541 DEacuteTECTION DE BUGS COMPORTEMENTAUX DANS BEEPSTORE
Nous expliquons drsquoabord les bugs comportementaux du Beep Store deacutecrits preacuteceacutedemment et
nous montrons comment ils peuvent ecirctre captureacutes par Crawljax en eacutevaluant les assertions de
Cornipickle lors de lrsquoexploration drsquoune application
128
Connexions multiples Le premier bug est celui des connexions multiples Ce bug peut
facilement ecirctre deacutetecteacute par les expressions suivantes
We say that we are signed in when (There exists $p in $(action-band) such that (
$prsquos text matches ^Welcome))
We say that we are in the login page when (There exists $div in $(sign-in) such that (
Not ( $divrsquos display is none )))
Always (If ( we are signed in ) Then (
Not ( we are in the login page )))
Les deux deacutefinitions We say that expliquent comment on deacutefinit le fait drsquoecirctre connecteacute et
drsquoecirctre dans la page de connexion dans le Beep Store Lrsquoexpression There exists x in y such
that (z) est utiliseacutee pour affecter agrave la variable x un eacuteleacutement de lrsquoensemble y ougrave z est vrai Nous
pouvons voir que lrsquoensemble y dans le second preacutedicat est composeacute de tous les eacuteleacutements
avec lrsquoidentifiant laquo sign-in raquo et il srsquoassure que z est vrai avec au moins un drsquoentre eux La
construction x matches y quant agrave elle veacuterifie si x correspond agrave lrsquoexpression reacuteguliegravere y et
la construction x is y veacuterifie si x est eacutegal agrave y Enfin lrsquoinstruction Always (x) veacuterifie que x est
vrai dans chaque instantaneacute En un mot il ne devrait jamais arriver que la bande drsquoaction dise
laquo Welcome raquo pendant que le div avec lrsquoidentifiant laquo sign-in raquo est afficheacute
Agrave titre de comparaison la figure 55 montre comment on pourrait attraper le mecircme bug
uniquement avec Crawljax et son architecture de plugin La lisibiliteacute est beaucoup plus faible
et avec des proprieacuteteacutes plus complexes nous pouvons voir donc comment le code peut devenir
complexe et long
129
private enum Verdict TRUE FALSE INCONCLUSIVEprivate Verdict m_verdict
Overridepublic void onNewState(CrawlerContext context StateVertexnewState) if(m_verdict == VerdictINCONCLUSIVE) EmbeddedBrowser browser = contextgetBrowser()
Identification identificationActionBand =new Identification(IdentificationHowid action-band)
booleansignedIn = false
Identification identificationSignInDiv =new Identification(IdentificationHowid sign-in)
booleancurrentlyInLoginPage = false
if(browserelementExists(identificationActionBand)) WebElementactionBand = browsergetWebElement(identificationActionBand)if(Patternmatches(^Welcome actionBandgetText())) signedIn = true
if(browserelementExists(identificationSignInDiv)) WebElementsignInDiv = browsergetWebElement(identificationSignInDiv)if(signInDivisDisplayed()) currentlyInLoginPage = true
if(signedIn) if(currentlyInLoginPage) m_verdict = VerdictFALSE
output(context newState)
Figure 55 ndash Le code neacutecessaire pour attraper le bug des connexions multiples en utilisant Crawl-jax sans Cornipickle
130
Paniers multiples Le bug des paniers multiples peut ecirctre deacutetecteacute par cette proprieacuteteacute
We say that we are signed in when (There exists $p in $(action-band) such that (
$prsquos text matches ^Welcome))
We say that we create a cart when (There exists $button in $(button-create-cart)
such that ($buttonrsquos event is click
))
The next time ( we are signed in ) Then (The next time ( we create a cart ) Then (
Always (Not ( we create a cart )
)))
Les deacuteclarations temporelles The next time x Then (y) eacutevaluent agrave vrai si y eacutevalue agrave vrai
mais seulement apregraves que x le soit Donc apregraves que nous nous soyons connecteacutes et apregraves que
nous ayions cliqueacute sur le bouton laquo creacuteer un panier raquo nous ne devrions plus jamais cliquer sur
laquo creacuteer un panier raquo
Le bug de suppression drsquoun panier existant se gegravere de maniegravere similaire nous ne le deacutecrirons
pas en deacutetail ici
Il est agrave noter que lrsquoeacutevaluation drsquoun eacutetat avec ces proprieacuteteacutes Cornipickle prend entre 36 et 74
millisecondes par page avec un processeur Intel Core i5-3470 Gardez agrave lrsquoesprit que bien que
les proprieacuteteacutes soient assez simples le Beep Store est une tregraves grande application agrave seacuterialiser
car mecircme les blocs non afficheacutes doivent ecirctre inclus
131
542 DEacuteTECTION DE BUGS RWD DANS DE VRAIS SITES WEB
Nous montrons maintenant quelques exemples de proprieacuteteacutes Cornipickle pour la deacutetection
de bugs RWD Les comportements drsquoun site web sont uniques pour chaque site Pour cette
raison la deacutetection des bugs comportementaux neacutecessite des proprieacuteteacutes speacutecifiques Drsquoautre
part le Responsive Web Design est une approche geacuteneacuterale de la conception Web similaire aux
modegraveles de conception (design patterns) dans les langages traditionnels Les eacutechecs dans lrsquoim-
pleacutementation de cette conception doivent ecirctre deacutetectables avec des proprieacuteteacutes geacuteneacuterales Pour
cette raison les proprieacuteteacutes deacutecrites dans cette section ne constituent que des avertissements
une violation ne devrait pas signifier qursquoil srsquoagit drsquoun bug dans tous les cas
Preacutesence de barres de deacutefilement Lrsquoune des premiegraveres indications drsquoun site web pas res-
ponsive est la preacutesence drsquoune barre de deacutefilement horizontale Pour deacutetecter ce bug une simple
proprieacuteteacute Cornipickle peut ecirctre deacutefinie
We say that there is an horizontal scrollbar when (the pagersquos width is less than
the pagersquos scroll-width)
name No horizontal scrollbardescription There should never be an horizontal scrollbarseverity Error
Always (
Not ( there is an horizontal scrollbar ))
Dans cette proprieacuteteacute lrsquointerception drsquoune barre de deacutefilement horizontale peut ecirctre obtenue en
comparant la largeur de la fenecirctre (viewportwidth) avec la largeur de deacutefilement (scroll-width)
132
Cela ne devrait jamais arriver si elle est toujours entoureacutee avec la construction Always Not
Collision drsquoeacuteleacutements Crsquoest le bug ougrave les eacuteleacutements se chevauchent Cette proprieacuteteacute com-
mence par certaines deacutefinitions du langage pour simplifier le cœur de la proprieacuteteacute agrave la fin Elle
deacutecrit les intersections horizontales et verticales un eacuteleacutement visible deux eacuteleacutements identiques
et des chevauchements
We say that $x x-intersects $y when ((($yrsquos right - 1) is greater than $xrsquos left)And(($xrsquos right - 1) is greater than $yrsquos left)
)
We say that $x y-intersects $y when ((($yrsquos bottom - 1) is greater than $xrsquos top)And(($xrsquos bottom - 1) is greater than $yrsquos top)
)
We say that $x is visible when (Not ( $xrsquos display is none )
)
We say that $x and $y are the same when ($xrsquos cornipickleid equals $yrsquos cornipickleid
)
We say that $x and $y are not the same when (Not ($x and $y are the same)
)
We say that $x and $y overlap when ((($x is visible) And ($y is visible))And(
($x x-intersects $y)And($x y-intersects $y)
133
))
We say that $x and $y do not overlap when (Not ($x and $y overlap)
)
La premiegravere deacutefinition utilise laquo right - 1 raquo car les eacuteleacutements qui se croisent doivent se croiser drsquoau
moins 2 pixels Il surmonte un problegraveme ougrave nous recevons des dimensions et des coordonneacutees
en entiers (pixels) mais le navigateur peut travailler avec des floats dans le cas drsquoeacuteleacutements
ayant des dimensions en ratios Ces floats sont arrondis et peuvent provoquer des diffeacuterences
de 1 pixel entre ce qui est afficheacute et ce qui est seacuterialiseacute Il est vrai que nous pouvons manquer
des bugs qui sont leacutegitimement agrave 1 pixel mais il est important de ne pas punir les bonnes
pratiques
La deacutefinition drsquoun eacuteleacutement visible veacuterifie uniquement si la proprieacuteteacute display est laquo none raquo car ces
eacuteleacutements ne provoquent aucun changement de disposition En outre cette valeur est affecteacutee
consciemment par le deacuteveloppeur afin que leur position sur la page soit correcte Le troisiegraveme
deacutecrit deux eacuteleacutements qui sont identiques en utilisant la proprieacuteteacute laquo cornipickleid raquo Cette
proprieacuteteacute est une valeur unique donneacutee agrave chaque eacuteleacutement important dans la page pendant la
phase de seacuterialisation Comme il est unique il peut ecirctre utiliseacute pour identifier si deux eacuteleacutements
sont identiques
La derniegravere construction deacutefinit deux eacuteleacutements qui se chevauchent Si elles sont agrave la fois
visibles et qursquoelles se croisent verticalement et horizontalement elles sont consideacutereacutees dans
une collision
name Element Collisiondescription All items that arenrsquot
overlapping initially shouldnrsquot ever overlap
134
severity WarningAlways (
For each $x in $(body ) (For each $y in $($x gt ) (
For each $z in $($x gt ) (If ( ($y and $z are not the same) And
($y and $z do not overlap) ) Then (Next (
When $y is now $a (When $z is now $b (
$a and $b donrsquot overlap)))))))
Enfin les trois constructions For each rassemblent tous les eacuteleacutements et leurs enfants directs
Elle permet de tester des paires de fregraveres et sœurs pour leur proprieacuteteacute de recouvrement Notez
qursquoelle ne veacuterifie pas si un eacuteleacutement chevauche un laquo cousin raquo car ce cousin aurait besoin de violer
la proprieacuteteacute Protrusion (qui nrsquoest pas deacutetailleacutee dans cette thegravese) La proprieacuteteacute pourrait ecirctre faite
en testant chaque eacuteleacutement avec tous les autres eacuteleacutements mais il est coucircteux en performance
Les deux constructions When $x is now $y rassemblent la paire dans la capture drsquoeacutecran
suivante afin de la comparer agrave elle-mecircme dans la capture drsquoeacutecran preacuteceacutedente Dans lrsquoensemble
la proprieacuteteacute dit que si deux fregraveres et sœurs ne se chevauchent pas agrave un moment donneacute ces
deux fregraveres et sœurs ne devraient pas se chevaucher au moment suivant
Les autres bugs RWD (deacutepassement des eacuteleacutements etc) deacutecrits au chapitre 2 peuvent ecirctre
traiteacutes de maniegravere similaires nous ne les deacutetaillerons pas ici
Agrave titre eacutevaluatif nous avons eacutevalueacute une proprieacuteteacute en fonction du nombre drsquoeacuteleacutements Le temps
de calcul de lrsquointerpreacuteteur en fonction du nombre drsquoeacuteleacutements dans la page est montreacute dans la
figure 56 Le temps de calcul en incluant la seacuterialisation de la page par la sonde JavaScript et
lrsquointerpreacutetation de la proprieacuteteacute en fonction du nombre drsquoeacuteleacutements dans la page est preacutesenteacute
dans la figure 57 Nous pouvons constater que lrsquointerpreacuteteur srsquoexeacutecute tregraves rapidement crsquoest
135
Figure 56 ndash Temps de calcul de lrsquointerpreacuteteur en fonction du nombre drsquoeacuteleacutements dans la page
bien la seacuterialisation de la page par la sonde qui prend le plus de temps dans le processus global
136
Figure 57 ndash Temps de calcul incluant la seacuterialisation de la page par la sonde JavaScript etlrsquointerpreacutetation de la proprieacuteteacute en fonction du nombre drsquoeacuteleacutements dans la page
CHAPITRE 6
VERS UN MEILLEUR FEEDBACK POUR LrsquoUTILISATEUR
Jusqursquoici nous avons preacutesenteacute un outil automatiseacute pour la deacutetection des bugs drsquointerface
permettant drsquoeacutevaluer les expressions dans un langage deacuteclaratif de haut niveau baseacute sur la
logique temporelle lineacuteaire et de premier ordre Or les pages web sont composeacutees de centaines
drsquoeacuteleacutements avec des dizaines drsquoassertions de proprieacuteteacutes qui doivent tenir de plus les deacutefauts
de mise en page sont parfois trop subtils pour ecirctre visibles agrave lrsquoœil nu (comme les eacuteleacutements drsquoun
seul pixel) Par conseacutequent lrsquoeacutevaluation de base de ces proprieacuteteacutes renvoyant un simple verdict
vraifaux ne serait pas tregraves utile pour un concepteur Le fait de simplement dire que laquo quelque
chose ne va pas raquo apporte peu de valeur ajouteacutee lorsque quelqursquoun doit rechercher le problegraveme
dans une page aussi complexe Pour fournir une reacuteelle eacutevaluation aux praticiens un outil
drsquoanalyse de la mise en page devrait donc ecirctre capable de repeacuterer des eacuteleacutements speacutecifiques de
la page qui sont responsables de certains bugs
Agrave cette fin Cornipickle a eacuteteacute eacutequipeacute drsquoun meacutecanisme pour essayer de circonscrire des parties
drsquoune page qui expliquent la faute deacutecouverte Notre travail sur la deacutetection de bugs de mise en
page est donc devenu une forme de localisation de deacutefaut (fault localization) Nous allons dans
ce chapitre exposer deux tentatives afin de fournir agrave lrsquoutilisateur un verdict plus riche qursquoun
simple vraifaux La premiegravere conduit agrave une construction appeleacutee laquo teacutemoin raquo baseacutee sur une
138
fonction appliqueacutee reacutecursivement sur la formule qui est falsifieacutee Un teacutemoin met en eacutevidence
un ensemble drsquoeacuteleacutements dans la page qui sont lieacutes drsquoune certaine maniegravere agrave la violation drsquoune
proprieacuteteacute
Cela srsquoest reacuteveacuteleacute insuffisant dans la pratique par la suite nous reprenons le travail sur une
nouvelle base formelle fondeacutee cette fois sur le concept de laquo reacuteparation raquo Intuitivement une
reacuteparation est un ensemble minimal de transformations qui lorsqursquoelles sont appliqueacutees agrave
lrsquoobjet original reacutetablissent sa satisfiabiliteacute par rapport agrave la speacutecification Lrsquoavantage de ce
concept est qursquoil est indeacutependant de la nature de lrsquoobjet et du langage de speacutecification utiliseacute
pour deacuteclarer ses proprieacuteteacutes attendues Il pourrait donc ecirctre appliqueacute agrave une varieacuteteacute drsquoautres
sceacutenarios en plus des applications web
61 GEacuteNEacuteRATION DE CONTRE-EXEMPLE LES TEacuteMOINS
Gracircce agrave la nature des speacutecifications du langage Cornipickle baseacutees sur la logique il est possible
drsquoanalyser systeacutematiquement une assertion quand elle est eacutevalueacutee agrave faux et drsquoidentifier les
eacuteleacutements qui sont laquo responsables raquo de la fausseteacute de cette assertion
Verdicts et teacutemoins
Nous appelons teacutemoin un arbre drsquoeacuteleacutements DOM soit W sube T lrsquoensemble de tous les teacutemoins
(W pour witness) Lrsquoensemble des verdicts est deacutefini comme V BcupgtperptimesW timesW un
verdict est composeacute drsquoune valeur de veacuteriteacute et de deux teacutemoins lrsquoun correspondant agrave la valeur
de veacuteriteacute gt lrsquoautre agrave la valeur de veacuteriteacute perp
139
La conjonction de verdicts est une fonction otimes V timesNtimesV rarrV deacutefinie comme suit
otimes(〈bwgtwperp〉ν 〈bprimewprimegtwprimeperp〉) =
〈perpwgtwperpcup(ν wprimeperp)〉 si bprime =perp
〈bandbprimewgtcup(ν wprimegt)wperp〉 si b 6=perp
〈bwgtwperp〉 sinon
Nous interpreacutetons bandbprime comme la conjonction classique agrave trois valeurs La notation (ν w)
deacutesigne la creacuteation drsquoun nouveau teacutemoin (witness) dont la racine est le nœud DOM ν avec le
teacutemoin w comme son enfant La notation wcupwprime deacutesigne lrsquoaddition de wprime aux enfants du teacutemoin
w Nous allons abuser de la notation et accepter que le deuxiegraveme argument de otimes pourrait ecirctre
un eacuteleacutement laquo vide raquo de N nous deacutesignerons comme ν 0 Cet eacuteleacutement est neacutecessaire de sorte que
chaque opeacuteration sur les verdicts peut surclasser un teacutemoin existant avec un nouveau nœud
racine mecircme srsquoil nrsquoy a rien agrave laquo teacutemoigner raquo
La conjonction de verdicts met agrave jour le contenu drsquoun verdict existant v et donne un autre
verdict vprime et un eacuteleacutement DOM ν Si vprime est faux il porte un teacutemoignage de cette fausseteacute agrave
savoir wprimeperp ce teacutemoin est attacheacute comme un enfant drsquoun nouvel arbre dont la racine est ν et
cet arbre est ajouteacute au teacutemoignage de la fausseteacute de v wperp De plus la valeur de veacuteriteacute de v
est deacutefinie comme eacutetant perp Autrement dit lrsquoexplication de vprime pour ecirctre fausse est ajouteacutee agrave
lrsquoexplication de v pour ecirctre fausse Dans le cas contraire si ni le premier eacuteleacutement de v ni celui
de vprime est faux alors le teacutemoin vprime associeacute agrave gt est ajouteacute au teacutemoin gt de v et sa valeur de veacuteriteacute
est mise agrave jour en conseacutequence Dans tous les autres cas v est laisseacute inchangeacute
140
ω(tνrsquos a equals ν primersquos aprime) =
〈gtν ν prime 0〉 if ν(a) = ν prime(aprime)〈gt 0ν ν prime〉 otherwise
ω(tνrsquos a equals v) =
〈gtν 0〉 if ν(a) = v〈perp 0ν〉 otherwise
ω(tNotϕ) = (ω(tϕ)ν 0)ω(tϕ And ψ) = otimes(otimes(〈gt 0 0〉ν 0ω(tϕ))ν 0ω(tψ))
ω(tϕ Or ψ) = oplus(oplus(〈perp 0 0〉ν 0ω(tϕ))ν 0ω(tψ))ω(tIf ϕ Then ψ) = oplus(oplus(〈perp 0 0〉ν 0(ω(tϕ)ν 0))ν 0ω(tψ))
ω(tThere exists ξ in$(c) such that ϕ)
=oplus〈perp 0 0〉
νisinχ(t0c)ω(tϕ[ξν ])
ω(tFor each ξ in $(c) ϕ) =otimes〈gt 0 0〉
νisinχ(t0c)ω(tϕ[ξν ])
Tableau 61 ndash La deacutefinition reacutecursive de la fonction de calcul du verdict ω
La disjonction de verdict oplus V timesNtimesV rarrV est deacutefinie comme le dual de la conjonction
oplus(〈bwgtwperp〉ν 〈bprimewprimegtwprimeperp〉) =
〈gtwgtcup(ν wprimegt)wperp〉 si bprime =gt
〈borbprimewgtwperpcup(ν wprimeperp)〉 si b 6=gt
〈bwgtwperp〉 sinon
Enfin la neacutegation du verdict est la fonction V timesNrarrV deacutefinie comme suit
(〈bwgtwperp〉ν) =
〈notbwperpcup(ν wgt)wgtcup(ν wperp)〉 si b isin gtperp
〈bwgtwperp〉 sinon
Intuitivement inverse les teacutemoins associeacutes agrave gt et perp et les surmonte drsquoune nouvelle racine
avec le nœud DOM ν Cela nrsquoa aucun effet lorsque le verdict est laquo raquo
En utilisant ces opeacuterateurs la seacutemantique formelle de Cornipickle deacutecrite dans le tableau 44
peut alors ecirctre eacutetendue agrave une fonction ω T lowasttimesΦrarrV qui sur une expression ϕ isinΦ et une
trace t isin T lowast calcule un verdict
141
La notationotimes〈gt 0 0〉
νisinχ(t0c)ω(tϕ[ξν ]) est un raccourci pour
otimes(〈gt 0 0〉ν 0otimes(ω(tϕ[ξν0])ν0otimes(ω(tϕ[ξν1])ν1 middot middot middot)))
En drsquoautres termes elle deacutesigne la conjonction reacutepeacuteteacutee du verdict de ω(tϕ[ξν ]) pour chaque
ν isin χ(t0c) agrave partir du verdict vide 〈gt 0 0〉 Une notation similaire est utiliseacutee pour oplus
Cette deacutefinition est difficile agrave lire en termes de notation cependant le lecteur peut reacutealiser en
lrsquoexaminant que la deacutefinition de chaque cas correspond agrave lrsquointuition Par exemple construire
le verdict de laquo ϕ And ψ raquo revient agrave deacutemarrer du verdict laquo vide raquo 〈gt 0 0〉 et lui joindre
successivement le verdict de ϕ et ψ
De mecircme construire le verdict pour une expression quantifieacutee existentiellement ϕ(x) est
obtenu en calculant successivement la disjonction du verdict de ϕ(k) pour chaque k du verdict
initial 〈perp 0 0〉 Ceci est compatible avec le fait que existx isin S ϕ(x) est eacutequivalent agraveor
kisinS ϕ(k)
Enfin un raisonnement similaire srsquoapplique aux opeacuterateurs temporels lineacuteaires Par exemple
t |= Alwaysϕ peut ecirctre deacutefini comme t |= ϕ et t1 |= Alwaysϕ drsquoougrave les verdicts ω(tϕ) et
ω(t1Always ϕ) sont combineacutes en utilisant la conjonction verdict
A titre drsquoillustration de cette proceacutedure nous montrerons comment un verdict peut ecirctre
calculeacute pour lrsquoexpression suivante en consideacuterant lrsquoarbre de la figure 44 For each $x in
$(p) For each $y in $(p) $xrsquos width equals $yrsquos width Le document contient
trois paragraphes que nous appellerons p1 p2 et p3 le premier et le troisiegraveme ont une largeur
(width) de 400 tandis que le second a une largeur de 200 La deacuteclaration inteacuterieure $xrsquos
width equals $yrsquos width sera donc eacutevalueacutee neuf fois une fois pour chaque combinaison
de nœuds DOM pour $x et $y
Selon la deacutefinition de la fonction ω dans le tableau 61 chaque eacutevaluation produira un verdict
142
de la forme 〈gtpi p j 0〉 quand pi et p j ont la mecircme largeur et 〈perp 0pi p j〉 quand ils
sont deacutefinis autrement Dans le premier cas la deacuteclaration srsquoeacutevalue agrave gt et les nœuds DOM pi
et p j sont ajouteacutes comme gt-teacutemoins de ce fait Lrsquoinverse srsquoapplique lorsque lrsquoinstruction est
fausse
Ces verdicts sont ensuite reacuteunis dans le quantificateur universel le plus profond Un verdict
vide 〈gt 0 0〉 est drsquoabord creacuteeacute et tous les verdicts pour lrsquoexpression inteacuterieure sont ensuite
combineacutes en utilisant la conjonction verdict Par exemple quand $x se reacutefegravere agrave p1 trois
verdicts sont joints 〈gtp1 p1 0〉 〈perp 0p1 p2〉 et 〈gtp1 p3 0〉 Selon la deacutefinition
de conjonction de verdict le verdict reacutesultant sera
〈perp(ν 0〈gtp1 p1 0〉)(ν 0〈gtp1 p3 0〉)(ν 0〈perp 0p1 p2〉)〉
Les deux verdicts internes srsquoeacutevaluant agrave gt sont attacheacutes au teacutemoin associeacute agrave gt et le verdict
eacutevaluant perp est attacheacute au teacutemoin associeacute agrave perp Trois de ces verdicts seront produits par le
quantificateur le plus interne un pour chaque valeur de $x qui seront ensuite combineacutes en
utilisant agrave nouveau la conjonction par le quantificateur universel le plus externe ce qui donnera
le verdict final
〈perp 0
(ν 0〈perp(ν 0〈gtp1 p1 0〉)(ν 0〈gtp1 p3 0〉)(ν 0〈perp 0p1 p2〉)〉)
(ν 0〈perp(ν 0〈gtp2 p2 0〉)(ν 0〈perp 0p1 p2〉)(ν 0〈perp 0p2 p3〉)〉)
(ν 0〈perp(ν 0〈gtp1 p3 0〉)(ν 0〈gtp3 p3 0〉)(ν 0〈perp 0p2 p3〉)〉) 〉
Lrsquoimpleacutementation actuelle de Cornipickle peut calculer ces verdicts et les renvoyer agrave la sonde
JavaScript Les verdicts sont envoyeacutes agrave la sonde sous forme drsquoune liste Cornipickle ID Chaque
143
A list item
Another list item
A third list item
The last list item
(a)
A list item
Another list item
A third list item
The last list item
(b)
Figure 61 ndash Exemple drsquoune erreur de mise en page Web simple (a) lrsquoun des eacuteleacutements de la listeest incorrectement aligneacute avec les autres (b) un teacutemoin (witness) produit par lrsquooutil Cornipickle
ID est unique correspondant un eacuteleacutement speacutecifique dans la page ce qui permet drsquoentourer
lrsquoeacuteleacutement en question dans la fenecirctre du navigateur
62 LOCALISATION DES ERREURS DANS LES APPLICATIONS WEB
Agrave notre connaissance le principe de calcul du verdict deacutecrit preacuteceacutedemment fait de Cornipickle
un des tout premiers systegravemes agrave expliquer graphiquement en quoi une proprieacuteteacute est violeacutee
Malheureusement nous avons deacutecouvert que ce principe laisse tout de mecircme un peu agrave deacutesirer
Par exemple consideacuterons la proprieacuteteacute voulant que tous les eacuteleacutements drsquoune liste avec lrsquoID
laquo menu raquo doivent ecirctre aligneacutes verticalement
For each $x in $(menu li) (For each $y in $(menu li) (
$xrsquos left equals $yrsquos left))
Pour cet exemple particulier la figure 61a montre une page simple pour laquelle la proprieacuteteacute
serait violeacutee Nous pouvons voir le reacutesultat de lrsquoapplication de ω deacutefinie dans la section
preacuteceacutedente sur lrsquoarbre DOM de la figure 61a La fonction retourne un arbre contenant des
pointeurs sur deux des eacuteleacutements de la page surligneacutes en rouge dans la figure 61b (En fait la
fonction renvoie plusieurs ensembles chacun contenant le second eacuteleacutement de liste et lrsquoun des
eacuteleacutements restants)
144
Intuitivement un tel reacutesultat est logique pour un concepteur de sites web en effet ces deux
eacuteleacutements doivent ecirctre aligneacutes alors qursquoils ne le sont pas Cependant cette information ne peut
ecirctre deacuteduite que par la connaissance de la proprieacuteteacute violeacutee le teacutemoin pointe simplement ces
deux eacuteleacutements sans fournir drsquoinformations sur laquo ce qui ne va pas raquo agrave leur sujet Alors que la
geacuteneacuteration de contre-exemple reacutecursif preacutesente dans la version actuelle de Cornipickle fournit
plus drsquoinformations qursquoun simple verdict vraifaux dans de nombreux cas elle peut donc
srsquoaveacuterer trop vague pour ecirctre utile
Nous introduisons la notion de reacuteparation qui peut ecirctre deacutefinie intuitivement comme un
ensemble de modifications neacutecessaires agrave un objet pour le rendre conforme agrave une proprieacuteteacute
La notion de reacuteparation peut ecirctre vue comme une localisation de deacutefaut exprimeacutee en sens
inverse indiquer comment un objet doit ecirctre reacutepareacute indirectement pointe vers des aspects de
sa structure qui sont responsables du fait que la proprieacuteteacute nrsquoest pas actuellement remplie Nous
verrons que contrairement au concept de teacutemoin qui est une technique lineacuteaire en fonction
de la taille de la formule et fortement associeacute au langage de speacutecification et aux objets de
domaine utiliseacutes les reacuteparations sont deacutefinies agrave un niveau drsquoabstraction qui ne deacutepend pas des
proprieacuteteacutes de lrsquoun ou de lrsquoautre
621 DEacuteFINITIONS
Soit Σ un ensemble de structures et TΣ un ensemble drsquoendomorphismes sur Σ crsquoest-agrave-dire
que chaque τ isin TΣ est une fonction τ Σrarr Σ Soit 2TΣ lrsquoensemble de tous les sous-ensembles
de TΣ Un ensemble drsquoendomorphismes T = τ1 τn isin 2TΣ est dit ecirctre bien deacutefini si
deux eacuteleacutements τi τ j sont tels que τi τ j equiv τ j τ j Un tel ensemble bien deacutefini sera appeleacute
transformation Lorsque le contexte est clair nous allons abuser de la notation et consideacuterer T
comme lrsquoendomorphisme (deacutefini de faccedilon unique) τ1 middot middot middot τn Lrsquoinclusion drsquoensembles induit
145
un ordre partiel sur les transformations
Soit Φ un ensemble drsquoexpressions de langage eacutequipeacutees drsquoune relation de satisfaction |= Σtimes
Φrarr gtperp Pour une expression ϕ isinΦ et une structure σ isin Σ nous eacutecrirons σ |= ϕ si et
seulement si |= (σ ϕ) =gt Dans un tel cas nous dirons que σ laquo veacuterifie raquo ϕ ou alternativement
que σ est un modegravele de ϕ
Soit σ isin Σ une structure telle que σ 6|= ϕ pour une expression ϕ isin Φ Une reacuteparation est
deacutefinie comme une transformation T isin 2TΣ telle que T (σ) |= ϕ Une reacuteparation est dite prime
si aucun sous-ensemble T prime sube T est tel que T prime est aussi une reacuteparation Intuitivement une
reacuteparation principale est un ensemble de laquo changements raquo sur une structure σ qui satisfait ϕ
de sorte qursquoaucune modification laquo plus petite raquo ne restaure aussi la satisfiabiliteacute Comme sube
est une commande partielle il peut y avoir plusieurs reacuteparations principales mutuellement
incomparables
La figure 62 illustre ce concept Lrsquoimage repreacutesente toutes les transformations qui peuvent
ecirctre appliqueacutees agrave une structure dans le cas simple ougrave seulement quatre morphismes existent
La transformation vide est en bas et chaque flegraveche dans le graphe repreacutesente lrsquoajout drsquoun
morphisme suppleacutementaire agrave une transformation existante Les nœuds rouges indiquent les
transformations qui ne sont pas reacutepareacutees tandis que les nœuds jaunes et verts indiquent les
reacuteparations Parmi ceux-ci les reacuteparations principales sont coloreacutees en vert on peut voir que
tous les anteacuteceacutedents des nœuds verts sont rouges Lrsquoinverse cependant nrsquoest pas vrai tous les
descendants drsquoune reacuteparation ne sont pas eux-mecircmes reacutepareacutes
146
Figure 62 ndash Illustration du concept de reacuteparation principale
622 EXEMPLES
Cette deacutefinition simple peut ensuite ecirctre appliqueacutee agrave une varieacuteteacute de langages de speacutecification
comme nous allons lrsquoillustrer agrave travers les exemples qui suivent
Logique propositionnelle
Comme premier exemple soit Φ lrsquoensemble des formules de logiques propositionnelles
avec les variables X = x1 xn pour certains n ge 1 Soit Σ lrsquoensemble des fonctions
X rarrgtperp que nous appellerons des eacutevaluations La relation de satisfaction |= est deacutefinie
comme σ |= ϕ =gt si et seulement si ϕ vaut vrai lorsque ses variables sont remplaceacutees par la
valeur de veacuteriteacute correspondante speacutecifieacutee par σ et sinon par perp
Soit b isin gtperp et i isin [1n] Nous noterons τxi 7rarrb lrsquoendomorphisme deacutefini comme
(τxi 7rarrb(σ))(x) =
b si x = xi
σ(x) sinon
Ce morphisme met xi agrave la place de b et laisse inchangeacute le reste de lrsquoeacutevaluation initiale
147
Lrsquoensemble des endomorphismes TΣ est alors deacutefini comme
TΣ =⋃
iisin[1n]
⋃bisingtperp
τxi 7rarrb
Deux transformations τx 7rarrb τ primey7rarrbprime commutent si x 6= y Ainsi un ensemble de transformations
T isin 2TΣ est bien deacutefini si et seulement si chaque endomorphisme qursquoil contient change la
valeur drsquoune variable diffeacuterente
Soit X = abc soit σ lrsquoeacutevaluation a 7rarrgtb 7rarrperpc 7rarrperp et ϕ la formule propositionnelle
aand b On peut facilement observer que σ 6|= ϕ Une reacuteparation est la transformation T =
τb 7rarrgt qui est T (σ) |= ϕ Cela correspond agrave lrsquointuition que lrsquoexplication de la fausseteacute
de ϕ est que b est faux alors qursquoil devrait ecirctre vrai Notons que bien que T prime = τb7rarrgtτc7rarrgt
rendrait aussi ϕ vrai ce nrsquoest pas une reacuteparation primaire puisque T sube T prime Cela correspond agrave
lrsquointuition que la valeur de veacuteriteacute de c est pas pertinente agrave la fausseteacute de ϕ
Soit σ lrsquoeacutevaluation a 7rarr gtb 7rarr perpc 7rarr perp et ϕ la formule propositionnelle ararr b Cette
fois deux reacuteparations primaires existent T = τb7rarrgt et T prime = τa7rarrperp Il est possible de
veacuterifier que les deux fixent la valeur de veacuteriteacute de lrsquoeacutevaluation initiale Informellement la
premiegravere transformation repreacutesente la fausseteacute de ϕ sur le fait que a est vrai tandis que lrsquoautre
lrsquoexplique plutocirct par le fait que b est faux mdash ce qui correspond bien agrave lrsquointuition Puisque
les deux reacuteparations sont incomparables aucune de ces explications nrsquoest laquo preacutefeacutereacutee raquo Nous
reviendrons sur ce concept plus tard
Logique du premier ordre
Le concept de reacuteparation peut facilement ecirctre leveacute agrave lrsquoensemble Φ de la formule logique de
premier ordre sur les domaines finis Soit A un ensemble drsquoeacuteleacutements un preacutedicat n-aire est
148
deacutefini comme une fonction p Anrarrgtperp Soit Pi lrsquoensemble des preacutedicats de lrsquoariteacute i Une
signature est un ensemble de preacutedicats P = p1 pm respectivement drsquoariteacute a1 am
Pour une signature donneacutee lrsquoensemble des eacuteleacutements de domaine est deacutefini comme
Σ = Pa1timesmiddotmiddot middottimesPam
La relation de satisfaction |= est deacutefinie comme |= (dϕ) =gt si ϕ est eacutevalueacute agrave vrai lors de
lrsquoeacutevaluation de preacutedicats tels que deacutefinis dans σ et perp deacutefinie autrement
Dans ce contexte un endomorphisme repreacutesentera le changement de la valeur de veacuteriteacute pour
une entreacutee drsquoun preacutedicat Soit pk un preacutedicat de lrsquoariteacute i (a1 ak)isinAn un k-tuple drsquoeacuteleacutements
de A et b isin gtperp La transformation τpk(a1ak)7rarrb est deacutefini comme le preacutedicat pprimek tel que
pprimek(x1 xk) =
b si x1 = a1 xn = an
pk(x1 xk) autrement
Lrsquoensemble des transformations pour pk noteacute Tpk est deacutefinie comme suit
Tpk ⋃
(a1ak)isinAn
⋃bisingtperp
τpk(a1ak)b
Lrsquoensemble global des transformations est alors
TΣ ⋃pisinP
Tp
De maniegravere similaire agrave la logique du premier ordre on peut veacuterifier que deux endomorphismes
149
1
2
3
4
5
(a) Graphe original
1
2
3
4
5
(b) Apregraves lrsquoapplication de T1
1
2
3
4
5
(c) Apregraves lrsquoapplication de T2
1
2
3
4
5
(d) Apregraves lrsquoapplication de T3
1
2
3
4
5
(e) Apregraves lrsquoapplication de T4
Figure 63 ndash Quelques reacuteparations possibles pour un coloriage de graphe deacutefectueux
commutent srsquoils opegraverent sur un preacutedicat diffeacuterent ou changent la valeur drsquoune entreacutee diffeacuterente
sur le mecircme preacutedicat
Soit A = 012 ϕ la formule du premier ordre forallx existy x 6= yand p(xy) et le preacutedicat binaire
p deacutefini comme (00)(01)(11) Il y a deux reacuteparations primaires pour restaurer la veacuteriteacute
de ϕ T1 = τp(20)7rarrgt T2 = τp(21)7rarrgt Cela correspond agrave lrsquointuition que la valeur 2
manque au moins un laquo partenaire raquo dans p et que 0 ou 1 pourraient chacun correspondre agrave ce
but
Soit A = [15] un ensemble de sommets de graphe p un preacutedicat binaire codant la relation
drsquoadjacence des arecirctes de graphe et q1q2q3 un ensemble de preacutedicats unaires tel que qi(x)
contient si et seulement si le sommet x ayant la couleur i Supposons que les preacutedicats p et q
soient deacutefinis en fonction de la repreacutesentation graphique montreacutee dans la figure 63a
150
Une solution au problegraveme de coloriage de graphe peut ecirctre repreacutesenteacutee par trois expressions
de premier ordre
ϕ1 forallx (q1(x)andnotq2(x)andnotq3(x))or (notq1(x)andq2(x)andnotq3(x))or (notq1(x)andnotq2(x)andq3(x))
ϕ2 forallx forally p(xy)rarr p(yx)
ϕ3 forallx forally p(xy)rarr ((q1(x)rarrnotq1(y))and (q2(x)rarrnotq2(y))and (q3(x)rarrnotq3(y)))
La premiegravere stipule que chaque sommet a une couleur exacte la seconde indique que la
relation drsquoadjacence est symeacutetrique et lrsquoexpression finale stipule qursquoaucun sommet adjacent ne
peut avoir la mecircme couleur On peut voir que le graphe original ne satisfait pas ϕ1andϕ2andϕ3
Il existe plusieurs reacuteparations principales dont certaines sont indiqueacutees ici
T1 = τq1(5)7rarrperpτq2(5)7rarrgt
T2 = τp(45)7rarrperpτp(54)7rarrperp
T3 = τq1(1)7rarrperpτq3(1)7rarrgtτq1(4)7rarrperpτq3(4)7rarrgt
T4 = τp(24)7rarrperpτp(42)7rarrperpτq1(4)7rarrperpτq3(4)7rarrgt
La reacuteparation T1 corrige le graphe en changeant la couleur du sommet 5 en rouge Notons que
cela neacutecessite non seulement de mettre q2(5) agrave gt mais aussi q1(5) agrave perp sinon la structure
reacutesultante violerait ϕ1 Une autre reacuteparation (non repreacutesenteacutee) change le sommet 5 en vert La
reacuteparation T3 modifie plutocirct la relation drsquoadjacence et coupe le sommet 5 du reste du graphe
de sorte que le conflit de couleur soit reacutesolu
151
Ceux-ci correspondent aux moyens laquo intuitifs raquo de fixer le coloriage du graphe Cependant
il existe plusieurs autres reacuteparations primaires qui reacutepondent agrave la deacutefinition Par exemple la
transformation T4 eacutechange les couleurs des sommets 1 2 et 4 Notons qursquoil srsquoagit bien drsquoune
reacuteparation primaire en ce sens qursquoaucun sous-ensemble de ces endomorphismes ne restaure la
satisfiabiliteacute de la formule drsquoorigine De la mecircme faccedilon T5 coupe le bord entre les sommets
2 et 4 et passe au vert Au total il y a 17 reacuteparations primaires distinctes dans cet exemple
particulier
Encore une fois il convient de noter que sans contexte suppleacutementaire aucune de ces reacutepara-
tions nrsquoest une explication possible de la fausseteacute de ϕ1andϕ2andϕ3 sur le graphe original
Logique de premier ordre eacutetendue
Lrsquoexemple preacuteceacutedent montre la neacutecessiteacute drsquoeacutetendre la seacutemantique de la logique du premier
ordre agrave des fonctions arbitraires au lieu de preacutedicats strictement booleacuteens Cela peut facilement
ecirctre fait comme suit Soit A1 An et B des ensembles finis Nous deacutesignerons par FA1AnrarrB
lrsquoensemble de toutes les fonctions (prodi Ai)rarr B Une signature est un tuple de la forme
〈(A11 A1n1)rarr B1 (Am1 Amnm)rarr Bm〉
tel que fi est une fonction de lrsquoariteacute ni avec le domaine A11 A1ni et image Bi La logique
des preacutedicats est le cas particulier ougrave B1 = middot middot middot= Bnm = gtperp dans ce cas lrsquoimage peut ecirctre
omise et ougrave Ai j sont tous les mecircmes de sorte que seule lrsquoariteacute doit ecirctre connue Si f est une
fonction Ararr B et x deacutesigne un eacuteleacutement de A nous eacutecrirons x f pour deacutesigner f (x) permettant
ainsi une certaine forme de notation laquo objet raquo pour les fonctions
Dans ce contexte les quantificateurs de premier ordre doivent preacuteciser sur quel Ai j ils srsquoap-
152
pliquent de sorte que les expressions deviennent de la forme forallx isin Ai j ϕ et exist isin Ai j ϕ
Les termes de base peuvent maintenant comparer les valeurs de deux termes de fonction en
utilisant nrsquoimporte quel opeacuterateur binaire approprieacute
Les endomorphismes sont toujours deacutefinis de la mecircme maniegravere que pour la logique classique
du premier ordre agrave condition qursquoils se reacutefegraverent aux valeurs approprieacutees dans le domaine et
lrsquoimage de la fonction soumise au changement
Notons que ce formalisme eacutetendu nrsquoajoute aucune expressiviteacute agrave la logique du premier ordre si
tous les ensembles sont maintenus finis Il doit cependant simplifier lrsquoexpression de nombreuses
proprieacuteteacutes
Avec ce formalisme modifieacute nous sommes precircts agrave envisager des reacuteparations dans les proprieacuteteacutes
de mise en page Web Soit E un ensemble drsquoeacuteleacutements de page P un ensemble de valeurs
de pixels et C un ensemble de couleurs CSS Sur ces trois ensembles nous deacutefinissons les
fonctions Erarr P appeleacutees left right top et bottom correspondants respectivement aux
coordonneacutees x et y des coins supeacuterieur gauche(top-left) et infeacuterieur droit (bottom-right)
drsquoun eacuteleacutement De plus nous deacutefinissons un ensemble S de seacutelecteurs CSS lrsquoeacutevaluation drsquoun
seacutelecteur CSS sur un document peut ecirctre formaliseacutee comme une fonction $ Srarr 2E qui pour
une expression de filtre donneacutee retourne le sous-ensemble de E correspondant au seacutelecteur
Les endomorphismes peuvent ecirctre deacutefinis pour chacune de ces fonctions et doivent ecirctre
eacutecrits en utilisant la notation introduite preacuteceacutedemment Par exemple τwidth(e)7rarrk correspond agrave
lrsquoendomorphisme deacutefinissant la valeur de la fonction width (largeur) pour lrsquoeacuteleacutement e isin E
agrave k et laissant tout le reste tel qursquoil est
On peut alors exprimer la proprieacuteteacute que tous les eacuteleacutements dans une liste avec lrsquoID laquo menu raquo
153
A list item
Another list item
A third list item
The last list item
[|
(a)
A list item
Another list item
A third list item
The last list item
[ |
[ |[ |
(b)
A list item
Another list item
A third list item
The last list item
[[|
|
[|
[|
(c)
Figure 64 ndash Trois reacuteparations pour lrsquoexemple web
devraient ecirctre aligneacutes agrave gauche comme lrsquoexpression de premier ordre suivante
forallx isin $(menu li) forally isin $(menu li) xleft= yleft
Notons que cette expression correspond directement agrave la traduction du premier ordre de
lrsquoexpression de Cornipickle montreacutee dans la section 62
Trouver les reacuteparations principales pour cette expression et le fragment de page montreacute dans la
figure 61a produit un certain nombre de solutions dont trois sont montreacutees dans la figure 64
Les deux premiegraveres sont assez intuitifs La figure 64a corrige la page en deacuteplaccedilant lrsquoeacuteleacutement
deacutesaligneacute de la liste avec les autres alors que la Figure 64b fait le contraire en alignant les
trois eacuteleacutements de liste les plus agrave gauche avec le second La figure 64c donne un exemple de
lrsquoune des nombreuses solutions restantes dans ce cas tous les eacuteleacutements de liste sont deacuteplaceacutes
vers une nouvelle position commune x qui srsquoavegravere ecirctre une coordonneacutee qursquoaucun eacuteleacutement
nrsquoavait dans la page drsquoorigine
Ce dernier exemple fournit une illustration graphique de la diffeacuterence entre le concept original
de teacutemoin et celui de reacuteparation Alors qursquoun teacutemoin dans ce cas met en eacutevidence une paire
choisie au hasard drsquoeacuteleacutements mal aligneacutes (comme montreacute dans la figure 61b)) une reacuteparation
choisit des eacuteleacutements speacutecifiques et en plus deacutecrit ce qui doit ecirctre fait avec eux afin de reacuteparer
la violation de la proprieacuteteacute Ceci est sans doute plus reacuteveacutelateur pour un utilisateur et constitue
154
agrave notre avis lrsquoun des principaux avantages de cette technique
63 CALCUL DE LA REacutePARATION
Le concept de base de reacuteparation preacutesenteacute dans la section preacuteceacutedente se precircte agrave quelques points
de discussion En particulier le nombre de reacuteparations principales possibles est potentiellement
eacuteleveacute et la tacircche de geacuteneacuterer ces reacuteparations peut donc srsquoaveacuterer tregraves coucircteuse
631 ALGORITHME DE BASE ET COMPLEXITEacute
Lrsquoalgorithme montreacute dans 1 est un algorithme pour iteacuterer toutes les reacuteparations possibles drsquoune
structure Il eacutenumegravere simplement toutes les transformations possibles T isin 2TΣ Il veacuterifie
drsquoabord si T est bien deacutefini (crsquoest-agrave-dire que toute paire drsquoendomorphismes commute) et si
une reacuteparation geacuteneacutereacutee preacuteceacutedemment (stockeacutee dans lrsquoensemble TS) est un sous-ensemble de
lrsquoactuelle Il veacuterifie enfin si lrsquoapplication de cette transformation corrige la structure drsquoorigine
Il passe agrave la prochaine transformation candidate si lrsquoune de ces trois situations se produit
Sinon il ajoute cette transformation agrave son ensemble et le renvoie comme son prochain eacuteleacutement
Theorem 1 Lrsquoalgorithme 1 est coheacuterent et complet
Soit T une sortie de transformation par lrsquoalgorithme Par construction T est une reacuteparation
puisqursquoelle est bien deacutefinie et elle corrige la valeur de veacuteriteacute de σ dans ϕ De plus au
moment ougrave T est sorti aucun des eacuteleacutements de TS nrsquoest un sous-ensemble de T Puisque TS
contient toutes les reacuteparations de cardinaliteacute infeacuterieure agrave T et que par construction toutes les
transformations de cardinaliteacute similaires ne peuvent pas ecirctre des sous-ensembles il srsquoensuit
que T nrsquoest incluse par aucune reacuteparation existante et est donc principale Cela prouve la
155
Algorithm 1 Algorithme geacuteneacuterique pour lrsquoiteacuteration des reacuteparations primaires
procedure COMPUTEREPAIRS(ϕσ 2TΣ)TS = 0for all T isin 2TΣ do Eacutenumeacutereacutes en cardinaliteacute croissante
if notWELLDEFINED(T ) thenskip
end ifif SUBSUMED(TTS) then
skipend ifif T (σ prime) 6|= ϕ then
skipend ifTSlarr TScupTyield T
end forend procedure
coheacuterence de lrsquoalgorithme
Le fait que toutes ces reacuteparations majeures soient finalement eacutenumeacutereacutees est garanti par le
fait que tous les sous-ensembles de TΣ sont geacuteneacutereacutes agrave un moment donneacute ce qui prouve la
compleacutetude
Cet algorithme a eacuteteacute impleacutementeacute en Java et est disponible publiquement 1 En raison de sa
simpliciteacute et de sa geacuteneacutericiteacute lrsquoimpleacutementation des expressions des structures et des iteacuterations
de reacuteparation ne repreacutesente que 325 lignes de code Lrsquoeacutenumeacuteration des reacuteparations est exposeacutee
agrave lrsquoutilisateur sous la forme drsquoune classe classique Java Iterator qui peut ecirctre utiliseacutee par
les meacutethodes traditionnelles hasNext() et next() pour passer agrave travers lrsquoensemble complet
de reacuteparations principales dans lrsquoordre croissant de cardinaliteacute Les classes speacutecifiques au
domaine deacutefinissants les constructions logiques propositionnelles et de premier ordre sont
constitueacutees drsquoenviron 500 lignes de code suppleacutementaires Il est facile de voir que le temps
1 httpsgithubcomliflabfault-finder
156
drsquoexeacutecution de cet algorithme est exponentiel en fonction de la taille de TΣ qui peut elle-mecircme
ecirctre exponentielle dans un autre facteur (deacutependant du problegraveme modeacuteliseacute) Dans la logique
du premier ordre (telle qursquoutiliseacutee par un fragment de Cornipickle) si a1 an est lrsquoariteacute
respective de chaque preacutedicat dans la signature le nombre drsquoendomorphismes est sumi 2|A|ai
pour un domaine donneacute A
Malgreacute cela il est possible de montrer que cet algorithme est limiteacute par une borne infeacuterieure
theacuteorique Un ensemble drsquoendomorphismes TΣ est dit complet si pour tout σ σ prime isin Σ il existe
une transformation bien deacutefinie T sube TΣ tel que T (σ) = σ prime
Theorem 2 Eacutetant donneacute un ensemble de structures Σ un ensemble drsquoexpressions de langage
Φ et un ensemble complet de transformations TΣ le problegraveme du calcul des reacuteparations
principales est aussi difficile que le problegraveme de satisfiabiliteacute pour Φ
Soit ϕ isinΦ une expression du langage Si ϕ est satisfaisable alors il existe une structure σ isin Σ
telle que σ |= ϕ Prenons une structure arbitraire σ prime isin Σ Puisque TΣ est complet il existe
au moins une transformation T sube TΣ telle que T (σ prime) = σ Prenons le plus petit ensemble
de ce genre par deacutefinition il srsquoagit drsquoune reacuteparation principale et sera finalement eacutenumeacutereacutee
par lrsquoalgorithme 1 Puisque lrsquoalgorithme est complet au contraire aucune reacuteparation ne sera
trouveacutee si ϕ nrsquoest pas satisfaisable
632 REacuteDUCTION DU NOMBRE DE SOLUTIONS CANDIDATES
Ces reacutesultats de complexiteacute de base justifient une discussion sur la reacuteduction du nombre de
reacuteparations potentielles qui doivent ecirctre exploreacutees
157
Suppression des endomorphismes
Le nombre de transformations potentielles peut drsquoabord ecirctre reacuteduit en supprimant les endomor-
phismes dont on sait qursquoils sont impossibles en fonction du contexte Par exemple supposons
que les symboles propositionnels a et b dans lrsquoexemple 622 correspondent respectivement
aux assertions laquo le client paie pour un objet raquo et laquo le client reccediloit lrsquoarticle raquo On pourrait
supposer qursquoune eacutevaluation ougrave a est vraie ne peut pas ecirctre modifieacutee en la rendant fausse cela
correspondrait au fait qursquoune action effectueacutee par un acteur ne peut ecirctre annuleacutee Dans un tel
contexte seuls les endomorphismes reacuteglant les fausses variables agrave vrai seraient consideacutereacutes
Dans le cas des graphes comme dans lrsquoexemple 622 on pourrait imposer des restrictions
sur les changements qui lui sont autoriseacutes par exemple on pourrait dire que les arecirctes
existantes doivent rester inchangeacutees ou que seuls des sommets speacutecifiques peuvent ecirctre
colorieacutes diffeacuteremment Ceci encore une fois a pour effet de preacutefeacuterer certaines transformations
aux autres et reacuteduit globalement le nombre de reacuteparations disponibles
Transformations en groupes
La granulariteacute des endomorphismes disponibles peut eacutegalement ecirctre modifieacutee Dans le cas de
lrsquoexemple de coloriage de graphe il est eacutevident qursquoaucune reacuteparation ne consistera jamais
en un seul endomorphisme τqi(x)7rarrgt La raison est que lrsquoexpression ϕ1 requiert que chaque
sommet ait exactement une couleur assigner qi agrave gt pour un sommet implique que le q j
restant pour j 6= i soit mis agrave perp On peut donc deacutefinir un nouvel ensemble de transformations
158
approprieacutees au contexte repreacutesentant les changements de couleur
TC =⋃xisinA
⋃iisin[13]
j 6=ik 6= j 6=i
τqi(x)7rarrgtτq j(x)7rarrperpτqk(x)7rarrperp
De mecircme comme la relation drsquoadjacence est symeacutetrique mettre p(xy) agrave gt (resp perp) ne
peut pas ecirctre fait sans mettre p(yx) agrave gt (resp perp) Au lieu de consideacuterer les changements
individuels aux seules entreacutees de p on peut deacutefinir un ensemble de changements de bord
TE =⋃xisinA
⋃yisinA
⋃bisingtperp
τp(xy)7rarrbτp(yx)7rarrb
On pourrait alors utiliser TCcupTE comme lrsquoensemble des transformations au lieu de TΣ Bien
que cela ne change rien agrave la theacuteorie sur les solutions actuelles le fait que TCcupTE soit plus petit
que TΣ a un effet positif sur la performance drsquoun algorithme drsquoeacutenumeacuteration dans la pratique
La mecircme chose peut ecirctre dite des endomorphismes de lrsquoexemple 622 Plutocirct que de consideacuterer
tous les changements individuels des coordonneacutees (xy) des quatre coins de chaque eacuteleacutement
on pourrait deacutefinir des sous-ensembles correspondants agrave des modifications plus intuitives par
exemple lrsquoensemble des deacuteplacements horizontaux pourrait ecirctre deacutefini comme
TH =⋃eisinE
⋃pisinP
τleft(e) 7rarr pτright(e) 7rarr (τright(e)minus p)
On peut alors limiter la recherche pour les reacuteparations agrave celles qui sont faites uniquement
des deacuteplacements (horizontaux ou verticaux) ou des redimensionnements (horizontaux ou
verticaux) drsquoeacuteleacutements etc
159
(a) Le reacutesultat attendu
(b) Problegraveme drsquoalignement
Figure 65 ndash Eacuteleacutements mal aligneacutes capture et suggestion de correction
64 EXEMPLES
Les trois figures suivantes montrent des exemples simples de bugs montrant la capaciteacute de
lrsquooutil agrave rechercher des candidats de correction en se basant sur lrsquoapproche proposeacutee Les
figures montrent les verdicts qui sont des suggestions donneacutees par lrsquooutil pour chacun des cas
Il est a noteacute que le processus prend entre 2 et 20 millisecondes pour trouver un candidat (sans
prendre compte du temps drsquoeacutevaluation)
Exemple 1 eacuteleacutements mal aligneacutes Dans ce cas 65 la suggestion est de deacuteplacer 69 pixels
vers la gauche lrsquoeacuteleacutement qui a lrsquoidentifiant ID=2
160
(a) Le reacutesultat attendu
(b) Problegraveme de chevauchement
Figure 66 ndash Eacuteleacutements qui se chevauchent capture et suggestion de correction
Exemple 2 eacuteleacutements qui se chevauchent La suggestion est de deacuteplacer le bat de lrsquoeacuteleacutement
avec lrsquoID 11 agrave 126 pixels 66
Exemple 3 eacuteleacutement qui deacuteborde de son conteneur La suggestion est de deacuteplacer la
droite de lrsquoeacuteleacutement avec lrsquoID 14 agrave 1277 pixels 67
161
(a) Le reacutesultat attendu
(b) Problegraveme de deacutebordement
Figure 67 ndash Eacuteleacutement qui deacuteborde de son conteneur capture et suggestion de correction
CHAPITRE 7
CONCLUSION GEacuteNEacuteRALE
Les applications web se multiplient et se diversifient et les exigences de leurs utilisateurs srsquoac-
centuent et srsquoamplifient avec La relation application web-utilisateur est assureacutee uniquement
via la page Web Pour que cette relation soit tenue la page Web doit ecirctre entretenue et reacutepondre
agrave un ensemble de critegraveres se charger rapidement fournir le service deacutesireacute et ecirctre agreacuteable agrave
voir sur tous les appareils des ordinateurs de bureau ou portables des tablettes et teacuteleacutephones
mobiles Cependant la complexiteacute de la relation entre HTML CSS et JavaScript engendre des
difficulteacutes consideacuterables pour la mise en page des applications web le mecircme document peut
ecirctre afficheacute dans une varieacuteteacute de tailles de reacutesolutions de navigateurs et mecircme de peacuteripheacuteriques
entravant de ce fait la mise en page Les laquo bugs raquo de mise en page connaissent par conseacutequent
une preacutesence remarquable allant de problegravemes de particulariteacutes relativement simple tels que
des eacuteleacutements superposeacutes ou incorrectement aligneacutes agrave des problegravemes plus seacuterieux compromet-
tant la fonctionnaliteacute de lrsquointerface utilisateur Les tentatives bien que rares visant agrave reacutesoudre
ces problegravemes restent incapables de cerner tous les aspects de ceux-ci (problegravemes)
Nous distinguons dans ce contexte deux familles drsquoapproches servant agrave tester les interfaces
des applications web lrsquoapproche visuelle se basant sur la comparaison des captures drsquoeacutecran
pixel par pixel et lrsquoapproche deacuteclarative fonctionnant directement sur des informations sur
163
la mise en page Si dans la premiegravere qui fonctionne mal avec les donneacutees dynamiques le
deacuteveloppeur de test se heurte agrave lrsquoimpossibiliteacute de comparer des images de diffeacuterentes tailles
drsquoeacutecran il doit se soumettre dans la seconde aux exigences des descriptionsscripts de test
assez verbeux en deacutecrivant les regravegles de son interface graphique
Lrsquoapproche que nous proposons agrave savoir lrsquooutil Cornipickle offre les avantages suivants elle
fonctionne sur la majoriteacute de combinaisons navigateurssystegravemes drsquoexploitation sans recourir
aux plugins speacutecifiques au navigateur (ou limiteacutes par le navigateur) De plus elle permet
1 lrsquoeacutevaluation des speacutecifications en fonction des informations recueillies sur le client en se
dispensant de lrsquoeacutevaluation statique de HTML et CSS du cocircteacute serveur 2 lrsquointerpreacutetation des
speacutecifications de telle maniegravere agrave eacuteviter une charge de calcul excessive dans le navigateur
3 lrsquoutilisation drsquoun autre langage que JavaScript pour lrsquoimpleacutementation 4 la gestion des
proprieacuteteacutes comportementales impliquant plus drsquoun instantaneacute de page par lrsquooutil 5 la pos-
sibiliteacute agrave lrsquoutilisateur drsquoajouter de supprimer ou de modifier les speacutecifications eacutevalueacutees par
lrsquooutil 6 lrsquoexclusiviteacute drsquoexprimer agrave travers un langage deacuteclaratif des proprieacuteteacutes agrave propos du
document (Document Object Model) et des proprieacuteteacutes CSS drsquoune page Web 7 la potentialiteacute
de rechercher et deacutetecter automatiquement les bugs comportementaux et RWD (Responsive
Web Design) dans les applications web 8 la reacuteparation en fournissant un algorithme de base
pour calculer les transformations
Le prototype de preuve de concept de Cornipickle a montreacute des reacutesultats prometteurs dans sa
capaciteacute agrave exprimer facilement les conditions de bugs de mise en page dans les applications
web et agrave les deacutetecter efficacement dans des exemples de pages de plus de 35 applications
reacuteelles
Lrsquoefficaciteacute de notre outil Cornipickle nous a permis drsquoattraper automatiquement certains
problegravemes communs rencontreacutes dans les applications web modernes (RIA et RWD) Les
164
proprieacuteteacutes de Cornipickle garantissent que les pages drsquoune application suivent diffeacuterents
types de contraintes en particulier le seacutequenccedilage possible des pages qui est lrsquoobjectif de ce
volet de notre travail En combinant les performances de Crawljax pour explorer les eacutetats
de lrsquoapplication (crawler state-aware) et un stateful test oracle (speacutecifications de logiques
temporelles du premier ordre) dans Cornipickle nous avons obtenu des reacutesultats prometteurs
Une petite application a eacuteteacute deacuteveloppeacutee et inteacutegreacutee afin de tester le rendu visuel dans les
diffeacuterentes fenecirctres possibles afin drsquoattraper les deacutefauts RWD
Notre solution a quelques limites et surmonter ces limitations pourrait ecirctre la base de futurs
travaux Lrsquoutilisation de Cornipickle nous limite agrave des contraintes se reacutefeacuterant uniquement aux
eacuteleacutements qui sont afficheacutes Cela rend les bugs causeacutes au niveau backend (cocircteacute serveur) parfois
difficiles agrave attraper il est neacutecessaire de trouver les eacuteleacutements afficheacutes qui peuvent indirectement
repreacutesenter les eacutetats du serveur Dans la mecircme ligne si Crawljax ne notifie pas un changement
drsquoeacutetat lorsque le DOM change il nrsquoest pas possible drsquoeacutevaluer cette page ougrave un bug aurait pu
se produire En outre lorsqursquoune proprieacuteteacute est eacutevalueacutee agrave false elle est fausse pour le reste
de lrsquoanalyse et aucun autre bug ne peut ecirctre intercepteacute avec cette proprieacuteteacute Cela a causeacute un
problegraveme avec la deacutecouverte de bugs RWD observables car la plupart des eacutechecs ne sont pas
observables et les proprieacuteteacutes devaient trouver un bug observable comme premier bug
De plus la capaciteacute de Cornipickle agrave renvoyer une explication utile de la violation drsquoune
proprieacuteteacute sur un document Web donneacute est limiteacutee Crsquoest pourquoi nous avons introduit une
deacutefinition du concept de reacuteparation dont le calcul fournit des informations plus preacutecises sur les
changements requis pour une structure afin de satisfaire une speacutecification donneacutee Lrsquoeacutetude des
reacuteparations et leur calcul fait partie du travail en cours et de nombreux problegravemes sont encore
ouverts Par exemple un calcul efficace des reacuteparations repose sur la suppression du plus
grand nombre possible de transformations candidates par conseacutequent des techniques pour
identifier facilement des endomorphismes qui ne peuvent jamais faire partie drsquoune solution
165
pourraient ecirctre rechercheacutees De mecircme nous preacutevoyons drsquoeacutetudier des techniques qui pourraient
geacuteneacuterer lrsquoensemble des reacuteparations directement agrave partir de la speacutecification et de la structure
deacutefectueuse plutocirct que drsquoutiliser lrsquoalgorithme brut de geacuteneacuteration et de test preacutesenteacute
Le concept de calcul des reacuteparations est en cours de construction et il reste agrave eacutetablir ses liens
avec les travaux connexes Comme nous lrsquoavons vu dans la section preacuteceacutedente trouver des
reacuteparations concerne le concept de reacutesolution de satisfiabiliteacute (SAT) et plus preacuteciseacutement le
problegraveme du SAT increacutementiel [64] Les solveurs SAT traditionnels sont neacutecessaires pour
trouver un seul modegravele drsquoexpression En SAT increacutementiel un solveur trouve un premier
modegravele drsquoexpression mais peut eacutegalement ecirctre demandeacute agrave plusieurs reprises de fournir des
modegraveles suppleacutementaires Lorsqursquoun ensemble de transformations est termineacute lrsquoiteacuteration sur
les modegraveles revient agrave effectuer des iteacuterations sur les reacuteparations
BIBLIOGRAPHIE
[1] Alm specifications examples http auckland-
layoutsourceforgenetexamplesindexhtml
[2] Applitools visual test automation httpwwwapplitools
comAccessed25April2016
[3] Blackout repport httpssiteshksharvardeduhepgPapersNYISO
blackoutreport8Jan04pdf
[4] Bugs catastrophiques httpwwwslidesharenetwearesocialsg
social-media-for-travel-brands
[5] critical-rendering-path httpsdevelopersgooglecomwebfundamentals
performancecritical-rendering-path
[6] Deacutefinition du viewport httpswwwdefinitions-marketingcomdefinition
viewport
[7] Exemple webspecwatij https gistgithubcomtux2323954186
[8] Froont httpfroontcom
167
[9] Galen httpwwwswtestacademycomgalen-framework
[10] galen framework 2017 httpgalenframeworkcom
[11] howbrowserswork 2017 HTTPtaligarsielcomProjects
howbrowserswork1html
[12] Html and css w3c standards httpswwww3orgstandardswebdesign
htmlcss
[13] Http response httpswwww3orgProtocolsrfc2616rfc2616-sec6html
sec6
[14] http coursescsvteduprofessionalismtherac_25therac_1html httpcourses
csvteduprofessionalismTherac_25Therac_1html
[15] http wearesocialsg httpwearesocialsg
[16] http wwwcnncom2003us0814poweroutage httpwwwcnncom2003US
0814poweroutage
[17] http wwwyfolirenethumrhumeur13htm httpwwwyfolirenethumr
humeur13htm
[18] Les bases de sahiscript https sahiprocomdocsscriptingsahi-scripting-basicshtml
[19] mobile and tablet internet usage exceeds desktop for first
time worldwide httpgsstatcountercompress
mobile-and-tablet-internet-usage-exceeds-desktop-for-first-time-worldwide
[20] Phantomcss 2017 httpsgithubcomHuddlePhantomCSS
168
[21] Principe de fonctinement de sahi https wwwthoughtworkscominsightsblogintroduction-
sahi-part-1
[22] Respondr httprespondrio
[23] Responsinator httpswwwresponsinatorcom
[24] Responsivepxcom httpresponsivepxcom
[25] Reuters us-blackout-newyork 2003 https
wwwreuterscomarticleus-blackout-newyork
spike-in-deaths-blamed-on-2003-new-york-blackout-idUSTRE80Q07G20120127
[26] Rwdbookmarklet httpswwwsitepointcom
responsive-web-design-tool
[27] Screenfly httpquirktoolscomscreenfly
[28] Software bugs found to be cause of toyota acceleration death httpswwwgoogle
frampswwwcomputerworldcomarticle2573466disaster-recovery
software-failure-cited-in-august-blackout-investigationamphtml
[29] Software failure cited in august blackout investigation https
wwwcomputerworldcomarticle2573466disaster-recovery
software-failure-cited-in-august-blackout-investigationhtml
[30] Utilisation de capybara https wwwsitepointcombasics-capybara-improving-tests
[31] Vpresizer httplabmaltewassermanncomviewport-resizer
[32] Washingtonpost toyota reaches 12-billion settlement to end criminal
probe2014 httpswwwwashingtonpostcombusinesseconomy
169
toyota-reaches-12-billion-settlement-to-end-criminal-probe2014
03195738a3c4-af69-11e3-9627-c65021d6d572_storyhtmlutm_term=
4826d81e2aa6
[33] Watir http watircom
[34] websiteresponsivetest httpwwwwebsiteresponsivetestcom
[35] A Arora and M Sinha Web application testing A review on techniques tools and state
of art International Journal of Scientific Iamp Engineering Research 3(2) 1ndash6 2012
[36] K Benjamin G Von Bochmann M E Dincturk G-V Jourdan and I V Onut A stra-
tegy for efficient crawling of rich internet applications In 11th international conference
on Web engineering serICWErsquo11 page 74ndash89 Heidelberg Springer-Verlag 2011
[37] Tim Berners-Lee Roy Fielding and Larry Masinter Uniform resource identifier (URI)
Generic syntax Technical report January 2005 RFC 3986
[38] Oussama Beroual Francis Guerin and Sylvain Halleacute Searching for behavioural bugs
with stateful test oracles in web crawlers In 10th IEEEACM International Workshop on
Search-Based Software Testing SBSTICSE 2017 Buenos Aires Argentina May 22-23
2017 pages 7ndash13 2017
[39] T-H Chang T Yeh and RC Miller Gui testing using computer vision In the SIGCHI
Conference on H man Factors in Computing Systems CHI rsquo10 pages 1535ndash1544 New
York NY USA may 2010 ACM
[40] S Choudhary E Dincturk S Mirtaheri G-V Jourdan G Bochmann and I Onut
Building rich internet applications models Example of a better strategy In Web
Engineering ser Lecture Notes in Computer Science F Daniel P Dolog and Q Li
volume 7977 page 291ndash305 Springer Berlin Heidelberg 2013
170
[41] S Choudhary M E Dincturk S M Mirtaheri A Moosavi G von Bochmann G-V
Jourdan and I-V Onut Crawling rich internet applications the state of the art In
CASCON page 146ndash160 IBM Corp 2012
[42] Shauvik Roy Choudhary Mukul R Prasad and Alessandro Orso X-PERT accurate
identification of cross-browser issues in web applications In David Notkin Betty H C
Cheng and Klaus Pohl editors 35th International Conference on Software Engineering
ICSE rsquo13 San Francisco CA USA May 18-26 2013 pages 702ndash711 IEEE ACM
2013
[43] V Dallmeier M Burger T Orth and A Zeller Webmate Generating test cases for
web 20 In D Winkler S Biffl J Bergsmann (Eds) SWQD volume 133 of Lecture
Notes in Business Information Processing page 55ndash69 Springer 2013
[44] M E Dincturk ldquomodel-based crawling ndash an approach to design efficient crawling
strategies for rich internet applications Masterrsquos thesis EECS - University of Ottawa
2013
[45] M E Dincturk S Choudhary G von Bochmann G-V Jourdan and I-V Onut A
statistical approach for efficient crawling of rich internet applications ICWE page
362ndash369 2012
[46] Mustafa Emre Model-based Crawling - An Approach to Design Efficient Crawling
Strategies for Rich Internet Applications PhD thesis University of Ottawa 2013
[47] Jesse James Garrett Ajax A new approach to web applications - adaptive path 2005
[48] Alan Grosskurth and Michael Godfrey A case study in architectural analysis The
evolution of the modern web browser Software Maintenence and Evolution Research
and PracticeEMSE 2007
171
[49] Allan Grosskurth and Michael Godfrey A reference architecture for web browsers
Software Maintenence and Evolution Research and Practice page 1ndash7 2006
[50] A Guttman R-trees a dynamic index structure for spatial searching June 1984
[51] Sylvain Halleacute Nicolas Bergeron Francis Guerin Gabriel Le Breton and Oussama
Beroual Declarative layout constraints for testing web applications J Log Algebr Meth
Program 85(5) 737ndash758 2016
[52] Sylvain Halleacute and Oussama Beroual Fault localization in web applications via model
finding In Proceedings First Workshop on Causal Reasoning for Embedded and safety-
critical Systems Technologies CRESTETAPS 2016 Eindhoven The Netherlands 8th
April 2016 pages 55ndash67 2016
[53] Sylvain Halleacute and Roger Villemaire Constraint-based invocation of stateful web services
The Beep Store (case study) In 4th International ICSE Workshop on Principles of
Engineering Service-Oriented Systems PESOS 2012 June 4 2012 Zurich Switzerland
pages 61ndash62 2012
[54] S Halleacute G Le Breton F Maronnaud A Blondin Masseacute and S Gaboury Exhaustive
exploration of ajax web applications with selective jumping In ICST page 243ndash252
IEEE Computer Society 2014
[55] Arnaud Le Hors Philippe Le Heacutegaret Lauren Wood Gavin Nicol Jonathan Ro-
bie Mike Champion and Steve Byrne Document object model level 2 core 2000
http wwww3orgTRDOM-Level-2-Core
[56] Jaakko Jaumlrvi Mat Marcus Sean Parent John Freeman and Jacob Smith Algorithms for
user interfaces In Proceedings of the Eighth International Conference on Generative
172
Programming and Component Engineering GPCE rsquo09 pages 147ndash156 New York NY
USA 2009 ACM
[57] Jaakko Jaumlrvi Mat Marcus Sean Parent John Freeman and Jacob N Smith Property
models from incidental algorithms to reusable components In Yannis Smaragdakis and
Jeremy G Siek editors GPCE pages 89ndash98 ACM 2008
[58] Sonal Mahajan and William G J Halfond WebSee A tool for debugging HTML pre-
sentation failures In 8th IEEE International Conference on Software Testing Verification
and Validation ICST 2015 Graz Austria April 13-17 2015 pages 1ndash8 2015
[59] Ethan Marcotte Responsive web design Eyrolles 4 edition 2013
[60] A Mesbah A van Deursen and S Lenselink Crawling Ajax-based web applications
through dynamic analysis of user interface state changes ACM Transactions on the Web
(1) 6 2012
[61] S M Mirtaheri D Zou G V Bochmann G-V Jourdan and I V Onut Dist-ria crawler
A distributed crawler for rich internet applications In 8th International Conference on
P2P Parallel Grid Cloud and Internet Computing pages 105ndash112 IEEE Computer
Society Washington 2013
[62] Seyed M Mirtaheri Mustafa Emre Dincturk Salman Hooshmand Gregor V Bochmann
and Guy-Vincent Jourdan A brief history of web crawlers In CASCON rsquo13 Proceedings
of the 2013 Conference of the Center for Advanced Studies on Collaborative Research
pages 40ndash54 IBM Corp Riverton NJ USA ccopy2013 2013
[63] MTamm Http response httpsdeslidesharenetMichaelTamm
fighting-layout-bugs
173
[64] Alexander Nadel and Vadim Ryvchin Efficient SAT solving under assumptions In SAT
pages 242ndash255 2012
[65] C Olston and M Najork Web crawling Foundations and Trends in Information
Retrieval 4 175ndash246 2010
[66] Sean Parent Mat Marcus and Foster Brereton ASL overview Technical report Adobe
Systems 2007 httpstlabadobecomgroup__asl__overviewhtml
[67] Pedro A Szekely Piyawadee Noi Sukaviriya Pablo Castells Jeyakumar Muthukumara-
samy and Ewald Salcher Declarative interface models for user interface construction
tools the MASTERMIND approach In Leonard J Bass and Claus Unger editors
Proceedings of the IFIP TC2WG27 Working Conference on Engineering for Human-
Computer Interaction volume 45 of IFIP Conference Proceedings pages 120ndash150
Chapman amp Hall 1995
[68] Seyed M Mir Taheri Distributed Crawling of Rich Internet Applications PhD thesis
University of Ottawa 2015
[69] Michael Tamm Fighting layout bugs 2009 httpswwwyoutubecomwatchv=
WY3C6FHqSqQ
[70] Hideo Tanida Mukul R Prasad Sreeranga P Rajan and Masahiro Fujita Automated
system testing of dynamic web applications volume 303 page 181ndash196 Springer Berlin
Heidelberg 2013
[71] te (testing experience) The Magazine for Professional Testers Test automation - does it
make sense a simplified automation solution using watij wwwtestingexperiencecom
[72] Thomas A Walsh Gregory M Kapfhammer and Phil McMinn Automated layout
failure detection for responsive web pages without an explicit oracle In Proceedings
174
of the 26th ACM SIGSOFT International Symposium on Software Testing and Analysis
Santa Barbara CA USA July 10 - 14 2017 pages 192ndash202 2017
[73] Thomas A Walsh Gregory M Kapfhammer and Phil McMinn Redecheck an auto-
matic layout failure checking tool for responsively designed web pages In Proceedings
of the 26th ACM SIGSOFT International Symposium on Software Testing and Analysis
Santa Barbara CA USA July 10 - 14 2017 pages 360ndash363 2017
[74] Thomas A Walsh Phil McMinn and Gregory M Kapfhammer Automatic detection
of potential layout faults following changes to responsive web pages (N) In 30th
IEEEACM International Conference on Automated Software Engineering ASE 2015
Lincoln NE USA November 9-13 2015 pages 709ndash714 2015
REacuteSUMEacute
Les problegravemes de mise en page dans les interfaces des applications web appeleacutes laquo bugsdrsquointerface raquo croissent de jour en jour avec la populariteacute grandissante de ces applications etdonnent lieu agrave des ennuis drsquoaffichage embarrassants et des difficulteacutes allant jusqursquoagrave lrsquoentrave defonctionnaliteacute de lrsquointerface utilisateur Le nombre consideacuterable drsquoutilisateurs des applicationsweb incapables de pallier agrave ces contraintes rend lrsquoenjeu tregraves grand Malheureusement lessolutions efficaces apporteacutees agrave ce sujet sont tregraves rares
Nous proposons dans ce travail de thegravese une nouvelle approche permettant la speacutecification ducontenu attendu drsquoune interface la veacuterification automatique du respect de la speacutecification etplus particuliegraverement lrsquooctroi drsquoun verdict deacutetailleacute et utile lors drsquoune violation
Lrsquoapproche proposeacutee est une technique geacuteneacuterique de localisation de deacutefauts baseacutee sur leconcept de laquo reacuteparation raquo ou laquo correction raquo et applicable avec diffeacuterents langages de speacutecifi-cation y compris la logique propositionnelle Nous portons une attention particuliegravere agrave sonutilisation dans la deacutetection des deacutefauts de mise en page dans les applications Web
TABLE DES MATIEgraveRES
Reacutesumeacute ii
Table des matiegraveres iii
Table des figures v
Liste des tableaux viii
Introduction 1
1 Notions geacuteneacuterales sur le web 711 Le fonctionnement du web 712 Le langage HTML 1013 Les Cascading StyleSheets (CSS) 1514 JavaScript 1815 Le fonctionnement interne des navigateurs web 23
2 Les bugs drsquointerface dans les applications web 3521 Types drsquoapplications web 3522 Types de bugs drsquointerface 37
3 Eacutetat de lrsquoart 6331 Outils de test 6332 Approche visuelle 7133 Approche deacuteclarative 7934 Outils RWD 8835 Discussion sur les approches exisantes 92
4 Deacutetection de bugs drsquointerface 9641 Un interpreacuteteur pour les proprieacuteteacutes Cornipickle 9742 Le langage Cornipickle 10343 Exprimer des proprieacuteteacutes avec Cornipickle 114
5 Deacutetection avanceacutee bugs comportementaux et RWD 11951 Bugs comportementaux dans le Beep Store 120
iv
52 Solutions actuelles 12253 Solution proposeacutee 12554 Expeacuteriences et reacutesultats 127
6 Vers un meilleur feedback pour lrsquoutilisateur 13761 Geacuteneacuteration de contre-exemple les teacutemoins 13862 Localisation des erreurs dans les applications web 14363 Calcul de la reacuteparation 15464 Exemples 159
7 Conclusion geacuteneacuterale 162
Bibliographie 166
TABLE DES FIGURES
11 Exemple drsquoune requecircte HTTP 912 Exemple drsquoune reacuteponse HTTP 1013 Un exemple simple de page HTML contenant un grand titre et un paragraphe 1214 Le flux entre les composants du navigateur pour la reacutecupeacuteration et le traitement
drsquoune page web dans le navigateur 2615 Un exemple simple de page web illustrant le rendu dans un navigateur 2716 Les processus de traitement de HTML et CSS au niveau du moteur de rendu
du navigateur 2817 Un arbre du modegravele drsquoobjet DOM 2918 Un exemple de fichier CSS simple 2919 Arbre du modegravele drsquoobjet CSSOM 30110 Arbre de rendu 31111 Les eacutetapes et processus de la construction des arbres DOM CSSOM et de
lrsquoarbre de rendu 32112 Un second exemple simple illustrant le processus de mise en page par le
navigateur 33113 Vue globale du flux de reacutecupeacuteration de traitement et drsquoaffichage drsquoune page web 34
21 Exemple drsquoeacuteleacutements mal aligneacutes le cadre blanc est horizontalement malaligneacute (LiveShout) le menu Interests est deacutecaleacute drsquoun pixel par apport auxautres menus (LinkedIn) 39
22 Exemple drsquoeacuteleacutements qui se chevauchent 4123 Le contenu de la page est dissimuleacute de lrsquointerface en raison de son prolonge-
ment au-delagrave des dimensions du conteneur parent 4224 Le bug Facebook La zone de texte permettant au utilisateur de taper un
message instantaneacute (agrave gauche) disparaicirct soudainement (agrave droite) 4325 Le bug laquo ton sur ton raquo Les eacuteleacutements de menu sont pousseacutes en dehors de leurs
conteneur et disparaissent (a) le texte du lien est de la mecircme couleur que lefond reacuteveacuteleacute en le seacutelectionnant avec la souris (b) 44
26 Un eacuteleacutement est placeacute incorrectement sur un autre 4527 Un exemple drsquointerface briseacutee en raison de lrsquoeacutechec du chargement de certaines
ressources 4628 Exemple drsquointerface briseacute dans le site Digital Ocean 4729 Exemple drsquoHTML mal formeacute 47
vi
211 Incoheacuterence dans le champ de formulaire du site CallingCards 48210 Exemple drsquoeacuteleacutements inaccessibles 57212 Exemple de mojibake (a) donneacutees UTF-8 afficheacutees comme Cp1252 (b)
donneacutees Cp1252 afficheacutees comme UTF-8 58213 Exemples de Mojibake dans Doodle 59214 Des donneacutees extraites de la base de donneacutees sont incorrectement eacutechappeacutees
dans IEEE PDF eXpress on constate la preacutesence de plusieurs apostrophes 60215 Sur cette page YouTube du code JavaScript est afficheacute au lieu drsquoecirctre interpreacuteteacute 60216 Eacuteleacutements mobiles la position et la bordure de la zone du texte changent lors
de la saisie du texte (NSERC) 60217 Confusion connexiondeacuteconnexion dans une page web le contenu pour un
utilisateur connecteacute (en haut de la page a droite) coexiste avec le formulairede connexion reacuteserveacute aux utilisateurs qui ne sont pas en principe connecteacutes 61
218 Incoheacuterences dans le reacutesultat de la recherche 61219 Code CSS avec des conditions sur la largeur de lrsquoappareil Il srsquoagit drsquoun
exemple de media queries 61220 Le bug de deacutepassement drsquoeacuteleacutements sur le site httpswwwthelilycom 62221 Le bug de deacutepassement du viewport sur le site httpswwwslaveryfootprint
org 62222 Le bug de couverture drsquoeacuteleacutements sur le site httpswwwanthedesignfr 62
31 Exemple de code pour Selenium WebDriver 6432 Commandes de base de Capybara [30] 6633 Exemple drsquoutilisation de Watij [71] 6734 Page de connexion (login) de Yahoo [71] 6735 Exemple simple drsquoun test JUnit Watij WebSpec [7] 6836 Exemple de Sahi script [18] 7037 Architecture de Sahi (figure tireacutee de [21]) 7038 Le fonctionnement geacuteneacuteral de lrsquooutil drsquoanalyse WebSee 7439 Outputs de WebSee eacuteleacutements HTML deacutefectueux 74310 Exemple de traitement drsquoimage avec FLB (figure tireacutee de [63]) 76311 Exemple drsquoutilisation de Sikuli (figure tireacutee de [39]) 78312 Exemple avec Auckland (figure tireacutee de [1]) 81313 Une simple speacutecification avec Auckland [1] 81314 Exemple drsquoune boicircte de dialogue pour enregistrer un fichier image 83315 Une simple speacutecification deacuteclarative dans le langage Adam du modegravele de
proprieacuteteacute pour le dialogue dans Figure314 [56] 84316 Une simple speacutecification avec Eve [56] 85317 Exemple drsquoune speacutecification Galen [9] 89318 Exemple drsquoun script Automotion [70] 90319 Exemple de faux positif avec PhantomCSS 94
41 Architecture et interactions de Cornipickle 100
vii
42 Une page simple seacuterialiseacutee en JSON 10143 Une capture drsquoeacutecran de Cornipickle en action 10244 Un document DOM simple (a) Structure HTML (b) Repreacutesentation en arbre
DOM Seuls les noms des eacuteleacutements sont afficheacutes les attributs et valeursrestants sont omis pour plus de clarteacute 111
45 Exemple de code jQuery veacuterifiant que deux eacuteleacutements ont le mecircme texte 116
51 Le bug de connexions multiples Un utilisateur deacutejagrave connecteacute se voit proposerlrsquooption de se reconnecter 121
52 Le bug des paniers multiples Des boutons pour creacuteer un panier et ajouter desarticles au panier coexistent sur la mecircme page 121
53 Le bug de la suppression drsquoun panier inexistant Des boutons pour retirer dupanier et creacuteer un panier coexistent sur la mecircme page 122
54 Flux drsquointeraction et de seacuterialisation (Crawljax-Cornipickle) 12655 Le code neacutecessaire pour attraper le bug des connexions multiples en utilisant
Crawljax sans Cornipickle 12956 Temps de calcul de lrsquointerpreacuteteur en fonction du nombre drsquoeacuteleacutements dans la
page 13557 Temps de calcul incluant la seacuterialisation de la page par la sonde JavaScript et
lrsquointerpreacutetation de la proprieacuteteacute en fonction du nombre drsquoeacuteleacutements dans la page136
61 Exemple drsquoune erreur de mise en page Web simple (a) lrsquoun des eacuteleacutementsde la liste est incorrectement aligneacute avec les autres (b) un teacutemoin (witness)produit par lrsquooutil Cornipickle 143
62 Illustration du concept de reacuteparation principale 14663 Quelques reacuteparations possibles pour un coloriage de graphe deacutefectueux 14964 Trois reacuteparations pour lrsquoexemple web 15365 Eacuteleacutements mal aligneacutes capture et suggestion de correction 15966 Eacuteleacutements qui se chevauchent capture et suggestion de correction 16067 Eacuteleacutement qui deacuteborde de son conteneur capture et suggestion de correction 161
LISTE DES TABLEAUX
11 Statistiques des parts drsquoutilisation des navigateurs dans le monde entre mars2015 et mars 2016 24
21 Sites et applications web pour lesquelles au moins un bug de mise en page aeacuteteacute trouveacute 38
31 Limites et diffeacuterences entre trois outils majeurs des approches existantes 95
41 La grammaire BNF pour Cornipickle (Partie I) 10442 La grammaire BNF pour Cornipickle (Partie II) 10643 Extensions de la grammaire BNF pour Cornipickle 10844 La seacutemantique formelle de Cornipickle aaprime isin A sont les noms drsquoattributs
DOM v isin V est une valeur drsquoattribut c isin C est un seacutelecteur CSS ξ et ξ prime
sont des noms de variables ν ν prime isin N sont les nœuds DOM et ϕ et ψ sont deseacutenonceacutes Cornipickle quelconques Lorsque t est vide Always srsquoeacutevalue agrave V raiet Eventually et Next srsquoevaluent agrave Faux 113
61 La deacutefinition reacutecursive de la fonction de calcul du verdict ω 140
INTRODUCTION
Le mot bug qui signifie en anglais laquo insecte raquo et qui a eacuteteacute franciseacute pour devenir laquo bogue raquo
a vu le jour dans les anneacutees quarante agrave la suite de la panne qursquoa connu le dernier cri des
ordinateurs de lrsquoeacutepoque le Mark II Comme son nom lrsquoindique la cause eacutetait un insecte qui
srsquoeacutetait introduit dans un relais eacutelectromeacutecanique de celui-ci La panne fut deacutecouverte par la
brillante matheacutematicienne et pionniegravere de la programmation Grace Hopper Il srsquoagit du tout
premier vrai bug informatique car on utilisait deacutejagrave le mot pour deacutesigner des problegravemes dans les
appareils eacutelectriques [17] Depuis le mot bug est devenu synonyme de tout dysfonctionnement
ou anomalie drsquoun programme
Le monde drsquoaujourdrsquohui est piloteacute par des ordinateurs dans tous les domaines eacutenergeacutetique
judiciaire sanitaire militaire etc De ce fait la manifestation drsquoun bug peut entraicircner des
deacutesordres des perturbations voire des catastrophes Les trois derniegraveres deacutecennies ont connu
une multitude de bugs de grande envergure
Parmi les plus importants mentionnons une interruption en 2003 de plusieurs jours dans
lrsquoalimentation en eacutelectriciteacute drsquoune cinquantaine de millions drsquoameacutericains Lors de cet incident
une douzaine de personnes ont mecircme trouveacute la mort empoisonneacutees au monoxyde de carbone
en tentant de remeacutedier agrave ce problegraveme par des geacuteneacuterateurs au diesel On a compteacute plus de
2
six milliards de dollars de deacutegacircts mateacuteriels A lrsquoorigine de cette panne une paralysie totale
provoqueacutee par deux logiciels chargeacutes du controcircle de la production qui essayaient de modifier
le mecircme fichier simultaneacutement [25 3 16 29]
Mentionnons eacutegalement des centaines drsquoaccidents de la route meurtriers survenus entre 2009
et 2011 et dont les victimes eacutetaient les proprieacutetaires de la Lexus ES350 du constructeur Toyota
Les conducteurs perdaient la maicirctrise du veacutehicule une fois qursquoil atteignait la vitesse de 150
kmh puisque ce seuil entraicircnait la deacutesactivation de la peacutedale de frein Durant deux anneacutees les
chauffeurs sont accuseacutes par Toyota de confondre les peacutedales de frein et drsquoacceacuteleacuteration alors
qursquoune expertise finit par reacuteveacuteler une deacutefaillance dans lrsquoordinateur de bord Les pertes sont
estimeacutees dans ce cas agrave 24 milliards de dollars [32 28]
Parmi les bugs informatiques les plus meurtriers on compte eacutegalement un dysfonctionnement
en 1987 de la machine de radiotheacuterapie Therac 25 chargeacutee drsquoadministrer aux patients la
quantiteacute de radioactiviteacute qui leur est prescrite Agrave certaines occasions la machine leur donne
vingt fois la dose mortelle occasionnant de ce fait la blessure drsquoun patient et la mort de
cinq autres Le logiciel destineacute agrave veiller au bon positionnement et agrave la preacutesence de la plaque
meacutetallique censeacutee recevoir le rayon pour le filtrer et le concentrer a malheureusement failli agrave
son rocircle [14]
Tous ces exemples sont des bugs aux conseacutequences catastrophiques Heureusement tous les
bugs ne sont pas aussi deacutevastateurs mais ils peuvent neacuteanmoins srsquoaveacuterer nuisibles et reacutepandus
Crsquoest le cas drsquoun type de bug auquel les informaticiens font face agrave chaque instant agrave savoir les
bugs de mise en page dans les interfaces des applications web qui se trouvent agrave lrsquoorigine des
problegravemes drsquoaffichage rencontreacutes quotidiennement dans les interfaces web Agrave cet eacutegard des
chiffres datant de 2015 lieacutes agrave Internet donnent matiegravere agrave reacuteflexion Le reacuteseau compte plus de
trois milliards drsquointernautes dont deux milliards sont inscrits sur les reacuteseaux sociaux Plus de
3
huit cent mille nouveaux sites Internet sont mis en ligne chaque jour [15] [4] Par conseacutequent
le nombre drsquoutilisateurs des applications web est consideacuterable et le nombre de personnes
toucheacutees par les bugs drsquointerfaces reacutesultant de ces applications est eacutenorme Lrsquoenjeu de ce fait
est tregraves grand sur tous les plans
La bonne conduite drsquoune application web exige une bonne apparence visuelle des pages web
sans aucune deacutefaillance drsquoaffichage facilitant ainsi lrsquoutilisation de lrsquoapplication et offrant un
meilleur service agrave lrsquoutilisateur Trois types de problegravemes drsquoaffichage sont releveacutes un premier
type qualifieacute de non gecircnant tel qursquoun deacutebordement drsquoun paragraphe de sa bordure ou un
problegraveme drsquoalignement ou mecircme une sorte de caractegravere speacutecial mal afficheacute (mojibake) Un
deuxiegraveme type qualifieacute de gecircnant telle qursquoune image deacuteplaceacutee qui couvre un paragraphe ou
une autre partie de la page
Par contre le troisiegraveme type est plus grave et peut conduire agrave un blocage de lrsquoapplication dont
les effets risquent drsquoecirctre seacuterieux compromettant la fonctionnaliteacute de lrsquointerface utilisateur Un
4
exemple de bug qui affecte la fonctionnaliteacute de lrsquoapplication Le mauvais fonctionnement des
boutons de nombreuses applications montrent des eacuteleacutements superposeacutes qui se comportent
comme des laquo pop-ups raquo dans la fenecirctre Cependant dans un certain nombre de cas les
boutons de ces fenecirctres sont inopeacuterants cliquer dessus plusieurs fois ne produit aucun effet
Ce problegraveme a eacuteteacute observeacute dans des sites aussi varieacutes qursquoAmerican Airlines Dropbox et
BitBucket Dans certains cas lrsquoutilisateur est effectivement bloqueacute dans la fenecirctre contextuelle
ou la page qui contient le bouton et ne peut pas continuer sans forcer un rechargement complet
du document
Cependant les travaux visant agrave reacutesoudre les problegravemes drsquointerface se font tregraves rares Halleacute et al
[51] sont parmi les premiers agrave srsquointeacuteresser agrave ce genre de problegraveme Mahajan et Halfond [58]
ont abordeacute la probleacutematique en proposant une approche baseacutee sur la vision par ordinateur et
le traitement drsquoimages Walsh et al [74 72] ont eacutegalement traiteacute ce genre de bugs dans les
applications dites responsives (responsive web design)
Deux cateacutegories drsquoutilisateurs sont confronteacutees agrave ces types de problegravemes lrsquoune repreacutesente
les speacutecialistes du domaine (les informaticiens) chez lesquels ces types de problegravemes peuvent
trouver leurs solutions apregraves un travail laborieux Lrsquoautre repreacutesente le grand public pour lequel
le deuxiegraveme et le troisiegraveme type de problegraveme constituent des contraintes pour lrsquoexploitation de
la page car la solution dans ce cas exige certaines connaissances (lrsquooutil le langage etc) qui
eacutechappent geacuteneacuteralement au grand public Ce dernier forme la majoriteacute des utilisateurs De ce
fait il est neacutecessaire de lui trouver une solution lui permettant drsquoutiliser les sites web dans
les meilleures conditions possibles Il doit avoir tout simplement sur son eacutecran une interface
correcte sans aucun bug pour qursquoil ne soit pas obliger agrave recourir agrave une technique de correction
qui le deacutepasse Drsquoautant plus que les applications web connaissent une eacutevolution rapide et
commencent agrave conqueacuterir plusieurs domaines (commerce eacutelectronique eacuteducation loisir etc)
et mecircme agrave ecirctre utiliseacutees dans des opeacuterations sensibles telles que les transactions moneacutetaires
5
via internet Ce qui fait drsquoeux des programmes tregraves complexes dynamiques et interactifs En
plus de la rareteacute des meacutethodes de deacutetection de ces bugs pire encore presque rien nrsquoa eacuteteacute
fait pour donner un feedback agrave lrsquoutilisateur Lorsqursquoun bug est trouveacute les solutions actuelles
ne font que retourner laquo vraifaux raquo Dans ce travail nous proposons une nouvelle approche
permettant dans une premiegravere eacutetape de deacutetecter automatiquement les diffeacuterents types de bugs
drsquointerfaces et de les corriger automatiquement dans une deuxiegraveme eacutetape Il srsquoagit drsquoune
approche geacuteneacuterique de localisation de deacutefauts baseacutee sur le concept de reacuteparation
Les objectifs et contributions de cette thegravese sont
1 Proposer un langage pour speacutecifier le contenu attendu drsquoune interface web
2 Deacutecrire un algorithme permettant de veacuterifier automatiquement qursquoune speacutecification est
respecteacutee
3 Deacutecrire une meacutethode permettant de fournir un verdict deacutetailleacute et utile lors drsquoune violation
Cette thegravese comporte six chapitres Le chapitre 1 est deacutedieacute agrave une vue globale sur les notions de
base relatives au web Les diffeacuterents types de bugs ainsi que des exemples reacuteels de chacun de
ces types sont preacutesenteacutes au chapitre 2 Le chapitre 3 est consacreacute aux travaux connexes sur la
deacutetection des bugs drsquointerfaces dans les applications web agrave quelques exemples drsquoapproches et
drsquooutils de deacutetection pour lesquels certains points faibles sont identifieacutes
Dans le chapitre 4 on retrouve lrsquoensemble des informations speacutecifiques agrave lrsquooutil Cornipickle
conccedilu et utiliseacute dans la deacutetection des bugs Ceci inclut la syntaxe du langage et son utili-
sation pour exprimer des proprieacuteteacutes ainsi que les deacutetails de son impleacutementation (objectifs
de conception architecture et sceacutenario typique) Le chapitre 5 est reacuteserveacute agrave lrsquoutilisation de
Cornipickle en combinaison avec un robot drsquoexploration dynamique (crawler) pour deacutetecter
efficacement les bugs comportementaux dans les RIA (Rich Internet Applications) Le dernier
6
chapitre quant agrave lui preacutesente deux meacutecanismes par lesquels un verdict vraifaux peut ecirctre
enrichi drsquoinformation suppleacutementaire pour le deacuteveloppeur Une conclusion geacuteneacuterale mettant
en eacutevidence lrsquointeacuterecirct du travail reacutealiseacute et lrsquoimportance des reacutesultats obtenus clocircture la thegravese
Il est agrave signaler que les contributions preacutesenteacutees dans cette thegravese ont fait lrsquoobjet de publications
dont je suis coauteur
Un premier article dont la contribution consiste en la formalisation de la seacutemantique de
lrsquointerpreacuteteur Cornipickle (section 33 de lrsquoarticle) et la preacutesentation du concept des teacutemoins
(section 43) Cette contribution correspond au chapitre 4 de la thegravese
1 Sylvain Halleacute Nicolas Bergeron Francis Gueacuterin Gabriel Le Breton Oussama Be-
roual Declarative layout constraints for testing web applications J Log Algebr Meth
Program Elsevier 85 (5) 737-758 (2016) [51]
Un deuxiegraveme article preacutesentant le meacutecanisme de transformations (feedback enrichi pour
lrsquoutilisateur) ce qui correspond au chapitre 6
1 Sylvain Halleacute Oussama Beroual Fault Localization in Web Applications via Model
Finding CRESTETAPS 2016 55-67 Elsevier Electronic Notes in Computer Science
(2016) [52]
Un troisiegraveme article sur lrsquoautomatisation des tests avec inteacutegration agrave un crawler ce qui
correspond au chapitre 5
1 Oussama Beroual Francis Gueacuterin Sylvain Halleacute Searching for Behavioural Bugs with
Stateful Test Oracles in Web Crawlers SBSTICSE 2017 ACM 7-13(2017) [38]
CHAPITRE 1
NOTIONS GEacuteNEacuteRALES SUR LE WEB
Deux termes sont drsquousage confondus par le public non averti le terme laquo web raquo et le terme
laquo Internet raquo Ce chapitre est destineacute agrave lever cette confusion puis agrave mettre lrsquoaccent sur la
majoriteacute des aspects drsquoune application web piegravece maicirctresse de notre recherche
11 LE FONCTIONNEMENT DU WEB
Une diffeacuterence de taille entre laquo Internet raquo et laquo web raquo est agrave noter Internet est un reacuteseau composeacute
drsquoune multitude de reacuteseaux connecteacutes entre eux Chacun de ces reacuteseaux est composeacute drsquoun
ensemble drsquoeacutequipements (fibres optiques etc) constituant un support physique drsquoinformation
Le web quant agrave lui est un systegraveme de fichiers veacutehiculeacutes par des serveurs Il repreacutesente le
contenu principal drsquoInternet agrave cocircteacute drsquoautres contenus tels que le courrier eacutelectronique la
messagerie etc Il nrsquoest donc qursquoune des applications drsquoInternet
Un site web est un contenu sur Internet Ce contenu nrsquoest rien drsquoautre qursquoun ensemble de
fichiers (HTML CSS JavaScript etc) heacutebergeacutes sur un serveur Selon leur meacutecanisme de
fonctionnement deux types de site sont distingueacutes les sites statiques dont le contenu est inva-
riable et les sites dynamiques dont le contenu est variable Les premiers ne sont modifiables
8
que par leurs proprieacutetaires alors que les seconds sont modifiables par des utilisateurs autres
que leurs proprieacutetaires La reacutealisation de chacun de ces sites fait appel agrave des technologies bien
deacutetermineacutees telles que HTML CSS et JavaScript
Les acteurs principaux dans le fonctionnement du web sont les clients repreacutesenteacutes par des
navigateurs tels que Firefox Internet Explorer Chrome et Safari et les serveurs repreacutesenteacutes
par les machines abritant les sites web ougrave les fichiers sont stockeacutes Chaque serveur est
identifieacute sur un reacuteseau par son adresse IP (Internet Protocol) et chaque page web est associeacutee
agrave une adresse URL (Uniform Resource Locator ou laquo localisateur uniforme de ressource raquo)
caracteacuteriseacutee par un contenu Une demande drsquoune page web agrave un serveur correspond donc agrave
une demande drsquoun contenu La communication entre les clients et les serveurs est assureacutee
par un protocole appeleacute laquo HTTP raquo (HyperText Transfer Protocol ou laquo protocole de transfert
hypertexte raquo) via lequel les requecirctes sont formuleacutees par les navigateurs aux serveurs [37]
HTTP est donc la langue de conversation entre le navigateur et le serveur La conversation
se fait selon le principe de laquo requecircte-reacuteponse raquo La formulation drsquoune requecircte HTTP par le
navigateur est suivie par une reacuteponse HTTP du serveur apregraves lrsquoavoir deacutecodeacutee et eacutetudieacutee En plus
de la ligne de requecircte deacutefinissant le document demandeacute la meacutethode appliqueacutee et le protocole
utiliseacute une requecircte est composeacutee de deux ensembles de lignes des lignes facultatives et des
lignes optionnelles Les premiegraveres sont les champs drsquoen-tecircte de la requecircte et sont chargeacutees
de fournir des informations suppleacutementaires sur la requecircte ou le client (type de navigateur
systegraveme drsquoexploitation etc) Les secondes forment le corps de la requecircte et sont chargeacutees lors
de lrsquoenvoi de donneacutees au serveur de permettre un envoi de donneacutees par une meacutethode speacutecifique
(lrsquoenvoi de donneacutees au serveur par un formulaire par une meacutethode POST par exemple)
Une requecircte de type GET nomme lrsquoURL agrave reacutecupeacuterer httpuqacca par exemple dans la
figure 11 Le navigateur srsquoidentifie dans lrsquoen-tecircte User-Agent et indique les types de reacuteponses
9
GET HTTP11Host wwwuqaccaConnection keep-aliveUser-Agent Mozilla50 (Windows NT 61 Win64 x64)
AppleWebKit53736 (KHTML like Gecko) Chrome6103163100Safari53736
Upgrade-Insecure-Requests 1Accept texthtmlapplicationxmlq=09Accept-Encoding gzip deflateAccept-Language fr-FRfrq=08en-USq=06enq=04Cookie PHPSESSID=tphmk53fee883355e4eq24dmb5
Upgrade-Insecure-Requests 1Connection keep-aliveHost wwwuqacca
Figure 11 ndash Exemple drsquoune requecircte HTTP
qursquoil accepte dans lrsquoen-tecircte Accept et Accept-Encoding Lrsquoen-tecircte Connection demande
au serveur de garder la connexion TCP ouverte pour drsquoautres requecirctes La requecircte contient
eacutegalement les cookies que le navigateur conserve pour ce domaine Les cookies sont des paires
cleacute-valeur qui suivent lrsquoeacutetat drsquoun site web entre diffeacuterentes demandes de pages Ainsi les
cookies stockent le nom de lrsquoutilisateur connecteacute un numeacutero secret attribueacute agrave lrsquoutilisateur par
le serveur certains paramegravetres de lrsquoutilisateur etc Les cookies sont stockeacutes dans un fichier
texte sur le client et envoyeacutes au serveur agrave chaque demande
La reacuteponse du serveur sur la requecircte de la figure 11 geacuteneacutereacutee et renvoyeacutee est montreacutee dans
figure 12
Lrsquoen-tecircte qui deacutefinit Content-Type en texthtml indique au navigateur de rendre le contenu
de la reacuteponse [13] au format HTML au lieu de le teacuteleacutecharger en tant que fichier Le navigateur
utilise lrsquoen-tecircte pour deacutecider comment interpreacuteter la reacuteponse mais tient eacutegalement compte
drsquoautres facteurs tels que lrsquoextension de lrsquoURL
10
HTTP10 200 OKDate Sat 11 Nov 2017 190323 GMTServer Apache2222 (Unix) mod_ssl2222 OpenSSL101e-fipsX-Powered-By PHP5217Access-Control-Allow-Origin httpswprodluqaccaExpires Thu 19 Nov 1981 085200 GMTCache-Control no-store no-cache must-revalidatePragma no-cacheContent-Type texthtmlX-Cache MISS from w3repuqaccaX-Cache-Lookup MISS from w3repuqacca80Via 10 w3repuqacca (squid3123)Connection close
Figure 12 ndash Exemple drsquoune reacuteponse HTTP
12 LE LANGAGE HTML
Nous allons nous limiter dans ce qui suit agrave la preacutesentation de lrsquoessentiel des eacuteleacutements de base
relatifs agrave ces trois langages agrave savoir les balises pour le HTML les seacutelecteurs pour le CSS et
quelques notions de base sur JavaScript
Le langage HTML laquo HyperText Markup Language raquo en anglais ou laquo langage de balisage
hypertexte raquo en franccedilais ou encore laquo langage de marquage hypertexte raquo dont la creacuteation revient
agrave 1991 est un langage de description de document pouvant ecirctre eacutecrit avec un simple eacutediteur
de texte sans une application speacutecifique et servant agrave produire (sur Internet) des pages Web
drsquoune grande varieacuteteacute de contenus de mise en forme ou drsquoanimations et agrave inseacuterer diffeacuterents
types drsquoeacuteleacutements(texte des liens des images etc) Il permet aussi de deacutesigner au navigateur
certaines speacutecificiteacutes telle que la consideacuteration drsquoun texte comme un paragraphe ou un titre
11
121 STRUCTURE DrsquoUN DOCUMENT
La structure drsquoun document HTML doit satisfaire un scheacutema preacutecis et comprendre un ensemble
de balises speacuteciales essentielles pour tout document HTML Les eacuteleacutements composants la
structure drsquoun document HTML sont les suivants
Doctype Un document HTML deacutebute toujours par le soulignement de la nature du document
crsquoest agrave dire le langage utiliseacute (HTML) en faisant appel agrave la balise lt DOCTYPE htmlgt
Lrsquoeacuteleacutement lthtmlgt Lrsquoeacuteleacutement html comprend deux balises lthtmlgt et lthtmlgt Il deacutefinit
lrsquounique racine du document HTML Tous les autres eacuteleacutements doivent y ecirctre placeacutes
Lrsquoeacuteleacutement ltheadgt Cet eacuteleacutement repreacutesente lrsquoen-tecircte du document et renferme exclusivement
des meacuteta-donneacutees (titre de la page type drsquoencodage utiliseacute etc) exploiteacutees par les navigateurs
pour ameacuteliorer lrsquoergonomie de la page
Lrsquoeacuteleacutement ltbodygt Lrsquoeacuteleacutement body repreacutesente le corps du document Il est toujours placeacute
apregraves lrsquoen-tecircte et contient tout le contenu laquo visible raquo de la page les textes images liens
videacuteos etc
Lrsquoeacuteleacutement lttitlegt La structure srsquoachegraveve par une des meacuteta-donneacutees utiliseacutees par le navigateur
qui constitue le seul eacuteleacutement HTML obligatoire le titre du document placeacute agrave lrsquointeacuterieur de
lrsquoeacuteleacutement head
Voici le document HTML formel le plus simple qursquoon puisse eacutecrire
12
ltDOCTYPE htmlgtlthtmlgt
ltheadgtlttitlegtTitre de la pagelttitlegt
ltheadgtltbodygt
lth1gtUn grand titrelth1gtltpgtUn paragraphltpgt
ltbodygtlthtmlgt
Figure 13 ndash Un exemple simple de page HTML contenant un grand titre et un paragraphe
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtUn document HTMLlttitlegtltheadgtltbodygtlt-- Du contenu pour lrsquoutilisateur ici --gtltbodygtlthtmlgt
Le code HTML dans la figure 13 par exemple indique que lrsquoon souhaite creacuteer un grand titre
(gracircce agrave lrsquoeacuteleacutement h1) et un paragraphe (gracircce agrave lrsquoeacuteleacutement p)
122 VERSIONS DU HTML
Le Web a connu ces deux derniegraveres deacutecennies une eacutevolution extraordinaire En effet lrsquoavanceacutee
technologique a donneacute lieu agrave une ameacutelioration des performances des composants physiques
et une augmentation de la vitesse de connexion entraicircnant par conseacutequent une eacutevolution
13
remarquable des sites Web A leur tour les langages tels que le HTML et le CSS ont eacutegalement
connu une eacutevolution consideacuterable (modifications enrichissements etc) drsquoougrave lrsquoapparition de
nouvelles versions de ces langages bien que lrsquoeacutevolution nrsquoa pas eacuteteacute lineacuteaire ni continue pour
lrsquoutilisateur final Les nouvelles versions sont doteacutees chacune de nouvelles fonctionnaliteacutes et
change parfois totalement la syntaxe du langage La premiegravere version de HTML lrsquoHTML1
a vu le jour en 1991 De nombreuses ameacuteliorations apporteacutees par la suite par le creacuteateur du
HTML jugeacutees inteacuteressantes et importantes lrsquoont conduit en 1994 agrave partager publiquement la
nouvelle version de son langage le HTML2 Drsquoautres versions se sont succeacutedeacutees HTML2
(1995) HTML32 (janvier 1997) HTML4 modifieacutee agrave plusieurs reprises (1997 1998 1999
2000) HTML5 (2014) HTML51 (2016) Parmi toutes ces versions la plus stable celle qui
offre de nouvelles fonctionnaliteacutes et ouvre de nouvelles possibiliteacutes inteacuteressantes est la plus
reacutecente agrave savoir HTML51
123 EacuteLEacuteMENTS DE BASE EN HTML
Le fonctionnement du HTML srsquoappuie sur la notion drsquoeacuteleacutements Ces derniers ont pour rocircle
de structurer du contenu pour donner du sens aux diffeacuterents objets de ce contenu Ils sont
constitueacutes de balises renfermant des attributs et du contenu entre elles
Les balises en HTML Le nombre de balises constituant le HTML est environ 140 Elles
servent agrave fournir au navigateur des indications sur le sens drsquoun eacuteleacutement son interpreacutetation ou
son affichage en plus drsquoautres indications telles que la gestion des formulaires en ligne lrsquoajout
des fichiers multimeacutedias etc On distingue plusieurs types de balises chargeacutee chacune drsquoune
fonction bien deacutetermineacutee bien que certaines nrsquoont de fonction que de seacuteparer des sections drsquoun
document Parmi ces fonctions deacutefinir des titres creacuteer des paragraphes creacuteer des liens vers des
ressources externes inteacutegrer une image dans un document HTML creacuteer des listes Les balises
14
suivantes sont donneacutees agrave titre drsquoexemple ltpgt lth1gt ltimggt ltligt ltagt Les eacuteleacutements
sont constitueacutes geacuteneacuteralement drsquoune paire de balises (ouvrante et fermante) et drsquoun contenu
entre les balises et exceptionnellement drsquoune balise unique dite dans ce cas laquo orpheline raquo
Une balise fermante doit avoir le mecircme nom que la balise ouvrante correspondante (notez la
preacutesence du slash (barre oblique))
Les balises laquo auto fermantes raquo (ou balises vides) Certaines balises sont deacutepourvues de texte
du fait qursquoelles sont ouvrantes et fermantes en mecircme temps les balises AUTO FERMANTES
sont soit des balises de type BLOC (exemple lthr gt) des balises EN LIGNE (exemple
ltimg gt)
Les attributs en HTML Les attributs se placent dans la balise ouvrante drsquoun eacuteleacutement et
possegravedent toujours une valeur (parfois implicite) Ils viennent apporter plus de deacutetails sur les
eacuteleacutements Par exemple lrsquoattribut href (hypertexte reacutefeacuterence) va offrir lrsquoadresse (la valeur) de
la page du lien agrave lrsquoeacuteleacutement ltagt (pour anchor) chargeacute de la creacuteation des liens vers drsquoautres sites
ou drsquoautres pages
Lrsquoeacuteleacutement ltimggt constitueacute drsquoune seule balise orpheline chargeacute drsquoinseacuterer une image dans
une page HTML a besoin de deux attributs src et alt Le premier src assure le nom et
lrsquoemplacement de lrsquoimage (la valeur) alors que lrsquoattribut alt se charge de lrsquoaffichage drsquoun texte
alternatif agrave une indisponibiliteacute de lrsquoimage
Notez bien que les balises et les attributs ne seront jamais afficheacutes par le navigateur il va srsquoen
servir drsquoindication pour justement savoir ce qursquoil doit afficher (un paragraphe un titre un lien
une image etc)
15
13 LES CASCADING STYLESHEETS (CSS)
Le CSS laquo Cascading StyleSheets raquo en anglais ou laquo feuilles de styles en cascade raquo en franccedilais est
un langage informatique apparu en 1996 voueacute agrave la mise en forme du contenu des documents
HTML et XML moyennant des styles pour deacutefinir la taille la couleur ou lrsquoalignement du texte
afin drsquoagreacutementer le reacutesultat visuel final de ce contenu Il est utiliseacute dans la conception de
sites web Le code ci-dessous par exemple indique que les titres h1 eacutecrits en HTML doivent
avoir une couleur verte et une taille de 20px tandis que les paragraphes doivent ecirctre noir et
souligneacutes
h1 color greenfont-size 20px
p color blacktext-decoration underline
Le CSS est donc un autre langage du web venant compleacuteter le HTML Il permet la mise en
page drsquoun contenu et le changement de son apparence en lui appliquant des styles (choisir
la couleur du texte seacutelectionner la police utiliseacutee deacutefinir la taille du texte les bordures le
fond) Lrsquoapparition du HTML a devanceacute lrsquoapparition du CSS de cinq anneacutees peacuteriode dans
laquelle la mise en page eacutetait effectueacutee par le HTML qui consacrait des balises agrave cette fin
telle que la balise ltfont color=aab1c3gt deacutefinissant la couleur du texte par exemple
Le langage CSS est venu reacutepondre agrave la complexiteacute qursquoont connu les pages HTML avec une
augmentation remarquable des balises entre autres conduisant agrave une mise agrave jour des pages
web de plus en plus complexe Agrave lrsquoinstar du HTML le CSS est passeacute par plusieurs versions
16
les plus importantes sont CSS1 CSS20 CSS21 et CSS3
Eacutecriture du code CSS Le code CSS peut ecirctre eacutecrit agrave trois endroits distincts
1 Dans un Lrsquoeacuteleacutement HTML ltstylegt
2 Dans la balise ouvrante des eacuteleacutements HTML(meacutethode la moins recommandeacutee)
3 Dans un fichier CSS seacutepareacute (meacutethode la plus recommandeacutee)
131 PROPRIEacuteTEacuteS ET SEacuteLECTEURS CSS
Les proprieacuteteacutes CSS permettent de choisir quel(s) aspect(s) (ou laquo styles raquo) drsquoun eacuteleacutement HTML
que lrsquoon souhaite modifier
Lrsquoapplication drsquoun style agrave un ou plusieurs eacuteleacutements HTML signifie leurs seacutelections au preacutealable
pour les soumettre agrave un style particulier Lrsquointervention drsquoun seacutelecteur est donc neacutecessaire Le
CSS est fondeacute sur un ensemble de regravegles les seacutelecteurs sont la premiegravere partie drsquoune regravegle CSS
Crsquoest une syntaxe chargeacutee drsquoidentifier les eacuteleacutements du document auxquels la regravegle est deacutedieacutee
(appliqueacutee) Depuis son arriveacutee (1996) le CSS a speacutecifieacute un certain nombre de seacutelecteurs tregraves
accepteacutes de nos jours par les diffeacuterents navigateurs les plus freacutequemment utiliseacutes sont
Les seacutelecteurs de type Ce seacutelecteur cible lrsquoeacuteleacutement du document agrave styler en se basant sur
le nom de lrsquoeacuteleacutement Il doit correspondre dans ce cas au nom de lrsquoeacuteleacutement Exemple pour
mettre en bleu le texte des titres de niveau 1 le seacutelecteur sera h1
h1 color blue
17
Les seacutelecteurs de classe Ce seacutelecteur permet de cibler les eacuteleacutements en fonction de la valeur
de leur attribut class Il permet donc de seacutelectionner tous les eacuteleacutements ayant une certaine classe
Preacuteceacuteder le nom de la classe par un point () suffit pour obtenir le seacutelecteur correspondant
agrave cette classe Exemple la classe ltimportantgt est attribueacutee agrave tous les eacuteleacutements jugeacutes
importants Il suffit de deacutefinir dans le fichier CSS une regravegle stipulant que le texte de tous les
eacuteleacutements posseacutedant la classe Important soit eacutecrit en rouge
ltp class=ImportantgtCoucoultpgt
Important
color red
Les seacutelecteurs drsquoidentifiant Ce seacutelecteur permet de cibler un eacuteleacutement drsquoun document en
fonction de la valeur de son attribut ltidgt Dans un document il ne doit y avoir qursquoun seul
identifiant donneacute agrave lrsquoeacuteleacutement Preacuteceacutedeacute le nom de lrsquoidentifiant par un diegravese () suffit pour
obtenir le seacutelecteur correspondant agrave cet identifiant Exemple Un identifiant Menu est utiliseacute
pour repeacuterer notre menu dans le document Il suffit de deacutefinir dans le fichier CSS une regravegle
indiquant que notre menu ne soit pas afficheacute
ltdiv id=Menugtltdivgt
Menu
display none
18
Le seacutelecteur universel laquo raquo Ce seacutelecteur permet de cibler tous les eacuteleacutements drsquoun document
drsquoougrave lrsquoappellation de seacutelecteur universel Il existe eacutegalement une variante pour ne cibler qursquoun
seul eacuteleacutement
Regroupements des seacutelecteurs Une autre maniegravere de proceacuteder consiste en la reacuteduction de
taille du fichier CSS en appliquant une mecircme regravegle agrave plusieurs seacutelecteurs Ces derniers sont
dans ce cas seacutepareacutes par une virgule () Exemple les eacuteleacutements posseacutedant la classe Important
et les titres lth2gt sont eacutecrits en rouge
Important h2
color red
14 JAVASCRIPT
JavaScript est un langage de programmation de scripts utiliseacute surtout dans les pages web
interactives ainsi que pour les serveurs Il a eacuteteacute creacutee par Brendan Eich en 1995 en lrsquoespace de
dix jours suite agrave une demande formuleacutee par la Netscape Communications Corporation Les
bases du langage et ses principales interfaces sont fournies par des objets ce qui fait de lui un
langage orienteacute objet agrave prototype Les objets en question ne sont pas des instances de classes
Ils sont eacutequipeacutes chacun de constructeurs permettant de creacuteer leurs proprieacuteteacutes et notamment le
prototypage qui sert agrave creacuteer des objets heacuteritiers personnaliseacutes JavaScript dont les fonctions
sont des objets de premiegravere classe supporte le paradigme objet impeacuteratif et fonctionnel
Depuis sa creacuteation JavaScript a connu drsquoinnombrables modifications Il a eacuteteacute standardiseacute
en 1997 par laquo Ecma International raquo donnant naissance agrave la premiegravere eacutedition du standard
19
laquo ECMA-262 raquo la deuxiegraveme eacutedition du standard laquo ECMA-262 raquo a vu le jour en 1998 suite
agrave des changements reacutedactionnels apporteacutes au standard laquo ECMA-262 raquo pour le conformer au
standard international laquo ISOCEI 16262 raquo Des ameacuteliorations(dans la manipulation des chaicircnes
de caractegraveres dans les instructions de controcircle etc) introduites dans la deuxiegraveme eacutedition ont
donneacute lieu en 1999 agrave la publication de la troisiegraveme eacutedition du standard ECMA-262 Depuis la
troisiegraveme eacutedition les eacuteditions se sont succeacutedeacutees pour arriver actuellement agrave la huitiegraveme eacutedition
Les diffeacuterentes eacuteditions apparues ont chacune participeacute avec un plus dans le deacuteveloppement
des performances du langage
La plupart des langages de programmation ont des fonctionnaliteacutes de base communes Lrsquouti-
lisation de JavaScript neacutecessite la connaissance de ces bases pour mieux comprendre son
fonctionnement
Variables Les variables sont des conteneurs servant agrave stocker temporairement des informa-
tions Une variable a le pouvoir de varier autrement dit de pouvoir stocker diffeacuterentes valeurs
dans le temps en laquo eacutecrasant raquo sa valeur preacuteceacutedente Une variable est deacuteclareacutee au commencement
avec le mot-cleacute let suivi du nom qursquoon souhaite utiliser pour la variable
Un certain nombre de regravegles sont agrave consideacuterer en JavaScript
1 les lignes de code doivent terminer par un point-virgule pour indiquer que crsquoest la
fin de la ligne Lrsquoomission de ces points-virgules peut conduire agrave des comportements
inattendus voire des erreurs
2 Nrsquoimporte quel nom peut ecirctre (quasiment) utiliseacute pour nommer une variable Il y a
cependant quelques restrictions sur ces noms
3 Eacuteviter la casse JavaScript y est sensible cela veut dire que maVariable sera consideacutereacute
comme un nom diffeacuterent de mavariable Lrsquoapparition des problegravemes sur les noms de
20
variables dans le code implique la veacuterification de la casse utiliseacutee
4 Avec les versions reacutecentes de JavaScript il est conseilleacute drsquoutiliser le mot-cleacute let Cepen-
dant des variables deacuteclareacutees avec le mot-cleacute var sont parfois rencontreacutees Ce dernier est
utiliseacute lorsque notre code doit supporter des navigateurs anciens (IE lt 11) let nrsquoeacutetant
pas supporteacute dans ce cas Une fois une variable est deacuteclareacutee on lui donne une valeur
maVariable = rsquooussrsquo
Pour utiliser la valeur plus loin dans le code il suffit de faire appel agrave la variable en utilisant
son nom maVariable Lorsque on creacutee une variable et qursquoon lui donne une valeur cela
peut se faire sur une seule ligne let maVariable = rsquooussrsquo Une fois qursquoon a donneacute une
valeur agrave une variable on peut la changer plus loin
let maVariable = rsquooussrsquomaVariable = rsquoSylvainrsquo
Les variables sont reacuteparties en diffeacuterents types de donneacutees et ont chacune une fonction Parmi
ces variables on a la chaicircne de caractegraveres le nombre le Booleacuteen le tableau lrsquoobjetetc Les
variables sont indispensables agrave la programmation Si les valeurs sont statiques rien ne pourrait
se faire Par exemple on ne pourrait pas personnaliser un message de bienvenue ou changer
lrsquoimage afficheacutee dans une galerie
Les opeacuterateurs Un opeacuterateur est un symbole matheacutematique qui produit un reacutesultat en
fonction de plusieurs valeurs (la plupart du temps on utilise deux valeurs et un opeacuterateur)
Parmi les opeacuterateurs les plus simples on a lrsquoopeacuterateur drsquoaffectation lrsquoopeacuterateur drsquoidentiteacute
lrsquoopeacuterateur de neacutegation lrsquoopeacuterateur drsquoineacutegaliteacute
Il y a plein drsquoautres opeacuterateurs mais on srsquoen tiendra agrave ceux-lagrave
Il est agrave noter que lrsquoutilisation de diffeacuterents types de donneacutees avec un mecircme opeacuterateur faussera
21
le reacutesultat obtenu le reacutesultat obtenu par70 + 12 nrsquoest pas le mecircme que celui obtenu par
70 + 12 le deuxiegraveme reacutesultat est le bon car les nombres entoureacutes de guillemets sont donc
consideacutereacutes comme des chaicircnes de caractegraveres
Les structures conditionnelles Les structures conditionnelles sont des eacuteleacutements du code qui
permettent de tester si une expression est vraie ou non et drsquoexeacutecuter des instructions diffeacuterentes
selon le reacutesultat La structure conditionnelle utiliseacutee la plus freacutequemment est if else
Par exemple
let parfumGlace = rsquosorbet de fraisersquoif (parfumGlace === rsquosorbet de fraisersquo)
alert(Jrsquoadore le sorbet de fraise ) else
alert(Jrsquoaurai preacutefeacutereacute un sorbet de fraise)
Le test agrave reacutealiseacute est contenue dans if ( ) Il consiste en une comparaison de la variable
parfumGlace avec la chaicircne de caractegraveres laquo sorbet de fraise raquo via lrsquoopeacuterateur drsquoidentiteacute pour
veacuterifier leur eacutegaliteacute Si cette comparaison renvoie true le premier bloc de code sera exeacutecuteacute
Sinon crsquoest le code du second bloc celui preacutesent apregraves else qui sera exeacutecuteacute
Les fonctions Les fonctions sont chargeacutees drsquoorganiser les fonctionnaliteacutes agrave reacuteutiliser Par
exemple au lieu drsquoexeacutecuter deux fois la mecircme action plutocirct que de recopier le code la
fonction est eacutecrite une fois puis utiliser aux deux endroits souhaiteacutes
let maVariable = documentquerySelector(rsquoh1rsquo)alert(rsquoSalut rsquo)
Ces fonctions (querySelector et alert) sont disponibles dans le navigateur Elles ressemblent
agrave un nom de variable suivi de parenthegraveses et utilisent des arguments dans leurs calculs Les
22
arguments sont placeacutes entre les parenthegraveses seacutepareacutes par des virgules srsquoil y en a plusieurs Par
exemple la fonction alert() fait apparaicirctre une fenecirctre de pop-up dans la fenecirctre du navigateur
Un argument est utiliseacute pour indiquer agrave la fonction le contenu qursquoon deacutesire eacutecrire dans cette
fenecirctre En plus des fonctions deacutejagrave existantes drsquoautres fonctions peuvent ecirctre deacutefinies par
nous-mecircmes Par exemple fonction toute simple qui considegravere deux arguments et renvoie le
reacutesultat de la multiplication
function multiplier(num1num2) let reacutesultat = num1 num2return reacutesultat
Avant une utilisation reacutepeacuteteacutee de cette fonction elle doit ecirctre deacuteclareacutee dans la console
multiplier(47)multiplier(2020)multiplier(053)
Lrsquoinstruction return indique au navigateur qursquoil faut renvoyer la variable reacutesultat en dehors de
la fonction afin qursquoelle puisse ecirctre reacuteutiliseacutee par ailleurs Cette instruction est neacutecessaire car
les variables deacutefinies agrave lrsquointeacuterieur des fonctions sont uniquement disponibles agrave lrsquointeacuterieur de
ces fonctions Crsquoest ce qursquoon appelle une porteacutee
Les eacuteveacutenements Un site web vraiment interactif est caracteacuteriseacute par des eacuteveacutenements Les
eacuteveacutenements sont des structures de code agrave lrsquoeacutecoute du navigateur permettant de deacuteclencher des
actions au moindre problegraveme Lrsquoexemple concret est lrsquoeacuteveacutenement de clic qui est deacuteclencheacute
une fois lrsquoutilisateur clique sur quelque chose dans le navigateur Lrsquoexemple ci-dessous peut
donner une ideacutee sur ce que ccedila donne en pratique il suffit de saisir ces quelques lignes dans la
console puis cliquez sur la page
23
documentquerySelector(rsquohtmlrsquo)onclick = function() alert(rsquoarrecirctez de cliquerrsquo)
Les meacutethodes pour laquo attacher raquo un eacuteveacutenement agrave un eacuteleacutement sont multiples Dans cet exemple
deux paramegravetres sont deacutefinis lrsquoeacuteleacutement HTML concerneacute et un gestionnaire onclick qui
est une proprieacuteteacute eacutegale agrave une fonction anonyme (elle nrsquoa pas de nom) qui contient le code agrave
exeacutecuter quand lrsquoutilisateur clique
On pourra noter que documentquerySelector(rsquohtmlrsquo)onclick = function()
est eacutequivalent agrave
let maHTML = documentquerySelector(rsquohtmlrsquo)maHTMLonclick = function()
La premiegravere syntaxe est simplement plus courte Drsquoautres fonctionnaliteacutes peuvent srsquoajouter
aux bases en JavaScript exposeacutees
15 LE FONCTIONNEMENT INTERNE DES NAVIGATEURS WEB
Pour la peacuteriode allant de mars 2015 agrave mars 2016 la part de marcheacute des navigateurs drsquoapregraves les
statistiques de StatCounter [19] est de pregraves de 96 entre Internet Explorer Firefox Chrome
et Opera Le tableau 11 montre en pourcentage la part de chaque navigateur
24
Navigateur Part drsquoutilisation en
Chrome 5232
Internet Explorer 162
Firefox 1558
Safari 978
Opera 181
Autres 431
Tableau 11 ndash Statistiques des parts drsquoutilisation des navigateurs dans le monde entre mars 2015et mars 2016
Une ressource web eacutetant seacutelectionneacutee en faisant appel au serveur est ensuite afficheacutee par le
navigateur Celle-ci peut ecirctre un document HTML (qui est le cas geacuteneacuteral) comme elle peut
ecirctre un autre type de fichier Une URL est mobiliseacutee par lrsquoutilisateur pour la reacutecupeacuteration
de la ressource Les speacutecifications HTML et CSS qui preacutecisent au navigateur la maniegravere
drsquointerpreacuteter et drsquoafficher les fichiers HTML sont maintenues par lrsquoorganisation W3C (World
Wide Web Consortium) [12]
La structure drsquoun navigateur comprend plusieurs composants tels qursquoune interface utilisateur
le moteur du navigateur un composant reacuteseau une interface drsquoarriegravere-plan (backend UI)
un interpreacuteteur JavaScript un analyseur XML (XML parser) un composant de stockage de
donneacutees et finalement le moteur de rendu qui est la piegravece la plus importante dans cet ensemble
[49] [48] La figure 14 montre le flux entre les composants du navigateur
Avant son affichage agrave lrsquoutilisateur une page web parcourt le chemin suivant
1 La requecircte est envoyeacutee vers le serveur en utilisant lrsquointerface utilisateur qui enferme
une barre drsquoadresse des boutons preacuteceacutedent et suivant un menu de marque-page
25
des boutons drsquoactualisation et drsquoarrecirct etc La requecircte est transporteacutee via le composant
reacuteseau qui assure les appels reacuteseau telles que les requecirctes HTTP Il est doteacute drsquoune
interface indeacutependante de la plateforme et en dessous des impleacutementations pour chaque
plateforme
2 La reacuteponse est renvoyeacutee par le serveur apregraves plusieurs traitements au niveau du serveur
drsquoapplication afin de geacuteneacuterer la page demandeacutee en HTML (les deacutetails sur ces deux
eacutetapes ont eacuteteacute exposeacutes dans la section 11)
3 Le composant reacuteseau passe les donneacutees brutes reacutecupeacutereacutees agrave un autre composant qui
a comme rocircle drsquoenregistrer toutes sortes de donneacutees sur le disque dur par exemple
des cookies Il srsquoagit drsquoune couche de persistance La nouvelle speacutecification HTML
(HTML5) deacutefinit le terme laquo base de donneacutees Web raquo qui est un systegraveme complet (bien
que leacuteger) de base de donneacutees dans le navigateur
4 Les octets bruts sont transporteacutes au moteur de rendu qui est responsable de lrsquoaffichage du
contenu demandeacute agrave lrsquoeacutecran en suivant plusieurs processus drsquoanalyse sur le code HTML
et CSS Les deacutetails de ces processus drsquoanalyse sont abordeacutes dans le reste du chapitre
5 Un interpreacuteteur JavaScript est appeleacute par le moteur de rendu pour lrsquoanalyse et lrsquoexeacutecution
du code JavaScript Pareillement pour lrsquoanalyseur XML (XML parser) qui est utiliseacute
pour lrsquoanalyse des documents XML dans lrsquoarbre du DOM (Document Object Model)
Crsquoest lrsquoun des sous systegravemes les plus reacuteutilisables dans lrsquoarchitecture En fait presque
toutes les impleacutementations des navigateurs exploitent un analyseur XML existant plutocirct
que de creacuteer leur propre analyseur agrave partir de zeacutero
6ndash7 Lrsquointerface drsquoarriegravere-plan (backend UI) est destineacute agrave dessiner des widgets de base
du genre listes deacuteroulantes et fenecirctres Une interface geacuteneacuterique non speacutecifique agrave la
plateforme est preacutesenteacutee par le navigateur qui utilise drsquoautre part en dessous lrsquointerface
utilisateur du systegraveme drsquoexploitation
26
Figure 14 ndash Le flux entre les composants du navigateur pour la reacutecupeacuteration et le traitementdrsquoune page web dans le navigateur
8ndash9 Ce dernier composant est relieacute au moteur de rendu qui envoie le rendu final agrave lrsquoutilisateur
dans la derniegravere eacutetape de la figure
Lrsquoaffichage drsquoune page web par le navigateur moyennant le code HTML CSS et JavaScript
nrsquoest pas aussi simple Pour ce faire le navigateur fait particuliegraverement appel agrave lrsquoun de ses
composants le moteur de rendu
Les opeacuterations qui se manifestent agrave lrsquointeacuterieur du navigateur et en particulier le fonctionnement
des moteurs de rendu des navigateurs les plus utiliseacutes ont eacuteteacute expliqueacutes par Garsiel et Irish
[11] Lrsquoaffichage drsquoune page web comporte de fait plusieurs phases La premiegravere consiste en
la construction des arborescences DOM (modegravele drsquoobjet de document) et CSSOM (modegravele
drsquoobjet CSS) Cette derniegravere phase est suivie par la transformation des balisages HTML et CSS
en DOM et CSSOM respectivement dont la combinaison forme une arborescence drsquoaffichage
(arbre de rendu) Cette arborescence agrave son tour est chargeacutee de la mise en page de chaque
eacuteleacutement visible et de lrsquointroduction des donneacutees exigeacutees pour lrsquoaffichage des pixels agrave lrsquoeacutecran
[5]
27
lthtmlgtltheadgt
ltmeta name=viewport content=width=device-widthinitial-scale=1gtltlink href=designcss rel=stylesheetgtlttitlegtExemplelttitlegt
ltheadgtltbodygt
ltpgtSalut ltspangtOussamaltspangt Beroual ltpgtltdivgtltimg src=ma-photojpggtltdivgt
ltbodygtlthtmlgt
Figure 15 ndash Un exemple simple de page web illustrant le rendu dans un navigateur
Construction du modegravele drsquoobjet DOM
Le processus de construction du modegravele drsquoobjet DOM est exposeacute ci-dessous agrave travers lrsquoexemple
drsquoune page web simple en HTML brut avec du texte et une seule image Le code HTML de la
page agrave eacutetudier est donneacute agrave la figure 15
Le traitement de cette page impose au moteur de rendu du navigateur drsquoexeacutecuter quatre
processus de transformation tel qursquoillustreacute dans la figure 16
1 Le premier processus est la conversion le moteur de rendu lit les octets bruts du
HTML sur le disque ou le reacuteseau et les traduit en caractegraveres individuels en fonction de
lrsquoencodage speacutecifique du fichier (UTF-8 par exemple)
2 Le deuxiegraveme processus est la creacuteation de jetons le moteur de rendu convertit les
chaicircnes de caractegraveres en diffeacuterents jetons speacutecifieacutes par la norme HTML5 du W3C
telles que lthtmlgt et ltbodygt Chaque jeton possegravede une signification particuliegravere et un
ensemble de regravegles
3 Le troisiegraveme processus est lrsquoanalyse lexicale les jetons eacutemis sont convertis en objets
qui deacutefinissent leurs proprieacuteteacutes et leurs regravegles
28
Figure 16 ndash Les processus de traitement de HTML et CSS au niveau du moteur de rendu dunavigateur
4 Le quatriegraveme processus est la construction du DOM puisque le balisage HTML
deacutefinit les relations entre les diffeacuterentes balises (certaines balises sont contenues dans
drsquoautres) les objets creacuteeacutes sont associeacutes selon une arborescence qui capture eacutegalement
la relation parent-enfant deacutefinie dans le balisage drsquoorigine (lrsquoobjet HTML est un parent
de lrsquoobjet body body est un parent de lrsquoobjet p etc)
Le reacutesultat final de lrsquoensemble de ce processus est le modegravele drsquoobjet de document (ou DOM)
de notre page simple que le navigateur utilise pour tout traitement suppleacutementaire de la page
Lrsquoarbre DOM reacutesultant est illustreacute dans la figure 17
Modegravele drsquoobjet CSS (CSSOM)
Lrsquoinformation sur lrsquoapparence drsquoun eacuteleacutement lors de son affichage est offerte par une autre
construction le CSSOM Durant la construction du DOM de notre page il srsquoest aveacutereacute que
le navigateur a deacuteceleacute une balise de lien link dans la section head du document signalant
une feuille de style CSS externe stylecss Du fait qursquoil a besoin de cette ressource pour
29
Figure 17 ndash Un arbre du modegravele drsquoobjet DOM
body font-size 24px p font-weight bold span color blue p span display none img float right
Figure 18 ndash Un exemple de fichier CSS simple
lrsquoaffichage de la page le navigateur anticipe lrsquoenvoi immeacutediat drsquoune demande pour cette
ressource et reacutepond avec le contenu du fichier illustreacute agrave la figure 18 Ces styles auraient pu
ecirctre deacuteclareacutes directement dans le balisage HTML (inteacutegreacute) cependant il est recommandeacute
de seacuteparer les codes CSS et HTML puisque les graphistes travaillent sur le code CSS les
deacuteveloppeurs sur le code HTML etc
Les regravegles CSS reccedilues sont converties en un contenu que le navigateur peut comprendre et
traiter de mecircme que pour le code HTML Le processus HTML est reacutepeacuteteacute mais dans ce cas
pour le code CSS (voir figure 16) Les octets CSS sont convertis en caractegraveres puis en jetons
et en nœuds pour finalement se relier au sein drsquoune arborescence appeleacutee CSS Object Model
(CSSOM) ou laquo modegravele drsquoobjet CSS raquo
Le calcul de lrsquoensemble final de styles drsquoun objet de la page tel qursquoeffectueacute par le navigateur
30
Figure 19 ndash Arbre du modegravele drsquoobjet CSSOM
comprend deux eacutetapes Dans une premiegravere eacutetape la regravegle la plus geacuteneacuterale pour ce nœud
est appliqueacutee (par exemple srsquoil srsquoagit drsquoun eacuteleacutement enfant du corps tous les styles du corps
srsquoappliquent) Dans une deuxiegraveme eacutetape des regravegles plus speacutecifiques crsquoest-agrave-dire en descendant
la cascade sont appliqueacutees afin drsquoaffiner de maniegravere reacutecursive les styles calculeacutes
La concreacutetisation de cette deacutemarche est faite agrave partir de lrsquoobservation de lrsquoarborescence
CSSOM dans la figure 19 On peut y lire que tout texte est eacutecrit en bleu et que sa taille de
police est de 24 pixels Il est placeacute dans la balise span contenue dans lrsquoeacuteleacutement body Ce
dernier est chargeacute de transmettre la taille de police agrave lrsquoeacuteleacutement span Toutefois si une balise
span est un enfant drsquoune balise paragraphe (p) le contenu de cette balise nrsquoest pas afficheacute
Il faut se rappeler que lrsquoarborescence CSSOM ci-dessus nrsquoest pas complegravete Elle ne montre
que les styles qui remplacent ceux de la feuille de style Dans lrsquoabsence de styles proposeacutes
tout navigateur fournit un ensemble de styles par deacutefaut eacutegalement appeleacutes styles user-agent
Construction de lrsquoarbre de rendu la mise en page et le dessin
Les donneacutees HTML et CSS ont servi jusqursquoici agrave la creacuteation des arborescences des modegraveles
DOM et CSSOM qui sont des objets indeacutependants chargeacutes chacun de capturer un aspect
du document lrsquoun deacutecrit le contenu et lrsquoautre les regravegles de style appliqueacutees au document
31
Figure 110 ndash Arbre de rendu
Les arborescences des deux modegraveles DOM et CSSOM sont combineacutees pour former une
arborescence drsquoaffichage responsable de lrsquoaffichage de la page et ne contenant que des nœuds
neacutecessaires agrave lrsquoaffichage de la page (voir figure 110)
Une arborescence drsquoaffichage comporte plusieurs types de nœuds des nœuds Visibles des
nœuds invisibles tels que les balises de script les balises Meta etc et des nœuds masqueacutes
par le code CSS Seul le premier type est consideacutereacute dans lrsquoarborescence drsquoaffichage Les
deux autres sont omis Le proceacutedeacute drsquoomission est effectueacute en mobilisant deux proprieacuteteacutes la
proprieacuteteacute visibility hidden rendant lrsquoeacuteleacutement invisible tout en occupant de lrsquoespace dans la
mise en page et la proprieacuteteacute display none supprimant totalement lrsquoeacuteleacutement de lrsquoarborescence
drsquoaffichage La figure 111 donne une vue globale des eacutetapes et processus de la construction
des arbres abordeacutees ci-dessous
Tous les nœuds visibles sont soumis aux regravegles CSSOM et eacutemis avec leurs contenus et leurs
styles calculeacutes Neacuteanmoins leurs positions et leurs geacuteomeacutetries (tailles) restent indeacutefinies La
deacutetermination ou le calcul de ces deux paramegravetres constitue la phase de mise en page appeleacutee
parfois ajustement de la mise en page Cette derniegravere est traduite par lrsquoexemple simple donneacute agrave
la figure 112 Le corps de la page ci-dessus contient deux eacuteleacutements div imbriqueacutes le premier
eacuteleacutement div (parent) deacutefinit la taille drsquoaffichage du nœud agrave 50 de la largeur de la fenecirctre et
le second eacuteleacutement div contenu par le parent deacutefinit sa largeur agrave 50 de celui du parent soit
32
Figure 111 ndash Les eacutetapes et processus de la construction des arbres DOM CSSOM et de lrsquoarbrede rendu
33
lthtmlgtltheadgt
ltmeta name=viewport content=width=device-widthinitial-scale=1gtlttitlegtExemple de mise en pagelttitlegt
ltheadgtltbodygt
ltdiv style=width 50gtltdiv style=width 50gtHello worldltdivgt
ltdivgtltbodygt
lthtmlgt
Figure 112 ndash Un second exemple simple illustrant le processus de mise en page par le navigateur
25 de la largeur de la fenecirctre
Maintenant que toutes les informations relatives aux nœuds sont reacuteunies ceux-ci sont peints
convertis en pixels reacuteels et afficheacutes agrave lrsquoeacutecran agrave partir de lrsquoarborescence drsquoaffichage finale La
construction est acheveacutee et la page est enfin visible dans la fenecirctre La figure 113 reacutesume
toutes les eacutetapes preacuteceacutedemment deacutecrites dans cette section
34
Figure 113 ndash Vue globale du flux de reacutecupeacuteration de traitement et drsquoaffichage drsquoune page web
CHAPITRE 2
LES BUGS DrsquoINTERFACE DANS LES APPLICATIONS WEB
Les utilisateurs du web sont souvent confronteacutes lors drsquoune application web sur internet agrave
des problegravemes tregraves ennuyeux appeleacutes laquo bugs drsquointerfaces raquo Dans ce chapitre nous exposons
les diffeacuterents types drsquoapplication web et les bugs qui les affectent en montrant que les bugs
drsquointerface sont largement preacutesents dans un grand nombre de sites et applications web du
monde reacuteel et comment des bugs de ce genre ne sont pas limiteacutes agrave des problegravemes de preacutesentation
simples statiques et qursquoils reacutevegravelent dans de nombreux cas des deacutefauts dans le comportement
de lrsquoapplication
21 TYPES DrsquoAPPLICATIONS WEB
Le web est maintenant peupleacute par un nombre consideacuterable drsquoapplications par conseacutequent le
nombre de personnes affecteacutees par les bugs qursquoelles peuvent contenir est eacutenorme
211 APPLICATIONS STATIQUES
Les sites web traditionnels qursquoon appelle eacutegalement applications laquo Web 10 raquo sont statiques
le contenu drsquoune page ne change pas apregraves le chargement et chaque page de lrsquoapplication peut
36
ecirctre chargeacutee indeacutependamment de toute interaction preacutealable avec le site Le test automatique
drsquoune telle application peut ecirctre effectueacute agrave lrsquoaide drsquoun robot drsquoindexation en chargeant une page
de deacutemarrage puis en explorant automatiquement les diffeacuterentes interactions possibles sur la
page pour obtenir de nouvelles pages agrave visiter Comme chaque page de ces applications est
indeacutependante les bugs ne peuvent se produire que sur une seule page drsquoougrave vient la possibiliteacute
drsquoeacutecrire des oracles de test simples qui analyseraient le contenu de ces pages prises isoleacutement
Le Responsive Web Design est un moyen de concevoir un site web de sorte que son contenu
srsquoadapte automatiquement agrave la reacutesolution drsquoeacutecran du terminal utiliseacute pour le visualiser Une
application RWD est donc un site web adaptatif La notion de web adaptatif repense la
conception ergonomique des sites web puisqursquoil ne srsquoagit plus de concevoir autant de sites que
de terminaux mais de concevoir une seule interface auto-adaptative Ainsi les informations et
les structures techniques ne sont pas dupliqueacutees ce qui geacutenegravere des eacuteconomies drsquoeacutechelle dans
la conception et la maintenance des sites web beacuteneacuteficiant de ce mode de conception
Un site web conccedilu avec un design responsive est donc optimiseacute pour tous les appareils
disponibles sur le marcheacute ordinateurs tablettes smartphones Cette faccedilon de concevoir des
applications web est recommandeacutee en raison de quelques avantages majeurs le deacuteveloppement
et la maintenance seront plus rapides et plus simples (un seul fichier geacuterant tous les affichages)
Un reacutefeacuterencement naturel optimal est utiliseacute (pas de sous-domaines ou de redirections vers des
annuaires mobiles) puisqursquoil nrsquoy a qursquoun seul site regroupant toutes les versions et uniquement
une adresse Web (URL) Plus de deacutetails sur le concept de RWD sont preacutesenteacutes dans la section
223
37
212 APPLICATIONS WEB 20
Les applications web reacutecentes eacutegalement appeleacutees RIA (Rich Internet Applications) utilisent
des scripts cocircteacute client des eacutetats cocircteacute serveur et drsquoautres fonctionnaliteacutes pour offrir une expeacute-
rience utilisateur ameacutelioreacutee Les modifications apporteacutees agrave lrsquoeacutetat de la page peuvent venir agrave la
suite de requecirctes HTTP asynchrones chargeant un nouveau contenu Par conseacutequent ces appli-
cations sont maintenant stateful la mecircme action ou la mecircme requecircte HTTP peut renvoyer des
reacutesultats diffeacuterents en fonction des interactions passeacutees de lrsquoutilisateur Ces applications avec
eacutetat viennent avec de nouveaux types de bugs appeleacutes bugs comportementaux Contrairement
agrave un bug statique qui srsquoeacutevalue en analysant le contenu drsquoune seule page indeacutependamment des
autres un bug comportemental relie les donneacutees et lrsquoordre de consultation de plusieurs pages
de lrsquoapplication
22 TYPES DE BUGS DrsquoINTERFACE
Un bug drsquointerface est un deacutefaut dans un systegraveme web qui a des effets visibles sur le contenu
des pages servi agrave lrsquoutilisateur Nous avons effectueacute une eacutetude sur de plus de 35 applications
web [51] en tous genres Un releveacute des bugs ayant un impact sur la preacutesentation ou le contenu
de lrsquointerface utilisateur a eacuteteacute fait Le tableau 21 donne la liste des sites web et des applications
pour lesquelles au moins un bug de mise en page a eacuteteacute trouveacute Dans ce qui suit nous preacutesentons
briegravevement les bugs deacutecouverts dans cette eacutetude Nous soulignons qursquoaucun des bugs deacutecrits
ici repreacutesente un problegraveme de compatibiliteacute entre les navigateurs Les bugs sont preacutesents
peu importe le navigateur utiliseacute pour afficher la page et ils ne sont pas causeacutes par une
interpreacutetation divergente des normes par deux navigateurs diffeacuterents
38
mdash Academiaedumdash Acermdash Adagio Hotelsmdash Air Canadamdash Air Francemdash AllMusicmdash American Airlinesmdash Boingomdash Canadian
Mathematical Societymdash Customizeorgmdash Digital Ocean
mdash Dropboxmdash EasyChairmdash Elseviermdash Evous Francemdash Facebookmdash IEEEmdash Just for Laughsmdash LinkedInmdash Liveshoutmdash Microsoft TechNetmdash Monoprixmdash Moodle
mdash Naymzmdash NSERCmdash OngerNeigemdash ProQuestmdash Rail Europemdash ResearchGatemdash St-Hubertmdash SpringerOpenmdash TD Canada Trustmdash Time Magazinemdash Uniform Servermdash YouTube
Tableau 21 ndash Sites et applications web pour lesquelles au moins un bug de mise en page a eacuteteacutetrouveacute
221 BUGS STATIQUES
Un premier type de bugs appeleacutes bugs statiques collecteacutes par une eacutetude empirique dans des
sites web et applications reacuteelles On y retrouve des problegravemes tels que le chevauchement des
eacuteleacutements les eacuteleacutements qui srsquoeacutetendent en dehors de leur conteneur ou le bug drsquoeacuteleacutements mal
empileacutes Ce genre de bugs peut ecirctre diviseacute en deux cateacutegories des bugs lieacutes agrave la mise en page
et drsquoautres non lieacutes agrave la mise en page
Bugs de mise en page
Une premiegravere cateacutegorie de bug correspond agrave des perturbations dans la mise en page ou la
preacutesentation de la page elle-mecircme crsquoest-agrave-dire tout reacutesultat inattendu du concepteur de cette
page en termes de contenu ou de proprieacuteteacutes (position taille nombre drsquoeacuteleacutements)
Eacuteleacutements mal aligneacutes Un problegraveme de mise en page banal mais freacutequent est le deacutesaligne-
ment ou le deacutecalage drsquoeacuteleacutements qui doivent ecirctre aligneacutes La figure 21a montre un exemple de
39
(a) LiveShout
(b) LinkedIn
Figure 21 ndash Exemple drsquoeacuteleacutements mal aligneacutes le cadre blanc est horizontalement mal aligneacute(LiveShout) le menu Interests est deacutecaleacute drsquoun pixel par apport aux autres menus (LinkedIn)
ce bug courant mais parfois le deacutesalignement est subtil un eacuteleacutement peut ecirctre deacutecaleacute par un
seul pixel (figure 21b)
Eacuteleacutements qui se chevauchent Le problegraveme de chevauchement des eacuteleacutements qui devraient
ecirctre disjoints dans la preacutesentation drsquoune page est aussi lrsquoun des bugs les plus reacutepandus dans
cette eacutetude les problegravemes de cette nature ont eacuteteacute trouveacutes dans des sites aussi varieacutes que le
Time Magazine Air Canada Moodle et Rail Europe La figure 22 montre un exemple de ce
problegraveme
Dans certains cas le chevauchement se produit par une interruption de la mise en page causeacutee
par le redimensionnement du document principal en dessous des dimensions minimales
comme dans lrsquoexemple de la figure 22a Les conteneurs qui doivent ecirctre cocircte agrave cocircte sont
afficheacutes les uns sur les autres par le moteur de rendu du navigateur Cependant nous avons
eacutegalement constateacute que dans de nombreux cas ce chevauchement est causeacute par le fait que les
40
eacuteleacutements sont absolument positionneacutes dans une page par rapport agrave leurs dimensions lorsqursquoils
contiennent du texte en anglais et lors de lrsquoaffichage du site web dans une autre langue (comme
le franccedilais) il peut arriver que le texte correspondant soit plus long que la version anglaise ce
qui cause le chevauchement de deux eacuteleacutements qui devraient ecirctre disjoints Cela a eacuteteacute observeacute
par exemple sur la figure 22b pour le site web RailEurope
Eacuteleacutements qui srsquoeacutetendent agrave lrsquoexteacuterieur de leurs conteneurs Un autre problegraveme reacutepandu
est la preacutesence drsquoeacuteleacutements qui deacutepassent les limites de leurs conteneurs parent ce qui pro-
voque le chevauchement indeacutesirable avec des eacuteleacutements environnants Ce bug est lrsquoinverse du
preacuteceacutedent plutocirct que drsquoeacutetendre leur conteneur en dehors de ses dimensions nominales cette
fois les eacuteleacutements qui srsquoeacutelargissent agrave lrsquoexteacuterieur de leur conteneur sont simplement coupeacutes de
lrsquoaffichage
La figure 23 montre un exemple de ce dernier type dans la plateforme drsquoenseignement
en ligne Moodle (la figure 23a) des eacuteleacutements de la table sont coupeacutes de leur cocircteacute droit
Lors de lrsquoanalyse du code source de la page il se trouve que quatre autres colonnes doivent
effectivement ecirctre visibles et sont tout simplement inaccessibles puisque ils ont eacuteteacute coupeacute
Cela rend la page plus ou moins inutilisable
Un cas particulier survient lorsque le conteneur soit la fenecirctre du navigateur entiegravere et la fenecirctre
est redimensionneacutee en dessous drsquoun certain seuil Cela peut ecirctre montreacute dans la Figure 23b
le contenu du menu en haut disparaicirct lorsque la fenecirctre est redimensionneacutee Le navigateur
fournit une barre de deacutefilement horizontale mais cela ne fait deacutefiler que la partie infeacuterieure de
la page et pas le menu du haut En conseacutequence certains boutons du menu principal du site ne
peuvent plus ecirctre cliqueacutes
Nous placcedilons aussi dans cette cateacutegorie un bug rencontreacute en utilisant la fenecirctre de messagerie
41
(a) Air Canada
(b) Rail Europe
Figure 22 ndash Exemple drsquoeacuteleacutements qui se chevauchent
42
(a) Moodle
(b) LinkedIn
Figure 23 ndash Le contenu de la page est dissimuleacute de lrsquointerface en raison de son prolongementau-delagrave des dimensions du conteneur parent
43
Figure 24 ndash Le bug Facebook La zone de texte permettant au utilisateur de taper un messageinstantaneacute (agrave gauche) disparaicirct soudainement (agrave droite)
instantaneacutee de Facebook Lorsque la fenecirctre de parent est redimensionneacutee au-dessous drsquoune
largeur speacutecifique la zone de texte permettant agrave un utilisateur drsquoentrer un nouveau message
disparaicirct soudainement de lrsquointerface comme le montre la figure 24 Tous les autres eacuteleacutements
de la fenecirctre restent identiques mais il devient impossible de taper un message
Ton sur ton Ce bug est causeacute par un problegraveme de mise en page ougrave le texte drsquoun eacuteleacutement est
de la mecircme couleur que le fond de la page agrave cet endroit ce qui rend le texte invisible dans
lrsquoaffichage Bien que ce type de comportement peut ecirctre fait expregraves afin de dissimuler un
eacuteleacutement nous croyons qursquoil est tregraves peu probable que cela soit lrsquointention du deacuteveloppeur
puisqursquoil existe des moyens beaucoup plus eacuteleacutegants drsquoatteindre le mecircme reacutesultat en utilisant
les proprieacuteteacutes CSS (en deacutefinissant la proprieacuteteacute drsquoaffichage agrave none ou la proprieacuteteacute opacity agrave
0)
La figure 25 montre un exemple drsquoun tel problegraveme de mise en page sur Academiaedu (figure
25b) Dans la figure 25a le redimensionnement de la fenecirctre du navigateur en dessous drsquoune
largeur speacutecifique a pour effet impreacutevu de pousser les eacuteleacutements du menu supeacuterieur en dehors
de leur conteneur preacutevu (celui qui a un fond bleu) Par conseacutequent ces eacuteleacutements qui ont du
44
(a) ProQuest
(b) Academia
Figure 25 ndash Le bug laquo ton sur ton raquo Les eacuteleacutements de menu sont pousseacutes en dehors de leursconteneur et disparaissent (a) le texte du lien est de la mecircme couleur que le fond reacuteveacuteleacute en leseacutelectionnant avec la souris (b)
texte blanc se placent dans une zone blanche et deviennent invisibles (agrave lrsquoexception drsquoun seul
eacuteleacutement du menu qui a un fond bleu pour une raison inconnue)
Eacuteleacutements mal empileacutes Ce problegraveme se produit quand un eacuteleacutement qui devrait ecirctre rendu
au-dessus drsquoun autre est placeacute en dessous de ce dernier comme le montre la figure 26 Dans
cet exemple le bouton orange en haut de lrsquoimage est censeacute apporter un menu (liste deacuteroulante)
Toutefois le contenu de ce menu apparaissent sous le reste du contenu de la page plutocirct que
sur eux ce qui rend certains de ses eacuteleacutements inutilisables
Lrsquoordre du processus du dessin est deacutefini dans le standard de CSS crsquoest en fait lrsquoordre dans
lequel les eacuteleacutements sont empileacutes dans la pile des contextes Cet ordre affecte le dessin puisque
les piles sont dessineacutees de lrsquoarriegravere vers lrsquoavant Lrsquoordre drsquoempilement drsquoun bloc de rendu est
1 Couleur drsquoarriegravere-plan
2 Image drsquoarriegravere-plan
3 Bordures
45
Figure 26 ndash Un eacuteleacutement est placeacute incorrectement sur un autre
4 Enfants
5 Contour
Ainsi une violation de cet ordre pour une raison inconnue peut causer ce genre de problegraveme
La plupart des problegravemes de cette nature peuvent ecirctre corrigeacutees en attribuant correctement la
proprieacuteteacute z-index de lrsquoeacuteleacutement deacutefectueux
Disposition briseacutee Une rupture majeure dans la structure attendue drsquoune page se produit
quand un certain nombre de ressources importantes telles que les fichiers CSS le code
JavaScript ou les images ne parvient pas agrave ecirctre reacutecupeacutereacute par le navigateur En conseacutequence
de nombreux eacuteleacutements de la page nrsquoont pas leurs deacuteclarations de style et sont positionneacutes et
dimensionneacutes en fonction du style par deacutefaut fourni par le moteur de rendu
La figure 27 montre un cas assez grave drsquoun tel problegraveme ougrave essentiellement toutes les
46
Figure 27 ndash Un exemple drsquointerface briseacutee en raison de lrsquoeacutechec du chargement de certainesressources
deacuteclarations CSS sont manquantes Ceci est causeacute par le fait que le fichier aparthotelcss
nrsquoa pas reacuteussi agrave ecirctre chargeacute pour une raison inconnue Le mecircme problegraveme a eacuteteacute observeacute
momentaneacutement sur le portail web Digital Ocean 28
Sur le site web de Digital Ocean la page de connexion (login) est briseacutee et toutes les autres
pages aussi comme le montre la figure 28a Cela est ducirc au fait que le navigateur a abandonneacute
le chargement de nombreuses ressources dans la page (y compris toutes les images) Il est agrave
noter que malgreacute ces problegravemes le site Web reste fonctionnel La figure 28b repreacutesente une
capture drsquoeacutecran de ce agrave quoi la page devrait ressembler
HTML malformeacute Dans la figure 29 lrsquoHTML malformeacute rend impossible de voir le fond
drsquoeacutecran
47
(a) Digital Ocean sans CSS (b) Digital Ocean avec CSS
Figure 28 ndash Exemple drsquointerface briseacute dans le site Digital Ocean
Figure 29 ndash Exemple drsquoHTML mal formeacute
48
Eacuteleacutements inaccessibles Dans la figure 210a la page affiche correctement une mise en page
laquoeacutecran largeraquo lorsque la fenecirctre du client est assez large Par contre si la largeur de la fenecirctre
est moyenne comme le montre la figure 210b on observe que le bouton de connexion (sign in)
en haut agrave droite srsquoest deacuteplaceacute agrave lrsquoexteacuterieur de la bande supeacuterieure
Incoheacuterence dans les valeurs possibles drsquoun champ de formulaire Dans une page du site
CallingCards le champ du code postal dans le formulaire est preacute-rempli avec 6 caractegraveres de
donneacutees anteacuterieures mais en essayant de modifier le code postal il nrsquoest pas possible de taper
plus de 5 caractegraveres dans ce champ (figure 211)
Figure 211 ndash Incoheacuterence dans le champ de formulaire du site CallingCards
Bugs non lieacutes agrave la mise en page
Plusieurs autres bugs peuvent ecirctre deacutetecteacutes en analysant le contenu et la preacutesentation drsquoune page
Nous verrons dans la suite que certains drsquoentre eux se rapportent mecircme aux comportements
attendu ou aux fonctionnaliteacutes de lrsquoapplication mais peuvent quand mecircme ecirctre deacutetecteacutes par
des regravegles exprimeacutees sur un seul instantaneacute statique de la fenecirctre de lrsquoapplication
49
Mojibake et problegravemes drsquoencodage Plusieurs sites et applications gegraverent mal les donneacutees
de chaicircne en dehors de lrsquoASCII 7-bits Divers encodages de caractegraveres tels que Cp1252 ou
UTF-8 peuvent ecirctre utiliseacutes pour repreacutesenter les caractegraveres laquo accentueacutes raquo ou laquo eacutetrangers raquo
Cependant le mecircme caractegravere peut ecirctre repreacutesenteacute par une valeur binaire diffeacuterente selon le
scheacutema de codage utiliseacute pire certains codages comme UTF-8 peuvent utiliser plusieurs
octets pour repreacutesenter un seul caractegravere
Les problegravemes surgissent quand un systegraveme nrsquointerpregravete pas correctement le contenu drsquoune
chaicircne de caractegraveres croyant qursquoun document est dans un certain encodage alors qursquoil en
utilise reacuteellement un autre Il en reacutesulte souvent un caractegravere incorrect superflu ou pas afficheacute
du tout ce pheacutenomegravene est appeleacute mojibake 1 Par exemple lrsquoencodage UTF-8 du caractegravere
laquo eacute raquo lorsqursquoil est interpreacuteteacute comme une chaicircne Cp1252 produit laquo Atilde ccopy raquo comme le montre la
figure 212a Agrave lrsquoinverse le rendu Cp1252 du caractegravere laquo eacute raquo donne laquo raquo quand il est interpreacuteteacute
comme du UTF-8 (figure 212b)
Bien que ces caractegraveres puissent ecirctre des donneacutees leacutegitimes leur preacutesence dans le contenu drsquoun
eacuteleacutement indique tregraves probablement une manipulation incorrecte de lrsquoencodage des chaicircnes par
lrsquoapplication eacutetudieacutee
Un autre exemple de ce genre de bug est montreacute dans la figure 213
213a donne lrsquoexemple lors de lrsquoinvitation de quelqursquoun de votre carnet drsquoadresses dont le nom
contient un accent Doodle affiche son nom incorrectement et cela donne une adresse invalide
213b montre qursquoen cliquant sur la suggestion on observe que lrsquoajout est fait mais que le nom
est coupeacute en deux parties agrave lrsquoendroit mecircme du caractegravere eacutechappeacute
1 Terme japonais signifiant laquo transformation de caractegravere raquo
50
Problegravemes drsquoeacutechappement Les problegravemes drsquoeacutechappement surviennent lorsque les chaicircnes
avec des caractegraveres speacuteciaux ne parviennent pas agrave ecirctre correctement codeacutees ou deacutecodeacutees entre
deux applications La manifestation la plus freacutequente de ce problegraveme est lors de la lecture et
de lrsquoeacutecriture des chaicircnes de caractegraveres dans une base de donneacutees Certains caractegraveres comme
lrsquoapostrophe neacutecessitent drsquoecirctre doubleacutes afin de ne pas ecirctre confondus avec un seacuteparateur
de chaicircne Les problegravemes surviennent quand un systegraveme ne parvient pas agrave remplacer les
apostrophes doubles par des apostrophes simples lors de lrsquoaffichage des donneacutees dans un
formulaire
Lors de lrsquoenregistrement du contenu du formulaire au retour agrave la base de donneacutees chaque
apostrophe sera de nouveau doubleacutee entraicircnant un quadruplet drsquoapostrophes lors du char-
gement de la page la prochaine fois et ainsi de suite ceci est illustreacute dans la figure 214
Ainsi la recherche de plusieurs apostrophes dans un formulaire peut ecirctre utiliseacutee pour deacutetecter
lrsquoeacutechappement incorrect agrave lrsquointeacuterieur du code source
Un problegraveme de nature similaire se produit lorsque des caractegraveres speacuteciaux dans le code source
de la page (tels que HTML ou JavaScript) sont eacutechappeacutes incorrectement Par exemple une
seacutequence comme ltpgt peut ecirctre transformeacutee en ampltpampgt reacutesultant en la chaicircne litteacuterale ltpgt
afficheacutee comme du texte plutocirct que drsquoecirctre interpreacuteteacutee comme une balise de paragraphe
Nous avons deacutecouvert des exemples de ce problegraveme sur EasyChair qui affiche du code HTML
brut ou sur YouTube qui affiche du code JavaScript comme on peut le voir agrave la figure 215
222 BUGS COMPORTEMENTAUX
Drsquoautres bugs peuvent ecirctre appeleacutes laquo comportementaux raquo ils reacutevegravelent un problegraveme dans la
fonctionnaliteacute du site ou alors ils peuvent ecirctre exprimeacutes uniquement en termes drsquoune seacutequence
51
de plusieurs pages dans lrsquoordre
Contrairement agrave une application web traditionnelle une application Internet riche (RIA) utilise
les technologies Web modernes eacutemergentes telles que AJAX [47] Flash et Silverlight Par
conseacutequent de nouveaux problegravemes de tests web sont ajouteacutes aux problegravemes existants Une
caracteacuteristique importante de ces applications est qursquoelles sont stateful leur code peut stocker
des donneacutees persistantes sur le client (en utilisant WebStorage les proprieacuteteacutes CSS les variables
JavaScript et les objets) et sur le serveur (agrave lrsquoaide de cookies de stockage de session et de bases
de donneacutees) De plus lrsquoeacutetat de lrsquoapplication est disperseacute sur un certain nombre drsquoeacuteleacutements
et ne peut pas simplement ecirctre assimileacute agrave lrsquoURL de la page en cours (afficheacutee dans la barre
drsquoadresse du navigateur) Des fonctionnaliteacutes telles que la communication asynchrone la
manipulation DOM cocircteacute client et les gestionnaires drsquoeacuteveacutenements permettent de changer lrsquoeacutetat
de lrsquoapplication sans un rechargement complet de la page et sans modifier son URL [35]
Une conseacutequence positive de ces fonctionnaliteacutes est qursquoune telle application peut fournir
une expeacuterience utilisateur plus riche (drsquoougrave son nom) sans les cookies et JavaScript les
opeacuterations simples telles que les manipulations de panier les sessions utilisateur (connexion
deacuteconnexion) et autres fonctionnaliteacutes ne seraient pas possibles Cependant la preacutesence drsquoun
eacutetat dans lrsquoapplication introduit eacutegalement la possibiliteacute drsquoincoheacuterences dans lrsquoeacutetat afficheacute
drsquoune page agrave une autre Ces problegravemes sont appeleacutes bugs comportementaux car ils sont la
conseacutequence de lrsquointeraction de plusieurs pages entre elles et dans un certain ordre
Eacuteleacutements mobiles Certains eacuteleacutements peuvent changer leur position involontairement lors
de lrsquointeraction avec un utilisateur La figure 216 montre un exemple drsquoun tel problegraveme sur
le site web du CRSNG ougrave eacutecrire un texte dans une zone de texte vide auparavant reacuteduit sa
largeur de 4 pixels et deacutecale leacutegegraverement les zones de texte restantes vers la gauche
52
Ce problegraveme srsquoest aveacutereacute plus reacutepandu que nous nous attendions les variations comprennent
certains styles drsquoeacuteleacutements (la bordure ou la taille) qui ont eacuteteacute changeacutes sans aucune raison
apparente
Le dysfonctionnement des boutons Beaucoup drsquoapplications montrent agrave lrsquoutilisateur des
eacuteleacutements qui se comportent comme une fenecirctre pop-up (une fenecirctre secondaire qui srsquoaffiche
sans avoir eacuteteacute solliciteacutee par lrsquoutilisateur devant la fenecirctre de navigation principale lorsqursquoon
navigue sur Internet) Ce moyen est communeacutement utiliseacute pour afficher des messages publici-
taires ou un avertissement comme la reacuteponse agrave un message priveacute dans un forum
Toutefois dans un certain nombre de cas les boutons dans ces fenecirctres sont inopeacuterants cliquer
sur eux un certain nombre de fois ne produit aucun effet Ce problegraveme a eacuteteacute teacutemoin dans des
sites aussi varieacutes qursquoAmerican Airlines Dropbox et BitBucket Dans certains cas lrsquoutilisateur
est effectivement coinceacute dans le pop-up ou la page qui contient le bouton et ne peut pas sortir
sans forcer un rechargement complet du document
Confusion dans le statut de connexion Deux sites web dans notre eacutetude preacutesentent des
incoheacuterences dans lrsquoeacutetat drsquoune page meacutelangeant des eacuteleacutements de la fenecirctre drsquoune page
normalement reacuteserveacutes aux utilisateurs enregistreacutes (tels que les menus personnaliseacutes) ainsi
que des eacuteleacutements reacuteserveacutes aux utilisateurs qui sont deacuteconnecteacutes (comme un formulaire de
connexion)
Nous avons assisteacute agrave un tel comportement dans le site web de lrsquoIEEE pour le formulaire de
demande de membre Senior Apregraves lrsquoexpiration drsquoun certain deacutelai lrsquoutilisateur doit neacutecessaire-
ment se connecter agrave nouveau toutefois la page preacutesenteacutee agrave lrsquoutilisateur est celle repreacutesenteacutee
sur la figure 217 On remarque que le nom de lrsquoutilisateur est toujours preacutesent en haut agrave droite
de la page mecircme srsquoil est censeacute ecirctre deacuteconnecteacute (les identifiants de connexion sont demandeacutes)
53
Cliquer sur ce nom apporte le menu deacuteroulant qui est normalement accessible uniquement
lorsque lrsquoutilisateur est connecteacute Le mecircme problegraveme a eacuteteacute trouveacute sur le site de reacuteservation
drsquoAir Canada
Incoheacuterences dans le reacutesultat de la recherche Un autre problegraveme de comportement est
celui de lrsquoincompatibiliteacute entre une requecircte faite par un utilisateur et les reacutesultats afficheacutes par
lrsquoapplication en reacuteponse agrave cette requecircte
La figure 218 montre un exemple de ce problegraveme sur le site web des eacutepiceries Monoprix
Lors de la recherche des magasins agrave proximiteacute un utilisateur peut taper un code postal dans
un champ de formulaire puis cliquer sur laquo Valider raquo Cependant les reacutesultats de recherche
afficheacutes dans la page suivante ne montrent presque jamais les magasins avec le code postal
souhaiteacute
Comme avec tous les bugs dans la preacutesente cateacutegorie cela peut ecirctre observeacute seulement par
la correacutelation de plusieurs eacuteleacutements dans deux eacutetats diffeacuterents de la page le texte dans la
zone de texte un clic sur un bouton speacutecifique suivi par le texte dans la liste des eacuteleacutements qui
apparaissent dans la page reacutesultante
223 BUGS DE RESPONSIVE WEB DESIGN
Il y a quelques anneacutees les deacuteveloppeurs Web pouvaient faire des hypothegraveses sur la taille de
lrsquoeacutecran des appareils des utilisateurs Les ordinateurs de bureau ont eacuteteacute conccedilus pour acceacuteder
aux sites web en assumant une taille de fenecirctre minimale il eacutetait donc laquo normal raquo que pour
une largeur de fenecirctre plus petite le site semble briseacute Il srsquoagissait drsquoune approche valide
dans une eacutepoque ougrave les tablettes et les smartphones eacutetaient inouiumls (pas agrave la porteacutee de tout le
monde peu utiliseacutes) Aujourdrsquohui une autre approche est neacutecessaire pour srsquoassurer que les
54
sites fonctionnent correctement dans une gamme de diffeacuterents appareils et tailles de viewport
(le viewport deacutesigne la partie drsquoune page web qui est visible dans la fenecirctre du navigateur
drsquoun ordinateur smartphone tablette ou drsquoun autre dispositif Le viewport est variable et
mouvant en fonction de la taille de la fenecirctre du navigateur et en fonction de lrsquoutilisation des
fonctions de deacutefilement ou scrolling (souris ou ascenseur))[6]
Par conseacutequent la conception des sites doit deacutesormais tenir compte de plusieurs cateacutegories
drsquoappareil selon la taille de lrsquoeacutecran Cependant le changement rapide des proprieacuteteacutes de
lrsquoappareil nrsquoa pas pu ecirctre suivi par les deacuteveloppeurs web Pour remeacutedier agrave ce problegraveme ces
derniers ont eu recours aux mecircmes hypothegraveses en fonction de la demande du serveur La
demande drsquoune ressource par un navigateur est suivie par une chaicircne drsquoagent utilisateur (user
agent string) geacuteneacuteralement envoyeacutee avec la demande pour identifier le type de navigateur
utiliseacute La lecture de cette derniegravere du cocircteacute du serveur entraicircne la diffusion de deux versions
une version mobile conccedilue pour une largeur maximale si lrsquoutilisateur envoyait des chaicircnes
drsquoagents drsquoutilisateurs mobiles et une version bureau conccedilue pour une largeur minimale
Les deacuteveloppeurs ont pu suite agrave lrsquointroduction des media queries de CSS eacutecrire des deacutecla-
rations de style conditionnelles par des proprieacuteteacutes multimeacutedia telle que la taille de la fenecirctre
(voir figure 219) Lrsquoadaptation drsquoun site pour un support speacutecifique ou une taille de fenecirctre au
moment de lrsquoexeacutecution est donc devenue donc possible Ce concept qui sert agrave faire en sorte
qursquoun seul site reacuteponde agrave diffeacuterentes proprieacuteteacutes multimeacutedias (principalement la taille de la
fenecirctre) au moment de lrsquoexeacutecution afin drsquoameacuteliorer lrsquoexpeacuterience de lrsquoutilisateur est appeleacute
Responsive Web Design [59]
Une eacutetude reacutecente meneacutee par Walsh et al identifie cinq types de bugs survenant plus
particuliegraverement dans les sites web RWD [73] Pour la plupart il srsquoagit de bugs deacutejagrave observeacutes
dans drsquoautres sites au cours de notre propre eacutetude
55
Collision drsquoeacuteleacutements Crsquoest un bug dans lequel les eacuteleacutements se chevauchent en raison de la
modification de la fenecirctre (viewport) Ce bug peut eacutegalement influencer le bon fonctionnement
des sites web dans le cas ougrave certains eacuteleacutements fonctionnels dans les pages sont masqueacutes
Deacutepassement drsquoeacuteleacutements Les eacuteleacutements ont besoin de se redimensionner ils manquent
drsquoespace mais ils doivent aussi ecirctre assez grands pour contenir tous leurs enfants Cela arrive
dans le cas ougrave un eacuteleacutement deacutepasse agrave lrsquoexteacuterieur de son parent en raison drsquoun manque drsquoespace
Lrsquoeacuteleacutement peut alors ecirctre inaccessible masqueacute par un autre eacuteleacutement ou par-dessus drsquoautres
eacuteleacutements
Ce bug sur le site httpswwwthelilycom On peut le voir dans la figure 220 ougrave le div
avec les boutons du menu se termine en dehors de la barre de menu et hors de vue
Deacutepassement du viewport Ce bug se produit lorsque les eacuteleacutements sont pousseacutes hors de
la fenecirctre (viewport) et deviennent inaccessibles ou cacheacutes Sur le site web httpswww
slaveryfootprintorg ce bug a eacuteteacute trouveacute La figure 221 montre comment les bugs non
observables peuvent creacuteer des problegravemes agrave des largeurs infeacuterieures Ici le div du milieu est un
peu en dehors de la fenecirctre mais il ne montre aucun problegraveme observable Cependant crsquoest agrave
440px que nous pouvons voir clairement le contenu deacuteborder de la fenecirctre
Disposition agrave petite eacutechelle En fonction de lrsquoimpleacutementation certaines mises en page
peuvent ecirctre afficheacutees correctement que dans un petit intervalle de largeur Par exemple un
affichage pourrait ecirctre seulement correct entre 320 et 325 pixels de largeur
Couverture drsquoeacuteleacutements Ce bug survient lorsqursquoun conteneur nrsquoest pas assez large pour
contenir tous les eacuteleacutements et qursquoun ou plusieurs eacuteleacutements sont pousseacutes sur une ligne suppleacute-
56
mentaire
Un exemple drsquoeacuteleacutement enveloppeacute peut ecirctre vu dans la figure 222 On pourrait faire valoir que
ce nrsquoest pas un bug cependant agrave des largeurs infeacuterieures la liste est de nouveau aligneacutee en
haut Cela montre qursquoayant cette liste aligneacutee en haut est la disposition deacutesireacutee
Nous donnerons des exemples sur la deacutetection de ce genre de bugs dans la section 542
57
(a) Fenecirctre large
(b) Fenecirctre moyenne
Figure 210 ndash Exemple drsquoeacuteleacutements inaccessibles
58
(a) SpringerOpen
(b) Naymz
Figure 212 ndash Exemple de mojibake (a) donneacutees UTF-8 afficheacutees comme Cp1252 (b) donneacuteesCp1252 afficheacutees comme UTF-8
59
(a) Mojibake adresse invalide
(b) Mojibake nom coupeacute en deux partie
Figure 213 ndash Exemples de Mojibake dans Doodle
60
Figure 214 ndash Des donneacutees extraites de la base de donneacutees sont incorrectement eacutechappeacutees dansIEEE PDF eXpress on constate la preacutesence de plusieurs apostrophes
Figure 215 ndash Sur cette page YouTube du code JavaScript est afficheacute au lieu drsquoecirctre interpreacuteteacute
Figure 216 ndash Eacuteleacutements mobiles la position et la bordure de la zone du texte changent lors de lasaisie du texte (NSERC)
61
Figure 217 ndash Confusion connexiondeacuteconnexion dans une page web le contenu pour un utilisa-teur connecteacute (en haut de la page a droite) coexiste avec le formulaire de connexion reacuteserveacute auxutilisateurs qui ne sont pas en principe connecteacutes
Figure 218 ndash Incoheacuterences dans le reacutesultat de la recherche
media (max-width 420px) body
background-color white
media (min-width 421px)
body background-color blue
Figure 219 ndash Code CSS avec des conditions sur la largeur de lrsquoappareil Il srsquoagit drsquoun exemplede media queries
62
(a) Tous les boutons sont correcte-ment dans la barre de menu
(b) Le bouton laquo About raquo en sur-brillance fait saillie en dehors dela barre de menu son parent
Figure 220 ndash Le bug de deacutepassement drsquoeacuteleacutements sur le site httpswwwthelilycom
(a) Le div est en surbrillance mais il nrsquoy a pas debug observable
(b) En 440px nous voyons lemecircme div avec un bug obser-vable ougrave le texte deacuteborde en de-hors de la fenecirctre
Figure 221 ndash Le bug de deacutepassement du viewport sur le site httpswwwslaveryfootprintorg
(a) La liste est en haut (top-aligned) (b) Agrave une largeur infeacuterieure lrsquoeacuteleacutementlaquo CGV raquo est pousseacute sur une ligne suppleacutemen-taire
Figure 222 ndash Le bug de couverture drsquoeacuteleacutements sur le site httpswwwanthedesignfr
CHAPITRE 3
EacuteTAT DE LrsquoART
Il existe un certain nombre drsquooutils servant agrave tester les applications web Dans ce chapitre nous
classons les approches existantes en quatre grandes familles qursquoon nomme successivement
outils de tests approches visuelles approches deacuteclaratives et outils RWD Nous allons les
exposer en donnant un peu plus de deacutetails sur quelques outils relatifs agrave chaque famille
drsquoapproches Enfin nous citons leurs points faibles en montrant leurs limites dans certains cas
31 OUTILS DE TEST
La deacutetection de bugs drsquointerface peut drsquoabord ecirctre abordeacutee comme un problegraveme de test logiciel
classique Sous cet angle il se veut une geacuteneacuteralisation des fonctionnaliteacutes offertes par des
logiciels drsquoanalyse de sites web comme Google Analytics 1 ou Piwik 2 Ces outils suivent les
requecirctes HTTP et fournissent un tableau de bord pour analyser des donneacutees de base pays
drsquoorigine dureacutee drsquoune session etc Cependant ces outils ne gegraverent geacuteneacuteralement pas Ajax ne
peuvent pas ecirctre utiliseacutes comme outils de test (ils nrsquoeacutevaluent pas les conditions sur le contenu
de la page par exemple) et ne signalent rien sur le contenu de la page sur les actions de
1 httpwwwgooglecomanalytics2 httpwwwpiwikorg
64
WebDriver driver = new FirefoxDriver()driverget(http)ListltWebElementgt items = driverfindElements(BycssSelector(li))int left = -1for (WebElement item items) if (left == -1) left = itemgetLocation()getX()continue
assert(left = itemgetLocation()getX())
Figure 31 ndash Exemple de code pour Selenium WebDriver
lrsquoutilisateur ou les requecirctes Ajax
Les logiciels de test en ligne tels que Capybara Selenium WebDriver Watij ou Sahi sont plus
proches de nos objectifs Ces outils fournissent diffeacuterents langages pour deacutecrire les tests et
eacutecrire des assertions sur lrsquoapplication Les scripts WebDriver sont eacutecrits en Java Capybara
a sa propre API 3 dans le langage Ruby Watij utilise WebSpec 4 qui est une API deacutefinie
par-dessus Java (35 donne un exemple de test webspec-watij) et Sahi utilise SahiScript
une extension de JavaScript 5 Tous ces langages sont impeacuteratifs (crsquoest-agrave-dire proceacuteduraux) et
visent agrave piloter une application en effectuant des actions La partie test se reacuteduit agrave lrsquoinsertion
drsquoinstructions similaires agrave assert dans le code du script A titre drsquoexemple la figure 31
donne un extrait de code Java pour Selenium WebDriver pour veacuterifier que tous les eacuteleacutements
satisfaisant un seacutelecteur CSS sont agrave gauche
3 httpmakandracardscommakandra1422-capybara-the-missing-api4 httpwatijcomwebspec-api5 httpsahicoin
65
311 CAPYBARA
Capybara est un framework drsquoautomatisation Web utiliseacute pour creacuteer des tests fonctionnels qui
simulent lrsquointeraction des utilisateurs agrave une application Il constitue une bibliothegraveque conccedilue
pour ecirctre utiliseacutee sur un pilote Web sous-jacent (underlying web driver) tels que selenium-web
driver rack test driver ou capybara-webkit Il fournit un DSL (Domain Specific Language)
servant agrave deacutecrire les actions exeacutecuteacutees par ces pilotes Web [30] Une fois la page est chargeacutee
via le DSL et le pilote Web sous-jacent Capybara essayera de localiser lrsquoeacuteleacutement pertinent
dans le DOM (Document Object Model) et exeacutecutera une action du genre clics de boutons
de liens etc Son DSL deacuteployeacute pour exprimer les actions agrave exeacutecuter est tregraves intuitif la figure
32 montre quelques unes de ses commandes de base Dans le but de trouver un eacuteleacutement[30]
Capybara par lrsquointermeacutediaire du DSL cherchera dans le DOM les attributs suivants
mdash Champ de texte (fill_in) id name eacuteleacutement drsquoeacutetiquette associeacute (label)
mdash Cliquez sur un lienbouton (click_link click_button) id titre texte dans la
balise valeur
mdash Case agrave cocherbouton radioliste deacuteroulante (check uncheck choose select) id nom
eacuteleacutement drsquoeacutetiquette associeacute (label)
mdash Teacuteleacutecharger le fichier (attach_file) id nom
312 WATIJ
Watij ou Web Application Testing en Java est un projet de test impleacutementeacute en Java destineacute agrave
automatiser les tests fonctionnels des applications Web au-dessus de IE (Internet Explorer) Il
est baseacute sur la conception de Watir [33] et possegravede une capaciteacute de recherche drsquoeacuteleacutements lui
permettant de trouver drsquoacceacuteder et de controcircler facilement nrsquoimporte quel eacuteleacutement HTML agrave
66
visit(rsquopage_urlrsquo) navigate to pageclick_link(rsquoid_of_linkrsquo) click link by idclick_link(rsquolink_textrsquo) click link by link textclick_button(rsquobutton_namersquo) fill text fieldfill_in(rsquoFirst Namersquo with =gt rsquoJohnrsquo) choose radio buttonchoose(rsquoradio_buttonrsquo) choose radio buttoncheck(rsquocheckboxrsquo) check in checkboxuncheck(rsquocheckboxrsquo) uncheck in checkboxselect(rsquooptionrsquo from=gtrsquoselect_boxrsquo) select from dropdownattach_file(rsquoimagersquo rsquopath_to_imagersquo) upload file
Figure 32 ndash Commandes de base de Capybara [30]
travers le DOM en mobilisant lrsquointerface COM Il prend en charge drsquoautre part les expressions
XPath pour trouver les eacuteleacutements HTML sur une page et gegravere les pop-up (fenecirctres contextuel
du navigateur) en les interceptant et les rendant disponibles pour lrsquointeraction Watij peut
deacutetecter la fin du chargement drsquoune page en cours de chargement Watij dispose drsquoun ensemble
relativement riche drsquoAPI pour lrsquoeacutecriture de scripts de simulation La connexion agrave un site Web
exige agrave chaque fois des informations tel que le nom de lrsquoutilisateur et le mot de passe (page
de connexion (login) de Yahoo figure 34) Les tacircches manuelles demandeacutees dans ce cas agrave
lrsquoutilisateur sont les suivantes
1 Afficher une fenecirctre de navigateur
2 Mettre lrsquoURL correcte pour ouvrir cette page
3 Attendre que la page se charge et se stabilise
4 Taper le nom drsquoutilisateur dans le champ ID
5 Taper le mot de passe
6 Cliquer sur le bouton Connexion
Le code approprieacute pour automatiser les tests fonctionnels de ces eacutetapes en utilisant Watij est
donneacute dans la figure 33
67
IE ie = new IE()iestart(wwwmailyahoocom)ietextField(SymbolFactoryidusername)set(ouss)ietextField(SymbolFactoryidpasswd)set(ber2017)iebutton(SymbolFactoryidsave)click()
Figure 33 ndash Exemple drsquoutilisation de Watij [71]
Figure 34 ndash Page de connexion (login) de Yahoo [71]
68
public class WebspecDemoTest
WebSpec spec
Beforepublic void setup()spec = new WebSpec()safari()
Afterpublic void tearDown()specbrowser()close()
Testpublic void testSearchWikipedia() throws Exception specopen(httpdewikipediaorgwikiWikipediaHauptseite)
specfindinput()withid(searchInput)setvalue(Softwaretest)specfindbutton()withid(searchButton)click()assertEquals(Softwaretest specfindh1()withid(firstHeading)getinnerText())
specfinda()withinnerText(Quality)click()assertEquals(Softwarequalitat specfindh1()withid(firstHeading)getinnerText())
Testpublic void testOpenGoogle() throws Exception specopen(httpwwwgooglede)specjquery(input[name=rsquoqrsquo])setvalue(Testing)specfindinput()withname(btnG)click()assertTrue(specfinddiv()withid(res)finda()getinnerText()
startsWith(Softwaretesting))
Figure 35 ndash Exemple simple drsquoun test JUnit Watij WebSpec [7]
69
313 SAHI
Sahi est un outil open source drsquoautomatisation et de test drsquoapplications web En tant qursquooutil
drsquoautomatisation Sahi offre la possibiliteacute drsquoenregistrer et de lire des scripts Il prend en charge
Java et JavaScript Mecircme si SahiScript ressemble agrave JavaScript il nrsquoest pas exeacutecuteacute comme le
JavaScript normal dans le navigateur Lrsquoideacutee de base du fonctionnement de Sahi est deacutecrite
ci-dessous
les parties centrales de Sahi montreacutes dans la figure 37 incluent le serveur proxy Sahi et
le moteur JavaScript Les reacuteponses HTML qui transitent par le proxy sont modifieacutees de
telle sorte que JavaScript soit injecteacute au deacutebut et agrave la fin de la reacuteponse Cela permettra au
navigateur drsquoenregistrer et de lire les scripts et de communiquer avec le proxy en cas de
besoin En plus de la gestion des demandes de pages du navigateur Sahi gegravere eacutegalement les
commandes personnaliseacutees lieacutees agrave lrsquoenregistrement agrave la lecture etc envoyeacutees par celui-ci
Les fonctionnaliteacutes propres de Sahi font de lui un bon support des fichiers de base de donneacutees
supportant JavaScript AJAX ainsi que les API simples Outre ses fonctionnaliteacutes normales
agrave lrsquoeacutegard de la prise en charge de laquo ant raquo(lrsquooutil logiciel) Du fait que ses API ne deacutependent
pas beaucoup de la structure HTML le controcircleur Sahi (IDE) peut ecirctre utiliseacute dans diffeacuterents
navigateurs Sahi qui nrsquoutilise pas XPath renferme des API tels que _ near _in etc
lrsquoaidant agrave trouver un eacuteleacutement par rapport agrave un autre laquo SahiScript raquo est fondeacute sur JavaScript
Il est analyseacute par Sahi et exeacutecuteacute par le moteur JavaScript rhino La figure 36 illustre un
exemple de constructions (exemple drsquoeacutecriture de conditions) dans Sahi Elles sont identiques agrave
JavaScript hormis le $ obligatoire utiliseacute dans les variables
De plus tous les outils mentionneacutes ci-dessus (agrave lrsquoexception de Sahi) neacutecessitent un plugin
speacutecifique au navigateur pour fonctionner et ne supportent donc qursquoune poigneacutee de navigateurs
en geacuteneacuteral les laquo Big Five raquo (Firefox Safari IE Opera et Chrome) Cependant la part de marcheacute
70
Comparer des valeurs normalesif ($username == PartnerUser)
_click(_link(Partner Login))
Comparer avec les attributs du navigateur exposeacutes par Sahiif (_getText(_div(page_type)) == Partner Page)
_click(_link(Partner Login))
Comparaison avec les attributs du navigateur NON exposeacutes par les fonctions inteacutegreacutees de Sahi en utilisant _fetchif (_fetch(_link(0)href) == httpsahicoin)
_click(_link(Partner Login))
Comparaison avec les attributs du navigateur NON exposeacutes par les fonctions inteacutegreacutees de Sahi en utilisant _conditionif (_condition(_link(0)href == httpsahicoin))
_click(_link(Partner Login))
Figure 36 ndash Exemple de Sahi script [18]
Figure 37 ndash Architecture de Sahi (figure tireacutee de [21])
71
des navigateurs autres que ceux-ci eacutequivaut agrave 20 et srsquoeacutelegraveve agrave 63 pour les appareils autres
que les ordinateurs de bureau (tablettes consoles et mobiles) 6 En dehors de Sahi ces outils
de test nrsquoatteignent pas plus des trois quarts du marcheacute et pour certains seulement 25 pour
les appareils autres que les ordinateurs de bureau Par conseacutequent lrsquoaffirmation selon laquelle
laquo la plupart des utilisateurs raquo sont pris en charge par eux est agrave peu pregraves non fondeacutee
32 APPROCHE VISUELLE
Pour deacuteceler les deacutefauts dans la mise en page lrsquooutil principal deacuteployeacute par ce genre de
techniques est geacuteneacuteralement la vision par ordinateur Ces derniegraveres consistent entre autres en
la deacutelimitation des bordures des eacuteleacutements par la deacutetection des contours et en la deacutecouverte des
changements par le calcul de la diffeacuterence entre deux captures drsquoeacutecran dont les couleurs du
texte des arriegravere-plans seront compareacutees pour repeacuterer le texte illisible Au lieu drsquoagir sur des
informations speacutecifiques agrave la mise en page telles que la taille et la position des eacuteleacutements ces
techniques sont baseacutees sur la comparaison des captures drsquoeacutecran pixel par pixel Dans ce cas
les erreurs sous la forme drsquoune capture drsquoeacutecran sont signaleacutees et clairement marqueacutees
321 WEBSEE
Certains travaux ont eacutegalement eacuteteacute reacutealiseacutes sur lrsquoutilisation des techniques drsquoanalyse drsquoimage
pour identifier les problegravemes de mise en page [69] WebSee [58] est en particulier un outil
impleacutementeacute en Java qui utilise plusieurs bibliothegraveques tierces pour impleacutementer certains des
algorithmes speacutecialiseacutes Il applique des techniques du domaine de la vision par ordinateur pour
analyser la repreacutesentation visuelle des pages Web pour deacutetecter automatiquement et localiser
les eacutechecs de preacutesentation WebSee identifie les eacutechecs de preacutesentation puis deacutetermine les
6 En date de feacutevrier 2014 tel que reacutecupeacutereacute sur StatCounter httpgsstatcountercom
72
eacuteleacutements dans la source HTML de la page qui pourraient ecirctre responsables des eacutechecs observeacutes
en comparant la repreacutesentation visuelle de la page Web rendue sous test et son apparence
drsquoorigine (oracle)
A cette fin WebSee prend en entreacutee le code HTMLCSS de la page agrave analyser et un oracle
(une image) du rendu attendu de la page Un ensemble de diffeacuterences entre la page rendue
et lrsquoimage de reacutefeacuterence est calculeacute et ces diffeacuterences sont ensuite regroupeacutees en groupes
susceptibles de repreacutesenter diffeacuterents deacutefauts sous-jacents dans la page Une deuxiegraveme phase
de traitement tente drsquoidentifier les eacuteleacutements HTML correspondant aux pixels de diffeacuterence
qui sont ensuite ordonneacutes par une meacutetrique de prioriteacute et envoyeacutes agrave lrsquoutilisateur La figure
38 montre les diffeacuterentes phases de lrsquoapproche La premiegravere entreacutee est la page web (P) qui
devrait ecirctre analyseacute pour deacuteterminer les deacutefaillances de preacutesentation La forme de P est une
URL qui pointe vers soit un emplacement sur le reacuteseau ou drsquoun systegraveme de fichiers ougrave tous les
fichiers HTML CSS JavaScript et les fichiers meacutedias de P sont accessibles
La deuxiegraveme entreacutee est lrsquooracle (O) qui speacutecifie les proprieacuteteacutes drsquoexactitude visuels de P La
forme de O est une image qui peut ecirctre soit une maquette ou une capture drsquoeacutecran drsquoune version
correcte de P
La troisiegraveme entreacutee est un ensemble de reacutegions speacuteciales (SR) deacutefinissant des zones de O qui
contiendront du texte dynamique des annonces etc qui deacutefinissent les reacutegions dynamiques
communes dans les applications web modernes Les reacutegions speacuteciales fournissent un meacuteca-
nisme pour permettre aux deacuteveloppeurs de speacutecifier de telles reacutegions qui devraient ecirctre traiteacutees
speacutecialement
Lrsquoapproche comporte trois phases La premiegravere phase est la phase de la deacutetection elle compare
les repreacutesentations visuelles de P et O pour deacutetecter un ensemble de diffeacuterences soit dans
les reacutegions speacuteciales ou dans les autres parties de la page web Lrsquoensemble des diffeacuterences
73
identifieacute est regroupeacutees ensuite en groupes qui sont susceptibles de repreacutesenter des deacutefauts
sous-jacents dans P Pour ce faire WebSee exploite Selenium WebDriver pour prendre des
captures drsquoeacutecran et il exploite la bibliothegraveque laquo pdiff raquo qui est une bibliothegraveque perceptuelle
de diffeacuterenciation drsquoimage pour comparer les images et calculer les diffeacuterences Lrsquoalgorithme
de regroupement (clustering) DBSCAN (Density Based Spatial Clustering of Applications
with Noise) est utiliseacute pour regrouper les pixels de diffeacuterences (dbscan est un algorithme
impleacutementeacute dans la bibliothegraveque Apache Commons Math3)
La deuxiegraveme phase est la phase de localisation elle analyse une carte de rendu de P pour
identifier lrsquoensemble des eacuteleacutements HTML qui deacutefinissent les pixels de chaque ensemble
de diffeacuterences en cluster Pour cette eacutetape WebSee tire parti de la mise en œuvre de la
bibliothegraveque R-tree [50] et Selenium WebDriver pour extraire des informations de deacutelimitation
de rectangles
Enfin la troisiegraveme phase est la phase du traitement de lrsquoensemble du reacutesultat elle priorise
lrsquoensemble des eacuteleacutements identifieacutes pour chaque grappe et fournit cela comme une sortie pour
le deacuteveloppeur 39 La capaciteacute de recherche de sous-image pour lrsquoheuristique en cascade est
fournie par OpenCV
322 FLB (FIGHTING LAYOUT BUGS)
Une combinaison de lrsquoinjection CSS avec des techniques de diffeacuterentiation drsquoimage est
preacutesenteacutee par Tamm dans une preacutesentation Tech Talk de Google [69] en tant que moyen pour
deacutetecter quelle partie drsquoun site web est du texte et si elle chevauche drsquoautres eacuteleacutements frontiegraveres
Lrsquoapproche colore tout le texte sur une page Web en noir puis en blanc tout en prenant des
captures drsquoeacutecran entre les deux comme le montre la figure 310 Les parties de lrsquoimage qui sont
du texte sont localiseacutees en diffeacuterant les deux images Les lignes verticales et horizontales des
74
Figure 38 ndash Le fonctionnement geacuteneacuteral de lrsquooutil drsquoanalyse WebSee
Figure 39 ndash Outputs de WebSee eacuteleacutements HTML deacutefectueux
75
eacuteleacutements dans lrsquoimage reacutesultante sont deacutecouvertes via des techniques baseacutees sur le traitement
drsquoimage Une comparaison de ces lignes avec les eacuteleacutements de texte deacutecouverts agrave lrsquoeacutetape
preacuteceacutedente permet de deacuteterminer les cas ougrave le texte chevauche les bordures des eacuteleacutements La
mecircme technique permet aussi de deacuteterminer si les eacuteleacutements de texte ont le contraste approprieacute
agrave leur arriegravere-plan
Cependant cette technique ne fonctionne que pour le texte et drsquoautres eacuteleacutements qui peuvent
facilement ecirctre identifieacutes en utilisant des techniques baseacutees sur le traitement drsquoimage pour la
reconnaissance drsquoobjets Le champ drsquoapplication est petit car il se concentre exclusivement
sur le texte pour le chevauchement des eacuteleacutements
323 PHANTOMCSS
PhantomCSS [20] est un framework de test drsquointerface graphique open source qui possegravede la
capaciteacute de situer les changements drsquoune iteacuteration agrave une autre par des algorithmes diffeacuterant sur
deux images Drsquoautre part il permet drsquoexclure certaines parties de lrsquointerface graphique du
test Les pages Web susceptibles drsquoafficher des donneacutees non controcircleacutees par le deacuteveloppeur et
des eacuteleacutements tels que des annonces Web des donneacutees utilisateur des banniegraveres animeacutees des
images et du texte trouvent dans ces caracteacuteristiques un instrument beacuteneacutefique Le deacuteveloppeur
dans ce cas est obligeacute de speacutecifier manuellement les parties de lrsquointerface graphique non
concerneacutees par les tests en nommant lrsquoeacuteleacutement en question ou le speacutecifiant ses coordonneacutees x
et y
76
Figure 310 ndash Exemple de traitement drsquoimage avec FLB (figure tireacutee de [63])
77
324 SIKULI
Un autre framework drsquoautomatisation est Sikuli [39] qui identifie et manipule les controcircles
de lrsquointerface graphique dans une page web en utilisant la recherche par image (sub-image
searching) Les captures drsquoeacutecran constituent la base de cette approche visuelle pour la recherche
et lrsquoautomatisation des interfaces utilisateurs Elle permet aux utilisateurs
mdash de prendre une capture drsquoeacutecran drsquoun eacuteleacutement de lrsquointerface graphique (comme un bouton
de la barre drsquooutils une icocircne ou une boicircte de dialogue)
mdash drsquointerroger un systegraveme drsquoaide en faisant appel agrave la capture drsquoeacutecran au lieu du nom de
lrsquoeacuteleacutement
mdash de fournir eacutegalement une API de script visuel pour automatiser les interactions de
lrsquointerface graphique par lrsquointermeacutediaire des modegraveles de capture drsquoeacutecran pour diriger
les eacuteveacutenements de la souris et du clavier
Dans lrsquoexemple montreacute dans la figure 311 le bouton de fermeture doit effacer le contenu de la
zone de texte ainsi que lui-mecircme Supposons que lrsquointerface graphique soit deacutejagrave dans un eacutetat
qui contient un laquo 5 raquo au deacutebut nous trouvons la zone de texte bleue sur lrsquoeacutecran et stockons la
reacutegion correspondante qui a la plus grande similariteacute dans la zone bleue Ensuite apregraves avoir
cliqueacute sur le bouton de fermeture deux assertNotExist sont utiliseacutes pour veacuterifier la disparition
dans la zone bleue [39]
325 APPLITOOLS
La segmentation pure de lrsquoimage des pages Web et la comparaison visuelle pixel par pixel
sont agrave lrsquoorigine de lrsquooutil commercialiseacute AppliTools Eyes [2] qui offre une interaction des
scripts de test creacutees par lrsquoutilisateur et son application Dans cet outil le serveur Web est
78
Figure 311 ndash Exemple drsquoutilisation de Sikuli (figure tireacutee de [39])
chargeacute de teacuteleacutecharger les captures drsquoeacutecran en appliquant un algorithme de diffeacuterence drsquoimage
entre lui et une capture drsquoeacutecran preacuteceacutedente La diffeacuterence entre les deux images est traduite par
AppliTools par une deacutetection des reacutegressions dans une mise en page GUI Ces changements
dans une interface Web sont exploiteacutes par le deacuteveloppeur pour actualiser lrsquoimage de base dans
le cas ougrave le changement eacutetait intentionnel
Cependant cette approche est orienteacutee vers la deacutetection de bugs de type statique de chevau-
chement ou de deacutebordement des eacuteleacutements dans un document et actuellement ne supporte pas
la veacuterification de modegraveles temporels agrave travers plusieurs instantaneacutes de la mecircme page De plus
lrsquoapproche geacutenegravere beaucoup de faux positifs si la page rendue contient du texte leacutegegraverement
diffeacuterent de lrsquoimage de reacutefeacuterence Crsquoest le cas lorsque par exemple la fenecirctre du navigateur a
des dimensions diffeacuterentes et que le texte srsquoeacutecoule diffeacuteremment (mais pas neacutecessairement
incorrectement) par rapport agrave lrsquoimage Pour reacutesoudre ce problegraveme lrsquoutilisateur doit deacutefinir
manuellement pour chaque oracle ce que lrsquoon appelle des reacutegions dynamiques qui devraient
ecirctre ignoreacutees par le systegraveme lors de lrsquoanalyse de la page
79
33 APPROCHE DEacuteCLARATIVE
Les techniques dans cette derniegravere famille fonctionnent directement sur des informations sur
la mise en page Elles peuvent obtenir des informations sur les eacuteleacutements (position largeur
et hauteur) impliqueacutes dans lrsquointerface graphique que ce soit par analyse drsquoimage ou par
laquo siphonnage raquo (scraping) de lrsquointerface graphique Crsquoest drsquoailleurs ce que ces techniques ont
en commun La maniegravere de relier les diffeacuterents eacuteleacutements de mise en page les uns aux autres
ainsi que les valeurs de leurs paramegravetres de mise en page sont indiqueacutes par les entreacutees de ces
approches qui ne sont pas tant un script que des documents deacuteclaratifs
Les assertions opeacutereacutees sur lrsquointerface graphique peuvent par exemple ecirctre de la forme laquo lrsquoeacuteleacute-
ment 1 est-il situeacute agrave gauche de lrsquoeacuteleacutement 2 raquo ou laquo lrsquoeacuteleacutement 1 a-t-il une largeur infeacuterieure
agrave lrsquoeacuteleacutement 2 raquo Certaines de ces techniques ont des langages speacutecialiseacutes deacutecrivant des
assertions comme celles-ci
Les speacutecifications deacuteclaratives des interfaces utilisateurs ont fait lrsquoobjet de beaucoup de
recherches dans le passeacute Les premiegraveres tentatives incluent le systegraveme MASTERMIND qui
utilise un langage de modeacutelisation baseacute sur CORBA [67] drsquoautres approches incluent le
modegravele de mise en page drsquoAuckland [57] Adobe Adam et Eve [66] et les modegraveles de proprieacuteteacutes
[57]
331 MASTERMIND
Dans MASTERMIND le deacuteveloppeur de lrsquointerface utilisateur doit creacuteer des modegraveles de tacircche
(task model) drsquoapplication (domaine) et de preacutesentation Le modegravele drsquoapplication est speacutecifieacute
agrave lrsquoaide du langage de deacutefinition drsquointerface CORBA (IDL) Le modegravele de tacircche preacutesente les
tacircches de lrsquoutilisateur final dans une structure hieacuterarchique et comporte les informations de
80
commande neacutecessaires pour controcircler lrsquointerface utilisateur lors de lrsquoexeacutecution Le modegravele de
preacutesentation deacutecrit la disposition de lrsquointerface utilisateur y compris les affichages statiques
et dynamiques Il permet la speacutecification des mises agrave jour automatiques de preacutesentation
lorsque les donneacutees drsquoapplication ou le contexte de preacutesentation changent En outre il integravegre
des principes de conception graphique afin de donner un soutien complet au concepteur de
dialogue
332 AUCKLAND LAYOUT MODEL (ALM)
Le modegravele de mise en page drsquoAuckland (ALM) est une technique impleacutementeacute pour laquo NET raquo
Java et Haiku permettant de speacutecifier une mise en page 2D Elle est utiliseacutee pour organiser les
controcircles dans une interface graphique Le modegravele permet la speacutecification de contraintes baseacutees
sur lrsquoalgegravebre lineacuteaire Il calcule une disposition optimale en utilisant la programmation lineacuteaire
Les eacutegaliteacutes et les ineacutegaliteacutes lineacuteaires peuvent ecirctre speacutecifieacutees sur les tabulations horizontales et
verticales qui sont des lignes virtuelles formant une grille dans laquelle tous les eacuteleacutements de
lrsquointerface graphique sont aligneacutes [57]
Lrsquoexemple dans la figure 312 montre la maniegravere de disposer trois boutons en mobilisant
trois zones Les boutons ont deacutejagrave eacuteteacute ajouteacutes agrave la fenecirctre mais ils nrsquoont pas eacuteteacute arrangeacutes Leur
emplacement et leur taille sont deacutetermineacutes par la speacutecification ALM (figure 313) Quelque
soit le redimensionnement de la fenecirctre les deux colonnes auront toujours la mecircme largeur et
les deux lignes la mecircme hauteur en raison de la lineacuteariteacute des deux contraintes
81
Figure 312 ndash Exemple avec Auckland (figure tireacutee de [1])
LayoutSpec ls = new LayoutSpec ()XTab x1 = lsAddXTab ()YTab y1 = lsAddYTab ()
lsAddArea (lsLeft lsTop x1 y1 bouton1)lsAddArea (x1 lsTop lRight y1 bouton2)lsAddArea (lsLeft y1 lsRight lsBottom bouton3)
donne la mecircme largeur aux deux colonnes et la mecircme hauteur aux deux rangeacuteeslsAddConstraint (nouveau double [] 2 -1 nouvelle variable [] x1 lsRight
OperatorTypeEQ 0)lsAddConstraint (nouveau double [] 2 -1 nouvelle variable [] y1 lsBottom
OperatorTypeEQ 0)
Figure 313 ndash Une simple speacutecification avec Auckland [1]
82
333 ADOBE ADAM ET EVE
ASL (Adobe Source Libraries) est un projet au sein du Adobe Software Technology Lab
(STLab) Crsquoest un ensemble de bibliothegraveques de composants logiciels rendu disponible sous
licence Open Source par Adobe Systems permettant de deacutefinir des algorithmes sous forme
deacuteclarative Les deux premiegraveres bibliothegraveques significatives dans ASL sont la bibliothegraveque
de modegravele de proprieacuteteacutes (Adam) et la bibliothegraveque de modegravele de mise en page (Eve) dont
les composants permettent de modeacuteliser lrsquoapparence et le comportement drsquoune interface
dans une application logicielle Adam consiste en un solveur et un langage deacuteclaratif pour
deacutecrire les contraintes et les relations sur une collection de valeurs qui sont geacuteneacuteralement
les paramegravetres drsquoune commande drsquoapplication (une fonction) Adam fournit la logique qui
controcircle le comportement drsquoune interface Humaine (IH) Il est similaire dans son concept agrave une
feuille de calcul ou agrave un gestionnaire de formulaires Les valeurs sont deacutefinies et les valeurs
deacutependantes sont recalculeacutees Adam procure des fonctionnaliteacutes pour reacutesoudre les valeurs
interdeacutependantes mais il ne constitue pas un systegraveme de contrainte geacuteneacuteral Eve consiste
en un solveur et un langage deacuteclaratif pour la construction drsquoune IH Le solveur de mise en
page prend en compte une description riche des eacuteleacutements de 14 interfaces pour obtenir une
disposition de haute qualiteacute rivalisant avec ce qui peut ecirctre reacutealiseacute avec le placement manuel
Une seule description suffit pour plusieurs plateformes et langages OS Eve a eacuteteacute deacuteveloppeacutee
pour fonctionner avec Adam il peut cependant aussi ecirctre utiliseacutee seule Adam et Eve peuvent
ecirctre inteacutegreacutees dans un certain nombre drsquoenvironnements Ils ont la faculteacute de fonctionner
ensemble ou indeacutependamment mais ils doivent ecirctre combineacutes avec drsquoautres installations
pour construire une application Parmi les exemples typiques drsquointerfaces utilisateur effectuant
la synthegravese de paramegravetres de commande la boicircte de dialogue laquo Enregistrer sous raquo dans le cas
drsquoenregistrement drsquoun fichier image (figure 314) Elle se compose drsquoun champ de texte pour
entrer le nom du fichier un menu de types de fichiers et des curseurs offrant deux possibiliteacutes
83
Figure 314 ndash Exemple drsquoune boicircte de dialogue pour enregistrer un fichier image
pour configurer la compression lors de lrsquoenregistrement dans un format qui le prend en charge
Les valeurs des curseurs sont lieacutees par une relation exprimant le compromis entre le taux de
compression et la qualiteacute de lrsquoimage
La boicircte de dialogue aide lrsquoutilisateur agrave syntheacutetiser les paramegravetres drsquoune commande drsquoenre-
gistrement de fichier La figure 315 montre une speacutecification pour cette tacircche de synthegravese de
paramegravetres de commande eacutecrite dans le langage deacuteclaratif speacutecifique de laquo Adam raquo Dans 315
les sections laquo interface raquo laquo output raquo et laquo invariant raquo deacuteclarent les variables ou les proprieacuteteacutes
du modegravele de proprieacuteteacutes Les variables drsquointerface peuvent ecirctre mises agrave jour par un client du
modegravele de proprieacuteteacute par exemple agrave la suite de lrsquointeraction drsquoun utilisateur avec un widget
drsquointerface utilisateur Les valeurs des variables de sortie (output) constituent le reacutesultat de la
synthegravese des paramegravetres de commande La valeur (booleacuteenne) des variables invariantes indique
si un ensemble de variables satisfait une condition donneacutee La section laquo logique raquo dans 315
deacutefinit toujours les deacutependances et les regravegles de calcul entre les variables Le langage pour
ces calculs est le langage drsquoexpression ASL qui peut faire des appels aux fonctions externes
84
sheet save image file interface
file name file type rdquobmprdquocompression ratio 100image quality 100
logicrelate compression ratio lt== 100 - 4 x (100 - image quality)image quality lt== 100 - (100 - compression ratio) 4
outputresult lt== (file type == rdquojpegrdquo) type file type name file name ratio compression ratio type file type name file name
invariant check name lt== file name 6= rdquo rdquo
Figure 315 ndash Une simple speacutecification deacuteclarative dans le langage Adam du modegravele de proprieacuteteacutepour le dialogue dans Figure314 [56]
enregistreacutees (C ++) et peut ainsi effectuer des actions arbitraires La tacircche du programmeur de
lrsquoapplication est de deacutefinir ces calculs appeleacutes meacutethodes et qui sont exeacutecuteacutees est controcircleacutees
par le modegravele de proprieacuteteacutes
Le langage laquo Eve raquo peut ecirctre utiliseacute pour speacutecifier la disposition et la qualiteacute de preacutesentation
des eacuteleacutements drsquointerface ainsi que les liaisons entre les widgets dans lrsquointerface utilisateur et
les valeurs dans le modegravele de proprieacuteteacute La speacutecification de disposition pour le dialogue de la
figure 314 apparaicirct dans la figure 316
Nous allons cependant les rejeter ainsi que beaucoup drsquoautres langages de balisage GUI
(QML XAML) car ils visent agrave geacuteneacuterer des interfaces baseacutees sur des contraintes et ne peuvent
pas ecirctre utiliseacutes comme des assertions agrave tester de plus ils se concentrent principalement sur
la reacutesolution de contraintes lineacuteaires relatives agrave la taille et au placement des eacuteleacutements dans un
formulaire
85
layout save image file view dialog(name rdquoSave Image Asrdquoplacement place columnspacing 6child horizontal align fill) edit text(bind file name name rdquoFile namerdquo)popup(bind file type name rdquoSave as typerdquo items [
name rdquoWindows bitmap (bmp)rdquo value rdquobmprdquo name rdquoJPEG (jpeg)rdquo value rdquojpegrdquo
])row()
column(child horizontal align right) label(name rdquoCompression ratiordquo)label(name rdquoImage qualityrdquo)
column(horizontal align fill child horizontal align fill)
slider(bind compression ratioformat first 1 last 100 interval 1 )
slider(bind image qualityformat first 1 last 100 interval 1 )
row(horizontal align right) button(name rdquoSaverdquo action ok bind result
default true)button(name rdquoCancelrdquo action cancel)
Figure 316 ndash Une simple speacutecification avec Eve [56]
86
Pour montrer pourquoi les langages de geacuteneacuteration de GUI ne sont pas approprieacutes consideacute-
rons lrsquoexemple simple de CSS Comme nous lrsquoavons vu plus haut CSS exprime agrave quoi les
eacuteleacutements devraient ressembler (suggestions) mais pas comment ils vont lrsquoecirctre Consideacuterez les
deacuteclarations de style suivantes dans le cas ougrave un eacuteleacutement div2 est imbriqueacute dans div1
div1 width 200px div2 width 300px
Il nrsquoest pas possible avec CSS drsquoaffirmer que le contenu de div1 ne devrait jamais ecirctre plus
large que sa propre largeur deacuteclareacutee Si tel est le cas le navigateur peut soit deacutevelopper la boicircte
de lrsquoeacuteleacutement (sans tenir compte de sa deacuteclaration) soit afficher les eacuteleacutements en dehors de son
conteneur (un problegraveme dont nous avons beaucoup parleacute dans la section 22) La seule solution
consiste pour le concepteur du document CSS agrave srsquoassurer que la largeur deacuteclareacutee de tous les
eacuteleacutements qui seront contenus dans div1 est infeacuterieure agrave 200 pixels En revanche une proprieacuteteacute
deacuteclarative pourrait facilement imposer agrave lrsquoexeacutecution que la largeur de div1 est toujours de
200 pixels
On pourrait argumenter que cela peut aussi ecirctre veacuterifieacute en analysant statiquement le document
HTML avec le fichier CSS (bien qursquoaucun travail apparenteacute ne semble reacutepondre agrave cette
question) Il y a cependant des cas ougrave ce nrsquoest mecircme pas possible Si nous supprimons la
deacuteclaration de div2 dans lrsquoexemple ci-dessus mais que div2 contient une image de 300 pixels
de large il est impossible de deacutecouvrir que la proprieacuteteacute deacutesireacutee nrsquoest pas satisfaite en regardant
simplement le CSS
En guise drsquoexemple final consideacuterons le code suivant qui stipule que les eacuteleacutements de certains
menus doivent ecirctre placeacutes verticalement et que leur taille est fixe
menu li float left
87
width 200pxheight 50px
Rien ne permet au concepteur de speacutecifier que tous les eacuteleacutements doivent toujours ecirctre sur la
mecircme ligne (c-agrave-d Avoir la mecircme position top) (mecircme si la valeur de top est deacutefinie) Ce
ne sera pas le cas si la fenecirctre contenant est redimensionneacutee suffisamment petite pour que les
eacuteleacutements puissent flotter en dessous Dans un tel cas il faut effectivement rendre la page dans
un navigateur avec ses dimensions reacuteelles pour deacutecouvrir la preacutesence du problegraveme
334 GALEN FRAMEWORK
Galen Framework [10] est une bibliothegraveque de tests drsquointerfaces graphiques pour tester les
mises en page drsquoapplications web Le comportement mutuel entre les diffeacuterents eacuteleacutements
drsquoune interface graphique et le type de paramegravetres de mise en page valides sont deacutecrits
par des descriptions de mise en page creacutees par lrsquoutilisateur La veacuterification de la validiteacute
de lrsquoemplacement et la taille des eacuteleacutements est reacutealiseacutee par un test oracle en utilisant ces
descriptions
Pour deacuteclarer divers aspects de la position et de la taille drsquoun eacuteleacutement par rapport agrave drsquoautres
eacuteleacutements ou en valeurs absolues le deacuteveloppeur de test utilise un langage de description de
test personnaliseacute fourni par le framework Galen Galen est baseacute sur un outil drsquoautomatisation
de navigateur web appeleacute Selenium qui permet de creacuteer des scripts automatiseacutes simulant les
entreacutees de lrsquoutilisateur Il permet eacutegalement de speacutecifier des plages de valeurs acceptables La
figure 317 montre un exemple de ce agrave quoi ressemble une speacutecification Galen [9]
Le test de reacutegression des mises en page drsquoapplications web est entiegraverement automatiser par
le framework Galen en combinant ces deux technologies Des informations preacutecises sur les
88
valeurs valides pour les eacuteleacutements de lrsquointerface eacutetant neacutecessaires au fichier de speacutecification
requis par le framework Galen cette opeacuteration peut ecirctre coucircteuse et rendre la modification
drsquoune interface graphique plus difficile
Un regard sur le langage de speacutecification de Galen indique que le travail requis par le deacute-
veloppeur de test est similaire agrave la speacutecification de lrsquointerface graphique elle-mecircme Les
speacutecifications de Galen et la conception GUI elle-mecircme sont effectueacutees avec agrave peu pregraves la
mecircme freacutequence Lrsquoinconveacutenient est la flexibiliteacute reacuteduite et lrsquoaugmentation des coucircts Cepen-
dant lrsquoapproche permet une grande preacutecision lors de la reacutealisation des tests de reacutegression et la
veacuterification de la fonctionnaliteacute de la conception sur diffeacuterentes tailles drsquoeacutecran
335 ITARRAY AUTOMOTION
Le framework Automotion drsquoITArray [70] est similaire au framework Galen La diffeacuterence
par rapport agrave beaucoup drsquoautres frameworks est que la bibliothegraveque drsquoassertions permet
reacuteellement drsquoaffirmer si la position et lrsquoalignement des eacuteleacutements sont lieacutes les uns aux autres
avec des appels tels que is ElementInside (otherElement) ou areElementsAligned
(List) La faccedilon dont ces tests sont speacutecifieacutes est encore tregraves verbeuse Un exemple de script
Automotion est illustreacute agrave la Figure 318
34 OUTILS RWD
Il est toujours judicieux de tester la conception drsquoun site web sur divers appareils Mais
cette meacutethode classique prend beaucoup de temps et en raison de la varieacuteteacute des dispositifs
disponibles aujourdrsquohui le deacuteveloppeur peut ne pas avoir accegraves agrave tous ces dispositifs Plusieurs
outils ont eacuteteacute deacuteveloppeacutes pour fournir le service permettant drsquoafficher une page dans une
89
Declaring objects with css and xpath locatorsobjects
header css divfusion-secondary-headersw-logo css fusion-logo-link
navigation-links- xpath ul[id=rsquomenu-mainrsquo]li[not((contains(idrsquomobile-menu-itemrsquo)))]nav-menu css divfusion-secondary-main-menufollow-us-box xpath div[contains(classrsquofusion-alertrsquo)][1]
Home Page Tag= Home Page =
This is for Desktopon desktop
Header propertiesheader
inside screen 0px topinside screen 0px leftinside screen 0px right
Logo propertiessw-logo
31 px below the headerbelow header 31pxImage comparison with 2 precision ratioimage file sw-logopng error 5
Each navigation links must be alligned horizontally to each otheritemName -gt Current item and nextItem -gt Next itemforEach [navigation-links-] as itemName next as nextItem
$itemNamealigned horizontally all $nextItem
Navigation menu must be 20px above to the follow us allert boxnav-menu
above follow-us-box 20px
Figure 317 ndash Exemple drsquoune speacutecification Galen [9]
90
boolean result = uiValidatorinit(Scenario name)findElement(rootElement Name of eacuteleacutement we validate)sameOffsetLeftAs(eacuteleacutement Panel 1)sameOffsetLeftAs(eacuteleacutement Button 1)sameOffsetRightAs(eacuteleacutement Button 2)sameOffsetRightAs(eacuteleacutement Button 3)withCssValue(border 2px solid FBDCDC)withCssValue(border-radius 4px)withoutCssValue(color FFFFFF)sameSizeAs(list_eacuteleacutements)insideOf(eacuteleacutement Container)notOverlapWith(eacuteleacutement Other eacuteleacutement)withTopElement(eacuteleacutement 10 15)changeMetricsUnitsTo(ResponsiveUIValidatorUnitsPERCENT)widthBetween(50 55)heightBetween(90 95)drawMap()validate()
Figure 318 ndash Exemple drsquoun script Automotion [70]
fenecirctre personnaliseacutee de tailles variables agrave lrsquoaide drsquoun navigateur Web Cependant ces outils
ne fournissent aucune information autre que le rendu des pages sur diffeacuterentes tailles ce
qui oblige le deacuteveloppeur agrave eacutevaluer la reacuteactiviteacute (responsiveness) du site web manuellement
Mentionnons ici quelques outils speacutecifiques agrave la deacutetection de problegravemes lieacutes au RWD
Avec des fonctionnaliteacutes de recherche intelligente et de reacutevision rapide WebSiteResponsi-
veTest [34] prend en charge tous les principaux navigateurs pour fournir lrsquoaperccedilu exact du
site web sur un peacuteripheacuterique speacutecifique Il faut entrer lrsquoURL drsquoune page Web pour eacutevaluer
rapidement la reacuteactiviteacute En fournissant des reacutesultats preacutecis en quelques secondes lrsquooutil
eacuteconomise beaucoup de temps La convivialiteacute et la compatibiliteacute avec les navigateurs sont
drsquoautres fonctionnaliteacutes qui le rendent attractif par rapport aux autres outils disponibles
Respondr [22] permet de veacuterifier la reacuteactiviteacute en entrant lrsquoURL drsquoun site web En outre
lrsquoappareil pour lequel le site web ou la page Web est testeacute peut eacutegalement ecirctre choisi dans la
91
liste donneacutee Une fois les seacutelections effectueacutees un simple clic sur laquo Go raquo est neacutecessaire pour
recevoir une analyse complegravete du site ou de la page web en donnant lrsquoaffichage sur lrsquoappareil
seacutelectionneacute La page peut ecirctre facilement preacutevisualiseacutee agrave une largeur approprieacutee
Screenfly [27] est un outil de test de compatibiliteacute multi-peacuteripheacuterique qui permet de preacutevisua-
liser les pages Web telles qursquoelles apparaissent sur diffeacuterents appareils Les plus populaires
comprennent les tablettes et autres appareils intelligents tels que Galaxy Tab Apple iPad
Motorola Xoom En outre il prend en charge diffeacuterentes tailles drsquoeacutecran et reacutesolutions Le site
deacutetecte automatiquement si lrsquoURL saisie comporte un site mobile et vous redirige vers celui-ci
Pour basculer entre les reacutesolutions drsquoeacutecran tout ce qursquoil faut faire est de cliquer sur lrsquoicocircne du
type drsquoappareil ou choisir lrsquoappareil qui a la reacutesolution drsquoeacutecran la plus proche
Responsive Web Design Bookmarklet [26] affiche nrsquoimporte quelle page Web dans plusieurs
tailles drsquoeacutecran pour la preacutevisualisation simulant la fenecirctre drsquoaffichage de diffeacuterents peacuteripheacute-
riques Il srsquoagit drsquoun outil de conception Web rapide qui peut ecirctre consulteacute agrave partir drsquoun
ordinateur de bureau pour tester la reacuteactiviteacute de tout site web Il suffit de faire glisser le
bookmarklet au-dessus de la barre des signets (bookmarks) pour obtenir une barre drsquooutils
en haut avec des boutons pour diffeacuterentes reacutesolutions drsquoeacutecran Il ne reste plus qursquoagrave choisir
lrsquoaperccedilu de la page en cours sur diffeacuterentes largeurs drsquoeacutecran de tablettes et de smartphones
ViewPortResizer [31] est eacutegalement un bookmarklet de navigateur qui peut ecirctre utiliseacute avec
nrsquoimporte quel navigateur Web moderne Un outil de navigation convivial ViewPortResizer
est entiegraverement configurable Il permet la seacutelection drsquoune plage initiale de tailles de reacutesolution
drsquoeacutecran et la construction drsquoun bookmarklet personnaliseacute
Responsinator [23] aide les proprieacutetaires de sites agrave avoir une ideacutee de la faccedilon dont leur
site fonctionnera sur les appareils les plus populaires Juste en tapant lrsquoURL du site le site
srsquoaffichera rapidement sur des eacutecrans de diffeacuterent(e)s tailles
92
Le processus de ResponsivePX [24] consiste agrave entrer lrsquoURL du site et utiliser des boutons
pour ajuster la largeur et la hauteur de la fenecirctre drsquoaffichage afin de trouver la largeur exacte
du point drsquoarrecirct en pixels Extrecircmement simple agrave utiliser et agrave ameacuteliorer les fonctionnaliteacutes cet
outil de conception Web aide les concepteurs agrave creacuteer des sites utilisables et reacuteactifs
Froont [8] rend les tests de conception Web reacuteactifs accessibles sans neacutecessiteacutes de compeacutetences
de codage Les conceptions peuvent ecirctre creacutees dans le navigateur avec cet outil En testant
chaque URL speacutecifiquement il teste les conceptions sur de vrais appareils tout de suite
De son cocircteacute ReDeCheck [74] [73] est un outil de test de conception web reacuteactif Il est inspireacute
du graphe drsquoalignement utiliseacute dans X-PERT un concept proposeacute et deacuteveloppeacute par Choudhary
et al [42] ReDeCheck se concentre speacutecifiquement sur les bugs de mise en page causeacutes par
des conceptions reacuteactives il utilise un graphique de mise en page adaptable (RLG) qui tient
compte de lrsquoalignement des eacuteleacutements de la page Web des changements de visibiliteacute et drsquoautres
aspects de la page lorsque la largeur de la fenecirctre varie En tant que tel ReDeCheck peut
seulement veacuterifier un ensemble fixe de problegravemes de mise en page preacutedeacutefinis et ne fournit pas
un langage agrave usage geacuteneacuteral pour exprimer des assertions
35 DISCUSSION SUR LES APPROCHES EXISANTES
Nous allons maintenant discuter quelques limites des approches preacuteceacutedemment preacutesenteacutees
351 INCONVEacuteNIENTS DE LrsquoAPPROCHE DEacuteCLARATIVE
Le deacuteveloppeur de test doit se soumettre aux exigences des descriptionsscripts de test assez
verbeux en deacutecrivant les regravegles de son interface graphique (comment les eacuteleacutements sont-ils
placeacutes les uns par rapport aux autres comment ils devraient se comporter quand la taille de
93
la fenecirctre change etc) de faccedilon plus deacutetailleacutee au point ougrave le script de test devient presque
aussi descriptif que le code de lrsquointerface graphique qursquoil teste A lrsquoinstar des scripts de test
ce problegraveme neacutecessitera des mises agrave jour agrave peu pregraves au mecircme rythme que les modifications
apporteacutees agrave la conception de lrsquointerface graphique
352 LIMITES DES TECHNIQUES VISUELLES
Impossible de comparer des images de diffeacuterentes tailles drsquoeacutecran Le fait drsquoassurer lrsquoeacutega-
liteacute et la validiteacute entre une image de reacutefeacuterence (oracle) et lrsquoimage agrave tester par la diffeacuterence de
couleur de pixel implique que celles-ci ne peuvent pas ecirctre des captures drsquoeacutecran de tailles
drsquoeacutecran diffeacuterentes ce qui exclut lrsquoutilisation de lrsquoimage de reacutefeacuterence agrave partir drsquoune taille
drsquoeacutecran pour veacuterifier la validiteacute de la mise en page sur une taille drsquoeacutecran diffeacuterente La validiteacute
de la mise en page drsquoune application censeacutee fonctionner sur de nombreuses tailles drsquoeacutecran
diffeacuterentes par ces techniques exige drsquoeacutetablir des reacutefeacuterences pour toutes les tailles drsquoeacutecran
Ne fonctionne pas bien avec les donneacutees dynamiques Ces techniques baseacutees sur lrsquoimage
et travaillant sur lrsquoinformation de pixel au lieu du contenu ne donnent des reacutesultats satisfaisants
qursquoavec des donneacutees statiques (parce qursquoon utilise une image de reacutefeacuterence pour faire la
comparaison) Par conseacutequent elles posent un problegraveme majeur Chaque exeacutecution drsquoune
application correspond souvent agrave un affichage du contenu diffeacuterent puisque ces donneacutees sont
geacuteneacuteralement reacutecupeacutereacutees sur un serveur Web ou creacutees par lrsquoutilisateur mdashce qui diminue
fortement lrsquoutiliteacute de ces techniques
Signalent beaucoup de faux positifs Une diffeacuterence dans les valeurs de pixels de deux
captures drsquoeacutecran conseacutecutives peut entre constateacutee notamment si ces captures sont prises
sur des machines diffeacuterentes avec des configurations diffeacuterentes drsquoougrave lrsquoinconveacutenient des
94
Figure 319 ndash Exemple de faux positif avec PhantomCSS
techniques baseacutees sur les diffeacuterences drsquoimages qui sont sujettes agrave la deacuteclaration de faux positifs
comme indiqueacute sur le site web du reacutefeacuterentiel PhantomCSS [20] Ces petites diffeacuterences de
pixels sont parfois faussement signaleacutees par lrsquoalgorithme de test comme des erreurs de mise
en page cependant elles ne le sont pas reacuteellement La figure 319 montre un exemple de ce
cas ougrave nous pouvons observer de petites zones de pixels violets (nous avons marqueacutees ces
petites zones avec des rectangles rouges) ces images ressemblent aux images de base qui
sont entoureacutees de rectangles jaunes En reacutealiteacute ce sont pas des erreurs mais des faux neacutegatifs
rapporteacutes en raison de petites diffeacuterences de pixels dans des rendus diffeacuterents (cela pourrait
ecirctre ducirc agrave lrsquoutilisation de diffeacuterents navigateurs)
En conclusion le tableau 31 donne les grandes lignes de diffeacuterences entre trois outils majeurs
des approches existantes
95
Sahi Selinium Websee
Pas de plugin (so-lution proxy web) Plugin speacutecifique pour chaque navigateur
Configurationspeacutecifique etbibliothegravequestierces pourimpleacutementercertains desalgorithmesspeacutecialiseacutes
Tests fonctionelsdes eacuteleacutements de lapage baseacute sur letrafique HTTP en-registreacute au niveaudu proxy (play-back)
Tests fontionels
Tests de mise enpage en se ba-sant sur une ver-sion de reference(juste pour despages statiques)
Tableau 31 ndash Limites et diffeacuterences entre trois outils majeurs des approches existantes
CHAPITRE 4
DEacuteTECTION DE BUGS DrsquoINTERFACE
Comme nous avons pu le voir une analyse statique du contenu HTML et des deacuteclarations
CSS drsquoune page web nrsquoest pas suffisante pour deacutetecter les bugs drsquointerface citeacutes dans le
deuxiegraveme chapitre de cette thegravese car CSS nrsquoest pas un langage qui peut exprimer des proprieacuteteacutes
normatives pour la mise en page drsquoun document Les deacuteclarations CSS sont juste un ensemble
drsquoinstructions traiteacutees par un moteur de rendu Donner agrave CSS une expressiviteacute prescriptive
impliquerait la possibiliteacute de speacutecifier agrave quoi un eacuteleacutement ne doit pas ressembler ou qursquoune
deacuteclaration de style particulier ne peut pas ecirctre remplaceacutee par drsquoautres constructions ndashce
que le CSS ne fournit pas En outre certains des bugs deacutecrits preacuteceacutedemment impliquent la
comparaison du contenu drsquoun document agrave plusieurs moments dans le temps une chose que
CSS nrsquoest pas eacutevidemment conccedilu pour faire
Par conseacutequent afin drsquoexprimer des proprieacuteteacutes normatives pour le contenu et la mise en page
drsquoune page web un langage compleacutementaire agrave CSS est neacutecessaire Ce langage doit permettre
aux utilisateurs drsquoeacutecrire des proprieacuteteacutes deacuteclaratives sur les styles des eacuteleacutements et de traiter
des eacuteveacutenements quelles que soient les deacuteclarations CSS ou le code cocircteacute client qui ont pu ecirctre
deacuteclareacutees
Pour combler cette neacutecessiteacute dans ce chapitre nous preacutesentons Cornipickle un langage
97
deacuteclaratif permettant drsquoexprimer des proprieacuteteacutes agrave propos du document et des proprieacuteteacutes CSS
drsquoune page On discutera eacutegalement drsquoune impleacutementation drsquoun algorithme permettant de
veacuterifier automatiquement si des eacutenonceacutes du langage sont vrais pour un site web particulier
41 UN INTERPREacuteTEUR POUR LES PROPRIEacuteTEacuteS CORNIPICKLE
Nous deacutecrivons maintenant la mise en œuvre de lrsquointerpreacuteteur pour lrsquoeacutevaluation automatiseacutee
des speacutecifications Cornipickle sur les applications web Cette impleacutementation est composeacutee
drsquoenviron 7 000 lignes de code Java et JavaScript et est disponible sous licence publique
geacuteneacuterale GNU 1 Une videacuteo de lrsquooutil en action sur des exemples simples peut eacutegalement ecirctre
consulteacutee en ligne 2
411 OBJECTIFS DE CONCEPTION
Outre la fonctionnaliteacute principale agrave mettre en œuvre le deacuteveloppement de lrsquooutil a eacuteteacute motiveacute
par un certain nombre drsquoobjectifs de conception importants
Pas de plugins speacutecifiques au navigateur
Tout drsquoabord la solution doit fonctionner sur autant de combinaisons de navigateurs et de
systegravemes drsquoexploitation que possible Ceci exclut explicitement les plugins speacutecifiques au
navigateur (ou limiteacutes par le navigateur) tels que les plugins Chrome les plugins Firefox
ou lrsquoutilisation drsquooutils tels que Selenium WebDriver Pour la mecircme raison la solution ne
doit pas reposer sur la preacutesence de frameworks JavaScript (jQuery Prototype etc) et ecirctre
1 httpsgithubcomliflabcornipickle2 httpyoutube90YitGRRx2w
98
autonome Cela implique que notre outil peut fonctionner dans des combinaisons inhabituelles
(navigateurssystegravemes drsquoexploitation) comme BoatBrowser sur un teacuteleacutephone Android ou
Qupzilla sous Haiku OS
Collecte drsquoinformations cocircteacute client
Deuxiegravemement lrsquoeacutevaluation des speacutecifications doit ecirctre faite en fonction des informations
recueillies sur le client cela eacutecarte la possibiliteacute drsquoeffectuer une eacutevaluation statique de HTML
et CSS du cocircteacute serveur Ceci est obligatoire pour plusieurs raisons Il faut tenir compte du
fait que le standard CSS nrsquoest pas interpreacuteteacute de la mecircme maniegravere par tous les navigateurs Par
exemple CSS stipule que la largeur drsquoun eacuteleacutement nrsquoinclut pas le remplissage mais certaines
versions drsquoInternet Explorer incluent le remplissage dans la largeur et rendent le mecircme eacuteleacutement
avec des dimensions diffeacuterentes
Dans une large mesure la veacuterification des contraintes en examinant uniquement le code
HTML + CSS impliquerait drsquoeacutemuler le moteur de rendu de chaque navigateur compleacuteteacute par
ses laquo bizarreries raquo speacutecifiques pour parvenir agrave un verdict fidegravele
En plus des problegravemes susmentionneacutes toutes les applications que nous avons eacutetudieacutees
contiennent du code cocircteacute client qui peut modifier la disposition drsquoune page apregraves que le
moteur de mise en page a traiteacute les deacuteclarations statiques trouveacutees dans le document HTML
initial et les fichiers CSS traiteacutes au moment du chargement Ce code programmeacute pour ecirctre
exeacutecuteacute lors du chargement de la page remplace complegravetement les deacuteclarations de style que
les fichiers CSS drsquoorigine peuvent initialement deacutefinir Par conseacutequent dans tous les cas il ne
suffit pas drsquoanalyser lrsquoensemble des fichiers HTML et CSS deacutefinis par lrsquoapplication car tout
ce contenu peut ecirctre modifieacute agrave la voleacutee gracircce agrave des interactions avec lrsquoutilisateur une fois la
page chargeacutee
99
Pas drsquointerpreacutetation cocircteacute client
Troisiegravemement lrsquointerpreacutetation des speacutecifications de Cornipickle ne devrait pas ecirctre faite du
cocircteacute des clients Ceci est fait de maniegravere agrave ne pas imposer une charge de calcul excessive
dans le navigateur et permet lrsquoutilisation drsquoun autre langage que JavaScript pour lrsquoimpleacute-
mentation de cette fonctionnaliteacute Plus important encore il permet de geacuterer les proprieacuteteacutes
comportementales impliquant plus drsquoun instantaneacute de page par lrsquooutil En utilisant du code
strictement client un problegraveme survient lorsqursquoun rechargement de page complet se produit
car cela reacuteinitialise lrsquoeacutetat de tout objet JavaScript associeacute agrave cette page Eacutetant donneacute que les
speacutecifications comportementales requiegraverent la sauvegarde des informations du passeacute certains
moyens de preacuteserver ces informations dans le client agrave travers les rechargements de pages
doivent ecirctre conccedilus HTML5 fournit des fonctionnaliteacutes de stockage mais leur utilisation
limiterait la prise en charge des navigateurs (par exemple uniquement pour Opera 115 Safari
4 et IE 9 et plus reacutecents 3)
Interpreacutetation de lrsquoexeacutecution
Enfin il devrait ecirctre possible pour un utilisateur drsquoajouter de supprimer ou de modifier les
speacutecifications eacutevalueacutees par lrsquooutil Cela pose un deacutefi en raison de la construction speacuteciale We
say that qui permet drsquoajouter de nouvelles constructions grammaticales dans le langage de
base Ceci est diffeacuterent des deacutefinitions de fonction ou de preacutedicat habituelles disponibles dans
la plupart des langages ougrave la syntaxe des appels de fonctions est fixe et seuls de nouveaux
identificateurs de fonctions peuvent ecirctre ajouteacutes au moment de lrsquoanalyse Cela a neacutecessiteacute le
deacuteveloppement drsquoun analyseur BNF appeleacute Bullwinkle 4 qui peut accepter de nouvelles regravegles
3 httpwwwhtml5rockscomenfeaturesstorage4 httpsgithubcomsylvainhalleBullwinkle
100
Figure 41 ndash Architecture et interactions de Cornipickle
drsquoanalyse agrave lrsquoexeacutecution mdashcontrairement agrave la plupart des autres analyseurs qui neacutecessitent une
eacutetape de compilation chaque fois que la grammaire change
412 ARCHITECTURE ET SCEacuteNARIO DrsquoUTILISATION TYPIQUE
La combinaison de toutes les exigences dans [51] impose plus ou moins une architecture pour
lrsquooutil Cornipickle ougrave le code cocircteacute serveur prend en charge la collecte et lrsquoeacutevaluation des
speacutecifications (caracteacuteristiques) tandis que le code cocircteacute client agit uniquement comme une
laquo sonde raquo Lrsquointerrogation des informations pertinentes sur lrsquoeacutetat actuel de la page est relayeacutee
vers le serveur pour un traitement ulteacuterieur Cette interaction client-serveur a un avantage
cependant le code cocircteacute client peut ecirctre relativement leacuteger et sans eacutetat (ecirctre remis agrave zeacutero agrave
chaque fois que la page se recharge) comme tout traitement agrave eacutetat qui peut ecirctre fait par le
serveur
La figure 41 montre les interactions avec lrsquooutil Cornipickle Un deacuteveloppeur eacutecrit drsquoabord un
jeu drsquoeacutetats deacuteclaratifs (1) qui sont stockeacutes dans la meacutemoire de Cornipickle (2) En donnant
101
tagname windowwidth 956height 165 children [
tagname pid gowidth 90 children [
tagname CDATA text Hello World
]
]
Figure 42 ndash Une page simple seacuterialiseacutee en JSON
un identifiant unique agrave ce jeu drsquoeacutetats qui peut ecirctre appeleacute dans le code JavaScript agrave ecirctre
inseacutereacute dans lrsquoapplication afin que la sonde peut ecirctre chargeacutee dans chaque page (3-4) cette
addition est geacuteneacuterique et ne diffegravere que dans la chaicircne drsquoidentification Quand une page
de lrsquoapplication doit ecirctre chargeacutee (5) Cornipickle creacutee dynamiquement la sonde JavaScript
correspondant agrave lrsquoensemble drsquoassertions pour les eacutevaluer et les envoyer au client (6-8) Cette
sonde est conccedilue pour signaler un instantaneacute des donneacutees DOM et CSS pertinents sur chaque
eacuteveacutenement deacuteclencheacute par lrsquoutilisateur Quand un tel eacuteveacutenement se produit la sonde recueille
toutes les informations pertinentes sur le contenu de la page (figure 42) et les relaie au serveur
Cornipickle (9) qui les enregistre dans un journal (10-11)
En option des informations sur lrsquoeacutetat actuel des assertions en cours drsquoeacutevaluation (vrai
faux) peuvent ecirctre relayeacutees agrave la sonde (12) Un tableau de bord drsquoanalyse peut reacutecupeacuterer le
journal enregistreacute qui peut ecirctre consulteacute par le deacuteveloppeur pour interroger lrsquoeacutetat de toutes les
102
Figure 43 ndash Une capture drsquoeacutecran de Cornipickle en action
proprieacuteteacutes drsquoentreacutee au deacutebut du processus (13-16)
La figure 43 montre un exemple de Cornipickle en action Dans ce cas la sonde injecteacutee a
inseacutereacute une petite icocircne dans le coin infeacuterieur droit de la fenecirctre qui devient rouge chaque fois
qursquoune proprieacuteteacute est violeacutee Pour contourner le fait que de nombreux navigateurs deacutesactivent
les requecirctes HTTP inter-site Ajax nrsquoest pas utiliseacute pour la communication entre le client et le
serveur La sonde envoie plutocirct ses donneacutees en modifiant lrsquoattribut src drsquoune image de zeacutero
pixel injecteacutee dans la page et en passant les donneacutees collecteacutees en tant que paramegravetres GET de
cette requecircte En sens inverse le serveur relaie les informations via un cookie speacutecialement
encodeacute que la sonde peut interroger peacuteriodiquement De cette faccedilon le serveur Cornipickle
peut reacutesider sur un serveur diffeacuterent de celui de lrsquoapplication testeacutee et avoir toujours une
communication bidirectionnelle ponctuelle avec sa sonde
103
42 LE LANGAGE CORNIPICKLE
Le langage Cornipickle comporte des constructions issues de la logique du premier ordre et de
la logique temporelle lineacuteaire tels que les quantificateurs et les opeacuterateurs temporels et qui
permettent agrave un utilisateur de speacutecifier des relations complexes sur les diffeacuterents eacuteleacutements du
document agrave plusieurs moments dans le temps caracteacuteristique qui est absente dans beaucoup
de langages de script
Cornipickle nrsquoest pas un convertisseur baseacute sur des expressions reacuteguliegraveres entre des fichiers
texte et des commandes de script mais sa grammaire lutte pour le mecircme genre de lisibiliteacute En
particulier pour ameacuteliorer la lisibiliteacute la grammaire de Cornipickle permet drsquoinseacuterer diffeacuterents
mots agrave lrsquointeacuterieur des diffeacuterentes constructions Ces mots nrsquoont aucun effet sur lrsquoanalyse et
lrsquointerpreacutetation des expressions
421 SYNTAXE DU LANGAGE
Dans Cornipickle les proprieacuteteacutes sont exprimeacutees sous forme drsquoassertions sur le contenu et les
attributs drsquoune capture (snapshot) drsquoune page prise agrave un instant donneacute La maniegravere preacutecise par
laquelle ces captures sont prises agrave partir drsquoune application web donneacutee sera deacutetailleacutee plus loin
Nous commenccedilons par une illustration des diffeacuterentes constructions de la grammaire dans le
tableau 41
Seacutelection drsquoeacuteleacutements Les eacuteleacutements de la page sont lrsquouniteacute principale dans Cornipickle ils
sont seacutelectionneacutes afin drsquoexprimer quelques-unes de leurs proprieacuteteacutes Ces proprieacuteteacutes peuvent
ecirctre appliqueacutees agrave tous les eacuteleacutements seacutelectionneacutes ou au moins agrave un
104
〈S〉 = 〈predicate〉 | 〈def-set〉 | 〈statement〉
Eacutenonceacutes Cornipickle
〈statement〉 = 〈foreach〉 | 〈exists〉 | 〈binary-stmt〉 | 〈negation〉| 〈temporal-stmt〉 | 〈userdef-stmt〉 | 〈let〉 | 〈when〉〈binary-stmt〉 = 〈equality〉 | 〈gt〉 | 〈lt〉 | 〈regex-match〉 | 〈and〉 | 〈or〉 | 〈implies〉〈temporal-stmt〉 = 〈globally〉 | 〈eventually〉 | 〈never〉 | 〈next〉 | 〈next-time〉
Logique du premier ordre
〈foreach〉 = For each 〈var-name〉 in 〈set-name〉 ( 〈statement〉 )〈exists〉 = There exists 〈var-name〉 in 〈set-name〉 such that ( 〈statement〉 )〈when〉 = When 〈var-name〉 is now 〈var-name〉 ( 〈statement〉 )〈let〉 = Let 〈var-name〉 be 〈property-or-const〉 ( 〈statement〉 )〈and〉 = ( 〈statement〉 ) And ( 〈statement〉 )〈or〉 = ( 〈statement〉 ) Or ( 〈statement〉 )〈implies〉 = If ( 〈statement〉 ) Then ( 〈statement〉 )〈negation〉 = Not ( 〈statement〉 )
Expressions temporelles
〈globally〉 = Always ( 〈statement〉 )〈never〉 = Never ( 〈statement〉 )〈next〉 = Next ( 〈statement〉 )〈eventually〉 = Eventually ( 〈statement〉 )〈next-time〉 = The next time ( 〈statement〉 ) Then ( 〈statement〉 )
Tableau 41 ndash La grammaire BNF pour Cornipickle (Partie I)
105
Par conseacutequent la seacutelection de lrsquoeacuteleacutement se fait par le biais de la quantification du pre-
mier ordre classique en utilisant lrsquoanglais pour la syntaxe comme For each $x in S
ou There exists $x in S(pour dire chaque $x dans S ou Il existe $x dans S) Dans ces
expressions S deacutesigne soit un seacutelecteur CSS 5 ou un autre ensemble preacuteceacutedemment deacutefini par
lrsquoutilisateur Les seacutelecteurs CSS sont exprimeacutes en utilisant la syntaxe de jQuery $( ) Un
seacutelecteur speacutecial appeleacute CDATA peut ecirctre utiliseacute pour deacutesigner le contenu du texte des nœuds
feuilles dans un arbre DOM (les parties qui composent la page en texte clair) Si $x est une
variable quantifieacutee en utilisant le meacutecanisme deacutecrit ci-dessus on peut acceacuteder au DOM ou aux
attributs CSS de cet eacuteleacutement en utilisant $xrsquos property (ougrave property est lrsquoattribut CSS
rechercheacute) Par exemple la largeur de lrsquoeacuteleacutement srsquoeacutecrirait $xrsquos width
Les attributs de lrsquoeacuteleacutement (qui sont soit des chaicircnes de caractegraveres ou de chiffres) peuvent alors
ecirctre compareacutes en utilisant des connectifs tels que is greater than ou equals le matching
drsquoexpressions reacuteguliegraveres est fait agrave travers le preacutedicat match et lrsquoinclusion de chaicircne est affirmeacutee
par lrsquoassertion contains Des assertions de base sur les eacuteleacutements peuvent eacutegalement ecirctre
combineacutees en utilisant des connecteurs booleacuteens classiques and or if then not
Eacuteveacutenements et opeacuterateurs temporels Dans Cornipickle les eacuteveacutenements deacuteclencheacutes par
lrsquoutilisateur tels que les touches et les clics de souris sont repreacutesenteacutes comme des attributs
sur lrsquoeacuteleacutement qui est la cible de lrsquoeacuteveacutenement Par exemple un eacuteleacutement qui a eacuteteacute cliqueacute
par lrsquoutilisateur posseacutedera momentaneacutement un attribut event avec une valeur click Par
conseacutequent affirmer qursquoun eacuteleacutement $x a eacuteteacute cliqueacute peut ecirctre eacutecrit $xrsquos event is lsquoclickrsquo
Lrsquoinclusion drsquoeacuteveacutenements dans le langage conduit naturellement agrave la notion de seacutequences
de documents de captures instantaneacutees Par conseacutequent Cornipickle fournit des opeacuterateurs
5 Un seacutelecteur CSS est une expression de chemin (path expression) qui deacutefinit les eacuteleacutements drsquoun documentqui font lrsquoobjet drsquoun ensemble donneacute de regravegles Ces expressions sont deacutefinies par une grammaire reacuteguliegraverecomme stipuleacute dans la norme CSS
106
Opeacuterateurs
〈equality〉 = 〈property-or-const〉 equals 〈property-or-const〉| 〈property-or-const〉 is 〈property-or-const〉〈gt〉 = 〈property-or-const〉 is greater than 〈property-or-const〉〈lt〉 = 〈property-or-const〉 is less than 〈property-or-const〉〈regex-match〉 = 〈property-or-const〉 matches 〈property-or-const〉〈constant〉 = 〈number〉 | 〈string〉〈property-or-const〉 = 〈elem-property〉 | 〈constant〉〈number〉 = ˆd+〈string〉 = ˆ[ˆ]
Constructions auxiliaires
〈el-or-not〉 = eacuteleacutement | ε
〈set-name〉 = 〈css-selector〉 | 〈userdef-set〉 | 〈regex-capture〉〈userdef-set〉 = 〈string〉〈var-name〉 = ˆ$[wd]+
Seacutelecteur CSS
〈css-selector〉 = $( 〈css-sel-contents〉 )〈css-sel-contents〉 = 〈css-sel-part〉 〈css-sel-contents〉 | 〈css-sel-part〉〈css-sel-part〉 = ˆ[wdu0023]+
Attributs CSS
〈css-attribute〉 = value | height | width | top | left | right| bottom | color | id | text | border | event
Proprieacuteteacutes des eacuteleacutements
〈elem-property〉 = 〈elem-property-pos〉 | 〈elem-property-com〉〈elem-property-pos〉 = 〈var-name〉 rsquos 〈css-attribute〉〈elem-property-com〉 = the 〈css-attribute〉 of 〈var-name〉
Expressions reacuteguliegraveres
〈regex-capture〉 = match 〈elem-property〉 with 〈string〉
Tableau 42 ndash La grammaire BNF pour Cornipickle (Partie II)
107
emprunteacutes agrave la logique temporelle Lineacuteaire (LTL) pour exprimer des assertions sur lrsquoeacutevolution
du contenu drsquoun document au fil du temps
La construction Always ϕ nous permet de faire lrsquoassertion suivante quelle que soit lrsquoex-
pression de ϕ elle doit ecirctre vraie (True) dans tous les snapshots du document De mecircme on
utilise Eventually ϕ pour dire que ϕ sera vraie dans certains futurs snapshots du document
et Next ϕ est utiliseacute pour dire que ϕ est vrai dans la capture suivante
Une construction speacuteciale appeleacutee The next time ϕ then ψ affirme que ψ doit ecirctre vraie
mais seulement une fois que ϕ est Vraie Par exemple on peut utiliser cette construction pour
exprimer que quelque chose doit ecirctre observeacute apregraves qursquoun eacuteleacutement ait eacuteteacute cliqueacute lrsquoassertion
ne lie pas jusqursquoagrave ce moment Ceci est une leacutegegravere reacuteeacutecriture de lrsquoopeacuterateur until de LTL
Un but particulier des opeacuterateurs temporels est de comparer lrsquoeacutetat du mecircme eacuteleacutement sur plu-
sieurs snapshots Cela peut ecirctre fait dans Cornipickle avec la construction When $x is now $y ϕ
Si $x se reacutefegravere agrave lrsquoeacutetat drsquoun eacuteleacutement captureacute dans un snapshot anteacuterieur alors $y contiendra
lrsquoeacutetat du mecircme eacuteleacutement dans la capture (snapshot) actuelle
Toutes ces constructions peuvent ecirctre librement combineacutees Par exemple la proprieacuteteacute suivante
affirme que chaque eacuteleacutement de la liste se deacuteplacera vers le bas de la page agrave un certain moment
For each $x in $(li) (Eventually (
When $x is now $y ($yrsquos top is greater than $xrsquos top )))
Extension de la grammaire Une caracteacuteristique tregraves importante et exceptionnelle qui contri-
bue agrave la lisibiliteacute des speacutecifications Cornipickle est la possibiliteacute drsquoeacutetendre le vocabulaire de
base du langage Ce dernier donne aux utilisateurs cette possibiliteacute en utilisant leurs propres
deacutefinitions Ces nouvelles deacutefinitions seront lues par lrsquointerpreacuteteur et pourront ensuite ecirctre
108
Ensemble deacutefini en extension
〈def-set〉 = A 〈def-set-name〉 is any of 〈def-set-eacuteleacutements〉〈def-set-name〉 = ˆ ( =is)〈def-set-eacuteleacutements〉 = 〈def-set-eacuteleacutement〉 〈def-set-eacuteleacutements〉 | 〈def-set-eacuteleacutement〉〈def-set-eacuteleacutement〉 = 〈constant〉
Preacutedicats deacutefinis par lrsquoutilisateur
〈predicate〉 = We say that 〈pred-pattern〉 when ( 〈statement〉 )〈pred-pattern〉 = ˆ ( =when)
Eacutenonceacutes deacutefinis par lrsquoutilisateur
〈userdef-stmt〉 = empty
Tableau 43 ndash Extensions de la grammaire BNF pour Cornipickle
utiliseacutees librement comme tout eacuteleacutement de base du langage
Les preacutedicats peuvent ecirctre deacutefinis avec la construction We say that when Le texte entre
that et when est interpreacuteteacute comme une chaicircne de caractegraveres qui peut contenir des variables
Puis le texte apregraves when deacutecrit comment cette expression doit ecirctre eacutevalueacutee en termes du
vocabulaire existant Par exemple on peut deacutefinir lrsquoexpression laquo left-aligned raquo comme suit
We say that $x and $y are left-aligned when ($xrsquos left equals $yrsquos left )
La construction $x and $y are left-aligned ($x et $y sont aligneacutes agrave gauche) peut en-
suite ecirctre reacuteutiliseacutee (eacuteventuellement avec diffeacuterents noms de variables) dans des assertions
ulteacuterieures Les utilisateurs peuvent eacutegalement deacutefinir des ensembles soient des ensembles
de chaicircnes de caractegraveres des chiffres ou des ensembles drsquoeacuteleacutements agrave partir drsquoune page en les
eacutenumeacuterant en utilisant la construction A is any of
A Mojibake is any of Atilde ccopy Atildersquo Atildeuml
109
Notez que le nom de lrsquoensemble ne doit pas neacutecessairement ecirctre un seul mot lrsquoanalyseur
interpregravete tout ce qui est entre A et is any of comme un nom
La quantiteacute de donneacutees pouvant ecirctre relayeacutee de cette maniegravere eacutetant limiteacutee Cornipickle se
charge drsquoenvoyer une sonde qui ne reacutecupegravere que les informations neacutecessaires agrave lrsquoeacutevaluation
des speacutecifications fournies par lrsquoutilisateur Par conseacutequent la sonde reccediloit des instructions sur
les eacuteleacutements de la page qui sont inteacuteressants et sur les attributs DOM et CSS neacutecessaires pour
ces eacuteleacutements Ceci est fait en reacutecupeacuterant lrsquoensemble de tous les noms drsquoattributs apparaissant
dans une expression et lrsquoensemble de tous les seacutelecteurs CSS utiliseacutes dans les quantificateurs
La sonde parcourt la structure DOM drsquoune maniegravere en profondeur et produit un nœud de sortie
pour chaque nœud DOM visiteacute Par deacutefaut le nœud de sortie est vide il agit uniquement
comme un espace reacuteserveacute vide afin de preacuteserver la relation parent-enfant entre les nœuds de
sortie Ce nrsquoest que si lrsquoemplacement du nœud actuel correspond agrave lrsquoun des seacutelecteurs CSS
que les attributs et les valeurs seront ajouteacutees au nœud et seulement pour les attributs preacutesents
dans lrsquoexpression agrave eacutevaluer Des reacuteductions suppleacutementaires peuvent ecirctre reacutealiseacutees en reacuteduisant
tous les sous-arbres qui contiennent uniquement des nœuds vides Ainsi la structure DOM
produite par la sonde peut ecirctre vue comme une version laquo eacutevideacutee raquo du document original ne
contenant que des nœuds et des attributs importants pour lrsquoeacutevaluation drsquoune proprieacuteteacute
Incidemment il faut noter que ce filtrage est relativement grossier Consideacuterons par exemple
lrsquoexpression suivante
For each $x in $(p)If $xrsquos height equals 400 Then
For each $y in $(h1)$xrsquos width is greater than $yrsquos width
Cornipickle sera chargeacute drsquoaller chercher la largeur et la hauteur de tous les paragraphes et
rubriques pourtant on ne peut voir que les paragraphes de 400 pixels de hauteur qui sont
110
reacuteellement neacutecessaires pour deacutecider de la vrai valeur de la proprieacuteteacute De plus les informations
sur les titres nrsquoont drsquoimportance que si de tels paragraphes existent dans le document sinon
la proprieacuteteacute est vide Par conseacutequent les conditions de filtrage pourraient ecirctre affineacutees un
compromis doit ecirctre atteint entre les eacuteconomies de bande passante drsquoun tel filtrage et la
puissance de calcul neacutecessaire du cocircteacute client pour eacutevaluer les conditions
422 SEacuteMANTIQUE FORMELLE
Nous allons maintenant preacutesenter la seacutemantique formelle de Cornipickle La premiegravere eacutetape
consiste agrave formaliser la structure le contenu et les proprieacuteteacutes de style drsquoune page afficheacutee
Nous deacutefinissons drsquoabord un ensemble A de noms drsquoattributs Cet ensemble comprend tous les
attributs du DOM (Document Object Model Level 2) [55] et toutes les proprieacuteteacutes de feuilles de
style (CSS) qui peuvent ecirctre associeacutees agrave un eacuteleacutement Un nœud DOM est une fonction ν ArarrV
qui associe agrave chaque nom drsquoattribut une valeur prise agrave partir drsquoun ensemble V Nous utilisons
la valeur speacuteciale laquo raquo pour indiquer qursquoun attribut est indeacutefini pour un nœud donneacute Nous
distinguons un sous-ensemble E subV qui deacutesigne les noms drsquoeacuteleacutements correspondants au nom
de la balise HTML reacuteelle qui repreacutesente lrsquoeacuteleacutement (par exemple a h1 img etc)
Nous indiquerons par N lrsquoensemble de tous les nœuds DOM Lrsquoensemble T de documents
DOM comprend tous les arbres dont les nœuds sont des nœuds DOM Conformeacutement agrave la
convention adopteacutee par la plupart des navigateurs Web les eacuteleacutements de texte ne peuvent
apparaicirctre que comme feuilles et reccediloivent le nom drsquoeacuteleacutement speacutecial TEXT La figure 44
repreacutesente un tel document Si nous laissons ν se reacutefeacuterer au deuxiegraveme paragraphe du document
body nous avons par exemple ν(elementName) = ldquoprdquo ν(stylecolor) = ldquoredrdquo etc Nous
eacutetendons ν aux valeurs en deacutefinissant ν(v) = v pour tout v isinV
111
lthtmlgtltheadgtlttitlegtMy titlelttitlegt
ltheadgtltbodygtlth1gtThe first pagelth1gtltp style=colorredwidth400pxgtHello worldltpgt
ltp style=font-size14ptwidth200pxgtAnother ltbgtparagraphltbgtltpgt
ltp style=width400pxgtltpgtltbodygt
lthtmlgt
html
head body
title
CDATA
h1 p p p
CDATA CDATA CDATA b
CDATA
Figure 44 ndash Un document DOM simple (a) Structure HTML (b) Repreacutesentation en arbre DOM Seuls les noms des eacuteleacutements sont afficheacutes les attributs et valeurs restants sont omis pour plusde clarteacute
112
Soit κ T timesNrarr 2N la fonction qui eacutetant donneacute un document t isin T et un nœud ν isinN produit
lrsquoensemble κ(tν) de tous les enfants de ν dans T Soit C lrsquoensemble de tous les seacutelecteurs
CSS La fonction χ T times Srarr 2N renverra lrsquoensemble des nœuds en t correspondant agrave un
seacutelecteur CSS c isin C Les eacuteveacutenements deacuteclencheacutes par lrsquoutilisateur sont pris en compte en
supposant que certains eacuteleacutements portent un attribut avec le nom speacutecial laquo event raquo dont la
valeur deacutecrit lrsquoeacuteveacutenement auquel cet eacuteleacutement est lieacute Par exemple un utilisateur qui clique sur
un bouton ferait en sorte que lrsquoattribut laquo event raquo de ce bouton porterait laquo click raquo comme valeur
De cette faccedilon il est possible qursquoun instantaneacute drsquoun document contienne des informations sur
les eacuteveacutenements dynamiques survenant dans lrsquoapplication
La seacutemantique de Cornipickle est deacutefinie sur des traces des documents DOM une trace est
une seacutequence finie drsquoeacuteleacutements de T que nous deacutesignerons par t = t0 t1 tk Eacutetant donneacute
que toutes les expressions impliquant des constructions deacutefinies avec We say that peuvent
facilement ecirctre converties en expressions qui utilisent uniquement des constructions agrave partir
du langage de base il suffit de deacutefinir la seacutemantique pour ce langage de base On dira qursquoune
trace t satisfait une expression Cornipickle ϕ noteacutee t |= ϕ lorsque son eacutevaluation renvoie la
valeur Vrai (gt) La notation t i indique le suffixe de t agrave partir de son i-egraveme eacuteveacutenement
La seacutemantique complegravete est deacutefinie reacutecursivement dans le tableau 44 En termes formels
lrsquoexpressiviteacute du langage Cornipickle correspond agrave une extension du premier ordre de la
logique temporelle lineacuteaire ougrave les eacuteveacutenements sont des structures arborescentes des paires
nom-valeur semblables agrave celles utiliseacutees par le moniteur drsquoexeacutecution BeepBeep [53] ce-
pendant BeepBeep nrsquoa pas la possibiliteacute de creacuteer des constructions grammaticales deacutefinies
par lrsquoutilisateur En outre le langage a eacuteteacute eacutetendu agrave des constructions qui mecircme si elles
nrsquoaccroissent pas lrsquoexpressiviteacute ameacuteliorent la lisibiliteacute des speacutecifications tel que The next
time 6
6 Formellement t |= The next time ϕ then ψ si et seulement si t |= Notϕ Until (ϕ And ψ)
113
t |= νrsquos a equals νprimersquos aprime hArr ν(a) = ν
prime(aprime)t |= νrsquos a equals v hArr ν(a) = v
t |= Notϕ hArr t 6|= ϕ
t |= ϕ And ψ hArr t |= ϕ and t |= ψ
t |= ϕ Ou ψ hArr t |= ϕ or t |= ψ
t |= If ϕ Then ψ hArr t 6|= ϕ ou t |= ψ
t |= There exists ξ in $(c) such that ϕ hArr t |= ϕ[ξν ] pour certains ν isin χ(t0c)t |= For each ξ in $(c) ϕ hArr t |= ϕ[ξν ] pour tout ν isin χ(t0c)
t |= Alwaysϕ hArr t |= ϕ et t1 |= Alwaysϕ
t |= Eventuallyϕ hArr t |= ϕ ou t1 |= Eventuallyϕ
t |= Nextϕ hArr t1 |= ϕ
t |= ϕ Until ψ hArr Il existe ige 0 tel quet i |= ψ and t j |= ϕ for j lt i
When ξ is now ξ prime ϕ hArr Il existe ν prime isin t0 tel queν(id) = ν prime(id) and t |= ϕ[ξν prime]
Tableau 44 ndash La seacutemantique formelle de Cornipickle aaprime isin A sont les noms drsquoattributs DOMv isin V est une valeur drsquoattribut c isin C est un seacutelecteur CSS ξ et ξ prime sont des noms de variablesν ν prime isin N sont les nœuds DOM et ϕ et ψ sont des eacutenonceacutes Cornipickle quelconques Lorsque test vide Always srsquoeacutevalue agrave V rai et Eventually et Next srsquoevaluent agrave Faux
114
Le cas de lrsquoexpression When $x is now $y justifie une explication cependant Cette construc-
tion est utiliseacutee pour deacutesigner le mecircme eacuteleacutement drsquoun document agrave deux moments diffeacuterents dans
le temps En raison de la nature dynamique des applications web il ne suffit pas drsquoutiliser sim-
plement For each $x in $(s) suivi par For each $y in $(s) avec le mecircme seacutelecteur
CSS s Les eacuteleacutements drsquoune page peuvent ecirctre deacuteplaceacutes arbitrairement vers nrsquoimporte quelle
partie drsquoun document et par conseacutequent la reacutecupeacuteration drsquoeacuteleacutements avec le mecircme seacutelecteur
ne garantit pas qursquoils seront reacutepartis sur le mecircme domaine deux fois Cornipickle reacutesout ce
problegraveme en donnant agrave chaque eacuteleacutement un attribut unique appeleacute cornipickleid (raccourci
agrave id dans le tableau) Cet identifiant ne change jamais quelles que soient les manipulations de
lrsquoapplication sur un eacuteleacutement Lrsquoexpression When $x is now $y eacutevalue la variable $y avec
lrsquoeacuteleacutement ayant la mecircme cornipickleid comme cela a eacuteteacute donneacute agrave lrsquoeacutevaluation de la variable
$x permettant de comparer les attributs du mecircme eacuteleacutement dans deux instantaneacutes distincts de
la page
43 EXPRIMER DES PROPRIEacuteTEacuteS AVEC CORNIPICKLE
Au moyen drsquoune tel langage il est possible de donner des exemples de proprieacuteteacutes correspondant
agrave certains des bugs citeacutes preacuteceacutedemment Par exemple en prenant pour Mojibake lrsquoensemble
deacutefini preacuteceacutedemment la preacutesence de problegravemes de codage de caractegraveres dans une page peut
ecirctre deacutetecteacutee avec
We say that $x doesnrsquot contain $y when (Not ($xrsquos text matches $yrsquos value ))
For each $text in $(CDATA) (For each $mojibake in Mojibake ($text doesnrsquot contain $mojibake ))
Nous ajoutons la construction doesnrsquot contain agrave la grammaire simplement pour ameacuteliorer
115
la lisibiliteacute de la deacuteclaration qui suit
Similairement pour preacuteciser qursquoune classe speacutecifique drsquoeacuteleacutements ne devrait jamais se deacuteplacer
on peut eacutecrire ce qui suit
We say that $x is immobile when (Always (
When $x is now $y (($xrsquos left equals $yrsquos left)
And($xrsquos top equals $yrsquos top ))))
For each $item in $(li) ( $item is immobile )
Lrsquointuitiviteacute de speacutecifications peut encore ecirctre mise en eacutevidence dans ce dernier exemple qui
stipule qursquoau moins un eacuteleacutement de la liste a la valeur drsquoun autre eacuteleacutement de liste la derniegravere
fois que lrsquoutilisateur a cliqueacute sur un bouton appeleacute laquo Go raquo
We say that I click on Go when (There exists $b in $(button) such that (
($brsquos text is Go)And($brsquos event is mouseup)))
Always (If (I click on Go) Then (
There exists $x in $(value) such that (The next time (I click on Go)
Then (There exists $y in $(value) such that (
$xrsquos text equals $yrsquos text )))))
La lisibiliteacute de cette speacutecification devrait ecirctre mise en contraste avec le code proceacutedural qursquoon
aurait besoin drsquoeacutecrire pour deacutetecter le mecircme problegraveme qui est objectivement plus long et
beaucoup moins clair Par exemple dans jQuery on obtiendrait lrsquoeacutequivalent de la figure 45
Il est maintenant possible de reprendre certains exemples de bugs mentionneacutes en deacutebut de
thegravese et de montrer comment ceux-ci peuvent ecirctre deacutetecteacutes par des expressions Cornipickle
116
$(document)mouseUp(function(event) var e = argumentscalleeif ($(eventtarget)text() === Go) var current_values = []$(value)each(current_valuespush($(this)text())
)if (elastValues == undefined)
var found = falsefor (var v in current_values)
if ($inArray(v elastValues)) found = truebreak
If (found)
consolelog(Error)elastValues = current_values
)
Figure 45 ndash Exemple de code jQuery veacuterifiant que deux eacuteleacutements ont le mecircme texte
117
approprieacutees Prenons drsquoabord le cas drsquoun eacuteleacutement qui se deacuteplace dans une page cliquer sur
un eacuteleacutement change sa classe CSS cela entraicircne la modification de la zone de deacutelimitation de
lrsquoeacuteleacutement eacuteventuellement le deacuteplacement drsquoautres eacuteleacutements qui ne doivent pas bouger
On doit drsquoabord deacutefinir ce que signifie ecirctre immobile La construction When $x is now $y
nous permet de comparer les proprieacuteteacutes drsquoun mecircme eacuteleacutement dans deux snapshots diffeacuterents de
la page mecircme si le positionnement relatif de lrsquoeacuteleacutement dans le DOM a changeacute
We say that $x is immobile when (Always (
When $x is now $y (($xrsquos left equals $yrsquos left)And($xrsquos top equals $yrsquos top)
))
)
Avec cette expression il devient facile de speacutecifier par exemple que chaque eacuteleacutement drsquoune
liste doit demeurer agrave sa position
name Immobile itemsdescription List items should never change positionseverity Error
For each $item in $(li) (
$item is immobile)
De la mecircme maniegravere on peut speacutecifier que des eacuteleacutements doivent toujours ecirctre aligneacutes les uns
par rapport aux autres
Nous deacutefinissons drsquoabord quelques preacutedicats en utilisant la construction We say that
118
We say that $x and $y are left-aligned when ($xrsquos left equals $yrsquos left
)We say that $x and $y are top-aligned when (
$xrsquos top equals $yrsquos top)
We say that the page is big when (The media query (min-width 200px) applies
)The following rules apply when (
the page is big)
Ces preacutedicats nous permettent de simplifier lrsquoexpression rechercheacutee qui devient une double
quantification sur les eacuteleacutements drsquoune mecircme liste
name Menus aligneddescription All list items should either be left- or top-alignedseverity Warning
For each $z in $(menu li) (
For each $t in $(menu li) (($z and $t are left-aligned)Or($z and $t are top-aligned)
))
Nous ne faisons aucune reacuteclamation formelle concernant lrsquoexhaustiviteacute du langage ou son
expressiviteacute Cependant des preuves anecdotiques reacutevegravelent que tous les bogues de mise en
page dans notre enquecircte peuvent ecirctre exprimeacutes par une expression approprieacutee suggeacuterant qursquoil
est bien adapteacute agrave la tacircche agrave accomplir
CHAPITRE 5
DEacuteTECTION AVANCEacuteE BUGS COMPORTEMENTAUX ET RWD
Nous avons preacutesenteacute au chapitre preacuteceacutedent Cornipickle et la faccedilon drsquoeacutevaluer des bugs de
preacutesentation en analysant le contenu drsquoune seule page relativement indeacutependamment des
autres Dans ce chapitre nous nous inteacuteressons davantage aux bugs dits comportementaux
Dans ces bugs ce nrsquoest pas la preacutesentation graphique des pages qui est deacutefectueuse mais bien
la fonctionnaliteacute mecircme de lrsquoapplication Malgreacute tout nous pouvons exprimer et deacutetecter ces
bugs agrave partir de proprieacuteteacutes drsquoeacuteleacutements de lrsquointerface
Nous donnerons drsquoabord des exemples de bugs comportementaux illustreacutes dans une application
appeleacutee Beep Store Nous citons en suite les solutions actuelles et deacutecrivons ensuite notre
approche qui constitue une technique automatiseacutee fournissant des oracles de test dans le
but de deacutetecter les bugs comportementaux qui lient les donneacutees agrave lrsquoordre des consultations
de plusieurs pages de lrsquoapplication cela est fait en combinant Cornipickle avec un robot
drsquoexploration (RIA Crawler) Cette technique est aussi capables de veacuterifier la coheacuterence drsquoune
mise en page reacuteactive (responsive) sur une large gamme de largeurs de la fenecirctre Pour cela
nous avons inteacutegreacute une petite application dans le but de changer simultaneacutement la taille de la
fenecirctre du navigateur afin de deacutetecter des bugs RWD
120
51 BUGS COMPORTEMENTAUX DANS LE BEEP STORE
Afin drsquoeacutetudier les problegravemes de bugs comportementaux dans les applications RIA (Web 20)
deacutefinis dans 212 nous montrons quelques exemples de bugs illustreacutes sur une application
appeleacutee le Beep Store [53]
Le Beep Store est une application web client-serveur autonome impleacutementeacutee en PHP et
JavaScript qui permet aux utilisateurs enregistreacutes de parcourir une collection fictive de livres
et de musique et de geacuterer un panier virtuel composeacute de ces eacuteleacutements Cette application dont
les caracteacuteristiques ont eacuteteacute extraites drsquoune eacutetude exhaustive des applications web du monde
reacuteel est une RIA au sens propre du terme les interactions utilisateurs sont complegravetement
asynchrones ne neacutecessitent jamais le rechargement de la page deacutependent des actions passeacutees
des utilisateurs et consistent en un seul document dont les diffeacuterentes parties sont montreacutees
ou cacheacutees en fonction de lrsquoeacutetat actuel de lrsquoapplication
Connexions multiples Un des bugs qui peuvent ecirctre basculeacutes dans le Beep Store permet agrave
lrsquoutilisateur drsquoacceacuteder agrave la page de connexion tout en eacutetant deacutejagrave connecteacute Ceci est deacutetecteacute par
le fait que le lien laquo Srsquoidentifier raquo (Login) apparaicirct dans la barre drsquoaction supeacuterieure mecircme apregraves
que lrsquoutilisateur srsquoest connecteacute avec succegraves comme le montre la figure 51 1 Eacutevidemment une
application bien construite ne fournirait pas un bouton de connexion apregraves qursquoun utilisateur se
soit deacutejagrave connecteacute cette proprieacuteteacute est agrave eacutetat dans le sens ougrave lrsquoeacutetat valide drsquoune page deacutepend de
la seacutequence des actions passeacutees qui sont effectueacutees par lrsquoutilisateur (dans ce cas le fait qursquoune
connexion reacuteussie ait eu lieu)
1 On a vu au chapitre 2 comment des sites web reacuteels preacutesentent exactement ce problegraveme
121
Figure 51 ndash Le bug de connexions multiples Un utilisateur deacutejagrave connecteacute se voit proposer lrsquoop-tion de se reconnecter
Figure 52 ndash Le bug des paniers multiples Des boutons pour creacuteer un panier et ajouter desarticles au panier coexistent sur la mecircme page
Paniers multiples Un autre bug permet agrave lrsquoutilisateur de creacuteer plusieurs paniers drsquoachat
mecircme apregraves en avoir creacuteeacute un premier La figure 52 montre un exemple de ce bug un panier a
deacutejagrave eacuteteacute creacuteeacute puisque lrsquointerface affiche des boutons permettant agrave lrsquoutilisateur drsquoajouter des
articles au panier Pourtant les boutons pour creacuteer un nouveau panier sont eacutegalement afficheacutes
Supprimer drsquoun panier inexistant Ce bug est lrsquoinverse du preacuteceacutedent parfois le Beep
Store permet agrave lrsquoutilisateur de retirer un objet de son panier avant mecircme de le creacuteer Nous
pouvons voir dans la figure 53 que les boutons pour creacuteer un panier sont preacutesents avec les
boutons pour en retirer les eacuteleacutements
122
Figure 53 ndash Le bug de la suppression drsquoun panier inexistant Des boutons pour retirer du panieret creacuteer un panier coexistent sur la mecircme page
Ces bugs sont clairement comportementaux car ils sont causeacutes par des actions anteacuterieures
de lrsquoutilisateur ou des actions qui nrsquoont jamais eu lieu Il convient eacutegalement de noter que
selon lrsquoimpleacutementation du serveur ces bugs ne deacuteclenchent pas neacutecessairement des messages
drsquoerreur dans les logs Nous pouvons facilement imaginer un cas ougrave une action est rejeteacutee et ne
creacutee pas drsquoautres problegravemes mais le client ne devrait jamais avoir eacuteteacute preacutesenteacute avec lrsquooption
52 SOLUTIONS ACTUELLES
Les travaux connexes sur le test drsquoapplications web pour de tels types de bugs se concentrent
sur les moyens de trouver des erreurs dans les applications en effectuant une recherche
exhaustive de leur espace drsquoeacutetat
Les robots drsquoexploration (laquo crawlers raquo) font partie inteacutegrante des moteurs de recherche web et
sont deacutedieacutes agrave la collecte et agrave lrsquoindexation de documents web Ils ont eacuteteacute deacuteveloppeacutes agrave lrsquoorigine
pour lrsquoarchivage la reacutecupeacuteration drsquoinformations (trouver des adresses e-mail ou des pages
de produits par exemple) Cependant on a rapidement deacutecouvert que les crawlers pouvaient
ecirctre utiliseacutes agrave drsquoautres fins en particulier un crawler peut ecirctre consideacutereacute comme un outil
drsquoexploration drsquoespace drsquoeacutetat et agrave ce titre ecirctre utiliseacute pour effectuer des tests automatiseacutes
123
Un processus drsquoexploration traditionnel commence agrave partir des URL de deacutemarrage Les pages
web correspondant agrave ces URL sont teacuteleacutechargeacutees et les hyperliens preacutesents sur celles-ci sont
extraits et ajouteacutes agrave un ensemble drsquoURL agrave visiter eacutegalement appeleacute le crawl frontier Comme
le nombre drsquoURL qui peuplent la frontiegravere drsquoexploration augmente tregraves rapidement un critegravere
de priorisation du teacuteleacutechargement de certaines pages est geacuteneacuteralement appliqueacute Agrave leur tour
les URL les mieux classeacutees dans la limite de lrsquoexploration sont teacuteleacutechargeacutees et de nouveaux
liens sont extraits Cette opeacuteration est reacutepeacuteteacutee jusqursquoagrave ce que tous les liens accessibles soient
visiteacutes [62 65]
Certaines fonctionnaliteacutes de base des applications web traditionnelles sont modifieacutees dans
les RIA ce qui rend lrsquoexploration des RIA plus difficile que celle des applications web
traditionnelles Dans lrsquoanalyse RIA lrsquoordre drsquoanalyse respecte la seacutequence de pages possible
comme si un internaute lrsquoutilisait Comme nous lrsquoavons vu contrairement aux applications
web traditionnelles une URL nrsquoidentifie pas de faccedilon unique lrsquoeacutetat de lrsquoapplication et ne peut
donc pas ecirctre simplement demandeacutee au serveur agrave tout moment
Dans une application avec une gestion du panier comme le Beep Store il serait possible
pour un robot drsquoexploration traditionnel de trouver des bugs comportementaux lagrave ougrave il nrsquoy
en a pas lrsquoordre de visite est crucial Par exemple dans un sceacutenario ougrave lrsquoutilisateur peut
creacuteer un panier supprimer un panier ajouter un article agrave un panier et modifier un panier pour
modifier la quantiteacute un bug qui permet agrave lrsquoutilisateur drsquoeacutediter un article dans son panier sans
avoir de panier pourrait ecirctre deacutecouvert Apregraves la creacuteation drsquoun panier lrsquoajout drsquoun eacuteleacutement
et la suppression du panier lrsquoensemble drsquoURL du crawler traditionnel contient lrsquoURL agrave
modifier Ensuite lorsque vous essayez drsquoatteindre cette URL un bug survient car le panier a
eacuteteacute supprimeacute Cependant il peut srsquoagir drsquoun faux positif car cette seacutequence drsquoactions nrsquoest
probablement pas possible pour un utilisateur Un robot drsquoexploration traditionnel nrsquoest donc
pas adapteacute agrave la recherche de bugs comportementaux
124
Dans un crawler web pour RIA la page associeacutee agrave une seed URL (un crawler commence
par une liste drsquoURL agrave visiter appeleacutee les seeds) est extraite et chargeacutee dans un navigateur
virtuel Un module est requis pour veacuterifier si crsquoest la premiegravere fois que la page construite
est rencontreacutee Un extracteur drsquoeacuteveacutenements reacutecupegravere les eacuteveacutenements JavaScript de la page
un de ces eacuteveacutenements est seacutelectionneacute et exeacutecuteacute sur la page La page reacutesultante est ensuite
collecteacutee et le processus se poursuit jusqursquoagrave eacutepuisement de toutes les actions deacutecouvertes
[41] Sur la base de ce modegravele diffeacuterentes strateacutegies drsquoexploration (telles que la recherche en
profondeur (depth-first search) Greedy Model-Based et Component-Based) ont eacuteteacute suggeacutereacutees
[61 36 45 40 46 44]
Certains outils ont deacutejagrave eacuteteacute conccedilus pour tester les RIA Par exemple WebMate [43] peut
extraire lrsquoarborescence drsquoeacutetat drsquoune application web Cet arbre est ensuite compareacute aux arbres
drsquoeacutetat drsquoautres navigateurs pour trouver les diffeacuterences de mise en page Cependant il se
concentre sur la compatibiliteacute inter-navigateurs (cross-browser compatibility) et ne semble pas
prendre en charge les tests externes deacutefinis par lrsquoutilisateur
WebMole est un autre crawler automatiseacute qui geacuteneacuteralise les approches existantes Il eacutelimine
tout backtracking arbitraire en interceptant les requecirctes HTTP et fait des sauts de page [54]
Cependant lrsquoobjectif de WebMole est simplement drsquoextraire les graphes de navigation drsquoune
application il ne permet pas agrave un utilisateur drsquoeacutecrire des oracles de test agrave eacutevaluer pendant
lrsquoexploration de lrsquoapplication
De son cocircteacute Crawljax [60] utilise une strateacutegie en profondeur (depth-first strategy) pour
explorer et produire une machine agrave eacutetats finis du comportement de lrsquoapplication Il est possible
gracircce agrave son architecture de plugin de tester chaque eacutetat pendant qursquoils sont visiteacutes Cependant
les tests en question doivent ecirctre eacutecrits par lrsquoutilisateur en code Java pur cela rend lrsquoeacutecriture
des oracles de test dynamiques difficile pour des raisons mentionneacutees plus haut
125
53 SOLUTION PROPOSEacuteE
Pour remeacutedier agrave ces problegravemes nous proposons dans cette section une architecture qui
combine un robot drsquoindexation RIA (dans ce cas Crawljax) avec notre interpreacuteteur de langage
de haut niveau pour les oracles de test web Cornipickle Crawljax est responsable de
lrsquoexploration drsquoune application web en tenant compte de son eacutetat tandis que nous utilisons les
opeacuterateurs emprunteacutes de la logique temporelle lineacuteaire fournie par Cornipickle pour exprimer
des assertions sur lrsquoeacutevolution du contenu drsquoun document au fil du temps Cette architecture a
eacuteteacute codeacutee dans un plugin open source pour Crawljax 2
531 INTERACTION AVEC CRAWLJAX
Crawljax est un outil pour explorer automatiquement lrsquoeacutetat dynamique des applications web
modernes Via des interfaces de programmation il a la capaciteacute drsquointeragir avec le code cocircteacute
client de lrsquoapplication Nous lrsquoutilisons pour explorer le comportement de lrsquoapplication web agrave
tester Pour deacutetecter les clics Crawljax analyse une page Web et lrsquoutilise systeacutematiquement
pour explorer le comportement dynamique de lrsquoapplication [60 70]
Les modifications deacutetecteacutees dans lrsquoarbre DOM dynamique sont valideacutees en tant que nouveaux
eacutetats du comportement De nombreuses options sont disponibles avec Crawljax pour configurer
le comportement drsquoanalyse Nous pouvons par exemple speacutecifier les liens ou les widgets agrave
cliquer ou non au cours de lrsquoexploration Dans une variante Crawljax effectue une recherche
en profondeur en premier (depth-first search) stocke lrsquohistorique des exeacutecutions drsquoeacuteveacutenements
et nrsquoexeacutecute un eacuteveacutenement que si lrsquoeacuteveacutenement nrsquoa pas eacuteteacute exeacutecuteacute auparavant quel que soit
lrsquoeacutetat de lrsquoapplication [68]
2 http githubcomliflabcrawljax-cornipickle-plugin
126
Figure 54 ndash Flux drsquointeraction et de seacuterialisation (Crawljax-Cornipickle)
La figure 54 montre le workflow du systegraveme combineacute pour deacutetecter les bugs comportemen-
taux de lrsquoapplication testeacutee Crawljax explore le comportement de lrsquoapplication web sous
test (Exploration) Il interagit avec Cornipickle agrave travers son architecture de plugin (Plugin
Cornipickle (capture)) (1) Chaque fois qursquoun eacutetat est creacuteeacute (OnNewState) ou visiteacute (OnRevisit)
Crawljax seacuterialise la page (seacuterialisation JSON) et lrsquoenvoie agrave lrsquointerpreacuteteur (2) pour lrsquoeacutevaluer
de la mecircme maniegravere que la sonde envoie la page au serveur Cornipickle dans lrsquoarchitecture
traditionnelle (Cornipickle eacutevaluation) Apregraves que la page ait eacuteteacute eacutevalueacutee par Cornipickle le
verdict (3) est retourneacute et le plugin affiche le reacutesultat (Outputs)(4)
Il est important de se rappeler que chaque eacutetat de lrsquoapplication est visiteacute par Crawljax dans la
mecircme seacutequence qursquoun utilisateur Mecircme quand il revient agrave un eacutetat anteacuterieur il recommence au
deacutebut de lrsquoexploration et prend le mecircme chemin jusqursquoagrave ce que lrsquoeacutetat deacutesireacute soit atteint
532 REDIMENSIONNMENT DU NAVIGATEUR
Ce mecircme principe peut ecirctre facilement modifieacute pour eacutegalement deacutetecter des bugs RWD Pour
ce faire nous avons creacuteeacute un autre plugin qui cette fois redimensionne le navigateur drsquoune
127
largeur donneacutee agrave une autre largeur
Eacutetant donneacute que lrsquoutilisation drsquoune barre de deacutefilement verticale nrsquoest pas un problegraveme dans le
responsive design seul le redimensionnement horizontal est lrsquoapproche correcte pour deacutetecter
les bugs RWD Puisque nous voulons explicitement trouver des bugs lieacutes au RWD le plugin
diminue lentement la largeur du navigateur ces bugs apparaissent sur des largeurs infeacuterieures
ougrave lrsquoespace disponible devient de plus en plus rare en reacutefeacuterence agrave des largeurs plus grandes Il
est possible de fournir au plugin la borne supeacuterieure la borne infeacuterieure et la quantiteacute de pixels
pour la deacutecreacutementation Le plugin met eacutegalement en eacutevidence les bugs qursquoil trouve et prend
une capture drsquoeacutecran de la page Nous obtenons ensuite des captures drsquoeacutecran ougrave les eacuteleacutements
responsables du bug ont des bordures rouges
54 EXPEacuteRIENCES ET REacuteSULTATS
Comme on peut le voir la deacutetection de bugs comportementaux et de bugs RWD dans les
deux cas peut se reacutesumer agrave la veacuterification de proprieacuteteacutes exprimeacutees sur des seacutequences de pages
Dans le premier cas elles sont fournies par un robot drsquoexploration et dans le second cas par
le redimensionnement reacutepeacutetitif de la fenecirctre du navigateur sur une mecircme page
Nous deacutetaillons maintenant quelques exemples de proprieacuteteacutes Cornipickle permettant de deacutetecter
des bugs comportementaux et des bugs RWD
541 DEacuteTECTION DE BUGS COMPORTEMENTAUX DANS BEEPSTORE
Nous expliquons drsquoabord les bugs comportementaux du Beep Store deacutecrits preacuteceacutedemment et
nous montrons comment ils peuvent ecirctre captureacutes par Crawljax en eacutevaluant les assertions de
Cornipickle lors de lrsquoexploration drsquoune application
128
Connexions multiples Le premier bug est celui des connexions multiples Ce bug peut
facilement ecirctre deacutetecteacute par les expressions suivantes
We say that we are signed in when (There exists $p in $(action-band) such that (
$prsquos text matches ^Welcome))
We say that we are in the login page when (There exists $div in $(sign-in) such that (
Not ( $divrsquos display is none )))
Always (If ( we are signed in ) Then (
Not ( we are in the login page )))
Les deux deacutefinitions We say that expliquent comment on deacutefinit le fait drsquoecirctre connecteacute et
drsquoecirctre dans la page de connexion dans le Beep Store Lrsquoexpression There exists x in y such
that (z) est utiliseacutee pour affecter agrave la variable x un eacuteleacutement de lrsquoensemble y ougrave z est vrai Nous
pouvons voir que lrsquoensemble y dans le second preacutedicat est composeacute de tous les eacuteleacutements
avec lrsquoidentifiant laquo sign-in raquo et il srsquoassure que z est vrai avec au moins un drsquoentre eux La
construction x matches y quant agrave elle veacuterifie si x correspond agrave lrsquoexpression reacuteguliegravere y et
la construction x is y veacuterifie si x est eacutegal agrave y Enfin lrsquoinstruction Always (x) veacuterifie que x est
vrai dans chaque instantaneacute En un mot il ne devrait jamais arriver que la bande drsquoaction dise
laquo Welcome raquo pendant que le div avec lrsquoidentifiant laquo sign-in raquo est afficheacute
Agrave titre de comparaison la figure 55 montre comment on pourrait attraper le mecircme bug
uniquement avec Crawljax et son architecture de plugin La lisibiliteacute est beaucoup plus faible
et avec des proprieacuteteacutes plus complexes nous pouvons voir donc comment le code peut devenir
complexe et long
129
private enum Verdict TRUE FALSE INCONCLUSIVEprivate Verdict m_verdict
Overridepublic void onNewState(CrawlerContext context StateVertexnewState) if(m_verdict == VerdictINCONCLUSIVE) EmbeddedBrowser browser = contextgetBrowser()
Identification identificationActionBand =new Identification(IdentificationHowid action-band)
booleansignedIn = false
Identification identificationSignInDiv =new Identification(IdentificationHowid sign-in)
booleancurrentlyInLoginPage = false
if(browserelementExists(identificationActionBand)) WebElementactionBand = browsergetWebElement(identificationActionBand)if(Patternmatches(^Welcome actionBandgetText())) signedIn = true
if(browserelementExists(identificationSignInDiv)) WebElementsignInDiv = browsergetWebElement(identificationSignInDiv)if(signInDivisDisplayed()) currentlyInLoginPage = true
if(signedIn) if(currentlyInLoginPage) m_verdict = VerdictFALSE
output(context newState)
Figure 55 ndash Le code neacutecessaire pour attraper le bug des connexions multiples en utilisant Crawl-jax sans Cornipickle
130
Paniers multiples Le bug des paniers multiples peut ecirctre deacutetecteacute par cette proprieacuteteacute
We say that we are signed in when (There exists $p in $(action-band) such that (
$prsquos text matches ^Welcome))
We say that we create a cart when (There exists $button in $(button-create-cart)
such that ($buttonrsquos event is click
))
The next time ( we are signed in ) Then (The next time ( we create a cart ) Then (
Always (Not ( we create a cart )
)))
Les deacuteclarations temporelles The next time x Then (y) eacutevaluent agrave vrai si y eacutevalue agrave vrai
mais seulement apregraves que x le soit Donc apregraves que nous nous soyons connecteacutes et apregraves que
nous ayions cliqueacute sur le bouton laquo creacuteer un panier raquo nous ne devrions plus jamais cliquer sur
laquo creacuteer un panier raquo
Le bug de suppression drsquoun panier existant se gegravere de maniegravere similaire nous ne le deacutecrirons
pas en deacutetail ici
Il est agrave noter que lrsquoeacutevaluation drsquoun eacutetat avec ces proprieacuteteacutes Cornipickle prend entre 36 et 74
millisecondes par page avec un processeur Intel Core i5-3470 Gardez agrave lrsquoesprit que bien que
les proprieacuteteacutes soient assez simples le Beep Store est une tregraves grande application agrave seacuterialiser
car mecircme les blocs non afficheacutes doivent ecirctre inclus
131
542 DEacuteTECTION DE BUGS RWD DANS DE VRAIS SITES WEB
Nous montrons maintenant quelques exemples de proprieacuteteacutes Cornipickle pour la deacutetection
de bugs RWD Les comportements drsquoun site web sont uniques pour chaque site Pour cette
raison la deacutetection des bugs comportementaux neacutecessite des proprieacuteteacutes speacutecifiques Drsquoautre
part le Responsive Web Design est une approche geacuteneacuterale de la conception Web similaire aux
modegraveles de conception (design patterns) dans les langages traditionnels Les eacutechecs dans lrsquoim-
pleacutementation de cette conception doivent ecirctre deacutetectables avec des proprieacuteteacutes geacuteneacuterales Pour
cette raison les proprieacuteteacutes deacutecrites dans cette section ne constituent que des avertissements
une violation ne devrait pas signifier qursquoil srsquoagit drsquoun bug dans tous les cas
Preacutesence de barres de deacutefilement Lrsquoune des premiegraveres indications drsquoun site web pas res-
ponsive est la preacutesence drsquoune barre de deacutefilement horizontale Pour deacutetecter ce bug une simple
proprieacuteteacute Cornipickle peut ecirctre deacutefinie
We say that there is an horizontal scrollbar when (the pagersquos width is less than
the pagersquos scroll-width)
name No horizontal scrollbardescription There should never be an horizontal scrollbarseverity Error
Always (
Not ( there is an horizontal scrollbar ))
Dans cette proprieacuteteacute lrsquointerception drsquoune barre de deacutefilement horizontale peut ecirctre obtenue en
comparant la largeur de la fenecirctre (viewportwidth) avec la largeur de deacutefilement (scroll-width)
132
Cela ne devrait jamais arriver si elle est toujours entoureacutee avec la construction Always Not
Collision drsquoeacuteleacutements Crsquoest le bug ougrave les eacuteleacutements se chevauchent Cette proprieacuteteacute com-
mence par certaines deacutefinitions du langage pour simplifier le cœur de la proprieacuteteacute agrave la fin Elle
deacutecrit les intersections horizontales et verticales un eacuteleacutement visible deux eacuteleacutements identiques
et des chevauchements
We say that $x x-intersects $y when ((($yrsquos right - 1) is greater than $xrsquos left)And(($xrsquos right - 1) is greater than $yrsquos left)
)
We say that $x y-intersects $y when ((($yrsquos bottom - 1) is greater than $xrsquos top)And(($xrsquos bottom - 1) is greater than $yrsquos top)
)
We say that $x is visible when (Not ( $xrsquos display is none )
)
We say that $x and $y are the same when ($xrsquos cornipickleid equals $yrsquos cornipickleid
)
We say that $x and $y are not the same when (Not ($x and $y are the same)
)
We say that $x and $y overlap when ((($x is visible) And ($y is visible))And(
($x x-intersects $y)And($x y-intersects $y)
133
))
We say that $x and $y do not overlap when (Not ($x and $y overlap)
)
La premiegravere deacutefinition utilise laquo right - 1 raquo car les eacuteleacutements qui se croisent doivent se croiser drsquoau
moins 2 pixels Il surmonte un problegraveme ougrave nous recevons des dimensions et des coordonneacutees
en entiers (pixels) mais le navigateur peut travailler avec des floats dans le cas drsquoeacuteleacutements
ayant des dimensions en ratios Ces floats sont arrondis et peuvent provoquer des diffeacuterences
de 1 pixel entre ce qui est afficheacute et ce qui est seacuterialiseacute Il est vrai que nous pouvons manquer
des bugs qui sont leacutegitimement agrave 1 pixel mais il est important de ne pas punir les bonnes
pratiques
La deacutefinition drsquoun eacuteleacutement visible veacuterifie uniquement si la proprieacuteteacute display est laquo none raquo car ces
eacuteleacutements ne provoquent aucun changement de disposition En outre cette valeur est affecteacutee
consciemment par le deacuteveloppeur afin que leur position sur la page soit correcte Le troisiegraveme
deacutecrit deux eacuteleacutements qui sont identiques en utilisant la proprieacuteteacute laquo cornipickleid raquo Cette
proprieacuteteacute est une valeur unique donneacutee agrave chaque eacuteleacutement important dans la page pendant la
phase de seacuterialisation Comme il est unique il peut ecirctre utiliseacute pour identifier si deux eacuteleacutements
sont identiques
La derniegravere construction deacutefinit deux eacuteleacutements qui se chevauchent Si elles sont agrave la fois
visibles et qursquoelles se croisent verticalement et horizontalement elles sont consideacutereacutees dans
une collision
name Element Collisiondescription All items that arenrsquot
overlapping initially shouldnrsquot ever overlap
134
severity WarningAlways (
For each $x in $(body ) (For each $y in $($x gt ) (
For each $z in $($x gt ) (If ( ($y and $z are not the same) And
($y and $z do not overlap) ) Then (Next (
When $y is now $a (When $z is now $b (
$a and $b donrsquot overlap)))))))
Enfin les trois constructions For each rassemblent tous les eacuteleacutements et leurs enfants directs
Elle permet de tester des paires de fregraveres et sœurs pour leur proprieacuteteacute de recouvrement Notez
qursquoelle ne veacuterifie pas si un eacuteleacutement chevauche un laquo cousin raquo car ce cousin aurait besoin de violer
la proprieacuteteacute Protrusion (qui nrsquoest pas deacutetailleacutee dans cette thegravese) La proprieacuteteacute pourrait ecirctre faite
en testant chaque eacuteleacutement avec tous les autres eacuteleacutements mais il est coucircteux en performance
Les deux constructions When $x is now $y rassemblent la paire dans la capture drsquoeacutecran
suivante afin de la comparer agrave elle-mecircme dans la capture drsquoeacutecran preacuteceacutedente Dans lrsquoensemble
la proprieacuteteacute dit que si deux fregraveres et sœurs ne se chevauchent pas agrave un moment donneacute ces
deux fregraveres et sœurs ne devraient pas se chevaucher au moment suivant
Les autres bugs RWD (deacutepassement des eacuteleacutements etc) deacutecrits au chapitre 2 peuvent ecirctre
traiteacutes de maniegravere similaires nous ne les deacutetaillerons pas ici
Agrave titre eacutevaluatif nous avons eacutevalueacute une proprieacuteteacute en fonction du nombre drsquoeacuteleacutements Le temps
de calcul de lrsquointerpreacuteteur en fonction du nombre drsquoeacuteleacutements dans la page est montreacute dans la
figure 56 Le temps de calcul en incluant la seacuterialisation de la page par la sonde JavaScript et
lrsquointerpreacutetation de la proprieacuteteacute en fonction du nombre drsquoeacuteleacutements dans la page est preacutesenteacute
dans la figure 57 Nous pouvons constater que lrsquointerpreacuteteur srsquoexeacutecute tregraves rapidement crsquoest
135
Figure 56 ndash Temps de calcul de lrsquointerpreacuteteur en fonction du nombre drsquoeacuteleacutements dans la page
bien la seacuterialisation de la page par la sonde qui prend le plus de temps dans le processus global
136
Figure 57 ndash Temps de calcul incluant la seacuterialisation de la page par la sonde JavaScript etlrsquointerpreacutetation de la proprieacuteteacute en fonction du nombre drsquoeacuteleacutements dans la page
CHAPITRE 6
VERS UN MEILLEUR FEEDBACK POUR LrsquoUTILISATEUR
Jusqursquoici nous avons preacutesenteacute un outil automatiseacute pour la deacutetection des bugs drsquointerface
permettant drsquoeacutevaluer les expressions dans un langage deacuteclaratif de haut niveau baseacute sur la
logique temporelle lineacuteaire et de premier ordre Or les pages web sont composeacutees de centaines
drsquoeacuteleacutements avec des dizaines drsquoassertions de proprieacuteteacutes qui doivent tenir de plus les deacutefauts
de mise en page sont parfois trop subtils pour ecirctre visibles agrave lrsquoœil nu (comme les eacuteleacutements drsquoun
seul pixel) Par conseacutequent lrsquoeacutevaluation de base de ces proprieacuteteacutes renvoyant un simple verdict
vraifaux ne serait pas tregraves utile pour un concepteur Le fait de simplement dire que laquo quelque
chose ne va pas raquo apporte peu de valeur ajouteacutee lorsque quelqursquoun doit rechercher le problegraveme
dans une page aussi complexe Pour fournir une reacuteelle eacutevaluation aux praticiens un outil
drsquoanalyse de la mise en page devrait donc ecirctre capable de repeacuterer des eacuteleacutements speacutecifiques de
la page qui sont responsables de certains bugs
Agrave cette fin Cornipickle a eacuteteacute eacutequipeacute drsquoun meacutecanisme pour essayer de circonscrire des parties
drsquoune page qui expliquent la faute deacutecouverte Notre travail sur la deacutetection de bugs de mise en
page est donc devenu une forme de localisation de deacutefaut (fault localization) Nous allons dans
ce chapitre exposer deux tentatives afin de fournir agrave lrsquoutilisateur un verdict plus riche qursquoun
simple vraifaux La premiegravere conduit agrave une construction appeleacutee laquo teacutemoin raquo baseacutee sur une
138
fonction appliqueacutee reacutecursivement sur la formule qui est falsifieacutee Un teacutemoin met en eacutevidence
un ensemble drsquoeacuteleacutements dans la page qui sont lieacutes drsquoune certaine maniegravere agrave la violation drsquoune
proprieacuteteacute
Cela srsquoest reacuteveacuteleacute insuffisant dans la pratique par la suite nous reprenons le travail sur une
nouvelle base formelle fondeacutee cette fois sur le concept de laquo reacuteparation raquo Intuitivement une
reacuteparation est un ensemble minimal de transformations qui lorsqursquoelles sont appliqueacutees agrave
lrsquoobjet original reacutetablissent sa satisfiabiliteacute par rapport agrave la speacutecification Lrsquoavantage de ce
concept est qursquoil est indeacutependant de la nature de lrsquoobjet et du langage de speacutecification utiliseacute
pour deacuteclarer ses proprieacuteteacutes attendues Il pourrait donc ecirctre appliqueacute agrave une varieacuteteacute drsquoautres
sceacutenarios en plus des applications web
61 GEacuteNEacuteRATION DE CONTRE-EXEMPLE LES TEacuteMOINS
Gracircce agrave la nature des speacutecifications du langage Cornipickle baseacutees sur la logique il est possible
drsquoanalyser systeacutematiquement une assertion quand elle est eacutevalueacutee agrave faux et drsquoidentifier les
eacuteleacutements qui sont laquo responsables raquo de la fausseteacute de cette assertion
Verdicts et teacutemoins
Nous appelons teacutemoin un arbre drsquoeacuteleacutements DOM soit W sube T lrsquoensemble de tous les teacutemoins
(W pour witness) Lrsquoensemble des verdicts est deacutefini comme V BcupgtperptimesW timesW un
verdict est composeacute drsquoune valeur de veacuteriteacute et de deux teacutemoins lrsquoun correspondant agrave la valeur
de veacuteriteacute gt lrsquoautre agrave la valeur de veacuteriteacute perp
139
La conjonction de verdicts est une fonction otimes V timesNtimesV rarrV deacutefinie comme suit
otimes(〈bwgtwperp〉ν 〈bprimewprimegtwprimeperp〉) =
〈perpwgtwperpcup(ν wprimeperp)〉 si bprime =perp
〈bandbprimewgtcup(ν wprimegt)wperp〉 si b 6=perp
〈bwgtwperp〉 sinon
Nous interpreacutetons bandbprime comme la conjonction classique agrave trois valeurs La notation (ν w)
deacutesigne la creacuteation drsquoun nouveau teacutemoin (witness) dont la racine est le nœud DOM ν avec le
teacutemoin w comme son enfant La notation wcupwprime deacutesigne lrsquoaddition de wprime aux enfants du teacutemoin
w Nous allons abuser de la notation et accepter que le deuxiegraveme argument de otimes pourrait ecirctre
un eacuteleacutement laquo vide raquo de N nous deacutesignerons comme ν 0 Cet eacuteleacutement est neacutecessaire de sorte que
chaque opeacuteration sur les verdicts peut surclasser un teacutemoin existant avec un nouveau nœud
racine mecircme srsquoil nrsquoy a rien agrave laquo teacutemoigner raquo
La conjonction de verdicts met agrave jour le contenu drsquoun verdict existant v et donne un autre
verdict vprime et un eacuteleacutement DOM ν Si vprime est faux il porte un teacutemoignage de cette fausseteacute agrave
savoir wprimeperp ce teacutemoin est attacheacute comme un enfant drsquoun nouvel arbre dont la racine est ν et
cet arbre est ajouteacute au teacutemoignage de la fausseteacute de v wperp De plus la valeur de veacuteriteacute de v
est deacutefinie comme eacutetant perp Autrement dit lrsquoexplication de vprime pour ecirctre fausse est ajouteacutee agrave
lrsquoexplication de v pour ecirctre fausse Dans le cas contraire si ni le premier eacuteleacutement de v ni celui
de vprime est faux alors le teacutemoin vprime associeacute agrave gt est ajouteacute au teacutemoin gt de v et sa valeur de veacuteriteacute
est mise agrave jour en conseacutequence Dans tous les autres cas v est laisseacute inchangeacute
140
ω(tνrsquos a equals ν primersquos aprime) =
〈gtν ν prime 0〉 if ν(a) = ν prime(aprime)〈gt 0ν ν prime〉 otherwise
ω(tνrsquos a equals v) =
〈gtν 0〉 if ν(a) = v〈perp 0ν〉 otherwise
ω(tNotϕ) = (ω(tϕ)ν 0)ω(tϕ And ψ) = otimes(otimes(〈gt 0 0〉ν 0ω(tϕ))ν 0ω(tψ))
ω(tϕ Or ψ) = oplus(oplus(〈perp 0 0〉ν 0ω(tϕ))ν 0ω(tψ))ω(tIf ϕ Then ψ) = oplus(oplus(〈perp 0 0〉ν 0(ω(tϕ)ν 0))ν 0ω(tψ))
ω(tThere exists ξ in$(c) such that ϕ)
=oplus〈perp 0 0〉
νisinχ(t0c)ω(tϕ[ξν ])
ω(tFor each ξ in $(c) ϕ) =otimes〈gt 0 0〉
νisinχ(t0c)ω(tϕ[ξν ])
Tableau 61 ndash La deacutefinition reacutecursive de la fonction de calcul du verdict ω
La disjonction de verdict oplus V timesNtimesV rarrV est deacutefinie comme le dual de la conjonction
oplus(〈bwgtwperp〉ν 〈bprimewprimegtwprimeperp〉) =
〈gtwgtcup(ν wprimegt)wperp〉 si bprime =gt
〈borbprimewgtwperpcup(ν wprimeperp)〉 si b 6=gt
〈bwgtwperp〉 sinon
Enfin la neacutegation du verdict est la fonction V timesNrarrV deacutefinie comme suit
(〈bwgtwperp〉ν) =
〈notbwperpcup(ν wgt)wgtcup(ν wperp)〉 si b isin gtperp
〈bwgtwperp〉 sinon
Intuitivement inverse les teacutemoins associeacutes agrave gt et perp et les surmonte drsquoune nouvelle racine
avec le nœud DOM ν Cela nrsquoa aucun effet lorsque le verdict est laquo raquo
En utilisant ces opeacuterateurs la seacutemantique formelle de Cornipickle deacutecrite dans le tableau 44
peut alors ecirctre eacutetendue agrave une fonction ω T lowasttimesΦrarrV qui sur une expression ϕ isinΦ et une
trace t isin T lowast calcule un verdict
141
La notationotimes〈gt 0 0〉
νisinχ(t0c)ω(tϕ[ξν ]) est un raccourci pour
otimes(〈gt 0 0〉ν 0otimes(ω(tϕ[ξν0])ν0otimes(ω(tϕ[ξν1])ν1 middot middot middot)))
En drsquoautres termes elle deacutesigne la conjonction reacutepeacuteteacutee du verdict de ω(tϕ[ξν ]) pour chaque
ν isin χ(t0c) agrave partir du verdict vide 〈gt 0 0〉 Une notation similaire est utiliseacutee pour oplus
Cette deacutefinition est difficile agrave lire en termes de notation cependant le lecteur peut reacutealiser en
lrsquoexaminant que la deacutefinition de chaque cas correspond agrave lrsquointuition Par exemple construire
le verdict de laquo ϕ And ψ raquo revient agrave deacutemarrer du verdict laquo vide raquo 〈gt 0 0〉 et lui joindre
successivement le verdict de ϕ et ψ
De mecircme construire le verdict pour une expression quantifieacutee existentiellement ϕ(x) est
obtenu en calculant successivement la disjonction du verdict de ϕ(k) pour chaque k du verdict
initial 〈perp 0 0〉 Ceci est compatible avec le fait que existx isin S ϕ(x) est eacutequivalent agraveor
kisinS ϕ(k)
Enfin un raisonnement similaire srsquoapplique aux opeacuterateurs temporels lineacuteaires Par exemple
t |= Alwaysϕ peut ecirctre deacutefini comme t |= ϕ et t1 |= Alwaysϕ drsquoougrave les verdicts ω(tϕ) et
ω(t1Always ϕ) sont combineacutes en utilisant la conjonction verdict
A titre drsquoillustration de cette proceacutedure nous montrerons comment un verdict peut ecirctre
calculeacute pour lrsquoexpression suivante en consideacuterant lrsquoarbre de la figure 44 For each $x in
$(p) For each $y in $(p) $xrsquos width equals $yrsquos width Le document contient
trois paragraphes que nous appellerons p1 p2 et p3 le premier et le troisiegraveme ont une largeur
(width) de 400 tandis que le second a une largeur de 200 La deacuteclaration inteacuterieure $xrsquos
width equals $yrsquos width sera donc eacutevalueacutee neuf fois une fois pour chaque combinaison
de nœuds DOM pour $x et $y
Selon la deacutefinition de la fonction ω dans le tableau 61 chaque eacutevaluation produira un verdict
142
de la forme 〈gtpi p j 0〉 quand pi et p j ont la mecircme largeur et 〈perp 0pi p j〉 quand ils
sont deacutefinis autrement Dans le premier cas la deacuteclaration srsquoeacutevalue agrave gt et les nœuds DOM pi
et p j sont ajouteacutes comme gt-teacutemoins de ce fait Lrsquoinverse srsquoapplique lorsque lrsquoinstruction est
fausse
Ces verdicts sont ensuite reacuteunis dans le quantificateur universel le plus profond Un verdict
vide 〈gt 0 0〉 est drsquoabord creacuteeacute et tous les verdicts pour lrsquoexpression inteacuterieure sont ensuite
combineacutes en utilisant la conjonction verdict Par exemple quand $x se reacutefegravere agrave p1 trois
verdicts sont joints 〈gtp1 p1 0〉 〈perp 0p1 p2〉 et 〈gtp1 p3 0〉 Selon la deacutefinition
de conjonction de verdict le verdict reacutesultant sera
〈perp(ν 0〈gtp1 p1 0〉)(ν 0〈gtp1 p3 0〉)(ν 0〈perp 0p1 p2〉)〉
Les deux verdicts internes srsquoeacutevaluant agrave gt sont attacheacutes au teacutemoin associeacute agrave gt et le verdict
eacutevaluant perp est attacheacute au teacutemoin associeacute agrave perp Trois de ces verdicts seront produits par le
quantificateur le plus interne un pour chaque valeur de $x qui seront ensuite combineacutes en
utilisant agrave nouveau la conjonction par le quantificateur universel le plus externe ce qui donnera
le verdict final
〈perp 0
(ν 0〈perp(ν 0〈gtp1 p1 0〉)(ν 0〈gtp1 p3 0〉)(ν 0〈perp 0p1 p2〉)〉)
(ν 0〈perp(ν 0〈gtp2 p2 0〉)(ν 0〈perp 0p1 p2〉)(ν 0〈perp 0p2 p3〉)〉)
(ν 0〈perp(ν 0〈gtp1 p3 0〉)(ν 0〈gtp3 p3 0〉)(ν 0〈perp 0p2 p3〉)〉) 〉
Lrsquoimpleacutementation actuelle de Cornipickle peut calculer ces verdicts et les renvoyer agrave la sonde
JavaScript Les verdicts sont envoyeacutes agrave la sonde sous forme drsquoune liste Cornipickle ID Chaque
143
A list item
Another list item
A third list item
The last list item
(a)
A list item
Another list item
A third list item
The last list item
(b)
Figure 61 ndash Exemple drsquoune erreur de mise en page Web simple (a) lrsquoun des eacuteleacutements de la listeest incorrectement aligneacute avec les autres (b) un teacutemoin (witness) produit par lrsquooutil Cornipickle
ID est unique correspondant un eacuteleacutement speacutecifique dans la page ce qui permet drsquoentourer
lrsquoeacuteleacutement en question dans la fenecirctre du navigateur
62 LOCALISATION DES ERREURS DANS LES APPLICATIONS WEB
Agrave notre connaissance le principe de calcul du verdict deacutecrit preacuteceacutedemment fait de Cornipickle
un des tout premiers systegravemes agrave expliquer graphiquement en quoi une proprieacuteteacute est violeacutee
Malheureusement nous avons deacutecouvert que ce principe laisse tout de mecircme un peu agrave deacutesirer
Par exemple consideacuterons la proprieacuteteacute voulant que tous les eacuteleacutements drsquoune liste avec lrsquoID
laquo menu raquo doivent ecirctre aligneacutes verticalement
For each $x in $(menu li) (For each $y in $(menu li) (
$xrsquos left equals $yrsquos left))
Pour cet exemple particulier la figure 61a montre une page simple pour laquelle la proprieacuteteacute
serait violeacutee Nous pouvons voir le reacutesultat de lrsquoapplication de ω deacutefinie dans la section
preacuteceacutedente sur lrsquoarbre DOM de la figure 61a La fonction retourne un arbre contenant des
pointeurs sur deux des eacuteleacutements de la page surligneacutes en rouge dans la figure 61b (En fait la
fonction renvoie plusieurs ensembles chacun contenant le second eacuteleacutement de liste et lrsquoun des
eacuteleacutements restants)
144
Intuitivement un tel reacutesultat est logique pour un concepteur de sites web en effet ces deux
eacuteleacutements doivent ecirctre aligneacutes alors qursquoils ne le sont pas Cependant cette information ne peut
ecirctre deacuteduite que par la connaissance de la proprieacuteteacute violeacutee le teacutemoin pointe simplement ces
deux eacuteleacutements sans fournir drsquoinformations sur laquo ce qui ne va pas raquo agrave leur sujet Alors que la
geacuteneacuteration de contre-exemple reacutecursif preacutesente dans la version actuelle de Cornipickle fournit
plus drsquoinformations qursquoun simple verdict vraifaux dans de nombreux cas elle peut donc
srsquoaveacuterer trop vague pour ecirctre utile
Nous introduisons la notion de reacuteparation qui peut ecirctre deacutefinie intuitivement comme un
ensemble de modifications neacutecessaires agrave un objet pour le rendre conforme agrave une proprieacuteteacute
La notion de reacuteparation peut ecirctre vue comme une localisation de deacutefaut exprimeacutee en sens
inverse indiquer comment un objet doit ecirctre reacutepareacute indirectement pointe vers des aspects de
sa structure qui sont responsables du fait que la proprieacuteteacute nrsquoest pas actuellement remplie Nous
verrons que contrairement au concept de teacutemoin qui est une technique lineacuteaire en fonction
de la taille de la formule et fortement associeacute au langage de speacutecification et aux objets de
domaine utiliseacutes les reacuteparations sont deacutefinies agrave un niveau drsquoabstraction qui ne deacutepend pas des
proprieacuteteacutes de lrsquoun ou de lrsquoautre
621 DEacuteFINITIONS
Soit Σ un ensemble de structures et TΣ un ensemble drsquoendomorphismes sur Σ crsquoest-agrave-dire
que chaque τ isin TΣ est une fonction τ Σrarr Σ Soit 2TΣ lrsquoensemble de tous les sous-ensembles
de TΣ Un ensemble drsquoendomorphismes T = τ1 τn isin 2TΣ est dit ecirctre bien deacutefini si
deux eacuteleacutements τi τ j sont tels que τi τ j equiv τ j τ j Un tel ensemble bien deacutefini sera appeleacute
transformation Lorsque le contexte est clair nous allons abuser de la notation et consideacuterer T
comme lrsquoendomorphisme (deacutefini de faccedilon unique) τ1 middot middot middot τn Lrsquoinclusion drsquoensembles induit
145
un ordre partiel sur les transformations
Soit Φ un ensemble drsquoexpressions de langage eacutequipeacutees drsquoune relation de satisfaction |= Σtimes
Φrarr gtperp Pour une expression ϕ isinΦ et une structure σ isin Σ nous eacutecrirons σ |= ϕ si et
seulement si |= (σ ϕ) =gt Dans un tel cas nous dirons que σ laquo veacuterifie raquo ϕ ou alternativement
que σ est un modegravele de ϕ
Soit σ isin Σ une structure telle que σ 6|= ϕ pour une expression ϕ isin Φ Une reacuteparation est
deacutefinie comme une transformation T isin 2TΣ telle que T (σ) |= ϕ Une reacuteparation est dite prime
si aucun sous-ensemble T prime sube T est tel que T prime est aussi une reacuteparation Intuitivement une
reacuteparation principale est un ensemble de laquo changements raquo sur une structure σ qui satisfait ϕ
de sorte qursquoaucune modification laquo plus petite raquo ne restaure aussi la satisfiabiliteacute Comme sube
est une commande partielle il peut y avoir plusieurs reacuteparations principales mutuellement
incomparables
La figure 62 illustre ce concept Lrsquoimage repreacutesente toutes les transformations qui peuvent
ecirctre appliqueacutees agrave une structure dans le cas simple ougrave seulement quatre morphismes existent
La transformation vide est en bas et chaque flegraveche dans le graphe repreacutesente lrsquoajout drsquoun
morphisme suppleacutementaire agrave une transformation existante Les nœuds rouges indiquent les
transformations qui ne sont pas reacutepareacutees tandis que les nœuds jaunes et verts indiquent les
reacuteparations Parmi ceux-ci les reacuteparations principales sont coloreacutees en vert on peut voir que
tous les anteacuteceacutedents des nœuds verts sont rouges Lrsquoinverse cependant nrsquoest pas vrai tous les
descendants drsquoune reacuteparation ne sont pas eux-mecircmes reacutepareacutes
146
Figure 62 ndash Illustration du concept de reacuteparation principale
622 EXEMPLES
Cette deacutefinition simple peut ensuite ecirctre appliqueacutee agrave une varieacuteteacute de langages de speacutecification
comme nous allons lrsquoillustrer agrave travers les exemples qui suivent
Logique propositionnelle
Comme premier exemple soit Φ lrsquoensemble des formules de logiques propositionnelles
avec les variables X = x1 xn pour certains n ge 1 Soit Σ lrsquoensemble des fonctions
X rarrgtperp que nous appellerons des eacutevaluations La relation de satisfaction |= est deacutefinie
comme σ |= ϕ =gt si et seulement si ϕ vaut vrai lorsque ses variables sont remplaceacutees par la
valeur de veacuteriteacute correspondante speacutecifieacutee par σ et sinon par perp
Soit b isin gtperp et i isin [1n] Nous noterons τxi 7rarrb lrsquoendomorphisme deacutefini comme
(τxi 7rarrb(σ))(x) =
b si x = xi
σ(x) sinon
Ce morphisme met xi agrave la place de b et laisse inchangeacute le reste de lrsquoeacutevaluation initiale
147
Lrsquoensemble des endomorphismes TΣ est alors deacutefini comme
TΣ =⋃
iisin[1n]
⋃bisingtperp
τxi 7rarrb
Deux transformations τx 7rarrb τ primey7rarrbprime commutent si x 6= y Ainsi un ensemble de transformations
T isin 2TΣ est bien deacutefini si et seulement si chaque endomorphisme qursquoil contient change la
valeur drsquoune variable diffeacuterente
Soit X = abc soit σ lrsquoeacutevaluation a 7rarrgtb 7rarrperpc 7rarrperp et ϕ la formule propositionnelle
aand b On peut facilement observer que σ 6|= ϕ Une reacuteparation est la transformation T =
τb 7rarrgt qui est T (σ) |= ϕ Cela correspond agrave lrsquointuition que lrsquoexplication de la fausseteacute
de ϕ est que b est faux alors qursquoil devrait ecirctre vrai Notons que bien que T prime = τb7rarrgtτc7rarrgt
rendrait aussi ϕ vrai ce nrsquoest pas une reacuteparation primaire puisque T sube T prime Cela correspond agrave
lrsquointuition que la valeur de veacuteriteacute de c est pas pertinente agrave la fausseteacute de ϕ
Soit σ lrsquoeacutevaluation a 7rarr gtb 7rarr perpc 7rarr perp et ϕ la formule propositionnelle ararr b Cette
fois deux reacuteparations primaires existent T = τb7rarrgt et T prime = τa7rarrperp Il est possible de
veacuterifier que les deux fixent la valeur de veacuteriteacute de lrsquoeacutevaluation initiale Informellement la
premiegravere transformation repreacutesente la fausseteacute de ϕ sur le fait que a est vrai tandis que lrsquoautre
lrsquoexplique plutocirct par le fait que b est faux mdash ce qui correspond bien agrave lrsquointuition Puisque
les deux reacuteparations sont incomparables aucune de ces explications nrsquoest laquo preacutefeacutereacutee raquo Nous
reviendrons sur ce concept plus tard
Logique du premier ordre
Le concept de reacuteparation peut facilement ecirctre leveacute agrave lrsquoensemble Φ de la formule logique de
premier ordre sur les domaines finis Soit A un ensemble drsquoeacuteleacutements un preacutedicat n-aire est
148
deacutefini comme une fonction p Anrarrgtperp Soit Pi lrsquoensemble des preacutedicats de lrsquoariteacute i Une
signature est un ensemble de preacutedicats P = p1 pm respectivement drsquoariteacute a1 am
Pour une signature donneacutee lrsquoensemble des eacuteleacutements de domaine est deacutefini comme
Σ = Pa1timesmiddotmiddot middottimesPam
La relation de satisfaction |= est deacutefinie comme |= (dϕ) =gt si ϕ est eacutevalueacute agrave vrai lors de
lrsquoeacutevaluation de preacutedicats tels que deacutefinis dans σ et perp deacutefinie autrement
Dans ce contexte un endomorphisme repreacutesentera le changement de la valeur de veacuteriteacute pour
une entreacutee drsquoun preacutedicat Soit pk un preacutedicat de lrsquoariteacute i (a1 ak)isinAn un k-tuple drsquoeacuteleacutements
de A et b isin gtperp La transformation τpk(a1ak)7rarrb est deacutefini comme le preacutedicat pprimek tel que
pprimek(x1 xk) =
b si x1 = a1 xn = an
pk(x1 xk) autrement
Lrsquoensemble des transformations pour pk noteacute Tpk est deacutefinie comme suit
Tpk ⋃
(a1ak)isinAn
⋃bisingtperp
τpk(a1ak)b
Lrsquoensemble global des transformations est alors
TΣ ⋃pisinP
Tp
De maniegravere similaire agrave la logique du premier ordre on peut veacuterifier que deux endomorphismes
149
1
2
3
4
5
(a) Graphe original
1
2
3
4
5
(b) Apregraves lrsquoapplication de T1
1
2
3
4
5
(c) Apregraves lrsquoapplication de T2
1
2
3
4
5
(d) Apregraves lrsquoapplication de T3
1
2
3
4
5
(e) Apregraves lrsquoapplication de T4
Figure 63 ndash Quelques reacuteparations possibles pour un coloriage de graphe deacutefectueux
commutent srsquoils opegraverent sur un preacutedicat diffeacuterent ou changent la valeur drsquoune entreacutee diffeacuterente
sur le mecircme preacutedicat
Soit A = 012 ϕ la formule du premier ordre forallx existy x 6= yand p(xy) et le preacutedicat binaire
p deacutefini comme (00)(01)(11) Il y a deux reacuteparations primaires pour restaurer la veacuteriteacute
de ϕ T1 = τp(20)7rarrgt T2 = τp(21)7rarrgt Cela correspond agrave lrsquointuition que la valeur 2
manque au moins un laquo partenaire raquo dans p et que 0 ou 1 pourraient chacun correspondre agrave ce
but
Soit A = [15] un ensemble de sommets de graphe p un preacutedicat binaire codant la relation
drsquoadjacence des arecirctes de graphe et q1q2q3 un ensemble de preacutedicats unaires tel que qi(x)
contient si et seulement si le sommet x ayant la couleur i Supposons que les preacutedicats p et q
soient deacutefinis en fonction de la repreacutesentation graphique montreacutee dans la figure 63a
150
Une solution au problegraveme de coloriage de graphe peut ecirctre repreacutesenteacutee par trois expressions
de premier ordre
ϕ1 forallx (q1(x)andnotq2(x)andnotq3(x))or (notq1(x)andq2(x)andnotq3(x))or (notq1(x)andnotq2(x)andq3(x))
ϕ2 forallx forally p(xy)rarr p(yx)
ϕ3 forallx forally p(xy)rarr ((q1(x)rarrnotq1(y))and (q2(x)rarrnotq2(y))and (q3(x)rarrnotq3(y)))
La premiegravere stipule que chaque sommet a une couleur exacte la seconde indique que la
relation drsquoadjacence est symeacutetrique et lrsquoexpression finale stipule qursquoaucun sommet adjacent ne
peut avoir la mecircme couleur On peut voir que le graphe original ne satisfait pas ϕ1andϕ2andϕ3
Il existe plusieurs reacuteparations principales dont certaines sont indiqueacutees ici
T1 = τq1(5)7rarrperpτq2(5)7rarrgt
T2 = τp(45)7rarrperpτp(54)7rarrperp
T3 = τq1(1)7rarrperpτq3(1)7rarrgtτq1(4)7rarrperpτq3(4)7rarrgt
T4 = τp(24)7rarrperpτp(42)7rarrperpτq1(4)7rarrperpτq3(4)7rarrgt
La reacuteparation T1 corrige le graphe en changeant la couleur du sommet 5 en rouge Notons que
cela neacutecessite non seulement de mettre q2(5) agrave gt mais aussi q1(5) agrave perp sinon la structure
reacutesultante violerait ϕ1 Une autre reacuteparation (non repreacutesenteacutee) change le sommet 5 en vert La
reacuteparation T3 modifie plutocirct la relation drsquoadjacence et coupe le sommet 5 du reste du graphe
de sorte que le conflit de couleur soit reacutesolu
151
Ceux-ci correspondent aux moyens laquo intuitifs raquo de fixer le coloriage du graphe Cependant
il existe plusieurs autres reacuteparations primaires qui reacutepondent agrave la deacutefinition Par exemple la
transformation T4 eacutechange les couleurs des sommets 1 2 et 4 Notons qursquoil srsquoagit bien drsquoune
reacuteparation primaire en ce sens qursquoaucun sous-ensemble de ces endomorphismes ne restaure la
satisfiabiliteacute de la formule drsquoorigine De la mecircme faccedilon T5 coupe le bord entre les sommets
2 et 4 et passe au vert Au total il y a 17 reacuteparations primaires distinctes dans cet exemple
particulier
Encore une fois il convient de noter que sans contexte suppleacutementaire aucune de ces reacutepara-
tions nrsquoest une explication possible de la fausseteacute de ϕ1andϕ2andϕ3 sur le graphe original
Logique de premier ordre eacutetendue
Lrsquoexemple preacuteceacutedent montre la neacutecessiteacute drsquoeacutetendre la seacutemantique de la logique du premier
ordre agrave des fonctions arbitraires au lieu de preacutedicats strictement booleacuteens Cela peut facilement
ecirctre fait comme suit Soit A1 An et B des ensembles finis Nous deacutesignerons par FA1AnrarrB
lrsquoensemble de toutes les fonctions (prodi Ai)rarr B Une signature est un tuple de la forme
〈(A11 A1n1)rarr B1 (Am1 Amnm)rarr Bm〉
tel que fi est une fonction de lrsquoariteacute ni avec le domaine A11 A1ni et image Bi La logique
des preacutedicats est le cas particulier ougrave B1 = middot middot middot= Bnm = gtperp dans ce cas lrsquoimage peut ecirctre
omise et ougrave Ai j sont tous les mecircmes de sorte que seule lrsquoariteacute doit ecirctre connue Si f est une
fonction Ararr B et x deacutesigne un eacuteleacutement de A nous eacutecrirons x f pour deacutesigner f (x) permettant
ainsi une certaine forme de notation laquo objet raquo pour les fonctions
Dans ce contexte les quantificateurs de premier ordre doivent preacuteciser sur quel Ai j ils srsquoap-
152
pliquent de sorte que les expressions deviennent de la forme forallx isin Ai j ϕ et exist isin Ai j ϕ
Les termes de base peuvent maintenant comparer les valeurs de deux termes de fonction en
utilisant nrsquoimporte quel opeacuterateur binaire approprieacute
Les endomorphismes sont toujours deacutefinis de la mecircme maniegravere que pour la logique classique
du premier ordre agrave condition qursquoils se reacutefegraverent aux valeurs approprieacutees dans le domaine et
lrsquoimage de la fonction soumise au changement
Notons que ce formalisme eacutetendu nrsquoajoute aucune expressiviteacute agrave la logique du premier ordre si
tous les ensembles sont maintenus finis Il doit cependant simplifier lrsquoexpression de nombreuses
proprieacuteteacutes
Avec ce formalisme modifieacute nous sommes precircts agrave envisager des reacuteparations dans les proprieacuteteacutes
de mise en page Web Soit E un ensemble drsquoeacuteleacutements de page P un ensemble de valeurs
de pixels et C un ensemble de couleurs CSS Sur ces trois ensembles nous deacutefinissons les
fonctions Erarr P appeleacutees left right top et bottom correspondants respectivement aux
coordonneacutees x et y des coins supeacuterieur gauche(top-left) et infeacuterieur droit (bottom-right)
drsquoun eacuteleacutement De plus nous deacutefinissons un ensemble S de seacutelecteurs CSS lrsquoeacutevaluation drsquoun
seacutelecteur CSS sur un document peut ecirctre formaliseacutee comme une fonction $ Srarr 2E qui pour
une expression de filtre donneacutee retourne le sous-ensemble de E correspondant au seacutelecteur
Les endomorphismes peuvent ecirctre deacutefinis pour chacune de ces fonctions et doivent ecirctre
eacutecrits en utilisant la notation introduite preacuteceacutedemment Par exemple τwidth(e)7rarrk correspond agrave
lrsquoendomorphisme deacutefinissant la valeur de la fonction width (largeur) pour lrsquoeacuteleacutement e isin E
agrave k et laissant tout le reste tel qursquoil est
On peut alors exprimer la proprieacuteteacute que tous les eacuteleacutements dans une liste avec lrsquoID laquo menu raquo
153
A list item
Another list item
A third list item
The last list item
[|
(a)
A list item
Another list item
A third list item
The last list item
[ |
[ |[ |
(b)
A list item
Another list item
A third list item
The last list item
[[|
|
[|
[|
(c)
Figure 64 ndash Trois reacuteparations pour lrsquoexemple web
devraient ecirctre aligneacutes agrave gauche comme lrsquoexpression de premier ordre suivante
forallx isin $(menu li) forally isin $(menu li) xleft= yleft
Notons que cette expression correspond directement agrave la traduction du premier ordre de
lrsquoexpression de Cornipickle montreacutee dans la section 62
Trouver les reacuteparations principales pour cette expression et le fragment de page montreacute dans la
figure 61a produit un certain nombre de solutions dont trois sont montreacutees dans la figure 64
Les deux premiegraveres sont assez intuitifs La figure 64a corrige la page en deacuteplaccedilant lrsquoeacuteleacutement
deacutesaligneacute de la liste avec les autres alors que la Figure 64b fait le contraire en alignant les
trois eacuteleacutements de liste les plus agrave gauche avec le second La figure 64c donne un exemple de
lrsquoune des nombreuses solutions restantes dans ce cas tous les eacuteleacutements de liste sont deacuteplaceacutes
vers une nouvelle position commune x qui srsquoavegravere ecirctre une coordonneacutee qursquoaucun eacuteleacutement
nrsquoavait dans la page drsquoorigine
Ce dernier exemple fournit une illustration graphique de la diffeacuterence entre le concept original
de teacutemoin et celui de reacuteparation Alors qursquoun teacutemoin dans ce cas met en eacutevidence une paire
choisie au hasard drsquoeacuteleacutements mal aligneacutes (comme montreacute dans la figure 61b)) une reacuteparation
choisit des eacuteleacutements speacutecifiques et en plus deacutecrit ce qui doit ecirctre fait avec eux afin de reacuteparer
la violation de la proprieacuteteacute Ceci est sans doute plus reacuteveacutelateur pour un utilisateur et constitue
154
agrave notre avis lrsquoun des principaux avantages de cette technique
63 CALCUL DE LA REacutePARATION
Le concept de base de reacuteparation preacutesenteacute dans la section preacuteceacutedente se precircte agrave quelques points
de discussion En particulier le nombre de reacuteparations principales possibles est potentiellement
eacuteleveacute et la tacircche de geacuteneacuterer ces reacuteparations peut donc srsquoaveacuterer tregraves coucircteuse
631 ALGORITHME DE BASE ET COMPLEXITEacute
Lrsquoalgorithme montreacute dans 1 est un algorithme pour iteacuterer toutes les reacuteparations possibles drsquoune
structure Il eacutenumegravere simplement toutes les transformations possibles T isin 2TΣ Il veacuterifie
drsquoabord si T est bien deacutefini (crsquoest-agrave-dire que toute paire drsquoendomorphismes commute) et si
une reacuteparation geacuteneacutereacutee preacuteceacutedemment (stockeacutee dans lrsquoensemble TS) est un sous-ensemble de
lrsquoactuelle Il veacuterifie enfin si lrsquoapplication de cette transformation corrige la structure drsquoorigine
Il passe agrave la prochaine transformation candidate si lrsquoune de ces trois situations se produit
Sinon il ajoute cette transformation agrave son ensemble et le renvoie comme son prochain eacuteleacutement
Theorem 1 Lrsquoalgorithme 1 est coheacuterent et complet
Soit T une sortie de transformation par lrsquoalgorithme Par construction T est une reacuteparation
puisqursquoelle est bien deacutefinie et elle corrige la valeur de veacuteriteacute de σ dans ϕ De plus au
moment ougrave T est sorti aucun des eacuteleacutements de TS nrsquoest un sous-ensemble de T Puisque TS
contient toutes les reacuteparations de cardinaliteacute infeacuterieure agrave T et que par construction toutes les
transformations de cardinaliteacute similaires ne peuvent pas ecirctre des sous-ensembles il srsquoensuit
que T nrsquoest incluse par aucune reacuteparation existante et est donc principale Cela prouve la
155
Algorithm 1 Algorithme geacuteneacuterique pour lrsquoiteacuteration des reacuteparations primaires
procedure COMPUTEREPAIRS(ϕσ 2TΣ)TS = 0for all T isin 2TΣ do Eacutenumeacutereacutes en cardinaliteacute croissante
if notWELLDEFINED(T ) thenskip
end ifif SUBSUMED(TTS) then
skipend ifif T (σ prime) 6|= ϕ then
skipend ifTSlarr TScupTyield T
end forend procedure
coheacuterence de lrsquoalgorithme
Le fait que toutes ces reacuteparations majeures soient finalement eacutenumeacutereacutees est garanti par le
fait que tous les sous-ensembles de TΣ sont geacuteneacutereacutes agrave un moment donneacute ce qui prouve la
compleacutetude
Cet algorithme a eacuteteacute impleacutementeacute en Java et est disponible publiquement 1 En raison de sa
simpliciteacute et de sa geacuteneacutericiteacute lrsquoimpleacutementation des expressions des structures et des iteacuterations
de reacuteparation ne repreacutesente que 325 lignes de code Lrsquoeacutenumeacuteration des reacuteparations est exposeacutee
agrave lrsquoutilisateur sous la forme drsquoune classe classique Java Iterator qui peut ecirctre utiliseacutee par
les meacutethodes traditionnelles hasNext() et next() pour passer agrave travers lrsquoensemble complet
de reacuteparations principales dans lrsquoordre croissant de cardinaliteacute Les classes speacutecifiques au
domaine deacutefinissants les constructions logiques propositionnelles et de premier ordre sont
constitueacutees drsquoenviron 500 lignes de code suppleacutementaires Il est facile de voir que le temps
1 httpsgithubcomliflabfault-finder
156
drsquoexeacutecution de cet algorithme est exponentiel en fonction de la taille de TΣ qui peut elle-mecircme
ecirctre exponentielle dans un autre facteur (deacutependant du problegraveme modeacuteliseacute) Dans la logique
du premier ordre (telle qursquoutiliseacutee par un fragment de Cornipickle) si a1 an est lrsquoariteacute
respective de chaque preacutedicat dans la signature le nombre drsquoendomorphismes est sumi 2|A|ai
pour un domaine donneacute A
Malgreacute cela il est possible de montrer que cet algorithme est limiteacute par une borne infeacuterieure
theacuteorique Un ensemble drsquoendomorphismes TΣ est dit complet si pour tout σ σ prime isin Σ il existe
une transformation bien deacutefinie T sube TΣ tel que T (σ) = σ prime
Theorem 2 Eacutetant donneacute un ensemble de structures Σ un ensemble drsquoexpressions de langage
Φ et un ensemble complet de transformations TΣ le problegraveme du calcul des reacuteparations
principales est aussi difficile que le problegraveme de satisfiabiliteacute pour Φ
Soit ϕ isinΦ une expression du langage Si ϕ est satisfaisable alors il existe une structure σ isin Σ
telle que σ |= ϕ Prenons une structure arbitraire σ prime isin Σ Puisque TΣ est complet il existe
au moins une transformation T sube TΣ telle que T (σ prime) = σ Prenons le plus petit ensemble
de ce genre par deacutefinition il srsquoagit drsquoune reacuteparation principale et sera finalement eacutenumeacutereacutee
par lrsquoalgorithme 1 Puisque lrsquoalgorithme est complet au contraire aucune reacuteparation ne sera
trouveacutee si ϕ nrsquoest pas satisfaisable
632 REacuteDUCTION DU NOMBRE DE SOLUTIONS CANDIDATES
Ces reacutesultats de complexiteacute de base justifient une discussion sur la reacuteduction du nombre de
reacuteparations potentielles qui doivent ecirctre exploreacutees
157
Suppression des endomorphismes
Le nombre de transformations potentielles peut drsquoabord ecirctre reacuteduit en supprimant les endomor-
phismes dont on sait qursquoils sont impossibles en fonction du contexte Par exemple supposons
que les symboles propositionnels a et b dans lrsquoexemple 622 correspondent respectivement
aux assertions laquo le client paie pour un objet raquo et laquo le client reccediloit lrsquoarticle raquo On pourrait
supposer qursquoune eacutevaluation ougrave a est vraie ne peut pas ecirctre modifieacutee en la rendant fausse cela
correspondrait au fait qursquoune action effectueacutee par un acteur ne peut ecirctre annuleacutee Dans un tel
contexte seuls les endomorphismes reacuteglant les fausses variables agrave vrai seraient consideacutereacutes
Dans le cas des graphes comme dans lrsquoexemple 622 on pourrait imposer des restrictions
sur les changements qui lui sont autoriseacutes par exemple on pourrait dire que les arecirctes
existantes doivent rester inchangeacutees ou que seuls des sommets speacutecifiques peuvent ecirctre
colorieacutes diffeacuteremment Ceci encore une fois a pour effet de preacutefeacuterer certaines transformations
aux autres et reacuteduit globalement le nombre de reacuteparations disponibles
Transformations en groupes
La granulariteacute des endomorphismes disponibles peut eacutegalement ecirctre modifieacutee Dans le cas de
lrsquoexemple de coloriage de graphe il est eacutevident qursquoaucune reacuteparation ne consistera jamais
en un seul endomorphisme τqi(x)7rarrgt La raison est que lrsquoexpression ϕ1 requiert que chaque
sommet ait exactement une couleur assigner qi agrave gt pour un sommet implique que le q j
restant pour j 6= i soit mis agrave perp On peut donc deacutefinir un nouvel ensemble de transformations
158
approprieacutees au contexte repreacutesentant les changements de couleur
TC =⋃xisinA
⋃iisin[13]
j 6=ik 6= j 6=i
τqi(x)7rarrgtτq j(x)7rarrperpτqk(x)7rarrperp
De mecircme comme la relation drsquoadjacence est symeacutetrique mettre p(xy) agrave gt (resp perp) ne
peut pas ecirctre fait sans mettre p(yx) agrave gt (resp perp) Au lieu de consideacuterer les changements
individuels aux seules entreacutees de p on peut deacutefinir un ensemble de changements de bord
TE =⋃xisinA
⋃yisinA
⋃bisingtperp
τp(xy)7rarrbτp(yx)7rarrb
On pourrait alors utiliser TCcupTE comme lrsquoensemble des transformations au lieu de TΣ Bien
que cela ne change rien agrave la theacuteorie sur les solutions actuelles le fait que TCcupTE soit plus petit
que TΣ a un effet positif sur la performance drsquoun algorithme drsquoeacutenumeacuteration dans la pratique
La mecircme chose peut ecirctre dite des endomorphismes de lrsquoexemple 622 Plutocirct que de consideacuterer
tous les changements individuels des coordonneacutees (xy) des quatre coins de chaque eacuteleacutement
on pourrait deacutefinir des sous-ensembles correspondants agrave des modifications plus intuitives par
exemple lrsquoensemble des deacuteplacements horizontaux pourrait ecirctre deacutefini comme
TH =⋃eisinE
⋃pisinP
τleft(e) 7rarr pτright(e) 7rarr (τright(e)minus p)
On peut alors limiter la recherche pour les reacuteparations agrave celles qui sont faites uniquement
des deacuteplacements (horizontaux ou verticaux) ou des redimensionnements (horizontaux ou
verticaux) drsquoeacuteleacutements etc
159
(a) Le reacutesultat attendu
(b) Problegraveme drsquoalignement
Figure 65 ndash Eacuteleacutements mal aligneacutes capture et suggestion de correction
64 EXEMPLES
Les trois figures suivantes montrent des exemples simples de bugs montrant la capaciteacute de
lrsquooutil agrave rechercher des candidats de correction en se basant sur lrsquoapproche proposeacutee Les
figures montrent les verdicts qui sont des suggestions donneacutees par lrsquooutil pour chacun des cas
Il est a noteacute que le processus prend entre 2 et 20 millisecondes pour trouver un candidat (sans
prendre compte du temps drsquoeacutevaluation)
Exemple 1 eacuteleacutements mal aligneacutes Dans ce cas 65 la suggestion est de deacuteplacer 69 pixels
vers la gauche lrsquoeacuteleacutement qui a lrsquoidentifiant ID=2
160
(a) Le reacutesultat attendu
(b) Problegraveme de chevauchement
Figure 66 ndash Eacuteleacutements qui se chevauchent capture et suggestion de correction
Exemple 2 eacuteleacutements qui se chevauchent La suggestion est de deacuteplacer le bat de lrsquoeacuteleacutement
avec lrsquoID 11 agrave 126 pixels 66
Exemple 3 eacuteleacutement qui deacuteborde de son conteneur La suggestion est de deacuteplacer la
droite de lrsquoeacuteleacutement avec lrsquoID 14 agrave 1277 pixels 67
161
(a) Le reacutesultat attendu
(b) Problegraveme de deacutebordement
Figure 67 ndash Eacuteleacutement qui deacuteborde de son conteneur capture et suggestion de correction
CHAPITRE 7
CONCLUSION GEacuteNEacuteRALE
Les applications web se multiplient et se diversifient et les exigences de leurs utilisateurs srsquoac-
centuent et srsquoamplifient avec La relation application web-utilisateur est assureacutee uniquement
via la page Web Pour que cette relation soit tenue la page Web doit ecirctre entretenue et reacutepondre
agrave un ensemble de critegraveres se charger rapidement fournir le service deacutesireacute et ecirctre agreacuteable agrave
voir sur tous les appareils des ordinateurs de bureau ou portables des tablettes et teacuteleacutephones
mobiles Cependant la complexiteacute de la relation entre HTML CSS et JavaScript engendre des
difficulteacutes consideacuterables pour la mise en page des applications web le mecircme document peut
ecirctre afficheacute dans une varieacuteteacute de tailles de reacutesolutions de navigateurs et mecircme de peacuteripheacuteriques
entravant de ce fait la mise en page Les laquo bugs raquo de mise en page connaissent par conseacutequent
une preacutesence remarquable allant de problegravemes de particulariteacutes relativement simple tels que
des eacuteleacutements superposeacutes ou incorrectement aligneacutes agrave des problegravemes plus seacuterieux compromet-
tant la fonctionnaliteacute de lrsquointerface utilisateur Les tentatives bien que rares visant agrave reacutesoudre
ces problegravemes restent incapables de cerner tous les aspects de ceux-ci (problegravemes)
Nous distinguons dans ce contexte deux familles drsquoapproches servant agrave tester les interfaces
des applications web lrsquoapproche visuelle se basant sur la comparaison des captures drsquoeacutecran
pixel par pixel et lrsquoapproche deacuteclarative fonctionnant directement sur des informations sur
163
la mise en page Si dans la premiegravere qui fonctionne mal avec les donneacutees dynamiques le
deacuteveloppeur de test se heurte agrave lrsquoimpossibiliteacute de comparer des images de diffeacuterentes tailles
drsquoeacutecran il doit se soumettre dans la seconde aux exigences des descriptionsscripts de test
assez verbeux en deacutecrivant les regravegles de son interface graphique
Lrsquoapproche que nous proposons agrave savoir lrsquooutil Cornipickle offre les avantages suivants elle
fonctionne sur la majoriteacute de combinaisons navigateurssystegravemes drsquoexploitation sans recourir
aux plugins speacutecifiques au navigateur (ou limiteacutes par le navigateur) De plus elle permet
1 lrsquoeacutevaluation des speacutecifications en fonction des informations recueillies sur le client en se
dispensant de lrsquoeacutevaluation statique de HTML et CSS du cocircteacute serveur 2 lrsquointerpreacutetation des
speacutecifications de telle maniegravere agrave eacuteviter une charge de calcul excessive dans le navigateur
3 lrsquoutilisation drsquoun autre langage que JavaScript pour lrsquoimpleacutementation 4 la gestion des
proprieacuteteacutes comportementales impliquant plus drsquoun instantaneacute de page par lrsquooutil 5 la pos-
sibiliteacute agrave lrsquoutilisateur drsquoajouter de supprimer ou de modifier les speacutecifications eacutevalueacutees par
lrsquooutil 6 lrsquoexclusiviteacute drsquoexprimer agrave travers un langage deacuteclaratif des proprieacuteteacutes agrave propos du
document (Document Object Model) et des proprieacuteteacutes CSS drsquoune page Web 7 la potentialiteacute
de rechercher et deacutetecter automatiquement les bugs comportementaux et RWD (Responsive
Web Design) dans les applications web 8 la reacuteparation en fournissant un algorithme de base
pour calculer les transformations
Le prototype de preuve de concept de Cornipickle a montreacute des reacutesultats prometteurs dans sa
capaciteacute agrave exprimer facilement les conditions de bugs de mise en page dans les applications
web et agrave les deacutetecter efficacement dans des exemples de pages de plus de 35 applications
reacuteelles
Lrsquoefficaciteacute de notre outil Cornipickle nous a permis drsquoattraper automatiquement certains
problegravemes communs rencontreacutes dans les applications web modernes (RIA et RWD) Les
164
proprieacuteteacutes de Cornipickle garantissent que les pages drsquoune application suivent diffeacuterents
types de contraintes en particulier le seacutequenccedilage possible des pages qui est lrsquoobjectif de ce
volet de notre travail En combinant les performances de Crawljax pour explorer les eacutetats
de lrsquoapplication (crawler state-aware) et un stateful test oracle (speacutecifications de logiques
temporelles du premier ordre) dans Cornipickle nous avons obtenu des reacutesultats prometteurs
Une petite application a eacuteteacute deacuteveloppeacutee et inteacutegreacutee afin de tester le rendu visuel dans les
diffeacuterentes fenecirctres possibles afin drsquoattraper les deacutefauts RWD
Notre solution a quelques limites et surmonter ces limitations pourrait ecirctre la base de futurs
travaux Lrsquoutilisation de Cornipickle nous limite agrave des contraintes se reacutefeacuterant uniquement aux
eacuteleacutements qui sont afficheacutes Cela rend les bugs causeacutes au niveau backend (cocircteacute serveur) parfois
difficiles agrave attraper il est neacutecessaire de trouver les eacuteleacutements afficheacutes qui peuvent indirectement
repreacutesenter les eacutetats du serveur Dans la mecircme ligne si Crawljax ne notifie pas un changement
drsquoeacutetat lorsque le DOM change il nrsquoest pas possible drsquoeacutevaluer cette page ougrave un bug aurait pu
se produire En outre lorsqursquoune proprieacuteteacute est eacutevalueacutee agrave false elle est fausse pour le reste
de lrsquoanalyse et aucun autre bug ne peut ecirctre intercepteacute avec cette proprieacuteteacute Cela a causeacute un
problegraveme avec la deacutecouverte de bugs RWD observables car la plupart des eacutechecs ne sont pas
observables et les proprieacuteteacutes devaient trouver un bug observable comme premier bug
De plus la capaciteacute de Cornipickle agrave renvoyer une explication utile de la violation drsquoune
proprieacuteteacute sur un document Web donneacute est limiteacutee Crsquoest pourquoi nous avons introduit une
deacutefinition du concept de reacuteparation dont le calcul fournit des informations plus preacutecises sur les
changements requis pour une structure afin de satisfaire une speacutecification donneacutee Lrsquoeacutetude des
reacuteparations et leur calcul fait partie du travail en cours et de nombreux problegravemes sont encore
ouverts Par exemple un calcul efficace des reacuteparations repose sur la suppression du plus
grand nombre possible de transformations candidates par conseacutequent des techniques pour
identifier facilement des endomorphismes qui ne peuvent jamais faire partie drsquoune solution
165
pourraient ecirctre rechercheacutees De mecircme nous preacutevoyons drsquoeacutetudier des techniques qui pourraient
geacuteneacuterer lrsquoensemble des reacuteparations directement agrave partir de la speacutecification et de la structure
deacutefectueuse plutocirct que drsquoutiliser lrsquoalgorithme brut de geacuteneacuteration et de test preacutesenteacute
Le concept de calcul des reacuteparations est en cours de construction et il reste agrave eacutetablir ses liens
avec les travaux connexes Comme nous lrsquoavons vu dans la section preacuteceacutedente trouver des
reacuteparations concerne le concept de reacutesolution de satisfiabiliteacute (SAT) et plus preacuteciseacutement le
problegraveme du SAT increacutementiel [64] Les solveurs SAT traditionnels sont neacutecessaires pour
trouver un seul modegravele drsquoexpression En SAT increacutementiel un solveur trouve un premier
modegravele drsquoexpression mais peut eacutegalement ecirctre demandeacute agrave plusieurs reprises de fournir des
modegraveles suppleacutementaires Lorsqursquoun ensemble de transformations est termineacute lrsquoiteacuteration sur
les modegraveles revient agrave effectuer des iteacuterations sur les reacuteparations
BIBLIOGRAPHIE
[1] Alm specifications examples http auckland-
layoutsourceforgenetexamplesindexhtml
[2] Applitools visual test automation httpwwwapplitools
comAccessed25April2016
[3] Blackout repport httpssiteshksharvardeduhepgPapersNYISO
blackoutreport8Jan04pdf
[4] Bugs catastrophiques httpwwwslidesharenetwearesocialsg
social-media-for-travel-brands
[5] critical-rendering-path httpsdevelopersgooglecomwebfundamentals
performancecritical-rendering-path
[6] Deacutefinition du viewport httpswwwdefinitions-marketingcomdefinition
viewport
[7] Exemple webspecwatij https gistgithubcomtux2323954186
[8] Froont httpfroontcom
167
[9] Galen httpwwwswtestacademycomgalen-framework
[10] galen framework 2017 httpgalenframeworkcom
[11] howbrowserswork 2017 HTTPtaligarsielcomProjects
howbrowserswork1html
[12] Html and css w3c standards httpswwww3orgstandardswebdesign
htmlcss
[13] Http response httpswwww3orgProtocolsrfc2616rfc2616-sec6html
sec6
[14] http coursescsvteduprofessionalismtherac_25therac_1html httpcourses
csvteduprofessionalismTherac_25Therac_1html
[15] http wearesocialsg httpwearesocialsg
[16] http wwwcnncom2003us0814poweroutage httpwwwcnncom2003US
0814poweroutage
[17] http wwwyfolirenethumrhumeur13htm httpwwwyfolirenethumr
humeur13htm
[18] Les bases de sahiscript https sahiprocomdocsscriptingsahi-scripting-basicshtml
[19] mobile and tablet internet usage exceeds desktop for first
time worldwide httpgsstatcountercompress
mobile-and-tablet-internet-usage-exceeds-desktop-for-first-time-worldwide
[20] Phantomcss 2017 httpsgithubcomHuddlePhantomCSS
168
[21] Principe de fonctinement de sahi https wwwthoughtworkscominsightsblogintroduction-
sahi-part-1
[22] Respondr httprespondrio
[23] Responsinator httpswwwresponsinatorcom
[24] Responsivepxcom httpresponsivepxcom
[25] Reuters us-blackout-newyork 2003 https
wwwreuterscomarticleus-blackout-newyork
spike-in-deaths-blamed-on-2003-new-york-blackout-idUSTRE80Q07G20120127
[26] Rwdbookmarklet httpswwwsitepointcom
responsive-web-design-tool
[27] Screenfly httpquirktoolscomscreenfly
[28] Software bugs found to be cause of toyota acceleration death httpswwwgoogle
frampswwwcomputerworldcomarticle2573466disaster-recovery
software-failure-cited-in-august-blackout-investigationamphtml
[29] Software failure cited in august blackout investigation https
wwwcomputerworldcomarticle2573466disaster-recovery
software-failure-cited-in-august-blackout-investigationhtml
[30] Utilisation de capybara https wwwsitepointcombasics-capybara-improving-tests
[31] Vpresizer httplabmaltewassermanncomviewport-resizer
[32] Washingtonpost toyota reaches 12-billion settlement to end criminal
probe2014 httpswwwwashingtonpostcombusinesseconomy
169
toyota-reaches-12-billion-settlement-to-end-criminal-probe2014
03195738a3c4-af69-11e3-9627-c65021d6d572_storyhtmlutm_term=
4826d81e2aa6
[33] Watir http watircom
[34] websiteresponsivetest httpwwwwebsiteresponsivetestcom
[35] A Arora and M Sinha Web application testing A review on techniques tools and state
of art International Journal of Scientific Iamp Engineering Research 3(2) 1ndash6 2012
[36] K Benjamin G Von Bochmann M E Dincturk G-V Jourdan and I V Onut A stra-
tegy for efficient crawling of rich internet applications In 11th international conference
on Web engineering serICWErsquo11 page 74ndash89 Heidelberg Springer-Verlag 2011
[37] Tim Berners-Lee Roy Fielding and Larry Masinter Uniform resource identifier (URI)
Generic syntax Technical report January 2005 RFC 3986
[38] Oussama Beroual Francis Guerin and Sylvain Halleacute Searching for behavioural bugs
with stateful test oracles in web crawlers In 10th IEEEACM International Workshop on
Search-Based Software Testing SBSTICSE 2017 Buenos Aires Argentina May 22-23
2017 pages 7ndash13 2017
[39] T-H Chang T Yeh and RC Miller Gui testing using computer vision In the SIGCHI
Conference on H man Factors in Computing Systems CHI rsquo10 pages 1535ndash1544 New
York NY USA may 2010 ACM
[40] S Choudhary E Dincturk S Mirtaheri G-V Jourdan G Bochmann and I Onut
Building rich internet applications models Example of a better strategy In Web
Engineering ser Lecture Notes in Computer Science F Daniel P Dolog and Q Li
volume 7977 page 291ndash305 Springer Berlin Heidelberg 2013
170
[41] S Choudhary M E Dincturk S M Mirtaheri A Moosavi G von Bochmann G-V
Jourdan and I-V Onut Crawling rich internet applications the state of the art In
CASCON page 146ndash160 IBM Corp 2012
[42] Shauvik Roy Choudhary Mukul R Prasad and Alessandro Orso X-PERT accurate
identification of cross-browser issues in web applications In David Notkin Betty H C
Cheng and Klaus Pohl editors 35th International Conference on Software Engineering
ICSE rsquo13 San Francisco CA USA May 18-26 2013 pages 702ndash711 IEEE ACM
2013
[43] V Dallmeier M Burger T Orth and A Zeller Webmate Generating test cases for
web 20 In D Winkler S Biffl J Bergsmann (Eds) SWQD volume 133 of Lecture
Notes in Business Information Processing page 55ndash69 Springer 2013
[44] M E Dincturk ldquomodel-based crawling ndash an approach to design efficient crawling
strategies for rich internet applications Masterrsquos thesis EECS - University of Ottawa
2013
[45] M E Dincturk S Choudhary G von Bochmann G-V Jourdan and I-V Onut A
statistical approach for efficient crawling of rich internet applications ICWE page
362ndash369 2012
[46] Mustafa Emre Model-based Crawling - An Approach to Design Efficient Crawling
Strategies for Rich Internet Applications PhD thesis University of Ottawa 2013
[47] Jesse James Garrett Ajax A new approach to web applications - adaptive path 2005
[48] Alan Grosskurth and Michael Godfrey A case study in architectural analysis The
evolution of the modern web browser Software Maintenence and Evolution Research
and PracticeEMSE 2007
171
[49] Allan Grosskurth and Michael Godfrey A reference architecture for web browsers
Software Maintenence and Evolution Research and Practice page 1ndash7 2006
[50] A Guttman R-trees a dynamic index structure for spatial searching June 1984
[51] Sylvain Halleacute Nicolas Bergeron Francis Guerin Gabriel Le Breton and Oussama
Beroual Declarative layout constraints for testing web applications J Log Algebr Meth
Program 85(5) 737ndash758 2016
[52] Sylvain Halleacute and Oussama Beroual Fault localization in web applications via model
finding In Proceedings First Workshop on Causal Reasoning for Embedded and safety-
critical Systems Technologies CRESTETAPS 2016 Eindhoven The Netherlands 8th
April 2016 pages 55ndash67 2016
[53] Sylvain Halleacute and Roger Villemaire Constraint-based invocation of stateful web services
The Beep Store (case study) In 4th International ICSE Workshop on Principles of
Engineering Service-Oriented Systems PESOS 2012 June 4 2012 Zurich Switzerland
pages 61ndash62 2012
[54] S Halleacute G Le Breton F Maronnaud A Blondin Masseacute and S Gaboury Exhaustive
exploration of ajax web applications with selective jumping In ICST page 243ndash252
IEEE Computer Society 2014
[55] Arnaud Le Hors Philippe Le Heacutegaret Lauren Wood Gavin Nicol Jonathan Ro-
bie Mike Champion and Steve Byrne Document object model level 2 core 2000
http wwww3orgTRDOM-Level-2-Core
[56] Jaakko Jaumlrvi Mat Marcus Sean Parent John Freeman and Jacob Smith Algorithms for
user interfaces In Proceedings of the Eighth International Conference on Generative
172
Programming and Component Engineering GPCE rsquo09 pages 147ndash156 New York NY
USA 2009 ACM
[57] Jaakko Jaumlrvi Mat Marcus Sean Parent John Freeman and Jacob N Smith Property
models from incidental algorithms to reusable components In Yannis Smaragdakis and
Jeremy G Siek editors GPCE pages 89ndash98 ACM 2008
[58] Sonal Mahajan and William G J Halfond WebSee A tool for debugging HTML pre-
sentation failures In 8th IEEE International Conference on Software Testing Verification
and Validation ICST 2015 Graz Austria April 13-17 2015 pages 1ndash8 2015
[59] Ethan Marcotte Responsive web design Eyrolles 4 edition 2013
[60] A Mesbah A van Deursen and S Lenselink Crawling Ajax-based web applications
through dynamic analysis of user interface state changes ACM Transactions on the Web
(1) 6 2012
[61] S M Mirtaheri D Zou G V Bochmann G-V Jourdan and I V Onut Dist-ria crawler
A distributed crawler for rich internet applications In 8th International Conference on
P2P Parallel Grid Cloud and Internet Computing pages 105ndash112 IEEE Computer
Society Washington 2013
[62] Seyed M Mirtaheri Mustafa Emre Dincturk Salman Hooshmand Gregor V Bochmann
and Guy-Vincent Jourdan A brief history of web crawlers In CASCON rsquo13 Proceedings
of the 2013 Conference of the Center for Advanced Studies on Collaborative Research
pages 40ndash54 IBM Corp Riverton NJ USA ccopy2013 2013
[63] MTamm Http response httpsdeslidesharenetMichaelTamm
fighting-layout-bugs
173
[64] Alexander Nadel and Vadim Ryvchin Efficient SAT solving under assumptions In SAT
pages 242ndash255 2012
[65] C Olston and M Najork Web crawling Foundations and Trends in Information
Retrieval 4 175ndash246 2010
[66] Sean Parent Mat Marcus and Foster Brereton ASL overview Technical report Adobe
Systems 2007 httpstlabadobecomgroup__asl__overviewhtml
[67] Pedro A Szekely Piyawadee Noi Sukaviriya Pablo Castells Jeyakumar Muthukumara-
samy and Ewald Salcher Declarative interface models for user interface construction
tools the MASTERMIND approach In Leonard J Bass and Claus Unger editors
Proceedings of the IFIP TC2WG27 Working Conference on Engineering for Human-
Computer Interaction volume 45 of IFIP Conference Proceedings pages 120ndash150
Chapman amp Hall 1995
[68] Seyed M Mir Taheri Distributed Crawling of Rich Internet Applications PhD thesis
University of Ottawa 2015
[69] Michael Tamm Fighting layout bugs 2009 httpswwwyoutubecomwatchv=
WY3C6FHqSqQ
[70] Hideo Tanida Mukul R Prasad Sreeranga P Rajan and Masahiro Fujita Automated
system testing of dynamic web applications volume 303 page 181ndash196 Springer Berlin
Heidelberg 2013
[71] te (testing experience) The Magazine for Professional Testers Test automation - does it
make sense a simplified automation solution using watij wwwtestingexperiencecom
[72] Thomas A Walsh Gregory M Kapfhammer and Phil McMinn Automated layout
failure detection for responsive web pages without an explicit oracle In Proceedings
174
of the 26th ACM SIGSOFT International Symposium on Software Testing and Analysis
Santa Barbara CA USA July 10 - 14 2017 pages 192ndash202 2017
[73] Thomas A Walsh Gregory M Kapfhammer and Phil McMinn Redecheck an auto-
matic layout failure checking tool for responsively designed web pages In Proceedings
of the 26th ACM SIGSOFT International Symposium on Software Testing and Analysis
Santa Barbara CA USA July 10 - 14 2017 pages 360ndash363 2017
[74] Thomas A Walsh Phil McMinn and Gregory M Kapfhammer Automatic detection
of potential layout faults following changes to responsive web pages (N) In 30th
IEEEACM International Conference on Automated Software Engineering ASE 2015
Lincoln NE USA November 9-13 2015 pages 709ndash714 2015
TABLE DES MATIEgraveRES
Reacutesumeacute ii
Table des matiegraveres iii
Table des figures v
Liste des tableaux viii
Introduction 1
1 Notions geacuteneacuterales sur le web 711 Le fonctionnement du web 712 Le langage HTML 1013 Les Cascading StyleSheets (CSS) 1514 JavaScript 1815 Le fonctionnement interne des navigateurs web 23
2 Les bugs drsquointerface dans les applications web 3521 Types drsquoapplications web 3522 Types de bugs drsquointerface 37
3 Eacutetat de lrsquoart 6331 Outils de test 6332 Approche visuelle 7133 Approche deacuteclarative 7934 Outils RWD 8835 Discussion sur les approches exisantes 92
4 Deacutetection de bugs drsquointerface 9641 Un interpreacuteteur pour les proprieacuteteacutes Cornipickle 9742 Le langage Cornipickle 10343 Exprimer des proprieacuteteacutes avec Cornipickle 114
5 Deacutetection avanceacutee bugs comportementaux et RWD 11951 Bugs comportementaux dans le Beep Store 120
iv
52 Solutions actuelles 12253 Solution proposeacutee 12554 Expeacuteriences et reacutesultats 127
6 Vers un meilleur feedback pour lrsquoutilisateur 13761 Geacuteneacuteration de contre-exemple les teacutemoins 13862 Localisation des erreurs dans les applications web 14363 Calcul de la reacuteparation 15464 Exemples 159
7 Conclusion geacuteneacuterale 162
Bibliographie 166
TABLE DES FIGURES
11 Exemple drsquoune requecircte HTTP 912 Exemple drsquoune reacuteponse HTTP 1013 Un exemple simple de page HTML contenant un grand titre et un paragraphe 1214 Le flux entre les composants du navigateur pour la reacutecupeacuteration et le traitement
drsquoune page web dans le navigateur 2615 Un exemple simple de page web illustrant le rendu dans un navigateur 2716 Les processus de traitement de HTML et CSS au niveau du moteur de rendu
du navigateur 2817 Un arbre du modegravele drsquoobjet DOM 2918 Un exemple de fichier CSS simple 2919 Arbre du modegravele drsquoobjet CSSOM 30110 Arbre de rendu 31111 Les eacutetapes et processus de la construction des arbres DOM CSSOM et de
lrsquoarbre de rendu 32112 Un second exemple simple illustrant le processus de mise en page par le
navigateur 33113 Vue globale du flux de reacutecupeacuteration de traitement et drsquoaffichage drsquoune page web 34
21 Exemple drsquoeacuteleacutements mal aligneacutes le cadre blanc est horizontalement malaligneacute (LiveShout) le menu Interests est deacutecaleacute drsquoun pixel par apport auxautres menus (LinkedIn) 39
22 Exemple drsquoeacuteleacutements qui se chevauchent 4123 Le contenu de la page est dissimuleacute de lrsquointerface en raison de son prolonge-
ment au-delagrave des dimensions du conteneur parent 4224 Le bug Facebook La zone de texte permettant au utilisateur de taper un
message instantaneacute (agrave gauche) disparaicirct soudainement (agrave droite) 4325 Le bug laquo ton sur ton raquo Les eacuteleacutements de menu sont pousseacutes en dehors de leurs
conteneur et disparaissent (a) le texte du lien est de la mecircme couleur que lefond reacuteveacuteleacute en le seacutelectionnant avec la souris (b) 44
26 Un eacuteleacutement est placeacute incorrectement sur un autre 4527 Un exemple drsquointerface briseacutee en raison de lrsquoeacutechec du chargement de certaines
ressources 4628 Exemple drsquointerface briseacute dans le site Digital Ocean 4729 Exemple drsquoHTML mal formeacute 47
vi
211 Incoheacuterence dans le champ de formulaire du site CallingCards 48210 Exemple drsquoeacuteleacutements inaccessibles 57212 Exemple de mojibake (a) donneacutees UTF-8 afficheacutees comme Cp1252 (b)
donneacutees Cp1252 afficheacutees comme UTF-8 58213 Exemples de Mojibake dans Doodle 59214 Des donneacutees extraites de la base de donneacutees sont incorrectement eacutechappeacutees
dans IEEE PDF eXpress on constate la preacutesence de plusieurs apostrophes 60215 Sur cette page YouTube du code JavaScript est afficheacute au lieu drsquoecirctre interpreacuteteacute 60216 Eacuteleacutements mobiles la position et la bordure de la zone du texte changent lors
de la saisie du texte (NSERC) 60217 Confusion connexiondeacuteconnexion dans une page web le contenu pour un
utilisateur connecteacute (en haut de la page a droite) coexiste avec le formulairede connexion reacuteserveacute aux utilisateurs qui ne sont pas en principe connecteacutes 61
218 Incoheacuterences dans le reacutesultat de la recherche 61219 Code CSS avec des conditions sur la largeur de lrsquoappareil Il srsquoagit drsquoun
exemple de media queries 61220 Le bug de deacutepassement drsquoeacuteleacutements sur le site httpswwwthelilycom 62221 Le bug de deacutepassement du viewport sur le site httpswwwslaveryfootprint
org 62222 Le bug de couverture drsquoeacuteleacutements sur le site httpswwwanthedesignfr 62
31 Exemple de code pour Selenium WebDriver 6432 Commandes de base de Capybara [30] 6633 Exemple drsquoutilisation de Watij [71] 6734 Page de connexion (login) de Yahoo [71] 6735 Exemple simple drsquoun test JUnit Watij WebSpec [7] 6836 Exemple de Sahi script [18] 7037 Architecture de Sahi (figure tireacutee de [21]) 7038 Le fonctionnement geacuteneacuteral de lrsquooutil drsquoanalyse WebSee 7439 Outputs de WebSee eacuteleacutements HTML deacutefectueux 74310 Exemple de traitement drsquoimage avec FLB (figure tireacutee de [63]) 76311 Exemple drsquoutilisation de Sikuli (figure tireacutee de [39]) 78312 Exemple avec Auckland (figure tireacutee de [1]) 81313 Une simple speacutecification avec Auckland [1] 81314 Exemple drsquoune boicircte de dialogue pour enregistrer un fichier image 83315 Une simple speacutecification deacuteclarative dans le langage Adam du modegravele de
proprieacuteteacute pour le dialogue dans Figure314 [56] 84316 Une simple speacutecification avec Eve [56] 85317 Exemple drsquoune speacutecification Galen [9] 89318 Exemple drsquoun script Automotion [70] 90319 Exemple de faux positif avec PhantomCSS 94
41 Architecture et interactions de Cornipickle 100
vii
42 Une page simple seacuterialiseacutee en JSON 10143 Une capture drsquoeacutecran de Cornipickle en action 10244 Un document DOM simple (a) Structure HTML (b) Repreacutesentation en arbre
DOM Seuls les noms des eacuteleacutements sont afficheacutes les attributs et valeursrestants sont omis pour plus de clarteacute 111
45 Exemple de code jQuery veacuterifiant que deux eacuteleacutements ont le mecircme texte 116
51 Le bug de connexions multiples Un utilisateur deacutejagrave connecteacute se voit proposerlrsquooption de se reconnecter 121
52 Le bug des paniers multiples Des boutons pour creacuteer un panier et ajouter desarticles au panier coexistent sur la mecircme page 121
53 Le bug de la suppression drsquoun panier inexistant Des boutons pour retirer dupanier et creacuteer un panier coexistent sur la mecircme page 122
54 Flux drsquointeraction et de seacuterialisation (Crawljax-Cornipickle) 12655 Le code neacutecessaire pour attraper le bug des connexions multiples en utilisant
Crawljax sans Cornipickle 12956 Temps de calcul de lrsquointerpreacuteteur en fonction du nombre drsquoeacuteleacutements dans la
page 13557 Temps de calcul incluant la seacuterialisation de la page par la sonde JavaScript et
lrsquointerpreacutetation de la proprieacuteteacute en fonction du nombre drsquoeacuteleacutements dans la page136
61 Exemple drsquoune erreur de mise en page Web simple (a) lrsquoun des eacuteleacutementsde la liste est incorrectement aligneacute avec les autres (b) un teacutemoin (witness)produit par lrsquooutil Cornipickle 143
62 Illustration du concept de reacuteparation principale 14663 Quelques reacuteparations possibles pour un coloriage de graphe deacutefectueux 14964 Trois reacuteparations pour lrsquoexemple web 15365 Eacuteleacutements mal aligneacutes capture et suggestion de correction 15966 Eacuteleacutements qui se chevauchent capture et suggestion de correction 16067 Eacuteleacutement qui deacuteborde de son conteneur capture et suggestion de correction 161
LISTE DES TABLEAUX
11 Statistiques des parts drsquoutilisation des navigateurs dans le monde entre mars2015 et mars 2016 24
21 Sites et applications web pour lesquelles au moins un bug de mise en page aeacuteteacute trouveacute 38
31 Limites et diffeacuterences entre trois outils majeurs des approches existantes 95
41 La grammaire BNF pour Cornipickle (Partie I) 10442 La grammaire BNF pour Cornipickle (Partie II) 10643 Extensions de la grammaire BNF pour Cornipickle 10844 La seacutemantique formelle de Cornipickle aaprime isin A sont les noms drsquoattributs
DOM v isin V est une valeur drsquoattribut c isin C est un seacutelecteur CSS ξ et ξ prime
sont des noms de variables ν ν prime isin N sont les nœuds DOM et ϕ et ψ sont deseacutenonceacutes Cornipickle quelconques Lorsque t est vide Always srsquoeacutevalue agrave V raiet Eventually et Next srsquoevaluent agrave Faux 113
61 La deacutefinition reacutecursive de la fonction de calcul du verdict ω 140
INTRODUCTION
Le mot bug qui signifie en anglais laquo insecte raquo et qui a eacuteteacute franciseacute pour devenir laquo bogue raquo
a vu le jour dans les anneacutees quarante agrave la suite de la panne qursquoa connu le dernier cri des
ordinateurs de lrsquoeacutepoque le Mark II Comme son nom lrsquoindique la cause eacutetait un insecte qui
srsquoeacutetait introduit dans un relais eacutelectromeacutecanique de celui-ci La panne fut deacutecouverte par la
brillante matheacutematicienne et pionniegravere de la programmation Grace Hopper Il srsquoagit du tout
premier vrai bug informatique car on utilisait deacutejagrave le mot pour deacutesigner des problegravemes dans les
appareils eacutelectriques [17] Depuis le mot bug est devenu synonyme de tout dysfonctionnement
ou anomalie drsquoun programme
Le monde drsquoaujourdrsquohui est piloteacute par des ordinateurs dans tous les domaines eacutenergeacutetique
judiciaire sanitaire militaire etc De ce fait la manifestation drsquoun bug peut entraicircner des
deacutesordres des perturbations voire des catastrophes Les trois derniegraveres deacutecennies ont connu
une multitude de bugs de grande envergure
Parmi les plus importants mentionnons une interruption en 2003 de plusieurs jours dans
lrsquoalimentation en eacutelectriciteacute drsquoune cinquantaine de millions drsquoameacutericains Lors de cet incident
une douzaine de personnes ont mecircme trouveacute la mort empoisonneacutees au monoxyde de carbone
en tentant de remeacutedier agrave ce problegraveme par des geacuteneacuterateurs au diesel On a compteacute plus de
2
six milliards de dollars de deacutegacircts mateacuteriels A lrsquoorigine de cette panne une paralysie totale
provoqueacutee par deux logiciels chargeacutes du controcircle de la production qui essayaient de modifier
le mecircme fichier simultaneacutement [25 3 16 29]
Mentionnons eacutegalement des centaines drsquoaccidents de la route meurtriers survenus entre 2009
et 2011 et dont les victimes eacutetaient les proprieacutetaires de la Lexus ES350 du constructeur Toyota
Les conducteurs perdaient la maicirctrise du veacutehicule une fois qursquoil atteignait la vitesse de 150
kmh puisque ce seuil entraicircnait la deacutesactivation de la peacutedale de frein Durant deux anneacutees les
chauffeurs sont accuseacutes par Toyota de confondre les peacutedales de frein et drsquoacceacuteleacuteration alors
qursquoune expertise finit par reacuteveacuteler une deacutefaillance dans lrsquoordinateur de bord Les pertes sont
estimeacutees dans ce cas agrave 24 milliards de dollars [32 28]
Parmi les bugs informatiques les plus meurtriers on compte eacutegalement un dysfonctionnement
en 1987 de la machine de radiotheacuterapie Therac 25 chargeacutee drsquoadministrer aux patients la
quantiteacute de radioactiviteacute qui leur est prescrite Agrave certaines occasions la machine leur donne
vingt fois la dose mortelle occasionnant de ce fait la blessure drsquoun patient et la mort de
cinq autres Le logiciel destineacute agrave veiller au bon positionnement et agrave la preacutesence de la plaque
meacutetallique censeacutee recevoir le rayon pour le filtrer et le concentrer a malheureusement failli agrave
son rocircle [14]
Tous ces exemples sont des bugs aux conseacutequences catastrophiques Heureusement tous les
bugs ne sont pas aussi deacutevastateurs mais ils peuvent neacuteanmoins srsquoaveacuterer nuisibles et reacutepandus
Crsquoest le cas drsquoun type de bug auquel les informaticiens font face agrave chaque instant agrave savoir les
bugs de mise en page dans les interfaces des applications web qui se trouvent agrave lrsquoorigine des
problegravemes drsquoaffichage rencontreacutes quotidiennement dans les interfaces web Agrave cet eacutegard des
chiffres datant de 2015 lieacutes agrave Internet donnent matiegravere agrave reacuteflexion Le reacuteseau compte plus de
trois milliards drsquointernautes dont deux milliards sont inscrits sur les reacuteseaux sociaux Plus de
3
huit cent mille nouveaux sites Internet sont mis en ligne chaque jour [15] [4] Par conseacutequent
le nombre drsquoutilisateurs des applications web est consideacuterable et le nombre de personnes
toucheacutees par les bugs drsquointerfaces reacutesultant de ces applications est eacutenorme Lrsquoenjeu de ce fait
est tregraves grand sur tous les plans
La bonne conduite drsquoune application web exige une bonne apparence visuelle des pages web
sans aucune deacutefaillance drsquoaffichage facilitant ainsi lrsquoutilisation de lrsquoapplication et offrant un
meilleur service agrave lrsquoutilisateur Trois types de problegravemes drsquoaffichage sont releveacutes un premier
type qualifieacute de non gecircnant tel qursquoun deacutebordement drsquoun paragraphe de sa bordure ou un
problegraveme drsquoalignement ou mecircme une sorte de caractegravere speacutecial mal afficheacute (mojibake) Un
deuxiegraveme type qualifieacute de gecircnant telle qursquoune image deacuteplaceacutee qui couvre un paragraphe ou
une autre partie de la page
Par contre le troisiegraveme type est plus grave et peut conduire agrave un blocage de lrsquoapplication dont
les effets risquent drsquoecirctre seacuterieux compromettant la fonctionnaliteacute de lrsquointerface utilisateur Un
4
exemple de bug qui affecte la fonctionnaliteacute de lrsquoapplication Le mauvais fonctionnement des
boutons de nombreuses applications montrent des eacuteleacutements superposeacutes qui se comportent
comme des laquo pop-ups raquo dans la fenecirctre Cependant dans un certain nombre de cas les
boutons de ces fenecirctres sont inopeacuterants cliquer dessus plusieurs fois ne produit aucun effet
Ce problegraveme a eacuteteacute observeacute dans des sites aussi varieacutes qursquoAmerican Airlines Dropbox et
BitBucket Dans certains cas lrsquoutilisateur est effectivement bloqueacute dans la fenecirctre contextuelle
ou la page qui contient le bouton et ne peut pas continuer sans forcer un rechargement complet
du document
Cependant les travaux visant agrave reacutesoudre les problegravemes drsquointerface se font tregraves rares Halleacute et al
[51] sont parmi les premiers agrave srsquointeacuteresser agrave ce genre de problegraveme Mahajan et Halfond [58]
ont abordeacute la probleacutematique en proposant une approche baseacutee sur la vision par ordinateur et
le traitement drsquoimages Walsh et al [74 72] ont eacutegalement traiteacute ce genre de bugs dans les
applications dites responsives (responsive web design)
Deux cateacutegories drsquoutilisateurs sont confronteacutees agrave ces types de problegravemes lrsquoune repreacutesente
les speacutecialistes du domaine (les informaticiens) chez lesquels ces types de problegravemes peuvent
trouver leurs solutions apregraves un travail laborieux Lrsquoautre repreacutesente le grand public pour lequel
le deuxiegraveme et le troisiegraveme type de problegraveme constituent des contraintes pour lrsquoexploitation de
la page car la solution dans ce cas exige certaines connaissances (lrsquooutil le langage etc) qui
eacutechappent geacuteneacuteralement au grand public Ce dernier forme la majoriteacute des utilisateurs De ce
fait il est neacutecessaire de lui trouver une solution lui permettant drsquoutiliser les sites web dans
les meilleures conditions possibles Il doit avoir tout simplement sur son eacutecran une interface
correcte sans aucun bug pour qursquoil ne soit pas obliger agrave recourir agrave une technique de correction
qui le deacutepasse Drsquoautant plus que les applications web connaissent une eacutevolution rapide et
commencent agrave conqueacuterir plusieurs domaines (commerce eacutelectronique eacuteducation loisir etc)
et mecircme agrave ecirctre utiliseacutees dans des opeacuterations sensibles telles que les transactions moneacutetaires
5
via internet Ce qui fait drsquoeux des programmes tregraves complexes dynamiques et interactifs En
plus de la rareteacute des meacutethodes de deacutetection de ces bugs pire encore presque rien nrsquoa eacuteteacute
fait pour donner un feedback agrave lrsquoutilisateur Lorsqursquoun bug est trouveacute les solutions actuelles
ne font que retourner laquo vraifaux raquo Dans ce travail nous proposons une nouvelle approche
permettant dans une premiegravere eacutetape de deacutetecter automatiquement les diffeacuterents types de bugs
drsquointerfaces et de les corriger automatiquement dans une deuxiegraveme eacutetape Il srsquoagit drsquoune
approche geacuteneacuterique de localisation de deacutefauts baseacutee sur le concept de reacuteparation
Les objectifs et contributions de cette thegravese sont
1 Proposer un langage pour speacutecifier le contenu attendu drsquoune interface web
2 Deacutecrire un algorithme permettant de veacuterifier automatiquement qursquoune speacutecification est
respecteacutee
3 Deacutecrire une meacutethode permettant de fournir un verdict deacutetailleacute et utile lors drsquoune violation
Cette thegravese comporte six chapitres Le chapitre 1 est deacutedieacute agrave une vue globale sur les notions de
base relatives au web Les diffeacuterents types de bugs ainsi que des exemples reacuteels de chacun de
ces types sont preacutesenteacutes au chapitre 2 Le chapitre 3 est consacreacute aux travaux connexes sur la
deacutetection des bugs drsquointerfaces dans les applications web agrave quelques exemples drsquoapproches et
drsquooutils de deacutetection pour lesquels certains points faibles sont identifieacutes
Dans le chapitre 4 on retrouve lrsquoensemble des informations speacutecifiques agrave lrsquooutil Cornipickle
conccedilu et utiliseacute dans la deacutetection des bugs Ceci inclut la syntaxe du langage et son utili-
sation pour exprimer des proprieacuteteacutes ainsi que les deacutetails de son impleacutementation (objectifs
de conception architecture et sceacutenario typique) Le chapitre 5 est reacuteserveacute agrave lrsquoutilisation de
Cornipickle en combinaison avec un robot drsquoexploration dynamique (crawler) pour deacutetecter
efficacement les bugs comportementaux dans les RIA (Rich Internet Applications) Le dernier
6
chapitre quant agrave lui preacutesente deux meacutecanismes par lesquels un verdict vraifaux peut ecirctre
enrichi drsquoinformation suppleacutementaire pour le deacuteveloppeur Une conclusion geacuteneacuterale mettant
en eacutevidence lrsquointeacuterecirct du travail reacutealiseacute et lrsquoimportance des reacutesultats obtenus clocircture la thegravese
Il est agrave signaler que les contributions preacutesenteacutees dans cette thegravese ont fait lrsquoobjet de publications
dont je suis coauteur
Un premier article dont la contribution consiste en la formalisation de la seacutemantique de
lrsquointerpreacuteteur Cornipickle (section 33 de lrsquoarticle) et la preacutesentation du concept des teacutemoins
(section 43) Cette contribution correspond au chapitre 4 de la thegravese
1 Sylvain Halleacute Nicolas Bergeron Francis Gueacuterin Gabriel Le Breton Oussama Be-
roual Declarative layout constraints for testing web applications J Log Algebr Meth
Program Elsevier 85 (5) 737-758 (2016) [51]
Un deuxiegraveme article preacutesentant le meacutecanisme de transformations (feedback enrichi pour
lrsquoutilisateur) ce qui correspond au chapitre 6
1 Sylvain Halleacute Oussama Beroual Fault Localization in Web Applications via Model
Finding CRESTETAPS 2016 55-67 Elsevier Electronic Notes in Computer Science
(2016) [52]
Un troisiegraveme article sur lrsquoautomatisation des tests avec inteacutegration agrave un crawler ce qui
correspond au chapitre 5
1 Oussama Beroual Francis Gueacuterin Sylvain Halleacute Searching for Behavioural Bugs with
Stateful Test Oracles in Web Crawlers SBSTICSE 2017 ACM 7-13(2017) [38]
CHAPITRE 1
NOTIONS GEacuteNEacuteRALES SUR LE WEB
Deux termes sont drsquousage confondus par le public non averti le terme laquo web raquo et le terme
laquo Internet raquo Ce chapitre est destineacute agrave lever cette confusion puis agrave mettre lrsquoaccent sur la
majoriteacute des aspects drsquoune application web piegravece maicirctresse de notre recherche
11 LE FONCTIONNEMENT DU WEB
Une diffeacuterence de taille entre laquo Internet raquo et laquo web raquo est agrave noter Internet est un reacuteseau composeacute
drsquoune multitude de reacuteseaux connecteacutes entre eux Chacun de ces reacuteseaux est composeacute drsquoun
ensemble drsquoeacutequipements (fibres optiques etc) constituant un support physique drsquoinformation
Le web quant agrave lui est un systegraveme de fichiers veacutehiculeacutes par des serveurs Il repreacutesente le
contenu principal drsquoInternet agrave cocircteacute drsquoautres contenus tels que le courrier eacutelectronique la
messagerie etc Il nrsquoest donc qursquoune des applications drsquoInternet
Un site web est un contenu sur Internet Ce contenu nrsquoest rien drsquoautre qursquoun ensemble de
fichiers (HTML CSS JavaScript etc) heacutebergeacutes sur un serveur Selon leur meacutecanisme de
fonctionnement deux types de site sont distingueacutes les sites statiques dont le contenu est inva-
riable et les sites dynamiques dont le contenu est variable Les premiers ne sont modifiables
8
que par leurs proprieacutetaires alors que les seconds sont modifiables par des utilisateurs autres
que leurs proprieacutetaires La reacutealisation de chacun de ces sites fait appel agrave des technologies bien
deacutetermineacutees telles que HTML CSS et JavaScript
Les acteurs principaux dans le fonctionnement du web sont les clients repreacutesenteacutes par des
navigateurs tels que Firefox Internet Explorer Chrome et Safari et les serveurs repreacutesenteacutes
par les machines abritant les sites web ougrave les fichiers sont stockeacutes Chaque serveur est
identifieacute sur un reacuteseau par son adresse IP (Internet Protocol) et chaque page web est associeacutee
agrave une adresse URL (Uniform Resource Locator ou laquo localisateur uniforme de ressource raquo)
caracteacuteriseacutee par un contenu Une demande drsquoune page web agrave un serveur correspond donc agrave
une demande drsquoun contenu La communication entre les clients et les serveurs est assureacutee
par un protocole appeleacute laquo HTTP raquo (HyperText Transfer Protocol ou laquo protocole de transfert
hypertexte raquo) via lequel les requecirctes sont formuleacutees par les navigateurs aux serveurs [37]
HTTP est donc la langue de conversation entre le navigateur et le serveur La conversation
se fait selon le principe de laquo requecircte-reacuteponse raquo La formulation drsquoune requecircte HTTP par le
navigateur est suivie par une reacuteponse HTTP du serveur apregraves lrsquoavoir deacutecodeacutee et eacutetudieacutee En plus
de la ligne de requecircte deacutefinissant le document demandeacute la meacutethode appliqueacutee et le protocole
utiliseacute une requecircte est composeacutee de deux ensembles de lignes des lignes facultatives et des
lignes optionnelles Les premiegraveres sont les champs drsquoen-tecircte de la requecircte et sont chargeacutees
de fournir des informations suppleacutementaires sur la requecircte ou le client (type de navigateur
systegraveme drsquoexploitation etc) Les secondes forment le corps de la requecircte et sont chargeacutees lors
de lrsquoenvoi de donneacutees au serveur de permettre un envoi de donneacutees par une meacutethode speacutecifique
(lrsquoenvoi de donneacutees au serveur par un formulaire par une meacutethode POST par exemple)
Une requecircte de type GET nomme lrsquoURL agrave reacutecupeacuterer httpuqacca par exemple dans la
figure 11 Le navigateur srsquoidentifie dans lrsquoen-tecircte User-Agent et indique les types de reacuteponses
9
GET HTTP11Host wwwuqaccaConnection keep-aliveUser-Agent Mozilla50 (Windows NT 61 Win64 x64)
AppleWebKit53736 (KHTML like Gecko) Chrome6103163100Safari53736
Upgrade-Insecure-Requests 1Accept texthtmlapplicationxmlq=09Accept-Encoding gzip deflateAccept-Language fr-FRfrq=08en-USq=06enq=04Cookie PHPSESSID=tphmk53fee883355e4eq24dmb5
Upgrade-Insecure-Requests 1Connection keep-aliveHost wwwuqacca
Figure 11 ndash Exemple drsquoune requecircte HTTP
qursquoil accepte dans lrsquoen-tecircte Accept et Accept-Encoding Lrsquoen-tecircte Connection demande
au serveur de garder la connexion TCP ouverte pour drsquoautres requecirctes La requecircte contient
eacutegalement les cookies que le navigateur conserve pour ce domaine Les cookies sont des paires
cleacute-valeur qui suivent lrsquoeacutetat drsquoun site web entre diffeacuterentes demandes de pages Ainsi les
cookies stockent le nom de lrsquoutilisateur connecteacute un numeacutero secret attribueacute agrave lrsquoutilisateur par
le serveur certains paramegravetres de lrsquoutilisateur etc Les cookies sont stockeacutes dans un fichier
texte sur le client et envoyeacutes au serveur agrave chaque demande
La reacuteponse du serveur sur la requecircte de la figure 11 geacuteneacutereacutee et renvoyeacutee est montreacutee dans
figure 12
Lrsquoen-tecircte qui deacutefinit Content-Type en texthtml indique au navigateur de rendre le contenu
de la reacuteponse [13] au format HTML au lieu de le teacuteleacutecharger en tant que fichier Le navigateur
utilise lrsquoen-tecircte pour deacutecider comment interpreacuteter la reacuteponse mais tient eacutegalement compte
drsquoautres facteurs tels que lrsquoextension de lrsquoURL
10
HTTP10 200 OKDate Sat 11 Nov 2017 190323 GMTServer Apache2222 (Unix) mod_ssl2222 OpenSSL101e-fipsX-Powered-By PHP5217Access-Control-Allow-Origin httpswprodluqaccaExpires Thu 19 Nov 1981 085200 GMTCache-Control no-store no-cache must-revalidatePragma no-cacheContent-Type texthtmlX-Cache MISS from w3repuqaccaX-Cache-Lookup MISS from w3repuqacca80Via 10 w3repuqacca (squid3123)Connection close
Figure 12 ndash Exemple drsquoune reacuteponse HTTP
12 LE LANGAGE HTML
Nous allons nous limiter dans ce qui suit agrave la preacutesentation de lrsquoessentiel des eacuteleacutements de base
relatifs agrave ces trois langages agrave savoir les balises pour le HTML les seacutelecteurs pour le CSS et
quelques notions de base sur JavaScript
Le langage HTML laquo HyperText Markup Language raquo en anglais ou laquo langage de balisage
hypertexte raquo en franccedilais ou encore laquo langage de marquage hypertexte raquo dont la creacuteation revient
agrave 1991 est un langage de description de document pouvant ecirctre eacutecrit avec un simple eacutediteur
de texte sans une application speacutecifique et servant agrave produire (sur Internet) des pages Web
drsquoune grande varieacuteteacute de contenus de mise en forme ou drsquoanimations et agrave inseacuterer diffeacuterents
types drsquoeacuteleacutements(texte des liens des images etc) Il permet aussi de deacutesigner au navigateur
certaines speacutecificiteacutes telle que la consideacuteration drsquoun texte comme un paragraphe ou un titre
11
121 STRUCTURE DrsquoUN DOCUMENT
La structure drsquoun document HTML doit satisfaire un scheacutema preacutecis et comprendre un ensemble
de balises speacuteciales essentielles pour tout document HTML Les eacuteleacutements composants la
structure drsquoun document HTML sont les suivants
Doctype Un document HTML deacutebute toujours par le soulignement de la nature du document
crsquoest agrave dire le langage utiliseacute (HTML) en faisant appel agrave la balise lt DOCTYPE htmlgt
Lrsquoeacuteleacutement lthtmlgt Lrsquoeacuteleacutement html comprend deux balises lthtmlgt et lthtmlgt Il deacutefinit
lrsquounique racine du document HTML Tous les autres eacuteleacutements doivent y ecirctre placeacutes
Lrsquoeacuteleacutement ltheadgt Cet eacuteleacutement repreacutesente lrsquoen-tecircte du document et renferme exclusivement
des meacuteta-donneacutees (titre de la page type drsquoencodage utiliseacute etc) exploiteacutees par les navigateurs
pour ameacuteliorer lrsquoergonomie de la page
Lrsquoeacuteleacutement ltbodygt Lrsquoeacuteleacutement body repreacutesente le corps du document Il est toujours placeacute
apregraves lrsquoen-tecircte et contient tout le contenu laquo visible raquo de la page les textes images liens
videacuteos etc
Lrsquoeacuteleacutement lttitlegt La structure srsquoachegraveve par une des meacuteta-donneacutees utiliseacutees par le navigateur
qui constitue le seul eacuteleacutement HTML obligatoire le titre du document placeacute agrave lrsquointeacuterieur de
lrsquoeacuteleacutement head
Voici le document HTML formel le plus simple qursquoon puisse eacutecrire
12
ltDOCTYPE htmlgtlthtmlgt
ltheadgtlttitlegtTitre de la pagelttitlegt
ltheadgtltbodygt
lth1gtUn grand titrelth1gtltpgtUn paragraphltpgt
ltbodygtlthtmlgt
Figure 13 ndash Un exemple simple de page HTML contenant un grand titre et un paragraphe
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtUn document HTMLlttitlegtltheadgtltbodygtlt-- Du contenu pour lrsquoutilisateur ici --gtltbodygtlthtmlgt
Le code HTML dans la figure 13 par exemple indique que lrsquoon souhaite creacuteer un grand titre
(gracircce agrave lrsquoeacuteleacutement h1) et un paragraphe (gracircce agrave lrsquoeacuteleacutement p)
122 VERSIONS DU HTML
Le Web a connu ces deux derniegraveres deacutecennies une eacutevolution extraordinaire En effet lrsquoavanceacutee
technologique a donneacute lieu agrave une ameacutelioration des performances des composants physiques
et une augmentation de la vitesse de connexion entraicircnant par conseacutequent une eacutevolution
13
remarquable des sites Web A leur tour les langages tels que le HTML et le CSS ont eacutegalement
connu une eacutevolution consideacuterable (modifications enrichissements etc) drsquoougrave lrsquoapparition de
nouvelles versions de ces langages bien que lrsquoeacutevolution nrsquoa pas eacuteteacute lineacuteaire ni continue pour
lrsquoutilisateur final Les nouvelles versions sont doteacutees chacune de nouvelles fonctionnaliteacutes et
change parfois totalement la syntaxe du langage La premiegravere version de HTML lrsquoHTML1
a vu le jour en 1991 De nombreuses ameacuteliorations apporteacutees par la suite par le creacuteateur du
HTML jugeacutees inteacuteressantes et importantes lrsquoont conduit en 1994 agrave partager publiquement la
nouvelle version de son langage le HTML2 Drsquoautres versions se sont succeacutedeacutees HTML2
(1995) HTML32 (janvier 1997) HTML4 modifieacutee agrave plusieurs reprises (1997 1998 1999
2000) HTML5 (2014) HTML51 (2016) Parmi toutes ces versions la plus stable celle qui
offre de nouvelles fonctionnaliteacutes et ouvre de nouvelles possibiliteacutes inteacuteressantes est la plus
reacutecente agrave savoir HTML51
123 EacuteLEacuteMENTS DE BASE EN HTML
Le fonctionnement du HTML srsquoappuie sur la notion drsquoeacuteleacutements Ces derniers ont pour rocircle
de structurer du contenu pour donner du sens aux diffeacuterents objets de ce contenu Ils sont
constitueacutes de balises renfermant des attributs et du contenu entre elles
Les balises en HTML Le nombre de balises constituant le HTML est environ 140 Elles
servent agrave fournir au navigateur des indications sur le sens drsquoun eacuteleacutement son interpreacutetation ou
son affichage en plus drsquoautres indications telles que la gestion des formulaires en ligne lrsquoajout
des fichiers multimeacutedias etc On distingue plusieurs types de balises chargeacutee chacune drsquoune
fonction bien deacutetermineacutee bien que certaines nrsquoont de fonction que de seacuteparer des sections drsquoun
document Parmi ces fonctions deacutefinir des titres creacuteer des paragraphes creacuteer des liens vers des
ressources externes inteacutegrer une image dans un document HTML creacuteer des listes Les balises
14
suivantes sont donneacutees agrave titre drsquoexemple ltpgt lth1gt ltimggt ltligt ltagt Les eacuteleacutements
sont constitueacutes geacuteneacuteralement drsquoune paire de balises (ouvrante et fermante) et drsquoun contenu
entre les balises et exceptionnellement drsquoune balise unique dite dans ce cas laquo orpheline raquo
Une balise fermante doit avoir le mecircme nom que la balise ouvrante correspondante (notez la
preacutesence du slash (barre oblique))
Les balises laquo auto fermantes raquo (ou balises vides) Certaines balises sont deacutepourvues de texte
du fait qursquoelles sont ouvrantes et fermantes en mecircme temps les balises AUTO FERMANTES
sont soit des balises de type BLOC (exemple lthr gt) des balises EN LIGNE (exemple
ltimg gt)
Les attributs en HTML Les attributs se placent dans la balise ouvrante drsquoun eacuteleacutement et
possegravedent toujours une valeur (parfois implicite) Ils viennent apporter plus de deacutetails sur les
eacuteleacutements Par exemple lrsquoattribut href (hypertexte reacutefeacuterence) va offrir lrsquoadresse (la valeur) de
la page du lien agrave lrsquoeacuteleacutement ltagt (pour anchor) chargeacute de la creacuteation des liens vers drsquoautres sites
ou drsquoautres pages
Lrsquoeacuteleacutement ltimggt constitueacute drsquoune seule balise orpheline chargeacute drsquoinseacuterer une image dans
une page HTML a besoin de deux attributs src et alt Le premier src assure le nom et
lrsquoemplacement de lrsquoimage (la valeur) alors que lrsquoattribut alt se charge de lrsquoaffichage drsquoun texte
alternatif agrave une indisponibiliteacute de lrsquoimage
Notez bien que les balises et les attributs ne seront jamais afficheacutes par le navigateur il va srsquoen
servir drsquoindication pour justement savoir ce qursquoil doit afficher (un paragraphe un titre un lien
une image etc)
15
13 LES CASCADING STYLESHEETS (CSS)
Le CSS laquo Cascading StyleSheets raquo en anglais ou laquo feuilles de styles en cascade raquo en franccedilais est
un langage informatique apparu en 1996 voueacute agrave la mise en forme du contenu des documents
HTML et XML moyennant des styles pour deacutefinir la taille la couleur ou lrsquoalignement du texte
afin drsquoagreacutementer le reacutesultat visuel final de ce contenu Il est utiliseacute dans la conception de
sites web Le code ci-dessous par exemple indique que les titres h1 eacutecrits en HTML doivent
avoir une couleur verte et une taille de 20px tandis que les paragraphes doivent ecirctre noir et
souligneacutes
h1 color greenfont-size 20px
p color blacktext-decoration underline
Le CSS est donc un autre langage du web venant compleacuteter le HTML Il permet la mise en
page drsquoun contenu et le changement de son apparence en lui appliquant des styles (choisir
la couleur du texte seacutelectionner la police utiliseacutee deacutefinir la taille du texte les bordures le
fond) Lrsquoapparition du HTML a devanceacute lrsquoapparition du CSS de cinq anneacutees peacuteriode dans
laquelle la mise en page eacutetait effectueacutee par le HTML qui consacrait des balises agrave cette fin
telle que la balise ltfont color=aab1c3gt deacutefinissant la couleur du texte par exemple
Le langage CSS est venu reacutepondre agrave la complexiteacute qursquoont connu les pages HTML avec une
augmentation remarquable des balises entre autres conduisant agrave une mise agrave jour des pages
web de plus en plus complexe Agrave lrsquoinstar du HTML le CSS est passeacute par plusieurs versions
16
les plus importantes sont CSS1 CSS20 CSS21 et CSS3
Eacutecriture du code CSS Le code CSS peut ecirctre eacutecrit agrave trois endroits distincts
1 Dans un Lrsquoeacuteleacutement HTML ltstylegt
2 Dans la balise ouvrante des eacuteleacutements HTML(meacutethode la moins recommandeacutee)
3 Dans un fichier CSS seacutepareacute (meacutethode la plus recommandeacutee)
131 PROPRIEacuteTEacuteS ET SEacuteLECTEURS CSS
Les proprieacuteteacutes CSS permettent de choisir quel(s) aspect(s) (ou laquo styles raquo) drsquoun eacuteleacutement HTML
que lrsquoon souhaite modifier
Lrsquoapplication drsquoun style agrave un ou plusieurs eacuteleacutements HTML signifie leurs seacutelections au preacutealable
pour les soumettre agrave un style particulier Lrsquointervention drsquoun seacutelecteur est donc neacutecessaire Le
CSS est fondeacute sur un ensemble de regravegles les seacutelecteurs sont la premiegravere partie drsquoune regravegle CSS
Crsquoest une syntaxe chargeacutee drsquoidentifier les eacuteleacutements du document auxquels la regravegle est deacutedieacutee
(appliqueacutee) Depuis son arriveacutee (1996) le CSS a speacutecifieacute un certain nombre de seacutelecteurs tregraves
accepteacutes de nos jours par les diffeacuterents navigateurs les plus freacutequemment utiliseacutes sont
Les seacutelecteurs de type Ce seacutelecteur cible lrsquoeacuteleacutement du document agrave styler en se basant sur
le nom de lrsquoeacuteleacutement Il doit correspondre dans ce cas au nom de lrsquoeacuteleacutement Exemple pour
mettre en bleu le texte des titres de niveau 1 le seacutelecteur sera h1
h1 color blue
17
Les seacutelecteurs de classe Ce seacutelecteur permet de cibler les eacuteleacutements en fonction de la valeur
de leur attribut class Il permet donc de seacutelectionner tous les eacuteleacutements ayant une certaine classe
Preacuteceacuteder le nom de la classe par un point () suffit pour obtenir le seacutelecteur correspondant
agrave cette classe Exemple la classe ltimportantgt est attribueacutee agrave tous les eacuteleacutements jugeacutes
importants Il suffit de deacutefinir dans le fichier CSS une regravegle stipulant que le texte de tous les
eacuteleacutements posseacutedant la classe Important soit eacutecrit en rouge
ltp class=ImportantgtCoucoultpgt
Important
color red
Les seacutelecteurs drsquoidentifiant Ce seacutelecteur permet de cibler un eacuteleacutement drsquoun document en
fonction de la valeur de son attribut ltidgt Dans un document il ne doit y avoir qursquoun seul
identifiant donneacute agrave lrsquoeacuteleacutement Preacuteceacutedeacute le nom de lrsquoidentifiant par un diegravese () suffit pour
obtenir le seacutelecteur correspondant agrave cet identifiant Exemple Un identifiant Menu est utiliseacute
pour repeacuterer notre menu dans le document Il suffit de deacutefinir dans le fichier CSS une regravegle
indiquant que notre menu ne soit pas afficheacute
ltdiv id=Menugtltdivgt
Menu
display none
18
Le seacutelecteur universel laquo raquo Ce seacutelecteur permet de cibler tous les eacuteleacutements drsquoun document
drsquoougrave lrsquoappellation de seacutelecteur universel Il existe eacutegalement une variante pour ne cibler qursquoun
seul eacuteleacutement
Regroupements des seacutelecteurs Une autre maniegravere de proceacuteder consiste en la reacuteduction de
taille du fichier CSS en appliquant une mecircme regravegle agrave plusieurs seacutelecteurs Ces derniers sont
dans ce cas seacutepareacutes par une virgule () Exemple les eacuteleacutements posseacutedant la classe Important
et les titres lth2gt sont eacutecrits en rouge
Important h2
color red
14 JAVASCRIPT
JavaScript est un langage de programmation de scripts utiliseacute surtout dans les pages web
interactives ainsi que pour les serveurs Il a eacuteteacute creacutee par Brendan Eich en 1995 en lrsquoespace de
dix jours suite agrave une demande formuleacutee par la Netscape Communications Corporation Les
bases du langage et ses principales interfaces sont fournies par des objets ce qui fait de lui un
langage orienteacute objet agrave prototype Les objets en question ne sont pas des instances de classes
Ils sont eacutequipeacutes chacun de constructeurs permettant de creacuteer leurs proprieacuteteacutes et notamment le
prototypage qui sert agrave creacuteer des objets heacuteritiers personnaliseacutes JavaScript dont les fonctions
sont des objets de premiegravere classe supporte le paradigme objet impeacuteratif et fonctionnel
Depuis sa creacuteation JavaScript a connu drsquoinnombrables modifications Il a eacuteteacute standardiseacute
en 1997 par laquo Ecma International raquo donnant naissance agrave la premiegravere eacutedition du standard
19
laquo ECMA-262 raquo la deuxiegraveme eacutedition du standard laquo ECMA-262 raquo a vu le jour en 1998 suite
agrave des changements reacutedactionnels apporteacutes au standard laquo ECMA-262 raquo pour le conformer au
standard international laquo ISOCEI 16262 raquo Des ameacuteliorations(dans la manipulation des chaicircnes
de caractegraveres dans les instructions de controcircle etc) introduites dans la deuxiegraveme eacutedition ont
donneacute lieu en 1999 agrave la publication de la troisiegraveme eacutedition du standard ECMA-262 Depuis la
troisiegraveme eacutedition les eacuteditions se sont succeacutedeacutees pour arriver actuellement agrave la huitiegraveme eacutedition
Les diffeacuterentes eacuteditions apparues ont chacune participeacute avec un plus dans le deacuteveloppement
des performances du langage
La plupart des langages de programmation ont des fonctionnaliteacutes de base communes Lrsquouti-
lisation de JavaScript neacutecessite la connaissance de ces bases pour mieux comprendre son
fonctionnement
Variables Les variables sont des conteneurs servant agrave stocker temporairement des informa-
tions Une variable a le pouvoir de varier autrement dit de pouvoir stocker diffeacuterentes valeurs
dans le temps en laquo eacutecrasant raquo sa valeur preacuteceacutedente Une variable est deacuteclareacutee au commencement
avec le mot-cleacute let suivi du nom qursquoon souhaite utiliser pour la variable
Un certain nombre de regravegles sont agrave consideacuterer en JavaScript
1 les lignes de code doivent terminer par un point-virgule pour indiquer que crsquoest la
fin de la ligne Lrsquoomission de ces points-virgules peut conduire agrave des comportements
inattendus voire des erreurs
2 Nrsquoimporte quel nom peut ecirctre (quasiment) utiliseacute pour nommer une variable Il y a
cependant quelques restrictions sur ces noms
3 Eacuteviter la casse JavaScript y est sensible cela veut dire que maVariable sera consideacutereacute
comme un nom diffeacuterent de mavariable Lrsquoapparition des problegravemes sur les noms de
20
variables dans le code implique la veacuterification de la casse utiliseacutee
4 Avec les versions reacutecentes de JavaScript il est conseilleacute drsquoutiliser le mot-cleacute let Cepen-
dant des variables deacuteclareacutees avec le mot-cleacute var sont parfois rencontreacutees Ce dernier est
utiliseacute lorsque notre code doit supporter des navigateurs anciens (IE lt 11) let nrsquoeacutetant
pas supporteacute dans ce cas Une fois une variable est deacuteclareacutee on lui donne une valeur
maVariable = rsquooussrsquo
Pour utiliser la valeur plus loin dans le code il suffit de faire appel agrave la variable en utilisant
son nom maVariable Lorsque on creacutee une variable et qursquoon lui donne une valeur cela
peut se faire sur une seule ligne let maVariable = rsquooussrsquo Une fois qursquoon a donneacute une
valeur agrave une variable on peut la changer plus loin
let maVariable = rsquooussrsquomaVariable = rsquoSylvainrsquo
Les variables sont reacuteparties en diffeacuterents types de donneacutees et ont chacune une fonction Parmi
ces variables on a la chaicircne de caractegraveres le nombre le Booleacuteen le tableau lrsquoobjetetc Les
variables sont indispensables agrave la programmation Si les valeurs sont statiques rien ne pourrait
se faire Par exemple on ne pourrait pas personnaliser un message de bienvenue ou changer
lrsquoimage afficheacutee dans une galerie
Les opeacuterateurs Un opeacuterateur est un symbole matheacutematique qui produit un reacutesultat en
fonction de plusieurs valeurs (la plupart du temps on utilise deux valeurs et un opeacuterateur)
Parmi les opeacuterateurs les plus simples on a lrsquoopeacuterateur drsquoaffectation lrsquoopeacuterateur drsquoidentiteacute
lrsquoopeacuterateur de neacutegation lrsquoopeacuterateur drsquoineacutegaliteacute
Il y a plein drsquoautres opeacuterateurs mais on srsquoen tiendra agrave ceux-lagrave
Il est agrave noter que lrsquoutilisation de diffeacuterents types de donneacutees avec un mecircme opeacuterateur faussera
21
le reacutesultat obtenu le reacutesultat obtenu par70 + 12 nrsquoest pas le mecircme que celui obtenu par
70 + 12 le deuxiegraveme reacutesultat est le bon car les nombres entoureacutes de guillemets sont donc
consideacutereacutes comme des chaicircnes de caractegraveres
Les structures conditionnelles Les structures conditionnelles sont des eacuteleacutements du code qui
permettent de tester si une expression est vraie ou non et drsquoexeacutecuter des instructions diffeacuterentes
selon le reacutesultat La structure conditionnelle utiliseacutee la plus freacutequemment est if else
Par exemple
let parfumGlace = rsquosorbet de fraisersquoif (parfumGlace === rsquosorbet de fraisersquo)
alert(Jrsquoadore le sorbet de fraise ) else
alert(Jrsquoaurai preacutefeacutereacute un sorbet de fraise)
Le test agrave reacutealiseacute est contenue dans if ( ) Il consiste en une comparaison de la variable
parfumGlace avec la chaicircne de caractegraveres laquo sorbet de fraise raquo via lrsquoopeacuterateur drsquoidentiteacute pour
veacuterifier leur eacutegaliteacute Si cette comparaison renvoie true le premier bloc de code sera exeacutecuteacute
Sinon crsquoest le code du second bloc celui preacutesent apregraves else qui sera exeacutecuteacute
Les fonctions Les fonctions sont chargeacutees drsquoorganiser les fonctionnaliteacutes agrave reacuteutiliser Par
exemple au lieu drsquoexeacutecuter deux fois la mecircme action plutocirct que de recopier le code la
fonction est eacutecrite une fois puis utiliser aux deux endroits souhaiteacutes
let maVariable = documentquerySelector(rsquoh1rsquo)alert(rsquoSalut rsquo)
Ces fonctions (querySelector et alert) sont disponibles dans le navigateur Elles ressemblent
agrave un nom de variable suivi de parenthegraveses et utilisent des arguments dans leurs calculs Les
22
arguments sont placeacutes entre les parenthegraveses seacutepareacutes par des virgules srsquoil y en a plusieurs Par
exemple la fonction alert() fait apparaicirctre une fenecirctre de pop-up dans la fenecirctre du navigateur
Un argument est utiliseacute pour indiquer agrave la fonction le contenu qursquoon deacutesire eacutecrire dans cette
fenecirctre En plus des fonctions deacutejagrave existantes drsquoautres fonctions peuvent ecirctre deacutefinies par
nous-mecircmes Par exemple fonction toute simple qui considegravere deux arguments et renvoie le
reacutesultat de la multiplication
function multiplier(num1num2) let reacutesultat = num1 num2return reacutesultat
Avant une utilisation reacutepeacuteteacutee de cette fonction elle doit ecirctre deacuteclareacutee dans la console
multiplier(47)multiplier(2020)multiplier(053)
Lrsquoinstruction return indique au navigateur qursquoil faut renvoyer la variable reacutesultat en dehors de
la fonction afin qursquoelle puisse ecirctre reacuteutiliseacutee par ailleurs Cette instruction est neacutecessaire car
les variables deacutefinies agrave lrsquointeacuterieur des fonctions sont uniquement disponibles agrave lrsquointeacuterieur de
ces fonctions Crsquoest ce qursquoon appelle une porteacutee
Les eacuteveacutenements Un site web vraiment interactif est caracteacuteriseacute par des eacuteveacutenements Les
eacuteveacutenements sont des structures de code agrave lrsquoeacutecoute du navigateur permettant de deacuteclencher des
actions au moindre problegraveme Lrsquoexemple concret est lrsquoeacuteveacutenement de clic qui est deacuteclencheacute
une fois lrsquoutilisateur clique sur quelque chose dans le navigateur Lrsquoexemple ci-dessous peut
donner une ideacutee sur ce que ccedila donne en pratique il suffit de saisir ces quelques lignes dans la
console puis cliquez sur la page
23
documentquerySelector(rsquohtmlrsquo)onclick = function() alert(rsquoarrecirctez de cliquerrsquo)
Les meacutethodes pour laquo attacher raquo un eacuteveacutenement agrave un eacuteleacutement sont multiples Dans cet exemple
deux paramegravetres sont deacutefinis lrsquoeacuteleacutement HTML concerneacute et un gestionnaire onclick qui
est une proprieacuteteacute eacutegale agrave une fonction anonyme (elle nrsquoa pas de nom) qui contient le code agrave
exeacutecuter quand lrsquoutilisateur clique
On pourra noter que documentquerySelector(rsquohtmlrsquo)onclick = function()
est eacutequivalent agrave
let maHTML = documentquerySelector(rsquohtmlrsquo)maHTMLonclick = function()
La premiegravere syntaxe est simplement plus courte Drsquoautres fonctionnaliteacutes peuvent srsquoajouter
aux bases en JavaScript exposeacutees
15 LE FONCTIONNEMENT INTERNE DES NAVIGATEURS WEB
Pour la peacuteriode allant de mars 2015 agrave mars 2016 la part de marcheacute des navigateurs drsquoapregraves les
statistiques de StatCounter [19] est de pregraves de 96 entre Internet Explorer Firefox Chrome
et Opera Le tableau 11 montre en pourcentage la part de chaque navigateur
24
Navigateur Part drsquoutilisation en
Chrome 5232
Internet Explorer 162
Firefox 1558
Safari 978
Opera 181
Autres 431
Tableau 11 ndash Statistiques des parts drsquoutilisation des navigateurs dans le monde entre mars 2015et mars 2016
Une ressource web eacutetant seacutelectionneacutee en faisant appel au serveur est ensuite afficheacutee par le
navigateur Celle-ci peut ecirctre un document HTML (qui est le cas geacuteneacuteral) comme elle peut
ecirctre un autre type de fichier Une URL est mobiliseacutee par lrsquoutilisateur pour la reacutecupeacuteration
de la ressource Les speacutecifications HTML et CSS qui preacutecisent au navigateur la maniegravere
drsquointerpreacuteter et drsquoafficher les fichiers HTML sont maintenues par lrsquoorganisation W3C (World
Wide Web Consortium) [12]
La structure drsquoun navigateur comprend plusieurs composants tels qursquoune interface utilisateur
le moteur du navigateur un composant reacuteseau une interface drsquoarriegravere-plan (backend UI)
un interpreacuteteur JavaScript un analyseur XML (XML parser) un composant de stockage de
donneacutees et finalement le moteur de rendu qui est la piegravece la plus importante dans cet ensemble
[49] [48] La figure 14 montre le flux entre les composants du navigateur
Avant son affichage agrave lrsquoutilisateur une page web parcourt le chemin suivant
1 La requecircte est envoyeacutee vers le serveur en utilisant lrsquointerface utilisateur qui enferme
une barre drsquoadresse des boutons preacuteceacutedent et suivant un menu de marque-page
25
des boutons drsquoactualisation et drsquoarrecirct etc La requecircte est transporteacutee via le composant
reacuteseau qui assure les appels reacuteseau telles que les requecirctes HTTP Il est doteacute drsquoune
interface indeacutependante de la plateforme et en dessous des impleacutementations pour chaque
plateforme
2 La reacuteponse est renvoyeacutee par le serveur apregraves plusieurs traitements au niveau du serveur
drsquoapplication afin de geacuteneacuterer la page demandeacutee en HTML (les deacutetails sur ces deux
eacutetapes ont eacuteteacute exposeacutes dans la section 11)
3 Le composant reacuteseau passe les donneacutees brutes reacutecupeacutereacutees agrave un autre composant qui
a comme rocircle drsquoenregistrer toutes sortes de donneacutees sur le disque dur par exemple
des cookies Il srsquoagit drsquoune couche de persistance La nouvelle speacutecification HTML
(HTML5) deacutefinit le terme laquo base de donneacutees Web raquo qui est un systegraveme complet (bien
que leacuteger) de base de donneacutees dans le navigateur
4 Les octets bruts sont transporteacutes au moteur de rendu qui est responsable de lrsquoaffichage du
contenu demandeacute agrave lrsquoeacutecran en suivant plusieurs processus drsquoanalyse sur le code HTML
et CSS Les deacutetails de ces processus drsquoanalyse sont abordeacutes dans le reste du chapitre
5 Un interpreacuteteur JavaScript est appeleacute par le moteur de rendu pour lrsquoanalyse et lrsquoexeacutecution
du code JavaScript Pareillement pour lrsquoanalyseur XML (XML parser) qui est utiliseacute
pour lrsquoanalyse des documents XML dans lrsquoarbre du DOM (Document Object Model)
Crsquoest lrsquoun des sous systegravemes les plus reacuteutilisables dans lrsquoarchitecture En fait presque
toutes les impleacutementations des navigateurs exploitent un analyseur XML existant plutocirct
que de creacuteer leur propre analyseur agrave partir de zeacutero
6ndash7 Lrsquointerface drsquoarriegravere-plan (backend UI) est destineacute agrave dessiner des widgets de base
du genre listes deacuteroulantes et fenecirctres Une interface geacuteneacuterique non speacutecifique agrave la
plateforme est preacutesenteacutee par le navigateur qui utilise drsquoautre part en dessous lrsquointerface
utilisateur du systegraveme drsquoexploitation
26
Figure 14 ndash Le flux entre les composants du navigateur pour la reacutecupeacuteration et le traitementdrsquoune page web dans le navigateur
8ndash9 Ce dernier composant est relieacute au moteur de rendu qui envoie le rendu final agrave lrsquoutilisateur
dans la derniegravere eacutetape de la figure
Lrsquoaffichage drsquoune page web par le navigateur moyennant le code HTML CSS et JavaScript
nrsquoest pas aussi simple Pour ce faire le navigateur fait particuliegraverement appel agrave lrsquoun de ses
composants le moteur de rendu
Les opeacuterations qui se manifestent agrave lrsquointeacuterieur du navigateur et en particulier le fonctionnement
des moteurs de rendu des navigateurs les plus utiliseacutes ont eacuteteacute expliqueacutes par Garsiel et Irish
[11] Lrsquoaffichage drsquoune page web comporte de fait plusieurs phases La premiegravere consiste en
la construction des arborescences DOM (modegravele drsquoobjet de document) et CSSOM (modegravele
drsquoobjet CSS) Cette derniegravere phase est suivie par la transformation des balisages HTML et CSS
en DOM et CSSOM respectivement dont la combinaison forme une arborescence drsquoaffichage
(arbre de rendu) Cette arborescence agrave son tour est chargeacutee de la mise en page de chaque
eacuteleacutement visible et de lrsquointroduction des donneacutees exigeacutees pour lrsquoaffichage des pixels agrave lrsquoeacutecran
[5]
27
lthtmlgtltheadgt
ltmeta name=viewport content=width=device-widthinitial-scale=1gtltlink href=designcss rel=stylesheetgtlttitlegtExemplelttitlegt
ltheadgtltbodygt
ltpgtSalut ltspangtOussamaltspangt Beroual ltpgtltdivgtltimg src=ma-photojpggtltdivgt
ltbodygtlthtmlgt
Figure 15 ndash Un exemple simple de page web illustrant le rendu dans un navigateur
Construction du modegravele drsquoobjet DOM
Le processus de construction du modegravele drsquoobjet DOM est exposeacute ci-dessous agrave travers lrsquoexemple
drsquoune page web simple en HTML brut avec du texte et une seule image Le code HTML de la
page agrave eacutetudier est donneacute agrave la figure 15
Le traitement de cette page impose au moteur de rendu du navigateur drsquoexeacutecuter quatre
processus de transformation tel qursquoillustreacute dans la figure 16
1 Le premier processus est la conversion le moteur de rendu lit les octets bruts du
HTML sur le disque ou le reacuteseau et les traduit en caractegraveres individuels en fonction de
lrsquoencodage speacutecifique du fichier (UTF-8 par exemple)
2 Le deuxiegraveme processus est la creacuteation de jetons le moteur de rendu convertit les
chaicircnes de caractegraveres en diffeacuterents jetons speacutecifieacutes par la norme HTML5 du W3C
telles que lthtmlgt et ltbodygt Chaque jeton possegravede une signification particuliegravere et un
ensemble de regravegles
3 Le troisiegraveme processus est lrsquoanalyse lexicale les jetons eacutemis sont convertis en objets
qui deacutefinissent leurs proprieacuteteacutes et leurs regravegles
28
Figure 16 ndash Les processus de traitement de HTML et CSS au niveau du moteur de rendu dunavigateur
4 Le quatriegraveme processus est la construction du DOM puisque le balisage HTML
deacutefinit les relations entre les diffeacuterentes balises (certaines balises sont contenues dans
drsquoautres) les objets creacuteeacutes sont associeacutes selon une arborescence qui capture eacutegalement
la relation parent-enfant deacutefinie dans le balisage drsquoorigine (lrsquoobjet HTML est un parent
de lrsquoobjet body body est un parent de lrsquoobjet p etc)
Le reacutesultat final de lrsquoensemble de ce processus est le modegravele drsquoobjet de document (ou DOM)
de notre page simple que le navigateur utilise pour tout traitement suppleacutementaire de la page
Lrsquoarbre DOM reacutesultant est illustreacute dans la figure 17
Modegravele drsquoobjet CSS (CSSOM)
Lrsquoinformation sur lrsquoapparence drsquoun eacuteleacutement lors de son affichage est offerte par une autre
construction le CSSOM Durant la construction du DOM de notre page il srsquoest aveacutereacute que
le navigateur a deacuteceleacute une balise de lien link dans la section head du document signalant
une feuille de style CSS externe stylecss Du fait qursquoil a besoin de cette ressource pour
29
Figure 17 ndash Un arbre du modegravele drsquoobjet DOM
body font-size 24px p font-weight bold span color blue p span display none img float right
Figure 18 ndash Un exemple de fichier CSS simple
lrsquoaffichage de la page le navigateur anticipe lrsquoenvoi immeacutediat drsquoune demande pour cette
ressource et reacutepond avec le contenu du fichier illustreacute agrave la figure 18 Ces styles auraient pu
ecirctre deacuteclareacutes directement dans le balisage HTML (inteacutegreacute) cependant il est recommandeacute
de seacuteparer les codes CSS et HTML puisque les graphistes travaillent sur le code CSS les
deacuteveloppeurs sur le code HTML etc
Les regravegles CSS reccedilues sont converties en un contenu que le navigateur peut comprendre et
traiter de mecircme que pour le code HTML Le processus HTML est reacutepeacuteteacute mais dans ce cas
pour le code CSS (voir figure 16) Les octets CSS sont convertis en caractegraveres puis en jetons
et en nœuds pour finalement se relier au sein drsquoune arborescence appeleacutee CSS Object Model
(CSSOM) ou laquo modegravele drsquoobjet CSS raquo
Le calcul de lrsquoensemble final de styles drsquoun objet de la page tel qursquoeffectueacute par le navigateur
30
Figure 19 ndash Arbre du modegravele drsquoobjet CSSOM
comprend deux eacutetapes Dans une premiegravere eacutetape la regravegle la plus geacuteneacuterale pour ce nœud
est appliqueacutee (par exemple srsquoil srsquoagit drsquoun eacuteleacutement enfant du corps tous les styles du corps
srsquoappliquent) Dans une deuxiegraveme eacutetape des regravegles plus speacutecifiques crsquoest-agrave-dire en descendant
la cascade sont appliqueacutees afin drsquoaffiner de maniegravere reacutecursive les styles calculeacutes
La concreacutetisation de cette deacutemarche est faite agrave partir de lrsquoobservation de lrsquoarborescence
CSSOM dans la figure 19 On peut y lire que tout texte est eacutecrit en bleu et que sa taille de
police est de 24 pixels Il est placeacute dans la balise span contenue dans lrsquoeacuteleacutement body Ce
dernier est chargeacute de transmettre la taille de police agrave lrsquoeacuteleacutement span Toutefois si une balise
span est un enfant drsquoune balise paragraphe (p) le contenu de cette balise nrsquoest pas afficheacute
Il faut se rappeler que lrsquoarborescence CSSOM ci-dessus nrsquoest pas complegravete Elle ne montre
que les styles qui remplacent ceux de la feuille de style Dans lrsquoabsence de styles proposeacutes
tout navigateur fournit un ensemble de styles par deacutefaut eacutegalement appeleacutes styles user-agent
Construction de lrsquoarbre de rendu la mise en page et le dessin
Les donneacutees HTML et CSS ont servi jusqursquoici agrave la creacuteation des arborescences des modegraveles
DOM et CSSOM qui sont des objets indeacutependants chargeacutes chacun de capturer un aspect
du document lrsquoun deacutecrit le contenu et lrsquoautre les regravegles de style appliqueacutees au document
31
Figure 110 ndash Arbre de rendu
Les arborescences des deux modegraveles DOM et CSSOM sont combineacutees pour former une
arborescence drsquoaffichage responsable de lrsquoaffichage de la page et ne contenant que des nœuds
neacutecessaires agrave lrsquoaffichage de la page (voir figure 110)
Une arborescence drsquoaffichage comporte plusieurs types de nœuds des nœuds Visibles des
nœuds invisibles tels que les balises de script les balises Meta etc et des nœuds masqueacutes
par le code CSS Seul le premier type est consideacutereacute dans lrsquoarborescence drsquoaffichage Les
deux autres sont omis Le proceacutedeacute drsquoomission est effectueacute en mobilisant deux proprieacuteteacutes la
proprieacuteteacute visibility hidden rendant lrsquoeacuteleacutement invisible tout en occupant de lrsquoespace dans la
mise en page et la proprieacuteteacute display none supprimant totalement lrsquoeacuteleacutement de lrsquoarborescence
drsquoaffichage La figure 111 donne une vue globale des eacutetapes et processus de la construction
des arbres abordeacutees ci-dessous
Tous les nœuds visibles sont soumis aux regravegles CSSOM et eacutemis avec leurs contenus et leurs
styles calculeacutes Neacuteanmoins leurs positions et leurs geacuteomeacutetries (tailles) restent indeacutefinies La
deacutetermination ou le calcul de ces deux paramegravetres constitue la phase de mise en page appeleacutee
parfois ajustement de la mise en page Cette derniegravere est traduite par lrsquoexemple simple donneacute agrave
la figure 112 Le corps de la page ci-dessus contient deux eacuteleacutements div imbriqueacutes le premier
eacuteleacutement div (parent) deacutefinit la taille drsquoaffichage du nœud agrave 50 de la largeur de la fenecirctre et
le second eacuteleacutement div contenu par le parent deacutefinit sa largeur agrave 50 de celui du parent soit
32
Figure 111 ndash Les eacutetapes et processus de la construction des arbres DOM CSSOM et de lrsquoarbrede rendu
33
lthtmlgtltheadgt
ltmeta name=viewport content=width=device-widthinitial-scale=1gtlttitlegtExemple de mise en pagelttitlegt
ltheadgtltbodygt
ltdiv style=width 50gtltdiv style=width 50gtHello worldltdivgt
ltdivgtltbodygt
lthtmlgt
Figure 112 ndash Un second exemple simple illustrant le processus de mise en page par le navigateur
25 de la largeur de la fenecirctre
Maintenant que toutes les informations relatives aux nœuds sont reacuteunies ceux-ci sont peints
convertis en pixels reacuteels et afficheacutes agrave lrsquoeacutecran agrave partir de lrsquoarborescence drsquoaffichage finale La
construction est acheveacutee et la page est enfin visible dans la fenecirctre La figure 113 reacutesume
toutes les eacutetapes preacuteceacutedemment deacutecrites dans cette section
34
Figure 113 ndash Vue globale du flux de reacutecupeacuteration de traitement et drsquoaffichage drsquoune page web
CHAPITRE 2
LES BUGS DrsquoINTERFACE DANS LES APPLICATIONS WEB
Les utilisateurs du web sont souvent confronteacutes lors drsquoune application web sur internet agrave
des problegravemes tregraves ennuyeux appeleacutes laquo bugs drsquointerfaces raquo Dans ce chapitre nous exposons
les diffeacuterents types drsquoapplication web et les bugs qui les affectent en montrant que les bugs
drsquointerface sont largement preacutesents dans un grand nombre de sites et applications web du
monde reacuteel et comment des bugs de ce genre ne sont pas limiteacutes agrave des problegravemes de preacutesentation
simples statiques et qursquoils reacutevegravelent dans de nombreux cas des deacutefauts dans le comportement
de lrsquoapplication
21 TYPES DrsquoAPPLICATIONS WEB
Le web est maintenant peupleacute par un nombre consideacuterable drsquoapplications par conseacutequent le
nombre de personnes affecteacutees par les bugs qursquoelles peuvent contenir est eacutenorme
211 APPLICATIONS STATIQUES
Les sites web traditionnels qursquoon appelle eacutegalement applications laquo Web 10 raquo sont statiques
le contenu drsquoune page ne change pas apregraves le chargement et chaque page de lrsquoapplication peut
36
ecirctre chargeacutee indeacutependamment de toute interaction preacutealable avec le site Le test automatique
drsquoune telle application peut ecirctre effectueacute agrave lrsquoaide drsquoun robot drsquoindexation en chargeant une page
de deacutemarrage puis en explorant automatiquement les diffeacuterentes interactions possibles sur la
page pour obtenir de nouvelles pages agrave visiter Comme chaque page de ces applications est
indeacutependante les bugs ne peuvent se produire que sur une seule page drsquoougrave vient la possibiliteacute
drsquoeacutecrire des oracles de test simples qui analyseraient le contenu de ces pages prises isoleacutement
Le Responsive Web Design est un moyen de concevoir un site web de sorte que son contenu
srsquoadapte automatiquement agrave la reacutesolution drsquoeacutecran du terminal utiliseacute pour le visualiser Une
application RWD est donc un site web adaptatif La notion de web adaptatif repense la
conception ergonomique des sites web puisqursquoil ne srsquoagit plus de concevoir autant de sites que
de terminaux mais de concevoir une seule interface auto-adaptative Ainsi les informations et
les structures techniques ne sont pas dupliqueacutees ce qui geacutenegravere des eacuteconomies drsquoeacutechelle dans
la conception et la maintenance des sites web beacuteneacuteficiant de ce mode de conception
Un site web conccedilu avec un design responsive est donc optimiseacute pour tous les appareils
disponibles sur le marcheacute ordinateurs tablettes smartphones Cette faccedilon de concevoir des
applications web est recommandeacutee en raison de quelques avantages majeurs le deacuteveloppement
et la maintenance seront plus rapides et plus simples (un seul fichier geacuterant tous les affichages)
Un reacutefeacuterencement naturel optimal est utiliseacute (pas de sous-domaines ou de redirections vers des
annuaires mobiles) puisqursquoil nrsquoy a qursquoun seul site regroupant toutes les versions et uniquement
une adresse Web (URL) Plus de deacutetails sur le concept de RWD sont preacutesenteacutes dans la section
223
37
212 APPLICATIONS WEB 20
Les applications web reacutecentes eacutegalement appeleacutees RIA (Rich Internet Applications) utilisent
des scripts cocircteacute client des eacutetats cocircteacute serveur et drsquoautres fonctionnaliteacutes pour offrir une expeacute-
rience utilisateur ameacutelioreacutee Les modifications apporteacutees agrave lrsquoeacutetat de la page peuvent venir agrave la
suite de requecirctes HTTP asynchrones chargeant un nouveau contenu Par conseacutequent ces appli-
cations sont maintenant stateful la mecircme action ou la mecircme requecircte HTTP peut renvoyer des
reacutesultats diffeacuterents en fonction des interactions passeacutees de lrsquoutilisateur Ces applications avec
eacutetat viennent avec de nouveaux types de bugs appeleacutes bugs comportementaux Contrairement
agrave un bug statique qui srsquoeacutevalue en analysant le contenu drsquoune seule page indeacutependamment des
autres un bug comportemental relie les donneacutees et lrsquoordre de consultation de plusieurs pages
de lrsquoapplication
22 TYPES DE BUGS DrsquoINTERFACE
Un bug drsquointerface est un deacutefaut dans un systegraveme web qui a des effets visibles sur le contenu
des pages servi agrave lrsquoutilisateur Nous avons effectueacute une eacutetude sur de plus de 35 applications
web [51] en tous genres Un releveacute des bugs ayant un impact sur la preacutesentation ou le contenu
de lrsquointerface utilisateur a eacuteteacute fait Le tableau 21 donne la liste des sites web et des applications
pour lesquelles au moins un bug de mise en page a eacuteteacute trouveacute Dans ce qui suit nous preacutesentons
briegravevement les bugs deacutecouverts dans cette eacutetude Nous soulignons qursquoaucun des bugs deacutecrits
ici repreacutesente un problegraveme de compatibiliteacute entre les navigateurs Les bugs sont preacutesents
peu importe le navigateur utiliseacute pour afficher la page et ils ne sont pas causeacutes par une
interpreacutetation divergente des normes par deux navigateurs diffeacuterents
38
mdash Academiaedumdash Acermdash Adagio Hotelsmdash Air Canadamdash Air Francemdash AllMusicmdash American Airlinesmdash Boingomdash Canadian
Mathematical Societymdash Customizeorgmdash Digital Ocean
mdash Dropboxmdash EasyChairmdash Elseviermdash Evous Francemdash Facebookmdash IEEEmdash Just for Laughsmdash LinkedInmdash Liveshoutmdash Microsoft TechNetmdash Monoprixmdash Moodle
mdash Naymzmdash NSERCmdash OngerNeigemdash ProQuestmdash Rail Europemdash ResearchGatemdash St-Hubertmdash SpringerOpenmdash TD Canada Trustmdash Time Magazinemdash Uniform Servermdash YouTube
Tableau 21 ndash Sites et applications web pour lesquelles au moins un bug de mise en page a eacuteteacutetrouveacute
221 BUGS STATIQUES
Un premier type de bugs appeleacutes bugs statiques collecteacutes par une eacutetude empirique dans des
sites web et applications reacuteelles On y retrouve des problegravemes tels que le chevauchement des
eacuteleacutements les eacuteleacutements qui srsquoeacutetendent en dehors de leur conteneur ou le bug drsquoeacuteleacutements mal
empileacutes Ce genre de bugs peut ecirctre diviseacute en deux cateacutegories des bugs lieacutes agrave la mise en page
et drsquoautres non lieacutes agrave la mise en page
Bugs de mise en page
Une premiegravere cateacutegorie de bug correspond agrave des perturbations dans la mise en page ou la
preacutesentation de la page elle-mecircme crsquoest-agrave-dire tout reacutesultat inattendu du concepteur de cette
page en termes de contenu ou de proprieacuteteacutes (position taille nombre drsquoeacuteleacutements)
Eacuteleacutements mal aligneacutes Un problegraveme de mise en page banal mais freacutequent est le deacutesaligne-
ment ou le deacutecalage drsquoeacuteleacutements qui doivent ecirctre aligneacutes La figure 21a montre un exemple de
39
(a) LiveShout
(b) LinkedIn
Figure 21 ndash Exemple drsquoeacuteleacutements mal aligneacutes le cadre blanc est horizontalement mal aligneacute(LiveShout) le menu Interests est deacutecaleacute drsquoun pixel par apport aux autres menus (LinkedIn)
ce bug courant mais parfois le deacutesalignement est subtil un eacuteleacutement peut ecirctre deacutecaleacute par un
seul pixel (figure 21b)
Eacuteleacutements qui se chevauchent Le problegraveme de chevauchement des eacuteleacutements qui devraient
ecirctre disjoints dans la preacutesentation drsquoune page est aussi lrsquoun des bugs les plus reacutepandus dans
cette eacutetude les problegravemes de cette nature ont eacuteteacute trouveacutes dans des sites aussi varieacutes que le
Time Magazine Air Canada Moodle et Rail Europe La figure 22 montre un exemple de ce
problegraveme
Dans certains cas le chevauchement se produit par une interruption de la mise en page causeacutee
par le redimensionnement du document principal en dessous des dimensions minimales
comme dans lrsquoexemple de la figure 22a Les conteneurs qui doivent ecirctre cocircte agrave cocircte sont
afficheacutes les uns sur les autres par le moteur de rendu du navigateur Cependant nous avons
eacutegalement constateacute que dans de nombreux cas ce chevauchement est causeacute par le fait que les
40
eacuteleacutements sont absolument positionneacutes dans une page par rapport agrave leurs dimensions lorsqursquoils
contiennent du texte en anglais et lors de lrsquoaffichage du site web dans une autre langue (comme
le franccedilais) il peut arriver que le texte correspondant soit plus long que la version anglaise ce
qui cause le chevauchement de deux eacuteleacutements qui devraient ecirctre disjoints Cela a eacuteteacute observeacute
par exemple sur la figure 22b pour le site web RailEurope
Eacuteleacutements qui srsquoeacutetendent agrave lrsquoexteacuterieur de leurs conteneurs Un autre problegraveme reacutepandu
est la preacutesence drsquoeacuteleacutements qui deacutepassent les limites de leurs conteneurs parent ce qui pro-
voque le chevauchement indeacutesirable avec des eacuteleacutements environnants Ce bug est lrsquoinverse du
preacuteceacutedent plutocirct que drsquoeacutetendre leur conteneur en dehors de ses dimensions nominales cette
fois les eacuteleacutements qui srsquoeacutelargissent agrave lrsquoexteacuterieur de leur conteneur sont simplement coupeacutes de
lrsquoaffichage
La figure 23 montre un exemple de ce dernier type dans la plateforme drsquoenseignement
en ligne Moodle (la figure 23a) des eacuteleacutements de la table sont coupeacutes de leur cocircteacute droit
Lors de lrsquoanalyse du code source de la page il se trouve que quatre autres colonnes doivent
effectivement ecirctre visibles et sont tout simplement inaccessibles puisque ils ont eacuteteacute coupeacute
Cela rend la page plus ou moins inutilisable
Un cas particulier survient lorsque le conteneur soit la fenecirctre du navigateur entiegravere et la fenecirctre
est redimensionneacutee en dessous drsquoun certain seuil Cela peut ecirctre montreacute dans la Figure 23b
le contenu du menu en haut disparaicirct lorsque la fenecirctre est redimensionneacutee Le navigateur
fournit une barre de deacutefilement horizontale mais cela ne fait deacutefiler que la partie infeacuterieure de
la page et pas le menu du haut En conseacutequence certains boutons du menu principal du site ne
peuvent plus ecirctre cliqueacutes
Nous placcedilons aussi dans cette cateacutegorie un bug rencontreacute en utilisant la fenecirctre de messagerie
41
(a) Air Canada
(b) Rail Europe
Figure 22 ndash Exemple drsquoeacuteleacutements qui se chevauchent
42
(a) Moodle
(b) LinkedIn
Figure 23 ndash Le contenu de la page est dissimuleacute de lrsquointerface en raison de son prolongementau-delagrave des dimensions du conteneur parent
43
Figure 24 ndash Le bug Facebook La zone de texte permettant au utilisateur de taper un messageinstantaneacute (agrave gauche) disparaicirct soudainement (agrave droite)
instantaneacutee de Facebook Lorsque la fenecirctre de parent est redimensionneacutee au-dessous drsquoune
largeur speacutecifique la zone de texte permettant agrave un utilisateur drsquoentrer un nouveau message
disparaicirct soudainement de lrsquointerface comme le montre la figure 24 Tous les autres eacuteleacutements
de la fenecirctre restent identiques mais il devient impossible de taper un message
Ton sur ton Ce bug est causeacute par un problegraveme de mise en page ougrave le texte drsquoun eacuteleacutement est
de la mecircme couleur que le fond de la page agrave cet endroit ce qui rend le texte invisible dans
lrsquoaffichage Bien que ce type de comportement peut ecirctre fait expregraves afin de dissimuler un
eacuteleacutement nous croyons qursquoil est tregraves peu probable que cela soit lrsquointention du deacuteveloppeur
puisqursquoil existe des moyens beaucoup plus eacuteleacutegants drsquoatteindre le mecircme reacutesultat en utilisant
les proprieacuteteacutes CSS (en deacutefinissant la proprieacuteteacute drsquoaffichage agrave none ou la proprieacuteteacute opacity agrave
0)
La figure 25 montre un exemple drsquoun tel problegraveme de mise en page sur Academiaedu (figure
25b) Dans la figure 25a le redimensionnement de la fenecirctre du navigateur en dessous drsquoune
largeur speacutecifique a pour effet impreacutevu de pousser les eacuteleacutements du menu supeacuterieur en dehors
de leur conteneur preacutevu (celui qui a un fond bleu) Par conseacutequent ces eacuteleacutements qui ont du
44
(a) ProQuest
(b) Academia
Figure 25 ndash Le bug laquo ton sur ton raquo Les eacuteleacutements de menu sont pousseacutes en dehors de leursconteneur et disparaissent (a) le texte du lien est de la mecircme couleur que le fond reacuteveacuteleacute en leseacutelectionnant avec la souris (b)
texte blanc se placent dans une zone blanche et deviennent invisibles (agrave lrsquoexception drsquoun seul
eacuteleacutement du menu qui a un fond bleu pour une raison inconnue)
Eacuteleacutements mal empileacutes Ce problegraveme se produit quand un eacuteleacutement qui devrait ecirctre rendu
au-dessus drsquoun autre est placeacute en dessous de ce dernier comme le montre la figure 26 Dans
cet exemple le bouton orange en haut de lrsquoimage est censeacute apporter un menu (liste deacuteroulante)
Toutefois le contenu de ce menu apparaissent sous le reste du contenu de la page plutocirct que
sur eux ce qui rend certains de ses eacuteleacutements inutilisables
Lrsquoordre du processus du dessin est deacutefini dans le standard de CSS crsquoest en fait lrsquoordre dans
lequel les eacuteleacutements sont empileacutes dans la pile des contextes Cet ordre affecte le dessin puisque
les piles sont dessineacutees de lrsquoarriegravere vers lrsquoavant Lrsquoordre drsquoempilement drsquoun bloc de rendu est
1 Couleur drsquoarriegravere-plan
2 Image drsquoarriegravere-plan
3 Bordures
45
Figure 26 ndash Un eacuteleacutement est placeacute incorrectement sur un autre
4 Enfants
5 Contour
Ainsi une violation de cet ordre pour une raison inconnue peut causer ce genre de problegraveme
La plupart des problegravemes de cette nature peuvent ecirctre corrigeacutees en attribuant correctement la
proprieacuteteacute z-index de lrsquoeacuteleacutement deacutefectueux
Disposition briseacutee Une rupture majeure dans la structure attendue drsquoune page se produit
quand un certain nombre de ressources importantes telles que les fichiers CSS le code
JavaScript ou les images ne parvient pas agrave ecirctre reacutecupeacutereacute par le navigateur En conseacutequence
de nombreux eacuteleacutements de la page nrsquoont pas leurs deacuteclarations de style et sont positionneacutes et
dimensionneacutes en fonction du style par deacutefaut fourni par le moteur de rendu
La figure 27 montre un cas assez grave drsquoun tel problegraveme ougrave essentiellement toutes les
46
Figure 27 ndash Un exemple drsquointerface briseacutee en raison de lrsquoeacutechec du chargement de certainesressources
deacuteclarations CSS sont manquantes Ceci est causeacute par le fait que le fichier aparthotelcss
nrsquoa pas reacuteussi agrave ecirctre chargeacute pour une raison inconnue Le mecircme problegraveme a eacuteteacute observeacute
momentaneacutement sur le portail web Digital Ocean 28
Sur le site web de Digital Ocean la page de connexion (login) est briseacutee et toutes les autres
pages aussi comme le montre la figure 28a Cela est ducirc au fait que le navigateur a abandonneacute
le chargement de nombreuses ressources dans la page (y compris toutes les images) Il est agrave
noter que malgreacute ces problegravemes le site Web reste fonctionnel La figure 28b repreacutesente une
capture drsquoeacutecran de ce agrave quoi la page devrait ressembler
HTML malformeacute Dans la figure 29 lrsquoHTML malformeacute rend impossible de voir le fond
drsquoeacutecran
47
(a) Digital Ocean sans CSS (b) Digital Ocean avec CSS
Figure 28 ndash Exemple drsquointerface briseacute dans le site Digital Ocean
Figure 29 ndash Exemple drsquoHTML mal formeacute
48
Eacuteleacutements inaccessibles Dans la figure 210a la page affiche correctement une mise en page
laquoeacutecran largeraquo lorsque la fenecirctre du client est assez large Par contre si la largeur de la fenecirctre
est moyenne comme le montre la figure 210b on observe que le bouton de connexion (sign in)
en haut agrave droite srsquoest deacuteplaceacute agrave lrsquoexteacuterieur de la bande supeacuterieure
Incoheacuterence dans les valeurs possibles drsquoun champ de formulaire Dans une page du site
CallingCards le champ du code postal dans le formulaire est preacute-rempli avec 6 caractegraveres de
donneacutees anteacuterieures mais en essayant de modifier le code postal il nrsquoest pas possible de taper
plus de 5 caractegraveres dans ce champ (figure 211)
Figure 211 ndash Incoheacuterence dans le champ de formulaire du site CallingCards
Bugs non lieacutes agrave la mise en page
Plusieurs autres bugs peuvent ecirctre deacutetecteacutes en analysant le contenu et la preacutesentation drsquoune page
Nous verrons dans la suite que certains drsquoentre eux se rapportent mecircme aux comportements
attendu ou aux fonctionnaliteacutes de lrsquoapplication mais peuvent quand mecircme ecirctre deacutetecteacutes par
des regravegles exprimeacutees sur un seul instantaneacute statique de la fenecirctre de lrsquoapplication
49
Mojibake et problegravemes drsquoencodage Plusieurs sites et applications gegraverent mal les donneacutees
de chaicircne en dehors de lrsquoASCII 7-bits Divers encodages de caractegraveres tels que Cp1252 ou
UTF-8 peuvent ecirctre utiliseacutes pour repreacutesenter les caractegraveres laquo accentueacutes raquo ou laquo eacutetrangers raquo
Cependant le mecircme caractegravere peut ecirctre repreacutesenteacute par une valeur binaire diffeacuterente selon le
scheacutema de codage utiliseacute pire certains codages comme UTF-8 peuvent utiliser plusieurs
octets pour repreacutesenter un seul caractegravere
Les problegravemes surgissent quand un systegraveme nrsquointerpregravete pas correctement le contenu drsquoune
chaicircne de caractegraveres croyant qursquoun document est dans un certain encodage alors qursquoil en
utilise reacuteellement un autre Il en reacutesulte souvent un caractegravere incorrect superflu ou pas afficheacute
du tout ce pheacutenomegravene est appeleacute mojibake 1 Par exemple lrsquoencodage UTF-8 du caractegravere
laquo eacute raquo lorsqursquoil est interpreacuteteacute comme une chaicircne Cp1252 produit laquo Atilde ccopy raquo comme le montre la
figure 212a Agrave lrsquoinverse le rendu Cp1252 du caractegravere laquo eacute raquo donne laquo raquo quand il est interpreacuteteacute
comme du UTF-8 (figure 212b)
Bien que ces caractegraveres puissent ecirctre des donneacutees leacutegitimes leur preacutesence dans le contenu drsquoun
eacuteleacutement indique tregraves probablement une manipulation incorrecte de lrsquoencodage des chaicircnes par
lrsquoapplication eacutetudieacutee
Un autre exemple de ce genre de bug est montreacute dans la figure 213
213a donne lrsquoexemple lors de lrsquoinvitation de quelqursquoun de votre carnet drsquoadresses dont le nom
contient un accent Doodle affiche son nom incorrectement et cela donne une adresse invalide
213b montre qursquoen cliquant sur la suggestion on observe que lrsquoajout est fait mais que le nom
est coupeacute en deux parties agrave lrsquoendroit mecircme du caractegravere eacutechappeacute
1 Terme japonais signifiant laquo transformation de caractegravere raquo
50
Problegravemes drsquoeacutechappement Les problegravemes drsquoeacutechappement surviennent lorsque les chaicircnes
avec des caractegraveres speacuteciaux ne parviennent pas agrave ecirctre correctement codeacutees ou deacutecodeacutees entre
deux applications La manifestation la plus freacutequente de ce problegraveme est lors de la lecture et
de lrsquoeacutecriture des chaicircnes de caractegraveres dans une base de donneacutees Certains caractegraveres comme
lrsquoapostrophe neacutecessitent drsquoecirctre doubleacutes afin de ne pas ecirctre confondus avec un seacuteparateur
de chaicircne Les problegravemes surviennent quand un systegraveme ne parvient pas agrave remplacer les
apostrophes doubles par des apostrophes simples lors de lrsquoaffichage des donneacutees dans un
formulaire
Lors de lrsquoenregistrement du contenu du formulaire au retour agrave la base de donneacutees chaque
apostrophe sera de nouveau doubleacutee entraicircnant un quadruplet drsquoapostrophes lors du char-
gement de la page la prochaine fois et ainsi de suite ceci est illustreacute dans la figure 214
Ainsi la recherche de plusieurs apostrophes dans un formulaire peut ecirctre utiliseacutee pour deacutetecter
lrsquoeacutechappement incorrect agrave lrsquointeacuterieur du code source
Un problegraveme de nature similaire se produit lorsque des caractegraveres speacuteciaux dans le code source
de la page (tels que HTML ou JavaScript) sont eacutechappeacutes incorrectement Par exemple une
seacutequence comme ltpgt peut ecirctre transformeacutee en ampltpampgt reacutesultant en la chaicircne litteacuterale ltpgt
afficheacutee comme du texte plutocirct que drsquoecirctre interpreacuteteacutee comme une balise de paragraphe
Nous avons deacutecouvert des exemples de ce problegraveme sur EasyChair qui affiche du code HTML
brut ou sur YouTube qui affiche du code JavaScript comme on peut le voir agrave la figure 215
222 BUGS COMPORTEMENTAUX
Drsquoautres bugs peuvent ecirctre appeleacutes laquo comportementaux raquo ils reacutevegravelent un problegraveme dans la
fonctionnaliteacute du site ou alors ils peuvent ecirctre exprimeacutes uniquement en termes drsquoune seacutequence
51
de plusieurs pages dans lrsquoordre
Contrairement agrave une application web traditionnelle une application Internet riche (RIA) utilise
les technologies Web modernes eacutemergentes telles que AJAX [47] Flash et Silverlight Par
conseacutequent de nouveaux problegravemes de tests web sont ajouteacutes aux problegravemes existants Une
caracteacuteristique importante de ces applications est qursquoelles sont stateful leur code peut stocker
des donneacutees persistantes sur le client (en utilisant WebStorage les proprieacuteteacutes CSS les variables
JavaScript et les objets) et sur le serveur (agrave lrsquoaide de cookies de stockage de session et de bases
de donneacutees) De plus lrsquoeacutetat de lrsquoapplication est disperseacute sur un certain nombre drsquoeacuteleacutements
et ne peut pas simplement ecirctre assimileacute agrave lrsquoURL de la page en cours (afficheacutee dans la barre
drsquoadresse du navigateur) Des fonctionnaliteacutes telles que la communication asynchrone la
manipulation DOM cocircteacute client et les gestionnaires drsquoeacuteveacutenements permettent de changer lrsquoeacutetat
de lrsquoapplication sans un rechargement complet de la page et sans modifier son URL [35]
Une conseacutequence positive de ces fonctionnaliteacutes est qursquoune telle application peut fournir
une expeacuterience utilisateur plus riche (drsquoougrave son nom) sans les cookies et JavaScript les
opeacuterations simples telles que les manipulations de panier les sessions utilisateur (connexion
deacuteconnexion) et autres fonctionnaliteacutes ne seraient pas possibles Cependant la preacutesence drsquoun
eacutetat dans lrsquoapplication introduit eacutegalement la possibiliteacute drsquoincoheacuterences dans lrsquoeacutetat afficheacute
drsquoune page agrave une autre Ces problegravemes sont appeleacutes bugs comportementaux car ils sont la
conseacutequence de lrsquointeraction de plusieurs pages entre elles et dans un certain ordre
Eacuteleacutements mobiles Certains eacuteleacutements peuvent changer leur position involontairement lors
de lrsquointeraction avec un utilisateur La figure 216 montre un exemple drsquoun tel problegraveme sur
le site web du CRSNG ougrave eacutecrire un texte dans une zone de texte vide auparavant reacuteduit sa
largeur de 4 pixels et deacutecale leacutegegraverement les zones de texte restantes vers la gauche
52
Ce problegraveme srsquoest aveacutereacute plus reacutepandu que nous nous attendions les variations comprennent
certains styles drsquoeacuteleacutements (la bordure ou la taille) qui ont eacuteteacute changeacutes sans aucune raison
apparente
Le dysfonctionnement des boutons Beaucoup drsquoapplications montrent agrave lrsquoutilisateur des
eacuteleacutements qui se comportent comme une fenecirctre pop-up (une fenecirctre secondaire qui srsquoaffiche
sans avoir eacuteteacute solliciteacutee par lrsquoutilisateur devant la fenecirctre de navigation principale lorsqursquoon
navigue sur Internet) Ce moyen est communeacutement utiliseacute pour afficher des messages publici-
taires ou un avertissement comme la reacuteponse agrave un message priveacute dans un forum
Toutefois dans un certain nombre de cas les boutons dans ces fenecirctres sont inopeacuterants cliquer
sur eux un certain nombre de fois ne produit aucun effet Ce problegraveme a eacuteteacute teacutemoin dans des
sites aussi varieacutes qursquoAmerican Airlines Dropbox et BitBucket Dans certains cas lrsquoutilisateur
est effectivement coinceacute dans le pop-up ou la page qui contient le bouton et ne peut pas sortir
sans forcer un rechargement complet du document
Confusion dans le statut de connexion Deux sites web dans notre eacutetude preacutesentent des
incoheacuterences dans lrsquoeacutetat drsquoune page meacutelangeant des eacuteleacutements de la fenecirctre drsquoune page
normalement reacuteserveacutes aux utilisateurs enregistreacutes (tels que les menus personnaliseacutes) ainsi
que des eacuteleacutements reacuteserveacutes aux utilisateurs qui sont deacuteconnecteacutes (comme un formulaire de
connexion)
Nous avons assisteacute agrave un tel comportement dans le site web de lrsquoIEEE pour le formulaire de
demande de membre Senior Apregraves lrsquoexpiration drsquoun certain deacutelai lrsquoutilisateur doit neacutecessaire-
ment se connecter agrave nouveau toutefois la page preacutesenteacutee agrave lrsquoutilisateur est celle repreacutesenteacutee
sur la figure 217 On remarque que le nom de lrsquoutilisateur est toujours preacutesent en haut agrave droite
de la page mecircme srsquoil est censeacute ecirctre deacuteconnecteacute (les identifiants de connexion sont demandeacutes)
53
Cliquer sur ce nom apporte le menu deacuteroulant qui est normalement accessible uniquement
lorsque lrsquoutilisateur est connecteacute Le mecircme problegraveme a eacuteteacute trouveacute sur le site de reacuteservation
drsquoAir Canada
Incoheacuterences dans le reacutesultat de la recherche Un autre problegraveme de comportement est
celui de lrsquoincompatibiliteacute entre une requecircte faite par un utilisateur et les reacutesultats afficheacutes par
lrsquoapplication en reacuteponse agrave cette requecircte
La figure 218 montre un exemple de ce problegraveme sur le site web des eacutepiceries Monoprix
Lors de la recherche des magasins agrave proximiteacute un utilisateur peut taper un code postal dans
un champ de formulaire puis cliquer sur laquo Valider raquo Cependant les reacutesultats de recherche
afficheacutes dans la page suivante ne montrent presque jamais les magasins avec le code postal
souhaiteacute
Comme avec tous les bugs dans la preacutesente cateacutegorie cela peut ecirctre observeacute seulement par
la correacutelation de plusieurs eacuteleacutements dans deux eacutetats diffeacuterents de la page le texte dans la
zone de texte un clic sur un bouton speacutecifique suivi par le texte dans la liste des eacuteleacutements qui
apparaissent dans la page reacutesultante
223 BUGS DE RESPONSIVE WEB DESIGN
Il y a quelques anneacutees les deacuteveloppeurs Web pouvaient faire des hypothegraveses sur la taille de
lrsquoeacutecran des appareils des utilisateurs Les ordinateurs de bureau ont eacuteteacute conccedilus pour acceacuteder
aux sites web en assumant une taille de fenecirctre minimale il eacutetait donc laquo normal raquo que pour
une largeur de fenecirctre plus petite le site semble briseacute Il srsquoagissait drsquoune approche valide
dans une eacutepoque ougrave les tablettes et les smartphones eacutetaient inouiumls (pas agrave la porteacutee de tout le
monde peu utiliseacutes) Aujourdrsquohui une autre approche est neacutecessaire pour srsquoassurer que les
54
sites fonctionnent correctement dans une gamme de diffeacuterents appareils et tailles de viewport
(le viewport deacutesigne la partie drsquoune page web qui est visible dans la fenecirctre du navigateur
drsquoun ordinateur smartphone tablette ou drsquoun autre dispositif Le viewport est variable et
mouvant en fonction de la taille de la fenecirctre du navigateur et en fonction de lrsquoutilisation des
fonctions de deacutefilement ou scrolling (souris ou ascenseur))[6]
Par conseacutequent la conception des sites doit deacutesormais tenir compte de plusieurs cateacutegories
drsquoappareil selon la taille de lrsquoeacutecran Cependant le changement rapide des proprieacuteteacutes de
lrsquoappareil nrsquoa pas pu ecirctre suivi par les deacuteveloppeurs web Pour remeacutedier agrave ce problegraveme ces
derniers ont eu recours aux mecircmes hypothegraveses en fonction de la demande du serveur La
demande drsquoune ressource par un navigateur est suivie par une chaicircne drsquoagent utilisateur (user
agent string) geacuteneacuteralement envoyeacutee avec la demande pour identifier le type de navigateur
utiliseacute La lecture de cette derniegravere du cocircteacute du serveur entraicircne la diffusion de deux versions
une version mobile conccedilue pour une largeur maximale si lrsquoutilisateur envoyait des chaicircnes
drsquoagents drsquoutilisateurs mobiles et une version bureau conccedilue pour une largeur minimale
Les deacuteveloppeurs ont pu suite agrave lrsquointroduction des media queries de CSS eacutecrire des deacutecla-
rations de style conditionnelles par des proprieacuteteacutes multimeacutedia telle que la taille de la fenecirctre
(voir figure 219) Lrsquoadaptation drsquoun site pour un support speacutecifique ou une taille de fenecirctre au
moment de lrsquoexeacutecution est donc devenue donc possible Ce concept qui sert agrave faire en sorte
qursquoun seul site reacuteponde agrave diffeacuterentes proprieacuteteacutes multimeacutedias (principalement la taille de la
fenecirctre) au moment de lrsquoexeacutecution afin drsquoameacuteliorer lrsquoexpeacuterience de lrsquoutilisateur est appeleacute
Responsive Web Design [59]
Une eacutetude reacutecente meneacutee par Walsh et al identifie cinq types de bugs survenant plus
particuliegraverement dans les sites web RWD [73] Pour la plupart il srsquoagit de bugs deacutejagrave observeacutes
dans drsquoautres sites au cours de notre propre eacutetude
55
Collision drsquoeacuteleacutements Crsquoest un bug dans lequel les eacuteleacutements se chevauchent en raison de la
modification de la fenecirctre (viewport) Ce bug peut eacutegalement influencer le bon fonctionnement
des sites web dans le cas ougrave certains eacuteleacutements fonctionnels dans les pages sont masqueacutes
Deacutepassement drsquoeacuteleacutements Les eacuteleacutements ont besoin de se redimensionner ils manquent
drsquoespace mais ils doivent aussi ecirctre assez grands pour contenir tous leurs enfants Cela arrive
dans le cas ougrave un eacuteleacutement deacutepasse agrave lrsquoexteacuterieur de son parent en raison drsquoun manque drsquoespace
Lrsquoeacuteleacutement peut alors ecirctre inaccessible masqueacute par un autre eacuteleacutement ou par-dessus drsquoautres
eacuteleacutements
Ce bug sur le site httpswwwthelilycom On peut le voir dans la figure 220 ougrave le div
avec les boutons du menu se termine en dehors de la barre de menu et hors de vue
Deacutepassement du viewport Ce bug se produit lorsque les eacuteleacutements sont pousseacutes hors de
la fenecirctre (viewport) et deviennent inaccessibles ou cacheacutes Sur le site web httpswww
slaveryfootprintorg ce bug a eacuteteacute trouveacute La figure 221 montre comment les bugs non
observables peuvent creacuteer des problegravemes agrave des largeurs infeacuterieures Ici le div du milieu est un
peu en dehors de la fenecirctre mais il ne montre aucun problegraveme observable Cependant crsquoest agrave
440px que nous pouvons voir clairement le contenu deacuteborder de la fenecirctre
Disposition agrave petite eacutechelle En fonction de lrsquoimpleacutementation certaines mises en page
peuvent ecirctre afficheacutees correctement que dans un petit intervalle de largeur Par exemple un
affichage pourrait ecirctre seulement correct entre 320 et 325 pixels de largeur
Couverture drsquoeacuteleacutements Ce bug survient lorsqursquoun conteneur nrsquoest pas assez large pour
contenir tous les eacuteleacutements et qursquoun ou plusieurs eacuteleacutements sont pousseacutes sur une ligne suppleacute-
56
mentaire
Un exemple drsquoeacuteleacutement enveloppeacute peut ecirctre vu dans la figure 222 On pourrait faire valoir que
ce nrsquoest pas un bug cependant agrave des largeurs infeacuterieures la liste est de nouveau aligneacutee en
haut Cela montre qursquoayant cette liste aligneacutee en haut est la disposition deacutesireacutee
Nous donnerons des exemples sur la deacutetection de ce genre de bugs dans la section 542
57
(a) Fenecirctre large
(b) Fenecirctre moyenne
Figure 210 ndash Exemple drsquoeacuteleacutements inaccessibles
58
(a) SpringerOpen
(b) Naymz
Figure 212 ndash Exemple de mojibake (a) donneacutees UTF-8 afficheacutees comme Cp1252 (b) donneacuteesCp1252 afficheacutees comme UTF-8
59
(a) Mojibake adresse invalide
(b) Mojibake nom coupeacute en deux partie
Figure 213 ndash Exemples de Mojibake dans Doodle
60
Figure 214 ndash Des donneacutees extraites de la base de donneacutees sont incorrectement eacutechappeacutees dansIEEE PDF eXpress on constate la preacutesence de plusieurs apostrophes
Figure 215 ndash Sur cette page YouTube du code JavaScript est afficheacute au lieu drsquoecirctre interpreacuteteacute
Figure 216 ndash Eacuteleacutements mobiles la position et la bordure de la zone du texte changent lors de lasaisie du texte (NSERC)
61
Figure 217 ndash Confusion connexiondeacuteconnexion dans une page web le contenu pour un utilisa-teur connecteacute (en haut de la page a droite) coexiste avec le formulaire de connexion reacuteserveacute auxutilisateurs qui ne sont pas en principe connecteacutes
Figure 218 ndash Incoheacuterences dans le reacutesultat de la recherche
media (max-width 420px) body
background-color white
media (min-width 421px)
body background-color blue
Figure 219 ndash Code CSS avec des conditions sur la largeur de lrsquoappareil Il srsquoagit drsquoun exemplede media queries
62
(a) Tous les boutons sont correcte-ment dans la barre de menu
(b) Le bouton laquo About raquo en sur-brillance fait saillie en dehors dela barre de menu son parent
Figure 220 ndash Le bug de deacutepassement drsquoeacuteleacutements sur le site httpswwwthelilycom
(a) Le div est en surbrillance mais il nrsquoy a pas debug observable
(b) En 440px nous voyons lemecircme div avec un bug obser-vable ougrave le texte deacuteborde en de-hors de la fenecirctre
Figure 221 ndash Le bug de deacutepassement du viewport sur le site httpswwwslaveryfootprintorg
(a) La liste est en haut (top-aligned) (b) Agrave une largeur infeacuterieure lrsquoeacuteleacutementlaquo CGV raquo est pousseacute sur une ligne suppleacutemen-taire
Figure 222 ndash Le bug de couverture drsquoeacuteleacutements sur le site httpswwwanthedesignfr
CHAPITRE 3
EacuteTAT DE LrsquoART
Il existe un certain nombre drsquooutils servant agrave tester les applications web Dans ce chapitre nous
classons les approches existantes en quatre grandes familles qursquoon nomme successivement
outils de tests approches visuelles approches deacuteclaratives et outils RWD Nous allons les
exposer en donnant un peu plus de deacutetails sur quelques outils relatifs agrave chaque famille
drsquoapproches Enfin nous citons leurs points faibles en montrant leurs limites dans certains cas
31 OUTILS DE TEST
La deacutetection de bugs drsquointerface peut drsquoabord ecirctre abordeacutee comme un problegraveme de test logiciel
classique Sous cet angle il se veut une geacuteneacuteralisation des fonctionnaliteacutes offertes par des
logiciels drsquoanalyse de sites web comme Google Analytics 1 ou Piwik 2 Ces outils suivent les
requecirctes HTTP et fournissent un tableau de bord pour analyser des donneacutees de base pays
drsquoorigine dureacutee drsquoune session etc Cependant ces outils ne gegraverent geacuteneacuteralement pas Ajax ne
peuvent pas ecirctre utiliseacutes comme outils de test (ils nrsquoeacutevaluent pas les conditions sur le contenu
de la page par exemple) et ne signalent rien sur le contenu de la page sur les actions de
1 httpwwwgooglecomanalytics2 httpwwwpiwikorg
64
WebDriver driver = new FirefoxDriver()driverget(http)ListltWebElementgt items = driverfindElements(BycssSelector(li))int left = -1for (WebElement item items) if (left == -1) left = itemgetLocation()getX()continue
assert(left = itemgetLocation()getX())
Figure 31 ndash Exemple de code pour Selenium WebDriver
lrsquoutilisateur ou les requecirctes Ajax
Les logiciels de test en ligne tels que Capybara Selenium WebDriver Watij ou Sahi sont plus
proches de nos objectifs Ces outils fournissent diffeacuterents langages pour deacutecrire les tests et
eacutecrire des assertions sur lrsquoapplication Les scripts WebDriver sont eacutecrits en Java Capybara
a sa propre API 3 dans le langage Ruby Watij utilise WebSpec 4 qui est une API deacutefinie
par-dessus Java (35 donne un exemple de test webspec-watij) et Sahi utilise SahiScript
une extension de JavaScript 5 Tous ces langages sont impeacuteratifs (crsquoest-agrave-dire proceacuteduraux) et
visent agrave piloter une application en effectuant des actions La partie test se reacuteduit agrave lrsquoinsertion
drsquoinstructions similaires agrave assert dans le code du script A titre drsquoexemple la figure 31
donne un extrait de code Java pour Selenium WebDriver pour veacuterifier que tous les eacuteleacutements
satisfaisant un seacutelecteur CSS sont agrave gauche
3 httpmakandracardscommakandra1422-capybara-the-missing-api4 httpwatijcomwebspec-api5 httpsahicoin
65
311 CAPYBARA
Capybara est un framework drsquoautomatisation Web utiliseacute pour creacuteer des tests fonctionnels qui
simulent lrsquointeraction des utilisateurs agrave une application Il constitue une bibliothegraveque conccedilue
pour ecirctre utiliseacutee sur un pilote Web sous-jacent (underlying web driver) tels que selenium-web
driver rack test driver ou capybara-webkit Il fournit un DSL (Domain Specific Language)
servant agrave deacutecrire les actions exeacutecuteacutees par ces pilotes Web [30] Une fois la page est chargeacutee
via le DSL et le pilote Web sous-jacent Capybara essayera de localiser lrsquoeacuteleacutement pertinent
dans le DOM (Document Object Model) et exeacutecutera une action du genre clics de boutons
de liens etc Son DSL deacuteployeacute pour exprimer les actions agrave exeacutecuter est tregraves intuitif la figure
32 montre quelques unes de ses commandes de base Dans le but de trouver un eacuteleacutement[30]
Capybara par lrsquointermeacutediaire du DSL cherchera dans le DOM les attributs suivants
mdash Champ de texte (fill_in) id name eacuteleacutement drsquoeacutetiquette associeacute (label)
mdash Cliquez sur un lienbouton (click_link click_button) id titre texte dans la
balise valeur
mdash Case agrave cocherbouton radioliste deacuteroulante (check uncheck choose select) id nom
eacuteleacutement drsquoeacutetiquette associeacute (label)
mdash Teacuteleacutecharger le fichier (attach_file) id nom
312 WATIJ
Watij ou Web Application Testing en Java est un projet de test impleacutementeacute en Java destineacute agrave
automatiser les tests fonctionnels des applications Web au-dessus de IE (Internet Explorer) Il
est baseacute sur la conception de Watir [33] et possegravede une capaciteacute de recherche drsquoeacuteleacutements lui
permettant de trouver drsquoacceacuteder et de controcircler facilement nrsquoimporte quel eacuteleacutement HTML agrave
66
visit(rsquopage_urlrsquo) navigate to pageclick_link(rsquoid_of_linkrsquo) click link by idclick_link(rsquolink_textrsquo) click link by link textclick_button(rsquobutton_namersquo) fill text fieldfill_in(rsquoFirst Namersquo with =gt rsquoJohnrsquo) choose radio buttonchoose(rsquoradio_buttonrsquo) choose radio buttoncheck(rsquocheckboxrsquo) check in checkboxuncheck(rsquocheckboxrsquo) uncheck in checkboxselect(rsquooptionrsquo from=gtrsquoselect_boxrsquo) select from dropdownattach_file(rsquoimagersquo rsquopath_to_imagersquo) upload file
Figure 32 ndash Commandes de base de Capybara [30]
travers le DOM en mobilisant lrsquointerface COM Il prend en charge drsquoautre part les expressions
XPath pour trouver les eacuteleacutements HTML sur une page et gegravere les pop-up (fenecirctres contextuel
du navigateur) en les interceptant et les rendant disponibles pour lrsquointeraction Watij peut
deacutetecter la fin du chargement drsquoune page en cours de chargement Watij dispose drsquoun ensemble
relativement riche drsquoAPI pour lrsquoeacutecriture de scripts de simulation La connexion agrave un site Web
exige agrave chaque fois des informations tel que le nom de lrsquoutilisateur et le mot de passe (page
de connexion (login) de Yahoo figure 34) Les tacircches manuelles demandeacutees dans ce cas agrave
lrsquoutilisateur sont les suivantes
1 Afficher une fenecirctre de navigateur
2 Mettre lrsquoURL correcte pour ouvrir cette page
3 Attendre que la page se charge et se stabilise
4 Taper le nom drsquoutilisateur dans le champ ID
5 Taper le mot de passe
6 Cliquer sur le bouton Connexion
Le code approprieacute pour automatiser les tests fonctionnels de ces eacutetapes en utilisant Watij est
donneacute dans la figure 33
67
IE ie = new IE()iestart(wwwmailyahoocom)ietextField(SymbolFactoryidusername)set(ouss)ietextField(SymbolFactoryidpasswd)set(ber2017)iebutton(SymbolFactoryidsave)click()
Figure 33 ndash Exemple drsquoutilisation de Watij [71]
Figure 34 ndash Page de connexion (login) de Yahoo [71]
68
public class WebspecDemoTest
WebSpec spec
Beforepublic void setup()spec = new WebSpec()safari()
Afterpublic void tearDown()specbrowser()close()
Testpublic void testSearchWikipedia() throws Exception specopen(httpdewikipediaorgwikiWikipediaHauptseite)
specfindinput()withid(searchInput)setvalue(Softwaretest)specfindbutton()withid(searchButton)click()assertEquals(Softwaretest specfindh1()withid(firstHeading)getinnerText())
specfinda()withinnerText(Quality)click()assertEquals(Softwarequalitat specfindh1()withid(firstHeading)getinnerText())
Testpublic void testOpenGoogle() throws Exception specopen(httpwwwgooglede)specjquery(input[name=rsquoqrsquo])setvalue(Testing)specfindinput()withname(btnG)click()assertTrue(specfinddiv()withid(res)finda()getinnerText()
startsWith(Softwaretesting))
Figure 35 ndash Exemple simple drsquoun test JUnit Watij WebSpec [7]
69
313 SAHI
Sahi est un outil open source drsquoautomatisation et de test drsquoapplications web En tant qursquooutil
drsquoautomatisation Sahi offre la possibiliteacute drsquoenregistrer et de lire des scripts Il prend en charge
Java et JavaScript Mecircme si SahiScript ressemble agrave JavaScript il nrsquoest pas exeacutecuteacute comme le
JavaScript normal dans le navigateur Lrsquoideacutee de base du fonctionnement de Sahi est deacutecrite
ci-dessous
les parties centrales de Sahi montreacutes dans la figure 37 incluent le serveur proxy Sahi et
le moteur JavaScript Les reacuteponses HTML qui transitent par le proxy sont modifieacutees de
telle sorte que JavaScript soit injecteacute au deacutebut et agrave la fin de la reacuteponse Cela permettra au
navigateur drsquoenregistrer et de lire les scripts et de communiquer avec le proxy en cas de
besoin En plus de la gestion des demandes de pages du navigateur Sahi gegravere eacutegalement les
commandes personnaliseacutees lieacutees agrave lrsquoenregistrement agrave la lecture etc envoyeacutees par celui-ci
Les fonctionnaliteacutes propres de Sahi font de lui un bon support des fichiers de base de donneacutees
supportant JavaScript AJAX ainsi que les API simples Outre ses fonctionnaliteacutes normales
agrave lrsquoeacutegard de la prise en charge de laquo ant raquo(lrsquooutil logiciel) Du fait que ses API ne deacutependent
pas beaucoup de la structure HTML le controcircleur Sahi (IDE) peut ecirctre utiliseacute dans diffeacuterents
navigateurs Sahi qui nrsquoutilise pas XPath renferme des API tels que _ near _in etc
lrsquoaidant agrave trouver un eacuteleacutement par rapport agrave un autre laquo SahiScript raquo est fondeacute sur JavaScript
Il est analyseacute par Sahi et exeacutecuteacute par le moteur JavaScript rhino La figure 36 illustre un
exemple de constructions (exemple drsquoeacutecriture de conditions) dans Sahi Elles sont identiques agrave
JavaScript hormis le $ obligatoire utiliseacute dans les variables
De plus tous les outils mentionneacutes ci-dessus (agrave lrsquoexception de Sahi) neacutecessitent un plugin
speacutecifique au navigateur pour fonctionner et ne supportent donc qursquoune poigneacutee de navigateurs
en geacuteneacuteral les laquo Big Five raquo (Firefox Safari IE Opera et Chrome) Cependant la part de marcheacute
70
Comparer des valeurs normalesif ($username == PartnerUser)
_click(_link(Partner Login))
Comparer avec les attributs du navigateur exposeacutes par Sahiif (_getText(_div(page_type)) == Partner Page)
_click(_link(Partner Login))
Comparaison avec les attributs du navigateur NON exposeacutes par les fonctions inteacutegreacutees de Sahi en utilisant _fetchif (_fetch(_link(0)href) == httpsahicoin)
_click(_link(Partner Login))
Comparaison avec les attributs du navigateur NON exposeacutes par les fonctions inteacutegreacutees de Sahi en utilisant _conditionif (_condition(_link(0)href == httpsahicoin))
_click(_link(Partner Login))
Figure 36 ndash Exemple de Sahi script [18]
Figure 37 ndash Architecture de Sahi (figure tireacutee de [21])
71
des navigateurs autres que ceux-ci eacutequivaut agrave 20 et srsquoeacutelegraveve agrave 63 pour les appareils autres
que les ordinateurs de bureau (tablettes consoles et mobiles) 6 En dehors de Sahi ces outils
de test nrsquoatteignent pas plus des trois quarts du marcheacute et pour certains seulement 25 pour
les appareils autres que les ordinateurs de bureau Par conseacutequent lrsquoaffirmation selon laquelle
laquo la plupart des utilisateurs raquo sont pris en charge par eux est agrave peu pregraves non fondeacutee
32 APPROCHE VISUELLE
Pour deacuteceler les deacutefauts dans la mise en page lrsquooutil principal deacuteployeacute par ce genre de
techniques est geacuteneacuteralement la vision par ordinateur Ces derniegraveres consistent entre autres en
la deacutelimitation des bordures des eacuteleacutements par la deacutetection des contours et en la deacutecouverte des
changements par le calcul de la diffeacuterence entre deux captures drsquoeacutecran dont les couleurs du
texte des arriegravere-plans seront compareacutees pour repeacuterer le texte illisible Au lieu drsquoagir sur des
informations speacutecifiques agrave la mise en page telles que la taille et la position des eacuteleacutements ces
techniques sont baseacutees sur la comparaison des captures drsquoeacutecran pixel par pixel Dans ce cas
les erreurs sous la forme drsquoune capture drsquoeacutecran sont signaleacutees et clairement marqueacutees
321 WEBSEE
Certains travaux ont eacutegalement eacuteteacute reacutealiseacutes sur lrsquoutilisation des techniques drsquoanalyse drsquoimage
pour identifier les problegravemes de mise en page [69] WebSee [58] est en particulier un outil
impleacutementeacute en Java qui utilise plusieurs bibliothegraveques tierces pour impleacutementer certains des
algorithmes speacutecialiseacutes Il applique des techniques du domaine de la vision par ordinateur pour
analyser la repreacutesentation visuelle des pages Web pour deacutetecter automatiquement et localiser
les eacutechecs de preacutesentation WebSee identifie les eacutechecs de preacutesentation puis deacutetermine les
6 En date de feacutevrier 2014 tel que reacutecupeacutereacute sur StatCounter httpgsstatcountercom
72
eacuteleacutements dans la source HTML de la page qui pourraient ecirctre responsables des eacutechecs observeacutes
en comparant la repreacutesentation visuelle de la page Web rendue sous test et son apparence
drsquoorigine (oracle)
A cette fin WebSee prend en entreacutee le code HTMLCSS de la page agrave analyser et un oracle
(une image) du rendu attendu de la page Un ensemble de diffeacuterences entre la page rendue
et lrsquoimage de reacutefeacuterence est calculeacute et ces diffeacuterences sont ensuite regroupeacutees en groupes
susceptibles de repreacutesenter diffeacuterents deacutefauts sous-jacents dans la page Une deuxiegraveme phase
de traitement tente drsquoidentifier les eacuteleacutements HTML correspondant aux pixels de diffeacuterence
qui sont ensuite ordonneacutes par une meacutetrique de prioriteacute et envoyeacutes agrave lrsquoutilisateur La figure
38 montre les diffeacuterentes phases de lrsquoapproche La premiegravere entreacutee est la page web (P) qui
devrait ecirctre analyseacute pour deacuteterminer les deacutefaillances de preacutesentation La forme de P est une
URL qui pointe vers soit un emplacement sur le reacuteseau ou drsquoun systegraveme de fichiers ougrave tous les
fichiers HTML CSS JavaScript et les fichiers meacutedias de P sont accessibles
La deuxiegraveme entreacutee est lrsquooracle (O) qui speacutecifie les proprieacuteteacutes drsquoexactitude visuels de P La
forme de O est une image qui peut ecirctre soit une maquette ou une capture drsquoeacutecran drsquoune version
correcte de P
La troisiegraveme entreacutee est un ensemble de reacutegions speacuteciales (SR) deacutefinissant des zones de O qui
contiendront du texte dynamique des annonces etc qui deacutefinissent les reacutegions dynamiques
communes dans les applications web modernes Les reacutegions speacuteciales fournissent un meacuteca-
nisme pour permettre aux deacuteveloppeurs de speacutecifier de telles reacutegions qui devraient ecirctre traiteacutees
speacutecialement
Lrsquoapproche comporte trois phases La premiegravere phase est la phase de la deacutetection elle compare
les repreacutesentations visuelles de P et O pour deacutetecter un ensemble de diffeacuterences soit dans
les reacutegions speacuteciales ou dans les autres parties de la page web Lrsquoensemble des diffeacuterences
73
identifieacute est regroupeacutees ensuite en groupes qui sont susceptibles de repreacutesenter des deacutefauts
sous-jacents dans P Pour ce faire WebSee exploite Selenium WebDriver pour prendre des
captures drsquoeacutecran et il exploite la bibliothegraveque laquo pdiff raquo qui est une bibliothegraveque perceptuelle
de diffeacuterenciation drsquoimage pour comparer les images et calculer les diffeacuterences Lrsquoalgorithme
de regroupement (clustering) DBSCAN (Density Based Spatial Clustering of Applications
with Noise) est utiliseacute pour regrouper les pixels de diffeacuterences (dbscan est un algorithme
impleacutementeacute dans la bibliothegraveque Apache Commons Math3)
La deuxiegraveme phase est la phase de localisation elle analyse une carte de rendu de P pour
identifier lrsquoensemble des eacuteleacutements HTML qui deacutefinissent les pixels de chaque ensemble
de diffeacuterences en cluster Pour cette eacutetape WebSee tire parti de la mise en œuvre de la
bibliothegraveque R-tree [50] et Selenium WebDriver pour extraire des informations de deacutelimitation
de rectangles
Enfin la troisiegraveme phase est la phase du traitement de lrsquoensemble du reacutesultat elle priorise
lrsquoensemble des eacuteleacutements identifieacutes pour chaque grappe et fournit cela comme une sortie pour
le deacuteveloppeur 39 La capaciteacute de recherche de sous-image pour lrsquoheuristique en cascade est
fournie par OpenCV
322 FLB (FIGHTING LAYOUT BUGS)
Une combinaison de lrsquoinjection CSS avec des techniques de diffeacuterentiation drsquoimage est
preacutesenteacutee par Tamm dans une preacutesentation Tech Talk de Google [69] en tant que moyen pour
deacutetecter quelle partie drsquoun site web est du texte et si elle chevauche drsquoautres eacuteleacutements frontiegraveres
Lrsquoapproche colore tout le texte sur une page Web en noir puis en blanc tout en prenant des
captures drsquoeacutecran entre les deux comme le montre la figure 310 Les parties de lrsquoimage qui sont
du texte sont localiseacutees en diffeacuterant les deux images Les lignes verticales et horizontales des
74
Figure 38 ndash Le fonctionnement geacuteneacuteral de lrsquooutil drsquoanalyse WebSee
Figure 39 ndash Outputs de WebSee eacuteleacutements HTML deacutefectueux
75
eacuteleacutements dans lrsquoimage reacutesultante sont deacutecouvertes via des techniques baseacutees sur le traitement
drsquoimage Une comparaison de ces lignes avec les eacuteleacutements de texte deacutecouverts agrave lrsquoeacutetape
preacuteceacutedente permet de deacuteterminer les cas ougrave le texte chevauche les bordures des eacuteleacutements La
mecircme technique permet aussi de deacuteterminer si les eacuteleacutements de texte ont le contraste approprieacute
agrave leur arriegravere-plan
Cependant cette technique ne fonctionne que pour le texte et drsquoautres eacuteleacutements qui peuvent
facilement ecirctre identifieacutes en utilisant des techniques baseacutees sur le traitement drsquoimage pour la
reconnaissance drsquoobjets Le champ drsquoapplication est petit car il se concentre exclusivement
sur le texte pour le chevauchement des eacuteleacutements
323 PHANTOMCSS
PhantomCSS [20] est un framework de test drsquointerface graphique open source qui possegravede la
capaciteacute de situer les changements drsquoune iteacuteration agrave une autre par des algorithmes diffeacuterant sur
deux images Drsquoautre part il permet drsquoexclure certaines parties de lrsquointerface graphique du
test Les pages Web susceptibles drsquoafficher des donneacutees non controcircleacutees par le deacuteveloppeur et
des eacuteleacutements tels que des annonces Web des donneacutees utilisateur des banniegraveres animeacutees des
images et du texte trouvent dans ces caracteacuteristiques un instrument beacuteneacutefique Le deacuteveloppeur
dans ce cas est obligeacute de speacutecifier manuellement les parties de lrsquointerface graphique non
concerneacutees par les tests en nommant lrsquoeacuteleacutement en question ou le speacutecifiant ses coordonneacutees x
et y
76
Figure 310 ndash Exemple de traitement drsquoimage avec FLB (figure tireacutee de [63])
77
324 SIKULI
Un autre framework drsquoautomatisation est Sikuli [39] qui identifie et manipule les controcircles
de lrsquointerface graphique dans une page web en utilisant la recherche par image (sub-image
searching) Les captures drsquoeacutecran constituent la base de cette approche visuelle pour la recherche
et lrsquoautomatisation des interfaces utilisateurs Elle permet aux utilisateurs
mdash de prendre une capture drsquoeacutecran drsquoun eacuteleacutement de lrsquointerface graphique (comme un bouton
de la barre drsquooutils une icocircne ou une boicircte de dialogue)
mdash drsquointerroger un systegraveme drsquoaide en faisant appel agrave la capture drsquoeacutecran au lieu du nom de
lrsquoeacuteleacutement
mdash de fournir eacutegalement une API de script visuel pour automatiser les interactions de
lrsquointerface graphique par lrsquointermeacutediaire des modegraveles de capture drsquoeacutecran pour diriger
les eacuteveacutenements de la souris et du clavier
Dans lrsquoexemple montreacute dans la figure 311 le bouton de fermeture doit effacer le contenu de la
zone de texte ainsi que lui-mecircme Supposons que lrsquointerface graphique soit deacutejagrave dans un eacutetat
qui contient un laquo 5 raquo au deacutebut nous trouvons la zone de texte bleue sur lrsquoeacutecran et stockons la
reacutegion correspondante qui a la plus grande similariteacute dans la zone bleue Ensuite apregraves avoir
cliqueacute sur le bouton de fermeture deux assertNotExist sont utiliseacutes pour veacuterifier la disparition
dans la zone bleue [39]
325 APPLITOOLS
La segmentation pure de lrsquoimage des pages Web et la comparaison visuelle pixel par pixel
sont agrave lrsquoorigine de lrsquooutil commercialiseacute AppliTools Eyes [2] qui offre une interaction des
scripts de test creacutees par lrsquoutilisateur et son application Dans cet outil le serveur Web est
78
Figure 311 ndash Exemple drsquoutilisation de Sikuli (figure tireacutee de [39])
chargeacute de teacuteleacutecharger les captures drsquoeacutecran en appliquant un algorithme de diffeacuterence drsquoimage
entre lui et une capture drsquoeacutecran preacuteceacutedente La diffeacuterence entre les deux images est traduite par
AppliTools par une deacutetection des reacutegressions dans une mise en page GUI Ces changements
dans une interface Web sont exploiteacutes par le deacuteveloppeur pour actualiser lrsquoimage de base dans
le cas ougrave le changement eacutetait intentionnel
Cependant cette approche est orienteacutee vers la deacutetection de bugs de type statique de chevau-
chement ou de deacutebordement des eacuteleacutements dans un document et actuellement ne supporte pas
la veacuterification de modegraveles temporels agrave travers plusieurs instantaneacutes de la mecircme page De plus
lrsquoapproche geacutenegravere beaucoup de faux positifs si la page rendue contient du texte leacutegegraverement
diffeacuterent de lrsquoimage de reacutefeacuterence Crsquoest le cas lorsque par exemple la fenecirctre du navigateur a
des dimensions diffeacuterentes et que le texte srsquoeacutecoule diffeacuteremment (mais pas neacutecessairement
incorrectement) par rapport agrave lrsquoimage Pour reacutesoudre ce problegraveme lrsquoutilisateur doit deacutefinir
manuellement pour chaque oracle ce que lrsquoon appelle des reacutegions dynamiques qui devraient
ecirctre ignoreacutees par le systegraveme lors de lrsquoanalyse de la page
79
33 APPROCHE DEacuteCLARATIVE
Les techniques dans cette derniegravere famille fonctionnent directement sur des informations sur
la mise en page Elles peuvent obtenir des informations sur les eacuteleacutements (position largeur
et hauteur) impliqueacutes dans lrsquointerface graphique que ce soit par analyse drsquoimage ou par
laquo siphonnage raquo (scraping) de lrsquointerface graphique Crsquoest drsquoailleurs ce que ces techniques ont
en commun La maniegravere de relier les diffeacuterents eacuteleacutements de mise en page les uns aux autres
ainsi que les valeurs de leurs paramegravetres de mise en page sont indiqueacutes par les entreacutees de ces
approches qui ne sont pas tant un script que des documents deacuteclaratifs
Les assertions opeacutereacutees sur lrsquointerface graphique peuvent par exemple ecirctre de la forme laquo lrsquoeacuteleacute-
ment 1 est-il situeacute agrave gauche de lrsquoeacuteleacutement 2 raquo ou laquo lrsquoeacuteleacutement 1 a-t-il une largeur infeacuterieure
agrave lrsquoeacuteleacutement 2 raquo Certaines de ces techniques ont des langages speacutecialiseacutes deacutecrivant des
assertions comme celles-ci
Les speacutecifications deacuteclaratives des interfaces utilisateurs ont fait lrsquoobjet de beaucoup de
recherches dans le passeacute Les premiegraveres tentatives incluent le systegraveme MASTERMIND qui
utilise un langage de modeacutelisation baseacute sur CORBA [67] drsquoautres approches incluent le
modegravele de mise en page drsquoAuckland [57] Adobe Adam et Eve [66] et les modegraveles de proprieacuteteacutes
[57]
331 MASTERMIND
Dans MASTERMIND le deacuteveloppeur de lrsquointerface utilisateur doit creacuteer des modegraveles de tacircche
(task model) drsquoapplication (domaine) et de preacutesentation Le modegravele drsquoapplication est speacutecifieacute
agrave lrsquoaide du langage de deacutefinition drsquointerface CORBA (IDL) Le modegravele de tacircche preacutesente les
tacircches de lrsquoutilisateur final dans une structure hieacuterarchique et comporte les informations de
80
commande neacutecessaires pour controcircler lrsquointerface utilisateur lors de lrsquoexeacutecution Le modegravele de
preacutesentation deacutecrit la disposition de lrsquointerface utilisateur y compris les affichages statiques
et dynamiques Il permet la speacutecification des mises agrave jour automatiques de preacutesentation
lorsque les donneacutees drsquoapplication ou le contexte de preacutesentation changent En outre il integravegre
des principes de conception graphique afin de donner un soutien complet au concepteur de
dialogue
332 AUCKLAND LAYOUT MODEL (ALM)
Le modegravele de mise en page drsquoAuckland (ALM) est une technique impleacutementeacute pour laquo NET raquo
Java et Haiku permettant de speacutecifier une mise en page 2D Elle est utiliseacutee pour organiser les
controcircles dans une interface graphique Le modegravele permet la speacutecification de contraintes baseacutees
sur lrsquoalgegravebre lineacuteaire Il calcule une disposition optimale en utilisant la programmation lineacuteaire
Les eacutegaliteacutes et les ineacutegaliteacutes lineacuteaires peuvent ecirctre speacutecifieacutees sur les tabulations horizontales et
verticales qui sont des lignes virtuelles formant une grille dans laquelle tous les eacuteleacutements de
lrsquointerface graphique sont aligneacutes [57]
Lrsquoexemple dans la figure 312 montre la maniegravere de disposer trois boutons en mobilisant
trois zones Les boutons ont deacutejagrave eacuteteacute ajouteacutes agrave la fenecirctre mais ils nrsquoont pas eacuteteacute arrangeacutes Leur
emplacement et leur taille sont deacutetermineacutes par la speacutecification ALM (figure 313) Quelque
soit le redimensionnement de la fenecirctre les deux colonnes auront toujours la mecircme largeur et
les deux lignes la mecircme hauteur en raison de la lineacuteariteacute des deux contraintes
81
Figure 312 ndash Exemple avec Auckland (figure tireacutee de [1])
LayoutSpec ls = new LayoutSpec ()XTab x1 = lsAddXTab ()YTab y1 = lsAddYTab ()
lsAddArea (lsLeft lsTop x1 y1 bouton1)lsAddArea (x1 lsTop lRight y1 bouton2)lsAddArea (lsLeft y1 lsRight lsBottom bouton3)
donne la mecircme largeur aux deux colonnes et la mecircme hauteur aux deux rangeacuteeslsAddConstraint (nouveau double [] 2 -1 nouvelle variable [] x1 lsRight
OperatorTypeEQ 0)lsAddConstraint (nouveau double [] 2 -1 nouvelle variable [] y1 lsBottom
OperatorTypeEQ 0)
Figure 313 ndash Une simple speacutecification avec Auckland [1]
82
333 ADOBE ADAM ET EVE
ASL (Adobe Source Libraries) est un projet au sein du Adobe Software Technology Lab
(STLab) Crsquoest un ensemble de bibliothegraveques de composants logiciels rendu disponible sous
licence Open Source par Adobe Systems permettant de deacutefinir des algorithmes sous forme
deacuteclarative Les deux premiegraveres bibliothegraveques significatives dans ASL sont la bibliothegraveque
de modegravele de proprieacuteteacutes (Adam) et la bibliothegraveque de modegravele de mise en page (Eve) dont
les composants permettent de modeacuteliser lrsquoapparence et le comportement drsquoune interface
dans une application logicielle Adam consiste en un solveur et un langage deacuteclaratif pour
deacutecrire les contraintes et les relations sur une collection de valeurs qui sont geacuteneacuteralement
les paramegravetres drsquoune commande drsquoapplication (une fonction) Adam fournit la logique qui
controcircle le comportement drsquoune interface Humaine (IH) Il est similaire dans son concept agrave une
feuille de calcul ou agrave un gestionnaire de formulaires Les valeurs sont deacutefinies et les valeurs
deacutependantes sont recalculeacutees Adam procure des fonctionnaliteacutes pour reacutesoudre les valeurs
interdeacutependantes mais il ne constitue pas un systegraveme de contrainte geacuteneacuteral Eve consiste
en un solveur et un langage deacuteclaratif pour la construction drsquoune IH Le solveur de mise en
page prend en compte une description riche des eacuteleacutements de 14 interfaces pour obtenir une
disposition de haute qualiteacute rivalisant avec ce qui peut ecirctre reacutealiseacute avec le placement manuel
Une seule description suffit pour plusieurs plateformes et langages OS Eve a eacuteteacute deacuteveloppeacutee
pour fonctionner avec Adam il peut cependant aussi ecirctre utiliseacutee seule Adam et Eve peuvent
ecirctre inteacutegreacutees dans un certain nombre drsquoenvironnements Ils ont la faculteacute de fonctionner
ensemble ou indeacutependamment mais ils doivent ecirctre combineacutes avec drsquoautres installations
pour construire une application Parmi les exemples typiques drsquointerfaces utilisateur effectuant
la synthegravese de paramegravetres de commande la boicircte de dialogue laquo Enregistrer sous raquo dans le cas
drsquoenregistrement drsquoun fichier image (figure 314) Elle se compose drsquoun champ de texte pour
entrer le nom du fichier un menu de types de fichiers et des curseurs offrant deux possibiliteacutes
83
Figure 314 ndash Exemple drsquoune boicircte de dialogue pour enregistrer un fichier image
pour configurer la compression lors de lrsquoenregistrement dans un format qui le prend en charge
Les valeurs des curseurs sont lieacutees par une relation exprimant le compromis entre le taux de
compression et la qualiteacute de lrsquoimage
La boicircte de dialogue aide lrsquoutilisateur agrave syntheacutetiser les paramegravetres drsquoune commande drsquoenre-
gistrement de fichier La figure 315 montre une speacutecification pour cette tacircche de synthegravese de
paramegravetres de commande eacutecrite dans le langage deacuteclaratif speacutecifique de laquo Adam raquo Dans 315
les sections laquo interface raquo laquo output raquo et laquo invariant raquo deacuteclarent les variables ou les proprieacuteteacutes
du modegravele de proprieacuteteacutes Les variables drsquointerface peuvent ecirctre mises agrave jour par un client du
modegravele de proprieacuteteacute par exemple agrave la suite de lrsquointeraction drsquoun utilisateur avec un widget
drsquointerface utilisateur Les valeurs des variables de sortie (output) constituent le reacutesultat de la
synthegravese des paramegravetres de commande La valeur (booleacuteenne) des variables invariantes indique
si un ensemble de variables satisfait une condition donneacutee La section laquo logique raquo dans 315
deacutefinit toujours les deacutependances et les regravegles de calcul entre les variables Le langage pour
ces calculs est le langage drsquoexpression ASL qui peut faire des appels aux fonctions externes
84
sheet save image file interface
file name file type rdquobmprdquocompression ratio 100image quality 100
logicrelate compression ratio lt== 100 - 4 x (100 - image quality)image quality lt== 100 - (100 - compression ratio) 4
outputresult lt== (file type == rdquojpegrdquo) type file type name file name ratio compression ratio type file type name file name
invariant check name lt== file name 6= rdquo rdquo
Figure 315 ndash Une simple speacutecification deacuteclarative dans le langage Adam du modegravele de proprieacuteteacutepour le dialogue dans Figure314 [56]
enregistreacutees (C ++) et peut ainsi effectuer des actions arbitraires La tacircche du programmeur de
lrsquoapplication est de deacutefinir ces calculs appeleacutes meacutethodes et qui sont exeacutecuteacutees est controcircleacutees
par le modegravele de proprieacuteteacutes
Le langage laquo Eve raquo peut ecirctre utiliseacute pour speacutecifier la disposition et la qualiteacute de preacutesentation
des eacuteleacutements drsquointerface ainsi que les liaisons entre les widgets dans lrsquointerface utilisateur et
les valeurs dans le modegravele de proprieacuteteacute La speacutecification de disposition pour le dialogue de la
figure 314 apparaicirct dans la figure 316
Nous allons cependant les rejeter ainsi que beaucoup drsquoautres langages de balisage GUI
(QML XAML) car ils visent agrave geacuteneacuterer des interfaces baseacutees sur des contraintes et ne peuvent
pas ecirctre utiliseacutes comme des assertions agrave tester de plus ils se concentrent principalement sur
la reacutesolution de contraintes lineacuteaires relatives agrave la taille et au placement des eacuteleacutements dans un
formulaire
85
layout save image file view dialog(name rdquoSave Image Asrdquoplacement place columnspacing 6child horizontal align fill) edit text(bind file name name rdquoFile namerdquo)popup(bind file type name rdquoSave as typerdquo items [
name rdquoWindows bitmap (bmp)rdquo value rdquobmprdquo name rdquoJPEG (jpeg)rdquo value rdquojpegrdquo
])row()
column(child horizontal align right) label(name rdquoCompression ratiordquo)label(name rdquoImage qualityrdquo)
column(horizontal align fill child horizontal align fill)
slider(bind compression ratioformat first 1 last 100 interval 1 )
slider(bind image qualityformat first 1 last 100 interval 1 )
row(horizontal align right) button(name rdquoSaverdquo action ok bind result
default true)button(name rdquoCancelrdquo action cancel)
Figure 316 ndash Une simple speacutecification avec Eve [56]
86
Pour montrer pourquoi les langages de geacuteneacuteration de GUI ne sont pas approprieacutes consideacute-
rons lrsquoexemple simple de CSS Comme nous lrsquoavons vu plus haut CSS exprime agrave quoi les
eacuteleacutements devraient ressembler (suggestions) mais pas comment ils vont lrsquoecirctre Consideacuterez les
deacuteclarations de style suivantes dans le cas ougrave un eacuteleacutement div2 est imbriqueacute dans div1
div1 width 200px div2 width 300px
Il nrsquoest pas possible avec CSS drsquoaffirmer que le contenu de div1 ne devrait jamais ecirctre plus
large que sa propre largeur deacuteclareacutee Si tel est le cas le navigateur peut soit deacutevelopper la boicircte
de lrsquoeacuteleacutement (sans tenir compte de sa deacuteclaration) soit afficher les eacuteleacutements en dehors de son
conteneur (un problegraveme dont nous avons beaucoup parleacute dans la section 22) La seule solution
consiste pour le concepteur du document CSS agrave srsquoassurer que la largeur deacuteclareacutee de tous les
eacuteleacutements qui seront contenus dans div1 est infeacuterieure agrave 200 pixels En revanche une proprieacuteteacute
deacuteclarative pourrait facilement imposer agrave lrsquoexeacutecution que la largeur de div1 est toujours de
200 pixels
On pourrait argumenter que cela peut aussi ecirctre veacuterifieacute en analysant statiquement le document
HTML avec le fichier CSS (bien qursquoaucun travail apparenteacute ne semble reacutepondre agrave cette
question) Il y a cependant des cas ougrave ce nrsquoest mecircme pas possible Si nous supprimons la
deacuteclaration de div2 dans lrsquoexemple ci-dessus mais que div2 contient une image de 300 pixels
de large il est impossible de deacutecouvrir que la proprieacuteteacute deacutesireacutee nrsquoest pas satisfaite en regardant
simplement le CSS
En guise drsquoexemple final consideacuterons le code suivant qui stipule que les eacuteleacutements de certains
menus doivent ecirctre placeacutes verticalement et que leur taille est fixe
menu li float left
87
width 200pxheight 50px
Rien ne permet au concepteur de speacutecifier que tous les eacuteleacutements doivent toujours ecirctre sur la
mecircme ligne (c-agrave-d Avoir la mecircme position top) (mecircme si la valeur de top est deacutefinie) Ce
ne sera pas le cas si la fenecirctre contenant est redimensionneacutee suffisamment petite pour que les
eacuteleacutements puissent flotter en dessous Dans un tel cas il faut effectivement rendre la page dans
un navigateur avec ses dimensions reacuteelles pour deacutecouvrir la preacutesence du problegraveme
334 GALEN FRAMEWORK
Galen Framework [10] est une bibliothegraveque de tests drsquointerfaces graphiques pour tester les
mises en page drsquoapplications web Le comportement mutuel entre les diffeacuterents eacuteleacutements
drsquoune interface graphique et le type de paramegravetres de mise en page valides sont deacutecrits
par des descriptions de mise en page creacutees par lrsquoutilisateur La veacuterification de la validiteacute
de lrsquoemplacement et la taille des eacuteleacutements est reacutealiseacutee par un test oracle en utilisant ces
descriptions
Pour deacuteclarer divers aspects de la position et de la taille drsquoun eacuteleacutement par rapport agrave drsquoautres
eacuteleacutements ou en valeurs absolues le deacuteveloppeur de test utilise un langage de description de
test personnaliseacute fourni par le framework Galen Galen est baseacute sur un outil drsquoautomatisation
de navigateur web appeleacute Selenium qui permet de creacuteer des scripts automatiseacutes simulant les
entreacutees de lrsquoutilisateur Il permet eacutegalement de speacutecifier des plages de valeurs acceptables La
figure 317 montre un exemple de ce agrave quoi ressemble une speacutecification Galen [9]
Le test de reacutegression des mises en page drsquoapplications web est entiegraverement automatiser par
le framework Galen en combinant ces deux technologies Des informations preacutecises sur les
88
valeurs valides pour les eacuteleacutements de lrsquointerface eacutetant neacutecessaires au fichier de speacutecification
requis par le framework Galen cette opeacuteration peut ecirctre coucircteuse et rendre la modification
drsquoune interface graphique plus difficile
Un regard sur le langage de speacutecification de Galen indique que le travail requis par le deacute-
veloppeur de test est similaire agrave la speacutecification de lrsquointerface graphique elle-mecircme Les
speacutecifications de Galen et la conception GUI elle-mecircme sont effectueacutees avec agrave peu pregraves la
mecircme freacutequence Lrsquoinconveacutenient est la flexibiliteacute reacuteduite et lrsquoaugmentation des coucircts Cepen-
dant lrsquoapproche permet une grande preacutecision lors de la reacutealisation des tests de reacutegression et la
veacuterification de la fonctionnaliteacute de la conception sur diffeacuterentes tailles drsquoeacutecran
335 ITARRAY AUTOMOTION
Le framework Automotion drsquoITArray [70] est similaire au framework Galen La diffeacuterence
par rapport agrave beaucoup drsquoautres frameworks est que la bibliothegraveque drsquoassertions permet
reacuteellement drsquoaffirmer si la position et lrsquoalignement des eacuteleacutements sont lieacutes les uns aux autres
avec des appels tels que is ElementInside (otherElement) ou areElementsAligned
(List) La faccedilon dont ces tests sont speacutecifieacutes est encore tregraves verbeuse Un exemple de script
Automotion est illustreacute agrave la Figure 318
34 OUTILS RWD
Il est toujours judicieux de tester la conception drsquoun site web sur divers appareils Mais
cette meacutethode classique prend beaucoup de temps et en raison de la varieacuteteacute des dispositifs
disponibles aujourdrsquohui le deacuteveloppeur peut ne pas avoir accegraves agrave tous ces dispositifs Plusieurs
outils ont eacuteteacute deacuteveloppeacutes pour fournir le service permettant drsquoafficher une page dans une
89
Declaring objects with css and xpath locatorsobjects
header css divfusion-secondary-headersw-logo css fusion-logo-link
navigation-links- xpath ul[id=rsquomenu-mainrsquo]li[not((contains(idrsquomobile-menu-itemrsquo)))]nav-menu css divfusion-secondary-main-menufollow-us-box xpath div[contains(classrsquofusion-alertrsquo)][1]
Home Page Tag= Home Page =
This is for Desktopon desktop
Header propertiesheader
inside screen 0px topinside screen 0px leftinside screen 0px right
Logo propertiessw-logo
31 px below the headerbelow header 31pxImage comparison with 2 precision ratioimage file sw-logopng error 5
Each navigation links must be alligned horizontally to each otheritemName -gt Current item and nextItem -gt Next itemforEach [navigation-links-] as itemName next as nextItem
$itemNamealigned horizontally all $nextItem
Navigation menu must be 20px above to the follow us allert boxnav-menu
above follow-us-box 20px
Figure 317 ndash Exemple drsquoune speacutecification Galen [9]
90
boolean result = uiValidatorinit(Scenario name)findElement(rootElement Name of eacuteleacutement we validate)sameOffsetLeftAs(eacuteleacutement Panel 1)sameOffsetLeftAs(eacuteleacutement Button 1)sameOffsetRightAs(eacuteleacutement Button 2)sameOffsetRightAs(eacuteleacutement Button 3)withCssValue(border 2px solid FBDCDC)withCssValue(border-radius 4px)withoutCssValue(color FFFFFF)sameSizeAs(list_eacuteleacutements)insideOf(eacuteleacutement Container)notOverlapWith(eacuteleacutement Other eacuteleacutement)withTopElement(eacuteleacutement 10 15)changeMetricsUnitsTo(ResponsiveUIValidatorUnitsPERCENT)widthBetween(50 55)heightBetween(90 95)drawMap()validate()
Figure 318 ndash Exemple drsquoun script Automotion [70]
fenecirctre personnaliseacutee de tailles variables agrave lrsquoaide drsquoun navigateur Web Cependant ces outils
ne fournissent aucune information autre que le rendu des pages sur diffeacuterentes tailles ce
qui oblige le deacuteveloppeur agrave eacutevaluer la reacuteactiviteacute (responsiveness) du site web manuellement
Mentionnons ici quelques outils speacutecifiques agrave la deacutetection de problegravemes lieacutes au RWD
Avec des fonctionnaliteacutes de recherche intelligente et de reacutevision rapide WebSiteResponsi-
veTest [34] prend en charge tous les principaux navigateurs pour fournir lrsquoaperccedilu exact du
site web sur un peacuteripheacuterique speacutecifique Il faut entrer lrsquoURL drsquoune page Web pour eacutevaluer
rapidement la reacuteactiviteacute En fournissant des reacutesultats preacutecis en quelques secondes lrsquooutil
eacuteconomise beaucoup de temps La convivialiteacute et la compatibiliteacute avec les navigateurs sont
drsquoautres fonctionnaliteacutes qui le rendent attractif par rapport aux autres outils disponibles
Respondr [22] permet de veacuterifier la reacuteactiviteacute en entrant lrsquoURL drsquoun site web En outre
lrsquoappareil pour lequel le site web ou la page Web est testeacute peut eacutegalement ecirctre choisi dans la
91
liste donneacutee Une fois les seacutelections effectueacutees un simple clic sur laquo Go raquo est neacutecessaire pour
recevoir une analyse complegravete du site ou de la page web en donnant lrsquoaffichage sur lrsquoappareil
seacutelectionneacute La page peut ecirctre facilement preacutevisualiseacutee agrave une largeur approprieacutee
Screenfly [27] est un outil de test de compatibiliteacute multi-peacuteripheacuterique qui permet de preacutevisua-
liser les pages Web telles qursquoelles apparaissent sur diffeacuterents appareils Les plus populaires
comprennent les tablettes et autres appareils intelligents tels que Galaxy Tab Apple iPad
Motorola Xoom En outre il prend en charge diffeacuterentes tailles drsquoeacutecran et reacutesolutions Le site
deacutetecte automatiquement si lrsquoURL saisie comporte un site mobile et vous redirige vers celui-ci
Pour basculer entre les reacutesolutions drsquoeacutecran tout ce qursquoil faut faire est de cliquer sur lrsquoicocircne du
type drsquoappareil ou choisir lrsquoappareil qui a la reacutesolution drsquoeacutecran la plus proche
Responsive Web Design Bookmarklet [26] affiche nrsquoimporte quelle page Web dans plusieurs
tailles drsquoeacutecran pour la preacutevisualisation simulant la fenecirctre drsquoaffichage de diffeacuterents peacuteripheacute-
riques Il srsquoagit drsquoun outil de conception Web rapide qui peut ecirctre consulteacute agrave partir drsquoun
ordinateur de bureau pour tester la reacuteactiviteacute de tout site web Il suffit de faire glisser le
bookmarklet au-dessus de la barre des signets (bookmarks) pour obtenir une barre drsquooutils
en haut avec des boutons pour diffeacuterentes reacutesolutions drsquoeacutecran Il ne reste plus qursquoagrave choisir
lrsquoaperccedilu de la page en cours sur diffeacuterentes largeurs drsquoeacutecran de tablettes et de smartphones
ViewPortResizer [31] est eacutegalement un bookmarklet de navigateur qui peut ecirctre utiliseacute avec
nrsquoimporte quel navigateur Web moderne Un outil de navigation convivial ViewPortResizer
est entiegraverement configurable Il permet la seacutelection drsquoune plage initiale de tailles de reacutesolution
drsquoeacutecran et la construction drsquoun bookmarklet personnaliseacute
Responsinator [23] aide les proprieacutetaires de sites agrave avoir une ideacutee de la faccedilon dont leur
site fonctionnera sur les appareils les plus populaires Juste en tapant lrsquoURL du site le site
srsquoaffichera rapidement sur des eacutecrans de diffeacuterent(e)s tailles
92
Le processus de ResponsivePX [24] consiste agrave entrer lrsquoURL du site et utiliser des boutons
pour ajuster la largeur et la hauteur de la fenecirctre drsquoaffichage afin de trouver la largeur exacte
du point drsquoarrecirct en pixels Extrecircmement simple agrave utiliser et agrave ameacuteliorer les fonctionnaliteacutes cet
outil de conception Web aide les concepteurs agrave creacuteer des sites utilisables et reacuteactifs
Froont [8] rend les tests de conception Web reacuteactifs accessibles sans neacutecessiteacutes de compeacutetences
de codage Les conceptions peuvent ecirctre creacutees dans le navigateur avec cet outil En testant
chaque URL speacutecifiquement il teste les conceptions sur de vrais appareils tout de suite
De son cocircteacute ReDeCheck [74] [73] est un outil de test de conception web reacuteactif Il est inspireacute
du graphe drsquoalignement utiliseacute dans X-PERT un concept proposeacute et deacuteveloppeacute par Choudhary
et al [42] ReDeCheck se concentre speacutecifiquement sur les bugs de mise en page causeacutes par
des conceptions reacuteactives il utilise un graphique de mise en page adaptable (RLG) qui tient
compte de lrsquoalignement des eacuteleacutements de la page Web des changements de visibiliteacute et drsquoautres
aspects de la page lorsque la largeur de la fenecirctre varie En tant que tel ReDeCheck peut
seulement veacuterifier un ensemble fixe de problegravemes de mise en page preacutedeacutefinis et ne fournit pas
un langage agrave usage geacuteneacuteral pour exprimer des assertions
35 DISCUSSION SUR LES APPROCHES EXISANTES
Nous allons maintenant discuter quelques limites des approches preacuteceacutedemment preacutesenteacutees
351 INCONVEacuteNIENTS DE LrsquoAPPROCHE DEacuteCLARATIVE
Le deacuteveloppeur de test doit se soumettre aux exigences des descriptionsscripts de test assez
verbeux en deacutecrivant les regravegles de son interface graphique (comment les eacuteleacutements sont-ils
placeacutes les uns par rapport aux autres comment ils devraient se comporter quand la taille de
93
la fenecirctre change etc) de faccedilon plus deacutetailleacutee au point ougrave le script de test devient presque
aussi descriptif que le code de lrsquointerface graphique qursquoil teste A lrsquoinstar des scripts de test
ce problegraveme neacutecessitera des mises agrave jour agrave peu pregraves au mecircme rythme que les modifications
apporteacutees agrave la conception de lrsquointerface graphique
352 LIMITES DES TECHNIQUES VISUELLES
Impossible de comparer des images de diffeacuterentes tailles drsquoeacutecran Le fait drsquoassurer lrsquoeacutega-
liteacute et la validiteacute entre une image de reacutefeacuterence (oracle) et lrsquoimage agrave tester par la diffeacuterence de
couleur de pixel implique que celles-ci ne peuvent pas ecirctre des captures drsquoeacutecran de tailles
drsquoeacutecran diffeacuterentes ce qui exclut lrsquoutilisation de lrsquoimage de reacutefeacuterence agrave partir drsquoune taille
drsquoeacutecran pour veacuterifier la validiteacute de la mise en page sur une taille drsquoeacutecran diffeacuterente La validiteacute
de la mise en page drsquoune application censeacutee fonctionner sur de nombreuses tailles drsquoeacutecran
diffeacuterentes par ces techniques exige drsquoeacutetablir des reacutefeacuterences pour toutes les tailles drsquoeacutecran
Ne fonctionne pas bien avec les donneacutees dynamiques Ces techniques baseacutees sur lrsquoimage
et travaillant sur lrsquoinformation de pixel au lieu du contenu ne donnent des reacutesultats satisfaisants
qursquoavec des donneacutees statiques (parce qursquoon utilise une image de reacutefeacuterence pour faire la
comparaison) Par conseacutequent elles posent un problegraveme majeur Chaque exeacutecution drsquoune
application correspond souvent agrave un affichage du contenu diffeacuterent puisque ces donneacutees sont
geacuteneacuteralement reacutecupeacutereacutees sur un serveur Web ou creacutees par lrsquoutilisateur mdashce qui diminue
fortement lrsquoutiliteacute de ces techniques
Signalent beaucoup de faux positifs Une diffeacuterence dans les valeurs de pixels de deux
captures drsquoeacutecran conseacutecutives peut entre constateacutee notamment si ces captures sont prises
sur des machines diffeacuterentes avec des configurations diffeacuterentes drsquoougrave lrsquoinconveacutenient des
94
Figure 319 ndash Exemple de faux positif avec PhantomCSS
techniques baseacutees sur les diffeacuterences drsquoimages qui sont sujettes agrave la deacuteclaration de faux positifs
comme indiqueacute sur le site web du reacutefeacuterentiel PhantomCSS [20] Ces petites diffeacuterences de
pixels sont parfois faussement signaleacutees par lrsquoalgorithme de test comme des erreurs de mise
en page cependant elles ne le sont pas reacuteellement La figure 319 montre un exemple de ce
cas ougrave nous pouvons observer de petites zones de pixels violets (nous avons marqueacutees ces
petites zones avec des rectangles rouges) ces images ressemblent aux images de base qui
sont entoureacutees de rectangles jaunes En reacutealiteacute ce sont pas des erreurs mais des faux neacutegatifs
rapporteacutes en raison de petites diffeacuterences de pixels dans des rendus diffeacuterents (cela pourrait
ecirctre ducirc agrave lrsquoutilisation de diffeacuterents navigateurs)
En conclusion le tableau 31 donne les grandes lignes de diffeacuterences entre trois outils majeurs
des approches existantes
95
Sahi Selinium Websee
Pas de plugin (so-lution proxy web) Plugin speacutecifique pour chaque navigateur
Configurationspeacutecifique etbibliothegravequestierces pourimpleacutementercertains desalgorithmesspeacutecialiseacutes
Tests fonctionelsdes eacuteleacutements de lapage baseacute sur letrafique HTTP en-registreacute au niveaudu proxy (play-back)
Tests fontionels
Tests de mise enpage en se ba-sant sur une ver-sion de reference(juste pour despages statiques)
Tableau 31 ndash Limites et diffeacuterences entre trois outils majeurs des approches existantes
CHAPITRE 4
DEacuteTECTION DE BUGS DrsquoINTERFACE
Comme nous avons pu le voir une analyse statique du contenu HTML et des deacuteclarations
CSS drsquoune page web nrsquoest pas suffisante pour deacutetecter les bugs drsquointerface citeacutes dans le
deuxiegraveme chapitre de cette thegravese car CSS nrsquoest pas un langage qui peut exprimer des proprieacuteteacutes
normatives pour la mise en page drsquoun document Les deacuteclarations CSS sont juste un ensemble
drsquoinstructions traiteacutees par un moteur de rendu Donner agrave CSS une expressiviteacute prescriptive
impliquerait la possibiliteacute de speacutecifier agrave quoi un eacuteleacutement ne doit pas ressembler ou qursquoune
deacuteclaration de style particulier ne peut pas ecirctre remplaceacutee par drsquoautres constructions ndashce
que le CSS ne fournit pas En outre certains des bugs deacutecrits preacuteceacutedemment impliquent la
comparaison du contenu drsquoun document agrave plusieurs moments dans le temps une chose que
CSS nrsquoest pas eacutevidemment conccedilu pour faire
Par conseacutequent afin drsquoexprimer des proprieacuteteacutes normatives pour le contenu et la mise en page
drsquoune page web un langage compleacutementaire agrave CSS est neacutecessaire Ce langage doit permettre
aux utilisateurs drsquoeacutecrire des proprieacuteteacutes deacuteclaratives sur les styles des eacuteleacutements et de traiter
des eacuteveacutenements quelles que soient les deacuteclarations CSS ou le code cocircteacute client qui ont pu ecirctre
deacuteclareacutees
Pour combler cette neacutecessiteacute dans ce chapitre nous preacutesentons Cornipickle un langage
97
deacuteclaratif permettant drsquoexprimer des proprieacuteteacutes agrave propos du document et des proprieacuteteacutes CSS
drsquoune page On discutera eacutegalement drsquoune impleacutementation drsquoun algorithme permettant de
veacuterifier automatiquement si des eacutenonceacutes du langage sont vrais pour un site web particulier
41 UN INTERPREacuteTEUR POUR LES PROPRIEacuteTEacuteS CORNIPICKLE
Nous deacutecrivons maintenant la mise en œuvre de lrsquointerpreacuteteur pour lrsquoeacutevaluation automatiseacutee
des speacutecifications Cornipickle sur les applications web Cette impleacutementation est composeacutee
drsquoenviron 7 000 lignes de code Java et JavaScript et est disponible sous licence publique
geacuteneacuterale GNU 1 Une videacuteo de lrsquooutil en action sur des exemples simples peut eacutegalement ecirctre
consulteacutee en ligne 2
411 OBJECTIFS DE CONCEPTION
Outre la fonctionnaliteacute principale agrave mettre en œuvre le deacuteveloppement de lrsquooutil a eacuteteacute motiveacute
par un certain nombre drsquoobjectifs de conception importants
Pas de plugins speacutecifiques au navigateur
Tout drsquoabord la solution doit fonctionner sur autant de combinaisons de navigateurs et de
systegravemes drsquoexploitation que possible Ceci exclut explicitement les plugins speacutecifiques au
navigateur (ou limiteacutes par le navigateur) tels que les plugins Chrome les plugins Firefox
ou lrsquoutilisation drsquooutils tels que Selenium WebDriver Pour la mecircme raison la solution ne
doit pas reposer sur la preacutesence de frameworks JavaScript (jQuery Prototype etc) et ecirctre
1 httpsgithubcomliflabcornipickle2 httpyoutube90YitGRRx2w
98
autonome Cela implique que notre outil peut fonctionner dans des combinaisons inhabituelles
(navigateurssystegravemes drsquoexploitation) comme BoatBrowser sur un teacuteleacutephone Android ou
Qupzilla sous Haiku OS
Collecte drsquoinformations cocircteacute client
Deuxiegravemement lrsquoeacutevaluation des speacutecifications doit ecirctre faite en fonction des informations
recueillies sur le client cela eacutecarte la possibiliteacute drsquoeffectuer une eacutevaluation statique de HTML
et CSS du cocircteacute serveur Ceci est obligatoire pour plusieurs raisons Il faut tenir compte du
fait que le standard CSS nrsquoest pas interpreacuteteacute de la mecircme maniegravere par tous les navigateurs Par
exemple CSS stipule que la largeur drsquoun eacuteleacutement nrsquoinclut pas le remplissage mais certaines
versions drsquoInternet Explorer incluent le remplissage dans la largeur et rendent le mecircme eacuteleacutement
avec des dimensions diffeacuterentes
Dans une large mesure la veacuterification des contraintes en examinant uniquement le code
HTML + CSS impliquerait drsquoeacutemuler le moteur de rendu de chaque navigateur compleacuteteacute par
ses laquo bizarreries raquo speacutecifiques pour parvenir agrave un verdict fidegravele
En plus des problegravemes susmentionneacutes toutes les applications que nous avons eacutetudieacutees
contiennent du code cocircteacute client qui peut modifier la disposition drsquoune page apregraves que le
moteur de mise en page a traiteacute les deacuteclarations statiques trouveacutees dans le document HTML
initial et les fichiers CSS traiteacutes au moment du chargement Ce code programmeacute pour ecirctre
exeacutecuteacute lors du chargement de la page remplace complegravetement les deacuteclarations de style que
les fichiers CSS drsquoorigine peuvent initialement deacutefinir Par conseacutequent dans tous les cas il ne
suffit pas drsquoanalyser lrsquoensemble des fichiers HTML et CSS deacutefinis par lrsquoapplication car tout
ce contenu peut ecirctre modifieacute agrave la voleacutee gracircce agrave des interactions avec lrsquoutilisateur une fois la
page chargeacutee
99
Pas drsquointerpreacutetation cocircteacute client
Troisiegravemement lrsquointerpreacutetation des speacutecifications de Cornipickle ne devrait pas ecirctre faite du
cocircteacute des clients Ceci est fait de maniegravere agrave ne pas imposer une charge de calcul excessive
dans le navigateur et permet lrsquoutilisation drsquoun autre langage que JavaScript pour lrsquoimpleacute-
mentation de cette fonctionnaliteacute Plus important encore il permet de geacuterer les proprieacuteteacutes
comportementales impliquant plus drsquoun instantaneacute de page par lrsquooutil En utilisant du code
strictement client un problegraveme survient lorsqursquoun rechargement de page complet se produit
car cela reacuteinitialise lrsquoeacutetat de tout objet JavaScript associeacute agrave cette page Eacutetant donneacute que les
speacutecifications comportementales requiegraverent la sauvegarde des informations du passeacute certains
moyens de preacuteserver ces informations dans le client agrave travers les rechargements de pages
doivent ecirctre conccedilus HTML5 fournit des fonctionnaliteacutes de stockage mais leur utilisation
limiterait la prise en charge des navigateurs (par exemple uniquement pour Opera 115 Safari
4 et IE 9 et plus reacutecents 3)
Interpreacutetation de lrsquoexeacutecution
Enfin il devrait ecirctre possible pour un utilisateur drsquoajouter de supprimer ou de modifier les
speacutecifications eacutevalueacutees par lrsquooutil Cela pose un deacutefi en raison de la construction speacuteciale We
say that qui permet drsquoajouter de nouvelles constructions grammaticales dans le langage de
base Ceci est diffeacuterent des deacutefinitions de fonction ou de preacutedicat habituelles disponibles dans
la plupart des langages ougrave la syntaxe des appels de fonctions est fixe et seuls de nouveaux
identificateurs de fonctions peuvent ecirctre ajouteacutes au moment de lrsquoanalyse Cela a neacutecessiteacute le
deacuteveloppement drsquoun analyseur BNF appeleacute Bullwinkle 4 qui peut accepter de nouvelles regravegles
3 httpwwwhtml5rockscomenfeaturesstorage4 httpsgithubcomsylvainhalleBullwinkle
100
Figure 41 ndash Architecture et interactions de Cornipickle
drsquoanalyse agrave lrsquoexeacutecution mdashcontrairement agrave la plupart des autres analyseurs qui neacutecessitent une
eacutetape de compilation chaque fois que la grammaire change
412 ARCHITECTURE ET SCEacuteNARIO DrsquoUTILISATION TYPIQUE
La combinaison de toutes les exigences dans [51] impose plus ou moins une architecture pour
lrsquooutil Cornipickle ougrave le code cocircteacute serveur prend en charge la collecte et lrsquoeacutevaluation des
speacutecifications (caracteacuteristiques) tandis que le code cocircteacute client agit uniquement comme une
laquo sonde raquo Lrsquointerrogation des informations pertinentes sur lrsquoeacutetat actuel de la page est relayeacutee
vers le serveur pour un traitement ulteacuterieur Cette interaction client-serveur a un avantage
cependant le code cocircteacute client peut ecirctre relativement leacuteger et sans eacutetat (ecirctre remis agrave zeacutero agrave
chaque fois que la page se recharge) comme tout traitement agrave eacutetat qui peut ecirctre fait par le
serveur
La figure 41 montre les interactions avec lrsquooutil Cornipickle Un deacuteveloppeur eacutecrit drsquoabord un
jeu drsquoeacutetats deacuteclaratifs (1) qui sont stockeacutes dans la meacutemoire de Cornipickle (2) En donnant
101
tagname windowwidth 956height 165 children [
tagname pid gowidth 90 children [
tagname CDATA text Hello World
]
]
Figure 42 ndash Une page simple seacuterialiseacutee en JSON
un identifiant unique agrave ce jeu drsquoeacutetats qui peut ecirctre appeleacute dans le code JavaScript agrave ecirctre
inseacutereacute dans lrsquoapplication afin que la sonde peut ecirctre chargeacutee dans chaque page (3-4) cette
addition est geacuteneacuterique et ne diffegravere que dans la chaicircne drsquoidentification Quand une page
de lrsquoapplication doit ecirctre chargeacutee (5) Cornipickle creacutee dynamiquement la sonde JavaScript
correspondant agrave lrsquoensemble drsquoassertions pour les eacutevaluer et les envoyer au client (6-8) Cette
sonde est conccedilue pour signaler un instantaneacute des donneacutees DOM et CSS pertinents sur chaque
eacuteveacutenement deacuteclencheacute par lrsquoutilisateur Quand un tel eacuteveacutenement se produit la sonde recueille
toutes les informations pertinentes sur le contenu de la page (figure 42) et les relaie au serveur
Cornipickle (9) qui les enregistre dans un journal (10-11)
En option des informations sur lrsquoeacutetat actuel des assertions en cours drsquoeacutevaluation (vrai
faux) peuvent ecirctre relayeacutees agrave la sonde (12) Un tableau de bord drsquoanalyse peut reacutecupeacuterer le
journal enregistreacute qui peut ecirctre consulteacute par le deacuteveloppeur pour interroger lrsquoeacutetat de toutes les
102
Figure 43 ndash Une capture drsquoeacutecran de Cornipickle en action
proprieacuteteacutes drsquoentreacutee au deacutebut du processus (13-16)
La figure 43 montre un exemple de Cornipickle en action Dans ce cas la sonde injecteacutee a
inseacutereacute une petite icocircne dans le coin infeacuterieur droit de la fenecirctre qui devient rouge chaque fois
qursquoune proprieacuteteacute est violeacutee Pour contourner le fait que de nombreux navigateurs deacutesactivent
les requecirctes HTTP inter-site Ajax nrsquoest pas utiliseacute pour la communication entre le client et le
serveur La sonde envoie plutocirct ses donneacutees en modifiant lrsquoattribut src drsquoune image de zeacutero
pixel injecteacutee dans la page et en passant les donneacutees collecteacutees en tant que paramegravetres GET de
cette requecircte En sens inverse le serveur relaie les informations via un cookie speacutecialement
encodeacute que la sonde peut interroger peacuteriodiquement De cette faccedilon le serveur Cornipickle
peut reacutesider sur un serveur diffeacuterent de celui de lrsquoapplication testeacutee et avoir toujours une
communication bidirectionnelle ponctuelle avec sa sonde
103
42 LE LANGAGE CORNIPICKLE
Le langage Cornipickle comporte des constructions issues de la logique du premier ordre et de
la logique temporelle lineacuteaire tels que les quantificateurs et les opeacuterateurs temporels et qui
permettent agrave un utilisateur de speacutecifier des relations complexes sur les diffeacuterents eacuteleacutements du
document agrave plusieurs moments dans le temps caracteacuteristique qui est absente dans beaucoup
de langages de script
Cornipickle nrsquoest pas un convertisseur baseacute sur des expressions reacuteguliegraveres entre des fichiers
texte et des commandes de script mais sa grammaire lutte pour le mecircme genre de lisibiliteacute En
particulier pour ameacuteliorer la lisibiliteacute la grammaire de Cornipickle permet drsquoinseacuterer diffeacuterents
mots agrave lrsquointeacuterieur des diffeacuterentes constructions Ces mots nrsquoont aucun effet sur lrsquoanalyse et
lrsquointerpreacutetation des expressions
421 SYNTAXE DU LANGAGE
Dans Cornipickle les proprieacuteteacutes sont exprimeacutees sous forme drsquoassertions sur le contenu et les
attributs drsquoune capture (snapshot) drsquoune page prise agrave un instant donneacute La maniegravere preacutecise par
laquelle ces captures sont prises agrave partir drsquoune application web donneacutee sera deacutetailleacutee plus loin
Nous commenccedilons par une illustration des diffeacuterentes constructions de la grammaire dans le
tableau 41
Seacutelection drsquoeacuteleacutements Les eacuteleacutements de la page sont lrsquouniteacute principale dans Cornipickle ils
sont seacutelectionneacutes afin drsquoexprimer quelques-unes de leurs proprieacuteteacutes Ces proprieacuteteacutes peuvent
ecirctre appliqueacutees agrave tous les eacuteleacutements seacutelectionneacutes ou au moins agrave un
104
〈S〉 = 〈predicate〉 | 〈def-set〉 | 〈statement〉
Eacutenonceacutes Cornipickle
〈statement〉 = 〈foreach〉 | 〈exists〉 | 〈binary-stmt〉 | 〈negation〉| 〈temporal-stmt〉 | 〈userdef-stmt〉 | 〈let〉 | 〈when〉〈binary-stmt〉 = 〈equality〉 | 〈gt〉 | 〈lt〉 | 〈regex-match〉 | 〈and〉 | 〈or〉 | 〈implies〉〈temporal-stmt〉 = 〈globally〉 | 〈eventually〉 | 〈never〉 | 〈next〉 | 〈next-time〉
Logique du premier ordre
〈foreach〉 = For each 〈var-name〉 in 〈set-name〉 ( 〈statement〉 )〈exists〉 = There exists 〈var-name〉 in 〈set-name〉 such that ( 〈statement〉 )〈when〉 = When 〈var-name〉 is now 〈var-name〉 ( 〈statement〉 )〈let〉 = Let 〈var-name〉 be 〈property-or-const〉 ( 〈statement〉 )〈and〉 = ( 〈statement〉 ) And ( 〈statement〉 )〈or〉 = ( 〈statement〉 ) Or ( 〈statement〉 )〈implies〉 = If ( 〈statement〉 ) Then ( 〈statement〉 )〈negation〉 = Not ( 〈statement〉 )
Expressions temporelles
〈globally〉 = Always ( 〈statement〉 )〈never〉 = Never ( 〈statement〉 )〈next〉 = Next ( 〈statement〉 )〈eventually〉 = Eventually ( 〈statement〉 )〈next-time〉 = The next time ( 〈statement〉 ) Then ( 〈statement〉 )
Tableau 41 ndash La grammaire BNF pour Cornipickle (Partie I)
105
Par conseacutequent la seacutelection de lrsquoeacuteleacutement se fait par le biais de la quantification du pre-
mier ordre classique en utilisant lrsquoanglais pour la syntaxe comme For each $x in S
ou There exists $x in S(pour dire chaque $x dans S ou Il existe $x dans S) Dans ces
expressions S deacutesigne soit un seacutelecteur CSS 5 ou un autre ensemble preacuteceacutedemment deacutefini par
lrsquoutilisateur Les seacutelecteurs CSS sont exprimeacutes en utilisant la syntaxe de jQuery $( ) Un
seacutelecteur speacutecial appeleacute CDATA peut ecirctre utiliseacute pour deacutesigner le contenu du texte des nœuds
feuilles dans un arbre DOM (les parties qui composent la page en texte clair) Si $x est une
variable quantifieacutee en utilisant le meacutecanisme deacutecrit ci-dessus on peut acceacuteder au DOM ou aux
attributs CSS de cet eacuteleacutement en utilisant $xrsquos property (ougrave property est lrsquoattribut CSS
rechercheacute) Par exemple la largeur de lrsquoeacuteleacutement srsquoeacutecrirait $xrsquos width
Les attributs de lrsquoeacuteleacutement (qui sont soit des chaicircnes de caractegraveres ou de chiffres) peuvent alors
ecirctre compareacutes en utilisant des connectifs tels que is greater than ou equals le matching
drsquoexpressions reacuteguliegraveres est fait agrave travers le preacutedicat match et lrsquoinclusion de chaicircne est affirmeacutee
par lrsquoassertion contains Des assertions de base sur les eacuteleacutements peuvent eacutegalement ecirctre
combineacutees en utilisant des connecteurs booleacuteens classiques and or if then not
Eacuteveacutenements et opeacuterateurs temporels Dans Cornipickle les eacuteveacutenements deacuteclencheacutes par
lrsquoutilisateur tels que les touches et les clics de souris sont repreacutesenteacutes comme des attributs
sur lrsquoeacuteleacutement qui est la cible de lrsquoeacuteveacutenement Par exemple un eacuteleacutement qui a eacuteteacute cliqueacute
par lrsquoutilisateur posseacutedera momentaneacutement un attribut event avec une valeur click Par
conseacutequent affirmer qursquoun eacuteleacutement $x a eacuteteacute cliqueacute peut ecirctre eacutecrit $xrsquos event is lsquoclickrsquo
Lrsquoinclusion drsquoeacuteveacutenements dans le langage conduit naturellement agrave la notion de seacutequences
de documents de captures instantaneacutees Par conseacutequent Cornipickle fournit des opeacuterateurs
5 Un seacutelecteur CSS est une expression de chemin (path expression) qui deacutefinit les eacuteleacutements drsquoun documentqui font lrsquoobjet drsquoun ensemble donneacute de regravegles Ces expressions sont deacutefinies par une grammaire reacuteguliegraverecomme stipuleacute dans la norme CSS
106
Opeacuterateurs
〈equality〉 = 〈property-or-const〉 equals 〈property-or-const〉| 〈property-or-const〉 is 〈property-or-const〉〈gt〉 = 〈property-or-const〉 is greater than 〈property-or-const〉〈lt〉 = 〈property-or-const〉 is less than 〈property-or-const〉〈regex-match〉 = 〈property-or-const〉 matches 〈property-or-const〉〈constant〉 = 〈number〉 | 〈string〉〈property-or-const〉 = 〈elem-property〉 | 〈constant〉〈number〉 = ˆd+〈string〉 = ˆ[ˆ]
Constructions auxiliaires
〈el-or-not〉 = eacuteleacutement | ε
〈set-name〉 = 〈css-selector〉 | 〈userdef-set〉 | 〈regex-capture〉〈userdef-set〉 = 〈string〉〈var-name〉 = ˆ$[wd]+
Seacutelecteur CSS
〈css-selector〉 = $( 〈css-sel-contents〉 )〈css-sel-contents〉 = 〈css-sel-part〉 〈css-sel-contents〉 | 〈css-sel-part〉〈css-sel-part〉 = ˆ[wdu0023]+
Attributs CSS
〈css-attribute〉 = value | height | width | top | left | right| bottom | color | id | text | border | event
Proprieacuteteacutes des eacuteleacutements
〈elem-property〉 = 〈elem-property-pos〉 | 〈elem-property-com〉〈elem-property-pos〉 = 〈var-name〉 rsquos 〈css-attribute〉〈elem-property-com〉 = the 〈css-attribute〉 of 〈var-name〉
Expressions reacuteguliegraveres
〈regex-capture〉 = match 〈elem-property〉 with 〈string〉
Tableau 42 ndash La grammaire BNF pour Cornipickle (Partie II)
107
emprunteacutes agrave la logique temporelle Lineacuteaire (LTL) pour exprimer des assertions sur lrsquoeacutevolution
du contenu drsquoun document au fil du temps
La construction Always ϕ nous permet de faire lrsquoassertion suivante quelle que soit lrsquoex-
pression de ϕ elle doit ecirctre vraie (True) dans tous les snapshots du document De mecircme on
utilise Eventually ϕ pour dire que ϕ sera vraie dans certains futurs snapshots du document
et Next ϕ est utiliseacute pour dire que ϕ est vrai dans la capture suivante
Une construction speacuteciale appeleacutee The next time ϕ then ψ affirme que ψ doit ecirctre vraie
mais seulement une fois que ϕ est Vraie Par exemple on peut utiliser cette construction pour
exprimer que quelque chose doit ecirctre observeacute apregraves qursquoun eacuteleacutement ait eacuteteacute cliqueacute lrsquoassertion
ne lie pas jusqursquoagrave ce moment Ceci est une leacutegegravere reacuteeacutecriture de lrsquoopeacuterateur until de LTL
Un but particulier des opeacuterateurs temporels est de comparer lrsquoeacutetat du mecircme eacuteleacutement sur plu-
sieurs snapshots Cela peut ecirctre fait dans Cornipickle avec la construction When $x is now $y ϕ
Si $x se reacutefegravere agrave lrsquoeacutetat drsquoun eacuteleacutement captureacute dans un snapshot anteacuterieur alors $y contiendra
lrsquoeacutetat du mecircme eacuteleacutement dans la capture (snapshot) actuelle
Toutes ces constructions peuvent ecirctre librement combineacutees Par exemple la proprieacuteteacute suivante
affirme que chaque eacuteleacutement de la liste se deacuteplacera vers le bas de la page agrave un certain moment
For each $x in $(li) (Eventually (
When $x is now $y ($yrsquos top is greater than $xrsquos top )))
Extension de la grammaire Une caracteacuteristique tregraves importante et exceptionnelle qui contri-
bue agrave la lisibiliteacute des speacutecifications Cornipickle est la possibiliteacute drsquoeacutetendre le vocabulaire de
base du langage Ce dernier donne aux utilisateurs cette possibiliteacute en utilisant leurs propres
deacutefinitions Ces nouvelles deacutefinitions seront lues par lrsquointerpreacuteteur et pourront ensuite ecirctre
108
Ensemble deacutefini en extension
〈def-set〉 = A 〈def-set-name〉 is any of 〈def-set-eacuteleacutements〉〈def-set-name〉 = ˆ ( =is)〈def-set-eacuteleacutements〉 = 〈def-set-eacuteleacutement〉 〈def-set-eacuteleacutements〉 | 〈def-set-eacuteleacutement〉〈def-set-eacuteleacutement〉 = 〈constant〉
Preacutedicats deacutefinis par lrsquoutilisateur
〈predicate〉 = We say that 〈pred-pattern〉 when ( 〈statement〉 )〈pred-pattern〉 = ˆ ( =when)
Eacutenonceacutes deacutefinis par lrsquoutilisateur
〈userdef-stmt〉 = empty
Tableau 43 ndash Extensions de la grammaire BNF pour Cornipickle
utiliseacutees librement comme tout eacuteleacutement de base du langage
Les preacutedicats peuvent ecirctre deacutefinis avec la construction We say that when Le texte entre
that et when est interpreacuteteacute comme une chaicircne de caractegraveres qui peut contenir des variables
Puis le texte apregraves when deacutecrit comment cette expression doit ecirctre eacutevalueacutee en termes du
vocabulaire existant Par exemple on peut deacutefinir lrsquoexpression laquo left-aligned raquo comme suit
We say that $x and $y are left-aligned when ($xrsquos left equals $yrsquos left )
La construction $x and $y are left-aligned ($x et $y sont aligneacutes agrave gauche) peut en-
suite ecirctre reacuteutiliseacutee (eacuteventuellement avec diffeacuterents noms de variables) dans des assertions
ulteacuterieures Les utilisateurs peuvent eacutegalement deacutefinir des ensembles soient des ensembles
de chaicircnes de caractegraveres des chiffres ou des ensembles drsquoeacuteleacutements agrave partir drsquoune page en les
eacutenumeacuterant en utilisant la construction A is any of
A Mojibake is any of Atilde ccopy Atildersquo Atildeuml
109
Notez que le nom de lrsquoensemble ne doit pas neacutecessairement ecirctre un seul mot lrsquoanalyseur
interpregravete tout ce qui est entre A et is any of comme un nom
La quantiteacute de donneacutees pouvant ecirctre relayeacutee de cette maniegravere eacutetant limiteacutee Cornipickle se
charge drsquoenvoyer une sonde qui ne reacutecupegravere que les informations neacutecessaires agrave lrsquoeacutevaluation
des speacutecifications fournies par lrsquoutilisateur Par conseacutequent la sonde reccediloit des instructions sur
les eacuteleacutements de la page qui sont inteacuteressants et sur les attributs DOM et CSS neacutecessaires pour
ces eacuteleacutements Ceci est fait en reacutecupeacuterant lrsquoensemble de tous les noms drsquoattributs apparaissant
dans une expression et lrsquoensemble de tous les seacutelecteurs CSS utiliseacutes dans les quantificateurs
La sonde parcourt la structure DOM drsquoune maniegravere en profondeur et produit un nœud de sortie
pour chaque nœud DOM visiteacute Par deacutefaut le nœud de sortie est vide il agit uniquement
comme un espace reacuteserveacute vide afin de preacuteserver la relation parent-enfant entre les nœuds de
sortie Ce nrsquoest que si lrsquoemplacement du nœud actuel correspond agrave lrsquoun des seacutelecteurs CSS
que les attributs et les valeurs seront ajouteacutees au nœud et seulement pour les attributs preacutesents
dans lrsquoexpression agrave eacutevaluer Des reacuteductions suppleacutementaires peuvent ecirctre reacutealiseacutees en reacuteduisant
tous les sous-arbres qui contiennent uniquement des nœuds vides Ainsi la structure DOM
produite par la sonde peut ecirctre vue comme une version laquo eacutevideacutee raquo du document original ne
contenant que des nœuds et des attributs importants pour lrsquoeacutevaluation drsquoune proprieacuteteacute
Incidemment il faut noter que ce filtrage est relativement grossier Consideacuterons par exemple
lrsquoexpression suivante
For each $x in $(p)If $xrsquos height equals 400 Then
For each $y in $(h1)$xrsquos width is greater than $yrsquos width
Cornipickle sera chargeacute drsquoaller chercher la largeur et la hauteur de tous les paragraphes et
rubriques pourtant on ne peut voir que les paragraphes de 400 pixels de hauteur qui sont
110
reacuteellement neacutecessaires pour deacutecider de la vrai valeur de la proprieacuteteacute De plus les informations
sur les titres nrsquoont drsquoimportance que si de tels paragraphes existent dans le document sinon
la proprieacuteteacute est vide Par conseacutequent les conditions de filtrage pourraient ecirctre affineacutees un
compromis doit ecirctre atteint entre les eacuteconomies de bande passante drsquoun tel filtrage et la
puissance de calcul neacutecessaire du cocircteacute client pour eacutevaluer les conditions
422 SEacuteMANTIQUE FORMELLE
Nous allons maintenant preacutesenter la seacutemantique formelle de Cornipickle La premiegravere eacutetape
consiste agrave formaliser la structure le contenu et les proprieacuteteacutes de style drsquoune page afficheacutee
Nous deacutefinissons drsquoabord un ensemble A de noms drsquoattributs Cet ensemble comprend tous les
attributs du DOM (Document Object Model Level 2) [55] et toutes les proprieacuteteacutes de feuilles de
style (CSS) qui peuvent ecirctre associeacutees agrave un eacuteleacutement Un nœud DOM est une fonction ν ArarrV
qui associe agrave chaque nom drsquoattribut une valeur prise agrave partir drsquoun ensemble V Nous utilisons
la valeur speacuteciale laquo raquo pour indiquer qursquoun attribut est indeacutefini pour un nœud donneacute Nous
distinguons un sous-ensemble E subV qui deacutesigne les noms drsquoeacuteleacutements correspondants au nom
de la balise HTML reacuteelle qui repreacutesente lrsquoeacuteleacutement (par exemple a h1 img etc)
Nous indiquerons par N lrsquoensemble de tous les nœuds DOM Lrsquoensemble T de documents
DOM comprend tous les arbres dont les nœuds sont des nœuds DOM Conformeacutement agrave la
convention adopteacutee par la plupart des navigateurs Web les eacuteleacutements de texte ne peuvent
apparaicirctre que comme feuilles et reccediloivent le nom drsquoeacuteleacutement speacutecial TEXT La figure 44
repreacutesente un tel document Si nous laissons ν se reacutefeacuterer au deuxiegraveme paragraphe du document
body nous avons par exemple ν(elementName) = ldquoprdquo ν(stylecolor) = ldquoredrdquo etc Nous
eacutetendons ν aux valeurs en deacutefinissant ν(v) = v pour tout v isinV
111
lthtmlgtltheadgtlttitlegtMy titlelttitlegt
ltheadgtltbodygtlth1gtThe first pagelth1gtltp style=colorredwidth400pxgtHello worldltpgt
ltp style=font-size14ptwidth200pxgtAnother ltbgtparagraphltbgtltpgt
ltp style=width400pxgtltpgtltbodygt
lthtmlgt
html
head body
title
CDATA
h1 p p p
CDATA CDATA CDATA b
CDATA
Figure 44 ndash Un document DOM simple (a) Structure HTML (b) Repreacutesentation en arbre DOM Seuls les noms des eacuteleacutements sont afficheacutes les attributs et valeurs restants sont omis pour plusde clarteacute
112
Soit κ T timesNrarr 2N la fonction qui eacutetant donneacute un document t isin T et un nœud ν isinN produit
lrsquoensemble κ(tν) de tous les enfants de ν dans T Soit C lrsquoensemble de tous les seacutelecteurs
CSS La fonction χ T times Srarr 2N renverra lrsquoensemble des nœuds en t correspondant agrave un
seacutelecteur CSS c isin C Les eacuteveacutenements deacuteclencheacutes par lrsquoutilisateur sont pris en compte en
supposant que certains eacuteleacutements portent un attribut avec le nom speacutecial laquo event raquo dont la
valeur deacutecrit lrsquoeacuteveacutenement auquel cet eacuteleacutement est lieacute Par exemple un utilisateur qui clique sur
un bouton ferait en sorte que lrsquoattribut laquo event raquo de ce bouton porterait laquo click raquo comme valeur
De cette faccedilon il est possible qursquoun instantaneacute drsquoun document contienne des informations sur
les eacuteveacutenements dynamiques survenant dans lrsquoapplication
La seacutemantique de Cornipickle est deacutefinie sur des traces des documents DOM une trace est
une seacutequence finie drsquoeacuteleacutements de T que nous deacutesignerons par t = t0 t1 tk Eacutetant donneacute
que toutes les expressions impliquant des constructions deacutefinies avec We say that peuvent
facilement ecirctre converties en expressions qui utilisent uniquement des constructions agrave partir
du langage de base il suffit de deacutefinir la seacutemantique pour ce langage de base On dira qursquoune
trace t satisfait une expression Cornipickle ϕ noteacutee t |= ϕ lorsque son eacutevaluation renvoie la
valeur Vrai (gt) La notation t i indique le suffixe de t agrave partir de son i-egraveme eacuteveacutenement
La seacutemantique complegravete est deacutefinie reacutecursivement dans le tableau 44 En termes formels
lrsquoexpressiviteacute du langage Cornipickle correspond agrave une extension du premier ordre de la
logique temporelle lineacuteaire ougrave les eacuteveacutenements sont des structures arborescentes des paires
nom-valeur semblables agrave celles utiliseacutees par le moniteur drsquoexeacutecution BeepBeep [53] ce-
pendant BeepBeep nrsquoa pas la possibiliteacute de creacuteer des constructions grammaticales deacutefinies
par lrsquoutilisateur En outre le langage a eacuteteacute eacutetendu agrave des constructions qui mecircme si elles
nrsquoaccroissent pas lrsquoexpressiviteacute ameacuteliorent la lisibiliteacute des speacutecifications tel que The next
time 6
6 Formellement t |= The next time ϕ then ψ si et seulement si t |= Notϕ Until (ϕ And ψ)
113
t |= νrsquos a equals νprimersquos aprime hArr ν(a) = ν
prime(aprime)t |= νrsquos a equals v hArr ν(a) = v
t |= Notϕ hArr t 6|= ϕ
t |= ϕ And ψ hArr t |= ϕ and t |= ψ
t |= ϕ Ou ψ hArr t |= ϕ or t |= ψ
t |= If ϕ Then ψ hArr t 6|= ϕ ou t |= ψ
t |= There exists ξ in $(c) such that ϕ hArr t |= ϕ[ξν ] pour certains ν isin χ(t0c)t |= For each ξ in $(c) ϕ hArr t |= ϕ[ξν ] pour tout ν isin χ(t0c)
t |= Alwaysϕ hArr t |= ϕ et t1 |= Alwaysϕ
t |= Eventuallyϕ hArr t |= ϕ ou t1 |= Eventuallyϕ
t |= Nextϕ hArr t1 |= ϕ
t |= ϕ Until ψ hArr Il existe ige 0 tel quet i |= ψ and t j |= ϕ for j lt i
When ξ is now ξ prime ϕ hArr Il existe ν prime isin t0 tel queν(id) = ν prime(id) and t |= ϕ[ξν prime]
Tableau 44 ndash La seacutemantique formelle de Cornipickle aaprime isin A sont les noms drsquoattributs DOMv isin V est une valeur drsquoattribut c isin C est un seacutelecteur CSS ξ et ξ prime sont des noms de variablesν ν prime isin N sont les nœuds DOM et ϕ et ψ sont des eacutenonceacutes Cornipickle quelconques Lorsque test vide Always srsquoeacutevalue agrave V rai et Eventually et Next srsquoevaluent agrave Faux
114
Le cas de lrsquoexpression When $x is now $y justifie une explication cependant Cette construc-
tion est utiliseacutee pour deacutesigner le mecircme eacuteleacutement drsquoun document agrave deux moments diffeacuterents dans
le temps En raison de la nature dynamique des applications web il ne suffit pas drsquoutiliser sim-
plement For each $x in $(s) suivi par For each $y in $(s) avec le mecircme seacutelecteur
CSS s Les eacuteleacutements drsquoune page peuvent ecirctre deacuteplaceacutes arbitrairement vers nrsquoimporte quelle
partie drsquoun document et par conseacutequent la reacutecupeacuteration drsquoeacuteleacutements avec le mecircme seacutelecteur
ne garantit pas qursquoils seront reacutepartis sur le mecircme domaine deux fois Cornipickle reacutesout ce
problegraveme en donnant agrave chaque eacuteleacutement un attribut unique appeleacute cornipickleid (raccourci
agrave id dans le tableau) Cet identifiant ne change jamais quelles que soient les manipulations de
lrsquoapplication sur un eacuteleacutement Lrsquoexpression When $x is now $y eacutevalue la variable $y avec
lrsquoeacuteleacutement ayant la mecircme cornipickleid comme cela a eacuteteacute donneacute agrave lrsquoeacutevaluation de la variable
$x permettant de comparer les attributs du mecircme eacuteleacutement dans deux instantaneacutes distincts de
la page
43 EXPRIMER DES PROPRIEacuteTEacuteS AVEC CORNIPICKLE
Au moyen drsquoune tel langage il est possible de donner des exemples de proprieacuteteacutes correspondant
agrave certains des bugs citeacutes preacuteceacutedemment Par exemple en prenant pour Mojibake lrsquoensemble
deacutefini preacuteceacutedemment la preacutesence de problegravemes de codage de caractegraveres dans une page peut
ecirctre deacutetecteacutee avec
We say that $x doesnrsquot contain $y when (Not ($xrsquos text matches $yrsquos value ))
For each $text in $(CDATA) (For each $mojibake in Mojibake ($text doesnrsquot contain $mojibake ))
Nous ajoutons la construction doesnrsquot contain agrave la grammaire simplement pour ameacuteliorer
115
la lisibiliteacute de la deacuteclaration qui suit
Similairement pour preacuteciser qursquoune classe speacutecifique drsquoeacuteleacutements ne devrait jamais se deacuteplacer
on peut eacutecrire ce qui suit
We say that $x is immobile when (Always (
When $x is now $y (($xrsquos left equals $yrsquos left)
And($xrsquos top equals $yrsquos top ))))
For each $item in $(li) ( $item is immobile )
Lrsquointuitiviteacute de speacutecifications peut encore ecirctre mise en eacutevidence dans ce dernier exemple qui
stipule qursquoau moins un eacuteleacutement de la liste a la valeur drsquoun autre eacuteleacutement de liste la derniegravere
fois que lrsquoutilisateur a cliqueacute sur un bouton appeleacute laquo Go raquo
We say that I click on Go when (There exists $b in $(button) such that (
($brsquos text is Go)And($brsquos event is mouseup)))
Always (If (I click on Go) Then (
There exists $x in $(value) such that (The next time (I click on Go)
Then (There exists $y in $(value) such that (
$xrsquos text equals $yrsquos text )))))
La lisibiliteacute de cette speacutecification devrait ecirctre mise en contraste avec le code proceacutedural qursquoon
aurait besoin drsquoeacutecrire pour deacutetecter le mecircme problegraveme qui est objectivement plus long et
beaucoup moins clair Par exemple dans jQuery on obtiendrait lrsquoeacutequivalent de la figure 45
Il est maintenant possible de reprendre certains exemples de bugs mentionneacutes en deacutebut de
thegravese et de montrer comment ceux-ci peuvent ecirctre deacutetecteacutes par des expressions Cornipickle
116
$(document)mouseUp(function(event) var e = argumentscalleeif ($(eventtarget)text() === Go) var current_values = []$(value)each(current_valuespush($(this)text())
)if (elastValues == undefined)
var found = falsefor (var v in current_values)
if ($inArray(v elastValues)) found = truebreak
If (found)
consolelog(Error)elastValues = current_values
)
Figure 45 ndash Exemple de code jQuery veacuterifiant que deux eacuteleacutements ont le mecircme texte
117
approprieacutees Prenons drsquoabord le cas drsquoun eacuteleacutement qui se deacuteplace dans une page cliquer sur
un eacuteleacutement change sa classe CSS cela entraicircne la modification de la zone de deacutelimitation de
lrsquoeacuteleacutement eacuteventuellement le deacuteplacement drsquoautres eacuteleacutements qui ne doivent pas bouger
On doit drsquoabord deacutefinir ce que signifie ecirctre immobile La construction When $x is now $y
nous permet de comparer les proprieacuteteacutes drsquoun mecircme eacuteleacutement dans deux snapshots diffeacuterents de
la page mecircme si le positionnement relatif de lrsquoeacuteleacutement dans le DOM a changeacute
We say that $x is immobile when (Always (
When $x is now $y (($xrsquos left equals $yrsquos left)And($xrsquos top equals $yrsquos top)
))
)
Avec cette expression il devient facile de speacutecifier par exemple que chaque eacuteleacutement drsquoune
liste doit demeurer agrave sa position
name Immobile itemsdescription List items should never change positionseverity Error
For each $item in $(li) (
$item is immobile)
De la mecircme maniegravere on peut speacutecifier que des eacuteleacutements doivent toujours ecirctre aligneacutes les uns
par rapport aux autres
Nous deacutefinissons drsquoabord quelques preacutedicats en utilisant la construction We say that
118
We say that $x and $y are left-aligned when ($xrsquos left equals $yrsquos left
)We say that $x and $y are top-aligned when (
$xrsquos top equals $yrsquos top)
We say that the page is big when (The media query (min-width 200px) applies
)The following rules apply when (
the page is big)
Ces preacutedicats nous permettent de simplifier lrsquoexpression rechercheacutee qui devient une double
quantification sur les eacuteleacutements drsquoune mecircme liste
name Menus aligneddescription All list items should either be left- or top-alignedseverity Warning
For each $z in $(menu li) (
For each $t in $(menu li) (($z and $t are left-aligned)Or($z and $t are top-aligned)
))
Nous ne faisons aucune reacuteclamation formelle concernant lrsquoexhaustiviteacute du langage ou son
expressiviteacute Cependant des preuves anecdotiques reacutevegravelent que tous les bogues de mise en
page dans notre enquecircte peuvent ecirctre exprimeacutes par une expression approprieacutee suggeacuterant qursquoil
est bien adapteacute agrave la tacircche agrave accomplir
CHAPITRE 5
DEacuteTECTION AVANCEacuteE BUGS COMPORTEMENTAUX ET RWD
Nous avons preacutesenteacute au chapitre preacuteceacutedent Cornipickle et la faccedilon drsquoeacutevaluer des bugs de
preacutesentation en analysant le contenu drsquoune seule page relativement indeacutependamment des
autres Dans ce chapitre nous nous inteacuteressons davantage aux bugs dits comportementaux
Dans ces bugs ce nrsquoest pas la preacutesentation graphique des pages qui est deacutefectueuse mais bien
la fonctionnaliteacute mecircme de lrsquoapplication Malgreacute tout nous pouvons exprimer et deacutetecter ces
bugs agrave partir de proprieacuteteacutes drsquoeacuteleacutements de lrsquointerface
Nous donnerons drsquoabord des exemples de bugs comportementaux illustreacutes dans une application
appeleacutee Beep Store Nous citons en suite les solutions actuelles et deacutecrivons ensuite notre
approche qui constitue une technique automatiseacutee fournissant des oracles de test dans le
but de deacutetecter les bugs comportementaux qui lient les donneacutees agrave lrsquoordre des consultations
de plusieurs pages de lrsquoapplication cela est fait en combinant Cornipickle avec un robot
drsquoexploration (RIA Crawler) Cette technique est aussi capables de veacuterifier la coheacuterence drsquoune
mise en page reacuteactive (responsive) sur une large gamme de largeurs de la fenecirctre Pour cela
nous avons inteacutegreacute une petite application dans le but de changer simultaneacutement la taille de la
fenecirctre du navigateur afin de deacutetecter des bugs RWD
120
51 BUGS COMPORTEMENTAUX DANS LE BEEP STORE
Afin drsquoeacutetudier les problegravemes de bugs comportementaux dans les applications RIA (Web 20)
deacutefinis dans 212 nous montrons quelques exemples de bugs illustreacutes sur une application
appeleacutee le Beep Store [53]
Le Beep Store est une application web client-serveur autonome impleacutementeacutee en PHP et
JavaScript qui permet aux utilisateurs enregistreacutes de parcourir une collection fictive de livres
et de musique et de geacuterer un panier virtuel composeacute de ces eacuteleacutements Cette application dont
les caracteacuteristiques ont eacuteteacute extraites drsquoune eacutetude exhaustive des applications web du monde
reacuteel est une RIA au sens propre du terme les interactions utilisateurs sont complegravetement
asynchrones ne neacutecessitent jamais le rechargement de la page deacutependent des actions passeacutees
des utilisateurs et consistent en un seul document dont les diffeacuterentes parties sont montreacutees
ou cacheacutees en fonction de lrsquoeacutetat actuel de lrsquoapplication
Connexions multiples Un des bugs qui peuvent ecirctre basculeacutes dans le Beep Store permet agrave
lrsquoutilisateur drsquoacceacuteder agrave la page de connexion tout en eacutetant deacutejagrave connecteacute Ceci est deacutetecteacute par
le fait que le lien laquo Srsquoidentifier raquo (Login) apparaicirct dans la barre drsquoaction supeacuterieure mecircme apregraves
que lrsquoutilisateur srsquoest connecteacute avec succegraves comme le montre la figure 51 1 Eacutevidemment une
application bien construite ne fournirait pas un bouton de connexion apregraves qursquoun utilisateur se
soit deacutejagrave connecteacute cette proprieacuteteacute est agrave eacutetat dans le sens ougrave lrsquoeacutetat valide drsquoune page deacutepend de
la seacutequence des actions passeacutees qui sont effectueacutees par lrsquoutilisateur (dans ce cas le fait qursquoune
connexion reacuteussie ait eu lieu)
1 On a vu au chapitre 2 comment des sites web reacuteels preacutesentent exactement ce problegraveme
121
Figure 51 ndash Le bug de connexions multiples Un utilisateur deacutejagrave connecteacute se voit proposer lrsquoop-tion de se reconnecter
Figure 52 ndash Le bug des paniers multiples Des boutons pour creacuteer un panier et ajouter desarticles au panier coexistent sur la mecircme page
Paniers multiples Un autre bug permet agrave lrsquoutilisateur de creacuteer plusieurs paniers drsquoachat
mecircme apregraves en avoir creacuteeacute un premier La figure 52 montre un exemple de ce bug un panier a
deacutejagrave eacuteteacute creacuteeacute puisque lrsquointerface affiche des boutons permettant agrave lrsquoutilisateur drsquoajouter des
articles au panier Pourtant les boutons pour creacuteer un nouveau panier sont eacutegalement afficheacutes
Supprimer drsquoun panier inexistant Ce bug est lrsquoinverse du preacuteceacutedent parfois le Beep
Store permet agrave lrsquoutilisateur de retirer un objet de son panier avant mecircme de le creacuteer Nous
pouvons voir dans la figure 53 que les boutons pour creacuteer un panier sont preacutesents avec les
boutons pour en retirer les eacuteleacutements
122
Figure 53 ndash Le bug de la suppression drsquoun panier inexistant Des boutons pour retirer du panieret creacuteer un panier coexistent sur la mecircme page
Ces bugs sont clairement comportementaux car ils sont causeacutes par des actions anteacuterieures
de lrsquoutilisateur ou des actions qui nrsquoont jamais eu lieu Il convient eacutegalement de noter que
selon lrsquoimpleacutementation du serveur ces bugs ne deacuteclenchent pas neacutecessairement des messages
drsquoerreur dans les logs Nous pouvons facilement imaginer un cas ougrave une action est rejeteacutee et ne
creacutee pas drsquoautres problegravemes mais le client ne devrait jamais avoir eacuteteacute preacutesenteacute avec lrsquooption
52 SOLUTIONS ACTUELLES
Les travaux connexes sur le test drsquoapplications web pour de tels types de bugs se concentrent
sur les moyens de trouver des erreurs dans les applications en effectuant une recherche
exhaustive de leur espace drsquoeacutetat
Les robots drsquoexploration (laquo crawlers raquo) font partie inteacutegrante des moteurs de recherche web et
sont deacutedieacutes agrave la collecte et agrave lrsquoindexation de documents web Ils ont eacuteteacute deacuteveloppeacutes agrave lrsquoorigine
pour lrsquoarchivage la reacutecupeacuteration drsquoinformations (trouver des adresses e-mail ou des pages
de produits par exemple) Cependant on a rapidement deacutecouvert que les crawlers pouvaient
ecirctre utiliseacutes agrave drsquoautres fins en particulier un crawler peut ecirctre consideacutereacute comme un outil
drsquoexploration drsquoespace drsquoeacutetat et agrave ce titre ecirctre utiliseacute pour effectuer des tests automatiseacutes
123
Un processus drsquoexploration traditionnel commence agrave partir des URL de deacutemarrage Les pages
web correspondant agrave ces URL sont teacuteleacutechargeacutees et les hyperliens preacutesents sur celles-ci sont
extraits et ajouteacutes agrave un ensemble drsquoURL agrave visiter eacutegalement appeleacute le crawl frontier Comme
le nombre drsquoURL qui peuplent la frontiegravere drsquoexploration augmente tregraves rapidement un critegravere
de priorisation du teacuteleacutechargement de certaines pages est geacuteneacuteralement appliqueacute Agrave leur tour
les URL les mieux classeacutees dans la limite de lrsquoexploration sont teacuteleacutechargeacutees et de nouveaux
liens sont extraits Cette opeacuteration est reacutepeacuteteacutee jusqursquoagrave ce que tous les liens accessibles soient
visiteacutes [62 65]
Certaines fonctionnaliteacutes de base des applications web traditionnelles sont modifieacutees dans
les RIA ce qui rend lrsquoexploration des RIA plus difficile que celle des applications web
traditionnelles Dans lrsquoanalyse RIA lrsquoordre drsquoanalyse respecte la seacutequence de pages possible
comme si un internaute lrsquoutilisait Comme nous lrsquoavons vu contrairement aux applications
web traditionnelles une URL nrsquoidentifie pas de faccedilon unique lrsquoeacutetat de lrsquoapplication et ne peut
donc pas ecirctre simplement demandeacutee au serveur agrave tout moment
Dans une application avec une gestion du panier comme le Beep Store il serait possible
pour un robot drsquoexploration traditionnel de trouver des bugs comportementaux lagrave ougrave il nrsquoy
en a pas lrsquoordre de visite est crucial Par exemple dans un sceacutenario ougrave lrsquoutilisateur peut
creacuteer un panier supprimer un panier ajouter un article agrave un panier et modifier un panier pour
modifier la quantiteacute un bug qui permet agrave lrsquoutilisateur drsquoeacutediter un article dans son panier sans
avoir de panier pourrait ecirctre deacutecouvert Apregraves la creacuteation drsquoun panier lrsquoajout drsquoun eacuteleacutement
et la suppression du panier lrsquoensemble drsquoURL du crawler traditionnel contient lrsquoURL agrave
modifier Ensuite lorsque vous essayez drsquoatteindre cette URL un bug survient car le panier a
eacuteteacute supprimeacute Cependant il peut srsquoagir drsquoun faux positif car cette seacutequence drsquoactions nrsquoest
probablement pas possible pour un utilisateur Un robot drsquoexploration traditionnel nrsquoest donc
pas adapteacute agrave la recherche de bugs comportementaux
124
Dans un crawler web pour RIA la page associeacutee agrave une seed URL (un crawler commence
par une liste drsquoURL agrave visiter appeleacutee les seeds) est extraite et chargeacutee dans un navigateur
virtuel Un module est requis pour veacuterifier si crsquoest la premiegravere fois que la page construite
est rencontreacutee Un extracteur drsquoeacuteveacutenements reacutecupegravere les eacuteveacutenements JavaScript de la page
un de ces eacuteveacutenements est seacutelectionneacute et exeacutecuteacute sur la page La page reacutesultante est ensuite
collecteacutee et le processus se poursuit jusqursquoagrave eacutepuisement de toutes les actions deacutecouvertes
[41] Sur la base de ce modegravele diffeacuterentes strateacutegies drsquoexploration (telles que la recherche en
profondeur (depth-first search) Greedy Model-Based et Component-Based) ont eacuteteacute suggeacutereacutees
[61 36 45 40 46 44]
Certains outils ont deacutejagrave eacuteteacute conccedilus pour tester les RIA Par exemple WebMate [43] peut
extraire lrsquoarborescence drsquoeacutetat drsquoune application web Cet arbre est ensuite compareacute aux arbres
drsquoeacutetat drsquoautres navigateurs pour trouver les diffeacuterences de mise en page Cependant il se
concentre sur la compatibiliteacute inter-navigateurs (cross-browser compatibility) et ne semble pas
prendre en charge les tests externes deacutefinis par lrsquoutilisateur
WebMole est un autre crawler automatiseacute qui geacuteneacuteralise les approches existantes Il eacutelimine
tout backtracking arbitraire en interceptant les requecirctes HTTP et fait des sauts de page [54]
Cependant lrsquoobjectif de WebMole est simplement drsquoextraire les graphes de navigation drsquoune
application il ne permet pas agrave un utilisateur drsquoeacutecrire des oracles de test agrave eacutevaluer pendant
lrsquoexploration de lrsquoapplication
De son cocircteacute Crawljax [60] utilise une strateacutegie en profondeur (depth-first strategy) pour
explorer et produire une machine agrave eacutetats finis du comportement de lrsquoapplication Il est possible
gracircce agrave son architecture de plugin de tester chaque eacutetat pendant qursquoils sont visiteacutes Cependant
les tests en question doivent ecirctre eacutecrits par lrsquoutilisateur en code Java pur cela rend lrsquoeacutecriture
des oracles de test dynamiques difficile pour des raisons mentionneacutees plus haut
125
53 SOLUTION PROPOSEacuteE
Pour remeacutedier agrave ces problegravemes nous proposons dans cette section une architecture qui
combine un robot drsquoindexation RIA (dans ce cas Crawljax) avec notre interpreacuteteur de langage
de haut niveau pour les oracles de test web Cornipickle Crawljax est responsable de
lrsquoexploration drsquoune application web en tenant compte de son eacutetat tandis que nous utilisons les
opeacuterateurs emprunteacutes de la logique temporelle lineacuteaire fournie par Cornipickle pour exprimer
des assertions sur lrsquoeacutevolution du contenu drsquoun document au fil du temps Cette architecture a
eacuteteacute codeacutee dans un plugin open source pour Crawljax 2
531 INTERACTION AVEC CRAWLJAX
Crawljax est un outil pour explorer automatiquement lrsquoeacutetat dynamique des applications web
modernes Via des interfaces de programmation il a la capaciteacute drsquointeragir avec le code cocircteacute
client de lrsquoapplication Nous lrsquoutilisons pour explorer le comportement de lrsquoapplication web agrave
tester Pour deacutetecter les clics Crawljax analyse une page Web et lrsquoutilise systeacutematiquement
pour explorer le comportement dynamique de lrsquoapplication [60 70]
Les modifications deacutetecteacutees dans lrsquoarbre DOM dynamique sont valideacutees en tant que nouveaux
eacutetats du comportement De nombreuses options sont disponibles avec Crawljax pour configurer
le comportement drsquoanalyse Nous pouvons par exemple speacutecifier les liens ou les widgets agrave
cliquer ou non au cours de lrsquoexploration Dans une variante Crawljax effectue une recherche
en profondeur en premier (depth-first search) stocke lrsquohistorique des exeacutecutions drsquoeacuteveacutenements
et nrsquoexeacutecute un eacuteveacutenement que si lrsquoeacuteveacutenement nrsquoa pas eacuteteacute exeacutecuteacute auparavant quel que soit
lrsquoeacutetat de lrsquoapplication [68]
2 http githubcomliflabcrawljax-cornipickle-plugin
126
Figure 54 ndash Flux drsquointeraction et de seacuterialisation (Crawljax-Cornipickle)
La figure 54 montre le workflow du systegraveme combineacute pour deacutetecter les bugs comportemen-
taux de lrsquoapplication testeacutee Crawljax explore le comportement de lrsquoapplication web sous
test (Exploration) Il interagit avec Cornipickle agrave travers son architecture de plugin (Plugin
Cornipickle (capture)) (1) Chaque fois qursquoun eacutetat est creacuteeacute (OnNewState) ou visiteacute (OnRevisit)
Crawljax seacuterialise la page (seacuterialisation JSON) et lrsquoenvoie agrave lrsquointerpreacuteteur (2) pour lrsquoeacutevaluer
de la mecircme maniegravere que la sonde envoie la page au serveur Cornipickle dans lrsquoarchitecture
traditionnelle (Cornipickle eacutevaluation) Apregraves que la page ait eacuteteacute eacutevalueacutee par Cornipickle le
verdict (3) est retourneacute et le plugin affiche le reacutesultat (Outputs)(4)
Il est important de se rappeler que chaque eacutetat de lrsquoapplication est visiteacute par Crawljax dans la
mecircme seacutequence qursquoun utilisateur Mecircme quand il revient agrave un eacutetat anteacuterieur il recommence au
deacutebut de lrsquoexploration et prend le mecircme chemin jusqursquoagrave ce que lrsquoeacutetat deacutesireacute soit atteint
532 REDIMENSIONNMENT DU NAVIGATEUR
Ce mecircme principe peut ecirctre facilement modifieacute pour eacutegalement deacutetecter des bugs RWD Pour
ce faire nous avons creacuteeacute un autre plugin qui cette fois redimensionne le navigateur drsquoune
127
largeur donneacutee agrave une autre largeur
Eacutetant donneacute que lrsquoutilisation drsquoune barre de deacutefilement verticale nrsquoest pas un problegraveme dans le
responsive design seul le redimensionnement horizontal est lrsquoapproche correcte pour deacutetecter
les bugs RWD Puisque nous voulons explicitement trouver des bugs lieacutes au RWD le plugin
diminue lentement la largeur du navigateur ces bugs apparaissent sur des largeurs infeacuterieures
ougrave lrsquoespace disponible devient de plus en plus rare en reacutefeacuterence agrave des largeurs plus grandes Il
est possible de fournir au plugin la borne supeacuterieure la borne infeacuterieure et la quantiteacute de pixels
pour la deacutecreacutementation Le plugin met eacutegalement en eacutevidence les bugs qursquoil trouve et prend
une capture drsquoeacutecran de la page Nous obtenons ensuite des captures drsquoeacutecran ougrave les eacuteleacutements
responsables du bug ont des bordures rouges
54 EXPEacuteRIENCES ET REacuteSULTATS
Comme on peut le voir la deacutetection de bugs comportementaux et de bugs RWD dans les
deux cas peut se reacutesumer agrave la veacuterification de proprieacuteteacutes exprimeacutees sur des seacutequences de pages
Dans le premier cas elles sont fournies par un robot drsquoexploration et dans le second cas par
le redimensionnement reacutepeacutetitif de la fenecirctre du navigateur sur une mecircme page
Nous deacutetaillons maintenant quelques exemples de proprieacuteteacutes Cornipickle permettant de deacutetecter
des bugs comportementaux et des bugs RWD
541 DEacuteTECTION DE BUGS COMPORTEMENTAUX DANS BEEPSTORE
Nous expliquons drsquoabord les bugs comportementaux du Beep Store deacutecrits preacuteceacutedemment et
nous montrons comment ils peuvent ecirctre captureacutes par Crawljax en eacutevaluant les assertions de
Cornipickle lors de lrsquoexploration drsquoune application
128
Connexions multiples Le premier bug est celui des connexions multiples Ce bug peut
facilement ecirctre deacutetecteacute par les expressions suivantes
We say that we are signed in when (There exists $p in $(action-band) such that (
$prsquos text matches ^Welcome))
We say that we are in the login page when (There exists $div in $(sign-in) such that (
Not ( $divrsquos display is none )))
Always (If ( we are signed in ) Then (
Not ( we are in the login page )))
Les deux deacutefinitions We say that expliquent comment on deacutefinit le fait drsquoecirctre connecteacute et
drsquoecirctre dans la page de connexion dans le Beep Store Lrsquoexpression There exists x in y such
that (z) est utiliseacutee pour affecter agrave la variable x un eacuteleacutement de lrsquoensemble y ougrave z est vrai Nous
pouvons voir que lrsquoensemble y dans le second preacutedicat est composeacute de tous les eacuteleacutements
avec lrsquoidentifiant laquo sign-in raquo et il srsquoassure que z est vrai avec au moins un drsquoentre eux La
construction x matches y quant agrave elle veacuterifie si x correspond agrave lrsquoexpression reacuteguliegravere y et
la construction x is y veacuterifie si x est eacutegal agrave y Enfin lrsquoinstruction Always (x) veacuterifie que x est
vrai dans chaque instantaneacute En un mot il ne devrait jamais arriver que la bande drsquoaction dise
laquo Welcome raquo pendant que le div avec lrsquoidentifiant laquo sign-in raquo est afficheacute
Agrave titre de comparaison la figure 55 montre comment on pourrait attraper le mecircme bug
uniquement avec Crawljax et son architecture de plugin La lisibiliteacute est beaucoup plus faible
et avec des proprieacuteteacutes plus complexes nous pouvons voir donc comment le code peut devenir
complexe et long
129
private enum Verdict TRUE FALSE INCONCLUSIVEprivate Verdict m_verdict
Overridepublic void onNewState(CrawlerContext context StateVertexnewState) if(m_verdict == VerdictINCONCLUSIVE) EmbeddedBrowser browser = contextgetBrowser()
Identification identificationActionBand =new Identification(IdentificationHowid action-band)
booleansignedIn = false
Identification identificationSignInDiv =new Identification(IdentificationHowid sign-in)
booleancurrentlyInLoginPage = false
if(browserelementExists(identificationActionBand)) WebElementactionBand = browsergetWebElement(identificationActionBand)if(Patternmatches(^Welcome actionBandgetText())) signedIn = true
if(browserelementExists(identificationSignInDiv)) WebElementsignInDiv = browsergetWebElement(identificationSignInDiv)if(signInDivisDisplayed()) currentlyInLoginPage = true
if(signedIn) if(currentlyInLoginPage) m_verdict = VerdictFALSE
output(context newState)
Figure 55 ndash Le code neacutecessaire pour attraper le bug des connexions multiples en utilisant Crawl-jax sans Cornipickle
130
Paniers multiples Le bug des paniers multiples peut ecirctre deacutetecteacute par cette proprieacuteteacute
We say that we are signed in when (There exists $p in $(action-band) such that (
$prsquos text matches ^Welcome))
We say that we create a cart when (There exists $button in $(button-create-cart)
such that ($buttonrsquos event is click
))
The next time ( we are signed in ) Then (The next time ( we create a cart ) Then (
Always (Not ( we create a cart )
)))
Les deacuteclarations temporelles The next time x Then (y) eacutevaluent agrave vrai si y eacutevalue agrave vrai
mais seulement apregraves que x le soit Donc apregraves que nous nous soyons connecteacutes et apregraves que
nous ayions cliqueacute sur le bouton laquo creacuteer un panier raquo nous ne devrions plus jamais cliquer sur
laquo creacuteer un panier raquo
Le bug de suppression drsquoun panier existant se gegravere de maniegravere similaire nous ne le deacutecrirons
pas en deacutetail ici
Il est agrave noter que lrsquoeacutevaluation drsquoun eacutetat avec ces proprieacuteteacutes Cornipickle prend entre 36 et 74
millisecondes par page avec un processeur Intel Core i5-3470 Gardez agrave lrsquoesprit que bien que
les proprieacuteteacutes soient assez simples le Beep Store est une tregraves grande application agrave seacuterialiser
car mecircme les blocs non afficheacutes doivent ecirctre inclus
131
542 DEacuteTECTION DE BUGS RWD DANS DE VRAIS SITES WEB
Nous montrons maintenant quelques exemples de proprieacuteteacutes Cornipickle pour la deacutetection
de bugs RWD Les comportements drsquoun site web sont uniques pour chaque site Pour cette
raison la deacutetection des bugs comportementaux neacutecessite des proprieacuteteacutes speacutecifiques Drsquoautre
part le Responsive Web Design est une approche geacuteneacuterale de la conception Web similaire aux
modegraveles de conception (design patterns) dans les langages traditionnels Les eacutechecs dans lrsquoim-
pleacutementation de cette conception doivent ecirctre deacutetectables avec des proprieacuteteacutes geacuteneacuterales Pour
cette raison les proprieacuteteacutes deacutecrites dans cette section ne constituent que des avertissements
une violation ne devrait pas signifier qursquoil srsquoagit drsquoun bug dans tous les cas
Preacutesence de barres de deacutefilement Lrsquoune des premiegraveres indications drsquoun site web pas res-
ponsive est la preacutesence drsquoune barre de deacutefilement horizontale Pour deacutetecter ce bug une simple
proprieacuteteacute Cornipickle peut ecirctre deacutefinie
We say that there is an horizontal scrollbar when (the pagersquos width is less than
the pagersquos scroll-width)
name No horizontal scrollbardescription There should never be an horizontal scrollbarseverity Error
Always (
Not ( there is an horizontal scrollbar ))
Dans cette proprieacuteteacute lrsquointerception drsquoune barre de deacutefilement horizontale peut ecirctre obtenue en
comparant la largeur de la fenecirctre (viewportwidth) avec la largeur de deacutefilement (scroll-width)
132
Cela ne devrait jamais arriver si elle est toujours entoureacutee avec la construction Always Not
Collision drsquoeacuteleacutements Crsquoest le bug ougrave les eacuteleacutements se chevauchent Cette proprieacuteteacute com-
mence par certaines deacutefinitions du langage pour simplifier le cœur de la proprieacuteteacute agrave la fin Elle
deacutecrit les intersections horizontales et verticales un eacuteleacutement visible deux eacuteleacutements identiques
et des chevauchements
We say that $x x-intersects $y when ((($yrsquos right - 1) is greater than $xrsquos left)And(($xrsquos right - 1) is greater than $yrsquos left)
)
We say that $x y-intersects $y when ((($yrsquos bottom - 1) is greater than $xrsquos top)And(($xrsquos bottom - 1) is greater than $yrsquos top)
)
We say that $x is visible when (Not ( $xrsquos display is none )
)
We say that $x and $y are the same when ($xrsquos cornipickleid equals $yrsquos cornipickleid
)
We say that $x and $y are not the same when (Not ($x and $y are the same)
)
We say that $x and $y overlap when ((($x is visible) And ($y is visible))And(
($x x-intersects $y)And($x y-intersects $y)
133
))
We say that $x and $y do not overlap when (Not ($x and $y overlap)
)
La premiegravere deacutefinition utilise laquo right - 1 raquo car les eacuteleacutements qui se croisent doivent se croiser drsquoau
moins 2 pixels Il surmonte un problegraveme ougrave nous recevons des dimensions et des coordonneacutees
en entiers (pixels) mais le navigateur peut travailler avec des floats dans le cas drsquoeacuteleacutements
ayant des dimensions en ratios Ces floats sont arrondis et peuvent provoquer des diffeacuterences
de 1 pixel entre ce qui est afficheacute et ce qui est seacuterialiseacute Il est vrai que nous pouvons manquer
des bugs qui sont leacutegitimement agrave 1 pixel mais il est important de ne pas punir les bonnes
pratiques
La deacutefinition drsquoun eacuteleacutement visible veacuterifie uniquement si la proprieacuteteacute display est laquo none raquo car ces
eacuteleacutements ne provoquent aucun changement de disposition En outre cette valeur est affecteacutee
consciemment par le deacuteveloppeur afin que leur position sur la page soit correcte Le troisiegraveme
deacutecrit deux eacuteleacutements qui sont identiques en utilisant la proprieacuteteacute laquo cornipickleid raquo Cette
proprieacuteteacute est une valeur unique donneacutee agrave chaque eacuteleacutement important dans la page pendant la
phase de seacuterialisation Comme il est unique il peut ecirctre utiliseacute pour identifier si deux eacuteleacutements
sont identiques
La derniegravere construction deacutefinit deux eacuteleacutements qui se chevauchent Si elles sont agrave la fois
visibles et qursquoelles se croisent verticalement et horizontalement elles sont consideacutereacutees dans
une collision
name Element Collisiondescription All items that arenrsquot
overlapping initially shouldnrsquot ever overlap
134
severity WarningAlways (
For each $x in $(body ) (For each $y in $($x gt ) (
For each $z in $($x gt ) (If ( ($y and $z are not the same) And
($y and $z do not overlap) ) Then (Next (
When $y is now $a (When $z is now $b (
$a and $b donrsquot overlap)))))))
Enfin les trois constructions For each rassemblent tous les eacuteleacutements et leurs enfants directs
Elle permet de tester des paires de fregraveres et sœurs pour leur proprieacuteteacute de recouvrement Notez
qursquoelle ne veacuterifie pas si un eacuteleacutement chevauche un laquo cousin raquo car ce cousin aurait besoin de violer
la proprieacuteteacute Protrusion (qui nrsquoest pas deacutetailleacutee dans cette thegravese) La proprieacuteteacute pourrait ecirctre faite
en testant chaque eacuteleacutement avec tous les autres eacuteleacutements mais il est coucircteux en performance
Les deux constructions When $x is now $y rassemblent la paire dans la capture drsquoeacutecran
suivante afin de la comparer agrave elle-mecircme dans la capture drsquoeacutecran preacuteceacutedente Dans lrsquoensemble
la proprieacuteteacute dit que si deux fregraveres et sœurs ne se chevauchent pas agrave un moment donneacute ces
deux fregraveres et sœurs ne devraient pas se chevaucher au moment suivant
Les autres bugs RWD (deacutepassement des eacuteleacutements etc) deacutecrits au chapitre 2 peuvent ecirctre
traiteacutes de maniegravere similaires nous ne les deacutetaillerons pas ici
Agrave titre eacutevaluatif nous avons eacutevalueacute une proprieacuteteacute en fonction du nombre drsquoeacuteleacutements Le temps
de calcul de lrsquointerpreacuteteur en fonction du nombre drsquoeacuteleacutements dans la page est montreacute dans la
figure 56 Le temps de calcul en incluant la seacuterialisation de la page par la sonde JavaScript et
lrsquointerpreacutetation de la proprieacuteteacute en fonction du nombre drsquoeacuteleacutements dans la page est preacutesenteacute
dans la figure 57 Nous pouvons constater que lrsquointerpreacuteteur srsquoexeacutecute tregraves rapidement crsquoest
135
Figure 56 ndash Temps de calcul de lrsquointerpreacuteteur en fonction du nombre drsquoeacuteleacutements dans la page
bien la seacuterialisation de la page par la sonde qui prend le plus de temps dans le processus global
136
Figure 57 ndash Temps de calcul incluant la seacuterialisation de la page par la sonde JavaScript etlrsquointerpreacutetation de la proprieacuteteacute en fonction du nombre drsquoeacuteleacutements dans la page
CHAPITRE 6
VERS UN MEILLEUR FEEDBACK POUR LrsquoUTILISATEUR
Jusqursquoici nous avons preacutesenteacute un outil automatiseacute pour la deacutetection des bugs drsquointerface
permettant drsquoeacutevaluer les expressions dans un langage deacuteclaratif de haut niveau baseacute sur la
logique temporelle lineacuteaire et de premier ordre Or les pages web sont composeacutees de centaines
drsquoeacuteleacutements avec des dizaines drsquoassertions de proprieacuteteacutes qui doivent tenir de plus les deacutefauts
de mise en page sont parfois trop subtils pour ecirctre visibles agrave lrsquoœil nu (comme les eacuteleacutements drsquoun
seul pixel) Par conseacutequent lrsquoeacutevaluation de base de ces proprieacuteteacutes renvoyant un simple verdict
vraifaux ne serait pas tregraves utile pour un concepteur Le fait de simplement dire que laquo quelque
chose ne va pas raquo apporte peu de valeur ajouteacutee lorsque quelqursquoun doit rechercher le problegraveme
dans une page aussi complexe Pour fournir une reacuteelle eacutevaluation aux praticiens un outil
drsquoanalyse de la mise en page devrait donc ecirctre capable de repeacuterer des eacuteleacutements speacutecifiques de
la page qui sont responsables de certains bugs
Agrave cette fin Cornipickle a eacuteteacute eacutequipeacute drsquoun meacutecanisme pour essayer de circonscrire des parties
drsquoune page qui expliquent la faute deacutecouverte Notre travail sur la deacutetection de bugs de mise en
page est donc devenu une forme de localisation de deacutefaut (fault localization) Nous allons dans
ce chapitre exposer deux tentatives afin de fournir agrave lrsquoutilisateur un verdict plus riche qursquoun
simple vraifaux La premiegravere conduit agrave une construction appeleacutee laquo teacutemoin raquo baseacutee sur une
138
fonction appliqueacutee reacutecursivement sur la formule qui est falsifieacutee Un teacutemoin met en eacutevidence
un ensemble drsquoeacuteleacutements dans la page qui sont lieacutes drsquoune certaine maniegravere agrave la violation drsquoune
proprieacuteteacute
Cela srsquoest reacuteveacuteleacute insuffisant dans la pratique par la suite nous reprenons le travail sur une
nouvelle base formelle fondeacutee cette fois sur le concept de laquo reacuteparation raquo Intuitivement une
reacuteparation est un ensemble minimal de transformations qui lorsqursquoelles sont appliqueacutees agrave
lrsquoobjet original reacutetablissent sa satisfiabiliteacute par rapport agrave la speacutecification Lrsquoavantage de ce
concept est qursquoil est indeacutependant de la nature de lrsquoobjet et du langage de speacutecification utiliseacute
pour deacuteclarer ses proprieacuteteacutes attendues Il pourrait donc ecirctre appliqueacute agrave une varieacuteteacute drsquoautres
sceacutenarios en plus des applications web
61 GEacuteNEacuteRATION DE CONTRE-EXEMPLE LES TEacuteMOINS
Gracircce agrave la nature des speacutecifications du langage Cornipickle baseacutees sur la logique il est possible
drsquoanalyser systeacutematiquement une assertion quand elle est eacutevalueacutee agrave faux et drsquoidentifier les
eacuteleacutements qui sont laquo responsables raquo de la fausseteacute de cette assertion
Verdicts et teacutemoins
Nous appelons teacutemoin un arbre drsquoeacuteleacutements DOM soit W sube T lrsquoensemble de tous les teacutemoins
(W pour witness) Lrsquoensemble des verdicts est deacutefini comme V BcupgtperptimesW timesW un
verdict est composeacute drsquoune valeur de veacuteriteacute et de deux teacutemoins lrsquoun correspondant agrave la valeur
de veacuteriteacute gt lrsquoautre agrave la valeur de veacuteriteacute perp
139
La conjonction de verdicts est une fonction otimes V timesNtimesV rarrV deacutefinie comme suit
otimes(〈bwgtwperp〉ν 〈bprimewprimegtwprimeperp〉) =
〈perpwgtwperpcup(ν wprimeperp)〉 si bprime =perp
〈bandbprimewgtcup(ν wprimegt)wperp〉 si b 6=perp
〈bwgtwperp〉 sinon
Nous interpreacutetons bandbprime comme la conjonction classique agrave trois valeurs La notation (ν w)
deacutesigne la creacuteation drsquoun nouveau teacutemoin (witness) dont la racine est le nœud DOM ν avec le
teacutemoin w comme son enfant La notation wcupwprime deacutesigne lrsquoaddition de wprime aux enfants du teacutemoin
w Nous allons abuser de la notation et accepter que le deuxiegraveme argument de otimes pourrait ecirctre
un eacuteleacutement laquo vide raquo de N nous deacutesignerons comme ν 0 Cet eacuteleacutement est neacutecessaire de sorte que
chaque opeacuteration sur les verdicts peut surclasser un teacutemoin existant avec un nouveau nœud
racine mecircme srsquoil nrsquoy a rien agrave laquo teacutemoigner raquo
La conjonction de verdicts met agrave jour le contenu drsquoun verdict existant v et donne un autre
verdict vprime et un eacuteleacutement DOM ν Si vprime est faux il porte un teacutemoignage de cette fausseteacute agrave
savoir wprimeperp ce teacutemoin est attacheacute comme un enfant drsquoun nouvel arbre dont la racine est ν et
cet arbre est ajouteacute au teacutemoignage de la fausseteacute de v wperp De plus la valeur de veacuteriteacute de v
est deacutefinie comme eacutetant perp Autrement dit lrsquoexplication de vprime pour ecirctre fausse est ajouteacutee agrave
lrsquoexplication de v pour ecirctre fausse Dans le cas contraire si ni le premier eacuteleacutement de v ni celui
de vprime est faux alors le teacutemoin vprime associeacute agrave gt est ajouteacute au teacutemoin gt de v et sa valeur de veacuteriteacute
est mise agrave jour en conseacutequence Dans tous les autres cas v est laisseacute inchangeacute
140
ω(tνrsquos a equals ν primersquos aprime) =
〈gtν ν prime 0〉 if ν(a) = ν prime(aprime)〈gt 0ν ν prime〉 otherwise
ω(tνrsquos a equals v) =
〈gtν 0〉 if ν(a) = v〈perp 0ν〉 otherwise
ω(tNotϕ) = (ω(tϕ)ν 0)ω(tϕ And ψ) = otimes(otimes(〈gt 0 0〉ν 0ω(tϕ))ν 0ω(tψ))
ω(tϕ Or ψ) = oplus(oplus(〈perp 0 0〉ν 0ω(tϕ))ν 0ω(tψ))ω(tIf ϕ Then ψ) = oplus(oplus(〈perp 0 0〉ν 0(ω(tϕ)ν 0))ν 0ω(tψ))
ω(tThere exists ξ in$(c) such that ϕ)
=oplus〈perp 0 0〉
νisinχ(t0c)ω(tϕ[ξν ])
ω(tFor each ξ in $(c) ϕ) =otimes〈gt 0 0〉
νisinχ(t0c)ω(tϕ[ξν ])
Tableau 61 ndash La deacutefinition reacutecursive de la fonction de calcul du verdict ω
La disjonction de verdict oplus V timesNtimesV rarrV est deacutefinie comme le dual de la conjonction
oplus(〈bwgtwperp〉ν 〈bprimewprimegtwprimeperp〉) =
〈gtwgtcup(ν wprimegt)wperp〉 si bprime =gt
〈borbprimewgtwperpcup(ν wprimeperp)〉 si b 6=gt
〈bwgtwperp〉 sinon
Enfin la neacutegation du verdict est la fonction V timesNrarrV deacutefinie comme suit
(〈bwgtwperp〉ν) =
〈notbwperpcup(ν wgt)wgtcup(ν wperp)〉 si b isin gtperp
〈bwgtwperp〉 sinon
Intuitivement inverse les teacutemoins associeacutes agrave gt et perp et les surmonte drsquoune nouvelle racine
avec le nœud DOM ν Cela nrsquoa aucun effet lorsque le verdict est laquo raquo
En utilisant ces opeacuterateurs la seacutemantique formelle de Cornipickle deacutecrite dans le tableau 44
peut alors ecirctre eacutetendue agrave une fonction ω T lowasttimesΦrarrV qui sur une expression ϕ isinΦ et une
trace t isin T lowast calcule un verdict
141
La notationotimes〈gt 0 0〉
νisinχ(t0c)ω(tϕ[ξν ]) est un raccourci pour
otimes(〈gt 0 0〉ν 0otimes(ω(tϕ[ξν0])ν0otimes(ω(tϕ[ξν1])ν1 middot middot middot)))
En drsquoautres termes elle deacutesigne la conjonction reacutepeacuteteacutee du verdict de ω(tϕ[ξν ]) pour chaque
ν isin χ(t0c) agrave partir du verdict vide 〈gt 0 0〉 Une notation similaire est utiliseacutee pour oplus
Cette deacutefinition est difficile agrave lire en termes de notation cependant le lecteur peut reacutealiser en
lrsquoexaminant que la deacutefinition de chaque cas correspond agrave lrsquointuition Par exemple construire
le verdict de laquo ϕ And ψ raquo revient agrave deacutemarrer du verdict laquo vide raquo 〈gt 0 0〉 et lui joindre
successivement le verdict de ϕ et ψ
De mecircme construire le verdict pour une expression quantifieacutee existentiellement ϕ(x) est
obtenu en calculant successivement la disjonction du verdict de ϕ(k) pour chaque k du verdict
initial 〈perp 0 0〉 Ceci est compatible avec le fait que existx isin S ϕ(x) est eacutequivalent agraveor
kisinS ϕ(k)
Enfin un raisonnement similaire srsquoapplique aux opeacuterateurs temporels lineacuteaires Par exemple
t |= Alwaysϕ peut ecirctre deacutefini comme t |= ϕ et t1 |= Alwaysϕ drsquoougrave les verdicts ω(tϕ) et
ω(t1Always ϕ) sont combineacutes en utilisant la conjonction verdict
A titre drsquoillustration de cette proceacutedure nous montrerons comment un verdict peut ecirctre
calculeacute pour lrsquoexpression suivante en consideacuterant lrsquoarbre de la figure 44 For each $x in
$(p) For each $y in $(p) $xrsquos width equals $yrsquos width Le document contient
trois paragraphes que nous appellerons p1 p2 et p3 le premier et le troisiegraveme ont une largeur
(width) de 400 tandis que le second a une largeur de 200 La deacuteclaration inteacuterieure $xrsquos
width equals $yrsquos width sera donc eacutevalueacutee neuf fois une fois pour chaque combinaison
de nœuds DOM pour $x et $y
Selon la deacutefinition de la fonction ω dans le tableau 61 chaque eacutevaluation produira un verdict
142
de la forme 〈gtpi p j 0〉 quand pi et p j ont la mecircme largeur et 〈perp 0pi p j〉 quand ils
sont deacutefinis autrement Dans le premier cas la deacuteclaration srsquoeacutevalue agrave gt et les nœuds DOM pi
et p j sont ajouteacutes comme gt-teacutemoins de ce fait Lrsquoinverse srsquoapplique lorsque lrsquoinstruction est
fausse
Ces verdicts sont ensuite reacuteunis dans le quantificateur universel le plus profond Un verdict
vide 〈gt 0 0〉 est drsquoabord creacuteeacute et tous les verdicts pour lrsquoexpression inteacuterieure sont ensuite
combineacutes en utilisant la conjonction verdict Par exemple quand $x se reacutefegravere agrave p1 trois
verdicts sont joints 〈gtp1 p1 0〉 〈perp 0p1 p2〉 et 〈gtp1 p3 0〉 Selon la deacutefinition
de conjonction de verdict le verdict reacutesultant sera
〈perp(ν 0〈gtp1 p1 0〉)(ν 0〈gtp1 p3 0〉)(ν 0〈perp 0p1 p2〉)〉
Les deux verdicts internes srsquoeacutevaluant agrave gt sont attacheacutes au teacutemoin associeacute agrave gt et le verdict
eacutevaluant perp est attacheacute au teacutemoin associeacute agrave perp Trois de ces verdicts seront produits par le
quantificateur le plus interne un pour chaque valeur de $x qui seront ensuite combineacutes en
utilisant agrave nouveau la conjonction par le quantificateur universel le plus externe ce qui donnera
le verdict final
〈perp 0
(ν 0〈perp(ν 0〈gtp1 p1 0〉)(ν 0〈gtp1 p3 0〉)(ν 0〈perp 0p1 p2〉)〉)
(ν 0〈perp(ν 0〈gtp2 p2 0〉)(ν 0〈perp 0p1 p2〉)(ν 0〈perp 0p2 p3〉)〉)
(ν 0〈perp(ν 0〈gtp1 p3 0〉)(ν 0〈gtp3 p3 0〉)(ν 0〈perp 0p2 p3〉)〉) 〉
Lrsquoimpleacutementation actuelle de Cornipickle peut calculer ces verdicts et les renvoyer agrave la sonde
JavaScript Les verdicts sont envoyeacutes agrave la sonde sous forme drsquoune liste Cornipickle ID Chaque
143
A list item
Another list item
A third list item
The last list item
(a)
A list item
Another list item
A third list item
The last list item
(b)
Figure 61 ndash Exemple drsquoune erreur de mise en page Web simple (a) lrsquoun des eacuteleacutements de la listeest incorrectement aligneacute avec les autres (b) un teacutemoin (witness) produit par lrsquooutil Cornipickle
ID est unique correspondant un eacuteleacutement speacutecifique dans la page ce qui permet drsquoentourer
lrsquoeacuteleacutement en question dans la fenecirctre du navigateur
62 LOCALISATION DES ERREURS DANS LES APPLICATIONS WEB
Agrave notre connaissance le principe de calcul du verdict deacutecrit preacuteceacutedemment fait de Cornipickle
un des tout premiers systegravemes agrave expliquer graphiquement en quoi une proprieacuteteacute est violeacutee
Malheureusement nous avons deacutecouvert que ce principe laisse tout de mecircme un peu agrave deacutesirer
Par exemple consideacuterons la proprieacuteteacute voulant que tous les eacuteleacutements drsquoune liste avec lrsquoID
laquo menu raquo doivent ecirctre aligneacutes verticalement
For each $x in $(menu li) (For each $y in $(menu li) (
$xrsquos left equals $yrsquos left))
Pour cet exemple particulier la figure 61a montre une page simple pour laquelle la proprieacuteteacute
serait violeacutee Nous pouvons voir le reacutesultat de lrsquoapplication de ω deacutefinie dans la section
preacuteceacutedente sur lrsquoarbre DOM de la figure 61a La fonction retourne un arbre contenant des
pointeurs sur deux des eacuteleacutements de la page surligneacutes en rouge dans la figure 61b (En fait la
fonction renvoie plusieurs ensembles chacun contenant le second eacuteleacutement de liste et lrsquoun des
eacuteleacutements restants)
144
Intuitivement un tel reacutesultat est logique pour un concepteur de sites web en effet ces deux
eacuteleacutements doivent ecirctre aligneacutes alors qursquoils ne le sont pas Cependant cette information ne peut
ecirctre deacuteduite que par la connaissance de la proprieacuteteacute violeacutee le teacutemoin pointe simplement ces
deux eacuteleacutements sans fournir drsquoinformations sur laquo ce qui ne va pas raquo agrave leur sujet Alors que la
geacuteneacuteration de contre-exemple reacutecursif preacutesente dans la version actuelle de Cornipickle fournit
plus drsquoinformations qursquoun simple verdict vraifaux dans de nombreux cas elle peut donc
srsquoaveacuterer trop vague pour ecirctre utile
Nous introduisons la notion de reacuteparation qui peut ecirctre deacutefinie intuitivement comme un
ensemble de modifications neacutecessaires agrave un objet pour le rendre conforme agrave une proprieacuteteacute
La notion de reacuteparation peut ecirctre vue comme une localisation de deacutefaut exprimeacutee en sens
inverse indiquer comment un objet doit ecirctre reacutepareacute indirectement pointe vers des aspects de
sa structure qui sont responsables du fait que la proprieacuteteacute nrsquoest pas actuellement remplie Nous
verrons que contrairement au concept de teacutemoin qui est une technique lineacuteaire en fonction
de la taille de la formule et fortement associeacute au langage de speacutecification et aux objets de
domaine utiliseacutes les reacuteparations sont deacutefinies agrave un niveau drsquoabstraction qui ne deacutepend pas des
proprieacuteteacutes de lrsquoun ou de lrsquoautre
621 DEacuteFINITIONS
Soit Σ un ensemble de structures et TΣ un ensemble drsquoendomorphismes sur Σ crsquoest-agrave-dire
que chaque τ isin TΣ est une fonction τ Σrarr Σ Soit 2TΣ lrsquoensemble de tous les sous-ensembles
de TΣ Un ensemble drsquoendomorphismes T = τ1 τn isin 2TΣ est dit ecirctre bien deacutefini si
deux eacuteleacutements τi τ j sont tels que τi τ j equiv τ j τ j Un tel ensemble bien deacutefini sera appeleacute
transformation Lorsque le contexte est clair nous allons abuser de la notation et consideacuterer T
comme lrsquoendomorphisme (deacutefini de faccedilon unique) τ1 middot middot middot τn Lrsquoinclusion drsquoensembles induit
145
un ordre partiel sur les transformations
Soit Φ un ensemble drsquoexpressions de langage eacutequipeacutees drsquoune relation de satisfaction |= Σtimes
Φrarr gtperp Pour une expression ϕ isinΦ et une structure σ isin Σ nous eacutecrirons σ |= ϕ si et
seulement si |= (σ ϕ) =gt Dans un tel cas nous dirons que σ laquo veacuterifie raquo ϕ ou alternativement
que σ est un modegravele de ϕ
Soit σ isin Σ une structure telle que σ 6|= ϕ pour une expression ϕ isin Φ Une reacuteparation est
deacutefinie comme une transformation T isin 2TΣ telle que T (σ) |= ϕ Une reacuteparation est dite prime
si aucun sous-ensemble T prime sube T est tel que T prime est aussi une reacuteparation Intuitivement une
reacuteparation principale est un ensemble de laquo changements raquo sur une structure σ qui satisfait ϕ
de sorte qursquoaucune modification laquo plus petite raquo ne restaure aussi la satisfiabiliteacute Comme sube
est une commande partielle il peut y avoir plusieurs reacuteparations principales mutuellement
incomparables
La figure 62 illustre ce concept Lrsquoimage repreacutesente toutes les transformations qui peuvent
ecirctre appliqueacutees agrave une structure dans le cas simple ougrave seulement quatre morphismes existent
La transformation vide est en bas et chaque flegraveche dans le graphe repreacutesente lrsquoajout drsquoun
morphisme suppleacutementaire agrave une transformation existante Les nœuds rouges indiquent les
transformations qui ne sont pas reacutepareacutees tandis que les nœuds jaunes et verts indiquent les
reacuteparations Parmi ceux-ci les reacuteparations principales sont coloreacutees en vert on peut voir que
tous les anteacuteceacutedents des nœuds verts sont rouges Lrsquoinverse cependant nrsquoest pas vrai tous les
descendants drsquoune reacuteparation ne sont pas eux-mecircmes reacutepareacutes
146
Figure 62 ndash Illustration du concept de reacuteparation principale
622 EXEMPLES
Cette deacutefinition simple peut ensuite ecirctre appliqueacutee agrave une varieacuteteacute de langages de speacutecification
comme nous allons lrsquoillustrer agrave travers les exemples qui suivent
Logique propositionnelle
Comme premier exemple soit Φ lrsquoensemble des formules de logiques propositionnelles
avec les variables X = x1 xn pour certains n ge 1 Soit Σ lrsquoensemble des fonctions
X rarrgtperp que nous appellerons des eacutevaluations La relation de satisfaction |= est deacutefinie
comme σ |= ϕ =gt si et seulement si ϕ vaut vrai lorsque ses variables sont remplaceacutees par la
valeur de veacuteriteacute correspondante speacutecifieacutee par σ et sinon par perp
Soit b isin gtperp et i isin [1n] Nous noterons τxi 7rarrb lrsquoendomorphisme deacutefini comme
(τxi 7rarrb(σ))(x) =
b si x = xi
σ(x) sinon
Ce morphisme met xi agrave la place de b et laisse inchangeacute le reste de lrsquoeacutevaluation initiale
147
Lrsquoensemble des endomorphismes TΣ est alors deacutefini comme
TΣ =⋃
iisin[1n]
⋃bisingtperp
τxi 7rarrb
Deux transformations τx 7rarrb τ primey7rarrbprime commutent si x 6= y Ainsi un ensemble de transformations
T isin 2TΣ est bien deacutefini si et seulement si chaque endomorphisme qursquoil contient change la
valeur drsquoune variable diffeacuterente
Soit X = abc soit σ lrsquoeacutevaluation a 7rarrgtb 7rarrperpc 7rarrperp et ϕ la formule propositionnelle
aand b On peut facilement observer que σ 6|= ϕ Une reacuteparation est la transformation T =
τb 7rarrgt qui est T (σ) |= ϕ Cela correspond agrave lrsquointuition que lrsquoexplication de la fausseteacute
de ϕ est que b est faux alors qursquoil devrait ecirctre vrai Notons que bien que T prime = τb7rarrgtτc7rarrgt
rendrait aussi ϕ vrai ce nrsquoest pas une reacuteparation primaire puisque T sube T prime Cela correspond agrave
lrsquointuition que la valeur de veacuteriteacute de c est pas pertinente agrave la fausseteacute de ϕ
Soit σ lrsquoeacutevaluation a 7rarr gtb 7rarr perpc 7rarr perp et ϕ la formule propositionnelle ararr b Cette
fois deux reacuteparations primaires existent T = τb7rarrgt et T prime = τa7rarrperp Il est possible de
veacuterifier que les deux fixent la valeur de veacuteriteacute de lrsquoeacutevaluation initiale Informellement la
premiegravere transformation repreacutesente la fausseteacute de ϕ sur le fait que a est vrai tandis que lrsquoautre
lrsquoexplique plutocirct par le fait que b est faux mdash ce qui correspond bien agrave lrsquointuition Puisque
les deux reacuteparations sont incomparables aucune de ces explications nrsquoest laquo preacutefeacutereacutee raquo Nous
reviendrons sur ce concept plus tard
Logique du premier ordre
Le concept de reacuteparation peut facilement ecirctre leveacute agrave lrsquoensemble Φ de la formule logique de
premier ordre sur les domaines finis Soit A un ensemble drsquoeacuteleacutements un preacutedicat n-aire est
148
deacutefini comme une fonction p Anrarrgtperp Soit Pi lrsquoensemble des preacutedicats de lrsquoariteacute i Une
signature est un ensemble de preacutedicats P = p1 pm respectivement drsquoariteacute a1 am
Pour une signature donneacutee lrsquoensemble des eacuteleacutements de domaine est deacutefini comme
Σ = Pa1timesmiddotmiddot middottimesPam
La relation de satisfaction |= est deacutefinie comme |= (dϕ) =gt si ϕ est eacutevalueacute agrave vrai lors de
lrsquoeacutevaluation de preacutedicats tels que deacutefinis dans σ et perp deacutefinie autrement
Dans ce contexte un endomorphisme repreacutesentera le changement de la valeur de veacuteriteacute pour
une entreacutee drsquoun preacutedicat Soit pk un preacutedicat de lrsquoariteacute i (a1 ak)isinAn un k-tuple drsquoeacuteleacutements
de A et b isin gtperp La transformation τpk(a1ak)7rarrb est deacutefini comme le preacutedicat pprimek tel que
pprimek(x1 xk) =
b si x1 = a1 xn = an
pk(x1 xk) autrement
Lrsquoensemble des transformations pour pk noteacute Tpk est deacutefinie comme suit
Tpk ⋃
(a1ak)isinAn
⋃bisingtperp
τpk(a1ak)b
Lrsquoensemble global des transformations est alors
TΣ ⋃pisinP
Tp
De maniegravere similaire agrave la logique du premier ordre on peut veacuterifier que deux endomorphismes
149
1
2
3
4
5
(a) Graphe original
1
2
3
4
5
(b) Apregraves lrsquoapplication de T1
1
2
3
4
5
(c) Apregraves lrsquoapplication de T2
1
2
3
4
5
(d) Apregraves lrsquoapplication de T3
1
2
3
4
5
(e) Apregraves lrsquoapplication de T4
Figure 63 ndash Quelques reacuteparations possibles pour un coloriage de graphe deacutefectueux
commutent srsquoils opegraverent sur un preacutedicat diffeacuterent ou changent la valeur drsquoune entreacutee diffeacuterente
sur le mecircme preacutedicat
Soit A = 012 ϕ la formule du premier ordre forallx existy x 6= yand p(xy) et le preacutedicat binaire
p deacutefini comme (00)(01)(11) Il y a deux reacuteparations primaires pour restaurer la veacuteriteacute
de ϕ T1 = τp(20)7rarrgt T2 = τp(21)7rarrgt Cela correspond agrave lrsquointuition que la valeur 2
manque au moins un laquo partenaire raquo dans p et que 0 ou 1 pourraient chacun correspondre agrave ce
but
Soit A = [15] un ensemble de sommets de graphe p un preacutedicat binaire codant la relation
drsquoadjacence des arecirctes de graphe et q1q2q3 un ensemble de preacutedicats unaires tel que qi(x)
contient si et seulement si le sommet x ayant la couleur i Supposons que les preacutedicats p et q
soient deacutefinis en fonction de la repreacutesentation graphique montreacutee dans la figure 63a
150
Une solution au problegraveme de coloriage de graphe peut ecirctre repreacutesenteacutee par trois expressions
de premier ordre
ϕ1 forallx (q1(x)andnotq2(x)andnotq3(x))or (notq1(x)andq2(x)andnotq3(x))or (notq1(x)andnotq2(x)andq3(x))
ϕ2 forallx forally p(xy)rarr p(yx)
ϕ3 forallx forally p(xy)rarr ((q1(x)rarrnotq1(y))and (q2(x)rarrnotq2(y))and (q3(x)rarrnotq3(y)))
La premiegravere stipule que chaque sommet a une couleur exacte la seconde indique que la
relation drsquoadjacence est symeacutetrique et lrsquoexpression finale stipule qursquoaucun sommet adjacent ne
peut avoir la mecircme couleur On peut voir que le graphe original ne satisfait pas ϕ1andϕ2andϕ3
Il existe plusieurs reacuteparations principales dont certaines sont indiqueacutees ici
T1 = τq1(5)7rarrperpτq2(5)7rarrgt
T2 = τp(45)7rarrperpτp(54)7rarrperp
T3 = τq1(1)7rarrperpτq3(1)7rarrgtτq1(4)7rarrperpτq3(4)7rarrgt
T4 = τp(24)7rarrperpτp(42)7rarrperpτq1(4)7rarrperpτq3(4)7rarrgt
La reacuteparation T1 corrige le graphe en changeant la couleur du sommet 5 en rouge Notons que
cela neacutecessite non seulement de mettre q2(5) agrave gt mais aussi q1(5) agrave perp sinon la structure
reacutesultante violerait ϕ1 Une autre reacuteparation (non repreacutesenteacutee) change le sommet 5 en vert La
reacuteparation T3 modifie plutocirct la relation drsquoadjacence et coupe le sommet 5 du reste du graphe
de sorte que le conflit de couleur soit reacutesolu
151
Ceux-ci correspondent aux moyens laquo intuitifs raquo de fixer le coloriage du graphe Cependant
il existe plusieurs autres reacuteparations primaires qui reacutepondent agrave la deacutefinition Par exemple la
transformation T4 eacutechange les couleurs des sommets 1 2 et 4 Notons qursquoil srsquoagit bien drsquoune
reacuteparation primaire en ce sens qursquoaucun sous-ensemble de ces endomorphismes ne restaure la
satisfiabiliteacute de la formule drsquoorigine De la mecircme faccedilon T5 coupe le bord entre les sommets
2 et 4 et passe au vert Au total il y a 17 reacuteparations primaires distinctes dans cet exemple
particulier
Encore une fois il convient de noter que sans contexte suppleacutementaire aucune de ces reacutepara-
tions nrsquoest une explication possible de la fausseteacute de ϕ1andϕ2andϕ3 sur le graphe original
Logique de premier ordre eacutetendue
Lrsquoexemple preacuteceacutedent montre la neacutecessiteacute drsquoeacutetendre la seacutemantique de la logique du premier
ordre agrave des fonctions arbitraires au lieu de preacutedicats strictement booleacuteens Cela peut facilement
ecirctre fait comme suit Soit A1 An et B des ensembles finis Nous deacutesignerons par FA1AnrarrB
lrsquoensemble de toutes les fonctions (prodi Ai)rarr B Une signature est un tuple de la forme
〈(A11 A1n1)rarr B1 (Am1 Amnm)rarr Bm〉
tel que fi est une fonction de lrsquoariteacute ni avec le domaine A11 A1ni et image Bi La logique
des preacutedicats est le cas particulier ougrave B1 = middot middot middot= Bnm = gtperp dans ce cas lrsquoimage peut ecirctre
omise et ougrave Ai j sont tous les mecircmes de sorte que seule lrsquoariteacute doit ecirctre connue Si f est une
fonction Ararr B et x deacutesigne un eacuteleacutement de A nous eacutecrirons x f pour deacutesigner f (x) permettant
ainsi une certaine forme de notation laquo objet raquo pour les fonctions
Dans ce contexte les quantificateurs de premier ordre doivent preacuteciser sur quel Ai j ils srsquoap-
152
pliquent de sorte que les expressions deviennent de la forme forallx isin Ai j ϕ et exist isin Ai j ϕ
Les termes de base peuvent maintenant comparer les valeurs de deux termes de fonction en
utilisant nrsquoimporte quel opeacuterateur binaire approprieacute
Les endomorphismes sont toujours deacutefinis de la mecircme maniegravere que pour la logique classique
du premier ordre agrave condition qursquoils se reacutefegraverent aux valeurs approprieacutees dans le domaine et
lrsquoimage de la fonction soumise au changement
Notons que ce formalisme eacutetendu nrsquoajoute aucune expressiviteacute agrave la logique du premier ordre si
tous les ensembles sont maintenus finis Il doit cependant simplifier lrsquoexpression de nombreuses
proprieacuteteacutes
Avec ce formalisme modifieacute nous sommes precircts agrave envisager des reacuteparations dans les proprieacuteteacutes
de mise en page Web Soit E un ensemble drsquoeacuteleacutements de page P un ensemble de valeurs
de pixels et C un ensemble de couleurs CSS Sur ces trois ensembles nous deacutefinissons les
fonctions Erarr P appeleacutees left right top et bottom correspondants respectivement aux
coordonneacutees x et y des coins supeacuterieur gauche(top-left) et infeacuterieur droit (bottom-right)
drsquoun eacuteleacutement De plus nous deacutefinissons un ensemble S de seacutelecteurs CSS lrsquoeacutevaluation drsquoun
seacutelecteur CSS sur un document peut ecirctre formaliseacutee comme une fonction $ Srarr 2E qui pour
une expression de filtre donneacutee retourne le sous-ensemble de E correspondant au seacutelecteur
Les endomorphismes peuvent ecirctre deacutefinis pour chacune de ces fonctions et doivent ecirctre
eacutecrits en utilisant la notation introduite preacuteceacutedemment Par exemple τwidth(e)7rarrk correspond agrave
lrsquoendomorphisme deacutefinissant la valeur de la fonction width (largeur) pour lrsquoeacuteleacutement e isin E
agrave k et laissant tout le reste tel qursquoil est
On peut alors exprimer la proprieacuteteacute que tous les eacuteleacutements dans une liste avec lrsquoID laquo menu raquo
153
A list item
Another list item
A third list item
The last list item
[|
(a)
A list item
Another list item
A third list item
The last list item
[ |
[ |[ |
(b)
A list item
Another list item
A third list item
The last list item
[[|
|
[|
[|
(c)
Figure 64 ndash Trois reacuteparations pour lrsquoexemple web
devraient ecirctre aligneacutes agrave gauche comme lrsquoexpression de premier ordre suivante
forallx isin $(menu li) forally isin $(menu li) xleft= yleft
Notons que cette expression correspond directement agrave la traduction du premier ordre de
lrsquoexpression de Cornipickle montreacutee dans la section 62
Trouver les reacuteparations principales pour cette expression et le fragment de page montreacute dans la
figure 61a produit un certain nombre de solutions dont trois sont montreacutees dans la figure 64
Les deux premiegraveres sont assez intuitifs La figure 64a corrige la page en deacuteplaccedilant lrsquoeacuteleacutement
deacutesaligneacute de la liste avec les autres alors que la Figure 64b fait le contraire en alignant les
trois eacuteleacutements de liste les plus agrave gauche avec le second La figure 64c donne un exemple de
lrsquoune des nombreuses solutions restantes dans ce cas tous les eacuteleacutements de liste sont deacuteplaceacutes
vers une nouvelle position commune x qui srsquoavegravere ecirctre une coordonneacutee qursquoaucun eacuteleacutement
nrsquoavait dans la page drsquoorigine
Ce dernier exemple fournit une illustration graphique de la diffeacuterence entre le concept original
de teacutemoin et celui de reacuteparation Alors qursquoun teacutemoin dans ce cas met en eacutevidence une paire
choisie au hasard drsquoeacuteleacutements mal aligneacutes (comme montreacute dans la figure 61b)) une reacuteparation
choisit des eacuteleacutements speacutecifiques et en plus deacutecrit ce qui doit ecirctre fait avec eux afin de reacuteparer
la violation de la proprieacuteteacute Ceci est sans doute plus reacuteveacutelateur pour un utilisateur et constitue
154
agrave notre avis lrsquoun des principaux avantages de cette technique
63 CALCUL DE LA REacutePARATION
Le concept de base de reacuteparation preacutesenteacute dans la section preacuteceacutedente se precircte agrave quelques points
de discussion En particulier le nombre de reacuteparations principales possibles est potentiellement
eacuteleveacute et la tacircche de geacuteneacuterer ces reacuteparations peut donc srsquoaveacuterer tregraves coucircteuse
631 ALGORITHME DE BASE ET COMPLEXITEacute
Lrsquoalgorithme montreacute dans 1 est un algorithme pour iteacuterer toutes les reacuteparations possibles drsquoune
structure Il eacutenumegravere simplement toutes les transformations possibles T isin 2TΣ Il veacuterifie
drsquoabord si T est bien deacutefini (crsquoest-agrave-dire que toute paire drsquoendomorphismes commute) et si
une reacuteparation geacuteneacutereacutee preacuteceacutedemment (stockeacutee dans lrsquoensemble TS) est un sous-ensemble de
lrsquoactuelle Il veacuterifie enfin si lrsquoapplication de cette transformation corrige la structure drsquoorigine
Il passe agrave la prochaine transformation candidate si lrsquoune de ces trois situations se produit
Sinon il ajoute cette transformation agrave son ensemble et le renvoie comme son prochain eacuteleacutement
Theorem 1 Lrsquoalgorithme 1 est coheacuterent et complet
Soit T une sortie de transformation par lrsquoalgorithme Par construction T est une reacuteparation
puisqursquoelle est bien deacutefinie et elle corrige la valeur de veacuteriteacute de σ dans ϕ De plus au
moment ougrave T est sorti aucun des eacuteleacutements de TS nrsquoest un sous-ensemble de T Puisque TS
contient toutes les reacuteparations de cardinaliteacute infeacuterieure agrave T et que par construction toutes les
transformations de cardinaliteacute similaires ne peuvent pas ecirctre des sous-ensembles il srsquoensuit
que T nrsquoest incluse par aucune reacuteparation existante et est donc principale Cela prouve la
155
Algorithm 1 Algorithme geacuteneacuterique pour lrsquoiteacuteration des reacuteparations primaires
procedure COMPUTEREPAIRS(ϕσ 2TΣ)TS = 0for all T isin 2TΣ do Eacutenumeacutereacutes en cardinaliteacute croissante
if notWELLDEFINED(T ) thenskip
end ifif SUBSUMED(TTS) then
skipend ifif T (σ prime) 6|= ϕ then
skipend ifTSlarr TScupTyield T
end forend procedure
coheacuterence de lrsquoalgorithme
Le fait que toutes ces reacuteparations majeures soient finalement eacutenumeacutereacutees est garanti par le
fait que tous les sous-ensembles de TΣ sont geacuteneacutereacutes agrave un moment donneacute ce qui prouve la
compleacutetude
Cet algorithme a eacuteteacute impleacutementeacute en Java et est disponible publiquement 1 En raison de sa
simpliciteacute et de sa geacuteneacutericiteacute lrsquoimpleacutementation des expressions des structures et des iteacuterations
de reacuteparation ne repreacutesente que 325 lignes de code Lrsquoeacutenumeacuteration des reacuteparations est exposeacutee
agrave lrsquoutilisateur sous la forme drsquoune classe classique Java Iterator qui peut ecirctre utiliseacutee par
les meacutethodes traditionnelles hasNext() et next() pour passer agrave travers lrsquoensemble complet
de reacuteparations principales dans lrsquoordre croissant de cardinaliteacute Les classes speacutecifiques au
domaine deacutefinissants les constructions logiques propositionnelles et de premier ordre sont
constitueacutees drsquoenviron 500 lignes de code suppleacutementaires Il est facile de voir que le temps
1 httpsgithubcomliflabfault-finder
156
drsquoexeacutecution de cet algorithme est exponentiel en fonction de la taille de TΣ qui peut elle-mecircme
ecirctre exponentielle dans un autre facteur (deacutependant du problegraveme modeacuteliseacute) Dans la logique
du premier ordre (telle qursquoutiliseacutee par un fragment de Cornipickle) si a1 an est lrsquoariteacute
respective de chaque preacutedicat dans la signature le nombre drsquoendomorphismes est sumi 2|A|ai
pour un domaine donneacute A
Malgreacute cela il est possible de montrer que cet algorithme est limiteacute par une borne infeacuterieure
theacuteorique Un ensemble drsquoendomorphismes TΣ est dit complet si pour tout σ σ prime isin Σ il existe
une transformation bien deacutefinie T sube TΣ tel que T (σ) = σ prime
Theorem 2 Eacutetant donneacute un ensemble de structures Σ un ensemble drsquoexpressions de langage
Φ et un ensemble complet de transformations TΣ le problegraveme du calcul des reacuteparations
principales est aussi difficile que le problegraveme de satisfiabiliteacute pour Φ
Soit ϕ isinΦ une expression du langage Si ϕ est satisfaisable alors il existe une structure σ isin Σ
telle que σ |= ϕ Prenons une structure arbitraire σ prime isin Σ Puisque TΣ est complet il existe
au moins une transformation T sube TΣ telle que T (σ prime) = σ Prenons le plus petit ensemble
de ce genre par deacutefinition il srsquoagit drsquoune reacuteparation principale et sera finalement eacutenumeacutereacutee
par lrsquoalgorithme 1 Puisque lrsquoalgorithme est complet au contraire aucune reacuteparation ne sera
trouveacutee si ϕ nrsquoest pas satisfaisable
632 REacuteDUCTION DU NOMBRE DE SOLUTIONS CANDIDATES
Ces reacutesultats de complexiteacute de base justifient une discussion sur la reacuteduction du nombre de
reacuteparations potentielles qui doivent ecirctre exploreacutees
157
Suppression des endomorphismes
Le nombre de transformations potentielles peut drsquoabord ecirctre reacuteduit en supprimant les endomor-
phismes dont on sait qursquoils sont impossibles en fonction du contexte Par exemple supposons
que les symboles propositionnels a et b dans lrsquoexemple 622 correspondent respectivement
aux assertions laquo le client paie pour un objet raquo et laquo le client reccediloit lrsquoarticle raquo On pourrait
supposer qursquoune eacutevaluation ougrave a est vraie ne peut pas ecirctre modifieacutee en la rendant fausse cela
correspondrait au fait qursquoune action effectueacutee par un acteur ne peut ecirctre annuleacutee Dans un tel
contexte seuls les endomorphismes reacuteglant les fausses variables agrave vrai seraient consideacutereacutes
Dans le cas des graphes comme dans lrsquoexemple 622 on pourrait imposer des restrictions
sur les changements qui lui sont autoriseacutes par exemple on pourrait dire que les arecirctes
existantes doivent rester inchangeacutees ou que seuls des sommets speacutecifiques peuvent ecirctre
colorieacutes diffeacuteremment Ceci encore une fois a pour effet de preacutefeacuterer certaines transformations
aux autres et reacuteduit globalement le nombre de reacuteparations disponibles
Transformations en groupes
La granulariteacute des endomorphismes disponibles peut eacutegalement ecirctre modifieacutee Dans le cas de
lrsquoexemple de coloriage de graphe il est eacutevident qursquoaucune reacuteparation ne consistera jamais
en un seul endomorphisme τqi(x)7rarrgt La raison est que lrsquoexpression ϕ1 requiert que chaque
sommet ait exactement une couleur assigner qi agrave gt pour un sommet implique que le q j
restant pour j 6= i soit mis agrave perp On peut donc deacutefinir un nouvel ensemble de transformations
158
approprieacutees au contexte repreacutesentant les changements de couleur
TC =⋃xisinA
⋃iisin[13]
j 6=ik 6= j 6=i
τqi(x)7rarrgtτq j(x)7rarrperpτqk(x)7rarrperp
De mecircme comme la relation drsquoadjacence est symeacutetrique mettre p(xy) agrave gt (resp perp) ne
peut pas ecirctre fait sans mettre p(yx) agrave gt (resp perp) Au lieu de consideacuterer les changements
individuels aux seules entreacutees de p on peut deacutefinir un ensemble de changements de bord
TE =⋃xisinA
⋃yisinA
⋃bisingtperp
τp(xy)7rarrbτp(yx)7rarrb
On pourrait alors utiliser TCcupTE comme lrsquoensemble des transformations au lieu de TΣ Bien
que cela ne change rien agrave la theacuteorie sur les solutions actuelles le fait que TCcupTE soit plus petit
que TΣ a un effet positif sur la performance drsquoun algorithme drsquoeacutenumeacuteration dans la pratique
La mecircme chose peut ecirctre dite des endomorphismes de lrsquoexemple 622 Plutocirct que de consideacuterer
tous les changements individuels des coordonneacutees (xy) des quatre coins de chaque eacuteleacutement
on pourrait deacutefinir des sous-ensembles correspondants agrave des modifications plus intuitives par
exemple lrsquoensemble des deacuteplacements horizontaux pourrait ecirctre deacutefini comme
TH =⋃eisinE
⋃pisinP
τleft(e) 7rarr pτright(e) 7rarr (τright(e)minus p)
On peut alors limiter la recherche pour les reacuteparations agrave celles qui sont faites uniquement
des deacuteplacements (horizontaux ou verticaux) ou des redimensionnements (horizontaux ou
verticaux) drsquoeacuteleacutements etc
159
(a) Le reacutesultat attendu
(b) Problegraveme drsquoalignement
Figure 65 ndash Eacuteleacutements mal aligneacutes capture et suggestion de correction
64 EXEMPLES
Les trois figures suivantes montrent des exemples simples de bugs montrant la capaciteacute de
lrsquooutil agrave rechercher des candidats de correction en se basant sur lrsquoapproche proposeacutee Les
figures montrent les verdicts qui sont des suggestions donneacutees par lrsquooutil pour chacun des cas
Il est a noteacute que le processus prend entre 2 et 20 millisecondes pour trouver un candidat (sans
prendre compte du temps drsquoeacutevaluation)
Exemple 1 eacuteleacutements mal aligneacutes Dans ce cas 65 la suggestion est de deacuteplacer 69 pixels
vers la gauche lrsquoeacuteleacutement qui a lrsquoidentifiant ID=2
160
(a) Le reacutesultat attendu
(b) Problegraveme de chevauchement
Figure 66 ndash Eacuteleacutements qui se chevauchent capture et suggestion de correction
Exemple 2 eacuteleacutements qui se chevauchent La suggestion est de deacuteplacer le bat de lrsquoeacuteleacutement
avec lrsquoID 11 agrave 126 pixels 66
Exemple 3 eacuteleacutement qui deacuteborde de son conteneur La suggestion est de deacuteplacer la
droite de lrsquoeacuteleacutement avec lrsquoID 14 agrave 1277 pixels 67
161
(a) Le reacutesultat attendu
(b) Problegraveme de deacutebordement
Figure 67 ndash Eacuteleacutement qui deacuteborde de son conteneur capture et suggestion de correction
CHAPITRE 7
CONCLUSION GEacuteNEacuteRALE
Les applications web se multiplient et se diversifient et les exigences de leurs utilisateurs srsquoac-
centuent et srsquoamplifient avec La relation application web-utilisateur est assureacutee uniquement
via la page Web Pour que cette relation soit tenue la page Web doit ecirctre entretenue et reacutepondre
agrave un ensemble de critegraveres se charger rapidement fournir le service deacutesireacute et ecirctre agreacuteable agrave
voir sur tous les appareils des ordinateurs de bureau ou portables des tablettes et teacuteleacutephones
mobiles Cependant la complexiteacute de la relation entre HTML CSS et JavaScript engendre des
difficulteacutes consideacuterables pour la mise en page des applications web le mecircme document peut
ecirctre afficheacute dans une varieacuteteacute de tailles de reacutesolutions de navigateurs et mecircme de peacuteripheacuteriques
entravant de ce fait la mise en page Les laquo bugs raquo de mise en page connaissent par conseacutequent
une preacutesence remarquable allant de problegravemes de particulariteacutes relativement simple tels que
des eacuteleacutements superposeacutes ou incorrectement aligneacutes agrave des problegravemes plus seacuterieux compromet-
tant la fonctionnaliteacute de lrsquointerface utilisateur Les tentatives bien que rares visant agrave reacutesoudre
ces problegravemes restent incapables de cerner tous les aspects de ceux-ci (problegravemes)
Nous distinguons dans ce contexte deux familles drsquoapproches servant agrave tester les interfaces
des applications web lrsquoapproche visuelle se basant sur la comparaison des captures drsquoeacutecran
pixel par pixel et lrsquoapproche deacuteclarative fonctionnant directement sur des informations sur
163
la mise en page Si dans la premiegravere qui fonctionne mal avec les donneacutees dynamiques le
deacuteveloppeur de test se heurte agrave lrsquoimpossibiliteacute de comparer des images de diffeacuterentes tailles
drsquoeacutecran il doit se soumettre dans la seconde aux exigences des descriptionsscripts de test
assez verbeux en deacutecrivant les regravegles de son interface graphique
Lrsquoapproche que nous proposons agrave savoir lrsquooutil Cornipickle offre les avantages suivants elle
fonctionne sur la majoriteacute de combinaisons navigateurssystegravemes drsquoexploitation sans recourir
aux plugins speacutecifiques au navigateur (ou limiteacutes par le navigateur) De plus elle permet
1 lrsquoeacutevaluation des speacutecifications en fonction des informations recueillies sur le client en se
dispensant de lrsquoeacutevaluation statique de HTML et CSS du cocircteacute serveur 2 lrsquointerpreacutetation des
speacutecifications de telle maniegravere agrave eacuteviter une charge de calcul excessive dans le navigateur
3 lrsquoutilisation drsquoun autre langage que JavaScript pour lrsquoimpleacutementation 4 la gestion des
proprieacuteteacutes comportementales impliquant plus drsquoun instantaneacute de page par lrsquooutil 5 la pos-
sibiliteacute agrave lrsquoutilisateur drsquoajouter de supprimer ou de modifier les speacutecifications eacutevalueacutees par
lrsquooutil 6 lrsquoexclusiviteacute drsquoexprimer agrave travers un langage deacuteclaratif des proprieacuteteacutes agrave propos du
document (Document Object Model) et des proprieacuteteacutes CSS drsquoune page Web 7 la potentialiteacute
de rechercher et deacutetecter automatiquement les bugs comportementaux et RWD (Responsive
Web Design) dans les applications web 8 la reacuteparation en fournissant un algorithme de base
pour calculer les transformations
Le prototype de preuve de concept de Cornipickle a montreacute des reacutesultats prometteurs dans sa
capaciteacute agrave exprimer facilement les conditions de bugs de mise en page dans les applications
web et agrave les deacutetecter efficacement dans des exemples de pages de plus de 35 applications
reacuteelles
Lrsquoefficaciteacute de notre outil Cornipickle nous a permis drsquoattraper automatiquement certains
problegravemes communs rencontreacutes dans les applications web modernes (RIA et RWD) Les
164
proprieacuteteacutes de Cornipickle garantissent que les pages drsquoune application suivent diffeacuterents
types de contraintes en particulier le seacutequenccedilage possible des pages qui est lrsquoobjectif de ce
volet de notre travail En combinant les performances de Crawljax pour explorer les eacutetats
de lrsquoapplication (crawler state-aware) et un stateful test oracle (speacutecifications de logiques
temporelles du premier ordre) dans Cornipickle nous avons obtenu des reacutesultats prometteurs
Une petite application a eacuteteacute deacuteveloppeacutee et inteacutegreacutee afin de tester le rendu visuel dans les
diffeacuterentes fenecirctres possibles afin drsquoattraper les deacutefauts RWD
Notre solution a quelques limites et surmonter ces limitations pourrait ecirctre la base de futurs
travaux Lrsquoutilisation de Cornipickle nous limite agrave des contraintes se reacutefeacuterant uniquement aux
eacuteleacutements qui sont afficheacutes Cela rend les bugs causeacutes au niveau backend (cocircteacute serveur) parfois
difficiles agrave attraper il est neacutecessaire de trouver les eacuteleacutements afficheacutes qui peuvent indirectement
repreacutesenter les eacutetats du serveur Dans la mecircme ligne si Crawljax ne notifie pas un changement
drsquoeacutetat lorsque le DOM change il nrsquoest pas possible drsquoeacutevaluer cette page ougrave un bug aurait pu
se produire En outre lorsqursquoune proprieacuteteacute est eacutevalueacutee agrave false elle est fausse pour le reste
de lrsquoanalyse et aucun autre bug ne peut ecirctre intercepteacute avec cette proprieacuteteacute Cela a causeacute un
problegraveme avec la deacutecouverte de bugs RWD observables car la plupart des eacutechecs ne sont pas
observables et les proprieacuteteacutes devaient trouver un bug observable comme premier bug
De plus la capaciteacute de Cornipickle agrave renvoyer une explication utile de la violation drsquoune
proprieacuteteacute sur un document Web donneacute est limiteacutee Crsquoest pourquoi nous avons introduit une
deacutefinition du concept de reacuteparation dont le calcul fournit des informations plus preacutecises sur les
changements requis pour une structure afin de satisfaire une speacutecification donneacutee Lrsquoeacutetude des
reacuteparations et leur calcul fait partie du travail en cours et de nombreux problegravemes sont encore
ouverts Par exemple un calcul efficace des reacuteparations repose sur la suppression du plus
grand nombre possible de transformations candidates par conseacutequent des techniques pour
identifier facilement des endomorphismes qui ne peuvent jamais faire partie drsquoune solution
165
pourraient ecirctre rechercheacutees De mecircme nous preacutevoyons drsquoeacutetudier des techniques qui pourraient
geacuteneacuterer lrsquoensemble des reacuteparations directement agrave partir de la speacutecification et de la structure
deacutefectueuse plutocirct que drsquoutiliser lrsquoalgorithme brut de geacuteneacuteration et de test preacutesenteacute
Le concept de calcul des reacuteparations est en cours de construction et il reste agrave eacutetablir ses liens
avec les travaux connexes Comme nous lrsquoavons vu dans la section preacuteceacutedente trouver des
reacuteparations concerne le concept de reacutesolution de satisfiabiliteacute (SAT) et plus preacuteciseacutement le
problegraveme du SAT increacutementiel [64] Les solveurs SAT traditionnels sont neacutecessaires pour
trouver un seul modegravele drsquoexpression En SAT increacutementiel un solveur trouve un premier
modegravele drsquoexpression mais peut eacutegalement ecirctre demandeacute agrave plusieurs reprises de fournir des
modegraveles suppleacutementaires Lorsqursquoun ensemble de transformations est termineacute lrsquoiteacuteration sur
les modegraveles revient agrave effectuer des iteacuterations sur les reacuteparations
BIBLIOGRAPHIE
[1] Alm specifications examples http auckland-
layoutsourceforgenetexamplesindexhtml
[2] Applitools visual test automation httpwwwapplitools
comAccessed25April2016
[3] Blackout repport httpssiteshksharvardeduhepgPapersNYISO
blackoutreport8Jan04pdf
[4] Bugs catastrophiques httpwwwslidesharenetwearesocialsg
social-media-for-travel-brands
[5] critical-rendering-path httpsdevelopersgooglecomwebfundamentals
performancecritical-rendering-path
[6] Deacutefinition du viewport httpswwwdefinitions-marketingcomdefinition
viewport
[7] Exemple webspecwatij https gistgithubcomtux2323954186
[8] Froont httpfroontcom
167
[9] Galen httpwwwswtestacademycomgalen-framework
[10] galen framework 2017 httpgalenframeworkcom
[11] howbrowserswork 2017 HTTPtaligarsielcomProjects
howbrowserswork1html
[12] Html and css w3c standards httpswwww3orgstandardswebdesign
htmlcss
[13] Http response httpswwww3orgProtocolsrfc2616rfc2616-sec6html
sec6
[14] http coursescsvteduprofessionalismtherac_25therac_1html httpcourses
csvteduprofessionalismTherac_25Therac_1html
[15] http wearesocialsg httpwearesocialsg
[16] http wwwcnncom2003us0814poweroutage httpwwwcnncom2003US
0814poweroutage
[17] http wwwyfolirenethumrhumeur13htm httpwwwyfolirenethumr
humeur13htm
[18] Les bases de sahiscript https sahiprocomdocsscriptingsahi-scripting-basicshtml
[19] mobile and tablet internet usage exceeds desktop for first
time worldwide httpgsstatcountercompress
mobile-and-tablet-internet-usage-exceeds-desktop-for-first-time-worldwide
[20] Phantomcss 2017 httpsgithubcomHuddlePhantomCSS
168
[21] Principe de fonctinement de sahi https wwwthoughtworkscominsightsblogintroduction-
sahi-part-1
[22] Respondr httprespondrio
[23] Responsinator httpswwwresponsinatorcom
[24] Responsivepxcom httpresponsivepxcom
[25] Reuters us-blackout-newyork 2003 https
wwwreuterscomarticleus-blackout-newyork
spike-in-deaths-blamed-on-2003-new-york-blackout-idUSTRE80Q07G20120127
[26] Rwdbookmarklet httpswwwsitepointcom
responsive-web-design-tool
[27] Screenfly httpquirktoolscomscreenfly
[28] Software bugs found to be cause of toyota acceleration death httpswwwgoogle
frampswwwcomputerworldcomarticle2573466disaster-recovery
software-failure-cited-in-august-blackout-investigationamphtml
[29] Software failure cited in august blackout investigation https
wwwcomputerworldcomarticle2573466disaster-recovery
software-failure-cited-in-august-blackout-investigationhtml
[30] Utilisation de capybara https wwwsitepointcombasics-capybara-improving-tests
[31] Vpresizer httplabmaltewassermanncomviewport-resizer
[32] Washingtonpost toyota reaches 12-billion settlement to end criminal
probe2014 httpswwwwashingtonpostcombusinesseconomy
169
toyota-reaches-12-billion-settlement-to-end-criminal-probe2014
03195738a3c4-af69-11e3-9627-c65021d6d572_storyhtmlutm_term=
4826d81e2aa6
[33] Watir http watircom
[34] websiteresponsivetest httpwwwwebsiteresponsivetestcom
[35] A Arora and M Sinha Web application testing A review on techniques tools and state
of art International Journal of Scientific Iamp Engineering Research 3(2) 1ndash6 2012
[36] K Benjamin G Von Bochmann M E Dincturk G-V Jourdan and I V Onut A stra-
tegy for efficient crawling of rich internet applications In 11th international conference
on Web engineering serICWErsquo11 page 74ndash89 Heidelberg Springer-Verlag 2011
[37] Tim Berners-Lee Roy Fielding and Larry Masinter Uniform resource identifier (URI)
Generic syntax Technical report January 2005 RFC 3986
[38] Oussama Beroual Francis Guerin and Sylvain Halleacute Searching for behavioural bugs
with stateful test oracles in web crawlers In 10th IEEEACM International Workshop on
Search-Based Software Testing SBSTICSE 2017 Buenos Aires Argentina May 22-23
2017 pages 7ndash13 2017
[39] T-H Chang T Yeh and RC Miller Gui testing using computer vision In the SIGCHI
Conference on H man Factors in Computing Systems CHI rsquo10 pages 1535ndash1544 New
York NY USA may 2010 ACM
[40] S Choudhary E Dincturk S Mirtaheri G-V Jourdan G Bochmann and I Onut
Building rich internet applications models Example of a better strategy In Web
Engineering ser Lecture Notes in Computer Science F Daniel P Dolog and Q Li
volume 7977 page 291ndash305 Springer Berlin Heidelberg 2013
170
[41] S Choudhary M E Dincturk S M Mirtaheri A Moosavi G von Bochmann G-V
Jourdan and I-V Onut Crawling rich internet applications the state of the art In
CASCON page 146ndash160 IBM Corp 2012
[42] Shauvik Roy Choudhary Mukul R Prasad and Alessandro Orso X-PERT accurate
identification of cross-browser issues in web applications In David Notkin Betty H C
Cheng and Klaus Pohl editors 35th International Conference on Software Engineering
ICSE rsquo13 San Francisco CA USA May 18-26 2013 pages 702ndash711 IEEE ACM
2013
[43] V Dallmeier M Burger T Orth and A Zeller Webmate Generating test cases for
web 20 In D Winkler S Biffl J Bergsmann (Eds) SWQD volume 133 of Lecture
Notes in Business Information Processing page 55ndash69 Springer 2013
[44] M E Dincturk ldquomodel-based crawling ndash an approach to design efficient crawling
strategies for rich internet applications Masterrsquos thesis EECS - University of Ottawa
2013
[45] M E Dincturk S Choudhary G von Bochmann G-V Jourdan and I-V Onut A
statistical approach for efficient crawling of rich internet applications ICWE page
362ndash369 2012
[46] Mustafa Emre Model-based Crawling - An Approach to Design Efficient Crawling
Strategies for Rich Internet Applications PhD thesis University of Ottawa 2013
[47] Jesse James Garrett Ajax A new approach to web applications - adaptive path 2005
[48] Alan Grosskurth and Michael Godfrey A case study in architectural analysis The
evolution of the modern web browser Software Maintenence and Evolution Research
and PracticeEMSE 2007
171
[49] Allan Grosskurth and Michael Godfrey A reference architecture for web browsers
Software Maintenence and Evolution Research and Practice page 1ndash7 2006
[50] A Guttman R-trees a dynamic index structure for spatial searching June 1984
[51] Sylvain Halleacute Nicolas Bergeron Francis Guerin Gabriel Le Breton and Oussama
Beroual Declarative layout constraints for testing web applications J Log Algebr Meth
Program 85(5) 737ndash758 2016
[52] Sylvain Halleacute and Oussama Beroual Fault localization in web applications via model
finding In Proceedings First Workshop on Causal Reasoning for Embedded and safety-
critical Systems Technologies CRESTETAPS 2016 Eindhoven The Netherlands 8th
April 2016 pages 55ndash67 2016
[53] Sylvain Halleacute and Roger Villemaire Constraint-based invocation of stateful web services
The Beep Store (case study) In 4th International ICSE Workshop on Principles of
Engineering Service-Oriented Systems PESOS 2012 June 4 2012 Zurich Switzerland
pages 61ndash62 2012
[54] S Halleacute G Le Breton F Maronnaud A Blondin Masseacute and S Gaboury Exhaustive
exploration of ajax web applications with selective jumping In ICST page 243ndash252
IEEE Computer Society 2014
[55] Arnaud Le Hors Philippe Le Heacutegaret Lauren Wood Gavin Nicol Jonathan Ro-
bie Mike Champion and Steve Byrne Document object model level 2 core 2000
http wwww3orgTRDOM-Level-2-Core
[56] Jaakko Jaumlrvi Mat Marcus Sean Parent John Freeman and Jacob Smith Algorithms for
user interfaces In Proceedings of the Eighth International Conference on Generative
172
Programming and Component Engineering GPCE rsquo09 pages 147ndash156 New York NY
USA 2009 ACM
[57] Jaakko Jaumlrvi Mat Marcus Sean Parent John Freeman and Jacob N Smith Property
models from incidental algorithms to reusable components In Yannis Smaragdakis and
Jeremy G Siek editors GPCE pages 89ndash98 ACM 2008
[58] Sonal Mahajan and William G J Halfond WebSee A tool for debugging HTML pre-
sentation failures In 8th IEEE International Conference on Software Testing Verification
and Validation ICST 2015 Graz Austria April 13-17 2015 pages 1ndash8 2015
[59] Ethan Marcotte Responsive web design Eyrolles 4 edition 2013
[60] A Mesbah A van Deursen and S Lenselink Crawling Ajax-based web applications
through dynamic analysis of user interface state changes ACM Transactions on the Web
(1) 6 2012
[61] S M Mirtaheri D Zou G V Bochmann G-V Jourdan and I V Onut Dist-ria crawler
A distributed crawler for rich internet applications In 8th International Conference on
P2P Parallel Grid Cloud and Internet Computing pages 105ndash112 IEEE Computer
Society Washington 2013
[62] Seyed M Mirtaheri Mustafa Emre Dincturk Salman Hooshmand Gregor V Bochmann
and Guy-Vincent Jourdan A brief history of web crawlers In CASCON rsquo13 Proceedings
of the 2013 Conference of the Center for Advanced Studies on Collaborative Research
pages 40ndash54 IBM Corp Riverton NJ USA ccopy2013 2013
[63] MTamm Http response httpsdeslidesharenetMichaelTamm
fighting-layout-bugs
173
[64] Alexander Nadel and Vadim Ryvchin Efficient SAT solving under assumptions In SAT
pages 242ndash255 2012
[65] C Olston and M Najork Web crawling Foundations and Trends in Information
Retrieval 4 175ndash246 2010
[66] Sean Parent Mat Marcus and Foster Brereton ASL overview Technical report Adobe
Systems 2007 httpstlabadobecomgroup__asl__overviewhtml
[67] Pedro A Szekely Piyawadee Noi Sukaviriya Pablo Castells Jeyakumar Muthukumara-
samy and Ewald Salcher Declarative interface models for user interface construction
tools the MASTERMIND approach In Leonard J Bass and Claus Unger editors
Proceedings of the IFIP TC2WG27 Working Conference on Engineering for Human-
Computer Interaction volume 45 of IFIP Conference Proceedings pages 120ndash150
Chapman amp Hall 1995
[68] Seyed M Mir Taheri Distributed Crawling of Rich Internet Applications PhD thesis
University of Ottawa 2015
[69] Michael Tamm Fighting layout bugs 2009 httpswwwyoutubecomwatchv=
WY3C6FHqSqQ
[70] Hideo Tanida Mukul R Prasad Sreeranga P Rajan and Masahiro Fujita Automated
system testing of dynamic web applications volume 303 page 181ndash196 Springer Berlin
Heidelberg 2013
[71] te (testing experience) The Magazine for Professional Testers Test automation - does it
make sense a simplified automation solution using watij wwwtestingexperiencecom
[72] Thomas A Walsh Gregory M Kapfhammer and Phil McMinn Automated layout
failure detection for responsive web pages without an explicit oracle In Proceedings
174
of the 26th ACM SIGSOFT International Symposium on Software Testing and Analysis
Santa Barbara CA USA July 10 - 14 2017 pages 192ndash202 2017
[73] Thomas A Walsh Gregory M Kapfhammer and Phil McMinn Redecheck an auto-
matic layout failure checking tool for responsively designed web pages In Proceedings
of the 26th ACM SIGSOFT International Symposium on Software Testing and Analysis
Santa Barbara CA USA July 10 - 14 2017 pages 360ndash363 2017
[74] Thomas A Walsh Phil McMinn and Gregory M Kapfhammer Automatic detection
of potential layout faults following changes to responsive web pages (N) In 30th
IEEEACM International Conference on Automated Software Engineering ASE 2015
Lincoln NE USA November 9-13 2015 pages 709ndash714 2015
iv
52 Solutions actuelles 12253 Solution proposeacutee 12554 Expeacuteriences et reacutesultats 127
6 Vers un meilleur feedback pour lrsquoutilisateur 13761 Geacuteneacuteration de contre-exemple les teacutemoins 13862 Localisation des erreurs dans les applications web 14363 Calcul de la reacuteparation 15464 Exemples 159
7 Conclusion geacuteneacuterale 162
Bibliographie 166
TABLE DES FIGURES
11 Exemple drsquoune requecircte HTTP 912 Exemple drsquoune reacuteponse HTTP 1013 Un exemple simple de page HTML contenant un grand titre et un paragraphe 1214 Le flux entre les composants du navigateur pour la reacutecupeacuteration et le traitement
drsquoune page web dans le navigateur 2615 Un exemple simple de page web illustrant le rendu dans un navigateur 2716 Les processus de traitement de HTML et CSS au niveau du moteur de rendu
du navigateur 2817 Un arbre du modegravele drsquoobjet DOM 2918 Un exemple de fichier CSS simple 2919 Arbre du modegravele drsquoobjet CSSOM 30110 Arbre de rendu 31111 Les eacutetapes et processus de la construction des arbres DOM CSSOM et de
lrsquoarbre de rendu 32112 Un second exemple simple illustrant le processus de mise en page par le
navigateur 33113 Vue globale du flux de reacutecupeacuteration de traitement et drsquoaffichage drsquoune page web 34
21 Exemple drsquoeacuteleacutements mal aligneacutes le cadre blanc est horizontalement malaligneacute (LiveShout) le menu Interests est deacutecaleacute drsquoun pixel par apport auxautres menus (LinkedIn) 39
22 Exemple drsquoeacuteleacutements qui se chevauchent 4123 Le contenu de la page est dissimuleacute de lrsquointerface en raison de son prolonge-
ment au-delagrave des dimensions du conteneur parent 4224 Le bug Facebook La zone de texte permettant au utilisateur de taper un
message instantaneacute (agrave gauche) disparaicirct soudainement (agrave droite) 4325 Le bug laquo ton sur ton raquo Les eacuteleacutements de menu sont pousseacutes en dehors de leurs
conteneur et disparaissent (a) le texte du lien est de la mecircme couleur que lefond reacuteveacuteleacute en le seacutelectionnant avec la souris (b) 44
26 Un eacuteleacutement est placeacute incorrectement sur un autre 4527 Un exemple drsquointerface briseacutee en raison de lrsquoeacutechec du chargement de certaines
ressources 4628 Exemple drsquointerface briseacute dans le site Digital Ocean 4729 Exemple drsquoHTML mal formeacute 47
vi
211 Incoheacuterence dans le champ de formulaire du site CallingCards 48210 Exemple drsquoeacuteleacutements inaccessibles 57212 Exemple de mojibake (a) donneacutees UTF-8 afficheacutees comme Cp1252 (b)
donneacutees Cp1252 afficheacutees comme UTF-8 58213 Exemples de Mojibake dans Doodle 59214 Des donneacutees extraites de la base de donneacutees sont incorrectement eacutechappeacutees
dans IEEE PDF eXpress on constate la preacutesence de plusieurs apostrophes 60215 Sur cette page YouTube du code JavaScript est afficheacute au lieu drsquoecirctre interpreacuteteacute 60216 Eacuteleacutements mobiles la position et la bordure de la zone du texte changent lors
de la saisie du texte (NSERC) 60217 Confusion connexiondeacuteconnexion dans une page web le contenu pour un
utilisateur connecteacute (en haut de la page a droite) coexiste avec le formulairede connexion reacuteserveacute aux utilisateurs qui ne sont pas en principe connecteacutes 61
218 Incoheacuterences dans le reacutesultat de la recherche 61219 Code CSS avec des conditions sur la largeur de lrsquoappareil Il srsquoagit drsquoun
exemple de media queries 61220 Le bug de deacutepassement drsquoeacuteleacutements sur le site httpswwwthelilycom 62221 Le bug de deacutepassement du viewport sur le site httpswwwslaveryfootprint
org 62222 Le bug de couverture drsquoeacuteleacutements sur le site httpswwwanthedesignfr 62
31 Exemple de code pour Selenium WebDriver 6432 Commandes de base de Capybara [30] 6633 Exemple drsquoutilisation de Watij [71] 6734 Page de connexion (login) de Yahoo [71] 6735 Exemple simple drsquoun test JUnit Watij WebSpec [7] 6836 Exemple de Sahi script [18] 7037 Architecture de Sahi (figure tireacutee de [21]) 7038 Le fonctionnement geacuteneacuteral de lrsquooutil drsquoanalyse WebSee 7439 Outputs de WebSee eacuteleacutements HTML deacutefectueux 74310 Exemple de traitement drsquoimage avec FLB (figure tireacutee de [63]) 76311 Exemple drsquoutilisation de Sikuli (figure tireacutee de [39]) 78312 Exemple avec Auckland (figure tireacutee de [1]) 81313 Une simple speacutecification avec Auckland [1] 81314 Exemple drsquoune boicircte de dialogue pour enregistrer un fichier image 83315 Une simple speacutecification deacuteclarative dans le langage Adam du modegravele de
proprieacuteteacute pour le dialogue dans Figure314 [56] 84316 Une simple speacutecification avec Eve [56] 85317 Exemple drsquoune speacutecification Galen [9] 89318 Exemple drsquoun script Automotion [70] 90319 Exemple de faux positif avec PhantomCSS 94
41 Architecture et interactions de Cornipickle 100
vii
42 Une page simple seacuterialiseacutee en JSON 10143 Une capture drsquoeacutecran de Cornipickle en action 10244 Un document DOM simple (a) Structure HTML (b) Repreacutesentation en arbre
DOM Seuls les noms des eacuteleacutements sont afficheacutes les attributs et valeursrestants sont omis pour plus de clarteacute 111
45 Exemple de code jQuery veacuterifiant que deux eacuteleacutements ont le mecircme texte 116
51 Le bug de connexions multiples Un utilisateur deacutejagrave connecteacute se voit proposerlrsquooption de se reconnecter 121
52 Le bug des paniers multiples Des boutons pour creacuteer un panier et ajouter desarticles au panier coexistent sur la mecircme page 121
53 Le bug de la suppression drsquoun panier inexistant Des boutons pour retirer dupanier et creacuteer un panier coexistent sur la mecircme page 122
54 Flux drsquointeraction et de seacuterialisation (Crawljax-Cornipickle) 12655 Le code neacutecessaire pour attraper le bug des connexions multiples en utilisant
Crawljax sans Cornipickle 12956 Temps de calcul de lrsquointerpreacuteteur en fonction du nombre drsquoeacuteleacutements dans la
page 13557 Temps de calcul incluant la seacuterialisation de la page par la sonde JavaScript et
lrsquointerpreacutetation de la proprieacuteteacute en fonction du nombre drsquoeacuteleacutements dans la page136
61 Exemple drsquoune erreur de mise en page Web simple (a) lrsquoun des eacuteleacutementsde la liste est incorrectement aligneacute avec les autres (b) un teacutemoin (witness)produit par lrsquooutil Cornipickle 143
62 Illustration du concept de reacuteparation principale 14663 Quelques reacuteparations possibles pour un coloriage de graphe deacutefectueux 14964 Trois reacuteparations pour lrsquoexemple web 15365 Eacuteleacutements mal aligneacutes capture et suggestion de correction 15966 Eacuteleacutements qui se chevauchent capture et suggestion de correction 16067 Eacuteleacutement qui deacuteborde de son conteneur capture et suggestion de correction 161
LISTE DES TABLEAUX
11 Statistiques des parts drsquoutilisation des navigateurs dans le monde entre mars2015 et mars 2016 24
21 Sites et applications web pour lesquelles au moins un bug de mise en page aeacuteteacute trouveacute 38
31 Limites et diffeacuterences entre trois outils majeurs des approches existantes 95
41 La grammaire BNF pour Cornipickle (Partie I) 10442 La grammaire BNF pour Cornipickle (Partie II) 10643 Extensions de la grammaire BNF pour Cornipickle 10844 La seacutemantique formelle de Cornipickle aaprime isin A sont les noms drsquoattributs
DOM v isin V est une valeur drsquoattribut c isin C est un seacutelecteur CSS ξ et ξ prime
sont des noms de variables ν ν prime isin N sont les nœuds DOM et ϕ et ψ sont deseacutenonceacutes Cornipickle quelconques Lorsque t est vide Always srsquoeacutevalue agrave V raiet Eventually et Next srsquoevaluent agrave Faux 113
61 La deacutefinition reacutecursive de la fonction de calcul du verdict ω 140
INTRODUCTION
Le mot bug qui signifie en anglais laquo insecte raquo et qui a eacuteteacute franciseacute pour devenir laquo bogue raquo
a vu le jour dans les anneacutees quarante agrave la suite de la panne qursquoa connu le dernier cri des
ordinateurs de lrsquoeacutepoque le Mark II Comme son nom lrsquoindique la cause eacutetait un insecte qui
srsquoeacutetait introduit dans un relais eacutelectromeacutecanique de celui-ci La panne fut deacutecouverte par la
brillante matheacutematicienne et pionniegravere de la programmation Grace Hopper Il srsquoagit du tout
premier vrai bug informatique car on utilisait deacutejagrave le mot pour deacutesigner des problegravemes dans les
appareils eacutelectriques [17] Depuis le mot bug est devenu synonyme de tout dysfonctionnement
ou anomalie drsquoun programme
Le monde drsquoaujourdrsquohui est piloteacute par des ordinateurs dans tous les domaines eacutenergeacutetique
judiciaire sanitaire militaire etc De ce fait la manifestation drsquoun bug peut entraicircner des
deacutesordres des perturbations voire des catastrophes Les trois derniegraveres deacutecennies ont connu
une multitude de bugs de grande envergure
Parmi les plus importants mentionnons une interruption en 2003 de plusieurs jours dans
lrsquoalimentation en eacutelectriciteacute drsquoune cinquantaine de millions drsquoameacutericains Lors de cet incident
une douzaine de personnes ont mecircme trouveacute la mort empoisonneacutees au monoxyde de carbone
en tentant de remeacutedier agrave ce problegraveme par des geacuteneacuterateurs au diesel On a compteacute plus de
2
six milliards de dollars de deacutegacircts mateacuteriels A lrsquoorigine de cette panne une paralysie totale
provoqueacutee par deux logiciels chargeacutes du controcircle de la production qui essayaient de modifier
le mecircme fichier simultaneacutement [25 3 16 29]
Mentionnons eacutegalement des centaines drsquoaccidents de la route meurtriers survenus entre 2009
et 2011 et dont les victimes eacutetaient les proprieacutetaires de la Lexus ES350 du constructeur Toyota
Les conducteurs perdaient la maicirctrise du veacutehicule une fois qursquoil atteignait la vitesse de 150
kmh puisque ce seuil entraicircnait la deacutesactivation de la peacutedale de frein Durant deux anneacutees les
chauffeurs sont accuseacutes par Toyota de confondre les peacutedales de frein et drsquoacceacuteleacuteration alors
qursquoune expertise finit par reacuteveacuteler une deacutefaillance dans lrsquoordinateur de bord Les pertes sont
estimeacutees dans ce cas agrave 24 milliards de dollars [32 28]
Parmi les bugs informatiques les plus meurtriers on compte eacutegalement un dysfonctionnement
en 1987 de la machine de radiotheacuterapie Therac 25 chargeacutee drsquoadministrer aux patients la
quantiteacute de radioactiviteacute qui leur est prescrite Agrave certaines occasions la machine leur donne
vingt fois la dose mortelle occasionnant de ce fait la blessure drsquoun patient et la mort de
cinq autres Le logiciel destineacute agrave veiller au bon positionnement et agrave la preacutesence de la plaque
meacutetallique censeacutee recevoir le rayon pour le filtrer et le concentrer a malheureusement failli agrave
son rocircle [14]
Tous ces exemples sont des bugs aux conseacutequences catastrophiques Heureusement tous les
bugs ne sont pas aussi deacutevastateurs mais ils peuvent neacuteanmoins srsquoaveacuterer nuisibles et reacutepandus
Crsquoest le cas drsquoun type de bug auquel les informaticiens font face agrave chaque instant agrave savoir les
bugs de mise en page dans les interfaces des applications web qui se trouvent agrave lrsquoorigine des
problegravemes drsquoaffichage rencontreacutes quotidiennement dans les interfaces web Agrave cet eacutegard des
chiffres datant de 2015 lieacutes agrave Internet donnent matiegravere agrave reacuteflexion Le reacuteseau compte plus de
trois milliards drsquointernautes dont deux milliards sont inscrits sur les reacuteseaux sociaux Plus de
3
huit cent mille nouveaux sites Internet sont mis en ligne chaque jour [15] [4] Par conseacutequent
le nombre drsquoutilisateurs des applications web est consideacuterable et le nombre de personnes
toucheacutees par les bugs drsquointerfaces reacutesultant de ces applications est eacutenorme Lrsquoenjeu de ce fait
est tregraves grand sur tous les plans
La bonne conduite drsquoune application web exige une bonne apparence visuelle des pages web
sans aucune deacutefaillance drsquoaffichage facilitant ainsi lrsquoutilisation de lrsquoapplication et offrant un
meilleur service agrave lrsquoutilisateur Trois types de problegravemes drsquoaffichage sont releveacutes un premier
type qualifieacute de non gecircnant tel qursquoun deacutebordement drsquoun paragraphe de sa bordure ou un
problegraveme drsquoalignement ou mecircme une sorte de caractegravere speacutecial mal afficheacute (mojibake) Un
deuxiegraveme type qualifieacute de gecircnant telle qursquoune image deacuteplaceacutee qui couvre un paragraphe ou
une autre partie de la page
Par contre le troisiegraveme type est plus grave et peut conduire agrave un blocage de lrsquoapplication dont
les effets risquent drsquoecirctre seacuterieux compromettant la fonctionnaliteacute de lrsquointerface utilisateur Un
4
exemple de bug qui affecte la fonctionnaliteacute de lrsquoapplication Le mauvais fonctionnement des
boutons de nombreuses applications montrent des eacuteleacutements superposeacutes qui se comportent
comme des laquo pop-ups raquo dans la fenecirctre Cependant dans un certain nombre de cas les
boutons de ces fenecirctres sont inopeacuterants cliquer dessus plusieurs fois ne produit aucun effet
Ce problegraveme a eacuteteacute observeacute dans des sites aussi varieacutes qursquoAmerican Airlines Dropbox et
BitBucket Dans certains cas lrsquoutilisateur est effectivement bloqueacute dans la fenecirctre contextuelle
ou la page qui contient le bouton et ne peut pas continuer sans forcer un rechargement complet
du document
Cependant les travaux visant agrave reacutesoudre les problegravemes drsquointerface se font tregraves rares Halleacute et al
[51] sont parmi les premiers agrave srsquointeacuteresser agrave ce genre de problegraveme Mahajan et Halfond [58]
ont abordeacute la probleacutematique en proposant une approche baseacutee sur la vision par ordinateur et
le traitement drsquoimages Walsh et al [74 72] ont eacutegalement traiteacute ce genre de bugs dans les
applications dites responsives (responsive web design)
Deux cateacutegories drsquoutilisateurs sont confronteacutees agrave ces types de problegravemes lrsquoune repreacutesente
les speacutecialistes du domaine (les informaticiens) chez lesquels ces types de problegravemes peuvent
trouver leurs solutions apregraves un travail laborieux Lrsquoautre repreacutesente le grand public pour lequel
le deuxiegraveme et le troisiegraveme type de problegraveme constituent des contraintes pour lrsquoexploitation de
la page car la solution dans ce cas exige certaines connaissances (lrsquooutil le langage etc) qui
eacutechappent geacuteneacuteralement au grand public Ce dernier forme la majoriteacute des utilisateurs De ce
fait il est neacutecessaire de lui trouver une solution lui permettant drsquoutiliser les sites web dans
les meilleures conditions possibles Il doit avoir tout simplement sur son eacutecran une interface
correcte sans aucun bug pour qursquoil ne soit pas obliger agrave recourir agrave une technique de correction
qui le deacutepasse Drsquoautant plus que les applications web connaissent une eacutevolution rapide et
commencent agrave conqueacuterir plusieurs domaines (commerce eacutelectronique eacuteducation loisir etc)
et mecircme agrave ecirctre utiliseacutees dans des opeacuterations sensibles telles que les transactions moneacutetaires
5
via internet Ce qui fait drsquoeux des programmes tregraves complexes dynamiques et interactifs En
plus de la rareteacute des meacutethodes de deacutetection de ces bugs pire encore presque rien nrsquoa eacuteteacute
fait pour donner un feedback agrave lrsquoutilisateur Lorsqursquoun bug est trouveacute les solutions actuelles
ne font que retourner laquo vraifaux raquo Dans ce travail nous proposons une nouvelle approche
permettant dans une premiegravere eacutetape de deacutetecter automatiquement les diffeacuterents types de bugs
drsquointerfaces et de les corriger automatiquement dans une deuxiegraveme eacutetape Il srsquoagit drsquoune
approche geacuteneacuterique de localisation de deacutefauts baseacutee sur le concept de reacuteparation
Les objectifs et contributions de cette thegravese sont
1 Proposer un langage pour speacutecifier le contenu attendu drsquoune interface web
2 Deacutecrire un algorithme permettant de veacuterifier automatiquement qursquoune speacutecification est
respecteacutee
3 Deacutecrire une meacutethode permettant de fournir un verdict deacutetailleacute et utile lors drsquoune violation
Cette thegravese comporte six chapitres Le chapitre 1 est deacutedieacute agrave une vue globale sur les notions de
base relatives au web Les diffeacuterents types de bugs ainsi que des exemples reacuteels de chacun de
ces types sont preacutesenteacutes au chapitre 2 Le chapitre 3 est consacreacute aux travaux connexes sur la
deacutetection des bugs drsquointerfaces dans les applications web agrave quelques exemples drsquoapproches et
drsquooutils de deacutetection pour lesquels certains points faibles sont identifieacutes
Dans le chapitre 4 on retrouve lrsquoensemble des informations speacutecifiques agrave lrsquooutil Cornipickle
conccedilu et utiliseacute dans la deacutetection des bugs Ceci inclut la syntaxe du langage et son utili-
sation pour exprimer des proprieacuteteacutes ainsi que les deacutetails de son impleacutementation (objectifs
de conception architecture et sceacutenario typique) Le chapitre 5 est reacuteserveacute agrave lrsquoutilisation de
Cornipickle en combinaison avec un robot drsquoexploration dynamique (crawler) pour deacutetecter
efficacement les bugs comportementaux dans les RIA (Rich Internet Applications) Le dernier
6
chapitre quant agrave lui preacutesente deux meacutecanismes par lesquels un verdict vraifaux peut ecirctre
enrichi drsquoinformation suppleacutementaire pour le deacuteveloppeur Une conclusion geacuteneacuterale mettant
en eacutevidence lrsquointeacuterecirct du travail reacutealiseacute et lrsquoimportance des reacutesultats obtenus clocircture la thegravese
Il est agrave signaler que les contributions preacutesenteacutees dans cette thegravese ont fait lrsquoobjet de publications
dont je suis coauteur
Un premier article dont la contribution consiste en la formalisation de la seacutemantique de
lrsquointerpreacuteteur Cornipickle (section 33 de lrsquoarticle) et la preacutesentation du concept des teacutemoins
(section 43) Cette contribution correspond au chapitre 4 de la thegravese
1 Sylvain Halleacute Nicolas Bergeron Francis Gueacuterin Gabriel Le Breton Oussama Be-
roual Declarative layout constraints for testing web applications J Log Algebr Meth
Program Elsevier 85 (5) 737-758 (2016) [51]
Un deuxiegraveme article preacutesentant le meacutecanisme de transformations (feedback enrichi pour
lrsquoutilisateur) ce qui correspond au chapitre 6
1 Sylvain Halleacute Oussama Beroual Fault Localization in Web Applications via Model
Finding CRESTETAPS 2016 55-67 Elsevier Electronic Notes in Computer Science
(2016) [52]
Un troisiegraveme article sur lrsquoautomatisation des tests avec inteacutegration agrave un crawler ce qui
correspond au chapitre 5
1 Oussama Beroual Francis Gueacuterin Sylvain Halleacute Searching for Behavioural Bugs with
Stateful Test Oracles in Web Crawlers SBSTICSE 2017 ACM 7-13(2017) [38]
CHAPITRE 1
NOTIONS GEacuteNEacuteRALES SUR LE WEB
Deux termes sont drsquousage confondus par le public non averti le terme laquo web raquo et le terme
laquo Internet raquo Ce chapitre est destineacute agrave lever cette confusion puis agrave mettre lrsquoaccent sur la
majoriteacute des aspects drsquoune application web piegravece maicirctresse de notre recherche
11 LE FONCTIONNEMENT DU WEB
Une diffeacuterence de taille entre laquo Internet raquo et laquo web raquo est agrave noter Internet est un reacuteseau composeacute
drsquoune multitude de reacuteseaux connecteacutes entre eux Chacun de ces reacuteseaux est composeacute drsquoun
ensemble drsquoeacutequipements (fibres optiques etc) constituant un support physique drsquoinformation
Le web quant agrave lui est un systegraveme de fichiers veacutehiculeacutes par des serveurs Il repreacutesente le
contenu principal drsquoInternet agrave cocircteacute drsquoautres contenus tels que le courrier eacutelectronique la
messagerie etc Il nrsquoest donc qursquoune des applications drsquoInternet
Un site web est un contenu sur Internet Ce contenu nrsquoest rien drsquoautre qursquoun ensemble de
fichiers (HTML CSS JavaScript etc) heacutebergeacutes sur un serveur Selon leur meacutecanisme de
fonctionnement deux types de site sont distingueacutes les sites statiques dont le contenu est inva-
riable et les sites dynamiques dont le contenu est variable Les premiers ne sont modifiables
8
que par leurs proprieacutetaires alors que les seconds sont modifiables par des utilisateurs autres
que leurs proprieacutetaires La reacutealisation de chacun de ces sites fait appel agrave des technologies bien
deacutetermineacutees telles que HTML CSS et JavaScript
Les acteurs principaux dans le fonctionnement du web sont les clients repreacutesenteacutes par des
navigateurs tels que Firefox Internet Explorer Chrome et Safari et les serveurs repreacutesenteacutes
par les machines abritant les sites web ougrave les fichiers sont stockeacutes Chaque serveur est
identifieacute sur un reacuteseau par son adresse IP (Internet Protocol) et chaque page web est associeacutee
agrave une adresse URL (Uniform Resource Locator ou laquo localisateur uniforme de ressource raquo)
caracteacuteriseacutee par un contenu Une demande drsquoune page web agrave un serveur correspond donc agrave
une demande drsquoun contenu La communication entre les clients et les serveurs est assureacutee
par un protocole appeleacute laquo HTTP raquo (HyperText Transfer Protocol ou laquo protocole de transfert
hypertexte raquo) via lequel les requecirctes sont formuleacutees par les navigateurs aux serveurs [37]
HTTP est donc la langue de conversation entre le navigateur et le serveur La conversation
se fait selon le principe de laquo requecircte-reacuteponse raquo La formulation drsquoune requecircte HTTP par le
navigateur est suivie par une reacuteponse HTTP du serveur apregraves lrsquoavoir deacutecodeacutee et eacutetudieacutee En plus
de la ligne de requecircte deacutefinissant le document demandeacute la meacutethode appliqueacutee et le protocole
utiliseacute une requecircte est composeacutee de deux ensembles de lignes des lignes facultatives et des
lignes optionnelles Les premiegraveres sont les champs drsquoen-tecircte de la requecircte et sont chargeacutees
de fournir des informations suppleacutementaires sur la requecircte ou le client (type de navigateur
systegraveme drsquoexploitation etc) Les secondes forment le corps de la requecircte et sont chargeacutees lors
de lrsquoenvoi de donneacutees au serveur de permettre un envoi de donneacutees par une meacutethode speacutecifique
(lrsquoenvoi de donneacutees au serveur par un formulaire par une meacutethode POST par exemple)
Une requecircte de type GET nomme lrsquoURL agrave reacutecupeacuterer httpuqacca par exemple dans la
figure 11 Le navigateur srsquoidentifie dans lrsquoen-tecircte User-Agent et indique les types de reacuteponses
9
GET HTTP11Host wwwuqaccaConnection keep-aliveUser-Agent Mozilla50 (Windows NT 61 Win64 x64)
AppleWebKit53736 (KHTML like Gecko) Chrome6103163100Safari53736
Upgrade-Insecure-Requests 1Accept texthtmlapplicationxmlq=09Accept-Encoding gzip deflateAccept-Language fr-FRfrq=08en-USq=06enq=04Cookie PHPSESSID=tphmk53fee883355e4eq24dmb5
Upgrade-Insecure-Requests 1Connection keep-aliveHost wwwuqacca
Figure 11 ndash Exemple drsquoune requecircte HTTP
qursquoil accepte dans lrsquoen-tecircte Accept et Accept-Encoding Lrsquoen-tecircte Connection demande
au serveur de garder la connexion TCP ouverte pour drsquoautres requecirctes La requecircte contient
eacutegalement les cookies que le navigateur conserve pour ce domaine Les cookies sont des paires
cleacute-valeur qui suivent lrsquoeacutetat drsquoun site web entre diffeacuterentes demandes de pages Ainsi les
cookies stockent le nom de lrsquoutilisateur connecteacute un numeacutero secret attribueacute agrave lrsquoutilisateur par
le serveur certains paramegravetres de lrsquoutilisateur etc Les cookies sont stockeacutes dans un fichier
texte sur le client et envoyeacutes au serveur agrave chaque demande
La reacuteponse du serveur sur la requecircte de la figure 11 geacuteneacutereacutee et renvoyeacutee est montreacutee dans
figure 12
Lrsquoen-tecircte qui deacutefinit Content-Type en texthtml indique au navigateur de rendre le contenu
de la reacuteponse [13] au format HTML au lieu de le teacuteleacutecharger en tant que fichier Le navigateur
utilise lrsquoen-tecircte pour deacutecider comment interpreacuteter la reacuteponse mais tient eacutegalement compte
drsquoautres facteurs tels que lrsquoextension de lrsquoURL
10
HTTP10 200 OKDate Sat 11 Nov 2017 190323 GMTServer Apache2222 (Unix) mod_ssl2222 OpenSSL101e-fipsX-Powered-By PHP5217Access-Control-Allow-Origin httpswprodluqaccaExpires Thu 19 Nov 1981 085200 GMTCache-Control no-store no-cache must-revalidatePragma no-cacheContent-Type texthtmlX-Cache MISS from w3repuqaccaX-Cache-Lookup MISS from w3repuqacca80Via 10 w3repuqacca (squid3123)Connection close
Figure 12 ndash Exemple drsquoune reacuteponse HTTP
12 LE LANGAGE HTML
Nous allons nous limiter dans ce qui suit agrave la preacutesentation de lrsquoessentiel des eacuteleacutements de base
relatifs agrave ces trois langages agrave savoir les balises pour le HTML les seacutelecteurs pour le CSS et
quelques notions de base sur JavaScript
Le langage HTML laquo HyperText Markup Language raquo en anglais ou laquo langage de balisage
hypertexte raquo en franccedilais ou encore laquo langage de marquage hypertexte raquo dont la creacuteation revient
agrave 1991 est un langage de description de document pouvant ecirctre eacutecrit avec un simple eacutediteur
de texte sans une application speacutecifique et servant agrave produire (sur Internet) des pages Web
drsquoune grande varieacuteteacute de contenus de mise en forme ou drsquoanimations et agrave inseacuterer diffeacuterents
types drsquoeacuteleacutements(texte des liens des images etc) Il permet aussi de deacutesigner au navigateur
certaines speacutecificiteacutes telle que la consideacuteration drsquoun texte comme un paragraphe ou un titre
11
121 STRUCTURE DrsquoUN DOCUMENT
La structure drsquoun document HTML doit satisfaire un scheacutema preacutecis et comprendre un ensemble
de balises speacuteciales essentielles pour tout document HTML Les eacuteleacutements composants la
structure drsquoun document HTML sont les suivants
Doctype Un document HTML deacutebute toujours par le soulignement de la nature du document
crsquoest agrave dire le langage utiliseacute (HTML) en faisant appel agrave la balise lt DOCTYPE htmlgt
Lrsquoeacuteleacutement lthtmlgt Lrsquoeacuteleacutement html comprend deux balises lthtmlgt et lthtmlgt Il deacutefinit
lrsquounique racine du document HTML Tous les autres eacuteleacutements doivent y ecirctre placeacutes
Lrsquoeacuteleacutement ltheadgt Cet eacuteleacutement repreacutesente lrsquoen-tecircte du document et renferme exclusivement
des meacuteta-donneacutees (titre de la page type drsquoencodage utiliseacute etc) exploiteacutees par les navigateurs
pour ameacuteliorer lrsquoergonomie de la page
Lrsquoeacuteleacutement ltbodygt Lrsquoeacuteleacutement body repreacutesente le corps du document Il est toujours placeacute
apregraves lrsquoen-tecircte et contient tout le contenu laquo visible raquo de la page les textes images liens
videacuteos etc
Lrsquoeacuteleacutement lttitlegt La structure srsquoachegraveve par une des meacuteta-donneacutees utiliseacutees par le navigateur
qui constitue le seul eacuteleacutement HTML obligatoire le titre du document placeacute agrave lrsquointeacuterieur de
lrsquoeacuteleacutement head
Voici le document HTML formel le plus simple qursquoon puisse eacutecrire
12
ltDOCTYPE htmlgtlthtmlgt
ltheadgtlttitlegtTitre de la pagelttitlegt
ltheadgtltbodygt
lth1gtUn grand titrelth1gtltpgtUn paragraphltpgt
ltbodygtlthtmlgt
Figure 13 ndash Un exemple simple de page HTML contenant un grand titre et un paragraphe
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtUn document HTMLlttitlegtltheadgtltbodygtlt-- Du contenu pour lrsquoutilisateur ici --gtltbodygtlthtmlgt
Le code HTML dans la figure 13 par exemple indique que lrsquoon souhaite creacuteer un grand titre
(gracircce agrave lrsquoeacuteleacutement h1) et un paragraphe (gracircce agrave lrsquoeacuteleacutement p)
122 VERSIONS DU HTML
Le Web a connu ces deux derniegraveres deacutecennies une eacutevolution extraordinaire En effet lrsquoavanceacutee
technologique a donneacute lieu agrave une ameacutelioration des performances des composants physiques
et une augmentation de la vitesse de connexion entraicircnant par conseacutequent une eacutevolution
13
remarquable des sites Web A leur tour les langages tels que le HTML et le CSS ont eacutegalement
connu une eacutevolution consideacuterable (modifications enrichissements etc) drsquoougrave lrsquoapparition de
nouvelles versions de ces langages bien que lrsquoeacutevolution nrsquoa pas eacuteteacute lineacuteaire ni continue pour
lrsquoutilisateur final Les nouvelles versions sont doteacutees chacune de nouvelles fonctionnaliteacutes et
change parfois totalement la syntaxe du langage La premiegravere version de HTML lrsquoHTML1
a vu le jour en 1991 De nombreuses ameacuteliorations apporteacutees par la suite par le creacuteateur du
HTML jugeacutees inteacuteressantes et importantes lrsquoont conduit en 1994 agrave partager publiquement la
nouvelle version de son langage le HTML2 Drsquoautres versions se sont succeacutedeacutees HTML2
(1995) HTML32 (janvier 1997) HTML4 modifieacutee agrave plusieurs reprises (1997 1998 1999
2000) HTML5 (2014) HTML51 (2016) Parmi toutes ces versions la plus stable celle qui
offre de nouvelles fonctionnaliteacutes et ouvre de nouvelles possibiliteacutes inteacuteressantes est la plus
reacutecente agrave savoir HTML51
123 EacuteLEacuteMENTS DE BASE EN HTML
Le fonctionnement du HTML srsquoappuie sur la notion drsquoeacuteleacutements Ces derniers ont pour rocircle
de structurer du contenu pour donner du sens aux diffeacuterents objets de ce contenu Ils sont
constitueacutes de balises renfermant des attributs et du contenu entre elles
Les balises en HTML Le nombre de balises constituant le HTML est environ 140 Elles
servent agrave fournir au navigateur des indications sur le sens drsquoun eacuteleacutement son interpreacutetation ou
son affichage en plus drsquoautres indications telles que la gestion des formulaires en ligne lrsquoajout
des fichiers multimeacutedias etc On distingue plusieurs types de balises chargeacutee chacune drsquoune
fonction bien deacutetermineacutee bien que certaines nrsquoont de fonction que de seacuteparer des sections drsquoun
document Parmi ces fonctions deacutefinir des titres creacuteer des paragraphes creacuteer des liens vers des
ressources externes inteacutegrer une image dans un document HTML creacuteer des listes Les balises
14
suivantes sont donneacutees agrave titre drsquoexemple ltpgt lth1gt ltimggt ltligt ltagt Les eacuteleacutements
sont constitueacutes geacuteneacuteralement drsquoune paire de balises (ouvrante et fermante) et drsquoun contenu
entre les balises et exceptionnellement drsquoune balise unique dite dans ce cas laquo orpheline raquo
Une balise fermante doit avoir le mecircme nom que la balise ouvrante correspondante (notez la
preacutesence du slash (barre oblique))
Les balises laquo auto fermantes raquo (ou balises vides) Certaines balises sont deacutepourvues de texte
du fait qursquoelles sont ouvrantes et fermantes en mecircme temps les balises AUTO FERMANTES
sont soit des balises de type BLOC (exemple lthr gt) des balises EN LIGNE (exemple
ltimg gt)
Les attributs en HTML Les attributs se placent dans la balise ouvrante drsquoun eacuteleacutement et
possegravedent toujours une valeur (parfois implicite) Ils viennent apporter plus de deacutetails sur les
eacuteleacutements Par exemple lrsquoattribut href (hypertexte reacutefeacuterence) va offrir lrsquoadresse (la valeur) de
la page du lien agrave lrsquoeacuteleacutement ltagt (pour anchor) chargeacute de la creacuteation des liens vers drsquoautres sites
ou drsquoautres pages
Lrsquoeacuteleacutement ltimggt constitueacute drsquoune seule balise orpheline chargeacute drsquoinseacuterer une image dans
une page HTML a besoin de deux attributs src et alt Le premier src assure le nom et
lrsquoemplacement de lrsquoimage (la valeur) alors que lrsquoattribut alt se charge de lrsquoaffichage drsquoun texte
alternatif agrave une indisponibiliteacute de lrsquoimage
Notez bien que les balises et les attributs ne seront jamais afficheacutes par le navigateur il va srsquoen
servir drsquoindication pour justement savoir ce qursquoil doit afficher (un paragraphe un titre un lien
une image etc)
15
13 LES CASCADING STYLESHEETS (CSS)
Le CSS laquo Cascading StyleSheets raquo en anglais ou laquo feuilles de styles en cascade raquo en franccedilais est
un langage informatique apparu en 1996 voueacute agrave la mise en forme du contenu des documents
HTML et XML moyennant des styles pour deacutefinir la taille la couleur ou lrsquoalignement du texte
afin drsquoagreacutementer le reacutesultat visuel final de ce contenu Il est utiliseacute dans la conception de
sites web Le code ci-dessous par exemple indique que les titres h1 eacutecrits en HTML doivent
avoir une couleur verte et une taille de 20px tandis que les paragraphes doivent ecirctre noir et
souligneacutes
h1 color greenfont-size 20px
p color blacktext-decoration underline
Le CSS est donc un autre langage du web venant compleacuteter le HTML Il permet la mise en
page drsquoun contenu et le changement de son apparence en lui appliquant des styles (choisir
la couleur du texte seacutelectionner la police utiliseacutee deacutefinir la taille du texte les bordures le
fond) Lrsquoapparition du HTML a devanceacute lrsquoapparition du CSS de cinq anneacutees peacuteriode dans
laquelle la mise en page eacutetait effectueacutee par le HTML qui consacrait des balises agrave cette fin
telle que la balise ltfont color=aab1c3gt deacutefinissant la couleur du texte par exemple
Le langage CSS est venu reacutepondre agrave la complexiteacute qursquoont connu les pages HTML avec une
augmentation remarquable des balises entre autres conduisant agrave une mise agrave jour des pages
web de plus en plus complexe Agrave lrsquoinstar du HTML le CSS est passeacute par plusieurs versions
16
les plus importantes sont CSS1 CSS20 CSS21 et CSS3
Eacutecriture du code CSS Le code CSS peut ecirctre eacutecrit agrave trois endroits distincts
1 Dans un Lrsquoeacuteleacutement HTML ltstylegt
2 Dans la balise ouvrante des eacuteleacutements HTML(meacutethode la moins recommandeacutee)
3 Dans un fichier CSS seacutepareacute (meacutethode la plus recommandeacutee)
131 PROPRIEacuteTEacuteS ET SEacuteLECTEURS CSS
Les proprieacuteteacutes CSS permettent de choisir quel(s) aspect(s) (ou laquo styles raquo) drsquoun eacuteleacutement HTML
que lrsquoon souhaite modifier
Lrsquoapplication drsquoun style agrave un ou plusieurs eacuteleacutements HTML signifie leurs seacutelections au preacutealable
pour les soumettre agrave un style particulier Lrsquointervention drsquoun seacutelecteur est donc neacutecessaire Le
CSS est fondeacute sur un ensemble de regravegles les seacutelecteurs sont la premiegravere partie drsquoune regravegle CSS
Crsquoest une syntaxe chargeacutee drsquoidentifier les eacuteleacutements du document auxquels la regravegle est deacutedieacutee
(appliqueacutee) Depuis son arriveacutee (1996) le CSS a speacutecifieacute un certain nombre de seacutelecteurs tregraves
accepteacutes de nos jours par les diffeacuterents navigateurs les plus freacutequemment utiliseacutes sont
Les seacutelecteurs de type Ce seacutelecteur cible lrsquoeacuteleacutement du document agrave styler en se basant sur
le nom de lrsquoeacuteleacutement Il doit correspondre dans ce cas au nom de lrsquoeacuteleacutement Exemple pour
mettre en bleu le texte des titres de niveau 1 le seacutelecteur sera h1
h1 color blue
17
Les seacutelecteurs de classe Ce seacutelecteur permet de cibler les eacuteleacutements en fonction de la valeur
de leur attribut class Il permet donc de seacutelectionner tous les eacuteleacutements ayant une certaine classe
Preacuteceacuteder le nom de la classe par un point () suffit pour obtenir le seacutelecteur correspondant
agrave cette classe Exemple la classe ltimportantgt est attribueacutee agrave tous les eacuteleacutements jugeacutes
importants Il suffit de deacutefinir dans le fichier CSS une regravegle stipulant que le texte de tous les
eacuteleacutements posseacutedant la classe Important soit eacutecrit en rouge
ltp class=ImportantgtCoucoultpgt
Important
color red
Les seacutelecteurs drsquoidentifiant Ce seacutelecteur permet de cibler un eacuteleacutement drsquoun document en
fonction de la valeur de son attribut ltidgt Dans un document il ne doit y avoir qursquoun seul
identifiant donneacute agrave lrsquoeacuteleacutement Preacuteceacutedeacute le nom de lrsquoidentifiant par un diegravese () suffit pour
obtenir le seacutelecteur correspondant agrave cet identifiant Exemple Un identifiant Menu est utiliseacute
pour repeacuterer notre menu dans le document Il suffit de deacutefinir dans le fichier CSS une regravegle
indiquant que notre menu ne soit pas afficheacute
ltdiv id=Menugtltdivgt
Menu
display none
18
Le seacutelecteur universel laquo raquo Ce seacutelecteur permet de cibler tous les eacuteleacutements drsquoun document
drsquoougrave lrsquoappellation de seacutelecteur universel Il existe eacutegalement une variante pour ne cibler qursquoun
seul eacuteleacutement
Regroupements des seacutelecteurs Une autre maniegravere de proceacuteder consiste en la reacuteduction de
taille du fichier CSS en appliquant une mecircme regravegle agrave plusieurs seacutelecteurs Ces derniers sont
dans ce cas seacutepareacutes par une virgule () Exemple les eacuteleacutements posseacutedant la classe Important
et les titres lth2gt sont eacutecrits en rouge
Important h2
color red
14 JAVASCRIPT
JavaScript est un langage de programmation de scripts utiliseacute surtout dans les pages web
interactives ainsi que pour les serveurs Il a eacuteteacute creacutee par Brendan Eich en 1995 en lrsquoespace de
dix jours suite agrave une demande formuleacutee par la Netscape Communications Corporation Les
bases du langage et ses principales interfaces sont fournies par des objets ce qui fait de lui un
langage orienteacute objet agrave prototype Les objets en question ne sont pas des instances de classes
Ils sont eacutequipeacutes chacun de constructeurs permettant de creacuteer leurs proprieacuteteacutes et notamment le
prototypage qui sert agrave creacuteer des objets heacuteritiers personnaliseacutes JavaScript dont les fonctions
sont des objets de premiegravere classe supporte le paradigme objet impeacuteratif et fonctionnel
Depuis sa creacuteation JavaScript a connu drsquoinnombrables modifications Il a eacuteteacute standardiseacute
en 1997 par laquo Ecma International raquo donnant naissance agrave la premiegravere eacutedition du standard
19
laquo ECMA-262 raquo la deuxiegraveme eacutedition du standard laquo ECMA-262 raquo a vu le jour en 1998 suite
agrave des changements reacutedactionnels apporteacutes au standard laquo ECMA-262 raquo pour le conformer au
standard international laquo ISOCEI 16262 raquo Des ameacuteliorations(dans la manipulation des chaicircnes
de caractegraveres dans les instructions de controcircle etc) introduites dans la deuxiegraveme eacutedition ont
donneacute lieu en 1999 agrave la publication de la troisiegraveme eacutedition du standard ECMA-262 Depuis la
troisiegraveme eacutedition les eacuteditions se sont succeacutedeacutees pour arriver actuellement agrave la huitiegraveme eacutedition
Les diffeacuterentes eacuteditions apparues ont chacune participeacute avec un plus dans le deacuteveloppement
des performances du langage
La plupart des langages de programmation ont des fonctionnaliteacutes de base communes Lrsquouti-
lisation de JavaScript neacutecessite la connaissance de ces bases pour mieux comprendre son
fonctionnement
Variables Les variables sont des conteneurs servant agrave stocker temporairement des informa-
tions Une variable a le pouvoir de varier autrement dit de pouvoir stocker diffeacuterentes valeurs
dans le temps en laquo eacutecrasant raquo sa valeur preacuteceacutedente Une variable est deacuteclareacutee au commencement
avec le mot-cleacute let suivi du nom qursquoon souhaite utiliser pour la variable
Un certain nombre de regravegles sont agrave consideacuterer en JavaScript
1 les lignes de code doivent terminer par un point-virgule pour indiquer que crsquoest la
fin de la ligne Lrsquoomission de ces points-virgules peut conduire agrave des comportements
inattendus voire des erreurs
2 Nrsquoimporte quel nom peut ecirctre (quasiment) utiliseacute pour nommer une variable Il y a
cependant quelques restrictions sur ces noms
3 Eacuteviter la casse JavaScript y est sensible cela veut dire que maVariable sera consideacutereacute
comme un nom diffeacuterent de mavariable Lrsquoapparition des problegravemes sur les noms de
20
variables dans le code implique la veacuterification de la casse utiliseacutee
4 Avec les versions reacutecentes de JavaScript il est conseilleacute drsquoutiliser le mot-cleacute let Cepen-
dant des variables deacuteclareacutees avec le mot-cleacute var sont parfois rencontreacutees Ce dernier est
utiliseacute lorsque notre code doit supporter des navigateurs anciens (IE lt 11) let nrsquoeacutetant
pas supporteacute dans ce cas Une fois une variable est deacuteclareacutee on lui donne une valeur
maVariable = rsquooussrsquo
Pour utiliser la valeur plus loin dans le code il suffit de faire appel agrave la variable en utilisant
son nom maVariable Lorsque on creacutee une variable et qursquoon lui donne une valeur cela
peut se faire sur une seule ligne let maVariable = rsquooussrsquo Une fois qursquoon a donneacute une
valeur agrave une variable on peut la changer plus loin
let maVariable = rsquooussrsquomaVariable = rsquoSylvainrsquo
Les variables sont reacuteparties en diffeacuterents types de donneacutees et ont chacune une fonction Parmi
ces variables on a la chaicircne de caractegraveres le nombre le Booleacuteen le tableau lrsquoobjetetc Les
variables sont indispensables agrave la programmation Si les valeurs sont statiques rien ne pourrait
se faire Par exemple on ne pourrait pas personnaliser un message de bienvenue ou changer
lrsquoimage afficheacutee dans une galerie
Les opeacuterateurs Un opeacuterateur est un symbole matheacutematique qui produit un reacutesultat en
fonction de plusieurs valeurs (la plupart du temps on utilise deux valeurs et un opeacuterateur)
Parmi les opeacuterateurs les plus simples on a lrsquoopeacuterateur drsquoaffectation lrsquoopeacuterateur drsquoidentiteacute
lrsquoopeacuterateur de neacutegation lrsquoopeacuterateur drsquoineacutegaliteacute
Il y a plein drsquoautres opeacuterateurs mais on srsquoen tiendra agrave ceux-lagrave
Il est agrave noter que lrsquoutilisation de diffeacuterents types de donneacutees avec un mecircme opeacuterateur faussera
21
le reacutesultat obtenu le reacutesultat obtenu par70 + 12 nrsquoest pas le mecircme que celui obtenu par
70 + 12 le deuxiegraveme reacutesultat est le bon car les nombres entoureacutes de guillemets sont donc
consideacutereacutes comme des chaicircnes de caractegraveres
Les structures conditionnelles Les structures conditionnelles sont des eacuteleacutements du code qui
permettent de tester si une expression est vraie ou non et drsquoexeacutecuter des instructions diffeacuterentes
selon le reacutesultat La structure conditionnelle utiliseacutee la plus freacutequemment est if else
Par exemple
let parfumGlace = rsquosorbet de fraisersquoif (parfumGlace === rsquosorbet de fraisersquo)
alert(Jrsquoadore le sorbet de fraise ) else
alert(Jrsquoaurai preacutefeacutereacute un sorbet de fraise)
Le test agrave reacutealiseacute est contenue dans if ( ) Il consiste en une comparaison de la variable
parfumGlace avec la chaicircne de caractegraveres laquo sorbet de fraise raquo via lrsquoopeacuterateur drsquoidentiteacute pour
veacuterifier leur eacutegaliteacute Si cette comparaison renvoie true le premier bloc de code sera exeacutecuteacute
Sinon crsquoest le code du second bloc celui preacutesent apregraves else qui sera exeacutecuteacute
Les fonctions Les fonctions sont chargeacutees drsquoorganiser les fonctionnaliteacutes agrave reacuteutiliser Par
exemple au lieu drsquoexeacutecuter deux fois la mecircme action plutocirct que de recopier le code la
fonction est eacutecrite une fois puis utiliser aux deux endroits souhaiteacutes
let maVariable = documentquerySelector(rsquoh1rsquo)alert(rsquoSalut rsquo)
Ces fonctions (querySelector et alert) sont disponibles dans le navigateur Elles ressemblent
agrave un nom de variable suivi de parenthegraveses et utilisent des arguments dans leurs calculs Les
22
arguments sont placeacutes entre les parenthegraveses seacutepareacutes par des virgules srsquoil y en a plusieurs Par
exemple la fonction alert() fait apparaicirctre une fenecirctre de pop-up dans la fenecirctre du navigateur
Un argument est utiliseacute pour indiquer agrave la fonction le contenu qursquoon deacutesire eacutecrire dans cette
fenecirctre En plus des fonctions deacutejagrave existantes drsquoautres fonctions peuvent ecirctre deacutefinies par
nous-mecircmes Par exemple fonction toute simple qui considegravere deux arguments et renvoie le
reacutesultat de la multiplication
function multiplier(num1num2) let reacutesultat = num1 num2return reacutesultat
Avant une utilisation reacutepeacuteteacutee de cette fonction elle doit ecirctre deacuteclareacutee dans la console
multiplier(47)multiplier(2020)multiplier(053)
Lrsquoinstruction return indique au navigateur qursquoil faut renvoyer la variable reacutesultat en dehors de
la fonction afin qursquoelle puisse ecirctre reacuteutiliseacutee par ailleurs Cette instruction est neacutecessaire car
les variables deacutefinies agrave lrsquointeacuterieur des fonctions sont uniquement disponibles agrave lrsquointeacuterieur de
ces fonctions Crsquoest ce qursquoon appelle une porteacutee
Les eacuteveacutenements Un site web vraiment interactif est caracteacuteriseacute par des eacuteveacutenements Les
eacuteveacutenements sont des structures de code agrave lrsquoeacutecoute du navigateur permettant de deacuteclencher des
actions au moindre problegraveme Lrsquoexemple concret est lrsquoeacuteveacutenement de clic qui est deacuteclencheacute
une fois lrsquoutilisateur clique sur quelque chose dans le navigateur Lrsquoexemple ci-dessous peut
donner une ideacutee sur ce que ccedila donne en pratique il suffit de saisir ces quelques lignes dans la
console puis cliquez sur la page
23
documentquerySelector(rsquohtmlrsquo)onclick = function() alert(rsquoarrecirctez de cliquerrsquo)
Les meacutethodes pour laquo attacher raquo un eacuteveacutenement agrave un eacuteleacutement sont multiples Dans cet exemple
deux paramegravetres sont deacutefinis lrsquoeacuteleacutement HTML concerneacute et un gestionnaire onclick qui
est une proprieacuteteacute eacutegale agrave une fonction anonyme (elle nrsquoa pas de nom) qui contient le code agrave
exeacutecuter quand lrsquoutilisateur clique
On pourra noter que documentquerySelector(rsquohtmlrsquo)onclick = function()
est eacutequivalent agrave
let maHTML = documentquerySelector(rsquohtmlrsquo)maHTMLonclick = function()
La premiegravere syntaxe est simplement plus courte Drsquoautres fonctionnaliteacutes peuvent srsquoajouter
aux bases en JavaScript exposeacutees
15 LE FONCTIONNEMENT INTERNE DES NAVIGATEURS WEB
Pour la peacuteriode allant de mars 2015 agrave mars 2016 la part de marcheacute des navigateurs drsquoapregraves les
statistiques de StatCounter [19] est de pregraves de 96 entre Internet Explorer Firefox Chrome
et Opera Le tableau 11 montre en pourcentage la part de chaque navigateur
24
Navigateur Part drsquoutilisation en
Chrome 5232
Internet Explorer 162
Firefox 1558
Safari 978
Opera 181
Autres 431
Tableau 11 ndash Statistiques des parts drsquoutilisation des navigateurs dans le monde entre mars 2015et mars 2016
Une ressource web eacutetant seacutelectionneacutee en faisant appel au serveur est ensuite afficheacutee par le
navigateur Celle-ci peut ecirctre un document HTML (qui est le cas geacuteneacuteral) comme elle peut
ecirctre un autre type de fichier Une URL est mobiliseacutee par lrsquoutilisateur pour la reacutecupeacuteration
de la ressource Les speacutecifications HTML et CSS qui preacutecisent au navigateur la maniegravere
drsquointerpreacuteter et drsquoafficher les fichiers HTML sont maintenues par lrsquoorganisation W3C (World
Wide Web Consortium) [12]
La structure drsquoun navigateur comprend plusieurs composants tels qursquoune interface utilisateur
le moteur du navigateur un composant reacuteseau une interface drsquoarriegravere-plan (backend UI)
un interpreacuteteur JavaScript un analyseur XML (XML parser) un composant de stockage de
donneacutees et finalement le moteur de rendu qui est la piegravece la plus importante dans cet ensemble
[49] [48] La figure 14 montre le flux entre les composants du navigateur
Avant son affichage agrave lrsquoutilisateur une page web parcourt le chemin suivant
1 La requecircte est envoyeacutee vers le serveur en utilisant lrsquointerface utilisateur qui enferme
une barre drsquoadresse des boutons preacuteceacutedent et suivant un menu de marque-page
25
des boutons drsquoactualisation et drsquoarrecirct etc La requecircte est transporteacutee via le composant
reacuteseau qui assure les appels reacuteseau telles que les requecirctes HTTP Il est doteacute drsquoune
interface indeacutependante de la plateforme et en dessous des impleacutementations pour chaque
plateforme
2 La reacuteponse est renvoyeacutee par le serveur apregraves plusieurs traitements au niveau du serveur
drsquoapplication afin de geacuteneacuterer la page demandeacutee en HTML (les deacutetails sur ces deux
eacutetapes ont eacuteteacute exposeacutes dans la section 11)
3 Le composant reacuteseau passe les donneacutees brutes reacutecupeacutereacutees agrave un autre composant qui
a comme rocircle drsquoenregistrer toutes sortes de donneacutees sur le disque dur par exemple
des cookies Il srsquoagit drsquoune couche de persistance La nouvelle speacutecification HTML
(HTML5) deacutefinit le terme laquo base de donneacutees Web raquo qui est un systegraveme complet (bien
que leacuteger) de base de donneacutees dans le navigateur
4 Les octets bruts sont transporteacutes au moteur de rendu qui est responsable de lrsquoaffichage du
contenu demandeacute agrave lrsquoeacutecran en suivant plusieurs processus drsquoanalyse sur le code HTML
et CSS Les deacutetails de ces processus drsquoanalyse sont abordeacutes dans le reste du chapitre
5 Un interpreacuteteur JavaScript est appeleacute par le moteur de rendu pour lrsquoanalyse et lrsquoexeacutecution
du code JavaScript Pareillement pour lrsquoanalyseur XML (XML parser) qui est utiliseacute
pour lrsquoanalyse des documents XML dans lrsquoarbre du DOM (Document Object Model)
Crsquoest lrsquoun des sous systegravemes les plus reacuteutilisables dans lrsquoarchitecture En fait presque
toutes les impleacutementations des navigateurs exploitent un analyseur XML existant plutocirct
que de creacuteer leur propre analyseur agrave partir de zeacutero
6ndash7 Lrsquointerface drsquoarriegravere-plan (backend UI) est destineacute agrave dessiner des widgets de base
du genre listes deacuteroulantes et fenecirctres Une interface geacuteneacuterique non speacutecifique agrave la
plateforme est preacutesenteacutee par le navigateur qui utilise drsquoautre part en dessous lrsquointerface
utilisateur du systegraveme drsquoexploitation
26
Figure 14 ndash Le flux entre les composants du navigateur pour la reacutecupeacuteration et le traitementdrsquoune page web dans le navigateur
8ndash9 Ce dernier composant est relieacute au moteur de rendu qui envoie le rendu final agrave lrsquoutilisateur
dans la derniegravere eacutetape de la figure
Lrsquoaffichage drsquoune page web par le navigateur moyennant le code HTML CSS et JavaScript
nrsquoest pas aussi simple Pour ce faire le navigateur fait particuliegraverement appel agrave lrsquoun de ses
composants le moteur de rendu
Les opeacuterations qui se manifestent agrave lrsquointeacuterieur du navigateur et en particulier le fonctionnement
des moteurs de rendu des navigateurs les plus utiliseacutes ont eacuteteacute expliqueacutes par Garsiel et Irish
[11] Lrsquoaffichage drsquoune page web comporte de fait plusieurs phases La premiegravere consiste en
la construction des arborescences DOM (modegravele drsquoobjet de document) et CSSOM (modegravele
drsquoobjet CSS) Cette derniegravere phase est suivie par la transformation des balisages HTML et CSS
en DOM et CSSOM respectivement dont la combinaison forme une arborescence drsquoaffichage
(arbre de rendu) Cette arborescence agrave son tour est chargeacutee de la mise en page de chaque
eacuteleacutement visible et de lrsquointroduction des donneacutees exigeacutees pour lrsquoaffichage des pixels agrave lrsquoeacutecran
[5]
27
lthtmlgtltheadgt
ltmeta name=viewport content=width=device-widthinitial-scale=1gtltlink href=designcss rel=stylesheetgtlttitlegtExemplelttitlegt
ltheadgtltbodygt
ltpgtSalut ltspangtOussamaltspangt Beroual ltpgtltdivgtltimg src=ma-photojpggtltdivgt
ltbodygtlthtmlgt
Figure 15 ndash Un exemple simple de page web illustrant le rendu dans un navigateur
Construction du modegravele drsquoobjet DOM
Le processus de construction du modegravele drsquoobjet DOM est exposeacute ci-dessous agrave travers lrsquoexemple
drsquoune page web simple en HTML brut avec du texte et une seule image Le code HTML de la
page agrave eacutetudier est donneacute agrave la figure 15
Le traitement de cette page impose au moteur de rendu du navigateur drsquoexeacutecuter quatre
processus de transformation tel qursquoillustreacute dans la figure 16
1 Le premier processus est la conversion le moteur de rendu lit les octets bruts du
HTML sur le disque ou le reacuteseau et les traduit en caractegraveres individuels en fonction de
lrsquoencodage speacutecifique du fichier (UTF-8 par exemple)
2 Le deuxiegraveme processus est la creacuteation de jetons le moteur de rendu convertit les
chaicircnes de caractegraveres en diffeacuterents jetons speacutecifieacutes par la norme HTML5 du W3C
telles que lthtmlgt et ltbodygt Chaque jeton possegravede une signification particuliegravere et un
ensemble de regravegles
3 Le troisiegraveme processus est lrsquoanalyse lexicale les jetons eacutemis sont convertis en objets
qui deacutefinissent leurs proprieacuteteacutes et leurs regravegles
28
Figure 16 ndash Les processus de traitement de HTML et CSS au niveau du moteur de rendu dunavigateur
4 Le quatriegraveme processus est la construction du DOM puisque le balisage HTML
deacutefinit les relations entre les diffeacuterentes balises (certaines balises sont contenues dans
drsquoautres) les objets creacuteeacutes sont associeacutes selon une arborescence qui capture eacutegalement
la relation parent-enfant deacutefinie dans le balisage drsquoorigine (lrsquoobjet HTML est un parent
de lrsquoobjet body body est un parent de lrsquoobjet p etc)
Le reacutesultat final de lrsquoensemble de ce processus est le modegravele drsquoobjet de document (ou DOM)
de notre page simple que le navigateur utilise pour tout traitement suppleacutementaire de la page
Lrsquoarbre DOM reacutesultant est illustreacute dans la figure 17
Modegravele drsquoobjet CSS (CSSOM)
Lrsquoinformation sur lrsquoapparence drsquoun eacuteleacutement lors de son affichage est offerte par une autre
construction le CSSOM Durant la construction du DOM de notre page il srsquoest aveacutereacute que
le navigateur a deacuteceleacute une balise de lien link dans la section head du document signalant
une feuille de style CSS externe stylecss Du fait qursquoil a besoin de cette ressource pour
29
Figure 17 ndash Un arbre du modegravele drsquoobjet DOM
body font-size 24px p font-weight bold span color blue p span display none img float right
Figure 18 ndash Un exemple de fichier CSS simple
lrsquoaffichage de la page le navigateur anticipe lrsquoenvoi immeacutediat drsquoune demande pour cette
ressource et reacutepond avec le contenu du fichier illustreacute agrave la figure 18 Ces styles auraient pu
ecirctre deacuteclareacutes directement dans le balisage HTML (inteacutegreacute) cependant il est recommandeacute
de seacuteparer les codes CSS et HTML puisque les graphistes travaillent sur le code CSS les
deacuteveloppeurs sur le code HTML etc
Les regravegles CSS reccedilues sont converties en un contenu que le navigateur peut comprendre et
traiter de mecircme que pour le code HTML Le processus HTML est reacutepeacuteteacute mais dans ce cas
pour le code CSS (voir figure 16) Les octets CSS sont convertis en caractegraveres puis en jetons
et en nœuds pour finalement se relier au sein drsquoune arborescence appeleacutee CSS Object Model
(CSSOM) ou laquo modegravele drsquoobjet CSS raquo
Le calcul de lrsquoensemble final de styles drsquoun objet de la page tel qursquoeffectueacute par le navigateur
30
Figure 19 ndash Arbre du modegravele drsquoobjet CSSOM
comprend deux eacutetapes Dans une premiegravere eacutetape la regravegle la plus geacuteneacuterale pour ce nœud
est appliqueacutee (par exemple srsquoil srsquoagit drsquoun eacuteleacutement enfant du corps tous les styles du corps
srsquoappliquent) Dans une deuxiegraveme eacutetape des regravegles plus speacutecifiques crsquoest-agrave-dire en descendant
la cascade sont appliqueacutees afin drsquoaffiner de maniegravere reacutecursive les styles calculeacutes
La concreacutetisation de cette deacutemarche est faite agrave partir de lrsquoobservation de lrsquoarborescence
CSSOM dans la figure 19 On peut y lire que tout texte est eacutecrit en bleu et que sa taille de
police est de 24 pixels Il est placeacute dans la balise span contenue dans lrsquoeacuteleacutement body Ce
dernier est chargeacute de transmettre la taille de police agrave lrsquoeacuteleacutement span Toutefois si une balise
span est un enfant drsquoune balise paragraphe (p) le contenu de cette balise nrsquoest pas afficheacute
Il faut se rappeler que lrsquoarborescence CSSOM ci-dessus nrsquoest pas complegravete Elle ne montre
que les styles qui remplacent ceux de la feuille de style Dans lrsquoabsence de styles proposeacutes
tout navigateur fournit un ensemble de styles par deacutefaut eacutegalement appeleacutes styles user-agent
Construction de lrsquoarbre de rendu la mise en page et le dessin
Les donneacutees HTML et CSS ont servi jusqursquoici agrave la creacuteation des arborescences des modegraveles
DOM et CSSOM qui sont des objets indeacutependants chargeacutes chacun de capturer un aspect
du document lrsquoun deacutecrit le contenu et lrsquoautre les regravegles de style appliqueacutees au document
31
Figure 110 ndash Arbre de rendu
Les arborescences des deux modegraveles DOM et CSSOM sont combineacutees pour former une
arborescence drsquoaffichage responsable de lrsquoaffichage de la page et ne contenant que des nœuds
neacutecessaires agrave lrsquoaffichage de la page (voir figure 110)
Une arborescence drsquoaffichage comporte plusieurs types de nœuds des nœuds Visibles des
nœuds invisibles tels que les balises de script les balises Meta etc et des nœuds masqueacutes
par le code CSS Seul le premier type est consideacutereacute dans lrsquoarborescence drsquoaffichage Les
deux autres sont omis Le proceacutedeacute drsquoomission est effectueacute en mobilisant deux proprieacuteteacutes la
proprieacuteteacute visibility hidden rendant lrsquoeacuteleacutement invisible tout en occupant de lrsquoespace dans la
mise en page et la proprieacuteteacute display none supprimant totalement lrsquoeacuteleacutement de lrsquoarborescence
drsquoaffichage La figure 111 donne une vue globale des eacutetapes et processus de la construction
des arbres abordeacutees ci-dessous
Tous les nœuds visibles sont soumis aux regravegles CSSOM et eacutemis avec leurs contenus et leurs
styles calculeacutes Neacuteanmoins leurs positions et leurs geacuteomeacutetries (tailles) restent indeacutefinies La
deacutetermination ou le calcul de ces deux paramegravetres constitue la phase de mise en page appeleacutee
parfois ajustement de la mise en page Cette derniegravere est traduite par lrsquoexemple simple donneacute agrave
la figure 112 Le corps de la page ci-dessus contient deux eacuteleacutements div imbriqueacutes le premier
eacuteleacutement div (parent) deacutefinit la taille drsquoaffichage du nœud agrave 50 de la largeur de la fenecirctre et
le second eacuteleacutement div contenu par le parent deacutefinit sa largeur agrave 50 de celui du parent soit
32
Figure 111 ndash Les eacutetapes et processus de la construction des arbres DOM CSSOM et de lrsquoarbrede rendu
33
lthtmlgtltheadgt
ltmeta name=viewport content=width=device-widthinitial-scale=1gtlttitlegtExemple de mise en pagelttitlegt
ltheadgtltbodygt
ltdiv style=width 50gtltdiv style=width 50gtHello worldltdivgt
ltdivgtltbodygt
lthtmlgt
Figure 112 ndash Un second exemple simple illustrant le processus de mise en page par le navigateur
25 de la largeur de la fenecirctre
Maintenant que toutes les informations relatives aux nœuds sont reacuteunies ceux-ci sont peints
convertis en pixels reacuteels et afficheacutes agrave lrsquoeacutecran agrave partir de lrsquoarborescence drsquoaffichage finale La
construction est acheveacutee et la page est enfin visible dans la fenecirctre La figure 113 reacutesume
toutes les eacutetapes preacuteceacutedemment deacutecrites dans cette section
34
Figure 113 ndash Vue globale du flux de reacutecupeacuteration de traitement et drsquoaffichage drsquoune page web
CHAPITRE 2
LES BUGS DrsquoINTERFACE DANS LES APPLICATIONS WEB
Les utilisateurs du web sont souvent confronteacutes lors drsquoune application web sur internet agrave
des problegravemes tregraves ennuyeux appeleacutes laquo bugs drsquointerfaces raquo Dans ce chapitre nous exposons
les diffeacuterents types drsquoapplication web et les bugs qui les affectent en montrant que les bugs
drsquointerface sont largement preacutesents dans un grand nombre de sites et applications web du
monde reacuteel et comment des bugs de ce genre ne sont pas limiteacutes agrave des problegravemes de preacutesentation
simples statiques et qursquoils reacutevegravelent dans de nombreux cas des deacutefauts dans le comportement
de lrsquoapplication
21 TYPES DrsquoAPPLICATIONS WEB
Le web est maintenant peupleacute par un nombre consideacuterable drsquoapplications par conseacutequent le
nombre de personnes affecteacutees par les bugs qursquoelles peuvent contenir est eacutenorme
211 APPLICATIONS STATIQUES
Les sites web traditionnels qursquoon appelle eacutegalement applications laquo Web 10 raquo sont statiques
le contenu drsquoune page ne change pas apregraves le chargement et chaque page de lrsquoapplication peut
36
ecirctre chargeacutee indeacutependamment de toute interaction preacutealable avec le site Le test automatique
drsquoune telle application peut ecirctre effectueacute agrave lrsquoaide drsquoun robot drsquoindexation en chargeant une page
de deacutemarrage puis en explorant automatiquement les diffeacuterentes interactions possibles sur la
page pour obtenir de nouvelles pages agrave visiter Comme chaque page de ces applications est
indeacutependante les bugs ne peuvent se produire que sur une seule page drsquoougrave vient la possibiliteacute
drsquoeacutecrire des oracles de test simples qui analyseraient le contenu de ces pages prises isoleacutement
Le Responsive Web Design est un moyen de concevoir un site web de sorte que son contenu
srsquoadapte automatiquement agrave la reacutesolution drsquoeacutecran du terminal utiliseacute pour le visualiser Une
application RWD est donc un site web adaptatif La notion de web adaptatif repense la
conception ergonomique des sites web puisqursquoil ne srsquoagit plus de concevoir autant de sites que
de terminaux mais de concevoir une seule interface auto-adaptative Ainsi les informations et
les structures techniques ne sont pas dupliqueacutees ce qui geacutenegravere des eacuteconomies drsquoeacutechelle dans
la conception et la maintenance des sites web beacuteneacuteficiant de ce mode de conception
Un site web conccedilu avec un design responsive est donc optimiseacute pour tous les appareils
disponibles sur le marcheacute ordinateurs tablettes smartphones Cette faccedilon de concevoir des
applications web est recommandeacutee en raison de quelques avantages majeurs le deacuteveloppement
et la maintenance seront plus rapides et plus simples (un seul fichier geacuterant tous les affichages)
Un reacutefeacuterencement naturel optimal est utiliseacute (pas de sous-domaines ou de redirections vers des
annuaires mobiles) puisqursquoil nrsquoy a qursquoun seul site regroupant toutes les versions et uniquement
une adresse Web (URL) Plus de deacutetails sur le concept de RWD sont preacutesenteacutes dans la section
223
37
212 APPLICATIONS WEB 20
Les applications web reacutecentes eacutegalement appeleacutees RIA (Rich Internet Applications) utilisent
des scripts cocircteacute client des eacutetats cocircteacute serveur et drsquoautres fonctionnaliteacutes pour offrir une expeacute-
rience utilisateur ameacutelioreacutee Les modifications apporteacutees agrave lrsquoeacutetat de la page peuvent venir agrave la
suite de requecirctes HTTP asynchrones chargeant un nouveau contenu Par conseacutequent ces appli-
cations sont maintenant stateful la mecircme action ou la mecircme requecircte HTTP peut renvoyer des
reacutesultats diffeacuterents en fonction des interactions passeacutees de lrsquoutilisateur Ces applications avec
eacutetat viennent avec de nouveaux types de bugs appeleacutes bugs comportementaux Contrairement
agrave un bug statique qui srsquoeacutevalue en analysant le contenu drsquoune seule page indeacutependamment des
autres un bug comportemental relie les donneacutees et lrsquoordre de consultation de plusieurs pages
de lrsquoapplication
22 TYPES DE BUGS DrsquoINTERFACE
Un bug drsquointerface est un deacutefaut dans un systegraveme web qui a des effets visibles sur le contenu
des pages servi agrave lrsquoutilisateur Nous avons effectueacute une eacutetude sur de plus de 35 applications
web [51] en tous genres Un releveacute des bugs ayant un impact sur la preacutesentation ou le contenu
de lrsquointerface utilisateur a eacuteteacute fait Le tableau 21 donne la liste des sites web et des applications
pour lesquelles au moins un bug de mise en page a eacuteteacute trouveacute Dans ce qui suit nous preacutesentons
briegravevement les bugs deacutecouverts dans cette eacutetude Nous soulignons qursquoaucun des bugs deacutecrits
ici repreacutesente un problegraveme de compatibiliteacute entre les navigateurs Les bugs sont preacutesents
peu importe le navigateur utiliseacute pour afficher la page et ils ne sont pas causeacutes par une
interpreacutetation divergente des normes par deux navigateurs diffeacuterents
38
mdash Academiaedumdash Acermdash Adagio Hotelsmdash Air Canadamdash Air Francemdash AllMusicmdash American Airlinesmdash Boingomdash Canadian
Mathematical Societymdash Customizeorgmdash Digital Ocean
mdash Dropboxmdash EasyChairmdash Elseviermdash Evous Francemdash Facebookmdash IEEEmdash Just for Laughsmdash LinkedInmdash Liveshoutmdash Microsoft TechNetmdash Monoprixmdash Moodle
mdash Naymzmdash NSERCmdash OngerNeigemdash ProQuestmdash Rail Europemdash ResearchGatemdash St-Hubertmdash SpringerOpenmdash TD Canada Trustmdash Time Magazinemdash Uniform Servermdash YouTube
Tableau 21 ndash Sites et applications web pour lesquelles au moins un bug de mise en page a eacuteteacutetrouveacute
221 BUGS STATIQUES
Un premier type de bugs appeleacutes bugs statiques collecteacutes par une eacutetude empirique dans des
sites web et applications reacuteelles On y retrouve des problegravemes tels que le chevauchement des
eacuteleacutements les eacuteleacutements qui srsquoeacutetendent en dehors de leur conteneur ou le bug drsquoeacuteleacutements mal
empileacutes Ce genre de bugs peut ecirctre diviseacute en deux cateacutegories des bugs lieacutes agrave la mise en page
et drsquoautres non lieacutes agrave la mise en page
Bugs de mise en page
Une premiegravere cateacutegorie de bug correspond agrave des perturbations dans la mise en page ou la
preacutesentation de la page elle-mecircme crsquoest-agrave-dire tout reacutesultat inattendu du concepteur de cette
page en termes de contenu ou de proprieacuteteacutes (position taille nombre drsquoeacuteleacutements)
Eacuteleacutements mal aligneacutes Un problegraveme de mise en page banal mais freacutequent est le deacutesaligne-
ment ou le deacutecalage drsquoeacuteleacutements qui doivent ecirctre aligneacutes La figure 21a montre un exemple de
39
(a) LiveShout
(b) LinkedIn
Figure 21 ndash Exemple drsquoeacuteleacutements mal aligneacutes le cadre blanc est horizontalement mal aligneacute(LiveShout) le menu Interests est deacutecaleacute drsquoun pixel par apport aux autres menus (LinkedIn)
ce bug courant mais parfois le deacutesalignement est subtil un eacuteleacutement peut ecirctre deacutecaleacute par un
seul pixel (figure 21b)
Eacuteleacutements qui se chevauchent Le problegraveme de chevauchement des eacuteleacutements qui devraient
ecirctre disjoints dans la preacutesentation drsquoune page est aussi lrsquoun des bugs les plus reacutepandus dans
cette eacutetude les problegravemes de cette nature ont eacuteteacute trouveacutes dans des sites aussi varieacutes que le
Time Magazine Air Canada Moodle et Rail Europe La figure 22 montre un exemple de ce
problegraveme
Dans certains cas le chevauchement se produit par une interruption de la mise en page causeacutee
par le redimensionnement du document principal en dessous des dimensions minimales
comme dans lrsquoexemple de la figure 22a Les conteneurs qui doivent ecirctre cocircte agrave cocircte sont
afficheacutes les uns sur les autres par le moteur de rendu du navigateur Cependant nous avons
eacutegalement constateacute que dans de nombreux cas ce chevauchement est causeacute par le fait que les
40
eacuteleacutements sont absolument positionneacutes dans une page par rapport agrave leurs dimensions lorsqursquoils
contiennent du texte en anglais et lors de lrsquoaffichage du site web dans une autre langue (comme
le franccedilais) il peut arriver que le texte correspondant soit plus long que la version anglaise ce
qui cause le chevauchement de deux eacuteleacutements qui devraient ecirctre disjoints Cela a eacuteteacute observeacute
par exemple sur la figure 22b pour le site web RailEurope
Eacuteleacutements qui srsquoeacutetendent agrave lrsquoexteacuterieur de leurs conteneurs Un autre problegraveme reacutepandu
est la preacutesence drsquoeacuteleacutements qui deacutepassent les limites de leurs conteneurs parent ce qui pro-
voque le chevauchement indeacutesirable avec des eacuteleacutements environnants Ce bug est lrsquoinverse du
preacuteceacutedent plutocirct que drsquoeacutetendre leur conteneur en dehors de ses dimensions nominales cette
fois les eacuteleacutements qui srsquoeacutelargissent agrave lrsquoexteacuterieur de leur conteneur sont simplement coupeacutes de
lrsquoaffichage
La figure 23 montre un exemple de ce dernier type dans la plateforme drsquoenseignement
en ligne Moodle (la figure 23a) des eacuteleacutements de la table sont coupeacutes de leur cocircteacute droit
Lors de lrsquoanalyse du code source de la page il se trouve que quatre autres colonnes doivent
effectivement ecirctre visibles et sont tout simplement inaccessibles puisque ils ont eacuteteacute coupeacute
Cela rend la page plus ou moins inutilisable
Un cas particulier survient lorsque le conteneur soit la fenecirctre du navigateur entiegravere et la fenecirctre
est redimensionneacutee en dessous drsquoun certain seuil Cela peut ecirctre montreacute dans la Figure 23b
le contenu du menu en haut disparaicirct lorsque la fenecirctre est redimensionneacutee Le navigateur
fournit une barre de deacutefilement horizontale mais cela ne fait deacutefiler que la partie infeacuterieure de
la page et pas le menu du haut En conseacutequence certains boutons du menu principal du site ne
peuvent plus ecirctre cliqueacutes
Nous placcedilons aussi dans cette cateacutegorie un bug rencontreacute en utilisant la fenecirctre de messagerie
41
(a) Air Canada
(b) Rail Europe
Figure 22 ndash Exemple drsquoeacuteleacutements qui se chevauchent
42
(a) Moodle
(b) LinkedIn
Figure 23 ndash Le contenu de la page est dissimuleacute de lrsquointerface en raison de son prolongementau-delagrave des dimensions du conteneur parent
43
Figure 24 ndash Le bug Facebook La zone de texte permettant au utilisateur de taper un messageinstantaneacute (agrave gauche) disparaicirct soudainement (agrave droite)
instantaneacutee de Facebook Lorsque la fenecirctre de parent est redimensionneacutee au-dessous drsquoune
largeur speacutecifique la zone de texte permettant agrave un utilisateur drsquoentrer un nouveau message
disparaicirct soudainement de lrsquointerface comme le montre la figure 24 Tous les autres eacuteleacutements
de la fenecirctre restent identiques mais il devient impossible de taper un message
Ton sur ton Ce bug est causeacute par un problegraveme de mise en page ougrave le texte drsquoun eacuteleacutement est
de la mecircme couleur que le fond de la page agrave cet endroit ce qui rend le texte invisible dans
lrsquoaffichage Bien que ce type de comportement peut ecirctre fait expregraves afin de dissimuler un
eacuteleacutement nous croyons qursquoil est tregraves peu probable que cela soit lrsquointention du deacuteveloppeur
puisqursquoil existe des moyens beaucoup plus eacuteleacutegants drsquoatteindre le mecircme reacutesultat en utilisant
les proprieacuteteacutes CSS (en deacutefinissant la proprieacuteteacute drsquoaffichage agrave none ou la proprieacuteteacute opacity agrave
0)
La figure 25 montre un exemple drsquoun tel problegraveme de mise en page sur Academiaedu (figure
25b) Dans la figure 25a le redimensionnement de la fenecirctre du navigateur en dessous drsquoune
largeur speacutecifique a pour effet impreacutevu de pousser les eacuteleacutements du menu supeacuterieur en dehors
de leur conteneur preacutevu (celui qui a un fond bleu) Par conseacutequent ces eacuteleacutements qui ont du
44
(a) ProQuest
(b) Academia
Figure 25 ndash Le bug laquo ton sur ton raquo Les eacuteleacutements de menu sont pousseacutes en dehors de leursconteneur et disparaissent (a) le texte du lien est de la mecircme couleur que le fond reacuteveacuteleacute en leseacutelectionnant avec la souris (b)
texte blanc se placent dans une zone blanche et deviennent invisibles (agrave lrsquoexception drsquoun seul
eacuteleacutement du menu qui a un fond bleu pour une raison inconnue)
Eacuteleacutements mal empileacutes Ce problegraveme se produit quand un eacuteleacutement qui devrait ecirctre rendu
au-dessus drsquoun autre est placeacute en dessous de ce dernier comme le montre la figure 26 Dans
cet exemple le bouton orange en haut de lrsquoimage est censeacute apporter un menu (liste deacuteroulante)
Toutefois le contenu de ce menu apparaissent sous le reste du contenu de la page plutocirct que
sur eux ce qui rend certains de ses eacuteleacutements inutilisables
Lrsquoordre du processus du dessin est deacutefini dans le standard de CSS crsquoest en fait lrsquoordre dans
lequel les eacuteleacutements sont empileacutes dans la pile des contextes Cet ordre affecte le dessin puisque
les piles sont dessineacutees de lrsquoarriegravere vers lrsquoavant Lrsquoordre drsquoempilement drsquoun bloc de rendu est
1 Couleur drsquoarriegravere-plan
2 Image drsquoarriegravere-plan
3 Bordures
45
Figure 26 ndash Un eacuteleacutement est placeacute incorrectement sur un autre
4 Enfants
5 Contour
Ainsi une violation de cet ordre pour une raison inconnue peut causer ce genre de problegraveme
La plupart des problegravemes de cette nature peuvent ecirctre corrigeacutees en attribuant correctement la
proprieacuteteacute z-index de lrsquoeacuteleacutement deacutefectueux
Disposition briseacutee Une rupture majeure dans la structure attendue drsquoune page se produit
quand un certain nombre de ressources importantes telles que les fichiers CSS le code
JavaScript ou les images ne parvient pas agrave ecirctre reacutecupeacutereacute par le navigateur En conseacutequence
de nombreux eacuteleacutements de la page nrsquoont pas leurs deacuteclarations de style et sont positionneacutes et
dimensionneacutes en fonction du style par deacutefaut fourni par le moteur de rendu
La figure 27 montre un cas assez grave drsquoun tel problegraveme ougrave essentiellement toutes les
46
Figure 27 ndash Un exemple drsquointerface briseacutee en raison de lrsquoeacutechec du chargement de certainesressources
deacuteclarations CSS sont manquantes Ceci est causeacute par le fait que le fichier aparthotelcss
nrsquoa pas reacuteussi agrave ecirctre chargeacute pour une raison inconnue Le mecircme problegraveme a eacuteteacute observeacute
momentaneacutement sur le portail web Digital Ocean 28
Sur le site web de Digital Ocean la page de connexion (login) est briseacutee et toutes les autres
pages aussi comme le montre la figure 28a Cela est ducirc au fait que le navigateur a abandonneacute
le chargement de nombreuses ressources dans la page (y compris toutes les images) Il est agrave
noter que malgreacute ces problegravemes le site Web reste fonctionnel La figure 28b repreacutesente une
capture drsquoeacutecran de ce agrave quoi la page devrait ressembler
HTML malformeacute Dans la figure 29 lrsquoHTML malformeacute rend impossible de voir le fond
drsquoeacutecran
47
(a) Digital Ocean sans CSS (b) Digital Ocean avec CSS
Figure 28 ndash Exemple drsquointerface briseacute dans le site Digital Ocean
Figure 29 ndash Exemple drsquoHTML mal formeacute
48
Eacuteleacutements inaccessibles Dans la figure 210a la page affiche correctement une mise en page
laquoeacutecran largeraquo lorsque la fenecirctre du client est assez large Par contre si la largeur de la fenecirctre
est moyenne comme le montre la figure 210b on observe que le bouton de connexion (sign in)
en haut agrave droite srsquoest deacuteplaceacute agrave lrsquoexteacuterieur de la bande supeacuterieure
Incoheacuterence dans les valeurs possibles drsquoun champ de formulaire Dans une page du site
CallingCards le champ du code postal dans le formulaire est preacute-rempli avec 6 caractegraveres de
donneacutees anteacuterieures mais en essayant de modifier le code postal il nrsquoest pas possible de taper
plus de 5 caractegraveres dans ce champ (figure 211)
Figure 211 ndash Incoheacuterence dans le champ de formulaire du site CallingCards
Bugs non lieacutes agrave la mise en page
Plusieurs autres bugs peuvent ecirctre deacutetecteacutes en analysant le contenu et la preacutesentation drsquoune page
Nous verrons dans la suite que certains drsquoentre eux se rapportent mecircme aux comportements
attendu ou aux fonctionnaliteacutes de lrsquoapplication mais peuvent quand mecircme ecirctre deacutetecteacutes par
des regravegles exprimeacutees sur un seul instantaneacute statique de la fenecirctre de lrsquoapplication
49
Mojibake et problegravemes drsquoencodage Plusieurs sites et applications gegraverent mal les donneacutees
de chaicircne en dehors de lrsquoASCII 7-bits Divers encodages de caractegraveres tels que Cp1252 ou
UTF-8 peuvent ecirctre utiliseacutes pour repreacutesenter les caractegraveres laquo accentueacutes raquo ou laquo eacutetrangers raquo
Cependant le mecircme caractegravere peut ecirctre repreacutesenteacute par une valeur binaire diffeacuterente selon le
scheacutema de codage utiliseacute pire certains codages comme UTF-8 peuvent utiliser plusieurs
octets pour repreacutesenter un seul caractegravere
Les problegravemes surgissent quand un systegraveme nrsquointerpregravete pas correctement le contenu drsquoune
chaicircne de caractegraveres croyant qursquoun document est dans un certain encodage alors qursquoil en
utilise reacuteellement un autre Il en reacutesulte souvent un caractegravere incorrect superflu ou pas afficheacute
du tout ce pheacutenomegravene est appeleacute mojibake 1 Par exemple lrsquoencodage UTF-8 du caractegravere
laquo eacute raquo lorsqursquoil est interpreacuteteacute comme une chaicircne Cp1252 produit laquo Atilde ccopy raquo comme le montre la
figure 212a Agrave lrsquoinverse le rendu Cp1252 du caractegravere laquo eacute raquo donne laquo raquo quand il est interpreacuteteacute
comme du UTF-8 (figure 212b)
Bien que ces caractegraveres puissent ecirctre des donneacutees leacutegitimes leur preacutesence dans le contenu drsquoun
eacuteleacutement indique tregraves probablement une manipulation incorrecte de lrsquoencodage des chaicircnes par
lrsquoapplication eacutetudieacutee
Un autre exemple de ce genre de bug est montreacute dans la figure 213
213a donne lrsquoexemple lors de lrsquoinvitation de quelqursquoun de votre carnet drsquoadresses dont le nom
contient un accent Doodle affiche son nom incorrectement et cela donne une adresse invalide
213b montre qursquoen cliquant sur la suggestion on observe que lrsquoajout est fait mais que le nom
est coupeacute en deux parties agrave lrsquoendroit mecircme du caractegravere eacutechappeacute
1 Terme japonais signifiant laquo transformation de caractegravere raquo
50
Problegravemes drsquoeacutechappement Les problegravemes drsquoeacutechappement surviennent lorsque les chaicircnes
avec des caractegraveres speacuteciaux ne parviennent pas agrave ecirctre correctement codeacutees ou deacutecodeacutees entre
deux applications La manifestation la plus freacutequente de ce problegraveme est lors de la lecture et
de lrsquoeacutecriture des chaicircnes de caractegraveres dans une base de donneacutees Certains caractegraveres comme
lrsquoapostrophe neacutecessitent drsquoecirctre doubleacutes afin de ne pas ecirctre confondus avec un seacuteparateur
de chaicircne Les problegravemes surviennent quand un systegraveme ne parvient pas agrave remplacer les
apostrophes doubles par des apostrophes simples lors de lrsquoaffichage des donneacutees dans un
formulaire
Lors de lrsquoenregistrement du contenu du formulaire au retour agrave la base de donneacutees chaque
apostrophe sera de nouveau doubleacutee entraicircnant un quadruplet drsquoapostrophes lors du char-
gement de la page la prochaine fois et ainsi de suite ceci est illustreacute dans la figure 214
Ainsi la recherche de plusieurs apostrophes dans un formulaire peut ecirctre utiliseacutee pour deacutetecter
lrsquoeacutechappement incorrect agrave lrsquointeacuterieur du code source
Un problegraveme de nature similaire se produit lorsque des caractegraveres speacuteciaux dans le code source
de la page (tels que HTML ou JavaScript) sont eacutechappeacutes incorrectement Par exemple une
seacutequence comme ltpgt peut ecirctre transformeacutee en ampltpampgt reacutesultant en la chaicircne litteacuterale ltpgt
afficheacutee comme du texte plutocirct que drsquoecirctre interpreacuteteacutee comme une balise de paragraphe
Nous avons deacutecouvert des exemples de ce problegraveme sur EasyChair qui affiche du code HTML
brut ou sur YouTube qui affiche du code JavaScript comme on peut le voir agrave la figure 215
222 BUGS COMPORTEMENTAUX
Drsquoautres bugs peuvent ecirctre appeleacutes laquo comportementaux raquo ils reacutevegravelent un problegraveme dans la
fonctionnaliteacute du site ou alors ils peuvent ecirctre exprimeacutes uniquement en termes drsquoune seacutequence
51
de plusieurs pages dans lrsquoordre
Contrairement agrave une application web traditionnelle une application Internet riche (RIA) utilise
les technologies Web modernes eacutemergentes telles que AJAX [47] Flash et Silverlight Par
conseacutequent de nouveaux problegravemes de tests web sont ajouteacutes aux problegravemes existants Une
caracteacuteristique importante de ces applications est qursquoelles sont stateful leur code peut stocker
des donneacutees persistantes sur le client (en utilisant WebStorage les proprieacuteteacutes CSS les variables
JavaScript et les objets) et sur le serveur (agrave lrsquoaide de cookies de stockage de session et de bases
de donneacutees) De plus lrsquoeacutetat de lrsquoapplication est disperseacute sur un certain nombre drsquoeacuteleacutements
et ne peut pas simplement ecirctre assimileacute agrave lrsquoURL de la page en cours (afficheacutee dans la barre
drsquoadresse du navigateur) Des fonctionnaliteacutes telles que la communication asynchrone la
manipulation DOM cocircteacute client et les gestionnaires drsquoeacuteveacutenements permettent de changer lrsquoeacutetat
de lrsquoapplication sans un rechargement complet de la page et sans modifier son URL [35]
Une conseacutequence positive de ces fonctionnaliteacutes est qursquoune telle application peut fournir
une expeacuterience utilisateur plus riche (drsquoougrave son nom) sans les cookies et JavaScript les
opeacuterations simples telles que les manipulations de panier les sessions utilisateur (connexion
deacuteconnexion) et autres fonctionnaliteacutes ne seraient pas possibles Cependant la preacutesence drsquoun
eacutetat dans lrsquoapplication introduit eacutegalement la possibiliteacute drsquoincoheacuterences dans lrsquoeacutetat afficheacute
drsquoune page agrave une autre Ces problegravemes sont appeleacutes bugs comportementaux car ils sont la
conseacutequence de lrsquointeraction de plusieurs pages entre elles et dans un certain ordre
Eacuteleacutements mobiles Certains eacuteleacutements peuvent changer leur position involontairement lors
de lrsquointeraction avec un utilisateur La figure 216 montre un exemple drsquoun tel problegraveme sur
le site web du CRSNG ougrave eacutecrire un texte dans une zone de texte vide auparavant reacuteduit sa
largeur de 4 pixels et deacutecale leacutegegraverement les zones de texte restantes vers la gauche
52
Ce problegraveme srsquoest aveacutereacute plus reacutepandu que nous nous attendions les variations comprennent
certains styles drsquoeacuteleacutements (la bordure ou la taille) qui ont eacuteteacute changeacutes sans aucune raison
apparente
Le dysfonctionnement des boutons Beaucoup drsquoapplications montrent agrave lrsquoutilisateur des
eacuteleacutements qui se comportent comme une fenecirctre pop-up (une fenecirctre secondaire qui srsquoaffiche
sans avoir eacuteteacute solliciteacutee par lrsquoutilisateur devant la fenecirctre de navigation principale lorsqursquoon
navigue sur Internet) Ce moyen est communeacutement utiliseacute pour afficher des messages publici-
taires ou un avertissement comme la reacuteponse agrave un message priveacute dans un forum
Toutefois dans un certain nombre de cas les boutons dans ces fenecirctres sont inopeacuterants cliquer
sur eux un certain nombre de fois ne produit aucun effet Ce problegraveme a eacuteteacute teacutemoin dans des
sites aussi varieacutes qursquoAmerican Airlines Dropbox et BitBucket Dans certains cas lrsquoutilisateur
est effectivement coinceacute dans le pop-up ou la page qui contient le bouton et ne peut pas sortir
sans forcer un rechargement complet du document
Confusion dans le statut de connexion Deux sites web dans notre eacutetude preacutesentent des
incoheacuterences dans lrsquoeacutetat drsquoune page meacutelangeant des eacuteleacutements de la fenecirctre drsquoune page
normalement reacuteserveacutes aux utilisateurs enregistreacutes (tels que les menus personnaliseacutes) ainsi
que des eacuteleacutements reacuteserveacutes aux utilisateurs qui sont deacuteconnecteacutes (comme un formulaire de
connexion)
Nous avons assisteacute agrave un tel comportement dans le site web de lrsquoIEEE pour le formulaire de
demande de membre Senior Apregraves lrsquoexpiration drsquoun certain deacutelai lrsquoutilisateur doit neacutecessaire-
ment se connecter agrave nouveau toutefois la page preacutesenteacutee agrave lrsquoutilisateur est celle repreacutesenteacutee
sur la figure 217 On remarque que le nom de lrsquoutilisateur est toujours preacutesent en haut agrave droite
de la page mecircme srsquoil est censeacute ecirctre deacuteconnecteacute (les identifiants de connexion sont demandeacutes)
53
Cliquer sur ce nom apporte le menu deacuteroulant qui est normalement accessible uniquement
lorsque lrsquoutilisateur est connecteacute Le mecircme problegraveme a eacuteteacute trouveacute sur le site de reacuteservation
drsquoAir Canada
Incoheacuterences dans le reacutesultat de la recherche Un autre problegraveme de comportement est
celui de lrsquoincompatibiliteacute entre une requecircte faite par un utilisateur et les reacutesultats afficheacutes par
lrsquoapplication en reacuteponse agrave cette requecircte
La figure 218 montre un exemple de ce problegraveme sur le site web des eacutepiceries Monoprix
Lors de la recherche des magasins agrave proximiteacute un utilisateur peut taper un code postal dans
un champ de formulaire puis cliquer sur laquo Valider raquo Cependant les reacutesultats de recherche
afficheacutes dans la page suivante ne montrent presque jamais les magasins avec le code postal
souhaiteacute
Comme avec tous les bugs dans la preacutesente cateacutegorie cela peut ecirctre observeacute seulement par
la correacutelation de plusieurs eacuteleacutements dans deux eacutetats diffeacuterents de la page le texte dans la
zone de texte un clic sur un bouton speacutecifique suivi par le texte dans la liste des eacuteleacutements qui
apparaissent dans la page reacutesultante
223 BUGS DE RESPONSIVE WEB DESIGN
Il y a quelques anneacutees les deacuteveloppeurs Web pouvaient faire des hypothegraveses sur la taille de
lrsquoeacutecran des appareils des utilisateurs Les ordinateurs de bureau ont eacuteteacute conccedilus pour acceacuteder
aux sites web en assumant une taille de fenecirctre minimale il eacutetait donc laquo normal raquo que pour
une largeur de fenecirctre plus petite le site semble briseacute Il srsquoagissait drsquoune approche valide
dans une eacutepoque ougrave les tablettes et les smartphones eacutetaient inouiumls (pas agrave la porteacutee de tout le
monde peu utiliseacutes) Aujourdrsquohui une autre approche est neacutecessaire pour srsquoassurer que les
54
sites fonctionnent correctement dans une gamme de diffeacuterents appareils et tailles de viewport
(le viewport deacutesigne la partie drsquoune page web qui est visible dans la fenecirctre du navigateur
drsquoun ordinateur smartphone tablette ou drsquoun autre dispositif Le viewport est variable et
mouvant en fonction de la taille de la fenecirctre du navigateur et en fonction de lrsquoutilisation des
fonctions de deacutefilement ou scrolling (souris ou ascenseur))[6]
Par conseacutequent la conception des sites doit deacutesormais tenir compte de plusieurs cateacutegories
drsquoappareil selon la taille de lrsquoeacutecran Cependant le changement rapide des proprieacuteteacutes de
lrsquoappareil nrsquoa pas pu ecirctre suivi par les deacuteveloppeurs web Pour remeacutedier agrave ce problegraveme ces
derniers ont eu recours aux mecircmes hypothegraveses en fonction de la demande du serveur La
demande drsquoune ressource par un navigateur est suivie par une chaicircne drsquoagent utilisateur (user
agent string) geacuteneacuteralement envoyeacutee avec la demande pour identifier le type de navigateur
utiliseacute La lecture de cette derniegravere du cocircteacute du serveur entraicircne la diffusion de deux versions
une version mobile conccedilue pour une largeur maximale si lrsquoutilisateur envoyait des chaicircnes
drsquoagents drsquoutilisateurs mobiles et une version bureau conccedilue pour une largeur minimale
Les deacuteveloppeurs ont pu suite agrave lrsquointroduction des media queries de CSS eacutecrire des deacutecla-
rations de style conditionnelles par des proprieacuteteacutes multimeacutedia telle que la taille de la fenecirctre
(voir figure 219) Lrsquoadaptation drsquoun site pour un support speacutecifique ou une taille de fenecirctre au
moment de lrsquoexeacutecution est donc devenue donc possible Ce concept qui sert agrave faire en sorte
qursquoun seul site reacuteponde agrave diffeacuterentes proprieacuteteacutes multimeacutedias (principalement la taille de la
fenecirctre) au moment de lrsquoexeacutecution afin drsquoameacuteliorer lrsquoexpeacuterience de lrsquoutilisateur est appeleacute
Responsive Web Design [59]
Une eacutetude reacutecente meneacutee par Walsh et al identifie cinq types de bugs survenant plus
particuliegraverement dans les sites web RWD [73] Pour la plupart il srsquoagit de bugs deacutejagrave observeacutes
dans drsquoautres sites au cours de notre propre eacutetude
55
Collision drsquoeacuteleacutements Crsquoest un bug dans lequel les eacuteleacutements se chevauchent en raison de la
modification de la fenecirctre (viewport) Ce bug peut eacutegalement influencer le bon fonctionnement
des sites web dans le cas ougrave certains eacuteleacutements fonctionnels dans les pages sont masqueacutes
Deacutepassement drsquoeacuteleacutements Les eacuteleacutements ont besoin de se redimensionner ils manquent
drsquoespace mais ils doivent aussi ecirctre assez grands pour contenir tous leurs enfants Cela arrive
dans le cas ougrave un eacuteleacutement deacutepasse agrave lrsquoexteacuterieur de son parent en raison drsquoun manque drsquoespace
Lrsquoeacuteleacutement peut alors ecirctre inaccessible masqueacute par un autre eacuteleacutement ou par-dessus drsquoautres
eacuteleacutements
Ce bug sur le site httpswwwthelilycom On peut le voir dans la figure 220 ougrave le div
avec les boutons du menu se termine en dehors de la barre de menu et hors de vue
Deacutepassement du viewport Ce bug se produit lorsque les eacuteleacutements sont pousseacutes hors de
la fenecirctre (viewport) et deviennent inaccessibles ou cacheacutes Sur le site web httpswww
slaveryfootprintorg ce bug a eacuteteacute trouveacute La figure 221 montre comment les bugs non
observables peuvent creacuteer des problegravemes agrave des largeurs infeacuterieures Ici le div du milieu est un
peu en dehors de la fenecirctre mais il ne montre aucun problegraveme observable Cependant crsquoest agrave
440px que nous pouvons voir clairement le contenu deacuteborder de la fenecirctre
Disposition agrave petite eacutechelle En fonction de lrsquoimpleacutementation certaines mises en page
peuvent ecirctre afficheacutees correctement que dans un petit intervalle de largeur Par exemple un
affichage pourrait ecirctre seulement correct entre 320 et 325 pixels de largeur
Couverture drsquoeacuteleacutements Ce bug survient lorsqursquoun conteneur nrsquoest pas assez large pour
contenir tous les eacuteleacutements et qursquoun ou plusieurs eacuteleacutements sont pousseacutes sur une ligne suppleacute-
56
mentaire
Un exemple drsquoeacuteleacutement enveloppeacute peut ecirctre vu dans la figure 222 On pourrait faire valoir que
ce nrsquoest pas un bug cependant agrave des largeurs infeacuterieures la liste est de nouveau aligneacutee en
haut Cela montre qursquoayant cette liste aligneacutee en haut est la disposition deacutesireacutee
Nous donnerons des exemples sur la deacutetection de ce genre de bugs dans la section 542
57
(a) Fenecirctre large
(b) Fenecirctre moyenne
Figure 210 ndash Exemple drsquoeacuteleacutements inaccessibles
58
(a) SpringerOpen
(b) Naymz
Figure 212 ndash Exemple de mojibake (a) donneacutees UTF-8 afficheacutees comme Cp1252 (b) donneacuteesCp1252 afficheacutees comme UTF-8
59
(a) Mojibake adresse invalide
(b) Mojibake nom coupeacute en deux partie
Figure 213 ndash Exemples de Mojibake dans Doodle
60
Figure 214 ndash Des donneacutees extraites de la base de donneacutees sont incorrectement eacutechappeacutees dansIEEE PDF eXpress on constate la preacutesence de plusieurs apostrophes
Figure 215 ndash Sur cette page YouTube du code JavaScript est afficheacute au lieu drsquoecirctre interpreacuteteacute
Figure 216 ndash Eacuteleacutements mobiles la position et la bordure de la zone du texte changent lors de lasaisie du texte (NSERC)
61
Figure 217 ndash Confusion connexiondeacuteconnexion dans une page web le contenu pour un utilisa-teur connecteacute (en haut de la page a droite) coexiste avec le formulaire de connexion reacuteserveacute auxutilisateurs qui ne sont pas en principe connecteacutes
Figure 218 ndash Incoheacuterences dans le reacutesultat de la recherche
media (max-width 420px) body
background-color white
media (min-width 421px)
body background-color blue
Figure 219 ndash Code CSS avec des conditions sur la largeur de lrsquoappareil Il srsquoagit drsquoun exemplede media queries
62
(a) Tous les boutons sont correcte-ment dans la barre de menu
(b) Le bouton laquo About raquo en sur-brillance fait saillie en dehors dela barre de menu son parent
Figure 220 ndash Le bug de deacutepassement drsquoeacuteleacutements sur le site httpswwwthelilycom
(a) Le div est en surbrillance mais il nrsquoy a pas debug observable
(b) En 440px nous voyons lemecircme div avec un bug obser-vable ougrave le texte deacuteborde en de-hors de la fenecirctre
Figure 221 ndash Le bug de deacutepassement du viewport sur le site httpswwwslaveryfootprintorg
(a) La liste est en haut (top-aligned) (b) Agrave une largeur infeacuterieure lrsquoeacuteleacutementlaquo CGV raquo est pousseacute sur une ligne suppleacutemen-taire
Figure 222 ndash Le bug de couverture drsquoeacuteleacutements sur le site httpswwwanthedesignfr
CHAPITRE 3
EacuteTAT DE LrsquoART
Il existe un certain nombre drsquooutils servant agrave tester les applications web Dans ce chapitre nous
classons les approches existantes en quatre grandes familles qursquoon nomme successivement
outils de tests approches visuelles approches deacuteclaratives et outils RWD Nous allons les
exposer en donnant un peu plus de deacutetails sur quelques outils relatifs agrave chaque famille
drsquoapproches Enfin nous citons leurs points faibles en montrant leurs limites dans certains cas
31 OUTILS DE TEST
La deacutetection de bugs drsquointerface peut drsquoabord ecirctre abordeacutee comme un problegraveme de test logiciel
classique Sous cet angle il se veut une geacuteneacuteralisation des fonctionnaliteacutes offertes par des
logiciels drsquoanalyse de sites web comme Google Analytics 1 ou Piwik 2 Ces outils suivent les
requecirctes HTTP et fournissent un tableau de bord pour analyser des donneacutees de base pays
drsquoorigine dureacutee drsquoune session etc Cependant ces outils ne gegraverent geacuteneacuteralement pas Ajax ne
peuvent pas ecirctre utiliseacutes comme outils de test (ils nrsquoeacutevaluent pas les conditions sur le contenu
de la page par exemple) et ne signalent rien sur le contenu de la page sur les actions de
1 httpwwwgooglecomanalytics2 httpwwwpiwikorg
64
WebDriver driver = new FirefoxDriver()driverget(http)ListltWebElementgt items = driverfindElements(BycssSelector(li))int left = -1for (WebElement item items) if (left == -1) left = itemgetLocation()getX()continue
assert(left = itemgetLocation()getX())
Figure 31 ndash Exemple de code pour Selenium WebDriver
lrsquoutilisateur ou les requecirctes Ajax
Les logiciels de test en ligne tels que Capybara Selenium WebDriver Watij ou Sahi sont plus
proches de nos objectifs Ces outils fournissent diffeacuterents langages pour deacutecrire les tests et
eacutecrire des assertions sur lrsquoapplication Les scripts WebDriver sont eacutecrits en Java Capybara
a sa propre API 3 dans le langage Ruby Watij utilise WebSpec 4 qui est une API deacutefinie
par-dessus Java (35 donne un exemple de test webspec-watij) et Sahi utilise SahiScript
une extension de JavaScript 5 Tous ces langages sont impeacuteratifs (crsquoest-agrave-dire proceacuteduraux) et
visent agrave piloter une application en effectuant des actions La partie test se reacuteduit agrave lrsquoinsertion
drsquoinstructions similaires agrave assert dans le code du script A titre drsquoexemple la figure 31
donne un extrait de code Java pour Selenium WebDriver pour veacuterifier que tous les eacuteleacutements
satisfaisant un seacutelecteur CSS sont agrave gauche
3 httpmakandracardscommakandra1422-capybara-the-missing-api4 httpwatijcomwebspec-api5 httpsahicoin
65
311 CAPYBARA
Capybara est un framework drsquoautomatisation Web utiliseacute pour creacuteer des tests fonctionnels qui
simulent lrsquointeraction des utilisateurs agrave une application Il constitue une bibliothegraveque conccedilue
pour ecirctre utiliseacutee sur un pilote Web sous-jacent (underlying web driver) tels que selenium-web
driver rack test driver ou capybara-webkit Il fournit un DSL (Domain Specific Language)
servant agrave deacutecrire les actions exeacutecuteacutees par ces pilotes Web [30] Une fois la page est chargeacutee
via le DSL et le pilote Web sous-jacent Capybara essayera de localiser lrsquoeacuteleacutement pertinent
dans le DOM (Document Object Model) et exeacutecutera une action du genre clics de boutons
de liens etc Son DSL deacuteployeacute pour exprimer les actions agrave exeacutecuter est tregraves intuitif la figure
32 montre quelques unes de ses commandes de base Dans le but de trouver un eacuteleacutement[30]
Capybara par lrsquointermeacutediaire du DSL cherchera dans le DOM les attributs suivants
mdash Champ de texte (fill_in) id name eacuteleacutement drsquoeacutetiquette associeacute (label)
mdash Cliquez sur un lienbouton (click_link click_button) id titre texte dans la
balise valeur
mdash Case agrave cocherbouton radioliste deacuteroulante (check uncheck choose select) id nom
eacuteleacutement drsquoeacutetiquette associeacute (label)
mdash Teacuteleacutecharger le fichier (attach_file) id nom
312 WATIJ
Watij ou Web Application Testing en Java est un projet de test impleacutementeacute en Java destineacute agrave
automatiser les tests fonctionnels des applications Web au-dessus de IE (Internet Explorer) Il
est baseacute sur la conception de Watir [33] et possegravede une capaciteacute de recherche drsquoeacuteleacutements lui
permettant de trouver drsquoacceacuteder et de controcircler facilement nrsquoimporte quel eacuteleacutement HTML agrave
66
visit(rsquopage_urlrsquo) navigate to pageclick_link(rsquoid_of_linkrsquo) click link by idclick_link(rsquolink_textrsquo) click link by link textclick_button(rsquobutton_namersquo) fill text fieldfill_in(rsquoFirst Namersquo with =gt rsquoJohnrsquo) choose radio buttonchoose(rsquoradio_buttonrsquo) choose radio buttoncheck(rsquocheckboxrsquo) check in checkboxuncheck(rsquocheckboxrsquo) uncheck in checkboxselect(rsquooptionrsquo from=gtrsquoselect_boxrsquo) select from dropdownattach_file(rsquoimagersquo rsquopath_to_imagersquo) upload file
Figure 32 ndash Commandes de base de Capybara [30]
travers le DOM en mobilisant lrsquointerface COM Il prend en charge drsquoautre part les expressions
XPath pour trouver les eacuteleacutements HTML sur une page et gegravere les pop-up (fenecirctres contextuel
du navigateur) en les interceptant et les rendant disponibles pour lrsquointeraction Watij peut
deacutetecter la fin du chargement drsquoune page en cours de chargement Watij dispose drsquoun ensemble
relativement riche drsquoAPI pour lrsquoeacutecriture de scripts de simulation La connexion agrave un site Web
exige agrave chaque fois des informations tel que le nom de lrsquoutilisateur et le mot de passe (page
de connexion (login) de Yahoo figure 34) Les tacircches manuelles demandeacutees dans ce cas agrave
lrsquoutilisateur sont les suivantes
1 Afficher une fenecirctre de navigateur
2 Mettre lrsquoURL correcte pour ouvrir cette page
3 Attendre que la page se charge et se stabilise
4 Taper le nom drsquoutilisateur dans le champ ID
5 Taper le mot de passe
6 Cliquer sur le bouton Connexion
Le code approprieacute pour automatiser les tests fonctionnels de ces eacutetapes en utilisant Watij est
donneacute dans la figure 33
67
IE ie = new IE()iestart(wwwmailyahoocom)ietextField(SymbolFactoryidusername)set(ouss)ietextField(SymbolFactoryidpasswd)set(ber2017)iebutton(SymbolFactoryidsave)click()
Figure 33 ndash Exemple drsquoutilisation de Watij [71]
Figure 34 ndash Page de connexion (login) de Yahoo [71]
68
public class WebspecDemoTest
WebSpec spec
Beforepublic void setup()spec = new WebSpec()safari()
Afterpublic void tearDown()specbrowser()close()
Testpublic void testSearchWikipedia() throws Exception specopen(httpdewikipediaorgwikiWikipediaHauptseite)
specfindinput()withid(searchInput)setvalue(Softwaretest)specfindbutton()withid(searchButton)click()assertEquals(Softwaretest specfindh1()withid(firstHeading)getinnerText())
specfinda()withinnerText(Quality)click()assertEquals(Softwarequalitat specfindh1()withid(firstHeading)getinnerText())
Testpublic void testOpenGoogle() throws Exception specopen(httpwwwgooglede)specjquery(input[name=rsquoqrsquo])setvalue(Testing)specfindinput()withname(btnG)click()assertTrue(specfinddiv()withid(res)finda()getinnerText()
startsWith(Softwaretesting))
Figure 35 ndash Exemple simple drsquoun test JUnit Watij WebSpec [7]
69
313 SAHI
Sahi est un outil open source drsquoautomatisation et de test drsquoapplications web En tant qursquooutil
drsquoautomatisation Sahi offre la possibiliteacute drsquoenregistrer et de lire des scripts Il prend en charge
Java et JavaScript Mecircme si SahiScript ressemble agrave JavaScript il nrsquoest pas exeacutecuteacute comme le
JavaScript normal dans le navigateur Lrsquoideacutee de base du fonctionnement de Sahi est deacutecrite
ci-dessous
les parties centrales de Sahi montreacutes dans la figure 37 incluent le serveur proxy Sahi et
le moteur JavaScript Les reacuteponses HTML qui transitent par le proxy sont modifieacutees de
telle sorte que JavaScript soit injecteacute au deacutebut et agrave la fin de la reacuteponse Cela permettra au
navigateur drsquoenregistrer et de lire les scripts et de communiquer avec le proxy en cas de
besoin En plus de la gestion des demandes de pages du navigateur Sahi gegravere eacutegalement les
commandes personnaliseacutees lieacutees agrave lrsquoenregistrement agrave la lecture etc envoyeacutees par celui-ci
Les fonctionnaliteacutes propres de Sahi font de lui un bon support des fichiers de base de donneacutees
supportant JavaScript AJAX ainsi que les API simples Outre ses fonctionnaliteacutes normales
agrave lrsquoeacutegard de la prise en charge de laquo ant raquo(lrsquooutil logiciel) Du fait que ses API ne deacutependent
pas beaucoup de la structure HTML le controcircleur Sahi (IDE) peut ecirctre utiliseacute dans diffeacuterents
navigateurs Sahi qui nrsquoutilise pas XPath renferme des API tels que _ near _in etc
lrsquoaidant agrave trouver un eacuteleacutement par rapport agrave un autre laquo SahiScript raquo est fondeacute sur JavaScript
Il est analyseacute par Sahi et exeacutecuteacute par le moteur JavaScript rhino La figure 36 illustre un
exemple de constructions (exemple drsquoeacutecriture de conditions) dans Sahi Elles sont identiques agrave
JavaScript hormis le $ obligatoire utiliseacute dans les variables
De plus tous les outils mentionneacutes ci-dessus (agrave lrsquoexception de Sahi) neacutecessitent un plugin
speacutecifique au navigateur pour fonctionner et ne supportent donc qursquoune poigneacutee de navigateurs
en geacuteneacuteral les laquo Big Five raquo (Firefox Safari IE Opera et Chrome) Cependant la part de marcheacute
70
Comparer des valeurs normalesif ($username == PartnerUser)
_click(_link(Partner Login))
Comparer avec les attributs du navigateur exposeacutes par Sahiif (_getText(_div(page_type)) == Partner Page)
_click(_link(Partner Login))
Comparaison avec les attributs du navigateur NON exposeacutes par les fonctions inteacutegreacutees de Sahi en utilisant _fetchif (_fetch(_link(0)href) == httpsahicoin)
_click(_link(Partner Login))
Comparaison avec les attributs du navigateur NON exposeacutes par les fonctions inteacutegreacutees de Sahi en utilisant _conditionif (_condition(_link(0)href == httpsahicoin))
_click(_link(Partner Login))
Figure 36 ndash Exemple de Sahi script [18]
Figure 37 ndash Architecture de Sahi (figure tireacutee de [21])
71
des navigateurs autres que ceux-ci eacutequivaut agrave 20 et srsquoeacutelegraveve agrave 63 pour les appareils autres
que les ordinateurs de bureau (tablettes consoles et mobiles) 6 En dehors de Sahi ces outils
de test nrsquoatteignent pas plus des trois quarts du marcheacute et pour certains seulement 25 pour
les appareils autres que les ordinateurs de bureau Par conseacutequent lrsquoaffirmation selon laquelle
laquo la plupart des utilisateurs raquo sont pris en charge par eux est agrave peu pregraves non fondeacutee
32 APPROCHE VISUELLE
Pour deacuteceler les deacutefauts dans la mise en page lrsquooutil principal deacuteployeacute par ce genre de
techniques est geacuteneacuteralement la vision par ordinateur Ces derniegraveres consistent entre autres en
la deacutelimitation des bordures des eacuteleacutements par la deacutetection des contours et en la deacutecouverte des
changements par le calcul de la diffeacuterence entre deux captures drsquoeacutecran dont les couleurs du
texte des arriegravere-plans seront compareacutees pour repeacuterer le texte illisible Au lieu drsquoagir sur des
informations speacutecifiques agrave la mise en page telles que la taille et la position des eacuteleacutements ces
techniques sont baseacutees sur la comparaison des captures drsquoeacutecran pixel par pixel Dans ce cas
les erreurs sous la forme drsquoune capture drsquoeacutecran sont signaleacutees et clairement marqueacutees
321 WEBSEE
Certains travaux ont eacutegalement eacuteteacute reacutealiseacutes sur lrsquoutilisation des techniques drsquoanalyse drsquoimage
pour identifier les problegravemes de mise en page [69] WebSee [58] est en particulier un outil
impleacutementeacute en Java qui utilise plusieurs bibliothegraveques tierces pour impleacutementer certains des
algorithmes speacutecialiseacutes Il applique des techniques du domaine de la vision par ordinateur pour
analyser la repreacutesentation visuelle des pages Web pour deacutetecter automatiquement et localiser
les eacutechecs de preacutesentation WebSee identifie les eacutechecs de preacutesentation puis deacutetermine les
6 En date de feacutevrier 2014 tel que reacutecupeacutereacute sur StatCounter httpgsstatcountercom
72
eacuteleacutements dans la source HTML de la page qui pourraient ecirctre responsables des eacutechecs observeacutes
en comparant la repreacutesentation visuelle de la page Web rendue sous test et son apparence
drsquoorigine (oracle)
A cette fin WebSee prend en entreacutee le code HTMLCSS de la page agrave analyser et un oracle
(une image) du rendu attendu de la page Un ensemble de diffeacuterences entre la page rendue
et lrsquoimage de reacutefeacuterence est calculeacute et ces diffeacuterences sont ensuite regroupeacutees en groupes
susceptibles de repreacutesenter diffeacuterents deacutefauts sous-jacents dans la page Une deuxiegraveme phase
de traitement tente drsquoidentifier les eacuteleacutements HTML correspondant aux pixels de diffeacuterence
qui sont ensuite ordonneacutes par une meacutetrique de prioriteacute et envoyeacutes agrave lrsquoutilisateur La figure
38 montre les diffeacuterentes phases de lrsquoapproche La premiegravere entreacutee est la page web (P) qui
devrait ecirctre analyseacute pour deacuteterminer les deacutefaillances de preacutesentation La forme de P est une
URL qui pointe vers soit un emplacement sur le reacuteseau ou drsquoun systegraveme de fichiers ougrave tous les
fichiers HTML CSS JavaScript et les fichiers meacutedias de P sont accessibles
La deuxiegraveme entreacutee est lrsquooracle (O) qui speacutecifie les proprieacuteteacutes drsquoexactitude visuels de P La
forme de O est une image qui peut ecirctre soit une maquette ou une capture drsquoeacutecran drsquoune version
correcte de P
La troisiegraveme entreacutee est un ensemble de reacutegions speacuteciales (SR) deacutefinissant des zones de O qui
contiendront du texte dynamique des annonces etc qui deacutefinissent les reacutegions dynamiques
communes dans les applications web modernes Les reacutegions speacuteciales fournissent un meacuteca-
nisme pour permettre aux deacuteveloppeurs de speacutecifier de telles reacutegions qui devraient ecirctre traiteacutees
speacutecialement
Lrsquoapproche comporte trois phases La premiegravere phase est la phase de la deacutetection elle compare
les repreacutesentations visuelles de P et O pour deacutetecter un ensemble de diffeacuterences soit dans
les reacutegions speacuteciales ou dans les autres parties de la page web Lrsquoensemble des diffeacuterences
73
identifieacute est regroupeacutees ensuite en groupes qui sont susceptibles de repreacutesenter des deacutefauts
sous-jacents dans P Pour ce faire WebSee exploite Selenium WebDriver pour prendre des
captures drsquoeacutecran et il exploite la bibliothegraveque laquo pdiff raquo qui est une bibliothegraveque perceptuelle
de diffeacuterenciation drsquoimage pour comparer les images et calculer les diffeacuterences Lrsquoalgorithme
de regroupement (clustering) DBSCAN (Density Based Spatial Clustering of Applications
with Noise) est utiliseacute pour regrouper les pixels de diffeacuterences (dbscan est un algorithme
impleacutementeacute dans la bibliothegraveque Apache Commons Math3)
La deuxiegraveme phase est la phase de localisation elle analyse une carte de rendu de P pour
identifier lrsquoensemble des eacuteleacutements HTML qui deacutefinissent les pixels de chaque ensemble
de diffeacuterences en cluster Pour cette eacutetape WebSee tire parti de la mise en œuvre de la
bibliothegraveque R-tree [50] et Selenium WebDriver pour extraire des informations de deacutelimitation
de rectangles
Enfin la troisiegraveme phase est la phase du traitement de lrsquoensemble du reacutesultat elle priorise
lrsquoensemble des eacuteleacutements identifieacutes pour chaque grappe et fournit cela comme une sortie pour
le deacuteveloppeur 39 La capaciteacute de recherche de sous-image pour lrsquoheuristique en cascade est
fournie par OpenCV
322 FLB (FIGHTING LAYOUT BUGS)
Une combinaison de lrsquoinjection CSS avec des techniques de diffeacuterentiation drsquoimage est
preacutesenteacutee par Tamm dans une preacutesentation Tech Talk de Google [69] en tant que moyen pour
deacutetecter quelle partie drsquoun site web est du texte et si elle chevauche drsquoautres eacuteleacutements frontiegraveres
Lrsquoapproche colore tout le texte sur une page Web en noir puis en blanc tout en prenant des
captures drsquoeacutecran entre les deux comme le montre la figure 310 Les parties de lrsquoimage qui sont
du texte sont localiseacutees en diffeacuterant les deux images Les lignes verticales et horizontales des
74
Figure 38 ndash Le fonctionnement geacuteneacuteral de lrsquooutil drsquoanalyse WebSee
Figure 39 ndash Outputs de WebSee eacuteleacutements HTML deacutefectueux
75
eacuteleacutements dans lrsquoimage reacutesultante sont deacutecouvertes via des techniques baseacutees sur le traitement
drsquoimage Une comparaison de ces lignes avec les eacuteleacutements de texte deacutecouverts agrave lrsquoeacutetape
preacuteceacutedente permet de deacuteterminer les cas ougrave le texte chevauche les bordures des eacuteleacutements La
mecircme technique permet aussi de deacuteterminer si les eacuteleacutements de texte ont le contraste approprieacute
agrave leur arriegravere-plan
Cependant cette technique ne fonctionne que pour le texte et drsquoautres eacuteleacutements qui peuvent
facilement ecirctre identifieacutes en utilisant des techniques baseacutees sur le traitement drsquoimage pour la
reconnaissance drsquoobjets Le champ drsquoapplication est petit car il se concentre exclusivement
sur le texte pour le chevauchement des eacuteleacutements
323 PHANTOMCSS
PhantomCSS [20] est un framework de test drsquointerface graphique open source qui possegravede la
capaciteacute de situer les changements drsquoune iteacuteration agrave une autre par des algorithmes diffeacuterant sur
deux images Drsquoautre part il permet drsquoexclure certaines parties de lrsquointerface graphique du
test Les pages Web susceptibles drsquoafficher des donneacutees non controcircleacutees par le deacuteveloppeur et
des eacuteleacutements tels que des annonces Web des donneacutees utilisateur des banniegraveres animeacutees des
images et du texte trouvent dans ces caracteacuteristiques un instrument beacuteneacutefique Le deacuteveloppeur
dans ce cas est obligeacute de speacutecifier manuellement les parties de lrsquointerface graphique non
concerneacutees par les tests en nommant lrsquoeacuteleacutement en question ou le speacutecifiant ses coordonneacutees x
et y
76
Figure 310 ndash Exemple de traitement drsquoimage avec FLB (figure tireacutee de [63])
77
324 SIKULI
Un autre framework drsquoautomatisation est Sikuli [39] qui identifie et manipule les controcircles
de lrsquointerface graphique dans une page web en utilisant la recherche par image (sub-image
searching) Les captures drsquoeacutecran constituent la base de cette approche visuelle pour la recherche
et lrsquoautomatisation des interfaces utilisateurs Elle permet aux utilisateurs
mdash de prendre une capture drsquoeacutecran drsquoun eacuteleacutement de lrsquointerface graphique (comme un bouton
de la barre drsquooutils une icocircne ou une boicircte de dialogue)
mdash drsquointerroger un systegraveme drsquoaide en faisant appel agrave la capture drsquoeacutecran au lieu du nom de
lrsquoeacuteleacutement
mdash de fournir eacutegalement une API de script visuel pour automatiser les interactions de
lrsquointerface graphique par lrsquointermeacutediaire des modegraveles de capture drsquoeacutecran pour diriger
les eacuteveacutenements de la souris et du clavier
Dans lrsquoexemple montreacute dans la figure 311 le bouton de fermeture doit effacer le contenu de la
zone de texte ainsi que lui-mecircme Supposons que lrsquointerface graphique soit deacutejagrave dans un eacutetat
qui contient un laquo 5 raquo au deacutebut nous trouvons la zone de texte bleue sur lrsquoeacutecran et stockons la
reacutegion correspondante qui a la plus grande similariteacute dans la zone bleue Ensuite apregraves avoir
cliqueacute sur le bouton de fermeture deux assertNotExist sont utiliseacutes pour veacuterifier la disparition
dans la zone bleue [39]
325 APPLITOOLS
La segmentation pure de lrsquoimage des pages Web et la comparaison visuelle pixel par pixel
sont agrave lrsquoorigine de lrsquooutil commercialiseacute AppliTools Eyes [2] qui offre une interaction des
scripts de test creacutees par lrsquoutilisateur et son application Dans cet outil le serveur Web est
78
Figure 311 ndash Exemple drsquoutilisation de Sikuli (figure tireacutee de [39])
chargeacute de teacuteleacutecharger les captures drsquoeacutecran en appliquant un algorithme de diffeacuterence drsquoimage
entre lui et une capture drsquoeacutecran preacuteceacutedente La diffeacuterence entre les deux images est traduite par
AppliTools par une deacutetection des reacutegressions dans une mise en page GUI Ces changements
dans une interface Web sont exploiteacutes par le deacuteveloppeur pour actualiser lrsquoimage de base dans
le cas ougrave le changement eacutetait intentionnel
Cependant cette approche est orienteacutee vers la deacutetection de bugs de type statique de chevau-
chement ou de deacutebordement des eacuteleacutements dans un document et actuellement ne supporte pas
la veacuterification de modegraveles temporels agrave travers plusieurs instantaneacutes de la mecircme page De plus
lrsquoapproche geacutenegravere beaucoup de faux positifs si la page rendue contient du texte leacutegegraverement
diffeacuterent de lrsquoimage de reacutefeacuterence Crsquoest le cas lorsque par exemple la fenecirctre du navigateur a
des dimensions diffeacuterentes et que le texte srsquoeacutecoule diffeacuteremment (mais pas neacutecessairement
incorrectement) par rapport agrave lrsquoimage Pour reacutesoudre ce problegraveme lrsquoutilisateur doit deacutefinir
manuellement pour chaque oracle ce que lrsquoon appelle des reacutegions dynamiques qui devraient
ecirctre ignoreacutees par le systegraveme lors de lrsquoanalyse de la page
79
33 APPROCHE DEacuteCLARATIVE
Les techniques dans cette derniegravere famille fonctionnent directement sur des informations sur
la mise en page Elles peuvent obtenir des informations sur les eacuteleacutements (position largeur
et hauteur) impliqueacutes dans lrsquointerface graphique que ce soit par analyse drsquoimage ou par
laquo siphonnage raquo (scraping) de lrsquointerface graphique Crsquoest drsquoailleurs ce que ces techniques ont
en commun La maniegravere de relier les diffeacuterents eacuteleacutements de mise en page les uns aux autres
ainsi que les valeurs de leurs paramegravetres de mise en page sont indiqueacutes par les entreacutees de ces
approches qui ne sont pas tant un script que des documents deacuteclaratifs
Les assertions opeacutereacutees sur lrsquointerface graphique peuvent par exemple ecirctre de la forme laquo lrsquoeacuteleacute-
ment 1 est-il situeacute agrave gauche de lrsquoeacuteleacutement 2 raquo ou laquo lrsquoeacuteleacutement 1 a-t-il une largeur infeacuterieure
agrave lrsquoeacuteleacutement 2 raquo Certaines de ces techniques ont des langages speacutecialiseacutes deacutecrivant des
assertions comme celles-ci
Les speacutecifications deacuteclaratives des interfaces utilisateurs ont fait lrsquoobjet de beaucoup de
recherches dans le passeacute Les premiegraveres tentatives incluent le systegraveme MASTERMIND qui
utilise un langage de modeacutelisation baseacute sur CORBA [67] drsquoautres approches incluent le
modegravele de mise en page drsquoAuckland [57] Adobe Adam et Eve [66] et les modegraveles de proprieacuteteacutes
[57]
331 MASTERMIND
Dans MASTERMIND le deacuteveloppeur de lrsquointerface utilisateur doit creacuteer des modegraveles de tacircche
(task model) drsquoapplication (domaine) et de preacutesentation Le modegravele drsquoapplication est speacutecifieacute
agrave lrsquoaide du langage de deacutefinition drsquointerface CORBA (IDL) Le modegravele de tacircche preacutesente les
tacircches de lrsquoutilisateur final dans une structure hieacuterarchique et comporte les informations de
80
commande neacutecessaires pour controcircler lrsquointerface utilisateur lors de lrsquoexeacutecution Le modegravele de
preacutesentation deacutecrit la disposition de lrsquointerface utilisateur y compris les affichages statiques
et dynamiques Il permet la speacutecification des mises agrave jour automatiques de preacutesentation
lorsque les donneacutees drsquoapplication ou le contexte de preacutesentation changent En outre il integravegre
des principes de conception graphique afin de donner un soutien complet au concepteur de
dialogue
332 AUCKLAND LAYOUT MODEL (ALM)
Le modegravele de mise en page drsquoAuckland (ALM) est une technique impleacutementeacute pour laquo NET raquo
Java et Haiku permettant de speacutecifier une mise en page 2D Elle est utiliseacutee pour organiser les
controcircles dans une interface graphique Le modegravele permet la speacutecification de contraintes baseacutees
sur lrsquoalgegravebre lineacuteaire Il calcule une disposition optimale en utilisant la programmation lineacuteaire
Les eacutegaliteacutes et les ineacutegaliteacutes lineacuteaires peuvent ecirctre speacutecifieacutees sur les tabulations horizontales et
verticales qui sont des lignes virtuelles formant une grille dans laquelle tous les eacuteleacutements de
lrsquointerface graphique sont aligneacutes [57]
Lrsquoexemple dans la figure 312 montre la maniegravere de disposer trois boutons en mobilisant
trois zones Les boutons ont deacutejagrave eacuteteacute ajouteacutes agrave la fenecirctre mais ils nrsquoont pas eacuteteacute arrangeacutes Leur
emplacement et leur taille sont deacutetermineacutes par la speacutecification ALM (figure 313) Quelque
soit le redimensionnement de la fenecirctre les deux colonnes auront toujours la mecircme largeur et
les deux lignes la mecircme hauteur en raison de la lineacuteariteacute des deux contraintes
81
Figure 312 ndash Exemple avec Auckland (figure tireacutee de [1])
LayoutSpec ls = new LayoutSpec ()XTab x1 = lsAddXTab ()YTab y1 = lsAddYTab ()
lsAddArea (lsLeft lsTop x1 y1 bouton1)lsAddArea (x1 lsTop lRight y1 bouton2)lsAddArea (lsLeft y1 lsRight lsBottom bouton3)
donne la mecircme largeur aux deux colonnes et la mecircme hauteur aux deux rangeacuteeslsAddConstraint (nouveau double [] 2 -1 nouvelle variable [] x1 lsRight
OperatorTypeEQ 0)lsAddConstraint (nouveau double [] 2 -1 nouvelle variable [] y1 lsBottom
OperatorTypeEQ 0)
Figure 313 ndash Une simple speacutecification avec Auckland [1]
82
333 ADOBE ADAM ET EVE
ASL (Adobe Source Libraries) est un projet au sein du Adobe Software Technology Lab
(STLab) Crsquoest un ensemble de bibliothegraveques de composants logiciels rendu disponible sous
licence Open Source par Adobe Systems permettant de deacutefinir des algorithmes sous forme
deacuteclarative Les deux premiegraveres bibliothegraveques significatives dans ASL sont la bibliothegraveque
de modegravele de proprieacuteteacutes (Adam) et la bibliothegraveque de modegravele de mise en page (Eve) dont
les composants permettent de modeacuteliser lrsquoapparence et le comportement drsquoune interface
dans une application logicielle Adam consiste en un solveur et un langage deacuteclaratif pour
deacutecrire les contraintes et les relations sur une collection de valeurs qui sont geacuteneacuteralement
les paramegravetres drsquoune commande drsquoapplication (une fonction) Adam fournit la logique qui
controcircle le comportement drsquoune interface Humaine (IH) Il est similaire dans son concept agrave une
feuille de calcul ou agrave un gestionnaire de formulaires Les valeurs sont deacutefinies et les valeurs
deacutependantes sont recalculeacutees Adam procure des fonctionnaliteacutes pour reacutesoudre les valeurs
interdeacutependantes mais il ne constitue pas un systegraveme de contrainte geacuteneacuteral Eve consiste
en un solveur et un langage deacuteclaratif pour la construction drsquoune IH Le solveur de mise en
page prend en compte une description riche des eacuteleacutements de 14 interfaces pour obtenir une
disposition de haute qualiteacute rivalisant avec ce qui peut ecirctre reacutealiseacute avec le placement manuel
Une seule description suffit pour plusieurs plateformes et langages OS Eve a eacuteteacute deacuteveloppeacutee
pour fonctionner avec Adam il peut cependant aussi ecirctre utiliseacutee seule Adam et Eve peuvent
ecirctre inteacutegreacutees dans un certain nombre drsquoenvironnements Ils ont la faculteacute de fonctionner
ensemble ou indeacutependamment mais ils doivent ecirctre combineacutes avec drsquoautres installations
pour construire une application Parmi les exemples typiques drsquointerfaces utilisateur effectuant
la synthegravese de paramegravetres de commande la boicircte de dialogue laquo Enregistrer sous raquo dans le cas
drsquoenregistrement drsquoun fichier image (figure 314) Elle se compose drsquoun champ de texte pour
entrer le nom du fichier un menu de types de fichiers et des curseurs offrant deux possibiliteacutes
83
Figure 314 ndash Exemple drsquoune boicircte de dialogue pour enregistrer un fichier image
pour configurer la compression lors de lrsquoenregistrement dans un format qui le prend en charge
Les valeurs des curseurs sont lieacutees par une relation exprimant le compromis entre le taux de
compression et la qualiteacute de lrsquoimage
La boicircte de dialogue aide lrsquoutilisateur agrave syntheacutetiser les paramegravetres drsquoune commande drsquoenre-
gistrement de fichier La figure 315 montre une speacutecification pour cette tacircche de synthegravese de
paramegravetres de commande eacutecrite dans le langage deacuteclaratif speacutecifique de laquo Adam raquo Dans 315
les sections laquo interface raquo laquo output raquo et laquo invariant raquo deacuteclarent les variables ou les proprieacuteteacutes
du modegravele de proprieacuteteacutes Les variables drsquointerface peuvent ecirctre mises agrave jour par un client du
modegravele de proprieacuteteacute par exemple agrave la suite de lrsquointeraction drsquoun utilisateur avec un widget
drsquointerface utilisateur Les valeurs des variables de sortie (output) constituent le reacutesultat de la
synthegravese des paramegravetres de commande La valeur (booleacuteenne) des variables invariantes indique
si un ensemble de variables satisfait une condition donneacutee La section laquo logique raquo dans 315
deacutefinit toujours les deacutependances et les regravegles de calcul entre les variables Le langage pour
ces calculs est le langage drsquoexpression ASL qui peut faire des appels aux fonctions externes
84
sheet save image file interface
file name file type rdquobmprdquocompression ratio 100image quality 100
logicrelate compression ratio lt== 100 - 4 x (100 - image quality)image quality lt== 100 - (100 - compression ratio) 4
outputresult lt== (file type == rdquojpegrdquo) type file type name file name ratio compression ratio type file type name file name
invariant check name lt== file name 6= rdquo rdquo
Figure 315 ndash Une simple speacutecification deacuteclarative dans le langage Adam du modegravele de proprieacuteteacutepour le dialogue dans Figure314 [56]
enregistreacutees (C ++) et peut ainsi effectuer des actions arbitraires La tacircche du programmeur de
lrsquoapplication est de deacutefinir ces calculs appeleacutes meacutethodes et qui sont exeacutecuteacutees est controcircleacutees
par le modegravele de proprieacuteteacutes
Le langage laquo Eve raquo peut ecirctre utiliseacute pour speacutecifier la disposition et la qualiteacute de preacutesentation
des eacuteleacutements drsquointerface ainsi que les liaisons entre les widgets dans lrsquointerface utilisateur et
les valeurs dans le modegravele de proprieacuteteacute La speacutecification de disposition pour le dialogue de la
figure 314 apparaicirct dans la figure 316
Nous allons cependant les rejeter ainsi que beaucoup drsquoautres langages de balisage GUI
(QML XAML) car ils visent agrave geacuteneacuterer des interfaces baseacutees sur des contraintes et ne peuvent
pas ecirctre utiliseacutes comme des assertions agrave tester de plus ils se concentrent principalement sur
la reacutesolution de contraintes lineacuteaires relatives agrave la taille et au placement des eacuteleacutements dans un
formulaire
85
layout save image file view dialog(name rdquoSave Image Asrdquoplacement place columnspacing 6child horizontal align fill) edit text(bind file name name rdquoFile namerdquo)popup(bind file type name rdquoSave as typerdquo items [
name rdquoWindows bitmap (bmp)rdquo value rdquobmprdquo name rdquoJPEG (jpeg)rdquo value rdquojpegrdquo
])row()
column(child horizontal align right) label(name rdquoCompression ratiordquo)label(name rdquoImage qualityrdquo)
column(horizontal align fill child horizontal align fill)
slider(bind compression ratioformat first 1 last 100 interval 1 )
slider(bind image qualityformat first 1 last 100 interval 1 )
row(horizontal align right) button(name rdquoSaverdquo action ok bind result
default true)button(name rdquoCancelrdquo action cancel)
Figure 316 ndash Une simple speacutecification avec Eve [56]
86
Pour montrer pourquoi les langages de geacuteneacuteration de GUI ne sont pas approprieacutes consideacute-
rons lrsquoexemple simple de CSS Comme nous lrsquoavons vu plus haut CSS exprime agrave quoi les
eacuteleacutements devraient ressembler (suggestions) mais pas comment ils vont lrsquoecirctre Consideacuterez les
deacuteclarations de style suivantes dans le cas ougrave un eacuteleacutement div2 est imbriqueacute dans div1
div1 width 200px div2 width 300px
Il nrsquoest pas possible avec CSS drsquoaffirmer que le contenu de div1 ne devrait jamais ecirctre plus
large que sa propre largeur deacuteclareacutee Si tel est le cas le navigateur peut soit deacutevelopper la boicircte
de lrsquoeacuteleacutement (sans tenir compte de sa deacuteclaration) soit afficher les eacuteleacutements en dehors de son
conteneur (un problegraveme dont nous avons beaucoup parleacute dans la section 22) La seule solution
consiste pour le concepteur du document CSS agrave srsquoassurer que la largeur deacuteclareacutee de tous les
eacuteleacutements qui seront contenus dans div1 est infeacuterieure agrave 200 pixels En revanche une proprieacuteteacute
deacuteclarative pourrait facilement imposer agrave lrsquoexeacutecution que la largeur de div1 est toujours de
200 pixels
On pourrait argumenter que cela peut aussi ecirctre veacuterifieacute en analysant statiquement le document
HTML avec le fichier CSS (bien qursquoaucun travail apparenteacute ne semble reacutepondre agrave cette
question) Il y a cependant des cas ougrave ce nrsquoest mecircme pas possible Si nous supprimons la
deacuteclaration de div2 dans lrsquoexemple ci-dessus mais que div2 contient une image de 300 pixels
de large il est impossible de deacutecouvrir que la proprieacuteteacute deacutesireacutee nrsquoest pas satisfaite en regardant
simplement le CSS
En guise drsquoexemple final consideacuterons le code suivant qui stipule que les eacuteleacutements de certains
menus doivent ecirctre placeacutes verticalement et que leur taille est fixe
menu li float left
87
width 200pxheight 50px
Rien ne permet au concepteur de speacutecifier que tous les eacuteleacutements doivent toujours ecirctre sur la
mecircme ligne (c-agrave-d Avoir la mecircme position top) (mecircme si la valeur de top est deacutefinie) Ce
ne sera pas le cas si la fenecirctre contenant est redimensionneacutee suffisamment petite pour que les
eacuteleacutements puissent flotter en dessous Dans un tel cas il faut effectivement rendre la page dans
un navigateur avec ses dimensions reacuteelles pour deacutecouvrir la preacutesence du problegraveme
334 GALEN FRAMEWORK
Galen Framework [10] est une bibliothegraveque de tests drsquointerfaces graphiques pour tester les
mises en page drsquoapplications web Le comportement mutuel entre les diffeacuterents eacuteleacutements
drsquoune interface graphique et le type de paramegravetres de mise en page valides sont deacutecrits
par des descriptions de mise en page creacutees par lrsquoutilisateur La veacuterification de la validiteacute
de lrsquoemplacement et la taille des eacuteleacutements est reacutealiseacutee par un test oracle en utilisant ces
descriptions
Pour deacuteclarer divers aspects de la position et de la taille drsquoun eacuteleacutement par rapport agrave drsquoautres
eacuteleacutements ou en valeurs absolues le deacuteveloppeur de test utilise un langage de description de
test personnaliseacute fourni par le framework Galen Galen est baseacute sur un outil drsquoautomatisation
de navigateur web appeleacute Selenium qui permet de creacuteer des scripts automatiseacutes simulant les
entreacutees de lrsquoutilisateur Il permet eacutegalement de speacutecifier des plages de valeurs acceptables La
figure 317 montre un exemple de ce agrave quoi ressemble une speacutecification Galen [9]
Le test de reacutegression des mises en page drsquoapplications web est entiegraverement automatiser par
le framework Galen en combinant ces deux technologies Des informations preacutecises sur les
88
valeurs valides pour les eacuteleacutements de lrsquointerface eacutetant neacutecessaires au fichier de speacutecification
requis par le framework Galen cette opeacuteration peut ecirctre coucircteuse et rendre la modification
drsquoune interface graphique plus difficile
Un regard sur le langage de speacutecification de Galen indique que le travail requis par le deacute-
veloppeur de test est similaire agrave la speacutecification de lrsquointerface graphique elle-mecircme Les
speacutecifications de Galen et la conception GUI elle-mecircme sont effectueacutees avec agrave peu pregraves la
mecircme freacutequence Lrsquoinconveacutenient est la flexibiliteacute reacuteduite et lrsquoaugmentation des coucircts Cepen-
dant lrsquoapproche permet une grande preacutecision lors de la reacutealisation des tests de reacutegression et la
veacuterification de la fonctionnaliteacute de la conception sur diffeacuterentes tailles drsquoeacutecran
335 ITARRAY AUTOMOTION
Le framework Automotion drsquoITArray [70] est similaire au framework Galen La diffeacuterence
par rapport agrave beaucoup drsquoautres frameworks est que la bibliothegraveque drsquoassertions permet
reacuteellement drsquoaffirmer si la position et lrsquoalignement des eacuteleacutements sont lieacutes les uns aux autres
avec des appels tels que is ElementInside (otherElement) ou areElementsAligned
(List) La faccedilon dont ces tests sont speacutecifieacutes est encore tregraves verbeuse Un exemple de script
Automotion est illustreacute agrave la Figure 318
34 OUTILS RWD
Il est toujours judicieux de tester la conception drsquoun site web sur divers appareils Mais
cette meacutethode classique prend beaucoup de temps et en raison de la varieacuteteacute des dispositifs
disponibles aujourdrsquohui le deacuteveloppeur peut ne pas avoir accegraves agrave tous ces dispositifs Plusieurs
outils ont eacuteteacute deacuteveloppeacutes pour fournir le service permettant drsquoafficher une page dans une
89
Declaring objects with css and xpath locatorsobjects
header css divfusion-secondary-headersw-logo css fusion-logo-link
navigation-links- xpath ul[id=rsquomenu-mainrsquo]li[not((contains(idrsquomobile-menu-itemrsquo)))]nav-menu css divfusion-secondary-main-menufollow-us-box xpath div[contains(classrsquofusion-alertrsquo)][1]
Home Page Tag= Home Page =
This is for Desktopon desktop
Header propertiesheader
inside screen 0px topinside screen 0px leftinside screen 0px right
Logo propertiessw-logo
31 px below the headerbelow header 31pxImage comparison with 2 precision ratioimage file sw-logopng error 5
Each navigation links must be alligned horizontally to each otheritemName -gt Current item and nextItem -gt Next itemforEach [navigation-links-] as itemName next as nextItem
$itemNamealigned horizontally all $nextItem
Navigation menu must be 20px above to the follow us allert boxnav-menu
above follow-us-box 20px
Figure 317 ndash Exemple drsquoune speacutecification Galen [9]
90
boolean result = uiValidatorinit(Scenario name)findElement(rootElement Name of eacuteleacutement we validate)sameOffsetLeftAs(eacuteleacutement Panel 1)sameOffsetLeftAs(eacuteleacutement Button 1)sameOffsetRightAs(eacuteleacutement Button 2)sameOffsetRightAs(eacuteleacutement Button 3)withCssValue(border 2px solid FBDCDC)withCssValue(border-radius 4px)withoutCssValue(color FFFFFF)sameSizeAs(list_eacuteleacutements)insideOf(eacuteleacutement Container)notOverlapWith(eacuteleacutement Other eacuteleacutement)withTopElement(eacuteleacutement 10 15)changeMetricsUnitsTo(ResponsiveUIValidatorUnitsPERCENT)widthBetween(50 55)heightBetween(90 95)drawMap()validate()
Figure 318 ndash Exemple drsquoun script Automotion [70]
fenecirctre personnaliseacutee de tailles variables agrave lrsquoaide drsquoun navigateur Web Cependant ces outils
ne fournissent aucune information autre que le rendu des pages sur diffeacuterentes tailles ce
qui oblige le deacuteveloppeur agrave eacutevaluer la reacuteactiviteacute (responsiveness) du site web manuellement
Mentionnons ici quelques outils speacutecifiques agrave la deacutetection de problegravemes lieacutes au RWD
Avec des fonctionnaliteacutes de recherche intelligente et de reacutevision rapide WebSiteResponsi-
veTest [34] prend en charge tous les principaux navigateurs pour fournir lrsquoaperccedilu exact du
site web sur un peacuteripheacuterique speacutecifique Il faut entrer lrsquoURL drsquoune page Web pour eacutevaluer
rapidement la reacuteactiviteacute En fournissant des reacutesultats preacutecis en quelques secondes lrsquooutil
eacuteconomise beaucoup de temps La convivialiteacute et la compatibiliteacute avec les navigateurs sont
drsquoautres fonctionnaliteacutes qui le rendent attractif par rapport aux autres outils disponibles
Respondr [22] permet de veacuterifier la reacuteactiviteacute en entrant lrsquoURL drsquoun site web En outre
lrsquoappareil pour lequel le site web ou la page Web est testeacute peut eacutegalement ecirctre choisi dans la
91
liste donneacutee Une fois les seacutelections effectueacutees un simple clic sur laquo Go raquo est neacutecessaire pour
recevoir une analyse complegravete du site ou de la page web en donnant lrsquoaffichage sur lrsquoappareil
seacutelectionneacute La page peut ecirctre facilement preacutevisualiseacutee agrave une largeur approprieacutee
Screenfly [27] est un outil de test de compatibiliteacute multi-peacuteripheacuterique qui permet de preacutevisua-
liser les pages Web telles qursquoelles apparaissent sur diffeacuterents appareils Les plus populaires
comprennent les tablettes et autres appareils intelligents tels que Galaxy Tab Apple iPad
Motorola Xoom En outre il prend en charge diffeacuterentes tailles drsquoeacutecran et reacutesolutions Le site
deacutetecte automatiquement si lrsquoURL saisie comporte un site mobile et vous redirige vers celui-ci
Pour basculer entre les reacutesolutions drsquoeacutecran tout ce qursquoil faut faire est de cliquer sur lrsquoicocircne du
type drsquoappareil ou choisir lrsquoappareil qui a la reacutesolution drsquoeacutecran la plus proche
Responsive Web Design Bookmarklet [26] affiche nrsquoimporte quelle page Web dans plusieurs
tailles drsquoeacutecran pour la preacutevisualisation simulant la fenecirctre drsquoaffichage de diffeacuterents peacuteripheacute-
riques Il srsquoagit drsquoun outil de conception Web rapide qui peut ecirctre consulteacute agrave partir drsquoun
ordinateur de bureau pour tester la reacuteactiviteacute de tout site web Il suffit de faire glisser le
bookmarklet au-dessus de la barre des signets (bookmarks) pour obtenir une barre drsquooutils
en haut avec des boutons pour diffeacuterentes reacutesolutions drsquoeacutecran Il ne reste plus qursquoagrave choisir
lrsquoaperccedilu de la page en cours sur diffeacuterentes largeurs drsquoeacutecran de tablettes et de smartphones
ViewPortResizer [31] est eacutegalement un bookmarklet de navigateur qui peut ecirctre utiliseacute avec
nrsquoimporte quel navigateur Web moderne Un outil de navigation convivial ViewPortResizer
est entiegraverement configurable Il permet la seacutelection drsquoune plage initiale de tailles de reacutesolution
drsquoeacutecran et la construction drsquoun bookmarklet personnaliseacute
Responsinator [23] aide les proprieacutetaires de sites agrave avoir une ideacutee de la faccedilon dont leur
site fonctionnera sur les appareils les plus populaires Juste en tapant lrsquoURL du site le site
srsquoaffichera rapidement sur des eacutecrans de diffeacuterent(e)s tailles
92
Le processus de ResponsivePX [24] consiste agrave entrer lrsquoURL du site et utiliser des boutons
pour ajuster la largeur et la hauteur de la fenecirctre drsquoaffichage afin de trouver la largeur exacte
du point drsquoarrecirct en pixels Extrecircmement simple agrave utiliser et agrave ameacuteliorer les fonctionnaliteacutes cet
outil de conception Web aide les concepteurs agrave creacuteer des sites utilisables et reacuteactifs
Froont [8] rend les tests de conception Web reacuteactifs accessibles sans neacutecessiteacutes de compeacutetences
de codage Les conceptions peuvent ecirctre creacutees dans le navigateur avec cet outil En testant
chaque URL speacutecifiquement il teste les conceptions sur de vrais appareils tout de suite
De son cocircteacute ReDeCheck [74] [73] est un outil de test de conception web reacuteactif Il est inspireacute
du graphe drsquoalignement utiliseacute dans X-PERT un concept proposeacute et deacuteveloppeacute par Choudhary
et al [42] ReDeCheck se concentre speacutecifiquement sur les bugs de mise en page causeacutes par
des conceptions reacuteactives il utilise un graphique de mise en page adaptable (RLG) qui tient
compte de lrsquoalignement des eacuteleacutements de la page Web des changements de visibiliteacute et drsquoautres
aspects de la page lorsque la largeur de la fenecirctre varie En tant que tel ReDeCheck peut
seulement veacuterifier un ensemble fixe de problegravemes de mise en page preacutedeacutefinis et ne fournit pas
un langage agrave usage geacuteneacuteral pour exprimer des assertions
35 DISCUSSION SUR LES APPROCHES EXISANTES
Nous allons maintenant discuter quelques limites des approches preacuteceacutedemment preacutesenteacutees
351 INCONVEacuteNIENTS DE LrsquoAPPROCHE DEacuteCLARATIVE
Le deacuteveloppeur de test doit se soumettre aux exigences des descriptionsscripts de test assez
verbeux en deacutecrivant les regravegles de son interface graphique (comment les eacuteleacutements sont-ils
placeacutes les uns par rapport aux autres comment ils devraient se comporter quand la taille de
93
la fenecirctre change etc) de faccedilon plus deacutetailleacutee au point ougrave le script de test devient presque
aussi descriptif que le code de lrsquointerface graphique qursquoil teste A lrsquoinstar des scripts de test
ce problegraveme neacutecessitera des mises agrave jour agrave peu pregraves au mecircme rythme que les modifications
apporteacutees agrave la conception de lrsquointerface graphique
352 LIMITES DES TECHNIQUES VISUELLES
Impossible de comparer des images de diffeacuterentes tailles drsquoeacutecran Le fait drsquoassurer lrsquoeacutega-
liteacute et la validiteacute entre une image de reacutefeacuterence (oracle) et lrsquoimage agrave tester par la diffeacuterence de
couleur de pixel implique que celles-ci ne peuvent pas ecirctre des captures drsquoeacutecran de tailles
drsquoeacutecran diffeacuterentes ce qui exclut lrsquoutilisation de lrsquoimage de reacutefeacuterence agrave partir drsquoune taille
drsquoeacutecran pour veacuterifier la validiteacute de la mise en page sur une taille drsquoeacutecran diffeacuterente La validiteacute
de la mise en page drsquoune application censeacutee fonctionner sur de nombreuses tailles drsquoeacutecran
diffeacuterentes par ces techniques exige drsquoeacutetablir des reacutefeacuterences pour toutes les tailles drsquoeacutecran
Ne fonctionne pas bien avec les donneacutees dynamiques Ces techniques baseacutees sur lrsquoimage
et travaillant sur lrsquoinformation de pixel au lieu du contenu ne donnent des reacutesultats satisfaisants
qursquoavec des donneacutees statiques (parce qursquoon utilise une image de reacutefeacuterence pour faire la
comparaison) Par conseacutequent elles posent un problegraveme majeur Chaque exeacutecution drsquoune
application correspond souvent agrave un affichage du contenu diffeacuterent puisque ces donneacutees sont
geacuteneacuteralement reacutecupeacutereacutees sur un serveur Web ou creacutees par lrsquoutilisateur mdashce qui diminue
fortement lrsquoutiliteacute de ces techniques
Signalent beaucoup de faux positifs Une diffeacuterence dans les valeurs de pixels de deux
captures drsquoeacutecran conseacutecutives peut entre constateacutee notamment si ces captures sont prises
sur des machines diffeacuterentes avec des configurations diffeacuterentes drsquoougrave lrsquoinconveacutenient des
94
Figure 319 ndash Exemple de faux positif avec PhantomCSS
techniques baseacutees sur les diffeacuterences drsquoimages qui sont sujettes agrave la deacuteclaration de faux positifs
comme indiqueacute sur le site web du reacutefeacuterentiel PhantomCSS [20] Ces petites diffeacuterences de
pixels sont parfois faussement signaleacutees par lrsquoalgorithme de test comme des erreurs de mise
en page cependant elles ne le sont pas reacuteellement La figure 319 montre un exemple de ce
cas ougrave nous pouvons observer de petites zones de pixels violets (nous avons marqueacutees ces
petites zones avec des rectangles rouges) ces images ressemblent aux images de base qui
sont entoureacutees de rectangles jaunes En reacutealiteacute ce sont pas des erreurs mais des faux neacutegatifs
rapporteacutes en raison de petites diffeacuterences de pixels dans des rendus diffeacuterents (cela pourrait
ecirctre ducirc agrave lrsquoutilisation de diffeacuterents navigateurs)
En conclusion le tableau 31 donne les grandes lignes de diffeacuterences entre trois outils majeurs
des approches existantes
95
Sahi Selinium Websee
Pas de plugin (so-lution proxy web) Plugin speacutecifique pour chaque navigateur
Configurationspeacutecifique etbibliothegravequestierces pourimpleacutementercertains desalgorithmesspeacutecialiseacutes
Tests fonctionelsdes eacuteleacutements de lapage baseacute sur letrafique HTTP en-registreacute au niveaudu proxy (play-back)
Tests fontionels
Tests de mise enpage en se ba-sant sur une ver-sion de reference(juste pour despages statiques)
Tableau 31 ndash Limites et diffeacuterences entre trois outils majeurs des approches existantes
CHAPITRE 4
DEacuteTECTION DE BUGS DrsquoINTERFACE
Comme nous avons pu le voir une analyse statique du contenu HTML et des deacuteclarations
CSS drsquoune page web nrsquoest pas suffisante pour deacutetecter les bugs drsquointerface citeacutes dans le
deuxiegraveme chapitre de cette thegravese car CSS nrsquoest pas un langage qui peut exprimer des proprieacuteteacutes
normatives pour la mise en page drsquoun document Les deacuteclarations CSS sont juste un ensemble
drsquoinstructions traiteacutees par un moteur de rendu Donner agrave CSS une expressiviteacute prescriptive
impliquerait la possibiliteacute de speacutecifier agrave quoi un eacuteleacutement ne doit pas ressembler ou qursquoune
deacuteclaration de style particulier ne peut pas ecirctre remplaceacutee par drsquoautres constructions ndashce
que le CSS ne fournit pas En outre certains des bugs deacutecrits preacuteceacutedemment impliquent la
comparaison du contenu drsquoun document agrave plusieurs moments dans le temps une chose que
CSS nrsquoest pas eacutevidemment conccedilu pour faire
Par conseacutequent afin drsquoexprimer des proprieacuteteacutes normatives pour le contenu et la mise en page
drsquoune page web un langage compleacutementaire agrave CSS est neacutecessaire Ce langage doit permettre
aux utilisateurs drsquoeacutecrire des proprieacuteteacutes deacuteclaratives sur les styles des eacuteleacutements et de traiter
des eacuteveacutenements quelles que soient les deacuteclarations CSS ou le code cocircteacute client qui ont pu ecirctre
deacuteclareacutees
Pour combler cette neacutecessiteacute dans ce chapitre nous preacutesentons Cornipickle un langage
97
deacuteclaratif permettant drsquoexprimer des proprieacuteteacutes agrave propos du document et des proprieacuteteacutes CSS
drsquoune page On discutera eacutegalement drsquoune impleacutementation drsquoun algorithme permettant de
veacuterifier automatiquement si des eacutenonceacutes du langage sont vrais pour un site web particulier
41 UN INTERPREacuteTEUR POUR LES PROPRIEacuteTEacuteS CORNIPICKLE
Nous deacutecrivons maintenant la mise en œuvre de lrsquointerpreacuteteur pour lrsquoeacutevaluation automatiseacutee
des speacutecifications Cornipickle sur les applications web Cette impleacutementation est composeacutee
drsquoenviron 7 000 lignes de code Java et JavaScript et est disponible sous licence publique
geacuteneacuterale GNU 1 Une videacuteo de lrsquooutil en action sur des exemples simples peut eacutegalement ecirctre
consulteacutee en ligne 2
411 OBJECTIFS DE CONCEPTION
Outre la fonctionnaliteacute principale agrave mettre en œuvre le deacuteveloppement de lrsquooutil a eacuteteacute motiveacute
par un certain nombre drsquoobjectifs de conception importants
Pas de plugins speacutecifiques au navigateur
Tout drsquoabord la solution doit fonctionner sur autant de combinaisons de navigateurs et de
systegravemes drsquoexploitation que possible Ceci exclut explicitement les plugins speacutecifiques au
navigateur (ou limiteacutes par le navigateur) tels que les plugins Chrome les plugins Firefox
ou lrsquoutilisation drsquooutils tels que Selenium WebDriver Pour la mecircme raison la solution ne
doit pas reposer sur la preacutesence de frameworks JavaScript (jQuery Prototype etc) et ecirctre
1 httpsgithubcomliflabcornipickle2 httpyoutube90YitGRRx2w
98
autonome Cela implique que notre outil peut fonctionner dans des combinaisons inhabituelles
(navigateurssystegravemes drsquoexploitation) comme BoatBrowser sur un teacuteleacutephone Android ou
Qupzilla sous Haiku OS
Collecte drsquoinformations cocircteacute client
Deuxiegravemement lrsquoeacutevaluation des speacutecifications doit ecirctre faite en fonction des informations
recueillies sur le client cela eacutecarte la possibiliteacute drsquoeffectuer une eacutevaluation statique de HTML
et CSS du cocircteacute serveur Ceci est obligatoire pour plusieurs raisons Il faut tenir compte du
fait que le standard CSS nrsquoest pas interpreacuteteacute de la mecircme maniegravere par tous les navigateurs Par
exemple CSS stipule que la largeur drsquoun eacuteleacutement nrsquoinclut pas le remplissage mais certaines
versions drsquoInternet Explorer incluent le remplissage dans la largeur et rendent le mecircme eacuteleacutement
avec des dimensions diffeacuterentes
Dans une large mesure la veacuterification des contraintes en examinant uniquement le code
HTML + CSS impliquerait drsquoeacutemuler le moteur de rendu de chaque navigateur compleacuteteacute par
ses laquo bizarreries raquo speacutecifiques pour parvenir agrave un verdict fidegravele
En plus des problegravemes susmentionneacutes toutes les applications que nous avons eacutetudieacutees
contiennent du code cocircteacute client qui peut modifier la disposition drsquoune page apregraves que le
moteur de mise en page a traiteacute les deacuteclarations statiques trouveacutees dans le document HTML
initial et les fichiers CSS traiteacutes au moment du chargement Ce code programmeacute pour ecirctre
exeacutecuteacute lors du chargement de la page remplace complegravetement les deacuteclarations de style que
les fichiers CSS drsquoorigine peuvent initialement deacutefinir Par conseacutequent dans tous les cas il ne
suffit pas drsquoanalyser lrsquoensemble des fichiers HTML et CSS deacutefinis par lrsquoapplication car tout
ce contenu peut ecirctre modifieacute agrave la voleacutee gracircce agrave des interactions avec lrsquoutilisateur une fois la
page chargeacutee
99
Pas drsquointerpreacutetation cocircteacute client
Troisiegravemement lrsquointerpreacutetation des speacutecifications de Cornipickle ne devrait pas ecirctre faite du
cocircteacute des clients Ceci est fait de maniegravere agrave ne pas imposer une charge de calcul excessive
dans le navigateur et permet lrsquoutilisation drsquoun autre langage que JavaScript pour lrsquoimpleacute-
mentation de cette fonctionnaliteacute Plus important encore il permet de geacuterer les proprieacuteteacutes
comportementales impliquant plus drsquoun instantaneacute de page par lrsquooutil En utilisant du code
strictement client un problegraveme survient lorsqursquoun rechargement de page complet se produit
car cela reacuteinitialise lrsquoeacutetat de tout objet JavaScript associeacute agrave cette page Eacutetant donneacute que les
speacutecifications comportementales requiegraverent la sauvegarde des informations du passeacute certains
moyens de preacuteserver ces informations dans le client agrave travers les rechargements de pages
doivent ecirctre conccedilus HTML5 fournit des fonctionnaliteacutes de stockage mais leur utilisation
limiterait la prise en charge des navigateurs (par exemple uniquement pour Opera 115 Safari
4 et IE 9 et plus reacutecents 3)
Interpreacutetation de lrsquoexeacutecution
Enfin il devrait ecirctre possible pour un utilisateur drsquoajouter de supprimer ou de modifier les
speacutecifications eacutevalueacutees par lrsquooutil Cela pose un deacutefi en raison de la construction speacuteciale We
say that qui permet drsquoajouter de nouvelles constructions grammaticales dans le langage de
base Ceci est diffeacuterent des deacutefinitions de fonction ou de preacutedicat habituelles disponibles dans
la plupart des langages ougrave la syntaxe des appels de fonctions est fixe et seuls de nouveaux
identificateurs de fonctions peuvent ecirctre ajouteacutes au moment de lrsquoanalyse Cela a neacutecessiteacute le
deacuteveloppement drsquoun analyseur BNF appeleacute Bullwinkle 4 qui peut accepter de nouvelles regravegles
3 httpwwwhtml5rockscomenfeaturesstorage4 httpsgithubcomsylvainhalleBullwinkle
100
Figure 41 ndash Architecture et interactions de Cornipickle
drsquoanalyse agrave lrsquoexeacutecution mdashcontrairement agrave la plupart des autres analyseurs qui neacutecessitent une
eacutetape de compilation chaque fois que la grammaire change
412 ARCHITECTURE ET SCEacuteNARIO DrsquoUTILISATION TYPIQUE
La combinaison de toutes les exigences dans [51] impose plus ou moins une architecture pour
lrsquooutil Cornipickle ougrave le code cocircteacute serveur prend en charge la collecte et lrsquoeacutevaluation des
speacutecifications (caracteacuteristiques) tandis que le code cocircteacute client agit uniquement comme une
laquo sonde raquo Lrsquointerrogation des informations pertinentes sur lrsquoeacutetat actuel de la page est relayeacutee
vers le serveur pour un traitement ulteacuterieur Cette interaction client-serveur a un avantage
cependant le code cocircteacute client peut ecirctre relativement leacuteger et sans eacutetat (ecirctre remis agrave zeacutero agrave
chaque fois que la page se recharge) comme tout traitement agrave eacutetat qui peut ecirctre fait par le
serveur
La figure 41 montre les interactions avec lrsquooutil Cornipickle Un deacuteveloppeur eacutecrit drsquoabord un
jeu drsquoeacutetats deacuteclaratifs (1) qui sont stockeacutes dans la meacutemoire de Cornipickle (2) En donnant
101
tagname windowwidth 956height 165 children [
tagname pid gowidth 90 children [
tagname CDATA text Hello World
]
]
Figure 42 ndash Une page simple seacuterialiseacutee en JSON
un identifiant unique agrave ce jeu drsquoeacutetats qui peut ecirctre appeleacute dans le code JavaScript agrave ecirctre
inseacutereacute dans lrsquoapplication afin que la sonde peut ecirctre chargeacutee dans chaque page (3-4) cette
addition est geacuteneacuterique et ne diffegravere que dans la chaicircne drsquoidentification Quand une page
de lrsquoapplication doit ecirctre chargeacutee (5) Cornipickle creacutee dynamiquement la sonde JavaScript
correspondant agrave lrsquoensemble drsquoassertions pour les eacutevaluer et les envoyer au client (6-8) Cette
sonde est conccedilue pour signaler un instantaneacute des donneacutees DOM et CSS pertinents sur chaque
eacuteveacutenement deacuteclencheacute par lrsquoutilisateur Quand un tel eacuteveacutenement se produit la sonde recueille
toutes les informations pertinentes sur le contenu de la page (figure 42) et les relaie au serveur
Cornipickle (9) qui les enregistre dans un journal (10-11)
En option des informations sur lrsquoeacutetat actuel des assertions en cours drsquoeacutevaluation (vrai
faux) peuvent ecirctre relayeacutees agrave la sonde (12) Un tableau de bord drsquoanalyse peut reacutecupeacuterer le
journal enregistreacute qui peut ecirctre consulteacute par le deacuteveloppeur pour interroger lrsquoeacutetat de toutes les
102
Figure 43 ndash Une capture drsquoeacutecran de Cornipickle en action
proprieacuteteacutes drsquoentreacutee au deacutebut du processus (13-16)
La figure 43 montre un exemple de Cornipickle en action Dans ce cas la sonde injecteacutee a
inseacutereacute une petite icocircne dans le coin infeacuterieur droit de la fenecirctre qui devient rouge chaque fois
qursquoune proprieacuteteacute est violeacutee Pour contourner le fait que de nombreux navigateurs deacutesactivent
les requecirctes HTTP inter-site Ajax nrsquoest pas utiliseacute pour la communication entre le client et le
serveur La sonde envoie plutocirct ses donneacutees en modifiant lrsquoattribut src drsquoune image de zeacutero
pixel injecteacutee dans la page et en passant les donneacutees collecteacutees en tant que paramegravetres GET de
cette requecircte En sens inverse le serveur relaie les informations via un cookie speacutecialement
encodeacute que la sonde peut interroger peacuteriodiquement De cette faccedilon le serveur Cornipickle
peut reacutesider sur un serveur diffeacuterent de celui de lrsquoapplication testeacutee et avoir toujours une
communication bidirectionnelle ponctuelle avec sa sonde
103
42 LE LANGAGE CORNIPICKLE
Le langage Cornipickle comporte des constructions issues de la logique du premier ordre et de
la logique temporelle lineacuteaire tels que les quantificateurs et les opeacuterateurs temporels et qui
permettent agrave un utilisateur de speacutecifier des relations complexes sur les diffeacuterents eacuteleacutements du
document agrave plusieurs moments dans le temps caracteacuteristique qui est absente dans beaucoup
de langages de script
Cornipickle nrsquoest pas un convertisseur baseacute sur des expressions reacuteguliegraveres entre des fichiers
texte et des commandes de script mais sa grammaire lutte pour le mecircme genre de lisibiliteacute En
particulier pour ameacuteliorer la lisibiliteacute la grammaire de Cornipickle permet drsquoinseacuterer diffeacuterents
mots agrave lrsquointeacuterieur des diffeacuterentes constructions Ces mots nrsquoont aucun effet sur lrsquoanalyse et
lrsquointerpreacutetation des expressions
421 SYNTAXE DU LANGAGE
Dans Cornipickle les proprieacuteteacutes sont exprimeacutees sous forme drsquoassertions sur le contenu et les
attributs drsquoune capture (snapshot) drsquoune page prise agrave un instant donneacute La maniegravere preacutecise par
laquelle ces captures sont prises agrave partir drsquoune application web donneacutee sera deacutetailleacutee plus loin
Nous commenccedilons par une illustration des diffeacuterentes constructions de la grammaire dans le
tableau 41
Seacutelection drsquoeacuteleacutements Les eacuteleacutements de la page sont lrsquouniteacute principale dans Cornipickle ils
sont seacutelectionneacutes afin drsquoexprimer quelques-unes de leurs proprieacuteteacutes Ces proprieacuteteacutes peuvent
ecirctre appliqueacutees agrave tous les eacuteleacutements seacutelectionneacutes ou au moins agrave un
104
〈S〉 = 〈predicate〉 | 〈def-set〉 | 〈statement〉
Eacutenonceacutes Cornipickle
〈statement〉 = 〈foreach〉 | 〈exists〉 | 〈binary-stmt〉 | 〈negation〉| 〈temporal-stmt〉 | 〈userdef-stmt〉 | 〈let〉 | 〈when〉〈binary-stmt〉 = 〈equality〉 | 〈gt〉 | 〈lt〉 | 〈regex-match〉 | 〈and〉 | 〈or〉 | 〈implies〉〈temporal-stmt〉 = 〈globally〉 | 〈eventually〉 | 〈never〉 | 〈next〉 | 〈next-time〉
Logique du premier ordre
〈foreach〉 = For each 〈var-name〉 in 〈set-name〉 ( 〈statement〉 )〈exists〉 = There exists 〈var-name〉 in 〈set-name〉 such that ( 〈statement〉 )〈when〉 = When 〈var-name〉 is now 〈var-name〉 ( 〈statement〉 )〈let〉 = Let 〈var-name〉 be 〈property-or-const〉 ( 〈statement〉 )〈and〉 = ( 〈statement〉 ) And ( 〈statement〉 )〈or〉 = ( 〈statement〉 ) Or ( 〈statement〉 )〈implies〉 = If ( 〈statement〉 ) Then ( 〈statement〉 )〈negation〉 = Not ( 〈statement〉 )
Expressions temporelles
〈globally〉 = Always ( 〈statement〉 )〈never〉 = Never ( 〈statement〉 )〈next〉 = Next ( 〈statement〉 )〈eventually〉 = Eventually ( 〈statement〉 )〈next-time〉 = The next time ( 〈statement〉 ) Then ( 〈statement〉 )
Tableau 41 ndash La grammaire BNF pour Cornipickle (Partie I)
105
Par conseacutequent la seacutelection de lrsquoeacuteleacutement se fait par le biais de la quantification du pre-
mier ordre classique en utilisant lrsquoanglais pour la syntaxe comme For each $x in S
ou There exists $x in S(pour dire chaque $x dans S ou Il existe $x dans S) Dans ces
expressions S deacutesigne soit un seacutelecteur CSS 5 ou un autre ensemble preacuteceacutedemment deacutefini par
lrsquoutilisateur Les seacutelecteurs CSS sont exprimeacutes en utilisant la syntaxe de jQuery $( ) Un
seacutelecteur speacutecial appeleacute CDATA peut ecirctre utiliseacute pour deacutesigner le contenu du texte des nœuds
feuilles dans un arbre DOM (les parties qui composent la page en texte clair) Si $x est une
variable quantifieacutee en utilisant le meacutecanisme deacutecrit ci-dessus on peut acceacuteder au DOM ou aux
attributs CSS de cet eacuteleacutement en utilisant $xrsquos property (ougrave property est lrsquoattribut CSS
rechercheacute) Par exemple la largeur de lrsquoeacuteleacutement srsquoeacutecrirait $xrsquos width
Les attributs de lrsquoeacuteleacutement (qui sont soit des chaicircnes de caractegraveres ou de chiffres) peuvent alors
ecirctre compareacutes en utilisant des connectifs tels que is greater than ou equals le matching
drsquoexpressions reacuteguliegraveres est fait agrave travers le preacutedicat match et lrsquoinclusion de chaicircne est affirmeacutee
par lrsquoassertion contains Des assertions de base sur les eacuteleacutements peuvent eacutegalement ecirctre
combineacutees en utilisant des connecteurs booleacuteens classiques and or if then not
Eacuteveacutenements et opeacuterateurs temporels Dans Cornipickle les eacuteveacutenements deacuteclencheacutes par
lrsquoutilisateur tels que les touches et les clics de souris sont repreacutesenteacutes comme des attributs
sur lrsquoeacuteleacutement qui est la cible de lrsquoeacuteveacutenement Par exemple un eacuteleacutement qui a eacuteteacute cliqueacute
par lrsquoutilisateur posseacutedera momentaneacutement un attribut event avec une valeur click Par
conseacutequent affirmer qursquoun eacuteleacutement $x a eacuteteacute cliqueacute peut ecirctre eacutecrit $xrsquos event is lsquoclickrsquo
Lrsquoinclusion drsquoeacuteveacutenements dans le langage conduit naturellement agrave la notion de seacutequences
de documents de captures instantaneacutees Par conseacutequent Cornipickle fournit des opeacuterateurs
5 Un seacutelecteur CSS est une expression de chemin (path expression) qui deacutefinit les eacuteleacutements drsquoun documentqui font lrsquoobjet drsquoun ensemble donneacute de regravegles Ces expressions sont deacutefinies par une grammaire reacuteguliegraverecomme stipuleacute dans la norme CSS
106
Opeacuterateurs
〈equality〉 = 〈property-or-const〉 equals 〈property-or-const〉| 〈property-or-const〉 is 〈property-or-const〉〈gt〉 = 〈property-or-const〉 is greater than 〈property-or-const〉〈lt〉 = 〈property-or-const〉 is less than 〈property-or-const〉〈regex-match〉 = 〈property-or-const〉 matches 〈property-or-const〉〈constant〉 = 〈number〉 | 〈string〉〈property-or-const〉 = 〈elem-property〉 | 〈constant〉〈number〉 = ˆd+〈string〉 = ˆ[ˆ]
Constructions auxiliaires
〈el-or-not〉 = eacuteleacutement | ε
〈set-name〉 = 〈css-selector〉 | 〈userdef-set〉 | 〈regex-capture〉〈userdef-set〉 = 〈string〉〈var-name〉 = ˆ$[wd]+
Seacutelecteur CSS
〈css-selector〉 = $( 〈css-sel-contents〉 )〈css-sel-contents〉 = 〈css-sel-part〉 〈css-sel-contents〉 | 〈css-sel-part〉〈css-sel-part〉 = ˆ[wdu0023]+
Attributs CSS
〈css-attribute〉 = value | height | width | top | left | right| bottom | color | id | text | border | event
Proprieacuteteacutes des eacuteleacutements
〈elem-property〉 = 〈elem-property-pos〉 | 〈elem-property-com〉〈elem-property-pos〉 = 〈var-name〉 rsquos 〈css-attribute〉〈elem-property-com〉 = the 〈css-attribute〉 of 〈var-name〉
Expressions reacuteguliegraveres
〈regex-capture〉 = match 〈elem-property〉 with 〈string〉
Tableau 42 ndash La grammaire BNF pour Cornipickle (Partie II)
107
emprunteacutes agrave la logique temporelle Lineacuteaire (LTL) pour exprimer des assertions sur lrsquoeacutevolution
du contenu drsquoun document au fil du temps
La construction Always ϕ nous permet de faire lrsquoassertion suivante quelle que soit lrsquoex-
pression de ϕ elle doit ecirctre vraie (True) dans tous les snapshots du document De mecircme on
utilise Eventually ϕ pour dire que ϕ sera vraie dans certains futurs snapshots du document
et Next ϕ est utiliseacute pour dire que ϕ est vrai dans la capture suivante
Une construction speacuteciale appeleacutee The next time ϕ then ψ affirme que ψ doit ecirctre vraie
mais seulement une fois que ϕ est Vraie Par exemple on peut utiliser cette construction pour
exprimer que quelque chose doit ecirctre observeacute apregraves qursquoun eacuteleacutement ait eacuteteacute cliqueacute lrsquoassertion
ne lie pas jusqursquoagrave ce moment Ceci est une leacutegegravere reacuteeacutecriture de lrsquoopeacuterateur until de LTL
Un but particulier des opeacuterateurs temporels est de comparer lrsquoeacutetat du mecircme eacuteleacutement sur plu-
sieurs snapshots Cela peut ecirctre fait dans Cornipickle avec la construction When $x is now $y ϕ
Si $x se reacutefegravere agrave lrsquoeacutetat drsquoun eacuteleacutement captureacute dans un snapshot anteacuterieur alors $y contiendra
lrsquoeacutetat du mecircme eacuteleacutement dans la capture (snapshot) actuelle
Toutes ces constructions peuvent ecirctre librement combineacutees Par exemple la proprieacuteteacute suivante
affirme que chaque eacuteleacutement de la liste se deacuteplacera vers le bas de la page agrave un certain moment
For each $x in $(li) (Eventually (
When $x is now $y ($yrsquos top is greater than $xrsquos top )))
Extension de la grammaire Une caracteacuteristique tregraves importante et exceptionnelle qui contri-
bue agrave la lisibiliteacute des speacutecifications Cornipickle est la possibiliteacute drsquoeacutetendre le vocabulaire de
base du langage Ce dernier donne aux utilisateurs cette possibiliteacute en utilisant leurs propres
deacutefinitions Ces nouvelles deacutefinitions seront lues par lrsquointerpreacuteteur et pourront ensuite ecirctre
108
Ensemble deacutefini en extension
〈def-set〉 = A 〈def-set-name〉 is any of 〈def-set-eacuteleacutements〉〈def-set-name〉 = ˆ ( =is)〈def-set-eacuteleacutements〉 = 〈def-set-eacuteleacutement〉 〈def-set-eacuteleacutements〉 | 〈def-set-eacuteleacutement〉〈def-set-eacuteleacutement〉 = 〈constant〉
Preacutedicats deacutefinis par lrsquoutilisateur
〈predicate〉 = We say that 〈pred-pattern〉 when ( 〈statement〉 )〈pred-pattern〉 = ˆ ( =when)
Eacutenonceacutes deacutefinis par lrsquoutilisateur
〈userdef-stmt〉 = empty
Tableau 43 ndash Extensions de la grammaire BNF pour Cornipickle
utiliseacutees librement comme tout eacuteleacutement de base du langage
Les preacutedicats peuvent ecirctre deacutefinis avec la construction We say that when Le texte entre
that et when est interpreacuteteacute comme une chaicircne de caractegraveres qui peut contenir des variables
Puis le texte apregraves when deacutecrit comment cette expression doit ecirctre eacutevalueacutee en termes du
vocabulaire existant Par exemple on peut deacutefinir lrsquoexpression laquo left-aligned raquo comme suit
We say that $x and $y are left-aligned when ($xrsquos left equals $yrsquos left )
La construction $x and $y are left-aligned ($x et $y sont aligneacutes agrave gauche) peut en-
suite ecirctre reacuteutiliseacutee (eacuteventuellement avec diffeacuterents noms de variables) dans des assertions
ulteacuterieures Les utilisateurs peuvent eacutegalement deacutefinir des ensembles soient des ensembles
de chaicircnes de caractegraveres des chiffres ou des ensembles drsquoeacuteleacutements agrave partir drsquoune page en les
eacutenumeacuterant en utilisant la construction A is any of
A Mojibake is any of Atilde ccopy Atildersquo Atildeuml
109
Notez que le nom de lrsquoensemble ne doit pas neacutecessairement ecirctre un seul mot lrsquoanalyseur
interpregravete tout ce qui est entre A et is any of comme un nom
La quantiteacute de donneacutees pouvant ecirctre relayeacutee de cette maniegravere eacutetant limiteacutee Cornipickle se
charge drsquoenvoyer une sonde qui ne reacutecupegravere que les informations neacutecessaires agrave lrsquoeacutevaluation
des speacutecifications fournies par lrsquoutilisateur Par conseacutequent la sonde reccediloit des instructions sur
les eacuteleacutements de la page qui sont inteacuteressants et sur les attributs DOM et CSS neacutecessaires pour
ces eacuteleacutements Ceci est fait en reacutecupeacuterant lrsquoensemble de tous les noms drsquoattributs apparaissant
dans une expression et lrsquoensemble de tous les seacutelecteurs CSS utiliseacutes dans les quantificateurs
La sonde parcourt la structure DOM drsquoune maniegravere en profondeur et produit un nœud de sortie
pour chaque nœud DOM visiteacute Par deacutefaut le nœud de sortie est vide il agit uniquement
comme un espace reacuteserveacute vide afin de preacuteserver la relation parent-enfant entre les nœuds de
sortie Ce nrsquoest que si lrsquoemplacement du nœud actuel correspond agrave lrsquoun des seacutelecteurs CSS
que les attributs et les valeurs seront ajouteacutees au nœud et seulement pour les attributs preacutesents
dans lrsquoexpression agrave eacutevaluer Des reacuteductions suppleacutementaires peuvent ecirctre reacutealiseacutees en reacuteduisant
tous les sous-arbres qui contiennent uniquement des nœuds vides Ainsi la structure DOM
produite par la sonde peut ecirctre vue comme une version laquo eacutevideacutee raquo du document original ne
contenant que des nœuds et des attributs importants pour lrsquoeacutevaluation drsquoune proprieacuteteacute
Incidemment il faut noter que ce filtrage est relativement grossier Consideacuterons par exemple
lrsquoexpression suivante
For each $x in $(p)If $xrsquos height equals 400 Then
For each $y in $(h1)$xrsquos width is greater than $yrsquos width
Cornipickle sera chargeacute drsquoaller chercher la largeur et la hauteur de tous les paragraphes et
rubriques pourtant on ne peut voir que les paragraphes de 400 pixels de hauteur qui sont
110
reacuteellement neacutecessaires pour deacutecider de la vrai valeur de la proprieacuteteacute De plus les informations
sur les titres nrsquoont drsquoimportance que si de tels paragraphes existent dans le document sinon
la proprieacuteteacute est vide Par conseacutequent les conditions de filtrage pourraient ecirctre affineacutees un
compromis doit ecirctre atteint entre les eacuteconomies de bande passante drsquoun tel filtrage et la
puissance de calcul neacutecessaire du cocircteacute client pour eacutevaluer les conditions
422 SEacuteMANTIQUE FORMELLE
Nous allons maintenant preacutesenter la seacutemantique formelle de Cornipickle La premiegravere eacutetape
consiste agrave formaliser la structure le contenu et les proprieacuteteacutes de style drsquoune page afficheacutee
Nous deacutefinissons drsquoabord un ensemble A de noms drsquoattributs Cet ensemble comprend tous les
attributs du DOM (Document Object Model Level 2) [55] et toutes les proprieacuteteacutes de feuilles de
style (CSS) qui peuvent ecirctre associeacutees agrave un eacuteleacutement Un nœud DOM est une fonction ν ArarrV
qui associe agrave chaque nom drsquoattribut une valeur prise agrave partir drsquoun ensemble V Nous utilisons
la valeur speacuteciale laquo raquo pour indiquer qursquoun attribut est indeacutefini pour un nœud donneacute Nous
distinguons un sous-ensemble E subV qui deacutesigne les noms drsquoeacuteleacutements correspondants au nom
de la balise HTML reacuteelle qui repreacutesente lrsquoeacuteleacutement (par exemple a h1 img etc)
Nous indiquerons par N lrsquoensemble de tous les nœuds DOM Lrsquoensemble T de documents
DOM comprend tous les arbres dont les nœuds sont des nœuds DOM Conformeacutement agrave la
convention adopteacutee par la plupart des navigateurs Web les eacuteleacutements de texte ne peuvent
apparaicirctre que comme feuilles et reccediloivent le nom drsquoeacuteleacutement speacutecial TEXT La figure 44
repreacutesente un tel document Si nous laissons ν se reacutefeacuterer au deuxiegraveme paragraphe du document
body nous avons par exemple ν(elementName) = ldquoprdquo ν(stylecolor) = ldquoredrdquo etc Nous
eacutetendons ν aux valeurs en deacutefinissant ν(v) = v pour tout v isinV
111
lthtmlgtltheadgtlttitlegtMy titlelttitlegt
ltheadgtltbodygtlth1gtThe first pagelth1gtltp style=colorredwidth400pxgtHello worldltpgt
ltp style=font-size14ptwidth200pxgtAnother ltbgtparagraphltbgtltpgt
ltp style=width400pxgtltpgtltbodygt
lthtmlgt
html
head body
title
CDATA
h1 p p p
CDATA CDATA CDATA b
CDATA
Figure 44 ndash Un document DOM simple (a) Structure HTML (b) Repreacutesentation en arbre DOM Seuls les noms des eacuteleacutements sont afficheacutes les attributs et valeurs restants sont omis pour plusde clarteacute
112
Soit κ T timesNrarr 2N la fonction qui eacutetant donneacute un document t isin T et un nœud ν isinN produit
lrsquoensemble κ(tν) de tous les enfants de ν dans T Soit C lrsquoensemble de tous les seacutelecteurs
CSS La fonction χ T times Srarr 2N renverra lrsquoensemble des nœuds en t correspondant agrave un
seacutelecteur CSS c isin C Les eacuteveacutenements deacuteclencheacutes par lrsquoutilisateur sont pris en compte en
supposant que certains eacuteleacutements portent un attribut avec le nom speacutecial laquo event raquo dont la
valeur deacutecrit lrsquoeacuteveacutenement auquel cet eacuteleacutement est lieacute Par exemple un utilisateur qui clique sur
un bouton ferait en sorte que lrsquoattribut laquo event raquo de ce bouton porterait laquo click raquo comme valeur
De cette faccedilon il est possible qursquoun instantaneacute drsquoun document contienne des informations sur
les eacuteveacutenements dynamiques survenant dans lrsquoapplication
La seacutemantique de Cornipickle est deacutefinie sur des traces des documents DOM une trace est
une seacutequence finie drsquoeacuteleacutements de T que nous deacutesignerons par t = t0 t1 tk Eacutetant donneacute
que toutes les expressions impliquant des constructions deacutefinies avec We say that peuvent
facilement ecirctre converties en expressions qui utilisent uniquement des constructions agrave partir
du langage de base il suffit de deacutefinir la seacutemantique pour ce langage de base On dira qursquoune
trace t satisfait une expression Cornipickle ϕ noteacutee t |= ϕ lorsque son eacutevaluation renvoie la
valeur Vrai (gt) La notation t i indique le suffixe de t agrave partir de son i-egraveme eacuteveacutenement
La seacutemantique complegravete est deacutefinie reacutecursivement dans le tableau 44 En termes formels
lrsquoexpressiviteacute du langage Cornipickle correspond agrave une extension du premier ordre de la
logique temporelle lineacuteaire ougrave les eacuteveacutenements sont des structures arborescentes des paires
nom-valeur semblables agrave celles utiliseacutees par le moniteur drsquoexeacutecution BeepBeep [53] ce-
pendant BeepBeep nrsquoa pas la possibiliteacute de creacuteer des constructions grammaticales deacutefinies
par lrsquoutilisateur En outre le langage a eacuteteacute eacutetendu agrave des constructions qui mecircme si elles
nrsquoaccroissent pas lrsquoexpressiviteacute ameacuteliorent la lisibiliteacute des speacutecifications tel que The next
time 6
6 Formellement t |= The next time ϕ then ψ si et seulement si t |= Notϕ Until (ϕ And ψ)
113
t |= νrsquos a equals νprimersquos aprime hArr ν(a) = ν
prime(aprime)t |= νrsquos a equals v hArr ν(a) = v
t |= Notϕ hArr t 6|= ϕ
t |= ϕ And ψ hArr t |= ϕ and t |= ψ
t |= ϕ Ou ψ hArr t |= ϕ or t |= ψ
t |= If ϕ Then ψ hArr t 6|= ϕ ou t |= ψ
t |= There exists ξ in $(c) such that ϕ hArr t |= ϕ[ξν ] pour certains ν isin χ(t0c)t |= For each ξ in $(c) ϕ hArr t |= ϕ[ξν ] pour tout ν isin χ(t0c)
t |= Alwaysϕ hArr t |= ϕ et t1 |= Alwaysϕ
t |= Eventuallyϕ hArr t |= ϕ ou t1 |= Eventuallyϕ
t |= Nextϕ hArr t1 |= ϕ
t |= ϕ Until ψ hArr Il existe ige 0 tel quet i |= ψ and t j |= ϕ for j lt i
When ξ is now ξ prime ϕ hArr Il existe ν prime isin t0 tel queν(id) = ν prime(id) and t |= ϕ[ξν prime]
Tableau 44 ndash La seacutemantique formelle de Cornipickle aaprime isin A sont les noms drsquoattributs DOMv isin V est une valeur drsquoattribut c isin C est un seacutelecteur CSS ξ et ξ prime sont des noms de variablesν ν prime isin N sont les nœuds DOM et ϕ et ψ sont des eacutenonceacutes Cornipickle quelconques Lorsque test vide Always srsquoeacutevalue agrave V rai et Eventually et Next srsquoevaluent agrave Faux
114
Le cas de lrsquoexpression When $x is now $y justifie une explication cependant Cette construc-
tion est utiliseacutee pour deacutesigner le mecircme eacuteleacutement drsquoun document agrave deux moments diffeacuterents dans
le temps En raison de la nature dynamique des applications web il ne suffit pas drsquoutiliser sim-
plement For each $x in $(s) suivi par For each $y in $(s) avec le mecircme seacutelecteur
CSS s Les eacuteleacutements drsquoune page peuvent ecirctre deacuteplaceacutes arbitrairement vers nrsquoimporte quelle
partie drsquoun document et par conseacutequent la reacutecupeacuteration drsquoeacuteleacutements avec le mecircme seacutelecteur
ne garantit pas qursquoils seront reacutepartis sur le mecircme domaine deux fois Cornipickle reacutesout ce
problegraveme en donnant agrave chaque eacuteleacutement un attribut unique appeleacute cornipickleid (raccourci
agrave id dans le tableau) Cet identifiant ne change jamais quelles que soient les manipulations de
lrsquoapplication sur un eacuteleacutement Lrsquoexpression When $x is now $y eacutevalue la variable $y avec
lrsquoeacuteleacutement ayant la mecircme cornipickleid comme cela a eacuteteacute donneacute agrave lrsquoeacutevaluation de la variable
$x permettant de comparer les attributs du mecircme eacuteleacutement dans deux instantaneacutes distincts de
la page
43 EXPRIMER DES PROPRIEacuteTEacuteS AVEC CORNIPICKLE
Au moyen drsquoune tel langage il est possible de donner des exemples de proprieacuteteacutes correspondant
agrave certains des bugs citeacutes preacuteceacutedemment Par exemple en prenant pour Mojibake lrsquoensemble
deacutefini preacuteceacutedemment la preacutesence de problegravemes de codage de caractegraveres dans une page peut
ecirctre deacutetecteacutee avec
We say that $x doesnrsquot contain $y when (Not ($xrsquos text matches $yrsquos value ))
For each $text in $(CDATA) (For each $mojibake in Mojibake ($text doesnrsquot contain $mojibake ))
Nous ajoutons la construction doesnrsquot contain agrave la grammaire simplement pour ameacuteliorer
115
la lisibiliteacute de la deacuteclaration qui suit
Similairement pour preacuteciser qursquoune classe speacutecifique drsquoeacuteleacutements ne devrait jamais se deacuteplacer
on peut eacutecrire ce qui suit
We say that $x is immobile when (Always (
When $x is now $y (($xrsquos left equals $yrsquos left)
And($xrsquos top equals $yrsquos top ))))
For each $item in $(li) ( $item is immobile )
Lrsquointuitiviteacute de speacutecifications peut encore ecirctre mise en eacutevidence dans ce dernier exemple qui
stipule qursquoau moins un eacuteleacutement de la liste a la valeur drsquoun autre eacuteleacutement de liste la derniegravere
fois que lrsquoutilisateur a cliqueacute sur un bouton appeleacute laquo Go raquo
We say that I click on Go when (There exists $b in $(button) such that (
($brsquos text is Go)And($brsquos event is mouseup)))
Always (If (I click on Go) Then (
There exists $x in $(value) such that (The next time (I click on Go)
Then (There exists $y in $(value) such that (
$xrsquos text equals $yrsquos text )))))
La lisibiliteacute de cette speacutecification devrait ecirctre mise en contraste avec le code proceacutedural qursquoon
aurait besoin drsquoeacutecrire pour deacutetecter le mecircme problegraveme qui est objectivement plus long et
beaucoup moins clair Par exemple dans jQuery on obtiendrait lrsquoeacutequivalent de la figure 45
Il est maintenant possible de reprendre certains exemples de bugs mentionneacutes en deacutebut de
thegravese et de montrer comment ceux-ci peuvent ecirctre deacutetecteacutes par des expressions Cornipickle
116
$(document)mouseUp(function(event) var e = argumentscalleeif ($(eventtarget)text() === Go) var current_values = []$(value)each(current_valuespush($(this)text())
)if (elastValues == undefined)
var found = falsefor (var v in current_values)
if ($inArray(v elastValues)) found = truebreak
If (found)
consolelog(Error)elastValues = current_values
)
Figure 45 ndash Exemple de code jQuery veacuterifiant que deux eacuteleacutements ont le mecircme texte
117
approprieacutees Prenons drsquoabord le cas drsquoun eacuteleacutement qui se deacuteplace dans une page cliquer sur
un eacuteleacutement change sa classe CSS cela entraicircne la modification de la zone de deacutelimitation de
lrsquoeacuteleacutement eacuteventuellement le deacuteplacement drsquoautres eacuteleacutements qui ne doivent pas bouger
On doit drsquoabord deacutefinir ce que signifie ecirctre immobile La construction When $x is now $y
nous permet de comparer les proprieacuteteacutes drsquoun mecircme eacuteleacutement dans deux snapshots diffeacuterents de
la page mecircme si le positionnement relatif de lrsquoeacuteleacutement dans le DOM a changeacute
We say that $x is immobile when (Always (
When $x is now $y (($xrsquos left equals $yrsquos left)And($xrsquos top equals $yrsquos top)
))
)
Avec cette expression il devient facile de speacutecifier par exemple que chaque eacuteleacutement drsquoune
liste doit demeurer agrave sa position
name Immobile itemsdescription List items should never change positionseverity Error
For each $item in $(li) (
$item is immobile)
De la mecircme maniegravere on peut speacutecifier que des eacuteleacutements doivent toujours ecirctre aligneacutes les uns
par rapport aux autres
Nous deacutefinissons drsquoabord quelques preacutedicats en utilisant la construction We say that
118
We say that $x and $y are left-aligned when ($xrsquos left equals $yrsquos left
)We say that $x and $y are top-aligned when (
$xrsquos top equals $yrsquos top)
We say that the page is big when (The media query (min-width 200px) applies
)The following rules apply when (
the page is big)
Ces preacutedicats nous permettent de simplifier lrsquoexpression rechercheacutee qui devient une double
quantification sur les eacuteleacutements drsquoune mecircme liste
name Menus aligneddescription All list items should either be left- or top-alignedseverity Warning
For each $z in $(menu li) (
For each $t in $(menu li) (($z and $t are left-aligned)Or($z and $t are top-aligned)
))
Nous ne faisons aucune reacuteclamation formelle concernant lrsquoexhaustiviteacute du langage ou son
expressiviteacute Cependant des preuves anecdotiques reacutevegravelent que tous les bogues de mise en
page dans notre enquecircte peuvent ecirctre exprimeacutes par une expression approprieacutee suggeacuterant qursquoil
est bien adapteacute agrave la tacircche agrave accomplir
CHAPITRE 5
DEacuteTECTION AVANCEacuteE BUGS COMPORTEMENTAUX ET RWD
Nous avons preacutesenteacute au chapitre preacuteceacutedent Cornipickle et la faccedilon drsquoeacutevaluer des bugs de
preacutesentation en analysant le contenu drsquoune seule page relativement indeacutependamment des
autres Dans ce chapitre nous nous inteacuteressons davantage aux bugs dits comportementaux
Dans ces bugs ce nrsquoest pas la preacutesentation graphique des pages qui est deacutefectueuse mais bien
la fonctionnaliteacute mecircme de lrsquoapplication Malgreacute tout nous pouvons exprimer et deacutetecter ces
bugs agrave partir de proprieacuteteacutes drsquoeacuteleacutements de lrsquointerface
Nous donnerons drsquoabord des exemples de bugs comportementaux illustreacutes dans une application
appeleacutee Beep Store Nous citons en suite les solutions actuelles et deacutecrivons ensuite notre
approche qui constitue une technique automatiseacutee fournissant des oracles de test dans le
but de deacutetecter les bugs comportementaux qui lient les donneacutees agrave lrsquoordre des consultations
de plusieurs pages de lrsquoapplication cela est fait en combinant Cornipickle avec un robot
drsquoexploration (RIA Crawler) Cette technique est aussi capables de veacuterifier la coheacuterence drsquoune
mise en page reacuteactive (responsive) sur une large gamme de largeurs de la fenecirctre Pour cela
nous avons inteacutegreacute une petite application dans le but de changer simultaneacutement la taille de la
fenecirctre du navigateur afin de deacutetecter des bugs RWD
120
51 BUGS COMPORTEMENTAUX DANS LE BEEP STORE
Afin drsquoeacutetudier les problegravemes de bugs comportementaux dans les applications RIA (Web 20)
deacutefinis dans 212 nous montrons quelques exemples de bugs illustreacutes sur une application
appeleacutee le Beep Store [53]
Le Beep Store est une application web client-serveur autonome impleacutementeacutee en PHP et
JavaScript qui permet aux utilisateurs enregistreacutes de parcourir une collection fictive de livres
et de musique et de geacuterer un panier virtuel composeacute de ces eacuteleacutements Cette application dont
les caracteacuteristiques ont eacuteteacute extraites drsquoune eacutetude exhaustive des applications web du monde
reacuteel est une RIA au sens propre du terme les interactions utilisateurs sont complegravetement
asynchrones ne neacutecessitent jamais le rechargement de la page deacutependent des actions passeacutees
des utilisateurs et consistent en un seul document dont les diffeacuterentes parties sont montreacutees
ou cacheacutees en fonction de lrsquoeacutetat actuel de lrsquoapplication
Connexions multiples Un des bugs qui peuvent ecirctre basculeacutes dans le Beep Store permet agrave
lrsquoutilisateur drsquoacceacuteder agrave la page de connexion tout en eacutetant deacutejagrave connecteacute Ceci est deacutetecteacute par
le fait que le lien laquo Srsquoidentifier raquo (Login) apparaicirct dans la barre drsquoaction supeacuterieure mecircme apregraves
que lrsquoutilisateur srsquoest connecteacute avec succegraves comme le montre la figure 51 1 Eacutevidemment une
application bien construite ne fournirait pas un bouton de connexion apregraves qursquoun utilisateur se
soit deacutejagrave connecteacute cette proprieacuteteacute est agrave eacutetat dans le sens ougrave lrsquoeacutetat valide drsquoune page deacutepend de
la seacutequence des actions passeacutees qui sont effectueacutees par lrsquoutilisateur (dans ce cas le fait qursquoune
connexion reacuteussie ait eu lieu)
1 On a vu au chapitre 2 comment des sites web reacuteels preacutesentent exactement ce problegraveme
121
Figure 51 ndash Le bug de connexions multiples Un utilisateur deacutejagrave connecteacute se voit proposer lrsquoop-tion de se reconnecter
Figure 52 ndash Le bug des paniers multiples Des boutons pour creacuteer un panier et ajouter desarticles au panier coexistent sur la mecircme page
Paniers multiples Un autre bug permet agrave lrsquoutilisateur de creacuteer plusieurs paniers drsquoachat
mecircme apregraves en avoir creacuteeacute un premier La figure 52 montre un exemple de ce bug un panier a
deacutejagrave eacuteteacute creacuteeacute puisque lrsquointerface affiche des boutons permettant agrave lrsquoutilisateur drsquoajouter des
articles au panier Pourtant les boutons pour creacuteer un nouveau panier sont eacutegalement afficheacutes
Supprimer drsquoun panier inexistant Ce bug est lrsquoinverse du preacuteceacutedent parfois le Beep
Store permet agrave lrsquoutilisateur de retirer un objet de son panier avant mecircme de le creacuteer Nous
pouvons voir dans la figure 53 que les boutons pour creacuteer un panier sont preacutesents avec les
boutons pour en retirer les eacuteleacutements
122
Figure 53 ndash Le bug de la suppression drsquoun panier inexistant Des boutons pour retirer du panieret creacuteer un panier coexistent sur la mecircme page
Ces bugs sont clairement comportementaux car ils sont causeacutes par des actions anteacuterieures
de lrsquoutilisateur ou des actions qui nrsquoont jamais eu lieu Il convient eacutegalement de noter que
selon lrsquoimpleacutementation du serveur ces bugs ne deacuteclenchent pas neacutecessairement des messages
drsquoerreur dans les logs Nous pouvons facilement imaginer un cas ougrave une action est rejeteacutee et ne
creacutee pas drsquoautres problegravemes mais le client ne devrait jamais avoir eacuteteacute preacutesenteacute avec lrsquooption
52 SOLUTIONS ACTUELLES
Les travaux connexes sur le test drsquoapplications web pour de tels types de bugs se concentrent
sur les moyens de trouver des erreurs dans les applications en effectuant une recherche
exhaustive de leur espace drsquoeacutetat
Les robots drsquoexploration (laquo crawlers raquo) font partie inteacutegrante des moteurs de recherche web et
sont deacutedieacutes agrave la collecte et agrave lrsquoindexation de documents web Ils ont eacuteteacute deacuteveloppeacutes agrave lrsquoorigine
pour lrsquoarchivage la reacutecupeacuteration drsquoinformations (trouver des adresses e-mail ou des pages
de produits par exemple) Cependant on a rapidement deacutecouvert que les crawlers pouvaient
ecirctre utiliseacutes agrave drsquoautres fins en particulier un crawler peut ecirctre consideacutereacute comme un outil
drsquoexploration drsquoespace drsquoeacutetat et agrave ce titre ecirctre utiliseacute pour effectuer des tests automatiseacutes
123
Un processus drsquoexploration traditionnel commence agrave partir des URL de deacutemarrage Les pages
web correspondant agrave ces URL sont teacuteleacutechargeacutees et les hyperliens preacutesents sur celles-ci sont
extraits et ajouteacutes agrave un ensemble drsquoURL agrave visiter eacutegalement appeleacute le crawl frontier Comme
le nombre drsquoURL qui peuplent la frontiegravere drsquoexploration augmente tregraves rapidement un critegravere
de priorisation du teacuteleacutechargement de certaines pages est geacuteneacuteralement appliqueacute Agrave leur tour
les URL les mieux classeacutees dans la limite de lrsquoexploration sont teacuteleacutechargeacutees et de nouveaux
liens sont extraits Cette opeacuteration est reacutepeacuteteacutee jusqursquoagrave ce que tous les liens accessibles soient
visiteacutes [62 65]
Certaines fonctionnaliteacutes de base des applications web traditionnelles sont modifieacutees dans
les RIA ce qui rend lrsquoexploration des RIA plus difficile que celle des applications web
traditionnelles Dans lrsquoanalyse RIA lrsquoordre drsquoanalyse respecte la seacutequence de pages possible
comme si un internaute lrsquoutilisait Comme nous lrsquoavons vu contrairement aux applications
web traditionnelles une URL nrsquoidentifie pas de faccedilon unique lrsquoeacutetat de lrsquoapplication et ne peut
donc pas ecirctre simplement demandeacutee au serveur agrave tout moment
Dans une application avec une gestion du panier comme le Beep Store il serait possible
pour un robot drsquoexploration traditionnel de trouver des bugs comportementaux lagrave ougrave il nrsquoy
en a pas lrsquoordre de visite est crucial Par exemple dans un sceacutenario ougrave lrsquoutilisateur peut
creacuteer un panier supprimer un panier ajouter un article agrave un panier et modifier un panier pour
modifier la quantiteacute un bug qui permet agrave lrsquoutilisateur drsquoeacutediter un article dans son panier sans
avoir de panier pourrait ecirctre deacutecouvert Apregraves la creacuteation drsquoun panier lrsquoajout drsquoun eacuteleacutement
et la suppression du panier lrsquoensemble drsquoURL du crawler traditionnel contient lrsquoURL agrave
modifier Ensuite lorsque vous essayez drsquoatteindre cette URL un bug survient car le panier a
eacuteteacute supprimeacute Cependant il peut srsquoagir drsquoun faux positif car cette seacutequence drsquoactions nrsquoest
probablement pas possible pour un utilisateur Un robot drsquoexploration traditionnel nrsquoest donc
pas adapteacute agrave la recherche de bugs comportementaux
124
Dans un crawler web pour RIA la page associeacutee agrave une seed URL (un crawler commence
par une liste drsquoURL agrave visiter appeleacutee les seeds) est extraite et chargeacutee dans un navigateur
virtuel Un module est requis pour veacuterifier si crsquoest la premiegravere fois que la page construite
est rencontreacutee Un extracteur drsquoeacuteveacutenements reacutecupegravere les eacuteveacutenements JavaScript de la page
un de ces eacuteveacutenements est seacutelectionneacute et exeacutecuteacute sur la page La page reacutesultante est ensuite
collecteacutee et le processus se poursuit jusqursquoagrave eacutepuisement de toutes les actions deacutecouvertes
[41] Sur la base de ce modegravele diffeacuterentes strateacutegies drsquoexploration (telles que la recherche en
profondeur (depth-first search) Greedy Model-Based et Component-Based) ont eacuteteacute suggeacutereacutees
[61 36 45 40 46 44]
Certains outils ont deacutejagrave eacuteteacute conccedilus pour tester les RIA Par exemple WebMate [43] peut
extraire lrsquoarborescence drsquoeacutetat drsquoune application web Cet arbre est ensuite compareacute aux arbres
drsquoeacutetat drsquoautres navigateurs pour trouver les diffeacuterences de mise en page Cependant il se
concentre sur la compatibiliteacute inter-navigateurs (cross-browser compatibility) et ne semble pas
prendre en charge les tests externes deacutefinis par lrsquoutilisateur
WebMole est un autre crawler automatiseacute qui geacuteneacuteralise les approches existantes Il eacutelimine
tout backtracking arbitraire en interceptant les requecirctes HTTP et fait des sauts de page [54]
Cependant lrsquoobjectif de WebMole est simplement drsquoextraire les graphes de navigation drsquoune
application il ne permet pas agrave un utilisateur drsquoeacutecrire des oracles de test agrave eacutevaluer pendant
lrsquoexploration de lrsquoapplication
De son cocircteacute Crawljax [60] utilise une strateacutegie en profondeur (depth-first strategy) pour
explorer et produire une machine agrave eacutetats finis du comportement de lrsquoapplication Il est possible
gracircce agrave son architecture de plugin de tester chaque eacutetat pendant qursquoils sont visiteacutes Cependant
les tests en question doivent ecirctre eacutecrits par lrsquoutilisateur en code Java pur cela rend lrsquoeacutecriture
des oracles de test dynamiques difficile pour des raisons mentionneacutees plus haut
125
53 SOLUTION PROPOSEacuteE
Pour remeacutedier agrave ces problegravemes nous proposons dans cette section une architecture qui
combine un robot drsquoindexation RIA (dans ce cas Crawljax) avec notre interpreacuteteur de langage
de haut niveau pour les oracles de test web Cornipickle Crawljax est responsable de
lrsquoexploration drsquoune application web en tenant compte de son eacutetat tandis que nous utilisons les
opeacuterateurs emprunteacutes de la logique temporelle lineacuteaire fournie par Cornipickle pour exprimer
des assertions sur lrsquoeacutevolution du contenu drsquoun document au fil du temps Cette architecture a
eacuteteacute codeacutee dans un plugin open source pour Crawljax 2
531 INTERACTION AVEC CRAWLJAX
Crawljax est un outil pour explorer automatiquement lrsquoeacutetat dynamique des applications web
modernes Via des interfaces de programmation il a la capaciteacute drsquointeragir avec le code cocircteacute
client de lrsquoapplication Nous lrsquoutilisons pour explorer le comportement de lrsquoapplication web agrave
tester Pour deacutetecter les clics Crawljax analyse une page Web et lrsquoutilise systeacutematiquement
pour explorer le comportement dynamique de lrsquoapplication [60 70]
Les modifications deacutetecteacutees dans lrsquoarbre DOM dynamique sont valideacutees en tant que nouveaux
eacutetats du comportement De nombreuses options sont disponibles avec Crawljax pour configurer
le comportement drsquoanalyse Nous pouvons par exemple speacutecifier les liens ou les widgets agrave
cliquer ou non au cours de lrsquoexploration Dans une variante Crawljax effectue une recherche
en profondeur en premier (depth-first search) stocke lrsquohistorique des exeacutecutions drsquoeacuteveacutenements
et nrsquoexeacutecute un eacuteveacutenement que si lrsquoeacuteveacutenement nrsquoa pas eacuteteacute exeacutecuteacute auparavant quel que soit
lrsquoeacutetat de lrsquoapplication [68]
2 http githubcomliflabcrawljax-cornipickle-plugin
126
Figure 54 ndash Flux drsquointeraction et de seacuterialisation (Crawljax-Cornipickle)
La figure 54 montre le workflow du systegraveme combineacute pour deacutetecter les bugs comportemen-
taux de lrsquoapplication testeacutee Crawljax explore le comportement de lrsquoapplication web sous
test (Exploration) Il interagit avec Cornipickle agrave travers son architecture de plugin (Plugin
Cornipickle (capture)) (1) Chaque fois qursquoun eacutetat est creacuteeacute (OnNewState) ou visiteacute (OnRevisit)
Crawljax seacuterialise la page (seacuterialisation JSON) et lrsquoenvoie agrave lrsquointerpreacuteteur (2) pour lrsquoeacutevaluer
de la mecircme maniegravere que la sonde envoie la page au serveur Cornipickle dans lrsquoarchitecture
traditionnelle (Cornipickle eacutevaluation) Apregraves que la page ait eacuteteacute eacutevalueacutee par Cornipickle le
verdict (3) est retourneacute et le plugin affiche le reacutesultat (Outputs)(4)
Il est important de se rappeler que chaque eacutetat de lrsquoapplication est visiteacute par Crawljax dans la
mecircme seacutequence qursquoun utilisateur Mecircme quand il revient agrave un eacutetat anteacuterieur il recommence au
deacutebut de lrsquoexploration et prend le mecircme chemin jusqursquoagrave ce que lrsquoeacutetat deacutesireacute soit atteint
532 REDIMENSIONNMENT DU NAVIGATEUR
Ce mecircme principe peut ecirctre facilement modifieacute pour eacutegalement deacutetecter des bugs RWD Pour
ce faire nous avons creacuteeacute un autre plugin qui cette fois redimensionne le navigateur drsquoune
127
largeur donneacutee agrave une autre largeur
Eacutetant donneacute que lrsquoutilisation drsquoune barre de deacutefilement verticale nrsquoest pas un problegraveme dans le
responsive design seul le redimensionnement horizontal est lrsquoapproche correcte pour deacutetecter
les bugs RWD Puisque nous voulons explicitement trouver des bugs lieacutes au RWD le plugin
diminue lentement la largeur du navigateur ces bugs apparaissent sur des largeurs infeacuterieures
ougrave lrsquoespace disponible devient de plus en plus rare en reacutefeacuterence agrave des largeurs plus grandes Il
est possible de fournir au plugin la borne supeacuterieure la borne infeacuterieure et la quantiteacute de pixels
pour la deacutecreacutementation Le plugin met eacutegalement en eacutevidence les bugs qursquoil trouve et prend
une capture drsquoeacutecran de la page Nous obtenons ensuite des captures drsquoeacutecran ougrave les eacuteleacutements
responsables du bug ont des bordures rouges
54 EXPEacuteRIENCES ET REacuteSULTATS
Comme on peut le voir la deacutetection de bugs comportementaux et de bugs RWD dans les
deux cas peut se reacutesumer agrave la veacuterification de proprieacuteteacutes exprimeacutees sur des seacutequences de pages
Dans le premier cas elles sont fournies par un robot drsquoexploration et dans le second cas par
le redimensionnement reacutepeacutetitif de la fenecirctre du navigateur sur une mecircme page
Nous deacutetaillons maintenant quelques exemples de proprieacuteteacutes Cornipickle permettant de deacutetecter
des bugs comportementaux et des bugs RWD
541 DEacuteTECTION DE BUGS COMPORTEMENTAUX DANS BEEPSTORE
Nous expliquons drsquoabord les bugs comportementaux du Beep Store deacutecrits preacuteceacutedemment et
nous montrons comment ils peuvent ecirctre captureacutes par Crawljax en eacutevaluant les assertions de
Cornipickle lors de lrsquoexploration drsquoune application
128
Connexions multiples Le premier bug est celui des connexions multiples Ce bug peut
facilement ecirctre deacutetecteacute par les expressions suivantes
We say that we are signed in when (There exists $p in $(action-band) such that (
$prsquos text matches ^Welcome))
We say that we are in the login page when (There exists $div in $(sign-in) such that (
Not ( $divrsquos display is none )))
Always (If ( we are signed in ) Then (
Not ( we are in the login page )))
Les deux deacutefinitions We say that expliquent comment on deacutefinit le fait drsquoecirctre connecteacute et
drsquoecirctre dans la page de connexion dans le Beep Store Lrsquoexpression There exists x in y such
that (z) est utiliseacutee pour affecter agrave la variable x un eacuteleacutement de lrsquoensemble y ougrave z est vrai Nous
pouvons voir que lrsquoensemble y dans le second preacutedicat est composeacute de tous les eacuteleacutements
avec lrsquoidentifiant laquo sign-in raquo et il srsquoassure que z est vrai avec au moins un drsquoentre eux La
construction x matches y quant agrave elle veacuterifie si x correspond agrave lrsquoexpression reacuteguliegravere y et
la construction x is y veacuterifie si x est eacutegal agrave y Enfin lrsquoinstruction Always (x) veacuterifie que x est
vrai dans chaque instantaneacute En un mot il ne devrait jamais arriver que la bande drsquoaction dise
laquo Welcome raquo pendant que le div avec lrsquoidentifiant laquo sign-in raquo est afficheacute
Agrave titre de comparaison la figure 55 montre comment on pourrait attraper le mecircme bug
uniquement avec Crawljax et son architecture de plugin La lisibiliteacute est beaucoup plus faible
et avec des proprieacuteteacutes plus complexes nous pouvons voir donc comment le code peut devenir
complexe et long
129
private enum Verdict TRUE FALSE INCONCLUSIVEprivate Verdict m_verdict
Overridepublic void onNewState(CrawlerContext context StateVertexnewState) if(m_verdict == VerdictINCONCLUSIVE) EmbeddedBrowser browser = contextgetBrowser()
Identification identificationActionBand =new Identification(IdentificationHowid action-band)
booleansignedIn = false
Identification identificationSignInDiv =new Identification(IdentificationHowid sign-in)
booleancurrentlyInLoginPage = false
if(browserelementExists(identificationActionBand)) WebElementactionBand = browsergetWebElement(identificationActionBand)if(Patternmatches(^Welcome actionBandgetText())) signedIn = true
if(browserelementExists(identificationSignInDiv)) WebElementsignInDiv = browsergetWebElement(identificationSignInDiv)if(signInDivisDisplayed()) currentlyInLoginPage = true
if(signedIn) if(currentlyInLoginPage) m_verdict = VerdictFALSE
output(context newState)
Figure 55 ndash Le code neacutecessaire pour attraper le bug des connexions multiples en utilisant Crawl-jax sans Cornipickle
130
Paniers multiples Le bug des paniers multiples peut ecirctre deacutetecteacute par cette proprieacuteteacute
We say that we are signed in when (There exists $p in $(action-band) such that (
$prsquos text matches ^Welcome))
We say that we create a cart when (There exists $button in $(button-create-cart)
such that ($buttonrsquos event is click
))
The next time ( we are signed in ) Then (The next time ( we create a cart ) Then (
Always (Not ( we create a cart )
)))
Les deacuteclarations temporelles The next time x Then (y) eacutevaluent agrave vrai si y eacutevalue agrave vrai
mais seulement apregraves que x le soit Donc apregraves que nous nous soyons connecteacutes et apregraves que
nous ayions cliqueacute sur le bouton laquo creacuteer un panier raquo nous ne devrions plus jamais cliquer sur
laquo creacuteer un panier raquo
Le bug de suppression drsquoun panier existant se gegravere de maniegravere similaire nous ne le deacutecrirons
pas en deacutetail ici
Il est agrave noter que lrsquoeacutevaluation drsquoun eacutetat avec ces proprieacuteteacutes Cornipickle prend entre 36 et 74
millisecondes par page avec un processeur Intel Core i5-3470 Gardez agrave lrsquoesprit que bien que
les proprieacuteteacutes soient assez simples le Beep Store est une tregraves grande application agrave seacuterialiser
car mecircme les blocs non afficheacutes doivent ecirctre inclus
131
542 DEacuteTECTION DE BUGS RWD DANS DE VRAIS SITES WEB
Nous montrons maintenant quelques exemples de proprieacuteteacutes Cornipickle pour la deacutetection
de bugs RWD Les comportements drsquoun site web sont uniques pour chaque site Pour cette
raison la deacutetection des bugs comportementaux neacutecessite des proprieacuteteacutes speacutecifiques Drsquoautre
part le Responsive Web Design est une approche geacuteneacuterale de la conception Web similaire aux
modegraveles de conception (design patterns) dans les langages traditionnels Les eacutechecs dans lrsquoim-
pleacutementation de cette conception doivent ecirctre deacutetectables avec des proprieacuteteacutes geacuteneacuterales Pour
cette raison les proprieacuteteacutes deacutecrites dans cette section ne constituent que des avertissements
une violation ne devrait pas signifier qursquoil srsquoagit drsquoun bug dans tous les cas
Preacutesence de barres de deacutefilement Lrsquoune des premiegraveres indications drsquoun site web pas res-
ponsive est la preacutesence drsquoune barre de deacutefilement horizontale Pour deacutetecter ce bug une simple
proprieacuteteacute Cornipickle peut ecirctre deacutefinie
We say that there is an horizontal scrollbar when (the pagersquos width is less than
the pagersquos scroll-width)
name No horizontal scrollbardescription There should never be an horizontal scrollbarseverity Error
Always (
Not ( there is an horizontal scrollbar ))
Dans cette proprieacuteteacute lrsquointerception drsquoune barre de deacutefilement horizontale peut ecirctre obtenue en
comparant la largeur de la fenecirctre (viewportwidth) avec la largeur de deacutefilement (scroll-width)
132
Cela ne devrait jamais arriver si elle est toujours entoureacutee avec la construction Always Not
Collision drsquoeacuteleacutements Crsquoest le bug ougrave les eacuteleacutements se chevauchent Cette proprieacuteteacute com-
mence par certaines deacutefinitions du langage pour simplifier le cœur de la proprieacuteteacute agrave la fin Elle
deacutecrit les intersections horizontales et verticales un eacuteleacutement visible deux eacuteleacutements identiques
et des chevauchements
We say that $x x-intersects $y when ((($yrsquos right - 1) is greater than $xrsquos left)And(($xrsquos right - 1) is greater than $yrsquos left)
)
We say that $x y-intersects $y when ((($yrsquos bottom - 1) is greater than $xrsquos top)And(($xrsquos bottom - 1) is greater than $yrsquos top)
)
We say that $x is visible when (Not ( $xrsquos display is none )
)
We say that $x and $y are the same when ($xrsquos cornipickleid equals $yrsquos cornipickleid
)
We say that $x and $y are not the same when (Not ($x and $y are the same)
)
We say that $x and $y overlap when ((($x is visible) And ($y is visible))And(
($x x-intersects $y)And($x y-intersects $y)
133
))
We say that $x and $y do not overlap when (Not ($x and $y overlap)
)
La premiegravere deacutefinition utilise laquo right - 1 raquo car les eacuteleacutements qui se croisent doivent se croiser drsquoau
moins 2 pixels Il surmonte un problegraveme ougrave nous recevons des dimensions et des coordonneacutees
en entiers (pixels) mais le navigateur peut travailler avec des floats dans le cas drsquoeacuteleacutements
ayant des dimensions en ratios Ces floats sont arrondis et peuvent provoquer des diffeacuterences
de 1 pixel entre ce qui est afficheacute et ce qui est seacuterialiseacute Il est vrai que nous pouvons manquer
des bugs qui sont leacutegitimement agrave 1 pixel mais il est important de ne pas punir les bonnes
pratiques
La deacutefinition drsquoun eacuteleacutement visible veacuterifie uniquement si la proprieacuteteacute display est laquo none raquo car ces
eacuteleacutements ne provoquent aucun changement de disposition En outre cette valeur est affecteacutee
consciemment par le deacuteveloppeur afin que leur position sur la page soit correcte Le troisiegraveme
deacutecrit deux eacuteleacutements qui sont identiques en utilisant la proprieacuteteacute laquo cornipickleid raquo Cette
proprieacuteteacute est une valeur unique donneacutee agrave chaque eacuteleacutement important dans la page pendant la
phase de seacuterialisation Comme il est unique il peut ecirctre utiliseacute pour identifier si deux eacuteleacutements
sont identiques
La derniegravere construction deacutefinit deux eacuteleacutements qui se chevauchent Si elles sont agrave la fois
visibles et qursquoelles se croisent verticalement et horizontalement elles sont consideacutereacutees dans
une collision
name Element Collisiondescription All items that arenrsquot
overlapping initially shouldnrsquot ever overlap
134
severity WarningAlways (
For each $x in $(body ) (For each $y in $($x gt ) (
For each $z in $($x gt ) (If ( ($y and $z are not the same) And
($y and $z do not overlap) ) Then (Next (
When $y is now $a (When $z is now $b (
$a and $b donrsquot overlap)))))))
Enfin les trois constructions For each rassemblent tous les eacuteleacutements et leurs enfants directs
Elle permet de tester des paires de fregraveres et sœurs pour leur proprieacuteteacute de recouvrement Notez
qursquoelle ne veacuterifie pas si un eacuteleacutement chevauche un laquo cousin raquo car ce cousin aurait besoin de violer
la proprieacuteteacute Protrusion (qui nrsquoest pas deacutetailleacutee dans cette thegravese) La proprieacuteteacute pourrait ecirctre faite
en testant chaque eacuteleacutement avec tous les autres eacuteleacutements mais il est coucircteux en performance
Les deux constructions When $x is now $y rassemblent la paire dans la capture drsquoeacutecran
suivante afin de la comparer agrave elle-mecircme dans la capture drsquoeacutecran preacuteceacutedente Dans lrsquoensemble
la proprieacuteteacute dit que si deux fregraveres et sœurs ne se chevauchent pas agrave un moment donneacute ces
deux fregraveres et sœurs ne devraient pas se chevaucher au moment suivant
Les autres bugs RWD (deacutepassement des eacuteleacutements etc) deacutecrits au chapitre 2 peuvent ecirctre
traiteacutes de maniegravere similaires nous ne les deacutetaillerons pas ici
Agrave titre eacutevaluatif nous avons eacutevalueacute une proprieacuteteacute en fonction du nombre drsquoeacuteleacutements Le temps
de calcul de lrsquointerpreacuteteur en fonction du nombre drsquoeacuteleacutements dans la page est montreacute dans la
figure 56 Le temps de calcul en incluant la seacuterialisation de la page par la sonde JavaScript et
lrsquointerpreacutetation de la proprieacuteteacute en fonction du nombre drsquoeacuteleacutements dans la page est preacutesenteacute
dans la figure 57 Nous pouvons constater que lrsquointerpreacuteteur srsquoexeacutecute tregraves rapidement crsquoest
135
Figure 56 ndash Temps de calcul de lrsquointerpreacuteteur en fonction du nombre drsquoeacuteleacutements dans la page
bien la seacuterialisation de la page par la sonde qui prend le plus de temps dans le processus global
136
Figure 57 ndash Temps de calcul incluant la seacuterialisation de la page par la sonde JavaScript etlrsquointerpreacutetation de la proprieacuteteacute en fonction du nombre drsquoeacuteleacutements dans la page
CHAPITRE 6
VERS UN MEILLEUR FEEDBACK POUR LrsquoUTILISATEUR
Jusqursquoici nous avons preacutesenteacute un outil automatiseacute pour la deacutetection des bugs drsquointerface
permettant drsquoeacutevaluer les expressions dans un langage deacuteclaratif de haut niveau baseacute sur la
logique temporelle lineacuteaire et de premier ordre Or les pages web sont composeacutees de centaines
drsquoeacuteleacutements avec des dizaines drsquoassertions de proprieacuteteacutes qui doivent tenir de plus les deacutefauts
de mise en page sont parfois trop subtils pour ecirctre visibles agrave lrsquoœil nu (comme les eacuteleacutements drsquoun
seul pixel) Par conseacutequent lrsquoeacutevaluation de base de ces proprieacuteteacutes renvoyant un simple verdict
vraifaux ne serait pas tregraves utile pour un concepteur Le fait de simplement dire que laquo quelque
chose ne va pas raquo apporte peu de valeur ajouteacutee lorsque quelqursquoun doit rechercher le problegraveme
dans une page aussi complexe Pour fournir une reacuteelle eacutevaluation aux praticiens un outil
drsquoanalyse de la mise en page devrait donc ecirctre capable de repeacuterer des eacuteleacutements speacutecifiques de
la page qui sont responsables de certains bugs
Agrave cette fin Cornipickle a eacuteteacute eacutequipeacute drsquoun meacutecanisme pour essayer de circonscrire des parties
drsquoune page qui expliquent la faute deacutecouverte Notre travail sur la deacutetection de bugs de mise en
page est donc devenu une forme de localisation de deacutefaut (fault localization) Nous allons dans
ce chapitre exposer deux tentatives afin de fournir agrave lrsquoutilisateur un verdict plus riche qursquoun
simple vraifaux La premiegravere conduit agrave une construction appeleacutee laquo teacutemoin raquo baseacutee sur une
138
fonction appliqueacutee reacutecursivement sur la formule qui est falsifieacutee Un teacutemoin met en eacutevidence
un ensemble drsquoeacuteleacutements dans la page qui sont lieacutes drsquoune certaine maniegravere agrave la violation drsquoune
proprieacuteteacute
Cela srsquoest reacuteveacuteleacute insuffisant dans la pratique par la suite nous reprenons le travail sur une
nouvelle base formelle fondeacutee cette fois sur le concept de laquo reacuteparation raquo Intuitivement une
reacuteparation est un ensemble minimal de transformations qui lorsqursquoelles sont appliqueacutees agrave
lrsquoobjet original reacutetablissent sa satisfiabiliteacute par rapport agrave la speacutecification Lrsquoavantage de ce
concept est qursquoil est indeacutependant de la nature de lrsquoobjet et du langage de speacutecification utiliseacute
pour deacuteclarer ses proprieacuteteacutes attendues Il pourrait donc ecirctre appliqueacute agrave une varieacuteteacute drsquoautres
sceacutenarios en plus des applications web
61 GEacuteNEacuteRATION DE CONTRE-EXEMPLE LES TEacuteMOINS
Gracircce agrave la nature des speacutecifications du langage Cornipickle baseacutees sur la logique il est possible
drsquoanalyser systeacutematiquement une assertion quand elle est eacutevalueacutee agrave faux et drsquoidentifier les
eacuteleacutements qui sont laquo responsables raquo de la fausseteacute de cette assertion
Verdicts et teacutemoins
Nous appelons teacutemoin un arbre drsquoeacuteleacutements DOM soit W sube T lrsquoensemble de tous les teacutemoins
(W pour witness) Lrsquoensemble des verdicts est deacutefini comme V BcupgtperptimesW timesW un
verdict est composeacute drsquoune valeur de veacuteriteacute et de deux teacutemoins lrsquoun correspondant agrave la valeur
de veacuteriteacute gt lrsquoautre agrave la valeur de veacuteriteacute perp
139
La conjonction de verdicts est une fonction otimes V timesNtimesV rarrV deacutefinie comme suit
otimes(〈bwgtwperp〉ν 〈bprimewprimegtwprimeperp〉) =
〈perpwgtwperpcup(ν wprimeperp)〉 si bprime =perp
〈bandbprimewgtcup(ν wprimegt)wperp〉 si b 6=perp
〈bwgtwperp〉 sinon
Nous interpreacutetons bandbprime comme la conjonction classique agrave trois valeurs La notation (ν w)
deacutesigne la creacuteation drsquoun nouveau teacutemoin (witness) dont la racine est le nœud DOM ν avec le
teacutemoin w comme son enfant La notation wcupwprime deacutesigne lrsquoaddition de wprime aux enfants du teacutemoin
w Nous allons abuser de la notation et accepter que le deuxiegraveme argument de otimes pourrait ecirctre
un eacuteleacutement laquo vide raquo de N nous deacutesignerons comme ν 0 Cet eacuteleacutement est neacutecessaire de sorte que
chaque opeacuteration sur les verdicts peut surclasser un teacutemoin existant avec un nouveau nœud
racine mecircme srsquoil nrsquoy a rien agrave laquo teacutemoigner raquo
La conjonction de verdicts met agrave jour le contenu drsquoun verdict existant v et donne un autre
verdict vprime et un eacuteleacutement DOM ν Si vprime est faux il porte un teacutemoignage de cette fausseteacute agrave
savoir wprimeperp ce teacutemoin est attacheacute comme un enfant drsquoun nouvel arbre dont la racine est ν et
cet arbre est ajouteacute au teacutemoignage de la fausseteacute de v wperp De plus la valeur de veacuteriteacute de v
est deacutefinie comme eacutetant perp Autrement dit lrsquoexplication de vprime pour ecirctre fausse est ajouteacutee agrave
lrsquoexplication de v pour ecirctre fausse Dans le cas contraire si ni le premier eacuteleacutement de v ni celui
de vprime est faux alors le teacutemoin vprime associeacute agrave gt est ajouteacute au teacutemoin gt de v et sa valeur de veacuteriteacute
est mise agrave jour en conseacutequence Dans tous les autres cas v est laisseacute inchangeacute
140
ω(tνrsquos a equals ν primersquos aprime) =
〈gtν ν prime 0〉 if ν(a) = ν prime(aprime)〈gt 0ν ν prime〉 otherwise
ω(tνrsquos a equals v) =
〈gtν 0〉 if ν(a) = v〈perp 0ν〉 otherwise
ω(tNotϕ) = (ω(tϕ)ν 0)ω(tϕ And ψ) = otimes(otimes(〈gt 0 0〉ν 0ω(tϕ))ν 0ω(tψ))
ω(tϕ Or ψ) = oplus(oplus(〈perp 0 0〉ν 0ω(tϕ))ν 0ω(tψ))ω(tIf ϕ Then ψ) = oplus(oplus(〈perp 0 0〉ν 0(ω(tϕ)ν 0))ν 0ω(tψ))
ω(tThere exists ξ in$(c) such that ϕ)
=oplus〈perp 0 0〉
νisinχ(t0c)ω(tϕ[ξν ])
ω(tFor each ξ in $(c) ϕ) =otimes〈gt 0 0〉
νisinχ(t0c)ω(tϕ[ξν ])
Tableau 61 ndash La deacutefinition reacutecursive de la fonction de calcul du verdict ω
La disjonction de verdict oplus V timesNtimesV rarrV est deacutefinie comme le dual de la conjonction
oplus(〈bwgtwperp〉ν 〈bprimewprimegtwprimeperp〉) =
〈gtwgtcup(ν wprimegt)wperp〉 si bprime =gt
〈borbprimewgtwperpcup(ν wprimeperp)〉 si b 6=gt
〈bwgtwperp〉 sinon
Enfin la neacutegation du verdict est la fonction V timesNrarrV deacutefinie comme suit
(〈bwgtwperp〉ν) =
〈notbwperpcup(ν wgt)wgtcup(ν wperp)〉 si b isin gtperp
〈bwgtwperp〉 sinon
Intuitivement inverse les teacutemoins associeacutes agrave gt et perp et les surmonte drsquoune nouvelle racine
avec le nœud DOM ν Cela nrsquoa aucun effet lorsque le verdict est laquo raquo
En utilisant ces opeacuterateurs la seacutemantique formelle de Cornipickle deacutecrite dans le tableau 44
peut alors ecirctre eacutetendue agrave une fonction ω T lowasttimesΦrarrV qui sur une expression ϕ isinΦ et une
trace t isin T lowast calcule un verdict
141
La notationotimes〈gt 0 0〉
νisinχ(t0c)ω(tϕ[ξν ]) est un raccourci pour
otimes(〈gt 0 0〉ν 0otimes(ω(tϕ[ξν0])ν0otimes(ω(tϕ[ξν1])ν1 middot middot middot)))
En drsquoautres termes elle deacutesigne la conjonction reacutepeacuteteacutee du verdict de ω(tϕ[ξν ]) pour chaque
ν isin χ(t0c) agrave partir du verdict vide 〈gt 0 0〉 Une notation similaire est utiliseacutee pour oplus
Cette deacutefinition est difficile agrave lire en termes de notation cependant le lecteur peut reacutealiser en
lrsquoexaminant que la deacutefinition de chaque cas correspond agrave lrsquointuition Par exemple construire
le verdict de laquo ϕ And ψ raquo revient agrave deacutemarrer du verdict laquo vide raquo 〈gt 0 0〉 et lui joindre
successivement le verdict de ϕ et ψ
De mecircme construire le verdict pour une expression quantifieacutee existentiellement ϕ(x) est
obtenu en calculant successivement la disjonction du verdict de ϕ(k) pour chaque k du verdict
initial 〈perp 0 0〉 Ceci est compatible avec le fait que existx isin S ϕ(x) est eacutequivalent agraveor
kisinS ϕ(k)
Enfin un raisonnement similaire srsquoapplique aux opeacuterateurs temporels lineacuteaires Par exemple
t |= Alwaysϕ peut ecirctre deacutefini comme t |= ϕ et t1 |= Alwaysϕ drsquoougrave les verdicts ω(tϕ) et
ω(t1Always ϕ) sont combineacutes en utilisant la conjonction verdict
A titre drsquoillustration de cette proceacutedure nous montrerons comment un verdict peut ecirctre
calculeacute pour lrsquoexpression suivante en consideacuterant lrsquoarbre de la figure 44 For each $x in
$(p) For each $y in $(p) $xrsquos width equals $yrsquos width Le document contient
trois paragraphes que nous appellerons p1 p2 et p3 le premier et le troisiegraveme ont une largeur
(width) de 400 tandis que le second a une largeur de 200 La deacuteclaration inteacuterieure $xrsquos
width equals $yrsquos width sera donc eacutevalueacutee neuf fois une fois pour chaque combinaison
de nœuds DOM pour $x et $y
Selon la deacutefinition de la fonction ω dans le tableau 61 chaque eacutevaluation produira un verdict
142
de la forme 〈gtpi p j 0〉 quand pi et p j ont la mecircme largeur et 〈perp 0pi p j〉 quand ils
sont deacutefinis autrement Dans le premier cas la deacuteclaration srsquoeacutevalue agrave gt et les nœuds DOM pi
et p j sont ajouteacutes comme gt-teacutemoins de ce fait Lrsquoinverse srsquoapplique lorsque lrsquoinstruction est
fausse
Ces verdicts sont ensuite reacuteunis dans le quantificateur universel le plus profond Un verdict
vide 〈gt 0 0〉 est drsquoabord creacuteeacute et tous les verdicts pour lrsquoexpression inteacuterieure sont ensuite
combineacutes en utilisant la conjonction verdict Par exemple quand $x se reacutefegravere agrave p1 trois
verdicts sont joints 〈gtp1 p1 0〉 〈perp 0p1 p2〉 et 〈gtp1 p3 0〉 Selon la deacutefinition
de conjonction de verdict le verdict reacutesultant sera
〈perp(ν 0〈gtp1 p1 0〉)(ν 0〈gtp1 p3 0〉)(ν 0〈perp 0p1 p2〉)〉
Les deux verdicts internes srsquoeacutevaluant agrave gt sont attacheacutes au teacutemoin associeacute agrave gt et le verdict
eacutevaluant perp est attacheacute au teacutemoin associeacute agrave perp Trois de ces verdicts seront produits par le
quantificateur le plus interne un pour chaque valeur de $x qui seront ensuite combineacutes en
utilisant agrave nouveau la conjonction par le quantificateur universel le plus externe ce qui donnera
le verdict final
〈perp 0
(ν 0〈perp(ν 0〈gtp1 p1 0〉)(ν 0〈gtp1 p3 0〉)(ν 0〈perp 0p1 p2〉)〉)
(ν 0〈perp(ν 0〈gtp2 p2 0〉)(ν 0〈perp 0p1 p2〉)(ν 0〈perp 0p2 p3〉)〉)
(ν 0〈perp(ν 0〈gtp1 p3 0〉)(ν 0〈gtp3 p3 0〉)(ν 0〈perp 0p2 p3〉)〉) 〉
Lrsquoimpleacutementation actuelle de Cornipickle peut calculer ces verdicts et les renvoyer agrave la sonde
JavaScript Les verdicts sont envoyeacutes agrave la sonde sous forme drsquoune liste Cornipickle ID Chaque
143
A list item
Another list item
A third list item
The last list item
(a)
A list item
Another list item
A third list item
The last list item
(b)
Figure 61 ndash Exemple drsquoune erreur de mise en page Web simple (a) lrsquoun des eacuteleacutements de la listeest incorrectement aligneacute avec les autres (b) un teacutemoin (witness) produit par lrsquooutil Cornipickle
ID est unique correspondant un eacuteleacutement speacutecifique dans la page ce qui permet drsquoentourer
lrsquoeacuteleacutement en question dans la fenecirctre du navigateur
62 LOCALISATION DES ERREURS DANS LES APPLICATIONS WEB
Agrave notre connaissance le principe de calcul du verdict deacutecrit preacuteceacutedemment fait de Cornipickle
un des tout premiers systegravemes agrave expliquer graphiquement en quoi une proprieacuteteacute est violeacutee
Malheureusement nous avons deacutecouvert que ce principe laisse tout de mecircme un peu agrave deacutesirer
Par exemple consideacuterons la proprieacuteteacute voulant que tous les eacuteleacutements drsquoune liste avec lrsquoID
laquo menu raquo doivent ecirctre aligneacutes verticalement
For each $x in $(menu li) (For each $y in $(menu li) (
$xrsquos left equals $yrsquos left))
Pour cet exemple particulier la figure 61a montre une page simple pour laquelle la proprieacuteteacute
serait violeacutee Nous pouvons voir le reacutesultat de lrsquoapplication de ω deacutefinie dans la section
preacuteceacutedente sur lrsquoarbre DOM de la figure 61a La fonction retourne un arbre contenant des
pointeurs sur deux des eacuteleacutements de la page surligneacutes en rouge dans la figure 61b (En fait la
fonction renvoie plusieurs ensembles chacun contenant le second eacuteleacutement de liste et lrsquoun des
eacuteleacutements restants)
144
Intuitivement un tel reacutesultat est logique pour un concepteur de sites web en effet ces deux
eacuteleacutements doivent ecirctre aligneacutes alors qursquoils ne le sont pas Cependant cette information ne peut
ecirctre deacuteduite que par la connaissance de la proprieacuteteacute violeacutee le teacutemoin pointe simplement ces
deux eacuteleacutements sans fournir drsquoinformations sur laquo ce qui ne va pas raquo agrave leur sujet Alors que la
geacuteneacuteration de contre-exemple reacutecursif preacutesente dans la version actuelle de Cornipickle fournit
plus drsquoinformations qursquoun simple verdict vraifaux dans de nombreux cas elle peut donc
srsquoaveacuterer trop vague pour ecirctre utile
Nous introduisons la notion de reacuteparation qui peut ecirctre deacutefinie intuitivement comme un
ensemble de modifications neacutecessaires agrave un objet pour le rendre conforme agrave une proprieacuteteacute
La notion de reacuteparation peut ecirctre vue comme une localisation de deacutefaut exprimeacutee en sens
inverse indiquer comment un objet doit ecirctre reacutepareacute indirectement pointe vers des aspects de
sa structure qui sont responsables du fait que la proprieacuteteacute nrsquoest pas actuellement remplie Nous
verrons que contrairement au concept de teacutemoin qui est une technique lineacuteaire en fonction
de la taille de la formule et fortement associeacute au langage de speacutecification et aux objets de
domaine utiliseacutes les reacuteparations sont deacutefinies agrave un niveau drsquoabstraction qui ne deacutepend pas des
proprieacuteteacutes de lrsquoun ou de lrsquoautre
621 DEacuteFINITIONS
Soit Σ un ensemble de structures et TΣ un ensemble drsquoendomorphismes sur Σ crsquoest-agrave-dire
que chaque τ isin TΣ est une fonction τ Σrarr Σ Soit 2TΣ lrsquoensemble de tous les sous-ensembles
de TΣ Un ensemble drsquoendomorphismes T = τ1 τn isin 2TΣ est dit ecirctre bien deacutefini si
deux eacuteleacutements τi τ j sont tels que τi τ j equiv τ j τ j Un tel ensemble bien deacutefini sera appeleacute
transformation Lorsque le contexte est clair nous allons abuser de la notation et consideacuterer T
comme lrsquoendomorphisme (deacutefini de faccedilon unique) τ1 middot middot middot τn Lrsquoinclusion drsquoensembles induit
145
un ordre partiel sur les transformations
Soit Φ un ensemble drsquoexpressions de langage eacutequipeacutees drsquoune relation de satisfaction |= Σtimes
Φrarr gtperp Pour une expression ϕ isinΦ et une structure σ isin Σ nous eacutecrirons σ |= ϕ si et
seulement si |= (σ ϕ) =gt Dans un tel cas nous dirons que σ laquo veacuterifie raquo ϕ ou alternativement
que σ est un modegravele de ϕ
Soit σ isin Σ une structure telle que σ 6|= ϕ pour une expression ϕ isin Φ Une reacuteparation est
deacutefinie comme une transformation T isin 2TΣ telle que T (σ) |= ϕ Une reacuteparation est dite prime
si aucun sous-ensemble T prime sube T est tel que T prime est aussi une reacuteparation Intuitivement une
reacuteparation principale est un ensemble de laquo changements raquo sur une structure σ qui satisfait ϕ
de sorte qursquoaucune modification laquo plus petite raquo ne restaure aussi la satisfiabiliteacute Comme sube
est une commande partielle il peut y avoir plusieurs reacuteparations principales mutuellement
incomparables
La figure 62 illustre ce concept Lrsquoimage repreacutesente toutes les transformations qui peuvent
ecirctre appliqueacutees agrave une structure dans le cas simple ougrave seulement quatre morphismes existent
La transformation vide est en bas et chaque flegraveche dans le graphe repreacutesente lrsquoajout drsquoun
morphisme suppleacutementaire agrave une transformation existante Les nœuds rouges indiquent les
transformations qui ne sont pas reacutepareacutees tandis que les nœuds jaunes et verts indiquent les
reacuteparations Parmi ceux-ci les reacuteparations principales sont coloreacutees en vert on peut voir que
tous les anteacuteceacutedents des nœuds verts sont rouges Lrsquoinverse cependant nrsquoest pas vrai tous les
descendants drsquoune reacuteparation ne sont pas eux-mecircmes reacutepareacutes
146
Figure 62 ndash Illustration du concept de reacuteparation principale
622 EXEMPLES
Cette deacutefinition simple peut ensuite ecirctre appliqueacutee agrave une varieacuteteacute de langages de speacutecification
comme nous allons lrsquoillustrer agrave travers les exemples qui suivent
Logique propositionnelle
Comme premier exemple soit Φ lrsquoensemble des formules de logiques propositionnelles
avec les variables X = x1 xn pour certains n ge 1 Soit Σ lrsquoensemble des fonctions
X rarrgtperp que nous appellerons des eacutevaluations La relation de satisfaction |= est deacutefinie
comme σ |= ϕ =gt si et seulement si ϕ vaut vrai lorsque ses variables sont remplaceacutees par la
valeur de veacuteriteacute correspondante speacutecifieacutee par σ et sinon par perp
Soit b isin gtperp et i isin [1n] Nous noterons τxi 7rarrb lrsquoendomorphisme deacutefini comme
(τxi 7rarrb(σ))(x) =
b si x = xi
σ(x) sinon
Ce morphisme met xi agrave la place de b et laisse inchangeacute le reste de lrsquoeacutevaluation initiale
147
Lrsquoensemble des endomorphismes TΣ est alors deacutefini comme
TΣ =⋃
iisin[1n]
⋃bisingtperp
τxi 7rarrb
Deux transformations τx 7rarrb τ primey7rarrbprime commutent si x 6= y Ainsi un ensemble de transformations
T isin 2TΣ est bien deacutefini si et seulement si chaque endomorphisme qursquoil contient change la
valeur drsquoune variable diffeacuterente
Soit X = abc soit σ lrsquoeacutevaluation a 7rarrgtb 7rarrperpc 7rarrperp et ϕ la formule propositionnelle
aand b On peut facilement observer que σ 6|= ϕ Une reacuteparation est la transformation T =
τb 7rarrgt qui est T (σ) |= ϕ Cela correspond agrave lrsquointuition que lrsquoexplication de la fausseteacute
de ϕ est que b est faux alors qursquoil devrait ecirctre vrai Notons que bien que T prime = τb7rarrgtτc7rarrgt
rendrait aussi ϕ vrai ce nrsquoest pas une reacuteparation primaire puisque T sube T prime Cela correspond agrave
lrsquointuition que la valeur de veacuteriteacute de c est pas pertinente agrave la fausseteacute de ϕ
Soit σ lrsquoeacutevaluation a 7rarr gtb 7rarr perpc 7rarr perp et ϕ la formule propositionnelle ararr b Cette
fois deux reacuteparations primaires existent T = τb7rarrgt et T prime = τa7rarrperp Il est possible de
veacuterifier que les deux fixent la valeur de veacuteriteacute de lrsquoeacutevaluation initiale Informellement la
premiegravere transformation repreacutesente la fausseteacute de ϕ sur le fait que a est vrai tandis que lrsquoautre
lrsquoexplique plutocirct par le fait que b est faux mdash ce qui correspond bien agrave lrsquointuition Puisque
les deux reacuteparations sont incomparables aucune de ces explications nrsquoest laquo preacutefeacutereacutee raquo Nous
reviendrons sur ce concept plus tard
Logique du premier ordre
Le concept de reacuteparation peut facilement ecirctre leveacute agrave lrsquoensemble Φ de la formule logique de
premier ordre sur les domaines finis Soit A un ensemble drsquoeacuteleacutements un preacutedicat n-aire est
148
deacutefini comme une fonction p Anrarrgtperp Soit Pi lrsquoensemble des preacutedicats de lrsquoariteacute i Une
signature est un ensemble de preacutedicats P = p1 pm respectivement drsquoariteacute a1 am
Pour une signature donneacutee lrsquoensemble des eacuteleacutements de domaine est deacutefini comme
Σ = Pa1timesmiddotmiddot middottimesPam
La relation de satisfaction |= est deacutefinie comme |= (dϕ) =gt si ϕ est eacutevalueacute agrave vrai lors de
lrsquoeacutevaluation de preacutedicats tels que deacutefinis dans σ et perp deacutefinie autrement
Dans ce contexte un endomorphisme repreacutesentera le changement de la valeur de veacuteriteacute pour
une entreacutee drsquoun preacutedicat Soit pk un preacutedicat de lrsquoariteacute i (a1 ak)isinAn un k-tuple drsquoeacuteleacutements
de A et b isin gtperp La transformation τpk(a1ak)7rarrb est deacutefini comme le preacutedicat pprimek tel que
pprimek(x1 xk) =
b si x1 = a1 xn = an
pk(x1 xk) autrement
Lrsquoensemble des transformations pour pk noteacute Tpk est deacutefinie comme suit
Tpk ⋃
(a1ak)isinAn
⋃bisingtperp
τpk(a1ak)b
Lrsquoensemble global des transformations est alors
TΣ ⋃pisinP
Tp
De maniegravere similaire agrave la logique du premier ordre on peut veacuterifier que deux endomorphismes
149
1
2
3
4
5
(a) Graphe original
1
2
3
4
5
(b) Apregraves lrsquoapplication de T1
1
2
3
4
5
(c) Apregraves lrsquoapplication de T2
1
2
3
4
5
(d) Apregraves lrsquoapplication de T3
1
2
3
4
5
(e) Apregraves lrsquoapplication de T4
Figure 63 ndash Quelques reacuteparations possibles pour un coloriage de graphe deacutefectueux
commutent srsquoils opegraverent sur un preacutedicat diffeacuterent ou changent la valeur drsquoune entreacutee diffeacuterente
sur le mecircme preacutedicat
Soit A = 012 ϕ la formule du premier ordre forallx existy x 6= yand p(xy) et le preacutedicat binaire
p deacutefini comme (00)(01)(11) Il y a deux reacuteparations primaires pour restaurer la veacuteriteacute
de ϕ T1 = τp(20)7rarrgt T2 = τp(21)7rarrgt Cela correspond agrave lrsquointuition que la valeur 2
manque au moins un laquo partenaire raquo dans p et que 0 ou 1 pourraient chacun correspondre agrave ce
but
Soit A = [15] un ensemble de sommets de graphe p un preacutedicat binaire codant la relation
drsquoadjacence des arecirctes de graphe et q1q2q3 un ensemble de preacutedicats unaires tel que qi(x)
contient si et seulement si le sommet x ayant la couleur i Supposons que les preacutedicats p et q
soient deacutefinis en fonction de la repreacutesentation graphique montreacutee dans la figure 63a
150
Une solution au problegraveme de coloriage de graphe peut ecirctre repreacutesenteacutee par trois expressions
de premier ordre
ϕ1 forallx (q1(x)andnotq2(x)andnotq3(x))or (notq1(x)andq2(x)andnotq3(x))or (notq1(x)andnotq2(x)andq3(x))
ϕ2 forallx forally p(xy)rarr p(yx)
ϕ3 forallx forally p(xy)rarr ((q1(x)rarrnotq1(y))and (q2(x)rarrnotq2(y))and (q3(x)rarrnotq3(y)))
La premiegravere stipule que chaque sommet a une couleur exacte la seconde indique que la
relation drsquoadjacence est symeacutetrique et lrsquoexpression finale stipule qursquoaucun sommet adjacent ne
peut avoir la mecircme couleur On peut voir que le graphe original ne satisfait pas ϕ1andϕ2andϕ3
Il existe plusieurs reacuteparations principales dont certaines sont indiqueacutees ici
T1 = τq1(5)7rarrperpτq2(5)7rarrgt
T2 = τp(45)7rarrperpτp(54)7rarrperp
T3 = τq1(1)7rarrperpτq3(1)7rarrgtτq1(4)7rarrperpτq3(4)7rarrgt
T4 = τp(24)7rarrperpτp(42)7rarrperpτq1(4)7rarrperpτq3(4)7rarrgt
La reacuteparation T1 corrige le graphe en changeant la couleur du sommet 5 en rouge Notons que
cela neacutecessite non seulement de mettre q2(5) agrave gt mais aussi q1(5) agrave perp sinon la structure
reacutesultante violerait ϕ1 Une autre reacuteparation (non repreacutesenteacutee) change le sommet 5 en vert La
reacuteparation T3 modifie plutocirct la relation drsquoadjacence et coupe le sommet 5 du reste du graphe
de sorte que le conflit de couleur soit reacutesolu
151
Ceux-ci correspondent aux moyens laquo intuitifs raquo de fixer le coloriage du graphe Cependant
il existe plusieurs autres reacuteparations primaires qui reacutepondent agrave la deacutefinition Par exemple la
transformation T4 eacutechange les couleurs des sommets 1 2 et 4 Notons qursquoil srsquoagit bien drsquoune
reacuteparation primaire en ce sens qursquoaucun sous-ensemble de ces endomorphismes ne restaure la
satisfiabiliteacute de la formule drsquoorigine De la mecircme faccedilon T5 coupe le bord entre les sommets
2 et 4 et passe au vert Au total il y a 17 reacuteparations primaires distinctes dans cet exemple
particulier
Encore une fois il convient de noter que sans contexte suppleacutementaire aucune de ces reacutepara-
tions nrsquoest une explication possible de la fausseteacute de ϕ1andϕ2andϕ3 sur le graphe original
Logique de premier ordre eacutetendue
Lrsquoexemple preacuteceacutedent montre la neacutecessiteacute drsquoeacutetendre la seacutemantique de la logique du premier
ordre agrave des fonctions arbitraires au lieu de preacutedicats strictement booleacuteens Cela peut facilement
ecirctre fait comme suit Soit A1 An et B des ensembles finis Nous deacutesignerons par FA1AnrarrB
lrsquoensemble de toutes les fonctions (prodi Ai)rarr B Une signature est un tuple de la forme
〈(A11 A1n1)rarr B1 (Am1 Amnm)rarr Bm〉
tel que fi est une fonction de lrsquoariteacute ni avec le domaine A11 A1ni et image Bi La logique
des preacutedicats est le cas particulier ougrave B1 = middot middot middot= Bnm = gtperp dans ce cas lrsquoimage peut ecirctre
omise et ougrave Ai j sont tous les mecircmes de sorte que seule lrsquoariteacute doit ecirctre connue Si f est une
fonction Ararr B et x deacutesigne un eacuteleacutement de A nous eacutecrirons x f pour deacutesigner f (x) permettant
ainsi une certaine forme de notation laquo objet raquo pour les fonctions
Dans ce contexte les quantificateurs de premier ordre doivent preacuteciser sur quel Ai j ils srsquoap-
152
pliquent de sorte que les expressions deviennent de la forme forallx isin Ai j ϕ et exist isin Ai j ϕ
Les termes de base peuvent maintenant comparer les valeurs de deux termes de fonction en
utilisant nrsquoimporte quel opeacuterateur binaire approprieacute
Les endomorphismes sont toujours deacutefinis de la mecircme maniegravere que pour la logique classique
du premier ordre agrave condition qursquoils se reacutefegraverent aux valeurs approprieacutees dans le domaine et
lrsquoimage de la fonction soumise au changement
Notons que ce formalisme eacutetendu nrsquoajoute aucune expressiviteacute agrave la logique du premier ordre si
tous les ensembles sont maintenus finis Il doit cependant simplifier lrsquoexpression de nombreuses
proprieacuteteacutes
Avec ce formalisme modifieacute nous sommes precircts agrave envisager des reacuteparations dans les proprieacuteteacutes
de mise en page Web Soit E un ensemble drsquoeacuteleacutements de page P un ensemble de valeurs
de pixels et C un ensemble de couleurs CSS Sur ces trois ensembles nous deacutefinissons les
fonctions Erarr P appeleacutees left right top et bottom correspondants respectivement aux
coordonneacutees x et y des coins supeacuterieur gauche(top-left) et infeacuterieur droit (bottom-right)
drsquoun eacuteleacutement De plus nous deacutefinissons un ensemble S de seacutelecteurs CSS lrsquoeacutevaluation drsquoun
seacutelecteur CSS sur un document peut ecirctre formaliseacutee comme une fonction $ Srarr 2E qui pour
une expression de filtre donneacutee retourne le sous-ensemble de E correspondant au seacutelecteur
Les endomorphismes peuvent ecirctre deacutefinis pour chacune de ces fonctions et doivent ecirctre
eacutecrits en utilisant la notation introduite preacuteceacutedemment Par exemple τwidth(e)7rarrk correspond agrave
lrsquoendomorphisme deacutefinissant la valeur de la fonction width (largeur) pour lrsquoeacuteleacutement e isin E
agrave k et laissant tout le reste tel qursquoil est
On peut alors exprimer la proprieacuteteacute que tous les eacuteleacutements dans une liste avec lrsquoID laquo menu raquo
153
A list item
Another list item
A third list item
The last list item
[|
(a)
A list item
Another list item
A third list item
The last list item
[ |
[ |[ |
(b)
A list item
Another list item
A third list item
The last list item
[[|
|
[|
[|
(c)
Figure 64 ndash Trois reacuteparations pour lrsquoexemple web
devraient ecirctre aligneacutes agrave gauche comme lrsquoexpression de premier ordre suivante
forallx isin $(menu li) forally isin $(menu li) xleft= yleft
Notons que cette expression correspond directement agrave la traduction du premier ordre de
lrsquoexpression de Cornipickle montreacutee dans la section 62
Trouver les reacuteparations principales pour cette expression et le fragment de page montreacute dans la
figure 61a produit un certain nombre de solutions dont trois sont montreacutees dans la figure 64
Les deux premiegraveres sont assez intuitifs La figure 64a corrige la page en deacuteplaccedilant lrsquoeacuteleacutement
deacutesaligneacute de la liste avec les autres alors que la Figure 64b fait le contraire en alignant les
trois eacuteleacutements de liste les plus agrave gauche avec le second La figure 64c donne un exemple de
lrsquoune des nombreuses solutions restantes dans ce cas tous les eacuteleacutements de liste sont deacuteplaceacutes
vers une nouvelle position commune x qui srsquoavegravere ecirctre une coordonneacutee qursquoaucun eacuteleacutement
nrsquoavait dans la page drsquoorigine
Ce dernier exemple fournit une illustration graphique de la diffeacuterence entre le concept original
de teacutemoin et celui de reacuteparation Alors qursquoun teacutemoin dans ce cas met en eacutevidence une paire
choisie au hasard drsquoeacuteleacutements mal aligneacutes (comme montreacute dans la figure 61b)) une reacuteparation
choisit des eacuteleacutements speacutecifiques et en plus deacutecrit ce qui doit ecirctre fait avec eux afin de reacuteparer
la violation de la proprieacuteteacute Ceci est sans doute plus reacuteveacutelateur pour un utilisateur et constitue
154
agrave notre avis lrsquoun des principaux avantages de cette technique
63 CALCUL DE LA REacutePARATION
Le concept de base de reacuteparation preacutesenteacute dans la section preacuteceacutedente se precircte agrave quelques points
de discussion En particulier le nombre de reacuteparations principales possibles est potentiellement
eacuteleveacute et la tacircche de geacuteneacuterer ces reacuteparations peut donc srsquoaveacuterer tregraves coucircteuse
631 ALGORITHME DE BASE ET COMPLEXITEacute
Lrsquoalgorithme montreacute dans 1 est un algorithme pour iteacuterer toutes les reacuteparations possibles drsquoune
structure Il eacutenumegravere simplement toutes les transformations possibles T isin 2TΣ Il veacuterifie
drsquoabord si T est bien deacutefini (crsquoest-agrave-dire que toute paire drsquoendomorphismes commute) et si
une reacuteparation geacuteneacutereacutee preacuteceacutedemment (stockeacutee dans lrsquoensemble TS) est un sous-ensemble de
lrsquoactuelle Il veacuterifie enfin si lrsquoapplication de cette transformation corrige la structure drsquoorigine
Il passe agrave la prochaine transformation candidate si lrsquoune de ces trois situations se produit
Sinon il ajoute cette transformation agrave son ensemble et le renvoie comme son prochain eacuteleacutement
Theorem 1 Lrsquoalgorithme 1 est coheacuterent et complet
Soit T une sortie de transformation par lrsquoalgorithme Par construction T est une reacuteparation
puisqursquoelle est bien deacutefinie et elle corrige la valeur de veacuteriteacute de σ dans ϕ De plus au
moment ougrave T est sorti aucun des eacuteleacutements de TS nrsquoest un sous-ensemble de T Puisque TS
contient toutes les reacuteparations de cardinaliteacute infeacuterieure agrave T et que par construction toutes les
transformations de cardinaliteacute similaires ne peuvent pas ecirctre des sous-ensembles il srsquoensuit
que T nrsquoest incluse par aucune reacuteparation existante et est donc principale Cela prouve la
155
Algorithm 1 Algorithme geacuteneacuterique pour lrsquoiteacuteration des reacuteparations primaires
procedure COMPUTEREPAIRS(ϕσ 2TΣ)TS = 0for all T isin 2TΣ do Eacutenumeacutereacutes en cardinaliteacute croissante
if notWELLDEFINED(T ) thenskip
end ifif SUBSUMED(TTS) then
skipend ifif T (σ prime) 6|= ϕ then
skipend ifTSlarr TScupTyield T
end forend procedure
coheacuterence de lrsquoalgorithme
Le fait que toutes ces reacuteparations majeures soient finalement eacutenumeacutereacutees est garanti par le
fait que tous les sous-ensembles de TΣ sont geacuteneacutereacutes agrave un moment donneacute ce qui prouve la
compleacutetude
Cet algorithme a eacuteteacute impleacutementeacute en Java et est disponible publiquement 1 En raison de sa
simpliciteacute et de sa geacuteneacutericiteacute lrsquoimpleacutementation des expressions des structures et des iteacuterations
de reacuteparation ne repreacutesente que 325 lignes de code Lrsquoeacutenumeacuteration des reacuteparations est exposeacutee
agrave lrsquoutilisateur sous la forme drsquoune classe classique Java Iterator qui peut ecirctre utiliseacutee par
les meacutethodes traditionnelles hasNext() et next() pour passer agrave travers lrsquoensemble complet
de reacuteparations principales dans lrsquoordre croissant de cardinaliteacute Les classes speacutecifiques au
domaine deacutefinissants les constructions logiques propositionnelles et de premier ordre sont
constitueacutees drsquoenviron 500 lignes de code suppleacutementaires Il est facile de voir que le temps
1 httpsgithubcomliflabfault-finder
156
drsquoexeacutecution de cet algorithme est exponentiel en fonction de la taille de TΣ qui peut elle-mecircme
ecirctre exponentielle dans un autre facteur (deacutependant du problegraveme modeacuteliseacute) Dans la logique
du premier ordre (telle qursquoutiliseacutee par un fragment de Cornipickle) si a1 an est lrsquoariteacute
respective de chaque preacutedicat dans la signature le nombre drsquoendomorphismes est sumi 2|A|ai
pour un domaine donneacute A
Malgreacute cela il est possible de montrer que cet algorithme est limiteacute par une borne infeacuterieure
theacuteorique Un ensemble drsquoendomorphismes TΣ est dit complet si pour tout σ σ prime isin Σ il existe
une transformation bien deacutefinie T sube TΣ tel que T (σ) = σ prime
Theorem 2 Eacutetant donneacute un ensemble de structures Σ un ensemble drsquoexpressions de langage
Φ et un ensemble complet de transformations TΣ le problegraveme du calcul des reacuteparations
principales est aussi difficile que le problegraveme de satisfiabiliteacute pour Φ
Soit ϕ isinΦ une expression du langage Si ϕ est satisfaisable alors il existe une structure σ isin Σ
telle que σ |= ϕ Prenons une structure arbitraire σ prime isin Σ Puisque TΣ est complet il existe
au moins une transformation T sube TΣ telle que T (σ prime) = σ Prenons le plus petit ensemble
de ce genre par deacutefinition il srsquoagit drsquoune reacuteparation principale et sera finalement eacutenumeacutereacutee
par lrsquoalgorithme 1 Puisque lrsquoalgorithme est complet au contraire aucune reacuteparation ne sera
trouveacutee si ϕ nrsquoest pas satisfaisable
632 REacuteDUCTION DU NOMBRE DE SOLUTIONS CANDIDATES
Ces reacutesultats de complexiteacute de base justifient une discussion sur la reacuteduction du nombre de
reacuteparations potentielles qui doivent ecirctre exploreacutees
157
Suppression des endomorphismes
Le nombre de transformations potentielles peut drsquoabord ecirctre reacuteduit en supprimant les endomor-
phismes dont on sait qursquoils sont impossibles en fonction du contexte Par exemple supposons
que les symboles propositionnels a et b dans lrsquoexemple 622 correspondent respectivement
aux assertions laquo le client paie pour un objet raquo et laquo le client reccediloit lrsquoarticle raquo On pourrait
supposer qursquoune eacutevaluation ougrave a est vraie ne peut pas ecirctre modifieacutee en la rendant fausse cela
correspondrait au fait qursquoune action effectueacutee par un acteur ne peut ecirctre annuleacutee Dans un tel
contexte seuls les endomorphismes reacuteglant les fausses variables agrave vrai seraient consideacutereacutes
Dans le cas des graphes comme dans lrsquoexemple 622 on pourrait imposer des restrictions
sur les changements qui lui sont autoriseacutes par exemple on pourrait dire que les arecirctes
existantes doivent rester inchangeacutees ou que seuls des sommets speacutecifiques peuvent ecirctre
colorieacutes diffeacuteremment Ceci encore une fois a pour effet de preacutefeacuterer certaines transformations
aux autres et reacuteduit globalement le nombre de reacuteparations disponibles
Transformations en groupes
La granulariteacute des endomorphismes disponibles peut eacutegalement ecirctre modifieacutee Dans le cas de
lrsquoexemple de coloriage de graphe il est eacutevident qursquoaucune reacuteparation ne consistera jamais
en un seul endomorphisme τqi(x)7rarrgt La raison est que lrsquoexpression ϕ1 requiert que chaque
sommet ait exactement une couleur assigner qi agrave gt pour un sommet implique que le q j
restant pour j 6= i soit mis agrave perp On peut donc deacutefinir un nouvel ensemble de transformations
158
approprieacutees au contexte repreacutesentant les changements de couleur
TC =⋃xisinA
⋃iisin[13]
j 6=ik 6= j 6=i
τqi(x)7rarrgtτq j(x)7rarrperpτqk(x)7rarrperp
De mecircme comme la relation drsquoadjacence est symeacutetrique mettre p(xy) agrave gt (resp perp) ne
peut pas ecirctre fait sans mettre p(yx) agrave gt (resp perp) Au lieu de consideacuterer les changements
individuels aux seules entreacutees de p on peut deacutefinir un ensemble de changements de bord
TE =⋃xisinA
⋃yisinA
⋃bisingtperp
τp(xy)7rarrbτp(yx)7rarrb
On pourrait alors utiliser TCcupTE comme lrsquoensemble des transformations au lieu de TΣ Bien
que cela ne change rien agrave la theacuteorie sur les solutions actuelles le fait que TCcupTE soit plus petit
que TΣ a un effet positif sur la performance drsquoun algorithme drsquoeacutenumeacuteration dans la pratique
La mecircme chose peut ecirctre dite des endomorphismes de lrsquoexemple 622 Plutocirct que de consideacuterer
tous les changements individuels des coordonneacutees (xy) des quatre coins de chaque eacuteleacutement
on pourrait deacutefinir des sous-ensembles correspondants agrave des modifications plus intuitives par
exemple lrsquoensemble des deacuteplacements horizontaux pourrait ecirctre deacutefini comme
TH =⋃eisinE
⋃pisinP
τleft(e) 7rarr pτright(e) 7rarr (τright(e)minus p)
On peut alors limiter la recherche pour les reacuteparations agrave celles qui sont faites uniquement
des deacuteplacements (horizontaux ou verticaux) ou des redimensionnements (horizontaux ou
verticaux) drsquoeacuteleacutements etc
159
(a) Le reacutesultat attendu
(b) Problegraveme drsquoalignement
Figure 65 ndash Eacuteleacutements mal aligneacutes capture et suggestion de correction
64 EXEMPLES
Les trois figures suivantes montrent des exemples simples de bugs montrant la capaciteacute de
lrsquooutil agrave rechercher des candidats de correction en se basant sur lrsquoapproche proposeacutee Les
figures montrent les verdicts qui sont des suggestions donneacutees par lrsquooutil pour chacun des cas
Il est a noteacute que le processus prend entre 2 et 20 millisecondes pour trouver un candidat (sans
prendre compte du temps drsquoeacutevaluation)
Exemple 1 eacuteleacutements mal aligneacutes Dans ce cas 65 la suggestion est de deacuteplacer 69 pixels
vers la gauche lrsquoeacuteleacutement qui a lrsquoidentifiant ID=2
160
(a) Le reacutesultat attendu
(b) Problegraveme de chevauchement
Figure 66 ndash Eacuteleacutements qui se chevauchent capture et suggestion de correction
Exemple 2 eacuteleacutements qui se chevauchent La suggestion est de deacuteplacer le bat de lrsquoeacuteleacutement
avec lrsquoID 11 agrave 126 pixels 66
Exemple 3 eacuteleacutement qui deacuteborde de son conteneur La suggestion est de deacuteplacer la
droite de lrsquoeacuteleacutement avec lrsquoID 14 agrave 1277 pixels 67
161
(a) Le reacutesultat attendu
(b) Problegraveme de deacutebordement
Figure 67 ndash Eacuteleacutement qui deacuteborde de son conteneur capture et suggestion de correction
CHAPITRE 7
CONCLUSION GEacuteNEacuteRALE
Les applications web se multiplient et se diversifient et les exigences de leurs utilisateurs srsquoac-
centuent et srsquoamplifient avec La relation application web-utilisateur est assureacutee uniquement
via la page Web Pour que cette relation soit tenue la page Web doit ecirctre entretenue et reacutepondre
agrave un ensemble de critegraveres se charger rapidement fournir le service deacutesireacute et ecirctre agreacuteable agrave
voir sur tous les appareils des ordinateurs de bureau ou portables des tablettes et teacuteleacutephones
mobiles Cependant la complexiteacute de la relation entre HTML CSS et JavaScript engendre des
difficulteacutes consideacuterables pour la mise en page des applications web le mecircme document peut
ecirctre afficheacute dans une varieacuteteacute de tailles de reacutesolutions de navigateurs et mecircme de peacuteripheacuteriques
entravant de ce fait la mise en page Les laquo bugs raquo de mise en page connaissent par conseacutequent
une preacutesence remarquable allant de problegravemes de particulariteacutes relativement simple tels que
des eacuteleacutements superposeacutes ou incorrectement aligneacutes agrave des problegravemes plus seacuterieux compromet-
tant la fonctionnaliteacute de lrsquointerface utilisateur Les tentatives bien que rares visant agrave reacutesoudre
ces problegravemes restent incapables de cerner tous les aspects de ceux-ci (problegravemes)
Nous distinguons dans ce contexte deux familles drsquoapproches servant agrave tester les interfaces
des applications web lrsquoapproche visuelle se basant sur la comparaison des captures drsquoeacutecran
pixel par pixel et lrsquoapproche deacuteclarative fonctionnant directement sur des informations sur
163
la mise en page Si dans la premiegravere qui fonctionne mal avec les donneacutees dynamiques le
deacuteveloppeur de test se heurte agrave lrsquoimpossibiliteacute de comparer des images de diffeacuterentes tailles
drsquoeacutecran il doit se soumettre dans la seconde aux exigences des descriptionsscripts de test
assez verbeux en deacutecrivant les regravegles de son interface graphique
Lrsquoapproche que nous proposons agrave savoir lrsquooutil Cornipickle offre les avantages suivants elle
fonctionne sur la majoriteacute de combinaisons navigateurssystegravemes drsquoexploitation sans recourir
aux plugins speacutecifiques au navigateur (ou limiteacutes par le navigateur) De plus elle permet
1 lrsquoeacutevaluation des speacutecifications en fonction des informations recueillies sur le client en se
dispensant de lrsquoeacutevaluation statique de HTML et CSS du cocircteacute serveur 2 lrsquointerpreacutetation des
speacutecifications de telle maniegravere agrave eacuteviter une charge de calcul excessive dans le navigateur
3 lrsquoutilisation drsquoun autre langage que JavaScript pour lrsquoimpleacutementation 4 la gestion des
proprieacuteteacutes comportementales impliquant plus drsquoun instantaneacute de page par lrsquooutil 5 la pos-
sibiliteacute agrave lrsquoutilisateur drsquoajouter de supprimer ou de modifier les speacutecifications eacutevalueacutees par
lrsquooutil 6 lrsquoexclusiviteacute drsquoexprimer agrave travers un langage deacuteclaratif des proprieacuteteacutes agrave propos du
document (Document Object Model) et des proprieacuteteacutes CSS drsquoune page Web 7 la potentialiteacute
de rechercher et deacutetecter automatiquement les bugs comportementaux et RWD (Responsive
Web Design) dans les applications web 8 la reacuteparation en fournissant un algorithme de base
pour calculer les transformations
Le prototype de preuve de concept de Cornipickle a montreacute des reacutesultats prometteurs dans sa
capaciteacute agrave exprimer facilement les conditions de bugs de mise en page dans les applications
web et agrave les deacutetecter efficacement dans des exemples de pages de plus de 35 applications
reacuteelles
Lrsquoefficaciteacute de notre outil Cornipickle nous a permis drsquoattraper automatiquement certains
problegravemes communs rencontreacutes dans les applications web modernes (RIA et RWD) Les
164
proprieacuteteacutes de Cornipickle garantissent que les pages drsquoune application suivent diffeacuterents
types de contraintes en particulier le seacutequenccedilage possible des pages qui est lrsquoobjectif de ce
volet de notre travail En combinant les performances de Crawljax pour explorer les eacutetats
de lrsquoapplication (crawler state-aware) et un stateful test oracle (speacutecifications de logiques
temporelles du premier ordre) dans Cornipickle nous avons obtenu des reacutesultats prometteurs
Une petite application a eacuteteacute deacuteveloppeacutee et inteacutegreacutee afin de tester le rendu visuel dans les
diffeacuterentes fenecirctres possibles afin drsquoattraper les deacutefauts RWD
Notre solution a quelques limites et surmonter ces limitations pourrait ecirctre la base de futurs
travaux Lrsquoutilisation de Cornipickle nous limite agrave des contraintes se reacutefeacuterant uniquement aux
eacuteleacutements qui sont afficheacutes Cela rend les bugs causeacutes au niveau backend (cocircteacute serveur) parfois
difficiles agrave attraper il est neacutecessaire de trouver les eacuteleacutements afficheacutes qui peuvent indirectement
repreacutesenter les eacutetats du serveur Dans la mecircme ligne si Crawljax ne notifie pas un changement
drsquoeacutetat lorsque le DOM change il nrsquoest pas possible drsquoeacutevaluer cette page ougrave un bug aurait pu
se produire En outre lorsqursquoune proprieacuteteacute est eacutevalueacutee agrave false elle est fausse pour le reste
de lrsquoanalyse et aucun autre bug ne peut ecirctre intercepteacute avec cette proprieacuteteacute Cela a causeacute un
problegraveme avec la deacutecouverte de bugs RWD observables car la plupart des eacutechecs ne sont pas
observables et les proprieacuteteacutes devaient trouver un bug observable comme premier bug
De plus la capaciteacute de Cornipickle agrave renvoyer une explication utile de la violation drsquoune
proprieacuteteacute sur un document Web donneacute est limiteacutee Crsquoest pourquoi nous avons introduit une
deacutefinition du concept de reacuteparation dont le calcul fournit des informations plus preacutecises sur les
changements requis pour une structure afin de satisfaire une speacutecification donneacutee Lrsquoeacutetude des
reacuteparations et leur calcul fait partie du travail en cours et de nombreux problegravemes sont encore
ouverts Par exemple un calcul efficace des reacuteparations repose sur la suppression du plus
grand nombre possible de transformations candidates par conseacutequent des techniques pour
identifier facilement des endomorphismes qui ne peuvent jamais faire partie drsquoune solution
165
pourraient ecirctre rechercheacutees De mecircme nous preacutevoyons drsquoeacutetudier des techniques qui pourraient
geacuteneacuterer lrsquoensemble des reacuteparations directement agrave partir de la speacutecification et de la structure
deacutefectueuse plutocirct que drsquoutiliser lrsquoalgorithme brut de geacuteneacuteration et de test preacutesenteacute
Le concept de calcul des reacuteparations est en cours de construction et il reste agrave eacutetablir ses liens
avec les travaux connexes Comme nous lrsquoavons vu dans la section preacuteceacutedente trouver des
reacuteparations concerne le concept de reacutesolution de satisfiabiliteacute (SAT) et plus preacuteciseacutement le
problegraveme du SAT increacutementiel [64] Les solveurs SAT traditionnels sont neacutecessaires pour
trouver un seul modegravele drsquoexpression En SAT increacutementiel un solveur trouve un premier
modegravele drsquoexpression mais peut eacutegalement ecirctre demandeacute agrave plusieurs reprises de fournir des
modegraveles suppleacutementaires Lorsqursquoun ensemble de transformations est termineacute lrsquoiteacuteration sur
les modegraveles revient agrave effectuer des iteacuterations sur les reacuteparations
BIBLIOGRAPHIE
[1] Alm specifications examples http auckland-
layoutsourceforgenetexamplesindexhtml
[2] Applitools visual test automation httpwwwapplitools
comAccessed25April2016
[3] Blackout repport httpssiteshksharvardeduhepgPapersNYISO
blackoutreport8Jan04pdf
[4] Bugs catastrophiques httpwwwslidesharenetwearesocialsg
social-media-for-travel-brands
[5] critical-rendering-path httpsdevelopersgooglecomwebfundamentals
performancecritical-rendering-path
[6] Deacutefinition du viewport httpswwwdefinitions-marketingcomdefinition
viewport
[7] Exemple webspecwatij https gistgithubcomtux2323954186
[8] Froont httpfroontcom
167
[9] Galen httpwwwswtestacademycomgalen-framework
[10] galen framework 2017 httpgalenframeworkcom
[11] howbrowserswork 2017 HTTPtaligarsielcomProjects
howbrowserswork1html
[12] Html and css w3c standards httpswwww3orgstandardswebdesign
htmlcss
[13] Http response httpswwww3orgProtocolsrfc2616rfc2616-sec6html
sec6
[14] http coursescsvteduprofessionalismtherac_25therac_1html httpcourses
csvteduprofessionalismTherac_25Therac_1html
[15] http wearesocialsg httpwearesocialsg
[16] http wwwcnncom2003us0814poweroutage httpwwwcnncom2003US
0814poweroutage
[17] http wwwyfolirenethumrhumeur13htm httpwwwyfolirenethumr
humeur13htm
[18] Les bases de sahiscript https sahiprocomdocsscriptingsahi-scripting-basicshtml
[19] mobile and tablet internet usage exceeds desktop for first
time worldwide httpgsstatcountercompress
mobile-and-tablet-internet-usage-exceeds-desktop-for-first-time-worldwide
[20] Phantomcss 2017 httpsgithubcomHuddlePhantomCSS
168
[21] Principe de fonctinement de sahi https wwwthoughtworkscominsightsblogintroduction-
sahi-part-1
[22] Respondr httprespondrio
[23] Responsinator httpswwwresponsinatorcom
[24] Responsivepxcom httpresponsivepxcom
[25] Reuters us-blackout-newyork 2003 https
wwwreuterscomarticleus-blackout-newyork
spike-in-deaths-blamed-on-2003-new-york-blackout-idUSTRE80Q07G20120127
[26] Rwdbookmarklet httpswwwsitepointcom
responsive-web-design-tool
[27] Screenfly httpquirktoolscomscreenfly
[28] Software bugs found to be cause of toyota acceleration death httpswwwgoogle
frampswwwcomputerworldcomarticle2573466disaster-recovery
software-failure-cited-in-august-blackout-investigationamphtml
[29] Software failure cited in august blackout investigation https
wwwcomputerworldcomarticle2573466disaster-recovery
software-failure-cited-in-august-blackout-investigationhtml
[30] Utilisation de capybara https wwwsitepointcombasics-capybara-improving-tests
[31] Vpresizer httplabmaltewassermanncomviewport-resizer
[32] Washingtonpost toyota reaches 12-billion settlement to end criminal
probe2014 httpswwwwashingtonpostcombusinesseconomy
169
toyota-reaches-12-billion-settlement-to-end-criminal-probe2014
03195738a3c4-af69-11e3-9627-c65021d6d572_storyhtmlutm_term=
4826d81e2aa6
[33] Watir http watircom
[34] websiteresponsivetest httpwwwwebsiteresponsivetestcom
[35] A Arora and M Sinha Web application testing A review on techniques tools and state
of art International Journal of Scientific Iamp Engineering Research 3(2) 1ndash6 2012
[36] K Benjamin G Von Bochmann M E Dincturk G-V Jourdan and I V Onut A stra-
tegy for efficient crawling of rich internet applications In 11th international conference
on Web engineering serICWErsquo11 page 74ndash89 Heidelberg Springer-Verlag 2011
[37] Tim Berners-Lee Roy Fielding and Larry Masinter Uniform resource identifier (URI)
Generic syntax Technical report January 2005 RFC 3986
[38] Oussama Beroual Francis Guerin and Sylvain Halleacute Searching for behavioural bugs
with stateful test oracles in web crawlers In 10th IEEEACM International Workshop on
Search-Based Software Testing SBSTICSE 2017 Buenos Aires Argentina May 22-23
2017 pages 7ndash13 2017
[39] T-H Chang T Yeh and RC Miller Gui testing using computer vision In the SIGCHI
Conference on H man Factors in Computing Systems CHI rsquo10 pages 1535ndash1544 New
York NY USA may 2010 ACM
[40] S Choudhary E Dincturk S Mirtaheri G-V Jourdan G Bochmann and I Onut
Building rich internet applications models Example of a better strategy In Web
Engineering ser Lecture Notes in Computer Science F Daniel P Dolog and Q Li
volume 7977 page 291ndash305 Springer Berlin Heidelberg 2013
170
[41] S Choudhary M E Dincturk S M Mirtaheri A Moosavi G von Bochmann G-V
Jourdan and I-V Onut Crawling rich internet applications the state of the art In
CASCON page 146ndash160 IBM Corp 2012
[42] Shauvik Roy Choudhary Mukul R Prasad and Alessandro Orso X-PERT accurate
identification of cross-browser issues in web applications In David Notkin Betty H C
Cheng and Klaus Pohl editors 35th International Conference on Software Engineering
ICSE rsquo13 San Francisco CA USA May 18-26 2013 pages 702ndash711 IEEE ACM
2013
[43] V Dallmeier M Burger T Orth and A Zeller Webmate Generating test cases for
web 20 In D Winkler S Biffl J Bergsmann (Eds) SWQD volume 133 of Lecture
Notes in Business Information Processing page 55ndash69 Springer 2013
[44] M E Dincturk ldquomodel-based crawling ndash an approach to design efficient crawling
strategies for rich internet applications Masterrsquos thesis EECS - University of Ottawa
2013
[45] M E Dincturk S Choudhary G von Bochmann G-V Jourdan and I-V Onut A
statistical approach for efficient crawling of rich internet applications ICWE page
362ndash369 2012
[46] Mustafa Emre Model-based Crawling - An Approach to Design Efficient Crawling
Strategies for Rich Internet Applications PhD thesis University of Ottawa 2013
[47] Jesse James Garrett Ajax A new approach to web applications - adaptive path 2005
[48] Alan Grosskurth and Michael Godfrey A case study in architectural analysis The
evolution of the modern web browser Software Maintenence and Evolution Research
and PracticeEMSE 2007
171
[49] Allan Grosskurth and Michael Godfrey A reference architecture for web browsers
Software Maintenence and Evolution Research and Practice page 1ndash7 2006
[50] A Guttman R-trees a dynamic index structure for spatial searching June 1984
[51] Sylvain Halleacute Nicolas Bergeron Francis Guerin Gabriel Le Breton and Oussama
Beroual Declarative layout constraints for testing web applications J Log Algebr Meth
Program 85(5) 737ndash758 2016
[52] Sylvain Halleacute and Oussama Beroual Fault localization in web applications via model
finding In Proceedings First Workshop on Causal Reasoning for Embedded and safety-
critical Systems Technologies CRESTETAPS 2016 Eindhoven The Netherlands 8th
April 2016 pages 55ndash67 2016
[53] Sylvain Halleacute and Roger Villemaire Constraint-based invocation of stateful web services
The Beep Store (case study) In 4th International ICSE Workshop on Principles of
Engineering Service-Oriented Systems PESOS 2012 June 4 2012 Zurich Switzerland
pages 61ndash62 2012
[54] S Halleacute G Le Breton F Maronnaud A Blondin Masseacute and S Gaboury Exhaustive
exploration of ajax web applications with selective jumping In ICST page 243ndash252
IEEE Computer Society 2014
[55] Arnaud Le Hors Philippe Le Heacutegaret Lauren Wood Gavin Nicol Jonathan Ro-
bie Mike Champion and Steve Byrne Document object model level 2 core 2000
http wwww3orgTRDOM-Level-2-Core
[56] Jaakko Jaumlrvi Mat Marcus Sean Parent John Freeman and Jacob Smith Algorithms for
user interfaces In Proceedings of the Eighth International Conference on Generative
172
Programming and Component Engineering GPCE rsquo09 pages 147ndash156 New York NY
USA 2009 ACM
[57] Jaakko Jaumlrvi Mat Marcus Sean Parent John Freeman and Jacob N Smith Property
models from incidental algorithms to reusable components In Yannis Smaragdakis and
Jeremy G Siek editors GPCE pages 89ndash98 ACM 2008
[58] Sonal Mahajan and William G J Halfond WebSee A tool for debugging HTML pre-
sentation failures In 8th IEEE International Conference on Software Testing Verification
and Validation ICST 2015 Graz Austria April 13-17 2015 pages 1ndash8 2015
[59] Ethan Marcotte Responsive web design Eyrolles 4 edition 2013
[60] A Mesbah A van Deursen and S Lenselink Crawling Ajax-based web applications
through dynamic analysis of user interface state changes ACM Transactions on the Web
(1) 6 2012
[61] S M Mirtaheri D Zou G V Bochmann G-V Jourdan and I V Onut Dist-ria crawler
A distributed crawler for rich internet applications In 8th International Conference on
P2P Parallel Grid Cloud and Internet Computing pages 105ndash112 IEEE Computer
Society Washington 2013
[62] Seyed M Mirtaheri Mustafa Emre Dincturk Salman Hooshmand Gregor V Bochmann
and Guy-Vincent Jourdan A brief history of web crawlers In CASCON rsquo13 Proceedings
of the 2013 Conference of the Center for Advanced Studies on Collaborative Research
pages 40ndash54 IBM Corp Riverton NJ USA ccopy2013 2013
[63] MTamm Http response httpsdeslidesharenetMichaelTamm
fighting-layout-bugs
173
[64] Alexander Nadel and Vadim Ryvchin Efficient SAT solving under assumptions In SAT
pages 242ndash255 2012
[65] C Olston and M Najork Web crawling Foundations and Trends in Information
Retrieval 4 175ndash246 2010
[66] Sean Parent Mat Marcus and Foster Brereton ASL overview Technical report Adobe
Systems 2007 httpstlabadobecomgroup__asl__overviewhtml
[67] Pedro A Szekely Piyawadee Noi Sukaviriya Pablo Castells Jeyakumar Muthukumara-
samy and Ewald Salcher Declarative interface models for user interface construction
tools the MASTERMIND approach In Leonard J Bass and Claus Unger editors
Proceedings of the IFIP TC2WG27 Working Conference on Engineering for Human-
Computer Interaction volume 45 of IFIP Conference Proceedings pages 120ndash150
Chapman amp Hall 1995
[68] Seyed M Mir Taheri Distributed Crawling of Rich Internet Applications PhD thesis
University of Ottawa 2015
[69] Michael Tamm Fighting layout bugs 2009 httpswwwyoutubecomwatchv=
WY3C6FHqSqQ
[70] Hideo Tanida Mukul R Prasad Sreeranga P Rajan and Masahiro Fujita Automated
system testing of dynamic web applications volume 303 page 181ndash196 Springer Berlin
Heidelberg 2013
[71] te (testing experience) The Magazine for Professional Testers Test automation - does it
make sense a simplified automation solution using watij wwwtestingexperiencecom
[72] Thomas A Walsh Gregory M Kapfhammer and Phil McMinn Automated layout
failure detection for responsive web pages without an explicit oracle In Proceedings
174
of the 26th ACM SIGSOFT International Symposium on Software Testing and Analysis
Santa Barbara CA USA July 10 - 14 2017 pages 192ndash202 2017
[73] Thomas A Walsh Gregory M Kapfhammer and Phil McMinn Redecheck an auto-
matic layout failure checking tool for responsively designed web pages In Proceedings
of the 26th ACM SIGSOFT International Symposium on Software Testing and Analysis
Santa Barbara CA USA July 10 - 14 2017 pages 360ndash363 2017
[74] Thomas A Walsh Phil McMinn and Gregory M Kapfhammer Automatic detection
of potential layout faults following changes to responsive web pages (N) In 30th
IEEEACM International Conference on Automated Software Engineering ASE 2015
Lincoln NE USA November 9-13 2015 pages 709ndash714 2015
TABLE DES FIGURES
11 Exemple drsquoune requecircte HTTP 912 Exemple drsquoune reacuteponse HTTP 1013 Un exemple simple de page HTML contenant un grand titre et un paragraphe 1214 Le flux entre les composants du navigateur pour la reacutecupeacuteration et le traitement
drsquoune page web dans le navigateur 2615 Un exemple simple de page web illustrant le rendu dans un navigateur 2716 Les processus de traitement de HTML et CSS au niveau du moteur de rendu
du navigateur 2817 Un arbre du modegravele drsquoobjet DOM 2918 Un exemple de fichier CSS simple 2919 Arbre du modegravele drsquoobjet CSSOM 30110 Arbre de rendu 31111 Les eacutetapes et processus de la construction des arbres DOM CSSOM et de
lrsquoarbre de rendu 32112 Un second exemple simple illustrant le processus de mise en page par le
navigateur 33113 Vue globale du flux de reacutecupeacuteration de traitement et drsquoaffichage drsquoune page web 34
21 Exemple drsquoeacuteleacutements mal aligneacutes le cadre blanc est horizontalement malaligneacute (LiveShout) le menu Interests est deacutecaleacute drsquoun pixel par apport auxautres menus (LinkedIn) 39
22 Exemple drsquoeacuteleacutements qui se chevauchent 4123 Le contenu de la page est dissimuleacute de lrsquointerface en raison de son prolonge-
ment au-delagrave des dimensions du conteneur parent 4224 Le bug Facebook La zone de texte permettant au utilisateur de taper un
message instantaneacute (agrave gauche) disparaicirct soudainement (agrave droite) 4325 Le bug laquo ton sur ton raquo Les eacuteleacutements de menu sont pousseacutes en dehors de leurs
conteneur et disparaissent (a) le texte du lien est de la mecircme couleur que lefond reacuteveacuteleacute en le seacutelectionnant avec la souris (b) 44
26 Un eacuteleacutement est placeacute incorrectement sur un autre 4527 Un exemple drsquointerface briseacutee en raison de lrsquoeacutechec du chargement de certaines
ressources 4628 Exemple drsquointerface briseacute dans le site Digital Ocean 4729 Exemple drsquoHTML mal formeacute 47
vi
211 Incoheacuterence dans le champ de formulaire du site CallingCards 48210 Exemple drsquoeacuteleacutements inaccessibles 57212 Exemple de mojibake (a) donneacutees UTF-8 afficheacutees comme Cp1252 (b)
donneacutees Cp1252 afficheacutees comme UTF-8 58213 Exemples de Mojibake dans Doodle 59214 Des donneacutees extraites de la base de donneacutees sont incorrectement eacutechappeacutees
dans IEEE PDF eXpress on constate la preacutesence de plusieurs apostrophes 60215 Sur cette page YouTube du code JavaScript est afficheacute au lieu drsquoecirctre interpreacuteteacute 60216 Eacuteleacutements mobiles la position et la bordure de la zone du texte changent lors
de la saisie du texte (NSERC) 60217 Confusion connexiondeacuteconnexion dans une page web le contenu pour un
utilisateur connecteacute (en haut de la page a droite) coexiste avec le formulairede connexion reacuteserveacute aux utilisateurs qui ne sont pas en principe connecteacutes 61
218 Incoheacuterences dans le reacutesultat de la recherche 61219 Code CSS avec des conditions sur la largeur de lrsquoappareil Il srsquoagit drsquoun
exemple de media queries 61220 Le bug de deacutepassement drsquoeacuteleacutements sur le site httpswwwthelilycom 62221 Le bug de deacutepassement du viewport sur le site httpswwwslaveryfootprint
org 62222 Le bug de couverture drsquoeacuteleacutements sur le site httpswwwanthedesignfr 62
31 Exemple de code pour Selenium WebDriver 6432 Commandes de base de Capybara [30] 6633 Exemple drsquoutilisation de Watij [71] 6734 Page de connexion (login) de Yahoo [71] 6735 Exemple simple drsquoun test JUnit Watij WebSpec [7] 6836 Exemple de Sahi script [18] 7037 Architecture de Sahi (figure tireacutee de [21]) 7038 Le fonctionnement geacuteneacuteral de lrsquooutil drsquoanalyse WebSee 7439 Outputs de WebSee eacuteleacutements HTML deacutefectueux 74310 Exemple de traitement drsquoimage avec FLB (figure tireacutee de [63]) 76311 Exemple drsquoutilisation de Sikuli (figure tireacutee de [39]) 78312 Exemple avec Auckland (figure tireacutee de [1]) 81313 Une simple speacutecification avec Auckland [1] 81314 Exemple drsquoune boicircte de dialogue pour enregistrer un fichier image 83315 Une simple speacutecification deacuteclarative dans le langage Adam du modegravele de
proprieacuteteacute pour le dialogue dans Figure314 [56] 84316 Une simple speacutecification avec Eve [56] 85317 Exemple drsquoune speacutecification Galen [9] 89318 Exemple drsquoun script Automotion [70] 90319 Exemple de faux positif avec PhantomCSS 94
41 Architecture et interactions de Cornipickle 100
vii
42 Une page simple seacuterialiseacutee en JSON 10143 Une capture drsquoeacutecran de Cornipickle en action 10244 Un document DOM simple (a) Structure HTML (b) Repreacutesentation en arbre
DOM Seuls les noms des eacuteleacutements sont afficheacutes les attributs et valeursrestants sont omis pour plus de clarteacute 111
45 Exemple de code jQuery veacuterifiant que deux eacuteleacutements ont le mecircme texte 116
51 Le bug de connexions multiples Un utilisateur deacutejagrave connecteacute se voit proposerlrsquooption de se reconnecter 121
52 Le bug des paniers multiples Des boutons pour creacuteer un panier et ajouter desarticles au panier coexistent sur la mecircme page 121
53 Le bug de la suppression drsquoun panier inexistant Des boutons pour retirer dupanier et creacuteer un panier coexistent sur la mecircme page 122
54 Flux drsquointeraction et de seacuterialisation (Crawljax-Cornipickle) 12655 Le code neacutecessaire pour attraper le bug des connexions multiples en utilisant
Crawljax sans Cornipickle 12956 Temps de calcul de lrsquointerpreacuteteur en fonction du nombre drsquoeacuteleacutements dans la
page 13557 Temps de calcul incluant la seacuterialisation de la page par la sonde JavaScript et
lrsquointerpreacutetation de la proprieacuteteacute en fonction du nombre drsquoeacuteleacutements dans la page136
61 Exemple drsquoune erreur de mise en page Web simple (a) lrsquoun des eacuteleacutementsde la liste est incorrectement aligneacute avec les autres (b) un teacutemoin (witness)produit par lrsquooutil Cornipickle 143
62 Illustration du concept de reacuteparation principale 14663 Quelques reacuteparations possibles pour un coloriage de graphe deacutefectueux 14964 Trois reacuteparations pour lrsquoexemple web 15365 Eacuteleacutements mal aligneacutes capture et suggestion de correction 15966 Eacuteleacutements qui se chevauchent capture et suggestion de correction 16067 Eacuteleacutement qui deacuteborde de son conteneur capture et suggestion de correction 161
LISTE DES TABLEAUX
11 Statistiques des parts drsquoutilisation des navigateurs dans le monde entre mars2015 et mars 2016 24
21 Sites et applications web pour lesquelles au moins un bug de mise en page aeacuteteacute trouveacute 38
31 Limites et diffeacuterences entre trois outils majeurs des approches existantes 95
41 La grammaire BNF pour Cornipickle (Partie I) 10442 La grammaire BNF pour Cornipickle (Partie II) 10643 Extensions de la grammaire BNF pour Cornipickle 10844 La seacutemantique formelle de Cornipickle aaprime isin A sont les noms drsquoattributs
DOM v isin V est une valeur drsquoattribut c isin C est un seacutelecteur CSS ξ et ξ prime
sont des noms de variables ν ν prime isin N sont les nœuds DOM et ϕ et ψ sont deseacutenonceacutes Cornipickle quelconques Lorsque t est vide Always srsquoeacutevalue agrave V raiet Eventually et Next srsquoevaluent agrave Faux 113
61 La deacutefinition reacutecursive de la fonction de calcul du verdict ω 140
INTRODUCTION
Le mot bug qui signifie en anglais laquo insecte raquo et qui a eacuteteacute franciseacute pour devenir laquo bogue raquo
a vu le jour dans les anneacutees quarante agrave la suite de la panne qursquoa connu le dernier cri des
ordinateurs de lrsquoeacutepoque le Mark II Comme son nom lrsquoindique la cause eacutetait un insecte qui
srsquoeacutetait introduit dans un relais eacutelectromeacutecanique de celui-ci La panne fut deacutecouverte par la
brillante matheacutematicienne et pionniegravere de la programmation Grace Hopper Il srsquoagit du tout
premier vrai bug informatique car on utilisait deacutejagrave le mot pour deacutesigner des problegravemes dans les
appareils eacutelectriques [17] Depuis le mot bug est devenu synonyme de tout dysfonctionnement
ou anomalie drsquoun programme
Le monde drsquoaujourdrsquohui est piloteacute par des ordinateurs dans tous les domaines eacutenergeacutetique
judiciaire sanitaire militaire etc De ce fait la manifestation drsquoun bug peut entraicircner des
deacutesordres des perturbations voire des catastrophes Les trois derniegraveres deacutecennies ont connu
une multitude de bugs de grande envergure
Parmi les plus importants mentionnons une interruption en 2003 de plusieurs jours dans
lrsquoalimentation en eacutelectriciteacute drsquoune cinquantaine de millions drsquoameacutericains Lors de cet incident
une douzaine de personnes ont mecircme trouveacute la mort empoisonneacutees au monoxyde de carbone
en tentant de remeacutedier agrave ce problegraveme par des geacuteneacuterateurs au diesel On a compteacute plus de
2
six milliards de dollars de deacutegacircts mateacuteriels A lrsquoorigine de cette panne une paralysie totale
provoqueacutee par deux logiciels chargeacutes du controcircle de la production qui essayaient de modifier
le mecircme fichier simultaneacutement [25 3 16 29]
Mentionnons eacutegalement des centaines drsquoaccidents de la route meurtriers survenus entre 2009
et 2011 et dont les victimes eacutetaient les proprieacutetaires de la Lexus ES350 du constructeur Toyota
Les conducteurs perdaient la maicirctrise du veacutehicule une fois qursquoil atteignait la vitesse de 150
kmh puisque ce seuil entraicircnait la deacutesactivation de la peacutedale de frein Durant deux anneacutees les
chauffeurs sont accuseacutes par Toyota de confondre les peacutedales de frein et drsquoacceacuteleacuteration alors
qursquoune expertise finit par reacuteveacuteler une deacutefaillance dans lrsquoordinateur de bord Les pertes sont
estimeacutees dans ce cas agrave 24 milliards de dollars [32 28]
Parmi les bugs informatiques les plus meurtriers on compte eacutegalement un dysfonctionnement
en 1987 de la machine de radiotheacuterapie Therac 25 chargeacutee drsquoadministrer aux patients la
quantiteacute de radioactiviteacute qui leur est prescrite Agrave certaines occasions la machine leur donne
vingt fois la dose mortelle occasionnant de ce fait la blessure drsquoun patient et la mort de
cinq autres Le logiciel destineacute agrave veiller au bon positionnement et agrave la preacutesence de la plaque
meacutetallique censeacutee recevoir le rayon pour le filtrer et le concentrer a malheureusement failli agrave
son rocircle [14]
Tous ces exemples sont des bugs aux conseacutequences catastrophiques Heureusement tous les
bugs ne sont pas aussi deacutevastateurs mais ils peuvent neacuteanmoins srsquoaveacuterer nuisibles et reacutepandus
Crsquoest le cas drsquoun type de bug auquel les informaticiens font face agrave chaque instant agrave savoir les
bugs de mise en page dans les interfaces des applications web qui se trouvent agrave lrsquoorigine des
problegravemes drsquoaffichage rencontreacutes quotidiennement dans les interfaces web Agrave cet eacutegard des
chiffres datant de 2015 lieacutes agrave Internet donnent matiegravere agrave reacuteflexion Le reacuteseau compte plus de
trois milliards drsquointernautes dont deux milliards sont inscrits sur les reacuteseaux sociaux Plus de
3
huit cent mille nouveaux sites Internet sont mis en ligne chaque jour [15] [4] Par conseacutequent
le nombre drsquoutilisateurs des applications web est consideacuterable et le nombre de personnes
toucheacutees par les bugs drsquointerfaces reacutesultant de ces applications est eacutenorme Lrsquoenjeu de ce fait
est tregraves grand sur tous les plans
La bonne conduite drsquoune application web exige une bonne apparence visuelle des pages web
sans aucune deacutefaillance drsquoaffichage facilitant ainsi lrsquoutilisation de lrsquoapplication et offrant un
meilleur service agrave lrsquoutilisateur Trois types de problegravemes drsquoaffichage sont releveacutes un premier
type qualifieacute de non gecircnant tel qursquoun deacutebordement drsquoun paragraphe de sa bordure ou un
problegraveme drsquoalignement ou mecircme une sorte de caractegravere speacutecial mal afficheacute (mojibake) Un
deuxiegraveme type qualifieacute de gecircnant telle qursquoune image deacuteplaceacutee qui couvre un paragraphe ou
une autre partie de la page
Par contre le troisiegraveme type est plus grave et peut conduire agrave un blocage de lrsquoapplication dont
les effets risquent drsquoecirctre seacuterieux compromettant la fonctionnaliteacute de lrsquointerface utilisateur Un
4
exemple de bug qui affecte la fonctionnaliteacute de lrsquoapplication Le mauvais fonctionnement des
boutons de nombreuses applications montrent des eacuteleacutements superposeacutes qui se comportent
comme des laquo pop-ups raquo dans la fenecirctre Cependant dans un certain nombre de cas les
boutons de ces fenecirctres sont inopeacuterants cliquer dessus plusieurs fois ne produit aucun effet
Ce problegraveme a eacuteteacute observeacute dans des sites aussi varieacutes qursquoAmerican Airlines Dropbox et
BitBucket Dans certains cas lrsquoutilisateur est effectivement bloqueacute dans la fenecirctre contextuelle
ou la page qui contient le bouton et ne peut pas continuer sans forcer un rechargement complet
du document
Cependant les travaux visant agrave reacutesoudre les problegravemes drsquointerface se font tregraves rares Halleacute et al
[51] sont parmi les premiers agrave srsquointeacuteresser agrave ce genre de problegraveme Mahajan et Halfond [58]
ont abordeacute la probleacutematique en proposant une approche baseacutee sur la vision par ordinateur et
le traitement drsquoimages Walsh et al [74 72] ont eacutegalement traiteacute ce genre de bugs dans les
applications dites responsives (responsive web design)
Deux cateacutegories drsquoutilisateurs sont confronteacutees agrave ces types de problegravemes lrsquoune repreacutesente
les speacutecialistes du domaine (les informaticiens) chez lesquels ces types de problegravemes peuvent
trouver leurs solutions apregraves un travail laborieux Lrsquoautre repreacutesente le grand public pour lequel
le deuxiegraveme et le troisiegraveme type de problegraveme constituent des contraintes pour lrsquoexploitation de
la page car la solution dans ce cas exige certaines connaissances (lrsquooutil le langage etc) qui
eacutechappent geacuteneacuteralement au grand public Ce dernier forme la majoriteacute des utilisateurs De ce
fait il est neacutecessaire de lui trouver une solution lui permettant drsquoutiliser les sites web dans
les meilleures conditions possibles Il doit avoir tout simplement sur son eacutecran une interface
correcte sans aucun bug pour qursquoil ne soit pas obliger agrave recourir agrave une technique de correction
qui le deacutepasse Drsquoautant plus que les applications web connaissent une eacutevolution rapide et
commencent agrave conqueacuterir plusieurs domaines (commerce eacutelectronique eacuteducation loisir etc)
et mecircme agrave ecirctre utiliseacutees dans des opeacuterations sensibles telles que les transactions moneacutetaires
5
via internet Ce qui fait drsquoeux des programmes tregraves complexes dynamiques et interactifs En
plus de la rareteacute des meacutethodes de deacutetection de ces bugs pire encore presque rien nrsquoa eacuteteacute
fait pour donner un feedback agrave lrsquoutilisateur Lorsqursquoun bug est trouveacute les solutions actuelles
ne font que retourner laquo vraifaux raquo Dans ce travail nous proposons une nouvelle approche
permettant dans une premiegravere eacutetape de deacutetecter automatiquement les diffeacuterents types de bugs
drsquointerfaces et de les corriger automatiquement dans une deuxiegraveme eacutetape Il srsquoagit drsquoune
approche geacuteneacuterique de localisation de deacutefauts baseacutee sur le concept de reacuteparation
Les objectifs et contributions de cette thegravese sont
1 Proposer un langage pour speacutecifier le contenu attendu drsquoune interface web
2 Deacutecrire un algorithme permettant de veacuterifier automatiquement qursquoune speacutecification est
respecteacutee
3 Deacutecrire une meacutethode permettant de fournir un verdict deacutetailleacute et utile lors drsquoune violation
Cette thegravese comporte six chapitres Le chapitre 1 est deacutedieacute agrave une vue globale sur les notions de
base relatives au web Les diffeacuterents types de bugs ainsi que des exemples reacuteels de chacun de
ces types sont preacutesenteacutes au chapitre 2 Le chapitre 3 est consacreacute aux travaux connexes sur la
deacutetection des bugs drsquointerfaces dans les applications web agrave quelques exemples drsquoapproches et
drsquooutils de deacutetection pour lesquels certains points faibles sont identifieacutes
Dans le chapitre 4 on retrouve lrsquoensemble des informations speacutecifiques agrave lrsquooutil Cornipickle
conccedilu et utiliseacute dans la deacutetection des bugs Ceci inclut la syntaxe du langage et son utili-
sation pour exprimer des proprieacuteteacutes ainsi que les deacutetails de son impleacutementation (objectifs
de conception architecture et sceacutenario typique) Le chapitre 5 est reacuteserveacute agrave lrsquoutilisation de
Cornipickle en combinaison avec un robot drsquoexploration dynamique (crawler) pour deacutetecter
efficacement les bugs comportementaux dans les RIA (Rich Internet Applications) Le dernier
6
chapitre quant agrave lui preacutesente deux meacutecanismes par lesquels un verdict vraifaux peut ecirctre
enrichi drsquoinformation suppleacutementaire pour le deacuteveloppeur Une conclusion geacuteneacuterale mettant
en eacutevidence lrsquointeacuterecirct du travail reacutealiseacute et lrsquoimportance des reacutesultats obtenus clocircture la thegravese
Il est agrave signaler que les contributions preacutesenteacutees dans cette thegravese ont fait lrsquoobjet de publications
dont je suis coauteur
Un premier article dont la contribution consiste en la formalisation de la seacutemantique de
lrsquointerpreacuteteur Cornipickle (section 33 de lrsquoarticle) et la preacutesentation du concept des teacutemoins
(section 43) Cette contribution correspond au chapitre 4 de la thegravese
1 Sylvain Halleacute Nicolas Bergeron Francis Gueacuterin Gabriel Le Breton Oussama Be-
roual Declarative layout constraints for testing web applications J Log Algebr Meth
Program Elsevier 85 (5) 737-758 (2016) [51]
Un deuxiegraveme article preacutesentant le meacutecanisme de transformations (feedback enrichi pour
lrsquoutilisateur) ce qui correspond au chapitre 6
1 Sylvain Halleacute Oussama Beroual Fault Localization in Web Applications via Model
Finding CRESTETAPS 2016 55-67 Elsevier Electronic Notes in Computer Science
(2016) [52]
Un troisiegraveme article sur lrsquoautomatisation des tests avec inteacutegration agrave un crawler ce qui
correspond au chapitre 5
1 Oussama Beroual Francis Gueacuterin Sylvain Halleacute Searching for Behavioural Bugs with
Stateful Test Oracles in Web Crawlers SBSTICSE 2017 ACM 7-13(2017) [38]
CHAPITRE 1
NOTIONS GEacuteNEacuteRALES SUR LE WEB
Deux termes sont drsquousage confondus par le public non averti le terme laquo web raquo et le terme
laquo Internet raquo Ce chapitre est destineacute agrave lever cette confusion puis agrave mettre lrsquoaccent sur la
majoriteacute des aspects drsquoune application web piegravece maicirctresse de notre recherche
11 LE FONCTIONNEMENT DU WEB
Une diffeacuterence de taille entre laquo Internet raquo et laquo web raquo est agrave noter Internet est un reacuteseau composeacute
drsquoune multitude de reacuteseaux connecteacutes entre eux Chacun de ces reacuteseaux est composeacute drsquoun
ensemble drsquoeacutequipements (fibres optiques etc) constituant un support physique drsquoinformation
Le web quant agrave lui est un systegraveme de fichiers veacutehiculeacutes par des serveurs Il repreacutesente le
contenu principal drsquoInternet agrave cocircteacute drsquoautres contenus tels que le courrier eacutelectronique la
messagerie etc Il nrsquoest donc qursquoune des applications drsquoInternet
Un site web est un contenu sur Internet Ce contenu nrsquoest rien drsquoautre qursquoun ensemble de
fichiers (HTML CSS JavaScript etc) heacutebergeacutes sur un serveur Selon leur meacutecanisme de
fonctionnement deux types de site sont distingueacutes les sites statiques dont le contenu est inva-
riable et les sites dynamiques dont le contenu est variable Les premiers ne sont modifiables
8
que par leurs proprieacutetaires alors que les seconds sont modifiables par des utilisateurs autres
que leurs proprieacutetaires La reacutealisation de chacun de ces sites fait appel agrave des technologies bien
deacutetermineacutees telles que HTML CSS et JavaScript
Les acteurs principaux dans le fonctionnement du web sont les clients repreacutesenteacutes par des
navigateurs tels que Firefox Internet Explorer Chrome et Safari et les serveurs repreacutesenteacutes
par les machines abritant les sites web ougrave les fichiers sont stockeacutes Chaque serveur est
identifieacute sur un reacuteseau par son adresse IP (Internet Protocol) et chaque page web est associeacutee
agrave une adresse URL (Uniform Resource Locator ou laquo localisateur uniforme de ressource raquo)
caracteacuteriseacutee par un contenu Une demande drsquoune page web agrave un serveur correspond donc agrave
une demande drsquoun contenu La communication entre les clients et les serveurs est assureacutee
par un protocole appeleacute laquo HTTP raquo (HyperText Transfer Protocol ou laquo protocole de transfert
hypertexte raquo) via lequel les requecirctes sont formuleacutees par les navigateurs aux serveurs [37]
HTTP est donc la langue de conversation entre le navigateur et le serveur La conversation
se fait selon le principe de laquo requecircte-reacuteponse raquo La formulation drsquoune requecircte HTTP par le
navigateur est suivie par une reacuteponse HTTP du serveur apregraves lrsquoavoir deacutecodeacutee et eacutetudieacutee En plus
de la ligne de requecircte deacutefinissant le document demandeacute la meacutethode appliqueacutee et le protocole
utiliseacute une requecircte est composeacutee de deux ensembles de lignes des lignes facultatives et des
lignes optionnelles Les premiegraveres sont les champs drsquoen-tecircte de la requecircte et sont chargeacutees
de fournir des informations suppleacutementaires sur la requecircte ou le client (type de navigateur
systegraveme drsquoexploitation etc) Les secondes forment le corps de la requecircte et sont chargeacutees lors
de lrsquoenvoi de donneacutees au serveur de permettre un envoi de donneacutees par une meacutethode speacutecifique
(lrsquoenvoi de donneacutees au serveur par un formulaire par une meacutethode POST par exemple)
Une requecircte de type GET nomme lrsquoURL agrave reacutecupeacuterer httpuqacca par exemple dans la
figure 11 Le navigateur srsquoidentifie dans lrsquoen-tecircte User-Agent et indique les types de reacuteponses
9
GET HTTP11Host wwwuqaccaConnection keep-aliveUser-Agent Mozilla50 (Windows NT 61 Win64 x64)
AppleWebKit53736 (KHTML like Gecko) Chrome6103163100Safari53736
Upgrade-Insecure-Requests 1Accept texthtmlapplicationxmlq=09Accept-Encoding gzip deflateAccept-Language fr-FRfrq=08en-USq=06enq=04Cookie PHPSESSID=tphmk53fee883355e4eq24dmb5
Upgrade-Insecure-Requests 1Connection keep-aliveHost wwwuqacca
Figure 11 ndash Exemple drsquoune requecircte HTTP
qursquoil accepte dans lrsquoen-tecircte Accept et Accept-Encoding Lrsquoen-tecircte Connection demande
au serveur de garder la connexion TCP ouverte pour drsquoautres requecirctes La requecircte contient
eacutegalement les cookies que le navigateur conserve pour ce domaine Les cookies sont des paires
cleacute-valeur qui suivent lrsquoeacutetat drsquoun site web entre diffeacuterentes demandes de pages Ainsi les
cookies stockent le nom de lrsquoutilisateur connecteacute un numeacutero secret attribueacute agrave lrsquoutilisateur par
le serveur certains paramegravetres de lrsquoutilisateur etc Les cookies sont stockeacutes dans un fichier
texte sur le client et envoyeacutes au serveur agrave chaque demande
La reacuteponse du serveur sur la requecircte de la figure 11 geacuteneacutereacutee et renvoyeacutee est montreacutee dans
figure 12
Lrsquoen-tecircte qui deacutefinit Content-Type en texthtml indique au navigateur de rendre le contenu
de la reacuteponse [13] au format HTML au lieu de le teacuteleacutecharger en tant que fichier Le navigateur
utilise lrsquoen-tecircte pour deacutecider comment interpreacuteter la reacuteponse mais tient eacutegalement compte
drsquoautres facteurs tels que lrsquoextension de lrsquoURL
10
HTTP10 200 OKDate Sat 11 Nov 2017 190323 GMTServer Apache2222 (Unix) mod_ssl2222 OpenSSL101e-fipsX-Powered-By PHP5217Access-Control-Allow-Origin httpswprodluqaccaExpires Thu 19 Nov 1981 085200 GMTCache-Control no-store no-cache must-revalidatePragma no-cacheContent-Type texthtmlX-Cache MISS from w3repuqaccaX-Cache-Lookup MISS from w3repuqacca80Via 10 w3repuqacca (squid3123)Connection close
Figure 12 ndash Exemple drsquoune reacuteponse HTTP
12 LE LANGAGE HTML
Nous allons nous limiter dans ce qui suit agrave la preacutesentation de lrsquoessentiel des eacuteleacutements de base
relatifs agrave ces trois langages agrave savoir les balises pour le HTML les seacutelecteurs pour le CSS et
quelques notions de base sur JavaScript
Le langage HTML laquo HyperText Markup Language raquo en anglais ou laquo langage de balisage
hypertexte raquo en franccedilais ou encore laquo langage de marquage hypertexte raquo dont la creacuteation revient
agrave 1991 est un langage de description de document pouvant ecirctre eacutecrit avec un simple eacutediteur
de texte sans une application speacutecifique et servant agrave produire (sur Internet) des pages Web
drsquoune grande varieacuteteacute de contenus de mise en forme ou drsquoanimations et agrave inseacuterer diffeacuterents
types drsquoeacuteleacutements(texte des liens des images etc) Il permet aussi de deacutesigner au navigateur
certaines speacutecificiteacutes telle que la consideacuteration drsquoun texte comme un paragraphe ou un titre
11
121 STRUCTURE DrsquoUN DOCUMENT
La structure drsquoun document HTML doit satisfaire un scheacutema preacutecis et comprendre un ensemble
de balises speacuteciales essentielles pour tout document HTML Les eacuteleacutements composants la
structure drsquoun document HTML sont les suivants
Doctype Un document HTML deacutebute toujours par le soulignement de la nature du document
crsquoest agrave dire le langage utiliseacute (HTML) en faisant appel agrave la balise lt DOCTYPE htmlgt
Lrsquoeacuteleacutement lthtmlgt Lrsquoeacuteleacutement html comprend deux balises lthtmlgt et lthtmlgt Il deacutefinit
lrsquounique racine du document HTML Tous les autres eacuteleacutements doivent y ecirctre placeacutes
Lrsquoeacuteleacutement ltheadgt Cet eacuteleacutement repreacutesente lrsquoen-tecircte du document et renferme exclusivement
des meacuteta-donneacutees (titre de la page type drsquoencodage utiliseacute etc) exploiteacutees par les navigateurs
pour ameacuteliorer lrsquoergonomie de la page
Lrsquoeacuteleacutement ltbodygt Lrsquoeacuteleacutement body repreacutesente le corps du document Il est toujours placeacute
apregraves lrsquoen-tecircte et contient tout le contenu laquo visible raquo de la page les textes images liens
videacuteos etc
Lrsquoeacuteleacutement lttitlegt La structure srsquoachegraveve par une des meacuteta-donneacutees utiliseacutees par le navigateur
qui constitue le seul eacuteleacutement HTML obligatoire le titre du document placeacute agrave lrsquointeacuterieur de
lrsquoeacuteleacutement head
Voici le document HTML formel le plus simple qursquoon puisse eacutecrire
12
ltDOCTYPE htmlgtlthtmlgt
ltheadgtlttitlegtTitre de la pagelttitlegt
ltheadgtltbodygt
lth1gtUn grand titrelth1gtltpgtUn paragraphltpgt
ltbodygtlthtmlgt
Figure 13 ndash Un exemple simple de page HTML contenant un grand titre et un paragraphe
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtUn document HTMLlttitlegtltheadgtltbodygtlt-- Du contenu pour lrsquoutilisateur ici --gtltbodygtlthtmlgt
Le code HTML dans la figure 13 par exemple indique que lrsquoon souhaite creacuteer un grand titre
(gracircce agrave lrsquoeacuteleacutement h1) et un paragraphe (gracircce agrave lrsquoeacuteleacutement p)
122 VERSIONS DU HTML
Le Web a connu ces deux derniegraveres deacutecennies une eacutevolution extraordinaire En effet lrsquoavanceacutee
technologique a donneacute lieu agrave une ameacutelioration des performances des composants physiques
et une augmentation de la vitesse de connexion entraicircnant par conseacutequent une eacutevolution
13
remarquable des sites Web A leur tour les langages tels que le HTML et le CSS ont eacutegalement
connu une eacutevolution consideacuterable (modifications enrichissements etc) drsquoougrave lrsquoapparition de
nouvelles versions de ces langages bien que lrsquoeacutevolution nrsquoa pas eacuteteacute lineacuteaire ni continue pour
lrsquoutilisateur final Les nouvelles versions sont doteacutees chacune de nouvelles fonctionnaliteacutes et
change parfois totalement la syntaxe du langage La premiegravere version de HTML lrsquoHTML1
a vu le jour en 1991 De nombreuses ameacuteliorations apporteacutees par la suite par le creacuteateur du
HTML jugeacutees inteacuteressantes et importantes lrsquoont conduit en 1994 agrave partager publiquement la
nouvelle version de son langage le HTML2 Drsquoautres versions se sont succeacutedeacutees HTML2
(1995) HTML32 (janvier 1997) HTML4 modifieacutee agrave plusieurs reprises (1997 1998 1999
2000) HTML5 (2014) HTML51 (2016) Parmi toutes ces versions la plus stable celle qui
offre de nouvelles fonctionnaliteacutes et ouvre de nouvelles possibiliteacutes inteacuteressantes est la plus
reacutecente agrave savoir HTML51
123 EacuteLEacuteMENTS DE BASE EN HTML
Le fonctionnement du HTML srsquoappuie sur la notion drsquoeacuteleacutements Ces derniers ont pour rocircle
de structurer du contenu pour donner du sens aux diffeacuterents objets de ce contenu Ils sont
constitueacutes de balises renfermant des attributs et du contenu entre elles
Les balises en HTML Le nombre de balises constituant le HTML est environ 140 Elles
servent agrave fournir au navigateur des indications sur le sens drsquoun eacuteleacutement son interpreacutetation ou
son affichage en plus drsquoautres indications telles que la gestion des formulaires en ligne lrsquoajout
des fichiers multimeacutedias etc On distingue plusieurs types de balises chargeacutee chacune drsquoune
fonction bien deacutetermineacutee bien que certaines nrsquoont de fonction que de seacuteparer des sections drsquoun
document Parmi ces fonctions deacutefinir des titres creacuteer des paragraphes creacuteer des liens vers des
ressources externes inteacutegrer une image dans un document HTML creacuteer des listes Les balises
14
suivantes sont donneacutees agrave titre drsquoexemple ltpgt lth1gt ltimggt ltligt ltagt Les eacuteleacutements
sont constitueacutes geacuteneacuteralement drsquoune paire de balises (ouvrante et fermante) et drsquoun contenu
entre les balises et exceptionnellement drsquoune balise unique dite dans ce cas laquo orpheline raquo
Une balise fermante doit avoir le mecircme nom que la balise ouvrante correspondante (notez la
preacutesence du slash (barre oblique))
Les balises laquo auto fermantes raquo (ou balises vides) Certaines balises sont deacutepourvues de texte
du fait qursquoelles sont ouvrantes et fermantes en mecircme temps les balises AUTO FERMANTES
sont soit des balises de type BLOC (exemple lthr gt) des balises EN LIGNE (exemple
ltimg gt)
Les attributs en HTML Les attributs se placent dans la balise ouvrante drsquoun eacuteleacutement et
possegravedent toujours une valeur (parfois implicite) Ils viennent apporter plus de deacutetails sur les
eacuteleacutements Par exemple lrsquoattribut href (hypertexte reacutefeacuterence) va offrir lrsquoadresse (la valeur) de
la page du lien agrave lrsquoeacuteleacutement ltagt (pour anchor) chargeacute de la creacuteation des liens vers drsquoautres sites
ou drsquoautres pages
Lrsquoeacuteleacutement ltimggt constitueacute drsquoune seule balise orpheline chargeacute drsquoinseacuterer une image dans
une page HTML a besoin de deux attributs src et alt Le premier src assure le nom et
lrsquoemplacement de lrsquoimage (la valeur) alors que lrsquoattribut alt se charge de lrsquoaffichage drsquoun texte
alternatif agrave une indisponibiliteacute de lrsquoimage
Notez bien que les balises et les attributs ne seront jamais afficheacutes par le navigateur il va srsquoen
servir drsquoindication pour justement savoir ce qursquoil doit afficher (un paragraphe un titre un lien
une image etc)
15
13 LES CASCADING STYLESHEETS (CSS)
Le CSS laquo Cascading StyleSheets raquo en anglais ou laquo feuilles de styles en cascade raquo en franccedilais est
un langage informatique apparu en 1996 voueacute agrave la mise en forme du contenu des documents
HTML et XML moyennant des styles pour deacutefinir la taille la couleur ou lrsquoalignement du texte
afin drsquoagreacutementer le reacutesultat visuel final de ce contenu Il est utiliseacute dans la conception de
sites web Le code ci-dessous par exemple indique que les titres h1 eacutecrits en HTML doivent
avoir une couleur verte et une taille de 20px tandis que les paragraphes doivent ecirctre noir et
souligneacutes
h1 color greenfont-size 20px
p color blacktext-decoration underline
Le CSS est donc un autre langage du web venant compleacuteter le HTML Il permet la mise en
page drsquoun contenu et le changement de son apparence en lui appliquant des styles (choisir
la couleur du texte seacutelectionner la police utiliseacutee deacutefinir la taille du texte les bordures le
fond) Lrsquoapparition du HTML a devanceacute lrsquoapparition du CSS de cinq anneacutees peacuteriode dans
laquelle la mise en page eacutetait effectueacutee par le HTML qui consacrait des balises agrave cette fin
telle que la balise ltfont color=aab1c3gt deacutefinissant la couleur du texte par exemple
Le langage CSS est venu reacutepondre agrave la complexiteacute qursquoont connu les pages HTML avec une
augmentation remarquable des balises entre autres conduisant agrave une mise agrave jour des pages
web de plus en plus complexe Agrave lrsquoinstar du HTML le CSS est passeacute par plusieurs versions
16
les plus importantes sont CSS1 CSS20 CSS21 et CSS3
Eacutecriture du code CSS Le code CSS peut ecirctre eacutecrit agrave trois endroits distincts
1 Dans un Lrsquoeacuteleacutement HTML ltstylegt
2 Dans la balise ouvrante des eacuteleacutements HTML(meacutethode la moins recommandeacutee)
3 Dans un fichier CSS seacutepareacute (meacutethode la plus recommandeacutee)
131 PROPRIEacuteTEacuteS ET SEacuteLECTEURS CSS
Les proprieacuteteacutes CSS permettent de choisir quel(s) aspect(s) (ou laquo styles raquo) drsquoun eacuteleacutement HTML
que lrsquoon souhaite modifier
Lrsquoapplication drsquoun style agrave un ou plusieurs eacuteleacutements HTML signifie leurs seacutelections au preacutealable
pour les soumettre agrave un style particulier Lrsquointervention drsquoun seacutelecteur est donc neacutecessaire Le
CSS est fondeacute sur un ensemble de regravegles les seacutelecteurs sont la premiegravere partie drsquoune regravegle CSS
Crsquoest une syntaxe chargeacutee drsquoidentifier les eacuteleacutements du document auxquels la regravegle est deacutedieacutee
(appliqueacutee) Depuis son arriveacutee (1996) le CSS a speacutecifieacute un certain nombre de seacutelecteurs tregraves
accepteacutes de nos jours par les diffeacuterents navigateurs les plus freacutequemment utiliseacutes sont
Les seacutelecteurs de type Ce seacutelecteur cible lrsquoeacuteleacutement du document agrave styler en se basant sur
le nom de lrsquoeacuteleacutement Il doit correspondre dans ce cas au nom de lrsquoeacuteleacutement Exemple pour
mettre en bleu le texte des titres de niveau 1 le seacutelecteur sera h1
h1 color blue
17
Les seacutelecteurs de classe Ce seacutelecteur permet de cibler les eacuteleacutements en fonction de la valeur
de leur attribut class Il permet donc de seacutelectionner tous les eacuteleacutements ayant une certaine classe
Preacuteceacuteder le nom de la classe par un point () suffit pour obtenir le seacutelecteur correspondant
agrave cette classe Exemple la classe ltimportantgt est attribueacutee agrave tous les eacuteleacutements jugeacutes
importants Il suffit de deacutefinir dans le fichier CSS une regravegle stipulant que le texte de tous les
eacuteleacutements posseacutedant la classe Important soit eacutecrit en rouge
ltp class=ImportantgtCoucoultpgt
Important
color red
Les seacutelecteurs drsquoidentifiant Ce seacutelecteur permet de cibler un eacuteleacutement drsquoun document en
fonction de la valeur de son attribut ltidgt Dans un document il ne doit y avoir qursquoun seul
identifiant donneacute agrave lrsquoeacuteleacutement Preacuteceacutedeacute le nom de lrsquoidentifiant par un diegravese () suffit pour
obtenir le seacutelecteur correspondant agrave cet identifiant Exemple Un identifiant Menu est utiliseacute
pour repeacuterer notre menu dans le document Il suffit de deacutefinir dans le fichier CSS une regravegle
indiquant que notre menu ne soit pas afficheacute
ltdiv id=Menugtltdivgt
Menu
display none
18
Le seacutelecteur universel laquo raquo Ce seacutelecteur permet de cibler tous les eacuteleacutements drsquoun document
drsquoougrave lrsquoappellation de seacutelecteur universel Il existe eacutegalement une variante pour ne cibler qursquoun
seul eacuteleacutement
Regroupements des seacutelecteurs Une autre maniegravere de proceacuteder consiste en la reacuteduction de
taille du fichier CSS en appliquant une mecircme regravegle agrave plusieurs seacutelecteurs Ces derniers sont
dans ce cas seacutepareacutes par une virgule () Exemple les eacuteleacutements posseacutedant la classe Important
et les titres lth2gt sont eacutecrits en rouge
Important h2
color red
14 JAVASCRIPT
JavaScript est un langage de programmation de scripts utiliseacute surtout dans les pages web
interactives ainsi que pour les serveurs Il a eacuteteacute creacutee par Brendan Eich en 1995 en lrsquoespace de
dix jours suite agrave une demande formuleacutee par la Netscape Communications Corporation Les
bases du langage et ses principales interfaces sont fournies par des objets ce qui fait de lui un
langage orienteacute objet agrave prototype Les objets en question ne sont pas des instances de classes
Ils sont eacutequipeacutes chacun de constructeurs permettant de creacuteer leurs proprieacuteteacutes et notamment le
prototypage qui sert agrave creacuteer des objets heacuteritiers personnaliseacutes JavaScript dont les fonctions
sont des objets de premiegravere classe supporte le paradigme objet impeacuteratif et fonctionnel
Depuis sa creacuteation JavaScript a connu drsquoinnombrables modifications Il a eacuteteacute standardiseacute
en 1997 par laquo Ecma International raquo donnant naissance agrave la premiegravere eacutedition du standard
19
laquo ECMA-262 raquo la deuxiegraveme eacutedition du standard laquo ECMA-262 raquo a vu le jour en 1998 suite
agrave des changements reacutedactionnels apporteacutes au standard laquo ECMA-262 raquo pour le conformer au
standard international laquo ISOCEI 16262 raquo Des ameacuteliorations(dans la manipulation des chaicircnes
de caractegraveres dans les instructions de controcircle etc) introduites dans la deuxiegraveme eacutedition ont
donneacute lieu en 1999 agrave la publication de la troisiegraveme eacutedition du standard ECMA-262 Depuis la
troisiegraveme eacutedition les eacuteditions se sont succeacutedeacutees pour arriver actuellement agrave la huitiegraveme eacutedition
Les diffeacuterentes eacuteditions apparues ont chacune participeacute avec un plus dans le deacuteveloppement
des performances du langage
La plupart des langages de programmation ont des fonctionnaliteacutes de base communes Lrsquouti-
lisation de JavaScript neacutecessite la connaissance de ces bases pour mieux comprendre son
fonctionnement
Variables Les variables sont des conteneurs servant agrave stocker temporairement des informa-
tions Une variable a le pouvoir de varier autrement dit de pouvoir stocker diffeacuterentes valeurs
dans le temps en laquo eacutecrasant raquo sa valeur preacuteceacutedente Une variable est deacuteclareacutee au commencement
avec le mot-cleacute let suivi du nom qursquoon souhaite utiliser pour la variable
Un certain nombre de regravegles sont agrave consideacuterer en JavaScript
1 les lignes de code doivent terminer par un point-virgule pour indiquer que crsquoest la
fin de la ligne Lrsquoomission de ces points-virgules peut conduire agrave des comportements
inattendus voire des erreurs
2 Nrsquoimporte quel nom peut ecirctre (quasiment) utiliseacute pour nommer une variable Il y a
cependant quelques restrictions sur ces noms
3 Eacuteviter la casse JavaScript y est sensible cela veut dire que maVariable sera consideacutereacute
comme un nom diffeacuterent de mavariable Lrsquoapparition des problegravemes sur les noms de
20
variables dans le code implique la veacuterification de la casse utiliseacutee
4 Avec les versions reacutecentes de JavaScript il est conseilleacute drsquoutiliser le mot-cleacute let Cepen-
dant des variables deacuteclareacutees avec le mot-cleacute var sont parfois rencontreacutees Ce dernier est
utiliseacute lorsque notre code doit supporter des navigateurs anciens (IE lt 11) let nrsquoeacutetant
pas supporteacute dans ce cas Une fois une variable est deacuteclareacutee on lui donne une valeur
maVariable = rsquooussrsquo
Pour utiliser la valeur plus loin dans le code il suffit de faire appel agrave la variable en utilisant
son nom maVariable Lorsque on creacutee une variable et qursquoon lui donne une valeur cela
peut se faire sur une seule ligne let maVariable = rsquooussrsquo Une fois qursquoon a donneacute une
valeur agrave une variable on peut la changer plus loin
let maVariable = rsquooussrsquomaVariable = rsquoSylvainrsquo
Les variables sont reacuteparties en diffeacuterents types de donneacutees et ont chacune une fonction Parmi
ces variables on a la chaicircne de caractegraveres le nombre le Booleacuteen le tableau lrsquoobjetetc Les
variables sont indispensables agrave la programmation Si les valeurs sont statiques rien ne pourrait
se faire Par exemple on ne pourrait pas personnaliser un message de bienvenue ou changer
lrsquoimage afficheacutee dans une galerie
Les opeacuterateurs Un opeacuterateur est un symbole matheacutematique qui produit un reacutesultat en
fonction de plusieurs valeurs (la plupart du temps on utilise deux valeurs et un opeacuterateur)
Parmi les opeacuterateurs les plus simples on a lrsquoopeacuterateur drsquoaffectation lrsquoopeacuterateur drsquoidentiteacute
lrsquoopeacuterateur de neacutegation lrsquoopeacuterateur drsquoineacutegaliteacute
Il y a plein drsquoautres opeacuterateurs mais on srsquoen tiendra agrave ceux-lagrave
Il est agrave noter que lrsquoutilisation de diffeacuterents types de donneacutees avec un mecircme opeacuterateur faussera
21
le reacutesultat obtenu le reacutesultat obtenu par70 + 12 nrsquoest pas le mecircme que celui obtenu par
70 + 12 le deuxiegraveme reacutesultat est le bon car les nombres entoureacutes de guillemets sont donc
consideacutereacutes comme des chaicircnes de caractegraveres
Les structures conditionnelles Les structures conditionnelles sont des eacuteleacutements du code qui
permettent de tester si une expression est vraie ou non et drsquoexeacutecuter des instructions diffeacuterentes
selon le reacutesultat La structure conditionnelle utiliseacutee la plus freacutequemment est if else
Par exemple
let parfumGlace = rsquosorbet de fraisersquoif (parfumGlace === rsquosorbet de fraisersquo)
alert(Jrsquoadore le sorbet de fraise ) else
alert(Jrsquoaurai preacutefeacutereacute un sorbet de fraise)
Le test agrave reacutealiseacute est contenue dans if ( ) Il consiste en une comparaison de la variable
parfumGlace avec la chaicircne de caractegraveres laquo sorbet de fraise raquo via lrsquoopeacuterateur drsquoidentiteacute pour
veacuterifier leur eacutegaliteacute Si cette comparaison renvoie true le premier bloc de code sera exeacutecuteacute
Sinon crsquoest le code du second bloc celui preacutesent apregraves else qui sera exeacutecuteacute
Les fonctions Les fonctions sont chargeacutees drsquoorganiser les fonctionnaliteacutes agrave reacuteutiliser Par
exemple au lieu drsquoexeacutecuter deux fois la mecircme action plutocirct que de recopier le code la
fonction est eacutecrite une fois puis utiliser aux deux endroits souhaiteacutes
let maVariable = documentquerySelector(rsquoh1rsquo)alert(rsquoSalut rsquo)
Ces fonctions (querySelector et alert) sont disponibles dans le navigateur Elles ressemblent
agrave un nom de variable suivi de parenthegraveses et utilisent des arguments dans leurs calculs Les
22
arguments sont placeacutes entre les parenthegraveses seacutepareacutes par des virgules srsquoil y en a plusieurs Par
exemple la fonction alert() fait apparaicirctre une fenecirctre de pop-up dans la fenecirctre du navigateur
Un argument est utiliseacute pour indiquer agrave la fonction le contenu qursquoon deacutesire eacutecrire dans cette
fenecirctre En plus des fonctions deacutejagrave existantes drsquoautres fonctions peuvent ecirctre deacutefinies par
nous-mecircmes Par exemple fonction toute simple qui considegravere deux arguments et renvoie le
reacutesultat de la multiplication
function multiplier(num1num2) let reacutesultat = num1 num2return reacutesultat
Avant une utilisation reacutepeacuteteacutee de cette fonction elle doit ecirctre deacuteclareacutee dans la console
multiplier(47)multiplier(2020)multiplier(053)
Lrsquoinstruction return indique au navigateur qursquoil faut renvoyer la variable reacutesultat en dehors de
la fonction afin qursquoelle puisse ecirctre reacuteutiliseacutee par ailleurs Cette instruction est neacutecessaire car
les variables deacutefinies agrave lrsquointeacuterieur des fonctions sont uniquement disponibles agrave lrsquointeacuterieur de
ces fonctions Crsquoest ce qursquoon appelle une porteacutee
Les eacuteveacutenements Un site web vraiment interactif est caracteacuteriseacute par des eacuteveacutenements Les
eacuteveacutenements sont des structures de code agrave lrsquoeacutecoute du navigateur permettant de deacuteclencher des
actions au moindre problegraveme Lrsquoexemple concret est lrsquoeacuteveacutenement de clic qui est deacuteclencheacute
une fois lrsquoutilisateur clique sur quelque chose dans le navigateur Lrsquoexemple ci-dessous peut
donner une ideacutee sur ce que ccedila donne en pratique il suffit de saisir ces quelques lignes dans la
console puis cliquez sur la page
23
documentquerySelector(rsquohtmlrsquo)onclick = function() alert(rsquoarrecirctez de cliquerrsquo)
Les meacutethodes pour laquo attacher raquo un eacuteveacutenement agrave un eacuteleacutement sont multiples Dans cet exemple
deux paramegravetres sont deacutefinis lrsquoeacuteleacutement HTML concerneacute et un gestionnaire onclick qui
est une proprieacuteteacute eacutegale agrave une fonction anonyme (elle nrsquoa pas de nom) qui contient le code agrave
exeacutecuter quand lrsquoutilisateur clique
On pourra noter que documentquerySelector(rsquohtmlrsquo)onclick = function()
est eacutequivalent agrave
let maHTML = documentquerySelector(rsquohtmlrsquo)maHTMLonclick = function()
La premiegravere syntaxe est simplement plus courte Drsquoautres fonctionnaliteacutes peuvent srsquoajouter
aux bases en JavaScript exposeacutees
15 LE FONCTIONNEMENT INTERNE DES NAVIGATEURS WEB
Pour la peacuteriode allant de mars 2015 agrave mars 2016 la part de marcheacute des navigateurs drsquoapregraves les
statistiques de StatCounter [19] est de pregraves de 96 entre Internet Explorer Firefox Chrome
et Opera Le tableau 11 montre en pourcentage la part de chaque navigateur
24
Navigateur Part drsquoutilisation en
Chrome 5232
Internet Explorer 162
Firefox 1558
Safari 978
Opera 181
Autres 431
Tableau 11 ndash Statistiques des parts drsquoutilisation des navigateurs dans le monde entre mars 2015et mars 2016
Une ressource web eacutetant seacutelectionneacutee en faisant appel au serveur est ensuite afficheacutee par le
navigateur Celle-ci peut ecirctre un document HTML (qui est le cas geacuteneacuteral) comme elle peut
ecirctre un autre type de fichier Une URL est mobiliseacutee par lrsquoutilisateur pour la reacutecupeacuteration
de la ressource Les speacutecifications HTML et CSS qui preacutecisent au navigateur la maniegravere
drsquointerpreacuteter et drsquoafficher les fichiers HTML sont maintenues par lrsquoorganisation W3C (World
Wide Web Consortium) [12]
La structure drsquoun navigateur comprend plusieurs composants tels qursquoune interface utilisateur
le moteur du navigateur un composant reacuteseau une interface drsquoarriegravere-plan (backend UI)
un interpreacuteteur JavaScript un analyseur XML (XML parser) un composant de stockage de
donneacutees et finalement le moteur de rendu qui est la piegravece la plus importante dans cet ensemble
[49] [48] La figure 14 montre le flux entre les composants du navigateur
Avant son affichage agrave lrsquoutilisateur une page web parcourt le chemin suivant
1 La requecircte est envoyeacutee vers le serveur en utilisant lrsquointerface utilisateur qui enferme
une barre drsquoadresse des boutons preacuteceacutedent et suivant un menu de marque-page
25
des boutons drsquoactualisation et drsquoarrecirct etc La requecircte est transporteacutee via le composant
reacuteseau qui assure les appels reacuteseau telles que les requecirctes HTTP Il est doteacute drsquoune
interface indeacutependante de la plateforme et en dessous des impleacutementations pour chaque
plateforme
2 La reacuteponse est renvoyeacutee par le serveur apregraves plusieurs traitements au niveau du serveur
drsquoapplication afin de geacuteneacuterer la page demandeacutee en HTML (les deacutetails sur ces deux
eacutetapes ont eacuteteacute exposeacutes dans la section 11)
3 Le composant reacuteseau passe les donneacutees brutes reacutecupeacutereacutees agrave un autre composant qui
a comme rocircle drsquoenregistrer toutes sortes de donneacutees sur le disque dur par exemple
des cookies Il srsquoagit drsquoune couche de persistance La nouvelle speacutecification HTML
(HTML5) deacutefinit le terme laquo base de donneacutees Web raquo qui est un systegraveme complet (bien
que leacuteger) de base de donneacutees dans le navigateur
4 Les octets bruts sont transporteacutes au moteur de rendu qui est responsable de lrsquoaffichage du
contenu demandeacute agrave lrsquoeacutecran en suivant plusieurs processus drsquoanalyse sur le code HTML
et CSS Les deacutetails de ces processus drsquoanalyse sont abordeacutes dans le reste du chapitre
5 Un interpreacuteteur JavaScript est appeleacute par le moteur de rendu pour lrsquoanalyse et lrsquoexeacutecution
du code JavaScript Pareillement pour lrsquoanalyseur XML (XML parser) qui est utiliseacute
pour lrsquoanalyse des documents XML dans lrsquoarbre du DOM (Document Object Model)
Crsquoest lrsquoun des sous systegravemes les plus reacuteutilisables dans lrsquoarchitecture En fait presque
toutes les impleacutementations des navigateurs exploitent un analyseur XML existant plutocirct
que de creacuteer leur propre analyseur agrave partir de zeacutero
6ndash7 Lrsquointerface drsquoarriegravere-plan (backend UI) est destineacute agrave dessiner des widgets de base
du genre listes deacuteroulantes et fenecirctres Une interface geacuteneacuterique non speacutecifique agrave la
plateforme est preacutesenteacutee par le navigateur qui utilise drsquoautre part en dessous lrsquointerface
utilisateur du systegraveme drsquoexploitation
26
Figure 14 ndash Le flux entre les composants du navigateur pour la reacutecupeacuteration et le traitementdrsquoune page web dans le navigateur
8ndash9 Ce dernier composant est relieacute au moteur de rendu qui envoie le rendu final agrave lrsquoutilisateur
dans la derniegravere eacutetape de la figure
Lrsquoaffichage drsquoune page web par le navigateur moyennant le code HTML CSS et JavaScript
nrsquoest pas aussi simple Pour ce faire le navigateur fait particuliegraverement appel agrave lrsquoun de ses
composants le moteur de rendu
Les opeacuterations qui se manifestent agrave lrsquointeacuterieur du navigateur et en particulier le fonctionnement
des moteurs de rendu des navigateurs les plus utiliseacutes ont eacuteteacute expliqueacutes par Garsiel et Irish
[11] Lrsquoaffichage drsquoune page web comporte de fait plusieurs phases La premiegravere consiste en
la construction des arborescences DOM (modegravele drsquoobjet de document) et CSSOM (modegravele
drsquoobjet CSS) Cette derniegravere phase est suivie par la transformation des balisages HTML et CSS
en DOM et CSSOM respectivement dont la combinaison forme une arborescence drsquoaffichage
(arbre de rendu) Cette arborescence agrave son tour est chargeacutee de la mise en page de chaque
eacuteleacutement visible et de lrsquointroduction des donneacutees exigeacutees pour lrsquoaffichage des pixels agrave lrsquoeacutecran
[5]
27
lthtmlgtltheadgt
ltmeta name=viewport content=width=device-widthinitial-scale=1gtltlink href=designcss rel=stylesheetgtlttitlegtExemplelttitlegt
ltheadgtltbodygt
ltpgtSalut ltspangtOussamaltspangt Beroual ltpgtltdivgtltimg src=ma-photojpggtltdivgt
ltbodygtlthtmlgt
Figure 15 ndash Un exemple simple de page web illustrant le rendu dans un navigateur
Construction du modegravele drsquoobjet DOM
Le processus de construction du modegravele drsquoobjet DOM est exposeacute ci-dessous agrave travers lrsquoexemple
drsquoune page web simple en HTML brut avec du texte et une seule image Le code HTML de la
page agrave eacutetudier est donneacute agrave la figure 15
Le traitement de cette page impose au moteur de rendu du navigateur drsquoexeacutecuter quatre
processus de transformation tel qursquoillustreacute dans la figure 16
1 Le premier processus est la conversion le moteur de rendu lit les octets bruts du
HTML sur le disque ou le reacuteseau et les traduit en caractegraveres individuels en fonction de
lrsquoencodage speacutecifique du fichier (UTF-8 par exemple)
2 Le deuxiegraveme processus est la creacuteation de jetons le moteur de rendu convertit les
chaicircnes de caractegraveres en diffeacuterents jetons speacutecifieacutes par la norme HTML5 du W3C
telles que lthtmlgt et ltbodygt Chaque jeton possegravede une signification particuliegravere et un
ensemble de regravegles
3 Le troisiegraveme processus est lrsquoanalyse lexicale les jetons eacutemis sont convertis en objets
qui deacutefinissent leurs proprieacuteteacutes et leurs regravegles
28
Figure 16 ndash Les processus de traitement de HTML et CSS au niveau du moteur de rendu dunavigateur
4 Le quatriegraveme processus est la construction du DOM puisque le balisage HTML
deacutefinit les relations entre les diffeacuterentes balises (certaines balises sont contenues dans
drsquoautres) les objets creacuteeacutes sont associeacutes selon une arborescence qui capture eacutegalement
la relation parent-enfant deacutefinie dans le balisage drsquoorigine (lrsquoobjet HTML est un parent
de lrsquoobjet body body est un parent de lrsquoobjet p etc)
Le reacutesultat final de lrsquoensemble de ce processus est le modegravele drsquoobjet de document (ou DOM)
de notre page simple que le navigateur utilise pour tout traitement suppleacutementaire de la page
Lrsquoarbre DOM reacutesultant est illustreacute dans la figure 17
Modegravele drsquoobjet CSS (CSSOM)
Lrsquoinformation sur lrsquoapparence drsquoun eacuteleacutement lors de son affichage est offerte par une autre
construction le CSSOM Durant la construction du DOM de notre page il srsquoest aveacutereacute que
le navigateur a deacuteceleacute une balise de lien link dans la section head du document signalant
une feuille de style CSS externe stylecss Du fait qursquoil a besoin de cette ressource pour
29
Figure 17 ndash Un arbre du modegravele drsquoobjet DOM
body font-size 24px p font-weight bold span color blue p span display none img float right
Figure 18 ndash Un exemple de fichier CSS simple
lrsquoaffichage de la page le navigateur anticipe lrsquoenvoi immeacutediat drsquoune demande pour cette
ressource et reacutepond avec le contenu du fichier illustreacute agrave la figure 18 Ces styles auraient pu
ecirctre deacuteclareacutes directement dans le balisage HTML (inteacutegreacute) cependant il est recommandeacute
de seacuteparer les codes CSS et HTML puisque les graphistes travaillent sur le code CSS les
deacuteveloppeurs sur le code HTML etc
Les regravegles CSS reccedilues sont converties en un contenu que le navigateur peut comprendre et
traiter de mecircme que pour le code HTML Le processus HTML est reacutepeacuteteacute mais dans ce cas
pour le code CSS (voir figure 16) Les octets CSS sont convertis en caractegraveres puis en jetons
et en nœuds pour finalement se relier au sein drsquoune arborescence appeleacutee CSS Object Model
(CSSOM) ou laquo modegravele drsquoobjet CSS raquo
Le calcul de lrsquoensemble final de styles drsquoun objet de la page tel qursquoeffectueacute par le navigateur
30
Figure 19 ndash Arbre du modegravele drsquoobjet CSSOM
comprend deux eacutetapes Dans une premiegravere eacutetape la regravegle la plus geacuteneacuterale pour ce nœud
est appliqueacutee (par exemple srsquoil srsquoagit drsquoun eacuteleacutement enfant du corps tous les styles du corps
srsquoappliquent) Dans une deuxiegraveme eacutetape des regravegles plus speacutecifiques crsquoest-agrave-dire en descendant
la cascade sont appliqueacutees afin drsquoaffiner de maniegravere reacutecursive les styles calculeacutes
La concreacutetisation de cette deacutemarche est faite agrave partir de lrsquoobservation de lrsquoarborescence
CSSOM dans la figure 19 On peut y lire que tout texte est eacutecrit en bleu et que sa taille de
police est de 24 pixels Il est placeacute dans la balise span contenue dans lrsquoeacuteleacutement body Ce
dernier est chargeacute de transmettre la taille de police agrave lrsquoeacuteleacutement span Toutefois si une balise
span est un enfant drsquoune balise paragraphe (p) le contenu de cette balise nrsquoest pas afficheacute
Il faut se rappeler que lrsquoarborescence CSSOM ci-dessus nrsquoest pas complegravete Elle ne montre
que les styles qui remplacent ceux de la feuille de style Dans lrsquoabsence de styles proposeacutes
tout navigateur fournit un ensemble de styles par deacutefaut eacutegalement appeleacutes styles user-agent
Construction de lrsquoarbre de rendu la mise en page et le dessin
Les donneacutees HTML et CSS ont servi jusqursquoici agrave la creacuteation des arborescences des modegraveles
DOM et CSSOM qui sont des objets indeacutependants chargeacutes chacun de capturer un aspect
du document lrsquoun deacutecrit le contenu et lrsquoautre les regravegles de style appliqueacutees au document
31
Figure 110 ndash Arbre de rendu
Les arborescences des deux modegraveles DOM et CSSOM sont combineacutees pour former une
arborescence drsquoaffichage responsable de lrsquoaffichage de la page et ne contenant que des nœuds
neacutecessaires agrave lrsquoaffichage de la page (voir figure 110)
Une arborescence drsquoaffichage comporte plusieurs types de nœuds des nœuds Visibles des
nœuds invisibles tels que les balises de script les balises Meta etc et des nœuds masqueacutes
par le code CSS Seul le premier type est consideacutereacute dans lrsquoarborescence drsquoaffichage Les
deux autres sont omis Le proceacutedeacute drsquoomission est effectueacute en mobilisant deux proprieacuteteacutes la
proprieacuteteacute visibility hidden rendant lrsquoeacuteleacutement invisible tout en occupant de lrsquoespace dans la
mise en page et la proprieacuteteacute display none supprimant totalement lrsquoeacuteleacutement de lrsquoarborescence
drsquoaffichage La figure 111 donne une vue globale des eacutetapes et processus de la construction
des arbres abordeacutees ci-dessous
Tous les nœuds visibles sont soumis aux regravegles CSSOM et eacutemis avec leurs contenus et leurs
styles calculeacutes Neacuteanmoins leurs positions et leurs geacuteomeacutetries (tailles) restent indeacutefinies La
deacutetermination ou le calcul de ces deux paramegravetres constitue la phase de mise en page appeleacutee
parfois ajustement de la mise en page Cette derniegravere est traduite par lrsquoexemple simple donneacute agrave
la figure 112 Le corps de la page ci-dessus contient deux eacuteleacutements div imbriqueacutes le premier
eacuteleacutement div (parent) deacutefinit la taille drsquoaffichage du nœud agrave 50 de la largeur de la fenecirctre et
le second eacuteleacutement div contenu par le parent deacutefinit sa largeur agrave 50 de celui du parent soit
32
Figure 111 ndash Les eacutetapes et processus de la construction des arbres DOM CSSOM et de lrsquoarbrede rendu
33
lthtmlgtltheadgt
ltmeta name=viewport content=width=device-widthinitial-scale=1gtlttitlegtExemple de mise en pagelttitlegt
ltheadgtltbodygt
ltdiv style=width 50gtltdiv style=width 50gtHello worldltdivgt
ltdivgtltbodygt
lthtmlgt
Figure 112 ndash Un second exemple simple illustrant le processus de mise en page par le navigateur
25 de la largeur de la fenecirctre
Maintenant que toutes les informations relatives aux nœuds sont reacuteunies ceux-ci sont peints
convertis en pixels reacuteels et afficheacutes agrave lrsquoeacutecran agrave partir de lrsquoarborescence drsquoaffichage finale La
construction est acheveacutee et la page est enfin visible dans la fenecirctre La figure 113 reacutesume
toutes les eacutetapes preacuteceacutedemment deacutecrites dans cette section
34
Figure 113 ndash Vue globale du flux de reacutecupeacuteration de traitement et drsquoaffichage drsquoune page web
CHAPITRE 2
LES BUGS DrsquoINTERFACE DANS LES APPLICATIONS WEB
Les utilisateurs du web sont souvent confronteacutes lors drsquoune application web sur internet agrave
des problegravemes tregraves ennuyeux appeleacutes laquo bugs drsquointerfaces raquo Dans ce chapitre nous exposons
les diffeacuterents types drsquoapplication web et les bugs qui les affectent en montrant que les bugs
drsquointerface sont largement preacutesents dans un grand nombre de sites et applications web du
monde reacuteel et comment des bugs de ce genre ne sont pas limiteacutes agrave des problegravemes de preacutesentation
simples statiques et qursquoils reacutevegravelent dans de nombreux cas des deacutefauts dans le comportement
de lrsquoapplication
21 TYPES DrsquoAPPLICATIONS WEB
Le web est maintenant peupleacute par un nombre consideacuterable drsquoapplications par conseacutequent le
nombre de personnes affecteacutees par les bugs qursquoelles peuvent contenir est eacutenorme
211 APPLICATIONS STATIQUES
Les sites web traditionnels qursquoon appelle eacutegalement applications laquo Web 10 raquo sont statiques
le contenu drsquoune page ne change pas apregraves le chargement et chaque page de lrsquoapplication peut
36
ecirctre chargeacutee indeacutependamment de toute interaction preacutealable avec le site Le test automatique
drsquoune telle application peut ecirctre effectueacute agrave lrsquoaide drsquoun robot drsquoindexation en chargeant une page
de deacutemarrage puis en explorant automatiquement les diffeacuterentes interactions possibles sur la
page pour obtenir de nouvelles pages agrave visiter Comme chaque page de ces applications est
indeacutependante les bugs ne peuvent se produire que sur une seule page drsquoougrave vient la possibiliteacute
drsquoeacutecrire des oracles de test simples qui analyseraient le contenu de ces pages prises isoleacutement
Le Responsive Web Design est un moyen de concevoir un site web de sorte que son contenu
srsquoadapte automatiquement agrave la reacutesolution drsquoeacutecran du terminal utiliseacute pour le visualiser Une
application RWD est donc un site web adaptatif La notion de web adaptatif repense la
conception ergonomique des sites web puisqursquoil ne srsquoagit plus de concevoir autant de sites que
de terminaux mais de concevoir une seule interface auto-adaptative Ainsi les informations et
les structures techniques ne sont pas dupliqueacutees ce qui geacutenegravere des eacuteconomies drsquoeacutechelle dans
la conception et la maintenance des sites web beacuteneacuteficiant de ce mode de conception
Un site web conccedilu avec un design responsive est donc optimiseacute pour tous les appareils
disponibles sur le marcheacute ordinateurs tablettes smartphones Cette faccedilon de concevoir des
applications web est recommandeacutee en raison de quelques avantages majeurs le deacuteveloppement
et la maintenance seront plus rapides et plus simples (un seul fichier geacuterant tous les affichages)
Un reacutefeacuterencement naturel optimal est utiliseacute (pas de sous-domaines ou de redirections vers des
annuaires mobiles) puisqursquoil nrsquoy a qursquoun seul site regroupant toutes les versions et uniquement
une adresse Web (URL) Plus de deacutetails sur le concept de RWD sont preacutesenteacutes dans la section
223
37
212 APPLICATIONS WEB 20
Les applications web reacutecentes eacutegalement appeleacutees RIA (Rich Internet Applications) utilisent
des scripts cocircteacute client des eacutetats cocircteacute serveur et drsquoautres fonctionnaliteacutes pour offrir une expeacute-
rience utilisateur ameacutelioreacutee Les modifications apporteacutees agrave lrsquoeacutetat de la page peuvent venir agrave la
suite de requecirctes HTTP asynchrones chargeant un nouveau contenu Par conseacutequent ces appli-
cations sont maintenant stateful la mecircme action ou la mecircme requecircte HTTP peut renvoyer des
reacutesultats diffeacuterents en fonction des interactions passeacutees de lrsquoutilisateur Ces applications avec
eacutetat viennent avec de nouveaux types de bugs appeleacutes bugs comportementaux Contrairement
agrave un bug statique qui srsquoeacutevalue en analysant le contenu drsquoune seule page indeacutependamment des
autres un bug comportemental relie les donneacutees et lrsquoordre de consultation de plusieurs pages
de lrsquoapplication
22 TYPES DE BUGS DrsquoINTERFACE
Un bug drsquointerface est un deacutefaut dans un systegraveme web qui a des effets visibles sur le contenu
des pages servi agrave lrsquoutilisateur Nous avons effectueacute une eacutetude sur de plus de 35 applications
web [51] en tous genres Un releveacute des bugs ayant un impact sur la preacutesentation ou le contenu
de lrsquointerface utilisateur a eacuteteacute fait Le tableau 21 donne la liste des sites web et des applications
pour lesquelles au moins un bug de mise en page a eacuteteacute trouveacute Dans ce qui suit nous preacutesentons
briegravevement les bugs deacutecouverts dans cette eacutetude Nous soulignons qursquoaucun des bugs deacutecrits
ici repreacutesente un problegraveme de compatibiliteacute entre les navigateurs Les bugs sont preacutesents
peu importe le navigateur utiliseacute pour afficher la page et ils ne sont pas causeacutes par une
interpreacutetation divergente des normes par deux navigateurs diffeacuterents
38
mdash Academiaedumdash Acermdash Adagio Hotelsmdash Air Canadamdash Air Francemdash AllMusicmdash American Airlinesmdash Boingomdash Canadian
Mathematical Societymdash Customizeorgmdash Digital Ocean
mdash Dropboxmdash EasyChairmdash Elseviermdash Evous Francemdash Facebookmdash IEEEmdash Just for Laughsmdash LinkedInmdash Liveshoutmdash Microsoft TechNetmdash Monoprixmdash Moodle
mdash Naymzmdash NSERCmdash OngerNeigemdash ProQuestmdash Rail Europemdash ResearchGatemdash St-Hubertmdash SpringerOpenmdash TD Canada Trustmdash Time Magazinemdash Uniform Servermdash YouTube
Tableau 21 ndash Sites et applications web pour lesquelles au moins un bug de mise en page a eacuteteacutetrouveacute
221 BUGS STATIQUES
Un premier type de bugs appeleacutes bugs statiques collecteacutes par une eacutetude empirique dans des
sites web et applications reacuteelles On y retrouve des problegravemes tels que le chevauchement des
eacuteleacutements les eacuteleacutements qui srsquoeacutetendent en dehors de leur conteneur ou le bug drsquoeacuteleacutements mal
empileacutes Ce genre de bugs peut ecirctre diviseacute en deux cateacutegories des bugs lieacutes agrave la mise en page
et drsquoautres non lieacutes agrave la mise en page
Bugs de mise en page
Une premiegravere cateacutegorie de bug correspond agrave des perturbations dans la mise en page ou la
preacutesentation de la page elle-mecircme crsquoest-agrave-dire tout reacutesultat inattendu du concepteur de cette
page en termes de contenu ou de proprieacuteteacutes (position taille nombre drsquoeacuteleacutements)
Eacuteleacutements mal aligneacutes Un problegraveme de mise en page banal mais freacutequent est le deacutesaligne-
ment ou le deacutecalage drsquoeacuteleacutements qui doivent ecirctre aligneacutes La figure 21a montre un exemple de
39
(a) LiveShout
(b) LinkedIn
Figure 21 ndash Exemple drsquoeacuteleacutements mal aligneacutes le cadre blanc est horizontalement mal aligneacute(LiveShout) le menu Interests est deacutecaleacute drsquoun pixel par apport aux autres menus (LinkedIn)
ce bug courant mais parfois le deacutesalignement est subtil un eacuteleacutement peut ecirctre deacutecaleacute par un
seul pixel (figure 21b)
Eacuteleacutements qui se chevauchent Le problegraveme de chevauchement des eacuteleacutements qui devraient
ecirctre disjoints dans la preacutesentation drsquoune page est aussi lrsquoun des bugs les plus reacutepandus dans
cette eacutetude les problegravemes de cette nature ont eacuteteacute trouveacutes dans des sites aussi varieacutes que le
Time Magazine Air Canada Moodle et Rail Europe La figure 22 montre un exemple de ce
problegraveme
Dans certains cas le chevauchement se produit par une interruption de la mise en page causeacutee
par le redimensionnement du document principal en dessous des dimensions minimales
comme dans lrsquoexemple de la figure 22a Les conteneurs qui doivent ecirctre cocircte agrave cocircte sont
afficheacutes les uns sur les autres par le moteur de rendu du navigateur Cependant nous avons
eacutegalement constateacute que dans de nombreux cas ce chevauchement est causeacute par le fait que les
40
eacuteleacutements sont absolument positionneacutes dans une page par rapport agrave leurs dimensions lorsqursquoils
contiennent du texte en anglais et lors de lrsquoaffichage du site web dans une autre langue (comme
le franccedilais) il peut arriver que le texte correspondant soit plus long que la version anglaise ce
qui cause le chevauchement de deux eacuteleacutements qui devraient ecirctre disjoints Cela a eacuteteacute observeacute
par exemple sur la figure 22b pour le site web RailEurope
Eacuteleacutements qui srsquoeacutetendent agrave lrsquoexteacuterieur de leurs conteneurs Un autre problegraveme reacutepandu
est la preacutesence drsquoeacuteleacutements qui deacutepassent les limites de leurs conteneurs parent ce qui pro-
voque le chevauchement indeacutesirable avec des eacuteleacutements environnants Ce bug est lrsquoinverse du
preacuteceacutedent plutocirct que drsquoeacutetendre leur conteneur en dehors de ses dimensions nominales cette
fois les eacuteleacutements qui srsquoeacutelargissent agrave lrsquoexteacuterieur de leur conteneur sont simplement coupeacutes de
lrsquoaffichage
La figure 23 montre un exemple de ce dernier type dans la plateforme drsquoenseignement
en ligne Moodle (la figure 23a) des eacuteleacutements de la table sont coupeacutes de leur cocircteacute droit
Lors de lrsquoanalyse du code source de la page il se trouve que quatre autres colonnes doivent
effectivement ecirctre visibles et sont tout simplement inaccessibles puisque ils ont eacuteteacute coupeacute
Cela rend la page plus ou moins inutilisable
Un cas particulier survient lorsque le conteneur soit la fenecirctre du navigateur entiegravere et la fenecirctre
est redimensionneacutee en dessous drsquoun certain seuil Cela peut ecirctre montreacute dans la Figure 23b
le contenu du menu en haut disparaicirct lorsque la fenecirctre est redimensionneacutee Le navigateur
fournit une barre de deacutefilement horizontale mais cela ne fait deacutefiler que la partie infeacuterieure de
la page et pas le menu du haut En conseacutequence certains boutons du menu principal du site ne
peuvent plus ecirctre cliqueacutes
Nous placcedilons aussi dans cette cateacutegorie un bug rencontreacute en utilisant la fenecirctre de messagerie
41
(a) Air Canada
(b) Rail Europe
Figure 22 ndash Exemple drsquoeacuteleacutements qui se chevauchent
42
(a) Moodle
(b) LinkedIn
Figure 23 ndash Le contenu de la page est dissimuleacute de lrsquointerface en raison de son prolongementau-delagrave des dimensions du conteneur parent
43
Figure 24 ndash Le bug Facebook La zone de texte permettant au utilisateur de taper un messageinstantaneacute (agrave gauche) disparaicirct soudainement (agrave droite)
instantaneacutee de Facebook Lorsque la fenecirctre de parent est redimensionneacutee au-dessous drsquoune
largeur speacutecifique la zone de texte permettant agrave un utilisateur drsquoentrer un nouveau message
disparaicirct soudainement de lrsquointerface comme le montre la figure 24 Tous les autres eacuteleacutements
de la fenecirctre restent identiques mais il devient impossible de taper un message
Ton sur ton Ce bug est causeacute par un problegraveme de mise en page ougrave le texte drsquoun eacuteleacutement est
de la mecircme couleur que le fond de la page agrave cet endroit ce qui rend le texte invisible dans
lrsquoaffichage Bien que ce type de comportement peut ecirctre fait expregraves afin de dissimuler un
eacuteleacutement nous croyons qursquoil est tregraves peu probable que cela soit lrsquointention du deacuteveloppeur
puisqursquoil existe des moyens beaucoup plus eacuteleacutegants drsquoatteindre le mecircme reacutesultat en utilisant
les proprieacuteteacutes CSS (en deacutefinissant la proprieacuteteacute drsquoaffichage agrave none ou la proprieacuteteacute opacity agrave
0)
La figure 25 montre un exemple drsquoun tel problegraveme de mise en page sur Academiaedu (figure
25b) Dans la figure 25a le redimensionnement de la fenecirctre du navigateur en dessous drsquoune
largeur speacutecifique a pour effet impreacutevu de pousser les eacuteleacutements du menu supeacuterieur en dehors
de leur conteneur preacutevu (celui qui a un fond bleu) Par conseacutequent ces eacuteleacutements qui ont du
44
(a) ProQuest
(b) Academia
Figure 25 ndash Le bug laquo ton sur ton raquo Les eacuteleacutements de menu sont pousseacutes en dehors de leursconteneur et disparaissent (a) le texte du lien est de la mecircme couleur que le fond reacuteveacuteleacute en leseacutelectionnant avec la souris (b)
texte blanc se placent dans une zone blanche et deviennent invisibles (agrave lrsquoexception drsquoun seul
eacuteleacutement du menu qui a un fond bleu pour une raison inconnue)
Eacuteleacutements mal empileacutes Ce problegraveme se produit quand un eacuteleacutement qui devrait ecirctre rendu
au-dessus drsquoun autre est placeacute en dessous de ce dernier comme le montre la figure 26 Dans
cet exemple le bouton orange en haut de lrsquoimage est censeacute apporter un menu (liste deacuteroulante)
Toutefois le contenu de ce menu apparaissent sous le reste du contenu de la page plutocirct que
sur eux ce qui rend certains de ses eacuteleacutements inutilisables
Lrsquoordre du processus du dessin est deacutefini dans le standard de CSS crsquoest en fait lrsquoordre dans
lequel les eacuteleacutements sont empileacutes dans la pile des contextes Cet ordre affecte le dessin puisque
les piles sont dessineacutees de lrsquoarriegravere vers lrsquoavant Lrsquoordre drsquoempilement drsquoun bloc de rendu est
1 Couleur drsquoarriegravere-plan
2 Image drsquoarriegravere-plan
3 Bordures
45
Figure 26 ndash Un eacuteleacutement est placeacute incorrectement sur un autre
4 Enfants
5 Contour
Ainsi une violation de cet ordre pour une raison inconnue peut causer ce genre de problegraveme
La plupart des problegravemes de cette nature peuvent ecirctre corrigeacutees en attribuant correctement la
proprieacuteteacute z-index de lrsquoeacuteleacutement deacutefectueux
Disposition briseacutee Une rupture majeure dans la structure attendue drsquoune page se produit
quand un certain nombre de ressources importantes telles que les fichiers CSS le code
JavaScript ou les images ne parvient pas agrave ecirctre reacutecupeacutereacute par le navigateur En conseacutequence
de nombreux eacuteleacutements de la page nrsquoont pas leurs deacuteclarations de style et sont positionneacutes et
dimensionneacutes en fonction du style par deacutefaut fourni par le moteur de rendu
La figure 27 montre un cas assez grave drsquoun tel problegraveme ougrave essentiellement toutes les
46
Figure 27 ndash Un exemple drsquointerface briseacutee en raison de lrsquoeacutechec du chargement de certainesressources
deacuteclarations CSS sont manquantes Ceci est causeacute par le fait que le fichier aparthotelcss
nrsquoa pas reacuteussi agrave ecirctre chargeacute pour une raison inconnue Le mecircme problegraveme a eacuteteacute observeacute
momentaneacutement sur le portail web Digital Ocean 28
Sur le site web de Digital Ocean la page de connexion (login) est briseacutee et toutes les autres
pages aussi comme le montre la figure 28a Cela est ducirc au fait que le navigateur a abandonneacute
le chargement de nombreuses ressources dans la page (y compris toutes les images) Il est agrave
noter que malgreacute ces problegravemes le site Web reste fonctionnel La figure 28b repreacutesente une
capture drsquoeacutecran de ce agrave quoi la page devrait ressembler
HTML malformeacute Dans la figure 29 lrsquoHTML malformeacute rend impossible de voir le fond
drsquoeacutecran
47
(a) Digital Ocean sans CSS (b) Digital Ocean avec CSS
Figure 28 ndash Exemple drsquointerface briseacute dans le site Digital Ocean
Figure 29 ndash Exemple drsquoHTML mal formeacute
48
Eacuteleacutements inaccessibles Dans la figure 210a la page affiche correctement une mise en page
laquoeacutecran largeraquo lorsque la fenecirctre du client est assez large Par contre si la largeur de la fenecirctre
est moyenne comme le montre la figure 210b on observe que le bouton de connexion (sign in)
en haut agrave droite srsquoest deacuteplaceacute agrave lrsquoexteacuterieur de la bande supeacuterieure
Incoheacuterence dans les valeurs possibles drsquoun champ de formulaire Dans une page du site
CallingCards le champ du code postal dans le formulaire est preacute-rempli avec 6 caractegraveres de
donneacutees anteacuterieures mais en essayant de modifier le code postal il nrsquoest pas possible de taper
plus de 5 caractegraveres dans ce champ (figure 211)
Figure 211 ndash Incoheacuterence dans le champ de formulaire du site CallingCards
Bugs non lieacutes agrave la mise en page
Plusieurs autres bugs peuvent ecirctre deacutetecteacutes en analysant le contenu et la preacutesentation drsquoune page
Nous verrons dans la suite que certains drsquoentre eux se rapportent mecircme aux comportements
attendu ou aux fonctionnaliteacutes de lrsquoapplication mais peuvent quand mecircme ecirctre deacutetecteacutes par
des regravegles exprimeacutees sur un seul instantaneacute statique de la fenecirctre de lrsquoapplication
49
Mojibake et problegravemes drsquoencodage Plusieurs sites et applications gegraverent mal les donneacutees
de chaicircne en dehors de lrsquoASCII 7-bits Divers encodages de caractegraveres tels que Cp1252 ou
UTF-8 peuvent ecirctre utiliseacutes pour repreacutesenter les caractegraveres laquo accentueacutes raquo ou laquo eacutetrangers raquo
Cependant le mecircme caractegravere peut ecirctre repreacutesenteacute par une valeur binaire diffeacuterente selon le
scheacutema de codage utiliseacute pire certains codages comme UTF-8 peuvent utiliser plusieurs
octets pour repreacutesenter un seul caractegravere
Les problegravemes surgissent quand un systegraveme nrsquointerpregravete pas correctement le contenu drsquoune
chaicircne de caractegraveres croyant qursquoun document est dans un certain encodage alors qursquoil en
utilise reacuteellement un autre Il en reacutesulte souvent un caractegravere incorrect superflu ou pas afficheacute
du tout ce pheacutenomegravene est appeleacute mojibake 1 Par exemple lrsquoencodage UTF-8 du caractegravere
laquo eacute raquo lorsqursquoil est interpreacuteteacute comme une chaicircne Cp1252 produit laquo Atilde ccopy raquo comme le montre la
figure 212a Agrave lrsquoinverse le rendu Cp1252 du caractegravere laquo eacute raquo donne laquo raquo quand il est interpreacuteteacute
comme du UTF-8 (figure 212b)
Bien que ces caractegraveres puissent ecirctre des donneacutees leacutegitimes leur preacutesence dans le contenu drsquoun
eacuteleacutement indique tregraves probablement une manipulation incorrecte de lrsquoencodage des chaicircnes par
lrsquoapplication eacutetudieacutee
Un autre exemple de ce genre de bug est montreacute dans la figure 213
213a donne lrsquoexemple lors de lrsquoinvitation de quelqursquoun de votre carnet drsquoadresses dont le nom
contient un accent Doodle affiche son nom incorrectement et cela donne une adresse invalide
213b montre qursquoen cliquant sur la suggestion on observe que lrsquoajout est fait mais que le nom
est coupeacute en deux parties agrave lrsquoendroit mecircme du caractegravere eacutechappeacute
1 Terme japonais signifiant laquo transformation de caractegravere raquo
50
Problegravemes drsquoeacutechappement Les problegravemes drsquoeacutechappement surviennent lorsque les chaicircnes
avec des caractegraveres speacuteciaux ne parviennent pas agrave ecirctre correctement codeacutees ou deacutecodeacutees entre
deux applications La manifestation la plus freacutequente de ce problegraveme est lors de la lecture et
de lrsquoeacutecriture des chaicircnes de caractegraveres dans une base de donneacutees Certains caractegraveres comme
lrsquoapostrophe neacutecessitent drsquoecirctre doubleacutes afin de ne pas ecirctre confondus avec un seacuteparateur
de chaicircne Les problegravemes surviennent quand un systegraveme ne parvient pas agrave remplacer les
apostrophes doubles par des apostrophes simples lors de lrsquoaffichage des donneacutees dans un
formulaire
Lors de lrsquoenregistrement du contenu du formulaire au retour agrave la base de donneacutees chaque
apostrophe sera de nouveau doubleacutee entraicircnant un quadruplet drsquoapostrophes lors du char-
gement de la page la prochaine fois et ainsi de suite ceci est illustreacute dans la figure 214
Ainsi la recherche de plusieurs apostrophes dans un formulaire peut ecirctre utiliseacutee pour deacutetecter
lrsquoeacutechappement incorrect agrave lrsquointeacuterieur du code source
Un problegraveme de nature similaire se produit lorsque des caractegraveres speacuteciaux dans le code source
de la page (tels que HTML ou JavaScript) sont eacutechappeacutes incorrectement Par exemple une
seacutequence comme ltpgt peut ecirctre transformeacutee en ampltpampgt reacutesultant en la chaicircne litteacuterale ltpgt
afficheacutee comme du texte plutocirct que drsquoecirctre interpreacuteteacutee comme une balise de paragraphe
Nous avons deacutecouvert des exemples de ce problegraveme sur EasyChair qui affiche du code HTML
brut ou sur YouTube qui affiche du code JavaScript comme on peut le voir agrave la figure 215
222 BUGS COMPORTEMENTAUX
Drsquoautres bugs peuvent ecirctre appeleacutes laquo comportementaux raquo ils reacutevegravelent un problegraveme dans la
fonctionnaliteacute du site ou alors ils peuvent ecirctre exprimeacutes uniquement en termes drsquoune seacutequence
51
de plusieurs pages dans lrsquoordre
Contrairement agrave une application web traditionnelle une application Internet riche (RIA) utilise
les technologies Web modernes eacutemergentes telles que AJAX [47] Flash et Silverlight Par
conseacutequent de nouveaux problegravemes de tests web sont ajouteacutes aux problegravemes existants Une
caracteacuteristique importante de ces applications est qursquoelles sont stateful leur code peut stocker
des donneacutees persistantes sur le client (en utilisant WebStorage les proprieacuteteacutes CSS les variables
JavaScript et les objets) et sur le serveur (agrave lrsquoaide de cookies de stockage de session et de bases
de donneacutees) De plus lrsquoeacutetat de lrsquoapplication est disperseacute sur un certain nombre drsquoeacuteleacutements
et ne peut pas simplement ecirctre assimileacute agrave lrsquoURL de la page en cours (afficheacutee dans la barre
drsquoadresse du navigateur) Des fonctionnaliteacutes telles que la communication asynchrone la
manipulation DOM cocircteacute client et les gestionnaires drsquoeacuteveacutenements permettent de changer lrsquoeacutetat
de lrsquoapplication sans un rechargement complet de la page et sans modifier son URL [35]
Une conseacutequence positive de ces fonctionnaliteacutes est qursquoune telle application peut fournir
une expeacuterience utilisateur plus riche (drsquoougrave son nom) sans les cookies et JavaScript les
opeacuterations simples telles que les manipulations de panier les sessions utilisateur (connexion
deacuteconnexion) et autres fonctionnaliteacutes ne seraient pas possibles Cependant la preacutesence drsquoun
eacutetat dans lrsquoapplication introduit eacutegalement la possibiliteacute drsquoincoheacuterences dans lrsquoeacutetat afficheacute
drsquoune page agrave une autre Ces problegravemes sont appeleacutes bugs comportementaux car ils sont la
conseacutequence de lrsquointeraction de plusieurs pages entre elles et dans un certain ordre
Eacuteleacutements mobiles Certains eacuteleacutements peuvent changer leur position involontairement lors
de lrsquointeraction avec un utilisateur La figure 216 montre un exemple drsquoun tel problegraveme sur
le site web du CRSNG ougrave eacutecrire un texte dans une zone de texte vide auparavant reacuteduit sa
largeur de 4 pixels et deacutecale leacutegegraverement les zones de texte restantes vers la gauche
52
Ce problegraveme srsquoest aveacutereacute plus reacutepandu que nous nous attendions les variations comprennent
certains styles drsquoeacuteleacutements (la bordure ou la taille) qui ont eacuteteacute changeacutes sans aucune raison
apparente
Le dysfonctionnement des boutons Beaucoup drsquoapplications montrent agrave lrsquoutilisateur des
eacuteleacutements qui se comportent comme une fenecirctre pop-up (une fenecirctre secondaire qui srsquoaffiche
sans avoir eacuteteacute solliciteacutee par lrsquoutilisateur devant la fenecirctre de navigation principale lorsqursquoon
navigue sur Internet) Ce moyen est communeacutement utiliseacute pour afficher des messages publici-
taires ou un avertissement comme la reacuteponse agrave un message priveacute dans un forum
Toutefois dans un certain nombre de cas les boutons dans ces fenecirctres sont inopeacuterants cliquer
sur eux un certain nombre de fois ne produit aucun effet Ce problegraveme a eacuteteacute teacutemoin dans des
sites aussi varieacutes qursquoAmerican Airlines Dropbox et BitBucket Dans certains cas lrsquoutilisateur
est effectivement coinceacute dans le pop-up ou la page qui contient le bouton et ne peut pas sortir
sans forcer un rechargement complet du document
Confusion dans le statut de connexion Deux sites web dans notre eacutetude preacutesentent des
incoheacuterences dans lrsquoeacutetat drsquoune page meacutelangeant des eacuteleacutements de la fenecirctre drsquoune page
normalement reacuteserveacutes aux utilisateurs enregistreacutes (tels que les menus personnaliseacutes) ainsi
que des eacuteleacutements reacuteserveacutes aux utilisateurs qui sont deacuteconnecteacutes (comme un formulaire de
connexion)
Nous avons assisteacute agrave un tel comportement dans le site web de lrsquoIEEE pour le formulaire de
demande de membre Senior Apregraves lrsquoexpiration drsquoun certain deacutelai lrsquoutilisateur doit neacutecessaire-
ment se connecter agrave nouveau toutefois la page preacutesenteacutee agrave lrsquoutilisateur est celle repreacutesenteacutee
sur la figure 217 On remarque que le nom de lrsquoutilisateur est toujours preacutesent en haut agrave droite
de la page mecircme srsquoil est censeacute ecirctre deacuteconnecteacute (les identifiants de connexion sont demandeacutes)
53
Cliquer sur ce nom apporte le menu deacuteroulant qui est normalement accessible uniquement
lorsque lrsquoutilisateur est connecteacute Le mecircme problegraveme a eacuteteacute trouveacute sur le site de reacuteservation
drsquoAir Canada
Incoheacuterences dans le reacutesultat de la recherche Un autre problegraveme de comportement est
celui de lrsquoincompatibiliteacute entre une requecircte faite par un utilisateur et les reacutesultats afficheacutes par
lrsquoapplication en reacuteponse agrave cette requecircte
La figure 218 montre un exemple de ce problegraveme sur le site web des eacutepiceries Monoprix
Lors de la recherche des magasins agrave proximiteacute un utilisateur peut taper un code postal dans
un champ de formulaire puis cliquer sur laquo Valider raquo Cependant les reacutesultats de recherche
afficheacutes dans la page suivante ne montrent presque jamais les magasins avec le code postal
souhaiteacute
Comme avec tous les bugs dans la preacutesente cateacutegorie cela peut ecirctre observeacute seulement par
la correacutelation de plusieurs eacuteleacutements dans deux eacutetats diffeacuterents de la page le texte dans la
zone de texte un clic sur un bouton speacutecifique suivi par le texte dans la liste des eacuteleacutements qui
apparaissent dans la page reacutesultante
223 BUGS DE RESPONSIVE WEB DESIGN
Il y a quelques anneacutees les deacuteveloppeurs Web pouvaient faire des hypothegraveses sur la taille de
lrsquoeacutecran des appareils des utilisateurs Les ordinateurs de bureau ont eacuteteacute conccedilus pour acceacuteder
aux sites web en assumant une taille de fenecirctre minimale il eacutetait donc laquo normal raquo que pour
une largeur de fenecirctre plus petite le site semble briseacute Il srsquoagissait drsquoune approche valide
dans une eacutepoque ougrave les tablettes et les smartphones eacutetaient inouiumls (pas agrave la porteacutee de tout le
monde peu utiliseacutes) Aujourdrsquohui une autre approche est neacutecessaire pour srsquoassurer que les
54
sites fonctionnent correctement dans une gamme de diffeacuterents appareils et tailles de viewport
(le viewport deacutesigne la partie drsquoune page web qui est visible dans la fenecirctre du navigateur
drsquoun ordinateur smartphone tablette ou drsquoun autre dispositif Le viewport est variable et
mouvant en fonction de la taille de la fenecirctre du navigateur et en fonction de lrsquoutilisation des
fonctions de deacutefilement ou scrolling (souris ou ascenseur))[6]
Par conseacutequent la conception des sites doit deacutesormais tenir compte de plusieurs cateacutegories
drsquoappareil selon la taille de lrsquoeacutecran Cependant le changement rapide des proprieacuteteacutes de
lrsquoappareil nrsquoa pas pu ecirctre suivi par les deacuteveloppeurs web Pour remeacutedier agrave ce problegraveme ces
derniers ont eu recours aux mecircmes hypothegraveses en fonction de la demande du serveur La
demande drsquoune ressource par un navigateur est suivie par une chaicircne drsquoagent utilisateur (user
agent string) geacuteneacuteralement envoyeacutee avec la demande pour identifier le type de navigateur
utiliseacute La lecture de cette derniegravere du cocircteacute du serveur entraicircne la diffusion de deux versions
une version mobile conccedilue pour une largeur maximale si lrsquoutilisateur envoyait des chaicircnes
drsquoagents drsquoutilisateurs mobiles et une version bureau conccedilue pour une largeur minimale
Les deacuteveloppeurs ont pu suite agrave lrsquointroduction des media queries de CSS eacutecrire des deacutecla-
rations de style conditionnelles par des proprieacuteteacutes multimeacutedia telle que la taille de la fenecirctre
(voir figure 219) Lrsquoadaptation drsquoun site pour un support speacutecifique ou une taille de fenecirctre au
moment de lrsquoexeacutecution est donc devenue donc possible Ce concept qui sert agrave faire en sorte
qursquoun seul site reacuteponde agrave diffeacuterentes proprieacuteteacutes multimeacutedias (principalement la taille de la
fenecirctre) au moment de lrsquoexeacutecution afin drsquoameacuteliorer lrsquoexpeacuterience de lrsquoutilisateur est appeleacute
Responsive Web Design [59]
Une eacutetude reacutecente meneacutee par Walsh et al identifie cinq types de bugs survenant plus
particuliegraverement dans les sites web RWD [73] Pour la plupart il srsquoagit de bugs deacutejagrave observeacutes
dans drsquoautres sites au cours de notre propre eacutetude
55
Collision drsquoeacuteleacutements Crsquoest un bug dans lequel les eacuteleacutements se chevauchent en raison de la
modification de la fenecirctre (viewport) Ce bug peut eacutegalement influencer le bon fonctionnement
des sites web dans le cas ougrave certains eacuteleacutements fonctionnels dans les pages sont masqueacutes
Deacutepassement drsquoeacuteleacutements Les eacuteleacutements ont besoin de se redimensionner ils manquent
drsquoespace mais ils doivent aussi ecirctre assez grands pour contenir tous leurs enfants Cela arrive
dans le cas ougrave un eacuteleacutement deacutepasse agrave lrsquoexteacuterieur de son parent en raison drsquoun manque drsquoespace
Lrsquoeacuteleacutement peut alors ecirctre inaccessible masqueacute par un autre eacuteleacutement ou par-dessus drsquoautres
eacuteleacutements
Ce bug sur le site httpswwwthelilycom On peut le voir dans la figure 220 ougrave le div
avec les boutons du menu se termine en dehors de la barre de menu et hors de vue
Deacutepassement du viewport Ce bug se produit lorsque les eacuteleacutements sont pousseacutes hors de
la fenecirctre (viewport) et deviennent inaccessibles ou cacheacutes Sur le site web httpswww
slaveryfootprintorg ce bug a eacuteteacute trouveacute La figure 221 montre comment les bugs non
observables peuvent creacuteer des problegravemes agrave des largeurs infeacuterieures Ici le div du milieu est un
peu en dehors de la fenecirctre mais il ne montre aucun problegraveme observable Cependant crsquoest agrave
440px que nous pouvons voir clairement le contenu deacuteborder de la fenecirctre
Disposition agrave petite eacutechelle En fonction de lrsquoimpleacutementation certaines mises en page
peuvent ecirctre afficheacutees correctement que dans un petit intervalle de largeur Par exemple un
affichage pourrait ecirctre seulement correct entre 320 et 325 pixels de largeur
Couverture drsquoeacuteleacutements Ce bug survient lorsqursquoun conteneur nrsquoest pas assez large pour
contenir tous les eacuteleacutements et qursquoun ou plusieurs eacuteleacutements sont pousseacutes sur une ligne suppleacute-
56
mentaire
Un exemple drsquoeacuteleacutement enveloppeacute peut ecirctre vu dans la figure 222 On pourrait faire valoir que
ce nrsquoest pas un bug cependant agrave des largeurs infeacuterieures la liste est de nouveau aligneacutee en
haut Cela montre qursquoayant cette liste aligneacutee en haut est la disposition deacutesireacutee
Nous donnerons des exemples sur la deacutetection de ce genre de bugs dans la section 542
57
(a) Fenecirctre large
(b) Fenecirctre moyenne
Figure 210 ndash Exemple drsquoeacuteleacutements inaccessibles
58
(a) SpringerOpen
(b) Naymz
Figure 212 ndash Exemple de mojibake (a) donneacutees UTF-8 afficheacutees comme Cp1252 (b) donneacuteesCp1252 afficheacutees comme UTF-8
59
(a) Mojibake adresse invalide
(b) Mojibake nom coupeacute en deux partie
Figure 213 ndash Exemples de Mojibake dans Doodle
60
Figure 214 ndash Des donneacutees extraites de la base de donneacutees sont incorrectement eacutechappeacutees dansIEEE PDF eXpress on constate la preacutesence de plusieurs apostrophes
Figure 215 ndash Sur cette page YouTube du code JavaScript est afficheacute au lieu drsquoecirctre interpreacuteteacute
Figure 216 ndash Eacuteleacutements mobiles la position et la bordure de la zone du texte changent lors de lasaisie du texte (NSERC)
61
Figure 217 ndash Confusion connexiondeacuteconnexion dans une page web le contenu pour un utilisa-teur connecteacute (en haut de la page a droite) coexiste avec le formulaire de connexion reacuteserveacute auxutilisateurs qui ne sont pas en principe connecteacutes
Figure 218 ndash Incoheacuterences dans le reacutesultat de la recherche
media (max-width 420px) body
background-color white
media (min-width 421px)
body background-color blue
Figure 219 ndash Code CSS avec des conditions sur la largeur de lrsquoappareil Il srsquoagit drsquoun exemplede media queries
62
(a) Tous les boutons sont correcte-ment dans la barre de menu
(b) Le bouton laquo About raquo en sur-brillance fait saillie en dehors dela barre de menu son parent
Figure 220 ndash Le bug de deacutepassement drsquoeacuteleacutements sur le site httpswwwthelilycom
(a) Le div est en surbrillance mais il nrsquoy a pas debug observable
(b) En 440px nous voyons lemecircme div avec un bug obser-vable ougrave le texte deacuteborde en de-hors de la fenecirctre
Figure 221 ndash Le bug de deacutepassement du viewport sur le site httpswwwslaveryfootprintorg
(a) La liste est en haut (top-aligned) (b) Agrave une largeur infeacuterieure lrsquoeacuteleacutementlaquo CGV raquo est pousseacute sur une ligne suppleacutemen-taire
Figure 222 ndash Le bug de couverture drsquoeacuteleacutements sur le site httpswwwanthedesignfr
CHAPITRE 3
EacuteTAT DE LrsquoART
Il existe un certain nombre drsquooutils servant agrave tester les applications web Dans ce chapitre nous
classons les approches existantes en quatre grandes familles qursquoon nomme successivement
outils de tests approches visuelles approches deacuteclaratives et outils RWD Nous allons les
exposer en donnant un peu plus de deacutetails sur quelques outils relatifs agrave chaque famille
drsquoapproches Enfin nous citons leurs points faibles en montrant leurs limites dans certains cas
31 OUTILS DE TEST
La deacutetection de bugs drsquointerface peut drsquoabord ecirctre abordeacutee comme un problegraveme de test logiciel
classique Sous cet angle il se veut une geacuteneacuteralisation des fonctionnaliteacutes offertes par des
logiciels drsquoanalyse de sites web comme Google Analytics 1 ou Piwik 2 Ces outils suivent les
requecirctes HTTP et fournissent un tableau de bord pour analyser des donneacutees de base pays
drsquoorigine dureacutee drsquoune session etc Cependant ces outils ne gegraverent geacuteneacuteralement pas Ajax ne
peuvent pas ecirctre utiliseacutes comme outils de test (ils nrsquoeacutevaluent pas les conditions sur le contenu
de la page par exemple) et ne signalent rien sur le contenu de la page sur les actions de
1 httpwwwgooglecomanalytics2 httpwwwpiwikorg
64
WebDriver driver = new FirefoxDriver()driverget(http)ListltWebElementgt items = driverfindElements(BycssSelector(li))int left = -1for (WebElement item items) if (left == -1) left = itemgetLocation()getX()continue
assert(left = itemgetLocation()getX())
Figure 31 ndash Exemple de code pour Selenium WebDriver
lrsquoutilisateur ou les requecirctes Ajax
Les logiciels de test en ligne tels que Capybara Selenium WebDriver Watij ou Sahi sont plus
proches de nos objectifs Ces outils fournissent diffeacuterents langages pour deacutecrire les tests et
eacutecrire des assertions sur lrsquoapplication Les scripts WebDriver sont eacutecrits en Java Capybara
a sa propre API 3 dans le langage Ruby Watij utilise WebSpec 4 qui est une API deacutefinie
par-dessus Java (35 donne un exemple de test webspec-watij) et Sahi utilise SahiScript
une extension de JavaScript 5 Tous ces langages sont impeacuteratifs (crsquoest-agrave-dire proceacuteduraux) et
visent agrave piloter une application en effectuant des actions La partie test se reacuteduit agrave lrsquoinsertion
drsquoinstructions similaires agrave assert dans le code du script A titre drsquoexemple la figure 31
donne un extrait de code Java pour Selenium WebDriver pour veacuterifier que tous les eacuteleacutements
satisfaisant un seacutelecteur CSS sont agrave gauche
3 httpmakandracardscommakandra1422-capybara-the-missing-api4 httpwatijcomwebspec-api5 httpsahicoin
65
311 CAPYBARA
Capybara est un framework drsquoautomatisation Web utiliseacute pour creacuteer des tests fonctionnels qui
simulent lrsquointeraction des utilisateurs agrave une application Il constitue une bibliothegraveque conccedilue
pour ecirctre utiliseacutee sur un pilote Web sous-jacent (underlying web driver) tels que selenium-web
driver rack test driver ou capybara-webkit Il fournit un DSL (Domain Specific Language)
servant agrave deacutecrire les actions exeacutecuteacutees par ces pilotes Web [30] Une fois la page est chargeacutee
via le DSL et le pilote Web sous-jacent Capybara essayera de localiser lrsquoeacuteleacutement pertinent
dans le DOM (Document Object Model) et exeacutecutera une action du genre clics de boutons
de liens etc Son DSL deacuteployeacute pour exprimer les actions agrave exeacutecuter est tregraves intuitif la figure
32 montre quelques unes de ses commandes de base Dans le but de trouver un eacuteleacutement[30]
Capybara par lrsquointermeacutediaire du DSL cherchera dans le DOM les attributs suivants
mdash Champ de texte (fill_in) id name eacuteleacutement drsquoeacutetiquette associeacute (label)
mdash Cliquez sur un lienbouton (click_link click_button) id titre texte dans la
balise valeur
mdash Case agrave cocherbouton radioliste deacuteroulante (check uncheck choose select) id nom
eacuteleacutement drsquoeacutetiquette associeacute (label)
mdash Teacuteleacutecharger le fichier (attach_file) id nom
312 WATIJ
Watij ou Web Application Testing en Java est un projet de test impleacutementeacute en Java destineacute agrave
automatiser les tests fonctionnels des applications Web au-dessus de IE (Internet Explorer) Il
est baseacute sur la conception de Watir [33] et possegravede une capaciteacute de recherche drsquoeacuteleacutements lui
permettant de trouver drsquoacceacuteder et de controcircler facilement nrsquoimporte quel eacuteleacutement HTML agrave
66
visit(rsquopage_urlrsquo) navigate to pageclick_link(rsquoid_of_linkrsquo) click link by idclick_link(rsquolink_textrsquo) click link by link textclick_button(rsquobutton_namersquo) fill text fieldfill_in(rsquoFirst Namersquo with =gt rsquoJohnrsquo) choose radio buttonchoose(rsquoradio_buttonrsquo) choose radio buttoncheck(rsquocheckboxrsquo) check in checkboxuncheck(rsquocheckboxrsquo) uncheck in checkboxselect(rsquooptionrsquo from=gtrsquoselect_boxrsquo) select from dropdownattach_file(rsquoimagersquo rsquopath_to_imagersquo) upload file
Figure 32 ndash Commandes de base de Capybara [30]
travers le DOM en mobilisant lrsquointerface COM Il prend en charge drsquoautre part les expressions
XPath pour trouver les eacuteleacutements HTML sur une page et gegravere les pop-up (fenecirctres contextuel
du navigateur) en les interceptant et les rendant disponibles pour lrsquointeraction Watij peut
deacutetecter la fin du chargement drsquoune page en cours de chargement Watij dispose drsquoun ensemble
relativement riche drsquoAPI pour lrsquoeacutecriture de scripts de simulation La connexion agrave un site Web
exige agrave chaque fois des informations tel que le nom de lrsquoutilisateur et le mot de passe (page
de connexion (login) de Yahoo figure 34) Les tacircches manuelles demandeacutees dans ce cas agrave
lrsquoutilisateur sont les suivantes
1 Afficher une fenecirctre de navigateur
2 Mettre lrsquoURL correcte pour ouvrir cette page
3 Attendre que la page se charge et se stabilise
4 Taper le nom drsquoutilisateur dans le champ ID
5 Taper le mot de passe
6 Cliquer sur le bouton Connexion
Le code approprieacute pour automatiser les tests fonctionnels de ces eacutetapes en utilisant Watij est
donneacute dans la figure 33
67
IE ie = new IE()iestart(wwwmailyahoocom)ietextField(SymbolFactoryidusername)set(ouss)ietextField(SymbolFactoryidpasswd)set(ber2017)iebutton(SymbolFactoryidsave)click()
Figure 33 ndash Exemple drsquoutilisation de Watij [71]
Figure 34 ndash Page de connexion (login) de Yahoo [71]
68
public class WebspecDemoTest
WebSpec spec
Beforepublic void setup()spec = new WebSpec()safari()
Afterpublic void tearDown()specbrowser()close()
Testpublic void testSearchWikipedia() throws Exception specopen(httpdewikipediaorgwikiWikipediaHauptseite)
specfindinput()withid(searchInput)setvalue(Softwaretest)specfindbutton()withid(searchButton)click()assertEquals(Softwaretest specfindh1()withid(firstHeading)getinnerText())
specfinda()withinnerText(Quality)click()assertEquals(Softwarequalitat specfindh1()withid(firstHeading)getinnerText())
Testpublic void testOpenGoogle() throws Exception specopen(httpwwwgooglede)specjquery(input[name=rsquoqrsquo])setvalue(Testing)specfindinput()withname(btnG)click()assertTrue(specfinddiv()withid(res)finda()getinnerText()
startsWith(Softwaretesting))
Figure 35 ndash Exemple simple drsquoun test JUnit Watij WebSpec [7]
69
313 SAHI
Sahi est un outil open source drsquoautomatisation et de test drsquoapplications web En tant qursquooutil
drsquoautomatisation Sahi offre la possibiliteacute drsquoenregistrer et de lire des scripts Il prend en charge
Java et JavaScript Mecircme si SahiScript ressemble agrave JavaScript il nrsquoest pas exeacutecuteacute comme le
JavaScript normal dans le navigateur Lrsquoideacutee de base du fonctionnement de Sahi est deacutecrite
ci-dessous
les parties centrales de Sahi montreacutes dans la figure 37 incluent le serveur proxy Sahi et
le moteur JavaScript Les reacuteponses HTML qui transitent par le proxy sont modifieacutees de
telle sorte que JavaScript soit injecteacute au deacutebut et agrave la fin de la reacuteponse Cela permettra au
navigateur drsquoenregistrer et de lire les scripts et de communiquer avec le proxy en cas de
besoin En plus de la gestion des demandes de pages du navigateur Sahi gegravere eacutegalement les
commandes personnaliseacutees lieacutees agrave lrsquoenregistrement agrave la lecture etc envoyeacutees par celui-ci
Les fonctionnaliteacutes propres de Sahi font de lui un bon support des fichiers de base de donneacutees
supportant JavaScript AJAX ainsi que les API simples Outre ses fonctionnaliteacutes normales
agrave lrsquoeacutegard de la prise en charge de laquo ant raquo(lrsquooutil logiciel) Du fait que ses API ne deacutependent
pas beaucoup de la structure HTML le controcircleur Sahi (IDE) peut ecirctre utiliseacute dans diffeacuterents
navigateurs Sahi qui nrsquoutilise pas XPath renferme des API tels que _ near _in etc
lrsquoaidant agrave trouver un eacuteleacutement par rapport agrave un autre laquo SahiScript raquo est fondeacute sur JavaScript
Il est analyseacute par Sahi et exeacutecuteacute par le moteur JavaScript rhino La figure 36 illustre un
exemple de constructions (exemple drsquoeacutecriture de conditions) dans Sahi Elles sont identiques agrave
JavaScript hormis le $ obligatoire utiliseacute dans les variables
De plus tous les outils mentionneacutes ci-dessus (agrave lrsquoexception de Sahi) neacutecessitent un plugin
speacutecifique au navigateur pour fonctionner et ne supportent donc qursquoune poigneacutee de navigateurs
en geacuteneacuteral les laquo Big Five raquo (Firefox Safari IE Opera et Chrome) Cependant la part de marcheacute
70
Comparer des valeurs normalesif ($username == PartnerUser)
_click(_link(Partner Login))
Comparer avec les attributs du navigateur exposeacutes par Sahiif (_getText(_div(page_type)) == Partner Page)
_click(_link(Partner Login))
Comparaison avec les attributs du navigateur NON exposeacutes par les fonctions inteacutegreacutees de Sahi en utilisant _fetchif (_fetch(_link(0)href) == httpsahicoin)
_click(_link(Partner Login))
Comparaison avec les attributs du navigateur NON exposeacutes par les fonctions inteacutegreacutees de Sahi en utilisant _conditionif (_condition(_link(0)href == httpsahicoin))
_click(_link(Partner Login))
Figure 36 ndash Exemple de Sahi script [18]
Figure 37 ndash Architecture de Sahi (figure tireacutee de [21])
71
des navigateurs autres que ceux-ci eacutequivaut agrave 20 et srsquoeacutelegraveve agrave 63 pour les appareils autres
que les ordinateurs de bureau (tablettes consoles et mobiles) 6 En dehors de Sahi ces outils
de test nrsquoatteignent pas plus des trois quarts du marcheacute et pour certains seulement 25 pour
les appareils autres que les ordinateurs de bureau Par conseacutequent lrsquoaffirmation selon laquelle
laquo la plupart des utilisateurs raquo sont pris en charge par eux est agrave peu pregraves non fondeacutee
32 APPROCHE VISUELLE
Pour deacuteceler les deacutefauts dans la mise en page lrsquooutil principal deacuteployeacute par ce genre de
techniques est geacuteneacuteralement la vision par ordinateur Ces derniegraveres consistent entre autres en
la deacutelimitation des bordures des eacuteleacutements par la deacutetection des contours et en la deacutecouverte des
changements par le calcul de la diffeacuterence entre deux captures drsquoeacutecran dont les couleurs du
texte des arriegravere-plans seront compareacutees pour repeacuterer le texte illisible Au lieu drsquoagir sur des
informations speacutecifiques agrave la mise en page telles que la taille et la position des eacuteleacutements ces
techniques sont baseacutees sur la comparaison des captures drsquoeacutecran pixel par pixel Dans ce cas
les erreurs sous la forme drsquoune capture drsquoeacutecran sont signaleacutees et clairement marqueacutees
321 WEBSEE
Certains travaux ont eacutegalement eacuteteacute reacutealiseacutes sur lrsquoutilisation des techniques drsquoanalyse drsquoimage
pour identifier les problegravemes de mise en page [69] WebSee [58] est en particulier un outil
impleacutementeacute en Java qui utilise plusieurs bibliothegraveques tierces pour impleacutementer certains des
algorithmes speacutecialiseacutes Il applique des techniques du domaine de la vision par ordinateur pour
analyser la repreacutesentation visuelle des pages Web pour deacutetecter automatiquement et localiser
les eacutechecs de preacutesentation WebSee identifie les eacutechecs de preacutesentation puis deacutetermine les
6 En date de feacutevrier 2014 tel que reacutecupeacutereacute sur StatCounter httpgsstatcountercom
72
eacuteleacutements dans la source HTML de la page qui pourraient ecirctre responsables des eacutechecs observeacutes
en comparant la repreacutesentation visuelle de la page Web rendue sous test et son apparence
drsquoorigine (oracle)
A cette fin WebSee prend en entreacutee le code HTMLCSS de la page agrave analyser et un oracle
(une image) du rendu attendu de la page Un ensemble de diffeacuterences entre la page rendue
et lrsquoimage de reacutefeacuterence est calculeacute et ces diffeacuterences sont ensuite regroupeacutees en groupes
susceptibles de repreacutesenter diffeacuterents deacutefauts sous-jacents dans la page Une deuxiegraveme phase
de traitement tente drsquoidentifier les eacuteleacutements HTML correspondant aux pixels de diffeacuterence
qui sont ensuite ordonneacutes par une meacutetrique de prioriteacute et envoyeacutes agrave lrsquoutilisateur La figure
38 montre les diffeacuterentes phases de lrsquoapproche La premiegravere entreacutee est la page web (P) qui
devrait ecirctre analyseacute pour deacuteterminer les deacutefaillances de preacutesentation La forme de P est une
URL qui pointe vers soit un emplacement sur le reacuteseau ou drsquoun systegraveme de fichiers ougrave tous les
fichiers HTML CSS JavaScript et les fichiers meacutedias de P sont accessibles
La deuxiegraveme entreacutee est lrsquooracle (O) qui speacutecifie les proprieacuteteacutes drsquoexactitude visuels de P La
forme de O est une image qui peut ecirctre soit une maquette ou une capture drsquoeacutecran drsquoune version
correcte de P
La troisiegraveme entreacutee est un ensemble de reacutegions speacuteciales (SR) deacutefinissant des zones de O qui
contiendront du texte dynamique des annonces etc qui deacutefinissent les reacutegions dynamiques
communes dans les applications web modernes Les reacutegions speacuteciales fournissent un meacuteca-
nisme pour permettre aux deacuteveloppeurs de speacutecifier de telles reacutegions qui devraient ecirctre traiteacutees
speacutecialement
Lrsquoapproche comporte trois phases La premiegravere phase est la phase de la deacutetection elle compare
les repreacutesentations visuelles de P et O pour deacutetecter un ensemble de diffeacuterences soit dans
les reacutegions speacuteciales ou dans les autres parties de la page web Lrsquoensemble des diffeacuterences
73
identifieacute est regroupeacutees ensuite en groupes qui sont susceptibles de repreacutesenter des deacutefauts
sous-jacents dans P Pour ce faire WebSee exploite Selenium WebDriver pour prendre des
captures drsquoeacutecran et il exploite la bibliothegraveque laquo pdiff raquo qui est une bibliothegraveque perceptuelle
de diffeacuterenciation drsquoimage pour comparer les images et calculer les diffeacuterences Lrsquoalgorithme
de regroupement (clustering) DBSCAN (Density Based Spatial Clustering of Applications
with Noise) est utiliseacute pour regrouper les pixels de diffeacuterences (dbscan est un algorithme
impleacutementeacute dans la bibliothegraveque Apache Commons Math3)
La deuxiegraveme phase est la phase de localisation elle analyse une carte de rendu de P pour
identifier lrsquoensemble des eacuteleacutements HTML qui deacutefinissent les pixels de chaque ensemble
de diffeacuterences en cluster Pour cette eacutetape WebSee tire parti de la mise en œuvre de la
bibliothegraveque R-tree [50] et Selenium WebDriver pour extraire des informations de deacutelimitation
de rectangles
Enfin la troisiegraveme phase est la phase du traitement de lrsquoensemble du reacutesultat elle priorise
lrsquoensemble des eacuteleacutements identifieacutes pour chaque grappe et fournit cela comme une sortie pour
le deacuteveloppeur 39 La capaciteacute de recherche de sous-image pour lrsquoheuristique en cascade est
fournie par OpenCV
322 FLB (FIGHTING LAYOUT BUGS)
Une combinaison de lrsquoinjection CSS avec des techniques de diffeacuterentiation drsquoimage est
preacutesenteacutee par Tamm dans une preacutesentation Tech Talk de Google [69] en tant que moyen pour
deacutetecter quelle partie drsquoun site web est du texte et si elle chevauche drsquoautres eacuteleacutements frontiegraveres
Lrsquoapproche colore tout le texte sur une page Web en noir puis en blanc tout en prenant des
captures drsquoeacutecran entre les deux comme le montre la figure 310 Les parties de lrsquoimage qui sont
du texte sont localiseacutees en diffeacuterant les deux images Les lignes verticales et horizontales des
74
Figure 38 ndash Le fonctionnement geacuteneacuteral de lrsquooutil drsquoanalyse WebSee
Figure 39 ndash Outputs de WebSee eacuteleacutements HTML deacutefectueux
75
eacuteleacutements dans lrsquoimage reacutesultante sont deacutecouvertes via des techniques baseacutees sur le traitement
drsquoimage Une comparaison de ces lignes avec les eacuteleacutements de texte deacutecouverts agrave lrsquoeacutetape
preacuteceacutedente permet de deacuteterminer les cas ougrave le texte chevauche les bordures des eacuteleacutements La
mecircme technique permet aussi de deacuteterminer si les eacuteleacutements de texte ont le contraste approprieacute
agrave leur arriegravere-plan
Cependant cette technique ne fonctionne que pour le texte et drsquoautres eacuteleacutements qui peuvent
facilement ecirctre identifieacutes en utilisant des techniques baseacutees sur le traitement drsquoimage pour la
reconnaissance drsquoobjets Le champ drsquoapplication est petit car il se concentre exclusivement
sur le texte pour le chevauchement des eacuteleacutements
323 PHANTOMCSS
PhantomCSS [20] est un framework de test drsquointerface graphique open source qui possegravede la
capaciteacute de situer les changements drsquoune iteacuteration agrave une autre par des algorithmes diffeacuterant sur
deux images Drsquoautre part il permet drsquoexclure certaines parties de lrsquointerface graphique du
test Les pages Web susceptibles drsquoafficher des donneacutees non controcircleacutees par le deacuteveloppeur et
des eacuteleacutements tels que des annonces Web des donneacutees utilisateur des banniegraveres animeacutees des
images et du texte trouvent dans ces caracteacuteristiques un instrument beacuteneacutefique Le deacuteveloppeur
dans ce cas est obligeacute de speacutecifier manuellement les parties de lrsquointerface graphique non
concerneacutees par les tests en nommant lrsquoeacuteleacutement en question ou le speacutecifiant ses coordonneacutees x
et y
76
Figure 310 ndash Exemple de traitement drsquoimage avec FLB (figure tireacutee de [63])
77
324 SIKULI
Un autre framework drsquoautomatisation est Sikuli [39] qui identifie et manipule les controcircles
de lrsquointerface graphique dans une page web en utilisant la recherche par image (sub-image
searching) Les captures drsquoeacutecran constituent la base de cette approche visuelle pour la recherche
et lrsquoautomatisation des interfaces utilisateurs Elle permet aux utilisateurs
mdash de prendre une capture drsquoeacutecran drsquoun eacuteleacutement de lrsquointerface graphique (comme un bouton
de la barre drsquooutils une icocircne ou une boicircte de dialogue)
mdash drsquointerroger un systegraveme drsquoaide en faisant appel agrave la capture drsquoeacutecran au lieu du nom de
lrsquoeacuteleacutement
mdash de fournir eacutegalement une API de script visuel pour automatiser les interactions de
lrsquointerface graphique par lrsquointermeacutediaire des modegraveles de capture drsquoeacutecran pour diriger
les eacuteveacutenements de la souris et du clavier
Dans lrsquoexemple montreacute dans la figure 311 le bouton de fermeture doit effacer le contenu de la
zone de texte ainsi que lui-mecircme Supposons que lrsquointerface graphique soit deacutejagrave dans un eacutetat
qui contient un laquo 5 raquo au deacutebut nous trouvons la zone de texte bleue sur lrsquoeacutecran et stockons la
reacutegion correspondante qui a la plus grande similariteacute dans la zone bleue Ensuite apregraves avoir
cliqueacute sur le bouton de fermeture deux assertNotExist sont utiliseacutes pour veacuterifier la disparition
dans la zone bleue [39]
325 APPLITOOLS
La segmentation pure de lrsquoimage des pages Web et la comparaison visuelle pixel par pixel
sont agrave lrsquoorigine de lrsquooutil commercialiseacute AppliTools Eyes [2] qui offre une interaction des
scripts de test creacutees par lrsquoutilisateur et son application Dans cet outil le serveur Web est
78
Figure 311 ndash Exemple drsquoutilisation de Sikuli (figure tireacutee de [39])
chargeacute de teacuteleacutecharger les captures drsquoeacutecran en appliquant un algorithme de diffeacuterence drsquoimage
entre lui et une capture drsquoeacutecran preacuteceacutedente La diffeacuterence entre les deux images est traduite par
AppliTools par une deacutetection des reacutegressions dans une mise en page GUI Ces changements
dans une interface Web sont exploiteacutes par le deacuteveloppeur pour actualiser lrsquoimage de base dans
le cas ougrave le changement eacutetait intentionnel
Cependant cette approche est orienteacutee vers la deacutetection de bugs de type statique de chevau-
chement ou de deacutebordement des eacuteleacutements dans un document et actuellement ne supporte pas
la veacuterification de modegraveles temporels agrave travers plusieurs instantaneacutes de la mecircme page De plus
lrsquoapproche geacutenegravere beaucoup de faux positifs si la page rendue contient du texte leacutegegraverement
diffeacuterent de lrsquoimage de reacutefeacuterence Crsquoest le cas lorsque par exemple la fenecirctre du navigateur a
des dimensions diffeacuterentes et que le texte srsquoeacutecoule diffeacuteremment (mais pas neacutecessairement
incorrectement) par rapport agrave lrsquoimage Pour reacutesoudre ce problegraveme lrsquoutilisateur doit deacutefinir
manuellement pour chaque oracle ce que lrsquoon appelle des reacutegions dynamiques qui devraient
ecirctre ignoreacutees par le systegraveme lors de lrsquoanalyse de la page
79
33 APPROCHE DEacuteCLARATIVE
Les techniques dans cette derniegravere famille fonctionnent directement sur des informations sur
la mise en page Elles peuvent obtenir des informations sur les eacuteleacutements (position largeur
et hauteur) impliqueacutes dans lrsquointerface graphique que ce soit par analyse drsquoimage ou par
laquo siphonnage raquo (scraping) de lrsquointerface graphique Crsquoest drsquoailleurs ce que ces techniques ont
en commun La maniegravere de relier les diffeacuterents eacuteleacutements de mise en page les uns aux autres
ainsi que les valeurs de leurs paramegravetres de mise en page sont indiqueacutes par les entreacutees de ces
approches qui ne sont pas tant un script que des documents deacuteclaratifs
Les assertions opeacutereacutees sur lrsquointerface graphique peuvent par exemple ecirctre de la forme laquo lrsquoeacuteleacute-
ment 1 est-il situeacute agrave gauche de lrsquoeacuteleacutement 2 raquo ou laquo lrsquoeacuteleacutement 1 a-t-il une largeur infeacuterieure
agrave lrsquoeacuteleacutement 2 raquo Certaines de ces techniques ont des langages speacutecialiseacutes deacutecrivant des
assertions comme celles-ci
Les speacutecifications deacuteclaratives des interfaces utilisateurs ont fait lrsquoobjet de beaucoup de
recherches dans le passeacute Les premiegraveres tentatives incluent le systegraveme MASTERMIND qui
utilise un langage de modeacutelisation baseacute sur CORBA [67] drsquoautres approches incluent le
modegravele de mise en page drsquoAuckland [57] Adobe Adam et Eve [66] et les modegraveles de proprieacuteteacutes
[57]
331 MASTERMIND
Dans MASTERMIND le deacuteveloppeur de lrsquointerface utilisateur doit creacuteer des modegraveles de tacircche
(task model) drsquoapplication (domaine) et de preacutesentation Le modegravele drsquoapplication est speacutecifieacute
agrave lrsquoaide du langage de deacutefinition drsquointerface CORBA (IDL) Le modegravele de tacircche preacutesente les
tacircches de lrsquoutilisateur final dans une structure hieacuterarchique et comporte les informations de
80
commande neacutecessaires pour controcircler lrsquointerface utilisateur lors de lrsquoexeacutecution Le modegravele de
preacutesentation deacutecrit la disposition de lrsquointerface utilisateur y compris les affichages statiques
et dynamiques Il permet la speacutecification des mises agrave jour automatiques de preacutesentation
lorsque les donneacutees drsquoapplication ou le contexte de preacutesentation changent En outre il integravegre
des principes de conception graphique afin de donner un soutien complet au concepteur de
dialogue
332 AUCKLAND LAYOUT MODEL (ALM)
Le modegravele de mise en page drsquoAuckland (ALM) est une technique impleacutementeacute pour laquo NET raquo
Java et Haiku permettant de speacutecifier une mise en page 2D Elle est utiliseacutee pour organiser les
controcircles dans une interface graphique Le modegravele permet la speacutecification de contraintes baseacutees
sur lrsquoalgegravebre lineacuteaire Il calcule une disposition optimale en utilisant la programmation lineacuteaire
Les eacutegaliteacutes et les ineacutegaliteacutes lineacuteaires peuvent ecirctre speacutecifieacutees sur les tabulations horizontales et
verticales qui sont des lignes virtuelles formant une grille dans laquelle tous les eacuteleacutements de
lrsquointerface graphique sont aligneacutes [57]
Lrsquoexemple dans la figure 312 montre la maniegravere de disposer trois boutons en mobilisant
trois zones Les boutons ont deacutejagrave eacuteteacute ajouteacutes agrave la fenecirctre mais ils nrsquoont pas eacuteteacute arrangeacutes Leur
emplacement et leur taille sont deacutetermineacutes par la speacutecification ALM (figure 313) Quelque
soit le redimensionnement de la fenecirctre les deux colonnes auront toujours la mecircme largeur et
les deux lignes la mecircme hauteur en raison de la lineacuteariteacute des deux contraintes
81
Figure 312 ndash Exemple avec Auckland (figure tireacutee de [1])
LayoutSpec ls = new LayoutSpec ()XTab x1 = lsAddXTab ()YTab y1 = lsAddYTab ()
lsAddArea (lsLeft lsTop x1 y1 bouton1)lsAddArea (x1 lsTop lRight y1 bouton2)lsAddArea (lsLeft y1 lsRight lsBottom bouton3)
donne la mecircme largeur aux deux colonnes et la mecircme hauteur aux deux rangeacuteeslsAddConstraint (nouveau double [] 2 -1 nouvelle variable [] x1 lsRight
OperatorTypeEQ 0)lsAddConstraint (nouveau double [] 2 -1 nouvelle variable [] y1 lsBottom
OperatorTypeEQ 0)
Figure 313 ndash Une simple speacutecification avec Auckland [1]
82
333 ADOBE ADAM ET EVE
ASL (Adobe Source Libraries) est un projet au sein du Adobe Software Technology Lab
(STLab) Crsquoest un ensemble de bibliothegraveques de composants logiciels rendu disponible sous
licence Open Source par Adobe Systems permettant de deacutefinir des algorithmes sous forme
deacuteclarative Les deux premiegraveres bibliothegraveques significatives dans ASL sont la bibliothegraveque
de modegravele de proprieacuteteacutes (Adam) et la bibliothegraveque de modegravele de mise en page (Eve) dont
les composants permettent de modeacuteliser lrsquoapparence et le comportement drsquoune interface
dans une application logicielle Adam consiste en un solveur et un langage deacuteclaratif pour
deacutecrire les contraintes et les relations sur une collection de valeurs qui sont geacuteneacuteralement
les paramegravetres drsquoune commande drsquoapplication (une fonction) Adam fournit la logique qui
controcircle le comportement drsquoune interface Humaine (IH) Il est similaire dans son concept agrave une
feuille de calcul ou agrave un gestionnaire de formulaires Les valeurs sont deacutefinies et les valeurs
deacutependantes sont recalculeacutees Adam procure des fonctionnaliteacutes pour reacutesoudre les valeurs
interdeacutependantes mais il ne constitue pas un systegraveme de contrainte geacuteneacuteral Eve consiste
en un solveur et un langage deacuteclaratif pour la construction drsquoune IH Le solveur de mise en
page prend en compte une description riche des eacuteleacutements de 14 interfaces pour obtenir une
disposition de haute qualiteacute rivalisant avec ce qui peut ecirctre reacutealiseacute avec le placement manuel
Une seule description suffit pour plusieurs plateformes et langages OS Eve a eacuteteacute deacuteveloppeacutee
pour fonctionner avec Adam il peut cependant aussi ecirctre utiliseacutee seule Adam et Eve peuvent
ecirctre inteacutegreacutees dans un certain nombre drsquoenvironnements Ils ont la faculteacute de fonctionner
ensemble ou indeacutependamment mais ils doivent ecirctre combineacutes avec drsquoautres installations
pour construire une application Parmi les exemples typiques drsquointerfaces utilisateur effectuant
la synthegravese de paramegravetres de commande la boicircte de dialogue laquo Enregistrer sous raquo dans le cas
drsquoenregistrement drsquoun fichier image (figure 314) Elle se compose drsquoun champ de texte pour
entrer le nom du fichier un menu de types de fichiers et des curseurs offrant deux possibiliteacutes
83
Figure 314 ndash Exemple drsquoune boicircte de dialogue pour enregistrer un fichier image
pour configurer la compression lors de lrsquoenregistrement dans un format qui le prend en charge
Les valeurs des curseurs sont lieacutees par une relation exprimant le compromis entre le taux de
compression et la qualiteacute de lrsquoimage
La boicircte de dialogue aide lrsquoutilisateur agrave syntheacutetiser les paramegravetres drsquoune commande drsquoenre-
gistrement de fichier La figure 315 montre une speacutecification pour cette tacircche de synthegravese de
paramegravetres de commande eacutecrite dans le langage deacuteclaratif speacutecifique de laquo Adam raquo Dans 315
les sections laquo interface raquo laquo output raquo et laquo invariant raquo deacuteclarent les variables ou les proprieacuteteacutes
du modegravele de proprieacuteteacutes Les variables drsquointerface peuvent ecirctre mises agrave jour par un client du
modegravele de proprieacuteteacute par exemple agrave la suite de lrsquointeraction drsquoun utilisateur avec un widget
drsquointerface utilisateur Les valeurs des variables de sortie (output) constituent le reacutesultat de la
synthegravese des paramegravetres de commande La valeur (booleacuteenne) des variables invariantes indique
si un ensemble de variables satisfait une condition donneacutee La section laquo logique raquo dans 315
deacutefinit toujours les deacutependances et les regravegles de calcul entre les variables Le langage pour
ces calculs est le langage drsquoexpression ASL qui peut faire des appels aux fonctions externes
84
sheet save image file interface
file name file type rdquobmprdquocompression ratio 100image quality 100
logicrelate compression ratio lt== 100 - 4 x (100 - image quality)image quality lt== 100 - (100 - compression ratio) 4
outputresult lt== (file type == rdquojpegrdquo) type file type name file name ratio compression ratio type file type name file name
invariant check name lt== file name 6= rdquo rdquo
Figure 315 ndash Une simple speacutecification deacuteclarative dans le langage Adam du modegravele de proprieacuteteacutepour le dialogue dans Figure314 [56]
enregistreacutees (C ++) et peut ainsi effectuer des actions arbitraires La tacircche du programmeur de
lrsquoapplication est de deacutefinir ces calculs appeleacutes meacutethodes et qui sont exeacutecuteacutees est controcircleacutees
par le modegravele de proprieacuteteacutes
Le langage laquo Eve raquo peut ecirctre utiliseacute pour speacutecifier la disposition et la qualiteacute de preacutesentation
des eacuteleacutements drsquointerface ainsi que les liaisons entre les widgets dans lrsquointerface utilisateur et
les valeurs dans le modegravele de proprieacuteteacute La speacutecification de disposition pour le dialogue de la
figure 314 apparaicirct dans la figure 316
Nous allons cependant les rejeter ainsi que beaucoup drsquoautres langages de balisage GUI
(QML XAML) car ils visent agrave geacuteneacuterer des interfaces baseacutees sur des contraintes et ne peuvent
pas ecirctre utiliseacutes comme des assertions agrave tester de plus ils se concentrent principalement sur
la reacutesolution de contraintes lineacuteaires relatives agrave la taille et au placement des eacuteleacutements dans un
formulaire
85
layout save image file view dialog(name rdquoSave Image Asrdquoplacement place columnspacing 6child horizontal align fill) edit text(bind file name name rdquoFile namerdquo)popup(bind file type name rdquoSave as typerdquo items [
name rdquoWindows bitmap (bmp)rdquo value rdquobmprdquo name rdquoJPEG (jpeg)rdquo value rdquojpegrdquo
])row()
column(child horizontal align right) label(name rdquoCompression ratiordquo)label(name rdquoImage qualityrdquo)
column(horizontal align fill child horizontal align fill)
slider(bind compression ratioformat first 1 last 100 interval 1 )
slider(bind image qualityformat first 1 last 100 interval 1 )
row(horizontal align right) button(name rdquoSaverdquo action ok bind result
default true)button(name rdquoCancelrdquo action cancel)
Figure 316 ndash Une simple speacutecification avec Eve [56]
86
Pour montrer pourquoi les langages de geacuteneacuteration de GUI ne sont pas approprieacutes consideacute-
rons lrsquoexemple simple de CSS Comme nous lrsquoavons vu plus haut CSS exprime agrave quoi les
eacuteleacutements devraient ressembler (suggestions) mais pas comment ils vont lrsquoecirctre Consideacuterez les
deacuteclarations de style suivantes dans le cas ougrave un eacuteleacutement div2 est imbriqueacute dans div1
div1 width 200px div2 width 300px
Il nrsquoest pas possible avec CSS drsquoaffirmer que le contenu de div1 ne devrait jamais ecirctre plus
large que sa propre largeur deacuteclareacutee Si tel est le cas le navigateur peut soit deacutevelopper la boicircte
de lrsquoeacuteleacutement (sans tenir compte de sa deacuteclaration) soit afficher les eacuteleacutements en dehors de son
conteneur (un problegraveme dont nous avons beaucoup parleacute dans la section 22) La seule solution
consiste pour le concepteur du document CSS agrave srsquoassurer que la largeur deacuteclareacutee de tous les
eacuteleacutements qui seront contenus dans div1 est infeacuterieure agrave 200 pixels En revanche une proprieacuteteacute
deacuteclarative pourrait facilement imposer agrave lrsquoexeacutecution que la largeur de div1 est toujours de
200 pixels
On pourrait argumenter que cela peut aussi ecirctre veacuterifieacute en analysant statiquement le document
HTML avec le fichier CSS (bien qursquoaucun travail apparenteacute ne semble reacutepondre agrave cette
question) Il y a cependant des cas ougrave ce nrsquoest mecircme pas possible Si nous supprimons la
deacuteclaration de div2 dans lrsquoexemple ci-dessus mais que div2 contient une image de 300 pixels
de large il est impossible de deacutecouvrir que la proprieacuteteacute deacutesireacutee nrsquoest pas satisfaite en regardant
simplement le CSS
En guise drsquoexemple final consideacuterons le code suivant qui stipule que les eacuteleacutements de certains
menus doivent ecirctre placeacutes verticalement et que leur taille est fixe
menu li float left
87
width 200pxheight 50px
Rien ne permet au concepteur de speacutecifier que tous les eacuteleacutements doivent toujours ecirctre sur la
mecircme ligne (c-agrave-d Avoir la mecircme position top) (mecircme si la valeur de top est deacutefinie) Ce
ne sera pas le cas si la fenecirctre contenant est redimensionneacutee suffisamment petite pour que les
eacuteleacutements puissent flotter en dessous Dans un tel cas il faut effectivement rendre la page dans
un navigateur avec ses dimensions reacuteelles pour deacutecouvrir la preacutesence du problegraveme
334 GALEN FRAMEWORK
Galen Framework [10] est une bibliothegraveque de tests drsquointerfaces graphiques pour tester les
mises en page drsquoapplications web Le comportement mutuel entre les diffeacuterents eacuteleacutements
drsquoune interface graphique et le type de paramegravetres de mise en page valides sont deacutecrits
par des descriptions de mise en page creacutees par lrsquoutilisateur La veacuterification de la validiteacute
de lrsquoemplacement et la taille des eacuteleacutements est reacutealiseacutee par un test oracle en utilisant ces
descriptions
Pour deacuteclarer divers aspects de la position et de la taille drsquoun eacuteleacutement par rapport agrave drsquoautres
eacuteleacutements ou en valeurs absolues le deacuteveloppeur de test utilise un langage de description de
test personnaliseacute fourni par le framework Galen Galen est baseacute sur un outil drsquoautomatisation
de navigateur web appeleacute Selenium qui permet de creacuteer des scripts automatiseacutes simulant les
entreacutees de lrsquoutilisateur Il permet eacutegalement de speacutecifier des plages de valeurs acceptables La
figure 317 montre un exemple de ce agrave quoi ressemble une speacutecification Galen [9]
Le test de reacutegression des mises en page drsquoapplications web est entiegraverement automatiser par
le framework Galen en combinant ces deux technologies Des informations preacutecises sur les
88
valeurs valides pour les eacuteleacutements de lrsquointerface eacutetant neacutecessaires au fichier de speacutecification
requis par le framework Galen cette opeacuteration peut ecirctre coucircteuse et rendre la modification
drsquoune interface graphique plus difficile
Un regard sur le langage de speacutecification de Galen indique que le travail requis par le deacute-
veloppeur de test est similaire agrave la speacutecification de lrsquointerface graphique elle-mecircme Les
speacutecifications de Galen et la conception GUI elle-mecircme sont effectueacutees avec agrave peu pregraves la
mecircme freacutequence Lrsquoinconveacutenient est la flexibiliteacute reacuteduite et lrsquoaugmentation des coucircts Cepen-
dant lrsquoapproche permet une grande preacutecision lors de la reacutealisation des tests de reacutegression et la
veacuterification de la fonctionnaliteacute de la conception sur diffeacuterentes tailles drsquoeacutecran
335 ITARRAY AUTOMOTION
Le framework Automotion drsquoITArray [70] est similaire au framework Galen La diffeacuterence
par rapport agrave beaucoup drsquoautres frameworks est que la bibliothegraveque drsquoassertions permet
reacuteellement drsquoaffirmer si la position et lrsquoalignement des eacuteleacutements sont lieacutes les uns aux autres
avec des appels tels que is ElementInside (otherElement) ou areElementsAligned
(List) La faccedilon dont ces tests sont speacutecifieacutes est encore tregraves verbeuse Un exemple de script
Automotion est illustreacute agrave la Figure 318
34 OUTILS RWD
Il est toujours judicieux de tester la conception drsquoun site web sur divers appareils Mais
cette meacutethode classique prend beaucoup de temps et en raison de la varieacuteteacute des dispositifs
disponibles aujourdrsquohui le deacuteveloppeur peut ne pas avoir accegraves agrave tous ces dispositifs Plusieurs
outils ont eacuteteacute deacuteveloppeacutes pour fournir le service permettant drsquoafficher une page dans une
89
Declaring objects with css and xpath locatorsobjects
header css divfusion-secondary-headersw-logo css fusion-logo-link
navigation-links- xpath ul[id=rsquomenu-mainrsquo]li[not((contains(idrsquomobile-menu-itemrsquo)))]nav-menu css divfusion-secondary-main-menufollow-us-box xpath div[contains(classrsquofusion-alertrsquo)][1]
Home Page Tag= Home Page =
This is for Desktopon desktop
Header propertiesheader
inside screen 0px topinside screen 0px leftinside screen 0px right
Logo propertiessw-logo
31 px below the headerbelow header 31pxImage comparison with 2 precision ratioimage file sw-logopng error 5
Each navigation links must be alligned horizontally to each otheritemName -gt Current item and nextItem -gt Next itemforEach [navigation-links-] as itemName next as nextItem
$itemNamealigned horizontally all $nextItem
Navigation menu must be 20px above to the follow us allert boxnav-menu
above follow-us-box 20px
Figure 317 ndash Exemple drsquoune speacutecification Galen [9]
90
boolean result = uiValidatorinit(Scenario name)findElement(rootElement Name of eacuteleacutement we validate)sameOffsetLeftAs(eacuteleacutement Panel 1)sameOffsetLeftAs(eacuteleacutement Button 1)sameOffsetRightAs(eacuteleacutement Button 2)sameOffsetRightAs(eacuteleacutement Button 3)withCssValue(border 2px solid FBDCDC)withCssValue(border-radius 4px)withoutCssValue(color FFFFFF)sameSizeAs(list_eacuteleacutements)insideOf(eacuteleacutement Container)notOverlapWith(eacuteleacutement Other eacuteleacutement)withTopElement(eacuteleacutement 10 15)changeMetricsUnitsTo(ResponsiveUIValidatorUnitsPERCENT)widthBetween(50 55)heightBetween(90 95)drawMap()validate()
Figure 318 ndash Exemple drsquoun script Automotion [70]
fenecirctre personnaliseacutee de tailles variables agrave lrsquoaide drsquoun navigateur Web Cependant ces outils
ne fournissent aucune information autre que le rendu des pages sur diffeacuterentes tailles ce
qui oblige le deacuteveloppeur agrave eacutevaluer la reacuteactiviteacute (responsiveness) du site web manuellement
Mentionnons ici quelques outils speacutecifiques agrave la deacutetection de problegravemes lieacutes au RWD
Avec des fonctionnaliteacutes de recherche intelligente et de reacutevision rapide WebSiteResponsi-
veTest [34] prend en charge tous les principaux navigateurs pour fournir lrsquoaperccedilu exact du
site web sur un peacuteripheacuterique speacutecifique Il faut entrer lrsquoURL drsquoune page Web pour eacutevaluer
rapidement la reacuteactiviteacute En fournissant des reacutesultats preacutecis en quelques secondes lrsquooutil
eacuteconomise beaucoup de temps La convivialiteacute et la compatibiliteacute avec les navigateurs sont
drsquoautres fonctionnaliteacutes qui le rendent attractif par rapport aux autres outils disponibles
Respondr [22] permet de veacuterifier la reacuteactiviteacute en entrant lrsquoURL drsquoun site web En outre
lrsquoappareil pour lequel le site web ou la page Web est testeacute peut eacutegalement ecirctre choisi dans la
91
liste donneacutee Une fois les seacutelections effectueacutees un simple clic sur laquo Go raquo est neacutecessaire pour
recevoir une analyse complegravete du site ou de la page web en donnant lrsquoaffichage sur lrsquoappareil
seacutelectionneacute La page peut ecirctre facilement preacutevisualiseacutee agrave une largeur approprieacutee
Screenfly [27] est un outil de test de compatibiliteacute multi-peacuteripheacuterique qui permet de preacutevisua-
liser les pages Web telles qursquoelles apparaissent sur diffeacuterents appareils Les plus populaires
comprennent les tablettes et autres appareils intelligents tels que Galaxy Tab Apple iPad
Motorola Xoom En outre il prend en charge diffeacuterentes tailles drsquoeacutecran et reacutesolutions Le site
deacutetecte automatiquement si lrsquoURL saisie comporte un site mobile et vous redirige vers celui-ci
Pour basculer entre les reacutesolutions drsquoeacutecran tout ce qursquoil faut faire est de cliquer sur lrsquoicocircne du
type drsquoappareil ou choisir lrsquoappareil qui a la reacutesolution drsquoeacutecran la plus proche
Responsive Web Design Bookmarklet [26] affiche nrsquoimporte quelle page Web dans plusieurs
tailles drsquoeacutecran pour la preacutevisualisation simulant la fenecirctre drsquoaffichage de diffeacuterents peacuteripheacute-
riques Il srsquoagit drsquoun outil de conception Web rapide qui peut ecirctre consulteacute agrave partir drsquoun
ordinateur de bureau pour tester la reacuteactiviteacute de tout site web Il suffit de faire glisser le
bookmarklet au-dessus de la barre des signets (bookmarks) pour obtenir une barre drsquooutils
en haut avec des boutons pour diffeacuterentes reacutesolutions drsquoeacutecran Il ne reste plus qursquoagrave choisir
lrsquoaperccedilu de la page en cours sur diffeacuterentes largeurs drsquoeacutecran de tablettes et de smartphones
ViewPortResizer [31] est eacutegalement un bookmarklet de navigateur qui peut ecirctre utiliseacute avec
nrsquoimporte quel navigateur Web moderne Un outil de navigation convivial ViewPortResizer
est entiegraverement configurable Il permet la seacutelection drsquoune plage initiale de tailles de reacutesolution
drsquoeacutecran et la construction drsquoun bookmarklet personnaliseacute
Responsinator [23] aide les proprieacutetaires de sites agrave avoir une ideacutee de la faccedilon dont leur
site fonctionnera sur les appareils les plus populaires Juste en tapant lrsquoURL du site le site
srsquoaffichera rapidement sur des eacutecrans de diffeacuterent(e)s tailles
92
Le processus de ResponsivePX [24] consiste agrave entrer lrsquoURL du site et utiliser des boutons
pour ajuster la largeur et la hauteur de la fenecirctre drsquoaffichage afin de trouver la largeur exacte
du point drsquoarrecirct en pixels Extrecircmement simple agrave utiliser et agrave ameacuteliorer les fonctionnaliteacutes cet
outil de conception Web aide les concepteurs agrave creacuteer des sites utilisables et reacuteactifs
Froont [8] rend les tests de conception Web reacuteactifs accessibles sans neacutecessiteacutes de compeacutetences
de codage Les conceptions peuvent ecirctre creacutees dans le navigateur avec cet outil En testant
chaque URL speacutecifiquement il teste les conceptions sur de vrais appareils tout de suite
De son cocircteacute ReDeCheck [74] [73] est un outil de test de conception web reacuteactif Il est inspireacute
du graphe drsquoalignement utiliseacute dans X-PERT un concept proposeacute et deacuteveloppeacute par Choudhary
et al [42] ReDeCheck se concentre speacutecifiquement sur les bugs de mise en page causeacutes par
des conceptions reacuteactives il utilise un graphique de mise en page adaptable (RLG) qui tient
compte de lrsquoalignement des eacuteleacutements de la page Web des changements de visibiliteacute et drsquoautres
aspects de la page lorsque la largeur de la fenecirctre varie En tant que tel ReDeCheck peut
seulement veacuterifier un ensemble fixe de problegravemes de mise en page preacutedeacutefinis et ne fournit pas
un langage agrave usage geacuteneacuteral pour exprimer des assertions
35 DISCUSSION SUR LES APPROCHES EXISANTES
Nous allons maintenant discuter quelques limites des approches preacuteceacutedemment preacutesenteacutees
351 INCONVEacuteNIENTS DE LrsquoAPPROCHE DEacuteCLARATIVE
Le deacuteveloppeur de test doit se soumettre aux exigences des descriptionsscripts de test assez
verbeux en deacutecrivant les regravegles de son interface graphique (comment les eacuteleacutements sont-ils
placeacutes les uns par rapport aux autres comment ils devraient se comporter quand la taille de
93
la fenecirctre change etc) de faccedilon plus deacutetailleacutee au point ougrave le script de test devient presque
aussi descriptif que le code de lrsquointerface graphique qursquoil teste A lrsquoinstar des scripts de test
ce problegraveme neacutecessitera des mises agrave jour agrave peu pregraves au mecircme rythme que les modifications
apporteacutees agrave la conception de lrsquointerface graphique
352 LIMITES DES TECHNIQUES VISUELLES
Impossible de comparer des images de diffeacuterentes tailles drsquoeacutecran Le fait drsquoassurer lrsquoeacutega-
liteacute et la validiteacute entre une image de reacutefeacuterence (oracle) et lrsquoimage agrave tester par la diffeacuterence de
couleur de pixel implique que celles-ci ne peuvent pas ecirctre des captures drsquoeacutecran de tailles
drsquoeacutecran diffeacuterentes ce qui exclut lrsquoutilisation de lrsquoimage de reacutefeacuterence agrave partir drsquoune taille
drsquoeacutecran pour veacuterifier la validiteacute de la mise en page sur une taille drsquoeacutecran diffeacuterente La validiteacute
de la mise en page drsquoune application censeacutee fonctionner sur de nombreuses tailles drsquoeacutecran
diffeacuterentes par ces techniques exige drsquoeacutetablir des reacutefeacuterences pour toutes les tailles drsquoeacutecran
Ne fonctionne pas bien avec les donneacutees dynamiques Ces techniques baseacutees sur lrsquoimage
et travaillant sur lrsquoinformation de pixel au lieu du contenu ne donnent des reacutesultats satisfaisants
qursquoavec des donneacutees statiques (parce qursquoon utilise une image de reacutefeacuterence pour faire la
comparaison) Par conseacutequent elles posent un problegraveme majeur Chaque exeacutecution drsquoune
application correspond souvent agrave un affichage du contenu diffeacuterent puisque ces donneacutees sont
geacuteneacuteralement reacutecupeacutereacutees sur un serveur Web ou creacutees par lrsquoutilisateur mdashce qui diminue
fortement lrsquoutiliteacute de ces techniques
Signalent beaucoup de faux positifs Une diffeacuterence dans les valeurs de pixels de deux
captures drsquoeacutecran conseacutecutives peut entre constateacutee notamment si ces captures sont prises
sur des machines diffeacuterentes avec des configurations diffeacuterentes drsquoougrave lrsquoinconveacutenient des
94
Figure 319 ndash Exemple de faux positif avec PhantomCSS
techniques baseacutees sur les diffeacuterences drsquoimages qui sont sujettes agrave la deacuteclaration de faux positifs
comme indiqueacute sur le site web du reacutefeacuterentiel PhantomCSS [20] Ces petites diffeacuterences de
pixels sont parfois faussement signaleacutees par lrsquoalgorithme de test comme des erreurs de mise
en page cependant elles ne le sont pas reacuteellement La figure 319 montre un exemple de ce
cas ougrave nous pouvons observer de petites zones de pixels violets (nous avons marqueacutees ces
petites zones avec des rectangles rouges) ces images ressemblent aux images de base qui
sont entoureacutees de rectangles jaunes En reacutealiteacute ce sont pas des erreurs mais des faux neacutegatifs
rapporteacutes en raison de petites diffeacuterences de pixels dans des rendus diffeacuterents (cela pourrait
ecirctre ducirc agrave lrsquoutilisation de diffeacuterents navigateurs)
En conclusion le tableau 31 donne les grandes lignes de diffeacuterences entre trois outils majeurs
des approches existantes
95
Sahi Selinium Websee
Pas de plugin (so-lution proxy web) Plugin speacutecifique pour chaque navigateur
Configurationspeacutecifique etbibliothegravequestierces pourimpleacutementercertains desalgorithmesspeacutecialiseacutes
Tests fonctionelsdes eacuteleacutements de lapage baseacute sur letrafique HTTP en-registreacute au niveaudu proxy (play-back)
Tests fontionels
Tests de mise enpage en se ba-sant sur une ver-sion de reference(juste pour despages statiques)
Tableau 31 ndash Limites et diffeacuterences entre trois outils majeurs des approches existantes
CHAPITRE 4
DEacuteTECTION DE BUGS DrsquoINTERFACE
Comme nous avons pu le voir une analyse statique du contenu HTML et des deacuteclarations
CSS drsquoune page web nrsquoest pas suffisante pour deacutetecter les bugs drsquointerface citeacutes dans le
deuxiegraveme chapitre de cette thegravese car CSS nrsquoest pas un langage qui peut exprimer des proprieacuteteacutes
normatives pour la mise en page drsquoun document Les deacuteclarations CSS sont juste un ensemble
drsquoinstructions traiteacutees par un moteur de rendu Donner agrave CSS une expressiviteacute prescriptive
impliquerait la possibiliteacute de speacutecifier agrave quoi un eacuteleacutement ne doit pas ressembler ou qursquoune
deacuteclaration de style particulier ne peut pas ecirctre remplaceacutee par drsquoautres constructions ndashce
que le CSS ne fournit pas En outre certains des bugs deacutecrits preacuteceacutedemment impliquent la
comparaison du contenu drsquoun document agrave plusieurs moments dans le temps une chose que
CSS nrsquoest pas eacutevidemment conccedilu pour faire
Par conseacutequent afin drsquoexprimer des proprieacuteteacutes normatives pour le contenu et la mise en page
drsquoune page web un langage compleacutementaire agrave CSS est neacutecessaire Ce langage doit permettre
aux utilisateurs drsquoeacutecrire des proprieacuteteacutes deacuteclaratives sur les styles des eacuteleacutements et de traiter
des eacuteveacutenements quelles que soient les deacuteclarations CSS ou le code cocircteacute client qui ont pu ecirctre
deacuteclareacutees
Pour combler cette neacutecessiteacute dans ce chapitre nous preacutesentons Cornipickle un langage
97
deacuteclaratif permettant drsquoexprimer des proprieacuteteacutes agrave propos du document et des proprieacuteteacutes CSS
drsquoune page On discutera eacutegalement drsquoune impleacutementation drsquoun algorithme permettant de
veacuterifier automatiquement si des eacutenonceacutes du langage sont vrais pour un site web particulier
41 UN INTERPREacuteTEUR POUR LES PROPRIEacuteTEacuteS CORNIPICKLE
Nous deacutecrivons maintenant la mise en œuvre de lrsquointerpreacuteteur pour lrsquoeacutevaluation automatiseacutee
des speacutecifications Cornipickle sur les applications web Cette impleacutementation est composeacutee
drsquoenviron 7 000 lignes de code Java et JavaScript et est disponible sous licence publique
geacuteneacuterale GNU 1 Une videacuteo de lrsquooutil en action sur des exemples simples peut eacutegalement ecirctre
consulteacutee en ligne 2
411 OBJECTIFS DE CONCEPTION
Outre la fonctionnaliteacute principale agrave mettre en œuvre le deacuteveloppement de lrsquooutil a eacuteteacute motiveacute
par un certain nombre drsquoobjectifs de conception importants
Pas de plugins speacutecifiques au navigateur
Tout drsquoabord la solution doit fonctionner sur autant de combinaisons de navigateurs et de
systegravemes drsquoexploitation que possible Ceci exclut explicitement les plugins speacutecifiques au
navigateur (ou limiteacutes par le navigateur) tels que les plugins Chrome les plugins Firefox
ou lrsquoutilisation drsquooutils tels que Selenium WebDriver Pour la mecircme raison la solution ne
doit pas reposer sur la preacutesence de frameworks JavaScript (jQuery Prototype etc) et ecirctre
1 httpsgithubcomliflabcornipickle2 httpyoutube90YitGRRx2w
98
autonome Cela implique que notre outil peut fonctionner dans des combinaisons inhabituelles
(navigateurssystegravemes drsquoexploitation) comme BoatBrowser sur un teacuteleacutephone Android ou
Qupzilla sous Haiku OS
Collecte drsquoinformations cocircteacute client
Deuxiegravemement lrsquoeacutevaluation des speacutecifications doit ecirctre faite en fonction des informations
recueillies sur le client cela eacutecarte la possibiliteacute drsquoeffectuer une eacutevaluation statique de HTML
et CSS du cocircteacute serveur Ceci est obligatoire pour plusieurs raisons Il faut tenir compte du
fait que le standard CSS nrsquoest pas interpreacuteteacute de la mecircme maniegravere par tous les navigateurs Par
exemple CSS stipule que la largeur drsquoun eacuteleacutement nrsquoinclut pas le remplissage mais certaines
versions drsquoInternet Explorer incluent le remplissage dans la largeur et rendent le mecircme eacuteleacutement
avec des dimensions diffeacuterentes
Dans une large mesure la veacuterification des contraintes en examinant uniquement le code
HTML + CSS impliquerait drsquoeacutemuler le moteur de rendu de chaque navigateur compleacuteteacute par
ses laquo bizarreries raquo speacutecifiques pour parvenir agrave un verdict fidegravele
En plus des problegravemes susmentionneacutes toutes les applications que nous avons eacutetudieacutees
contiennent du code cocircteacute client qui peut modifier la disposition drsquoune page apregraves que le
moteur de mise en page a traiteacute les deacuteclarations statiques trouveacutees dans le document HTML
initial et les fichiers CSS traiteacutes au moment du chargement Ce code programmeacute pour ecirctre
exeacutecuteacute lors du chargement de la page remplace complegravetement les deacuteclarations de style que
les fichiers CSS drsquoorigine peuvent initialement deacutefinir Par conseacutequent dans tous les cas il ne
suffit pas drsquoanalyser lrsquoensemble des fichiers HTML et CSS deacutefinis par lrsquoapplication car tout
ce contenu peut ecirctre modifieacute agrave la voleacutee gracircce agrave des interactions avec lrsquoutilisateur une fois la
page chargeacutee
99
Pas drsquointerpreacutetation cocircteacute client
Troisiegravemement lrsquointerpreacutetation des speacutecifications de Cornipickle ne devrait pas ecirctre faite du
cocircteacute des clients Ceci est fait de maniegravere agrave ne pas imposer une charge de calcul excessive
dans le navigateur et permet lrsquoutilisation drsquoun autre langage que JavaScript pour lrsquoimpleacute-
mentation de cette fonctionnaliteacute Plus important encore il permet de geacuterer les proprieacuteteacutes
comportementales impliquant plus drsquoun instantaneacute de page par lrsquooutil En utilisant du code
strictement client un problegraveme survient lorsqursquoun rechargement de page complet se produit
car cela reacuteinitialise lrsquoeacutetat de tout objet JavaScript associeacute agrave cette page Eacutetant donneacute que les
speacutecifications comportementales requiegraverent la sauvegarde des informations du passeacute certains
moyens de preacuteserver ces informations dans le client agrave travers les rechargements de pages
doivent ecirctre conccedilus HTML5 fournit des fonctionnaliteacutes de stockage mais leur utilisation
limiterait la prise en charge des navigateurs (par exemple uniquement pour Opera 115 Safari
4 et IE 9 et plus reacutecents 3)
Interpreacutetation de lrsquoexeacutecution
Enfin il devrait ecirctre possible pour un utilisateur drsquoajouter de supprimer ou de modifier les
speacutecifications eacutevalueacutees par lrsquooutil Cela pose un deacutefi en raison de la construction speacuteciale We
say that qui permet drsquoajouter de nouvelles constructions grammaticales dans le langage de
base Ceci est diffeacuterent des deacutefinitions de fonction ou de preacutedicat habituelles disponibles dans
la plupart des langages ougrave la syntaxe des appels de fonctions est fixe et seuls de nouveaux
identificateurs de fonctions peuvent ecirctre ajouteacutes au moment de lrsquoanalyse Cela a neacutecessiteacute le
deacuteveloppement drsquoun analyseur BNF appeleacute Bullwinkle 4 qui peut accepter de nouvelles regravegles
3 httpwwwhtml5rockscomenfeaturesstorage4 httpsgithubcomsylvainhalleBullwinkle
100
Figure 41 ndash Architecture et interactions de Cornipickle
drsquoanalyse agrave lrsquoexeacutecution mdashcontrairement agrave la plupart des autres analyseurs qui neacutecessitent une
eacutetape de compilation chaque fois que la grammaire change
412 ARCHITECTURE ET SCEacuteNARIO DrsquoUTILISATION TYPIQUE
La combinaison de toutes les exigences dans [51] impose plus ou moins une architecture pour
lrsquooutil Cornipickle ougrave le code cocircteacute serveur prend en charge la collecte et lrsquoeacutevaluation des
speacutecifications (caracteacuteristiques) tandis que le code cocircteacute client agit uniquement comme une
laquo sonde raquo Lrsquointerrogation des informations pertinentes sur lrsquoeacutetat actuel de la page est relayeacutee
vers le serveur pour un traitement ulteacuterieur Cette interaction client-serveur a un avantage
cependant le code cocircteacute client peut ecirctre relativement leacuteger et sans eacutetat (ecirctre remis agrave zeacutero agrave
chaque fois que la page se recharge) comme tout traitement agrave eacutetat qui peut ecirctre fait par le
serveur
La figure 41 montre les interactions avec lrsquooutil Cornipickle Un deacuteveloppeur eacutecrit drsquoabord un
jeu drsquoeacutetats deacuteclaratifs (1) qui sont stockeacutes dans la meacutemoire de Cornipickle (2) En donnant
101
tagname windowwidth 956height 165 children [
tagname pid gowidth 90 children [
tagname CDATA text Hello World
]
]
Figure 42 ndash Une page simple seacuterialiseacutee en JSON
un identifiant unique agrave ce jeu drsquoeacutetats qui peut ecirctre appeleacute dans le code JavaScript agrave ecirctre
inseacutereacute dans lrsquoapplication afin que la sonde peut ecirctre chargeacutee dans chaque page (3-4) cette
addition est geacuteneacuterique et ne diffegravere que dans la chaicircne drsquoidentification Quand une page
de lrsquoapplication doit ecirctre chargeacutee (5) Cornipickle creacutee dynamiquement la sonde JavaScript
correspondant agrave lrsquoensemble drsquoassertions pour les eacutevaluer et les envoyer au client (6-8) Cette
sonde est conccedilue pour signaler un instantaneacute des donneacutees DOM et CSS pertinents sur chaque
eacuteveacutenement deacuteclencheacute par lrsquoutilisateur Quand un tel eacuteveacutenement se produit la sonde recueille
toutes les informations pertinentes sur le contenu de la page (figure 42) et les relaie au serveur
Cornipickle (9) qui les enregistre dans un journal (10-11)
En option des informations sur lrsquoeacutetat actuel des assertions en cours drsquoeacutevaluation (vrai
faux) peuvent ecirctre relayeacutees agrave la sonde (12) Un tableau de bord drsquoanalyse peut reacutecupeacuterer le
journal enregistreacute qui peut ecirctre consulteacute par le deacuteveloppeur pour interroger lrsquoeacutetat de toutes les
102
Figure 43 ndash Une capture drsquoeacutecran de Cornipickle en action
proprieacuteteacutes drsquoentreacutee au deacutebut du processus (13-16)
La figure 43 montre un exemple de Cornipickle en action Dans ce cas la sonde injecteacutee a
inseacutereacute une petite icocircne dans le coin infeacuterieur droit de la fenecirctre qui devient rouge chaque fois
qursquoune proprieacuteteacute est violeacutee Pour contourner le fait que de nombreux navigateurs deacutesactivent
les requecirctes HTTP inter-site Ajax nrsquoest pas utiliseacute pour la communication entre le client et le
serveur La sonde envoie plutocirct ses donneacutees en modifiant lrsquoattribut src drsquoune image de zeacutero
pixel injecteacutee dans la page et en passant les donneacutees collecteacutees en tant que paramegravetres GET de
cette requecircte En sens inverse le serveur relaie les informations via un cookie speacutecialement
encodeacute que la sonde peut interroger peacuteriodiquement De cette faccedilon le serveur Cornipickle
peut reacutesider sur un serveur diffeacuterent de celui de lrsquoapplication testeacutee et avoir toujours une
communication bidirectionnelle ponctuelle avec sa sonde
103
42 LE LANGAGE CORNIPICKLE
Le langage Cornipickle comporte des constructions issues de la logique du premier ordre et de
la logique temporelle lineacuteaire tels que les quantificateurs et les opeacuterateurs temporels et qui
permettent agrave un utilisateur de speacutecifier des relations complexes sur les diffeacuterents eacuteleacutements du
document agrave plusieurs moments dans le temps caracteacuteristique qui est absente dans beaucoup
de langages de script
Cornipickle nrsquoest pas un convertisseur baseacute sur des expressions reacuteguliegraveres entre des fichiers
texte et des commandes de script mais sa grammaire lutte pour le mecircme genre de lisibiliteacute En
particulier pour ameacuteliorer la lisibiliteacute la grammaire de Cornipickle permet drsquoinseacuterer diffeacuterents
mots agrave lrsquointeacuterieur des diffeacuterentes constructions Ces mots nrsquoont aucun effet sur lrsquoanalyse et
lrsquointerpreacutetation des expressions
421 SYNTAXE DU LANGAGE
Dans Cornipickle les proprieacuteteacutes sont exprimeacutees sous forme drsquoassertions sur le contenu et les
attributs drsquoune capture (snapshot) drsquoune page prise agrave un instant donneacute La maniegravere preacutecise par
laquelle ces captures sont prises agrave partir drsquoune application web donneacutee sera deacutetailleacutee plus loin
Nous commenccedilons par une illustration des diffeacuterentes constructions de la grammaire dans le
tableau 41
Seacutelection drsquoeacuteleacutements Les eacuteleacutements de la page sont lrsquouniteacute principale dans Cornipickle ils
sont seacutelectionneacutes afin drsquoexprimer quelques-unes de leurs proprieacuteteacutes Ces proprieacuteteacutes peuvent
ecirctre appliqueacutees agrave tous les eacuteleacutements seacutelectionneacutes ou au moins agrave un
104
〈S〉 = 〈predicate〉 | 〈def-set〉 | 〈statement〉
Eacutenonceacutes Cornipickle
〈statement〉 = 〈foreach〉 | 〈exists〉 | 〈binary-stmt〉 | 〈negation〉| 〈temporal-stmt〉 | 〈userdef-stmt〉 | 〈let〉 | 〈when〉〈binary-stmt〉 = 〈equality〉 | 〈gt〉 | 〈lt〉 | 〈regex-match〉 | 〈and〉 | 〈or〉 | 〈implies〉〈temporal-stmt〉 = 〈globally〉 | 〈eventually〉 | 〈never〉 | 〈next〉 | 〈next-time〉
Logique du premier ordre
〈foreach〉 = For each 〈var-name〉 in 〈set-name〉 ( 〈statement〉 )〈exists〉 = There exists 〈var-name〉 in 〈set-name〉 such that ( 〈statement〉 )〈when〉 = When 〈var-name〉 is now 〈var-name〉 ( 〈statement〉 )〈let〉 = Let 〈var-name〉 be 〈property-or-const〉 ( 〈statement〉 )〈and〉 = ( 〈statement〉 ) And ( 〈statement〉 )〈or〉 = ( 〈statement〉 ) Or ( 〈statement〉 )〈implies〉 = If ( 〈statement〉 ) Then ( 〈statement〉 )〈negation〉 = Not ( 〈statement〉 )
Expressions temporelles
〈globally〉 = Always ( 〈statement〉 )〈never〉 = Never ( 〈statement〉 )〈next〉 = Next ( 〈statement〉 )〈eventually〉 = Eventually ( 〈statement〉 )〈next-time〉 = The next time ( 〈statement〉 ) Then ( 〈statement〉 )
Tableau 41 ndash La grammaire BNF pour Cornipickle (Partie I)
105
Par conseacutequent la seacutelection de lrsquoeacuteleacutement se fait par le biais de la quantification du pre-
mier ordre classique en utilisant lrsquoanglais pour la syntaxe comme For each $x in S
ou There exists $x in S(pour dire chaque $x dans S ou Il existe $x dans S) Dans ces
expressions S deacutesigne soit un seacutelecteur CSS 5 ou un autre ensemble preacuteceacutedemment deacutefini par
lrsquoutilisateur Les seacutelecteurs CSS sont exprimeacutes en utilisant la syntaxe de jQuery $( ) Un
seacutelecteur speacutecial appeleacute CDATA peut ecirctre utiliseacute pour deacutesigner le contenu du texte des nœuds
feuilles dans un arbre DOM (les parties qui composent la page en texte clair) Si $x est une
variable quantifieacutee en utilisant le meacutecanisme deacutecrit ci-dessus on peut acceacuteder au DOM ou aux
attributs CSS de cet eacuteleacutement en utilisant $xrsquos property (ougrave property est lrsquoattribut CSS
rechercheacute) Par exemple la largeur de lrsquoeacuteleacutement srsquoeacutecrirait $xrsquos width
Les attributs de lrsquoeacuteleacutement (qui sont soit des chaicircnes de caractegraveres ou de chiffres) peuvent alors
ecirctre compareacutes en utilisant des connectifs tels que is greater than ou equals le matching
drsquoexpressions reacuteguliegraveres est fait agrave travers le preacutedicat match et lrsquoinclusion de chaicircne est affirmeacutee
par lrsquoassertion contains Des assertions de base sur les eacuteleacutements peuvent eacutegalement ecirctre
combineacutees en utilisant des connecteurs booleacuteens classiques and or if then not
Eacuteveacutenements et opeacuterateurs temporels Dans Cornipickle les eacuteveacutenements deacuteclencheacutes par
lrsquoutilisateur tels que les touches et les clics de souris sont repreacutesenteacutes comme des attributs
sur lrsquoeacuteleacutement qui est la cible de lrsquoeacuteveacutenement Par exemple un eacuteleacutement qui a eacuteteacute cliqueacute
par lrsquoutilisateur posseacutedera momentaneacutement un attribut event avec une valeur click Par
conseacutequent affirmer qursquoun eacuteleacutement $x a eacuteteacute cliqueacute peut ecirctre eacutecrit $xrsquos event is lsquoclickrsquo
Lrsquoinclusion drsquoeacuteveacutenements dans le langage conduit naturellement agrave la notion de seacutequences
de documents de captures instantaneacutees Par conseacutequent Cornipickle fournit des opeacuterateurs
5 Un seacutelecteur CSS est une expression de chemin (path expression) qui deacutefinit les eacuteleacutements drsquoun documentqui font lrsquoobjet drsquoun ensemble donneacute de regravegles Ces expressions sont deacutefinies par une grammaire reacuteguliegraverecomme stipuleacute dans la norme CSS
106
Opeacuterateurs
〈equality〉 = 〈property-or-const〉 equals 〈property-or-const〉| 〈property-or-const〉 is 〈property-or-const〉〈gt〉 = 〈property-or-const〉 is greater than 〈property-or-const〉〈lt〉 = 〈property-or-const〉 is less than 〈property-or-const〉〈regex-match〉 = 〈property-or-const〉 matches 〈property-or-const〉〈constant〉 = 〈number〉 | 〈string〉〈property-or-const〉 = 〈elem-property〉 | 〈constant〉〈number〉 = ˆd+〈string〉 = ˆ[ˆ]
Constructions auxiliaires
〈el-or-not〉 = eacuteleacutement | ε
〈set-name〉 = 〈css-selector〉 | 〈userdef-set〉 | 〈regex-capture〉〈userdef-set〉 = 〈string〉〈var-name〉 = ˆ$[wd]+
Seacutelecteur CSS
〈css-selector〉 = $( 〈css-sel-contents〉 )〈css-sel-contents〉 = 〈css-sel-part〉 〈css-sel-contents〉 | 〈css-sel-part〉〈css-sel-part〉 = ˆ[wdu0023]+
Attributs CSS
〈css-attribute〉 = value | height | width | top | left | right| bottom | color | id | text | border | event
Proprieacuteteacutes des eacuteleacutements
〈elem-property〉 = 〈elem-property-pos〉 | 〈elem-property-com〉〈elem-property-pos〉 = 〈var-name〉 rsquos 〈css-attribute〉〈elem-property-com〉 = the 〈css-attribute〉 of 〈var-name〉
Expressions reacuteguliegraveres
〈regex-capture〉 = match 〈elem-property〉 with 〈string〉
Tableau 42 ndash La grammaire BNF pour Cornipickle (Partie II)
107
emprunteacutes agrave la logique temporelle Lineacuteaire (LTL) pour exprimer des assertions sur lrsquoeacutevolution
du contenu drsquoun document au fil du temps
La construction Always ϕ nous permet de faire lrsquoassertion suivante quelle que soit lrsquoex-
pression de ϕ elle doit ecirctre vraie (True) dans tous les snapshots du document De mecircme on
utilise Eventually ϕ pour dire que ϕ sera vraie dans certains futurs snapshots du document
et Next ϕ est utiliseacute pour dire que ϕ est vrai dans la capture suivante
Une construction speacuteciale appeleacutee The next time ϕ then ψ affirme que ψ doit ecirctre vraie
mais seulement une fois que ϕ est Vraie Par exemple on peut utiliser cette construction pour
exprimer que quelque chose doit ecirctre observeacute apregraves qursquoun eacuteleacutement ait eacuteteacute cliqueacute lrsquoassertion
ne lie pas jusqursquoagrave ce moment Ceci est une leacutegegravere reacuteeacutecriture de lrsquoopeacuterateur until de LTL
Un but particulier des opeacuterateurs temporels est de comparer lrsquoeacutetat du mecircme eacuteleacutement sur plu-
sieurs snapshots Cela peut ecirctre fait dans Cornipickle avec la construction When $x is now $y ϕ
Si $x se reacutefegravere agrave lrsquoeacutetat drsquoun eacuteleacutement captureacute dans un snapshot anteacuterieur alors $y contiendra
lrsquoeacutetat du mecircme eacuteleacutement dans la capture (snapshot) actuelle
Toutes ces constructions peuvent ecirctre librement combineacutees Par exemple la proprieacuteteacute suivante
affirme que chaque eacuteleacutement de la liste se deacuteplacera vers le bas de la page agrave un certain moment
For each $x in $(li) (Eventually (
When $x is now $y ($yrsquos top is greater than $xrsquos top )))
Extension de la grammaire Une caracteacuteristique tregraves importante et exceptionnelle qui contri-
bue agrave la lisibiliteacute des speacutecifications Cornipickle est la possibiliteacute drsquoeacutetendre le vocabulaire de
base du langage Ce dernier donne aux utilisateurs cette possibiliteacute en utilisant leurs propres
deacutefinitions Ces nouvelles deacutefinitions seront lues par lrsquointerpreacuteteur et pourront ensuite ecirctre
108
Ensemble deacutefini en extension
〈def-set〉 = A 〈def-set-name〉 is any of 〈def-set-eacuteleacutements〉〈def-set-name〉 = ˆ ( =is)〈def-set-eacuteleacutements〉 = 〈def-set-eacuteleacutement〉 〈def-set-eacuteleacutements〉 | 〈def-set-eacuteleacutement〉〈def-set-eacuteleacutement〉 = 〈constant〉
Preacutedicats deacutefinis par lrsquoutilisateur
〈predicate〉 = We say that 〈pred-pattern〉 when ( 〈statement〉 )〈pred-pattern〉 = ˆ ( =when)
Eacutenonceacutes deacutefinis par lrsquoutilisateur
〈userdef-stmt〉 = empty
Tableau 43 ndash Extensions de la grammaire BNF pour Cornipickle
utiliseacutees librement comme tout eacuteleacutement de base du langage
Les preacutedicats peuvent ecirctre deacutefinis avec la construction We say that when Le texte entre
that et when est interpreacuteteacute comme une chaicircne de caractegraveres qui peut contenir des variables
Puis le texte apregraves when deacutecrit comment cette expression doit ecirctre eacutevalueacutee en termes du
vocabulaire existant Par exemple on peut deacutefinir lrsquoexpression laquo left-aligned raquo comme suit
We say that $x and $y are left-aligned when ($xrsquos left equals $yrsquos left )
La construction $x and $y are left-aligned ($x et $y sont aligneacutes agrave gauche) peut en-
suite ecirctre reacuteutiliseacutee (eacuteventuellement avec diffeacuterents noms de variables) dans des assertions
ulteacuterieures Les utilisateurs peuvent eacutegalement deacutefinir des ensembles soient des ensembles
de chaicircnes de caractegraveres des chiffres ou des ensembles drsquoeacuteleacutements agrave partir drsquoune page en les
eacutenumeacuterant en utilisant la construction A is any of
A Mojibake is any of Atilde ccopy Atildersquo Atildeuml
109
Notez que le nom de lrsquoensemble ne doit pas neacutecessairement ecirctre un seul mot lrsquoanalyseur
interpregravete tout ce qui est entre A et is any of comme un nom
La quantiteacute de donneacutees pouvant ecirctre relayeacutee de cette maniegravere eacutetant limiteacutee Cornipickle se
charge drsquoenvoyer une sonde qui ne reacutecupegravere que les informations neacutecessaires agrave lrsquoeacutevaluation
des speacutecifications fournies par lrsquoutilisateur Par conseacutequent la sonde reccediloit des instructions sur
les eacuteleacutements de la page qui sont inteacuteressants et sur les attributs DOM et CSS neacutecessaires pour
ces eacuteleacutements Ceci est fait en reacutecupeacuterant lrsquoensemble de tous les noms drsquoattributs apparaissant
dans une expression et lrsquoensemble de tous les seacutelecteurs CSS utiliseacutes dans les quantificateurs
La sonde parcourt la structure DOM drsquoune maniegravere en profondeur et produit un nœud de sortie
pour chaque nœud DOM visiteacute Par deacutefaut le nœud de sortie est vide il agit uniquement
comme un espace reacuteserveacute vide afin de preacuteserver la relation parent-enfant entre les nœuds de
sortie Ce nrsquoest que si lrsquoemplacement du nœud actuel correspond agrave lrsquoun des seacutelecteurs CSS
que les attributs et les valeurs seront ajouteacutees au nœud et seulement pour les attributs preacutesents
dans lrsquoexpression agrave eacutevaluer Des reacuteductions suppleacutementaires peuvent ecirctre reacutealiseacutees en reacuteduisant
tous les sous-arbres qui contiennent uniquement des nœuds vides Ainsi la structure DOM
produite par la sonde peut ecirctre vue comme une version laquo eacutevideacutee raquo du document original ne
contenant que des nœuds et des attributs importants pour lrsquoeacutevaluation drsquoune proprieacuteteacute
Incidemment il faut noter que ce filtrage est relativement grossier Consideacuterons par exemple
lrsquoexpression suivante
For each $x in $(p)If $xrsquos height equals 400 Then
For each $y in $(h1)$xrsquos width is greater than $yrsquos width
Cornipickle sera chargeacute drsquoaller chercher la largeur et la hauteur de tous les paragraphes et
rubriques pourtant on ne peut voir que les paragraphes de 400 pixels de hauteur qui sont
110
reacuteellement neacutecessaires pour deacutecider de la vrai valeur de la proprieacuteteacute De plus les informations
sur les titres nrsquoont drsquoimportance que si de tels paragraphes existent dans le document sinon
la proprieacuteteacute est vide Par conseacutequent les conditions de filtrage pourraient ecirctre affineacutees un
compromis doit ecirctre atteint entre les eacuteconomies de bande passante drsquoun tel filtrage et la
puissance de calcul neacutecessaire du cocircteacute client pour eacutevaluer les conditions
422 SEacuteMANTIQUE FORMELLE
Nous allons maintenant preacutesenter la seacutemantique formelle de Cornipickle La premiegravere eacutetape
consiste agrave formaliser la structure le contenu et les proprieacuteteacutes de style drsquoune page afficheacutee
Nous deacutefinissons drsquoabord un ensemble A de noms drsquoattributs Cet ensemble comprend tous les
attributs du DOM (Document Object Model Level 2) [55] et toutes les proprieacuteteacutes de feuilles de
style (CSS) qui peuvent ecirctre associeacutees agrave un eacuteleacutement Un nœud DOM est une fonction ν ArarrV
qui associe agrave chaque nom drsquoattribut une valeur prise agrave partir drsquoun ensemble V Nous utilisons
la valeur speacuteciale laquo raquo pour indiquer qursquoun attribut est indeacutefini pour un nœud donneacute Nous
distinguons un sous-ensemble E subV qui deacutesigne les noms drsquoeacuteleacutements correspondants au nom
de la balise HTML reacuteelle qui repreacutesente lrsquoeacuteleacutement (par exemple a h1 img etc)
Nous indiquerons par N lrsquoensemble de tous les nœuds DOM Lrsquoensemble T de documents
DOM comprend tous les arbres dont les nœuds sont des nœuds DOM Conformeacutement agrave la
convention adopteacutee par la plupart des navigateurs Web les eacuteleacutements de texte ne peuvent
apparaicirctre que comme feuilles et reccediloivent le nom drsquoeacuteleacutement speacutecial TEXT La figure 44
repreacutesente un tel document Si nous laissons ν se reacutefeacuterer au deuxiegraveme paragraphe du document
body nous avons par exemple ν(elementName) = ldquoprdquo ν(stylecolor) = ldquoredrdquo etc Nous
eacutetendons ν aux valeurs en deacutefinissant ν(v) = v pour tout v isinV
111
lthtmlgtltheadgtlttitlegtMy titlelttitlegt
ltheadgtltbodygtlth1gtThe first pagelth1gtltp style=colorredwidth400pxgtHello worldltpgt
ltp style=font-size14ptwidth200pxgtAnother ltbgtparagraphltbgtltpgt
ltp style=width400pxgtltpgtltbodygt
lthtmlgt
html
head body
title
CDATA
h1 p p p
CDATA CDATA CDATA b
CDATA
Figure 44 ndash Un document DOM simple (a) Structure HTML (b) Repreacutesentation en arbre DOM Seuls les noms des eacuteleacutements sont afficheacutes les attributs et valeurs restants sont omis pour plusde clarteacute
112
Soit κ T timesNrarr 2N la fonction qui eacutetant donneacute un document t isin T et un nœud ν isinN produit
lrsquoensemble κ(tν) de tous les enfants de ν dans T Soit C lrsquoensemble de tous les seacutelecteurs
CSS La fonction χ T times Srarr 2N renverra lrsquoensemble des nœuds en t correspondant agrave un
seacutelecteur CSS c isin C Les eacuteveacutenements deacuteclencheacutes par lrsquoutilisateur sont pris en compte en
supposant que certains eacuteleacutements portent un attribut avec le nom speacutecial laquo event raquo dont la
valeur deacutecrit lrsquoeacuteveacutenement auquel cet eacuteleacutement est lieacute Par exemple un utilisateur qui clique sur
un bouton ferait en sorte que lrsquoattribut laquo event raquo de ce bouton porterait laquo click raquo comme valeur
De cette faccedilon il est possible qursquoun instantaneacute drsquoun document contienne des informations sur
les eacuteveacutenements dynamiques survenant dans lrsquoapplication
La seacutemantique de Cornipickle est deacutefinie sur des traces des documents DOM une trace est
une seacutequence finie drsquoeacuteleacutements de T que nous deacutesignerons par t = t0 t1 tk Eacutetant donneacute
que toutes les expressions impliquant des constructions deacutefinies avec We say that peuvent
facilement ecirctre converties en expressions qui utilisent uniquement des constructions agrave partir
du langage de base il suffit de deacutefinir la seacutemantique pour ce langage de base On dira qursquoune
trace t satisfait une expression Cornipickle ϕ noteacutee t |= ϕ lorsque son eacutevaluation renvoie la
valeur Vrai (gt) La notation t i indique le suffixe de t agrave partir de son i-egraveme eacuteveacutenement
La seacutemantique complegravete est deacutefinie reacutecursivement dans le tableau 44 En termes formels
lrsquoexpressiviteacute du langage Cornipickle correspond agrave une extension du premier ordre de la
logique temporelle lineacuteaire ougrave les eacuteveacutenements sont des structures arborescentes des paires
nom-valeur semblables agrave celles utiliseacutees par le moniteur drsquoexeacutecution BeepBeep [53] ce-
pendant BeepBeep nrsquoa pas la possibiliteacute de creacuteer des constructions grammaticales deacutefinies
par lrsquoutilisateur En outre le langage a eacuteteacute eacutetendu agrave des constructions qui mecircme si elles
nrsquoaccroissent pas lrsquoexpressiviteacute ameacuteliorent la lisibiliteacute des speacutecifications tel que The next
time 6
6 Formellement t |= The next time ϕ then ψ si et seulement si t |= Notϕ Until (ϕ And ψ)
113
t |= νrsquos a equals νprimersquos aprime hArr ν(a) = ν
prime(aprime)t |= νrsquos a equals v hArr ν(a) = v
t |= Notϕ hArr t 6|= ϕ
t |= ϕ And ψ hArr t |= ϕ and t |= ψ
t |= ϕ Ou ψ hArr t |= ϕ or t |= ψ
t |= If ϕ Then ψ hArr t 6|= ϕ ou t |= ψ
t |= There exists ξ in $(c) such that ϕ hArr t |= ϕ[ξν ] pour certains ν isin χ(t0c)t |= For each ξ in $(c) ϕ hArr t |= ϕ[ξν ] pour tout ν isin χ(t0c)
t |= Alwaysϕ hArr t |= ϕ et t1 |= Alwaysϕ
t |= Eventuallyϕ hArr t |= ϕ ou t1 |= Eventuallyϕ
t |= Nextϕ hArr t1 |= ϕ
t |= ϕ Until ψ hArr Il existe ige 0 tel quet i |= ψ and t j |= ϕ for j lt i
When ξ is now ξ prime ϕ hArr Il existe ν prime isin t0 tel queν(id) = ν prime(id) and t |= ϕ[ξν prime]
Tableau 44 ndash La seacutemantique formelle de Cornipickle aaprime isin A sont les noms drsquoattributs DOMv isin V est une valeur drsquoattribut c isin C est un seacutelecteur CSS ξ et ξ prime sont des noms de variablesν ν prime isin N sont les nœuds DOM et ϕ et ψ sont des eacutenonceacutes Cornipickle quelconques Lorsque test vide Always srsquoeacutevalue agrave V rai et Eventually et Next srsquoevaluent agrave Faux
114
Le cas de lrsquoexpression When $x is now $y justifie une explication cependant Cette construc-
tion est utiliseacutee pour deacutesigner le mecircme eacuteleacutement drsquoun document agrave deux moments diffeacuterents dans
le temps En raison de la nature dynamique des applications web il ne suffit pas drsquoutiliser sim-
plement For each $x in $(s) suivi par For each $y in $(s) avec le mecircme seacutelecteur
CSS s Les eacuteleacutements drsquoune page peuvent ecirctre deacuteplaceacutes arbitrairement vers nrsquoimporte quelle
partie drsquoun document et par conseacutequent la reacutecupeacuteration drsquoeacuteleacutements avec le mecircme seacutelecteur
ne garantit pas qursquoils seront reacutepartis sur le mecircme domaine deux fois Cornipickle reacutesout ce
problegraveme en donnant agrave chaque eacuteleacutement un attribut unique appeleacute cornipickleid (raccourci
agrave id dans le tableau) Cet identifiant ne change jamais quelles que soient les manipulations de
lrsquoapplication sur un eacuteleacutement Lrsquoexpression When $x is now $y eacutevalue la variable $y avec
lrsquoeacuteleacutement ayant la mecircme cornipickleid comme cela a eacuteteacute donneacute agrave lrsquoeacutevaluation de la variable
$x permettant de comparer les attributs du mecircme eacuteleacutement dans deux instantaneacutes distincts de
la page
43 EXPRIMER DES PROPRIEacuteTEacuteS AVEC CORNIPICKLE
Au moyen drsquoune tel langage il est possible de donner des exemples de proprieacuteteacutes correspondant
agrave certains des bugs citeacutes preacuteceacutedemment Par exemple en prenant pour Mojibake lrsquoensemble
deacutefini preacuteceacutedemment la preacutesence de problegravemes de codage de caractegraveres dans une page peut
ecirctre deacutetecteacutee avec
We say that $x doesnrsquot contain $y when (Not ($xrsquos text matches $yrsquos value ))
For each $text in $(CDATA) (For each $mojibake in Mojibake ($text doesnrsquot contain $mojibake ))
Nous ajoutons la construction doesnrsquot contain agrave la grammaire simplement pour ameacuteliorer
115
la lisibiliteacute de la deacuteclaration qui suit
Similairement pour preacuteciser qursquoune classe speacutecifique drsquoeacuteleacutements ne devrait jamais se deacuteplacer
on peut eacutecrire ce qui suit
We say that $x is immobile when (Always (
When $x is now $y (($xrsquos left equals $yrsquos left)
And($xrsquos top equals $yrsquos top ))))
For each $item in $(li) ( $item is immobile )
Lrsquointuitiviteacute de speacutecifications peut encore ecirctre mise en eacutevidence dans ce dernier exemple qui
stipule qursquoau moins un eacuteleacutement de la liste a la valeur drsquoun autre eacuteleacutement de liste la derniegravere
fois que lrsquoutilisateur a cliqueacute sur un bouton appeleacute laquo Go raquo
We say that I click on Go when (There exists $b in $(button) such that (
($brsquos text is Go)And($brsquos event is mouseup)))
Always (If (I click on Go) Then (
There exists $x in $(value) such that (The next time (I click on Go)
Then (There exists $y in $(value) such that (
$xrsquos text equals $yrsquos text )))))
La lisibiliteacute de cette speacutecification devrait ecirctre mise en contraste avec le code proceacutedural qursquoon
aurait besoin drsquoeacutecrire pour deacutetecter le mecircme problegraveme qui est objectivement plus long et
beaucoup moins clair Par exemple dans jQuery on obtiendrait lrsquoeacutequivalent de la figure 45
Il est maintenant possible de reprendre certains exemples de bugs mentionneacutes en deacutebut de
thegravese et de montrer comment ceux-ci peuvent ecirctre deacutetecteacutes par des expressions Cornipickle
116
$(document)mouseUp(function(event) var e = argumentscalleeif ($(eventtarget)text() === Go) var current_values = []$(value)each(current_valuespush($(this)text())
)if (elastValues == undefined)
var found = falsefor (var v in current_values)
if ($inArray(v elastValues)) found = truebreak
If (found)
consolelog(Error)elastValues = current_values
)
Figure 45 ndash Exemple de code jQuery veacuterifiant que deux eacuteleacutements ont le mecircme texte
117
approprieacutees Prenons drsquoabord le cas drsquoun eacuteleacutement qui se deacuteplace dans une page cliquer sur
un eacuteleacutement change sa classe CSS cela entraicircne la modification de la zone de deacutelimitation de
lrsquoeacuteleacutement eacuteventuellement le deacuteplacement drsquoautres eacuteleacutements qui ne doivent pas bouger
On doit drsquoabord deacutefinir ce que signifie ecirctre immobile La construction When $x is now $y
nous permet de comparer les proprieacuteteacutes drsquoun mecircme eacuteleacutement dans deux snapshots diffeacuterents de
la page mecircme si le positionnement relatif de lrsquoeacuteleacutement dans le DOM a changeacute
We say that $x is immobile when (Always (
When $x is now $y (($xrsquos left equals $yrsquos left)And($xrsquos top equals $yrsquos top)
))
)
Avec cette expression il devient facile de speacutecifier par exemple que chaque eacuteleacutement drsquoune
liste doit demeurer agrave sa position
name Immobile itemsdescription List items should never change positionseverity Error
For each $item in $(li) (
$item is immobile)
De la mecircme maniegravere on peut speacutecifier que des eacuteleacutements doivent toujours ecirctre aligneacutes les uns
par rapport aux autres
Nous deacutefinissons drsquoabord quelques preacutedicats en utilisant la construction We say that
118
We say that $x and $y are left-aligned when ($xrsquos left equals $yrsquos left
)We say that $x and $y are top-aligned when (
$xrsquos top equals $yrsquos top)
We say that the page is big when (The media query (min-width 200px) applies
)The following rules apply when (
the page is big)
Ces preacutedicats nous permettent de simplifier lrsquoexpression rechercheacutee qui devient une double
quantification sur les eacuteleacutements drsquoune mecircme liste
name Menus aligneddescription All list items should either be left- or top-alignedseverity Warning
For each $z in $(menu li) (
For each $t in $(menu li) (($z and $t are left-aligned)Or($z and $t are top-aligned)
))
Nous ne faisons aucune reacuteclamation formelle concernant lrsquoexhaustiviteacute du langage ou son
expressiviteacute Cependant des preuves anecdotiques reacutevegravelent que tous les bogues de mise en
page dans notre enquecircte peuvent ecirctre exprimeacutes par une expression approprieacutee suggeacuterant qursquoil
est bien adapteacute agrave la tacircche agrave accomplir
CHAPITRE 5
DEacuteTECTION AVANCEacuteE BUGS COMPORTEMENTAUX ET RWD
Nous avons preacutesenteacute au chapitre preacuteceacutedent Cornipickle et la faccedilon drsquoeacutevaluer des bugs de
preacutesentation en analysant le contenu drsquoune seule page relativement indeacutependamment des
autres Dans ce chapitre nous nous inteacuteressons davantage aux bugs dits comportementaux
Dans ces bugs ce nrsquoest pas la preacutesentation graphique des pages qui est deacutefectueuse mais bien
la fonctionnaliteacute mecircme de lrsquoapplication Malgreacute tout nous pouvons exprimer et deacutetecter ces
bugs agrave partir de proprieacuteteacutes drsquoeacuteleacutements de lrsquointerface
Nous donnerons drsquoabord des exemples de bugs comportementaux illustreacutes dans une application
appeleacutee Beep Store Nous citons en suite les solutions actuelles et deacutecrivons ensuite notre
approche qui constitue une technique automatiseacutee fournissant des oracles de test dans le
but de deacutetecter les bugs comportementaux qui lient les donneacutees agrave lrsquoordre des consultations
de plusieurs pages de lrsquoapplication cela est fait en combinant Cornipickle avec un robot
drsquoexploration (RIA Crawler) Cette technique est aussi capables de veacuterifier la coheacuterence drsquoune
mise en page reacuteactive (responsive) sur une large gamme de largeurs de la fenecirctre Pour cela
nous avons inteacutegreacute une petite application dans le but de changer simultaneacutement la taille de la
fenecirctre du navigateur afin de deacutetecter des bugs RWD
120
51 BUGS COMPORTEMENTAUX DANS LE BEEP STORE
Afin drsquoeacutetudier les problegravemes de bugs comportementaux dans les applications RIA (Web 20)
deacutefinis dans 212 nous montrons quelques exemples de bugs illustreacutes sur une application
appeleacutee le Beep Store [53]
Le Beep Store est une application web client-serveur autonome impleacutementeacutee en PHP et
JavaScript qui permet aux utilisateurs enregistreacutes de parcourir une collection fictive de livres
et de musique et de geacuterer un panier virtuel composeacute de ces eacuteleacutements Cette application dont
les caracteacuteristiques ont eacuteteacute extraites drsquoune eacutetude exhaustive des applications web du monde
reacuteel est une RIA au sens propre du terme les interactions utilisateurs sont complegravetement
asynchrones ne neacutecessitent jamais le rechargement de la page deacutependent des actions passeacutees
des utilisateurs et consistent en un seul document dont les diffeacuterentes parties sont montreacutees
ou cacheacutees en fonction de lrsquoeacutetat actuel de lrsquoapplication
Connexions multiples Un des bugs qui peuvent ecirctre basculeacutes dans le Beep Store permet agrave
lrsquoutilisateur drsquoacceacuteder agrave la page de connexion tout en eacutetant deacutejagrave connecteacute Ceci est deacutetecteacute par
le fait que le lien laquo Srsquoidentifier raquo (Login) apparaicirct dans la barre drsquoaction supeacuterieure mecircme apregraves
que lrsquoutilisateur srsquoest connecteacute avec succegraves comme le montre la figure 51 1 Eacutevidemment une
application bien construite ne fournirait pas un bouton de connexion apregraves qursquoun utilisateur se
soit deacutejagrave connecteacute cette proprieacuteteacute est agrave eacutetat dans le sens ougrave lrsquoeacutetat valide drsquoune page deacutepend de
la seacutequence des actions passeacutees qui sont effectueacutees par lrsquoutilisateur (dans ce cas le fait qursquoune
connexion reacuteussie ait eu lieu)
1 On a vu au chapitre 2 comment des sites web reacuteels preacutesentent exactement ce problegraveme
121
Figure 51 ndash Le bug de connexions multiples Un utilisateur deacutejagrave connecteacute se voit proposer lrsquoop-tion de se reconnecter
Figure 52 ndash Le bug des paniers multiples Des boutons pour creacuteer un panier et ajouter desarticles au panier coexistent sur la mecircme page
Paniers multiples Un autre bug permet agrave lrsquoutilisateur de creacuteer plusieurs paniers drsquoachat
mecircme apregraves en avoir creacuteeacute un premier La figure 52 montre un exemple de ce bug un panier a
deacutejagrave eacuteteacute creacuteeacute puisque lrsquointerface affiche des boutons permettant agrave lrsquoutilisateur drsquoajouter des
articles au panier Pourtant les boutons pour creacuteer un nouveau panier sont eacutegalement afficheacutes
Supprimer drsquoun panier inexistant Ce bug est lrsquoinverse du preacuteceacutedent parfois le Beep
Store permet agrave lrsquoutilisateur de retirer un objet de son panier avant mecircme de le creacuteer Nous
pouvons voir dans la figure 53 que les boutons pour creacuteer un panier sont preacutesents avec les
boutons pour en retirer les eacuteleacutements
122
Figure 53 ndash Le bug de la suppression drsquoun panier inexistant Des boutons pour retirer du panieret creacuteer un panier coexistent sur la mecircme page
Ces bugs sont clairement comportementaux car ils sont causeacutes par des actions anteacuterieures
de lrsquoutilisateur ou des actions qui nrsquoont jamais eu lieu Il convient eacutegalement de noter que
selon lrsquoimpleacutementation du serveur ces bugs ne deacuteclenchent pas neacutecessairement des messages
drsquoerreur dans les logs Nous pouvons facilement imaginer un cas ougrave une action est rejeteacutee et ne
creacutee pas drsquoautres problegravemes mais le client ne devrait jamais avoir eacuteteacute preacutesenteacute avec lrsquooption
52 SOLUTIONS ACTUELLES
Les travaux connexes sur le test drsquoapplications web pour de tels types de bugs se concentrent
sur les moyens de trouver des erreurs dans les applications en effectuant une recherche
exhaustive de leur espace drsquoeacutetat
Les robots drsquoexploration (laquo crawlers raquo) font partie inteacutegrante des moteurs de recherche web et
sont deacutedieacutes agrave la collecte et agrave lrsquoindexation de documents web Ils ont eacuteteacute deacuteveloppeacutes agrave lrsquoorigine
pour lrsquoarchivage la reacutecupeacuteration drsquoinformations (trouver des adresses e-mail ou des pages
de produits par exemple) Cependant on a rapidement deacutecouvert que les crawlers pouvaient
ecirctre utiliseacutes agrave drsquoautres fins en particulier un crawler peut ecirctre consideacutereacute comme un outil
drsquoexploration drsquoespace drsquoeacutetat et agrave ce titre ecirctre utiliseacute pour effectuer des tests automatiseacutes
123
Un processus drsquoexploration traditionnel commence agrave partir des URL de deacutemarrage Les pages
web correspondant agrave ces URL sont teacuteleacutechargeacutees et les hyperliens preacutesents sur celles-ci sont
extraits et ajouteacutes agrave un ensemble drsquoURL agrave visiter eacutegalement appeleacute le crawl frontier Comme
le nombre drsquoURL qui peuplent la frontiegravere drsquoexploration augmente tregraves rapidement un critegravere
de priorisation du teacuteleacutechargement de certaines pages est geacuteneacuteralement appliqueacute Agrave leur tour
les URL les mieux classeacutees dans la limite de lrsquoexploration sont teacuteleacutechargeacutees et de nouveaux
liens sont extraits Cette opeacuteration est reacutepeacuteteacutee jusqursquoagrave ce que tous les liens accessibles soient
visiteacutes [62 65]
Certaines fonctionnaliteacutes de base des applications web traditionnelles sont modifieacutees dans
les RIA ce qui rend lrsquoexploration des RIA plus difficile que celle des applications web
traditionnelles Dans lrsquoanalyse RIA lrsquoordre drsquoanalyse respecte la seacutequence de pages possible
comme si un internaute lrsquoutilisait Comme nous lrsquoavons vu contrairement aux applications
web traditionnelles une URL nrsquoidentifie pas de faccedilon unique lrsquoeacutetat de lrsquoapplication et ne peut
donc pas ecirctre simplement demandeacutee au serveur agrave tout moment
Dans une application avec une gestion du panier comme le Beep Store il serait possible
pour un robot drsquoexploration traditionnel de trouver des bugs comportementaux lagrave ougrave il nrsquoy
en a pas lrsquoordre de visite est crucial Par exemple dans un sceacutenario ougrave lrsquoutilisateur peut
creacuteer un panier supprimer un panier ajouter un article agrave un panier et modifier un panier pour
modifier la quantiteacute un bug qui permet agrave lrsquoutilisateur drsquoeacutediter un article dans son panier sans
avoir de panier pourrait ecirctre deacutecouvert Apregraves la creacuteation drsquoun panier lrsquoajout drsquoun eacuteleacutement
et la suppression du panier lrsquoensemble drsquoURL du crawler traditionnel contient lrsquoURL agrave
modifier Ensuite lorsque vous essayez drsquoatteindre cette URL un bug survient car le panier a
eacuteteacute supprimeacute Cependant il peut srsquoagir drsquoun faux positif car cette seacutequence drsquoactions nrsquoest
probablement pas possible pour un utilisateur Un robot drsquoexploration traditionnel nrsquoest donc
pas adapteacute agrave la recherche de bugs comportementaux
124
Dans un crawler web pour RIA la page associeacutee agrave une seed URL (un crawler commence
par une liste drsquoURL agrave visiter appeleacutee les seeds) est extraite et chargeacutee dans un navigateur
virtuel Un module est requis pour veacuterifier si crsquoest la premiegravere fois que la page construite
est rencontreacutee Un extracteur drsquoeacuteveacutenements reacutecupegravere les eacuteveacutenements JavaScript de la page
un de ces eacuteveacutenements est seacutelectionneacute et exeacutecuteacute sur la page La page reacutesultante est ensuite
collecteacutee et le processus se poursuit jusqursquoagrave eacutepuisement de toutes les actions deacutecouvertes
[41] Sur la base de ce modegravele diffeacuterentes strateacutegies drsquoexploration (telles que la recherche en
profondeur (depth-first search) Greedy Model-Based et Component-Based) ont eacuteteacute suggeacutereacutees
[61 36 45 40 46 44]
Certains outils ont deacutejagrave eacuteteacute conccedilus pour tester les RIA Par exemple WebMate [43] peut
extraire lrsquoarborescence drsquoeacutetat drsquoune application web Cet arbre est ensuite compareacute aux arbres
drsquoeacutetat drsquoautres navigateurs pour trouver les diffeacuterences de mise en page Cependant il se
concentre sur la compatibiliteacute inter-navigateurs (cross-browser compatibility) et ne semble pas
prendre en charge les tests externes deacutefinis par lrsquoutilisateur
WebMole est un autre crawler automatiseacute qui geacuteneacuteralise les approches existantes Il eacutelimine
tout backtracking arbitraire en interceptant les requecirctes HTTP et fait des sauts de page [54]
Cependant lrsquoobjectif de WebMole est simplement drsquoextraire les graphes de navigation drsquoune
application il ne permet pas agrave un utilisateur drsquoeacutecrire des oracles de test agrave eacutevaluer pendant
lrsquoexploration de lrsquoapplication
De son cocircteacute Crawljax [60] utilise une strateacutegie en profondeur (depth-first strategy) pour
explorer et produire une machine agrave eacutetats finis du comportement de lrsquoapplication Il est possible
gracircce agrave son architecture de plugin de tester chaque eacutetat pendant qursquoils sont visiteacutes Cependant
les tests en question doivent ecirctre eacutecrits par lrsquoutilisateur en code Java pur cela rend lrsquoeacutecriture
des oracles de test dynamiques difficile pour des raisons mentionneacutees plus haut
125
53 SOLUTION PROPOSEacuteE
Pour remeacutedier agrave ces problegravemes nous proposons dans cette section une architecture qui
combine un robot drsquoindexation RIA (dans ce cas Crawljax) avec notre interpreacuteteur de langage
de haut niveau pour les oracles de test web Cornipickle Crawljax est responsable de
lrsquoexploration drsquoune application web en tenant compte de son eacutetat tandis que nous utilisons les
opeacuterateurs emprunteacutes de la logique temporelle lineacuteaire fournie par Cornipickle pour exprimer
des assertions sur lrsquoeacutevolution du contenu drsquoun document au fil du temps Cette architecture a
eacuteteacute codeacutee dans un plugin open source pour Crawljax 2
531 INTERACTION AVEC CRAWLJAX
Crawljax est un outil pour explorer automatiquement lrsquoeacutetat dynamique des applications web
modernes Via des interfaces de programmation il a la capaciteacute drsquointeragir avec le code cocircteacute
client de lrsquoapplication Nous lrsquoutilisons pour explorer le comportement de lrsquoapplication web agrave
tester Pour deacutetecter les clics Crawljax analyse une page Web et lrsquoutilise systeacutematiquement
pour explorer le comportement dynamique de lrsquoapplication [60 70]
Les modifications deacutetecteacutees dans lrsquoarbre DOM dynamique sont valideacutees en tant que nouveaux
eacutetats du comportement De nombreuses options sont disponibles avec Crawljax pour configurer
le comportement drsquoanalyse Nous pouvons par exemple speacutecifier les liens ou les widgets agrave
cliquer ou non au cours de lrsquoexploration Dans une variante Crawljax effectue une recherche
en profondeur en premier (depth-first search) stocke lrsquohistorique des exeacutecutions drsquoeacuteveacutenements
et nrsquoexeacutecute un eacuteveacutenement que si lrsquoeacuteveacutenement nrsquoa pas eacuteteacute exeacutecuteacute auparavant quel que soit
lrsquoeacutetat de lrsquoapplication [68]
2 http githubcomliflabcrawljax-cornipickle-plugin
126
Figure 54 ndash Flux drsquointeraction et de seacuterialisation (Crawljax-Cornipickle)
La figure 54 montre le workflow du systegraveme combineacute pour deacutetecter les bugs comportemen-
taux de lrsquoapplication testeacutee Crawljax explore le comportement de lrsquoapplication web sous
test (Exploration) Il interagit avec Cornipickle agrave travers son architecture de plugin (Plugin
Cornipickle (capture)) (1) Chaque fois qursquoun eacutetat est creacuteeacute (OnNewState) ou visiteacute (OnRevisit)
Crawljax seacuterialise la page (seacuterialisation JSON) et lrsquoenvoie agrave lrsquointerpreacuteteur (2) pour lrsquoeacutevaluer
de la mecircme maniegravere que la sonde envoie la page au serveur Cornipickle dans lrsquoarchitecture
traditionnelle (Cornipickle eacutevaluation) Apregraves que la page ait eacuteteacute eacutevalueacutee par Cornipickle le
verdict (3) est retourneacute et le plugin affiche le reacutesultat (Outputs)(4)
Il est important de se rappeler que chaque eacutetat de lrsquoapplication est visiteacute par Crawljax dans la
mecircme seacutequence qursquoun utilisateur Mecircme quand il revient agrave un eacutetat anteacuterieur il recommence au
deacutebut de lrsquoexploration et prend le mecircme chemin jusqursquoagrave ce que lrsquoeacutetat deacutesireacute soit atteint
532 REDIMENSIONNMENT DU NAVIGATEUR
Ce mecircme principe peut ecirctre facilement modifieacute pour eacutegalement deacutetecter des bugs RWD Pour
ce faire nous avons creacuteeacute un autre plugin qui cette fois redimensionne le navigateur drsquoune
127
largeur donneacutee agrave une autre largeur
Eacutetant donneacute que lrsquoutilisation drsquoune barre de deacutefilement verticale nrsquoest pas un problegraveme dans le
responsive design seul le redimensionnement horizontal est lrsquoapproche correcte pour deacutetecter
les bugs RWD Puisque nous voulons explicitement trouver des bugs lieacutes au RWD le plugin
diminue lentement la largeur du navigateur ces bugs apparaissent sur des largeurs infeacuterieures
ougrave lrsquoespace disponible devient de plus en plus rare en reacutefeacuterence agrave des largeurs plus grandes Il
est possible de fournir au plugin la borne supeacuterieure la borne infeacuterieure et la quantiteacute de pixels
pour la deacutecreacutementation Le plugin met eacutegalement en eacutevidence les bugs qursquoil trouve et prend
une capture drsquoeacutecran de la page Nous obtenons ensuite des captures drsquoeacutecran ougrave les eacuteleacutements
responsables du bug ont des bordures rouges
54 EXPEacuteRIENCES ET REacuteSULTATS
Comme on peut le voir la deacutetection de bugs comportementaux et de bugs RWD dans les
deux cas peut se reacutesumer agrave la veacuterification de proprieacuteteacutes exprimeacutees sur des seacutequences de pages
Dans le premier cas elles sont fournies par un robot drsquoexploration et dans le second cas par
le redimensionnement reacutepeacutetitif de la fenecirctre du navigateur sur une mecircme page
Nous deacutetaillons maintenant quelques exemples de proprieacuteteacutes Cornipickle permettant de deacutetecter
des bugs comportementaux et des bugs RWD
541 DEacuteTECTION DE BUGS COMPORTEMENTAUX DANS BEEPSTORE
Nous expliquons drsquoabord les bugs comportementaux du Beep Store deacutecrits preacuteceacutedemment et
nous montrons comment ils peuvent ecirctre captureacutes par Crawljax en eacutevaluant les assertions de
Cornipickle lors de lrsquoexploration drsquoune application
128
Connexions multiples Le premier bug est celui des connexions multiples Ce bug peut
facilement ecirctre deacutetecteacute par les expressions suivantes
We say that we are signed in when (There exists $p in $(action-band) such that (
$prsquos text matches ^Welcome))
We say that we are in the login page when (There exists $div in $(sign-in) such that (
Not ( $divrsquos display is none )))
Always (If ( we are signed in ) Then (
Not ( we are in the login page )))
Les deux deacutefinitions We say that expliquent comment on deacutefinit le fait drsquoecirctre connecteacute et
drsquoecirctre dans la page de connexion dans le Beep Store Lrsquoexpression There exists x in y such
that (z) est utiliseacutee pour affecter agrave la variable x un eacuteleacutement de lrsquoensemble y ougrave z est vrai Nous
pouvons voir que lrsquoensemble y dans le second preacutedicat est composeacute de tous les eacuteleacutements
avec lrsquoidentifiant laquo sign-in raquo et il srsquoassure que z est vrai avec au moins un drsquoentre eux La
construction x matches y quant agrave elle veacuterifie si x correspond agrave lrsquoexpression reacuteguliegravere y et
la construction x is y veacuterifie si x est eacutegal agrave y Enfin lrsquoinstruction Always (x) veacuterifie que x est
vrai dans chaque instantaneacute En un mot il ne devrait jamais arriver que la bande drsquoaction dise
laquo Welcome raquo pendant que le div avec lrsquoidentifiant laquo sign-in raquo est afficheacute
Agrave titre de comparaison la figure 55 montre comment on pourrait attraper le mecircme bug
uniquement avec Crawljax et son architecture de plugin La lisibiliteacute est beaucoup plus faible
et avec des proprieacuteteacutes plus complexes nous pouvons voir donc comment le code peut devenir
complexe et long
129
private enum Verdict TRUE FALSE INCONCLUSIVEprivate Verdict m_verdict
Overridepublic void onNewState(CrawlerContext context StateVertexnewState) if(m_verdict == VerdictINCONCLUSIVE) EmbeddedBrowser browser = contextgetBrowser()
Identification identificationActionBand =new Identification(IdentificationHowid action-band)
booleansignedIn = false
Identification identificationSignInDiv =new Identification(IdentificationHowid sign-in)
booleancurrentlyInLoginPage = false
if(browserelementExists(identificationActionBand)) WebElementactionBand = browsergetWebElement(identificationActionBand)if(Patternmatches(^Welcome actionBandgetText())) signedIn = true
if(browserelementExists(identificationSignInDiv)) WebElementsignInDiv = browsergetWebElement(identificationSignInDiv)if(signInDivisDisplayed()) currentlyInLoginPage = true
if(signedIn) if(currentlyInLoginPage) m_verdict = VerdictFALSE
output(context newState)
Figure 55 ndash Le code neacutecessaire pour attraper le bug des connexions multiples en utilisant Crawl-jax sans Cornipickle
130
Paniers multiples Le bug des paniers multiples peut ecirctre deacutetecteacute par cette proprieacuteteacute
We say that we are signed in when (There exists $p in $(action-band) such that (
$prsquos text matches ^Welcome))
We say that we create a cart when (There exists $button in $(button-create-cart)
such that ($buttonrsquos event is click
))
The next time ( we are signed in ) Then (The next time ( we create a cart ) Then (
Always (Not ( we create a cart )
)))
Les deacuteclarations temporelles The next time x Then (y) eacutevaluent agrave vrai si y eacutevalue agrave vrai
mais seulement apregraves que x le soit Donc apregraves que nous nous soyons connecteacutes et apregraves que
nous ayions cliqueacute sur le bouton laquo creacuteer un panier raquo nous ne devrions plus jamais cliquer sur
laquo creacuteer un panier raquo
Le bug de suppression drsquoun panier existant se gegravere de maniegravere similaire nous ne le deacutecrirons
pas en deacutetail ici
Il est agrave noter que lrsquoeacutevaluation drsquoun eacutetat avec ces proprieacuteteacutes Cornipickle prend entre 36 et 74
millisecondes par page avec un processeur Intel Core i5-3470 Gardez agrave lrsquoesprit que bien que
les proprieacuteteacutes soient assez simples le Beep Store est une tregraves grande application agrave seacuterialiser
car mecircme les blocs non afficheacutes doivent ecirctre inclus
131
542 DEacuteTECTION DE BUGS RWD DANS DE VRAIS SITES WEB
Nous montrons maintenant quelques exemples de proprieacuteteacutes Cornipickle pour la deacutetection
de bugs RWD Les comportements drsquoun site web sont uniques pour chaque site Pour cette
raison la deacutetection des bugs comportementaux neacutecessite des proprieacuteteacutes speacutecifiques Drsquoautre
part le Responsive Web Design est une approche geacuteneacuterale de la conception Web similaire aux
modegraveles de conception (design patterns) dans les langages traditionnels Les eacutechecs dans lrsquoim-
pleacutementation de cette conception doivent ecirctre deacutetectables avec des proprieacuteteacutes geacuteneacuterales Pour
cette raison les proprieacuteteacutes deacutecrites dans cette section ne constituent que des avertissements
une violation ne devrait pas signifier qursquoil srsquoagit drsquoun bug dans tous les cas
Preacutesence de barres de deacutefilement Lrsquoune des premiegraveres indications drsquoun site web pas res-
ponsive est la preacutesence drsquoune barre de deacutefilement horizontale Pour deacutetecter ce bug une simple
proprieacuteteacute Cornipickle peut ecirctre deacutefinie
We say that there is an horizontal scrollbar when (the pagersquos width is less than
the pagersquos scroll-width)
name No horizontal scrollbardescription There should never be an horizontal scrollbarseverity Error
Always (
Not ( there is an horizontal scrollbar ))
Dans cette proprieacuteteacute lrsquointerception drsquoune barre de deacutefilement horizontale peut ecirctre obtenue en
comparant la largeur de la fenecirctre (viewportwidth) avec la largeur de deacutefilement (scroll-width)
132
Cela ne devrait jamais arriver si elle est toujours entoureacutee avec la construction Always Not
Collision drsquoeacuteleacutements Crsquoest le bug ougrave les eacuteleacutements se chevauchent Cette proprieacuteteacute com-
mence par certaines deacutefinitions du langage pour simplifier le cœur de la proprieacuteteacute agrave la fin Elle
deacutecrit les intersections horizontales et verticales un eacuteleacutement visible deux eacuteleacutements identiques
et des chevauchements
We say that $x x-intersects $y when ((($yrsquos right - 1) is greater than $xrsquos left)And(($xrsquos right - 1) is greater than $yrsquos left)
)
We say that $x y-intersects $y when ((($yrsquos bottom - 1) is greater than $xrsquos top)And(($xrsquos bottom - 1) is greater than $yrsquos top)
)
We say that $x is visible when (Not ( $xrsquos display is none )
)
We say that $x and $y are the same when ($xrsquos cornipickleid equals $yrsquos cornipickleid
)
We say that $x and $y are not the same when (Not ($x and $y are the same)
)
We say that $x and $y overlap when ((($x is visible) And ($y is visible))And(
($x x-intersects $y)And($x y-intersects $y)
133
))
We say that $x and $y do not overlap when (Not ($x and $y overlap)
)
La premiegravere deacutefinition utilise laquo right - 1 raquo car les eacuteleacutements qui se croisent doivent se croiser drsquoau
moins 2 pixels Il surmonte un problegraveme ougrave nous recevons des dimensions et des coordonneacutees
en entiers (pixels) mais le navigateur peut travailler avec des floats dans le cas drsquoeacuteleacutements
ayant des dimensions en ratios Ces floats sont arrondis et peuvent provoquer des diffeacuterences
de 1 pixel entre ce qui est afficheacute et ce qui est seacuterialiseacute Il est vrai que nous pouvons manquer
des bugs qui sont leacutegitimement agrave 1 pixel mais il est important de ne pas punir les bonnes
pratiques
La deacutefinition drsquoun eacuteleacutement visible veacuterifie uniquement si la proprieacuteteacute display est laquo none raquo car ces
eacuteleacutements ne provoquent aucun changement de disposition En outre cette valeur est affecteacutee
consciemment par le deacuteveloppeur afin que leur position sur la page soit correcte Le troisiegraveme
deacutecrit deux eacuteleacutements qui sont identiques en utilisant la proprieacuteteacute laquo cornipickleid raquo Cette
proprieacuteteacute est une valeur unique donneacutee agrave chaque eacuteleacutement important dans la page pendant la
phase de seacuterialisation Comme il est unique il peut ecirctre utiliseacute pour identifier si deux eacuteleacutements
sont identiques
La derniegravere construction deacutefinit deux eacuteleacutements qui se chevauchent Si elles sont agrave la fois
visibles et qursquoelles se croisent verticalement et horizontalement elles sont consideacutereacutees dans
une collision
name Element Collisiondescription All items that arenrsquot
overlapping initially shouldnrsquot ever overlap
134
severity WarningAlways (
For each $x in $(body ) (For each $y in $($x gt ) (
For each $z in $($x gt ) (If ( ($y and $z are not the same) And
($y and $z do not overlap) ) Then (Next (
When $y is now $a (When $z is now $b (
$a and $b donrsquot overlap)))))))
Enfin les trois constructions For each rassemblent tous les eacuteleacutements et leurs enfants directs
Elle permet de tester des paires de fregraveres et sœurs pour leur proprieacuteteacute de recouvrement Notez
qursquoelle ne veacuterifie pas si un eacuteleacutement chevauche un laquo cousin raquo car ce cousin aurait besoin de violer
la proprieacuteteacute Protrusion (qui nrsquoest pas deacutetailleacutee dans cette thegravese) La proprieacuteteacute pourrait ecirctre faite
en testant chaque eacuteleacutement avec tous les autres eacuteleacutements mais il est coucircteux en performance
Les deux constructions When $x is now $y rassemblent la paire dans la capture drsquoeacutecran
suivante afin de la comparer agrave elle-mecircme dans la capture drsquoeacutecran preacuteceacutedente Dans lrsquoensemble
la proprieacuteteacute dit que si deux fregraveres et sœurs ne se chevauchent pas agrave un moment donneacute ces
deux fregraveres et sœurs ne devraient pas se chevaucher au moment suivant
Les autres bugs RWD (deacutepassement des eacuteleacutements etc) deacutecrits au chapitre 2 peuvent ecirctre
traiteacutes de maniegravere similaires nous ne les deacutetaillerons pas ici
Agrave titre eacutevaluatif nous avons eacutevalueacute une proprieacuteteacute en fonction du nombre drsquoeacuteleacutements Le temps
de calcul de lrsquointerpreacuteteur en fonction du nombre drsquoeacuteleacutements dans la page est montreacute dans la
figure 56 Le temps de calcul en incluant la seacuterialisation de la page par la sonde JavaScript et
lrsquointerpreacutetation de la proprieacuteteacute en fonction du nombre drsquoeacuteleacutements dans la page est preacutesenteacute
dans la figure 57 Nous pouvons constater que lrsquointerpreacuteteur srsquoexeacutecute tregraves rapidement crsquoest
135
Figure 56 ndash Temps de calcul de lrsquointerpreacuteteur en fonction du nombre drsquoeacuteleacutements dans la page
bien la seacuterialisation de la page par la sonde qui prend le plus de temps dans le processus global
136
Figure 57 ndash Temps de calcul incluant la seacuterialisation de la page par la sonde JavaScript etlrsquointerpreacutetation de la proprieacuteteacute en fonction du nombre drsquoeacuteleacutements dans la page
CHAPITRE 6
VERS UN MEILLEUR FEEDBACK POUR LrsquoUTILISATEUR
Jusqursquoici nous avons preacutesenteacute un outil automatiseacute pour la deacutetection des bugs drsquointerface
permettant drsquoeacutevaluer les expressions dans un langage deacuteclaratif de haut niveau baseacute sur la
logique temporelle lineacuteaire et de premier ordre Or les pages web sont composeacutees de centaines
drsquoeacuteleacutements avec des dizaines drsquoassertions de proprieacuteteacutes qui doivent tenir de plus les deacutefauts
de mise en page sont parfois trop subtils pour ecirctre visibles agrave lrsquoœil nu (comme les eacuteleacutements drsquoun
seul pixel) Par conseacutequent lrsquoeacutevaluation de base de ces proprieacuteteacutes renvoyant un simple verdict
vraifaux ne serait pas tregraves utile pour un concepteur Le fait de simplement dire que laquo quelque
chose ne va pas raquo apporte peu de valeur ajouteacutee lorsque quelqursquoun doit rechercher le problegraveme
dans une page aussi complexe Pour fournir une reacuteelle eacutevaluation aux praticiens un outil
drsquoanalyse de la mise en page devrait donc ecirctre capable de repeacuterer des eacuteleacutements speacutecifiques de
la page qui sont responsables de certains bugs
Agrave cette fin Cornipickle a eacuteteacute eacutequipeacute drsquoun meacutecanisme pour essayer de circonscrire des parties
drsquoune page qui expliquent la faute deacutecouverte Notre travail sur la deacutetection de bugs de mise en
page est donc devenu une forme de localisation de deacutefaut (fault localization) Nous allons dans
ce chapitre exposer deux tentatives afin de fournir agrave lrsquoutilisateur un verdict plus riche qursquoun
simple vraifaux La premiegravere conduit agrave une construction appeleacutee laquo teacutemoin raquo baseacutee sur une
138
fonction appliqueacutee reacutecursivement sur la formule qui est falsifieacutee Un teacutemoin met en eacutevidence
un ensemble drsquoeacuteleacutements dans la page qui sont lieacutes drsquoune certaine maniegravere agrave la violation drsquoune
proprieacuteteacute
Cela srsquoest reacuteveacuteleacute insuffisant dans la pratique par la suite nous reprenons le travail sur une
nouvelle base formelle fondeacutee cette fois sur le concept de laquo reacuteparation raquo Intuitivement une
reacuteparation est un ensemble minimal de transformations qui lorsqursquoelles sont appliqueacutees agrave
lrsquoobjet original reacutetablissent sa satisfiabiliteacute par rapport agrave la speacutecification Lrsquoavantage de ce
concept est qursquoil est indeacutependant de la nature de lrsquoobjet et du langage de speacutecification utiliseacute
pour deacuteclarer ses proprieacuteteacutes attendues Il pourrait donc ecirctre appliqueacute agrave une varieacuteteacute drsquoautres
sceacutenarios en plus des applications web
61 GEacuteNEacuteRATION DE CONTRE-EXEMPLE LES TEacuteMOINS
Gracircce agrave la nature des speacutecifications du langage Cornipickle baseacutees sur la logique il est possible
drsquoanalyser systeacutematiquement une assertion quand elle est eacutevalueacutee agrave faux et drsquoidentifier les
eacuteleacutements qui sont laquo responsables raquo de la fausseteacute de cette assertion
Verdicts et teacutemoins
Nous appelons teacutemoin un arbre drsquoeacuteleacutements DOM soit W sube T lrsquoensemble de tous les teacutemoins
(W pour witness) Lrsquoensemble des verdicts est deacutefini comme V BcupgtperptimesW timesW un
verdict est composeacute drsquoune valeur de veacuteriteacute et de deux teacutemoins lrsquoun correspondant agrave la valeur
de veacuteriteacute gt lrsquoautre agrave la valeur de veacuteriteacute perp
139
La conjonction de verdicts est une fonction otimes V timesNtimesV rarrV deacutefinie comme suit
otimes(〈bwgtwperp〉ν 〈bprimewprimegtwprimeperp〉) =
〈perpwgtwperpcup(ν wprimeperp)〉 si bprime =perp
〈bandbprimewgtcup(ν wprimegt)wperp〉 si b 6=perp
〈bwgtwperp〉 sinon
Nous interpreacutetons bandbprime comme la conjonction classique agrave trois valeurs La notation (ν w)
deacutesigne la creacuteation drsquoun nouveau teacutemoin (witness) dont la racine est le nœud DOM ν avec le
teacutemoin w comme son enfant La notation wcupwprime deacutesigne lrsquoaddition de wprime aux enfants du teacutemoin
w Nous allons abuser de la notation et accepter que le deuxiegraveme argument de otimes pourrait ecirctre
un eacuteleacutement laquo vide raquo de N nous deacutesignerons comme ν 0 Cet eacuteleacutement est neacutecessaire de sorte que
chaque opeacuteration sur les verdicts peut surclasser un teacutemoin existant avec un nouveau nœud
racine mecircme srsquoil nrsquoy a rien agrave laquo teacutemoigner raquo
La conjonction de verdicts met agrave jour le contenu drsquoun verdict existant v et donne un autre
verdict vprime et un eacuteleacutement DOM ν Si vprime est faux il porte un teacutemoignage de cette fausseteacute agrave
savoir wprimeperp ce teacutemoin est attacheacute comme un enfant drsquoun nouvel arbre dont la racine est ν et
cet arbre est ajouteacute au teacutemoignage de la fausseteacute de v wperp De plus la valeur de veacuteriteacute de v
est deacutefinie comme eacutetant perp Autrement dit lrsquoexplication de vprime pour ecirctre fausse est ajouteacutee agrave
lrsquoexplication de v pour ecirctre fausse Dans le cas contraire si ni le premier eacuteleacutement de v ni celui
de vprime est faux alors le teacutemoin vprime associeacute agrave gt est ajouteacute au teacutemoin gt de v et sa valeur de veacuteriteacute
est mise agrave jour en conseacutequence Dans tous les autres cas v est laisseacute inchangeacute
140
ω(tνrsquos a equals ν primersquos aprime) =
〈gtν ν prime 0〉 if ν(a) = ν prime(aprime)〈gt 0ν ν prime〉 otherwise
ω(tνrsquos a equals v) =
〈gtν 0〉 if ν(a) = v〈perp 0ν〉 otherwise
ω(tNotϕ) = (ω(tϕ)ν 0)ω(tϕ And ψ) = otimes(otimes(〈gt 0 0〉ν 0ω(tϕ))ν 0ω(tψ))
ω(tϕ Or ψ) = oplus(oplus(〈perp 0 0〉ν 0ω(tϕ))ν 0ω(tψ))ω(tIf ϕ Then ψ) = oplus(oplus(〈perp 0 0〉ν 0(ω(tϕ)ν 0))ν 0ω(tψ))
ω(tThere exists ξ in$(c) such that ϕ)
=oplus〈perp 0 0〉
νisinχ(t0c)ω(tϕ[ξν ])
ω(tFor each ξ in $(c) ϕ) =otimes〈gt 0 0〉
νisinχ(t0c)ω(tϕ[ξν ])
Tableau 61 ndash La deacutefinition reacutecursive de la fonction de calcul du verdict ω
La disjonction de verdict oplus V timesNtimesV rarrV est deacutefinie comme le dual de la conjonction
oplus(〈bwgtwperp〉ν 〈bprimewprimegtwprimeperp〉) =
〈gtwgtcup(ν wprimegt)wperp〉 si bprime =gt
〈borbprimewgtwperpcup(ν wprimeperp)〉 si b 6=gt
〈bwgtwperp〉 sinon
Enfin la neacutegation du verdict est la fonction V timesNrarrV deacutefinie comme suit
(〈bwgtwperp〉ν) =
〈notbwperpcup(ν wgt)wgtcup(ν wperp)〉 si b isin gtperp
〈bwgtwperp〉 sinon
Intuitivement inverse les teacutemoins associeacutes agrave gt et perp et les surmonte drsquoune nouvelle racine
avec le nœud DOM ν Cela nrsquoa aucun effet lorsque le verdict est laquo raquo
En utilisant ces opeacuterateurs la seacutemantique formelle de Cornipickle deacutecrite dans le tableau 44
peut alors ecirctre eacutetendue agrave une fonction ω T lowasttimesΦrarrV qui sur une expression ϕ isinΦ et une
trace t isin T lowast calcule un verdict
141
La notationotimes〈gt 0 0〉
νisinχ(t0c)ω(tϕ[ξν ]) est un raccourci pour
otimes(〈gt 0 0〉ν 0otimes(ω(tϕ[ξν0])ν0otimes(ω(tϕ[ξν1])ν1 middot middot middot)))
En drsquoautres termes elle deacutesigne la conjonction reacutepeacuteteacutee du verdict de ω(tϕ[ξν ]) pour chaque
ν isin χ(t0c) agrave partir du verdict vide 〈gt 0 0〉 Une notation similaire est utiliseacutee pour oplus
Cette deacutefinition est difficile agrave lire en termes de notation cependant le lecteur peut reacutealiser en
lrsquoexaminant que la deacutefinition de chaque cas correspond agrave lrsquointuition Par exemple construire
le verdict de laquo ϕ And ψ raquo revient agrave deacutemarrer du verdict laquo vide raquo 〈gt 0 0〉 et lui joindre
successivement le verdict de ϕ et ψ
De mecircme construire le verdict pour une expression quantifieacutee existentiellement ϕ(x) est
obtenu en calculant successivement la disjonction du verdict de ϕ(k) pour chaque k du verdict
initial 〈perp 0 0〉 Ceci est compatible avec le fait que existx isin S ϕ(x) est eacutequivalent agraveor
kisinS ϕ(k)
Enfin un raisonnement similaire srsquoapplique aux opeacuterateurs temporels lineacuteaires Par exemple
t |= Alwaysϕ peut ecirctre deacutefini comme t |= ϕ et t1 |= Alwaysϕ drsquoougrave les verdicts ω(tϕ) et
ω(t1Always ϕ) sont combineacutes en utilisant la conjonction verdict
A titre drsquoillustration de cette proceacutedure nous montrerons comment un verdict peut ecirctre
calculeacute pour lrsquoexpression suivante en consideacuterant lrsquoarbre de la figure 44 For each $x in
$(p) For each $y in $(p) $xrsquos width equals $yrsquos width Le document contient
trois paragraphes que nous appellerons p1 p2 et p3 le premier et le troisiegraveme ont une largeur
(width) de 400 tandis que le second a une largeur de 200 La deacuteclaration inteacuterieure $xrsquos
width equals $yrsquos width sera donc eacutevalueacutee neuf fois une fois pour chaque combinaison
de nœuds DOM pour $x et $y
Selon la deacutefinition de la fonction ω dans le tableau 61 chaque eacutevaluation produira un verdict
142
de la forme 〈gtpi p j 0〉 quand pi et p j ont la mecircme largeur et 〈perp 0pi p j〉 quand ils
sont deacutefinis autrement Dans le premier cas la deacuteclaration srsquoeacutevalue agrave gt et les nœuds DOM pi
et p j sont ajouteacutes comme gt-teacutemoins de ce fait Lrsquoinverse srsquoapplique lorsque lrsquoinstruction est
fausse
Ces verdicts sont ensuite reacuteunis dans le quantificateur universel le plus profond Un verdict
vide 〈gt 0 0〉 est drsquoabord creacuteeacute et tous les verdicts pour lrsquoexpression inteacuterieure sont ensuite
combineacutes en utilisant la conjonction verdict Par exemple quand $x se reacutefegravere agrave p1 trois
verdicts sont joints 〈gtp1 p1 0〉 〈perp 0p1 p2〉 et 〈gtp1 p3 0〉 Selon la deacutefinition
de conjonction de verdict le verdict reacutesultant sera
〈perp(ν 0〈gtp1 p1 0〉)(ν 0〈gtp1 p3 0〉)(ν 0〈perp 0p1 p2〉)〉
Les deux verdicts internes srsquoeacutevaluant agrave gt sont attacheacutes au teacutemoin associeacute agrave gt et le verdict
eacutevaluant perp est attacheacute au teacutemoin associeacute agrave perp Trois de ces verdicts seront produits par le
quantificateur le plus interne un pour chaque valeur de $x qui seront ensuite combineacutes en
utilisant agrave nouveau la conjonction par le quantificateur universel le plus externe ce qui donnera
le verdict final
〈perp 0
(ν 0〈perp(ν 0〈gtp1 p1 0〉)(ν 0〈gtp1 p3 0〉)(ν 0〈perp 0p1 p2〉)〉)
(ν 0〈perp(ν 0〈gtp2 p2 0〉)(ν 0〈perp 0p1 p2〉)(ν 0〈perp 0p2 p3〉)〉)
(ν 0〈perp(ν 0〈gtp1 p3 0〉)(ν 0〈gtp3 p3 0〉)(ν 0〈perp 0p2 p3〉)〉) 〉
Lrsquoimpleacutementation actuelle de Cornipickle peut calculer ces verdicts et les renvoyer agrave la sonde
JavaScript Les verdicts sont envoyeacutes agrave la sonde sous forme drsquoune liste Cornipickle ID Chaque
143
A list item
Another list item
A third list item
The last list item
(a)
A list item
Another list item
A third list item
The last list item
(b)
Figure 61 ndash Exemple drsquoune erreur de mise en page Web simple (a) lrsquoun des eacuteleacutements de la listeest incorrectement aligneacute avec les autres (b) un teacutemoin (witness) produit par lrsquooutil Cornipickle
ID est unique correspondant un eacuteleacutement speacutecifique dans la page ce qui permet drsquoentourer
lrsquoeacuteleacutement en question dans la fenecirctre du navigateur
62 LOCALISATION DES ERREURS DANS LES APPLICATIONS WEB
Agrave notre connaissance le principe de calcul du verdict deacutecrit preacuteceacutedemment fait de Cornipickle
un des tout premiers systegravemes agrave expliquer graphiquement en quoi une proprieacuteteacute est violeacutee
Malheureusement nous avons deacutecouvert que ce principe laisse tout de mecircme un peu agrave deacutesirer
Par exemple consideacuterons la proprieacuteteacute voulant que tous les eacuteleacutements drsquoune liste avec lrsquoID
laquo menu raquo doivent ecirctre aligneacutes verticalement
For each $x in $(menu li) (For each $y in $(menu li) (
$xrsquos left equals $yrsquos left))
Pour cet exemple particulier la figure 61a montre une page simple pour laquelle la proprieacuteteacute
serait violeacutee Nous pouvons voir le reacutesultat de lrsquoapplication de ω deacutefinie dans la section
preacuteceacutedente sur lrsquoarbre DOM de la figure 61a La fonction retourne un arbre contenant des
pointeurs sur deux des eacuteleacutements de la page surligneacutes en rouge dans la figure 61b (En fait la
fonction renvoie plusieurs ensembles chacun contenant le second eacuteleacutement de liste et lrsquoun des
eacuteleacutements restants)
144
Intuitivement un tel reacutesultat est logique pour un concepteur de sites web en effet ces deux
eacuteleacutements doivent ecirctre aligneacutes alors qursquoils ne le sont pas Cependant cette information ne peut
ecirctre deacuteduite que par la connaissance de la proprieacuteteacute violeacutee le teacutemoin pointe simplement ces
deux eacuteleacutements sans fournir drsquoinformations sur laquo ce qui ne va pas raquo agrave leur sujet Alors que la
geacuteneacuteration de contre-exemple reacutecursif preacutesente dans la version actuelle de Cornipickle fournit
plus drsquoinformations qursquoun simple verdict vraifaux dans de nombreux cas elle peut donc
srsquoaveacuterer trop vague pour ecirctre utile
Nous introduisons la notion de reacuteparation qui peut ecirctre deacutefinie intuitivement comme un
ensemble de modifications neacutecessaires agrave un objet pour le rendre conforme agrave une proprieacuteteacute
La notion de reacuteparation peut ecirctre vue comme une localisation de deacutefaut exprimeacutee en sens
inverse indiquer comment un objet doit ecirctre reacutepareacute indirectement pointe vers des aspects de
sa structure qui sont responsables du fait que la proprieacuteteacute nrsquoest pas actuellement remplie Nous
verrons que contrairement au concept de teacutemoin qui est une technique lineacuteaire en fonction
de la taille de la formule et fortement associeacute au langage de speacutecification et aux objets de
domaine utiliseacutes les reacuteparations sont deacutefinies agrave un niveau drsquoabstraction qui ne deacutepend pas des
proprieacuteteacutes de lrsquoun ou de lrsquoautre
621 DEacuteFINITIONS
Soit Σ un ensemble de structures et TΣ un ensemble drsquoendomorphismes sur Σ crsquoest-agrave-dire
que chaque τ isin TΣ est une fonction τ Σrarr Σ Soit 2TΣ lrsquoensemble de tous les sous-ensembles
de TΣ Un ensemble drsquoendomorphismes T = τ1 τn isin 2TΣ est dit ecirctre bien deacutefini si
deux eacuteleacutements τi τ j sont tels que τi τ j equiv τ j τ j Un tel ensemble bien deacutefini sera appeleacute
transformation Lorsque le contexte est clair nous allons abuser de la notation et consideacuterer T
comme lrsquoendomorphisme (deacutefini de faccedilon unique) τ1 middot middot middot τn Lrsquoinclusion drsquoensembles induit
145
un ordre partiel sur les transformations
Soit Φ un ensemble drsquoexpressions de langage eacutequipeacutees drsquoune relation de satisfaction |= Σtimes
Φrarr gtperp Pour une expression ϕ isinΦ et une structure σ isin Σ nous eacutecrirons σ |= ϕ si et
seulement si |= (σ ϕ) =gt Dans un tel cas nous dirons que σ laquo veacuterifie raquo ϕ ou alternativement
que σ est un modegravele de ϕ
Soit σ isin Σ une structure telle que σ 6|= ϕ pour une expression ϕ isin Φ Une reacuteparation est
deacutefinie comme une transformation T isin 2TΣ telle que T (σ) |= ϕ Une reacuteparation est dite prime
si aucun sous-ensemble T prime sube T est tel que T prime est aussi une reacuteparation Intuitivement une
reacuteparation principale est un ensemble de laquo changements raquo sur une structure σ qui satisfait ϕ
de sorte qursquoaucune modification laquo plus petite raquo ne restaure aussi la satisfiabiliteacute Comme sube
est une commande partielle il peut y avoir plusieurs reacuteparations principales mutuellement
incomparables
La figure 62 illustre ce concept Lrsquoimage repreacutesente toutes les transformations qui peuvent
ecirctre appliqueacutees agrave une structure dans le cas simple ougrave seulement quatre morphismes existent
La transformation vide est en bas et chaque flegraveche dans le graphe repreacutesente lrsquoajout drsquoun
morphisme suppleacutementaire agrave une transformation existante Les nœuds rouges indiquent les
transformations qui ne sont pas reacutepareacutees tandis que les nœuds jaunes et verts indiquent les
reacuteparations Parmi ceux-ci les reacuteparations principales sont coloreacutees en vert on peut voir que
tous les anteacuteceacutedents des nœuds verts sont rouges Lrsquoinverse cependant nrsquoest pas vrai tous les
descendants drsquoune reacuteparation ne sont pas eux-mecircmes reacutepareacutes
146
Figure 62 ndash Illustration du concept de reacuteparation principale
622 EXEMPLES
Cette deacutefinition simple peut ensuite ecirctre appliqueacutee agrave une varieacuteteacute de langages de speacutecification
comme nous allons lrsquoillustrer agrave travers les exemples qui suivent
Logique propositionnelle
Comme premier exemple soit Φ lrsquoensemble des formules de logiques propositionnelles
avec les variables X = x1 xn pour certains n ge 1 Soit Σ lrsquoensemble des fonctions
X rarrgtperp que nous appellerons des eacutevaluations La relation de satisfaction |= est deacutefinie
comme σ |= ϕ =gt si et seulement si ϕ vaut vrai lorsque ses variables sont remplaceacutees par la
valeur de veacuteriteacute correspondante speacutecifieacutee par σ et sinon par perp
Soit b isin gtperp et i isin [1n] Nous noterons τxi 7rarrb lrsquoendomorphisme deacutefini comme
(τxi 7rarrb(σ))(x) =
b si x = xi
σ(x) sinon
Ce morphisme met xi agrave la place de b et laisse inchangeacute le reste de lrsquoeacutevaluation initiale
147
Lrsquoensemble des endomorphismes TΣ est alors deacutefini comme
TΣ =⋃
iisin[1n]
⋃bisingtperp
τxi 7rarrb
Deux transformations τx 7rarrb τ primey7rarrbprime commutent si x 6= y Ainsi un ensemble de transformations
T isin 2TΣ est bien deacutefini si et seulement si chaque endomorphisme qursquoil contient change la
valeur drsquoune variable diffeacuterente
Soit X = abc soit σ lrsquoeacutevaluation a 7rarrgtb 7rarrperpc 7rarrperp et ϕ la formule propositionnelle
aand b On peut facilement observer que σ 6|= ϕ Une reacuteparation est la transformation T =
τb 7rarrgt qui est T (σ) |= ϕ Cela correspond agrave lrsquointuition que lrsquoexplication de la fausseteacute
de ϕ est que b est faux alors qursquoil devrait ecirctre vrai Notons que bien que T prime = τb7rarrgtτc7rarrgt
rendrait aussi ϕ vrai ce nrsquoest pas une reacuteparation primaire puisque T sube T prime Cela correspond agrave
lrsquointuition que la valeur de veacuteriteacute de c est pas pertinente agrave la fausseteacute de ϕ
Soit σ lrsquoeacutevaluation a 7rarr gtb 7rarr perpc 7rarr perp et ϕ la formule propositionnelle ararr b Cette
fois deux reacuteparations primaires existent T = τb7rarrgt et T prime = τa7rarrperp Il est possible de
veacuterifier que les deux fixent la valeur de veacuteriteacute de lrsquoeacutevaluation initiale Informellement la
premiegravere transformation repreacutesente la fausseteacute de ϕ sur le fait que a est vrai tandis que lrsquoautre
lrsquoexplique plutocirct par le fait que b est faux mdash ce qui correspond bien agrave lrsquointuition Puisque
les deux reacuteparations sont incomparables aucune de ces explications nrsquoest laquo preacutefeacutereacutee raquo Nous
reviendrons sur ce concept plus tard
Logique du premier ordre
Le concept de reacuteparation peut facilement ecirctre leveacute agrave lrsquoensemble Φ de la formule logique de
premier ordre sur les domaines finis Soit A un ensemble drsquoeacuteleacutements un preacutedicat n-aire est
148
deacutefini comme une fonction p Anrarrgtperp Soit Pi lrsquoensemble des preacutedicats de lrsquoariteacute i Une
signature est un ensemble de preacutedicats P = p1 pm respectivement drsquoariteacute a1 am
Pour une signature donneacutee lrsquoensemble des eacuteleacutements de domaine est deacutefini comme
Σ = Pa1timesmiddotmiddot middottimesPam
La relation de satisfaction |= est deacutefinie comme |= (dϕ) =gt si ϕ est eacutevalueacute agrave vrai lors de
lrsquoeacutevaluation de preacutedicats tels que deacutefinis dans σ et perp deacutefinie autrement
Dans ce contexte un endomorphisme repreacutesentera le changement de la valeur de veacuteriteacute pour
une entreacutee drsquoun preacutedicat Soit pk un preacutedicat de lrsquoariteacute i (a1 ak)isinAn un k-tuple drsquoeacuteleacutements
de A et b isin gtperp La transformation τpk(a1ak)7rarrb est deacutefini comme le preacutedicat pprimek tel que
pprimek(x1 xk) =
b si x1 = a1 xn = an
pk(x1 xk) autrement
Lrsquoensemble des transformations pour pk noteacute Tpk est deacutefinie comme suit
Tpk ⋃
(a1ak)isinAn
⋃bisingtperp
τpk(a1ak)b
Lrsquoensemble global des transformations est alors
TΣ ⋃pisinP
Tp
De maniegravere similaire agrave la logique du premier ordre on peut veacuterifier que deux endomorphismes
149
1
2
3
4
5
(a) Graphe original
1
2
3
4
5
(b) Apregraves lrsquoapplication de T1
1
2
3
4
5
(c) Apregraves lrsquoapplication de T2
1
2
3
4
5
(d) Apregraves lrsquoapplication de T3
1
2
3
4
5
(e) Apregraves lrsquoapplication de T4
Figure 63 ndash Quelques reacuteparations possibles pour un coloriage de graphe deacutefectueux
commutent srsquoils opegraverent sur un preacutedicat diffeacuterent ou changent la valeur drsquoune entreacutee diffeacuterente
sur le mecircme preacutedicat
Soit A = 012 ϕ la formule du premier ordre forallx existy x 6= yand p(xy) et le preacutedicat binaire
p deacutefini comme (00)(01)(11) Il y a deux reacuteparations primaires pour restaurer la veacuteriteacute
de ϕ T1 = τp(20)7rarrgt T2 = τp(21)7rarrgt Cela correspond agrave lrsquointuition que la valeur 2
manque au moins un laquo partenaire raquo dans p et que 0 ou 1 pourraient chacun correspondre agrave ce
but
Soit A = [15] un ensemble de sommets de graphe p un preacutedicat binaire codant la relation
drsquoadjacence des arecirctes de graphe et q1q2q3 un ensemble de preacutedicats unaires tel que qi(x)
contient si et seulement si le sommet x ayant la couleur i Supposons que les preacutedicats p et q
soient deacutefinis en fonction de la repreacutesentation graphique montreacutee dans la figure 63a
150
Une solution au problegraveme de coloriage de graphe peut ecirctre repreacutesenteacutee par trois expressions
de premier ordre
ϕ1 forallx (q1(x)andnotq2(x)andnotq3(x))or (notq1(x)andq2(x)andnotq3(x))or (notq1(x)andnotq2(x)andq3(x))
ϕ2 forallx forally p(xy)rarr p(yx)
ϕ3 forallx forally p(xy)rarr ((q1(x)rarrnotq1(y))and (q2(x)rarrnotq2(y))and (q3(x)rarrnotq3(y)))
La premiegravere stipule que chaque sommet a une couleur exacte la seconde indique que la
relation drsquoadjacence est symeacutetrique et lrsquoexpression finale stipule qursquoaucun sommet adjacent ne
peut avoir la mecircme couleur On peut voir que le graphe original ne satisfait pas ϕ1andϕ2andϕ3
Il existe plusieurs reacuteparations principales dont certaines sont indiqueacutees ici
T1 = τq1(5)7rarrperpτq2(5)7rarrgt
T2 = τp(45)7rarrperpτp(54)7rarrperp
T3 = τq1(1)7rarrperpτq3(1)7rarrgtτq1(4)7rarrperpτq3(4)7rarrgt
T4 = τp(24)7rarrperpτp(42)7rarrperpτq1(4)7rarrperpτq3(4)7rarrgt
La reacuteparation T1 corrige le graphe en changeant la couleur du sommet 5 en rouge Notons que
cela neacutecessite non seulement de mettre q2(5) agrave gt mais aussi q1(5) agrave perp sinon la structure
reacutesultante violerait ϕ1 Une autre reacuteparation (non repreacutesenteacutee) change le sommet 5 en vert La
reacuteparation T3 modifie plutocirct la relation drsquoadjacence et coupe le sommet 5 du reste du graphe
de sorte que le conflit de couleur soit reacutesolu
151
Ceux-ci correspondent aux moyens laquo intuitifs raquo de fixer le coloriage du graphe Cependant
il existe plusieurs autres reacuteparations primaires qui reacutepondent agrave la deacutefinition Par exemple la
transformation T4 eacutechange les couleurs des sommets 1 2 et 4 Notons qursquoil srsquoagit bien drsquoune
reacuteparation primaire en ce sens qursquoaucun sous-ensemble de ces endomorphismes ne restaure la
satisfiabiliteacute de la formule drsquoorigine De la mecircme faccedilon T5 coupe le bord entre les sommets
2 et 4 et passe au vert Au total il y a 17 reacuteparations primaires distinctes dans cet exemple
particulier
Encore une fois il convient de noter que sans contexte suppleacutementaire aucune de ces reacutepara-
tions nrsquoest une explication possible de la fausseteacute de ϕ1andϕ2andϕ3 sur le graphe original
Logique de premier ordre eacutetendue
Lrsquoexemple preacuteceacutedent montre la neacutecessiteacute drsquoeacutetendre la seacutemantique de la logique du premier
ordre agrave des fonctions arbitraires au lieu de preacutedicats strictement booleacuteens Cela peut facilement
ecirctre fait comme suit Soit A1 An et B des ensembles finis Nous deacutesignerons par FA1AnrarrB
lrsquoensemble de toutes les fonctions (prodi Ai)rarr B Une signature est un tuple de la forme
〈(A11 A1n1)rarr B1 (Am1 Amnm)rarr Bm〉
tel que fi est une fonction de lrsquoariteacute ni avec le domaine A11 A1ni et image Bi La logique
des preacutedicats est le cas particulier ougrave B1 = middot middot middot= Bnm = gtperp dans ce cas lrsquoimage peut ecirctre
omise et ougrave Ai j sont tous les mecircmes de sorte que seule lrsquoariteacute doit ecirctre connue Si f est une
fonction Ararr B et x deacutesigne un eacuteleacutement de A nous eacutecrirons x f pour deacutesigner f (x) permettant
ainsi une certaine forme de notation laquo objet raquo pour les fonctions
Dans ce contexte les quantificateurs de premier ordre doivent preacuteciser sur quel Ai j ils srsquoap-
152
pliquent de sorte que les expressions deviennent de la forme forallx isin Ai j ϕ et exist isin Ai j ϕ
Les termes de base peuvent maintenant comparer les valeurs de deux termes de fonction en
utilisant nrsquoimporte quel opeacuterateur binaire approprieacute
Les endomorphismes sont toujours deacutefinis de la mecircme maniegravere que pour la logique classique
du premier ordre agrave condition qursquoils se reacutefegraverent aux valeurs approprieacutees dans le domaine et
lrsquoimage de la fonction soumise au changement
Notons que ce formalisme eacutetendu nrsquoajoute aucune expressiviteacute agrave la logique du premier ordre si
tous les ensembles sont maintenus finis Il doit cependant simplifier lrsquoexpression de nombreuses
proprieacuteteacutes
Avec ce formalisme modifieacute nous sommes precircts agrave envisager des reacuteparations dans les proprieacuteteacutes
de mise en page Web Soit E un ensemble drsquoeacuteleacutements de page P un ensemble de valeurs
de pixels et C un ensemble de couleurs CSS Sur ces trois ensembles nous deacutefinissons les
fonctions Erarr P appeleacutees left right top et bottom correspondants respectivement aux
coordonneacutees x et y des coins supeacuterieur gauche(top-left) et infeacuterieur droit (bottom-right)
drsquoun eacuteleacutement De plus nous deacutefinissons un ensemble S de seacutelecteurs CSS lrsquoeacutevaluation drsquoun
seacutelecteur CSS sur un document peut ecirctre formaliseacutee comme une fonction $ Srarr 2E qui pour
une expression de filtre donneacutee retourne le sous-ensemble de E correspondant au seacutelecteur
Les endomorphismes peuvent ecirctre deacutefinis pour chacune de ces fonctions et doivent ecirctre
eacutecrits en utilisant la notation introduite preacuteceacutedemment Par exemple τwidth(e)7rarrk correspond agrave
lrsquoendomorphisme deacutefinissant la valeur de la fonction width (largeur) pour lrsquoeacuteleacutement e isin E
agrave k et laissant tout le reste tel qursquoil est
On peut alors exprimer la proprieacuteteacute que tous les eacuteleacutements dans une liste avec lrsquoID laquo menu raquo
153
A list item
Another list item
A third list item
The last list item
[|
(a)
A list item
Another list item
A third list item
The last list item
[ |
[ |[ |
(b)
A list item
Another list item
A third list item
The last list item
[[|
|
[|
[|
(c)
Figure 64 ndash Trois reacuteparations pour lrsquoexemple web
devraient ecirctre aligneacutes agrave gauche comme lrsquoexpression de premier ordre suivante
forallx isin $(menu li) forally isin $(menu li) xleft= yleft
Notons que cette expression correspond directement agrave la traduction du premier ordre de
lrsquoexpression de Cornipickle montreacutee dans la section 62
Trouver les reacuteparations principales pour cette expression et le fragment de page montreacute dans la
figure 61a produit un certain nombre de solutions dont trois sont montreacutees dans la figure 64
Les deux premiegraveres sont assez intuitifs La figure 64a corrige la page en deacuteplaccedilant lrsquoeacuteleacutement
deacutesaligneacute de la liste avec les autres alors que la Figure 64b fait le contraire en alignant les
trois eacuteleacutements de liste les plus agrave gauche avec le second La figure 64c donne un exemple de
lrsquoune des nombreuses solutions restantes dans ce cas tous les eacuteleacutements de liste sont deacuteplaceacutes
vers une nouvelle position commune x qui srsquoavegravere ecirctre une coordonneacutee qursquoaucun eacuteleacutement
nrsquoavait dans la page drsquoorigine
Ce dernier exemple fournit une illustration graphique de la diffeacuterence entre le concept original
de teacutemoin et celui de reacuteparation Alors qursquoun teacutemoin dans ce cas met en eacutevidence une paire
choisie au hasard drsquoeacuteleacutements mal aligneacutes (comme montreacute dans la figure 61b)) une reacuteparation
choisit des eacuteleacutements speacutecifiques et en plus deacutecrit ce qui doit ecirctre fait avec eux afin de reacuteparer
la violation de la proprieacuteteacute Ceci est sans doute plus reacuteveacutelateur pour un utilisateur et constitue
154
agrave notre avis lrsquoun des principaux avantages de cette technique
63 CALCUL DE LA REacutePARATION
Le concept de base de reacuteparation preacutesenteacute dans la section preacuteceacutedente se precircte agrave quelques points
de discussion En particulier le nombre de reacuteparations principales possibles est potentiellement
eacuteleveacute et la tacircche de geacuteneacuterer ces reacuteparations peut donc srsquoaveacuterer tregraves coucircteuse
631 ALGORITHME DE BASE ET COMPLEXITEacute
Lrsquoalgorithme montreacute dans 1 est un algorithme pour iteacuterer toutes les reacuteparations possibles drsquoune
structure Il eacutenumegravere simplement toutes les transformations possibles T isin 2TΣ Il veacuterifie
drsquoabord si T est bien deacutefini (crsquoest-agrave-dire que toute paire drsquoendomorphismes commute) et si
une reacuteparation geacuteneacutereacutee preacuteceacutedemment (stockeacutee dans lrsquoensemble TS) est un sous-ensemble de
lrsquoactuelle Il veacuterifie enfin si lrsquoapplication de cette transformation corrige la structure drsquoorigine
Il passe agrave la prochaine transformation candidate si lrsquoune de ces trois situations se produit
Sinon il ajoute cette transformation agrave son ensemble et le renvoie comme son prochain eacuteleacutement
Theorem 1 Lrsquoalgorithme 1 est coheacuterent et complet
Soit T une sortie de transformation par lrsquoalgorithme Par construction T est une reacuteparation
puisqursquoelle est bien deacutefinie et elle corrige la valeur de veacuteriteacute de σ dans ϕ De plus au
moment ougrave T est sorti aucun des eacuteleacutements de TS nrsquoest un sous-ensemble de T Puisque TS
contient toutes les reacuteparations de cardinaliteacute infeacuterieure agrave T et que par construction toutes les
transformations de cardinaliteacute similaires ne peuvent pas ecirctre des sous-ensembles il srsquoensuit
que T nrsquoest incluse par aucune reacuteparation existante et est donc principale Cela prouve la
155
Algorithm 1 Algorithme geacuteneacuterique pour lrsquoiteacuteration des reacuteparations primaires
procedure COMPUTEREPAIRS(ϕσ 2TΣ)TS = 0for all T isin 2TΣ do Eacutenumeacutereacutes en cardinaliteacute croissante
if notWELLDEFINED(T ) thenskip
end ifif SUBSUMED(TTS) then
skipend ifif T (σ prime) 6|= ϕ then
skipend ifTSlarr TScupTyield T
end forend procedure
coheacuterence de lrsquoalgorithme
Le fait que toutes ces reacuteparations majeures soient finalement eacutenumeacutereacutees est garanti par le
fait que tous les sous-ensembles de TΣ sont geacuteneacutereacutes agrave un moment donneacute ce qui prouve la
compleacutetude
Cet algorithme a eacuteteacute impleacutementeacute en Java et est disponible publiquement 1 En raison de sa
simpliciteacute et de sa geacuteneacutericiteacute lrsquoimpleacutementation des expressions des structures et des iteacuterations
de reacuteparation ne repreacutesente que 325 lignes de code Lrsquoeacutenumeacuteration des reacuteparations est exposeacutee
agrave lrsquoutilisateur sous la forme drsquoune classe classique Java Iterator qui peut ecirctre utiliseacutee par
les meacutethodes traditionnelles hasNext() et next() pour passer agrave travers lrsquoensemble complet
de reacuteparations principales dans lrsquoordre croissant de cardinaliteacute Les classes speacutecifiques au
domaine deacutefinissants les constructions logiques propositionnelles et de premier ordre sont
constitueacutees drsquoenviron 500 lignes de code suppleacutementaires Il est facile de voir que le temps
1 httpsgithubcomliflabfault-finder
156
drsquoexeacutecution de cet algorithme est exponentiel en fonction de la taille de TΣ qui peut elle-mecircme
ecirctre exponentielle dans un autre facteur (deacutependant du problegraveme modeacuteliseacute) Dans la logique
du premier ordre (telle qursquoutiliseacutee par un fragment de Cornipickle) si a1 an est lrsquoariteacute
respective de chaque preacutedicat dans la signature le nombre drsquoendomorphismes est sumi 2|A|ai
pour un domaine donneacute A
Malgreacute cela il est possible de montrer que cet algorithme est limiteacute par une borne infeacuterieure
theacuteorique Un ensemble drsquoendomorphismes TΣ est dit complet si pour tout σ σ prime isin Σ il existe
une transformation bien deacutefinie T sube TΣ tel que T (σ) = σ prime
Theorem 2 Eacutetant donneacute un ensemble de structures Σ un ensemble drsquoexpressions de langage
Φ et un ensemble complet de transformations TΣ le problegraveme du calcul des reacuteparations
principales est aussi difficile que le problegraveme de satisfiabiliteacute pour Φ
Soit ϕ isinΦ une expression du langage Si ϕ est satisfaisable alors il existe une structure σ isin Σ
telle que σ |= ϕ Prenons une structure arbitraire σ prime isin Σ Puisque TΣ est complet il existe
au moins une transformation T sube TΣ telle que T (σ prime) = σ Prenons le plus petit ensemble
de ce genre par deacutefinition il srsquoagit drsquoune reacuteparation principale et sera finalement eacutenumeacutereacutee
par lrsquoalgorithme 1 Puisque lrsquoalgorithme est complet au contraire aucune reacuteparation ne sera
trouveacutee si ϕ nrsquoest pas satisfaisable
632 REacuteDUCTION DU NOMBRE DE SOLUTIONS CANDIDATES
Ces reacutesultats de complexiteacute de base justifient une discussion sur la reacuteduction du nombre de
reacuteparations potentielles qui doivent ecirctre exploreacutees
157
Suppression des endomorphismes
Le nombre de transformations potentielles peut drsquoabord ecirctre reacuteduit en supprimant les endomor-
phismes dont on sait qursquoils sont impossibles en fonction du contexte Par exemple supposons
que les symboles propositionnels a et b dans lrsquoexemple 622 correspondent respectivement
aux assertions laquo le client paie pour un objet raquo et laquo le client reccediloit lrsquoarticle raquo On pourrait
supposer qursquoune eacutevaluation ougrave a est vraie ne peut pas ecirctre modifieacutee en la rendant fausse cela
correspondrait au fait qursquoune action effectueacutee par un acteur ne peut ecirctre annuleacutee Dans un tel
contexte seuls les endomorphismes reacuteglant les fausses variables agrave vrai seraient consideacutereacutes
Dans le cas des graphes comme dans lrsquoexemple 622 on pourrait imposer des restrictions
sur les changements qui lui sont autoriseacutes par exemple on pourrait dire que les arecirctes
existantes doivent rester inchangeacutees ou que seuls des sommets speacutecifiques peuvent ecirctre
colorieacutes diffeacuteremment Ceci encore une fois a pour effet de preacutefeacuterer certaines transformations
aux autres et reacuteduit globalement le nombre de reacuteparations disponibles
Transformations en groupes
La granulariteacute des endomorphismes disponibles peut eacutegalement ecirctre modifieacutee Dans le cas de
lrsquoexemple de coloriage de graphe il est eacutevident qursquoaucune reacuteparation ne consistera jamais
en un seul endomorphisme τqi(x)7rarrgt La raison est que lrsquoexpression ϕ1 requiert que chaque
sommet ait exactement une couleur assigner qi agrave gt pour un sommet implique que le q j
restant pour j 6= i soit mis agrave perp On peut donc deacutefinir un nouvel ensemble de transformations
158
approprieacutees au contexte repreacutesentant les changements de couleur
TC =⋃xisinA
⋃iisin[13]
j 6=ik 6= j 6=i
τqi(x)7rarrgtτq j(x)7rarrperpτqk(x)7rarrperp
De mecircme comme la relation drsquoadjacence est symeacutetrique mettre p(xy) agrave gt (resp perp) ne
peut pas ecirctre fait sans mettre p(yx) agrave gt (resp perp) Au lieu de consideacuterer les changements
individuels aux seules entreacutees de p on peut deacutefinir un ensemble de changements de bord
TE =⋃xisinA
⋃yisinA
⋃bisingtperp
τp(xy)7rarrbτp(yx)7rarrb
On pourrait alors utiliser TCcupTE comme lrsquoensemble des transformations au lieu de TΣ Bien
que cela ne change rien agrave la theacuteorie sur les solutions actuelles le fait que TCcupTE soit plus petit
que TΣ a un effet positif sur la performance drsquoun algorithme drsquoeacutenumeacuteration dans la pratique
La mecircme chose peut ecirctre dite des endomorphismes de lrsquoexemple 622 Plutocirct que de consideacuterer
tous les changements individuels des coordonneacutees (xy) des quatre coins de chaque eacuteleacutement
on pourrait deacutefinir des sous-ensembles correspondants agrave des modifications plus intuitives par
exemple lrsquoensemble des deacuteplacements horizontaux pourrait ecirctre deacutefini comme
TH =⋃eisinE
⋃pisinP
τleft(e) 7rarr pτright(e) 7rarr (τright(e)minus p)
On peut alors limiter la recherche pour les reacuteparations agrave celles qui sont faites uniquement
des deacuteplacements (horizontaux ou verticaux) ou des redimensionnements (horizontaux ou
verticaux) drsquoeacuteleacutements etc
159
(a) Le reacutesultat attendu
(b) Problegraveme drsquoalignement
Figure 65 ndash Eacuteleacutements mal aligneacutes capture et suggestion de correction
64 EXEMPLES
Les trois figures suivantes montrent des exemples simples de bugs montrant la capaciteacute de
lrsquooutil agrave rechercher des candidats de correction en se basant sur lrsquoapproche proposeacutee Les
figures montrent les verdicts qui sont des suggestions donneacutees par lrsquooutil pour chacun des cas
Il est a noteacute que le processus prend entre 2 et 20 millisecondes pour trouver un candidat (sans
prendre compte du temps drsquoeacutevaluation)
Exemple 1 eacuteleacutements mal aligneacutes Dans ce cas 65 la suggestion est de deacuteplacer 69 pixels
vers la gauche lrsquoeacuteleacutement qui a lrsquoidentifiant ID=2
160
(a) Le reacutesultat attendu
(b) Problegraveme de chevauchement
Figure 66 ndash Eacuteleacutements qui se chevauchent capture et suggestion de correction
Exemple 2 eacuteleacutements qui se chevauchent La suggestion est de deacuteplacer le bat de lrsquoeacuteleacutement
avec lrsquoID 11 agrave 126 pixels 66
Exemple 3 eacuteleacutement qui deacuteborde de son conteneur La suggestion est de deacuteplacer la
droite de lrsquoeacuteleacutement avec lrsquoID 14 agrave 1277 pixels 67
161
(a) Le reacutesultat attendu
(b) Problegraveme de deacutebordement
Figure 67 ndash Eacuteleacutement qui deacuteborde de son conteneur capture et suggestion de correction
CHAPITRE 7
CONCLUSION GEacuteNEacuteRALE
Les applications web se multiplient et se diversifient et les exigences de leurs utilisateurs srsquoac-
centuent et srsquoamplifient avec La relation application web-utilisateur est assureacutee uniquement
via la page Web Pour que cette relation soit tenue la page Web doit ecirctre entretenue et reacutepondre
agrave un ensemble de critegraveres se charger rapidement fournir le service deacutesireacute et ecirctre agreacuteable agrave
voir sur tous les appareils des ordinateurs de bureau ou portables des tablettes et teacuteleacutephones
mobiles Cependant la complexiteacute de la relation entre HTML CSS et JavaScript engendre des
difficulteacutes consideacuterables pour la mise en page des applications web le mecircme document peut
ecirctre afficheacute dans une varieacuteteacute de tailles de reacutesolutions de navigateurs et mecircme de peacuteripheacuteriques
entravant de ce fait la mise en page Les laquo bugs raquo de mise en page connaissent par conseacutequent
une preacutesence remarquable allant de problegravemes de particulariteacutes relativement simple tels que
des eacuteleacutements superposeacutes ou incorrectement aligneacutes agrave des problegravemes plus seacuterieux compromet-
tant la fonctionnaliteacute de lrsquointerface utilisateur Les tentatives bien que rares visant agrave reacutesoudre
ces problegravemes restent incapables de cerner tous les aspects de ceux-ci (problegravemes)
Nous distinguons dans ce contexte deux familles drsquoapproches servant agrave tester les interfaces
des applications web lrsquoapproche visuelle se basant sur la comparaison des captures drsquoeacutecran
pixel par pixel et lrsquoapproche deacuteclarative fonctionnant directement sur des informations sur
163
la mise en page Si dans la premiegravere qui fonctionne mal avec les donneacutees dynamiques le
deacuteveloppeur de test se heurte agrave lrsquoimpossibiliteacute de comparer des images de diffeacuterentes tailles
drsquoeacutecran il doit se soumettre dans la seconde aux exigences des descriptionsscripts de test
assez verbeux en deacutecrivant les regravegles de son interface graphique
Lrsquoapproche que nous proposons agrave savoir lrsquooutil Cornipickle offre les avantages suivants elle
fonctionne sur la majoriteacute de combinaisons navigateurssystegravemes drsquoexploitation sans recourir
aux plugins speacutecifiques au navigateur (ou limiteacutes par le navigateur) De plus elle permet
1 lrsquoeacutevaluation des speacutecifications en fonction des informations recueillies sur le client en se
dispensant de lrsquoeacutevaluation statique de HTML et CSS du cocircteacute serveur 2 lrsquointerpreacutetation des
speacutecifications de telle maniegravere agrave eacuteviter une charge de calcul excessive dans le navigateur
3 lrsquoutilisation drsquoun autre langage que JavaScript pour lrsquoimpleacutementation 4 la gestion des
proprieacuteteacutes comportementales impliquant plus drsquoun instantaneacute de page par lrsquooutil 5 la pos-
sibiliteacute agrave lrsquoutilisateur drsquoajouter de supprimer ou de modifier les speacutecifications eacutevalueacutees par
lrsquooutil 6 lrsquoexclusiviteacute drsquoexprimer agrave travers un langage deacuteclaratif des proprieacuteteacutes agrave propos du
document (Document Object Model) et des proprieacuteteacutes CSS drsquoune page Web 7 la potentialiteacute
de rechercher et deacutetecter automatiquement les bugs comportementaux et RWD (Responsive
Web Design) dans les applications web 8 la reacuteparation en fournissant un algorithme de base
pour calculer les transformations
Le prototype de preuve de concept de Cornipickle a montreacute des reacutesultats prometteurs dans sa
capaciteacute agrave exprimer facilement les conditions de bugs de mise en page dans les applications
web et agrave les deacutetecter efficacement dans des exemples de pages de plus de 35 applications
reacuteelles
Lrsquoefficaciteacute de notre outil Cornipickle nous a permis drsquoattraper automatiquement certains
problegravemes communs rencontreacutes dans les applications web modernes (RIA et RWD) Les
164
proprieacuteteacutes de Cornipickle garantissent que les pages drsquoune application suivent diffeacuterents
types de contraintes en particulier le seacutequenccedilage possible des pages qui est lrsquoobjectif de ce
volet de notre travail En combinant les performances de Crawljax pour explorer les eacutetats
de lrsquoapplication (crawler state-aware) et un stateful test oracle (speacutecifications de logiques
temporelles du premier ordre) dans Cornipickle nous avons obtenu des reacutesultats prometteurs
Une petite application a eacuteteacute deacuteveloppeacutee et inteacutegreacutee afin de tester le rendu visuel dans les
diffeacuterentes fenecirctres possibles afin drsquoattraper les deacutefauts RWD
Notre solution a quelques limites et surmonter ces limitations pourrait ecirctre la base de futurs
travaux Lrsquoutilisation de Cornipickle nous limite agrave des contraintes se reacutefeacuterant uniquement aux
eacuteleacutements qui sont afficheacutes Cela rend les bugs causeacutes au niveau backend (cocircteacute serveur) parfois
difficiles agrave attraper il est neacutecessaire de trouver les eacuteleacutements afficheacutes qui peuvent indirectement
repreacutesenter les eacutetats du serveur Dans la mecircme ligne si Crawljax ne notifie pas un changement
drsquoeacutetat lorsque le DOM change il nrsquoest pas possible drsquoeacutevaluer cette page ougrave un bug aurait pu
se produire En outre lorsqursquoune proprieacuteteacute est eacutevalueacutee agrave false elle est fausse pour le reste
de lrsquoanalyse et aucun autre bug ne peut ecirctre intercepteacute avec cette proprieacuteteacute Cela a causeacute un
problegraveme avec la deacutecouverte de bugs RWD observables car la plupart des eacutechecs ne sont pas
observables et les proprieacuteteacutes devaient trouver un bug observable comme premier bug
De plus la capaciteacute de Cornipickle agrave renvoyer une explication utile de la violation drsquoune
proprieacuteteacute sur un document Web donneacute est limiteacutee Crsquoest pourquoi nous avons introduit une
deacutefinition du concept de reacuteparation dont le calcul fournit des informations plus preacutecises sur les
changements requis pour une structure afin de satisfaire une speacutecification donneacutee Lrsquoeacutetude des
reacuteparations et leur calcul fait partie du travail en cours et de nombreux problegravemes sont encore
ouverts Par exemple un calcul efficace des reacuteparations repose sur la suppression du plus
grand nombre possible de transformations candidates par conseacutequent des techniques pour
identifier facilement des endomorphismes qui ne peuvent jamais faire partie drsquoune solution
165
pourraient ecirctre rechercheacutees De mecircme nous preacutevoyons drsquoeacutetudier des techniques qui pourraient
geacuteneacuterer lrsquoensemble des reacuteparations directement agrave partir de la speacutecification et de la structure
deacutefectueuse plutocirct que drsquoutiliser lrsquoalgorithme brut de geacuteneacuteration et de test preacutesenteacute
Le concept de calcul des reacuteparations est en cours de construction et il reste agrave eacutetablir ses liens
avec les travaux connexes Comme nous lrsquoavons vu dans la section preacuteceacutedente trouver des
reacuteparations concerne le concept de reacutesolution de satisfiabiliteacute (SAT) et plus preacuteciseacutement le
problegraveme du SAT increacutementiel [64] Les solveurs SAT traditionnels sont neacutecessaires pour
trouver un seul modegravele drsquoexpression En SAT increacutementiel un solveur trouve un premier
modegravele drsquoexpression mais peut eacutegalement ecirctre demandeacute agrave plusieurs reprises de fournir des
modegraveles suppleacutementaires Lorsqursquoun ensemble de transformations est termineacute lrsquoiteacuteration sur
les modegraveles revient agrave effectuer des iteacuterations sur les reacuteparations
BIBLIOGRAPHIE
[1] Alm specifications examples http auckland-
layoutsourceforgenetexamplesindexhtml
[2] Applitools visual test automation httpwwwapplitools
comAccessed25April2016
[3] Blackout repport httpssiteshksharvardeduhepgPapersNYISO
blackoutreport8Jan04pdf
[4] Bugs catastrophiques httpwwwslidesharenetwearesocialsg
social-media-for-travel-brands
[5] critical-rendering-path httpsdevelopersgooglecomwebfundamentals
performancecritical-rendering-path
[6] Deacutefinition du viewport httpswwwdefinitions-marketingcomdefinition
viewport
[7] Exemple webspecwatij https gistgithubcomtux2323954186
[8] Froont httpfroontcom
167
[9] Galen httpwwwswtestacademycomgalen-framework
[10] galen framework 2017 httpgalenframeworkcom
[11] howbrowserswork 2017 HTTPtaligarsielcomProjects
howbrowserswork1html
[12] Html and css w3c standards httpswwww3orgstandardswebdesign
htmlcss
[13] Http response httpswwww3orgProtocolsrfc2616rfc2616-sec6html
sec6
[14] http coursescsvteduprofessionalismtherac_25therac_1html httpcourses
csvteduprofessionalismTherac_25Therac_1html
[15] http wearesocialsg httpwearesocialsg
[16] http wwwcnncom2003us0814poweroutage httpwwwcnncom2003US
0814poweroutage
[17] http wwwyfolirenethumrhumeur13htm httpwwwyfolirenethumr
humeur13htm
[18] Les bases de sahiscript https sahiprocomdocsscriptingsahi-scripting-basicshtml
[19] mobile and tablet internet usage exceeds desktop for first
time worldwide httpgsstatcountercompress
mobile-and-tablet-internet-usage-exceeds-desktop-for-first-time-worldwide
[20] Phantomcss 2017 httpsgithubcomHuddlePhantomCSS
168
[21] Principe de fonctinement de sahi https wwwthoughtworkscominsightsblogintroduction-
sahi-part-1
[22] Respondr httprespondrio
[23] Responsinator httpswwwresponsinatorcom
[24] Responsivepxcom httpresponsivepxcom
[25] Reuters us-blackout-newyork 2003 https
wwwreuterscomarticleus-blackout-newyork
spike-in-deaths-blamed-on-2003-new-york-blackout-idUSTRE80Q07G20120127
[26] Rwdbookmarklet httpswwwsitepointcom
responsive-web-design-tool
[27] Screenfly httpquirktoolscomscreenfly
[28] Software bugs found to be cause of toyota acceleration death httpswwwgoogle
frampswwwcomputerworldcomarticle2573466disaster-recovery
software-failure-cited-in-august-blackout-investigationamphtml
[29] Software failure cited in august blackout investigation https
wwwcomputerworldcomarticle2573466disaster-recovery
software-failure-cited-in-august-blackout-investigationhtml
[30] Utilisation de capybara https wwwsitepointcombasics-capybara-improving-tests
[31] Vpresizer httplabmaltewassermanncomviewport-resizer
[32] Washingtonpost toyota reaches 12-billion settlement to end criminal
probe2014 httpswwwwashingtonpostcombusinesseconomy
169
toyota-reaches-12-billion-settlement-to-end-criminal-probe2014
03195738a3c4-af69-11e3-9627-c65021d6d572_storyhtmlutm_term=
4826d81e2aa6
[33] Watir http watircom
[34] websiteresponsivetest httpwwwwebsiteresponsivetestcom
[35] A Arora and M Sinha Web application testing A review on techniques tools and state
of art International Journal of Scientific Iamp Engineering Research 3(2) 1ndash6 2012
[36] K Benjamin G Von Bochmann M E Dincturk G-V Jourdan and I V Onut A stra-
tegy for efficient crawling of rich internet applications In 11th international conference
on Web engineering serICWErsquo11 page 74ndash89 Heidelberg Springer-Verlag 2011
[37] Tim Berners-Lee Roy Fielding and Larry Masinter Uniform resource identifier (URI)
Generic syntax Technical report January 2005 RFC 3986
[38] Oussama Beroual Francis Guerin and Sylvain Halleacute Searching for behavioural bugs
with stateful test oracles in web crawlers In 10th IEEEACM International Workshop on
Search-Based Software Testing SBSTICSE 2017 Buenos Aires Argentina May 22-23
2017 pages 7ndash13 2017
[39] T-H Chang T Yeh and RC Miller Gui testing using computer vision In the SIGCHI
Conference on H man Factors in Computing Systems CHI rsquo10 pages 1535ndash1544 New
York NY USA may 2010 ACM
[40] S Choudhary E Dincturk S Mirtaheri G-V Jourdan G Bochmann and I Onut
Building rich internet applications models Example of a better strategy In Web
Engineering ser Lecture Notes in Computer Science F Daniel P Dolog and Q Li
volume 7977 page 291ndash305 Springer Berlin Heidelberg 2013
170
[41] S Choudhary M E Dincturk S M Mirtaheri A Moosavi G von Bochmann G-V
Jourdan and I-V Onut Crawling rich internet applications the state of the art In
CASCON page 146ndash160 IBM Corp 2012
[42] Shauvik Roy Choudhary Mukul R Prasad and Alessandro Orso X-PERT accurate
identification of cross-browser issues in web applications In David Notkin Betty H C
Cheng and Klaus Pohl editors 35th International Conference on Software Engineering
ICSE rsquo13 San Francisco CA USA May 18-26 2013 pages 702ndash711 IEEE ACM
2013
[43] V Dallmeier M Burger T Orth and A Zeller Webmate Generating test cases for
web 20 In D Winkler S Biffl J Bergsmann (Eds) SWQD volume 133 of Lecture
Notes in Business Information Processing page 55ndash69 Springer 2013
[44] M E Dincturk ldquomodel-based crawling ndash an approach to design efficient crawling
strategies for rich internet applications Masterrsquos thesis EECS - University of Ottawa
2013
[45] M E Dincturk S Choudhary G von Bochmann G-V Jourdan and I-V Onut A
statistical approach for efficient crawling of rich internet applications ICWE page
362ndash369 2012
[46] Mustafa Emre Model-based Crawling - An Approach to Design Efficient Crawling
Strategies for Rich Internet Applications PhD thesis University of Ottawa 2013
[47] Jesse James Garrett Ajax A new approach to web applications - adaptive path 2005
[48] Alan Grosskurth and Michael Godfrey A case study in architectural analysis The
evolution of the modern web browser Software Maintenence and Evolution Research
and PracticeEMSE 2007
171
[49] Allan Grosskurth and Michael Godfrey A reference architecture for web browsers
Software Maintenence and Evolution Research and Practice page 1ndash7 2006
[50] A Guttman R-trees a dynamic index structure for spatial searching June 1984
[51] Sylvain Halleacute Nicolas Bergeron Francis Guerin Gabriel Le Breton and Oussama
Beroual Declarative layout constraints for testing web applications J Log Algebr Meth
Program 85(5) 737ndash758 2016
[52] Sylvain Halleacute and Oussama Beroual Fault localization in web applications via model
finding In Proceedings First Workshop on Causal Reasoning for Embedded and safety-
critical Systems Technologies CRESTETAPS 2016 Eindhoven The Netherlands 8th
April 2016 pages 55ndash67 2016
[53] Sylvain Halleacute and Roger Villemaire Constraint-based invocation of stateful web services
The Beep Store (case study) In 4th International ICSE Workshop on Principles of
Engineering Service-Oriented Systems PESOS 2012 June 4 2012 Zurich Switzerland
pages 61ndash62 2012
[54] S Halleacute G Le Breton F Maronnaud A Blondin Masseacute and S Gaboury Exhaustive
exploration of ajax web applications with selective jumping In ICST page 243ndash252
IEEE Computer Society 2014
[55] Arnaud Le Hors Philippe Le Heacutegaret Lauren Wood Gavin Nicol Jonathan Ro-
bie Mike Champion and Steve Byrne Document object model level 2 core 2000
http wwww3orgTRDOM-Level-2-Core
[56] Jaakko Jaumlrvi Mat Marcus Sean Parent John Freeman and Jacob Smith Algorithms for
user interfaces In Proceedings of the Eighth International Conference on Generative
172
Programming and Component Engineering GPCE rsquo09 pages 147ndash156 New York NY
USA 2009 ACM
[57] Jaakko Jaumlrvi Mat Marcus Sean Parent John Freeman and Jacob N Smith Property
models from incidental algorithms to reusable components In Yannis Smaragdakis and
Jeremy G Siek editors GPCE pages 89ndash98 ACM 2008
[58] Sonal Mahajan and William G J Halfond WebSee A tool for debugging HTML pre-
sentation failures In 8th IEEE International Conference on Software Testing Verification
and Validation ICST 2015 Graz Austria April 13-17 2015 pages 1ndash8 2015
[59] Ethan Marcotte Responsive web design Eyrolles 4 edition 2013
[60] A Mesbah A van Deursen and S Lenselink Crawling Ajax-based web applications
through dynamic analysis of user interface state changes ACM Transactions on the Web
(1) 6 2012
[61] S M Mirtaheri D Zou G V Bochmann G-V Jourdan and I V Onut Dist-ria crawler
A distributed crawler for rich internet applications In 8th International Conference on
P2P Parallel Grid Cloud and Internet Computing pages 105ndash112 IEEE Computer
Society Washington 2013
[62] Seyed M Mirtaheri Mustafa Emre Dincturk Salman Hooshmand Gregor V Bochmann
and Guy-Vincent Jourdan A brief history of web crawlers In CASCON rsquo13 Proceedings
of the 2013 Conference of the Center for Advanced Studies on Collaborative Research
pages 40ndash54 IBM Corp Riverton NJ USA ccopy2013 2013
[63] MTamm Http response httpsdeslidesharenetMichaelTamm
fighting-layout-bugs
173
[64] Alexander Nadel and Vadim Ryvchin Efficient SAT solving under assumptions In SAT
pages 242ndash255 2012
[65] C Olston and M Najork Web crawling Foundations and Trends in Information
Retrieval 4 175ndash246 2010
[66] Sean Parent Mat Marcus and Foster Brereton ASL overview Technical report Adobe
Systems 2007 httpstlabadobecomgroup__asl__overviewhtml
[67] Pedro A Szekely Piyawadee Noi Sukaviriya Pablo Castells Jeyakumar Muthukumara-
samy and Ewald Salcher Declarative interface models for user interface construction
tools the MASTERMIND approach In Leonard J Bass and Claus Unger editors
Proceedings of the IFIP TC2WG27 Working Conference on Engineering for Human-
Computer Interaction volume 45 of IFIP Conference Proceedings pages 120ndash150
Chapman amp Hall 1995
[68] Seyed M Mir Taheri Distributed Crawling of Rich Internet Applications PhD thesis
University of Ottawa 2015
[69] Michael Tamm Fighting layout bugs 2009 httpswwwyoutubecomwatchv=
WY3C6FHqSqQ
[70] Hideo Tanida Mukul R Prasad Sreeranga P Rajan and Masahiro Fujita Automated
system testing of dynamic web applications volume 303 page 181ndash196 Springer Berlin
Heidelberg 2013
[71] te (testing experience) The Magazine for Professional Testers Test automation - does it
make sense a simplified automation solution using watij wwwtestingexperiencecom
[72] Thomas A Walsh Gregory M Kapfhammer and Phil McMinn Automated layout
failure detection for responsive web pages without an explicit oracle In Proceedings
174
of the 26th ACM SIGSOFT International Symposium on Software Testing and Analysis
Santa Barbara CA USA July 10 - 14 2017 pages 192ndash202 2017
[73] Thomas A Walsh Gregory M Kapfhammer and Phil McMinn Redecheck an auto-
matic layout failure checking tool for responsively designed web pages In Proceedings
of the 26th ACM SIGSOFT International Symposium on Software Testing and Analysis
Santa Barbara CA USA July 10 - 14 2017 pages 360ndash363 2017
[74] Thomas A Walsh Phil McMinn and Gregory M Kapfhammer Automatic detection
of potential layout faults following changes to responsive web pages (N) In 30th
IEEEACM International Conference on Automated Software Engineering ASE 2015
Lincoln NE USA November 9-13 2015 pages 709ndash714 2015
vi
211 Incoheacuterence dans le champ de formulaire du site CallingCards 48210 Exemple drsquoeacuteleacutements inaccessibles 57212 Exemple de mojibake (a) donneacutees UTF-8 afficheacutees comme Cp1252 (b)
donneacutees Cp1252 afficheacutees comme UTF-8 58213 Exemples de Mojibake dans Doodle 59214 Des donneacutees extraites de la base de donneacutees sont incorrectement eacutechappeacutees
dans IEEE PDF eXpress on constate la preacutesence de plusieurs apostrophes 60215 Sur cette page YouTube du code JavaScript est afficheacute au lieu drsquoecirctre interpreacuteteacute 60216 Eacuteleacutements mobiles la position et la bordure de la zone du texte changent lors
de la saisie du texte (NSERC) 60217 Confusion connexiondeacuteconnexion dans une page web le contenu pour un
utilisateur connecteacute (en haut de la page a droite) coexiste avec le formulairede connexion reacuteserveacute aux utilisateurs qui ne sont pas en principe connecteacutes 61
218 Incoheacuterences dans le reacutesultat de la recherche 61219 Code CSS avec des conditions sur la largeur de lrsquoappareil Il srsquoagit drsquoun
exemple de media queries 61220 Le bug de deacutepassement drsquoeacuteleacutements sur le site httpswwwthelilycom 62221 Le bug de deacutepassement du viewport sur le site httpswwwslaveryfootprint
org 62222 Le bug de couverture drsquoeacuteleacutements sur le site httpswwwanthedesignfr 62
31 Exemple de code pour Selenium WebDriver 6432 Commandes de base de Capybara [30] 6633 Exemple drsquoutilisation de Watij [71] 6734 Page de connexion (login) de Yahoo [71] 6735 Exemple simple drsquoun test JUnit Watij WebSpec [7] 6836 Exemple de Sahi script [18] 7037 Architecture de Sahi (figure tireacutee de [21]) 7038 Le fonctionnement geacuteneacuteral de lrsquooutil drsquoanalyse WebSee 7439 Outputs de WebSee eacuteleacutements HTML deacutefectueux 74310 Exemple de traitement drsquoimage avec FLB (figure tireacutee de [63]) 76311 Exemple drsquoutilisation de Sikuli (figure tireacutee de [39]) 78312 Exemple avec Auckland (figure tireacutee de [1]) 81313 Une simple speacutecification avec Auckland [1] 81314 Exemple drsquoune boicircte de dialogue pour enregistrer un fichier image 83315 Une simple speacutecification deacuteclarative dans le langage Adam du modegravele de
proprieacuteteacute pour le dialogue dans Figure314 [56] 84316 Une simple speacutecification avec Eve [56] 85317 Exemple drsquoune speacutecification Galen [9] 89318 Exemple drsquoun script Automotion [70] 90319 Exemple de faux positif avec PhantomCSS 94
41 Architecture et interactions de Cornipickle 100
vii
42 Une page simple seacuterialiseacutee en JSON 10143 Une capture drsquoeacutecran de Cornipickle en action 10244 Un document DOM simple (a) Structure HTML (b) Repreacutesentation en arbre
DOM Seuls les noms des eacuteleacutements sont afficheacutes les attributs et valeursrestants sont omis pour plus de clarteacute 111
45 Exemple de code jQuery veacuterifiant que deux eacuteleacutements ont le mecircme texte 116
51 Le bug de connexions multiples Un utilisateur deacutejagrave connecteacute se voit proposerlrsquooption de se reconnecter 121
52 Le bug des paniers multiples Des boutons pour creacuteer un panier et ajouter desarticles au panier coexistent sur la mecircme page 121
53 Le bug de la suppression drsquoun panier inexistant Des boutons pour retirer dupanier et creacuteer un panier coexistent sur la mecircme page 122
54 Flux drsquointeraction et de seacuterialisation (Crawljax-Cornipickle) 12655 Le code neacutecessaire pour attraper le bug des connexions multiples en utilisant
Crawljax sans Cornipickle 12956 Temps de calcul de lrsquointerpreacuteteur en fonction du nombre drsquoeacuteleacutements dans la
page 13557 Temps de calcul incluant la seacuterialisation de la page par la sonde JavaScript et
lrsquointerpreacutetation de la proprieacuteteacute en fonction du nombre drsquoeacuteleacutements dans la page136
61 Exemple drsquoune erreur de mise en page Web simple (a) lrsquoun des eacuteleacutementsde la liste est incorrectement aligneacute avec les autres (b) un teacutemoin (witness)produit par lrsquooutil Cornipickle 143
62 Illustration du concept de reacuteparation principale 14663 Quelques reacuteparations possibles pour un coloriage de graphe deacutefectueux 14964 Trois reacuteparations pour lrsquoexemple web 15365 Eacuteleacutements mal aligneacutes capture et suggestion de correction 15966 Eacuteleacutements qui se chevauchent capture et suggestion de correction 16067 Eacuteleacutement qui deacuteborde de son conteneur capture et suggestion de correction 161
LISTE DES TABLEAUX
11 Statistiques des parts drsquoutilisation des navigateurs dans le monde entre mars2015 et mars 2016 24
21 Sites et applications web pour lesquelles au moins un bug de mise en page aeacuteteacute trouveacute 38
31 Limites et diffeacuterences entre trois outils majeurs des approches existantes 95
41 La grammaire BNF pour Cornipickle (Partie I) 10442 La grammaire BNF pour Cornipickle (Partie II) 10643 Extensions de la grammaire BNF pour Cornipickle 10844 La seacutemantique formelle de Cornipickle aaprime isin A sont les noms drsquoattributs
DOM v isin V est une valeur drsquoattribut c isin C est un seacutelecteur CSS ξ et ξ prime
sont des noms de variables ν ν prime isin N sont les nœuds DOM et ϕ et ψ sont deseacutenonceacutes Cornipickle quelconques Lorsque t est vide Always srsquoeacutevalue agrave V raiet Eventually et Next srsquoevaluent agrave Faux 113
61 La deacutefinition reacutecursive de la fonction de calcul du verdict ω 140
INTRODUCTION
Le mot bug qui signifie en anglais laquo insecte raquo et qui a eacuteteacute franciseacute pour devenir laquo bogue raquo
a vu le jour dans les anneacutees quarante agrave la suite de la panne qursquoa connu le dernier cri des
ordinateurs de lrsquoeacutepoque le Mark II Comme son nom lrsquoindique la cause eacutetait un insecte qui
srsquoeacutetait introduit dans un relais eacutelectromeacutecanique de celui-ci La panne fut deacutecouverte par la
brillante matheacutematicienne et pionniegravere de la programmation Grace Hopper Il srsquoagit du tout
premier vrai bug informatique car on utilisait deacutejagrave le mot pour deacutesigner des problegravemes dans les
appareils eacutelectriques [17] Depuis le mot bug est devenu synonyme de tout dysfonctionnement
ou anomalie drsquoun programme
Le monde drsquoaujourdrsquohui est piloteacute par des ordinateurs dans tous les domaines eacutenergeacutetique
judiciaire sanitaire militaire etc De ce fait la manifestation drsquoun bug peut entraicircner des
deacutesordres des perturbations voire des catastrophes Les trois derniegraveres deacutecennies ont connu
une multitude de bugs de grande envergure
Parmi les plus importants mentionnons une interruption en 2003 de plusieurs jours dans
lrsquoalimentation en eacutelectriciteacute drsquoune cinquantaine de millions drsquoameacutericains Lors de cet incident
une douzaine de personnes ont mecircme trouveacute la mort empoisonneacutees au monoxyde de carbone
en tentant de remeacutedier agrave ce problegraveme par des geacuteneacuterateurs au diesel On a compteacute plus de
2
six milliards de dollars de deacutegacircts mateacuteriels A lrsquoorigine de cette panne une paralysie totale
provoqueacutee par deux logiciels chargeacutes du controcircle de la production qui essayaient de modifier
le mecircme fichier simultaneacutement [25 3 16 29]
Mentionnons eacutegalement des centaines drsquoaccidents de la route meurtriers survenus entre 2009
et 2011 et dont les victimes eacutetaient les proprieacutetaires de la Lexus ES350 du constructeur Toyota
Les conducteurs perdaient la maicirctrise du veacutehicule une fois qursquoil atteignait la vitesse de 150
kmh puisque ce seuil entraicircnait la deacutesactivation de la peacutedale de frein Durant deux anneacutees les
chauffeurs sont accuseacutes par Toyota de confondre les peacutedales de frein et drsquoacceacuteleacuteration alors
qursquoune expertise finit par reacuteveacuteler une deacutefaillance dans lrsquoordinateur de bord Les pertes sont
estimeacutees dans ce cas agrave 24 milliards de dollars [32 28]
Parmi les bugs informatiques les plus meurtriers on compte eacutegalement un dysfonctionnement
en 1987 de la machine de radiotheacuterapie Therac 25 chargeacutee drsquoadministrer aux patients la
quantiteacute de radioactiviteacute qui leur est prescrite Agrave certaines occasions la machine leur donne
vingt fois la dose mortelle occasionnant de ce fait la blessure drsquoun patient et la mort de
cinq autres Le logiciel destineacute agrave veiller au bon positionnement et agrave la preacutesence de la plaque
meacutetallique censeacutee recevoir le rayon pour le filtrer et le concentrer a malheureusement failli agrave
son rocircle [14]
Tous ces exemples sont des bugs aux conseacutequences catastrophiques Heureusement tous les
bugs ne sont pas aussi deacutevastateurs mais ils peuvent neacuteanmoins srsquoaveacuterer nuisibles et reacutepandus
Crsquoest le cas drsquoun type de bug auquel les informaticiens font face agrave chaque instant agrave savoir les
bugs de mise en page dans les interfaces des applications web qui se trouvent agrave lrsquoorigine des
problegravemes drsquoaffichage rencontreacutes quotidiennement dans les interfaces web Agrave cet eacutegard des
chiffres datant de 2015 lieacutes agrave Internet donnent matiegravere agrave reacuteflexion Le reacuteseau compte plus de
trois milliards drsquointernautes dont deux milliards sont inscrits sur les reacuteseaux sociaux Plus de
3
huit cent mille nouveaux sites Internet sont mis en ligne chaque jour [15] [4] Par conseacutequent
le nombre drsquoutilisateurs des applications web est consideacuterable et le nombre de personnes
toucheacutees par les bugs drsquointerfaces reacutesultant de ces applications est eacutenorme Lrsquoenjeu de ce fait
est tregraves grand sur tous les plans
La bonne conduite drsquoune application web exige une bonne apparence visuelle des pages web
sans aucune deacutefaillance drsquoaffichage facilitant ainsi lrsquoutilisation de lrsquoapplication et offrant un
meilleur service agrave lrsquoutilisateur Trois types de problegravemes drsquoaffichage sont releveacutes un premier
type qualifieacute de non gecircnant tel qursquoun deacutebordement drsquoun paragraphe de sa bordure ou un
problegraveme drsquoalignement ou mecircme une sorte de caractegravere speacutecial mal afficheacute (mojibake) Un
deuxiegraveme type qualifieacute de gecircnant telle qursquoune image deacuteplaceacutee qui couvre un paragraphe ou
une autre partie de la page
Par contre le troisiegraveme type est plus grave et peut conduire agrave un blocage de lrsquoapplication dont
les effets risquent drsquoecirctre seacuterieux compromettant la fonctionnaliteacute de lrsquointerface utilisateur Un
4
exemple de bug qui affecte la fonctionnaliteacute de lrsquoapplication Le mauvais fonctionnement des
boutons de nombreuses applications montrent des eacuteleacutements superposeacutes qui se comportent
comme des laquo pop-ups raquo dans la fenecirctre Cependant dans un certain nombre de cas les
boutons de ces fenecirctres sont inopeacuterants cliquer dessus plusieurs fois ne produit aucun effet
Ce problegraveme a eacuteteacute observeacute dans des sites aussi varieacutes qursquoAmerican Airlines Dropbox et
BitBucket Dans certains cas lrsquoutilisateur est effectivement bloqueacute dans la fenecirctre contextuelle
ou la page qui contient le bouton et ne peut pas continuer sans forcer un rechargement complet
du document
Cependant les travaux visant agrave reacutesoudre les problegravemes drsquointerface se font tregraves rares Halleacute et al
[51] sont parmi les premiers agrave srsquointeacuteresser agrave ce genre de problegraveme Mahajan et Halfond [58]
ont abordeacute la probleacutematique en proposant une approche baseacutee sur la vision par ordinateur et
le traitement drsquoimages Walsh et al [74 72] ont eacutegalement traiteacute ce genre de bugs dans les
applications dites responsives (responsive web design)
Deux cateacutegories drsquoutilisateurs sont confronteacutees agrave ces types de problegravemes lrsquoune repreacutesente
les speacutecialistes du domaine (les informaticiens) chez lesquels ces types de problegravemes peuvent
trouver leurs solutions apregraves un travail laborieux Lrsquoautre repreacutesente le grand public pour lequel
le deuxiegraveme et le troisiegraveme type de problegraveme constituent des contraintes pour lrsquoexploitation de
la page car la solution dans ce cas exige certaines connaissances (lrsquooutil le langage etc) qui
eacutechappent geacuteneacuteralement au grand public Ce dernier forme la majoriteacute des utilisateurs De ce
fait il est neacutecessaire de lui trouver une solution lui permettant drsquoutiliser les sites web dans
les meilleures conditions possibles Il doit avoir tout simplement sur son eacutecran une interface
correcte sans aucun bug pour qursquoil ne soit pas obliger agrave recourir agrave une technique de correction
qui le deacutepasse Drsquoautant plus que les applications web connaissent une eacutevolution rapide et
commencent agrave conqueacuterir plusieurs domaines (commerce eacutelectronique eacuteducation loisir etc)
et mecircme agrave ecirctre utiliseacutees dans des opeacuterations sensibles telles que les transactions moneacutetaires
5
via internet Ce qui fait drsquoeux des programmes tregraves complexes dynamiques et interactifs En
plus de la rareteacute des meacutethodes de deacutetection de ces bugs pire encore presque rien nrsquoa eacuteteacute
fait pour donner un feedback agrave lrsquoutilisateur Lorsqursquoun bug est trouveacute les solutions actuelles
ne font que retourner laquo vraifaux raquo Dans ce travail nous proposons une nouvelle approche
permettant dans une premiegravere eacutetape de deacutetecter automatiquement les diffeacuterents types de bugs
drsquointerfaces et de les corriger automatiquement dans une deuxiegraveme eacutetape Il srsquoagit drsquoune
approche geacuteneacuterique de localisation de deacutefauts baseacutee sur le concept de reacuteparation
Les objectifs et contributions de cette thegravese sont
1 Proposer un langage pour speacutecifier le contenu attendu drsquoune interface web
2 Deacutecrire un algorithme permettant de veacuterifier automatiquement qursquoune speacutecification est
respecteacutee
3 Deacutecrire une meacutethode permettant de fournir un verdict deacutetailleacute et utile lors drsquoune violation
Cette thegravese comporte six chapitres Le chapitre 1 est deacutedieacute agrave une vue globale sur les notions de
base relatives au web Les diffeacuterents types de bugs ainsi que des exemples reacuteels de chacun de
ces types sont preacutesenteacutes au chapitre 2 Le chapitre 3 est consacreacute aux travaux connexes sur la
deacutetection des bugs drsquointerfaces dans les applications web agrave quelques exemples drsquoapproches et
drsquooutils de deacutetection pour lesquels certains points faibles sont identifieacutes
Dans le chapitre 4 on retrouve lrsquoensemble des informations speacutecifiques agrave lrsquooutil Cornipickle
conccedilu et utiliseacute dans la deacutetection des bugs Ceci inclut la syntaxe du langage et son utili-
sation pour exprimer des proprieacuteteacutes ainsi que les deacutetails de son impleacutementation (objectifs
de conception architecture et sceacutenario typique) Le chapitre 5 est reacuteserveacute agrave lrsquoutilisation de
Cornipickle en combinaison avec un robot drsquoexploration dynamique (crawler) pour deacutetecter
efficacement les bugs comportementaux dans les RIA (Rich Internet Applications) Le dernier
6
chapitre quant agrave lui preacutesente deux meacutecanismes par lesquels un verdict vraifaux peut ecirctre
enrichi drsquoinformation suppleacutementaire pour le deacuteveloppeur Une conclusion geacuteneacuterale mettant
en eacutevidence lrsquointeacuterecirct du travail reacutealiseacute et lrsquoimportance des reacutesultats obtenus clocircture la thegravese
Il est agrave signaler que les contributions preacutesenteacutees dans cette thegravese ont fait lrsquoobjet de publications
dont je suis coauteur
Un premier article dont la contribution consiste en la formalisation de la seacutemantique de
lrsquointerpreacuteteur Cornipickle (section 33 de lrsquoarticle) et la preacutesentation du concept des teacutemoins
(section 43) Cette contribution correspond au chapitre 4 de la thegravese
1 Sylvain Halleacute Nicolas Bergeron Francis Gueacuterin Gabriel Le Breton Oussama Be-
roual Declarative layout constraints for testing web applications J Log Algebr Meth
Program Elsevier 85 (5) 737-758 (2016) [51]
Un deuxiegraveme article preacutesentant le meacutecanisme de transformations (feedback enrichi pour
lrsquoutilisateur) ce qui correspond au chapitre 6
1 Sylvain Halleacute Oussama Beroual Fault Localization in Web Applications via Model
Finding CRESTETAPS 2016 55-67 Elsevier Electronic Notes in Computer Science
(2016) [52]
Un troisiegraveme article sur lrsquoautomatisation des tests avec inteacutegration agrave un crawler ce qui
correspond au chapitre 5
1 Oussama Beroual Francis Gueacuterin Sylvain Halleacute Searching for Behavioural Bugs with
Stateful Test Oracles in Web Crawlers SBSTICSE 2017 ACM 7-13(2017) [38]
CHAPITRE 1
NOTIONS GEacuteNEacuteRALES SUR LE WEB
Deux termes sont drsquousage confondus par le public non averti le terme laquo web raquo et le terme
laquo Internet raquo Ce chapitre est destineacute agrave lever cette confusion puis agrave mettre lrsquoaccent sur la
majoriteacute des aspects drsquoune application web piegravece maicirctresse de notre recherche
11 LE FONCTIONNEMENT DU WEB
Une diffeacuterence de taille entre laquo Internet raquo et laquo web raquo est agrave noter Internet est un reacuteseau composeacute
drsquoune multitude de reacuteseaux connecteacutes entre eux Chacun de ces reacuteseaux est composeacute drsquoun
ensemble drsquoeacutequipements (fibres optiques etc) constituant un support physique drsquoinformation
Le web quant agrave lui est un systegraveme de fichiers veacutehiculeacutes par des serveurs Il repreacutesente le
contenu principal drsquoInternet agrave cocircteacute drsquoautres contenus tels que le courrier eacutelectronique la
messagerie etc Il nrsquoest donc qursquoune des applications drsquoInternet
Un site web est un contenu sur Internet Ce contenu nrsquoest rien drsquoautre qursquoun ensemble de
fichiers (HTML CSS JavaScript etc) heacutebergeacutes sur un serveur Selon leur meacutecanisme de
fonctionnement deux types de site sont distingueacutes les sites statiques dont le contenu est inva-
riable et les sites dynamiques dont le contenu est variable Les premiers ne sont modifiables
8
que par leurs proprieacutetaires alors que les seconds sont modifiables par des utilisateurs autres
que leurs proprieacutetaires La reacutealisation de chacun de ces sites fait appel agrave des technologies bien
deacutetermineacutees telles que HTML CSS et JavaScript
Les acteurs principaux dans le fonctionnement du web sont les clients repreacutesenteacutes par des
navigateurs tels que Firefox Internet Explorer Chrome et Safari et les serveurs repreacutesenteacutes
par les machines abritant les sites web ougrave les fichiers sont stockeacutes Chaque serveur est
identifieacute sur un reacuteseau par son adresse IP (Internet Protocol) et chaque page web est associeacutee
agrave une adresse URL (Uniform Resource Locator ou laquo localisateur uniforme de ressource raquo)
caracteacuteriseacutee par un contenu Une demande drsquoune page web agrave un serveur correspond donc agrave
une demande drsquoun contenu La communication entre les clients et les serveurs est assureacutee
par un protocole appeleacute laquo HTTP raquo (HyperText Transfer Protocol ou laquo protocole de transfert
hypertexte raquo) via lequel les requecirctes sont formuleacutees par les navigateurs aux serveurs [37]
HTTP est donc la langue de conversation entre le navigateur et le serveur La conversation
se fait selon le principe de laquo requecircte-reacuteponse raquo La formulation drsquoune requecircte HTTP par le
navigateur est suivie par une reacuteponse HTTP du serveur apregraves lrsquoavoir deacutecodeacutee et eacutetudieacutee En plus
de la ligne de requecircte deacutefinissant le document demandeacute la meacutethode appliqueacutee et le protocole
utiliseacute une requecircte est composeacutee de deux ensembles de lignes des lignes facultatives et des
lignes optionnelles Les premiegraveres sont les champs drsquoen-tecircte de la requecircte et sont chargeacutees
de fournir des informations suppleacutementaires sur la requecircte ou le client (type de navigateur
systegraveme drsquoexploitation etc) Les secondes forment le corps de la requecircte et sont chargeacutees lors
de lrsquoenvoi de donneacutees au serveur de permettre un envoi de donneacutees par une meacutethode speacutecifique
(lrsquoenvoi de donneacutees au serveur par un formulaire par une meacutethode POST par exemple)
Une requecircte de type GET nomme lrsquoURL agrave reacutecupeacuterer httpuqacca par exemple dans la
figure 11 Le navigateur srsquoidentifie dans lrsquoen-tecircte User-Agent et indique les types de reacuteponses
9
GET HTTP11Host wwwuqaccaConnection keep-aliveUser-Agent Mozilla50 (Windows NT 61 Win64 x64)
AppleWebKit53736 (KHTML like Gecko) Chrome6103163100Safari53736
Upgrade-Insecure-Requests 1Accept texthtmlapplicationxmlq=09Accept-Encoding gzip deflateAccept-Language fr-FRfrq=08en-USq=06enq=04Cookie PHPSESSID=tphmk53fee883355e4eq24dmb5
Upgrade-Insecure-Requests 1Connection keep-aliveHost wwwuqacca
Figure 11 ndash Exemple drsquoune requecircte HTTP
qursquoil accepte dans lrsquoen-tecircte Accept et Accept-Encoding Lrsquoen-tecircte Connection demande
au serveur de garder la connexion TCP ouverte pour drsquoautres requecirctes La requecircte contient
eacutegalement les cookies que le navigateur conserve pour ce domaine Les cookies sont des paires
cleacute-valeur qui suivent lrsquoeacutetat drsquoun site web entre diffeacuterentes demandes de pages Ainsi les
cookies stockent le nom de lrsquoutilisateur connecteacute un numeacutero secret attribueacute agrave lrsquoutilisateur par
le serveur certains paramegravetres de lrsquoutilisateur etc Les cookies sont stockeacutes dans un fichier
texte sur le client et envoyeacutes au serveur agrave chaque demande
La reacuteponse du serveur sur la requecircte de la figure 11 geacuteneacutereacutee et renvoyeacutee est montreacutee dans
figure 12
Lrsquoen-tecircte qui deacutefinit Content-Type en texthtml indique au navigateur de rendre le contenu
de la reacuteponse [13] au format HTML au lieu de le teacuteleacutecharger en tant que fichier Le navigateur
utilise lrsquoen-tecircte pour deacutecider comment interpreacuteter la reacuteponse mais tient eacutegalement compte
drsquoautres facteurs tels que lrsquoextension de lrsquoURL
10
HTTP10 200 OKDate Sat 11 Nov 2017 190323 GMTServer Apache2222 (Unix) mod_ssl2222 OpenSSL101e-fipsX-Powered-By PHP5217Access-Control-Allow-Origin httpswprodluqaccaExpires Thu 19 Nov 1981 085200 GMTCache-Control no-store no-cache must-revalidatePragma no-cacheContent-Type texthtmlX-Cache MISS from w3repuqaccaX-Cache-Lookup MISS from w3repuqacca80Via 10 w3repuqacca (squid3123)Connection close
Figure 12 ndash Exemple drsquoune reacuteponse HTTP
12 LE LANGAGE HTML
Nous allons nous limiter dans ce qui suit agrave la preacutesentation de lrsquoessentiel des eacuteleacutements de base
relatifs agrave ces trois langages agrave savoir les balises pour le HTML les seacutelecteurs pour le CSS et
quelques notions de base sur JavaScript
Le langage HTML laquo HyperText Markup Language raquo en anglais ou laquo langage de balisage
hypertexte raquo en franccedilais ou encore laquo langage de marquage hypertexte raquo dont la creacuteation revient
agrave 1991 est un langage de description de document pouvant ecirctre eacutecrit avec un simple eacutediteur
de texte sans une application speacutecifique et servant agrave produire (sur Internet) des pages Web
drsquoune grande varieacuteteacute de contenus de mise en forme ou drsquoanimations et agrave inseacuterer diffeacuterents
types drsquoeacuteleacutements(texte des liens des images etc) Il permet aussi de deacutesigner au navigateur
certaines speacutecificiteacutes telle que la consideacuteration drsquoun texte comme un paragraphe ou un titre
11
121 STRUCTURE DrsquoUN DOCUMENT
La structure drsquoun document HTML doit satisfaire un scheacutema preacutecis et comprendre un ensemble
de balises speacuteciales essentielles pour tout document HTML Les eacuteleacutements composants la
structure drsquoun document HTML sont les suivants
Doctype Un document HTML deacutebute toujours par le soulignement de la nature du document
crsquoest agrave dire le langage utiliseacute (HTML) en faisant appel agrave la balise lt DOCTYPE htmlgt
Lrsquoeacuteleacutement lthtmlgt Lrsquoeacuteleacutement html comprend deux balises lthtmlgt et lthtmlgt Il deacutefinit
lrsquounique racine du document HTML Tous les autres eacuteleacutements doivent y ecirctre placeacutes
Lrsquoeacuteleacutement ltheadgt Cet eacuteleacutement repreacutesente lrsquoen-tecircte du document et renferme exclusivement
des meacuteta-donneacutees (titre de la page type drsquoencodage utiliseacute etc) exploiteacutees par les navigateurs
pour ameacuteliorer lrsquoergonomie de la page
Lrsquoeacuteleacutement ltbodygt Lrsquoeacuteleacutement body repreacutesente le corps du document Il est toujours placeacute
apregraves lrsquoen-tecircte et contient tout le contenu laquo visible raquo de la page les textes images liens
videacuteos etc
Lrsquoeacuteleacutement lttitlegt La structure srsquoachegraveve par une des meacuteta-donneacutees utiliseacutees par le navigateur
qui constitue le seul eacuteleacutement HTML obligatoire le titre du document placeacute agrave lrsquointeacuterieur de
lrsquoeacuteleacutement head
Voici le document HTML formel le plus simple qursquoon puisse eacutecrire
12
ltDOCTYPE htmlgtlthtmlgt
ltheadgtlttitlegtTitre de la pagelttitlegt
ltheadgtltbodygt
lth1gtUn grand titrelth1gtltpgtUn paragraphltpgt
ltbodygtlthtmlgt
Figure 13 ndash Un exemple simple de page HTML contenant un grand titre et un paragraphe
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtUn document HTMLlttitlegtltheadgtltbodygtlt-- Du contenu pour lrsquoutilisateur ici --gtltbodygtlthtmlgt
Le code HTML dans la figure 13 par exemple indique que lrsquoon souhaite creacuteer un grand titre
(gracircce agrave lrsquoeacuteleacutement h1) et un paragraphe (gracircce agrave lrsquoeacuteleacutement p)
122 VERSIONS DU HTML
Le Web a connu ces deux derniegraveres deacutecennies une eacutevolution extraordinaire En effet lrsquoavanceacutee
technologique a donneacute lieu agrave une ameacutelioration des performances des composants physiques
et une augmentation de la vitesse de connexion entraicircnant par conseacutequent une eacutevolution
13
remarquable des sites Web A leur tour les langages tels que le HTML et le CSS ont eacutegalement
connu une eacutevolution consideacuterable (modifications enrichissements etc) drsquoougrave lrsquoapparition de
nouvelles versions de ces langages bien que lrsquoeacutevolution nrsquoa pas eacuteteacute lineacuteaire ni continue pour
lrsquoutilisateur final Les nouvelles versions sont doteacutees chacune de nouvelles fonctionnaliteacutes et
change parfois totalement la syntaxe du langage La premiegravere version de HTML lrsquoHTML1
a vu le jour en 1991 De nombreuses ameacuteliorations apporteacutees par la suite par le creacuteateur du
HTML jugeacutees inteacuteressantes et importantes lrsquoont conduit en 1994 agrave partager publiquement la
nouvelle version de son langage le HTML2 Drsquoautres versions se sont succeacutedeacutees HTML2
(1995) HTML32 (janvier 1997) HTML4 modifieacutee agrave plusieurs reprises (1997 1998 1999
2000) HTML5 (2014) HTML51 (2016) Parmi toutes ces versions la plus stable celle qui
offre de nouvelles fonctionnaliteacutes et ouvre de nouvelles possibiliteacutes inteacuteressantes est la plus
reacutecente agrave savoir HTML51
123 EacuteLEacuteMENTS DE BASE EN HTML
Le fonctionnement du HTML srsquoappuie sur la notion drsquoeacuteleacutements Ces derniers ont pour rocircle
de structurer du contenu pour donner du sens aux diffeacuterents objets de ce contenu Ils sont
constitueacutes de balises renfermant des attributs et du contenu entre elles
Les balises en HTML Le nombre de balises constituant le HTML est environ 140 Elles
servent agrave fournir au navigateur des indications sur le sens drsquoun eacuteleacutement son interpreacutetation ou
son affichage en plus drsquoautres indications telles que la gestion des formulaires en ligne lrsquoajout
des fichiers multimeacutedias etc On distingue plusieurs types de balises chargeacutee chacune drsquoune
fonction bien deacutetermineacutee bien que certaines nrsquoont de fonction que de seacuteparer des sections drsquoun
document Parmi ces fonctions deacutefinir des titres creacuteer des paragraphes creacuteer des liens vers des
ressources externes inteacutegrer une image dans un document HTML creacuteer des listes Les balises
14
suivantes sont donneacutees agrave titre drsquoexemple ltpgt lth1gt ltimggt ltligt ltagt Les eacuteleacutements
sont constitueacutes geacuteneacuteralement drsquoune paire de balises (ouvrante et fermante) et drsquoun contenu
entre les balises et exceptionnellement drsquoune balise unique dite dans ce cas laquo orpheline raquo
Une balise fermante doit avoir le mecircme nom que la balise ouvrante correspondante (notez la
preacutesence du slash (barre oblique))
Les balises laquo auto fermantes raquo (ou balises vides) Certaines balises sont deacutepourvues de texte
du fait qursquoelles sont ouvrantes et fermantes en mecircme temps les balises AUTO FERMANTES
sont soit des balises de type BLOC (exemple lthr gt) des balises EN LIGNE (exemple
ltimg gt)
Les attributs en HTML Les attributs se placent dans la balise ouvrante drsquoun eacuteleacutement et
possegravedent toujours une valeur (parfois implicite) Ils viennent apporter plus de deacutetails sur les
eacuteleacutements Par exemple lrsquoattribut href (hypertexte reacutefeacuterence) va offrir lrsquoadresse (la valeur) de
la page du lien agrave lrsquoeacuteleacutement ltagt (pour anchor) chargeacute de la creacuteation des liens vers drsquoautres sites
ou drsquoautres pages
Lrsquoeacuteleacutement ltimggt constitueacute drsquoune seule balise orpheline chargeacute drsquoinseacuterer une image dans
une page HTML a besoin de deux attributs src et alt Le premier src assure le nom et
lrsquoemplacement de lrsquoimage (la valeur) alors que lrsquoattribut alt se charge de lrsquoaffichage drsquoun texte
alternatif agrave une indisponibiliteacute de lrsquoimage
Notez bien que les balises et les attributs ne seront jamais afficheacutes par le navigateur il va srsquoen
servir drsquoindication pour justement savoir ce qursquoil doit afficher (un paragraphe un titre un lien
une image etc)
15
13 LES CASCADING STYLESHEETS (CSS)
Le CSS laquo Cascading StyleSheets raquo en anglais ou laquo feuilles de styles en cascade raquo en franccedilais est
un langage informatique apparu en 1996 voueacute agrave la mise en forme du contenu des documents
HTML et XML moyennant des styles pour deacutefinir la taille la couleur ou lrsquoalignement du texte
afin drsquoagreacutementer le reacutesultat visuel final de ce contenu Il est utiliseacute dans la conception de
sites web Le code ci-dessous par exemple indique que les titres h1 eacutecrits en HTML doivent
avoir une couleur verte et une taille de 20px tandis que les paragraphes doivent ecirctre noir et
souligneacutes
h1 color greenfont-size 20px
p color blacktext-decoration underline
Le CSS est donc un autre langage du web venant compleacuteter le HTML Il permet la mise en
page drsquoun contenu et le changement de son apparence en lui appliquant des styles (choisir
la couleur du texte seacutelectionner la police utiliseacutee deacutefinir la taille du texte les bordures le
fond) Lrsquoapparition du HTML a devanceacute lrsquoapparition du CSS de cinq anneacutees peacuteriode dans
laquelle la mise en page eacutetait effectueacutee par le HTML qui consacrait des balises agrave cette fin
telle que la balise ltfont color=aab1c3gt deacutefinissant la couleur du texte par exemple
Le langage CSS est venu reacutepondre agrave la complexiteacute qursquoont connu les pages HTML avec une
augmentation remarquable des balises entre autres conduisant agrave une mise agrave jour des pages
web de plus en plus complexe Agrave lrsquoinstar du HTML le CSS est passeacute par plusieurs versions
16
les plus importantes sont CSS1 CSS20 CSS21 et CSS3
Eacutecriture du code CSS Le code CSS peut ecirctre eacutecrit agrave trois endroits distincts
1 Dans un Lrsquoeacuteleacutement HTML ltstylegt
2 Dans la balise ouvrante des eacuteleacutements HTML(meacutethode la moins recommandeacutee)
3 Dans un fichier CSS seacutepareacute (meacutethode la plus recommandeacutee)
131 PROPRIEacuteTEacuteS ET SEacuteLECTEURS CSS
Les proprieacuteteacutes CSS permettent de choisir quel(s) aspect(s) (ou laquo styles raquo) drsquoun eacuteleacutement HTML
que lrsquoon souhaite modifier
Lrsquoapplication drsquoun style agrave un ou plusieurs eacuteleacutements HTML signifie leurs seacutelections au preacutealable
pour les soumettre agrave un style particulier Lrsquointervention drsquoun seacutelecteur est donc neacutecessaire Le
CSS est fondeacute sur un ensemble de regravegles les seacutelecteurs sont la premiegravere partie drsquoune regravegle CSS
Crsquoest une syntaxe chargeacutee drsquoidentifier les eacuteleacutements du document auxquels la regravegle est deacutedieacutee
(appliqueacutee) Depuis son arriveacutee (1996) le CSS a speacutecifieacute un certain nombre de seacutelecteurs tregraves
accepteacutes de nos jours par les diffeacuterents navigateurs les plus freacutequemment utiliseacutes sont
Les seacutelecteurs de type Ce seacutelecteur cible lrsquoeacuteleacutement du document agrave styler en se basant sur
le nom de lrsquoeacuteleacutement Il doit correspondre dans ce cas au nom de lrsquoeacuteleacutement Exemple pour
mettre en bleu le texte des titres de niveau 1 le seacutelecteur sera h1
h1 color blue
17
Les seacutelecteurs de classe Ce seacutelecteur permet de cibler les eacuteleacutements en fonction de la valeur
de leur attribut class Il permet donc de seacutelectionner tous les eacuteleacutements ayant une certaine classe
Preacuteceacuteder le nom de la classe par un point () suffit pour obtenir le seacutelecteur correspondant
agrave cette classe Exemple la classe ltimportantgt est attribueacutee agrave tous les eacuteleacutements jugeacutes
importants Il suffit de deacutefinir dans le fichier CSS une regravegle stipulant que le texte de tous les
eacuteleacutements posseacutedant la classe Important soit eacutecrit en rouge
ltp class=ImportantgtCoucoultpgt
Important
color red
Les seacutelecteurs drsquoidentifiant Ce seacutelecteur permet de cibler un eacuteleacutement drsquoun document en
fonction de la valeur de son attribut ltidgt Dans un document il ne doit y avoir qursquoun seul
identifiant donneacute agrave lrsquoeacuteleacutement Preacuteceacutedeacute le nom de lrsquoidentifiant par un diegravese () suffit pour
obtenir le seacutelecteur correspondant agrave cet identifiant Exemple Un identifiant Menu est utiliseacute
pour repeacuterer notre menu dans le document Il suffit de deacutefinir dans le fichier CSS une regravegle
indiquant que notre menu ne soit pas afficheacute
ltdiv id=Menugtltdivgt
Menu
display none
18
Le seacutelecteur universel laquo raquo Ce seacutelecteur permet de cibler tous les eacuteleacutements drsquoun document
drsquoougrave lrsquoappellation de seacutelecteur universel Il existe eacutegalement une variante pour ne cibler qursquoun
seul eacuteleacutement
Regroupements des seacutelecteurs Une autre maniegravere de proceacuteder consiste en la reacuteduction de
taille du fichier CSS en appliquant une mecircme regravegle agrave plusieurs seacutelecteurs Ces derniers sont
dans ce cas seacutepareacutes par une virgule () Exemple les eacuteleacutements posseacutedant la classe Important
et les titres lth2gt sont eacutecrits en rouge
Important h2
color red
14 JAVASCRIPT
JavaScript est un langage de programmation de scripts utiliseacute surtout dans les pages web
interactives ainsi que pour les serveurs Il a eacuteteacute creacutee par Brendan Eich en 1995 en lrsquoespace de
dix jours suite agrave une demande formuleacutee par la Netscape Communications Corporation Les
bases du langage et ses principales interfaces sont fournies par des objets ce qui fait de lui un
langage orienteacute objet agrave prototype Les objets en question ne sont pas des instances de classes
Ils sont eacutequipeacutes chacun de constructeurs permettant de creacuteer leurs proprieacuteteacutes et notamment le
prototypage qui sert agrave creacuteer des objets heacuteritiers personnaliseacutes JavaScript dont les fonctions
sont des objets de premiegravere classe supporte le paradigme objet impeacuteratif et fonctionnel
Depuis sa creacuteation JavaScript a connu drsquoinnombrables modifications Il a eacuteteacute standardiseacute
en 1997 par laquo Ecma International raquo donnant naissance agrave la premiegravere eacutedition du standard
19
laquo ECMA-262 raquo la deuxiegraveme eacutedition du standard laquo ECMA-262 raquo a vu le jour en 1998 suite
agrave des changements reacutedactionnels apporteacutes au standard laquo ECMA-262 raquo pour le conformer au
standard international laquo ISOCEI 16262 raquo Des ameacuteliorations(dans la manipulation des chaicircnes
de caractegraveres dans les instructions de controcircle etc) introduites dans la deuxiegraveme eacutedition ont
donneacute lieu en 1999 agrave la publication de la troisiegraveme eacutedition du standard ECMA-262 Depuis la
troisiegraveme eacutedition les eacuteditions se sont succeacutedeacutees pour arriver actuellement agrave la huitiegraveme eacutedition
Les diffeacuterentes eacuteditions apparues ont chacune participeacute avec un plus dans le deacuteveloppement
des performances du langage
La plupart des langages de programmation ont des fonctionnaliteacutes de base communes Lrsquouti-
lisation de JavaScript neacutecessite la connaissance de ces bases pour mieux comprendre son
fonctionnement
Variables Les variables sont des conteneurs servant agrave stocker temporairement des informa-
tions Une variable a le pouvoir de varier autrement dit de pouvoir stocker diffeacuterentes valeurs
dans le temps en laquo eacutecrasant raquo sa valeur preacuteceacutedente Une variable est deacuteclareacutee au commencement
avec le mot-cleacute let suivi du nom qursquoon souhaite utiliser pour la variable
Un certain nombre de regravegles sont agrave consideacuterer en JavaScript
1 les lignes de code doivent terminer par un point-virgule pour indiquer que crsquoest la
fin de la ligne Lrsquoomission de ces points-virgules peut conduire agrave des comportements
inattendus voire des erreurs
2 Nrsquoimporte quel nom peut ecirctre (quasiment) utiliseacute pour nommer une variable Il y a
cependant quelques restrictions sur ces noms
3 Eacuteviter la casse JavaScript y est sensible cela veut dire que maVariable sera consideacutereacute
comme un nom diffeacuterent de mavariable Lrsquoapparition des problegravemes sur les noms de
20
variables dans le code implique la veacuterification de la casse utiliseacutee
4 Avec les versions reacutecentes de JavaScript il est conseilleacute drsquoutiliser le mot-cleacute let Cepen-
dant des variables deacuteclareacutees avec le mot-cleacute var sont parfois rencontreacutees Ce dernier est
utiliseacute lorsque notre code doit supporter des navigateurs anciens (IE lt 11) let nrsquoeacutetant
pas supporteacute dans ce cas Une fois une variable est deacuteclareacutee on lui donne une valeur
maVariable = rsquooussrsquo
Pour utiliser la valeur plus loin dans le code il suffit de faire appel agrave la variable en utilisant
son nom maVariable Lorsque on creacutee une variable et qursquoon lui donne une valeur cela
peut se faire sur une seule ligne let maVariable = rsquooussrsquo Une fois qursquoon a donneacute une
valeur agrave une variable on peut la changer plus loin
let maVariable = rsquooussrsquomaVariable = rsquoSylvainrsquo
Les variables sont reacuteparties en diffeacuterents types de donneacutees et ont chacune une fonction Parmi
ces variables on a la chaicircne de caractegraveres le nombre le Booleacuteen le tableau lrsquoobjetetc Les
variables sont indispensables agrave la programmation Si les valeurs sont statiques rien ne pourrait
se faire Par exemple on ne pourrait pas personnaliser un message de bienvenue ou changer
lrsquoimage afficheacutee dans une galerie
Les opeacuterateurs Un opeacuterateur est un symbole matheacutematique qui produit un reacutesultat en
fonction de plusieurs valeurs (la plupart du temps on utilise deux valeurs et un opeacuterateur)
Parmi les opeacuterateurs les plus simples on a lrsquoopeacuterateur drsquoaffectation lrsquoopeacuterateur drsquoidentiteacute
lrsquoopeacuterateur de neacutegation lrsquoopeacuterateur drsquoineacutegaliteacute
Il y a plein drsquoautres opeacuterateurs mais on srsquoen tiendra agrave ceux-lagrave
Il est agrave noter que lrsquoutilisation de diffeacuterents types de donneacutees avec un mecircme opeacuterateur faussera
21
le reacutesultat obtenu le reacutesultat obtenu par70 + 12 nrsquoest pas le mecircme que celui obtenu par
70 + 12 le deuxiegraveme reacutesultat est le bon car les nombres entoureacutes de guillemets sont donc
consideacutereacutes comme des chaicircnes de caractegraveres
Les structures conditionnelles Les structures conditionnelles sont des eacuteleacutements du code qui
permettent de tester si une expression est vraie ou non et drsquoexeacutecuter des instructions diffeacuterentes
selon le reacutesultat La structure conditionnelle utiliseacutee la plus freacutequemment est if else
Par exemple
let parfumGlace = rsquosorbet de fraisersquoif (parfumGlace === rsquosorbet de fraisersquo)
alert(Jrsquoadore le sorbet de fraise ) else
alert(Jrsquoaurai preacutefeacutereacute un sorbet de fraise)
Le test agrave reacutealiseacute est contenue dans if ( ) Il consiste en une comparaison de la variable
parfumGlace avec la chaicircne de caractegraveres laquo sorbet de fraise raquo via lrsquoopeacuterateur drsquoidentiteacute pour
veacuterifier leur eacutegaliteacute Si cette comparaison renvoie true le premier bloc de code sera exeacutecuteacute
Sinon crsquoest le code du second bloc celui preacutesent apregraves else qui sera exeacutecuteacute
Les fonctions Les fonctions sont chargeacutees drsquoorganiser les fonctionnaliteacutes agrave reacuteutiliser Par
exemple au lieu drsquoexeacutecuter deux fois la mecircme action plutocirct que de recopier le code la
fonction est eacutecrite une fois puis utiliser aux deux endroits souhaiteacutes
let maVariable = documentquerySelector(rsquoh1rsquo)alert(rsquoSalut rsquo)
Ces fonctions (querySelector et alert) sont disponibles dans le navigateur Elles ressemblent
agrave un nom de variable suivi de parenthegraveses et utilisent des arguments dans leurs calculs Les
22
arguments sont placeacutes entre les parenthegraveses seacutepareacutes par des virgules srsquoil y en a plusieurs Par
exemple la fonction alert() fait apparaicirctre une fenecirctre de pop-up dans la fenecirctre du navigateur
Un argument est utiliseacute pour indiquer agrave la fonction le contenu qursquoon deacutesire eacutecrire dans cette
fenecirctre En plus des fonctions deacutejagrave existantes drsquoautres fonctions peuvent ecirctre deacutefinies par
nous-mecircmes Par exemple fonction toute simple qui considegravere deux arguments et renvoie le
reacutesultat de la multiplication
function multiplier(num1num2) let reacutesultat = num1 num2return reacutesultat
Avant une utilisation reacutepeacuteteacutee de cette fonction elle doit ecirctre deacuteclareacutee dans la console
multiplier(47)multiplier(2020)multiplier(053)
Lrsquoinstruction return indique au navigateur qursquoil faut renvoyer la variable reacutesultat en dehors de
la fonction afin qursquoelle puisse ecirctre reacuteutiliseacutee par ailleurs Cette instruction est neacutecessaire car
les variables deacutefinies agrave lrsquointeacuterieur des fonctions sont uniquement disponibles agrave lrsquointeacuterieur de
ces fonctions Crsquoest ce qursquoon appelle une porteacutee
Les eacuteveacutenements Un site web vraiment interactif est caracteacuteriseacute par des eacuteveacutenements Les
eacuteveacutenements sont des structures de code agrave lrsquoeacutecoute du navigateur permettant de deacuteclencher des
actions au moindre problegraveme Lrsquoexemple concret est lrsquoeacuteveacutenement de clic qui est deacuteclencheacute
une fois lrsquoutilisateur clique sur quelque chose dans le navigateur Lrsquoexemple ci-dessous peut
donner une ideacutee sur ce que ccedila donne en pratique il suffit de saisir ces quelques lignes dans la
console puis cliquez sur la page
23
documentquerySelector(rsquohtmlrsquo)onclick = function() alert(rsquoarrecirctez de cliquerrsquo)
Les meacutethodes pour laquo attacher raquo un eacuteveacutenement agrave un eacuteleacutement sont multiples Dans cet exemple
deux paramegravetres sont deacutefinis lrsquoeacuteleacutement HTML concerneacute et un gestionnaire onclick qui
est une proprieacuteteacute eacutegale agrave une fonction anonyme (elle nrsquoa pas de nom) qui contient le code agrave
exeacutecuter quand lrsquoutilisateur clique
On pourra noter que documentquerySelector(rsquohtmlrsquo)onclick = function()
est eacutequivalent agrave
let maHTML = documentquerySelector(rsquohtmlrsquo)maHTMLonclick = function()
La premiegravere syntaxe est simplement plus courte Drsquoautres fonctionnaliteacutes peuvent srsquoajouter
aux bases en JavaScript exposeacutees
15 LE FONCTIONNEMENT INTERNE DES NAVIGATEURS WEB
Pour la peacuteriode allant de mars 2015 agrave mars 2016 la part de marcheacute des navigateurs drsquoapregraves les
statistiques de StatCounter [19] est de pregraves de 96 entre Internet Explorer Firefox Chrome
et Opera Le tableau 11 montre en pourcentage la part de chaque navigateur
24
Navigateur Part drsquoutilisation en
Chrome 5232
Internet Explorer 162
Firefox 1558
Safari 978
Opera 181
Autres 431
Tableau 11 ndash Statistiques des parts drsquoutilisation des navigateurs dans le monde entre mars 2015et mars 2016
Une ressource web eacutetant seacutelectionneacutee en faisant appel au serveur est ensuite afficheacutee par le
navigateur Celle-ci peut ecirctre un document HTML (qui est le cas geacuteneacuteral) comme elle peut
ecirctre un autre type de fichier Une URL est mobiliseacutee par lrsquoutilisateur pour la reacutecupeacuteration
de la ressource Les speacutecifications HTML et CSS qui preacutecisent au navigateur la maniegravere
drsquointerpreacuteter et drsquoafficher les fichiers HTML sont maintenues par lrsquoorganisation W3C (World
Wide Web Consortium) [12]
La structure drsquoun navigateur comprend plusieurs composants tels qursquoune interface utilisateur
le moteur du navigateur un composant reacuteseau une interface drsquoarriegravere-plan (backend UI)
un interpreacuteteur JavaScript un analyseur XML (XML parser) un composant de stockage de
donneacutees et finalement le moteur de rendu qui est la piegravece la plus importante dans cet ensemble
[49] [48] La figure 14 montre le flux entre les composants du navigateur
Avant son affichage agrave lrsquoutilisateur une page web parcourt le chemin suivant
1 La requecircte est envoyeacutee vers le serveur en utilisant lrsquointerface utilisateur qui enferme
une barre drsquoadresse des boutons preacuteceacutedent et suivant un menu de marque-page
25
des boutons drsquoactualisation et drsquoarrecirct etc La requecircte est transporteacutee via le composant
reacuteseau qui assure les appels reacuteseau telles que les requecirctes HTTP Il est doteacute drsquoune
interface indeacutependante de la plateforme et en dessous des impleacutementations pour chaque
plateforme
2 La reacuteponse est renvoyeacutee par le serveur apregraves plusieurs traitements au niveau du serveur
drsquoapplication afin de geacuteneacuterer la page demandeacutee en HTML (les deacutetails sur ces deux
eacutetapes ont eacuteteacute exposeacutes dans la section 11)
3 Le composant reacuteseau passe les donneacutees brutes reacutecupeacutereacutees agrave un autre composant qui
a comme rocircle drsquoenregistrer toutes sortes de donneacutees sur le disque dur par exemple
des cookies Il srsquoagit drsquoune couche de persistance La nouvelle speacutecification HTML
(HTML5) deacutefinit le terme laquo base de donneacutees Web raquo qui est un systegraveme complet (bien
que leacuteger) de base de donneacutees dans le navigateur
4 Les octets bruts sont transporteacutes au moteur de rendu qui est responsable de lrsquoaffichage du
contenu demandeacute agrave lrsquoeacutecran en suivant plusieurs processus drsquoanalyse sur le code HTML
et CSS Les deacutetails de ces processus drsquoanalyse sont abordeacutes dans le reste du chapitre
5 Un interpreacuteteur JavaScript est appeleacute par le moteur de rendu pour lrsquoanalyse et lrsquoexeacutecution
du code JavaScript Pareillement pour lrsquoanalyseur XML (XML parser) qui est utiliseacute
pour lrsquoanalyse des documents XML dans lrsquoarbre du DOM (Document Object Model)
Crsquoest lrsquoun des sous systegravemes les plus reacuteutilisables dans lrsquoarchitecture En fait presque
toutes les impleacutementations des navigateurs exploitent un analyseur XML existant plutocirct
que de creacuteer leur propre analyseur agrave partir de zeacutero
6ndash7 Lrsquointerface drsquoarriegravere-plan (backend UI) est destineacute agrave dessiner des widgets de base
du genre listes deacuteroulantes et fenecirctres Une interface geacuteneacuterique non speacutecifique agrave la
plateforme est preacutesenteacutee par le navigateur qui utilise drsquoautre part en dessous lrsquointerface
utilisateur du systegraveme drsquoexploitation
26
Figure 14 ndash Le flux entre les composants du navigateur pour la reacutecupeacuteration et le traitementdrsquoune page web dans le navigateur
8ndash9 Ce dernier composant est relieacute au moteur de rendu qui envoie le rendu final agrave lrsquoutilisateur
dans la derniegravere eacutetape de la figure
Lrsquoaffichage drsquoune page web par le navigateur moyennant le code HTML CSS et JavaScript
nrsquoest pas aussi simple Pour ce faire le navigateur fait particuliegraverement appel agrave lrsquoun de ses
composants le moteur de rendu
Les opeacuterations qui se manifestent agrave lrsquointeacuterieur du navigateur et en particulier le fonctionnement
des moteurs de rendu des navigateurs les plus utiliseacutes ont eacuteteacute expliqueacutes par Garsiel et Irish
[11] Lrsquoaffichage drsquoune page web comporte de fait plusieurs phases La premiegravere consiste en
la construction des arborescences DOM (modegravele drsquoobjet de document) et CSSOM (modegravele
drsquoobjet CSS) Cette derniegravere phase est suivie par la transformation des balisages HTML et CSS
en DOM et CSSOM respectivement dont la combinaison forme une arborescence drsquoaffichage
(arbre de rendu) Cette arborescence agrave son tour est chargeacutee de la mise en page de chaque
eacuteleacutement visible et de lrsquointroduction des donneacutees exigeacutees pour lrsquoaffichage des pixels agrave lrsquoeacutecran
[5]
27
lthtmlgtltheadgt
ltmeta name=viewport content=width=device-widthinitial-scale=1gtltlink href=designcss rel=stylesheetgtlttitlegtExemplelttitlegt
ltheadgtltbodygt
ltpgtSalut ltspangtOussamaltspangt Beroual ltpgtltdivgtltimg src=ma-photojpggtltdivgt
ltbodygtlthtmlgt
Figure 15 ndash Un exemple simple de page web illustrant le rendu dans un navigateur
Construction du modegravele drsquoobjet DOM
Le processus de construction du modegravele drsquoobjet DOM est exposeacute ci-dessous agrave travers lrsquoexemple
drsquoune page web simple en HTML brut avec du texte et une seule image Le code HTML de la
page agrave eacutetudier est donneacute agrave la figure 15
Le traitement de cette page impose au moteur de rendu du navigateur drsquoexeacutecuter quatre
processus de transformation tel qursquoillustreacute dans la figure 16
1 Le premier processus est la conversion le moteur de rendu lit les octets bruts du
HTML sur le disque ou le reacuteseau et les traduit en caractegraveres individuels en fonction de
lrsquoencodage speacutecifique du fichier (UTF-8 par exemple)
2 Le deuxiegraveme processus est la creacuteation de jetons le moteur de rendu convertit les
chaicircnes de caractegraveres en diffeacuterents jetons speacutecifieacutes par la norme HTML5 du W3C
telles que lthtmlgt et ltbodygt Chaque jeton possegravede une signification particuliegravere et un
ensemble de regravegles
3 Le troisiegraveme processus est lrsquoanalyse lexicale les jetons eacutemis sont convertis en objets
qui deacutefinissent leurs proprieacuteteacutes et leurs regravegles
28
Figure 16 ndash Les processus de traitement de HTML et CSS au niveau du moteur de rendu dunavigateur
4 Le quatriegraveme processus est la construction du DOM puisque le balisage HTML
deacutefinit les relations entre les diffeacuterentes balises (certaines balises sont contenues dans
drsquoautres) les objets creacuteeacutes sont associeacutes selon une arborescence qui capture eacutegalement
la relation parent-enfant deacutefinie dans le balisage drsquoorigine (lrsquoobjet HTML est un parent
de lrsquoobjet body body est un parent de lrsquoobjet p etc)
Le reacutesultat final de lrsquoensemble de ce processus est le modegravele drsquoobjet de document (ou DOM)
de notre page simple que le navigateur utilise pour tout traitement suppleacutementaire de la page
Lrsquoarbre DOM reacutesultant est illustreacute dans la figure 17
Modegravele drsquoobjet CSS (CSSOM)
Lrsquoinformation sur lrsquoapparence drsquoun eacuteleacutement lors de son affichage est offerte par une autre
construction le CSSOM Durant la construction du DOM de notre page il srsquoest aveacutereacute que
le navigateur a deacuteceleacute une balise de lien link dans la section head du document signalant
une feuille de style CSS externe stylecss Du fait qursquoil a besoin de cette ressource pour
29
Figure 17 ndash Un arbre du modegravele drsquoobjet DOM
body font-size 24px p font-weight bold span color blue p span display none img float right
Figure 18 ndash Un exemple de fichier CSS simple
lrsquoaffichage de la page le navigateur anticipe lrsquoenvoi immeacutediat drsquoune demande pour cette
ressource et reacutepond avec le contenu du fichier illustreacute agrave la figure 18 Ces styles auraient pu
ecirctre deacuteclareacutes directement dans le balisage HTML (inteacutegreacute) cependant il est recommandeacute
de seacuteparer les codes CSS et HTML puisque les graphistes travaillent sur le code CSS les
deacuteveloppeurs sur le code HTML etc
Les regravegles CSS reccedilues sont converties en un contenu que le navigateur peut comprendre et
traiter de mecircme que pour le code HTML Le processus HTML est reacutepeacuteteacute mais dans ce cas
pour le code CSS (voir figure 16) Les octets CSS sont convertis en caractegraveres puis en jetons
et en nœuds pour finalement se relier au sein drsquoune arborescence appeleacutee CSS Object Model
(CSSOM) ou laquo modegravele drsquoobjet CSS raquo
Le calcul de lrsquoensemble final de styles drsquoun objet de la page tel qursquoeffectueacute par le navigateur
30
Figure 19 ndash Arbre du modegravele drsquoobjet CSSOM
comprend deux eacutetapes Dans une premiegravere eacutetape la regravegle la plus geacuteneacuterale pour ce nœud
est appliqueacutee (par exemple srsquoil srsquoagit drsquoun eacuteleacutement enfant du corps tous les styles du corps
srsquoappliquent) Dans une deuxiegraveme eacutetape des regravegles plus speacutecifiques crsquoest-agrave-dire en descendant
la cascade sont appliqueacutees afin drsquoaffiner de maniegravere reacutecursive les styles calculeacutes
La concreacutetisation de cette deacutemarche est faite agrave partir de lrsquoobservation de lrsquoarborescence
CSSOM dans la figure 19 On peut y lire que tout texte est eacutecrit en bleu et que sa taille de
police est de 24 pixels Il est placeacute dans la balise span contenue dans lrsquoeacuteleacutement body Ce
dernier est chargeacute de transmettre la taille de police agrave lrsquoeacuteleacutement span Toutefois si une balise
span est un enfant drsquoune balise paragraphe (p) le contenu de cette balise nrsquoest pas afficheacute
Il faut se rappeler que lrsquoarborescence CSSOM ci-dessus nrsquoest pas complegravete Elle ne montre
que les styles qui remplacent ceux de la feuille de style Dans lrsquoabsence de styles proposeacutes
tout navigateur fournit un ensemble de styles par deacutefaut eacutegalement appeleacutes styles user-agent
Construction de lrsquoarbre de rendu la mise en page et le dessin
Les donneacutees HTML et CSS ont servi jusqursquoici agrave la creacuteation des arborescences des modegraveles
DOM et CSSOM qui sont des objets indeacutependants chargeacutes chacun de capturer un aspect
du document lrsquoun deacutecrit le contenu et lrsquoautre les regravegles de style appliqueacutees au document
31
Figure 110 ndash Arbre de rendu
Les arborescences des deux modegraveles DOM et CSSOM sont combineacutees pour former une
arborescence drsquoaffichage responsable de lrsquoaffichage de la page et ne contenant que des nœuds
neacutecessaires agrave lrsquoaffichage de la page (voir figure 110)
Une arborescence drsquoaffichage comporte plusieurs types de nœuds des nœuds Visibles des
nœuds invisibles tels que les balises de script les balises Meta etc et des nœuds masqueacutes
par le code CSS Seul le premier type est consideacutereacute dans lrsquoarborescence drsquoaffichage Les
deux autres sont omis Le proceacutedeacute drsquoomission est effectueacute en mobilisant deux proprieacuteteacutes la
proprieacuteteacute visibility hidden rendant lrsquoeacuteleacutement invisible tout en occupant de lrsquoespace dans la
mise en page et la proprieacuteteacute display none supprimant totalement lrsquoeacuteleacutement de lrsquoarborescence
drsquoaffichage La figure 111 donne une vue globale des eacutetapes et processus de la construction
des arbres abordeacutees ci-dessous
Tous les nœuds visibles sont soumis aux regravegles CSSOM et eacutemis avec leurs contenus et leurs
styles calculeacutes Neacuteanmoins leurs positions et leurs geacuteomeacutetries (tailles) restent indeacutefinies La
deacutetermination ou le calcul de ces deux paramegravetres constitue la phase de mise en page appeleacutee
parfois ajustement de la mise en page Cette derniegravere est traduite par lrsquoexemple simple donneacute agrave
la figure 112 Le corps de la page ci-dessus contient deux eacuteleacutements div imbriqueacutes le premier
eacuteleacutement div (parent) deacutefinit la taille drsquoaffichage du nœud agrave 50 de la largeur de la fenecirctre et
le second eacuteleacutement div contenu par le parent deacutefinit sa largeur agrave 50 de celui du parent soit
32
Figure 111 ndash Les eacutetapes et processus de la construction des arbres DOM CSSOM et de lrsquoarbrede rendu
33
lthtmlgtltheadgt
ltmeta name=viewport content=width=device-widthinitial-scale=1gtlttitlegtExemple de mise en pagelttitlegt
ltheadgtltbodygt
ltdiv style=width 50gtltdiv style=width 50gtHello worldltdivgt
ltdivgtltbodygt
lthtmlgt
Figure 112 ndash Un second exemple simple illustrant le processus de mise en page par le navigateur
25 de la largeur de la fenecirctre
Maintenant que toutes les informations relatives aux nœuds sont reacuteunies ceux-ci sont peints
convertis en pixels reacuteels et afficheacutes agrave lrsquoeacutecran agrave partir de lrsquoarborescence drsquoaffichage finale La
construction est acheveacutee et la page est enfin visible dans la fenecirctre La figure 113 reacutesume
toutes les eacutetapes preacuteceacutedemment deacutecrites dans cette section
34
Figure 113 ndash Vue globale du flux de reacutecupeacuteration de traitement et drsquoaffichage drsquoune page web
CHAPITRE 2
LES BUGS DrsquoINTERFACE DANS LES APPLICATIONS WEB
Les utilisateurs du web sont souvent confronteacutes lors drsquoune application web sur internet agrave
des problegravemes tregraves ennuyeux appeleacutes laquo bugs drsquointerfaces raquo Dans ce chapitre nous exposons
les diffeacuterents types drsquoapplication web et les bugs qui les affectent en montrant que les bugs
drsquointerface sont largement preacutesents dans un grand nombre de sites et applications web du
monde reacuteel et comment des bugs de ce genre ne sont pas limiteacutes agrave des problegravemes de preacutesentation
simples statiques et qursquoils reacutevegravelent dans de nombreux cas des deacutefauts dans le comportement
de lrsquoapplication
21 TYPES DrsquoAPPLICATIONS WEB
Le web est maintenant peupleacute par un nombre consideacuterable drsquoapplications par conseacutequent le
nombre de personnes affecteacutees par les bugs qursquoelles peuvent contenir est eacutenorme
211 APPLICATIONS STATIQUES
Les sites web traditionnels qursquoon appelle eacutegalement applications laquo Web 10 raquo sont statiques
le contenu drsquoune page ne change pas apregraves le chargement et chaque page de lrsquoapplication peut
36
ecirctre chargeacutee indeacutependamment de toute interaction preacutealable avec le site Le test automatique
drsquoune telle application peut ecirctre effectueacute agrave lrsquoaide drsquoun robot drsquoindexation en chargeant une page
de deacutemarrage puis en explorant automatiquement les diffeacuterentes interactions possibles sur la
page pour obtenir de nouvelles pages agrave visiter Comme chaque page de ces applications est
indeacutependante les bugs ne peuvent se produire que sur une seule page drsquoougrave vient la possibiliteacute
drsquoeacutecrire des oracles de test simples qui analyseraient le contenu de ces pages prises isoleacutement
Le Responsive Web Design est un moyen de concevoir un site web de sorte que son contenu
srsquoadapte automatiquement agrave la reacutesolution drsquoeacutecran du terminal utiliseacute pour le visualiser Une
application RWD est donc un site web adaptatif La notion de web adaptatif repense la
conception ergonomique des sites web puisqursquoil ne srsquoagit plus de concevoir autant de sites que
de terminaux mais de concevoir une seule interface auto-adaptative Ainsi les informations et
les structures techniques ne sont pas dupliqueacutees ce qui geacutenegravere des eacuteconomies drsquoeacutechelle dans
la conception et la maintenance des sites web beacuteneacuteficiant de ce mode de conception
Un site web conccedilu avec un design responsive est donc optimiseacute pour tous les appareils
disponibles sur le marcheacute ordinateurs tablettes smartphones Cette faccedilon de concevoir des
applications web est recommandeacutee en raison de quelques avantages majeurs le deacuteveloppement
et la maintenance seront plus rapides et plus simples (un seul fichier geacuterant tous les affichages)
Un reacutefeacuterencement naturel optimal est utiliseacute (pas de sous-domaines ou de redirections vers des
annuaires mobiles) puisqursquoil nrsquoy a qursquoun seul site regroupant toutes les versions et uniquement
une adresse Web (URL) Plus de deacutetails sur le concept de RWD sont preacutesenteacutes dans la section
223
37
212 APPLICATIONS WEB 20
Les applications web reacutecentes eacutegalement appeleacutees RIA (Rich Internet Applications) utilisent
des scripts cocircteacute client des eacutetats cocircteacute serveur et drsquoautres fonctionnaliteacutes pour offrir une expeacute-
rience utilisateur ameacutelioreacutee Les modifications apporteacutees agrave lrsquoeacutetat de la page peuvent venir agrave la
suite de requecirctes HTTP asynchrones chargeant un nouveau contenu Par conseacutequent ces appli-
cations sont maintenant stateful la mecircme action ou la mecircme requecircte HTTP peut renvoyer des
reacutesultats diffeacuterents en fonction des interactions passeacutees de lrsquoutilisateur Ces applications avec
eacutetat viennent avec de nouveaux types de bugs appeleacutes bugs comportementaux Contrairement
agrave un bug statique qui srsquoeacutevalue en analysant le contenu drsquoune seule page indeacutependamment des
autres un bug comportemental relie les donneacutees et lrsquoordre de consultation de plusieurs pages
de lrsquoapplication
22 TYPES DE BUGS DrsquoINTERFACE
Un bug drsquointerface est un deacutefaut dans un systegraveme web qui a des effets visibles sur le contenu
des pages servi agrave lrsquoutilisateur Nous avons effectueacute une eacutetude sur de plus de 35 applications
web [51] en tous genres Un releveacute des bugs ayant un impact sur la preacutesentation ou le contenu
de lrsquointerface utilisateur a eacuteteacute fait Le tableau 21 donne la liste des sites web et des applications
pour lesquelles au moins un bug de mise en page a eacuteteacute trouveacute Dans ce qui suit nous preacutesentons
briegravevement les bugs deacutecouverts dans cette eacutetude Nous soulignons qursquoaucun des bugs deacutecrits
ici repreacutesente un problegraveme de compatibiliteacute entre les navigateurs Les bugs sont preacutesents
peu importe le navigateur utiliseacute pour afficher la page et ils ne sont pas causeacutes par une
interpreacutetation divergente des normes par deux navigateurs diffeacuterents
38
mdash Academiaedumdash Acermdash Adagio Hotelsmdash Air Canadamdash Air Francemdash AllMusicmdash American Airlinesmdash Boingomdash Canadian
Mathematical Societymdash Customizeorgmdash Digital Ocean
mdash Dropboxmdash EasyChairmdash Elseviermdash Evous Francemdash Facebookmdash IEEEmdash Just for Laughsmdash LinkedInmdash Liveshoutmdash Microsoft TechNetmdash Monoprixmdash Moodle
mdash Naymzmdash NSERCmdash OngerNeigemdash ProQuestmdash Rail Europemdash ResearchGatemdash St-Hubertmdash SpringerOpenmdash TD Canada Trustmdash Time Magazinemdash Uniform Servermdash YouTube
Tableau 21 ndash Sites et applications web pour lesquelles au moins un bug de mise en page a eacuteteacutetrouveacute
221 BUGS STATIQUES
Un premier type de bugs appeleacutes bugs statiques collecteacutes par une eacutetude empirique dans des
sites web et applications reacuteelles On y retrouve des problegravemes tels que le chevauchement des
eacuteleacutements les eacuteleacutements qui srsquoeacutetendent en dehors de leur conteneur ou le bug drsquoeacuteleacutements mal
empileacutes Ce genre de bugs peut ecirctre diviseacute en deux cateacutegories des bugs lieacutes agrave la mise en page
et drsquoautres non lieacutes agrave la mise en page
Bugs de mise en page
Une premiegravere cateacutegorie de bug correspond agrave des perturbations dans la mise en page ou la
preacutesentation de la page elle-mecircme crsquoest-agrave-dire tout reacutesultat inattendu du concepteur de cette
page en termes de contenu ou de proprieacuteteacutes (position taille nombre drsquoeacuteleacutements)
Eacuteleacutements mal aligneacutes Un problegraveme de mise en page banal mais freacutequent est le deacutesaligne-
ment ou le deacutecalage drsquoeacuteleacutements qui doivent ecirctre aligneacutes La figure 21a montre un exemple de
39
(a) LiveShout
(b) LinkedIn
Figure 21 ndash Exemple drsquoeacuteleacutements mal aligneacutes le cadre blanc est horizontalement mal aligneacute(LiveShout) le menu Interests est deacutecaleacute drsquoun pixel par apport aux autres menus (LinkedIn)
ce bug courant mais parfois le deacutesalignement est subtil un eacuteleacutement peut ecirctre deacutecaleacute par un
seul pixel (figure 21b)
Eacuteleacutements qui se chevauchent Le problegraveme de chevauchement des eacuteleacutements qui devraient
ecirctre disjoints dans la preacutesentation drsquoune page est aussi lrsquoun des bugs les plus reacutepandus dans
cette eacutetude les problegravemes de cette nature ont eacuteteacute trouveacutes dans des sites aussi varieacutes que le
Time Magazine Air Canada Moodle et Rail Europe La figure 22 montre un exemple de ce
problegraveme
Dans certains cas le chevauchement se produit par une interruption de la mise en page causeacutee
par le redimensionnement du document principal en dessous des dimensions minimales
comme dans lrsquoexemple de la figure 22a Les conteneurs qui doivent ecirctre cocircte agrave cocircte sont
afficheacutes les uns sur les autres par le moteur de rendu du navigateur Cependant nous avons
eacutegalement constateacute que dans de nombreux cas ce chevauchement est causeacute par le fait que les
40
eacuteleacutements sont absolument positionneacutes dans une page par rapport agrave leurs dimensions lorsqursquoils
contiennent du texte en anglais et lors de lrsquoaffichage du site web dans une autre langue (comme
le franccedilais) il peut arriver que le texte correspondant soit plus long que la version anglaise ce
qui cause le chevauchement de deux eacuteleacutements qui devraient ecirctre disjoints Cela a eacuteteacute observeacute
par exemple sur la figure 22b pour le site web RailEurope
Eacuteleacutements qui srsquoeacutetendent agrave lrsquoexteacuterieur de leurs conteneurs Un autre problegraveme reacutepandu
est la preacutesence drsquoeacuteleacutements qui deacutepassent les limites de leurs conteneurs parent ce qui pro-
voque le chevauchement indeacutesirable avec des eacuteleacutements environnants Ce bug est lrsquoinverse du
preacuteceacutedent plutocirct que drsquoeacutetendre leur conteneur en dehors de ses dimensions nominales cette
fois les eacuteleacutements qui srsquoeacutelargissent agrave lrsquoexteacuterieur de leur conteneur sont simplement coupeacutes de
lrsquoaffichage
La figure 23 montre un exemple de ce dernier type dans la plateforme drsquoenseignement
en ligne Moodle (la figure 23a) des eacuteleacutements de la table sont coupeacutes de leur cocircteacute droit
Lors de lrsquoanalyse du code source de la page il se trouve que quatre autres colonnes doivent
effectivement ecirctre visibles et sont tout simplement inaccessibles puisque ils ont eacuteteacute coupeacute
Cela rend la page plus ou moins inutilisable
Un cas particulier survient lorsque le conteneur soit la fenecirctre du navigateur entiegravere et la fenecirctre
est redimensionneacutee en dessous drsquoun certain seuil Cela peut ecirctre montreacute dans la Figure 23b
le contenu du menu en haut disparaicirct lorsque la fenecirctre est redimensionneacutee Le navigateur
fournit une barre de deacutefilement horizontale mais cela ne fait deacutefiler que la partie infeacuterieure de
la page et pas le menu du haut En conseacutequence certains boutons du menu principal du site ne
peuvent plus ecirctre cliqueacutes
Nous placcedilons aussi dans cette cateacutegorie un bug rencontreacute en utilisant la fenecirctre de messagerie
41
(a) Air Canada
(b) Rail Europe
Figure 22 ndash Exemple drsquoeacuteleacutements qui se chevauchent
42
(a) Moodle
(b) LinkedIn
Figure 23 ndash Le contenu de la page est dissimuleacute de lrsquointerface en raison de son prolongementau-delagrave des dimensions du conteneur parent
43
Figure 24 ndash Le bug Facebook La zone de texte permettant au utilisateur de taper un messageinstantaneacute (agrave gauche) disparaicirct soudainement (agrave droite)
instantaneacutee de Facebook Lorsque la fenecirctre de parent est redimensionneacutee au-dessous drsquoune
largeur speacutecifique la zone de texte permettant agrave un utilisateur drsquoentrer un nouveau message
disparaicirct soudainement de lrsquointerface comme le montre la figure 24 Tous les autres eacuteleacutements
de la fenecirctre restent identiques mais il devient impossible de taper un message
Ton sur ton Ce bug est causeacute par un problegraveme de mise en page ougrave le texte drsquoun eacuteleacutement est
de la mecircme couleur que le fond de la page agrave cet endroit ce qui rend le texte invisible dans
lrsquoaffichage Bien que ce type de comportement peut ecirctre fait expregraves afin de dissimuler un
eacuteleacutement nous croyons qursquoil est tregraves peu probable que cela soit lrsquointention du deacuteveloppeur
puisqursquoil existe des moyens beaucoup plus eacuteleacutegants drsquoatteindre le mecircme reacutesultat en utilisant
les proprieacuteteacutes CSS (en deacutefinissant la proprieacuteteacute drsquoaffichage agrave none ou la proprieacuteteacute opacity agrave
0)
La figure 25 montre un exemple drsquoun tel problegraveme de mise en page sur Academiaedu (figure
25b) Dans la figure 25a le redimensionnement de la fenecirctre du navigateur en dessous drsquoune
largeur speacutecifique a pour effet impreacutevu de pousser les eacuteleacutements du menu supeacuterieur en dehors
de leur conteneur preacutevu (celui qui a un fond bleu) Par conseacutequent ces eacuteleacutements qui ont du
44
(a) ProQuest
(b) Academia
Figure 25 ndash Le bug laquo ton sur ton raquo Les eacuteleacutements de menu sont pousseacutes en dehors de leursconteneur et disparaissent (a) le texte du lien est de la mecircme couleur que le fond reacuteveacuteleacute en leseacutelectionnant avec la souris (b)
texte blanc se placent dans une zone blanche et deviennent invisibles (agrave lrsquoexception drsquoun seul
eacuteleacutement du menu qui a un fond bleu pour une raison inconnue)
Eacuteleacutements mal empileacutes Ce problegraveme se produit quand un eacuteleacutement qui devrait ecirctre rendu
au-dessus drsquoun autre est placeacute en dessous de ce dernier comme le montre la figure 26 Dans
cet exemple le bouton orange en haut de lrsquoimage est censeacute apporter un menu (liste deacuteroulante)
Toutefois le contenu de ce menu apparaissent sous le reste du contenu de la page plutocirct que
sur eux ce qui rend certains de ses eacuteleacutements inutilisables
Lrsquoordre du processus du dessin est deacutefini dans le standard de CSS crsquoest en fait lrsquoordre dans
lequel les eacuteleacutements sont empileacutes dans la pile des contextes Cet ordre affecte le dessin puisque
les piles sont dessineacutees de lrsquoarriegravere vers lrsquoavant Lrsquoordre drsquoempilement drsquoun bloc de rendu est
1 Couleur drsquoarriegravere-plan
2 Image drsquoarriegravere-plan
3 Bordures
45
Figure 26 ndash Un eacuteleacutement est placeacute incorrectement sur un autre
4 Enfants
5 Contour
Ainsi une violation de cet ordre pour une raison inconnue peut causer ce genre de problegraveme
La plupart des problegravemes de cette nature peuvent ecirctre corrigeacutees en attribuant correctement la
proprieacuteteacute z-index de lrsquoeacuteleacutement deacutefectueux
Disposition briseacutee Une rupture majeure dans la structure attendue drsquoune page se produit
quand un certain nombre de ressources importantes telles que les fichiers CSS le code
JavaScript ou les images ne parvient pas agrave ecirctre reacutecupeacutereacute par le navigateur En conseacutequence
de nombreux eacuteleacutements de la page nrsquoont pas leurs deacuteclarations de style et sont positionneacutes et
dimensionneacutes en fonction du style par deacutefaut fourni par le moteur de rendu
La figure 27 montre un cas assez grave drsquoun tel problegraveme ougrave essentiellement toutes les
46
Figure 27 ndash Un exemple drsquointerface briseacutee en raison de lrsquoeacutechec du chargement de certainesressources
deacuteclarations CSS sont manquantes Ceci est causeacute par le fait que le fichier aparthotelcss
nrsquoa pas reacuteussi agrave ecirctre chargeacute pour une raison inconnue Le mecircme problegraveme a eacuteteacute observeacute
momentaneacutement sur le portail web Digital Ocean 28
Sur le site web de Digital Ocean la page de connexion (login) est briseacutee et toutes les autres
pages aussi comme le montre la figure 28a Cela est ducirc au fait que le navigateur a abandonneacute
le chargement de nombreuses ressources dans la page (y compris toutes les images) Il est agrave
noter que malgreacute ces problegravemes le site Web reste fonctionnel La figure 28b repreacutesente une
capture drsquoeacutecran de ce agrave quoi la page devrait ressembler
HTML malformeacute Dans la figure 29 lrsquoHTML malformeacute rend impossible de voir le fond
drsquoeacutecran
47
(a) Digital Ocean sans CSS (b) Digital Ocean avec CSS
Figure 28 ndash Exemple drsquointerface briseacute dans le site Digital Ocean
Figure 29 ndash Exemple drsquoHTML mal formeacute
48
Eacuteleacutements inaccessibles Dans la figure 210a la page affiche correctement une mise en page
laquoeacutecran largeraquo lorsque la fenecirctre du client est assez large Par contre si la largeur de la fenecirctre
est moyenne comme le montre la figure 210b on observe que le bouton de connexion (sign in)
en haut agrave droite srsquoest deacuteplaceacute agrave lrsquoexteacuterieur de la bande supeacuterieure
Incoheacuterence dans les valeurs possibles drsquoun champ de formulaire Dans une page du site
CallingCards le champ du code postal dans le formulaire est preacute-rempli avec 6 caractegraveres de
donneacutees anteacuterieures mais en essayant de modifier le code postal il nrsquoest pas possible de taper
plus de 5 caractegraveres dans ce champ (figure 211)
Figure 211 ndash Incoheacuterence dans le champ de formulaire du site CallingCards
Bugs non lieacutes agrave la mise en page
Plusieurs autres bugs peuvent ecirctre deacutetecteacutes en analysant le contenu et la preacutesentation drsquoune page
Nous verrons dans la suite que certains drsquoentre eux se rapportent mecircme aux comportements
attendu ou aux fonctionnaliteacutes de lrsquoapplication mais peuvent quand mecircme ecirctre deacutetecteacutes par
des regravegles exprimeacutees sur un seul instantaneacute statique de la fenecirctre de lrsquoapplication
49
Mojibake et problegravemes drsquoencodage Plusieurs sites et applications gegraverent mal les donneacutees
de chaicircne en dehors de lrsquoASCII 7-bits Divers encodages de caractegraveres tels que Cp1252 ou
UTF-8 peuvent ecirctre utiliseacutes pour repreacutesenter les caractegraveres laquo accentueacutes raquo ou laquo eacutetrangers raquo
Cependant le mecircme caractegravere peut ecirctre repreacutesenteacute par une valeur binaire diffeacuterente selon le
scheacutema de codage utiliseacute pire certains codages comme UTF-8 peuvent utiliser plusieurs
octets pour repreacutesenter un seul caractegravere
Les problegravemes surgissent quand un systegraveme nrsquointerpregravete pas correctement le contenu drsquoune
chaicircne de caractegraveres croyant qursquoun document est dans un certain encodage alors qursquoil en
utilise reacuteellement un autre Il en reacutesulte souvent un caractegravere incorrect superflu ou pas afficheacute
du tout ce pheacutenomegravene est appeleacute mojibake 1 Par exemple lrsquoencodage UTF-8 du caractegravere
laquo eacute raquo lorsqursquoil est interpreacuteteacute comme une chaicircne Cp1252 produit laquo Atilde ccopy raquo comme le montre la
figure 212a Agrave lrsquoinverse le rendu Cp1252 du caractegravere laquo eacute raquo donne laquo raquo quand il est interpreacuteteacute
comme du UTF-8 (figure 212b)
Bien que ces caractegraveres puissent ecirctre des donneacutees leacutegitimes leur preacutesence dans le contenu drsquoun
eacuteleacutement indique tregraves probablement une manipulation incorrecte de lrsquoencodage des chaicircnes par
lrsquoapplication eacutetudieacutee
Un autre exemple de ce genre de bug est montreacute dans la figure 213
213a donne lrsquoexemple lors de lrsquoinvitation de quelqursquoun de votre carnet drsquoadresses dont le nom
contient un accent Doodle affiche son nom incorrectement et cela donne une adresse invalide
213b montre qursquoen cliquant sur la suggestion on observe que lrsquoajout est fait mais que le nom
est coupeacute en deux parties agrave lrsquoendroit mecircme du caractegravere eacutechappeacute
1 Terme japonais signifiant laquo transformation de caractegravere raquo
50
Problegravemes drsquoeacutechappement Les problegravemes drsquoeacutechappement surviennent lorsque les chaicircnes
avec des caractegraveres speacuteciaux ne parviennent pas agrave ecirctre correctement codeacutees ou deacutecodeacutees entre
deux applications La manifestation la plus freacutequente de ce problegraveme est lors de la lecture et
de lrsquoeacutecriture des chaicircnes de caractegraveres dans une base de donneacutees Certains caractegraveres comme
lrsquoapostrophe neacutecessitent drsquoecirctre doubleacutes afin de ne pas ecirctre confondus avec un seacuteparateur
de chaicircne Les problegravemes surviennent quand un systegraveme ne parvient pas agrave remplacer les
apostrophes doubles par des apostrophes simples lors de lrsquoaffichage des donneacutees dans un
formulaire
Lors de lrsquoenregistrement du contenu du formulaire au retour agrave la base de donneacutees chaque
apostrophe sera de nouveau doubleacutee entraicircnant un quadruplet drsquoapostrophes lors du char-
gement de la page la prochaine fois et ainsi de suite ceci est illustreacute dans la figure 214
Ainsi la recherche de plusieurs apostrophes dans un formulaire peut ecirctre utiliseacutee pour deacutetecter
lrsquoeacutechappement incorrect agrave lrsquointeacuterieur du code source
Un problegraveme de nature similaire se produit lorsque des caractegraveres speacuteciaux dans le code source
de la page (tels que HTML ou JavaScript) sont eacutechappeacutes incorrectement Par exemple une
seacutequence comme ltpgt peut ecirctre transformeacutee en ampltpampgt reacutesultant en la chaicircne litteacuterale ltpgt
afficheacutee comme du texte plutocirct que drsquoecirctre interpreacuteteacutee comme une balise de paragraphe
Nous avons deacutecouvert des exemples de ce problegraveme sur EasyChair qui affiche du code HTML
brut ou sur YouTube qui affiche du code JavaScript comme on peut le voir agrave la figure 215
222 BUGS COMPORTEMENTAUX
Drsquoautres bugs peuvent ecirctre appeleacutes laquo comportementaux raquo ils reacutevegravelent un problegraveme dans la
fonctionnaliteacute du site ou alors ils peuvent ecirctre exprimeacutes uniquement en termes drsquoune seacutequence
51
de plusieurs pages dans lrsquoordre
Contrairement agrave une application web traditionnelle une application Internet riche (RIA) utilise
les technologies Web modernes eacutemergentes telles que AJAX [47] Flash et Silverlight Par
conseacutequent de nouveaux problegravemes de tests web sont ajouteacutes aux problegravemes existants Une
caracteacuteristique importante de ces applications est qursquoelles sont stateful leur code peut stocker
des donneacutees persistantes sur le client (en utilisant WebStorage les proprieacuteteacutes CSS les variables
JavaScript et les objets) et sur le serveur (agrave lrsquoaide de cookies de stockage de session et de bases
de donneacutees) De plus lrsquoeacutetat de lrsquoapplication est disperseacute sur un certain nombre drsquoeacuteleacutements
et ne peut pas simplement ecirctre assimileacute agrave lrsquoURL de la page en cours (afficheacutee dans la barre
drsquoadresse du navigateur) Des fonctionnaliteacutes telles que la communication asynchrone la
manipulation DOM cocircteacute client et les gestionnaires drsquoeacuteveacutenements permettent de changer lrsquoeacutetat
de lrsquoapplication sans un rechargement complet de la page et sans modifier son URL [35]
Une conseacutequence positive de ces fonctionnaliteacutes est qursquoune telle application peut fournir
une expeacuterience utilisateur plus riche (drsquoougrave son nom) sans les cookies et JavaScript les
opeacuterations simples telles que les manipulations de panier les sessions utilisateur (connexion
deacuteconnexion) et autres fonctionnaliteacutes ne seraient pas possibles Cependant la preacutesence drsquoun
eacutetat dans lrsquoapplication introduit eacutegalement la possibiliteacute drsquoincoheacuterences dans lrsquoeacutetat afficheacute
drsquoune page agrave une autre Ces problegravemes sont appeleacutes bugs comportementaux car ils sont la
conseacutequence de lrsquointeraction de plusieurs pages entre elles et dans un certain ordre
Eacuteleacutements mobiles Certains eacuteleacutements peuvent changer leur position involontairement lors
de lrsquointeraction avec un utilisateur La figure 216 montre un exemple drsquoun tel problegraveme sur
le site web du CRSNG ougrave eacutecrire un texte dans une zone de texte vide auparavant reacuteduit sa
largeur de 4 pixels et deacutecale leacutegegraverement les zones de texte restantes vers la gauche
52
Ce problegraveme srsquoest aveacutereacute plus reacutepandu que nous nous attendions les variations comprennent
certains styles drsquoeacuteleacutements (la bordure ou la taille) qui ont eacuteteacute changeacutes sans aucune raison
apparente
Le dysfonctionnement des boutons Beaucoup drsquoapplications montrent agrave lrsquoutilisateur des
eacuteleacutements qui se comportent comme une fenecirctre pop-up (une fenecirctre secondaire qui srsquoaffiche
sans avoir eacuteteacute solliciteacutee par lrsquoutilisateur devant la fenecirctre de navigation principale lorsqursquoon
navigue sur Internet) Ce moyen est communeacutement utiliseacute pour afficher des messages publici-
taires ou un avertissement comme la reacuteponse agrave un message priveacute dans un forum
Toutefois dans un certain nombre de cas les boutons dans ces fenecirctres sont inopeacuterants cliquer
sur eux un certain nombre de fois ne produit aucun effet Ce problegraveme a eacuteteacute teacutemoin dans des
sites aussi varieacutes qursquoAmerican Airlines Dropbox et BitBucket Dans certains cas lrsquoutilisateur
est effectivement coinceacute dans le pop-up ou la page qui contient le bouton et ne peut pas sortir
sans forcer un rechargement complet du document
Confusion dans le statut de connexion Deux sites web dans notre eacutetude preacutesentent des
incoheacuterences dans lrsquoeacutetat drsquoune page meacutelangeant des eacuteleacutements de la fenecirctre drsquoune page
normalement reacuteserveacutes aux utilisateurs enregistreacutes (tels que les menus personnaliseacutes) ainsi
que des eacuteleacutements reacuteserveacutes aux utilisateurs qui sont deacuteconnecteacutes (comme un formulaire de
connexion)
Nous avons assisteacute agrave un tel comportement dans le site web de lrsquoIEEE pour le formulaire de
demande de membre Senior Apregraves lrsquoexpiration drsquoun certain deacutelai lrsquoutilisateur doit neacutecessaire-
ment se connecter agrave nouveau toutefois la page preacutesenteacutee agrave lrsquoutilisateur est celle repreacutesenteacutee
sur la figure 217 On remarque que le nom de lrsquoutilisateur est toujours preacutesent en haut agrave droite
de la page mecircme srsquoil est censeacute ecirctre deacuteconnecteacute (les identifiants de connexion sont demandeacutes)
53
Cliquer sur ce nom apporte le menu deacuteroulant qui est normalement accessible uniquement
lorsque lrsquoutilisateur est connecteacute Le mecircme problegraveme a eacuteteacute trouveacute sur le site de reacuteservation
drsquoAir Canada
Incoheacuterences dans le reacutesultat de la recherche Un autre problegraveme de comportement est
celui de lrsquoincompatibiliteacute entre une requecircte faite par un utilisateur et les reacutesultats afficheacutes par
lrsquoapplication en reacuteponse agrave cette requecircte
La figure 218 montre un exemple de ce problegraveme sur le site web des eacutepiceries Monoprix
Lors de la recherche des magasins agrave proximiteacute un utilisateur peut taper un code postal dans
un champ de formulaire puis cliquer sur laquo Valider raquo Cependant les reacutesultats de recherche
afficheacutes dans la page suivante ne montrent presque jamais les magasins avec le code postal
souhaiteacute
Comme avec tous les bugs dans la preacutesente cateacutegorie cela peut ecirctre observeacute seulement par
la correacutelation de plusieurs eacuteleacutements dans deux eacutetats diffeacuterents de la page le texte dans la
zone de texte un clic sur un bouton speacutecifique suivi par le texte dans la liste des eacuteleacutements qui
apparaissent dans la page reacutesultante
223 BUGS DE RESPONSIVE WEB DESIGN
Il y a quelques anneacutees les deacuteveloppeurs Web pouvaient faire des hypothegraveses sur la taille de
lrsquoeacutecran des appareils des utilisateurs Les ordinateurs de bureau ont eacuteteacute conccedilus pour acceacuteder
aux sites web en assumant une taille de fenecirctre minimale il eacutetait donc laquo normal raquo que pour
une largeur de fenecirctre plus petite le site semble briseacute Il srsquoagissait drsquoune approche valide
dans une eacutepoque ougrave les tablettes et les smartphones eacutetaient inouiumls (pas agrave la porteacutee de tout le
monde peu utiliseacutes) Aujourdrsquohui une autre approche est neacutecessaire pour srsquoassurer que les
54
sites fonctionnent correctement dans une gamme de diffeacuterents appareils et tailles de viewport
(le viewport deacutesigne la partie drsquoune page web qui est visible dans la fenecirctre du navigateur
drsquoun ordinateur smartphone tablette ou drsquoun autre dispositif Le viewport est variable et
mouvant en fonction de la taille de la fenecirctre du navigateur et en fonction de lrsquoutilisation des
fonctions de deacutefilement ou scrolling (souris ou ascenseur))[6]
Par conseacutequent la conception des sites doit deacutesormais tenir compte de plusieurs cateacutegories
drsquoappareil selon la taille de lrsquoeacutecran Cependant le changement rapide des proprieacuteteacutes de
lrsquoappareil nrsquoa pas pu ecirctre suivi par les deacuteveloppeurs web Pour remeacutedier agrave ce problegraveme ces
derniers ont eu recours aux mecircmes hypothegraveses en fonction de la demande du serveur La
demande drsquoune ressource par un navigateur est suivie par une chaicircne drsquoagent utilisateur (user
agent string) geacuteneacuteralement envoyeacutee avec la demande pour identifier le type de navigateur
utiliseacute La lecture de cette derniegravere du cocircteacute du serveur entraicircne la diffusion de deux versions
une version mobile conccedilue pour une largeur maximale si lrsquoutilisateur envoyait des chaicircnes
drsquoagents drsquoutilisateurs mobiles et une version bureau conccedilue pour une largeur minimale
Les deacuteveloppeurs ont pu suite agrave lrsquointroduction des media queries de CSS eacutecrire des deacutecla-
rations de style conditionnelles par des proprieacuteteacutes multimeacutedia telle que la taille de la fenecirctre
(voir figure 219) Lrsquoadaptation drsquoun site pour un support speacutecifique ou une taille de fenecirctre au
moment de lrsquoexeacutecution est donc devenue donc possible Ce concept qui sert agrave faire en sorte
qursquoun seul site reacuteponde agrave diffeacuterentes proprieacuteteacutes multimeacutedias (principalement la taille de la
fenecirctre) au moment de lrsquoexeacutecution afin drsquoameacuteliorer lrsquoexpeacuterience de lrsquoutilisateur est appeleacute
Responsive Web Design [59]
Une eacutetude reacutecente meneacutee par Walsh et al identifie cinq types de bugs survenant plus
particuliegraverement dans les sites web RWD [73] Pour la plupart il srsquoagit de bugs deacutejagrave observeacutes
dans drsquoautres sites au cours de notre propre eacutetude
55
Collision drsquoeacuteleacutements Crsquoest un bug dans lequel les eacuteleacutements se chevauchent en raison de la
modification de la fenecirctre (viewport) Ce bug peut eacutegalement influencer le bon fonctionnement
des sites web dans le cas ougrave certains eacuteleacutements fonctionnels dans les pages sont masqueacutes
Deacutepassement drsquoeacuteleacutements Les eacuteleacutements ont besoin de se redimensionner ils manquent
drsquoespace mais ils doivent aussi ecirctre assez grands pour contenir tous leurs enfants Cela arrive
dans le cas ougrave un eacuteleacutement deacutepasse agrave lrsquoexteacuterieur de son parent en raison drsquoun manque drsquoespace
Lrsquoeacuteleacutement peut alors ecirctre inaccessible masqueacute par un autre eacuteleacutement ou par-dessus drsquoautres
eacuteleacutements
Ce bug sur le site httpswwwthelilycom On peut le voir dans la figure 220 ougrave le div
avec les boutons du menu se termine en dehors de la barre de menu et hors de vue
Deacutepassement du viewport Ce bug se produit lorsque les eacuteleacutements sont pousseacutes hors de
la fenecirctre (viewport) et deviennent inaccessibles ou cacheacutes Sur le site web httpswww
slaveryfootprintorg ce bug a eacuteteacute trouveacute La figure 221 montre comment les bugs non
observables peuvent creacuteer des problegravemes agrave des largeurs infeacuterieures Ici le div du milieu est un
peu en dehors de la fenecirctre mais il ne montre aucun problegraveme observable Cependant crsquoest agrave
440px que nous pouvons voir clairement le contenu deacuteborder de la fenecirctre
Disposition agrave petite eacutechelle En fonction de lrsquoimpleacutementation certaines mises en page
peuvent ecirctre afficheacutees correctement que dans un petit intervalle de largeur Par exemple un
affichage pourrait ecirctre seulement correct entre 320 et 325 pixels de largeur
Couverture drsquoeacuteleacutements Ce bug survient lorsqursquoun conteneur nrsquoest pas assez large pour
contenir tous les eacuteleacutements et qursquoun ou plusieurs eacuteleacutements sont pousseacutes sur une ligne suppleacute-
56
mentaire
Un exemple drsquoeacuteleacutement enveloppeacute peut ecirctre vu dans la figure 222 On pourrait faire valoir que
ce nrsquoest pas un bug cependant agrave des largeurs infeacuterieures la liste est de nouveau aligneacutee en
haut Cela montre qursquoayant cette liste aligneacutee en haut est la disposition deacutesireacutee
Nous donnerons des exemples sur la deacutetection de ce genre de bugs dans la section 542
57
(a) Fenecirctre large
(b) Fenecirctre moyenne
Figure 210 ndash Exemple drsquoeacuteleacutements inaccessibles
58
(a) SpringerOpen
(b) Naymz
Figure 212 ndash Exemple de mojibake (a) donneacutees UTF-8 afficheacutees comme Cp1252 (b) donneacuteesCp1252 afficheacutees comme UTF-8
59
(a) Mojibake adresse invalide
(b) Mojibake nom coupeacute en deux partie
Figure 213 ndash Exemples de Mojibake dans Doodle
60
Figure 214 ndash Des donneacutees extraites de la base de donneacutees sont incorrectement eacutechappeacutees dansIEEE PDF eXpress on constate la preacutesence de plusieurs apostrophes
Figure 215 ndash Sur cette page YouTube du code JavaScript est afficheacute au lieu drsquoecirctre interpreacuteteacute
Figure 216 ndash Eacuteleacutements mobiles la position et la bordure de la zone du texte changent lors de lasaisie du texte (NSERC)
61
Figure 217 ndash Confusion connexiondeacuteconnexion dans une page web le contenu pour un utilisa-teur connecteacute (en haut de la page a droite) coexiste avec le formulaire de connexion reacuteserveacute auxutilisateurs qui ne sont pas en principe connecteacutes
Figure 218 ndash Incoheacuterences dans le reacutesultat de la recherche
media (max-width 420px) body
background-color white
media (min-width 421px)
body background-color blue
Figure 219 ndash Code CSS avec des conditions sur la largeur de lrsquoappareil Il srsquoagit drsquoun exemplede media queries
62
(a) Tous les boutons sont correcte-ment dans la barre de menu
(b) Le bouton laquo About raquo en sur-brillance fait saillie en dehors dela barre de menu son parent
Figure 220 ndash Le bug de deacutepassement drsquoeacuteleacutements sur le site httpswwwthelilycom
(a) Le div est en surbrillance mais il nrsquoy a pas debug observable
(b) En 440px nous voyons lemecircme div avec un bug obser-vable ougrave le texte deacuteborde en de-hors de la fenecirctre
Figure 221 ndash Le bug de deacutepassement du viewport sur le site httpswwwslaveryfootprintorg
(a) La liste est en haut (top-aligned) (b) Agrave une largeur infeacuterieure lrsquoeacuteleacutementlaquo CGV raquo est pousseacute sur une ligne suppleacutemen-taire
Figure 222 ndash Le bug de couverture drsquoeacuteleacutements sur le site httpswwwanthedesignfr
CHAPITRE 3
EacuteTAT DE LrsquoART
Il existe un certain nombre drsquooutils servant agrave tester les applications web Dans ce chapitre nous
classons les approches existantes en quatre grandes familles qursquoon nomme successivement
outils de tests approches visuelles approches deacuteclaratives et outils RWD Nous allons les
exposer en donnant un peu plus de deacutetails sur quelques outils relatifs agrave chaque famille
drsquoapproches Enfin nous citons leurs points faibles en montrant leurs limites dans certains cas
31 OUTILS DE TEST
La deacutetection de bugs drsquointerface peut drsquoabord ecirctre abordeacutee comme un problegraveme de test logiciel
classique Sous cet angle il se veut une geacuteneacuteralisation des fonctionnaliteacutes offertes par des
logiciels drsquoanalyse de sites web comme Google Analytics 1 ou Piwik 2 Ces outils suivent les
requecirctes HTTP et fournissent un tableau de bord pour analyser des donneacutees de base pays
drsquoorigine dureacutee drsquoune session etc Cependant ces outils ne gegraverent geacuteneacuteralement pas Ajax ne
peuvent pas ecirctre utiliseacutes comme outils de test (ils nrsquoeacutevaluent pas les conditions sur le contenu
de la page par exemple) et ne signalent rien sur le contenu de la page sur les actions de
1 httpwwwgooglecomanalytics2 httpwwwpiwikorg
64
WebDriver driver = new FirefoxDriver()driverget(http)ListltWebElementgt items = driverfindElements(BycssSelector(li))int left = -1for (WebElement item items) if (left == -1) left = itemgetLocation()getX()continue
assert(left = itemgetLocation()getX())
Figure 31 ndash Exemple de code pour Selenium WebDriver
lrsquoutilisateur ou les requecirctes Ajax
Les logiciels de test en ligne tels que Capybara Selenium WebDriver Watij ou Sahi sont plus
proches de nos objectifs Ces outils fournissent diffeacuterents langages pour deacutecrire les tests et
eacutecrire des assertions sur lrsquoapplication Les scripts WebDriver sont eacutecrits en Java Capybara
a sa propre API 3 dans le langage Ruby Watij utilise WebSpec 4 qui est une API deacutefinie
par-dessus Java (35 donne un exemple de test webspec-watij) et Sahi utilise SahiScript
une extension de JavaScript 5 Tous ces langages sont impeacuteratifs (crsquoest-agrave-dire proceacuteduraux) et
visent agrave piloter une application en effectuant des actions La partie test se reacuteduit agrave lrsquoinsertion
drsquoinstructions similaires agrave assert dans le code du script A titre drsquoexemple la figure 31
donne un extrait de code Java pour Selenium WebDriver pour veacuterifier que tous les eacuteleacutements
satisfaisant un seacutelecteur CSS sont agrave gauche
3 httpmakandracardscommakandra1422-capybara-the-missing-api4 httpwatijcomwebspec-api5 httpsahicoin
65
311 CAPYBARA
Capybara est un framework drsquoautomatisation Web utiliseacute pour creacuteer des tests fonctionnels qui
simulent lrsquointeraction des utilisateurs agrave une application Il constitue une bibliothegraveque conccedilue
pour ecirctre utiliseacutee sur un pilote Web sous-jacent (underlying web driver) tels que selenium-web
driver rack test driver ou capybara-webkit Il fournit un DSL (Domain Specific Language)
servant agrave deacutecrire les actions exeacutecuteacutees par ces pilotes Web [30] Une fois la page est chargeacutee
via le DSL et le pilote Web sous-jacent Capybara essayera de localiser lrsquoeacuteleacutement pertinent
dans le DOM (Document Object Model) et exeacutecutera une action du genre clics de boutons
de liens etc Son DSL deacuteployeacute pour exprimer les actions agrave exeacutecuter est tregraves intuitif la figure
32 montre quelques unes de ses commandes de base Dans le but de trouver un eacuteleacutement[30]
Capybara par lrsquointermeacutediaire du DSL cherchera dans le DOM les attributs suivants
mdash Champ de texte (fill_in) id name eacuteleacutement drsquoeacutetiquette associeacute (label)
mdash Cliquez sur un lienbouton (click_link click_button) id titre texte dans la
balise valeur
mdash Case agrave cocherbouton radioliste deacuteroulante (check uncheck choose select) id nom
eacuteleacutement drsquoeacutetiquette associeacute (label)
mdash Teacuteleacutecharger le fichier (attach_file) id nom
312 WATIJ
Watij ou Web Application Testing en Java est un projet de test impleacutementeacute en Java destineacute agrave
automatiser les tests fonctionnels des applications Web au-dessus de IE (Internet Explorer) Il
est baseacute sur la conception de Watir [33] et possegravede une capaciteacute de recherche drsquoeacuteleacutements lui
permettant de trouver drsquoacceacuteder et de controcircler facilement nrsquoimporte quel eacuteleacutement HTML agrave
66
visit(rsquopage_urlrsquo) navigate to pageclick_link(rsquoid_of_linkrsquo) click link by idclick_link(rsquolink_textrsquo) click link by link textclick_button(rsquobutton_namersquo) fill text fieldfill_in(rsquoFirst Namersquo with =gt rsquoJohnrsquo) choose radio buttonchoose(rsquoradio_buttonrsquo) choose radio buttoncheck(rsquocheckboxrsquo) check in checkboxuncheck(rsquocheckboxrsquo) uncheck in checkboxselect(rsquooptionrsquo from=gtrsquoselect_boxrsquo) select from dropdownattach_file(rsquoimagersquo rsquopath_to_imagersquo) upload file
Figure 32 ndash Commandes de base de Capybara [30]
travers le DOM en mobilisant lrsquointerface COM Il prend en charge drsquoautre part les expressions
XPath pour trouver les eacuteleacutements HTML sur une page et gegravere les pop-up (fenecirctres contextuel
du navigateur) en les interceptant et les rendant disponibles pour lrsquointeraction Watij peut
deacutetecter la fin du chargement drsquoune page en cours de chargement Watij dispose drsquoun ensemble
relativement riche drsquoAPI pour lrsquoeacutecriture de scripts de simulation La connexion agrave un site Web
exige agrave chaque fois des informations tel que le nom de lrsquoutilisateur et le mot de passe (page
de connexion (login) de Yahoo figure 34) Les tacircches manuelles demandeacutees dans ce cas agrave
lrsquoutilisateur sont les suivantes
1 Afficher une fenecirctre de navigateur
2 Mettre lrsquoURL correcte pour ouvrir cette page
3 Attendre que la page se charge et se stabilise
4 Taper le nom drsquoutilisateur dans le champ ID
5 Taper le mot de passe
6 Cliquer sur le bouton Connexion
Le code approprieacute pour automatiser les tests fonctionnels de ces eacutetapes en utilisant Watij est
donneacute dans la figure 33
67
IE ie = new IE()iestart(wwwmailyahoocom)ietextField(SymbolFactoryidusername)set(ouss)ietextField(SymbolFactoryidpasswd)set(ber2017)iebutton(SymbolFactoryidsave)click()
Figure 33 ndash Exemple drsquoutilisation de Watij [71]
Figure 34 ndash Page de connexion (login) de Yahoo [71]
68
public class WebspecDemoTest
WebSpec spec
Beforepublic void setup()spec = new WebSpec()safari()
Afterpublic void tearDown()specbrowser()close()
Testpublic void testSearchWikipedia() throws Exception specopen(httpdewikipediaorgwikiWikipediaHauptseite)
specfindinput()withid(searchInput)setvalue(Softwaretest)specfindbutton()withid(searchButton)click()assertEquals(Softwaretest specfindh1()withid(firstHeading)getinnerText())
specfinda()withinnerText(Quality)click()assertEquals(Softwarequalitat specfindh1()withid(firstHeading)getinnerText())
Testpublic void testOpenGoogle() throws Exception specopen(httpwwwgooglede)specjquery(input[name=rsquoqrsquo])setvalue(Testing)specfindinput()withname(btnG)click()assertTrue(specfinddiv()withid(res)finda()getinnerText()
startsWith(Softwaretesting))
Figure 35 ndash Exemple simple drsquoun test JUnit Watij WebSpec [7]
69
313 SAHI
Sahi est un outil open source drsquoautomatisation et de test drsquoapplications web En tant qursquooutil
drsquoautomatisation Sahi offre la possibiliteacute drsquoenregistrer et de lire des scripts Il prend en charge
Java et JavaScript Mecircme si SahiScript ressemble agrave JavaScript il nrsquoest pas exeacutecuteacute comme le
JavaScript normal dans le navigateur Lrsquoideacutee de base du fonctionnement de Sahi est deacutecrite
ci-dessous
les parties centrales de Sahi montreacutes dans la figure 37 incluent le serveur proxy Sahi et
le moteur JavaScript Les reacuteponses HTML qui transitent par le proxy sont modifieacutees de
telle sorte que JavaScript soit injecteacute au deacutebut et agrave la fin de la reacuteponse Cela permettra au
navigateur drsquoenregistrer et de lire les scripts et de communiquer avec le proxy en cas de
besoin En plus de la gestion des demandes de pages du navigateur Sahi gegravere eacutegalement les
commandes personnaliseacutees lieacutees agrave lrsquoenregistrement agrave la lecture etc envoyeacutees par celui-ci
Les fonctionnaliteacutes propres de Sahi font de lui un bon support des fichiers de base de donneacutees
supportant JavaScript AJAX ainsi que les API simples Outre ses fonctionnaliteacutes normales
agrave lrsquoeacutegard de la prise en charge de laquo ant raquo(lrsquooutil logiciel) Du fait que ses API ne deacutependent
pas beaucoup de la structure HTML le controcircleur Sahi (IDE) peut ecirctre utiliseacute dans diffeacuterents
navigateurs Sahi qui nrsquoutilise pas XPath renferme des API tels que _ near _in etc
lrsquoaidant agrave trouver un eacuteleacutement par rapport agrave un autre laquo SahiScript raquo est fondeacute sur JavaScript
Il est analyseacute par Sahi et exeacutecuteacute par le moteur JavaScript rhino La figure 36 illustre un
exemple de constructions (exemple drsquoeacutecriture de conditions) dans Sahi Elles sont identiques agrave
JavaScript hormis le $ obligatoire utiliseacute dans les variables
De plus tous les outils mentionneacutes ci-dessus (agrave lrsquoexception de Sahi) neacutecessitent un plugin
speacutecifique au navigateur pour fonctionner et ne supportent donc qursquoune poigneacutee de navigateurs
en geacuteneacuteral les laquo Big Five raquo (Firefox Safari IE Opera et Chrome) Cependant la part de marcheacute
70
Comparer des valeurs normalesif ($username == PartnerUser)
_click(_link(Partner Login))
Comparer avec les attributs du navigateur exposeacutes par Sahiif (_getText(_div(page_type)) == Partner Page)
_click(_link(Partner Login))
Comparaison avec les attributs du navigateur NON exposeacutes par les fonctions inteacutegreacutees de Sahi en utilisant _fetchif (_fetch(_link(0)href) == httpsahicoin)
_click(_link(Partner Login))
Comparaison avec les attributs du navigateur NON exposeacutes par les fonctions inteacutegreacutees de Sahi en utilisant _conditionif (_condition(_link(0)href == httpsahicoin))
_click(_link(Partner Login))
Figure 36 ndash Exemple de Sahi script [18]
Figure 37 ndash Architecture de Sahi (figure tireacutee de [21])
71
des navigateurs autres que ceux-ci eacutequivaut agrave 20 et srsquoeacutelegraveve agrave 63 pour les appareils autres
que les ordinateurs de bureau (tablettes consoles et mobiles) 6 En dehors de Sahi ces outils
de test nrsquoatteignent pas plus des trois quarts du marcheacute et pour certains seulement 25 pour
les appareils autres que les ordinateurs de bureau Par conseacutequent lrsquoaffirmation selon laquelle
laquo la plupart des utilisateurs raquo sont pris en charge par eux est agrave peu pregraves non fondeacutee
32 APPROCHE VISUELLE
Pour deacuteceler les deacutefauts dans la mise en page lrsquooutil principal deacuteployeacute par ce genre de
techniques est geacuteneacuteralement la vision par ordinateur Ces derniegraveres consistent entre autres en
la deacutelimitation des bordures des eacuteleacutements par la deacutetection des contours et en la deacutecouverte des
changements par le calcul de la diffeacuterence entre deux captures drsquoeacutecran dont les couleurs du
texte des arriegravere-plans seront compareacutees pour repeacuterer le texte illisible Au lieu drsquoagir sur des
informations speacutecifiques agrave la mise en page telles que la taille et la position des eacuteleacutements ces
techniques sont baseacutees sur la comparaison des captures drsquoeacutecran pixel par pixel Dans ce cas
les erreurs sous la forme drsquoune capture drsquoeacutecran sont signaleacutees et clairement marqueacutees
321 WEBSEE
Certains travaux ont eacutegalement eacuteteacute reacutealiseacutes sur lrsquoutilisation des techniques drsquoanalyse drsquoimage
pour identifier les problegravemes de mise en page [69] WebSee [58] est en particulier un outil
impleacutementeacute en Java qui utilise plusieurs bibliothegraveques tierces pour impleacutementer certains des
algorithmes speacutecialiseacutes Il applique des techniques du domaine de la vision par ordinateur pour
analyser la repreacutesentation visuelle des pages Web pour deacutetecter automatiquement et localiser
les eacutechecs de preacutesentation WebSee identifie les eacutechecs de preacutesentation puis deacutetermine les
6 En date de feacutevrier 2014 tel que reacutecupeacutereacute sur StatCounter httpgsstatcountercom
72
eacuteleacutements dans la source HTML de la page qui pourraient ecirctre responsables des eacutechecs observeacutes
en comparant la repreacutesentation visuelle de la page Web rendue sous test et son apparence
drsquoorigine (oracle)
A cette fin WebSee prend en entreacutee le code HTMLCSS de la page agrave analyser et un oracle
(une image) du rendu attendu de la page Un ensemble de diffeacuterences entre la page rendue
et lrsquoimage de reacutefeacuterence est calculeacute et ces diffeacuterences sont ensuite regroupeacutees en groupes
susceptibles de repreacutesenter diffeacuterents deacutefauts sous-jacents dans la page Une deuxiegraveme phase
de traitement tente drsquoidentifier les eacuteleacutements HTML correspondant aux pixels de diffeacuterence
qui sont ensuite ordonneacutes par une meacutetrique de prioriteacute et envoyeacutes agrave lrsquoutilisateur La figure
38 montre les diffeacuterentes phases de lrsquoapproche La premiegravere entreacutee est la page web (P) qui
devrait ecirctre analyseacute pour deacuteterminer les deacutefaillances de preacutesentation La forme de P est une
URL qui pointe vers soit un emplacement sur le reacuteseau ou drsquoun systegraveme de fichiers ougrave tous les
fichiers HTML CSS JavaScript et les fichiers meacutedias de P sont accessibles
La deuxiegraveme entreacutee est lrsquooracle (O) qui speacutecifie les proprieacuteteacutes drsquoexactitude visuels de P La
forme de O est une image qui peut ecirctre soit une maquette ou une capture drsquoeacutecran drsquoune version
correcte de P
La troisiegraveme entreacutee est un ensemble de reacutegions speacuteciales (SR) deacutefinissant des zones de O qui
contiendront du texte dynamique des annonces etc qui deacutefinissent les reacutegions dynamiques
communes dans les applications web modernes Les reacutegions speacuteciales fournissent un meacuteca-
nisme pour permettre aux deacuteveloppeurs de speacutecifier de telles reacutegions qui devraient ecirctre traiteacutees
speacutecialement
Lrsquoapproche comporte trois phases La premiegravere phase est la phase de la deacutetection elle compare
les repreacutesentations visuelles de P et O pour deacutetecter un ensemble de diffeacuterences soit dans
les reacutegions speacuteciales ou dans les autres parties de la page web Lrsquoensemble des diffeacuterences
73
identifieacute est regroupeacutees ensuite en groupes qui sont susceptibles de repreacutesenter des deacutefauts
sous-jacents dans P Pour ce faire WebSee exploite Selenium WebDriver pour prendre des
captures drsquoeacutecran et il exploite la bibliothegraveque laquo pdiff raquo qui est une bibliothegraveque perceptuelle
de diffeacuterenciation drsquoimage pour comparer les images et calculer les diffeacuterences Lrsquoalgorithme
de regroupement (clustering) DBSCAN (Density Based Spatial Clustering of Applications
with Noise) est utiliseacute pour regrouper les pixels de diffeacuterences (dbscan est un algorithme
impleacutementeacute dans la bibliothegraveque Apache Commons Math3)
La deuxiegraveme phase est la phase de localisation elle analyse une carte de rendu de P pour
identifier lrsquoensemble des eacuteleacutements HTML qui deacutefinissent les pixels de chaque ensemble
de diffeacuterences en cluster Pour cette eacutetape WebSee tire parti de la mise en œuvre de la
bibliothegraveque R-tree [50] et Selenium WebDriver pour extraire des informations de deacutelimitation
de rectangles
Enfin la troisiegraveme phase est la phase du traitement de lrsquoensemble du reacutesultat elle priorise
lrsquoensemble des eacuteleacutements identifieacutes pour chaque grappe et fournit cela comme une sortie pour
le deacuteveloppeur 39 La capaciteacute de recherche de sous-image pour lrsquoheuristique en cascade est
fournie par OpenCV
322 FLB (FIGHTING LAYOUT BUGS)
Une combinaison de lrsquoinjection CSS avec des techniques de diffeacuterentiation drsquoimage est
preacutesenteacutee par Tamm dans une preacutesentation Tech Talk de Google [69] en tant que moyen pour
deacutetecter quelle partie drsquoun site web est du texte et si elle chevauche drsquoautres eacuteleacutements frontiegraveres
Lrsquoapproche colore tout le texte sur une page Web en noir puis en blanc tout en prenant des
captures drsquoeacutecran entre les deux comme le montre la figure 310 Les parties de lrsquoimage qui sont
du texte sont localiseacutees en diffeacuterant les deux images Les lignes verticales et horizontales des
74
Figure 38 ndash Le fonctionnement geacuteneacuteral de lrsquooutil drsquoanalyse WebSee
Figure 39 ndash Outputs de WebSee eacuteleacutements HTML deacutefectueux
75
eacuteleacutements dans lrsquoimage reacutesultante sont deacutecouvertes via des techniques baseacutees sur le traitement
drsquoimage Une comparaison de ces lignes avec les eacuteleacutements de texte deacutecouverts agrave lrsquoeacutetape
preacuteceacutedente permet de deacuteterminer les cas ougrave le texte chevauche les bordures des eacuteleacutements La
mecircme technique permet aussi de deacuteterminer si les eacuteleacutements de texte ont le contraste approprieacute
agrave leur arriegravere-plan
Cependant cette technique ne fonctionne que pour le texte et drsquoautres eacuteleacutements qui peuvent
facilement ecirctre identifieacutes en utilisant des techniques baseacutees sur le traitement drsquoimage pour la
reconnaissance drsquoobjets Le champ drsquoapplication est petit car il se concentre exclusivement
sur le texte pour le chevauchement des eacuteleacutements
323 PHANTOMCSS
PhantomCSS [20] est un framework de test drsquointerface graphique open source qui possegravede la
capaciteacute de situer les changements drsquoune iteacuteration agrave une autre par des algorithmes diffeacuterant sur
deux images Drsquoautre part il permet drsquoexclure certaines parties de lrsquointerface graphique du
test Les pages Web susceptibles drsquoafficher des donneacutees non controcircleacutees par le deacuteveloppeur et
des eacuteleacutements tels que des annonces Web des donneacutees utilisateur des banniegraveres animeacutees des
images et du texte trouvent dans ces caracteacuteristiques un instrument beacuteneacutefique Le deacuteveloppeur
dans ce cas est obligeacute de speacutecifier manuellement les parties de lrsquointerface graphique non
concerneacutees par les tests en nommant lrsquoeacuteleacutement en question ou le speacutecifiant ses coordonneacutees x
et y
76
Figure 310 ndash Exemple de traitement drsquoimage avec FLB (figure tireacutee de [63])
77
324 SIKULI
Un autre framework drsquoautomatisation est Sikuli [39] qui identifie et manipule les controcircles
de lrsquointerface graphique dans une page web en utilisant la recherche par image (sub-image
searching) Les captures drsquoeacutecran constituent la base de cette approche visuelle pour la recherche
et lrsquoautomatisation des interfaces utilisateurs Elle permet aux utilisateurs
mdash de prendre une capture drsquoeacutecran drsquoun eacuteleacutement de lrsquointerface graphique (comme un bouton
de la barre drsquooutils une icocircne ou une boicircte de dialogue)
mdash drsquointerroger un systegraveme drsquoaide en faisant appel agrave la capture drsquoeacutecran au lieu du nom de
lrsquoeacuteleacutement
mdash de fournir eacutegalement une API de script visuel pour automatiser les interactions de
lrsquointerface graphique par lrsquointermeacutediaire des modegraveles de capture drsquoeacutecran pour diriger
les eacuteveacutenements de la souris et du clavier
Dans lrsquoexemple montreacute dans la figure 311 le bouton de fermeture doit effacer le contenu de la
zone de texte ainsi que lui-mecircme Supposons que lrsquointerface graphique soit deacutejagrave dans un eacutetat
qui contient un laquo 5 raquo au deacutebut nous trouvons la zone de texte bleue sur lrsquoeacutecran et stockons la
reacutegion correspondante qui a la plus grande similariteacute dans la zone bleue Ensuite apregraves avoir
cliqueacute sur le bouton de fermeture deux assertNotExist sont utiliseacutes pour veacuterifier la disparition
dans la zone bleue [39]
325 APPLITOOLS
La segmentation pure de lrsquoimage des pages Web et la comparaison visuelle pixel par pixel
sont agrave lrsquoorigine de lrsquooutil commercialiseacute AppliTools Eyes [2] qui offre une interaction des
scripts de test creacutees par lrsquoutilisateur et son application Dans cet outil le serveur Web est
78
Figure 311 ndash Exemple drsquoutilisation de Sikuli (figure tireacutee de [39])
chargeacute de teacuteleacutecharger les captures drsquoeacutecran en appliquant un algorithme de diffeacuterence drsquoimage
entre lui et une capture drsquoeacutecran preacuteceacutedente La diffeacuterence entre les deux images est traduite par
AppliTools par une deacutetection des reacutegressions dans une mise en page GUI Ces changements
dans une interface Web sont exploiteacutes par le deacuteveloppeur pour actualiser lrsquoimage de base dans
le cas ougrave le changement eacutetait intentionnel
Cependant cette approche est orienteacutee vers la deacutetection de bugs de type statique de chevau-
chement ou de deacutebordement des eacuteleacutements dans un document et actuellement ne supporte pas
la veacuterification de modegraveles temporels agrave travers plusieurs instantaneacutes de la mecircme page De plus
lrsquoapproche geacutenegravere beaucoup de faux positifs si la page rendue contient du texte leacutegegraverement
diffeacuterent de lrsquoimage de reacutefeacuterence Crsquoest le cas lorsque par exemple la fenecirctre du navigateur a
des dimensions diffeacuterentes et que le texte srsquoeacutecoule diffeacuteremment (mais pas neacutecessairement
incorrectement) par rapport agrave lrsquoimage Pour reacutesoudre ce problegraveme lrsquoutilisateur doit deacutefinir
manuellement pour chaque oracle ce que lrsquoon appelle des reacutegions dynamiques qui devraient
ecirctre ignoreacutees par le systegraveme lors de lrsquoanalyse de la page
79
33 APPROCHE DEacuteCLARATIVE
Les techniques dans cette derniegravere famille fonctionnent directement sur des informations sur
la mise en page Elles peuvent obtenir des informations sur les eacuteleacutements (position largeur
et hauteur) impliqueacutes dans lrsquointerface graphique que ce soit par analyse drsquoimage ou par
laquo siphonnage raquo (scraping) de lrsquointerface graphique Crsquoest drsquoailleurs ce que ces techniques ont
en commun La maniegravere de relier les diffeacuterents eacuteleacutements de mise en page les uns aux autres
ainsi que les valeurs de leurs paramegravetres de mise en page sont indiqueacutes par les entreacutees de ces
approches qui ne sont pas tant un script que des documents deacuteclaratifs
Les assertions opeacutereacutees sur lrsquointerface graphique peuvent par exemple ecirctre de la forme laquo lrsquoeacuteleacute-
ment 1 est-il situeacute agrave gauche de lrsquoeacuteleacutement 2 raquo ou laquo lrsquoeacuteleacutement 1 a-t-il une largeur infeacuterieure
agrave lrsquoeacuteleacutement 2 raquo Certaines de ces techniques ont des langages speacutecialiseacutes deacutecrivant des
assertions comme celles-ci
Les speacutecifications deacuteclaratives des interfaces utilisateurs ont fait lrsquoobjet de beaucoup de
recherches dans le passeacute Les premiegraveres tentatives incluent le systegraveme MASTERMIND qui
utilise un langage de modeacutelisation baseacute sur CORBA [67] drsquoautres approches incluent le
modegravele de mise en page drsquoAuckland [57] Adobe Adam et Eve [66] et les modegraveles de proprieacuteteacutes
[57]
331 MASTERMIND
Dans MASTERMIND le deacuteveloppeur de lrsquointerface utilisateur doit creacuteer des modegraveles de tacircche
(task model) drsquoapplication (domaine) et de preacutesentation Le modegravele drsquoapplication est speacutecifieacute
agrave lrsquoaide du langage de deacutefinition drsquointerface CORBA (IDL) Le modegravele de tacircche preacutesente les
tacircches de lrsquoutilisateur final dans une structure hieacuterarchique et comporte les informations de
80
commande neacutecessaires pour controcircler lrsquointerface utilisateur lors de lrsquoexeacutecution Le modegravele de
preacutesentation deacutecrit la disposition de lrsquointerface utilisateur y compris les affichages statiques
et dynamiques Il permet la speacutecification des mises agrave jour automatiques de preacutesentation
lorsque les donneacutees drsquoapplication ou le contexte de preacutesentation changent En outre il integravegre
des principes de conception graphique afin de donner un soutien complet au concepteur de
dialogue
332 AUCKLAND LAYOUT MODEL (ALM)
Le modegravele de mise en page drsquoAuckland (ALM) est une technique impleacutementeacute pour laquo NET raquo
Java et Haiku permettant de speacutecifier une mise en page 2D Elle est utiliseacutee pour organiser les
controcircles dans une interface graphique Le modegravele permet la speacutecification de contraintes baseacutees
sur lrsquoalgegravebre lineacuteaire Il calcule une disposition optimale en utilisant la programmation lineacuteaire
Les eacutegaliteacutes et les ineacutegaliteacutes lineacuteaires peuvent ecirctre speacutecifieacutees sur les tabulations horizontales et
verticales qui sont des lignes virtuelles formant une grille dans laquelle tous les eacuteleacutements de
lrsquointerface graphique sont aligneacutes [57]
Lrsquoexemple dans la figure 312 montre la maniegravere de disposer trois boutons en mobilisant
trois zones Les boutons ont deacutejagrave eacuteteacute ajouteacutes agrave la fenecirctre mais ils nrsquoont pas eacuteteacute arrangeacutes Leur
emplacement et leur taille sont deacutetermineacutes par la speacutecification ALM (figure 313) Quelque
soit le redimensionnement de la fenecirctre les deux colonnes auront toujours la mecircme largeur et
les deux lignes la mecircme hauteur en raison de la lineacuteariteacute des deux contraintes
81
Figure 312 ndash Exemple avec Auckland (figure tireacutee de [1])
LayoutSpec ls = new LayoutSpec ()XTab x1 = lsAddXTab ()YTab y1 = lsAddYTab ()
lsAddArea (lsLeft lsTop x1 y1 bouton1)lsAddArea (x1 lsTop lRight y1 bouton2)lsAddArea (lsLeft y1 lsRight lsBottom bouton3)
donne la mecircme largeur aux deux colonnes et la mecircme hauteur aux deux rangeacuteeslsAddConstraint (nouveau double [] 2 -1 nouvelle variable [] x1 lsRight
OperatorTypeEQ 0)lsAddConstraint (nouveau double [] 2 -1 nouvelle variable [] y1 lsBottom
OperatorTypeEQ 0)
Figure 313 ndash Une simple speacutecification avec Auckland [1]
82
333 ADOBE ADAM ET EVE
ASL (Adobe Source Libraries) est un projet au sein du Adobe Software Technology Lab
(STLab) Crsquoest un ensemble de bibliothegraveques de composants logiciels rendu disponible sous
licence Open Source par Adobe Systems permettant de deacutefinir des algorithmes sous forme
deacuteclarative Les deux premiegraveres bibliothegraveques significatives dans ASL sont la bibliothegraveque
de modegravele de proprieacuteteacutes (Adam) et la bibliothegraveque de modegravele de mise en page (Eve) dont
les composants permettent de modeacuteliser lrsquoapparence et le comportement drsquoune interface
dans une application logicielle Adam consiste en un solveur et un langage deacuteclaratif pour
deacutecrire les contraintes et les relations sur une collection de valeurs qui sont geacuteneacuteralement
les paramegravetres drsquoune commande drsquoapplication (une fonction) Adam fournit la logique qui
controcircle le comportement drsquoune interface Humaine (IH) Il est similaire dans son concept agrave une
feuille de calcul ou agrave un gestionnaire de formulaires Les valeurs sont deacutefinies et les valeurs
deacutependantes sont recalculeacutees Adam procure des fonctionnaliteacutes pour reacutesoudre les valeurs
interdeacutependantes mais il ne constitue pas un systegraveme de contrainte geacuteneacuteral Eve consiste
en un solveur et un langage deacuteclaratif pour la construction drsquoune IH Le solveur de mise en
page prend en compte une description riche des eacuteleacutements de 14 interfaces pour obtenir une
disposition de haute qualiteacute rivalisant avec ce qui peut ecirctre reacutealiseacute avec le placement manuel
Une seule description suffit pour plusieurs plateformes et langages OS Eve a eacuteteacute deacuteveloppeacutee
pour fonctionner avec Adam il peut cependant aussi ecirctre utiliseacutee seule Adam et Eve peuvent
ecirctre inteacutegreacutees dans un certain nombre drsquoenvironnements Ils ont la faculteacute de fonctionner
ensemble ou indeacutependamment mais ils doivent ecirctre combineacutes avec drsquoautres installations
pour construire une application Parmi les exemples typiques drsquointerfaces utilisateur effectuant
la synthegravese de paramegravetres de commande la boicircte de dialogue laquo Enregistrer sous raquo dans le cas
drsquoenregistrement drsquoun fichier image (figure 314) Elle se compose drsquoun champ de texte pour
entrer le nom du fichier un menu de types de fichiers et des curseurs offrant deux possibiliteacutes
83
Figure 314 ndash Exemple drsquoune boicircte de dialogue pour enregistrer un fichier image
pour configurer la compression lors de lrsquoenregistrement dans un format qui le prend en charge
Les valeurs des curseurs sont lieacutees par une relation exprimant le compromis entre le taux de
compression et la qualiteacute de lrsquoimage
La boicircte de dialogue aide lrsquoutilisateur agrave syntheacutetiser les paramegravetres drsquoune commande drsquoenre-
gistrement de fichier La figure 315 montre une speacutecification pour cette tacircche de synthegravese de
paramegravetres de commande eacutecrite dans le langage deacuteclaratif speacutecifique de laquo Adam raquo Dans 315
les sections laquo interface raquo laquo output raquo et laquo invariant raquo deacuteclarent les variables ou les proprieacuteteacutes
du modegravele de proprieacuteteacutes Les variables drsquointerface peuvent ecirctre mises agrave jour par un client du
modegravele de proprieacuteteacute par exemple agrave la suite de lrsquointeraction drsquoun utilisateur avec un widget
drsquointerface utilisateur Les valeurs des variables de sortie (output) constituent le reacutesultat de la
synthegravese des paramegravetres de commande La valeur (booleacuteenne) des variables invariantes indique
si un ensemble de variables satisfait une condition donneacutee La section laquo logique raquo dans 315
deacutefinit toujours les deacutependances et les regravegles de calcul entre les variables Le langage pour
ces calculs est le langage drsquoexpression ASL qui peut faire des appels aux fonctions externes
84
sheet save image file interface
file name file type rdquobmprdquocompression ratio 100image quality 100
logicrelate compression ratio lt== 100 - 4 x (100 - image quality)image quality lt== 100 - (100 - compression ratio) 4
outputresult lt== (file type == rdquojpegrdquo) type file type name file name ratio compression ratio type file type name file name
invariant check name lt== file name 6= rdquo rdquo
Figure 315 ndash Une simple speacutecification deacuteclarative dans le langage Adam du modegravele de proprieacuteteacutepour le dialogue dans Figure314 [56]
enregistreacutees (C ++) et peut ainsi effectuer des actions arbitraires La tacircche du programmeur de
lrsquoapplication est de deacutefinir ces calculs appeleacutes meacutethodes et qui sont exeacutecuteacutees est controcircleacutees
par le modegravele de proprieacuteteacutes
Le langage laquo Eve raquo peut ecirctre utiliseacute pour speacutecifier la disposition et la qualiteacute de preacutesentation
des eacuteleacutements drsquointerface ainsi que les liaisons entre les widgets dans lrsquointerface utilisateur et
les valeurs dans le modegravele de proprieacuteteacute La speacutecification de disposition pour le dialogue de la
figure 314 apparaicirct dans la figure 316
Nous allons cependant les rejeter ainsi que beaucoup drsquoautres langages de balisage GUI
(QML XAML) car ils visent agrave geacuteneacuterer des interfaces baseacutees sur des contraintes et ne peuvent
pas ecirctre utiliseacutes comme des assertions agrave tester de plus ils se concentrent principalement sur
la reacutesolution de contraintes lineacuteaires relatives agrave la taille et au placement des eacuteleacutements dans un
formulaire
85
layout save image file view dialog(name rdquoSave Image Asrdquoplacement place columnspacing 6child horizontal align fill) edit text(bind file name name rdquoFile namerdquo)popup(bind file type name rdquoSave as typerdquo items [
name rdquoWindows bitmap (bmp)rdquo value rdquobmprdquo name rdquoJPEG (jpeg)rdquo value rdquojpegrdquo
])row()
column(child horizontal align right) label(name rdquoCompression ratiordquo)label(name rdquoImage qualityrdquo)
column(horizontal align fill child horizontal align fill)
slider(bind compression ratioformat first 1 last 100 interval 1 )
slider(bind image qualityformat first 1 last 100 interval 1 )
row(horizontal align right) button(name rdquoSaverdquo action ok bind result
default true)button(name rdquoCancelrdquo action cancel)
Figure 316 ndash Une simple speacutecification avec Eve [56]
86
Pour montrer pourquoi les langages de geacuteneacuteration de GUI ne sont pas approprieacutes consideacute-
rons lrsquoexemple simple de CSS Comme nous lrsquoavons vu plus haut CSS exprime agrave quoi les
eacuteleacutements devraient ressembler (suggestions) mais pas comment ils vont lrsquoecirctre Consideacuterez les
deacuteclarations de style suivantes dans le cas ougrave un eacuteleacutement div2 est imbriqueacute dans div1
div1 width 200px div2 width 300px
Il nrsquoest pas possible avec CSS drsquoaffirmer que le contenu de div1 ne devrait jamais ecirctre plus
large que sa propre largeur deacuteclareacutee Si tel est le cas le navigateur peut soit deacutevelopper la boicircte
de lrsquoeacuteleacutement (sans tenir compte de sa deacuteclaration) soit afficher les eacuteleacutements en dehors de son
conteneur (un problegraveme dont nous avons beaucoup parleacute dans la section 22) La seule solution
consiste pour le concepteur du document CSS agrave srsquoassurer que la largeur deacuteclareacutee de tous les
eacuteleacutements qui seront contenus dans div1 est infeacuterieure agrave 200 pixels En revanche une proprieacuteteacute
deacuteclarative pourrait facilement imposer agrave lrsquoexeacutecution que la largeur de div1 est toujours de
200 pixels
On pourrait argumenter que cela peut aussi ecirctre veacuterifieacute en analysant statiquement le document
HTML avec le fichier CSS (bien qursquoaucun travail apparenteacute ne semble reacutepondre agrave cette
question) Il y a cependant des cas ougrave ce nrsquoest mecircme pas possible Si nous supprimons la
deacuteclaration de div2 dans lrsquoexemple ci-dessus mais que div2 contient une image de 300 pixels
de large il est impossible de deacutecouvrir que la proprieacuteteacute deacutesireacutee nrsquoest pas satisfaite en regardant
simplement le CSS
En guise drsquoexemple final consideacuterons le code suivant qui stipule que les eacuteleacutements de certains
menus doivent ecirctre placeacutes verticalement et que leur taille est fixe
menu li float left
87
width 200pxheight 50px
Rien ne permet au concepteur de speacutecifier que tous les eacuteleacutements doivent toujours ecirctre sur la
mecircme ligne (c-agrave-d Avoir la mecircme position top) (mecircme si la valeur de top est deacutefinie) Ce
ne sera pas le cas si la fenecirctre contenant est redimensionneacutee suffisamment petite pour que les
eacuteleacutements puissent flotter en dessous Dans un tel cas il faut effectivement rendre la page dans
un navigateur avec ses dimensions reacuteelles pour deacutecouvrir la preacutesence du problegraveme
334 GALEN FRAMEWORK
Galen Framework [10] est une bibliothegraveque de tests drsquointerfaces graphiques pour tester les
mises en page drsquoapplications web Le comportement mutuel entre les diffeacuterents eacuteleacutements
drsquoune interface graphique et le type de paramegravetres de mise en page valides sont deacutecrits
par des descriptions de mise en page creacutees par lrsquoutilisateur La veacuterification de la validiteacute
de lrsquoemplacement et la taille des eacuteleacutements est reacutealiseacutee par un test oracle en utilisant ces
descriptions
Pour deacuteclarer divers aspects de la position et de la taille drsquoun eacuteleacutement par rapport agrave drsquoautres
eacuteleacutements ou en valeurs absolues le deacuteveloppeur de test utilise un langage de description de
test personnaliseacute fourni par le framework Galen Galen est baseacute sur un outil drsquoautomatisation
de navigateur web appeleacute Selenium qui permet de creacuteer des scripts automatiseacutes simulant les
entreacutees de lrsquoutilisateur Il permet eacutegalement de speacutecifier des plages de valeurs acceptables La
figure 317 montre un exemple de ce agrave quoi ressemble une speacutecification Galen [9]
Le test de reacutegression des mises en page drsquoapplications web est entiegraverement automatiser par
le framework Galen en combinant ces deux technologies Des informations preacutecises sur les
88
valeurs valides pour les eacuteleacutements de lrsquointerface eacutetant neacutecessaires au fichier de speacutecification
requis par le framework Galen cette opeacuteration peut ecirctre coucircteuse et rendre la modification
drsquoune interface graphique plus difficile
Un regard sur le langage de speacutecification de Galen indique que le travail requis par le deacute-
veloppeur de test est similaire agrave la speacutecification de lrsquointerface graphique elle-mecircme Les
speacutecifications de Galen et la conception GUI elle-mecircme sont effectueacutees avec agrave peu pregraves la
mecircme freacutequence Lrsquoinconveacutenient est la flexibiliteacute reacuteduite et lrsquoaugmentation des coucircts Cepen-
dant lrsquoapproche permet une grande preacutecision lors de la reacutealisation des tests de reacutegression et la
veacuterification de la fonctionnaliteacute de la conception sur diffeacuterentes tailles drsquoeacutecran
335 ITARRAY AUTOMOTION
Le framework Automotion drsquoITArray [70] est similaire au framework Galen La diffeacuterence
par rapport agrave beaucoup drsquoautres frameworks est que la bibliothegraveque drsquoassertions permet
reacuteellement drsquoaffirmer si la position et lrsquoalignement des eacuteleacutements sont lieacutes les uns aux autres
avec des appels tels que is ElementInside (otherElement) ou areElementsAligned
(List) La faccedilon dont ces tests sont speacutecifieacutes est encore tregraves verbeuse Un exemple de script
Automotion est illustreacute agrave la Figure 318
34 OUTILS RWD
Il est toujours judicieux de tester la conception drsquoun site web sur divers appareils Mais
cette meacutethode classique prend beaucoup de temps et en raison de la varieacuteteacute des dispositifs
disponibles aujourdrsquohui le deacuteveloppeur peut ne pas avoir accegraves agrave tous ces dispositifs Plusieurs
outils ont eacuteteacute deacuteveloppeacutes pour fournir le service permettant drsquoafficher une page dans une
89
Declaring objects with css and xpath locatorsobjects
header css divfusion-secondary-headersw-logo css fusion-logo-link
navigation-links- xpath ul[id=rsquomenu-mainrsquo]li[not((contains(idrsquomobile-menu-itemrsquo)))]nav-menu css divfusion-secondary-main-menufollow-us-box xpath div[contains(classrsquofusion-alertrsquo)][1]
Home Page Tag= Home Page =
This is for Desktopon desktop
Header propertiesheader
inside screen 0px topinside screen 0px leftinside screen 0px right
Logo propertiessw-logo
31 px below the headerbelow header 31pxImage comparison with 2 precision ratioimage file sw-logopng error 5
Each navigation links must be alligned horizontally to each otheritemName -gt Current item and nextItem -gt Next itemforEach [navigation-links-] as itemName next as nextItem
$itemNamealigned horizontally all $nextItem
Navigation menu must be 20px above to the follow us allert boxnav-menu
above follow-us-box 20px
Figure 317 ndash Exemple drsquoune speacutecification Galen [9]
90
boolean result = uiValidatorinit(Scenario name)findElement(rootElement Name of eacuteleacutement we validate)sameOffsetLeftAs(eacuteleacutement Panel 1)sameOffsetLeftAs(eacuteleacutement Button 1)sameOffsetRightAs(eacuteleacutement Button 2)sameOffsetRightAs(eacuteleacutement Button 3)withCssValue(border 2px solid FBDCDC)withCssValue(border-radius 4px)withoutCssValue(color FFFFFF)sameSizeAs(list_eacuteleacutements)insideOf(eacuteleacutement Container)notOverlapWith(eacuteleacutement Other eacuteleacutement)withTopElement(eacuteleacutement 10 15)changeMetricsUnitsTo(ResponsiveUIValidatorUnitsPERCENT)widthBetween(50 55)heightBetween(90 95)drawMap()validate()
Figure 318 ndash Exemple drsquoun script Automotion [70]
fenecirctre personnaliseacutee de tailles variables agrave lrsquoaide drsquoun navigateur Web Cependant ces outils
ne fournissent aucune information autre que le rendu des pages sur diffeacuterentes tailles ce
qui oblige le deacuteveloppeur agrave eacutevaluer la reacuteactiviteacute (responsiveness) du site web manuellement
Mentionnons ici quelques outils speacutecifiques agrave la deacutetection de problegravemes lieacutes au RWD
Avec des fonctionnaliteacutes de recherche intelligente et de reacutevision rapide WebSiteResponsi-
veTest [34] prend en charge tous les principaux navigateurs pour fournir lrsquoaperccedilu exact du
site web sur un peacuteripheacuterique speacutecifique Il faut entrer lrsquoURL drsquoune page Web pour eacutevaluer
rapidement la reacuteactiviteacute En fournissant des reacutesultats preacutecis en quelques secondes lrsquooutil
eacuteconomise beaucoup de temps La convivialiteacute et la compatibiliteacute avec les navigateurs sont
drsquoautres fonctionnaliteacutes qui le rendent attractif par rapport aux autres outils disponibles
Respondr [22] permet de veacuterifier la reacuteactiviteacute en entrant lrsquoURL drsquoun site web En outre
lrsquoappareil pour lequel le site web ou la page Web est testeacute peut eacutegalement ecirctre choisi dans la
91
liste donneacutee Une fois les seacutelections effectueacutees un simple clic sur laquo Go raquo est neacutecessaire pour
recevoir une analyse complegravete du site ou de la page web en donnant lrsquoaffichage sur lrsquoappareil
seacutelectionneacute La page peut ecirctre facilement preacutevisualiseacutee agrave une largeur approprieacutee
Screenfly [27] est un outil de test de compatibiliteacute multi-peacuteripheacuterique qui permet de preacutevisua-
liser les pages Web telles qursquoelles apparaissent sur diffeacuterents appareils Les plus populaires
comprennent les tablettes et autres appareils intelligents tels que Galaxy Tab Apple iPad
Motorola Xoom En outre il prend en charge diffeacuterentes tailles drsquoeacutecran et reacutesolutions Le site
deacutetecte automatiquement si lrsquoURL saisie comporte un site mobile et vous redirige vers celui-ci
Pour basculer entre les reacutesolutions drsquoeacutecran tout ce qursquoil faut faire est de cliquer sur lrsquoicocircne du
type drsquoappareil ou choisir lrsquoappareil qui a la reacutesolution drsquoeacutecran la plus proche
Responsive Web Design Bookmarklet [26] affiche nrsquoimporte quelle page Web dans plusieurs
tailles drsquoeacutecran pour la preacutevisualisation simulant la fenecirctre drsquoaffichage de diffeacuterents peacuteripheacute-
riques Il srsquoagit drsquoun outil de conception Web rapide qui peut ecirctre consulteacute agrave partir drsquoun
ordinateur de bureau pour tester la reacuteactiviteacute de tout site web Il suffit de faire glisser le
bookmarklet au-dessus de la barre des signets (bookmarks) pour obtenir une barre drsquooutils
en haut avec des boutons pour diffeacuterentes reacutesolutions drsquoeacutecran Il ne reste plus qursquoagrave choisir
lrsquoaperccedilu de la page en cours sur diffeacuterentes largeurs drsquoeacutecran de tablettes et de smartphones
ViewPortResizer [31] est eacutegalement un bookmarklet de navigateur qui peut ecirctre utiliseacute avec
nrsquoimporte quel navigateur Web moderne Un outil de navigation convivial ViewPortResizer
est entiegraverement configurable Il permet la seacutelection drsquoune plage initiale de tailles de reacutesolution
drsquoeacutecran et la construction drsquoun bookmarklet personnaliseacute
Responsinator [23] aide les proprieacutetaires de sites agrave avoir une ideacutee de la faccedilon dont leur
site fonctionnera sur les appareils les plus populaires Juste en tapant lrsquoURL du site le site
srsquoaffichera rapidement sur des eacutecrans de diffeacuterent(e)s tailles
92
Le processus de ResponsivePX [24] consiste agrave entrer lrsquoURL du site et utiliser des boutons
pour ajuster la largeur et la hauteur de la fenecirctre drsquoaffichage afin de trouver la largeur exacte
du point drsquoarrecirct en pixels Extrecircmement simple agrave utiliser et agrave ameacuteliorer les fonctionnaliteacutes cet
outil de conception Web aide les concepteurs agrave creacuteer des sites utilisables et reacuteactifs
Froont [8] rend les tests de conception Web reacuteactifs accessibles sans neacutecessiteacutes de compeacutetences
de codage Les conceptions peuvent ecirctre creacutees dans le navigateur avec cet outil En testant
chaque URL speacutecifiquement il teste les conceptions sur de vrais appareils tout de suite
De son cocircteacute ReDeCheck [74] [73] est un outil de test de conception web reacuteactif Il est inspireacute
du graphe drsquoalignement utiliseacute dans X-PERT un concept proposeacute et deacuteveloppeacute par Choudhary
et al [42] ReDeCheck se concentre speacutecifiquement sur les bugs de mise en page causeacutes par
des conceptions reacuteactives il utilise un graphique de mise en page adaptable (RLG) qui tient
compte de lrsquoalignement des eacuteleacutements de la page Web des changements de visibiliteacute et drsquoautres
aspects de la page lorsque la largeur de la fenecirctre varie En tant que tel ReDeCheck peut
seulement veacuterifier un ensemble fixe de problegravemes de mise en page preacutedeacutefinis et ne fournit pas
un langage agrave usage geacuteneacuteral pour exprimer des assertions
35 DISCUSSION SUR LES APPROCHES EXISANTES
Nous allons maintenant discuter quelques limites des approches preacuteceacutedemment preacutesenteacutees
351 INCONVEacuteNIENTS DE LrsquoAPPROCHE DEacuteCLARATIVE
Le deacuteveloppeur de test doit se soumettre aux exigences des descriptionsscripts de test assez
verbeux en deacutecrivant les regravegles de son interface graphique (comment les eacuteleacutements sont-ils
placeacutes les uns par rapport aux autres comment ils devraient se comporter quand la taille de
93
la fenecirctre change etc) de faccedilon plus deacutetailleacutee au point ougrave le script de test devient presque
aussi descriptif que le code de lrsquointerface graphique qursquoil teste A lrsquoinstar des scripts de test
ce problegraveme neacutecessitera des mises agrave jour agrave peu pregraves au mecircme rythme que les modifications
apporteacutees agrave la conception de lrsquointerface graphique
352 LIMITES DES TECHNIQUES VISUELLES
Impossible de comparer des images de diffeacuterentes tailles drsquoeacutecran Le fait drsquoassurer lrsquoeacutega-
liteacute et la validiteacute entre une image de reacutefeacuterence (oracle) et lrsquoimage agrave tester par la diffeacuterence de
couleur de pixel implique que celles-ci ne peuvent pas ecirctre des captures drsquoeacutecran de tailles
drsquoeacutecran diffeacuterentes ce qui exclut lrsquoutilisation de lrsquoimage de reacutefeacuterence agrave partir drsquoune taille
drsquoeacutecran pour veacuterifier la validiteacute de la mise en page sur une taille drsquoeacutecran diffeacuterente La validiteacute
de la mise en page drsquoune application censeacutee fonctionner sur de nombreuses tailles drsquoeacutecran
diffeacuterentes par ces techniques exige drsquoeacutetablir des reacutefeacuterences pour toutes les tailles drsquoeacutecran
Ne fonctionne pas bien avec les donneacutees dynamiques Ces techniques baseacutees sur lrsquoimage
et travaillant sur lrsquoinformation de pixel au lieu du contenu ne donnent des reacutesultats satisfaisants
qursquoavec des donneacutees statiques (parce qursquoon utilise une image de reacutefeacuterence pour faire la
comparaison) Par conseacutequent elles posent un problegraveme majeur Chaque exeacutecution drsquoune
application correspond souvent agrave un affichage du contenu diffeacuterent puisque ces donneacutees sont
geacuteneacuteralement reacutecupeacutereacutees sur un serveur Web ou creacutees par lrsquoutilisateur mdashce qui diminue
fortement lrsquoutiliteacute de ces techniques
Signalent beaucoup de faux positifs Une diffeacuterence dans les valeurs de pixels de deux
captures drsquoeacutecran conseacutecutives peut entre constateacutee notamment si ces captures sont prises
sur des machines diffeacuterentes avec des configurations diffeacuterentes drsquoougrave lrsquoinconveacutenient des
94
Figure 319 ndash Exemple de faux positif avec PhantomCSS
techniques baseacutees sur les diffeacuterences drsquoimages qui sont sujettes agrave la deacuteclaration de faux positifs
comme indiqueacute sur le site web du reacutefeacuterentiel PhantomCSS [20] Ces petites diffeacuterences de
pixels sont parfois faussement signaleacutees par lrsquoalgorithme de test comme des erreurs de mise
en page cependant elles ne le sont pas reacuteellement La figure 319 montre un exemple de ce
cas ougrave nous pouvons observer de petites zones de pixels violets (nous avons marqueacutees ces
petites zones avec des rectangles rouges) ces images ressemblent aux images de base qui
sont entoureacutees de rectangles jaunes En reacutealiteacute ce sont pas des erreurs mais des faux neacutegatifs
rapporteacutes en raison de petites diffeacuterences de pixels dans des rendus diffeacuterents (cela pourrait
ecirctre ducirc agrave lrsquoutilisation de diffeacuterents navigateurs)
En conclusion le tableau 31 donne les grandes lignes de diffeacuterences entre trois outils majeurs
des approches existantes
95
Sahi Selinium Websee
Pas de plugin (so-lution proxy web) Plugin speacutecifique pour chaque navigateur
Configurationspeacutecifique etbibliothegravequestierces pourimpleacutementercertains desalgorithmesspeacutecialiseacutes
Tests fonctionelsdes eacuteleacutements de lapage baseacute sur letrafique HTTP en-registreacute au niveaudu proxy (play-back)
Tests fontionels
Tests de mise enpage en se ba-sant sur une ver-sion de reference(juste pour despages statiques)
Tableau 31 ndash Limites et diffeacuterences entre trois outils majeurs des approches existantes
CHAPITRE 4
DEacuteTECTION DE BUGS DrsquoINTERFACE
Comme nous avons pu le voir une analyse statique du contenu HTML et des deacuteclarations
CSS drsquoune page web nrsquoest pas suffisante pour deacutetecter les bugs drsquointerface citeacutes dans le
deuxiegraveme chapitre de cette thegravese car CSS nrsquoest pas un langage qui peut exprimer des proprieacuteteacutes
normatives pour la mise en page drsquoun document Les deacuteclarations CSS sont juste un ensemble
drsquoinstructions traiteacutees par un moteur de rendu Donner agrave CSS une expressiviteacute prescriptive
impliquerait la possibiliteacute de speacutecifier agrave quoi un eacuteleacutement ne doit pas ressembler ou qursquoune
deacuteclaration de style particulier ne peut pas ecirctre remplaceacutee par drsquoautres constructions ndashce
que le CSS ne fournit pas En outre certains des bugs deacutecrits preacuteceacutedemment impliquent la
comparaison du contenu drsquoun document agrave plusieurs moments dans le temps une chose que
CSS nrsquoest pas eacutevidemment conccedilu pour faire
Par conseacutequent afin drsquoexprimer des proprieacuteteacutes normatives pour le contenu et la mise en page
drsquoune page web un langage compleacutementaire agrave CSS est neacutecessaire Ce langage doit permettre
aux utilisateurs drsquoeacutecrire des proprieacuteteacutes deacuteclaratives sur les styles des eacuteleacutements et de traiter
des eacuteveacutenements quelles que soient les deacuteclarations CSS ou le code cocircteacute client qui ont pu ecirctre
deacuteclareacutees
Pour combler cette neacutecessiteacute dans ce chapitre nous preacutesentons Cornipickle un langage
97
deacuteclaratif permettant drsquoexprimer des proprieacuteteacutes agrave propos du document et des proprieacuteteacutes CSS
drsquoune page On discutera eacutegalement drsquoune impleacutementation drsquoun algorithme permettant de
veacuterifier automatiquement si des eacutenonceacutes du langage sont vrais pour un site web particulier
41 UN INTERPREacuteTEUR POUR LES PROPRIEacuteTEacuteS CORNIPICKLE
Nous deacutecrivons maintenant la mise en œuvre de lrsquointerpreacuteteur pour lrsquoeacutevaluation automatiseacutee
des speacutecifications Cornipickle sur les applications web Cette impleacutementation est composeacutee
drsquoenviron 7 000 lignes de code Java et JavaScript et est disponible sous licence publique
geacuteneacuterale GNU 1 Une videacuteo de lrsquooutil en action sur des exemples simples peut eacutegalement ecirctre
consulteacutee en ligne 2
411 OBJECTIFS DE CONCEPTION
Outre la fonctionnaliteacute principale agrave mettre en œuvre le deacuteveloppement de lrsquooutil a eacuteteacute motiveacute
par un certain nombre drsquoobjectifs de conception importants
Pas de plugins speacutecifiques au navigateur
Tout drsquoabord la solution doit fonctionner sur autant de combinaisons de navigateurs et de
systegravemes drsquoexploitation que possible Ceci exclut explicitement les plugins speacutecifiques au
navigateur (ou limiteacutes par le navigateur) tels que les plugins Chrome les plugins Firefox
ou lrsquoutilisation drsquooutils tels que Selenium WebDriver Pour la mecircme raison la solution ne
doit pas reposer sur la preacutesence de frameworks JavaScript (jQuery Prototype etc) et ecirctre
1 httpsgithubcomliflabcornipickle2 httpyoutube90YitGRRx2w
98
autonome Cela implique que notre outil peut fonctionner dans des combinaisons inhabituelles
(navigateurssystegravemes drsquoexploitation) comme BoatBrowser sur un teacuteleacutephone Android ou
Qupzilla sous Haiku OS
Collecte drsquoinformations cocircteacute client
Deuxiegravemement lrsquoeacutevaluation des speacutecifications doit ecirctre faite en fonction des informations
recueillies sur le client cela eacutecarte la possibiliteacute drsquoeffectuer une eacutevaluation statique de HTML
et CSS du cocircteacute serveur Ceci est obligatoire pour plusieurs raisons Il faut tenir compte du
fait que le standard CSS nrsquoest pas interpreacuteteacute de la mecircme maniegravere par tous les navigateurs Par
exemple CSS stipule que la largeur drsquoun eacuteleacutement nrsquoinclut pas le remplissage mais certaines
versions drsquoInternet Explorer incluent le remplissage dans la largeur et rendent le mecircme eacuteleacutement
avec des dimensions diffeacuterentes
Dans une large mesure la veacuterification des contraintes en examinant uniquement le code
HTML + CSS impliquerait drsquoeacutemuler le moteur de rendu de chaque navigateur compleacuteteacute par
ses laquo bizarreries raquo speacutecifiques pour parvenir agrave un verdict fidegravele
En plus des problegravemes susmentionneacutes toutes les applications que nous avons eacutetudieacutees
contiennent du code cocircteacute client qui peut modifier la disposition drsquoune page apregraves que le
moteur de mise en page a traiteacute les deacuteclarations statiques trouveacutees dans le document HTML
initial et les fichiers CSS traiteacutes au moment du chargement Ce code programmeacute pour ecirctre
exeacutecuteacute lors du chargement de la page remplace complegravetement les deacuteclarations de style que
les fichiers CSS drsquoorigine peuvent initialement deacutefinir Par conseacutequent dans tous les cas il ne
suffit pas drsquoanalyser lrsquoensemble des fichiers HTML et CSS deacutefinis par lrsquoapplication car tout
ce contenu peut ecirctre modifieacute agrave la voleacutee gracircce agrave des interactions avec lrsquoutilisateur une fois la
page chargeacutee
99
Pas drsquointerpreacutetation cocircteacute client
Troisiegravemement lrsquointerpreacutetation des speacutecifications de Cornipickle ne devrait pas ecirctre faite du
cocircteacute des clients Ceci est fait de maniegravere agrave ne pas imposer une charge de calcul excessive
dans le navigateur et permet lrsquoutilisation drsquoun autre langage que JavaScript pour lrsquoimpleacute-
mentation de cette fonctionnaliteacute Plus important encore il permet de geacuterer les proprieacuteteacutes
comportementales impliquant plus drsquoun instantaneacute de page par lrsquooutil En utilisant du code
strictement client un problegraveme survient lorsqursquoun rechargement de page complet se produit
car cela reacuteinitialise lrsquoeacutetat de tout objet JavaScript associeacute agrave cette page Eacutetant donneacute que les
speacutecifications comportementales requiegraverent la sauvegarde des informations du passeacute certains
moyens de preacuteserver ces informations dans le client agrave travers les rechargements de pages
doivent ecirctre conccedilus HTML5 fournit des fonctionnaliteacutes de stockage mais leur utilisation
limiterait la prise en charge des navigateurs (par exemple uniquement pour Opera 115 Safari
4 et IE 9 et plus reacutecents 3)
Interpreacutetation de lrsquoexeacutecution
Enfin il devrait ecirctre possible pour un utilisateur drsquoajouter de supprimer ou de modifier les
speacutecifications eacutevalueacutees par lrsquooutil Cela pose un deacutefi en raison de la construction speacuteciale We
say that qui permet drsquoajouter de nouvelles constructions grammaticales dans le langage de
base Ceci est diffeacuterent des deacutefinitions de fonction ou de preacutedicat habituelles disponibles dans
la plupart des langages ougrave la syntaxe des appels de fonctions est fixe et seuls de nouveaux
identificateurs de fonctions peuvent ecirctre ajouteacutes au moment de lrsquoanalyse Cela a neacutecessiteacute le
deacuteveloppement drsquoun analyseur BNF appeleacute Bullwinkle 4 qui peut accepter de nouvelles regravegles
3 httpwwwhtml5rockscomenfeaturesstorage4 httpsgithubcomsylvainhalleBullwinkle
100
Figure 41 ndash Architecture et interactions de Cornipickle
drsquoanalyse agrave lrsquoexeacutecution mdashcontrairement agrave la plupart des autres analyseurs qui neacutecessitent une
eacutetape de compilation chaque fois que la grammaire change
412 ARCHITECTURE ET SCEacuteNARIO DrsquoUTILISATION TYPIQUE
La combinaison de toutes les exigences dans [51] impose plus ou moins une architecture pour
lrsquooutil Cornipickle ougrave le code cocircteacute serveur prend en charge la collecte et lrsquoeacutevaluation des
speacutecifications (caracteacuteristiques) tandis que le code cocircteacute client agit uniquement comme une
laquo sonde raquo Lrsquointerrogation des informations pertinentes sur lrsquoeacutetat actuel de la page est relayeacutee
vers le serveur pour un traitement ulteacuterieur Cette interaction client-serveur a un avantage
cependant le code cocircteacute client peut ecirctre relativement leacuteger et sans eacutetat (ecirctre remis agrave zeacutero agrave
chaque fois que la page se recharge) comme tout traitement agrave eacutetat qui peut ecirctre fait par le
serveur
La figure 41 montre les interactions avec lrsquooutil Cornipickle Un deacuteveloppeur eacutecrit drsquoabord un
jeu drsquoeacutetats deacuteclaratifs (1) qui sont stockeacutes dans la meacutemoire de Cornipickle (2) En donnant
101
tagname windowwidth 956height 165 children [
tagname pid gowidth 90 children [
tagname CDATA text Hello World
]
]
Figure 42 ndash Une page simple seacuterialiseacutee en JSON
un identifiant unique agrave ce jeu drsquoeacutetats qui peut ecirctre appeleacute dans le code JavaScript agrave ecirctre
inseacutereacute dans lrsquoapplication afin que la sonde peut ecirctre chargeacutee dans chaque page (3-4) cette
addition est geacuteneacuterique et ne diffegravere que dans la chaicircne drsquoidentification Quand une page
de lrsquoapplication doit ecirctre chargeacutee (5) Cornipickle creacutee dynamiquement la sonde JavaScript
correspondant agrave lrsquoensemble drsquoassertions pour les eacutevaluer et les envoyer au client (6-8) Cette
sonde est conccedilue pour signaler un instantaneacute des donneacutees DOM et CSS pertinents sur chaque
eacuteveacutenement deacuteclencheacute par lrsquoutilisateur Quand un tel eacuteveacutenement se produit la sonde recueille
toutes les informations pertinentes sur le contenu de la page (figure 42) et les relaie au serveur
Cornipickle (9) qui les enregistre dans un journal (10-11)
En option des informations sur lrsquoeacutetat actuel des assertions en cours drsquoeacutevaluation (vrai
faux) peuvent ecirctre relayeacutees agrave la sonde (12) Un tableau de bord drsquoanalyse peut reacutecupeacuterer le
journal enregistreacute qui peut ecirctre consulteacute par le deacuteveloppeur pour interroger lrsquoeacutetat de toutes les
102
Figure 43 ndash Une capture drsquoeacutecran de Cornipickle en action
proprieacuteteacutes drsquoentreacutee au deacutebut du processus (13-16)
La figure 43 montre un exemple de Cornipickle en action Dans ce cas la sonde injecteacutee a
inseacutereacute une petite icocircne dans le coin infeacuterieur droit de la fenecirctre qui devient rouge chaque fois
qursquoune proprieacuteteacute est violeacutee Pour contourner le fait que de nombreux navigateurs deacutesactivent
les requecirctes HTTP inter-site Ajax nrsquoest pas utiliseacute pour la communication entre le client et le
serveur La sonde envoie plutocirct ses donneacutees en modifiant lrsquoattribut src drsquoune image de zeacutero
pixel injecteacutee dans la page et en passant les donneacutees collecteacutees en tant que paramegravetres GET de
cette requecircte En sens inverse le serveur relaie les informations via un cookie speacutecialement
encodeacute que la sonde peut interroger peacuteriodiquement De cette faccedilon le serveur Cornipickle
peut reacutesider sur un serveur diffeacuterent de celui de lrsquoapplication testeacutee et avoir toujours une
communication bidirectionnelle ponctuelle avec sa sonde
103
42 LE LANGAGE CORNIPICKLE
Le langage Cornipickle comporte des constructions issues de la logique du premier ordre et de
la logique temporelle lineacuteaire tels que les quantificateurs et les opeacuterateurs temporels et qui
permettent agrave un utilisateur de speacutecifier des relations complexes sur les diffeacuterents eacuteleacutements du
document agrave plusieurs moments dans le temps caracteacuteristique qui est absente dans beaucoup
de langages de script
Cornipickle nrsquoest pas un convertisseur baseacute sur des expressions reacuteguliegraveres entre des fichiers
texte et des commandes de script mais sa grammaire lutte pour le mecircme genre de lisibiliteacute En
particulier pour ameacuteliorer la lisibiliteacute la grammaire de Cornipickle permet drsquoinseacuterer diffeacuterents
mots agrave lrsquointeacuterieur des diffeacuterentes constructions Ces mots nrsquoont aucun effet sur lrsquoanalyse et
lrsquointerpreacutetation des expressions
421 SYNTAXE DU LANGAGE
Dans Cornipickle les proprieacuteteacutes sont exprimeacutees sous forme drsquoassertions sur le contenu et les
attributs drsquoune capture (snapshot) drsquoune page prise agrave un instant donneacute La maniegravere preacutecise par
laquelle ces captures sont prises agrave partir drsquoune application web donneacutee sera deacutetailleacutee plus loin
Nous commenccedilons par une illustration des diffeacuterentes constructions de la grammaire dans le
tableau 41
Seacutelection drsquoeacuteleacutements Les eacuteleacutements de la page sont lrsquouniteacute principale dans Cornipickle ils
sont seacutelectionneacutes afin drsquoexprimer quelques-unes de leurs proprieacuteteacutes Ces proprieacuteteacutes peuvent
ecirctre appliqueacutees agrave tous les eacuteleacutements seacutelectionneacutes ou au moins agrave un
104
〈S〉 = 〈predicate〉 | 〈def-set〉 | 〈statement〉
Eacutenonceacutes Cornipickle
〈statement〉 = 〈foreach〉 | 〈exists〉 | 〈binary-stmt〉 | 〈negation〉| 〈temporal-stmt〉 | 〈userdef-stmt〉 | 〈let〉 | 〈when〉〈binary-stmt〉 = 〈equality〉 | 〈gt〉 | 〈lt〉 | 〈regex-match〉 | 〈and〉 | 〈or〉 | 〈implies〉〈temporal-stmt〉 = 〈globally〉 | 〈eventually〉 | 〈never〉 | 〈next〉 | 〈next-time〉
Logique du premier ordre
〈foreach〉 = For each 〈var-name〉 in 〈set-name〉 ( 〈statement〉 )〈exists〉 = There exists 〈var-name〉 in 〈set-name〉 such that ( 〈statement〉 )〈when〉 = When 〈var-name〉 is now 〈var-name〉 ( 〈statement〉 )〈let〉 = Let 〈var-name〉 be 〈property-or-const〉 ( 〈statement〉 )〈and〉 = ( 〈statement〉 ) And ( 〈statement〉 )〈or〉 = ( 〈statement〉 ) Or ( 〈statement〉 )〈implies〉 = If ( 〈statement〉 ) Then ( 〈statement〉 )〈negation〉 = Not ( 〈statement〉 )
Expressions temporelles
〈globally〉 = Always ( 〈statement〉 )〈never〉 = Never ( 〈statement〉 )〈next〉 = Next ( 〈statement〉 )〈eventually〉 = Eventually ( 〈statement〉 )〈next-time〉 = The next time ( 〈statement〉 ) Then ( 〈statement〉 )
Tableau 41 ndash La grammaire BNF pour Cornipickle (Partie I)
105
Par conseacutequent la seacutelection de lrsquoeacuteleacutement se fait par le biais de la quantification du pre-
mier ordre classique en utilisant lrsquoanglais pour la syntaxe comme For each $x in S
ou There exists $x in S(pour dire chaque $x dans S ou Il existe $x dans S) Dans ces
expressions S deacutesigne soit un seacutelecteur CSS 5 ou un autre ensemble preacuteceacutedemment deacutefini par
lrsquoutilisateur Les seacutelecteurs CSS sont exprimeacutes en utilisant la syntaxe de jQuery $( ) Un
seacutelecteur speacutecial appeleacute CDATA peut ecirctre utiliseacute pour deacutesigner le contenu du texte des nœuds
feuilles dans un arbre DOM (les parties qui composent la page en texte clair) Si $x est une
variable quantifieacutee en utilisant le meacutecanisme deacutecrit ci-dessus on peut acceacuteder au DOM ou aux
attributs CSS de cet eacuteleacutement en utilisant $xrsquos property (ougrave property est lrsquoattribut CSS
rechercheacute) Par exemple la largeur de lrsquoeacuteleacutement srsquoeacutecrirait $xrsquos width
Les attributs de lrsquoeacuteleacutement (qui sont soit des chaicircnes de caractegraveres ou de chiffres) peuvent alors
ecirctre compareacutes en utilisant des connectifs tels que is greater than ou equals le matching
drsquoexpressions reacuteguliegraveres est fait agrave travers le preacutedicat match et lrsquoinclusion de chaicircne est affirmeacutee
par lrsquoassertion contains Des assertions de base sur les eacuteleacutements peuvent eacutegalement ecirctre
combineacutees en utilisant des connecteurs booleacuteens classiques and or if then not
Eacuteveacutenements et opeacuterateurs temporels Dans Cornipickle les eacuteveacutenements deacuteclencheacutes par
lrsquoutilisateur tels que les touches et les clics de souris sont repreacutesenteacutes comme des attributs
sur lrsquoeacuteleacutement qui est la cible de lrsquoeacuteveacutenement Par exemple un eacuteleacutement qui a eacuteteacute cliqueacute
par lrsquoutilisateur posseacutedera momentaneacutement un attribut event avec une valeur click Par
conseacutequent affirmer qursquoun eacuteleacutement $x a eacuteteacute cliqueacute peut ecirctre eacutecrit $xrsquos event is lsquoclickrsquo
Lrsquoinclusion drsquoeacuteveacutenements dans le langage conduit naturellement agrave la notion de seacutequences
de documents de captures instantaneacutees Par conseacutequent Cornipickle fournit des opeacuterateurs
5 Un seacutelecteur CSS est une expression de chemin (path expression) qui deacutefinit les eacuteleacutements drsquoun documentqui font lrsquoobjet drsquoun ensemble donneacute de regravegles Ces expressions sont deacutefinies par une grammaire reacuteguliegraverecomme stipuleacute dans la norme CSS
106
Opeacuterateurs
〈equality〉 = 〈property-or-const〉 equals 〈property-or-const〉| 〈property-or-const〉 is 〈property-or-const〉〈gt〉 = 〈property-or-const〉 is greater than 〈property-or-const〉〈lt〉 = 〈property-or-const〉 is less than 〈property-or-const〉〈regex-match〉 = 〈property-or-const〉 matches 〈property-or-const〉〈constant〉 = 〈number〉 | 〈string〉〈property-or-const〉 = 〈elem-property〉 | 〈constant〉〈number〉 = ˆd+〈string〉 = ˆ[ˆ]
Constructions auxiliaires
〈el-or-not〉 = eacuteleacutement | ε
〈set-name〉 = 〈css-selector〉 | 〈userdef-set〉 | 〈regex-capture〉〈userdef-set〉 = 〈string〉〈var-name〉 = ˆ$[wd]+
Seacutelecteur CSS
〈css-selector〉 = $( 〈css-sel-contents〉 )〈css-sel-contents〉 = 〈css-sel-part〉 〈css-sel-contents〉 | 〈css-sel-part〉〈css-sel-part〉 = ˆ[wdu0023]+
Attributs CSS
〈css-attribute〉 = value | height | width | top | left | right| bottom | color | id | text | border | event
Proprieacuteteacutes des eacuteleacutements
〈elem-property〉 = 〈elem-property-pos〉 | 〈elem-property-com〉〈elem-property-pos〉 = 〈var-name〉 rsquos 〈css-attribute〉〈elem-property-com〉 = the 〈css-attribute〉 of 〈var-name〉
Expressions reacuteguliegraveres
〈regex-capture〉 = match 〈elem-property〉 with 〈string〉
Tableau 42 ndash La grammaire BNF pour Cornipickle (Partie II)
107
emprunteacutes agrave la logique temporelle Lineacuteaire (LTL) pour exprimer des assertions sur lrsquoeacutevolution
du contenu drsquoun document au fil du temps
La construction Always ϕ nous permet de faire lrsquoassertion suivante quelle que soit lrsquoex-
pression de ϕ elle doit ecirctre vraie (True) dans tous les snapshots du document De mecircme on
utilise Eventually ϕ pour dire que ϕ sera vraie dans certains futurs snapshots du document
et Next ϕ est utiliseacute pour dire que ϕ est vrai dans la capture suivante
Une construction speacuteciale appeleacutee The next time ϕ then ψ affirme que ψ doit ecirctre vraie
mais seulement une fois que ϕ est Vraie Par exemple on peut utiliser cette construction pour
exprimer que quelque chose doit ecirctre observeacute apregraves qursquoun eacuteleacutement ait eacuteteacute cliqueacute lrsquoassertion
ne lie pas jusqursquoagrave ce moment Ceci est une leacutegegravere reacuteeacutecriture de lrsquoopeacuterateur until de LTL
Un but particulier des opeacuterateurs temporels est de comparer lrsquoeacutetat du mecircme eacuteleacutement sur plu-
sieurs snapshots Cela peut ecirctre fait dans Cornipickle avec la construction When $x is now $y ϕ
Si $x se reacutefegravere agrave lrsquoeacutetat drsquoun eacuteleacutement captureacute dans un snapshot anteacuterieur alors $y contiendra
lrsquoeacutetat du mecircme eacuteleacutement dans la capture (snapshot) actuelle
Toutes ces constructions peuvent ecirctre librement combineacutees Par exemple la proprieacuteteacute suivante
affirme que chaque eacuteleacutement de la liste se deacuteplacera vers le bas de la page agrave un certain moment
For each $x in $(li) (Eventually (
When $x is now $y ($yrsquos top is greater than $xrsquos top )))
Extension de la grammaire Une caracteacuteristique tregraves importante et exceptionnelle qui contri-
bue agrave la lisibiliteacute des speacutecifications Cornipickle est la possibiliteacute drsquoeacutetendre le vocabulaire de
base du langage Ce dernier donne aux utilisateurs cette possibiliteacute en utilisant leurs propres
deacutefinitions Ces nouvelles deacutefinitions seront lues par lrsquointerpreacuteteur et pourront ensuite ecirctre
108
Ensemble deacutefini en extension
〈def-set〉 = A 〈def-set-name〉 is any of 〈def-set-eacuteleacutements〉〈def-set-name〉 = ˆ ( =is)〈def-set-eacuteleacutements〉 = 〈def-set-eacuteleacutement〉 〈def-set-eacuteleacutements〉 | 〈def-set-eacuteleacutement〉〈def-set-eacuteleacutement〉 = 〈constant〉
Preacutedicats deacutefinis par lrsquoutilisateur
〈predicate〉 = We say that 〈pred-pattern〉 when ( 〈statement〉 )〈pred-pattern〉 = ˆ ( =when)
Eacutenonceacutes deacutefinis par lrsquoutilisateur
〈userdef-stmt〉 = empty
Tableau 43 ndash Extensions de la grammaire BNF pour Cornipickle
utiliseacutees librement comme tout eacuteleacutement de base du langage
Les preacutedicats peuvent ecirctre deacutefinis avec la construction We say that when Le texte entre
that et when est interpreacuteteacute comme une chaicircne de caractegraveres qui peut contenir des variables
Puis le texte apregraves when deacutecrit comment cette expression doit ecirctre eacutevalueacutee en termes du
vocabulaire existant Par exemple on peut deacutefinir lrsquoexpression laquo left-aligned raquo comme suit
We say that $x and $y are left-aligned when ($xrsquos left equals $yrsquos left )
La construction $x and $y are left-aligned ($x et $y sont aligneacutes agrave gauche) peut en-
suite ecirctre reacuteutiliseacutee (eacuteventuellement avec diffeacuterents noms de variables) dans des assertions
ulteacuterieures Les utilisateurs peuvent eacutegalement deacutefinir des ensembles soient des ensembles
de chaicircnes de caractegraveres des chiffres ou des ensembles drsquoeacuteleacutements agrave partir drsquoune page en les
eacutenumeacuterant en utilisant la construction A is any of
A Mojibake is any of Atilde ccopy Atildersquo Atildeuml
109
Notez que le nom de lrsquoensemble ne doit pas neacutecessairement ecirctre un seul mot lrsquoanalyseur
interpregravete tout ce qui est entre A et is any of comme un nom
La quantiteacute de donneacutees pouvant ecirctre relayeacutee de cette maniegravere eacutetant limiteacutee Cornipickle se
charge drsquoenvoyer une sonde qui ne reacutecupegravere que les informations neacutecessaires agrave lrsquoeacutevaluation
des speacutecifications fournies par lrsquoutilisateur Par conseacutequent la sonde reccediloit des instructions sur
les eacuteleacutements de la page qui sont inteacuteressants et sur les attributs DOM et CSS neacutecessaires pour
ces eacuteleacutements Ceci est fait en reacutecupeacuterant lrsquoensemble de tous les noms drsquoattributs apparaissant
dans une expression et lrsquoensemble de tous les seacutelecteurs CSS utiliseacutes dans les quantificateurs
La sonde parcourt la structure DOM drsquoune maniegravere en profondeur et produit un nœud de sortie
pour chaque nœud DOM visiteacute Par deacutefaut le nœud de sortie est vide il agit uniquement
comme un espace reacuteserveacute vide afin de preacuteserver la relation parent-enfant entre les nœuds de
sortie Ce nrsquoest que si lrsquoemplacement du nœud actuel correspond agrave lrsquoun des seacutelecteurs CSS
que les attributs et les valeurs seront ajouteacutees au nœud et seulement pour les attributs preacutesents
dans lrsquoexpression agrave eacutevaluer Des reacuteductions suppleacutementaires peuvent ecirctre reacutealiseacutees en reacuteduisant
tous les sous-arbres qui contiennent uniquement des nœuds vides Ainsi la structure DOM
produite par la sonde peut ecirctre vue comme une version laquo eacutevideacutee raquo du document original ne
contenant que des nœuds et des attributs importants pour lrsquoeacutevaluation drsquoune proprieacuteteacute
Incidemment il faut noter que ce filtrage est relativement grossier Consideacuterons par exemple
lrsquoexpression suivante
For each $x in $(p)If $xrsquos height equals 400 Then
For each $y in $(h1)$xrsquos width is greater than $yrsquos width
Cornipickle sera chargeacute drsquoaller chercher la largeur et la hauteur de tous les paragraphes et
rubriques pourtant on ne peut voir que les paragraphes de 400 pixels de hauteur qui sont
110
reacuteellement neacutecessaires pour deacutecider de la vrai valeur de la proprieacuteteacute De plus les informations
sur les titres nrsquoont drsquoimportance que si de tels paragraphes existent dans le document sinon
la proprieacuteteacute est vide Par conseacutequent les conditions de filtrage pourraient ecirctre affineacutees un
compromis doit ecirctre atteint entre les eacuteconomies de bande passante drsquoun tel filtrage et la
puissance de calcul neacutecessaire du cocircteacute client pour eacutevaluer les conditions
422 SEacuteMANTIQUE FORMELLE
Nous allons maintenant preacutesenter la seacutemantique formelle de Cornipickle La premiegravere eacutetape
consiste agrave formaliser la structure le contenu et les proprieacuteteacutes de style drsquoune page afficheacutee
Nous deacutefinissons drsquoabord un ensemble A de noms drsquoattributs Cet ensemble comprend tous les
attributs du DOM (Document Object Model Level 2) [55] et toutes les proprieacuteteacutes de feuilles de
style (CSS) qui peuvent ecirctre associeacutees agrave un eacuteleacutement Un nœud DOM est une fonction ν ArarrV
qui associe agrave chaque nom drsquoattribut une valeur prise agrave partir drsquoun ensemble V Nous utilisons
la valeur speacuteciale laquo raquo pour indiquer qursquoun attribut est indeacutefini pour un nœud donneacute Nous
distinguons un sous-ensemble E subV qui deacutesigne les noms drsquoeacuteleacutements correspondants au nom
de la balise HTML reacuteelle qui repreacutesente lrsquoeacuteleacutement (par exemple a h1 img etc)
Nous indiquerons par N lrsquoensemble de tous les nœuds DOM Lrsquoensemble T de documents
DOM comprend tous les arbres dont les nœuds sont des nœuds DOM Conformeacutement agrave la
convention adopteacutee par la plupart des navigateurs Web les eacuteleacutements de texte ne peuvent
apparaicirctre que comme feuilles et reccediloivent le nom drsquoeacuteleacutement speacutecial TEXT La figure 44
repreacutesente un tel document Si nous laissons ν se reacutefeacuterer au deuxiegraveme paragraphe du document
body nous avons par exemple ν(elementName) = ldquoprdquo ν(stylecolor) = ldquoredrdquo etc Nous
eacutetendons ν aux valeurs en deacutefinissant ν(v) = v pour tout v isinV
111
lthtmlgtltheadgtlttitlegtMy titlelttitlegt
ltheadgtltbodygtlth1gtThe first pagelth1gtltp style=colorredwidth400pxgtHello worldltpgt
ltp style=font-size14ptwidth200pxgtAnother ltbgtparagraphltbgtltpgt
ltp style=width400pxgtltpgtltbodygt
lthtmlgt
html
head body
title
CDATA
h1 p p p
CDATA CDATA CDATA b
CDATA
Figure 44 ndash Un document DOM simple (a) Structure HTML (b) Repreacutesentation en arbre DOM Seuls les noms des eacuteleacutements sont afficheacutes les attributs et valeurs restants sont omis pour plusde clarteacute
112
Soit κ T timesNrarr 2N la fonction qui eacutetant donneacute un document t isin T et un nœud ν isinN produit
lrsquoensemble κ(tν) de tous les enfants de ν dans T Soit C lrsquoensemble de tous les seacutelecteurs
CSS La fonction χ T times Srarr 2N renverra lrsquoensemble des nœuds en t correspondant agrave un
seacutelecteur CSS c isin C Les eacuteveacutenements deacuteclencheacutes par lrsquoutilisateur sont pris en compte en
supposant que certains eacuteleacutements portent un attribut avec le nom speacutecial laquo event raquo dont la
valeur deacutecrit lrsquoeacuteveacutenement auquel cet eacuteleacutement est lieacute Par exemple un utilisateur qui clique sur
un bouton ferait en sorte que lrsquoattribut laquo event raquo de ce bouton porterait laquo click raquo comme valeur
De cette faccedilon il est possible qursquoun instantaneacute drsquoun document contienne des informations sur
les eacuteveacutenements dynamiques survenant dans lrsquoapplication
La seacutemantique de Cornipickle est deacutefinie sur des traces des documents DOM une trace est
une seacutequence finie drsquoeacuteleacutements de T que nous deacutesignerons par t = t0 t1 tk Eacutetant donneacute
que toutes les expressions impliquant des constructions deacutefinies avec We say that peuvent
facilement ecirctre converties en expressions qui utilisent uniquement des constructions agrave partir
du langage de base il suffit de deacutefinir la seacutemantique pour ce langage de base On dira qursquoune
trace t satisfait une expression Cornipickle ϕ noteacutee t |= ϕ lorsque son eacutevaluation renvoie la
valeur Vrai (gt) La notation t i indique le suffixe de t agrave partir de son i-egraveme eacuteveacutenement
La seacutemantique complegravete est deacutefinie reacutecursivement dans le tableau 44 En termes formels
lrsquoexpressiviteacute du langage Cornipickle correspond agrave une extension du premier ordre de la
logique temporelle lineacuteaire ougrave les eacuteveacutenements sont des structures arborescentes des paires
nom-valeur semblables agrave celles utiliseacutees par le moniteur drsquoexeacutecution BeepBeep [53] ce-
pendant BeepBeep nrsquoa pas la possibiliteacute de creacuteer des constructions grammaticales deacutefinies
par lrsquoutilisateur En outre le langage a eacuteteacute eacutetendu agrave des constructions qui mecircme si elles
nrsquoaccroissent pas lrsquoexpressiviteacute ameacuteliorent la lisibiliteacute des speacutecifications tel que The next
time 6
6 Formellement t |= The next time ϕ then ψ si et seulement si t |= Notϕ Until (ϕ And ψ)
113
t |= νrsquos a equals νprimersquos aprime hArr ν(a) = ν
prime(aprime)t |= νrsquos a equals v hArr ν(a) = v
t |= Notϕ hArr t 6|= ϕ
t |= ϕ And ψ hArr t |= ϕ and t |= ψ
t |= ϕ Ou ψ hArr t |= ϕ or t |= ψ
t |= If ϕ Then ψ hArr t 6|= ϕ ou t |= ψ
t |= There exists ξ in $(c) such that ϕ hArr t |= ϕ[ξν ] pour certains ν isin χ(t0c)t |= For each ξ in $(c) ϕ hArr t |= ϕ[ξν ] pour tout ν isin χ(t0c)
t |= Alwaysϕ hArr t |= ϕ et t1 |= Alwaysϕ
t |= Eventuallyϕ hArr t |= ϕ ou t1 |= Eventuallyϕ
t |= Nextϕ hArr t1 |= ϕ
t |= ϕ Until ψ hArr Il existe ige 0 tel quet i |= ψ and t j |= ϕ for j lt i
When ξ is now ξ prime ϕ hArr Il existe ν prime isin t0 tel queν(id) = ν prime(id) and t |= ϕ[ξν prime]
Tableau 44 ndash La seacutemantique formelle de Cornipickle aaprime isin A sont les noms drsquoattributs DOMv isin V est une valeur drsquoattribut c isin C est un seacutelecteur CSS ξ et ξ prime sont des noms de variablesν ν prime isin N sont les nœuds DOM et ϕ et ψ sont des eacutenonceacutes Cornipickle quelconques Lorsque test vide Always srsquoeacutevalue agrave V rai et Eventually et Next srsquoevaluent agrave Faux
114
Le cas de lrsquoexpression When $x is now $y justifie une explication cependant Cette construc-
tion est utiliseacutee pour deacutesigner le mecircme eacuteleacutement drsquoun document agrave deux moments diffeacuterents dans
le temps En raison de la nature dynamique des applications web il ne suffit pas drsquoutiliser sim-
plement For each $x in $(s) suivi par For each $y in $(s) avec le mecircme seacutelecteur
CSS s Les eacuteleacutements drsquoune page peuvent ecirctre deacuteplaceacutes arbitrairement vers nrsquoimporte quelle
partie drsquoun document et par conseacutequent la reacutecupeacuteration drsquoeacuteleacutements avec le mecircme seacutelecteur
ne garantit pas qursquoils seront reacutepartis sur le mecircme domaine deux fois Cornipickle reacutesout ce
problegraveme en donnant agrave chaque eacuteleacutement un attribut unique appeleacute cornipickleid (raccourci
agrave id dans le tableau) Cet identifiant ne change jamais quelles que soient les manipulations de
lrsquoapplication sur un eacuteleacutement Lrsquoexpression When $x is now $y eacutevalue la variable $y avec
lrsquoeacuteleacutement ayant la mecircme cornipickleid comme cela a eacuteteacute donneacute agrave lrsquoeacutevaluation de la variable
$x permettant de comparer les attributs du mecircme eacuteleacutement dans deux instantaneacutes distincts de
la page
43 EXPRIMER DES PROPRIEacuteTEacuteS AVEC CORNIPICKLE
Au moyen drsquoune tel langage il est possible de donner des exemples de proprieacuteteacutes correspondant
agrave certains des bugs citeacutes preacuteceacutedemment Par exemple en prenant pour Mojibake lrsquoensemble
deacutefini preacuteceacutedemment la preacutesence de problegravemes de codage de caractegraveres dans une page peut
ecirctre deacutetecteacutee avec
We say that $x doesnrsquot contain $y when (Not ($xrsquos text matches $yrsquos value ))
For each $text in $(CDATA) (For each $mojibake in Mojibake ($text doesnrsquot contain $mojibake ))
Nous ajoutons la construction doesnrsquot contain agrave la grammaire simplement pour ameacuteliorer
115
la lisibiliteacute de la deacuteclaration qui suit
Similairement pour preacuteciser qursquoune classe speacutecifique drsquoeacuteleacutements ne devrait jamais se deacuteplacer
on peut eacutecrire ce qui suit
We say that $x is immobile when (Always (
When $x is now $y (($xrsquos left equals $yrsquos left)
And($xrsquos top equals $yrsquos top ))))
For each $item in $(li) ( $item is immobile )
Lrsquointuitiviteacute de speacutecifications peut encore ecirctre mise en eacutevidence dans ce dernier exemple qui
stipule qursquoau moins un eacuteleacutement de la liste a la valeur drsquoun autre eacuteleacutement de liste la derniegravere
fois que lrsquoutilisateur a cliqueacute sur un bouton appeleacute laquo Go raquo
We say that I click on Go when (There exists $b in $(button) such that (
($brsquos text is Go)And($brsquos event is mouseup)))
Always (If (I click on Go) Then (
There exists $x in $(value) such that (The next time (I click on Go)
Then (There exists $y in $(value) such that (
$xrsquos text equals $yrsquos text )))))
La lisibiliteacute de cette speacutecification devrait ecirctre mise en contraste avec le code proceacutedural qursquoon
aurait besoin drsquoeacutecrire pour deacutetecter le mecircme problegraveme qui est objectivement plus long et
beaucoup moins clair Par exemple dans jQuery on obtiendrait lrsquoeacutequivalent de la figure 45
Il est maintenant possible de reprendre certains exemples de bugs mentionneacutes en deacutebut de
thegravese et de montrer comment ceux-ci peuvent ecirctre deacutetecteacutes par des expressions Cornipickle
116
$(document)mouseUp(function(event) var e = argumentscalleeif ($(eventtarget)text() === Go) var current_values = []$(value)each(current_valuespush($(this)text())
)if (elastValues == undefined)
var found = falsefor (var v in current_values)
if ($inArray(v elastValues)) found = truebreak
If (found)
consolelog(Error)elastValues = current_values
)
Figure 45 ndash Exemple de code jQuery veacuterifiant que deux eacuteleacutements ont le mecircme texte
117
approprieacutees Prenons drsquoabord le cas drsquoun eacuteleacutement qui se deacuteplace dans une page cliquer sur
un eacuteleacutement change sa classe CSS cela entraicircne la modification de la zone de deacutelimitation de
lrsquoeacuteleacutement eacuteventuellement le deacuteplacement drsquoautres eacuteleacutements qui ne doivent pas bouger
On doit drsquoabord deacutefinir ce que signifie ecirctre immobile La construction When $x is now $y
nous permet de comparer les proprieacuteteacutes drsquoun mecircme eacuteleacutement dans deux snapshots diffeacuterents de
la page mecircme si le positionnement relatif de lrsquoeacuteleacutement dans le DOM a changeacute
We say that $x is immobile when (Always (
When $x is now $y (($xrsquos left equals $yrsquos left)And($xrsquos top equals $yrsquos top)
))
)
Avec cette expression il devient facile de speacutecifier par exemple que chaque eacuteleacutement drsquoune
liste doit demeurer agrave sa position
name Immobile itemsdescription List items should never change positionseverity Error
For each $item in $(li) (
$item is immobile)
De la mecircme maniegravere on peut speacutecifier que des eacuteleacutements doivent toujours ecirctre aligneacutes les uns
par rapport aux autres
Nous deacutefinissons drsquoabord quelques preacutedicats en utilisant la construction We say that
118
We say that $x and $y are left-aligned when ($xrsquos left equals $yrsquos left
)We say that $x and $y are top-aligned when (
$xrsquos top equals $yrsquos top)
We say that the page is big when (The media query (min-width 200px) applies
)The following rules apply when (
the page is big)
Ces preacutedicats nous permettent de simplifier lrsquoexpression rechercheacutee qui devient une double
quantification sur les eacuteleacutements drsquoune mecircme liste
name Menus aligneddescription All list items should either be left- or top-alignedseverity Warning
For each $z in $(menu li) (
For each $t in $(menu li) (($z and $t are left-aligned)Or($z and $t are top-aligned)
))
Nous ne faisons aucune reacuteclamation formelle concernant lrsquoexhaustiviteacute du langage ou son
expressiviteacute Cependant des preuves anecdotiques reacutevegravelent que tous les bogues de mise en
page dans notre enquecircte peuvent ecirctre exprimeacutes par une expression approprieacutee suggeacuterant qursquoil
est bien adapteacute agrave la tacircche agrave accomplir
CHAPITRE 5
DEacuteTECTION AVANCEacuteE BUGS COMPORTEMENTAUX ET RWD
Nous avons preacutesenteacute au chapitre preacuteceacutedent Cornipickle et la faccedilon drsquoeacutevaluer des bugs de
preacutesentation en analysant le contenu drsquoune seule page relativement indeacutependamment des
autres Dans ce chapitre nous nous inteacuteressons davantage aux bugs dits comportementaux
Dans ces bugs ce nrsquoest pas la preacutesentation graphique des pages qui est deacutefectueuse mais bien
la fonctionnaliteacute mecircme de lrsquoapplication Malgreacute tout nous pouvons exprimer et deacutetecter ces
bugs agrave partir de proprieacuteteacutes drsquoeacuteleacutements de lrsquointerface
Nous donnerons drsquoabord des exemples de bugs comportementaux illustreacutes dans une application
appeleacutee Beep Store Nous citons en suite les solutions actuelles et deacutecrivons ensuite notre
approche qui constitue une technique automatiseacutee fournissant des oracles de test dans le
but de deacutetecter les bugs comportementaux qui lient les donneacutees agrave lrsquoordre des consultations
de plusieurs pages de lrsquoapplication cela est fait en combinant Cornipickle avec un robot
drsquoexploration (RIA Crawler) Cette technique est aussi capables de veacuterifier la coheacuterence drsquoune
mise en page reacuteactive (responsive) sur une large gamme de largeurs de la fenecirctre Pour cela
nous avons inteacutegreacute une petite application dans le but de changer simultaneacutement la taille de la
fenecirctre du navigateur afin de deacutetecter des bugs RWD
120
51 BUGS COMPORTEMENTAUX DANS LE BEEP STORE
Afin drsquoeacutetudier les problegravemes de bugs comportementaux dans les applications RIA (Web 20)
deacutefinis dans 212 nous montrons quelques exemples de bugs illustreacutes sur une application
appeleacutee le Beep Store [53]
Le Beep Store est une application web client-serveur autonome impleacutementeacutee en PHP et
JavaScript qui permet aux utilisateurs enregistreacutes de parcourir une collection fictive de livres
et de musique et de geacuterer un panier virtuel composeacute de ces eacuteleacutements Cette application dont
les caracteacuteristiques ont eacuteteacute extraites drsquoune eacutetude exhaustive des applications web du monde
reacuteel est une RIA au sens propre du terme les interactions utilisateurs sont complegravetement
asynchrones ne neacutecessitent jamais le rechargement de la page deacutependent des actions passeacutees
des utilisateurs et consistent en un seul document dont les diffeacuterentes parties sont montreacutees
ou cacheacutees en fonction de lrsquoeacutetat actuel de lrsquoapplication
Connexions multiples Un des bugs qui peuvent ecirctre basculeacutes dans le Beep Store permet agrave
lrsquoutilisateur drsquoacceacuteder agrave la page de connexion tout en eacutetant deacutejagrave connecteacute Ceci est deacutetecteacute par
le fait que le lien laquo Srsquoidentifier raquo (Login) apparaicirct dans la barre drsquoaction supeacuterieure mecircme apregraves
que lrsquoutilisateur srsquoest connecteacute avec succegraves comme le montre la figure 51 1 Eacutevidemment une
application bien construite ne fournirait pas un bouton de connexion apregraves qursquoun utilisateur se
soit deacutejagrave connecteacute cette proprieacuteteacute est agrave eacutetat dans le sens ougrave lrsquoeacutetat valide drsquoune page deacutepend de
la seacutequence des actions passeacutees qui sont effectueacutees par lrsquoutilisateur (dans ce cas le fait qursquoune
connexion reacuteussie ait eu lieu)
1 On a vu au chapitre 2 comment des sites web reacuteels preacutesentent exactement ce problegraveme
121
Figure 51 ndash Le bug de connexions multiples Un utilisateur deacutejagrave connecteacute se voit proposer lrsquoop-tion de se reconnecter
Figure 52 ndash Le bug des paniers multiples Des boutons pour creacuteer un panier et ajouter desarticles au panier coexistent sur la mecircme page
Paniers multiples Un autre bug permet agrave lrsquoutilisateur de creacuteer plusieurs paniers drsquoachat
mecircme apregraves en avoir creacuteeacute un premier La figure 52 montre un exemple de ce bug un panier a
deacutejagrave eacuteteacute creacuteeacute puisque lrsquointerface affiche des boutons permettant agrave lrsquoutilisateur drsquoajouter des
articles au panier Pourtant les boutons pour creacuteer un nouveau panier sont eacutegalement afficheacutes
Supprimer drsquoun panier inexistant Ce bug est lrsquoinverse du preacuteceacutedent parfois le Beep
Store permet agrave lrsquoutilisateur de retirer un objet de son panier avant mecircme de le creacuteer Nous
pouvons voir dans la figure 53 que les boutons pour creacuteer un panier sont preacutesents avec les
boutons pour en retirer les eacuteleacutements
122
Figure 53 ndash Le bug de la suppression drsquoun panier inexistant Des boutons pour retirer du panieret creacuteer un panier coexistent sur la mecircme page
Ces bugs sont clairement comportementaux car ils sont causeacutes par des actions anteacuterieures
de lrsquoutilisateur ou des actions qui nrsquoont jamais eu lieu Il convient eacutegalement de noter que
selon lrsquoimpleacutementation du serveur ces bugs ne deacuteclenchent pas neacutecessairement des messages
drsquoerreur dans les logs Nous pouvons facilement imaginer un cas ougrave une action est rejeteacutee et ne
creacutee pas drsquoautres problegravemes mais le client ne devrait jamais avoir eacuteteacute preacutesenteacute avec lrsquooption
52 SOLUTIONS ACTUELLES
Les travaux connexes sur le test drsquoapplications web pour de tels types de bugs se concentrent
sur les moyens de trouver des erreurs dans les applications en effectuant une recherche
exhaustive de leur espace drsquoeacutetat
Les robots drsquoexploration (laquo crawlers raquo) font partie inteacutegrante des moteurs de recherche web et
sont deacutedieacutes agrave la collecte et agrave lrsquoindexation de documents web Ils ont eacuteteacute deacuteveloppeacutes agrave lrsquoorigine
pour lrsquoarchivage la reacutecupeacuteration drsquoinformations (trouver des adresses e-mail ou des pages
de produits par exemple) Cependant on a rapidement deacutecouvert que les crawlers pouvaient
ecirctre utiliseacutes agrave drsquoautres fins en particulier un crawler peut ecirctre consideacutereacute comme un outil
drsquoexploration drsquoespace drsquoeacutetat et agrave ce titre ecirctre utiliseacute pour effectuer des tests automatiseacutes
123
Un processus drsquoexploration traditionnel commence agrave partir des URL de deacutemarrage Les pages
web correspondant agrave ces URL sont teacuteleacutechargeacutees et les hyperliens preacutesents sur celles-ci sont
extraits et ajouteacutes agrave un ensemble drsquoURL agrave visiter eacutegalement appeleacute le crawl frontier Comme
le nombre drsquoURL qui peuplent la frontiegravere drsquoexploration augmente tregraves rapidement un critegravere
de priorisation du teacuteleacutechargement de certaines pages est geacuteneacuteralement appliqueacute Agrave leur tour
les URL les mieux classeacutees dans la limite de lrsquoexploration sont teacuteleacutechargeacutees et de nouveaux
liens sont extraits Cette opeacuteration est reacutepeacuteteacutee jusqursquoagrave ce que tous les liens accessibles soient
visiteacutes [62 65]
Certaines fonctionnaliteacutes de base des applications web traditionnelles sont modifieacutees dans
les RIA ce qui rend lrsquoexploration des RIA plus difficile que celle des applications web
traditionnelles Dans lrsquoanalyse RIA lrsquoordre drsquoanalyse respecte la seacutequence de pages possible
comme si un internaute lrsquoutilisait Comme nous lrsquoavons vu contrairement aux applications
web traditionnelles une URL nrsquoidentifie pas de faccedilon unique lrsquoeacutetat de lrsquoapplication et ne peut
donc pas ecirctre simplement demandeacutee au serveur agrave tout moment
Dans une application avec une gestion du panier comme le Beep Store il serait possible
pour un robot drsquoexploration traditionnel de trouver des bugs comportementaux lagrave ougrave il nrsquoy
en a pas lrsquoordre de visite est crucial Par exemple dans un sceacutenario ougrave lrsquoutilisateur peut
creacuteer un panier supprimer un panier ajouter un article agrave un panier et modifier un panier pour
modifier la quantiteacute un bug qui permet agrave lrsquoutilisateur drsquoeacutediter un article dans son panier sans
avoir de panier pourrait ecirctre deacutecouvert Apregraves la creacuteation drsquoun panier lrsquoajout drsquoun eacuteleacutement
et la suppression du panier lrsquoensemble drsquoURL du crawler traditionnel contient lrsquoURL agrave
modifier Ensuite lorsque vous essayez drsquoatteindre cette URL un bug survient car le panier a
eacuteteacute supprimeacute Cependant il peut srsquoagir drsquoun faux positif car cette seacutequence drsquoactions nrsquoest
probablement pas possible pour un utilisateur Un robot drsquoexploration traditionnel nrsquoest donc
pas adapteacute agrave la recherche de bugs comportementaux
124
Dans un crawler web pour RIA la page associeacutee agrave une seed URL (un crawler commence
par une liste drsquoURL agrave visiter appeleacutee les seeds) est extraite et chargeacutee dans un navigateur
virtuel Un module est requis pour veacuterifier si crsquoest la premiegravere fois que la page construite
est rencontreacutee Un extracteur drsquoeacuteveacutenements reacutecupegravere les eacuteveacutenements JavaScript de la page
un de ces eacuteveacutenements est seacutelectionneacute et exeacutecuteacute sur la page La page reacutesultante est ensuite
collecteacutee et le processus se poursuit jusqursquoagrave eacutepuisement de toutes les actions deacutecouvertes
[41] Sur la base de ce modegravele diffeacuterentes strateacutegies drsquoexploration (telles que la recherche en
profondeur (depth-first search) Greedy Model-Based et Component-Based) ont eacuteteacute suggeacutereacutees
[61 36 45 40 46 44]
Certains outils ont deacutejagrave eacuteteacute conccedilus pour tester les RIA Par exemple WebMate [43] peut
extraire lrsquoarborescence drsquoeacutetat drsquoune application web Cet arbre est ensuite compareacute aux arbres
drsquoeacutetat drsquoautres navigateurs pour trouver les diffeacuterences de mise en page Cependant il se
concentre sur la compatibiliteacute inter-navigateurs (cross-browser compatibility) et ne semble pas
prendre en charge les tests externes deacutefinis par lrsquoutilisateur
WebMole est un autre crawler automatiseacute qui geacuteneacuteralise les approches existantes Il eacutelimine
tout backtracking arbitraire en interceptant les requecirctes HTTP et fait des sauts de page [54]
Cependant lrsquoobjectif de WebMole est simplement drsquoextraire les graphes de navigation drsquoune
application il ne permet pas agrave un utilisateur drsquoeacutecrire des oracles de test agrave eacutevaluer pendant
lrsquoexploration de lrsquoapplication
De son cocircteacute Crawljax [60] utilise une strateacutegie en profondeur (depth-first strategy) pour
explorer et produire une machine agrave eacutetats finis du comportement de lrsquoapplication Il est possible
gracircce agrave son architecture de plugin de tester chaque eacutetat pendant qursquoils sont visiteacutes Cependant
les tests en question doivent ecirctre eacutecrits par lrsquoutilisateur en code Java pur cela rend lrsquoeacutecriture
des oracles de test dynamiques difficile pour des raisons mentionneacutees plus haut
125
53 SOLUTION PROPOSEacuteE
Pour remeacutedier agrave ces problegravemes nous proposons dans cette section une architecture qui
combine un robot drsquoindexation RIA (dans ce cas Crawljax) avec notre interpreacuteteur de langage
de haut niveau pour les oracles de test web Cornipickle Crawljax est responsable de
lrsquoexploration drsquoune application web en tenant compte de son eacutetat tandis que nous utilisons les
opeacuterateurs emprunteacutes de la logique temporelle lineacuteaire fournie par Cornipickle pour exprimer
des assertions sur lrsquoeacutevolution du contenu drsquoun document au fil du temps Cette architecture a
eacuteteacute codeacutee dans un plugin open source pour Crawljax 2
531 INTERACTION AVEC CRAWLJAX
Crawljax est un outil pour explorer automatiquement lrsquoeacutetat dynamique des applications web
modernes Via des interfaces de programmation il a la capaciteacute drsquointeragir avec le code cocircteacute
client de lrsquoapplication Nous lrsquoutilisons pour explorer le comportement de lrsquoapplication web agrave
tester Pour deacutetecter les clics Crawljax analyse une page Web et lrsquoutilise systeacutematiquement
pour explorer le comportement dynamique de lrsquoapplication [60 70]
Les modifications deacutetecteacutees dans lrsquoarbre DOM dynamique sont valideacutees en tant que nouveaux
eacutetats du comportement De nombreuses options sont disponibles avec Crawljax pour configurer
le comportement drsquoanalyse Nous pouvons par exemple speacutecifier les liens ou les widgets agrave
cliquer ou non au cours de lrsquoexploration Dans une variante Crawljax effectue une recherche
en profondeur en premier (depth-first search) stocke lrsquohistorique des exeacutecutions drsquoeacuteveacutenements
et nrsquoexeacutecute un eacuteveacutenement que si lrsquoeacuteveacutenement nrsquoa pas eacuteteacute exeacutecuteacute auparavant quel que soit
lrsquoeacutetat de lrsquoapplication [68]
2 http githubcomliflabcrawljax-cornipickle-plugin
126
Figure 54 ndash Flux drsquointeraction et de seacuterialisation (Crawljax-Cornipickle)
La figure 54 montre le workflow du systegraveme combineacute pour deacutetecter les bugs comportemen-
taux de lrsquoapplication testeacutee Crawljax explore le comportement de lrsquoapplication web sous
test (Exploration) Il interagit avec Cornipickle agrave travers son architecture de plugin (Plugin
Cornipickle (capture)) (1) Chaque fois qursquoun eacutetat est creacuteeacute (OnNewState) ou visiteacute (OnRevisit)
Crawljax seacuterialise la page (seacuterialisation JSON) et lrsquoenvoie agrave lrsquointerpreacuteteur (2) pour lrsquoeacutevaluer
de la mecircme maniegravere que la sonde envoie la page au serveur Cornipickle dans lrsquoarchitecture
traditionnelle (Cornipickle eacutevaluation) Apregraves que la page ait eacuteteacute eacutevalueacutee par Cornipickle le
verdict (3) est retourneacute et le plugin affiche le reacutesultat (Outputs)(4)
Il est important de se rappeler que chaque eacutetat de lrsquoapplication est visiteacute par Crawljax dans la
mecircme seacutequence qursquoun utilisateur Mecircme quand il revient agrave un eacutetat anteacuterieur il recommence au
deacutebut de lrsquoexploration et prend le mecircme chemin jusqursquoagrave ce que lrsquoeacutetat deacutesireacute soit atteint
532 REDIMENSIONNMENT DU NAVIGATEUR
Ce mecircme principe peut ecirctre facilement modifieacute pour eacutegalement deacutetecter des bugs RWD Pour
ce faire nous avons creacuteeacute un autre plugin qui cette fois redimensionne le navigateur drsquoune
127
largeur donneacutee agrave une autre largeur
Eacutetant donneacute que lrsquoutilisation drsquoune barre de deacutefilement verticale nrsquoest pas un problegraveme dans le
responsive design seul le redimensionnement horizontal est lrsquoapproche correcte pour deacutetecter
les bugs RWD Puisque nous voulons explicitement trouver des bugs lieacutes au RWD le plugin
diminue lentement la largeur du navigateur ces bugs apparaissent sur des largeurs infeacuterieures
ougrave lrsquoespace disponible devient de plus en plus rare en reacutefeacuterence agrave des largeurs plus grandes Il
est possible de fournir au plugin la borne supeacuterieure la borne infeacuterieure et la quantiteacute de pixels
pour la deacutecreacutementation Le plugin met eacutegalement en eacutevidence les bugs qursquoil trouve et prend
une capture drsquoeacutecran de la page Nous obtenons ensuite des captures drsquoeacutecran ougrave les eacuteleacutements
responsables du bug ont des bordures rouges
54 EXPEacuteRIENCES ET REacuteSULTATS
Comme on peut le voir la deacutetection de bugs comportementaux et de bugs RWD dans les
deux cas peut se reacutesumer agrave la veacuterification de proprieacuteteacutes exprimeacutees sur des seacutequences de pages
Dans le premier cas elles sont fournies par un robot drsquoexploration et dans le second cas par
le redimensionnement reacutepeacutetitif de la fenecirctre du navigateur sur une mecircme page
Nous deacutetaillons maintenant quelques exemples de proprieacuteteacutes Cornipickle permettant de deacutetecter
des bugs comportementaux et des bugs RWD
541 DEacuteTECTION DE BUGS COMPORTEMENTAUX DANS BEEPSTORE
Nous expliquons drsquoabord les bugs comportementaux du Beep Store deacutecrits preacuteceacutedemment et
nous montrons comment ils peuvent ecirctre captureacutes par Crawljax en eacutevaluant les assertions de
Cornipickle lors de lrsquoexploration drsquoune application
128
Connexions multiples Le premier bug est celui des connexions multiples Ce bug peut
facilement ecirctre deacutetecteacute par les expressions suivantes
We say that we are signed in when (There exists $p in $(action-band) such that (
$prsquos text matches ^Welcome))
We say that we are in the login page when (There exists $div in $(sign-in) such that (
Not ( $divrsquos display is none )))
Always (If ( we are signed in ) Then (
Not ( we are in the login page )))
Les deux deacutefinitions We say that expliquent comment on deacutefinit le fait drsquoecirctre connecteacute et
drsquoecirctre dans la page de connexion dans le Beep Store Lrsquoexpression There exists x in y such
that (z) est utiliseacutee pour affecter agrave la variable x un eacuteleacutement de lrsquoensemble y ougrave z est vrai Nous
pouvons voir que lrsquoensemble y dans le second preacutedicat est composeacute de tous les eacuteleacutements
avec lrsquoidentifiant laquo sign-in raquo et il srsquoassure que z est vrai avec au moins un drsquoentre eux La
construction x matches y quant agrave elle veacuterifie si x correspond agrave lrsquoexpression reacuteguliegravere y et
la construction x is y veacuterifie si x est eacutegal agrave y Enfin lrsquoinstruction Always (x) veacuterifie que x est
vrai dans chaque instantaneacute En un mot il ne devrait jamais arriver que la bande drsquoaction dise
laquo Welcome raquo pendant que le div avec lrsquoidentifiant laquo sign-in raquo est afficheacute
Agrave titre de comparaison la figure 55 montre comment on pourrait attraper le mecircme bug
uniquement avec Crawljax et son architecture de plugin La lisibiliteacute est beaucoup plus faible
et avec des proprieacuteteacutes plus complexes nous pouvons voir donc comment le code peut devenir
complexe et long
129
private enum Verdict TRUE FALSE INCONCLUSIVEprivate Verdict m_verdict
Overridepublic void onNewState(CrawlerContext context StateVertexnewState) if(m_verdict == VerdictINCONCLUSIVE) EmbeddedBrowser browser = contextgetBrowser()
Identification identificationActionBand =new Identification(IdentificationHowid action-band)
booleansignedIn = false
Identification identificationSignInDiv =new Identification(IdentificationHowid sign-in)
booleancurrentlyInLoginPage = false
if(browserelementExists(identificationActionBand)) WebElementactionBand = browsergetWebElement(identificationActionBand)if(Patternmatches(^Welcome actionBandgetText())) signedIn = true
if(browserelementExists(identificationSignInDiv)) WebElementsignInDiv = browsergetWebElement(identificationSignInDiv)if(signInDivisDisplayed()) currentlyInLoginPage = true
if(signedIn) if(currentlyInLoginPage) m_verdict = VerdictFALSE
output(context newState)
Figure 55 ndash Le code neacutecessaire pour attraper le bug des connexions multiples en utilisant Crawl-jax sans Cornipickle
130
Paniers multiples Le bug des paniers multiples peut ecirctre deacutetecteacute par cette proprieacuteteacute
We say that we are signed in when (There exists $p in $(action-band) such that (
$prsquos text matches ^Welcome))
We say that we create a cart when (There exists $button in $(button-create-cart)
such that ($buttonrsquos event is click
))
The next time ( we are signed in ) Then (The next time ( we create a cart ) Then (
Always (Not ( we create a cart )
)))
Les deacuteclarations temporelles The next time x Then (y) eacutevaluent agrave vrai si y eacutevalue agrave vrai
mais seulement apregraves que x le soit Donc apregraves que nous nous soyons connecteacutes et apregraves que
nous ayions cliqueacute sur le bouton laquo creacuteer un panier raquo nous ne devrions plus jamais cliquer sur
laquo creacuteer un panier raquo
Le bug de suppression drsquoun panier existant se gegravere de maniegravere similaire nous ne le deacutecrirons
pas en deacutetail ici
Il est agrave noter que lrsquoeacutevaluation drsquoun eacutetat avec ces proprieacuteteacutes Cornipickle prend entre 36 et 74
millisecondes par page avec un processeur Intel Core i5-3470 Gardez agrave lrsquoesprit que bien que
les proprieacuteteacutes soient assez simples le Beep Store est une tregraves grande application agrave seacuterialiser
car mecircme les blocs non afficheacutes doivent ecirctre inclus
131
542 DEacuteTECTION DE BUGS RWD DANS DE VRAIS SITES WEB
Nous montrons maintenant quelques exemples de proprieacuteteacutes Cornipickle pour la deacutetection
de bugs RWD Les comportements drsquoun site web sont uniques pour chaque site Pour cette
raison la deacutetection des bugs comportementaux neacutecessite des proprieacuteteacutes speacutecifiques Drsquoautre
part le Responsive Web Design est une approche geacuteneacuterale de la conception Web similaire aux
modegraveles de conception (design patterns) dans les langages traditionnels Les eacutechecs dans lrsquoim-
pleacutementation de cette conception doivent ecirctre deacutetectables avec des proprieacuteteacutes geacuteneacuterales Pour
cette raison les proprieacuteteacutes deacutecrites dans cette section ne constituent que des avertissements
une violation ne devrait pas signifier qursquoil srsquoagit drsquoun bug dans tous les cas
Preacutesence de barres de deacutefilement Lrsquoune des premiegraveres indications drsquoun site web pas res-
ponsive est la preacutesence drsquoune barre de deacutefilement horizontale Pour deacutetecter ce bug une simple
proprieacuteteacute Cornipickle peut ecirctre deacutefinie
We say that there is an horizontal scrollbar when (the pagersquos width is less than
the pagersquos scroll-width)
name No horizontal scrollbardescription There should never be an horizontal scrollbarseverity Error
Always (
Not ( there is an horizontal scrollbar ))
Dans cette proprieacuteteacute lrsquointerception drsquoune barre de deacutefilement horizontale peut ecirctre obtenue en
comparant la largeur de la fenecirctre (viewportwidth) avec la largeur de deacutefilement (scroll-width)
132
Cela ne devrait jamais arriver si elle est toujours entoureacutee avec la construction Always Not
Collision drsquoeacuteleacutements Crsquoest le bug ougrave les eacuteleacutements se chevauchent Cette proprieacuteteacute com-
mence par certaines deacutefinitions du langage pour simplifier le cœur de la proprieacuteteacute agrave la fin Elle
deacutecrit les intersections horizontales et verticales un eacuteleacutement visible deux eacuteleacutements identiques
et des chevauchements
We say that $x x-intersects $y when ((($yrsquos right - 1) is greater than $xrsquos left)And(($xrsquos right - 1) is greater than $yrsquos left)
)
We say that $x y-intersects $y when ((($yrsquos bottom - 1) is greater than $xrsquos top)And(($xrsquos bottom - 1) is greater than $yrsquos top)
)
We say that $x is visible when (Not ( $xrsquos display is none )
)
We say that $x and $y are the same when ($xrsquos cornipickleid equals $yrsquos cornipickleid
)
We say that $x and $y are not the same when (Not ($x and $y are the same)
)
We say that $x and $y overlap when ((($x is visible) And ($y is visible))And(
($x x-intersects $y)And($x y-intersects $y)
133
))
We say that $x and $y do not overlap when (Not ($x and $y overlap)
)
La premiegravere deacutefinition utilise laquo right - 1 raquo car les eacuteleacutements qui se croisent doivent se croiser drsquoau
moins 2 pixels Il surmonte un problegraveme ougrave nous recevons des dimensions et des coordonneacutees
en entiers (pixels) mais le navigateur peut travailler avec des floats dans le cas drsquoeacuteleacutements
ayant des dimensions en ratios Ces floats sont arrondis et peuvent provoquer des diffeacuterences
de 1 pixel entre ce qui est afficheacute et ce qui est seacuterialiseacute Il est vrai que nous pouvons manquer
des bugs qui sont leacutegitimement agrave 1 pixel mais il est important de ne pas punir les bonnes
pratiques
La deacutefinition drsquoun eacuteleacutement visible veacuterifie uniquement si la proprieacuteteacute display est laquo none raquo car ces
eacuteleacutements ne provoquent aucun changement de disposition En outre cette valeur est affecteacutee
consciemment par le deacuteveloppeur afin que leur position sur la page soit correcte Le troisiegraveme
deacutecrit deux eacuteleacutements qui sont identiques en utilisant la proprieacuteteacute laquo cornipickleid raquo Cette
proprieacuteteacute est une valeur unique donneacutee agrave chaque eacuteleacutement important dans la page pendant la
phase de seacuterialisation Comme il est unique il peut ecirctre utiliseacute pour identifier si deux eacuteleacutements
sont identiques
La derniegravere construction deacutefinit deux eacuteleacutements qui se chevauchent Si elles sont agrave la fois
visibles et qursquoelles se croisent verticalement et horizontalement elles sont consideacutereacutees dans
une collision
name Element Collisiondescription All items that arenrsquot
overlapping initially shouldnrsquot ever overlap
134
severity WarningAlways (
For each $x in $(body ) (For each $y in $($x gt ) (
For each $z in $($x gt ) (If ( ($y and $z are not the same) And
($y and $z do not overlap) ) Then (Next (
When $y is now $a (When $z is now $b (
$a and $b donrsquot overlap)))))))
Enfin les trois constructions For each rassemblent tous les eacuteleacutements et leurs enfants directs
Elle permet de tester des paires de fregraveres et sœurs pour leur proprieacuteteacute de recouvrement Notez
qursquoelle ne veacuterifie pas si un eacuteleacutement chevauche un laquo cousin raquo car ce cousin aurait besoin de violer
la proprieacuteteacute Protrusion (qui nrsquoest pas deacutetailleacutee dans cette thegravese) La proprieacuteteacute pourrait ecirctre faite
en testant chaque eacuteleacutement avec tous les autres eacuteleacutements mais il est coucircteux en performance
Les deux constructions When $x is now $y rassemblent la paire dans la capture drsquoeacutecran
suivante afin de la comparer agrave elle-mecircme dans la capture drsquoeacutecran preacuteceacutedente Dans lrsquoensemble
la proprieacuteteacute dit que si deux fregraveres et sœurs ne se chevauchent pas agrave un moment donneacute ces
deux fregraveres et sœurs ne devraient pas se chevaucher au moment suivant
Les autres bugs RWD (deacutepassement des eacuteleacutements etc) deacutecrits au chapitre 2 peuvent ecirctre
traiteacutes de maniegravere similaires nous ne les deacutetaillerons pas ici
Agrave titre eacutevaluatif nous avons eacutevalueacute une proprieacuteteacute en fonction du nombre drsquoeacuteleacutements Le temps
de calcul de lrsquointerpreacuteteur en fonction du nombre drsquoeacuteleacutements dans la page est montreacute dans la
figure 56 Le temps de calcul en incluant la seacuterialisation de la page par la sonde JavaScript et
lrsquointerpreacutetation de la proprieacuteteacute en fonction du nombre drsquoeacuteleacutements dans la page est preacutesenteacute
dans la figure 57 Nous pouvons constater que lrsquointerpreacuteteur srsquoexeacutecute tregraves rapidement crsquoest
135
Figure 56 ndash Temps de calcul de lrsquointerpreacuteteur en fonction du nombre drsquoeacuteleacutements dans la page
bien la seacuterialisation de la page par la sonde qui prend le plus de temps dans le processus global
136
Figure 57 ndash Temps de calcul incluant la seacuterialisation de la page par la sonde JavaScript etlrsquointerpreacutetation de la proprieacuteteacute en fonction du nombre drsquoeacuteleacutements dans la page
CHAPITRE 6
VERS UN MEILLEUR FEEDBACK POUR LrsquoUTILISATEUR
Jusqursquoici nous avons preacutesenteacute un outil automatiseacute pour la deacutetection des bugs drsquointerface
permettant drsquoeacutevaluer les expressions dans un langage deacuteclaratif de haut niveau baseacute sur la
logique temporelle lineacuteaire et de premier ordre Or les pages web sont composeacutees de centaines
drsquoeacuteleacutements avec des dizaines drsquoassertions de proprieacuteteacutes qui doivent tenir de plus les deacutefauts
de mise en page sont parfois trop subtils pour ecirctre visibles agrave lrsquoœil nu (comme les eacuteleacutements drsquoun
seul pixel) Par conseacutequent lrsquoeacutevaluation de base de ces proprieacuteteacutes renvoyant un simple verdict
vraifaux ne serait pas tregraves utile pour un concepteur Le fait de simplement dire que laquo quelque
chose ne va pas raquo apporte peu de valeur ajouteacutee lorsque quelqursquoun doit rechercher le problegraveme
dans une page aussi complexe Pour fournir une reacuteelle eacutevaluation aux praticiens un outil
drsquoanalyse de la mise en page devrait donc ecirctre capable de repeacuterer des eacuteleacutements speacutecifiques de
la page qui sont responsables de certains bugs
Agrave cette fin Cornipickle a eacuteteacute eacutequipeacute drsquoun meacutecanisme pour essayer de circonscrire des parties
drsquoune page qui expliquent la faute deacutecouverte Notre travail sur la deacutetection de bugs de mise en
page est donc devenu une forme de localisation de deacutefaut (fault localization) Nous allons dans
ce chapitre exposer deux tentatives afin de fournir agrave lrsquoutilisateur un verdict plus riche qursquoun
simple vraifaux La premiegravere conduit agrave une construction appeleacutee laquo teacutemoin raquo baseacutee sur une
138
fonction appliqueacutee reacutecursivement sur la formule qui est falsifieacutee Un teacutemoin met en eacutevidence
un ensemble drsquoeacuteleacutements dans la page qui sont lieacutes drsquoune certaine maniegravere agrave la violation drsquoune
proprieacuteteacute
Cela srsquoest reacuteveacuteleacute insuffisant dans la pratique par la suite nous reprenons le travail sur une
nouvelle base formelle fondeacutee cette fois sur le concept de laquo reacuteparation raquo Intuitivement une
reacuteparation est un ensemble minimal de transformations qui lorsqursquoelles sont appliqueacutees agrave
lrsquoobjet original reacutetablissent sa satisfiabiliteacute par rapport agrave la speacutecification Lrsquoavantage de ce
concept est qursquoil est indeacutependant de la nature de lrsquoobjet et du langage de speacutecification utiliseacute
pour deacuteclarer ses proprieacuteteacutes attendues Il pourrait donc ecirctre appliqueacute agrave une varieacuteteacute drsquoautres
sceacutenarios en plus des applications web
61 GEacuteNEacuteRATION DE CONTRE-EXEMPLE LES TEacuteMOINS
Gracircce agrave la nature des speacutecifications du langage Cornipickle baseacutees sur la logique il est possible
drsquoanalyser systeacutematiquement une assertion quand elle est eacutevalueacutee agrave faux et drsquoidentifier les
eacuteleacutements qui sont laquo responsables raquo de la fausseteacute de cette assertion
Verdicts et teacutemoins
Nous appelons teacutemoin un arbre drsquoeacuteleacutements DOM soit W sube T lrsquoensemble de tous les teacutemoins
(W pour witness) Lrsquoensemble des verdicts est deacutefini comme V BcupgtperptimesW timesW un
verdict est composeacute drsquoune valeur de veacuteriteacute et de deux teacutemoins lrsquoun correspondant agrave la valeur
de veacuteriteacute gt lrsquoautre agrave la valeur de veacuteriteacute perp
139
La conjonction de verdicts est une fonction otimes V timesNtimesV rarrV deacutefinie comme suit
otimes(〈bwgtwperp〉ν 〈bprimewprimegtwprimeperp〉) =
〈perpwgtwperpcup(ν wprimeperp)〉 si bprime =perp
〈bandbprimewgtcup(ν wprimegt)wperp〉 si b 6=perp
〈bwgtwperp〉 sinon
Nous interpreacutetons bandbprime comme la conjonction classique agrave trois valeurs La notation (ν w)
deacutesigne la creacuteation drsquoun nouveau teacutemoin (witness) dont la racine est le nœud DOM ν avec le
teacutemoin w comme son enfant La notation wcupwprime deacutesigne lrsquoaddition de wprime aux enfants du teacutemoin
w Nous allons abuser de la notation et accepter que le deuxiegraveme argument de otimes pourrait ecirctre
un eacuteleacutement laquo vide raquo de N nous deacutesignerons comme ν 0 Cet eacuteleacutement est neacutecessaire de sorte que
chaque opeacuteration sur les verdicts peut surclasser un teacutemoin existant avec un nouveau nœud
racine mecircme srsquoil nrsquoy a rien agrave laquo teacutemoigner raquo
La conjonction de verdicts met agrave jour le contenu drsquoun verdict existant v et donne un autre
verdict vprime et un eacuteleacutement DOM ν Si vprime est faux il porte un teacutemoignage de cette fausseteacute agrave
savoir wprimeperp ce teacutemoin est attacheacute comme un enfant drsquoun nouvel arbre dont la racine est ν et
cet arbre est ajouteacute au teacutemoignage de la fausseteacute de v wperp De plus la valeur de veacuteriteacute de v
est deacutefinie comme eacutetant perp Autrement dit lrsquoexplication de vprime pour ecirctre fausse est ajouteacutee agrave
lrsquoexplication de v pour ecirctre fausse Dans le cas contraire si ni le premier eacuteleacutement de v ni celui
de vprime est faux alors le teacutemoin vprime associeacute agrave gt est ajouteacute au teacutemoin gt de v et sa valeur de veacuteriteacute
est mise agrave jour en conseacutequence Dans tous les autres cas v est laisseacute inchangeacute
140
ω(tνrsquos a equals ν primersquos aprime) =
〈gtν ν prime 0〉 if ν(a) = ν prime(aprime)〈gt 0ν ν prime〉 otherwise
ω(tνrsquos a equals v) =
〈gtν 0〉 if ν(a) = v〈perp 0ν〉 otherwise
ω(tNotϕ) = (ω(tϕ)ν 0)ω(tϕ And ψ) = otimes(otimes(〈gt 0 0〉ν 0ω(tϕ))ν 0ω(tψ))
ω(tϕ Or ψ) = oplus(oplus(〈perp 0 0〉ν 0ω(tϕ))ν 0ω(tψ))ω(tIf ϕ Then ψ) = oplus(oplus(〈perp 0 0〉ν 0(ω(tϕ)ν 0))ν 0ω(tψ))
ω(tThere exists ξ in$(c) such that ϕ)
=oplus〈perp 0 0〉
νisinχ(t0c)ω(tϕ[ξν ])
ω(tFor each ξ in $(c) ϕ) =otimes〈gt 0 0〉
νisinχ(t0c)ω(tϕ[ξν ])
Tableau 61 ndash La deacutefinition reacutecursive de la fonction de calcul du verdict ω
La disjonction de verdict oplus V timesNtimesV rarrV est deacutefinie comme le dual de la conjonction
oplus(〈bwgtwperp〉ν 〈bprimewprimegtwprimeperp〉) =
〈gtwgtcup(ν wprimegt)wperp〉 si bprime =gt
〈borbprimewgtwperpcup(ν wprimeperp)〉 si b 6=gt
〈bwgtwperp〉 sinon
Enfin la neacutegation du verdict est la fonction V timesNrarrV deacutefinie comme suit
(〈bwgtwperp〉ν) =
〈notbwperpcup(ν wgt)wgtcup(ν wperp)〉 si b isin gtperp
〈bwgtwperp〉 sinon
Intuitivement inverse les teacutemoins associeacutes agrave gt et perp et les surmonte drsquoune nouvelle racine
avec le nœud DOM ν Cela nrsquoa aucun effet lorsque le verdict est laquo raquo
En utilisant ces opeacuterateurs la seacutemantique formelle de Cornipickle deacutecrite dans le tableau 44
peut alors ecirctre eacutetendue agrave une fonction ω T lowasttimesΦrarrV qui sur une expression ϕ isinΦ et une
trace t isin T lowast calcule un verdict
141
La notationotimes〈gt 0 0〉
νisinχ(t0c)ω(tϕ[ξν ]) est un raccourci pour
otimes(〈gt 0 0〉ν 0otimes(ω(tϕ[ξν0])ν0otimes(ω(tϕ[ξν1])ν1 middot middot middot)))
En drsquoautres termes elle deacutesigne la conjonction reacutepeacuteteacutee du verdict de ω(tϕ[ξν ]) pour chaque
ν isin χ(t0c) agrave partir du verdict vide 〈gt 0 0〉 Une notation similaire est utiliseacutee pour oplus
Cette deacutefinition est difficile agrave lire en termes de notation cependant le lecteur peut reacutealiser en
lrsquoexaminant que la deacutefinition de chaque cas correspond agrave lrsquointuition Par exemple construire
le verdict de laquo ϕ And ψ raquo revient agrave deacutemarrer du verdict laquo vide raquo 〈gt 0 0〉 et lui joindre
successivement le verdict de ϕ et ψ
De mecircme construire le verdict pour une expression quantifieacutee existentiellement ϕ(x) est
obtenu en calculant successivement la disjonction du verdict de ϕ(k) pour chaque k du verdict
initial 〈perp 0 0〉 Ceci est compatible avec le fait que existx isin S ϕ(x) est eacutequivalent agraveor
kisinS ϕ(k)
Enfin un raisonnement similaire srsquoapplique aux opeacuterateurs temporels lineacuteaires Par exemple
t |= Alwaysϕ peut ecirctre deacutefini comme t |= ϕ et t1 |= Alwaysϕ drsquoougrave les verdicts ω(tϕ) et
ω(t1Always ϕ) sont combineacutes en utilisant la conjonction verdict
A titre drsquoillustration de cette proceacutedure nous montrerons comment un verdict peut ecirctre
calculeacute pour lrsquoexpression suivante en consideacuterant lrsquoarbre de la figure 44 For each $x in
$(p) For each $y in $(p) $xrsquos width equals $yrsquos width Le document contient
trois paragraphes que nous appellerons p1 p2 et p3 le premier et le troisiegraveme ont une largeur
(width) de 400 tandis que le second a une largeur de 200 La deacuteclaration inteacuterieure $xrsquos
width equals $yrsquos width sera donc eacutevalueacutee neuf fois une fois pour chaque combinaison
de nœuds DOM pour $x et $y
Selon la deacutefinition de la fonction ω dans le tableau 61 chaque eacutevaluation produira un verdict
142
de la forme 〈gtpi p j 0〉 quand pi et p j ont la mecircme largeur et 〈perp 0pi p j〉 quand ils
sont deacutefinis autrement Dans le premier cas la deacuteclaration srsquoeacutevalue agrave gt et les nœuds DOM pi
et p j sont ajouteacutes comme gt-teacutemoins de ce fait Lrsquoinverse srsquoapplique lorsque lrsquoinstruction est
fausse
Ces verdicts sont ensuite reacuteunis dans le quantificateur universel le plus profond Un verdict
vide 〈gt 0 0〉 est drsquoabord creacuteeacute et tous les verdicts pour lrsquoexpression inteacuterieure sont ensuite
combineacutes en utilisant la conjonction verdict Par exemple quand $x se reacutefegravere agrave p1 trois
verdicts sont joints 〈gtp1 p1 0〉 〈perp 0p1 p2〉 et 〈gtp1 p3 0〉 Selon la deacutefinition
de conjonction de verdict le verdict reacutesultant sera
〈perp(ν 0〈gtp1 p1 0〉)(ν 0〈gtp1 p3 0〉)(ν 0〈perp 0p1 p2〉)〉
Les deux verdicts internes srsquoeacutevaluant agrave gt sont attacheacutes au teacutemoin associeacute agrave gt et le verdict
eacutevaluant perp est attacheacute au teacutemoin associeacute agrave perp Trois de ces verdicts seront produits par le
quantificateur le plus interne un pour chaque valeur de $x qui seront ensuite combineacutes en
utilisant agrave nouveau la conjonction par le quantificateur universel le plus externe ce qui donnera
le verdict final
〈perp 0
(ν 0〈perp(ν 0〈gtp1 p1 0〉)(ν 0〈gtp1 p3 0〉)(ν 0〈perp 0p1 p2〉)〉)
(ν 0〈perp(ν 0〈gtp2 p2 0〉)(ν 0〈perp 0p1 p2〉)(ν 0〈perp 0p2 p3〉)〉)
(ν 0〈perp(ν 0〈gtp1 p3 0〉)(ν 0〈gtp3 p3 0〉)(ν 0〈perp 0p2 p3〉)〉) 〉
Lrsquoimpleacutementation actuelle de Cornipickle peut calculer ces verdicts et les renvoyer agrave la sonde
JavaScript Les verdicts sont envoyeacutes agrave la sonde sous forme drsquoune liste Cornipickle ID Chaque
143
A list item
Another list item
A third list item
The last list item
(a)
A list item
Another list item
A third list item
The last list item
(b)
Figure 61 ndash Exemple drsquoune erreur de mise en page Web simple (a) lrsquoun des eacuteleacutements de la listeest incorrectement aligneacute avec les autres (b) un teacutemoin (witness) produit par lrsquooutil Cornipickle
ID est unique correspondant un eacuteleacutement speacutecifique dans la page ce qui permet drsquoentourer
lrsquoeacuteleacutement en question dans la fenecirctre du navigateur
62 LOCALISATION DES ERREURS DANS LES APPLICATIONS WEB
Agrave notre connaissance le principe de calcul du verdict deacutecrit preacuteceacutedemment fait de Cornipickle
un des tout premiers systegravemes agrave expliquer graphiquement en quoi une proprieacuteteacute est violeacutee
Malheureusement nous avons deacutecouvert que ce principe laisse tout de mecircme un peu agrave deacutesirer
Par exemple consideacuterons la proprieacuteteacute voulant que tous les eacuteleacutements drsquoune liste avec lrsquoID
laquo menu raquo doivent ecirctre aligneacutes verticalement
For each $x in $(menu li) (For each $y in $(menu li) (
$xrsquos left equals $yrsquos left))
Pour cet exemple particulier la figure 61a montre une page simple pour laquelle la proprieacuteteacute
serait violeacutee Nous pouvons voir le reacutesultat de lrsquoapplication de ω deacutefinie dans la section
preacuteceacutedente sur lrsquoarbre DOM de la figure 61a La fonction retourne un arbre contenant des
pointeurs sur deux des eacuteleacutements de la page surligneacutes en rouge dans la figure 61b (En fait la
fonction renvoie plusieurs ensembles chacun contenant le second eacuteleacutement de liste et lrsquoun des
eacuteleacutements restants)
144
Intuitivement un tel reacutesultat est logique pour un concepteur de sites web en effet ces deux
eacuteleacutements doivent ecirctre aligneacutes alors qursquoils ne le sont pas Cependant cette information ne peut
ecirctre deacuteduite que par la connaissance de la proprieacuteteacute violeacutee le teacutemoin pointe simplement ces
deux eacuteleacutements sans fournir drsquoinformations sur laquo ce qui ne va pas raquo agrave leur sujet Alors que la
geacuteneacuteration de contre-exemple reacutecursif preacutesente dans la version actuelle de Cornipickle fournit
plus drsquoinformations qursquoun simple verdict vraifaux dans de nombreux cas elle peut donc
srsquoaveacuterer trop vague pour ecirctre utile
Nous introduisons la notion de reacuteparation qui peut ecirctre deacutefinie intuitivement comme un
ensemble de modifications neacutecessaires agrave un objet pour le rendre conforme agrave une proprieacuteteacute
La notion de reacuteparation peut ecirctre vue comme une localisation de deacutefaut exprimeacutee en sens
inverse indiquer comment un objet doit ecirctre reacutepareacute indirectement pointe vers des aspects de
sa structure qui sont responsables du fait que la proprieacuteteacute nrsquoest pas actuellement remplie Nous
verrons que contrairement au concept de teacutemoin qui est une technique lineacuteaire en fonction
de la taille de la formule et fortement associeacute au langage de speacutecification et aux objets de
domaine utiliseacutes les reacuteparations sont deacutefinies agrave un niveau drsquoabstraction qui ne deacutepend pas des
proprieacuteteacutes de lrsquoun ou de lrsquoautre
621 DEacuteFINITIONS
Soit Σ un ensemble de structures et TΣ un ensemble drsquoendomorphismes sur Σ crsquoest-agrave-dire
que chaque τ isin TΣ est une fonction τ Σrarr Σ Soit 2TΣ lrsquoensemble de tous les sous-ensembles
de TΣ Un ensemble drsquoendomorphismes T = τ1 τn isin 2TΣ est dit ecirctre bien deacutefini si
deux eacuteleacutements τi τ j sont tels que τi τ j equiv τ j τ j Un tel ensemble bien deacutefini sera appeleacute
transformation Lorsque le contexte est clair nous allons abuser de la notation et consideacuterer T
comme lrsquoendomorphisme (deacutefini de faccedilon unique) τ1 middot middot middot τn Lrsquoinclusion drsquoensembles induit
145
un ordre partiel sur les transformations
Soit Φ un ensemble drsquoexpressions de langage eacutequipeacutees drsquoune relation de satisfaction |= Σtimes
Φrarr gtperp Pour une expression ϕ isinΦ et une structure σ isin Σ nous eacutecrirons σ |= ϕ si et
seulement si |= (σ ϕ) =gt Dans un tel cas nous dirons que σ laquo veacuterifie raquo ϕ ou alternativement
que σ est un modegravele de ϕ
Soit σ isin Σ une structure telle que σ 6|= ϕ pour une expression ϕ isin Φ Une reacuteparation est
deacutefinie comme une transformation T isin 2TΣ telle que T (σ) |= ϕ Une reacuteparation est dite prime
si aucun sous-ensemble T prime sube T est tel que T prime est aussi une reacuteparation Intuitivement une
reacuteparation principale est un ensemble de laquo changements raquo sur une structure σ qui satisfait ϕ
de sorte qursquoaucune modification laquo plus petite raquo ne restaure aussi la satisfiabiliteacute Comme sube
est une commande partielle il peut y avoir plusieurs reacuteparations principales mutuellement
incomparables
La figure 62 illustre ce concept Lrsquoimage repreacutesente toutes les transformations qui peuvent
ecirctre appliqueacutees agrave une structure dans le cas simple ougrave seulement quatre morphismes existent
La transformation vide est en bas et chaque flegraveche dans le graphe repreacutesente lrsquoajout drsquoun
morphisme suppleacutementaire agrave une transformation existante Les nœuds rouges indiquent les
transformations qui ne sont pas reacutepareacutees tandis que les nœuds jaunes et verts indiquent les
reacuteparations Parmi ceux-ci les reacuteparations principales sont coloreacutees en vert on peut voir que
tous les anteacuteceacutedents des nœuds verts sont rouges Lrsquoinverse cependant nrsquoest pas vrai tous les
descendants drsquoune reacuteparation ne sont pas eux-mecircmes reacutepareacutes
146
Figure 62 ndash Illustration du concept de reacuteparation principale
622 EXEMPLES
Cette deacutefinition simple peut ensuite ecirctre appliqueacutee agrave une varieacuteteacute de langages de speacutecification
comme nous allons lrsquoillustrer agrave travers les exemples qui suivent
Logique propositionnelle
Comme premier exemple soit Φ lrsquoensemble des formules de logiques propositionnelles
avec les variables X = x1 xn pour certains n ge 1 Soit Σ lrsquoensemble des fonctions
X rarrgtperp que nous appellerons des eacutevaluations La relation de satisfaction |= est deacutefinie
comme σ |= ϕ =gt si et seulement si ϕ vaut vrai lorsque ses variables sont remplaceacutees par la
valeur de veacuteriteacute correspondante speacutecifieacutee par σ et sinon par perp
Soit b isin gtperp et i isin [1n] Nous noterons τxi 7rarrb lrsquoendomorphisme deacutefini comme
(τxi 7rarrb(σ))(x) =
b si x = xi
σ(x) sinon
Ce morphisme met xi agrave la place de b et laisse inchangeacute le reste de lrsquoeacutevaluation initiale
147
Lrsquoensemble des endomorphismes TΣ est alors deacutefini comme
TΣ =⋃
iisin[1n]
⋃bisingtperp
τxi 7rarrb
Deux transformations τx 7rarrb τ primey7rarrbprime commutent si x 6= y Ainsi un ensemble de transformations
T isin 2TΣ est bien deacutefini si et seulement si chaque endomorphisme qursquoil contient change la
valeur drsquoune variable diffeacuterente
Soit X = abc soit σ lrsquoeacutevaluation a 7rarrgtb 7rarrperpc 7rarrperp et ϕ la formule propositionnelle
aand b On peut facilement observer que σ 6|= ϕ Une reacuteparation est la transformation T =
τb 7rarrgt qui est T (σ) |= ϕ Cela correspond agrave lrsquointuition que lrsquoexplication de la fausseteacute
de ϕ est que b est faux alors qursquoil devrait ecirctre vrai Notons que bien que T prime = τb7rarrgtτc7rarrgt
rendrait aussi ϕ vrai ce nrsquoest pas une reacuteparation primaire puisque T sube T prime Cela correspond agrave
lrsquointuition que la valeur de veacuteriteacute de c est pas pertinente agrave la fausseteacute de ϕ
Soit σ lrsquoeacutevaluation a 7rarr gtb 7rarr perpc 7rarr perp et ϕ la formule propositionnelle ararr b Cette
fois deux reacuteparations primaires existent T = τb7rarrgt et T prime = τa7rarrperp Il est possible de
veacuterifier que les deux fixent la valeur de veacuteriteacute de lrsquoeacutevaluation initiale Informellement la
premiegravere transformation repreacutesente la fausseteacute de ϕ sur le fait que a est vrai tandis que lrsquoautre
lrsquoexplique plutocirct par le fait que b est faux mdash ce qui correspond bien agrave lrsquointuition Puisque
les deux reacuteparations sont incomparables aucune de ces explications nrsquoest laquo preacutefeacutereacutee raquo Nous
reviendrons sur ce concept plus tard
Logique du premier ordre
Le concept de reacuteparation peut facilement ecirctre leveacute agrave lrsquoensemble Φ de la formule logique de
premier ordre sur les domaines finis Soit A un ensemble drsquoeacuteleacutements un preacutedicat n-aire est
148
deacutefini comme une fonction p Anrarrgtperp Soit Pi lrsquoensemble des preacutedicats de lrsquoariteacute i Une
signature est un ensemble de preacutedicats P = p1 pm respectivement drsquoariteacute a1 am
Pour une signature donneacutee lrsquoensemble des eacuteleacutements de domaine est deacutefini comme
Σ = Pa1timesmiddotmiddot middottimesPam
La relation de satisfaction |= est deacutefinie comme |= (dϕ) =gt si ϕ est eacutevalueacute agrave vrai lors de
lrsquoeacutevaluation de preacutedicats tels que deacutefinis dans σ et perp deacutefinie autrement
Dans ce contexte un endomorphisme repreacutesentera le changement de la valeur de veacuteriteacute pour
une entreacutee drsquoun preacutedicat Soit pk un preacutedicat de lrsquoariteacute i (a1 ak)isinAn un k-tuple drsquoeacuteleacutements
de A et b isin gtperp La transformation τpk(a1ak)7rarrb est deacutefini comme le preacutedicat pprimek tel que
pprimek(x1 xk) =
b si x1 = a1 xn = an
pk(x1 xk) autrement
Lrsquoensemble des transformations pour pk noteacute Tpk est deacutefinie comme suit
Tpk ⋃
(a1ak)isinAn
⋃bisingtperp
τpk(a1ak)b
Lrsquoensemble global des transformations est alors
TΣ ⋃pisinP
Tp
De maniegravere similaire agrave la logique du premier ordre on peut veacuterifier que deux endomorphismes
149
1
2
3
4
5
(a) Graphe original
1
2
3
4
5
(b) Apregraves lrsquoapplication de T1
1
2
3
4
5
(c) Apregraves lrsquoapplication de T2
1
2
3
4
5
(d) Apregraves lrsquoapplication de T3
1
2
3
4
5
(e) Apregraves lrsquoapplication de T4
Figure 63 ndash Quelques reacuteparations possibles pour un coloriage de graphe deacutefectueux
commutent srsquoils opegraverent sur un preacutedicat diffeacuterent ou changent la valeur drsquoune entreacutee diffeacuterente
sur le mecircme preacutedicat
Soit A = 012 ϕ la formule du premier ordre forallx existy x 6= yand p(xy) et le preacutedicat binaire
p deacutefini comme (00)(01)(11) Il y a deux reacuteparations primaires pour restaurer la veacuteriteacute
de ϕ T1 = τp(20)7rarrgt T2 = τp(21)7rarrgt Cela correspond agrave lrsquointuition que la valeur 2
manque au moins un laquo partenaire raquo dans p et que 0 ou 1 pourraient chacun correspondre agrave ce
but
Soit A = [15] un ensemble de sommets de graphe p un preacutedicat binaire codant la relation
drsquoadjacence des arecirctes de graphe et q1q2q3 un ensemble de preacutedicats unaires tel que qi(x)
contient si et seulement si le sommet x ayant la couleur i Supposons que les preacutedicats p et q
soient deacutefinis en fonction de la repreacutesentation graphique montreacutee dans la figure 63a
150
Une solution au problegraveme de coloriage de graphe peut ecirctre repreacutesenteacutee par trois expressions
de premier ordre
ϕ1 forallx (q1(x)andnotq2(x)andnotq3(x))or (notq1(x)andq2(x)andnotq3(x))or (notq1(x)andnotq2(x)andq3(x))
ϕ2 forallx forally p(xy)rarr p(yx)
ϕ3 forallx forally p(xy)rarr ((q1(x)rarrnotq1(y))and (q2(x)rarrnotq2(y))and (q3(x)rarrnotq3(y)))
La premiegravere stipule que chaque sommet a une couleur exacte la seconde indique que la
relation drsquoadjacence est symeacutetrique et lrsquoexpression finale stipule qursquoaucun sommet adjacent ne
peut avoir la mecircme couleur On peut voir que le graphe original ne satisfait pas ϕ1andϕ2andϕ3
Il existe plusieurs reacuteparations principales dont certaines sont indiqueacutees ici
T1 = τq1(5)7rarrperpτq2(5)7rarrgt
T2 = τp(45)7rarrperpτp(54)7rarrperp
T3 = τq1(1)7rarrperpτq3(1)7rarrgtτq1(4)7rarrperpτq3(4)7rarrgt
T4 = τp(24)7rarrperpτp(42)7rarrperpτq1(4)7rarrperpτq3(4)7rarrgt
La reacuteparation T1 corrige le graphe en changeant la couleur du sommet 5 en rouge Notons que
cela neacutecessite non seulement de mettre q2(5) agrave gt mais aussi q1(5) agrave perp sinon la structure
reacutesultante violerait ϕ1 Une autre reacuteparation (non repreacutesenteacutee) change le sommet 5 en vert La
reacuteparation T3 modifie plutocirct la relation drsquoadjacence et coupe le sommet 5 du reste du graphe
de sorte que le conflit de couleur soit reacutesolu
151
Ceux-ci correspondent aux moyens laquo intuitifs raquo de fixer le coloriage du graphe Cependant
il existe plusieurs autres reacuteparations primaires qui reacutepondent agrave la deacutefinition Par exemple la
transformation T4 eacutechange les couleurs des sommets 1 2 et 4 Notons qursquoil srsquoagit bien drsquoune
reacuteparation primaire en ce sens qursquoaucun sous-ensemble de ces endomorphismes ne restaure la
satisfiabiliteacute de la formule drsquoorigine De la mecircme faccedilon T5 coupe le bord entre les sommets
2 et 4 et passe au vert Au total il y a 17 reacuteparations primaires distinctes dans cet exemple
particulier
Encore une fois il convient de noter que sans contexte suppleacutementaire aucune de ces reacutepara-
tions nrsquoest une explication possible de la fausseteacute de ϕ1andϕ2andϕ3 sur le graphe original
Logique de premier ordre eacutetendue
Lrsquoexemple preacuteceacutedent montre la neacutecessiteacute drsquoeacutetendre la seacutemantique de la logique du premier
ordre agrave des fonctions arbitraires au lieu de preacutedicats strictement booleacuteens Cela peut facilement
ecirctre fait comme suit Soit A1 An et B des ensembles finis Nous deacutesignerons par FA1AnrarrB
lrsquoensemble de toutes les fonctions (prodi Ai)rarr B Une signature est un tuple de la forme
〈(A11 A1n1)rarr B1 (Am1 Amnm)rarr Bm〉
tel que fi est une fonction de lrsquoariteacute ni avec le domaine A11 A1ni et image Bi La logique
des preacutedicats est le cas particulier ougrave B1 = middot middot middot= Bnm = gtperp dans ce cas lrsquoimage peut ecirctre
omise et ougrave Ai j sont tous les mecircmes de sorte que seule lrsquoariteacute doit ecirctre connue Si f est une
fonction Ararr B et x deacutesigne un eacuteleacutement de A nous eacutecrirons x f pour deacutesigner f (x) permettant
ainsi une certaine forme de notation laquo objet raquo pour les fonctions
Dans ce contexte les quantificateurs de premier ordre doivent preacuteciser sur quel Ai j ils srsquoap-
152
pliquent de sorte que les expressions deviennent de la forme forallx isin Ai j ϕ et exist isin Ai j ϕ
Les termes de base peuvent maintenant comparer les valeurs de deux termes de fonction en
utilisant nrsquoimporte quel opeacuterateur binaire approprieacute
Les endomorphismes sont toujours deacutefinis de la mecircme maniegravere que pour la logique classique
du premier ordre agrave condition qursquoils se reacutefegraverent aux valeurs approprieacutees dans le domaine et
lrsquoimage de la fonction soumise au changement
Notons que ce formalisme eacutetendu nrsquoajoute aucune expressiviteacute agrave la logique du premier ordre si
tous les ensembles sont maintenus finis Il doit cependant simplifier lrsquoexpression de nombreuses
proprieacuteteacutes
Avec ce formalisme modifieacute nous sommes precircts agrave envisager des reacuteparations dans les proprieacuteteacutes
de mise en page Web Soit E un ensemble drsquoeacuteleacutements de page P un ensemble de valeurs
de pixels et C un ensemble de couleurs CSS Sur ces trois ensembles nous deacutefinissons les
fonctions Erarr P appeleacutees left right top et bottom correspondants respectivement aux
coordonneacutees x et y des coins supeacuterieur gauche(top-left) et infeacuterieur droit (bottom-right)
drsquoun eacuteleacutement De plus nous deacutefinissons un ensemble S de seacutelecteurs CSS lrsquoeacutevaluation drsquoun
seacutelecteur CSS sur un document peut ecirctre formaliseacutee comme une fonction $ Srarr 2E qui pour
une expression de filtre donneacutee retourne le sous-ensemble de E correspondant au seacutelecteur
Les endomorphismes peuvent ecirctre deacutefinis pour chacune de ces fonctions et doivent ecirctre
eacutecrits en utilisant la notation introduite preacuteceacutedemment Par exemple τwidth(e)7rarrk correspond agrave
lrsquoendomorphisme deacutefinissant la valeur de la fonction width (largeur) pour lrsquoeacuteleacutement e isin E
agrave k et laissant tout le reste tel qursquoil est
On peut alors exprimer la proprieacuteteacute que tous les eacuteleacutements dans une liste avec lrsquoID laquo menu raquo
153
A list item
Another list item
A third list item
The last list item
[|
(a)
A list item
Another list item
A third list item
The last list item
[ |
[ |[ |
(b)
A list item
Another list item
A third list item
The last list item
[[|
|
[|
[|
(c)
Figure 64 ndash Trois reacuteparations pour lrsquoexemple web
devraient ecirctre aligneacutes agrave gauche comme lrsquoexpression de premier ordre suivante
forallx isin $(menu li) forally isin $(menu li) xleft= yleft
Notons que cette expression correspond directement agrave la traduction du premier ordre de
lrsquoexpression de Cornipickle montreacutee dans la section 62
Trouver les reacuteparations principales pour cette expression et le fragment de page montreacute dans la
figure 61a produit un certain nombre de solutions dont trois sont montreacutees dans la figure 64
Les deux premiegraveres sont assez intuitifs La figure 64a corrige la page en deacuteplaccedilant lrsquoeacuteleacutement
deacutesaligneacute de la liste avec les autres alors que la Figure 64b fait le contraire en alignant les
trois eacuteleacutements de liste les plus agrave gauche avec le second La figure 64c donne un exemple de
lrsquoune des nombreuses solutions restantes dans ce cas tous les eacuteleacutements de liste sont deacuteplaceacutes
vers une nouvelle position commune x qui srsquoavegravere ecirctre une coordonneacutee qursquoaucun eacuteleacutement
nrsquoavait dans la page drsquoorigine
Ce dernier exemple fournit une illustration graphique de la diffeacuterence entre le concept original
de teacutemoin et celui de reacuteparation Alors qursquoun teacutemoin dans ce cas met en eacutevidence une paire
choisie au hasard drsquoeacuteleacutements mal aligneacutes (comme montreacute dans la figure 61b)) une reacuteparation
choisit des eacuteleacutements speacutecifiques et en plus deacutecrit ce qui doit ecirctre fait avec eux afin de reacuteparer
la violation de la proprieacuteteacute Ceci est sans doute plus reacuteveacutelateur pour un utilisateur et constitue
154
agrave notre avis lrsquoun des principaux avantages de cette technique
63 CALCUL DE LA REacutePARATION
Le concept de base de reacuteparation preacutesenteacute dans la section preacuteceacutedente se precircte agrave quelques points
de discussion En particulier le nombre de reacuteparations principales possibles est potentiellement
eacuteleveacute et la tacircche de geacuteneacuterer ces reacuteparations peut donc srsquoaveacuterer tregraves coucircteuse
631 ALGORITHME DE BASE ET COMPLEXITEacute
Lrsquoalgorithme montreacute dans 1 est un algorithme pour iteacuterer toutes les reacuteparations possibles drsquoune
structure Il eacutenumegravere simplement toutes les transformations possibles T isin 2TΣ Il veacuterifie
drsquoabord si T est bien deacutefini (crsquoest-agrave-dire que toute paire drsquoendomorphismes commute) et si
une reacuteparation geacuteneacutereacutee preacuteceacutedemment (stockeacutee dans lrsquoensemble TS) est un sous-ensemble de
lrsquoactuelle Il veacuterifie enfin si lrsquoapplication de cette transformation corrige la structure drsquoorigine
Il passe agrave la prochaine transformation candidate si lrsquoune de ces trois situations se produit
Sinon il ajoute cette transformation agrave son ensemble et le renvoie comme son prochain eacuteleacutement
Theorem 1 Lrsquoalgorithme 1 est coheacuterent et complet
Soit T une sortie de transformation par lrsquoalgorithme Par construction T est une reacuteparation
puisqursquoelle est bien deacutefinie et elle corrige la valeur de veacuteriteacute de σ dans ϕ De plus au
moment ougrave T est sorti aucun des eacuteleacutements de TS nrsquoest un sous-ensemble de T Puisque TS
contient toutes les reacuteparations de cardinaliteacute infeacuterieure agrave T et que par construction toutes les
transformations de cardinaliteacute similaires ne peuvent pas ecirctre des sous-ensembles il srsquoensuit
que T nrsquoest incluse par aucune reacuteparation existante et est donc principale Cela prouve la
155
Algorithm 1 Algorithme geacuteneacuterique pour lrsquoiteacuteration des reacuteparations primaires
procedure COMPUTEREPAIRS(ϕσ 2TΣ)TS = 0for all T isin 2TΣ do Eacutenumeacutereacutes en cardinaliteacute croissante
if notWELLDEFINED(T ) thenskip
end ifif SUBSUMED(TTS) then
skipend ifif T (σ prime) 6|= ϕ then
skipend ifTSlarr TScupTyield T
end forend procedure
coheacuterence de lrsquoalgorithme
Le fait que toutes ces reacuteparations majeures soient finalement eacutenumeacutereacutees est garanti par le
fait que tous les sous-ensembles de TΣ sont geacuteneacutereacutes agrave un moment donneacute ce qui prouve la
compleacutetude
Cet algorithme a eacuteteacute impleacutementeacute en Java et est disponible publiquement 1 En raison de sa
simpliciteacute et de sa geacuteneacutericiteacute lrsquoimpleacutementation des expressions des structures et des iteacuterations
de reacuteparation ne repreacutesente que 325 lignes de code Lrsquoeacutenumeacuteration des reacuteparations est exposeacutee
agrave lrsquoutilisateur sous la forme drsquoune classe classique Java Iterator qui peut ecirctre utiliseacutee par
les meacutethodes traditionnelles hasNext() et next() pour passer agrave travers lrsquoensemble complet
de reacuteparations principales dans lrsquoordre croissant de cardinaliteacute Les classes speacutecifiques au
domaine deacutefinissants les constructions logiques propositionnelles et de premier ordre sont
constitueacutees drsquoenviron 500 lignes de code suppleacutementaires Il est facile de voir que le temps
1 httpsgithubcomliflabfault-finder
156
drsquoexeacutecution de cet algorithme est exponentiel en fonction de la taille de TΣ qui peut elle-mecircme
ecirctre exponentielle dans un autre facteur (deacutependant du problegraveme modeacuteliseacute) Dans la logique
du premier ordre (telle qursquoutiliseacutee par un fragment de Cornipickle) si a1 an est lrsquoariteacute
respective de chaque preacutedicat dans la signature le nombre drsquoendomorphismes est sumi 2|A|ai
pour un domaine donneacute A
Malgreacute cela il est possible de montrer que cet algorithme est limiteacute par une borne infeacuterieure
theacuteorique Un ensemble drsquoendomorphismes TΣ est dit complet si pour tout σ σ prime isin Σ il existe
une transformation bien deacutefinie T sube TΣ tel que T (σ) = σ prime
Theorem 2 Eacutetant donneacute un ensemble de structures Σ un ensemble drsquoexpressions de langage
Φ et un ensemble complet de transformations TΣ le problegraveme du calcul des reacuteparations
principales est aussi difficile que le problegraveme de satisfiabiliteacute pour Φ
Soit ϕ isinΦ une expression du langage Si ϕ est satisfaisable alors il existe une structure σ isin Σ
telle que σ |= ϕ Prenons une structure arbitraire σ prime isin Σ Puisque TΣ est complet il existe
au moins une transformation T sube TΣ telle que T (σ prime) = σ Prenons le plus petit ensemble
de ce genre par deacutefinition il srsquoagit drsquoune reacuteparation principale et sera finalement eacutenumeacutereacutee
par lrsquoalgorithme 1 Puisque lrsquoalgorithme est complet au contraire aucune reacuteparation ne sera
trouveacutee si ϕ nrsquoest pas satisfaisable
632 REacuteDUCTION DU NOMBRE DE SOLUTIONS CANDIDATES
Ces reacutesultats de complexiteacute de base justifient une discussion sur la reacuteduction du nombre de
reacuteparations potentielles qui doivent ecirctre exploreacutees
157
Suppression des endomorphismes
Le nombre de transformations potentielles peut drsquoabord ecirctre reacuteduit en supprimant les endomor-
phismes dont on sait qursquoils sont impossibles en fonction du contexte Par exemple supposons
que les symboles propositionnels a et b dans lrsquoexemple 622 correspondent respectivement
aux assertions laquo le client paie pour un objet raquo et laquo le client reccediloit lrsquoarticle raquo On pourrait
supposer qursquoune eacutevaluation ougrave a est vraie ne peut pas ecirctre modifieacutee en la rendant fausse cela
correspondrait au fait qursquoune action effectueacutee par un acteur ne peut ecirctre annuleacutee Dans un tel
contexte seuls les endomorphismes reacuteglant les fausses variables agrave vrai seraient consideacutereacutes
Dans le cas des graphes comme dans lrsquoexemple 622 on pourrait imposer des restrictions
sur les changements qui lui sont autoriseacutes par exemple on pourrait dire que les arecirctes
existantes doivent rester inchangeacutees ou que seuls des sommets speacutecifiques peuvent ecirctre
colorieacutes diffeacuteremment Ceci encore une fois a pour effet de preacutefeacuterer certaines transformations
aux autres et reacuteduit globalement le nombre de reacuteparations disponibles
Transformations en groupes
La granulariteacute des endomorphismes disponibles peut eacutegalement ecirctre modifieacutee Dans le cas de
lrsquoexemple de coloriage de graphe il est eacutevident qursquoaucune reacuteparation ne consistera jamais
en un seul endomorphisme τqi(x)7rarrgt La raison est que lrsquoexpression ϕ1 requiert que chaque
sommet ait exactement une couleur assigner qi agrave gt pour un sommet implique que le q j
restant pour j 6= i soit mis agrave perp On peut donc deacutefinir un nouvel ensemble de transformations
158
approprieacutees au contexte repreacutesentant les changements de couleur
TC =⋃xisinA
⋃iisin[13]
j 6=ik 6= j 6=i
τqi(x)7rarrgtτq j(x)7rarrperpτqk(x)7rarrperp
De mecircme comme la relation drsquoadjacence est symeacutetrique mettre p(xy) agrave gt (resp perp) ne
peut pas ecirctre fait sans mettre p(yx) agrave gt (resp perp) Au lieu de consideacuterer les changements
individuels aux seules entreacutees de p on peut deacutefinir un ensemble de changements de bord
TE =⋃xisinA
⋃yisinA
⋃bisingtperp
τp(xy)7rarrbτp(yx)7rarrb
On pourrait alors utiliser TCcupTE comme lrsquoensemble des transformations au lieu de TΣ Bien
que cela ne change rien agrave la theacuteorie sur les solutions actuelles le fait que TCcupTE soit plus petit
que TΣ a un effet positif sur la performance drsquoun algorithme drsquoeacutenumeacuteration dans la pratique
La mecircme chose peut ecirctre dite des endomorphismes de lrsquoexemple 622 Plutocirct que de consideacuterer
tous les changements individuels des coordonneacutees (xy) des quatre coins de chaque eacuteleacutement
on pourrait deacutefinir des sous-ensembles correspondants agrave des modifications plus intuitives par
exemple lrsquoensemble des deacuteplacements horizontaux pourrait ecirctre deacutefini comme
TH =⋃eisinE
⋃pisinP
τleft(e) 7rarr pτright(e) 7rarr (τright(e)minus p)
On peut alors limiter la recherche pour les reacuteparations agrave celles qui sont faites uniquement
des deacuteplacements (horizontaux ou verticaux) ou des redimensionnements (horizontaux ou
verticaux) drsquoeacuteleacutements etc
159
(a) Le reacutesultat attendu
(b) Problegraveme drsquoalignement
Figure 65 ndash Eacuteleacutements mal aligneacutes capture et suggestion de correction
64 EXEMPLES
Les trois figures suivantes montrent des exemples simples de bugs montrant la capaciteacute de
lrsquooutil agrave rechercher des candidats de correction en se basant sur lrsquoapproche proposeacutee Les
figures montrent les verdicts qui sont des suggestions donneacutees par lrsquooutil pour chacun des cas
Il est a noteacute que le processus prend entre 2 et 20 millisecondes pour trouver un candidat (sans
prendre compte du temps drsquoeacutevaluation)
Exemple 1 eacuteleacutements mal aligneacutes Dans ce cas 65 la suggestion est de deacuteplacer 69 pixels
vers la gauche lrsquoeacuteleacutement qui a lrsquoidentifiant ID=2
160
(a) Le reacutesultat attendu
(b) Problegraveme de chevauchement
Figure 66 ndash Eacuteleacutements qui se chevauchent capture et suggestion de correction
Exemple 2 eacuteleacutements qui se chevauchent La suggestion est de deacuteplacer le bat de lrsquoeacuteleacutement
avec lrsquoID 11 agrave 126 pixels 66
Exemple 3 eacuteleacutement qui deacuteborde de son conteneur La suggestion est de deacuteplacer la
droite de lrsquoeacuteleacutement avec lrsquoID 14 agrave 1277 pixels 67
161
(a) Le reacutesultat attendu
(b) Problegraveme de deacutebordement
Figure 67 ndash Eacuteleacutement qui deacuteborde de son conteneur capture et suggestion de correction
CHAPITRE 7
CONCLUSION GEacuteNEacuteRALE
Les applications web se multiplient et se diversifient et les exigences de leurs utilisateurs srsquoac-
centuent et srsquoamplifient avec La relation application web-utilisateur est assureacutee uniquement
via la page Web Pour que cette relation soit tenue la page Web doit ecirctre entretenue et reacutepondre
agrave un ensemble de critegraveres se charger rapidement fournir le service deacutesireacute et ecirctre agreacuteable agrave
voir sur tous les appareils des ordinateurs de bureau ou portables des tablettes et teacuteleacutephones
mobiles Cependant la complexiteacute de la relation entre HTML CSS et JavaScript engendre des
difficulteacutes consideacuterables pour la mise en page des applications web le mecircme document peut
ecirctre afficheacute dans une varieacuteteacute de tailles de reacutesolutions de navigateurs et mecircme de peacuteripheacuteriques
entravant de ce fait la mise en page Les laquo bugs raquo de mise en page connaissent par conseacutequent
une preacutesence remarquable allant de problegravemes de particulariteacutes relativement simple tels que
des eacuteleacutements superposeacutes ou incorrectement aligneacutes agrave des problegravemes plus seacuterieux compromet-
tant la fonctionnaliteacute de lrsquointerface utilisateur Les tentatives bien que rares visant agrave reacutesoudre
ces problegravemes restent incapables de cerner tous les aspects de ceux-ci (problegravemes)
Nous distinguons dans ce contexte deux familles drsquoapproches servant agrave tester les interfaces
des applications web lrsquoapproche visuelle se basant sur la comparaison des captures drsquoeacutecran
pixel par pixel et lrsquoapproche deacuteclarative fonctionnant directement sur des informations sur
163
la mise en page Si dans la premiegravere qui fonctionne mal avec les donneacutees dynamiques le
deacuteveloppeur de test se heurte agrave lrsquoimpossibiliteacute de comparer des images de diffeacuterentes tailles
drsquoeacutecran il doit se soumettre dans la seconde aux exigences des descriptionsscripts de test
assez verbeux en deacutecrivant les regravegles de son interface graphique
Lrsquoapproche que nous proposons agrave savoir lrsquooutil Cornipickle offre les avantages suivants elle
fonctionne sur la majoriteacute de combinaisons navigateurssystegravemes drsquoexploitation sans recourir
aux plugins speacutecifiques au navigateur (ou limiteacutes par le navigateur) De plus elle permet
1 lrsquoeacutevaluation des speacutecifications en fonction des informations recueillies sur le client en se
dispensant de lrsquoeacutevaluation statique de HTML et CSS du cocircteacute serveur 2 lrsquointerpreacutetation des
speacutecifications de telle maniegravere agrave eacuteviter une charge de calcul excessive dans le navigateur
3 lrsquoutilisation drsquoun autre langage que JavaScript pour lrsquoimpleacutementation 4 la gestion des
proprieacuteteacutes comportementales impliquant plus drsquoun instantaneacute de page par lrsquooutil 5 la pos-
sibiliteacute agrave lrsquoutilisateur drsquoajouter de supprimer ou de modifier les speacutecifications eacutevalueacutees par
lrsquooutil 6 lrsquoexclusiviteacute drsquoexprimer agrave travers un langage deacuteclaratif des proprieacuteteacutes agrave propos du
document (Document Object Model) et des proprieacuteteacutes CSS drsquoune page Web 7 la potentialiteacute
de rechercher et deacutetecter automatiquement les bugs comportementaux et RWD (Responsive
Web Design) dans les applications web 8 la reacuteparation en fournissant un algorithme de base
pour calculer les transformations
Le prototype de preuve de concept de Cornipickle a montreacute des reacutesultats prometteurs dans sa
capaciteacute agrave exprimer facilement les conditions de bugs de mise en page dans les applications
web et agrave les deacutetecter efficacement dans des exemples de pages de plus de 35 applications
reacuteelles
Lrsquoefficaciteacute de notre outil Cornipickle nous a permis drsquoattraper automatiquement certains
problegravemes communs rencontreacutes dans les applications web modernes (RIA et RWD) Les
164
proprieacuteteacutes de Cornipickle garantissent que les pages drsquoune application suivent diffeacuterents
types de contraintes en particulier le seacutequenccedilage possible des pages qui est lrsquoobjectif de ce
volet de notre travail En combinant les performances de Crawljax pour explorer les eacutetats
de lrsquoapplication (crawler state-aware) et un stateful test oracle (speacutecifications de logiques
temporelles du premier ordre) dans Cornipickle nous avons obtenu des reacutesultats prometteurs
Une petite application a eacuteteacute deacuteveloppeacutee et inteacutegreacutee afin de tester le rendu visuel dans les
diffeacuterentes fenecirctres possibles afin drsquoattraper les deacutefauts RWD
Notre solution a quelques limites et surmonter ces limitations pourrait ecirctre la base de futurs
travaux Lrsquoutilisation de Cornipickle nous limite agrave des contraintes se reacutefeacuterant uniquement aux
eacuteleacutements qui sont afficheacutes Cela rend les bugs causeacutes au niveau backend (cocircteacute serveur) parfois
difficiles agrave attraper il est neacutecessaire de trouver les eacuteleacutements afficheacutes qui peuvent indirectement
repreacutesenter les eacutetats du serveur Dans la mecircme ligne si Crawljax ne notifie pas un changement
drsquoeacutetat lorsque le DOM change il nrsquoest pas possible drsquoeacutevaluer cette page ougrave un bug aurait pu
se produire En outre lorsqursquoune proprieacuteteacute est eacutevalueacutee agrave false elle est fausse pour le reste
de lrsquoanalyse et aucun autre bug ne peut ecirctre intercepteacute avec cette proprieacuteteacute Cela a causeacute un
problegraveme avec la deacutecouverte de bugs RWD observables car la plupart des eacutechecs ne sont pas
observables et les proprieacuteteacutes devaient trouver un bug observable comme premier bug
De plus la capaciteacute de Cornipickle agrave renvoyer une explication utile de la violation drsquoune
proprieacuteteacute sur un document Web donneacute est limiteacutee Crsquoest pourquoi nous avons introduit une
deacutefinition du concept de reacuteparation dont le calcul fournit des informations plus preacutecises sur les
changements requis pour une structure afin de satisfaire une speacutecification donneacutee Lrsquoeacutetude des
reacuteparations et leur calcul fait partie du travail en cours et de nombreux problegravemes sont encore
ouverts Par exemple un calcul efficace des reacuteparations repose sur la suppression du plus
grand nombre possible de transformations candidates par conseacutequent des techniques pour
identifier facilement des endomorphismes qui ne peuvent jamais faire partie drsquoune solution
165
pourraient ecirctre rechercheacutees De mecircme nous preacutevoyons drsquoeacutetudier des techniques qui pourraient
geacuteneacuterer lrsquoensemble des reacuteparations directement agrave partir de la speacutecification et de la structure
deacutefectueuse plutocirct que drsquoutiliser lrsquoalgorithme brut de geacuteneacuteration et de test preacutesenteacute
Le concept de calcul des reacuteparations est en cours de construction et il reste agrave eacutetablir ses liens
avec les travaux connexes Comme nous lrsquoavons vu dans la section preacuteceacutedente trouver des
reacuteparations concerne le concept de reacutesolution de satisfiabiliteacute (SAT) et plus preacuteciseacutement le
problegraveme du SAT increacutementiel [64] Les solveurs SAT traditionnels sont neacutecessaires pour
trouver un seul modegravele drsquoexpression En SAT increacutementiel un solveur trouve un premier
modegravele drsquoexpression mais peut eacutegalement ecirctre demandeacute agrave plusieurs reprises de fournir des
modegraveles suppleacutementaires Lorsqursquoun ensemble de transformations est termineacute lrsquoiteacuteration sur
les modegraveles revient agrave effectuer des iteacuterations sur les reacuteparations
BIBLIOGRAPHIE
[1] Alm specifications examples http auckland-
layoutsourceforgenetexamplesindexhtml
[2] Applitools visual test automation httpwwwapplitools
comAccessed25April2016
[3] Blackout repport httpssiteshksharvardeduhepgPapersNYISO
blackoutreport8Jan04pdf
[4] Bugs catastrophiques httpwwwslidesharenetwearesocialsg
social-media-for-travel-brands
[5] critical-rendering-path httpsdevelopersgooglecomwebfundamentals
performancecritical-rendering-path
[6] Deacutefinition du viewport httpswwwdefinitions-marketingcomdefinition
viewport
[7] Exemple webspecwatij https gistgithubcomtux2323954186
[8] Froont httpfroontcom
167
[9] Galen httpwwwswtestacademycomgalen-framework
[10] galen framework 2017 httpgalenframeworkcom
[11] howbrowserswork 2017 HTTPtaligarsielcomProjects
howbrowserswork1html
[12] Html and css w3c standards httpswwww3orgstandardswebdesign
htmlcss
[13] Http response httpswwww3orgProtocolsrfc2616rfc2616-sec6html
sec6
[14] http coursescsvteduprofessionalismtherac_25therac_1html httpcourses
csvteduprofessionalismTherac_25Therac_1html
[15] http wearesocialsg httpwearesocialsg
[16] http wwwcnncom2003us0814poweroutage httpwwwcnncom2003US
0814poweroutage
[17] http wwwyfolirenethumrhumeur13htm httpwwwyfolirenethumr
humeur13htm
[18] Les bases de sahiscript https sahiprocomdocsscriptingsahi-scripting-basicshtml
[19] mobile and tablet internet usage exceeds desktop for first
time worldwide httpgsstatcountercompress
mobile-and-tablet-internet-usage-exceeds-desktop-for-first-time-worldwide
[20] Phantomcss 2017 httpsgithubcomHuddlePhantomCSS
168
[21] Principe de fonctinement de sahi https wwwthoughtworkscominsightsblogintroduction-
sahi-part-1
[22] Respondr httprespondrio
[23] Responsinator httpswwwresponsinatorcom
[24] Responsivepxcom httpresponsivepxcom
[25] Reuters us-blackout-newyork 2003 https
wwwreuterscomarticleus-blackout-newyork
spike-in-deaths-blamed-on-2003-new-york-blackout-idUSTRE80Q07G20120127
[26] Rwdbookmarklet httpswwwsitepointcom
responsive-web-design-tool
[27] Screenfly httpquirktoolscomscreenfly
[28] Software bugs found to be cause of toyota acceleration death httpswwwgoogle
frampswwwcomputerworldcomarticle2573466disaster-recovery
software-failure-cited-in-august-blackout-investigationamphtml
[29] Software failure cited in august blackout investigation https
wwwcomputerworldcomarticle2573466disaster-recovery
software-failure-cited-in-august-blackout-investigationhtml
[30] Utilisation de capybara https wwwsitepointcombasics-capybara-improving-tests
[31] Vpresizer httplabmaltewassermanncomviewport-resizer
[32] Washingtonpost toyota reaches 12-billion settlement to end criminal
probe2014 httpswwwwashingtonpostcombusinesseconomy
169
toyota-reaches-12-billion-settlement-to-end-criminal-probe2014
03195738a3c4-af69-11e3-9627-c65021d6d572_storyhtmlutm_term=
4826d81e2aa6
[33] Watir http watircom
[34] websiteresponsivetest httpwwwwebsiteresponsivetestcom
[35] A Arora and M Sinha Web application testing A review on techniques tools and state
of art International Journal of Scientific Iamp Engineering Research 3(2) 1ndash6 2012
[36] K Benjamin G Von Bochmann M E Dincturk G-V Jourdan and I V Onut A stra-
tegy for efficient crawling of rich internet applications In 11th international conference
on Web engineering serICWErsquo11 page 74ndash89 Heidelberg Springer-Verlag 2011
[37] Tim Berners-Lee Roy Fielding and Larry Masinter Uniform resource identifier (URI)
Generic syntax Technical report January 2005 RFC 3986
[38] Oussama Beroual Francis Guerin and Sylvain Halleacute Searching for behavioural bugs
with stateful test oracles in web crawlers In 10th IEEEACM International Workshop on
Search-Based Software Testing SBSTICSE 2017 Buenos Aires Argentina May 22-23
2017 pages 7ndash13 2017
[39] T-H Chang T Yeh and RC Miller Gui testing using computer vision In the SIGCHI
Conference on H man Factors in Computing Systems CHI rsquo10 pages 1535ndash1544 New
York NY USA may 2010 ACM
[40] S Choudhary E Dincturk S Mirtaheri G-V Jourdan G Bochmann and I Onut
Building rich internet applications models Example of a better strategy In Web
Engineering ser Lecture Notes in Computer Science F Daniel P Dolog and Q Li
volume 7977 page 291ndash305 Springer Berlin Heidelberg 2013
170
[41] S Choudhary M E Dincturk S M Mirtaheri A Moosavi G von Bochmann G-V
Jourdan and I-V Onut Crawling rich internet applications the state of the art In
CASCON page 146ndash160 IBM Corp 2012
[42] Shauvik Roy Choudhary Mukul R Prasad and Alessandro Orso X-PERT accurate
identification of cross-browser issues in web applications In David Notkin Betty H C
Cheng and Klaus Pohl editors 35th International Conference on Software Engineering
ICSE rsquo13 San Francisco CA USA May 18-26 2013 pages 702ndash711 IEEE ACM
2013
[43] V Dallmeier M Burger T Orth and A Zeller Webmate Generating test cases for
web 20 In D Winkler S Biffl J Bergsmann (Eds) SWQD volume 133 of Lecture
Notes in Business Information Processing page 55ndash69 Springer 2013
[44] M E Dincturk ldquomodel-based crawling ndash an approach to design efficient crawling
strategies for rich internet applications Masterrsquos thesis EECS - University of Ottawa
2013
[45] M E Dincturk S Choudhary G von Bochmann G-V Jourdan and I-V Onut A
statistical approach for efficient crawling of rich internet applications ICWE page
362ndash369 2012
[46] Mustafa Emre Model-based Crawling - An Approach to Design Efficient Crawling
Strategies for Rich Internet Applications PhD thesis University of Ottawa 2013
[47] Jesse James Garrett Ajax A new approach to web applications - adaptive path 2005
[48] Alan Grosskurth and Michael Godfrey A case study in architectural analysis The
evolution of the modern web browser Software Maintenence and Evolution Research
and PracticeEMSE 2007
171
[49] Allan Grosskurth and Michael Godfrey A reference architecture for web browsers
Software Maintenence and Evolution Research and Practice page 1ndash7 2006
[50] A Guttman R-trees a dynamic index structure for spatial searching June 1984
[51] Sylvain Halleacute Nicolas Bergeron Francis Guerin Gabriel Le Breton and Oussama
Beroual Declarative layout constraints for testing web applications J Log Algebr Meth
Program 85(5) 737ndash758 2016
[52] Sylvain Halleacute and Oussama Beroual Fault localization in web applications via model
finding In Proceedings First Workshop on Causal Reasoning for Embedded and safety-
critical Systems Technologies CRESTETAPS 2016 Eindhoven The Netherlands 8th
April 2016 pages 55ndash67 2016
[53] Sylvain Halleacute and Roger Villemaire Constraint-based invocation of stateful web services
The Beep Store (case study) In 4th International ICSE Workshop on Principles of
Engineering Service-Oriented Systems PESOS 2012 June 4 2012 Zurich Switzerland
pages 61ndash62 2012
[54] S Halleacute G Le Breton F Maronnaud A Blondin Masseacute and S Gaboury Exhaustive
exploration of ajax web applications with selective jumping In ICST page 243ndash252
IEEE Computer Society 2014
[55] Arnaud Le Hors Philippe Le Heacutegaret Lauren Wood Gavin Nicol Jonathan Ro-
bie Mike Champion and Steve Byrne Document object model level 2 core 2000
http wwww3orgTRDOM-Level-2-Core
[56] Jaakko Jaumlrvi Mat Marcus Sean Parent John Freeman and Jacob Smith Algorithms for
user interfaces In Proceedings of the Eighth International Conference on Generative
172
Programming and Component Engineering GPCE rsquo09 pages 147ndash156 New York NY
USA 2009 ACM
[57] Jaakko Jaumlrvi Mat Marcus Sean Parent John Freeman and Jacob N Smith Property
models from incidental algorithms to reusable components In Yannis Smaragdakis and
Jeremy G Siek editors GPCE pages 89ndash98 ACM 2008
[58] Sonal Mahajan and William G J Halfond WebSee A tool for debugging HTML pre-
sentation failures In 8th IEEE International Conference on Software Testing Verification
and Validation ICST 2015 Graz Austria April 13-17 2015 pages 1ndash8 2015
[59] Ethan Marcotte Responsive web design Eyrolles 4 edition 2013
[60] A Mesbah A van Deursen and S Lenselink Crawling Ajax-based web applications
through dynamic analysis of user interface state changes ACM Transactions on the Web
(1) 6 2012
[61] S M Mirtaheri D Zou G V Bochmann G-V Jourdan and I V Onut Dist-ria crawler
A distributed crawler for rich internet applications In 8th International Conference on
P2P Parallel Grid Cloud and Internet Computing pages 105ndash112 IEEE Computer
Society Washington 2013
[62] Seyed M Mirtaheri Mustafa Emre Dincturk Salman Hooshmand Gregor V Bochmann
and Guy-Vincent Jourdan A brief history of web crawlers In CASCON rsquo13 Proceedings
of the 2013 Conference of the Center for Advanced Studies on Collaborative Research
pages 40ndash54 IBM Corp Riverton NJ USA ccopy2013 2013
[63] MTamm Http response httpsdeslidesharenetMichaelTamm
fighting-layout-bugs
173
[64] Alexander Nadel and Vadim Ryvchin Efficient SAT solving under assumptions In SAT
pages 242ndash255 2012
[65] C Olston and M Najork Web crawling Foundations and Trends in Information
Retrieval 4 175ndash246 2010
[66] Sean Parent Mat Marcus and Foster Brereton ASL overview Technical report Adobe
Systems 2007 httpstlabadobecomgroup__asl__overviewhtml
[67] Pedro A Szekely Piyawadee Noi Sukaviriya Pablo Castells Jeyakumar Muthukumara-
samy and Ewald Salcher Declarative interface models for user interface construction
tools the MASTERMIND approach In Leonard J Bass and Claus Unger editors
Proceedings of the IFIP TC2WG27 Working Conference on Engineering for Human-
Computer Interaction volume 45 of IFIP Conference Proceedings pages 120ndash150
Chapman amp Hall 1995
[68] Seyed M Mir Taheri Distributed Crawling of Rich Internet Applications PhD thesis
University of Ottawa 2015
[69] Michael Tamm Fighting layout bugs 2009 httpswwwyoutubecomwatchv=
WY3C6FHqSqQ
[70] Hideo Tanida Mukul R Prasad Sreeranga P Rajan and Masahiro Fujita Automated
system testing of dynamic web applications volume 303 page 181ndash196 Springer Berlin
Heidelberg 2013
[71] te (testing experience) The Magazine for Professional Testers Test automation - does it
make sense a simplified automation solution using watij wwwtestingexperiencecom
[72] Thomas A Walsh Gregory M Kapfhammer and Phil McMinn Automated layout
failure detection for responsive web pages without an explicit oracle In Proceedings
174
of the 26th ACM SIGSOFT International Symposium on Software Testing and Analysis
Santa Barbara CA USA July 10 - 14 2017 pages 192ndash202 2017
[73] Thomas A Walsh Gregory M Kapfhammer and Phil McMinn Redecheck an auto-
matic layout failure checking tool for responsively designed web pages In Proceedings
of the 26th ACM SIGSOFT International Symposium on Software Testing and Analysis
Santa Barbara CA USA July 10 - 14 2017 pages 360ndash363 2017
[74] Thomas A Walsh Phil McMinn and Gregory M Kapfhammer Automatic detection
of potential layout faults following changes to responsive web pages (N) In 30th
IEEEACM International Conference on Automated Software Engineering ASE 2015
Lincoln NE USA November 9-13 2015 pages 709ndash714 2015
vii
42 Une page simple seacuterialiseacutee en JSON 10143 Une capture drsquoeacutecran de Cornipickle en action 10244 Un document DOM simple (a) Structure HTML (b) Repreacutesentation en arbre
DOM Seuls les noms des eacuteleacutements sont afficheacutes les attributs et valeursrestants sont omis pour plus de clarteacute 111
45 Exemple de code jQuery veacuterifiant que deux eacuteleacutements ont le mecircme texte 116
51 Le bug de connexions multiples Un utilisateur deacutejagrave connecteacute se voit proposerlrsquooption de se reconnecter 121
52 Le bug des paniers multiples Des boutons pour creacuteer un panier et ajouter desarticles au panier coexistent sur la mecircme page 121
53 Le bug de la suppression drsquoun panier inexistant Des boutons pour retirer dupanier et creacuteer un panier coexistent sur la mecircme page 122
54 Flux drsquointeraction et de seacuterialisation (Crawljax-Cornipickle) 12655 Le code neacutecessaire pour attraper le bug des connexions multiples en utilisant
Crawljax sans Cornipickle 12956 Temps de calcul de lrsquointerpreacuteteur en fonction du nombre drsquoeacuteleacutements dans la
page 13557 Temps de calcul incluant la seacuterialisation de la page par la sonde JavaScript et
lrsquointerpreacutetation de la proprieacuteteacute en fonction du nombre drsquoeacuteleacutements dans la page136
61 Exemple drsquoune erreur de mise en page Web simple (a) lrsquoun des eacuteleacutementsde la liste est incorrectement aligneacute avec les autres (b) un teacutemoin (witness)produit par lrsquooutil Cornipickle 143
62 Illustration du concept de reacuteparation principale 14663 Quelques reacuteparations possibles pour un coloriage de graphe deacutefectueux 14964 Trois reacuteparations pour lrsquoexemple web 15365 Eacuteleacutements mal aligneacutes capture et suggestion de correction 15966 Eacuteleacutements qui se chevauchent capture et suggestion de correction 16067 Eacuteleacutement qui deacuteborde de son conteneur capture et suggestion de correction 161
LISTE DES TABLEAUX
11 Statistiques des parts drsquoutilisation des navigateurs dans le monde entre mars2015 et mars 2016 24
21 Sites et applications web pour lesquelles au moins un bug de mise en page aeacuteteacute trouveacute 38
31 Limites et diffeacuterences entre trois outils majeurs des approches existantes 95
41 La grammaire BNF pour Cornipickle (Partie I) 10442 La grammaire BNF pour Cornipickle (Partie II) 10643 Extensions de la grammaire BNF pour Cornipickle 10844 La seacutemantique formelle de Cornipickle aaprime isin A sont les noms drsquoattributs
DOM v isin V est une valeur drsquoattribut c isin C est un seacutelecteur CSS ξ et ξ prime
sont des noms de variables ν ν prime isin N sont les nœuds DOM et ϕ et ψ sont deseacutenonceacutes Cornipickle quelconques Lorsque t est vide Always srsquoeacutevalue agrave V raiet Eventually et Next srsquoevaluent agrave Faux 113
61 La deacutefinition reacutecursive de la fonction de calcul du verdict ω 140
INTRODUCTION
Le mot bug qui signifie en anglais laquo insecte raquo et qui a eacuteteacute franciseacute pour devenir laquo bogue raquo
a vu le jour dans les anneacutees quarante agrave la suite de la panne qursquoa connu le dernier cri des
ordinateurs de lrsquoeacutepoque le Mark II Comme son nom lrsquoindique la cause eacutetait un insecte qui
srsquoeacutetait introduit dans un relais eacutelectromeacutecanique de celui-ci La panne fut deacutecouverte par la
brillante matheacutematicienne et pionniegravere de la programmation Grace Hopper Il srsquoagit du tout
premier vrai bug informatique car on utilisait deacutejagrave le mot pour deacutesigner des problegravemes dans les
appareils eacutelectriques [17] Depuis le mot bug est devenu synonyme de tout dysfonctionnement
ou anomalie drsquoun programme
Le monde drsquoaujourdrsquohui est piloteacute par des ordinateurs dans tous les domaines eacutenergeacutetique
judiciaire sanitaire militaire etc De ce fait la manifestation drsquoun bug peut entraicircner des
deacutesordres des perturbations voire des catastrophes Les trois derniegraveres deacutecennies ont connu
une multitude de bugs de grande envergure
Parmi les plus importants mentionnons une interruption en 2003 de plusieurs jours dans
lrsquoalimentation en eacutelectriciteacute drsquoune cinquantaine de millions drsquoameacutericains Lors de cet incident
une douzaine de personnes ont mecircme trouveacute la mort empoisonneacutees au monoxyde de carbone
en tentant de remeacutedier agrave ce problegraveme par des geacuteneacuterateurs au diesel On a compteacute plus de
2
six milliards de dollars de deacutegacircts mateacuteriels A lrsquoorigine de cette panne une paralysie totale
provoqueacutee par deux logiciels chargeacutes du controcircle de la production qui essayaient de modifier
le mecircme fichier simultaneacutement [25 3 16 29]
Mentionnons eacutegalement des centaines drsquoaccidents de la route meurtriers survenus entre 2009
et 2011 et dont les victimes eacutetaient les proprieacutetaires de la Lexus ES350 du constructeur Toyota
Les conducteurs perdaient la maicirctrise du veacutehicule une fois qursquoil atteignait la vitesse de 150
kmh puisque ce seuil entraicircnait la deacutesactivation de la peacutedale de frein Durant deux anneacutees les
chauffeurs sont accuseacutes par Toyota de confondre les peacutedales de frein et drsquoacceacuteleacuteration alors
qursquoune expertise finit par reacuteveacuteler une deacutefaillance dans lrsquoordinateur de bord Les pertes sont
estimeacutees dans ce cas agrave 24 milliards de dollars [32 28]
Parmi les bugs informatiques les plus meurtriers on compte eacutegalement un dysfonctionnement
en 1987 de la machine de radiotheacuterapie Therac 25 chargeacutee drsquoadministrer aux patients la
quantiteacute de radioactiviteacute qui leur est prescrite Agrave certaines occasions la machine leur donne
vingt fois la dose mortelle occasionnant de ce fait la blessure drsquoun patient et la mort de
cinq autres Le logiciel destineacute agrave veiller au bon positionnement et agrave la preacutesence de la plaque
meacutetallique censeacutee recevoir le rayon pour le filtrer et le concentrer a malheureusement failli agrave
son rocircle [14]
Tous ces exemples sont des bugs aux conseacutequences catastrophiques Heureusement tous les
bugs ne sont pas aussi deacutevastateurs mais ils peuvent neacuteanmoins srsquoaveacuterer nuisibles et reacutepandus
Crsquoest le cas drsquoun type de bug auquel les informaticiens font face agrave chaque instant agrave savoir les
bugs de mise en page dans les interfaces des applications web qui se trouvent agrave lrsquoorigine des
problegravemes drsquoaffichage rencontreacutes quotidiennement dans les interfaces web Agrave cet eacutegard des
chiffres datant de 2015 lieacutes agrave Internet donnent matiegravere agrave reacuteflexion Le reacuteseau compte plus de
trois milliards drsquointernautes dont deux milliards sont inscrits sur les reacuteseaux sociaux Plus de
3
huit cent mille nouveaux sites Internet sont mis en ligne chaque jour [15] [4] Par conseacutequent
le nombre drsquoutilisateurs des applications web est consideacuterable et le nombre de personnes
toucheacutees par les bugs drsquointerfaces reacutesultant de ces applications est eacutenorme Lrsquoenjeu de ce fait
est tregraves grand sur tous les plans
La bonne conduite drsquoune application web exige une bonne apparence visuelle des pages web
sans aucune deacutefaillance drsquoaffichage facilitant ainsi lrsquoutilisation de lrsquoapplication et offrant un
meilleur service agrave lrsquoutilisateur Trois types de problegravemes drsquoaffichage sont releveacutes un premier
type qualifieacute de non gecircnant tel qursquoun deacutebordement drsquoun paragraphe de sa bordure ou un
problegraveme drsquoalignement ou mecircme une sorte de caractegravere speacutecial mal afficheacute (mojibake) Un
deuxiegraveme type qualifieacute de gecircnant telle qursquoune image deacuteplaceacutee qui couvre un paragraphe ou
une autre partie de la page
Par contre le troisiegraveme type est plus grave et peut conduire agrave un blocage de lrsquoapplication dont
les effets risquent drsquoecirctre seacuterieux compromettant la fonctionnaliteacute de lrsquointerface utilisateur Un
4
exemple de bug qui affecte la fonctionnaliteacute de lrsquoapplication Le mauvais fonctionnement des
boutons de nombreuses applications montrent des eacuteleacutements superposeacutes qui se comportent
comme des laquo pop-ups raquo dans la fenecirctre Cependant dans un certain nombre de cas les
boutons de ces fenecirctres sont inopeacuterants cliquer dessus plusieurs fois ne produit aucun effet
Ce problegraveme a eacuteteacute observeacute dans des sites aussi varieacutes qursquoAmerican Airlines Dropbox et
BitBucket Dans certains cas lrsquoutilisateur est effectivement bloqueacute dans la fenecirctre contextuelle
ou la page qui contient le bouton et ne peut pas continuer sans forcer un rechargement complet
du document
Cependant les travaux visant agrave reacutesoudre les problegravemes drsquointerface se font tregraves rares Halleacute et al
[51] sont parmi les premiers agrave srsquointeacuteresser agrave ce genre de problegraveme Mahajan et Halfond [58]
ont abordeacute la probleacutematique en proposant une approche baseacutee sur la vision par ordinateur et
le traitement drsquoimages Walsh et al [74 72] ont eacutegalement traiteacute ce genre de bugs dans les
applications dites responsives (responsive web design)
Deux cateacutegories drsquoutilisateurs sont confronteacutees agrave ces types de problegravemes lrsquoune repreacutesente
les speacutecialistes du domaine (les informaticiens) chez lesquels ces types de problegravemes peuvent
trouver leurs solutions apregraves un travail laborieux Lrsquoautre repreacutesente le grand public pour lequel
le deuxiegraveme et le troisiegraveme type de problegraveme constituent des contraintes pour lrsquoexploitation de
la page car la solution dans ce cas exige certaines connaissances (lrsquooutil le langage etc) qui
eacutechappent geacuteneacuteralement au grand public Ce dernier forme la majoriteacute des utilisateurs De ce
fait il est neacutecessaire de lui trouver une solution lui permettant drsquoutiliser les sites web dans
les meilleures conditions possibles Il doit avoir tout simplement sur son eacutecran une interface
correcte sans aucun bug pour qursquoil ne soit pas obliger agrave recourir agrave une technique de correction
qui le deacutepasse Drsquoautant plus que les applications web connaissent une eacutevolution rapide et
commencent agrave conqueacuterir plusieurs domaines (commerce eacutelectronique eacuteducation loisir etc)
et mecircme agrave ecirctre utiliseacutees dans des opeacuterations sensibles telles que les transactions moneacutetaires
5
via internet Ce qui fait drsquoeux des programmes tregraves complexes dynamiques et interactifs En
plus de la rareteacute des meacutethodes de deacutetection de ces bugs pire encore presque rien nrsquoa eacuteteacute
fait pour donner un feedback agrave lrsquoutilisateur Lorsqursquoun bug est trouveacute les solutions actuelles
ne font que retourner laquo vraifaux raquo Dans ce travail nous proposons une nouvelle approche
permettant dans une premiegravere eacutetape de deacutetecter automatiquement les diffeacuterents types de bugs
drsquointerfaces et de les corriger automatiquement dans une deuxiegraveme eacutetape Il srsquoagit drsquoune
approche geacuteneacuterique de localisation de deacutefauts baseacutee sur le concept de reacuteparation
Les objectifs et contributions de cette thegravese sont
1 Proposer un langage pour speacutecifier le contenu attendu drsquoune interface web
2 Deacutecrire un algorithme permettant de veacuterifier automatiquement qursquoune speacutecification est
respecteacutee
3 Deacutecrire une meacutethode permettant de fournir un verdict deacutetailleacute et utile lors drsquoune violation
Cette thegravese comporte six chapitres Le chapitre 1 est deacutedieacute agrave une vue globale sur les notions de
base relatives au web Les diffeacuterents types de bugs ainsi que des exemples reacuteels de chacun de
ces types sont preacutesenteacutes au chapitre 2 Le chapitre 3 est consacreacute aux travaux connexes sur la
deacutetection des bugs drsquointerfaces dans les applications web agrave quelques exemples drsquoapproches et
drsquooutils de deacutetection pour lesquels certains points faibles sont identifieacutes
Dans le chapitre 4 on retrouve lrsquoensemble des informations speacutecifiques agrave lrsquooutil Cornipickle
conccedilu et utiliseacute dans la deacutetection des bugs Ceci inclut la syntaxe du langage et son utili-
sation pour exprimer des proprieacuteteacutes ainsi que les deacutetails de son impleacutementation (objectifs
de conception architecture et sceacutenario typique) Le chapitre 5 est reacuteserveacute agrave lrsquoutilisation de
Cornipickle en combinaison avec un robot drsquoexploration dynamique (crawler) pour deacutetecter
efficacement les bugs comportementaux dans les RIA (Rich Internet Applications) Le dernier
6
chapitre quant agrave lui preacutesente deux meacutecanismes par lesquels un verdict vraifaux peut ecirctre
enrichi drsquoinformation suppleacutementaire pour le deacuteveloppeur Une conclusion geacuteneacuterale mettant
en eacutevidence lrsquointeacuterecirct du travail reacutealiseacute et lrsquoimportance des reacutesultats obtenus clocircture la thegravese
Il est agrave signaler que les contributions preacutesenteacutees dans cette thegravese ont fait lrsquoobjet de publications
dont je suis coauteur
Un premier article dont la contribution consiste en la formalisation de la seacutemantique de
lrsquointerpreacuteteur Cornipickle (section 33 de lrsquoarticle) et la preacutesentation du concept des teacutemoins
(section 43) Cette contribution correspond au chapitre 4 de la thegravese
1 Sylvain Halleacute Nicolas Bergeron Francis Gueacuterin Gabriel Le Breton Oussama Be-
roual Declarative layout constraints for testing web applications J Log Algebr Meth
Program Elsevier 85 (5) 737-758 (2016) [51]
Un deuxiegraveme article preacutesentant le meacutecanisme de transformations (feedback enrichi pour
lrsquoutilisateur) ce qui correspond au chapitre 6
1 Sylvain Halleacute Oussama Beroual Fault Localization in Web Applications via Model
Finding CRESTETAPS 2016 55-67 Elsevier Electronic Notes in Computer Science
(2016) [52]
Un troisiegraveme article sur lrsquoautomatisation des tests avec inteacutegration agrave un crawler ce qui
correspond au chapitre 5
1 Oussama Beroual Francis Gueacuterin Sylvain Halleacute Searching for Behavioural Bugs with
Stateful Test Oracles in Web Crawlers SBSTICSE 2017 ACM 7-13(2017) [38]
CHAPITRE 1
NOTIONS GEacuteNEacuteRALES SUR LE WEB
Deux termes sont drsquousage confondus par le public non averti le terme laquo web raquo et le terme
laquo Internet raquo Ce chapitre est destineacute agrave lever cette confusion puis agrave mettre lrsquoaccent sur la
majoriteacute des aspects drsquoune application web piegravece maicirctresse de notre recherche
11 LE FONCTIONNEMENT DU WEB
Une diffeacuterence de taille entre laquo Internet raquo et laquo web raquo est agrave noter Internet est un reacuteseau composeacute
drsquoune multitude de reacuteseaux connecteacutes entre eux Chacun de ces reacuteseaux est composeacute drsquoun
ensemble drsquoeacutequipements (fibres optiques etc) constituant un support physique drsquoinformation
Le web quant agrave lui est un systegraveme de fichiers veacutehiculeacutes par des serveurs Il repreacutesente le
contenu principal drsquoInternet agrave cocircteacute drsquoautres contenus tels que le courrier eacutelectronique la
messagerie etc Il nrsquoest donc qursquoune des applications drsquoInternet
Un site web est un contenu sur Internet Ce contenu nrsquoest rien drsquoautre qursquoun ensemble de
fichiers (HTML CSS JavaScript etc) heacutebergeacutes sur un serveur Selon leur meacutecanisme de
fonctionnement deux types de site sont distingueacutes les sites statiques dont le contenu est inva-
riable et les sites dynamiques dont le contenu est variable Les premiers ne sont modifiables
8
que par leurs proprieacutetaires alors que les seconds sont modifiables par des utilisateurs autres
que leurs proprieacutetaires La reacutealisation de chacun de ces sites fait appel agrave des technologies bien
deacutetermineacutees telles que HTML CSS et JavaScript
Les acteurs principaux dans le fonctionnement du web sont les clients repreacutesenteacutes par des
navigateurs tels que Firefox Internet Explorer Chrome et Safari et les serveurs repreacutesenteacutes
par les machines abritant les sites web ougrave les fichiers sont stockeacutes Chaque serveur est
identifieacute sur un reacuteseau par son adresse IP (Internet Protocol) et chaque page web est associeacutee
agrave une adresse URL (Uniform Resource Locator ou laquo localisateur uniforme de ressource raquo)
caracteacuteriseacutee par un contenu Une demande drsquoune page web agrave un serveur correspond donc agrave
une demande drsquoun contenu La communication entre les clients et les serveurs est assureacutee
par un protocole appeleacute laquo HTTP raquo (HyperText Transfer Protocol ou laquo protocole de transfert
hypertexte raquo) via lequel les requecirctes sont formuleacutees par les navigateurs aux serveurs [37]
HTTP est donc la langue de conversation entre le navigateur et le serveur La conversation
se fait selon le principe de laquo requecircte-reacuteponse raquo La formulation drsquoune requecircte HTTP par le
navigateur est suivie par une reacuteponse HTTP du serveur apregraves lrsquoavoir deacutecodeacutee et eacutetudieacutee En plus
de la ligne de requecircte deacutefinissant le document demandeacute la meacutethode appliqueacutee et le protocole
utiliseacute une requecircte est composeacutee de deux ensembles de lignes des lignes facultatives et des
lignes optionnelles Les premiegraveres sont les champs drsquoen-tecircte de la requecircte et sont chargeacutees
de fournir des informations suppleacutementaires sur la requecircte ou le client (type de navigateur
systegraveme drsquoexploitation etc) Les secondes forment le corps de la requecircte et sont chargeacutees lors
de lrsquoenvoi de donneacutees au serveur de permettre un envoi de donneacutees par une meacutethode speacutecifique
(lrsquoenvoi de donneacutees au serveur par un formulaire par une meacutethode POST par exemple)
Une requecircte de type GET nomme lrsquoURL agrave reacutecupeacuterer httpuqacca par exemple dans la
figure 11 Le navigateur srsquoidentifie dans lrsquoen-tecircte User-Agent et indique les types de reacuteponses
9
GET HTTP11Host wwwuqaccaConnection keep-aliveUser-Agent Mozilla50 (Windows NT 61 Win64 x64)
AppleWebKit53736 (KHTML like Gecko) Chrome6103163100Safari53736
Upgrade-Insecure-Requests 1Accept texthtmlapplicationxmlq=09Accept-Encoding gzip deflateAccept-Language fr-FRfrq=08en-USq=06enq=04Cookie PHPSESSID=tphmk53fee883355e4eq24dmb5
Upgrade-Insecure-Requests 1Connection keep-aliveHost wwwuqacca
Figure 11 ndash Exemple drsquoune requecircte HTTP
qursquoil accepte dans lrsquoen-tecircte Accept et Accept-Encoding Lrsquoen-tecircte Connection demande
au serveur de garder la connexion TCP ouverte pour drsquoautres requecirctes La requecircte contient
eacutegalement les cookies que le navigateur conserve pour ce domaine Les cookies sont des paires
cleacute-valeur qui suivent lrsquoeacutetat drsquoun site web entre diffeacuterentes demandes de pages Ainsi les
cookies stockent le nom de lrsquoutilisateur connecteacute un numeacutero secret attribueacute agrave lrsquoutilisateur par
le serveur certains paramegravetres de lrsquoutilisateur etc Les cookies sont stockeacutes dans un fichier
texte sur le client et envoyeacutes au serveur agrave chaque demande
La reacuteponse du serveur sur la requecircte de la figure 11 geacuteneacutereacutee et renvoyeacutee est montreacutee dans
figure 12
Lrsquoen-tecircte qui deacutefinit Content-Type en texthtml indique au navigateur de rendre le contenu
de la reacuteponse [13] au format HTML au lieu de le teacuteleacutecharger en tant que fichier Le navigateur
utilise lrsquoen-tecircte pour deacutecider comment interpreacuteter la reacuteponse mais tient eacutegalement compte
drsquoautres facteurs tels que lrsquoextension de lrsquoURL
10
HTTP10 200 OKDate Sat 11 Nov 2017 190323 GMTServer Apache2222 (Unix) mod_ssl2222 OpenSSL101e-fipsX-Powered-By PHP5217Access-Control-Allow-Origin httpswprodluqaccaExpires Thu 19 Nov 1981 085200 GMTCache-Control no-store no-cache must-revalidatePragma no-cacheContent-Type texthtmlX-Cache MISS from w3repuqaccaX-Cache-Lookup MISS from w3repuqacca80Via 10 w3repuqacca (squid3123)Connection close
Figure 12 ndash Exemple drsquoune reacuteponse HTTP
12 LE LANGAGE HTML
Nous allons nous limiter dans ce qui suit agrave la preacutesentation de lrsquoessentiel des eacuteleacutements de base
relatifs agrave ces trois langages agrave savoir les balises pour le HTML les seacutelecteurs pour le CSS et
quelques notions de base sur JavaScript
Le langage HTML laquo HyperText Markup Language raquo en anglais ou laquo langage de balisage
hypertexte raquo en franccedilais ou encore laquo langage de marquage hypertexte raquo dont la creacuteation revient
agrave 1991 est un langage de description de document pouvant ecirctre eacutecrit avec un simple eacutediteur
de texte sans une application speacutecifique et servant agrave produire (sur Internet) des pages Web
drsquoune grande varieacuteteacute de contenus de mise en forme ou drsquoanimations et agrave inseacuterer diffeacuterents
types drsquoeacuteleacutements(texte des liens des images etc) Il permet aussi de deacutesigner au navigateur
certaines speacutecificiteacutes telle que la consideacuteration drsquoun texte comme un paragraphe ou un titre
11
121 STRUCTURE DrsquoUN DOCUMENT
La structure drsquoun document HTML doit satisfaire un scheacutema preacutecis et comprendre un ensemble
de balises speacuteciales essentielles pour tout document HTML Les eacuteleacutements composants la
structure drsquoun document HTML sont les suivants
Doctype Un document HTML deacutebute toujours par le soulignement de la nature du document
crsquoest agrave dire le langage utiliseacute (HTML) en faisant appel agrave la balise lt DOCTYPE htmlgt
Lrsquoeacuteleacutement lthtmlgt Lrsquoeacuteleacutement html comprend deux balises lthtmlgt et lthtmlgt Il deacutefinit
lrsquounique racine du document HTML Tous les autres eacuteleacutements doivent y ecirctre placeacutes
Lrsquoeacuteleacutement ltheadgt Cet eacuteleacutement repreacutesente lrsquoen-tecircte du document et renferme exclusivement
des meacuteta-donneacutees (titre de la page type drsquoencodage utiliseacute etc) exploiteacutees par les navigateurs
pour ameacuteliorer lrsquoergonomie de la page
Lrsquoeacuteleacutement ltbodygt Lrsquoeacuteleacutement body repreacutesente le corps du document Il est toujours placeacute
apregraves lrsquoen-tecircte et contient tout le contenu laquo visible raquo de la page les textes images liens
videacuteos etc
Lrsquoeacuteleacutement lttitlegt La structure srsquoachegraveve par une des meacuteta-donneacutees utiliseacutees par le navigateur
qui constitue le seul eacuteleacutement HTML obligatoire le titre du document placeacute agrave lrsquointeacuterieur de
lrsquoeacuteleacutement head
Voici le document HTML formel le plus simple qursquoon puisse eacutecrire
12
ltDOCTYPE htmlgtlthtmlgt
ltheadgtlttitlegtTitre de la pagelttitlegt
ltheadgtltbodygt
lth1gtUn grand titrelth1gtltpgtUn paragraphltpgt
ltbodygtlthtmlgt
Figure 13 ndash Un exemple simple de page HTML contenant un grand titre et un paragraphe
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtUn document HTMLlttitlegtltheadgtltbodygtlt-- Du contenu pour lrsquoutilisateur ici --gtltbodygtlthtmlgt
Le code HTML dans la figure 13 par exemple indique que lrsquoon souhaite creacuteer un grand titre
(gracircce agrave lrsquoeacuteleacutement h1) et un paragraphe (gracircce agrave lrsquoeacuteleacutement p)
122 VERSIONS DU HTML
Le Web a connu ces deux derniegraveres deacutecennies une eacutevolution extraordinaire En effet lrsquoavanceacutee
technologique a donneacute lieu agrave une ameacutelioration des performances des composants physiques
et une augmentation de la vitesse de connexion entraicircnant par conseacutequent une eacutevolution
13
remarquable des sites Web A leur tour les langages tels que le HTML et le CSS ont eacutegalement
connu une eacutevolution consideacuterable (modifications enrichissements etc) drsquoougrave lrsquoapparition de
nouvelles versions de ces langages bien que lrsquoeacutevolution nrsquoa pas eacuteteacute lineacuteaire ni continue pour
lrsquoutilisateur final Les nouvelles versions sont doteacutees chacune de nouvelles fonctionnaliteacutes et
change parfois totalement la syntaxe du langage La premiegravere version de HTML lrsquoHTML1
a vu le jour en 1991 De nombreuses ameacuteliorations apporteacutees par la suite par le creacuteateur du
HTML jugeacutees inteacuteressantes et importantes lrsquoont conduit en 1994 agrave partager publiquement la
nouvelle version de son langage le HTML2 Drsquoautres versions se sont succeacutedeacutees HTML2
(1995) HTML32 (janvier 1997) HTML4 modifieacutee agrave plusieurs reprises (1997 1998 1999
2000) HTML5 (2014) HTML51 (2016) Parmi toutes ces versions la plus stable celle qui
offre de nouvelles fonctionnaliteacutes et ouvre de nouvelles possibiliteacutes inteacuteressantes est la plus
reacutecente agrave savoir HTML51
123 EacuteLEacuteMENTS DE BASE EN HTML
Le fonctionnement du HTML srsquoappuie sur la notion drsquoeacuteleacutements Ces derniers ont pour rocircle
de structurer du contenu pour donner du sens aux diffeacuterents objets de ce contenu Ils sont
constitueacutes de balises renfermant des attributs et du contenu entre elles
Les balises en HTML Le nombre de balises constituant le HTML est environ 140 Elles
servent agrave fournir au navigateur des indications sur le sens drsquoun eacuteleacutement son interpreacutetation ou
son affichage en plus drsquoautres indications telles que la gestion des formulaires en ligne lrsquoajout
des fichiers multimeacutedias etc On distingue plusieurs types de balises chargeacutee chacune drsquoune
fonction bien deacutetermineacutee bien que certaines nrsquoont de fonction que de seacuteparer des sections drsquoun
document Parmi ces fonctions deacutefinir des titres creacuteer des paragraphes creacuteer des liens vers des
ressources externes inteacutegrer une image dans un document HTML creacuteer des listes Les balises
14
suivantes sont donneacutees agrave titre drsquoexemple ltpgt lth1gt ltimggt ltligt ltagt Les eacuteleacutements
sont constitueacutes geacuteneacuteralement drsquoune paire de balises (ouvrante et fermante) et drsquoun contenu
entre les balises et exceptionnellement drsquoune balise unique dite dans ce cas laquo orpheline raquo
Une balise fermante doit avoir le mecircme nom que la balise ouvrante correspondante (notez la
preacutesence du slash (barre oblique))
Les balises laquo auto fermantes raquo (ou balises vides) Certaines balises sont deacutepourvues de texte
du fait qursquoelles sont ouvrantes et fermantes en mecircme temps les balises AUTO FERMANTES
sont soit des balises de type BLOC (exemple lthr gt) des balises EN LIGNE (exemple
ltimg gt)
Les attributs en HTML Les attributs se placent dans la balise ouvrante drsquoun eacuteleacutement et
possegravedent toujours une valeur (parfois implicite) Ils viennent apporter plus de deacutetails sur les
eacuteleacutements Par exemple lrsquoattribut href (hypertexte reacutefeacuterence) va offrir lrsquoadresse (la valeur) de
la page du lien agrave lrsquoeacuteleacutement ltagt (pour anchor) chargeacute de la creacuteation des liens vers drsquoautres sites
ou drsquoautres pages
Lrsquoeacuteleacutement ltimggt constitueacute drsquoune seule balise orpheline chargeacute drsquoinseacuterer une image dans
une page HTML a besoin de deux attributs src et alt Le premier src assure le nom et
lrsquoemplacement de lrsquoimage (la valeur) alors que lrsquoattribut alt se charge de lrsquoaffichage drsquoun texte
alternatif agrave une indisponibiliteacute de lrsquoimage
Notez bien que les balises et les attributs ne seront jamais afficheacutes par le navigateur il va srsquoen
servir drsquoindication pour justement savoir ce qursquoil doit afficher (un paragraphe un titre un lien
une image etc)
15
13 LES CASCADING STYLESHEETS (CSS)
Le CSS laquo Cascading StyleSheets raquo en anglais ou laquo feuilles de styles en cascade raquo en franccedilais est
un langage informatique apparu en 1996 voueacute agrave la mise en forme du contenu des documents
HTML et XML moyennant des styles pour deacutefinir la taille la couleur ou lrsquoalignement du texte
afin drsquoagreacutementer le reacutesultat visuel final de ce contenu Il est utiliseacute dans la conception de
sites web Le code ci-dessous par exemple indique que les titres h1 eacutecrits en HTML doivent
avoir une couleur verte et une taille de 20px tandis que les paragraphes doivent ecirctre noir et
souligneacutes
h1 color greenfont-size 20px
p color blacktext-decoration underline
Le CSS est donc un autre langage du web venant compleacuteter le HTML Il permet la mise en
page drsquoun contenu et le changement de son apparence en lui appliquant des styles (choisir
la couleur du texte seacutelectionner la police utiliseacutee deacutefinir la taille du texte les bordures le
fond) Lrsquoapparition du HTML a devanceacute lrsquoapparition du CSS de cinq anneacutees peacuteriode dans
laquelle la mise en page eacutetait effectueacutee par le HTML qui consacrait des balises agrave cette fin
telle que la balise ltfont color=aab1c3gt deacutefinissant la couleur du texte par exemple
Le langage CSS est venu reacutepondre agrave la complexiteacute qursquoont connu les pages HTML avec une
augmentation remarquable des balises entre autres conduisant agrave une mise agrave jour des pages
web de plus en plus complexe Agrave lrsquoinstar du HTML le CSS est passeacute par plusieurs versions
16
les plus importantes sont CSS1 CSS20 CSS21 et CSS3
Eacutecriture du code CSS Le code CSS peut ecirctre eacutecrit agrave trois endroits distincts
1 Dans un Lrsquoeacuteleacutement HTML ltstylegt
2 Dans la balise ouvrante des eacuteleacutements HTML(meacutethode la moins recommandeacutee)
3 Dans un fichier CSS seacutepareacute (meacutethode la plus recommandeacutee)
131 PROPRIEacuteTEacuteS ET SEacuteLECTEURS CSS
Les proprieacuteteacutes CSS permettent de choisir quel(s) aspect(s) (ou laquo styles raquo) drsquoun eacuteleacutement HTML
que lrsquoon souhaite modifier
Lrsquoapplication drsquoun style agrave un ou plusieurs eacuteleacutements HTML signifie leurs seacutelections au preacutealable
pour les soumettre agrave un style particulier Lrsquointervention drsquoun seacutelecteur est donc neacutecessaire Le
CSS est fondeacute sur un ensemble de regravegles les seacutelecteurs sont la premiegravere partie drsquoune regravegle CSS
Crsquoest une syntaxe chargeacutee drsquoidentifier les eacuteleacutements du document auxquels la regravegle est deacutedieacutee
(appliqueacutee) Depuis son arriveacutee (1996) le CSS a speacutecifieacute un certain nombre de seacutelecteurs tregraves
accepteacutes de nos jours par les diffeacuterents navigateurs les plus freacutequemment utiliseacutes sont
Les seacutelecteurs de type Ce seacutelecteur cible lrsquoeacuteleacutement du document agrave styler en se basant sur
le nom de lrsquoeacuteleacutement Il doit correspondre dans ce cas au nom de lrsquoeacuteleacutement Exemple pour
mettre en bleu le texte des titres de niveau 1 le seacutelecteur sera h1
h1 color blue
17
Les seacutelecteurs de classe Ce seacutelecteur permet de cibler les eacuteleacutements en fonction de la valeur
de leur attribut class Il permet donc de seacutelectionner tous les eacuteleacutements ayant une certaine classe
Preacuteceacuteder le nom de la classe par un point () suffit pour obtenir le seacutelecteur correspondant
agrave cette classe Exemple la classe ltimportantgt est attribueacutee agrave tous les eacuteleacutements jugeacutes
importants Il suffit de deacutefinir dans le fichier CSS une regravegle stipulant que le texte de tous les
eacuteleacutements posseacutedant la classe Important soit eacutecrit en rouge
ltp class=ImportantgtCoucoultpgt
Important
color red
Les seacutelecteurs drsquoidentifiant Ce seacutelecteur permet de cibler un eacuteleacutement drsquoun document en
fonction de la valeur de son attribut ltidgt Dans un document il ne doit y avoir qursquoun seul
identifiant donneacute agrave lrsquoeacuteleacutement Preacuteceacutedeacute le nom de lrsquoidentifiant par un diegravese () suffit pour
obtenir le seacutelecteur correspondant agrave cet identifiant Exemple Un identifiant Menu est utiliseacute
pour repeacuterer notre menu dans le document Il suffit de deacutefinir dans le fichier CSS une regravegle
indiquant que notre menu ne soit pas afficheacute
ltdiv id=Menugtltdivgt
Menu
display none
18
Le seacutelecteur universel laquo raquo Ce seacutelecteur permet de cibler tous les eacuteleacutements drsquoun document
drsquoougrave lrsquoappellation de seacutelecteur universel Il existe eacutegalement une variante pour ne cibler qursquoun
seul eacuteleacutement
Regroupements des seacutelecteurs Une autre maniegravere de proceacuteder consiste en la reacuteduction de
taille du fichier CSS en appliquant une mecircme regravegle agrave plusieurs seacutelecteurs Ces derniers sont
dans ce cas seacutepareacutes par une virgule () Exemple les eacuteleacutements posseacutedant la classe Important
et les titres lth2gt sont eacutecrits en rouge
Important h2
color red
14 JAVASCRIPT
JavaScript est un langage de programmation de scripts utiliseacute surtout dans les pages web
interactives ainsi que pour les serveurs Il a eacuteteacute creacutee par Brendan Eich en 1995 en lrsquoespace de
dix jours suite agrave une demande formuleacutee par la Netscape Communications Corporation Les
bases du langage et ses principales interfaces sont fournies par des objets ce qui fait de lui un
langage orienteacute objet agrave prototype Les objets en question ne sont pas des instances de classes
Ils sont eacutequipeacutes chacun de constructeurs permettant de creacuteer leurs proprieacuteteacutes et notamment le
prototypage qui sert agrave creacuteer des objets heacuteritiers personnaliseacutes JavaScript dont les fonctions
sont des objets de premiegravere classe supporte le paradigme objet impeacuteratif et fonctionnel
Depuis sa creacuteation JavaScript a connu drsquoinnombrables modifications Il a eacuteteacute standardiseacute
en 1997 par laquo Ecma International raquo donnant naissance agrave la premiegravere eacutedition du standard
19
laquo ECMA-262 raquo la deuxiegraveme eacutedition du standard laquo ECMA-262 raquo a vu le jour en 1998 suite
agrave des changements reacutedactionnels apporteacutes au standard laquo ECMA-262 raquo pour le conformer au
standard international laquo ISOCEI 16262 raquo Des ameacuteliorations(dans la manipulation des chaicircnes
de caractegraveres dans les instructions de controcircle etc) introduites dans la deuxiegraveme eacutedition ont
donneacute lieu en 1999 agrave la publication de la troisiegraveme eacutedition du standard ECMA-262 Depuis la
troisiegraveme eacutedition les eacuteditions se sont succeacutedeacutees pour arriver actuellement agrave la huitiegraveme eacutedition
Les diffeacuterentes eacuteditions apparues ont chacune participeacute avec un plus dans le deacuteveloppement
des performances du langage
La plupart des langages de programmation ont des fonctionnaliteacutes de base communes Lrsquouti-
lisation de JavaScript neacutecessite la connaissance de ces bases pour mieux comprendre son
fonctionnement
Variables Les variables sont des conteneurs servant agrave stocker temporairement des informa-
tions Une variable a le pouvoir de varier autrement dit de pouvoir stocker diffeacuterentes valeurs
dans le temps en laquo eacutecrasant raquo sa valeur preacuteceacutedente Une variable est deacuteclareacutee au commencement
avec le mot-cleacute let suivi du nom qursquoon souhaite utiliser pour la variable
Un certain nombre de regravegles sont agrave consideacuterer en JavaScript
1 les lignes de code doivent terminer par un point-virgule pour indiquer que crsquoest la
fin de la ligne Lrsquoomission de ces points-virgules peut conduire agrave des comportements
inattendus voire des erreurs
2 Nrsquoimporte quel nom peut ecirctre (quasiment) utiliseacute pour nommer une variable Il y a
cependant quelques restrictions sur ces noms
3 Eacuteviter la casse JavaScript y est sensible cela veut dire que maVariable sera consideacutereacute
comme un nom diffeacuterent de mavariable Lrsquoapparition des problegravemes sur les noms de
20
variables dans le code implique la veacuterification de la casse utiliseacutee
4 Avec les versions reacutecentes de JavaScript il est conseilleacute drsquoutiliser le mot-cleacute let Cepen-
dant des variables deacuteclareacutees avec le mot-cleacute var sont parfois rencontreacutees Ce dernier est
utiliseacute lorsque notre code doit supporter des navigateurs anciens (IE lt 11) let nrsquoeacutetant
pas supporteacute dans ce cas Une fois une variable est deacuteclareacutee on lui donne une valeur
maVariable = rsquooussrsquo
Pour utiliser la valeur plus loin dans le code il suffit de faire appel agrave la variable en utilisant
son nom maVariable Lorsque on creacutee une variable et qursquoon lui donne une valeur cela
peut se faire sur une seule ligne let maVariable = rsquooussrsquo Une fois qursquoon a donneacute une
valeur agrave une variable on peut la changer plus loin
let maVariable = rsquooussrsquomaVariable = rsquoSylvainrsquo
Les variables sont reacuteparties en diffeacuterents types de donneacutees et ont chacune une fonction Parmi
ces variables on a la chaicircne de caractegraveres le nombre le Booleacuteen le tableau lrsquoobjetetc Les
variables sont indispensables agrave la programmation Si les valeurs sont statiques rien ne pourrait
se faire Par exemple on ne pourrait pas personnaliser un message de bienvenue ou changer
lrsquoimage afficheacutee dans une galerie
Les opeacuterateurs Un opeacuterateur est un symbole matheacutematique qui produit un reacutesultat en
fonction de plusieurs valeurs (la plupart du temps on utilise deux valeurs et un opeacuterateur)
Parmi les opeacuterateurs les plus simples on a lrsquoopeacuterateur drsquoaffectation lrsquoopeacuterateur drsquoidentiteacute
lrsquoopeacuterateur de neacutegation lrsquoopeacuterateur drsquoineacutegaliteacute
Il y a plein drsquoautres opeacuterateurs mais on srsquoen tiendra agrave ceux-lagrave
Il est agrave noter que lrsquoutilisation de diffeacuterents types de donneacutees avec un mecircme opeacuterateur faussera
21
le reacutesultat obtenu le reacutesultat obtenu par70 + 12 nrsquoest pas le mecircme que celui obtenu par
70 + 12 le deuxiegraveme reacutesultat est le bon car les nombres entoureacutes de guillemets sont donc
consideacutereacutes comme des chaicircnes de caractegraveres
Les structures conditionnelles Les structures conditionnelles sont des eacuteleacutements du code qui
permettent de tester si une expression est vraie ou non et drsquoexeacutecuter des instructions diffeacuterentes
selon le reacutesultat La structure conditionnelle utiliseacutee la plus freacutequemment est if else
Par exemple
let parfumGlace = rsquosorbet de fraisersquoif (parfumGlace === rsquosorbet de fraisersquo)
alert(Jrsquoadore le sorbet de fraise ) else
alert(Jrsquoaurai preacutefeacutereacute un sorbet de fraise)
Le test agrave reacutealiseacute est contenue dans if ( ) Il consiste en une comparaison de la variable
parfumGlace avec la chaicircne de caractegraveres laquo sorbet de fraise raquo via lrsquoopeacuterateur drsquoidentiteacute pour
veacuterifier leur eacutegaliteacute Si cette comparaison renvoie true le premier bloc de code sera exeacutecuteacute
Sinon crsquoest le code du second bloc celui preacutesent apregraves else qui sera exeacutecuteacute
Les fonctions Les fonctions sont chargeacutees drsquoorganiser les fonctionnaliteacutes agrave reacuteutiliser Par
exemple au lieu drsquoexeacutecuter deux fois la mecircme action plutocirct que de recopier le code la
fonction est eacutecrite une fois puis utiliser aux deux endroits souhaiteacutes
let maVariable = documentquerySelector(rsquoh1rsquo)alert(rsquoSalut rsquo)
Ces fonctions (querySelector et alert) sont disponibles dans le navigateur Elles ressemblent
agrave un nom de variable suivi de parenthegraveses et utilisent des arguments dans leurs calculs Les
22
arguments sont placeacutes entre les parenthegraveses seacutepareacutes par des virgules srsquoil y en a plusieurs Par
exemple la fonction alert() fait apparaicirctre une fenecirctre de pop-up dans la fenecirctre du navigateur
Un argument est utiliseacute pour indiquer agrave la fonction le contenu qursquoon deacutesire eacutecrire dans cette
fenecirctre En plus des fonctions deacutejagrave existantes drsquoautres fonctions peuvent ecirctre deacutefinies par
nous-mecircmes Par exemple fonction toute simple qui considegravere deux arguments et renvoie le
reacutesultat de la multiplication
function multiplier(num1num2) let reacutesultat = num1 num2return reacutesultat
Avant une utilisation reacutepeacuteteacutee de cette fonction elle doit ecirctre deacuteclareacutee dans la console
multiplier(47)multiplier(2020)multiplier(053)
Lrsquoinstruction return indique au navigateur qursquoil faut renvoyer la variable reacutesultat en dehors de
la fonction afin qursquoelle puisse ecirctre reacuteutiliseacutee par ailleurs Cette instruction est neacutecessaire car
les variables deacutefinies agrave lrsquointeacuterieur des fonctions sont uniquement disponibles agrave lrsquointeacuterieur de
ces fonctions Crsquoest ce qursquoon appelle une porteacutee
Les eacuteveacutenements Un site web vraiment interactif est caracteacuteriseacute par des eacuteveacutenements Les
eacuteveacutenements sont des structures de code agrave lrsquoeacutecoute du navigateur permettant de deacuteclencher des
actions au moindre problegraveme Lrsquoexemple concret est lrsquoeacuteveacutenement de clic qui est deacuteclencheacute
une fois lrsquoutilisateur clique sur quelque chose dans le navigateur Lrsquoexemple ci-dessous peut
donner une ideacutee sur ce que ccedila donne en pratique il suffit de saisir ces quelques lignes dans la
console puis cliquez sur la page
23
documentquerySelector(rsquohtmlrsquo)onclick = function() alert(rsquoarrecirctez de cliquerrsquo)
Les meacutethodes pour laquo attacher raquo un eacuteveacutenement agrave un eacuteleacutement sont multiples Dans cet exemple
deux paramegravetres sont deacutefinis lrsquoeacuteleacutement HTML concerneacute et un gestionnaire onclick qui
est une proprieacuteteacute eacutegale agrave une fonction anonyme (elle nrsquoa pas de nom) qui contient le code agrave
exeacutecuter quand lrsquoutilisateur clique
On pourra noter que documentquerySelector(rsquohtmlrsquo)onclick = function()
est eacutequivalent agrave
let maHTML = documentquerySelector(rsquohtmlrsquo)maHTMLonclick = function()
La premiegravere syntaxe est simplement plus courte Drsquoautres fonctionnaliteacutes peuvent srsquoajouter
aux bases en JavaScript exposeacutees
15 LE FONCTIONNEMENT INTERNE DES NAVIGATEURS WEB
Pour la peacuteriode allant de mars 2015 agrave mars 2016 la part de marcheacute des navigateurs drsquoapregraves les
statistiques de StatCounter [19] est de pregraves de 96 entre Internet Explorer Firefox Chrome
et Opera Le tableau 11 montre en pourcentage la part de chaque navigateur
24
Navigateur Part drsquoutilisation en
Chrome 5232
Internet Explorer 162
Firefox 1558
Safari 978
Opera 181
Autres 431
Tableau 11 ndash Statistiques des parts drsquoutilisation des navigateurs dans le monde entre mars 2015et mars 2016
Une ressource web eacutetant seacutelectionneacutee en faisant appel au serveur est ensuite afficheacutee par le
navigateur Celle-ci peut ecirctre un document HTML (qui est le cas geacuteneacuteral) comme elle peut
ecirctre un autre type de fichier Une URL est mobiliseacutee par lrsquoutilisateur pour la reacutecupeacuteration
de la ressource Les speacutecifications HTML et CSS qui preacutecisent au navigateur la maniegravere
drsquointerpreacuteter et drsquoafficher les fichiers HTML sont maintenues par lrsquoorganisation W3C (World
Wide Web Consortium) [12]
La structure drsquoun navigateur comprend plusieurs composants tels qursquoune interface utilisateur
le moteur du navigateur un composant reacuteseau une interface drsquoarriegravere-plan (backend UI)
un interpreacuteteur JavaScript un analyseur XML (XML parser) un composant de stockage de
donneacutees et finalement le moteur de rendu qui est la piegravece la plus importante dans cet ensemble
[49] [48] La figure 14 montre le flux entre les composants du navigateur
Avant son affichage agrave lrsquoutilisateur une page web parcourt le chemin suivant
1 La requecircte est envoyeacutee vers le serveur en utilisant lrsquointerface utilisateur qui enferme
une barre drsquoadresse des boutons preacuteceacutedent et suivant un menu de marque-page
25
des boutons drsquoactualisation et drsquoarrecirct etc La requecircte est transporteacutee via le composant
reacuteseau qui assure les appels reacuteseau telles que les requecirctes HTTP Il est doteacute drsquoune
interface indeacutependante de la plateforme et en dessous des impleacutementations pour chaque
plateforme
2 La reacuteponse est renvoyeacutee par le serveur apregraves plusieurs traitements au niveau du serveur
drsquoapplication afin de geacuteneacuterer la page demandeacutee en HTML (les deacutetails sur ces deux
eacutetapes ont eacuteteacute exposeacutes dans la section 11)
3 Le composant reacuteseau passe les donneacutees brutes reacutecupeacutereacutees agrave un autre composant qui
a comme rocircle drsquoenregistrer toutes sortes de donneacutees sur le disque dur par exemple
des cookies Il srsquoagit drsquoune couche de persistance La nouvelle speacutecification HTML
(HTML5) deacutefinit le terme laquo base de donneacutees Web raquo qui est un systegraveme complet (bien
que leacuteger) de base de donneacutees dans le navigateur
4 Les octets bruts sont transporteacutes au moteur de rendu qui est responsable de lrsquoaffichage du
contenu demandeacute agrave lrsquoeacutecran en suivant plusieurs processus drsquoanalyse sur le code HTML
et CSS Les deacutetails de ces processus drsquoanalyse sont abordeacutes dans le reste du chapitre
5 Un interpreacuteteur JavaScript est appeleacute par le moteur de rendu pour lrsquoanalyse et lrsquoexeacutecution
du code JavaScript Pareillement pour lrsquoanalyseur XML (XML parser) qui est utiliseacute
pour lrsquoanalyse des documents XML dans lrsquoarbre du DOM (Document Object Model)
Crsquoest lrsquoun des sous systegravemes les plus reacuteutilisables dans lrsquoarchitecture En fait presque
toutes les impleacutementations des navigateurs exploitent un analyseur XML existant plutocirct
que de creacuteer leur propre analyseur agrave partir de zeacutero
6ndash7 Lrsquointerface drsquoarriegravere-plan (backend UI) est destineacute agrave dessiner des widgets de base
du genre listes deacuteroulantes et fenecirctres Une interface geacuteneacuterique non speacutecifique agrave la
plateforme est preacutesenteacutee par le navigateur qui utilise drsquoautre part en dessous lrsquointerface
utilisateur du systegraveme drsquoexploitation
26
Figure 14 ndash Le flux entre les composants du navigateur pour la reacutecupeacuteration et le traitementdrsquoune page web dans le navigateur
8ndash9 Ce dernier composant est relieacute au moteur de rendu qui envoie le rendu final agrave lrsquoutilisateur
dans la derniegravere eacutetape de la figure
Lrsquoaffichage drsquoune page web par le navigateur moyennant le code HTML CSS et JavaScript
nrsquoest pas aussi simple Pour ce faire le navigateur fait particuliegraverement appel agrave lrsquoun de ses
composants le moteur de rendu
Les opeacuterations qui se manifestent agrave lrsquointeacuterieur du navigateur et en particulier le fonctionnement
des moteurs de rendu des navigateurs les plus utiliseacutes ont eacuteteacute expliqueacutes par Garsiel et Irish
[11] Lrsquoaffichage drsquoune page web comporte de fait plusieurs phases La premiegravere consiste en
la construction des arborescences DOM (modegravele drsquoobjet de document) et CSSOM (modegravele
drsquoobjet CSS) Cette derniegravere phase est suivie par la transformation des balisages HTML et CSS
en DOM et CSSOM respectivement dont la combinaison forme une arborescence drsquoaffichage
(arbre de rendu) Cette arborescence agrave son tour est chargeacutee de la mise en page de chaque
eacuteleacutement visible et de lrsquointroduction des donneacutees exigeacutees pour lrsquoaffichage des pixels agrave lrsquoeacutecran
[5]
27
lthtmlgtltheadgt
ltmeta name=viewport content=width=device-widthinitial-scale=1gtltlink href=designcss rel=stylesheetgtlttitlegtExemplelttitlegt
ltheadgtltbodygt
ltpgtSalut ltspangtOussamaltspangt Beroual ltpgtltdivgtltimg src=ma-photojpggtltdivgt
ltbodygtlthtmlgt
Figure 15 ndash Un exemple simple de page web illustrant le rendu dans un navigateur
Construction du modegravele drsquoobjet DOM
Le processus de construction du modegravele drsquoobjet DOM est exposeacute ci-dessous agrave travers lrsquoexemple
drsquoune page web simple en HTML brut avec du texte et une seule image Le code HTML de la
page agrave eacutetudier est donneacute agrave la figure 15
Le traitement de cette page impose au moteur de rendu du navigateur drsquoexeacutecuter quatre
processus de transformation tel qursquoillustreacute dans la figure 16
1 Le premier processus est la conversion le moteur de rendu lit les octets bruts du
HTML sur le disque ou le reacuteseau et les traduit en caractegraveres individuels en fonction de
lrsquoencodage speacutecifique du fichier (UTF-8 par exemple)
2 Le deuxiegraveme processus est la creacuteation de jetons le moteur de rendu convertit les
chaicircnes de caractegraveres en diffeacuterents jetons speacutecifieacutes par la norme HTML5 du W3C
telles que lthtmlgt et ltbodygt Chaque jeton possegravede une signification particuliegravere et un
ensemble de regravegles
3 Le troisiegraveme processus est lrsquoanalyse lexicale les jetons eacutemis sont convertis en objets
qui deacutefinissent leurs proprieacuteteacutes et leurs regravegles
28
Figure 16 ndash Les processus de traitement de HTML et CSS au niveau du moteur de rendu dunavigateur
4 Le quatriegraveme processus est la construction du DOM puisque le balisage HTML
deacutefinit les relations entre les diffeacuterentes balises (certaines balises sont contenues dans
drsquoautres) les objets creacuteeacutes sont associeacutes selon une arborescence qui capture eacutegalement
la relation parent-enfant deacutefinie dans le balisage drsquoorigine (lrsquoobjet HTML est un parent
de lrsquoobjet body body est un parent de lrsquoobjet p etc)
Le reacutesultat final de lrsquoensemble de ce processus est le modegravele drsquoobjet de document (ou DOM)
de notre page simple que le navigateur utilise pour tout traitement suppleacutementaire de la page
Lrsquoarbre DOM reacutesultant est illustreacute dans la figure 17
Modegravele drsquoobjet CSS (CSSOM)
Lrsquoinformation sur lrsquoapparence drsquoun eacuteleacutement lors de son affichage est offerte par une autre
construction le CSSOM Durant la construction du DOM de notre page il srsquoest aveacutereacute que
le navigateur a deacuteceleacute une balise de lien link dans la section head du document signalant
une feuille de style CSS externe stylecss Du fait qursquoil a besoin de cette ressource pour
29
Figure 17 ndash Un arbre du modegravele drsquoobjet DOM
body font-size 24px p font-weight bold span color blue p span display none img float right
Figure 18 ndash Un exemple de fichier CSS simple
lrsquoaffichage de la page le navigateur anticipe lrsquoenvoi immeacutediat drsquoune demande pour cette
ressource et reacutepond avec le contenu du fichier illustreacute agrave la figure 18 Ces styles auraient pu
ecirctre deacuteclareacutes directement dans le balisage HTML (inteacutegreacute) cependant il est recommandeacute
de seacuteparer les codes CSS et HTML puisque les graphistes travaillent sur le code CSS les
deacuteveloppeurs sur le code HTML etc
Les regravegles CSS reccedilues sont converties en un contenu que le navigateur peut comprendre et
traiter de mecircme que pour le code HTML Le processus HTML est reacutepeacuteteacute mais dans ce cas
pour le code CSS (voir figure 16) Les octets CSS sont convertis en caractegraveres puis en jetons
et en nœuds pour finalement se relier au sein drsquoune arborescence appeleacutee CSS Object Model
(CSSOM) ou laquo modegravele drsquoobjet CSS raquo
Le calcul de lrsquoensemble final de styles drsquoun objet de la page tel qursquoeffectueacute par le navigateur
30
Figure 19 ndash Arbre du modegravele drsquoobjet CSSOM
comprend deux eacutetapes Dans une premiegravere eacutetape la regravegle la plus geacuteneacuterale pour ce nœud
est appliqueacutee (par exemple srsquoil srsquoagit drsquoun eacuteleacutement enfant du corps tous les styles du corps
srsquoappliquent) Dans une deuxiegraveme eacutetape des regravegles plus speacutecifiques crsquoest-agrave-dire en descendant
la cascade sont appliqueacutees afin drsquoaffiner de maniegravere reacutecursive les styles calculeacutes
La concreacutetisation de cette deacutemarche est faite agrave partir de lrsquoobservation de lrsquoarborescence
CSSOM dans la figure 19 On peut y lire que tout texte est eacutecrit en bleu et que sa taille de
police est de 24 pixels Il est placeacute dans la balise span contenue dans lrsquoeacuteleacutement body Ce
dernier est chargeacute de transmettre la taille de police agrave lrsquoeacuteleacutement span Toutefois si une balise
span est un enfant drsquoune balise paragraphe (p) le contenu de cette balise nrsquoest pas afficheacute
Il faut se rappeler que lrsquoarborescence CSSOM ci-dessus nrsquoest pas complegravete Elle ne montre
que les styles qui remplacent ceux de la feuille de style Dans lrsquoabsence de styles proposeacutes
tout navigateur fournit un ensemble de styles par deacutefaut eacutegalement appeleacutes styles user-agent
Construction de lrsquoarbre de rendu la mise en page et le dessin
Les donneacutees HTML et CSS ont servi jusqursquoici agrave la creacuteation des arborescences des modegraveles
DOM et CSSOM qui sont des objets indeacutependants chargeacutes chacun de capturer un aspect
du document lrsquoun deacutecrit le contenu et lrsquoautre les regravegles de style appliqueacutees au document
31
Figure 110 ndash Arbre de rendu
Les arborescences des deux modegraveles DOM et CSSOM sont combineacutees pour former une
arborescence drsquoaffichage responsable de lrsquoaffichage de la page et ne contenant que des nœuds
neacutecessaires agrave lrsquoaffichage de la page (voir figure 110)
Une arborescence drsquoaffichage comporte plusieurs types de nœuds des nœuds Visibles des
nœuds invisibles tels que les balises de script les balises Meta etc et des nœuds masqueacutes
par le code CSS Seul le premier type est consideacutereacute dans lrsquoarborescence drsquoaffichage Les
deux autres sont omis Le proceacutedeacute drsquoomission est effectueacute en mobilisant deux proprieacuteteacutes la
proprieacuteteacute visibility hidden rendant lrsquoeacuteleacutement invisible tout en occupant de lrsquoespace dans la
mise en page et la proprieacuteteacute display none supprimant totalement lrsquoeacuteleacutement de lrsquoarborescence
drsquoaffichage La figure 111 donne une vue globale des eacutetapes et processus de la construction
des arbres abordeacutees ci-dessous
Tous les nœuds visibles sont soumis aux regravegles CSSOM et eacutemis avec leurs contenus et leurs
styles calculeacutes Neacuteanmoins leurs positions et leurs geacuteomeacutetries (tailles) restent indeacutefinies La
deacutetermination ou le calcul de ces deux paramegravetres constitue la phase de mise en page appeleacutee
parfois ajustement de la mise en page Cette derniegravere est traduite par lrsquoexemple simple donneacute agrave
la figure 112 Le corps de la page ci-dessus contient deux eacuteleacutements div imbriqueacutes le premier
eacuteleacutement div (parent) deacutefinit la taille drsquoaffichage du nœud agrave 50 de la largeur de la fenecirctre et
le second eacuteleacutement div contenu par le parent deacutefinit sa largeur agrave 50 de celui du parent soit
32
Figure 111 ndash Les eacutetapes et processus de la construction des arbres DOM CSSOM et de lrsquoarbrede rendu
33
lthtmlgtltheadgt
ltmeta name=viewport content=width=device-widthinitial-scale=1gtlttitlegtExemple de mise en pagelttitlegt
ltheadgtltbodygt
ltdiv style=width 50gtltdiv style=width 50gtHello worldltdivgt
ltdivgtltbodygt
lthtmlgt
Figure 112 ndash Un second exemple simple illustrant le processus de mise en page par le navigateur
25 de la largeur de la fenecirctre
Maintenant que toutes les informations relatives aux nœuds sont reacuteunies ceux-ci sont peints
convertis en pixels reacuteels et afficheacutes agrave lrsquoeacutecran agrave partir de lrsquoarborescence drsquoaffichage finale La
construction est acheveacutee et la page est enfin visible dans la fenecirctre La figure 113 reacutesume
toutes les eacutetapes preacuteceacutedemment deacutecrites dans cette section
34
Figure 113 ndash Vue globale du flux de reacutecupeacuteration de traitement et drsquoaffichage drsquoune page web
CHAPITRE 2
LES BUGS DrsquoINTERFACE DANS LES APPLICATIONS WEB
Les utilisateurs du web sont souvent confronteacutes lors drsquoune application web sur internet agrave
des problegravemes tregraves ennuyeux appeleacutes laquo bugs drsquointerfaces raquo Dans ce chapitre nous exposons
les diffeacuterents types drsquoapplication web et les bugs qui les affectent en montrant que les bugs
drsquointerface sont largement preacutesents dans un grand nombre de sites et applications web du
monde reacuteel et comment des bugs de ce genre ne sont pas limiteacutes agrave des problegravemes de preacutesentation
simples statiques et qursquoils reacutevegravelent dans de nombreux cas des deacutefauts dans le comportement
de lrsquoapplication
21 TYPES DrsquoAPPLICATIONS WEB
Le web est maintenant peupleacute par un nombre consideacuterable drsquoapplications par conseacutequent le
nombre de personnes affecteacutees par les bugs qursquoelles peuvent contenir est eacutenorme
211 APPLICATIONS STATIQUES
Les sites web traditionnels qursquoon appelle eacutegalement applications laquo Web 10 raquo sont statiques
le contenu drsquoune page ne change pas apregraves le chargement et chaque page de lrsquoapplication peut
36
ecirctre chargeacutee indeacutependamment de toute interaction preacutealable avec le site Le test automatique
drsquoune telle application peut ecirctre effectueacute agrave lrsquoaide drsquoun robot drsquoindexation en chargeant une page
de deacutemarrage puis en explorant automatiquement les diffeacuterentes interactions possibles sur la
page pour obtenir de nouvelles pages agrave visiter Comme chaque page de ces applications est
indeacutependante les bugs ne peuvent se produire que sur une seule page drsquoougrave vient la possibiliteacute
drsquoeacutecrire des oracles de test simples qui analyseraient le contenu de ces pages prises isoleacutement
Le Responsive Web Design est un moyen de concevoir un site web de sorte que son contenu
srsquoadapte automatiquement agrave la reacutesolution drsquoeacutecran du terminal utiliseacute pour le visualiser Une
application RWD est donc un site web adaptatif La notion de web adaptatif repense la
conception ergonomique des sites web puisqursquoil ne srsquoagit plus de concevoir autant de sites que
de terminaux mais de concevoir une seule interface auto-adaptative Ainsi les informations et
les structures techniques ne sont pas dupliqueacutees ce qui geacutenegravere des eacuteconomies drsquoeacutechelle dans
la conception et la maintenance des sites web beacuteneacuteficiant de ce mode de conception
Un site web conccedilu avec un design responsive est donc optimiseacute pour tous les appareils
disponibles sur le marcheacute ordinateurs tablettes smartphones Cette faccedilon de concevoir des
applications web est recommandeacutee en raison de quelques avantages majeurs le deacuteveloppement
et la maintenance seront plus rapides et plus simples (un seul fichier geacuterant tous les affichages)
Un reacutefeacuterencement naturel optimal est utiliseacute (pas de sous-domaines ou de redirections vers des
annuaires mobiles) puisqursquoil nrsquoy a qursquoun seul site regroupant toutes les versions et uniquement
une adresse Web (URL) Plus de deacutetails sur le concept de RWD sont preacutesenteacutes dans la section
223
37
212 APPLICATIONS WEB 20
Les applications web reacutecentes eacutegalement appeleacutees RIA (Rich Internet Applications) utilisent
des scripts cocircteacute client des eacutetats cocircteacute serveur et drsquoautres fonctionnaliteacutes pour offrir une expeacute-
rience utilisateur ameacutelioreacutee Les modifications apporteacutees agrave lrsquoeacutetat de la page peuvent venir agrave la
suite de requecirctes HTTP asynchrones chargeant un nouveau contenu Par conseacutequent ces appli-
cations sont maintenant stateful la mecircme action ou la mecircme requecircte HTTP peut renvoyer des
reacutesultats diffeacuterents en fonction des interactions passeacutees de lrsquoutilisateur Ces applications avec
eacutetat viennent avec de nouveaux types de bugs appeleacutes bugs comportementaux Contrairement
agrave un bug statique qui srsquoeacutevalue en analysant le contenu drsquoune seule page indeacutependamment des
autres un bug comportemental relie les donneacutees et lrsquoordre de consultation de plusieurs pages
de lrsquoapplication
22 TYPES DE BUGS DrsquoINTERFACE
Un bug drsquointerface est un deacutefaut dans un systegraveme web qui a des effets visibles sur le contenu
des pages servi agrave lrsquoutilisateur Nous avons effectueacute une eacutetude sur de plus de 35 applications
web [51] en tous genres Un releveacute des bugs ayant un impact sur la preacutesentation ou le contenu
de lrsquointerface utilisateur a eacuteteacute fait Le tableau 21 donne la liste des sites web et des applications
pour lesquelles au moins un bug de mise en page a eacuteteacute trouveacute Dans ce qui suit nous preacutesentons
briegravevement les bugs deacutecouverts dans cette eacutetude Nous soulignons qursquoaucun des bugs deacutecrits
ici repreacutesente un problegraveme de compatibiliteacute entre les navigateurs Les bugs sont preacutesents
peu importe le navigateur utiliseacute pour afficher la page et ils ne sont pas causeacutes par une
interpreacutetation divergente des normes par deux navigateurs diffeacuterents
38
mdash Academiaedumdash Acermdash Adagio Hotelsmdash Air Canadamdash Air Francemdash AllMusicmdash American Airlinesmdash Boingomdash Canadian
Mathematical Societymdash Customizeorgmdash Digital Ocean
mdash Dropboxmdash EasyChairmdash Elseviermdash Evous Francemdash Facebookmdash IEEEmdash Just for Laughsmdash LinkedInmdash Liveshoutmdash Microsoft TechNetmdash Monoprixmdash Moodle
mdash Naymzmdash NSERCmdash OngerNeigemdash ProQuestmdash Rail Europemdash ResearchGatemdash St-Hubertmdash SpringerOpenmdash TD Canada Trustmdash Time Magazinemdash Uniform Servermdash YouTube
Tableau 21 ndash Sites et applications web pour lesquelles au moins un bug de mise en page a eacuteteacutetrouveacute
221 BUGS STATIQUES
Un premier type de bugs appeleacutes bugs statiques collecteacutes par une eacutetude empirique dans des
sites web et applications reacuteelles On y retrouve des problegravemes tels que le chevauchement des
eacuteleacutements les eacuteleacutements qui srsquoeacutetendent en dehors de leur conteneur ou le bug drsquoeacuteleacutements mal
empileacutes Ce genre de bugs peut ecirctre diviseacute en deux cateacutegories des bugs lieacutes agrave la mise en page
et drsquoautres non lieacutes agrave la mise en page
Bugs de mise en page
Une premiegravere cateacutegorie de bug correspond agrave des perturbations dans la mise en page ou la
preacutesentation de la page elle-mecircme crsquoest-agrave-dire tout reacutesultat inattendu du concepteur de cette
page en termes de contenu ou de proprieacuteteacutes (position taille nombre drsquoeacuteleacutements)
Eacuteleacutements mal aligneacutes Un problegraveme de mise en page banal mais freacutequent est le deacutesaligne-
ment ou le deacutecalage drsquoeacuteleacutements qui doivent ecirctre aligneacutes La figure 21a montre un exemple de
39
(a) LiveShout
(b) LinkedIn
Figure 21 ndash Exemple drsquoeacuteleacutements mal aligneacutes le cadre blanc est horizontalement mal aligneacute(LiveShout) le menu Interests est deacutecaleacute drsquoun pixel par apport aux autres menus (LinkedIn)
ce bug courant mais parfois le deacutesalignement est subtil un eacuteleacutement peut ecirctre deacutecaleacute par un
seul pixel (figure 21b)
Eacuteleacutements qui se chevauchent Le problegraveme de chevauchement des eacuteleacutements qui devraient
ecirctre disjoints dans la preacutesentation drsquoune page est aussi lrsquoun des bugs les plus reacutepandus dans
cette eacutetude les problegravemes de cette nature ont eacuteteacute trouveacutes dans des sites aussi varieacutes que le
Time Magazine Air Canada Moodle et Rail Europe La figure 22 montre un exemple de ce
problegraveme
Dans certains cas le chevauchement se produit par une interruption de la mise en page causeacutee
par le redimensionnement du document principal en dessous des dimensions minimales
comme dans lrsquoexemple de la figure 22a Les conteneurs qui doivent ecirctre cocircte agrave cocircte sont
afficheacutes les uns sur les autres par le moteur de rendu du navigateur Cependant nous avons
eacutegalement constateacute que dans de nombreux cas ce chevauchement est causeacute par le fait que les
40
eacuteleacutements sont absolument positionneacutes dans une page par rapport agrave leurs dimensions lorsqursquoils
contiennent du texte en anglais et lors de lrsquoaffichage du site web dans une autre langue (comme
le franccedilais) il peut arriver que le texte correspondant soit plus long que la version anglaise ce
qui cause le chevauchement de deux eacuteleacutements qui devraient ecirctre disjoints Cela a eacuteteacute observeacute
par exemple sur la figure 22b pour le site web RailEurope
Eacuteleacutements qui srsquoeacutetendent agrave lrsquoexteacuterieur de leurs conteneurs Un autre problegraveme reacutepandu
est la preacutesence drsquoeacuteleacutements qui deacutepassent les limites de leurs conteneurs parent ce qui pro-
voque le chevauchement indeacutesirable avec des eacuteleacutements environnants Ce bug est lrsquoinverse du
preacuteceacutedent plutocirct que drsquoeacutetendre leur conteneur en dehors de ses dimensions nominales cette
fois les eacuteleacutements qui srsquoeacutelargissent agrave lrsquoexteacuterieur de leur conteneur sont simplement coupeacutes de
lrsquoaffichage
La figure 23 montre un exemple de ce dernier type dans la plateforme drsquoenseignement
en ligne Moodle (la figure 23a) des eacuteleacutements de la table sont coupeacutes de leur cocircteacute droit
Lors de lrsquoanalyse du code source de la page il se trouve que quatre autres colonnes doivent
effectivement ecirctre visibles et sont tout simplement inaccessibles puisque ils ont eacuteteacute coupeacute
Cela rend la page plus ou moins inutilisable
Un cas particulier survient lorsque le conteneur soit la fenecirctre du navigateur entiegravere et la fenecirctre
est redimensionneacutee en dessous drsquoun certain seuil Cela peut ecirctre montreacute dans la Figure 23b
le contenu du menu en haut disparaicirct lorsque la fenecirctre est redimensionneacutee Le navigateur
fournit une barre de deacutefilement horizontale mais cela ne fait deacutefiler que la partie infeacuterieure de
la page et pas le menu du haut En conseacutequence certains boutons du menu principal du site ne
peuvent plus ecirctre cliqueacutes
Nous placcedilons aussi dans cette cateacutegorie un bug rencontreacute en utilisant la fenecirctre de messagerie
41
(a) Air Canada
(b) Rail Europe
Figure 22 ndash Exemple drsquoeacuteleacutements qui se chevauchent
42
(a) Moodle
(b) LinkedIn
Figure 23 ndash Le contenu de la page est dissimuleacute de lrsquointerface en raison de son prolongementau-delagrave des dimensions du conteneur parent
43
Figure 24 ndash Le bug Facebook La zone de texte permettant au utilisateur de taper un messageinstantaneacute (agrave gauche) disparaicirct soudainement (agrave droite)
instantaneacutee de Facebook Lorsque la fenecirctre de parent est redimensionneacutee au-dessous drsquoune
largeur speacutecifique la zone de texte permettant agrave un utilisateur drsquoentrer un nouveau message
disparaicirct soudainement de lrsquointerface comme le montre la figure 24 Tous les autres eacuteleacutements
de la fenecirctre restent identiques mais il devient impossible de taper un message
Ton sur ton Ce bug est causeacute par un problegraveme de mise en page ougrave le texte drsquoun eacuteleacutement est
de la mecircme couleur que le fond de la page agrave cet endroit ce qui rend le texte invisible dans
lrsquoaffichage Bien que ce type de comportement peut ecirctre fait expregraves afin de dissimuler un
eacuteleacutement nous croyons qursquoil est tregraves peu probable que cela soit lrsquointention du deacuteveloppeur
puisqursquoil existe des moyens beaucoup plus eacuteleacutegants drsquoatteindre le mecircme reacutesultat en utilisant
les proprieacuteteacutes CSS (en deacutefinissant la proprieacuteteacute drsquoaffichage agrave none ou la proprieacuteteacute opacity agrave
0)
La figure 25 montre un exemple drsquoun tel problegraveme de mise en page sur Academiaedu (figure
25b) Dans la figure 25a le redimensionnement de la fenecirctre du navigateur en dessous drsquoune
largeur speacutecifique a pour effet impreacutevu de pousser les eacuteleacutements du menu supeacuterieur en dehors
de leur conteneur preacutevu (celui qui a un fond bleu) Par conseacutequent ces eacuteleacutements qui ont du
44
(a) ProQuest
(b) Academia
Figure 25 ndash Le bug laquo ton sur ton raquo Les eacuteleacutements de menu sont pousseacutes en dehors de leursconteneur et disparaissent (a) le texte du lien est de la mecircme couleur que le fond reacuteveacuteleacute en leseacutelectionnant avec la souris (b)
texte blanc se placent dans une zone blanche et deviennent invisibles (agrave lrsquoexception drsquoun seul
eacuteleacutement du menu qui a un fond bleu pour une raison inconnue)
Eacuteleacutements mal empileacutes Ce problegraveme se produit quand un eacuteleacutement qui devrait ecirctre rendu
au-dessus drsquoun autre est placeacute en dessous de ce dernier comme le montre la figure 26 Dans
cet exemple le bouton orange en haut de lrsquoimage est censeacute apporter un menu (liste deacuteroulante)
Toutefois le contenu de ce menu apparaissent sous le reste du contenu de la page plutocirct que
sur eux ce qui rend certains de ses eacuteleacutements inutilisables
Lrsquoordre du processus du dessin est deacutefini dans le standard de CSS crsquoest en fait lrsquoordre dans
lequel les eacuteleacutements sont empileacutes dans la pile des contextes Cet ordre affecte le dessin puisque
les piles sont dessineacutees de lrsquoarriegravere vers lrsquoavant Lrsquoordre drsquoempilement drsquoun bloc de rendu est
1 Couleur drsquoarriegravere-plan
2 Image drsquoarriegravere-plan
3 Bordures
45
Figure 26 ndash Un eacuteleacutement est placeacute incorrectement sur un autre
4 Enfants
5 Contour
Ainsi une violation de cet ordre pour une raison inconnue peut causer ce genre de problegraveme
La plupart des problegravemes de cette nature peuvent ecirctre corrigeacutees en attribuant correctement la
proprieacuteteacute z-index de lrsquoeacuteleacutement deacutefectueux
Disposition briseacutee Une rupture majeure dans la structure attendue drsquoune page se produit
quand un certain nombre de ressources importantes telles que les fichiers CSS le code
JavaScript ou les images ne parvient pas agrave ecirctre reacutecupeacutereacute par le navigateur En conseacutequence
de nombreux eacuteleacutements de la page nrsquoont pas leurs deacuteclarations de style et sont positionneacutes et
dimensionneacutes en fonction du style par deacutefaut fourni par le moteur de rendu
La figure 27 montre un cas assez grave drsquoun tel problegraveme ougrave essentiellement toutes les
46
Figure 27 ndash Un exemple drsquointerface briseacutee en raison de lrsquoeacutechec du chargement de certainesressources
deacuteclarations CSS sont manquantes Ceci est causeacute par le fait que le fichier aparthotelcss
nrsquoa pas reacuteussi agrave ecirctre chargeacute pour une raison inconnue Le mecircme problegraveme a eacuteteacute observeacute
momentaneacutement sur le portail web Digital Ocean 28
Sur le site web de Digital Ocean la page de connexion (login) est briseacutee et toutes les autres
pages aussi comme le montre la figure 28a Cela est ducirc au fait que le navigateur a abandonneacute
le chargement de nombreuses ressources dans la page (y compris toutes les images) Il est agrave
noter que malgreacute ces problegravemes le site Web reste fonctionnel La figure 28b repreacutesente une
capture drsquoeacutecran de ce agrave quoi la page devrait ressembler
HTML malformeacute Dans la figure 29 lrsquoHTML malformeacute rend impossible de voir le fond
drsquoeacutecran
47
(a) Digital Ocean sans CSS (b) Digital Ocean avec CSS
Figure 28 ndash Exemple drsquointerface briseacute dans le site Digital Ocean
Figure 29 ndash Exemple drsquoHTML mal formeacute
48
Eacuteleacutements inaccessibles Dans la figure 210a la page affiche correctement une mise en page
laquoeacutecran largeraquo lorsque la fenecirctre du client est assez large Par contre si la largeur de la fenecirctre
est moyenne comme le montre la figure 210b on observe que le bouton de connexion (sign in)
en haut agrave droite srsquoest deacuteplaceacute agrave lrsquoexteacuterieur de la bande supeacuterieure
Incoheacuterence dans les valeurs possibles drsquoun champ de formulaire Dans une page du site
CallingCards le champ du code postal dans le formulaire est preacute-rempli avec 6 caractegraveres de
donneacutees anteacuterieures mais en essayant de modifier le code postal il nrsquoest pas possible de taper
plus de 5 caractegraveres dans ce champ (figure 211)
Figure 211 ndash Incoheacuterence dans le champ de formulaire du site CallingCards
Bugs non lieacutes agrave la mise en page
Plusieurs autres bugs peuvent ecirctre deacutetecteacutes en analysant le contenu et la preacutesentation drsquoune page
Nous verrons dans la suite que certains drsquoentre eux se rapportent mecircme aux comportements
attendu ou aux fonctionnaliteacutes de lrsquoapplication mais peuvent quand mecircme ecirctre deacutetecteacutes par
des regravegles exprimeacutees sur un seul instantaneacute statique de la fenecirctre de lrsquoapplication
49
Mojibake et problegravemes drsquoencodage Plusieurs sites et applications gegraverent mal les donneacutees
de chaicircne en dehors de lrsquoASCII 7-bits Divers encodages de caractegraveres tels que Cp1252 ou
UTF-8 peuvent ecirctre utiliseacutes pour repreacutesenter les caractegraveres laquo accentueacutes raquo ou laquo eacutetrangers raquo
Cependant le mecircme caractegravere peut ecirctre repreacutesenteacute par une valeur binaire diffeacuterente selon le
scheacutema de codage utiliseacute pire certains codages comme UTF-8 peuvent utiliser plusieurs
octets pour repreacutesenter un seul caractegravere
Les problegravemes surgissent quand un systegraveme nrsquointerpregravete pas correctement le contenu drsquoune
chaicircne de caractegraveres croyant qursquoun document est dans un certain encodage alors qursquoil en
utilise reacuteellement un autre Il en reacutesulte souvent un caractegravere incorrect superflu ou pas afficheacute
du tout ce pheacutenomegravene est appeleacute mojibake 1 Par exemple lrsquoencodage UTF-8 du caractegravere
laquo eacute raquo lorsqursquoil est interpreacuteteacute comme une chaicircne Cp1252 produit laquo Atilde ccopy raquo comme le montre la
figure 212a Agrave lrsquoinverse le rendu Cp1252 du caractegravere laquo eacute raquo donne laquo raquo quand il est interpreacuteteacute
comme du UTF-8 (figure 212b)
Bien que ces caractegraveres puissent ecirctre des donneacutees leacutegitimes leur preacutesence dans le contenu drsquoun
eacuteleacutement indique tregraves probablement une manipulation incorrecte de lrsquoencodage des chaicircnes par
lrsquoapplication eacutetudieacutee
Un autre exemple de ce genre de bug est montreacute dans la figure 213
213a donne lrsquoexemple lors de lrsquoinvitation de quelqursquoun de votre carnet drsquoadresses dont le nom
contient un accent Doodle affiche son nom incorrectement et cela donne une adresse invalide
213b montre qursquoen cliquant sur la suggestion on observe que lrsquoajout est fait mais que le nom
est coupeacute en deux parties agrave lrsquoendroit mecircme du caractegravere eacutechappeacute
1 Terme japonais signifiant laquo transformation de caractegravere raquo
50
Problegravemes drsquoeacutechappement Les problegravemes drsquoeacutechappement surviennent lorsque les chaicircnes
avec des caractegraveres speacuteciaux ne parviennent pas agrave ecirctre correctement codeacutees ou deacutecodeacutees entre
deux applications La manifestation la plus freacutequente de ce problegraveme est lors de la lecture et
de lrsquoeacutecriture des chaicircnes de caractegraveres dans une base de donneacutees Certains caractegraveres comme
lrsquoapostrophe neacutecessitent drsquoecirctre doubleacutes afin de ne pas ecirctre confondus avec un seacuteparateur
de chaicircne Les problegravemes surviennent quand un systegraveme ne parvient pas agrave remplacer les
apostrophes doubles par des apostrophes simples lors de lrsquoaffichage des donneacutees dans un
formulaire
Lors de lrsquoenregistrement du contenu du formulaire au retour agrave la base de donneacutees chaque
apostrophe sera de nouveau doubleacutee entraicircnant un quadruplet drsquoapostrophes lors du char-
gement de la page la prochaine fois et ainsi de suite ceci est illustreacute dans la figure 214
Ainsi la recherche de plusieurs apostrophes dans un formulaire peut ecirctre utiliseacutee pour deacutetecter
lrsquoeacutechappement incorrect agrave lrsquointeacuterieur du code source
Un problegraveme de nature similaire se produit lorsque des caractegraveres speacuteciaux dans le code source
de la page (tels que HTML ou JavaScript) sont eacutechappeacutes incorrectement Par exemple une
seacutequence comme ltpgt peut ecirctre transformeacutee en ampltpampgt reacutesultant en la chaicircne litteacuterale ltpgt
afficheacutee comme du texte plutocirct que drsquoecirctre interpreacuteteacutee comme une balise de paragraphe
Nous avons deacutecouvert des exemples de ce problegraveme sur EasyChair qui affiche du code HTML
brut ou sur YouTube qui affiche du code JavaScript comme on peut le voir agrave la figure 215
222 BUGS COMPORTEMENTAUX
Drsquoautres bugs peuvent ecirctre appeleacutes laquo comportementaux raquo ils reacutevegravelent un problegraveme dans la
fonctionnaliteacute du site ou alors ils peuvent ecirctre exprimeacutes uniquement en termes drsquoune seacutequence
51
de plusieurs pages dans lrsquoordre
Contrairement agrave une application web traditionnelle une application Internet riche (RIA) utilise
les technologies Web modernes eacutemergentes telles que AJAX [47] Flash et Silverlight Par
conseacutequent de nouveaux problegravemes de tests web sont ajouteacutes aux problegravemes existants Une
caracteacuteristique importante de ces applications est qursquoelles sont stateful leur code peut stocker
des donneacutees persistantes sur le client (en utilisant WebStorage les proprieacuteteacutes CSS les variables
JavaScript et les objets) et sur le serveur (agrave lrsquoaide de cookies de stockage de session et de bases
de donneacutees) De plus lrsquoeacutetat de lrsquoapplication est disperseacute sur un certain nombre drsquoeacuteleacutements
et ne peut pas simplement ecirctre assimileacute agrave lrsquoURL de la page en cours (afficheacutee dans la barre
drsquoadresse du navigateur) Des fonctionnaliteacutes telles que la communication asynchrone la
manipulation DOM cocircteacute client et les gestionnaires drsquoeacuteveacutenements permettent de changer lrsquoeacutetat
de lrsquoapplication sans un rechargement complet de la page et sans modifier son URL [35]
Une conseacutequence positive de ces fonctionnaliteacutes est qursquoune telle application peut fournir
une expeacuterience utilisateur plus riche (drsquoougrave son nom) sans les cookies et JavaScript les
opeacuterations simples telles que les manipulations de panier les sessions utilisateur (connexion
deacuteconnexion) et autres fonctionnaliteacutes ne seraient pas possibles Cependant la preacutesence drsquoun
eacutetat dans lrsquoapplication introduit eacutegalement la possibiliteacute drsquoincoheacuterences dans lrsquoeacutetat afficheacute
drsquoune page agrave une autre Ces problegravemes sont appeleacutes bugs comportementaux car ils sont la
conseacutequence de lrsquointeraction de plusieurs pages entre elles et dans un certain ordre
Eacuteleacutements mobiles Certains eacuteleacutements peuvent changer leur position involontairement lors
de lrsquointeraction avec un utilisateur La figure 216 montre un exemple drsquoun tel problegraveme sur
le site web du CRSNG ougrave eacutecrire un texte dans une zone de texte vide auparavant reacuteduit sa
largeur de 4 pixels et deacutecale leacutegegraverement les zones de texte restantes vers la gauche
52
Ce problegraveme srsquoest aveacutereacute plus reacutepandu que nous nous attendions les variations comprennent
certains styles drsquoeacuteleacutements (la bordure ou la taille) qui ont eacuteteacute changeacutes sans aucune raison
apparente
Le dysfonctionnement des boutons Beaucoup drsquoapplications montrent agrave lrsquoutilisateur des
eacuteleacutements qui se comportent comme une fenecirctre pop-up (une fenecirctre secondaire qui srsquoaffiche
sans avoir eacuteteacute solliciteacutee par lrsquoutilisateur devant la fenecirctre de navigation principale lorsqursquoon
navigue sur Internet) Ce moyen est communeacutement utiliseacute pour afficher des messages publici-
taires ou un avertissement comme la reacuteponse agrave un message priveacute dans un forum
Toutefois dans un certain nombre de cas les boutons dans ces fenecirctres sont inopeacuterants cliquer
sur eux un certain nombre de fois ne produit aucun effet Ce problegraveme a eacuteteacute teacutemoin dans des
sites aussi varieacutes qursquoAmerican Airlines Dropbox et BitBucket Dans certains cas lrsquoutilisateur
est effectivement coinceacute dans le pop-up ou la page qui contient le bouton et ne peut pas sortir
sans forcer un rechargement complet du document
Confusion dans le statut de connexion Deux sites web dans notre eacutetude preacutesentent des
incoheacuterences dans lrsquoeacutetat drsquoune page meacutelangeant des eacuteleacutements de la fenecirctre drsquoune page
normalement reacuteserveacutes aux utilisateurs enregistreacutes (tels que les menus personnaliseacutes) ainsi
que des eacuteleacutements reacuteserveacutes aux utilisateurs qui sont deacuteconnecteacutes (comme un formulaire de
connexion)
Nous avons assisteacute agrave un tel comportement dans le site web de lrsquoIEEE pour le formulaire de
demande de membre Senior Apregraves lrsquoexpiration drsquoun certain deacutelai lrsquoutilisateur doit neacutecessaire-
ment se connecter agrave nouveau toutefois la page preacutesenteacutee agrave lrsquoutilisateur est celle repreacutesenteacutee
sur la figure 217 On remarque que le nom de lrsquoutilisateur est toujours preacutesent en haut agrave droite
de la page mecircme srsquoil est censeacute ecirctre deacuteconnecteacute (les identifiants de connexion sont demandeacutes)
53
Cliquer sur ce nom apporte le menu deacuteroulant qui est normalement accessible uniquement
lorsque lrsquoutilisateur est connecteacute Le mecircme problegraveme a eacuteteacute trouveacute sur le site de reacuteservation
drsquoAir Canada
Incoheacuterences dans le reacutesultat de la recherche Un autre problegraveme de comportement est
celui de lrsquoincompatibiliteacute entre une requecircte faite par un utilisateur et les reacutesultats afficheacutes par
lrsquoapplication en reacuteponse agrave cette requecircte
La figure 218 montre un exemple de ce problegraveme sur le site web des eacutepiceries Monoprix
Lors de la recherche des magasins agrave proximiteacute un utilisateur peut taper un code postal dans
un champ de formulaire puis cliquer sur laquo Valider raquo Cependant les reacutesultats de recherche
afficheacutes dans la page suivante ne montrent presque jamais les magasins avec le code postal
souhaiteacute
Comme avec tous les bugs dans la preacutesente cateacutegorie cela peut ecirctre observeacute seulement par
la correacutelation de plusieurs eacuteleacutements dans deux eacutetats diffeacuterents de la page le texte dans la
zone de texte un clic sur un bouton speacutecifique suivi par le texte dans la liste des eacuteleacutements qui
apparaissent dans la page reacutesultante
223 BUGS DE RESPONSIVE WEB DESIGN
Il y a quelques anneacutees les deacuteveloppeurs Web pouvaient faire des hypothegraveses sur la taille de
lrsquoeacutecran des appareils des utilisateurs Les ordinateurs de bureau ont eacuteteacute conccedilus pour acceacuteder
aux sites web en assumant une taille de fenecirctre minimale il eacutetait donc laquo normal raquo que pour
une largeur de fenecirctre plus petite le site semble briseacute Il srsquoagissait drsquoune approche valide
dans une eacutepoque ougrave les tablettes et les smartphones eacutetaient inouiumls (pas agrave la porteacutee de tout le
monde peu utiliseacutes) Aujourdrsquohui une autre approche est neacutecessaire pour srsquoassurer que les
54
sites fonctionnent correctement dans une gamme de diffeacuterents appareils et tailles de viewport
(le viewport deacutesigne la partie drsquoune page web qui est visible dans la fenecirctre du navigateur
drsquoun ordinateur smartphone tablette ou drsquoun autre dispositif Le viewport est variable et
mouvant en fonction de la taille de la fenecirctre du navigateur et en fonction de lrsquoutilisation des
fonctions de deacutefilement ou scrolling (souris ou ascenseur))[6]
Par conseacutequent la conception des sites doit deacutesormais tenir compte de plusieurs cateacutegories
drsquoappareil selon la taille de lrsquoeacutecran Cependant le changement rapide des proprieacuteteacutes de
lrsquoappareil nrsquoa pas pu ecirctre suivi par les deacuteveloppeurs web Pour remeacutedier agrave ce problegraveme ces
derniers ont eu recours aux mecircmes hypothegraveses en fonction de la demande du serveur La
demande drsquoune ressource par un navigateur est suivie par une chaicircne drsquoagent utilisateur (user
agent string) geacuteneacuteralement envoyeacutee avec la demande pour identifier le type de navigateur
utiliseacute La lecture de cette derniegravere du cocircteacute du serveur entraicircne la diffusion de deux versions
une version mobile conccedilue pour une largeur maximale si lrsquoutilisateur envoyait des chaicircnes
drsquoagents drsquoutilisateurs mobiles et une version bureau conccedilue pour une largeur minimale
Les deacuteveloppeurs ont pu suite agrave lrsquointroduction des media queries de CSS eacutecrire des deacutecla-
rations de style conditionnelles par des proprieacuteteacutes multimeacutedia telle que la taille de la fenecirctre
(voir figure 219) Lrsquoadaptation drsquoun site pour un support speacutecifique ou une taille de fenecirctre au
moment de lrsquoexeacutecution est donc devenue donc possible Ce concept qui sert agrave faire en sorte
qursquoun seul site reacuteponde agrave diffeacuterentes proprieacuteteacutes multimeacutedias (principalement la taille de la
fenecirctre) au moment de lrsquoexeacutecution afin drsquoameacuteliorer lrsquoexpeacuterience de lrsquoutilisateur est appeleacute
Responsive Web Design [59]
Une eacutetude reacutecente meneacutee par Walsh et al identifie cinq types de bugs survenant plus
particuliegraverement dans les sites web RWD [73] Pour la plupart il srsquoagit de bugs deacutejagrave observeacutes
dans drsquoautres sites au cours de notre propre eacutetude
55
Collision drsquoeacuteleacutements Crsquoest un bug dans lequel les eacuteleacutements se chevauchent en raison de la
modification de la fenecirctre (viewport) Ce bug peut eacutegalement influencer le bon fonctionnement
des sites web dans le cas ougrave certains eacuteleacutements fonctionnels dans les pages sont masqueacutes
Deacutepassement drsquoeacuteleacutements Les eacuteleacutements ont besoin de se redimensionner ils manquent
drsquoespace mais ils doivent aussi ecirctre assez grands pour contenir tous leurs enfants Cela arrive
dans le cas ougrave un eacuteleacutement deacutepasse agrave lrsquoexteacuterieur de son parent en raison drsquoun manque drsquoespace
Lrsquoeacuteleacutement peut alors ecirctre inaccessible masqueacute par un autre eacuteleacutement ou par-dessus drsquoautres
eacuteleacutements
Ce bug sur le site httpswwwthelilycom On peut le voir dans la figure 220 ougrave le div
avec les boutons du menu se termine en dehors de la barre de menu et hors de vue
Deacutepassement du viewport Ce bug se produit lorsque les eacuteleacutements sont pousseacutes hors de
la fenecirctre (viewport) et deviennent inaccessibles ou cacheacutes Sur le site web httpswww
slaveryfootprintorg ce bug a eacuteteacute trouveacute La figure 221 montre comment les bugs non
observables peuvent creacuteer des problegravemes agrave des largeurs infeacuterieures Ici le div du milieu est un
peu en dehors de la fenecirctre mais il ne montre aucun problegraveme observable Cependant crsquoest agrave
440px que nous pouvons voir clairement le contenu deacuteborder de la fenecirctre
Disposition agrave petite eacutechelle En fonction de lrsquoimpleacutementation certaines mises en page
peuvent ecirctre afficheacutees correctement que dans un petit intervalle de largeur Par exemple un
affichage pourrait ecirctre seulement correct entre 320 et 325 pixels de largeur
Couverture drsquoeacuteleacutements Ce bug survient lorsqursquoun conteneur nrsquoest pas assez large pour
contenir tous les eacuteleacutements et qursquoun ou plusieurs eacuteleacutements sont pousseacutes sur une ligne suppleacute-
56
mentaire
Un exemple drsquoeacuteleacutement enveloppeacute peut ecirctre vu dans la figure 222 On pourrait faire valoir que
ce nrsquoest pas un bug cependant agrave des largeurs infeacuterieures la liste est de nouveau aligneacutee en
haut Cela montre qursquoayant cette liste aligneacutee en haut est la disposition deacutesireacutee
Nous donnerons des exemples sur la deacutetection de ce genre de bugs dans la section 542
57
(a) Fenecirctre large
(b) Fenecirctre moyenne
Figure 210 ndash Exemple drsquoeacuteleacutements inaccessibles
58
(a) SpringerOpen
(b) Naymz
Figure 212 ndash Exemple de mojibake (a) donneacutees UTF-8 afficheacutees comme Cp1252 (b) donneacuteesCp1252 afficheacutees comme UTF-8
59
(a) Mojibake adresse invalide
(b) Mojibake nom coupeacute en deux partie
Figure 213 ndash Exemples de Mojibake dans Doodle
60
Figure 214 ndash Des donneacutees extraites de la base de donneacutees sont incorrectement eacutechappeacutees dansIEEE PDF eXpress on constate la preacutesence de plusieurs apostrophes
Figure 215 ndash Sur cette page YouTube du code JavaScript est afficheacute au lieu drsquoecirctre interpreacuteteacute
Figure 216 ndash Eacuteleacutements mobiles la position et la bordure de la zone du texte changent lors de lasaisie du texte (NSERC)
61
Figure 217 ndash Confusion connexiondeacuteconnexion dans une page web le contenu pour un utilisa-teur connecteacute (en haut de la page a droite) coexiste avec le formulaire de connexion reacuteserveacute auxutilisateurs qui ne sont pas en principe connecteacutes
Figure 218 ndash Incoheacuterences dans le reacutesultat de la recherche
media (max-width 420px) body
background-color white
media (min-width 421px)
body background-color blue
Figure 219 ndash Code CSS avec des conditions sur la largeur de lrsquoappareil Il srsquoagit drsquoun exemplede media queries
62
(a) Tous les boutons sont correcte-ment dans la barre de menu
(b) Le bouton laquo About raquo en sur-brillance fait saillie en dehors dela barre de menu son parent
Figure 220 ndash Le bug de deacutepassement drsquoeacuteleacutements sur le site httpswwwthelilycom
(a) Le div est en surbrillance mais il nrsquoy a pas debug observable
(b) En 440px nous voyons lemecircme div avec un bug obser-vable ougrave le texte deacuteborde en de-hors de la fenecirctre
Figure 221 ndash Le bug de deacutepassement du viewport sur le site httpswwwslaveryfootprintorg
(a) La liste est en haut (top-aligned) (b) Agrave une largeur infeacuterieure lrsquoeacuteleacutementlaquo CGV raquo est pousseacute sur une ligne suppleacutemen-taire
Figure 222 ndash Le bug de couverture drsquoeacuteleacutements sur le site httpswwwanthedesignfr
CHAPITRE 3
EacuteTAT DE LrsquoART
Il existe un certain nombre drsquooutils servant agrave tester les applications web Dans ce chapitre nous
classons les approches existantes en quatre grandes familles qursquoon nomme successivement
outils de tests approches visuelles approches deacuteclaratives et outils RWD Nous allons les
exposer en donnant un peu plus de deacutetails sur quelques outils relatifs agrave chaque famille
drsquoapproches Enfin nous citons leurs points faibles en montrant leurs limites dans certains cas
31 OUTILS DE TEST
La deacutetection de bugs drsquointerface peut drsquoabord ecirctre abordeacutee comme un problegraveme de test logiciel
classique Sous cet angle il se veut une geacuteneacuteralisation des fonctionnaliteacutes offertes par des
logiciels drsquoanalyse de sites web comme Google Analytics 1 ou Piwik 2 Ces outils suivent les
requecirctes HTTP et fournissent un tableau de bord pour analyser des donneacutees de base pays
drsquoorigine dureacutee drsquoune session etc Cependant ces outils ne gegraverent geacuteneacuteralement pas Ajax ne
peuvent pas ecirctre utiliseacutes comme outils de test (ils nrsquoeacutevaluent pas les conditions sur le contenu
de la page par exemple) et ne signalent rien sur le contenu de la page sur les actions de
1 httpwwwgooglecomanalytics2 httpwwwpiwikorg
64
WebDriver driver = new FirefoxDriver()driverget(http)ListltWebElementgt items = driverfindElements(BycssSelector(li))int left = -1for (WebElement item items) if (left == -1) left = itemgetLocation()getX()continue
assert(left = itemgetLocation()getX())
Figure 31 ndash Exemple de code pour Selenium WebDriver
lrsquoutilisateur ou les requecirctes Ajax
Les logiciels de test en ligne tels que Capybara Selenium WebDriver Watij ou Sahi sont plus
proches de nos objectifs Ces outils fournissent diffeacuterents langages pour deacutecrire les tests et
eacutecrire des assertions sur lrsquoapplication Les scripts WebDriver sont eacutecrits en Java Capybara
a sa propre API 3 dans le langage Ruby Watij utilise WebSpec 4 qui est une API deacutefinie
par-dessus Java (35 donne un exemple de test webspec-watij) et Sahi utilise SahiScript
une extension de JavaScript 5 Tous ces langages sont impeacuteratifs (crsquoest-agrave-dire proceacuteduraux) et
visent agrave piloter une application en effectuant des actions La partie test se reacuteduit agrave lrsquoinsertion
drsquoinstructions similaires agrave assert dans le code du script A titre drsquoexemple la figure 31
donne un extrait de code Java pour Selenium WebDriver pour veacuterifier que tous les eacuteleacutements
satisfaisant un seacutelecteur CSS sont agrave gauche
3 httpmakandracardscommakandra1422-capybara-the-missing-api4 httpwatijcomwebspec-api5 httpsahicoin
65
311 CAPYBARA
Capybara est un framework drsquoautomatisation Web utiliseacute pour creacuteer des tests fonctionnels qui
simulent lrsquointeraction des utilisateurs agrave une application Il constitue une bibliothegraveque conccedilue
pour ecirctre utiliseacutee sur un pilote Web sous-jacent (underlying web driver) tels que selenium-web
driver rack test driver ou capybara-webkit Il fournit un DSL (Domain Specific Language)
servant agrave deacutecrire les actions exeacutecuteacutees par ces pilotes Web [30] Une fois la page est chargeacutee
via le DSL et le pilote Web sous-jacent Capybara essayera de localiser lrsquoeacuteleacutement pertinent
dans le DOM (Document Object Model) et exeacutecutera une action du genre clics de boutons
de liens etc Son DSL deacuteployeacute pour exprimer les actions agrave exeacutecuter est tregraves intuitif la figure
32 montre quelques unes de ses commandes de base Dans le but de trouver un eacuteleacutement[30]
Capybara par lrsquointermeacutediaire du DSL cherchera dans le DOM les attributs suivants
mdash Champ de texte (fill_in) id name eacuteleacutement drsquoeacutetiquette associeacute (label)
mdash Cliquez sur un lienbouton (click_link click_button) id titre texte dans la
balise valeur
mdash Case agrave cocherbouton radioliste deacuteroulante (check uncheck choose select) id nom
eacuteleacutement drsquoeacutetiquette associeacute (label)
mdash Teacuteleacutecharger le fichier (attach_file) id nom
312 WATIJ
Watij ou Web Application Testing en Java est un projet de test impleacutementeacute en Java destineacute agrave
automatiser les tests fonctionnels des applications Web au-dessus de IE (Internet Explorer) Il
est baseacute sur la conception de Watir [33] et possegravede une capaciteacute de recherche drsquoeacuteleacutements lui
permettant de trouver drsquoacceacuteder et de controcircler facilement nrsquoimporte quel eacuteleacutement HTML agrave
66
visit(rsquopage_urlrsquo) navigate to pageclick_link(rsquoid_of_linkrsquo) click link by idclick_link(rsquolink_textrsquo) click link by link textclick_button(rsquobutton_namersquo) fill text fieldfill_in(rsquoFirst Namersquo with =gt rsquoJohnrsquo) choose radio buttonchoose(rsquoradio_buttonrsquo) choose radio buttoncheck(rsquocheckboxrsquo) check in checkboxuncheck(rsquocheckboxrsquo) uncheck in checkboxselect(rsquooptionrsquo from=gtrsquoselect_boxrsquo) select from dropdownattach_file(rsquoimagersquo rsquopath_to_imagersquo) upload file
Figure 32 ndash Commandes de base de Capybara [30]
travers le DOM en mobilisant lrsquointerface COM Il prend en charge drsquoautre part les expressions
XPath pour trouver les eacuteleacutements HTML sur une page et gegravere les pop-up (fenecirctres contextuel
du navigateur) en les interceptant et les rendant disponibles pour lrsquointeraction Watij peut
deacutetecter la fin du chargement drsquoune page en cours de chargement Watij dispose drsquoun ensemble
relativement riche drsquoAPI pour lrsquoeacutecriture de scripts de simulation La connexion agrave un site Web
exige agrave chaque fois des informations tel que le nom de lrsquoutilisateur et le mot de passe (page
de connexion (login) de Yahoo figure 34) Les tacircches manuelles demandeacutees dans ce cas agrave
lrsquoutilisateur sont les suivantes
1 Afficher une fenecirctre de navigateur
2 Mettre lrsquoURL correcte pour ouvrir cette page
3 Attendre que la page se charge et se stabilise
4 Taper le nom drsquoutilisateur dans le champ ID
5 Taper le mot de passe
6 Cliquer sur le bouton Connexion
Le code approprieacute pour automatiser les tests fonctionnels de ces eacutetapes en utilisant Watij est
donneacute dans la figure 33
67
IE ie = new IE()iestart(wwwmailyahoocom)ietextField(SymbolFactoryidusername)set(ouss)ietextField(SymbolFactoryidpasswd)set(ber2017)iebutton(SymbolFactoryidsave)click()
Figure 33 ndash Exemple drsquoutilisation de Watij [71]
Figure 34 ndash Page de connexion (login) de Yahoo [71]
68
public class WebspecDemoTest
WebSpec spec
Beforepublic void setup()spec = new WebSpec()safari()
Afterpublic void tearDown()specbrowser()close()
Testpublic void testSearchWikipedia() throws Exception specopen(httpdewikipediaorgwikiWikipediaHauptseite)
specfindinput()withid(searchInput)setvalue(Softwaretest)specfindbutton()withid(searchButton)click()assertEquals(Softwaretest specfindh1()withid(firstHeading)getinnerText())
specfinda()withinnerText(Quality)click()assertEquals(Softwarequalitat specfindh1()withid(firstHeading)getinnerText())
Testpublic void testOpenGoogle() throws Exception specopen(httpwwwgooglede)specjquery(input[name=rsquoqrsquo])setvalue(Testing)specfindinput()withname(btnG)click()assertTrue(specfinddiv()withid(res)finda()getinnerText()
startsWith(Softwaretesting))
Figure 35 ndash Exemple simple drsquoun test JUnit Watij WebSpec [7]
69
313 SAHI
Sahi est un outil open source drsquoautomatisation et de test drsquoapplications web En tant qursquooutil
drsquoautomatisation Sahi offre la possibiliteacute drsquoenregistrer et de lire des scripts Il prend en charge
Java et JavaScript Mecircme si SahiScript ressemble agrave JavaScript il nrsquoest pas exeacutecuteacute comme le
JavaScript normal dans le navigateur Lrsquoideacutee de base du fonctionnement de Sahi est deacutecrite
ci-dessous
les parties centrales de Sahi montreacutes dans la figure 37 incluent le serveur proxy Sahi et
le moteur JavaScript Les reacuteponses HTML qui transitent par le proxy sont modifieacutees de
telle sorte que JavaScript soit injecteacute au deacutebut et agrave la fin de la reacuteponse Cela permettra au
navigateur drsquoenregistrer et de lire les scripts et de communiquer avec le proxy en cas de
besoin En plus de la gestion des demandes de pages du navigateur Sahi gegravere eacutegalement les
commandes personnaliseacutees lieacutees agrave lrsquoenregistrement agrave la lecture etc envoyeacutees par celui-ci
Les fonctionnaliteacutes propres de Sahi font de lui un bon support des fichiers de base de donneacutees
supportant JavaScript AJAX ainsi que les API simples Outre ses fonctionnaliteacutes normales
agrave lrsquoeacutegard de la prise en charge de laquo ant raquo(lrsquooutil logiciel) Du fait que ses API ne deacutependent
pas beaucoup de la structure HTML le controcircleur Sahi (IDE) peut ecirctre utiliseacute dans diffeacuterents
navigateurs Sahi qui nrsquoutilise pas XPath renferme des API tels que _ near _in etc
lrsquoaidant agrave trouver un eacuteleacutement par rapport agrave un autre laquo SahiScript raquo est fondeacute sur JavaScript
Il est analyseacute par Sahi et exeacutecuteacute par le moteur JavaScript rhino La figure 36 illustre un
exemple de constructions (exemple drsquoeacutecriture de conditions) dans Sahi Elles sont identiques agrave
JavaScript hormis le $ obligatoire utiliseacute dans les variables
De plus tous les outils mentionneacutes ci-dessus (agrave lrsquoexception de Sahi) neacutecessitent un plugin
speacutecifique au navigateur pour fonctionner et ne supportent donc qursquoune poigneacutee de navigateurs
en geacuteneacuteral les laquo Big Five raquo (Firefox Safari IE Opera et Chrome) Cependant la part de marcheacute
70
Comparer des valeurs normalesif ($username == PartnerUser)
_click(_link(Partner Login))
Comparer avec les attributs du navigateur exposeacutes par Sahiif (_getText(_div(page_type)) == Partner Page)
_click(_link(Partner Login))
Comparaison avec les attributs du navigateur NON exposeacutes par les fonctions inteacutegreacutees de Sahi en utilisant _fetchif (_fetch(_link(0)href) == httpsahicoin)
_click(_link(Partner Login))
Comparaison avec les attributs du navigateur NON exposeacutes par les fonctions inteacutegreacutees de Sahi en utilisant _conditionif (_condition(_link(0)href == httpsahicoin))
_click(_link(Partner Login))
Figure 36 ndash Exemple de Sahi script [18]
Figure 37 ndash Architecture de Sahi (figure tireacutee de [21])
71
des navigateurs autres que ceux-ci eacutequivaut agrave 20 et srsquoeacutelegraveve agrave 63 pour les appareils autres
que les ordinateurs de bureau (tablettes consoles et mobiles) 6 En dehors de Sahi ces outils
de test nrsquoatteignent pas plus des trois quarts du marcheacute et pour certains seulement 25 pour
les appareils autres que les ordinateurs de bureau Par conseacutequent lrsquoaffirmation selon laquelle
laquo la plupart des utilisateurs raquo sont pris en charge par eux est agrave peu pregraves non fondeacutee
32 APPROCHE VISUELLE
Pour deacuteceler les deacutefauts dans la mise en page lrsquooutil principal deacuteployeacute par ce genre de
techniques est geacuteneacuteralement la vision par ordinateur Ces derniegraveres consistent entre autres en
la deacutelimitation des bordures des eacuteleacutements par la deacutetection des contours et en la deacutecouverte des
changements par le calcul de la diffeacuterence entre deux captures drsquoeacutecran dont les couleurs du
texte des arriegravere-plans seront compareacutees pour repeacuterer le texte illisible Au lieu drsquoagir sur des
informations speacutecifiques agrave la mise en page telles que la taille et la position des eacuteleacutements ces
techniques sont baseacutees sur la comparaison des captures drsquoeacutecran pixel par pixel Dans ce cas
les erreurs sous la forme drsquoune capture drsquoeacutecran sont signaleacutees et clairement marqueacutees
321 WEBSEE
Certains travaux ont eacutegalement eacuteteacute reacutealiseacutes sur lrsquoutilisation des techniques drsquoanalyse drsquoimage
pour identifier les problegravemes de mise en page [69] WebSee [58] est en particulier un outil
impleacutementeacute en Java qui utilise plusieurs bibliothegraveques tierces pour impleacutementer certains des
algorithmes speacutecialiseacutes Il applique des techniques du domaine de la vision par ordinateur pour
analyser la repreacutesentation visuelle des pages Web pour deacutetecter automatiquement et localiser
les eacutechecs de preacutesentation WebSee identifie les eacutechecs de preacutesentation puis deacutetermine les
6 En date de feacutevrier 2014 tel que reacutecupeacutereacute sur StatCounter httpgsstatcountercom
72
eacuteleacutements dans la source HTML de la page qui pourraient ecirctre responsables des eacutechecs observeacutes
en comparant la repreacutesentation visuelle de la page Web rendue sous test et son apparence
drsquoorigine (oracle)
A cette fin WebSee prend en entreacutee le code HTMLCSS de la page agrave analyser et un oracle
(une image) du rendu attendu de la page Un ensemble de diffeacuterences entre la page rendue
et lrsquoimage de reacutefeacuterence est calculeacute et ces diffeacuterences sont ensuite regroupeacutees en groupes
susceptibles de repreacutesenter diffeacuterents deacutefauts sous-jacents dans la page Une deuxiegraveme phase
de traitement tente drsquoidentifier les eacuteleacutements HTML correspondant aux pixels de diffeacuterence
qui sont ensuite ordonneacutes par une meacutetrique de prioriteacute et envoyeacutes agrave lrsquoutilisateur La figure
38 montre les diffeacuterentes phases de lrsquoapproche La premiegravere entreacutee est la page web (P) qui
devrait ecirctre analyseacute pour deacuteterminer les deacutefaillances de preacutesentation La forme de P est une
URL qui pointe vers soit un emplacement sur le reacuteseau ou drsquoun systegraveme de fichiers ougrave tous les
fichiers HTML CSS JavaScript et les fichiers meacutedias de P sont accessibles
La deuxiegraveme entreacutee est lrsquooracle (O) qui speacutecifie les proprieacuteteacutes drsquoexactitude visuels de P La
forme de O est une image qui peut ecirctre soit une maquette ou une capture drsquoeacutecran drsquoune version
correcte de P
La troisiegraveme entreacutee est un ensemble de reacutegions speacuteciales (SR) deacutefinissant des zones de O qui
contiendront du texte dynamique des annonces etc qui deacutefinissent les reacutegions dynamiques
communes dans les applications web modernes Les reacutegions speacuteciales fournissent un meacuteca-
nisme pour permettre aux deacuteveloppeurs de speacutecifier de telles reacutegions qui devraient ecirctre traiteacutees
speacutecialement
Lrsquoapproche comporte trois phases La premiegravere phase est la phase de la deacutetection elle compare
les repreacutesentations visuelles de P et O pour deacutetecter un ensemble de diffeacuterences soit dans
les reacutegions speacuteciales ou dans les autres parties de la page web Lrsquoensemble des diffeacuterences
73
identifieacute est regroupeacutees ensuite en groupes qui sont susceptibles de repreacutesenter des deacutefauts
sous-jacents dans P Pour ce faire WebSee exploite Selenium WebDriver pour prendre des
captures drsquoeacutecran et il exploite la bibliothegraveque laquo pdiff raquo qui est une bibliothegraveque perceptuelle
de diffeacuterenciation drsquoimage pour comparer les images et calculer les diffeacuterences Lrsquoalgorithme
de regroupement (clustering) DBSCAN (Density Based Spatial Clustering of Applications
with Noise) est utiliseacute pour regrouper les pixels de diffeacuterences (dbscan est un algorithme
impleacutementeacute dans la bibliothegraveque Apache Commons Math3)
La deuxiegraveme phase est la phase de localisation elle analyse une carte de rendu de P pour
identifier lrsquoensemble des eacuteleacutements HTML qui deacutefinissent les pixels de chaque ensemble
de diffeacuterences en cluster Pour cette eacutetape WebSee tire parti de la mise en œuvre de la
bibliothegraveque R-tree [50] et Selenium WebDriver pour extraire des informations de deacutelimitation
de rectangles
Enfin la troisiegraveme phase est la phase du traitement de lrsquoensemble du reacutesultat elle priorise
lrsquoensemble des eacuteleacutements identifieacutes pour chaque grappe et fournit cela comme une sortie pour
le deacuteveloppeur 39 La capaciteacute de recherche de sous-image pour lrsquoheuristique en cascade est
fournie par OpenCV
322 FLB (FIGHTING LAYOUT BUGS)
Une combinaison de lrsquoinjection CSS avec des techniques de diffeacuterentiation drsquoimage est
preacutesenteacutee par Tamm dans une preacutesentation Tech Talk de Google [69] en tant que moyen pour
deacutetecter quelle partie drsquoun site web est du texte et si elle chevauche drsquoautres eacuteleacutements frontiegraveres
Lrsquoapproche colore tout le texte sur une page Web en noir puis en blanc tout en prenant des
captures drsquoeacutecran entre les deux comme le montre la figure 310 Les parties de lrsquoimage qui sont
du texte sont localiseacutees en diffeacuterant les deux images Les lignes verticales et horizontales des
74
Figure 38 ndash Le fonctionnement geacuteneacuteral de lrsquooutil drsquoanalyse WebSee
Figure 39 ndash Outputs de WebSee eacuteleacutements HTML deacutefectueux
75
eacuteleacutements dans lrsquoimage reacutesultante sont deacutecouvertes via des techniques baseacutees sur le traitement
drsquoimage Une comparaison de ces lignes avec les eacuteleacutements de texte deacutecouverts agrave lrsquoeacutetape
preacuteceacutedente permet de deacuteterminer les cas ougrave le texte chevauche les bordures des eacuteleacutements La
mecircme technique permet aussi de deacuteterminer si les eacuteleacutements de texte ont le contraste approprieacute
agrave leur arriegravere-plan
Cependant cette technique ne fonctionne que pour le texte et drsquoautres eacuteleacutements qui peuvent
facilement ecirctre identifieacutes en utilisant des techniques baseacutees sur le traitement drsquoimage pour la
reconnaissance drsquoobjets Le champ drsquoapplication est petit car il se concentre exclusivement
sur le texte pour le chevauchement des eacuteleacutements
323 PHANTOMCSS
PhantomCSS [20] est un framework de test drsquointerface graphique open source qui possegravede la
capaciteacute de situer les changements drsquoune iteacuteration agrave une autre par des algorithmes diffeacuterant sur
deux images Drsquoautre part il permet drsquoexclure certaines parties de lrsquointerface graphique du
test Les pages Web susceptibles drsquoafficher des donneacutees non controcircleacutees par le deacuteveloppeur et
des eacuteleacutements tels que des annonces Web des donneacutees utilisateur des banniegraveres animeacutees des
images et du texte trouvent dans ces caracteacuteristiques un instrument beacuteneacutefique Le deacuteveloppeur
dans ce cas est obligeacute de speacutecifier manuellement les parties de lrsquointerface graphique non
concerneacutees par les tests en nommant lrsquoeacuteleacutement en question ou le speacutecifiant ses coordonneacutees x
et y
76
Figure 310 ndash Exemple de traitement drsquoimage avec FLB (figure tireacutee de [63])
77
324 SIKULI
Un autre framework drsquoautomatisation est Sikuli [39] qui identifie et manipule les controcircles
de lrsquointerface graphique dans une page web en utilisant la recherche par image (sub-image
searching) Les captures drsquoeacutecran constituent la base de cette approche visuelle pour la recherche
et lrsquoautomatisation des interfaces utilisateurs Elle permet aux utilisateurs
mdash de prendre une capture drsquoeacutecran drsquoun eacuteleacutement de lrsquointerface graphique (comme un bouton
de la barre drsquooutils une icocircne ou une boicircte de dialogue)
mdash drsquointerroger un systegraveme drsquoaide en faisant appel agrave la capture drsquoeacutecran au lieu du nom de
lrsquoeacuteleacutement
mdash de fournir eacutegalement une API de script visuel pour automatiser les interactions de
lrsquointerface graphique par lrsquointermeacutediaire des modegraveles de capture drsquoeacutecran pour diriger
les eacuteveacutenements de la souris et du clavier
Dans lrsquoexemple montreacute dans la figure 311 le bouton de fermeture doit effacer le contenu de la
zone de texte ainsi que lui-mecircme Supposons que lrsquointerface graphique soit deacutejagrave dans un eacutetat
qui contient un laquo 5 raquo au deacutebut nous trouvons la zone de texte bleue sur lrsquoeacutecran et stockons la
reacutegion correspondante qui a la plus grande similariteacute dans la zone bleue Ensuite apregraves avoir
cliqueacute sur le bouton de fermeture deux assertNotExist sont utiliseacutes pour veacuterifier la disparition
dans la zone bleue [39]
325 APPLITOOLS
La segmentation pure de lrsquoimage des pages Web et la comparaison visuelle pixel par pixel
sont agrave lrsquoorigine de lrsquooutil commercialiseacute AppliTools Eyes [2] qui offre une interaction des
scripts de test creacutees par lrsquoutilisateur et son application Dans cet outil le serveur Web est
78
Figure 311 ndash Exemple drsquoutilisation de Sikuli (figure tireacutee de [39])
chargeacute de teacuteleacutecharger les captures drsquoeacutecran en appliquant un algorithme de diffeacuterence drsquoimage
entre lui et une capture drsquoeacutecran preacuteceacutedente La diffeacuterence entre les deux images est traduite par
AppliTools par une deacutetection des reacutegressions dans une mise en page GUI Ces changements
dans une interface Web sont exploiteacutes par le deacuteveloppeur pour actualiser lrsquoimage de base dans
le cas ougrave le changement eacutetait intentionnel
Cependant cette approche est orienteacutee vers la deacutetection de bugs de type statique de chevau-
chement ou de deacutebordement des eacuteleacutements dans un document et actuellement ne supporte pas
la veacuterification de modegraveles temporels agrave travers plusieurs instantaneacutes de la mecircme page De plus
lrsquoapproche geacutenegravere beaucoup de faux positifs si la page rendue contient du texte leacutegegraverement
diffeacuterent de lrsquoimage de reacutefeacuterence Crsquoest le cas lorsque par exemple la fenecirctre du navigateur a
des dimensions diffeacuterentes et que le texte srsquoeacutecoule diffeacuteremment (mais pas neacutecessairement
incorrectement) par rapport agrave lrsquoimage Pour reacutesoudre ce problegraveme lrsquoutilisateur doit deacutefinir
manuellement pour chaque oracle ce que lrsquoon appelle des reacutegions dynamiques qui devraient
ecirctre ignoreacutees par le systegraveme lors de lrsquoanalyse de la page
79
33 APPROCHE DEacuteCLARATIVE
Les techniques dans cette derniegravere famille fonctionnent directement sur des informations sur
la mise en page Elles peuvent obtenir des informations sur les eacuteleacutements (position largeur
et hauteur) impliqueacutes dans lrsquointerface graphique que ce soit par analyse drsquoimage ou par
laquo siphonnage raquo (scraping) de lrsquointerface graphique Crsquoest drsquoailleurs ce que ces techniques ont
en commun La maniegravere de relier les diffeacuterents eacuteleacutements de mise en page les uns aux autres
ainsi que les valeurs de leurs paramegravetres de mise en page sont indiqueacutes par les entreacutees de ces
approches qui ne sont pas tant un script que des documents deacuteclaratifs
Les assertions opeacutereacutees sur lrsquointerface graphique peuvent par exemple ecirctre de la forme laquo lrsquoeacuteleacute-
ment 1 est-il situeacute agrave gauche de lrsquoeacuteleacutement 2 raquo ou laquo lrsquoeacuteleacutement 1 a-t-il une largeur infeacuterieure
agrave lrsquoeacuteleacutement 2 raquo Certaines de ces techniques ont des langages speacutecialiseacutes deacutecrivant des
assertions comme celles-ci
Les speacutecifications deacuteclaratives des interfaces utilisateurs ont fait lrsquoobjet de beaucoup de
recherches dans le passeacute Les premiegraveres tentatives incluent le systegraveme MASTERMIND qui
utilise un langage de modeacutelisation baseacute sur CORBA [67] drsquoautres approches incluent le
modegravele de mise en page drsquoAuckland [57] Adobe Adam et Eve [66] et les modegraveles de proprieacuteteacutes
[57]
331 MASTERMIND
Dans MASTERMIND le deacuteveloppeur de lrsquointerface utilisateur doit creacuteer des modegraveles de tacircche
(task model) drsquoapplication (domaine) et de preacutesentation Le modegravele drsquoapplication est speacutecifieacute
agrave lrsquoaide du langage de deacutefinition drsquointerface CORBA (IDL) Le modegravele de tacircche preacutesente les
tacircches de lrsquoutilisateur final dans une structure hieacuterarchique et comporte les informations de
80
commande neacutecessaires pour controcircler lrsquointerface utilisateur lors de lrsquoexeacutecution Le modegravele de
preacutesentation deacutecrit la disposition de lrsquointerface utilisateur y compris les affichages statiques
et dynamiques Il permet la speacutecification des mises agrave jour automatiques de preacutesentation
lorsque les donneacutees drsquoapplication ou le contexte de preacutesentation changent En outre il integravegre
des principes de conception graphique afin de donner un soutien complet au concepteur de
dialogue
332 AUCKLAND LAYOUT MODEL (ALM)
Le modegravele de mise en page drsquoAuckland (ALM) est une technique impleacutementeacute pour laquo NET raquo
Java et Haiku permettant de speacutecifier une mise en page 2D Elle est utiliseacutee pour organiser les
controcircles dans une interface graphique Le modegravele permet la speacutecification de contraintes baseacutees
sur lrsquoalgegravebre lineacuteaire Il calcule une disposition optimale en utilisant la programmation lineacuteaire
Les eacutegaliteacutes et les ineacutegaliteacutes lineacuteaires peuvent ecirctre speacutecifieacutees sur les tabulations horizontales et
verticales qui sont des lignes virtuelles formant une grille dans laquelle tous les eacuteleacutements de
lrsquointerface graphique sont aligneacutes [57]
Lrsquoexemple dans la figure 312 montre la maniegravere de disposer trois boutons en mobilisant
trois zones Les boutons ont deacutejagrave eacuteteacute ajouteacutes agrave la fenecirctre mais ils nrsquoont pas eacuteteacute arrangeacutes Leur
emplacement et leur taille sont deacutetermineacutes par la speacutecification ALM (figure 313) Quelque
soit le redimensionnement de la fenecirctre les deux colonnes auront toujours la mecircme largeur et
les deux lignes la mecircme hauteur en raison de la lineacuteariteacute des deux contraintes
81
Figure 312 ndash Exemple avec Auckland (figure tireacutee de [1])
LayoutSpec ls = new LayoutSpec ()XTab x1 = lsAddXTab ()YTab y1 = lsAddYTab ()
lsAddArea (lsLeft lsTop x1 y1 bouton1)lsAddArea (x1 lsTop lRight y1 bouton2)lsAddArea (lsLeft y1 lsRight lsBottom bouton3)
donne la mecircme largeur aux deux colonnes et la mecircme hauteur aux deux rangeacuteeslsAddConstraint (nouveau double [] 2 -1 nouvelle variable [] x1 lsRight
OperatorTypeEQ 0)lsAddConstraint (nouveau double [] 2 -1 nouvelle variable [] y1 lsBottom
OperatorTypeEQ 0)
Figure 313 ndash Une simple speacutecification avec Auckland [1]
82
333 ADOBE ADAM ET EVE
ASL (Adobe Source Libraries) est un projet au sein du Adobe Software Technology Lab
(STLab) Crsquoest un ensemble de bibliothegraveques de composants logiciels rendu disponible sous
licence Open Source par Adobe Systems permettant de deacutefinir des algorithmes sous forme
deacuteclarative Les deux premiegraveres bibliothegraveques significatives dans ASL sont la bibliothegraveque
de modegravele de proprieacuteteacutes (Adam) et la bibliothegraveque de modegravele de mise en page (Eve) dont
les composants permettent de modeacuteliser lrsquoapparence et le comportement drsquoune interface
dans une application logicielle Adam consiste en un solveur et un langage deacuteclaratif pour
deacutecrire les contraintes et les relations sur une collection de valeurs qui sont geacuteneacuteralement
les paramegravetres drsquoune commande drsquoapplication (une fonction) Adam fournit la logique qui
controcircle le comportement drsquoune interface Humaine (IH) Il est similaire dans son concept agrave une
feuille de calcul ou agrave un gestionnaire de formulaires Les valeurs sont deacutefinies et les valeurs
deacutependantes sont recalculeacutees Adam procure des fonctionnaliteacutes pour reacutesoudre les valeurs
interdeacutependantes mais il ne constitue pas un systegraveme de contrainte geacuteneacuteral Eve consiste
en un solveur et un langage deacuteclaratif pour la construction drsquoune IH Le solveur de mise en
page prend en compte une description riche des eacuteleacutements de 14 interfaces pour obtenir une
disposition de haute qualiteacute rivalisant avec ce qui peut ecirctre reacutealiseacute avec le placement manuel
Une seule description suffit pour plusieurs plateformes et langages OS Eve a eacuteteacute deacuteveloppeacutee
pour fonctionner avec Adam il peut cependant aussi ecirctre utiliseacutee seule Adam et Eve peuvent
ecirctre inteacutegreacutees dans un certain nombre drsquoenvironnements Ils ont la faculteacute de fonctionner
ensemble ou indeacutependamment mais ils doivent ecirctre combineacutes avec drsquoautres installations
pour construire une application Parmi les exemples typiques drsquointerfaces utilisateur effectuant
la synthegravese de paramegravetres de commande la boicircte de dialogue laquo Enregistrer sous raquo dans le cas
drsquoenregistrement drsquoun fichier image (figure 314) Elle se compose drsquoun champ de texte pour
entrer le nom du fichier un menu de types de fichiers et des curseurs offrant deux possibiliteacutes
83
Figure 314 ndash Exemple drsquoune boicircte de dialogue pour enregistrer un fichier image
pour configurer la compression lors de lrsquoenregistrement dans un format qui le prend en charge
Les valeurs des curseurs sont lieacutees par une relation exprimant le compromis entre le taux de
compression et la qualiteacute de lrsquoimage
La boicircte de dialogue aide lrsquoutilisateur agrave syntheacutetiser les paramegravetres drsquoune commande drsquoenre-
gistrement de fichier La figure 315 montre une speacutecification pour cette tacircche de synthegravese de
paramegravetres de commande eacutecrite dans le langage deacuteclaratif speacutecifique de laquo Adam raquo Dans 315
les sections laquo interface raquo laquo output raquo et laquo invariant raquo deacuteclarent les variables ou les proprieacuteteacutes
du modegravele de proprieacuteteacutes Les variables drsquointerface peuvent ecirctre mises agrave jour par un client du
modegravele de proprieacuteteacute par exemple agrave la suite de lrsquointeraction drsquoun utilisateur avec un widget
drsquointerface utilisateur Les valeurs des variables de sortie (output) constituent le reacutesultat de la
synthegravese des paramegravetres de commande La valeur (booleacuteenne) des variables invariantes indique
si un ensemble de variables satisfait une condition donneacutee La section laquo logique raquo dans 315
deacutefinit toujours les deacutependances et les regravegles de calcul entre les variables Le langage pour
ces calculs est le langage drsquoexpression ASL qui peut faire des appels aux fonctions externes
84
sheet save image file interface
file name file type rdquobmprdquocompression ratio 100image quality 100
logicrelate compression ratio lt== 100 - 4 x (100 - image quality)image quality lt== 100 - (100 - compression ratio) 4
outputresult lt== (file type == rdquojpegrdquo) type file type name file name ratio compression ratio type file type name file name
invariant check name lt== file name 6= rdquo rdquo
Figure 315 ndash Une simple speacutecification deacuteclarative dans le langage Adam du modegravele de proprieacuteteacutepour le dialogue dans Figure314 [56]
enregistreacutees (C ++) et peut ainsi effectuer des actions arbitraires La tacircche du programmeur de
lrsquoapplication est de deacutefinir ces calculs appeleacutes meacutethodes et qui sont exeacutecuteacutees est controcircleacutees
par le modegravele de proprieacuteteacutes
Le langage laquo Eve raquo peut ecirctre utiliseacute pour speacutecifier la disposition et la qualiteacute de preacutesentation
des eacuteleacutements drsquointerface ainsi que les liaisons entre les widgets dans lrsquointerface utilisateur et
les valeurs dans le modegravele de proprieacuteteacute La speacutecification de disposition pour le dialogue de la
figure 314 apparaicirct dans la figure 316
Nous allons cependant les rejeter ainsi que beaucoup drsquoautres langages de balisage GUI
(QML XAML) car ils visent agrave geacuteneacuterer des interfaces baseacutees sur des contraintes et ne peuvent
pas ecirctre utiliseacutes comme des assertions agrave tester de plus ils se concentrent principalement sur
la reacutesolution de contraintes lineacuteaires relatives agrave la taille et au placement des eacuteleacutements dans un
formulaire
85
layout save image file view dialog(name rdquoSave Image Asrdquoplacement place columnspacing 6child horizontal align fill) edit text(bind file name name rdquoFile namerdquo)popup(bind file type name rdquoSave as typerdquo items [
name rdquoWindows bitmap (bmp)rdquo value rdquobmprdquo name rdquoJPEG (jpeg)rdquo value rdquojpegrdquo
])row()
column(child horizontal align right) label(name rdquoCompression ratiordquo)label(name rdquoImage qualityrdquo)
column(horizontal align fill child horizontal align fill)
slider(bind compression ratioformat first 1 last 100 interval 1 )
slider(bind image qualityformat first 1 last 100 interval 1 )
row(horizontal align right) button(name rdquoSaverdquo action ok bind result
default true)button(name rdquoCancelrdquo action cancel)
Figure 316 ndash Une simple speacutecification avec Eve [56]
86
Pour montrer pourquoi les langages de geacuteneacuteration de GUI ne sont pas approprieacutes consideacute-
rons lrsquoexemple simple de CSS Comme nous lrsquoavons vu plus haut CSS exprime agrave quoi les
eacuteleacutements devraient ressembler (suggestions) mais pas comment ils vont lrsquoecirctre Consideacuterez les
deacuteclarations de style suivantes dans le cas ougrave un eacuteleacutement div2 est imbriqueacute dans div1
div1 width 200px div2 width 300px
Il nrsquoest pas possible avec CSS drsquoaffirmer que le contenu de div1 ne devrait jamais ecirctre plus
large que sa propre largeur deacuteclareacutee Si tel est le cas le navigateur peut soit deacutevelopper la boicircte
de lrsquoeacuteleacutement (sans tenir compte de sa deacuteclaration) soit afficher les eacuteleacutements en dehors de son
conteneur (un problegraveme dont nous avons beaucoup parleacute dans la section 22) La seule solution
consiste pour le concepteur du document CSS agrave srsquoassurer que la largeur deacuteclareacutee de tous les
eacuteleacutements qui seront contenus dans div1 est infeacuterieure agrave 200 pixels En revanche une proprieacuteteacute
deacuteclarative pourrait facilement imposer agrave lrsquoexeacutecution que la largeur de div1 est toujours de
200 pixels
On pourrait argumenter que cela peut aussi ecirctre veacuterifieacute en analysant statiquement le document
HTML avec le fichier CSS (bien qursquoaucun travail apparenteacute ne semble reacutepondre agrave cette
question) Il y a cependant des cas ougrave ce nrsquoest mecircme pas possible Si nous supprimons la
deacuteclaration de div2 dans lrsquoexemple ci-dessus mais que div2 contient une image de 300 pixels
de large il est impossible de deacutecouvrir que la proprieacuteteacute deacutesireacutee nrsquoest pas satisfaite en regardant
simplement le CSS
En guise drsquoexemple final consideacuterons le code suivant qui stipule que les eacuteleacutements de certains
menus doivent ecirctre placeacutes verticalement et que leur taille est fixe
menu li float left
87
width 200pxheight 50px
Rien ne permet au concepteur de speacutecifier que tous les eacuteleacutements doivent toujours ecirctre sur la
mecircme ligne (c-agrave-d Avoir la mecircme position top) (mecircme si la valeur de top est deacutefinie) Ce
ne sera pas le cas si la fenecirctre contenant est redimensionneacutee suffisamment petite pour que les
eacuteleacutements puissent flotter en dessous Dans un tel cas il faut effectivement rendre la page dans
un navigateur avec ses dimensions reacuteelles pour deacutecouvrir la preacutesence du problegraveme
334 GALEN FRAMEWORK
Galen Framework [10] est une bibliothegraveque de tests drsquointerfaces graphiques pour tester les
mises en page drsquoapplications web Le comportement mutuel entre les diffeacuterents eacuteleacutements
drsquoune interface graphique et le type de paramegravetres de mise en page valides sont deacutecrits
par des descriptions de mise en page creacutees par lrsquoutilisateur La veacuterification de la validiteacute
de lrsquoemplacement et la taille des eacuteleacutements est reacutealiseacutee par un test oracle en utilisant ces
descriptions
Pour deacuteclarer divers aspects de la position et de la taille drsquoun eacuteleacutement par rapport agrave drsquoautres
eacuteleacutements ou en valeurs absolues le deacuteveloppeur de test utilise un langage de description de
test personnaliseacute fourni par le framework Galen Galen est baseacute sur un outil drsquoautomatisation
de navigateur web appeleacute Selenium qui permet de creacuteer des scripts automatiseacutes simulant les
entreacutees de lrsquoutilisateur Il permet eacutegalement de speacutecifier des plages de valeurs acceptables La
figure 317 montre un exemple de ce agrave quoi ressemble une speacutecification Galen [9]
Le test de reacutegression des mises en page drsquoapplications web est entiegraverement automatiser par
le framework Galen en combinant ces deux technologies Des informations preacutecises sur les
88
valeurs valides pour les eacuteleacutements de lrsquointerface eacutetant neacutecessaires au fichier de speacutecification
requis par le framework Galen cette opeacuteration peut ecirctre coucircteuse et rendre la modification
drsquoune interface graphique plus difficile
Un regard sur le langage de speacutecification de Galen indique que le travail requis par le deacute-
veloppeur de test est similaire agrave la speacutecification de lrsquointerface graphique elle-mecircme Les
speacutecifications de Galen et la conception GUI elle-mecircme sont effectueacutees avec agrave peu pregraves la
mecircme freacutequence Lrsquoinconveacutenient est la flexibiliteacute reacuteduite et lrsquoaugmentation des coucircts Cepen-
dant lrsquoapproche permet une grande preacutecision lors de la reacutealisation des tests de reacutegression et la
veacuterification de la fonctionnaliteacute de la conception sur diffeacuterentes tailles drsquoeacutecran
335 ITARRAY AUTOMOTION
Le framework Automotion drsquoITArray [70] est similaire au framework Galen La diffeacuterence
par rapport agrave beaucoup drsquoautres frameworks est que la bibliothegraveque drsquoassertions permet
reacuteellement drsquoaffirmer si la position et lrsquoalignement des eacuteleacutements sont lieacutes les uns aux autres
avec des appels tels que is ElementInside (otherElement) ou areElementsAligned
(List) La faccedilon dont ces tests sont speacutecifieacutes est encore tregraves verbeuse Un exemple de script
Automotion est illustreacute agrave la Figure 318
34 OUTILS RWD
Il est toujours judicieux de tester la conception drsquoun site web sur divers appareils Mais
cette meacutethode classique prend beaucoup de temps et en raison de la varieacuteteacute des dispositifs
disponibles aujourdrsquohui le deacuteveloppeur peut ne pas avoir accegraves agrave tous ces dispositifs Plusieurs
outils ont eacuteteacute deacuteveloppeacutes pour fournir le service permettant drsquoafficher une page dans une
89
Declaring objects with css and xpath locatorsobjects
header css divfusion-secondary-headersw-logo css fusion-logo-link
navigation-links- xpath ul[id=rsquomenu-mainrsquo]li[not((contains(idrsquomobile-menu-itemrsquo)))]nav-menu css divfusion-secondary-main-menufollow-us-box xpath div[contains(classrsquofusion-alertrsquo)][1]
Home Page Tag= Home Page =
This is for Desktopon desktop
Header propertiesheader
inside screen 0px topinside screen 0px leftinside screen 0px right
Logo propertiessw-logo
31 px below the headerbelow header 31pxImage comparison with 2 precision ratioimage file sw-logopng error 5
Each navigation links must be alligned horizontally to each otheritemName -gt Current item and nextItem -gt Next itemforEach [navigation-links-] as itemName next as nextItem
$itemNamealigned horizontally all $nextItem
Navigation menu must be 20px above to the follow us allert boxnav-menu
above follow-us-box 20px
Figure 317 ndash Exemple drsquoune speacutecification Galen [9]
90
boolean result = uiValidatorinit(Scenario name)findElement(rootElement Name of eacuteleacutement we validate)sameOffsetLeftAs(eacuteleacutement Panel 1)sameOffsetLeftAs(eacuteleacutement Button 1)sameOffsetRightAs(eacuteleacutement Button 2)sameOffsetRightAs(eacuteleacutement Button 3)withCssValue(border 2px solid FBDCDC)withCssValue(border-radius 4px)withoutCssValue(color FFFFFF)sameSizeAs(list_eacuteleacutements)insideOf(eacuteleacutement Container)notOverlapWith(eacuteleacutement Other eacuteleacutement)withTopElement(eacuteleacutement 10 15)changeMetricsUnitsTo(ResponsiveUIValidatorUnitsPERCENT)widthBetween(50 55)heightBetween(90 95)drawMap()validate()
Figure 318 ndash Exemple drsquoun script Automotion [70]
fenecirctre personnaliseacutee de tailles variables agrave lrsquoaide drsquoun navigateur Web Cependant ces outils
ne fournissent aucune information autre que le rendu des pages sur diffeacuterentes tailles ce
qui oblige le deacuteveloppeur agrave eacutevaluer la reacuteactiviteacute (responsiveness) du site web manuellement
Mentionnons ici quelques outils speacutecifiques agrave la deacutetection de problegravemes lieacutes au RWD
Avec des fonctionnaliteacutes de recherche intelligente et de reacutevision rapide WebSiteResponsi-
veTest [34] prend en charge tous les principaux navigateurs pour fournir lrsquoaperccedilu exact du
site web sur un peacuteripheacuterique speacutecifique Il faut entrer lrsquoURL drsquoune page Web pour eacutevaluer
rapidement la reacuteactiviteacute En fournissant des reacutesultats preacutecis en quelques secondes lrsquooutil
eacuteconomise beaucoup de temps La convivialiteacute et la compatibiliteacute avec les navigateurs sont
drsquoautres fonctionnaliteacutes qui le rendent attractif par rapport aux autres outils disponibles
Respondr [22] permet de veacuterifier la reacuteactiviteacute en entrant lrsquoURL drsquoun site web En outre
lrsquoappareil pour lequel le site web ou la page Web est testeacute peut eacutegalement ecirctre choisi dans la
91
liste donneacutee Une fois les seacutelections effectueacutees un simple clic sur laquo Go raquo est neacutecessaire pour
recevoir une analyse complegravete du site ou de la page web en donnant lrsquoaffichage sur lrsquoappareil
seacutelectionneacute La page peut ecirctre facilement preacutevisualiseacutee agrave une largeur approprieacutee
Screenfly [27] est un outil de test de compatibiliteacute multi-peacuteripheacuterique qui permet de preacutevisua-
liser les pages Web telles qursquoelles apparaissent sur diffeacuterents appareils Les plus populaires
comprennent les tablettes et autres appareils intelligents tels que Galaxy Tab Apple iPad
Motorola Xoom En outre il prend en charge diffeacuterentes tailles drsquoeacutecran et reacutesolutions Le site
deacutetecte automatiquement si lrsquoURL saisie comporte un site mobile et vous redirige vers celui-ci
Pour basculer entre les reacutesolutions drsquoeacutecran tout ce qursquoil faut faire est de cliquer sur lrsquoicocircne du
type drsquoappareil ou choisir lrsquoappareil qui a la reacutesolution drsquoeacutecran la plus proche
Responsive Web Design Bookmarklet [26] affiche nrsquoimporte quelle page Web dans plusieurs
tailles drsquoeacutecran pour la preacutevisualisation simulant la fenecirctre drsquoaffichage de diffeacuterents peacuteripheacute-
riques Il srsquoagit drsquoun outil de conception Web rapide qui peut ecirctre consulteacute agrave partir drsquoun
ordinateur de bureau pour tester la reacuteactiviteacute de tout site web Il suffit de faire glisser le
bookmarklet au-dessus de la barre des signets (bookmarks) pour obtenir une barre drsquooutils
en haut avec des boutons pour diffeacuterentes reacutesolutions drsquoeacutecran Il ne reste plus qursquoagrave choisir
lrsquoaperccedilu de la page en cours sur diffeacuterentes largeurs drsquoeacutecran de tablettes et de smartphones
ViewPortResizer [31] est eacutegalement un bookmarklet de navigateur qui peut ecirctre utiliseacute avec
nrsquoimporte quel navigateur Web moderne Un outil de navigation convivial ViewPortResizer
est entiegraverement configurable Il permet la seacutelection drsquoune plage initiale de tailles de reacutesolution
drsquoeacutecran et la construction drsquoun bookmarklet personnaliseacute
Responsinator [23] aide les proprieacutetaires de sites agrave avoir une ideacutee de la faccedilon dont leur
site fonctionnera sur les appareils les plus populaires Juste en tapant lrsquoURL du site le site
srsquoaffichera rapidement sur des eacutecrans de diffeacuterent(e)s tailles
92
Le processus de ResponsivePX [24] consiste agrave entrer lrsquoURL du site et utiliser des boutons
pour ajuster la largeur et la hauteur de la fenecirctre drsquoaffichage afin de trouver la largeur exacte
du point drsquoarrecirct en pixels Extrecircmement simple agrave utiliser et agrave ameacuteliorer les fonctionnaliteacutes cet
outil de conception Web aide les concepteurs agrave creacuteer des sites utilisables et reacuteactifs
Froont [8] rend les tests de conception Web reacuteactifs accessibles sans neacutecessiteacutes de compeacutetences
de codage Les conceptions peuvent ecirctre creacutees dans le navigateur avec cet outil En testant
chaque URL speacutecifiquement il teste les conceptions sur de vrais appareils tout de suite
De son cocircteacute ReDeCheck [74] [73] est un outil de test de conception web reacuteactif Il est inspireacute
du graphe drsquoalignement utiliseacute dans X-PERT un concept proposeacute et deacuteveloppeacute par Choudhary
et al [42] ReDeCheck se concentre speacutecifiquement sur les bugs de mise en page causeacutes par
des conceptions reacuteactives il utilise un graphique de mise en page adaptable (RLG) qui tient
compte de lrsquoalignement des eacuteleacutements de la page Web des changements de visibiliteacute et drsquoautres
aspects de la page lorsque la largeur de la fenecirctre varie En tant que tel ReDeCheck peut
seulement veacuterifier un ensemble fixe de problegravemes de mise en page preacutedeacutefinis et ne fournit pas
un langage agrave usage geacuteneacuteral pour exprimer des assertions
35 DISCUSSION SUR LES APPROCHES EXISANTES
Nous allons maintenant discuter quelques limites des approches preacuteceacutedemment preacutesenteacutees
351 INCONVEacuteNIENTS DE LrsquoAPPROCHE DEacuteCLARATIVE
Le deacuteveloppeur de test doit se soumettre aux exigences des descriptionsscripts de test assez
verbeux en deacutecrivant les regravegles de son interface graphique (comment les eacuteleacutements sont-ils
placeacutes les uns par rapport aux autres comment ils devraient se comporter quand la taille de
93
la fenecirctre change etc) de faccedilon plus deacutetailleacutee au point ougrave le script de test devient presque
aussi descriptif que le code de lrsquointerface graphique qursquoil teste A lrsquoinstar des scripts de test
ce problegraveme neacutecessitera des mises agrave jour agrave peu pregraves au mecircme rythme que les modifications
apporteacutees agrave la conception de lrsquointerface graphique
352 LIMITES DES TECHNIQUES VISUELLES
Impossible de comparer des images de diffeacuterentes tailles drsquoeacutecran Le fait drsquoassurer lrsquoeacutega-
liteacute et la validiteacute entre une image de reacutefeacuterence (oracle) et lrsquoimage agrave tester par la diffeacuterence de
couleur de pixel implique que celles-ci ne peuvent pas ecirctre des captures drsquoeacutecran de tailles
drsquoeacutecran diffeacuterentes ce qui exclut lrsquoutilisation de lrsquoimage de reacutefeacuterence agrave partir drsquoune taille
drsquoeacutecran pour veacuterifier la validiteacute de la mise en page sur une taille drsquoeacutecran diffeacuterente La validiteacute
de la mise en page drsquoune application censeacutee fonctionner sur de nombreuses tailles drsquoeacutecran
diffeacuterentes par ces techniques exige drsquoeacutetablir des reacutefeacuterences pour toutes les tailles drsquoeacutecran
Ne fonctionne pas bien avec les donneacutees dynamiques Ces techniques baseacutees sur lrsquoimage
et travaillant sur lrsquoinformation de pixel au lieu du contenu ne donnent des reacutesultats satisfaisants
qursquoavec des donneacutees statiques (parce qursquoon utilise une image de reacutefeacuterence pour faire la
comparaison) Par conseacutequent elles posent un problegraveme majeur Chaque exeacutecution drsquoune
application correspond souvent agrave un affichage du contenu diffeacuterent puisque ces donneacutees sont
geacuteneacuteralement reacutecupeacutereacutees sur un serveur Web ou creacutees par lrsquoutilisateur mdashce qui diminue
fortement lrsquoutiliteacute de ces techniques
Signalent beaucoup de faux positifs Une diffeacuterence dans les valeurs de pixels de deux
captures drsquoeacutecran conseacutecutives peut entre constateacutee notamment si ces captures sont prises
sur des machines diffeacuterentes avec des configurations diffeacuterentes drsquoougrave lrsquoinconveacutenient des
94
Figure 319 ndash Exemple de faux positif avec PhantomCSS
techniques baseacutees sur les diffeacuterences drsquoimages qui sont sujettes agrave la deacuteclaration de faux positifs
comme indiqueacute sur le site web du reacutefeacuterentiel PhantomCSS [20] Ces petites diffeacuterences de
pixels sont parfois faussement signaleacutees par lrsquoalgorithme de test comme des erreurs de mise
en page cependant elles ne le sont pas reacuteellement La figure 319 montre un exemple de ce
cas ougrave nous pouvons observer de petites zones de pixels violets (nous avons marqueacutees ces
petites zones avec des rectangles rouges) ces images ressemblent aux images de base qui
sont entoureacutees de rectangles jaunes En reacutealiteacute ce sont pas des erreurs mais des faux neacutegatifs
rapporteacutes en raison de petites diffeacuterences de pixels dans des rendus diffeacuterents (cela pourrait
ecirctre ducirc agrave lrsquoutilisation de diffeacuterents navigateurs)
En conclusion le tableau 31 donne les grandes lignes de diffeacuterences entre trois outils majeurs
des approches existantes
95
Sahi Selinium Websee
Pas de plugin (so-lution proxy web) Plugin speacutecifique pour chaque navigateur
Configurationspeacutecifique etbibliothegravequestierces pourimpleacutementercertains desalgorithmesspeacutecialiseacutes
Tests fonctionelsdes eacuteleacutements de lapage baseacute sur letrafique HTTP en-registreacute au niveaudu proxy (play-back)
Tests fontionels
Tests de mise enpage en se ba-sant sur une ver-sion de reference(juste pour despages statiques)
Tableau 31 ndash Limites et diffeacuterences entre trois outils majeurs des approches existantes
CHAPITRE 4
DEacuteTECTION DE BUGS DrsquoINTERFACE
Comme nous avons pu le voir une analyse statique du contenu HTML et des deacuteclarations
CSS drsquoune page web nrsquoest pas suffisante pour deacutetecter les bugs drsquointerface citeacutes dans le
deuxiegraveme chapitre de cette thegravese car CSS nrsquoest pas un langage qui peut exprimer des proprieacuteteacutes
normatives pour la mise en page drsquoun document Les deacuteclarations CSS sont juste un ensemble
drsquoinstructions traiteacutees par un moteur de rendu Donner agrave CSS une expressiviteacute prescriptive
impliquerait la possibiliteacute de speacutecifier agrave quoi un eacuteleacutement ne doit pas ressembler ou qursquoune
deacuteclaration de style particulier ne peut pas ecirctre remplaceacutee par drsquoautres constructions ndashce
que le CSS ne fournit pas En outre certains des bugs deacutecrits preacuteceacutedemment impliquent la
comparaison du contenu drsquoun document agrave plusieurs moments dans le temps une chose que
CSS nrsquoest pas eacutevidemment conccedilu pour faire
Par conseacutequent afin drsquoexprimer des proprieacuteteacutes normatives pour le contenu et la mise en page
drsquoune page web un langage compleacutementaire agrave CSS est neacutecessaire Ce langage doit permettre
aux utilisateurs drsquoeacutecrire des proprieacuteteacutes deacuteclaratives sur les styles des eacuteleacutements et de traiter
des eacuteveacutenements quelles que soient les deacuteclarations CSS ou le code cocircteacute client qui ont pu ecirctre
deacuteclareacutees
Pour combler cette neacutecessiteacute dans ce chapitre nous preacutesentons Cornipickle un langage
97
deacuteclaratif permettant drsquoexprimer des proprieacuteteacutes agrave propos du document et des proprieacuteteacutes CSS
drsquoune page On discutera eacutegalement drsquoune impleacutementation drsquoun algorithme permettant de
veacuterifier automatiquement si des eacutenonceacutes du langage sont vrais pour un site web particulier
41 UN INTERPREacuteTEUR POUR LES PROPRIEacuteTEacuteS CORNIPICKLE
Nous deacutecrivons maintenant la mise en œuvre de lrsquointerpreacuteteur pour lrsquoeacutevaluation automatiseacutee
des speacutecifications Cornipickle sur les applications web Cette impleacutementation est composeacutee
drsquoenviron 7 000 lignes de code Java et JavaScript et est disponible sous licence publique
geacuteneacuterale GNU 1 Une videacuteo de lrsquooutil en action sur des exemples simples peut eacutegalement ecirctre
consulteacutee en ligne 2
411 OBJECTIFS DE CONCEPTION
Outre la fonctionnaliteacute principale agrave mettre en œuvre le deacuteveloppement de lrsquooutil a eacuteteacute motiveacute
par un certain nombre drsquoobjectifs de conception importants
Pas de plugins speacutecifiques au navigateur
Tout drsquoabord la solution doit fonctionner sur autant de combinaisons de navigateurs et de
systegravemes drsquoexploitation que possible Ceci exclut explicitement les plugins speacutecifiques au
navigateur (ou limiteacutes par le navigateur) tels que les plugins Chrome les plugins Firefox
ou lrsquoutilisation drsquooutils tels que Selenium WebDriver Pour la mecircme raison la solution ne
doit pas reposer sur la preacutesence de frameworks JavaScript (jQuery Prototype etc) et ecirctre
1 httpsgithubcomliflabcornipickle2 httpyoutube90YitGRRx2w
98
autonome Cela implique que notre outil peut fonctionner dans des combinaisons inhabituelles
(navigateurssystegravemes drsquoexploitation) comme BoatBrowser sur un teacuteleacutephone Android ou
Qupzilla sous Haiku OS
Collecte drsquoinformations cocircteacute client
Deuxiegravemement lrsquoeacutevaluation des speacutecifications doit ecirctre faite en fonction des informations
recueillies sur le client cela eacutecarte la possibiliteacute drsquoeffectuer une eacutevaluation statique de HTML
et CSS du cocircteacute serveur Ceci est obligatoire pour plusieurs raisons Il faut tenir compte du
fait que le standard CSS nrsquoest pas interpreacuteteacute de la mecircme maniegravere par tous les navigateurs Par
exemple CSS stipule que la largeur drsquoun eacuteleacutement nrsquoinclut pas le remplissage mais certaines
versions drsquoInternet Explorer incluent le remplissage dans la largeur et rendent le mecircme eacuteleacutement
avec des dimensions diffeacuterentes
Dans une large mesure la veacuterification des contraintes en examinant uniquement le code
HTML + CSS impliquerait drsquoeacutemuler le moteur de rendu de chaque navigateur compleacuteteacute par
ses laquo bizarreries raquo speacutecifiques pour parvenir agrave un verdict fidegravele
En plus des problegravemes susmentionneacutes toutes les applications que nous avons eacutetudieacutees
contiennent du code cocircteacute client qui peut modifier la disposition drsquoune page apregraves que le
moteur de mise en page a traiteacute les deacuteclarations statiques trouveacutees dans le document HTML
initial et les fichiers CSS traiteacutes au moment du chargement Ce code programmeacute pour ecirctre
exeacutecuteacute lors du chargement de la page remplace complegravetement les deacuteclarations de style que
les fichiers CSS drsquoorigine peuvent initialement deacutefinir Par conseacutequent dans tous les cas il ne
suffit pas drsquoanalyser lrsquoensemble des fichiers HTML et CSS deacutefinis par lrsquoapplication car tout
ce contenu peut ecirctre modifieacute agrave la voleacutee gracircce agrave des interactions avec lrsquoutilisateur une fois la
page chargeacutee
99
Pas drsquointerpreacutetation cocircteacute client
Troisiegravemement lrsquointerpreacutetation des speacutecifications de Cornipickle ne devrait pas ecirctre faite du
cocircteacute des clients Ceci est fait de maniegravere agrave ne pas imposer une charge de calcul excessive
dans le navigateur et permet lrsquoutilisation drsquoun autre langage que JavaScript pour lrsquoimpleacute-
mentation de cette fonctionnaliteacute Plus important encore il permet de geacuterer les proprieacuteteacutes
comportementales impliquant plus drsquoun instantaneacute de page par lrsquooutil En utilisant du code
strictement client un problegraveme survient lorsqursquoun rechargement de page complet se produit
car cela reacuteinitialise lrsquoeacutetat de tout objet JavaScript associeacute agrave cette page Eacutetant donneacute que les
speacutecifications comportementales requiegraverent la sauvegarde des informations du passeacute certains
moyens de preacuteserver ces informations dans le client agrave travers les rechargements de pages
doivent ecirctre conccedilus HTML5 fournit des fonctionnaliteacutes de stockage mais leur utilisation
limiterait la prise en charge des navigateurs (par exemple uniquement pour Opera 115 Safari
4 et IE 9 et plus reacutecents 3)
Interpreacutetation de lrsquoexeacutecution
Enfin il devrait ecirctre possible pour un utilisateur drsquoajouter de supprimer ou de modifier les
speacutecifications eacutevalueacutees par lrsquooutil Cela pose un deacutefi en raison de la construction speacuteciale We
say that qui permet drsquoajouter de nouvelles constructions grammaticales dans le langage de
base Ceci est diffeacuterent des deacutefinitions de fonction ou de preacutedicat habituelles disponibles dans
la plupart des langages ougrave la syntaxe des appels de fonctions est fixe et seuls de nouveaux
identificateurs de fonctions peuvent ecirctre ajouteacutes au moment de lrsquoanalyse Cela a neacutecessiteacute le
deacuteveloppement drsquoun analyseur BNF appeleacute Bullwinkle 4 qui peut accepter de nouvelles regravegles
3 httpwwwhtml5rockscomenfeaturesstorage4 httpsgithubcomsylvainhalleBullwinkle
100
Figure 41 ndash Architecture et interactions de Cornipickle
drsquoanalyse agrave lrsquoexeacutecution mdashcontrairement agrave la plupart des autres analyseurs qui neacutecessitent une
eacutetape de compilation chaque fois que la grammaire change
412 ARCHITECTURE ET SCEacuteNARIO DrsquoUTILISATION TYPIQUE
La combinaison de toutes les exigences dans [51] impose plus ou moins une architecture pour
lrsquooutil Cornipickle ougrave le code cocircteacute serveur prend en charge la collecte et lrsquoeacutevaluation des
speacutecifications (caracteacuteristiques) tandis que le code cocircteacute client agit uniquement comme une
laquo sonde raquo Lrsquointerrogation des informations pertinentes sur lrsquoeacutetat actuel de la page est relayeacutee
vers le serveur pour un traitement ulteacuterieur Cette interaction client-serveur a un avantage
cependant le code cocircteacute client peut ecirctre relativement leacuteger et sans eacutetat (ecirctre remis agrave zeacutero agrave
chaque fois que la page se recharge) comme tout traitement agrave eacutetat qui peut ecirctre fait par le
serveur
La figure 41 montre les interactions avec lrsquooutil Cornipickle Un deacuteveloppeur eacutecrit drsquoabord un
jeu drsquoeacutetats deacuteclaratifs (1) qui sont stockeacutes dans la meacutemoire de Cornipickle (2) En donnant
101
tagname windowwidth 956height 165 children [
tagname pid gowidth 90 children [
tagname CDATA text Hello World
]
]
Figure 42 ndash Une page simple seacuterialiseacutee en JSON
un identifiant unique agrave ce jeu drsquoeacutetats qui peut ecirctre appeleacute dans le code JavaScript agrave ecirctre
inseacutereacute dans lrsquoapplication afin que la sonde peut ecirctre chargeacutee dans chaque page (3-4) cette
addition est geacuteneacuterique et ne diffegravere que dans la chaicircne drsquoidentification Quand une page
de lrsquoapplication doit ecirctre chargeacutee (5) Cornipickle creacutee dynamiquement la sonde JavaScript
correspondant agrave lrsquoensemble drsquoassertions pour les eacutevaluer et les envoyer au client (6-8) Cette
sonde est conccedilue pour signaler un instantaneacute des donneacutees DOM et CSS pertinents sur chaque
eacuteveacutenement deacuteclencheacute par lrsquoutilisateur Quand un tel eacuteveacutenement se produit la sonde recueille
toutes les informations pertinentes sur le contenu de la page (figure 42) et les relaie au serveur
Cornipickle (9) qui les enregistre dans un journal (10-11)
En option des informations sur lrsquoeacutetat actuel des assertions en cours drsquoeacutevaluation (vrai
faux) peuvent ecirctre relayeacutees agrave la sonde (12) Un tableau de bord drsquoanalyse peut reacutecupeacuterer le
journal enregistreacute qui peut ecirctre consulteacute par le deacuteveloppeur pour interroger lrsquoeacutetat de toutes les
102
Figure 43 ndash Une capture drsquoeacutecran de Cornipickle en action
proprieacuteteacutes drsquoentreacutee au deacutebut du processus (13-16)
La figure 43 montre un exemple de Cornipickle en action Dans ce cas la sonde injecteacutee a
inseacutereacute une petite icocircne dans le coin infeacuterieur droit de la fenecirctre qui devient rouge chaque fois
qursquoune proprieacuteteacute est violeacutee Pour contourner le fait que de nombreux navigateurs deacutesactivent
les requecirctes HTTP inter-site Ajax nrsquoest pas utiliseacute pour la communication entre le client et le
serveur La sonde envoie plutocirct ses donneacutees en modifiant lrsquoattribut src drsquoune image de zeacutero
pixel injecteacutee dans la page et en passant les donneacutees collecteacutees en tant que paramegravetres GET de
cette requecircte En sens inverse le serveur relaie les informations via un cookie speacutecialement
encodeacute que la sonde peut interroger peacuteriodiquement De cette faccedilon le serveur Cornipickle
peut reacutesider sur un serveur diffeacuterent de celui de lrsquoapplication testeacutee et avoir toujours une
communication bidirectionnelle ponctuelle avec sa sonde
103
42 LE LANGAGE CORNIPICKLE
Le langage Cornipickle comporte des constructions issues de la logique du premier ordre et de
la logique temporelle lineacuteaire tels que les quantificateurs et les opeacuterateurs temporels et qui
permettent agrave un utilisateur de speacutecifier des relations complexes sur les diffeacuterents eacuteleacutements du
document agrave plusieurs moments dans le temps caracteacuteristique qui est absente dans beaucoup
de langages de script
Cornipickle nrsquoest pas un convertisseur baseacute sur des expressions reacuteguliegraveres entre des fichiers
texte et des commandes de script mais sa grammaire lutte pour le mecircme genre de lisibiliteacute En
particulier pour ameacuteliorer la lisibiliteacute la grammaire de Cornipickle permet drsquoinseacuterer diffeacuterents
mots agrave lrsquointeacuterieur des diffeacuterentes constructions Ces mots nrsquoont aucun effet sur lrsquoanalyse et
lrsquointerpreacutetation des expressions
421 SYNTAXE DU LANGAGE
Dans Cornipickle les proprieacuteteacutes sont exprimeacutees sous forme drsquoassertions sur le contenu et les
attributs drsquoune capture (snapshot) drsquoune page prise agrave un instant donneacute La maniegravere preacutecise par
laquelle ces captures sont prises agrave partir drsquoune application web donneacutee sera deacutetailleacutee plus loin
Nous commenccedilons par une illustration des diffeacuterentes constructions de la grammaire dans le
tableau 41
Seacutelection drsquoeacuteleacutements Les eacuteleacutements de la page sont lrsquouniteacute principale dans Cornipickle ils
sont seacutelectionneacutes afin drsquoexprimer quelques-unes de leurs proprieacuteteacutes Ces proprieacuteteacutes peuvent
ecirctre appliqueacutees agrave tous les eacuteleacutements seacutelectionneacutes ou au moins agrave un
104
〈S〉 = 〈predicate〉 | 〈def-set〉 | 〈statement〉
Eacutenonceacutes Cornipickle
〈statement〉 = 〈foreach〉 | 〈exists〉 | 〈binary-stmt〉 | 〈negation〉| 〈temporal-stmt〉 | 〈userdef-stmt〉 | 〈let〉 | 〈when〉〈binary-stmt〉 = 〈equality〉 | 〈gt〉 | 〈lt〉 | 〈regex-match〉 | 〈and〉 | 〈or〉 | 〈implies〉〈temporal-stmt〉 = 〈globally〉 | 〈eventually〉 | 〈never〉 | 〈next〉 | 〈next-time〉
Logique du premier ordre
〈foreach〉 = For each 〈var-name〉 in 〈set-name〉 ( 〈statement〉 )〈exists〉 = There exists 〈var-name〉 in 〈set-name〉 such that ( 〈statement〉 )〈when〉 = When 〈var-name〉 is now 〈var-name〉 ( 〈statement〉 )〈let〉 = Let 〈var-name〉 be 〈property-or-const〉 ( 〈statement〉 )〈and〉 = ( 〈statement〉 ) And ( 〈statement〉 )〈or〉 = ( 〈statement〉 ) Or ( 〈statement〉 )〈implies〉 = If ( 〈statement〉 ) Then ( 〈statement〉 )〈negation〉 = Not ( 〈statement〉 )
Expressions temporelles
〈globally〉 = Always ( 〈statement〉 )〈never〉 = Never ( 〈statement〉 )〈next〉 = Next ( 〈statement〉 )〈eventually〉 = Eventually ( 〈statement〉 )〈next-time〉 = The next time ( 〈statement〉 ) Then ( 〈statement〉 )
Tableau 41 ndash La grammaire BNF pour Cornipickle (Partie I)
105
Par conseacutequent la seacutelection de lrsquoeacuteleacutement se fait par le biais de la quantification du pre-
mier ordre classique en utilisant lrsquoanglais pour la syntaxe comme For each $x in S
ou There exists $x in S(pour dire chaque $x dans S ou Il existe $x dans S) Dans ces
expressions S deacutesigne soit un seacutelecteur CSS 5 ou un autre ensemble preacuteceacutedemment deacutefini par
lrsquoutilisateur Les seacutelecteurs CSS sont exprimeacutes en utilisant la syntaxe de jQuery $( ) Un
seacutelecteur speacutecial appeleacute CDATA peut ecirctre utiliseacute pour deacutesigner le contenu du texte des nœuds
feuilles dans un arbre DOM (les parties qui composent la page en texte clair) Si $x est une
variable quantifieacutee en utilisant le meacutecanisme deacutecrit ci-dessus on peut acceacuteder au DOM ou aux
attributs CSS de cet eacuteleacutement en utilisant $xrsquos property (ougrave property est lrsquoattribut CSS
rechercheacute) Par exemple la largeur de lrsquoeacuteleacutement srsquoeacutecrirait $xrsquos width
Les attributs de lrsquoeacuteleacutement (qui sont soit des chaicircnes de caractegraveres ou de chiffres) peuvent alors
ecirctre compareacutes en utilisant des connectifs tels que is greater than ou equals le matching
drsquoexpressions reacuteguliegraveres est fait agrave travers le preacutedicat match et lrsquoinclusion de chaicircne est affirmeacutee
par lrsquoassertion contains Des assertions de base sur les eacuteleacutements peuvent eacutegalement ecirctre
combineacutees en utilisant des connecteurs booleacuteens classiques and or if then not
Eacuteveacutenements et opeacuterateurs temporels Dans Cornipickle les eacuteveacutenements deacuteclencheacutes par
lrsquoutilisateur tels que les touches et les clics de souris sont repreacutesenteacutes comme des attributs
sur lrsquoeacuteleacutement qui est la cible de lrsquoeacuteveacutenement Par exemple un eacuteleacutement qui a eacuteteacute cliqueacute
par lrsquoutilisateur posseacutedera momentaneacutement un attribut event avec une valeur click Par
conseacutequent affirmer qursquoun eacuteleacutement $x a eacuteteacute cliqueacute peut ecirctre eacutecrit $xrsquos event is lsquoclickrsquo
Lrsquoinclusion drsquoeacuteveacutenements dans le langage conduit naturellement agrave la notion de seacutequences
de documents de captures instantaneacutees Par conseacutequent Cornipickle fournit des opeacuterateurs
5 Un seacutelecteur CSS est une expression de chemin (path expression) qui deacutefinit les eacuteleacutements drsquoun documentqui font lrsquoobjet drsquoun ensemble donneacute de regravegles Ces expressions sont deacutefinies par une grammaire reacuteguliegraverecomme stipuleacute dans la norme CSS
106
Opeacuterateurs
〈equality〉 = 〈property-or-const〉 equals 〈property-or-const〉| 〈property-or-const〉 is 〈property-or-const〉〈gt〉 = 〈property-or-const〉 is greater than 〈property-or-const〉〈lt〉 = 〈property-or-const〉 is less than 〈property-or-const〉〈regex-match〉 = 〈property-or-const〉 matches 〈property-or-const〉〈constant〉 = 〈number〉 | 〈string〉〈property-or-const〉 = 〈elem-property〉 | 〈constant〉〈number〉 = ˆd+〈string〉 = ˆ[ˆ]
Constructions auxiliaires
〈el-or-not〉 = eacuteleacutement | ε
〈set-name〉 = 〈css-selector〉 | 〈userdef-set〉 | 〈regex-capture〉〈userdef-set〉 = 〈string〉〈var-name〉 = ˆ$[wd]+
Seacutelecteur CSS
〈css-selector〉 = $( 〈css-sel-contents〉 )〈css-sel-contents〉 = 〈css-sel-part〉 〈css-sel-contents〉 | 〈css-sel-part〉〈css-sel-part〉 = ˆ[wdu0023]+
Attributs CSS
〈css-attribute〉 = value | height | width | top | left | right| bottom | color | id | text | border | event
Proprieacuteteacutes des eacuteleacutements
〈elem-property〉 = 〈elem-property-pos〉 | 〈elem-property-com〉〈elem-property-pos〉 = 〈var-name〉 rsquos 〈css-attribute〉〈elem-property-com〉 = the 〈css-attribute〉 of 〈var-name〉
Expressions reacuteguliegraveres
〈regex-capture〉 = match 〈elem-property〉 with 〈string〉
Tableau 42 ndash La grammaire BNF pour Cornipickle (Partie II)
107
emprunteacutes agrave la logique temporelle Lineacuteaire (LTL) pour exprimer des assertions sur lrsquoeacutevolution
du contenu drsquoun document au fil du temps
La construction Always ϕ nous permet de faire lrsquoassertion suivante quelle que soit lrsquoex-
pression de ϕ elle doit ecirctre vraie (True) dans tous les snapshots du document De mecircme on
utilise Eventually ϕ pour dire que ϕ sera vraie dans certains futurs snapshots du document
et Next ϕ est utiliseacute pour dire que ϕ est vrai dans la capture suivante
Une construction speacuteciale appeleacutee The next time ϕ then ψ affirme que ψ doit ecirctre vraie
mais seulement une fois que ϕ est Vraie Par exemple on peut utiliser cette construction pour
exprimer que quelque chose doit ecirctre observeacute apregraves qursquoun eacuteleacutement ait eacuteteacute cliqueacute lrsquoassertion
ne lie pas jusqursquoagrave ce moment Ceci est une leacutegegravere reacuteeacutecriture de lrsquoopeacuterateur until de LTL
Un but particulier des opeacuterateurs temporels est de comparer lrsquoeacutetat du mecircme eacuteleacutement sur plu-
sieurs snapshots Cela peut ecirctre fait dans Cornipickle avec la construction When $x is now $y ϕ
Si $x se reacutefegravere agrave lrsquoeacutetat drsquoun eacuteleacutement captureacute dans un snapshot anteacuterieur alors $y contiendra
lrsquoeacutetat du mecircme eacuteleacutement dans la capture (snapshot) actuelle
Toutes ces constructions peuvent ecirctre librement combineacutees Par exemple la proprieacuteteacute suivante
affirme que chaque eacuteleacutement de la liste se deacuteplacera vers le bas de la page agrave un certain moment
For each $x in $(li) (Eventually (
When $x is now $y ($yrsquos top is greater than $xrsquos top )))
Extension de la grammaire Une caracteacuteristique tregraves importante et exceptionnelle qui contri-
bue agrave la lisibiliteacute des speacutecifications Cornipickle est la possibiliteacute drsquoeacutetendre le vocabulaire de
base du langage Ce dernier donne aux utilisateurs cette possibiliteacute en utilisant leurs propres
deacutefinitions Ces nouvelles deacutefinitions seront lues par lrsquointerpreacuteteur et pourront ensuite ecirctre
108
Ensemble deacutefini en extension
〈def-set〉 = A 〈def-set-name〉 is any of 〈def-set-eacuteleacutements〉〈def-set-name〉 = ˆ ( =is)〈def-set-eacuteleacutements〉 = 〈def-set-eacuteleacutement〉 〈def-set-eacuteleacutements〉 | 〈def-set-eacuteleacutement〉〈def-set-eacuteleacutement〉 = 〈constant〉
Preacutedicats deacutefinis par lrsquoutilisateur
〈predicate〉 = We say that 〈pred-pattern〉 when ( 〈statement〉 )〈pred-pattern〉 = ˆ ( =when)
Eacutenonceacutes deacutefinis par lrsquoutilisateur
〈userdef-stmt〉 = empty
Tableau 43 ndash Extensions de la grammaire BNF pour Cornipickle
utiliseacutees librement comme tout eacuteleacutement de base du langage
Les preacutedicats peuvent ecirctre deacutefinis avec la construction We say that when Le texte entre
that et when est interpreacuteteacute comme une chaicircne de caractegraveres qui peut contenir des variables
Puis le texte apregraves when deacutecrit comment cette expression doit ecirctre eacutevalueacutee en termes du
vocabulaire existant Par exemple on peut deacutefinir lrsquoexpression laquo left-aligned raquo comme suit
We say that $x and $y are left-aligned when ($xrsquos left equals $yrsquos left )
La construction $x and $y are left-aligned ($x et $y sont aligneacutes agrave gauche) peut en-
suite ecirctre reacuteutiliseacutee (eacuteventuellement avec diffeacuterents noms de variables) dans des assertions
ulteacuterieures Les utilisateurs peuvent eacutegalement deacutefinir des ensembles soient des ensembles
de chaicircnes de caractegraveres des chiffres ou des ensembles drsquoeacuteleacutements agrave partir drsquoune page en les
eacutenumeacuterant en utilisant la construction A is any of
A Mojibake is any of Atilde ccopy Atildersquo Atildeuml
109
Notez que le nom de lrsquoensemble ne doit pas neacutecessairement ecirctre un seul mot lrsquoanalyseur
interpregravete tout ce qui est entre A et is any of comme un nom
La quantiteacute de donneacutees pouvant ecirctre relayeacutee de cette maniegravere eacutetant limiteacutee Cornipickle se
charge drsquoenvoyer une sonde qui ne reacutecupegravere que les informations neacutecessaires agrave lrsquoeacutevaluation
des speacutecifications fournies par lrsquoutilisateur Par conseacutequent la sonde reccediloit des instructions sur
les eacuteleacutements de la page qui sont inteacuteressants et sur les attributs DOM et CSS neacutecessaires pour
ces eacuteleacutements Ceci est fait en reacutecupeacuterant lrsquoensemble de tous les noms drsquoattributs apparaissant
dans une expression et lrsquoensemble de tous les seacutelecteurs CSS utiliseacutes dans les quantificateurs
La sonde parcourt la structure DOM drsquoune maniegravere en profondeur et produit un nœud de sortie
pour chaque nœud DOM visiteacute Par deacutefaut le nœud de sortie est vide il agit uniquement
comme un espace reacuteserveacute vide afin de preacuteserver la relation parent-enfant entre les nœuds de
sortie Ce nrsquoest que si lrsquoemplacement du nœud actuel correspond agrave lrsquoun des seacutelecteurs CSS
que les attributs et les valeurs seront ajouteacutees au nœud et seulement pour les attributs preacutesents
dans lrsquoexpression agrave eacutevaluer Des reacuteductions suppleacutementaires peuvent ecirctre reacutealiseacutees en reacuteduisant
tous les sous-arbres qui contiennent uniquement des nœuds vides Ainsi la structure DOM
produite par la sonde peut ecirctre vue comme une version laquo eacutevideacutee raquo du document original ne
contenant que des nœuds et des attributs importants pour lrsquoeacutevaluation drsquoune proprieacuteteacute
Incidemment il faut noter que ce filtrage est relativement grossier Consideacuterons par exemple
lrsquoexpression suivante
For each $x in $(p)If $xrsquos height equals 400 Then
For each $y in $(h1)$xrsquos width is greater than $yrsquos width
Cornipickle sera chargeacute drsquoaller chercher la largeur et la hauteur de tous les paragraphes et
rubriques pourtant on ne peut voir que les paragraphes de 400 pixels de hauteur qui sont
110
reacuteellement neacutecessaires pour deacutecider de la vrai valeur de la proprieacuteteacute De plus les informations
sur les titres nrsquoont drsquoimportance que si de tels paragraphes existent dans le document sinon
la proprieacuteteacute est vide Par conseacutequent les conditions de filtrage pourraient ecirctre affineacutees un
compromis doit ecirctre atteint entre les eacuteconomies de bande passante drsquoun tel filtrage et la
puissance de calcul neacutecessaire du cocircteacute client pour eacutevaluer les conditions
422 SEacuteMANTIQUE FORMELLE
Nous allons maintenant preacutesenter la seacutemantique formelle de Cornipickle La premiegravere eacutetape
consiste agrave formaliser la structure le contenu et les proprieacuteteacutes de style drsquoune page afficheacutee
Nous deacutefinissons drsquoabord un ensemble A de noms drsquoattributs Cet ensemble comprend tous les
attributs du DOM (Document Object Model Level 2) [55] et toutes les proprieacuteteacutes de feuilles de
style (CSS) qui peuvent ecirctre associeacutees agrave un eacuteleacutement Un nœud DOM est une fonction ν ArarrV
qui associe agrave chaque nom drsquoattribut une valeur prise agrave partir drsquoun ensemble V Nous utilisons
la valeur speacuteciale laquo raquo pour indiquer qursquoun attribut est indeacutefini pour un nœud donneacute Nous
distinguons un sous-ensemble E subV qui deacutesigne les noms drsquoeacuteleacutements correspondants au nom
de la balise HTML reacuteelle qui repreacutesente lrsquoeacuteleacutement (par exemple a h1 img etc)
Nous indiquerons par N lrsquoensemble de tous les nœuds DOM Lrsquoensemble T de documents
DOM comprend tous les arbres dont les nœuds sont des nœuds DOM Conformeacutement agrave la
convention adopteacutee par la plupart des navigateurs Web les eacuteleacutements de texte ne peuvent
apparaicirctre que comme feuilles et reccediloivent le nom drsquoeacuteleacutement speacutecial TEXT La figure 44
repreacutesente un tel document Si nous laissons ν se reacutefeacuterer au deuxiegraveme paragraphe du document
body nous avons par exemple ν(elementName) = ldquoprdquo ν(stylecolor) = ldquoredrdquo etc Nous
eacutetendons ν aux valeurs en deacutefinissant ν(v) = v pour tout v isinV
111
lthtmlgtltheadgtlttitlegtMy titlelttitlegt
ltheadgtltbodygtlth1gtThe first pagelth1gtltp style=colorredwidth400pxgtHello worldltpgt
ltp style=font-size14ptwidth200pxgtAnother ltbgtparagraphltbgtltpgt
ltp style=width400pxgtltpgtltbodygt
lthtmlgt
html
head body
title
CDATA
h1 p p p
CDATA CDATA CDATA b
CDATA
Figure 44 ndash Un document DOM simple (a) Structure HTML (b) Repreacutesentation en arbre DOM Seuls les noms des eacuteleacutements sont afficheacutes les attributs et valeurs restants sont omis pour plusde clarteacute
112
Soit κ T timesNrarr 2N la fonction qui eacutetant donneacute un document t isin T et un nœud ν isinN produit
lrsquoensemble κ(tν) de tous les enfants de ν dans T Soit C lrsquoensemble de tous les seacutelecteurs
CSS La fonction χ T times Srarr 2N renverra lrsquoensemble des nœuds en t correspondant agrave un
seacutelecteur CSS c isin C Les eacuteveacutenements deacuteclencheacutes par lrsquoutilisateur sont pris en compte en
supposant que certains eacuteleacutements portent un attribut avec le nom speacutecial laquo event raquo dont la
valeur deacutecrit lrsquoeacuteveacutenement auquel cet eacuteleacutement est lieacute Par exemple un utilisateur qui clique sur
un bouton ferait en sorte que lrsquoattribut laquo event raquo de ce bouton porterait laquo click raquo comme valeur
De cette faccedilon il est possible qursquoun instantaneacute drsquoun document contienne des informations sur
les eacuteveacutenements dynamiques survenant dans lrsquoapplication
La seacutemantique de Cornipickle est deacutefinie sur des traces des documents DOM une trace est
une seacutequence finie drsquoeacuteleacutements de T que nous deacutesignerons par t = t0 t1 tk Eacutetant donneacute
que toutes les expressions impliquant des constructions deacutefinies avec We say that peuvent
facilement ecirctre converties en expressions qui utilisent uniquement des constructions agrave partir
du langage de base il suffit de deacutefinir la seacutemantique pour ce langage de base On dira qursquoune
trace t satisfait une expression Cornipickle ϕ noteacutee t |= ϕ lorsque son eacutevaluation renvoie la
valeur Vrai (gt) La notation t i indique le suffixe de t agrave partir de son i-egraveme eacuteveacutenement
La seacutemantique complegravete est deacutefinie reacutecursivement dans le tableau 44 En termes formels
lrsquoexpressiviteacute du langage Cornipickle correspond agrave une extension du premier ordre de la
logique temporelle lineacuteaire ougrave les eacuteveacutenements sont des structures arborescentes des paires
nom-valeur semblables agrave celles utiliseacutees par le moniteur drsquoexeacutecution BeepBeep [53] ce-
pendant BeepBeep nrsquoa pas la possibiliteacute de creacuteer des constructions grammaticales deacutefinies
par lrsquoutilisateur En outre le langage a eacuteteacute eacutetendu agrave des constructions qui mecircme si elles
nrsquoaccroissent pas lrsquoexpressiviteacute ameacuteliorent la lisibiliteacute des speacutecifications tel que The next
time 6
6 Formellement t |= The next time ϕ then ψ si et seulement si t |= Notϕ Until (ϕ And ψ)
113
t |= νrsquos a equals νprimersquos aprime hArr ν(a) = ν
prime(aprime)t |= νrsquos a equals v hArr ν(a) = v
t |= Notϕ hArr t 6|= ϕ
t |= ϕ And ψ hArr t |= ϕ and t |= ψ
t |= ϕ Ou ψ hArr t |= ϕ or t |= ψ
t |= If ϕ Then ψ hArr t 6|= ϕ ou t |= ψ
t |= There exists ξ in $(c) such that ϕ hArr t |= ϕ[ξν ] pour certains ν isin χ(t0c)t |= For each ξ in $(c) ϕ hArr t |= ϕ[ξν ] pour tout ν isin χ(t0c)
t |= Alwaysϕ hArr t |= ϕ et t1 |= Alwaysϕ
t |= Eventuallyϕ hArr t |= ϕ ou t1 |= Eventuallyϕ
t |= Nextϕ hArr t1 |= ϕ
t |= ϕ Until ψ hArr Il existe ige 0 tel quet i |= ψ and t j |= ϕ for j lt i
When ξ is now ξ prime ϕ hArr Il existe ν prime isin t0 tel queν(id) = ν prime(id) and t |= ϕ[ξν prime]
Tableau 44 ndash La seacutemantique formelle de Cornipickle aaprime isin A sont les noms drsquoattributs DOMv isin V est une valeur drsquoattribut c isin C est un seacutelecteur CSS ξ et ξ prime sont des noms de variablesν ν prime isin N sont les nœuds DOM et ϕ et ψ sont des eacutenonceacutes Cornipickle quelconques Lorsque test vide Always srsquoeacutevalue agrave V rai et Eventually et Next srsquoevaluent agrave Faux
114
Le cas de lrsquoexpression When $x is now $y justifie une explication cependant Cette construc-
tion est utiliseacutee pour deacutesigner le mecircme eacuteleacutement drsquoun document agrave deux moments diffeacuterents dans
le temps En raison de la nature dynamique des applications web il ne suffit pas drsquoutiliser sim-
plement For each $x in $(s) suivi par For each $y in $(s) avec le mecircme seacutelecteur
CSS s Les eacuteleacutements drsquoune page peuvent ecirctre deacuteplaceacutes arbitrairement vers nrsquoimporte quelle
partie drsquoun document et par conseacutequent la reacutecupeacuteration drsquoeacuteleacutements avec le mecircme seacutelecteur
ne garantit pas qursquoils seront reacutepartis sur le mecircme domaine deux fois Cornipickle reacutesout ce
problegraveme en donnant agrave chaque eacuteleacutement un attribut unique appeleacute cornipickleid (raccourci
agrave id dans le tableau) Cet identifiant ne change jamais quelles que soient les manipulations de
lrsquoapplication sur un eacuteleacutement Lrsquoexpression When $x is now $y eacutevalue la variable $y avec
lrsquoeacuteleacutement ayant la mecircme cornipickleid comme cela a eacuteteacute donneacute agrave lrsquoeacutevaluation de la variable
$x permettant de comparer les attributs du mecircme eacuteleacutement dans deux instantaneacutes distincts de
la page
43 EXPRIMER DES PROPRIEacuteTEacuteS AVEC CORNIPICKLE
Au moyen drsquoune tel langage il est possible de donner des exemples de proprieacuteteacutes correspondant
agrave certains des bugs citeacutes preacuteceacutedemment Par exemple en prenant pour Mojibake lrsquoensemble
deacutefini preacuteceacutedemment la preacutesence de problegravemes de codage de caractegraveres dans une page peut
ecirctre deacutetecteacutee avec
We say that $x doesnrsquot contain $y when (Not ($xrsquos text matches $yrsquos value ))
For each $text in $(CDATA) (For each $mojibake in Mojibake ($text doesnrsquot contain $mojibake ))
Nous ajoutons la construction doesnrsquot contain agrave la grammaire simplement pour ameacuteliorer
115
la lisibiliteacute de la deacuteclaration qui suit
Similairement pour preacuteciser qursquoune classe speacutecifique drsquoeacuteleacutements ne devrait jamais se deacuteplacer
on peut eacutecrire ce qui suit
We say that $x is immobile when (Always (
When $x is now $y (($xrsquos left equals $yrsquos left)
And($xrsquos top equals $yrsquos top ))))
For each $item in $(li) ( $item is immobile )
Lrsquointuitiviteacute de speacutecifications peut encore ecirctre mise en eacutevidence dans ce dernier exemple qui
stipule qursquoau moins un eacuteleacutement de la liste a la valeur drsquoun autre eacuteleacutement de liste la derniegravere
fois que lrsquoutilisateur a cliqueacute sur un bouton appeleacute laquo Go raquo
We say that I click on Go when (There exists $b in $(button) such that (
($brsquos text is Go)And($brsquos event is mouseup)))
Always (If (I click on Go) Then (
There exists $x in $(value) such that (The next time (I click on Go)
Then (There exists $y in $(value) such that (
$xrsquos text equals $yrsquos text )))))
La lisibiliteacute de cette speacutecification devrait ecirctre mise en contraste avec le code proceacutedural qursquoon
aurait besoin drsquoeacutecrire pour deacutetecter le mecircme problegraveme qui est objectivement plus long et
beaucoup moins clair Par exemple dans jQuery on obtiendrait lrsquoeacutequivalent de la figure 45
Il est maintenant possible de reprendre certains exemples de bugs mentionneacutes en deacutebut de
thegravese et de montrer comment ceux-ci peuvent ecirctre deacutetecteacutes par des expressions Cornipickle
116
$(document)mouseUp(function(event) var e = argumentscalleeif ($(eventtarget)text() === Go) var current_values = []$(value)each(current_valuespush($(this)text())
)if (elastValues == undefined)
var found = falsefor (var v in current_values)
if ($inArray(v elastValues)) found = truebreak
If (found)
consolelog(Error)elastValues = current_values
)
Figure 45 ndash Exemple de code jQuery veacuterifiant que deux eacuteleacutements ont le mecircme texte
117
approprieacutees Prenons drsquoabord le cas drsquoun eacuteleacutement qui se deacuteplace dans une page cliquer sur
un eacuteleacutement change sa classe CSS cela entraicircne la modification de la zone de deacutelimitation de
lrsquoeacuteleacutement eacuteventuellement le deacuteplacement drsquoautres eacuteleacutements qui ne doivent pas bouger
On doit drsquoabord deacutefinir ce que signifie ecirctre immobile La construction When $x is now $y
nous permet de comparer les proprieacuteteacutes drsquoun mecircme eacuteleacutement dans deux snapshots diffeacuterents de
la page mecircme si le positionnement relatif de lrsquoeacuteleacutement dans le DOM a changeacute
We say that $x is immobile when (Always (
When $x is now $y (($xrsquos left equals $yrsquos left)And($xrsquos top equals $yrsquos top)
))
)
Avec cette expression il devient facile de speacutecifier par exemple que chaque eacuteleacutement drsquoune
liste doit demeurer agrave sa position
name Immobile itemsdescription List items should never change positionseverity Error
For each $item in $(li) (
$item is immobile)
De la mecircme maniegravere on peut speacutecifier que des eacuteleacutements doivent toujours ecirctre aligneacutes les uns
par rapport aux autres
Nous deacutefinissons drsquoabord quelques preacutedicats en utilisant la construction We say that
118
We say that $x and $y are left-aligned when ($xrsquos left equals $yrsquos left
)We say that $x and $y are top-aligned when (
$xrsquos top equals $yrsquos top)
We say that the page is big when (The media query (min-width 200px) applies
)The following rules apply when (
the page is big)
Ces preacutedicats nous permettent de simplifier lrsquoexpression rechercheacutee qui devient une double
quantification sur les eacuteleacutements drsquoune mecircme liste
name Menus aligneddescription All list items should either be left- or top-alignedseverity Warning
For each $z in $(menu li) (
For each $t in $(menu li) (($z and $t are left-aligned)Or($z and $t are top-aligned)
))
Nous ne faisons aucune reacuteclamation formelle concernant lrsquoexhaustiviteacute du langage ou son
expressiviteacute Cependant des preuves anecdotiques reacutevegravelent que tous les bogues de mise en
page dans notre enquecircte peuvent ecirctre exprimeacutes par une expression approprieacutee suggeacuterant qursquoil
est bien adapteacute agrave la tacircche agrave accomplir
CHAPITRE 5
DEacuteTECTION AVANCEacuteE BUGS COMPORTEMENTAUX ET RWD
Nous avons preacutesenteacute au chapitre preacuteceacutedent Cornipickle et la faccedilon drsquoeacutevaluer des bugs de
preacutesentation en analysant le contenu drsquoune seule page relativement indeacutependamment des
autres Dans ce chapitre nous nous inteacuteressons davantage aux bugs dits comportementaux
Dans ces bugs ce nrsquoest pas la preacutesentation graphique des pages qui est deacutefectueuse mais bien
la fonctionnaliteacute mecircme de lrsquoapplication Malgreacute tout nous pouvons exprimer et deacutetecter ces
bugs agrave partir de proprieacuteteacutes drsquoeacuteleacutements de lrsquointerface
Nous donnerons drsquoabord des exemples de bugs comportementaux illustreacutes dans une application
appeleacutee Beep Store Nous citons en suite les solutions actuelles et deacutecrivons ensuite notre
approche qui constitue une technique automatiseacutee fournissant des oracles de test dans le
but de deacutetecter les bugs comportementaux qui lient les donneacutees agrave lrsquoordre des consultations
de plusieurs pages de lrsquoapplication cela est fait en combinant Cornipickle avec un robot
drsquoexploration (RIA Crawler) Cette technique est aussi capables de veacuterifier la coheacuterence drsquoune
mise en page reacuteactive (responsive) sur une large gamme de largeurs de la fenecirctre Pour cela
nous avons inteacutegreacute une petite application dans le but de changer simultaneacutement la taille de la
fenecirctre du navigateur afin de deacutetecter des bugs RWD
120
51 BUGS COMPORTEMENTAUX DANS LE BEEP STORE
Afin drsquoeacutetudier les problegravemes de bugs comportementaux dans les applications RIA (Web 20)
deacutefinis dans 212 nous montrons quelques exemples de bugs illustreacutes sur une application
appeleacutee le Beep Store [53]
Le Beep Store est une application web client-serveur autonome impleacutementeacutee en PHP et
JavaScript qui permet aux utilisateurs enregistreacutes de parcourir une collection fictive de livres
et de musique et de geacuterer un panier virtuel composeacute de ces eacuteleacutements Cette application dont
les caracteacuteristiques ont eacuteteacute extraites drsquoune eacutetude exhaustive des applications web du monde
reacuteel est une RIA au sens propre du terme les interactions utilisateurs sont complegravetement
asynchrones ne neacutecessitent jamais le rechargement de la page deacutependent des actions passeacutees
des utilisateurs et consistent en un seul document dont les diffeacuterentes parties sont montreacutees
ou cacheacutees en fonction de lrsquoeacutetat actuel de lrsquoapplication
Connexions multiples Un des bugs qui peuvent ecirctre basculeacutes dans le Beep Store permet agrave
lrsquoutilisateur drsquoacceacuteder agrave la page de connexion tout en eacutetant deacutejagrave connecteacute Ceci est deacutetecteacute par
le fait que le lien laquo Srsquoidentifier raquo (Login) apparaicirct dans la barre drsquoaction supeacuterieure mecircme apregraves
que lrsquoutilisateur srsquoest connecteacute avec succegraves comme le montre la figure 51 1 Eacutevidemment une
application bien construite ne fournirait pas un bouton de connexion apregraves qursquoun utilisateur se
soit deacutejagrave connecteacute cette proprieacuteteacute est agrave eacutetat dans le sens ougrave lrsquoeacutetat valide drsquoune page deacutepend de
la seacutequence des actions passeacutees qui sont effectueacutees par lrsquoutilisateur (dans ce cas le fait qursquoune
connexion reacuteussie ait eu lieu)
1 On a vu au chapitre 2 comment des sites web reacuteels preacutesentent exactement ce problegraveme
121
Figure 51 ndash Le bug de connexions multiples Un utilisateur deacutejagrave connecteacute se voit proposer lrsquoop-tion de se reconnecter
Figure 52 ndash Le bug des paniers multiples Des boutons pour creacuteer un panier et ajouter desarticles au panier coexistent sur la mecircme page
Paniers multiples Un autre bug permet agrave lrsquoutilisateur de creacuteer plusieurs paniers drsquoachat
mecircme apregraves en avoir creacuteeacute un premier La figure 52 montre un exemple de ce bug un panier a
deacutejagrave eacuteteacute creacuteeacute puisque lrsquointerface affiche des boutons permettant agrave lrsquoutilisateur drsquoajouter des
articles au panier Pourtant les boutons pour creacuteer un nouveau panier sont eacutegalement afficheacutes
Supprimer drsquoun panier inexistant Ce bug est lrsquoinverse du preacuteceacutedent parfois le Beep
Store permet agrave lrsquoutilisateur de retirer un objet de son panier avant mecircme de le creacuteer Nous
pouvons voir dans la figure 53 que les boutons pour creacuteer un panier sont preacutesents avec les
boutons pour en retirer les eacuteleacutements
122
Figure 53 ndash Le bug de la suppression drsquoun panier inexistant Des boutons pour retirer du panieret creacuteer un panier coexistent sur la mecircme page
Ces bugs sont clairement comportementaux car ils sont causeacutes par des actions anteacuterieures
de lrsquoutilisateur ou des actions qui nrsquoont jamais eu lieu Il convient eacutegalement de noter que
selon lrsquoimpleacutementation du serveur ces bugs ne deacuteclenchent pas neacutecessairement des messages
drsquoerreur dans les logs Nous pouvons facilement imaginer un cas ougrave une action est rejeteacutee et ne
creacutee pas drsquoautres problegravemes mais le client ne devrait jamais avoir eacuteteacute preacutesenteacute avec lrsquooption
52 SOLUTIONS ACTUELLES
Les travaux connexes sur le test drsquoapplications web pour de tels types de bugs se concentrent
sur les moyens de trouver des erreurs dans les applications en effectuant une recherche
exhaustive de leur espace drsquoeacutetat
Les robots drsquoexploration (laquo crawlers raquo) font partie inteacutegrante des moteurs de recherche web et
sont deacutedieacutes agrave la collecte et agrave lrsquoindexation de documents web Ils ont eacuteteacute deacuteveloppeacutes agrave lrsquoorigine
pour lrsquoarchivage la reacutecupeacuteration drsquoinformations (trouver des adresses e-mail ou des pages
de produits par exemple) Cependant on a rapidement deacutecouvert que les crawlers pouvaient
ecirctre utiliseacutes agrave drsquoautres fins en particulier un crawler peut ecirctre consideacutereacute comme un outil
drsquoexploration drsquoespace drsquoeacutetat et agrave ce titre ecirctre utiliseacute pour effectuer des tests automatiseacutes
123
Un processus drsquoexploration traditionnel commence agrave partir des URL de deacutemarrage Les pages
web correspondant agrave ces URL sont teacuteleacutechargeacutees et les hyperliens preacutesents sur celles-ci sont
extraits et ajouteacutes agrave un ensemble drsquoURL agrave visiter eacutegalement appeleacute le crawl frontier Comme
le nombre drsquoURL qui peuplent la frontiegravere drsquoexploration augmente tregraves rapidement un critegravere
de priorisation du teacuteleacutechargement de certaines pages est geacuteneacuteralement appliqueacute Agrave leur tour
les URL les mieux classeacutees dans la limite de lrsquoexploration sont teacuteleacutechargeacutees et de nouveaux
liens sont extraits Cette opeacuteration est reacutepeacuteteacutee jusqursquoagrave ce que tous les liens accessibles soient
visiteacutes [62 65]
Certaines fonctionnaliteacutes de base des applications web traditionnelles sont modifieacutees dans
les RIA ce qui rend lrsquoexploration des RIA plus difficile que celle des applications web
traditionnelles Dans lrsquoanalyse RIA lrsquoordre drsquoanalyse respecte la seacutequence de pages possible
comme si un internaute lrsquoutilisait Comme nous lrsquoavons vu contrairement aux applications
web traditionnelles une URL nrsquoidentifie pas de faccedilon unique lrsquoeacutetat de lrsquoapplication et ne peut
donc pas ecirctre simplement demandeacutee au serveur agrave tout moment
Dans une application avec une gestion du panier comme le Beep Store il serait possible
pour un robot drsquoexploration traditionnel de trouver des bugs comportementaux lagrave ougrave il nrsquoy
en a pas lrsquoordre de visite est crucial Par exemple dans un sceacutenario ougrave lrsquoutilisateur peut
creacuteer un panier supprimer un panier ajouter un article agrave un panier et modifier un panier pour
modifier la quantiteacute un bug qui permet agrave lrsquoutilisateur drsquoeacutediter un article dans son panier sans
avoir de panier pourrait ecirctre deacutecouvert Apregraves la creacuteation drsquoun panier lrsquoajout drsquoun eacuteleacutement
et la suppression du panier lrsquoensemble drsquoURL du crawler traditionnel contient lrsquoURL agrave
modifier Ensuite lorsque vous essayez drsquoatteindre cette URL un bug survient car le panier a
eacuteteacute supprimeacute Cependant il peut srsquoagir drsquoun faux positif car cette seacutequence drsquoactions nrsquoest
probablement pas possible pour un utilisateur Un robot drsquoexploration traditionnel nrsquoest donc
pas adapteacute agrave la recherche de bugs comportementaux
124
Dans un crawler web pour RIA la page associeacutee agrave une seed URL (un crawler commence
par une liste drsquoURL agrave visiter appeleacutee les seeds) est extraite et chargeacutee dans un navigateur
virtuel Un module est requis pour veacuterifier si crsquoest la premiegravere fois que la page construite
est rencontreacutee Un extracteur drsquoeacuteveacutenements reacutecupegravere les eacuteveacutenements JavaScript de la page
un de ces eacuteveacutenements est seacutelectionneacute et exeacutecuteacute sur la page La page reacutesultante est ensuite
collecteacutee et le processus se poursuit jusqursquoagrave eacutepuisement de toutes les actions deacutecouvertes
[41] Sur la base de ce modegravele diffeacuterentes strateacutegies drsquoexploration (telles que la recherche en
profondeur (depth-first search) Greedy Model-Based et Component-Based) ont eacuteteacute suggeacutereacutees
[61 36 45 40 46 44]
Certains outils ont deacutejagrave eacuteteacute conccedilus pour tester les RIA Par exemple WebMate [43] peut
extraire lrsquoarborescence drsquoeacutetat drsquoune application web Cet arbre est ensuite compareacute aux arbres
drsquoeacutetat drsquoautres navigateurs pour trouver les diffeacuterences de mise en page Cependant il se
concentre sur la compatibiliteacute inter-navigateurs (cross-browser compatibility) et ne semble pas
prendre en charge les tests externes deacutefinis par lrsquoutilisateur
WebMole est un autre crawler automatiseacute qui geacuteneacuteralise les approches existantes Il eacutelimine
tout backtracking arbitraire en interceptant les requecirctes HTTP et fait des sauts de page [54]
Cependant lrsquoobjectif de WebMole est simplement drsquoextraire les graphes de navigation drsquoune
application il ne permet pas agrave un utilisateur drsquoeacutecrire des oracles de test agrave eacutevaluer pendant
lrsquoexploration de lrsquoapplication
De son cocircteacute Crawljax [60] utilise une strateacutegie en profondeur (depth-first strategy) pour
explorer et produire une machine agrave eacutetats finis du comportement de lrsquoapplication Il est possible
gracircce agrave son architecture de plugin de tester chaque eacutetat pendant qursquoils sont visiteacutes Cependant
les tests en question doivent ecirctre eacutecrits par lrsquoutilisateur en code Java pur cela rend lrsquoeacutecriture
des oracles de test dynamiques difficile pour des raisons mentionneacutees plus haut
125
53 SOLUTION PROPOSEacuteE
Pour remeacutedier agrave ces problegravemes nous proposons dans cette section une architecture qui
combine un robot drsquoindexation RIA (dans ce cas Crawljax) avec notre interpreacuteteur de langage
de haut niveau pour les oracles de test web Cornipickle Crawljax est responsable de
lrsquoexploration drsquoune application web en tenant compte de son eacutetat tandis que nous utilisons les
opeacuterateurs emprunteacutes de la logique temporelle lineacuteaire fournie par Cornipickle pour exprimer
des assertions sur lrsquoeacutevolution du contenu drsquoun document au fil du temps Cette architecture a
eacuteteacute codeacutee dans un plugin open source pour Crawljax 2
531 INTERACTION AVEC CRAWLJAX
Crawljax est un outil pour explorer automatiquement lrsquoeacutetat dynamique des applications web
modernes Via des interfaces de programmation il a la capaciteacute drsquointeragir avec le code cocircteacute
client de lrsquoapplication Nous lrsquoutilisons pour explorer le comportement de lrsquoapplication web agrave
tester Pour deacutetecter les clics Crawljax analyse une page Web et lrsquoutilise systeacutematiquement
pour explorer le comportement dynamique de lrsquoapplication [60 70]
Les modifications deacutetecteacutees dans lrsquoarbre DOM dynamique sont valideacutees en tant que nouveaux
eacutetats du comportement De nombreuses options sont disponibles avec Crawljax pour configurer
le comportement drsquoanalyse Nous pouvons par exemple speacutecifier les liens ou les widgets agrave
cliquer ou non au cours de lrsquoexploration Dans une variante Crawljax effectue une recherche
en profondeur en premier (depth-first search) stocke lrsquohistorique des exeacutecutions drsquoeacuteveacutenements
et nrsquoexeacutecute un eacuteveacutenement que si lrsquoeacuteveacutenement nrsquoa pas eacuteteacute exeacutecuteacute auparavant quel que soit
lrsquoeacutetat de lrsquoapplication [68]
2 http githubcomliflabcrawljax-cornipickle-plugin
126
Figure 54 ndash Flux drsquointeraction et de seacuterialisation (Crawljax-Cornipickle)
La figure 54 montre le workflow du systegraveme combineacute pour deacutetecter les bugs comportemen-
taux de lrsquoapplication testeacutee Crawljax explore le comportement de lrsquoapplication web sous
test (Exploration) Il interagit avec Cornipickle agrave travers son architecture de plugin (Plugin
Cornipickle (capture)) (1) Chaque fois qursquoun eacutetat est creacuteeacute (OnNewState) ou visiteacute (OnRevisit)
Crawljax seacuterialise la page (seacuterialisation JSON) et lrsquoenvoie agrave lrsquointerpreacuteteur (2) pour lrsquoeacutevaluer
de la mecircme maniegravere que la sonde envoie la page au serveur Cornipickle dans lrsquoarchitecture
traditionnelle (Cornipickle eacutevaluation) Apregraves que la page ait eacuteteacute eacutevalueacutee par Cornipickle le
verdict (3) est retourneacute et le plugin affiche le reacutesultat (Outputs)(4)
Il est important de se rappeler que chaque eacutetat de lrsquoapplication est visiteacute par Crawljax dans la
mecircme seacutequence qursquoun utilisateur Mecircme quand il revient agrave un eacutetat anteacuterieur il recommence au
deacutebut de lrsquoexploration et prend le mecircme chemin jusqursquoagrave ce que lrsquoeacutetat deacutesireacute soit atteint
532 REDIMENSIONNMENT DU NAVIGATEUR
Ce mecircme principe peut ecirctre facilement modifieacute pour eacutegalement deacutetecter des bugs RWD Pour
ce faire nous avons creacuteeacute un autre plugin qui cette fois redimensionne le navigateur drsquoune
127
largeur donneacutee agrave une autre largeur
Eacutetant donneacute que lrsquoutilisation drsquoune barre de deacutefilement verticale nrsquoest pas un problegraveme dans le
responsive design seul le redimensionnement horizontal est lrsquoapproche correcte pour deacutetecter
les bugs RWD Puisque nous voulons explicitement trouver des bugs lieacutes au RWD le plugin
diminue lentement la largeur du navigateur ces bugs apparaissent sur des largeurs infeacuterieures
ougrave lrsquoespace disponible devient de plus en plus rare en reacutefeacuterence agrave des largeurs plus grandes Il
est possible de fournir au plugin la borne supeacuterieure la borne infeacuterieure et la quantiteacute de pixels
pour la deacutecreacutementation Le plugin met eacutegalement en eacutevidence les bugs qursquoil trouve et prend
une capture drsquoeacutecran de la page Nous obtenons ensuite des captures drsquoeacutecran ougrave les eacuteleacutements
responsables du bug ont des bordures rouges
54 EXPEacuteRIENCES ET REacuteSULTATS
Comme on peut le voir la deacutetection de bugs comportementaux et de bugs RWD dans les
deux cas peut se reacutesumer agrave la veacuterification de proprieacuteteacutes exprimeacutees sur des seacutequences de pages
Dans le premier cas elles sont fournies par un robot drsquoexploration et dans le second cas par
le redimensionnement reacutepeacutetitif de la fenecirctre du navigateur sur une mecircme page
Nous deacutetaillons maintenant quelques exemples de proprieacuteteacutes Cornipickle permettant de deacutetecter
des bugs comportementaux et des bugs RWD
541 DEacuteTECTION DE BUGS COMPORTEMENTAUX DANS BEEPSTORE
Nous expliquons drsquoabord les bugs comportementaux du Beep Store deacutecrits preacuteceacutedemment et
nous montrons comment ils peuvent ecirctre captureacutes par Crawljax en eacutevaluant les assertions de
Cornipickle lors de lrsquoexploration drsquoune application
128
Connexions multiples Le premier bug est celui des connexions multiples Ce bug peut
facilement ecirctre deacutetecteacute par les expressions suivantes
We say that we are signed in when (There exists $p in $(action-band) such that (
$prsquos text matches ^Welcome))
We say that we are in the login page when (There exists $div in $(sign-in) such that (
Not ( $divrsquos display is none )))
Always (If ( we are signed in ) Then (
Not ( we are in the login page )))
Les deux deacutefinitions We say that expliquent comment on deacutefinit le fait drsquoecirctre connecteacute et
drsquoecirctre dans la page de connexion dans le Beep Store Lrsquoexpression There exists x in y such
that (z) est utiliseacutee pour affecter agrave la variable x un eacuteleacutement de lrsquoensemble y ougrave z est vrai Nous
pouvons voir que lrsquoensemble y dans le second preacutedicat est composeacute de tous les eacuteleacutements
avec lrsquoidentifiant laquo sign-in raquo et il srsquoassure que z est vrai avec au moins un drsquoentre eux La
construction x matches y quant agrave elle veacuterifie si x correspond agrave lrsquoexpression reacuteguliegravere y et
la construction x is y veacuterifie si x est eacutegal agrave y Enfin lrsquoinstruction Always (x) veacuterifie que x est
vrai dans chaque instantaneacute En un mot il ne devrait jamais arriver que la bande drsquoaction dise
laquo Welcome raquo pendant que le div avec lrsquoidentifiant laquo sign-in raquo est afficheacute
Agrave titre de comparaison la figure 55 montre comment on pourrait attraper le mecircme bug
uniquement avec Crawljax et son architecture de plugin La lisibiliteacute est beaucoup plus faible
et avec des proprieacuteteacutes plus complexes nous pouvons voir donc comment le code peut devenir
complexe et long
129
private enum Verdict TRUE FALSE INCONCLUSIVEprivate Verdict m_verdict
Overridepublic void onNewState(CrawlerContext context StateVertexnewState) if(m_verdict == VerdictINCONCLUSIVE) EmbeddedBrowser browser = contextgetBrowser()
Identification identificationActionBand =new Identification(IdentificationHowid action-band)
booleansignedIn = false
Identification identificationSignInDiv =new Identification(IdentificationHowid sign-in)
booleancurrentlyInLoginPage = false
if(browserelementExists(identificationActionBand)) WebElementactionBand = browsergetWebElement(identificationActionBand)if(Patternmatches(^Welcome actionBandgetText())) signedIn = true
if(browserelementExists(identificationSignInDiv)) WebElementsignInDiv = browsergetWebElement(identificationSignInDiv)if(signInDivisDisplayed()) currentlyInLoginPage = true
if(signedIn) if(currentlyInLoginPage) m_verdict = VerdictFALSE
output(context newState)
Figure 55 ndash Le code neacutecessaire pour attraper le bug des connexions multiples en utilisant Crawl-jax sans Cornipickle
130
Paniers multiples Le bug des paniers multiples peut ecirctre deacutetecteacute par cette proprieacuteteacute
We say that we are signed in when (There exists $p in $(action-band) such that (
$prsquos text matches ^Welcome))
We say that we create a cart when (There exists $button in $(button-create-cart)
such that ($buttonrsquos event is click
))
The next time ( we are signed in ) Then (The next time ( we create a cart ) Then (
Always (Not ( we create a cart )
)))
Les deacuteclarations temporelles The next time x Then (y) eacutevaluent agrave vrai si y eacutevalue agrave vrai
mais seulement apregraves que x le soit Donc apregraves que nous nous soyons connecteacutes et apregraves que
nous ayions cliqueacute sur le bouton laquo creacuteer un panier raquo nous ne devrions plus jamais cliquer sur
laquo creacuteer un panier raquo
Le bug de suppression drsquoun panier existant se gegravere de maniegravere similaire nous ne le deacutecrirons
pas en deacutetail ici
Il est agrave noter que lrsquoeacutevaluation drsquoun eacutetat avec ces proprieacuteteacutes Cornipickle prend entre 36 et 74
millisecondes par page avec un processeur Intel Core i5-3470 Gardez agrave lrsquoesprit que bien que
les proprieacuteteacutes soient assez simples le Beep Store est une tregraves grande application agrave seacuterialiser
car mecircme les blocs non afficheacutes doivent ecirctre inclus
131
542 DEacuteTECTION DE BUGS RWD DANS DE VRAIS SITES WEB
Nous montrons maintenant quelques exemples de proprieacuteteacutes Cornipickle pour la deacutetection
de bugs RWD Les comportements drsquoun site web sont uniques pour chaque site Pour cette
raison la deacutetection des bugs comportementaux neacutecessite des proprieacuteteacutes speacutecifiques Drsquoautre
part le Responsive Web Design est une approche geacuteneacuterale de la conception Web similaire aux
modegraveles de conception (design patterns) dans les langages traditionnels Les eacutechecs dans lrsquoim-
pleacutementation de cette conception doivent ecirctre deacutetectables avec des proprieacuteteacutes geacuteneacuterales Pour
cette raison les proprieacuteteacutes deacutecrites dans cette section ne constituent que des avertissements
une violation ne devrait pas signifier qursquoil srsquoagit drsquoun bug dans tous les cas
Preacutesence de barres de deacutefilement Lrsquoune des premiegraveres indications drsquoun site web pas res-
ponsive est la preacutesence drsquoune barre de deacutefilement horizontale Pour deacutetecter ce bug une simple
proprieacuteteacute Cornipickle peut ecirctre deacutefinie
We say that there is an horizontal scrollbar when (the pagersquos width is less than
the pagersquos scroll-width)
name No horizontal scrollbardescription There should never be an horizontal scrollbarseverity Error
Always (
Not ( there is an horizontal scrollbar ))
Dans cette proprieacuteteacute lrsquointerception drsquoune barre de deacutefilement horizontale peut ecirctre obtenue en
comparant la largeur de la fenecirctre (viewportwidth) avec la largeur de deacutefilement (scroll-width)
132
Cela ne devrait jamais arriver si elle est toujours entoureacutee avec la construction Always Not
Collision drsquoeacuteleacutements Crsquoest le bug ougrave les eacuteleacutements se chevauchent Cette proprieacuteteacute com-
mence par certaines deacutefinitions du langage pour simplifier le cœur de la proprieacuteteacute agrave la fin Elle
deacutecrit les intersections horizontales et verticales un eacuteleacutement visible deux eacuteleacutements identiques
et des chevauchements
We say that $x x-intersects $y when ((($yrsquos right - 1) is greater than $xrsquos left)And(($xrsquos right - 1) is greater than $yrsquos left)
)
We say that $x y-intersects $y when ((($yrsquos bottom - 1) is greater than $xrsquos top)And(($xrsquos bottom - 1) is greater than $yrsquos top)
)
We say that $x is visible when (Not ( $xrsquos display is none )
)
We say that $x and $y are the same when ($xrsquos cornipickleid equals $yrsquos cornipickleid
)
We say that $x and $y are not the same when (Not ($x and $y are the same)
)
We say that $x and $y overlap when ((($x is visible) And ($y is visible))And(
($x x-intersects $y)And($x y-intersects $y)
133
))
We say that $x and $y do not overlap when (Not ($x and $y overlap)
)
La premiegravere deacutefinition utilise laquo right - 1 raquo car les eacuteleacutements qui se croisent doivent se croiser drsquoau
moins 2 pixels Il surmonte un problegraveme ougrave nous recevons des dimensions et des coordonneacutees
en entiers (pixels) mais le navigateur peut travailler avec des floats dans le cas drsquoeacuteleacutements
ayant des dimensions en ratios Ces floats sont arrondis et peuvent provoquer des diffeacuterences
de 1 pixel entre ce qui est afficheacute et ce qui est seacuterialiseacute Il est vrai que nous pouvons manquer
des bugs qui sont leacutegitimement agrave 1 pixel mais il est important de ne pas punir les bonnes
pratiques
La deacutefinition drsquoun eacuteleacutement visible veacuterifie uniquement si la proprieacuteteacute display est laquo none raquo car ces
eacuteleacutements ne provoquent aucun changement de disposition En outre cette valeur est affecteacutee
consciemment par le deacuteveloppeur afin que leur position sur la page soit correcte Le troisiegraveme
deacutecrit deux eacuteleacutements qui sont identiques en utilisant la proprieacuteteacute laquo cornipickleid raquo Cette
proprieacuteteacute est une valeur unique donneacutee agrave chaque eacuteleacutement important dans la page pendant la
phase de seacuterialisation Comme il est unique il peut ecirctre utiliseacute pour identifier si deux eacuteleacutements
sont identiques
La derniegravere construction deacutefinit deux eacuteleacutements qui se chevauchent Si elles sont agrave la fois
visibles et qursquoelles se croisent verticalement et horizontalement elles sont consideacutereacutees dans
une collision
name Element Collisiondescription All items that arenrsquot
overlapping initially shouldnrsquot ever overlap
134
severity WarningAlways (
For each $x in $(body ) (For each $y in $($x gt ) (
For each $z in $($x gt ) (If ( ($y and $z are not the same) And
($y and $z do not overlap) ) Then (Next (
When $y is now $a (When $z is now $b (
$a and $b donrsquot overlap)))))))
Enfin les trois constructions For each rassemblent tous les eacuteleacutements et leurs enfants directs
Elle permet de tester des paires de fregraveres et sœurs pour leur proprieacuteteacute de recouvrement Notez
qursquoelle ne veacuterifie pas si un eacuteleacutement chevauche un laquo cousin raquo car ce cousin aurait besoin de violer
la proprieacuteteacute Protrusion (qui nrsquoest pas deacutetailleacutee dans cette thegravese) La proprieacuteteacute pourrait ecirctre faite
en testant chaque eacuteleacutement avec tous les autres eacuteleacutements mais il est coucircteux en performance
Les deux constructions When $x is now $y rassemblent la paire dans la capture drsquoeacutecran
suivante afin de la comparer agrave elle-mecircme dans la capture drsquoeacutecran preacuteceacutedente Dans lrsquoensemble
la proprieacuteteacute dit que si deux fregraveres et sœurs ne se chevauchent pas agrave un moment donneacute ces
deux fregraveres et sœurs ne devraient pas se chevaucher au moment suivant
Les autres bugs RWD (deacutepassement des eacuteleacutements etc) deacutecrits au chapitre 2 peuvent ecirctre
traiteacutes de maniegravere similaires nous ne les deacutetaillerons pas ici
Agrave titre eacutevaluatif nous avons eacutevalueacute une proprieacuteteacute en fonction du nombre drsquoeacuteleacutements Le temps
de calcul de lrsquointerpreacuteteur en fonction du nombre drsquoeacuteleacutements dans la page est montreacute dans la
figure 56 Le temps de calcul en incluant la seacuterialisation de la page par la sonde JavaScript et
lrsquointerpreacutetation de la proprieacuteteacute en fonction du nombre drsquoeacuteleacutements dans la page est preacutesenteacute
dans la figure 57 Nous pouvons constater que lrsquointerpreacuteteur srsquoexeacutecute tregraves rapidement crsquoest
135
Figure 56 ndash Temps de calcul de lrsquointerpreacuteteur en fonction du nombre drsquoeacuteleacutements dans la page
bien la seacuterialisation de la page par la sonde qui prend le plus de temps dans le processus global
136
Figure 57 ndash Temps de calcul incluant la seacuterialisation de la page par la sonde JavaScript etlrsquointerpreacutetation de la proprieacuteteacute en fonction du nombre drsquoeacuteleacutements dans la page
CHAPITRE 6
VERS UN MEILLEUR FEEDBACK POUR LrsquoUTILISATEUR
Jusqursquoici nous avons preacutesenteacute un outil automatiseacute pour la deacutetection des bugs drsquointerface
permettant drsquoeacutevaluer les expressions dans un langage deacuteclaratif de haut niveau baseacute sur la
logique temporelle lineacuteaire et de premier ordre Or les pages web sont composeacutees de centaines
drsquoeacuteleacutements avec des dizaines drsquoassertions de proprieacuteteacutes qui doivent tenir de plus les deacutefauts
de mise en page sont parfois trop subtils pour ecirctre visibles agrave lrsquoœil nu (comme les eacuteleacutements drsquoun
seul pixel) Par conseacutequent lrsquoeacutevaluation de base de ces proprieacuteteacutes renvoyant un simple verdict
vraifaux ne serait pas tregraves utile pour un concepteur Le fait de simplement dire que laquo quelque
chose ne va pas raquo apporte peu de valeur ajouteacutee lorsque quelqursquoun doit rechercher le problegraveme
dans une page aussi complexe Pour fournir une reacuteelle eacutevaluation aux praticiens un outil
drsquoanalyse de la mise en page devrait donc ecirctre capable de repeacuterer des eacuteleacutements speacutecifiques de
la page qui sont responsables de certains bugs
Agrave cette fin Cornipickle a eacuteteacute eacutequipeacute drsquoun meacutecanisme pour essayer de circonscrire des parties
drsquoune page qui expliquent la faute deacutecouverte Notre travail sur la deacutetection de bugs de mise en
page est donc devenu une forme de localisation de deacutefaut (fault localization) Nous allons dans
ce chapitre exposer deux tentatives afin de fournir agrave lrsquoutilisateur un verdict plus riche qursquoun
simple vraifaux La premiegravere conduit agrave une construction appeleacutee laquo teacutemoin raquo baseacutee sur une
138
fonction appliqueacutee reacutecursivement sur la formule qui est falsifieacutee Un teacutemoin met en eacutevidence
un ensemble drsquoeacuteleacutements dans la page qui sont lieacutes drsquoune certaine maniegravere agrave la violation drsquoune
proprieacuteteacute
Cela srsquoest reacuteveacuteleacute insuffisant dans la pratique par la suite nous reprenons le travail sur une
nouvelle base formelle fondeacutee cette fois sur le concept de laquo reacuteparation raquo Intuitivement une
reacuteparation est un ensemble minimal de transformations qui lorsqursquoelles sont appliqueacutees agrave
lrsquoobjet original reacutetablissent sa satisfiabiliteacute par rapport agrave la speacutecification Lrsquoavantage de ce
concept est qursquoil est indeacutependant de la nature de lrsquoobjet et du langage de speacutecification utiliseacute
pour deacuteclarer ses proprieacuteteacutes attendues Il pourrait donc ecirctre appliqueacute agrave une varieacuteteacute drsquoautres
sceacutenarios en plus des applications web
61 GEacuteNEacuteRATION DE CONTRE-EXEMPLE LES TEacuteMOINS
Gracircce agrave la nature des speacutecifications du langage Cornipickle baseacutees sur la logique il est possible
drsquoanalyser systeacutematiquement une assertion quand elle est eacutevalueacutee agrave faux et drsquoidentifier les
eacuteleacutements qui sont laquo responsables raquo de la fausseteacute de cette assertion
Verdicts et teacutemoins
Nous appelons teacutemoin un arbre drsquoeacuteleacutements DOM soit W sube T lrsquoensemble de tous les teacutemoins
(W pour witness) Lrsquoensemble des verdicts est deacutefini comme V BcupgtperptimesW timesW un
verdict est composeacute drsquoune valeur de veacuteriteacute et de deux teacutemoins lrsquoun correspondant agrave la valeur
de veacuteriteacute gt lrsquoautre agrave la valeur de veacuteriteacute perp
139
La conjonction de verdicts est une fonction otimes V timesNtimesV rarrV deacutefinie comme suit
otimes(〈bwgtwperp〉ν 〈bprimewprimegtwprimeperp〉) =
〈perpwgtwperpcup(ν wprimeperp)〉 si bprime =perp
〈bandbprimewgtcup(ν wprimegt)wperp〉 si b 6=perp
〈bwgtwperp〉 sinon
Nous interpreacutetons bandbprime comme la conjonction classique agrave trois valeurs La notation (ν w)
deacutesigne la creacuteation drsquoun nouveau teacutemoin (witness) dont la racine est le nœud DOM ν avec le
teacutemoin w comme son enfant La notation wcupwprime deacutesigne lrsquoaddition de wprime aux enfants du teacutemoin
w Nous allons abuser de la notation et accepter que le deuxiegraveme argument de otimes pourrait ecirctre
un eacuteleacutement laquo vide raquo de N nous deacutesignerons comme ν 0 Cet eacuteleacutement est neacutecessaire de sorte que
chaque opeacuteration sur les verdicts peut surclasser un teacutemoin existant avec un nouveau nœud
racine mecircme srsquoil nrsquoy a rien agrave laquo teacutemoigner raquo
La conjonction de verdicts met agrave jour le contenu drsquoun verdict existant v et donne un autre
verdict vprime et un eacuteleacutement DOM ν Si vprime est faux il porte un teacutemoignage de cette fausseteacute agrave
savoir wprimeperp ce teacutemoin est attacheacute comme un enfant drsquoun nouvel arbre dont la racine est ν et
cet arbre est ajouteacute au teacutemoignage de la fausseteacute de v wperp De plus la valeur de veacuteriteacute de v
est deacutefinie comme eacutetant perp Autrement dit lrsquoexplication de vprime pour ecirctre fausse est ajouteacutee agrave
lrsquoexplication de v pour ecirctre fausse Dans le cas contraire si ni le premier eacuteleacutement de v ni celui
de vprime est faux alors le teacutemoin vprime associeacute agrave gt est ajouteacute au teacutemoin gt de v et sa valeur de veacuteriteacute
est mise agrave jour en conseacutequence Dans tous les autres cas v est laisseacute inchangeacute
140
ω(tνrsquos a equals ν primersquos aprime) =
〈gtν ν prime 0〉 if ν(a) = ν prime(aprime)〈gt 0ν ν prime〉 otherwise
ω(tνrsquos a equals v) =
〈gtν 0〉 if ν(a) = v〈perp 0ν〉 otherwise
ω(tNotϕ) = (ω(tϕ)ν 0)ω(tϕ And ψ) = otimes(otimes(〈gt 0 0〉ν 0ω(tϕ))ν 0ω(tψ))
ω(tϕ Or ψ) = oplus(oplus(〈perp 0 0〉ν 0ω(tϕ))ν 0ω(tψ))ω(tIf ϕ Then ψ) = oplus(oplus(〈perp 0 0〉ν 0(ω(tϕ)ν 0))ν 0ω(tψ))
ω(tThere exists ξ in$(c) such that ϕ)
=oplus〈perp 0 0〉
νisinχ(t0c)ω(tϕ[ξν ])
ω(tFor each ξ in $(c) ϕ) =otimes〈gt 0 0〉
νisinχ(t0c)ω(tϕ[ξν ])
Tableau 61 ndash La deacutefinition reacutecursive de la fonction de calcul du verdict ω
La disjonction de verdict oplus V timesNtimesV rarrV est deacutefinie comme le dual de la conjonction
oplus(〈bwgtwperp〉ν 〈bprimewprimegtwprimeperp〉) =
〈gtwgtcup(ν wprimegt)wperp〉 si bprime =gt
〈borbprimewgtwperpcup(ν wprimeperp)〉 si b 6=gt
〈bwgtwperp〉 sinon
Enfin la neacutegation du verdict est la fonction V timesNrarrV deacutefinie comme suit
(〈bwgtwperp〉ν) =
〈notbwperpcup(ν wgt)wgtcup(ν wperp)〉 si b isin gtperp
〈bwgtwperp〉 sinon
Intuitivement inverse les teacutemoins associeacutes agrave gt et perp et les surmonte drsquoune nouvelle racine
avec le nœud DOM ν Cela nrsquoa aucun effet lorsque le verdict est laquo raquo
En utilisant ces opeacuterateurs la seacutemantique formelle de Cornipickle deacutecrite dans le tableau 44
peut alors ecirctre eacutetendue agrave une fonction ω T lowasttimesΦrarrV qui sur une expression ϕ isinΦ et une
trace t isin T lowast calcule un verdict
141
La notationotimes〈gt 0 0〉
νisinχ(t0c)ω(tϕ[ξν ]) est un raccourci pour
otimes(〈gt 0 0〉ν 0otimes(ω(tϕ[ξν0])ν0otimes(ω(tϕ[ξν1])ν1 middot middot middot)))
En drsquoautres termes elle deacutesigne la conjonction reacutepeacuteteacutee du verdict de ω(tϕ[ξν ]) pour chaque
ν isin χ(t0c) agrave partir du verdict vide 〈gt 0 0〉 Une notation similaire est utiliseacutee pour oplus
Cette deacutefinition est difficile agrave lire en termes de notation cependant le lecteur peut reacutealiser en
lrsquoexaminant que la deacutefinition de chaque cas correspond agrave lrsquointuition Par exemple construire
le verdict de laquo ϕ And ψ raquo revient agrave deacutemarrer du verdict laquo vide raquo 〈gt 0 0〉 et lui joindre
successivement le verdict de ϕ et ψ
De mecircme construire le verdict pour une expression quantifieacutee existentiellement ϕ(x) est
obtenu en calculant successivement la disjonction du verdict de ϕ(k) pour chaque k du verdict
initial 〈perp 0 0〉 Ceci est compatible avec le fait que existx isin S ϕ(x) est eacutequivalent agraveor
kisinS ϕ(k)
Enfin un raisonnement similaire srsquoapplique aux opeacuterateurs temporels lineacuteaires Par exemple
t |= Alwaysϕ peut ecirctre deacutefini comme t |= ϕ et t1 |= Alwaysϕ drsquoougrave les verdicts ω(tϕ) et
ω(t1Always ϕ) sont combineacutes en utilisant la conjonction verdict
A titre drsquoillustration de cette proceacutedure nous montrerons comment un verdict peut ecirctre
calculeacute pour lrsquoexpression suivante en consideacuterant lrsquoarbre de la figure 44 For each $x in
$(p) For each $y in $(p) $xrsquos width equals $yrsquos width Le document contient
trois paragraphes que nous appellerons p1 p2 et p3 le premier et le troisiegraveme ont une largeur
(width) de 400 tandis que le second a une largeur de 200 La deacuteclaration inteacuterieure $xrsquos
width equals $yrsquos width sera donc eacutevalueacutee neuf fois une fois pour chaque combinaison
de nœuds DOM pour $x et $y
Selon la deacutefinition de la fonction ω dans le tableau 61 chaque eacutevaluation produira un verdict
142
de la forme 〈gtpi p j 0〉 quand pi et p j ont la mecircme largeur et 〈perp 0pi p j〉 quand ils
sont deacutefinis autrement Dans le premier cas la deacuteclaration srsquoeacutevalue agrave gt et les nœuds DOM pi
et p j sont ajouteacutes comme gt-teacutemoins de ce fait Lrsquoinverse srsquoapplique lorsque lrsquoinstruction est
fausse
Ces verdicts sont ensuite reacuteunis dans le quantificateur universel le plus profond Un verdict
vide 〈gt 0 0〉 est drsquoabord creacuteeacute et tous les verdicts pour lrsquoexpression inteacuterieure sont ensuite
combineacutes en utilisant la conjonction verdict Par exemple quand $x se reacutefegravere agrave p1 trois
verdicts sont joints 〈gtp1 p1 0〉 〈perp 0p1 p2〉 et 〈gtp1 p3 0〉 Selon la deacutefinition
de conjonction de verdict le verdict reacutesultant sera
〈perp(ν 0〈gtp1 p1 0〉)(ν 0〈gtp1 p3 0〉)(ν 0〈perp 0p1 p2〉)〉
Les deux verdicts internes srsquoeacutevaluant agrave gt sont attacheacutes au teacutemoin associeacute agrave gt et le verdict
eacutevaluant perp est attacheacute au teacutemoin associeacute agrave perp Trois de ces verdicts seront produits par le
quantificateur le plus interne un pour chaque valeur de $x qui seront ensuite combineacutes en
utilisant agrave nouveau la conjonction par le quantificateur universel le plus externe ce qui donnera
le verdict final
〈perp 0
(ν 0〈perp(ν 0〈gtp1 p1 0〉)(ν 0〈gtp1 p3 0〉)(ν 0〈perp 0p1 p2〉)〉)
(ν 0〈perp(ν 0〈gtp2 p2 0〉)(ν 0〈perp 0p1 p2〉)(ν 0〈perp 0p2 p3〉)〉)
(ν 0〈perp(ν 0〈gtp1 p3 0〉)(ν 0〈gtp3 p3 0〉)(ν 0〈perp 0p2 p3〉)〉) 〉
Lrsquoimpleacutementation actuelle de Cornipickle peut calculer ces verdicts et les renvoyer agrave la sonde
JavaScript Les verdicts sont envoyeacutes agrave la sonde sous forme drsquoune liste Cornipickle ID Chaque
143
A list item
Another list item
A third list item
The last list item
(a)
A list item
Another list item
A third list item
The last list item
(b)
Figure 61 ndash Exemple drsquoune erreur de mise en page Web simple (a) lrsquoun des eacuteleacutements de la listeest incorrectement aligneacute avec les autres (b) un teacutemoin (witness) produit par lrsquooutil Cornipickle
ID est unique correspondant un eacuteleacutement speacutecifique dans la page ce qui permet drsquoentourer
lrsquoeacuteleacutement en question dans la fenecirctre du navigateur
62 LOCALISATION DES ERREURS DANS LES APPLICATIONS WEB
Agrave notre connaissance le principe de calcul du verdict deacutecrit preacuteceacutedemment fait de Cornipickle
un des tout premiers systegravemes agrave expliquer graphiquement en quoi une proprieacuteteacute est violeacutee
Malheureusement nous avons deacutecouvert que ce principe laisse tout de mecircme un peu agrave deacutesirer
Par exemple consideacuterons la proprieacuteteacute voulant que tous les eacuteleacutements drsquoune liste avec lrsquoID
laquo menu raquo doivent ecirctre aligneacutes verticalement
For each $x in $(menu li) (For each $y in $(menu li) (
$xrsquos left equals $yrsquos left))
Pour cet exemple particulier la figure 61a montre une page simple pour laquelle la proprieacuteteacute
serait violeacutee Nous pouvons voir le reacutesultat de lrsquoapplication de ω deacutefinie dans la section
preacuteceacutedente sur lrsquoarbre DOM de la figure 61a La fonction retourne un arbre contenant des
pointeurs sur deux des eacuteleacutements de la page surligneacutes en rouge dans la figure 61b (En fait la
fonction renvoie plusieurs ensembles chacun contenant le second eacuteleacutement de liste et lrsquoun des
eacuteleacutements restants)
144
Intuitivement un tel reacutesultat est logique pour un concepteur de sites web en effet ces deux
eacuteleacutements doivent ecirctre aligneacutes alors qursquoils ne le sont pas Cependant cette information ne peut
ecirctre deacuteduite que par la connaissance de la proprieacuteteacute violeacutee le teacutemoin pointe simplement ces
deux eacuteleacutements sans fournir drsquoinformations sur laquo ce qui ne va pas raquo agrave leur sujet Alors que la
geacuteneacuteration de contre-exemple reacutecursif preacutesente dans la version actuelle de Cornipickle fournit
plus drsquoinformations qursquoun simple verdict vraifaux dans de nombreux cas elle peut donc
srsquoaveacuterer trop vague pour ecirctre utile
Nous introduisons la notion de reacuteparation qui peut ecirctre deacutefinie intuitivement comme un
ensemble de modifications neacutecessaires agrave un objet pour le rendre conforme agrave une proprieacuteteacute
La notion de reacuteparation peut ecirctre vue comme une localisation de deacutefaut exprimeacutee en sens
inverse indiquer comment un objet doit ecirctre reacutepareacute indirectement pointe vers des aspects de
sa structure qui sont responsables du fait que la proprieacuteteacute nrsquoest pas actuellement remplie Nous
verrons que contrairement au concept de teacutemoin qui est une technique lineacuteaire en fonction
de la taille de la formule et fortement associeacute au langage de speacutecification et aux objets de
domaine utiliseacutes les reacuteparations sont deacutefinies agrave un niveau drsquoabstraction qui ne deacutepend pas des
proprieacuteteacutes de lrsquoun ou de lrsquoautre
621 DEacuteFINITIONS
Soit Σ un ensemble de structures et TΣ un ensemble drsquoendomorphismes sur Σ crsquoest-agrave-dire
que chaque τ isin TΣ est une fonction τ Σrarr Σ Soit 2TΣ lrsquoensemble de tous les sous-ensembles
de TΣ Un ensemble drsquoendomorphismes T = τ1 τn isin 2TΣ est dit ecirctre bien deacutefini si
deux eacuteleacutements τi τ j sont tels que τi τ j equiv τ j τ j Un tel ensemble bien deacutefini sera appeleacute
transformation Lorsque le contexte est clair nous allons abuser de la notation et consideacuterer T
comme lrsquoendomorphisme (deacutefini de faccedilon unique) τ1 middot middot middot τn Lrsquoinclusion drsquoensembles induit
145
un ordre partiel sur les transformations
Soit Φ un ensemble drsquoexpressions de langage eacutequipeacutees drsquoune relation de satisfaction |= Σtimes
Φrarr gtperp Pour une expression ϕ isinΦ et une structure σ isin Σ nous eacutecrirons σ |= ϕ si et
seulement si |= (σ ϕ) =gt Dans un tel cas nous dirons que σ laquo veacuterifie raquo ϕ ou alternativement
que σ est un modegravele de ϕ
Soit σ isin Σ une structure telle que σ 6|= ϕ pour une expression ϕ isin Φ Une reacuteparation est
deacutefinie comme une transformation T isin 2TΣ telle que T (σ) |= ϕ Une reacuteparation est dite prime
si aucun sous-ensemble T prime sube T est tel que T prime est aussi une reacuteparation Intuitivement une
reacuteparation principale est un ensemble de laquo changements raquo sur une structure σ qui satisfait ϕ
de sorte qursquoaucune modification laquo plus petite raquo ne restaure aussi la satisfiabiliteacute Comme sube
est une commande partielle il peut y avoir plusieurs reacuteparations principales mutuellement
incomparables
La figure 62 illustre ce concept Lrsquoimage repreacutesente toutes les transformations qui peuvent
ecirctre appliqueacutees agrave une structure dans le cas simple ougrave seulement quatre morphismes existent
La transformation vide est en bas et chaque flegraveche dans le graphe repreacutesente lrsquoajout drsquoun
morphisme suppleacutementaire agrave une transformation existante Les nœuds rouges indiquent les
transformations qui ne sont pas reacutepareacutees tandis que les nœuds jaunes et verts indiquent les
reacuteparations Parmi ceux-ci les reacuteparations principales sont coloreacutees en vert on peut voir que
tous les anteacuteceacutedents des nœuds verts sont rouges Lrsquoinverse cependant nrsquoest pas vrai tous les
descendants drsquoune reacuteparation ne sont pas eux-mecircmes reacutepareacutes
146
Figure 62 ndash Illustration du concept de reacuteparation principale
622 EXEMPLES
Cette deacutefinition simple peut ensuite ecirctre appliqueacutee agrave une varieacuteteacute de langages de speacutecification
comme nous allons lrsquoillustrer agrave travers les exemples qui suivent
Logique propositionnelle
Comme premier exemple soit Φ lrsquoensemble des formules de logiques propositionnelles
avec les variables X = x1 xn pour certains n ge 1 Soit Σ lrsquoensemble des fonctions
X rarrgtperp que nous appellerons des eacutevaluations La relation de satisfaction |= est deacutefinie
comme σ |= ϕ =gt si et seulement si ϕ vaut vrai lorsque ses variables sont remplaceacutees par la
valeur de veacuteriteacute correspondante speacutecifieacutee par σ et sinon par perp
Soit b isin gtperp et i isin [1n] Nous noterons τxi 7rarrb lrsquoendomorphisme deacutefini comme
(τxi 7rarrb(σ))(x) =
b si x = xi
σ(x) sinon
Ce morphisme met xi agrave la place de b et laisse inchangeacute le reste de lrsquoeacutevaluation initiale
147
Lrsquoensemble des endomorphismes TΣ est alors deacutefini comme
TΣ =⋃
iisin[1n]
⋃bisingtperp
τxi 7rarrb
Deux transformations τx 7rarrb τ primey7rarrbprime commutent si x 6= y Ainsi un ensemble de transformations
T isin 2TΣ est bien deacutefini si et seulement si chaque endomorphisme qursquoil contient change la
valeur drsquoune variable diffeacuterente
Soit X = abc soit σ lrsquoeacutevaluation a 7rarrgtb 7rarrperpc 7rarrperp et ϕ la formule propositionnelle
aand b On peut facilement observer que σ 6|= ϕ Une reacuteparation est la transformation T =
τb 7rarrgt qui est T (σ) |= ϕ Cela correspond agrave lrsquointuition que lrsquoexplication de la fausseteacute
de ϕ est que b est faux alors qursquoil devrait ecirctre vrai Notons que bien que T prime = τb7rarrgtτc7rarrgt
rendrait aussi ϕ vrai ce nrsquoest pas une reacuteparation primaire puisque T sube T prime Cela correspond agrave
lrsquointuition que la valeur de veacuteriteacute de c est pas pertinente agrave la fausseteacute de ϕ
Soit σ lrsquoeacutevaluation a 7rarr gtb 7rarr perpc 7rarr perp et ϕ la formule propositionnelle ararr b Cette
fois deux reacuteparations primaires existent T = τb7rarrgt et T prime = τa7rarrperp Il est possible de
veacuterifier que les deux fixent la valeur de veacuteriteacute de lrsquoeacutevaluation initiale Informellement la
premiegravere transformation repreacutesente la fausseteacute de ϕ sur le fait que a est vrai tandis que lrsquoautre
lrsquoexplique plutocirct par le fait que b est faux mdash ce qui correspond bien agrave lrsquointuition Puisque
les deux reacuteparations sont incomparables aucune de ces explications nrsquoest laquo preacutefeacutereacutee raquo Nous
reviendrons sur ce concept plus tard
Logique du premier ordre
Le concept de reacuteparation peut facilement ecirctre leveacute agrave lrsquoensemble Φ de la formule logique de
premier ordre sur les domaines finis Soit A un ensemble drsquoeacuteleacutements un preacutedicat n-aire est
148
deacutefini comme une fonction p Anrarrgtperp Soit Pi lrsquoensemble des preacutedicats de lrsquoariteacute i Une
signature est un ensemble de preacutedicats P = p1 pm respectivement drsquoariteacute a1 am
Pour une signature donneacutee lrsquoensemble des eacuteleacutements de domaine est deacutefini comme
Σ = Pa1timesmiddotmiddot middottimesPam
La relation de satisfaction |= est deacutefinie comme |= (dϕ) =gt si ϕ est eacutevalueacute agrave vrai lors de
lrsquoeacutevaluation de preacutedicats tels que deacutefinis dans σ et perp deacutefinie autrement
Dans ce contexte un endomorphisme repreacutesentera le changement de la valeur de veacuteriteacute pour
une entreacutee drsquoun preacutedicat Soit pk un preacutedicat de lrsquoariteacute i (a1 ak)isinAn un k-tuple drsquoeacuteleacutements
de A et b isin gtperp La transformation τpk(a1ak)7rarrb est deacutefini comme le preacutedicat pprimek tel que
pprimek(x1 xk) =
b si x1 = a1 xn = an
pk(x1 xk) autrement
Lrsquoensemble des transformations pour pk noteacute Tpk est deacutefinie comme suit
Tpk ⋃
(a1ak)isinAn
⋃bisingtperp
τpk(a1ak)b
Lrsquoensemble global des transformations est alors
TΣ ⋃pisinP
Tp
De maniegravere similaire agrave la logique du premier ordre on peut veacuterifier que deux endomorphismes
149
1
2
3
4
5
(a) Graphe original
1
2
3
4
5
(b) Apregraves lrsquoapplication de T1
1
2
3
4
5
(c) Apregraves lrsquoapplication de T2
1
2
3
4
5
(d) Apregraves lrsquoapplication de T3
1
2
3
4
5
(e) Apregraves lrsquoapplication de T4
Figure 63 ndash Quelques reacuteparations possibles pour un coloriage de graphe deacutefectueux
commutent srsquoils opegraverent sur un preacutedicat diffeacuterent ou changent la valeur drsquoune entreacutee diffeacuterente
sur le mecircme preacutedicat
Soit A = 012 ϕ la formule du premier ordre forallx existy x 6= yand p(xy) et le preacutedicat binaire
p deacutefini comme (00)(01)(11) Il y a deux reacuteparations primaires pour restaurer la veacuteriteacute
de ϕ T1 = τp(20)7rarrgt T2 = τp(21)7rarrgt Cela correspond agrave lrsquointuition que la valeur 2
manque au moins un laquo partenaire raquo dans p et que 0 ou 1 pourraient chacun correspondre agrave ce
but
Soit A = [15] un ensemble de sommets de graphe p un preacutedicat binaire codant la relation
drsquoadjacence des arecirctes de graphe et q1q2q3 un ensemble de preacutedicats unaires tel que qi(x)
contient si et seulement si le sommet x ayant la couleur i Supposons que les preacutedicats p et q
soient deacutefinis en fonction de la repreacutesentation graphique montreacutee dans la figure 63a
150
Une solution au problegraveme de coloriage de graphe peut ecirctre repreacutesenteacutee par trois expressions
de premier ordre
ϕ1 forallx (q1(x)andnotq2(x)andnotq3(x))or (notq1(x)andq2(x)andnotq3(x))or (notq1(x)andnotq2(x)andq3(x))
ϕ2 forallx forally p(xy)rarr p(yx)
ϕ3 forallx forally p(xy)rarr ((q1(x)rarrnotq1(y))and (q2(x)rarrnotq2(y))and (q3(x)rarrnotq3(y)))
La premiegravere stipule que chaque sommet a une couleur exacte la seconde indique que la
relation drsquoadjacence est symeacutetrique et lrsquoexpression finale stipule qursquoaucun sommet adjacent ne
peut avoir la mecircme couleur On peut voir que le graphe original ne satisfait pas ϕ1andϕ2andϕ3
Il existe plusieurs reacuteparations principales dont certaines sont indiqueacutees ici
T1 = τq1(5)7rarrperpτq2(5)7rarrgt
T2 = τp(45)7rarrperpτp(54)7rarrperp
T3 = τq1(1)7rarrperpτq3(1)7rarrgtτq1(4)7rarrperpτq3(4)7rarrgt
T4 = τp(24)7rarrperpτp(42)7rarrperpτq1(4)7rarrperpτq3(4)7rarrgt
La reacuteparation T1 corrige le graphe en changeant la couleur du sommet 5 en rouge Notons que
cela neacutecessite non seulement de mettre q2(5) agrave gt mais aussi q1(5) agrave perp sinon la structure
reacutesultante violerait ϕ1 Une autre reacuteparation (non repreacutesenteacutee) change le sommet 5 en vert La
reacuteparation T3 modifie plutocirct la relation drsquoadjacence et coupe le sommet 5 du reste du graphe
de sorte que le conflit de couleur soit reacutesolu
151
Ceux-ci correspondent aux moyens laquo intuitifs raquo de fixer le coloriage du graphe Cependant
il existe plusieurs autres reacuteparations primaires qui reacutepondent agrave la deacutefinition Par exemple la
transformation T4 eacutechange les couleurs des sommets 1 2 et 4 Notons qursquoil srsquoagit bien drsquoune
reacuteparation primaire en ce sens qursquoaucun sous-ensemble de ces endomorphismes ne restaure la
satisfiabiliteacute de la formule drsquoorigine De la mecircme faccedilon T5 coupe le bord entre les sommets
2 et 4 et passe au vert Au total il y a 17 reacuteparations primaires distinctes dans cet exemple
particulier
Encore une fois il convient de noter que sans contexte suppleacutementaire aucune de ces reacutepara-
tions nrsquoest une explication possible de la fausseteacute de ϕ1andϕ2andϕ3 sur le graphe original
Logique de premier ordre eacutetendue
Lrsquoexemple preacuteceacutedent montre la neacutecessiteacute drsquoeacutetendre la seacutemantique de la logique du premier
ordre agrave des fonctions arbitraires au lieu de preacutedicats strictement booleacuteens Cela peut facilement
ecirctre fait comme suit Soit A1 An et B des ensembles finis Nous deacutesignerons par FA1AnrarrB
lrsquoensemble de toutes les fonctions (prodi Ai)rarr B Une signature est un tuple de la forme
〈(A11 A1n1)rarr B1 (Am1 Amnm)rarr Bm〉
tel que fi est une fonction de lrsquoariteacute ni avec le domaine A11 A1ni et image Bi La logique
des preacutedicats est le cas particulier ougrave B1 = middot middot middot= Bnm = gtperp dans ce cas lrsquoimage peut ecirctre
omise et ougrave Ai j sont tous les mecircmes de sorte que seule lrsquoariteacute doit ecirctre connue Si f est une
fonction Ararr B et x deacutesigne un eacuteleacutement de A nous eacutecrirons x f pour deacutesigner f (x) permettant
ainsi une certaine forme de notation laquo objet raquo pour les fonctions
Dans ce contexte les quantificateurs de premier ordre doivent preacuteciser sur quel Ai j ils srsquoap-
152
pliquent de sorte que les expressions deviennent de la forme forallx isin Ai j ϕ et exist isin Ai j ϕ
Les termes de base peuvent maintenant comparer les valeurs de deux termes de fonction en
utilisant nrsquoimporte quel opeacuterateur binaire approprieacute
Les endomorphismes sont toujours deacutefinis de la mecircme maniegravere que pour la logique classique
du premier ordre agrave condition qursquoils se reacutefegraverent aux valeurs approprieacutees dans le domaine et
lrsquoimage de la fonction soumise au changement
Notons que ce formalisme eacutetendu nrsquoajoute aucune expressiviteacute agrave la logique du premier ordre si
tous les ensembles sont maintenus finis Il doit cependant simplifier lrsquoexpression de nombreuses
proprieacuteteacutes
Avec ce formalisme modifieacute nous sommes precircts agrave envisager des reacuteparations dans les proprieacuteteacutes
de mise en page Web Soit E un ensemble drsquoeacuteleacutements de page P un ensemble de valeurs
de pixels et C un ensemble de couleurs CSS Sur ces trois ensembles nous deacutefinissons les
fonctions Erarr P appeleacutees left right top et bottom correspondants respectivement aux
coordonneacutees x et y des coins supeacuterieur gauche(top-left) et infeacuterieur droit (bottom-right)
drsquoun eacuteleacutement De plus nous deacutefinissons un ensemble S de seacutelecteurs CSS lrsquoeacutevaluation drsquoun
seacutelecteur CSS sur un document peut ecirctre formaliseacutee comme une fonction $ Srarr 2E qui pour
une expression de filtre donneacutee retourne le sous-ensemble de E correspondant au seacutelecteur
Les endomorphismes peuvent ecirctre deacutefinis pour chacune de ces fonctions et doivent ecirctre
eacutecrits en utilisant la notation introduite preacuteceacutedemment Par exemple τwidth(e)7rarrk correspond agrave
lrsquoendomorphisme deacutefinissant la valeur de la fonction width (largeur) pour lrsquoeacuteleacutement e isin E
agrave k et laissant tout le reste tel qursquoil est
On peut alors exprimer la proprieacuteteacute que tous les eacuteleacutements dans une liste avec lrsquoID laquo menu raquo
153
A list item
Another list item
A third list item
The last list item
[|
(a)
A list item
Another list item
A third list item
The last list item
[ |
[ |[ |
(b)
A list item
Another list item
A third list item
The last list item
[[|
|
[|
[|
(c)
Figure 64 ndash Trois reacuteparations pour lrsquoexemple web
devraient ecirctre aligneacutes agrave gauche comme lrsquoexpression de premier ordre suivante
forallx isin $(menu li) forally isin $(menu li) xleft= yleft
Notons que cette expression correspond directement agrave la traduction du premier ordre de
lrsquoexpression de Cornipickle montreacutee dans la section 62
Trouver les reacuteparations principales pour cette expression et le fragment de page montreacute dans la
figure 61a produit un certain nombre de solutions dont trois sont montreacutees dans la figure 64
Les deux premiegraveres sont assez intuitifs La figure 64a corrige la page en deacuteplaccedilant lrsquoeacuteleacutement
deacutesaligneacute de la liste avec les autres alors que la Figure 64b fait le contraire en alignant les
trois eacuteleacutements de liste les plus agrave gauche avec le second La figure 64c donne un exemple de
lrsquoune des nombreuses solutions restantes dans ce cas tous les eacuteleacutements de liste sont deacuteplaceacutes
vers une nouvelle position commune x qui srsquoavegravere ecirctre une coordonneacutee qursquoaucun eacuteleacutement
nrsquoavait dans la page drsquoorigine
Ce dernier exemple fournit une illustration graphique de la diffeacuterence entre le concept original
de teacutemoin et celui de reacuteparation Alors qursquoun teacutemoin dans ce cas met en eacutevidence une paire
choisie au hasard drsquoeacuteleacutements mal aligneacutes (comme montreacute dans la figure 61b)) une reacuteparation
choisit des eacuteleacutements speacutecifiques et en plus deacutecrit ce qui doit ecirctre fait avec eux afin de reacuteparer
la violation de la proprieacuteteacute Ceci est sans doute plus reacuteveacutelateur pour un utilisateur et constitue
154
agrave notre avis lrsquoun des principaux avantages de cette technique
63 CALCUL DE LA REacutePARATION
Le concept de base de reacuteparation preacutesenteacute dans la section preacuteceacutedente se precircte agrave quelques points
de discussion En particulier le nombre de reacuteparations principales possibles est potentiellement
eacuteleveacute et la tacircche de geacuteneacuterer ces reacuteparations peut donc srsquoaveacuterer tregraves coucircteuse
631 ALGORITHME DE BASE ET COMPLEXITEacute
Lrsquoalgorithme montreacute dans 1 est un algorithme pour iteacuterer toutes les reacuteparations possibles drsquoune
structure Il eacutenumegravere simplement toutes les transformations possibles T isin 2TΣ Il veacuterifie
drsquoabord si T est bien deacutefini (crsquoest-agrave-dire que toute paire drsquoendomorphismes commute) et si
une reacuteparation geacuteneacutereacutee preacuteceacutedemment (stockeacutee dans lrsquoensemble TS) est un sous-ensemble de
lrsquoactuelle Il veacuterifie enfin si lrsquoapplication de cette transformation corrige la structure drsquoorigine
Il passe agrave la prochaine transformation candidate si lrsquoune de ces trois situations se produit
Sinon il ajoute cette transformation agrave son ensemble et le renvoie comme son prochain eacuteleacutement
Theorem 1 Lrsquoalgorithme 1 est coheacuterent et complet
Soit T une sortie de transformation par lrsquoalgorithme Par construction T est une reacuteparation
puisqursquoelle est bien deacutefinie et elle corrige la valeur de veacuteriteacute de σ dans ϕ De plus au
moment ougrave T est sorti aucun des eacuteleacutements de TS nrsquoest un sous-ensemble de T Puisque TS
contient toutes les reacuteparations de cardinaliteacute infeacuterieure agrave T et que par construction toutes les
transformations de cardinaliteacute similaires ne peuvent pas ecirctre des sous-ensembles il srsquoensuit
que T nrsquoest incluse par aucune reacuteparation existante et est donc principale Cela prouve la
155
Algorithm 1 Algorithme geacuteneacuterique pour lrsquoiteacuteration des reacuteparations primaires
procedure COMPUTEREPAIRS(ϕσ 2TΣ)TS = 0for all T isin 2TΣ do Eacutenumeacutereacutes en cardinaliteacute croissante
if notWELLDEFINED(T ) thenskip
end ifif SUBSUMED(TTS) then
skipend ifif T (σ prime) 6|= ϕ then
skipend ifTSlarr TScupTyield T
end forend procedure
coheacuterence de lrsquoalgorithme
Le fait que toutes ces reacuteparations majeures soient finalement eacutenumeacutereacutees est garanti par le
fait que tous les sous-ensembles de TΣ sont geacuteneacutereacutes agrave un moment donneacute ce qui prouve la
compleacutetude
Cet algorithme a eacuteteacute impleacutementeacute en Java et est disponible publiquement 1 En raison de sa
simpliciteacute et de sa geacuteneacutericiteacute lrsquoimpleacutementation des expressions des structures et des iteacuterations
de reacuteparation ne repreacutesente que 325 lignes de code Lrsquoeacutenumeacuteration des reacuteparations est exposeacutee
agrave lrsquoutilisateur sous la forme drsquoune classe classique Java Iterator qui peut ecirctre utiliseacutee par
les meacutethodes traditionnelles hasNext() et next() pour passer agrave travers lrsquoensemble complet
de reacuteparations principales dans lrsquoordre croissant de cardinaliteacute Les classes speacutecifiques au
domaine deacutefinissants les constructions logiques propositionnelles et de premier ordre sont
constitueacutees drsquoenviron 500 lignes de code suppleacutementaires Il est facile de voir que le temps
1 httpsgithubcomliflabfault-finder
156
drsquoexeacutecution de cet algorithme est exponentiel en fonction de la taille de TΣ qui peut elle-mecircme
ecirctre exponentielle dans un autre facteur (deacutependant du problegraveme modeacuteliseacute) Dans la logique
du premier ordre (telle qursquoutiliseacutee par un fragment de Cornipickle) si a1 an est lrsquoariteacute
respective de chaque preacutedicat dans la signature le nombre drsquoendomorphismes est sumi 2|A|ai
pour un domaine donneacute A
Malgreacute cela il est possible de montrer que cet algorithme est limiteacute par une borne infeacuterieure
theacuteorique Un ensemble drsquoendomorphismes TΣ est dit complet si pour tout σ σ prime isin Σ il existe
une transformation bien deacutefinie T sube TΣ tel que T (σ) = σ prime
Theorem 2 Eacutetant donneacute un ensemble de structures Σ un ensemble drsquoexpressions de langage
Φ et un ensemble complet de transformations TΣ le problegraveme du calcul des reacuteparations
principales est aussi difficile que le problegraveme de satisfiabiliteacute pour Φ
Soit ϕ isinΦ une expression du langage Si ϕ est satisfaisable alors il existe une structure σ isin Σ
telle que σ |= ϕ Prenons une structure arbitraire σ prime isin Σ Puisque TΣ est complet il existe
au moins une transformation T sube TΣ telle que T (σ prime) = σ Prenons le plus petit ensemble
de ce genre par deacutefinition il srsquoagit drsquoune reacuteparation principale et sera finalement eacutenumeacutereacutee
par lrsquoalgorithme 1 Puisque lrsquoalgorithme est complet au contraire aucune reacuteparation ne sera
trouveacutee si ϕ nrsquoest pas satisfaisable
632 REacuteDUCTION DU NOMBRE DE SOLUTIONS CANDIDATES
Ces reacutesultats de complexiteacute de base justifient une discussion sur la reacuteduction du nombre de
reacuteparations potentielles qui doivent ecirctre exploreacutees
157
Suppression des endomorphismes
Le nombre de transformations potentielles peut drsquoabord ecirctre reacuteduit en supprimant les endomor-
phismes dont on sait qursquoils sont impossibles en fonction du contexte Par exemple supposons
que les symboles propositionnels a et b dans lrsquoexemple 622 correspondent respectivement
aux assertions laquo le client paie pour un objet raquo et laquo le client reccediloit lrsquoarticle raquo On pourrait
supposer qursquoune eacutevaluation ougrave a est vraie ne peut pas ecirctre modifieacutee en la rendant fausse cela
correspondrait au fait qursquoune action effectueacutee par un acteur ne peut ecirctre annuleacutee Dans un tel
contexte seuls les endomorphismes reacuteglant les fausses variables agrave vrai seraient consideacutereacutes
Dans le cas des graphes comme dans lrsquoexemple 622 on pourrait imposer des restrictions
sur les changements qui lui sont autoriseacutes par exemple on pourrait dire que les arecirctes
existantes doivent rester inchangeacutees ou que seuls des sommets speacutecifiques peuvent ecirctre
colorieacutes diffeacuteremment Ceci encore une fois a pour effet de preacutefeacuterer certaines transformations
aux autres et reacuteduit globalement le nombre de reacuteparations disponibles
Transformations en groupes
La granulariteacute des endomorphismes disponibles peut eacutegalement ecirctre modifieacutee Dans le cas de
lrsquoexemple de coloriage de graphe il est eacutevident qursquoaucune reacuteparation ne consistera jamais
en un seul endomorphisme τqi(x)7rarrgt La raison est que lrsquoexpression ϕ1 requiert que chaque
sommet ait exactement une couleur assigner qi agrave gt pour un sommet implique que le q j
restant pour j 6= i soit mis agrave perp On peut donc deacutefinir un nouvel ensemble de transformations
158
approprieacutees au contexte repreacutesentant les changements de couleur
TC =⋃xisinA
⋃iisin[13]
j 6=ik 6= j 6=i
τqi(x)7rarrgtτq j(x)7rarrperpτqk(x)7rarrperp
De mecircme comme la relation drsquoadjacence est symeacutetrique mettre p(xy) agrave gt (resp perp) ne
peut pas ecirctre fait sans mettre p(yx) agrave gt (resp perp) Au lieu de consideacuterer les changements
individuels aux seules entreacutees de p on peut deacutefinir un ensemble de changements de bord
TE =⋃xisinA
⋃yisinA
⋃bisingtperp
τp(xy)7rarrbτp(yx)7rarrb
On pourrait alors utiliser TCcupTE comme lrsquoensemble des transformations au lieu de TΣ Bien
que cela ne change rien agrave la theacuteorie sur les solutions actuelles le fait que TCcupTE soit plus petit
que TΣ a un effet positif sur la performance drsquoun algorithme drsquoeacutenumeacuteration dans la pratique
La mecircme chose peut ecirctre dite des endomorphismes de lrsquoexemple 622 Plutocirct que de consideacuterer
tous les changements individuels des coordonneacutees (xy) des quatre coins de chaque eacuteleacutement
on pourrait deacutefinir des sous-ensembles correspondants agrave des modifications plus intuitives par
exemple lrsquoensemble des deacuteplacements horizontaux pourrait ecirctre deacutefini comme
TH =⋃eisinE
⋃pisinP
τleft(e) 7rarr pτright(e) 7rarr (τright(e)minus p)
On peut alors limiter la recherche pour les reacuteparations agrave celles qui sont faites uniquement
des deacuteplacements (horizontaux ou verticaux) ou des redimensionnements (horizontaux ou
verticaux) drsquoeacuteleacutements etc
159
(a) Le reacutesultat attendu
(b) Problegraveme drsquoalignement
Figure 65 ndash Eacuteleacutements mal aligneacutes capture et suggestion de correction
64 EXEMPLES
Les trois figures suivantes montrent des exemples simples de bugs montrant la capaciteacute de
lrsquooutil agrave rechercher des candidats de correction en se basant sur lrsquoapproche proposeacutee Les
figures montrent les verdicts qui sont des suggestions donneacutees par lrsquooutil pour chacun des cas
Il est a noteacute que le processus prend entre 2 et 20 millisecondes pour trouver un candidat (sans
prendre compte du temps drsquoeacutevaluation)
Exemple 1 eacuteleacutements mal aligneacutes Dans ce cas 65 la suggestion est de deacuteplacer 69 pixels
vers la gauche lrsquoeacuteleacutement qui a lrsquoidentifiant ID=2
160
(a) Le reacutesultat attendu
(b) Problegraveme de chevauchement
Figure 66 ndash Eacuteleacutements qui se chevauchent capture et suggestion de correction
Exemple 2 eacuteleacutements qui se chevauchent La suggestion est de deacuteplacer le bat de lrsquoeacuteleacutement
avec lrsquoID 11 agrave 126 pixels 66
Exemple 3 eacuteleacutement qui deacuteborde de son conteneur La suggestion est de deacuteplacer la
droite de lrsquoeacuteleacutement avec lrsquoID 14 agrave 1277 pixels 67
161
(a) Le reacutesultat attendu
(b) Problegraveme de deacutebordement
Figure 67 ndash Eacuteleacutement qui deacuteborde de son conteneur capture et suggestion de correction
CHAPITRE 7
CONCLUSION GEacuteNEacuteRALE
Les applications web se multiplient et se diversifient et les exigences de leurs utilisateurs srsquoac-
centuent et srsquoamplifient avec La relation application web-utilisateur est assureacutee uniquement
via la page Web Pour que cette relation soit tenue la page Web doit ecirctre entretenue et reacutepondre
agrave un ensemble de critegraveres se charger rapidement fournir le service deacutesireacute et ecirctre agreacuteable agrave
voir sur tous les appareils des ordinateurs de bureau ou portables des tablettes et teacuteleacutephones
mobiles Cependant la complexiteacute de la relation entre HTML CSS et JavaScript engendre des
difficulteacutes consideacuterables pour la mise en page des applications web le mecircme document peut
ecirctre afficheacute dans une varieacuteteacute de tailles de reacutesolutions de navigateurs et mecircme de peacuteripheacuteriques
entravant de ce fait la mise en page Les laquo bugs raquo de mise en page connaissent par conseacutequent
une preacutesence remarquable allant de problegravemes de particulariteacutes relativement simple tels que
des eacuteleacutements superposeacutes ou incorrectement aligneacutes agrave des problegravemes plus seacuterieux compromet-
tant la fonctionnaliteacute de lrsquointerface utilisateur Les tentatives bien que rares visant agrave reacutesoudre
ces problegravemes restent incapables de cerner tous les aspects de ceux-ci (problegravemes)
Nous distinguons dans ce contexte deux familles drsquoapproches servant agrave tester les interfaces
des applications web lrsquoapproche visuelle se basant sur la comparaison des captures drsquoeacutecran
pixel par pixel et lrsquoapproche deacuteclarative fonctionnant directement sur des informations sur
163
la mise en page Si dans la premiegravere qui fonctionne mal avec les donneacutees dynamiques le
deacuteveloppeur de test se heurte agrave lrsquoimpossibiliteacute de comparer des images de diffeacuterentes tailles
drsquoeacutecran il doit se soumettre dans la seconde aux exigences des descriptionsscripts de test
assez verbeux en deacutecrivant les regravegles de son interface graphique
Lrsquoapproche que nous proposons agrave savoir lrsquooutil Cornipickle offre les avantages suivants elle
fonctionne sur la majoriteacute de combinaisons navigateurssystegravemes drsquoexploitation sans recourir
aux plugins speacutecifiques au navigateur (ou limiteacutes par le navigateur) De plus elle permet
1 lrsquoeacutevaluation des speacutecifications en fonction des informations recueillies sur le client en se
dispensant de lrsquoeacutevaluation statique de HTML et CSS du cocircteacute serveur 2 lrsquointerpreacutetation des
speacutecifications de telle maniegravere agrave eacuteviter une charge de calcul excessive dans le navigateur
3 lrsquoutilisation drsquoun autre langage que JavaScript pour lrsquoimpleacutementation 4 la gestion des
proprieacuteteacutes comportementales impliquant plus drsquoun instantaneacute de page par lrsquooutil 5 la pos-
sibiliteacute agrave lrsquoutilisateur drsquoajouter de supprimer ou de modifier les speacutecifications eacutevalueacutees par
lrsquooutil 6 lrsquoexclusiviteacute drsquoexprimer agrave travers un langage deacuteclaratif des proprieacuteteacutes agrave propos du
document (Document Object Model) et des proprieacuteteacutes CSS drsquoune page Web 7 la potentialiteacute
de rechercher et deacutetecter automatiquement les bugs comportementaux et RWD (Responsive
Web Design) dans les applications web 8 la reacuteparation en fournissant un algorithme de base
pour calculer les transformations
Le prototype de preuve de concept de Cornipickle a montreacute des reacutesultats prometteurs dans sa
capaciteacute agrave exprimer facilement les conditions de bugs de mise en page dans les applications
web et agrave les deacutetecter efficacement dans des exemples de pages de plus de 35 applications
reacuteelles
Lrsquoefficaciteacute de notre outil Cornipickle nous a permis drsquoattraper automatiquement certains
problegravemes communs rencontreacutes dans les applications web modernes (RIA et RWD) Les
164
proprieacuteteacutes de Cornipickle garantissent que les pages drsquoune application suivent diffeacuterents
types de contraintes en particulier le seacutequenccedilage possible des pages qui est lrsquoobjectif de ce
volet de notre travail En combinant les performances de Crawljax pour explorer les eacutetats
de lrsquoapplication (crawler state-aware) et un stateful test oracle (speacutecifications de logiques
temporelles du premier ordre) dans Cornipickle nous avons obtenu des reacutesultats prometteurs
Une petite application a eacuteteacute deacuteveloppeacutee et inteacutegreacutee afin de tester le rendu visuel dans les
diffeacuterentes fenecirctres possibles afin drsquoattraper les deacutefauts RWD
Notre solution a quelques limites et surmonter ces limitations pourrait ecirctre la base de futurs
travaux Lrsquoutilisation de Cornipickle nous limite agrave des contraintes se reacutefeacuterant uniquement aux
eacuteleacutements qui sont afficheacutes Cela rend les bugs causeacutes au niveau backend (cocircteacute serveur) parfois
difficiles agrave attraper il est neacutecessaire de trouver les eacuteleacutements afficheacutes qui peuvent indirectement
repreacutesenter les eacutetats du serveur Dans la mecircme ligne si Crawljax ne notifie pas un changement
drsquoeacutetat lorsque le DOM change il nrsquoest pas possible drsquoeacutevaluer cette page ougrave un bug aurait pu
se produire En outre lorsqursquoune proprieacuteteacute est eacutevalueacutee agrave false elle est fausse pour le reste
de lrsquoanalyse et aucun autre bug ne peut ecirctre intercepteacute avec cette proprieacuteteacute Cela a causeacute un
problegraveme avec la deacutecouverte de bugs RWD observables car la plupart des eacutechecs ne sont pas
observables et les proprieacuteteacutes devaient trouver un bug observable comme premier bug
De plus la capaciteacute de Cornipickle agrave renvoyer une explication utile de la violation drsquoune
proprieacuteteacute sur un document Web donneacute est limiteacutee Crsquoest pourquoi nous avons introduit une
deacutefinition du concept de reacuteparation dont le calcul fournit des informations plus preacutecises sur les
changements requis pour une structure afin de satisfaire une speacutecification donneacutee Lrsquoeacutetude des
reacuteparations et leur calcul fait partie du travail en cours et de nombreux problegravemes sont encore
ouverts Par exemple un calcul efficace des reacuteparations repose sur la suppression du plus
grand nombre possible de transformations candidates par conseacutequent des techniques pour
identifier facilement des endomorphismes qui ne peuvent jamais faire partie drsquoune solution
165
pourraient ecirctre rechercheacutees De mecircme nous preacutevoyons drsquoeacutetudier des techniques qui pourraient
geacuteneacuterer lrsquoensemble des reacuteparations directement agrave partir de la speacutecification et de la structure
deacutefectueuse plutocirct que drsquoutiliser lrsquoalgorithme brut de geacuteneacuteration et de test preacutesenteacute
Le concept de calcul des reacuteparations est en cours de construction et il reste agrave eacutetablir ses liens
avec les travaux connexes Comme nous lrsquoavons vu dans la section preacuteceacutedente trouver des
reacuteparations concerne le concept de reacutesolution de satisfiabiliteacute (SAT) et plus preacuteciseacutement le
problegraveme du SAT increacutementiel [64] Les solveurs SAT traditionnels sont neacutecessaires pour
trouver un seul modegravele drsquoexpression En SAT increacutementiel un solveur trouve un premier
modegravele drsquoexpression mais peut eacutegalement ecirctre demandeacute agrave plusieurs reprises de fournir des
modegraveles suppleacutementaires Lorsqursquoun ensemble de transformations est termineacute lrsquoiteacuteration sur
les modegraveles revient agrave effectuer des iteacuterations sur les reacuteparations
BIBLIOGRAPHIE
[1] Alm specifications examples http auckland-
layoutsourceforgenetexamplesindexhtml
[2] Applitools visual test automation httpwwwapplitools
comAccessed25April2016
[3] Blackout repport httpssiteshksharvardeduhepgPapersNYISO
blackoutreport8Jan04pdf
[4] Bugs catastrophiques httpwwwslidesharenetwearesocialsg
social-media-for-travel-brands
[5] critical-rendering-path httpsdevelopersgooglecomwebfundamentals
performancecritical-rendering-path
[6] Deacutefinition du viewport httpswwwdefinitions-marketingcomdefinition
viewport
[7] Exemple webspecwatij https gistgithubcomtux2323954186
[8] Froont httpfroontcom
167
[9] Galen httpwwwswtestacademycomgalen-framework
[10] galen framework 2017 httpgalenframeworkcom
[11] howbrowserswork 2017 HTTPtaligarsielcomProjects
howbrowserswork1html
[12] Html and css w3c standards httpswwww3orgstandardswebdesign
htmlcss
[13] Http response httpswwww3orgProtocolsrfc2616rfc2616-sec6html
sec6
[14] http coursescsvteduprofessionalismtherac_25therac_1html httpcourses
csvteduprofessionalismTherac_25Therac_1html
[15] http wearesocialsg httpwearesocialsg
[16] http wwwcnncom2003us0814poweroutage httpwwwcnncom2003US
0814poweroutage
[17] http wwwyfolirenethumrhumeur13htm httpwwwyfolirenethumr
humeur13htm
[18] Les bases de sahiscript https sahiprocomdocsscriptingsahi-scripting-basicshtml
[19] mobile and tablet internet usage exceeds desktop for first
time worldwide httpgsstatcountercompress
mobile-and-tablet-internet-usage-exceeds-desktop-for-first-time-worldwide
[20] Phantomcss 2017 httpsgithubcomHuddlePhantomCSS
168
[21] Principe de fonctinement de sahi https wwwthoughtworkscominsightsblogintroduction-
sahi-part-1
[22] Respondr httprespondrio
[23] Responsinator httpswwwresponsinatorcom
[24] Responsivepxcom httpresponsivepxcom
[25] Reuters us-blackout-newyork 2003 https
wwwreuterscomarticleus-blackout-newyork
spike-in-deaths-blamed-on-2003-new-york-blackout-idUSTRE80Q07G20120127
[26] Rwdbookmarklet httpswwwsitepointcom
responsive-web-design-tool
[27] Screenfly httpquirktoolscomscreenfly
[28] Software bugs found to be cause of toyota acceleration death httpswwwgoogle
frampswwwcomputerworldcomarticle2573466disaster-recovery
software-failure-cited-in-august-blackout-investigationamphtml
[29] Software failure cited in august blackout investigation https
wwwcomputerworldcomarticle2573466disaster-recovery
software-failure-cited-in-august-blackout-investigationhtml
[30] Utilisation de capybara https wwwsitepointcombasics-capybara-improving-tests
[31] Vpresizer httplabmaltewassermanncomviewport-resizer
[32] Washingtonpost toyota reaches 12-billion settlement to end criminal
probe2014 httpswwwwashingtonpostcombusinesseconomy
169
toyota-reaches-12-billion-settlement-to-end-criminal-probe2014
03195738a3c4-af69-11e3-9627-c65021d6d572_storyhtmlutm_term=
4826d81e2aa6
[33] Watir http watircom
[34] websiteresponsivetest httpwwwwebsiteresponsivetestcom
[35] A Arora and M Sinha Web application testing A review on techniques tools and state
of art International Journal of Scientific Iamp Engineering Research 3(2) 1ndash6 2012
[36] K Benjamin G Von Bochmann M E Dincturk G-V Jourdan and I V Onut A stra-
tegy for efficient crawling of rich internet applications In 11th international conference
on Web engineering serICWErsquo11 page 74ndash89 Heidelberg Springer-Verlag 2011
[37] Tim Berners-Lee Roy Fielding and Larry Masinter Uniform resource identifier (URI)
Generic syntax Technical report January 2005 RFC 3986
[38] Oussama Beroual Francis Guerin and Sylvain Halleacute Searching for behavioural bugs
with stateful test oracles in web crawlers In 10th IEEEACM International Workshop on
Search-Based Software Testing SBSTICSE 2017 Buenos Aires Argentina May 22-23
2017 pages 7ndash13 2017
[39] T-H Chang T Yeh and RC Miller Gui testing using computer vision In the SIGCHI
Conference on H man Factors in Computing Systems CHI rsquo10 pages 1535ndash1544 New
York NY USA may 2010 ACM
[40] S Choudhary E Dincturk S Mirtaheri G-V Jourdan G Bochmann and I Onut
Building rich internet applications models Example of a better strategy In Web
Engineering ser Lecture Notes in Computer Science F Daniel P Dolog and Q Li
volume 7977 page 291ndash305 Springer Berlin Heidelberg 2013
170
[41] S Choudhary M E Dincturk S M Mirtaheri A Moosavi G von Bochmann G-V
Jourdan and I-V Onut Crawling rich internet applications the state of the art In
CASCON page 146ndash160 IBM Corp 2012
[42] Shauvik Roy Choudhary Mukul R Prasad and Alessandro Orso X-PERT accurate
identification of cross-browser issues in web applications In David Notkin Betty H C
Cheng and Klaus Pohl editors 35th International Conference on Software Engineering
ICSE rsquo13 San Francisco CA USA May 18-26 2013 pages 702ndash711 IEEE ACM
2013
[43] V Dallmeier M Burger T Orth and A Zeller Webmate Generating test cases for
web 20 In D Winkler S Biffl J Bergsmann (Eds) SWQD volume 133 of Lecture
Notes in Business Information Processing page 55ndash69 Springer 2013
[44] M E Dincturk ldquomodel-based crawling ndash an approach to design efficient crawling
strategies for rich internet applications Masterrsquos thesis EECS - University of Ottawa
2013
[45] M E Dincturk S Choudhary G von Bochmann G-V Jourdan and I-V Onut A
statistical approach for efficient crawling of rich internet applications ICWE page
362ndash369 2012
[46] Mustafa Emre Model-based Crawling - An Approach to Design Efficient Crawling
Strategies for Rich Internet Applications PhD thesis University of Ottawa 2013
[47] Jesse James Garrett Ajax A new approach to web applications - adaptive path 2005
[48] Alan Grosskurth and Michael Godfrey A case study in architectural analysis The
evolution of the modern web browser Software Maintenence and Evolution Research
and PracticeEMSE 2007
171
[49] Allan Grosskurth and Michael Godfrey A reference architecture for web browsers
Software Maintenence and Evolution Research and Practice page 1ndash7 2006
[50] A Guttman R-trees a dynamic index structure for spatial searching June 1984
[51] Sylvain Halleacute Nicolas Bergeron Francis Guerin Gabriel Le Breton and Oussama
Beroual Declarative layout constraints for testing web applications J Log Algebr Meth
Program 85(5) 737ndash758 2016
[52] Sylvain Halleacute and Oussama Beroual Fault localization in web applications via model
finding In Proceedings First Workshop on Causal Reasoning for Embedded and safety-
critical Systems Technologies CRESTETAPS 2016 Eindhoven The Netherlands 8th
April 2016 pages 55ndash67 2016
[53] Sylvain Halleacute and Roger Villemaire Constraint-based invocation of stateful web services
The Beep Store (case study) In 4th International ICSE Workshop on Principles of
Engineering Service-Oriented Systems PESOS 2012 June 4 2012 Zurich Switzerland
pages 61ndash62 2012
[54] S Halleacute G Le Breton F Maronnaud A Blondin Masseacute and S Gaboury Exhaustive
exploration of ajax web applications with selective jumping In ICST page 243ndash252
IEEE Computer Society 2014
[55] Arnaud Le Hors Philippe Le Heacutegaret Lauren Wood Gavin Nicol Jonathan Ro-
bie Mike Champion and Steve Byrne Document object model level 2 core 2000
http wwww3orgTRDOM-Level-2-Core
[56] Jaakko Jaumlrvi Mat Marcus Sean Parent John Freeman and Jacob Smith Algorithms for
user interfaces In Proceedings of the Eighth International Conference on Generative
172
Programming and Component Engineering GPCE rsquo09 pages 147ndash156 New York NY
USA 2009 ACM
[57] Jaakko Jaumlrvi Mat Marcus Sean Parent John Freeman and Jacob N Smith Property
models from incidental algorithms to reusable components In Yannis Smaragdakis and
Jeremy G Siek editors GPCE pages 89ndash98 ACM 2008
[58] Sonal Mahajan and William G J Halfond WebSee A tool for debugging HTML pre-
sentation failures In 8th IEEE International Conference on Software Testing Verification
and Validation ICST 2015 Graz Austria April 13-17 2015 pages 1ndash8 2015
[59] Ethan Marcotte Responsive web design Eyrolles 4 edition 2013
[60] A Mesbah A van Deursen and S Lenselink Crawling Ajax-based web applications
through dynamic analysis of user interface state changes ACM Transactions on the Web
(1) 6 2012
[61] S M Mirtaheri D Zou G V Bochmann G-V Jourdan and I V Onut Dist-ria crawler
A distributed crawler for rich internet applications In 8th International Conference on
P2P Parallel Grid Cloud and Internet Computing pages 105ndash112 IEEE Computer
Society Washington 2013
[62] Seyed M Mirtaheri Mustafa Emre Dincturk Salman Hooshmand Gregor V Bochmann
and Guy-Vincent Jourdan A brief history of web crawlers In CASCON rsquo13 Proceedings
of the 2013 Conference of the Center for Advanced Studies on Collaborative Research
pages 40ndash54 IBM Corp Riverton NJ USA ccopy2013 2013
[63] MTamm Http response httpsdeslidesharenetMichaelTamm
fighting-layout-bugs
173
[64] Alexander Nadel and Vadim Ryvchin Efficient SAT solving under assumptions In SAT
pages 242ndash255 2012
[65] C Olston and M Najork Web crawling Foundations and Trends in Information
Retrieval 4 175ndash246 2010
[66] Sean Parent Mat Marcus and Foster Brereton ASL overview Technical report Adobe
Systems 2007 httpstlabadobecomgroup__asl__overviewhtml
[67] Pedro A Szekely Piyawadee Noi Sukaviriya Pablo Castells Jeyakumar Muthukumara-
samy and Ewald Salcher Declarative interface models for user interface construction
tools the MASTERMIND approach In Leonard J Bass and Claus Unger editors
Proceedings of the IFIP TC2WG27 Working Conference on Engineering for Human-
Computer Interaction volume 45 of IFIP Conference Proceedings pages 120ndash150
Chapman amp Hall 1995
[68] Seyed M Mir Taheri Distributed Crawling of Rich Internet Applications PhD thesis
University of Ottawa 2015
[69] Michael Tamm Fighting layout bugs 2009 httpswwwyoutubecomwatchv=
WY3C6FHqSqQ
[70] Hideo Tanida Mukul R Prasad Sreeranga P Rajan and Masahiro Fujita Automated
system testing of dynamic web applications volume 303 page 181ndash196 Springer Berlin
Heidelberg 2013
[71] te (testing experience) The Magazine for Professional Testers Test automation - does it
make sense a simplified automation solution using watij wwwtestingexperiencecom
[72] Thomas A Walsh Gregory M Kapfhammer and Phil McMinn Automated layout
failure detection for responsive web pages without an explicit oracle In Proceedings
174
of the 26th ACM SIGSOFT International Symposium on Software Testing and Analysis
Santa Barbara CA USA July 10 - 14 2017 pages 192ndash202 2017
[73] Thomas A Walsh Gregory M Kapfhammer and Phil McMinn Redecheck an auto-
matic layout failure checking tool for responsively designed web pages In Proceedings
of the 26th ACM SIGSOFT International Symposium on Software Testing and Analysis
Santa Barbara CA USA July 10 - 14 2017 pages 360ndash363 2017
[74] Thomas A Walsh Phil McMinn and Gregory M Kapfhammer Automatic detection
of potential layout faults following changes to responsive web pages (N) In 30th
IEEEACM International Conference on Automated Software Engineering ASE 2015
Lincoln NE USA November 9-13 2015 pages 709ndash714 2015
