BT

La comparaison d'image pour un déploiement continu plus sûr

par Grischa Ekart , traduit par Dimitri Baeli le 10 oct. 2013 |

Lors de la conférence Velocity 2013, Brett Slatkin de Google a présenté une méthode de comparaison d'image pour détecter les régressions graphiques. Une comparaison d'image (perceptual diff) compare deux photos de différentes versions d'une même page web et détecte les différences pixel par pixel.

Selon Brett, cette comparaison d'image comble un manque important dans l'automatisation des tests de régression. En effet, le déploiement continu repose sur l'automatisation d'une multitude de tests pour augmenter la confiance sur la qualité du code et des déploiements. Dans les faits, les recettes dites "manuelles" sont toujours nécessaires pour détecter des erreurs non détectables par la batterie de tests. Ces tests manuels coûtent très cher, sont répétitifs et ont un très faible rendement (temps passé contre bugs trouvés). Un exemple vécu est la mise en production d'une anomalie graphique qui s'est retrouvée en production sans avoir été détectée sur l'ensemble de la chaine de tests (pour la petite histoire c'était un poney rose ajouté sur une page juste pour des tests).

La comparaison visuelle automatisée (perceptual diffs) présentée utilise un navigateur headless (PhantomJS) pour le calcul du rendu web et la génération d'images. Ces images sont comparées et produisent une image contrastée des différences facilement détectable à l'oeil.

Cette méthode a été présentée l'année dernière lors d'une session Velocity Ignite, et est utilisée chez Google pour le déploiement des Enquêtes de consommateurs (Consumer Surveys) pour augmenter la confiance dans les déploiements. Le retour d'expérience de Brett est que cet outillage permet de détecter beaucoup plus facilement : les erreurs de mise en page (layout), l'affichage de chiffres (formatage), les erreurs de tris. Il reconnait que certains faux positifs tels que les variations de dates doivent être cachés. Cet outillage de détection automatisée de variation graphique marche vraiment bien sur des pages dites "statiques" (dont le contenu ne varie pas), et les pages dites "dynamiques" que l'on peut charger avec un jeu de données identiques entre deux photos.

Une version open source appelée Depicted (dpxdt) peut-être trouvée sur GitHub. Celui-ci permet d'intégrer cette détection automatisée au déploiement continu.

En conclusion, Brett confirme que cette pratique a augmenté leur confiance sur le processus de déploiement. Un temps de déploiement plus court entrainant un gain de motivation. Une plus grande confiance dans ce même processus de déploiement permet aussi aux nouveaux de mettre leurs développements en production avec un temps d'apprentissage réduit significativement.

Bonjour étranger!

Vous devez créer un compte InfoQ ou cliquez sur pour déposer des commentaires. Mais il y a bien d'autres avantages à s'enregistrer.

Tirez le meilleur d'InfoQ

Donnez-nous votre avis

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

M'envoyer un email pour toute réponse à l'un de mes messages dans ce sujet
Commentaires de la Communauté

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

M'envoyer un email pour toute réponse à l'un de mes messages dans ce sujet

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

M'envoyer un email pour toute réponse à l'un de mes messages dans ce sujet

Discuter

Contenu Éducatif

Rien ne serait possible sans le soutien et la confiance de nos Sponsors Fondateurs:

AppDynamics   CloudBees   Microsoft   Zenika
Feedback Général
Bugs
Publicité
Éditorial
InfoQ.com et tous les contenus sont copyright © 2006-2013 C4Media Inc. InfoQ.com est hébergé chez Contegix, le meilleur ISP avec lequel nous ayons travaillé.
Politique de confidentialité
BT