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

project_path: /blog/_project.yaml book_path: /_book.yaml page_type: blog refresh_date: 2020-02-05 description: La stratégie de test de Chrome repose en grande partie sur des tests d'exactitude fonctionnelle et manuels, mais aucune de ces méthodes n'identifie de manière fiable les régressions mineures de l'interface utilisateur. Utilisez des tests de pixels pour automatiser le test de l'interface utilisateur de votre navigateur pour ordinateur. image_path: ../images/chromiumchronicle.jpg keywords: docType:Blog,chromiumchronicle

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

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

Lorsque vous écrivez un test de pixels, évitez les irrégularités 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 permettant de vérifier l'exactitude des pixels dans l'omnibox:

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

Et le code permettant de vérifier que 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 sous 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 de navigateur.

Le processus de comparaison et d'approbation des pixels est fourni par Skia Gold. Les tests de pixels Skia Gold fournissent un workflow d'approbation visuel et permettent aux développeurs d'accepter de petits éclats en approuvant plusieurs images dorées.

La suite de tests s'exécute actuellement sur le bot Windows FYI. Les tests de navigateur et les tests unitaires des vues sont acceptés.