Chromium Chronicle n°10: détecter les régressions d'interface utilisateur grâce aux tests Pixel

Épisode 10:par Sven Zheng à Bellevue (Washington, États-Unis) (janvier 2020)
Épisodes précédents

La stratégie de test de Chrome repose fortement sur des tests d'exactitude fonctionnelle automatisés et des tests manuels, mais aucun de ces deux éléments ne détecte de manière fiable les régressions mineures de l'interface utilisateur. Utilisez des tests de pixels pour automatiser les tests de l'interface utilisateur de votre navigateur pour ordinateur.

Lorsque vous écrivez un test de pixel, évitez les erreurs en procédant comme suit: (1) désactivez l'animation, (2) utilisez des données fictives et (3) testez la surface minimale possible.

Voici un exemple d'image utilisée pour vérifier la précision des pixels de la barre omnibox:

Image de la barre omnibox utilisée pour la comparaison des pixels.

Le code permettant de valider le navigateur correspond à cette image:

IN_PROC_BROWSER_TEST_F(SkiaGoldDemoPixelTest, TestOmnibox) {
  // Always disable animation for stability.
  ui::ScopedAnimationDurationScaleMode disable_animation(
      ui::ScopedAnimationDurationScaleMode::ZERO_DURATION);
  GURL url("chrome://bookmarks");
  AddTabAtIndex(0, url, ui::PageTransition::PAGE_TRANSITION_FIRST);
  auto* const browser_view = BrowserView::GetBrowserViewForBrowser(browser());
  // CompareScreenshot() takes a screenshot and compares it with the
  // golden image, which was previously human-approved, is stored
  // server-side, and is managed by Skia Gold. If any pixels differ, the
  // test will fail and output a link for the author to triage the
  // new image.
  bool ret = GetPixelDiff().CompareScreenshot("omnibox",
      browser_view->GetLocationBarView());
  EXPECT_TRUE(ret);
}

Ce code se trouve dans chrome/test/pixel/demo/skia_gold_demo_pixeltest.cc. Les en-têtes pertinents sont skia_gold_pixel_diff.h pour les tests unitaires et browser_skia_gold_pixel_diff.h pour les tests du navigateur.

La comparaison des pixels et le processus d'approbation sont gérés par Skia Gold. Les tests de pixels Skia Gold fournissent un workflow d'approbation visuelle et permettent aux développeurs d'accepter de petites écailles en approuvant plusieurs images d'or.

Actuellement, la suite de tests s'exécute sur le bot Windows FYI. Les tests du navigateur et les tests unitaires des vues sont acceptés.