Chromium Chronicle nr 10: wyłapywanie regresji interfejsu użytkownika dzięki testom Pixela

Odcinek 10: Sven Zheng z Bellevue w stanie Waszyngton (styczeń 2020 r.)
Poprzednie odcinki

Strategia testowania Chrome opiera się głównie na automatycznych testach poprawności działania i testach ręcznych, ale żadna z tych metod nie pozwala skutecznie wykrywać drobnych regresji interfejsu. Używaj testów pikseli do automatyzacji testowania interfejsu użytkownika przeglądarki na komputerze.

Podczas pisania testu pikseli unikaj niestabilności, wykonując te czynności: (1) wyłącz animację, (2) użyj danych testowych i (3) przetestuj minimalną możliwą powierzchnię.

Oto przykładowy obraz służący do sprawdzania prawidłowej kolejności pikseli w polu wyszukiwania:

Obraz w polu wyszukiwania używany do porównywania pikseli.

A kod, który potwierdza, że przeglądarka jest zgodna z tym obrazem:

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

Kod ten znajduje się w pliku chrome/test/pixel/demo/skia_gold_demo_pixeltest.cc. Ważne nagłówki to skia_gold_pixel_diff.h w przypadku testów jednostkowych i browser_skia_gold_pixel_diff.h w przypadku testów przeglądarki.

Proces porównywania i zatwierdzania pikseli jest obsługiwany przez Skia Gold. Testy pikselowe zgodne ze standardem Skia Gold zapewniają wizualny przepływ pracy dotyczący zatwierdzania. Pozwalają deweloperom akceptować małe płatki, zatwierdzając wiele obrazów z złotymi pikselami.

Obecnie zestaw testów jest uruchamiany na botie FYI dla Windows. Obsługiwane są testy przeglądarek i testy jednostkowe widoków.