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

project_path: /blog/_project.yaml book_path: /_book.yaml page_type: Blog refresh_date: 2020-02-05 description: Die Teststrategie von Chrome stützt sich stark auf automatisierte Funktionsrichtigkeitstests und manuelle Tests. Kleinere Regressionen der Benutzeroberfläche werden jedoch nicht 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 aus Bellevue, Washington (Januar 2020)
Vorherige Folgen

Die Teststrategie von Chrome stützt sich stark auf automatisierte Funktionsrichtigkeitstests und manuelle Tests. Kleinere Regressionen an der Benutzeroberfläche lassen sich jedoch nicht zuverlässig erkennen. Mit Pixeltests können Sie Tests der Benutzeroberfläche Ihres Desktop-Browsers automatisieren.

Vermeiden Sie beim Schreiben eines Pixeltests Schuppen, indem Sie (1) die Animation deaktivieren, (2) Pseudodaten verwenden und (3) die minimal mögliche Oberfläche testen.

Hier ist ein Beispielbild zur Überprüfung der Pixelrichtigkeit der Omnibox:

Omnibox-Bild für Pixelvergleich

Und der Code zur Überprüfung des Browsers entspricht diesem Bild:

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

Dieser Code ist unter chrome/test/pixel/demo/skia_gold_demo_pixeltest.cc verfügbar. Die relevanten Header sind skia_gold_pixel_diff.h für Einheitentests und browser_skia_gold_pixel_diff.h für Browsertests.

Der Pixelunterschied und der Genehmigungsprozess basieren auf Skia Gold. Skia Gold-Pixeltests bieten einen visuellen Genehmigungsworkflow und ermöglichen es Entwicklern, durch die Genehmigung mehrerer goldener Bilder kleine Bildfehler zu erkennen.

Derzeit wird die Testsuite auf dem Windows FYI-Bot ausgeführt. Browsertests und Einheitentests für Ansichten werden unterstützt.