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: 05-02-2020 description: La stratégie de test de Chrome repose en grande partie sur des tests manuels et automatisés d'exactitude des fonctionnalités, mais aucune de ces méthodes ne détecte de façon 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:par Sven Zheng à Bellevue, Washington (janvier 2020)
Épisodes précédents

La stratégie de test de Chrome repose en grande partie sur l'exactitude des fonctionnalités automatisées. et manuels, mais aucune de ces méthodes ne détecte de manière fiable l'interface utilisateur mineure. régressions. 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, vous pouvez éviter les problèmes de fluidité en: (1) désactivant l'animation ; (2) en utilisant des données fictives et (3) en testant 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 comparer les 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 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.

Le processus d'approbation et de différenciation des pixels est géré par Skia Gold. Skia Gold pixel fournissent un flux de travail 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 pour info. Tests du navigateur et les tests unitaires sur les vues sont acceptés.