Chromium Chronicle Nr. 10: UI-Regressionen mit Pixeltests erfassen

Projektpfad: /blog/_project.yaml Buchpfad: /_buch.yaml page_type: Blog Aktualisierungsdatum: 05.02.2020 Beschreibung: Die Teststrategie von Chrome stützt sich stark auf automatisierte Tests zur Funktionsrichtigkeit und manuelle Tests. Mit keiner dieser Methoden werden jedoch geringfügige UI-Regressionen zuverlässig erkannt. Mit Pixeltests können Sie das Testen der Benutzeroberfläche Ihres Desktop-Browsers automatisieren. image_path: ../images/chromiumchronicle.jpg Keywords: docType:Blog,chromiumchronicle

Folge 10: von Sven Zheng in Bellevue, Washington, USA (Januar 2020)
Vorherige Folgen

Die Teststrategie von Chrome stützt sich stark auf die automatisierte Funktionsfähigkeit Tests und manuelle Tests, aber keine von diesen erkennt kleinere Benutzeroberflächen Regressionen durchführen. Mit Pixeltests können Sie die Benutzeroberfläche Ihres Desktop-Browsers automatisieren.

Vermeiden Sie beim Schreiben eines Pixeltests Flecken, indem Sie (1) die Animation deaktivieren, (2) anhand von simulierten Daten und (3) Testen der minimalen Oberfläche.

Hier ist ein Beispielbild, mit dem die Pixelrichtigkeit für die Omnibox überprüft wird:

Omnibox-Bild für den Pixelvergleich.

Der Code zur Bestätigung des Browsers stimmt mit dem folgenden Bild überein:

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);
}

Sie finden diesen Code unter chrome/test/pixel/demo/skia_gold_demo_pixeltest.cc. Die relevanten Header sind skia_gold_pixel_diff.h für Unittests und browser_skia_gold_pixel_diff.h für Browsertests.

Der Pixelunterschied und der Freigabeprozess basieren auf Skia Gold. Skia Gold-Pixel bieten einen visuellen Genehmigungs-Workflow und ermöglichen es Entwickelnden, durch die Genehmigung mehrerer Goldaufnahmen.

Derzeit wird die Testsuite unter dem Windows-Bot für Informationen ausgeführt. Browser tests und Ansichten-Einheitentests werden unterstützt.